Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML5 - Básico - Intermedio - Avanzado

Presentación Básica, Intermedia y Avanzada de HTML5
by

Jonay Herrera

on 20 December 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5 - Básico - Intermedio - Avanzado

Un poco de historia... HTML En 1991, Tim Berners Lee inventa el HyperText Markup Language, que contaba sólo con unos 20 tags.
HTML 2.0 se convierte en la primera especificación, que incluye el tag img.
En 1999, el W3C publica la especificación de HTML 4.01.
En 2000, se publica la especificación de XHTML 1.0 (la "X" es de eXtensible). No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, según el lenguaje XML, mucho más estricto.
En 2001, se publica la especificación de XHTML 1.1. 1991: Tim, redacta el primer documento formal con la descripción de HTML (HyperText Markup Language), que contaba sólo con unos 20 tags (etiquetas). 1995: HTML 2.0 se convierte en la primera especificación, que incluye el tag img. 1999: El W3C publica la última especificación oficial siendo el HTML 4.01. 2000: W3C publica la especificación de XHTML 1.0 (la "X" es de eXtensible). No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, según el lenguaje XML, mucho más estricto. 2001: W3C publica la especificación de XHTML 1.1. 2006: W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2 que resultaba un lenguaje basado en un XML más puro... ...pero no era compatible con anteriores versiones de HTML, ni con las páginas ya existentes. 2004: Las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG 1980: Físico Tim Berners-Lee trabajador de CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). 1993: El organismo IETF (Internet Engineering Task Force) realiza la primera propuesta oficial para convertir HTML en un estándar. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML. 1997: W3C Publica HTML 3.2 Incluye funciones nuevas como applets de Java y texto que fluye alrededor de las imágenes. 1998: W3C Publica HTML 4.0 Mejoras a destacar: Hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios. 2007: WHATWG publica un primer borrador (no oficial) de lo que será HTML 5.0, a su vez, W3C decide retomar la actividad estandarizadora de HTML. 2008: WHATWG presenta su primer borrador oficial de HTML5 (Web Hypertext Application Technology Working Group). 2009: Muere XHTML 2.0 El WHATWG y el W3C siguen trabajando en el HTML5 en paralelo, pero con métodos distintos. En 2012, la especificación tendrá el status de "Candidate Recommendation". Probablemente, no será "Proposed Recommendation" hasta 2022. Conceptos Básicos... XHTML 1.1 HTML 5 ELEMENTOS: - Los elementos son la estructura básica de HTML.
- Tienen dos propiedades básicas: atributos y contenido.
- Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML.
- Un elemento generalmente tiene una etiqueta de inicio.
- Los atributos del elemento están contenidos en la etiqueta
de inicio y el contenido está ubicado entre las dos etiquetas. ejemplo:
<nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento> ETIQUETAS: <html> <script> <head> <title> <link> <style> <meta> <body> <h1> ... <h6> <table> <tr> <td> <a> <div> <img> <li><ol><ul> <b> <i> <s> <u> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta charset=UTF-8> <script type="text/javascript" src="jquery.js"></script> <script src=jquery.js></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" href="styles.css"> <- MAYOR SIMPLICIDAD EN LAS DECLARACIONES -> vs REDEFINICION DE ETIQUETAS <ol>: se añaden los atributos start y reversed.

<cite>: sólo se puede utilizar para marcar la obra, no al autor. Rompe la retrocompatibilidad con anteriores versiones de HTML.

<em, i>: em denota énfasis, mientras que i marca una cursiva con fines estilísticos, por ejemplo un extranjerismo.

<strong, b>: strong denota importancia, mientras que b marca una negrita con fines estilísticos, sin una importancia especial.

<small>: para marcar la "letra pequeña", por ejemplo copyrights, aspectos legales, atribuciones... ETIQUETAS OBSOLETAS <applet> <big> <center> <font> <frame> <blink> <marquee> Fin de presentación CONCEPTOS BÁSICOS. Conceptos Intermedios... ¿Qué es HTML? HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). NUEVAS ETIQUETAS ETIQUETAS ESTRUCTURALES ANTES AHORA Define un encabezado de página, por lo general contiene el logotipo y el nombre del sitio y posiblemente un menú horizontal. No es necesario colocarlo al principio de la página.
Puede contener:
- banners publicitarios en posición destacado
- iconos de acceso directo Define una sección que contiene enlaces de navegación.
Puede haber varios en un mismo documento:
Por ej.: Una página con enlaces internos, como una tabla de contenido y otro con los enlaces de navegación del sitio web. Tiene por objeto identificar porciones significativas del contenido de la página. Es de alguna forma análoga a dividir un libro en capítulos. Agrupa contenido semánticamente. Representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año. FORMULARIOS MULTIMEDIA Una nueva forma de incrustar vídeos y audios de forma nativa: <audio src="cancion.???" > </audio>
<video src="video.???" > </video> ATRIBUTOS autoplay: reproducción automática.

controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto.

poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.

width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px.

loop: reproduce el vídeo en bucle.

preload: precarga el vídeo.

src: indica la fuente del vídeo. H.264 o MPEG-4 (mp4) y MPEG-1 (mp3): Codec de alta calidad, propietario, que era un standard de facto. Es soportado por Chrome, Safari, IE, y prácticamente todos oos reproductores comerciales.
Ogg Theora (ogg, ogv) y Ogg Vorbis (ogg): Codec de menor calidad, libre. Soportado por Chrome, Firefox y Opera.
VP8 (WebM): Codec de alta calidad, comprado por Google y liberado, es el llamado a acabar con la guerra. Actualmente lo soportan Chrome, Firefox 4, Opera (y Safari instalando los códecs, e IE9 con un plugin). Existen multitud de codecs de vídeo, y no todos los navegadores soportan los mismos: ETIQUETAS MENOS DESTACABLES... Conceptos Avanzados PROGRESS: Representa el grado de progreso de una tarea.
METER: Define una medida escalar, dentro de un rango conocido.
BDI: Define una parte del texto que debe ser entendido aparte de la línea de contenido que se esté escibiendo.
MENU: una lista de opciones que formen parte de un menú.
COMMAND: Uno de los elementos o botones de un menú de opciones.
DETAILS: Detalles o información suplementaria que se puede ver u ocultar por el usuario.
SUMMARY: Encabezamiento para detalles especificados en DETAILS.
FIGURE: es un contenido que ilustre el artículo, como fotos, diagramas, ilustraciones, etc.
FIGCAPTION: El pie o explicación de un FIGURE.
HGROUP: Un grupo de encabezamientos, útil cuando se tiene diversos bloques de encabezamientos del mismo nivel H1, H2...
MARK: Un texto o información que es remarcable.
TIME: Para escribir una fecha, una hora o ambas.
WBR: Define un posible salto de línea. CANVAS Canvas permite la generación de gráficos dinámicamente por medio del scripting. WEB STORAGE LocalStorage Es un método que nos ofrecen los navegadores para guardar pares de valores llave/valor de manera sencilla y dándonos unos 5 Mb. Al igual que las cookies, ésta información no desaparece si uno navega fuera de la página.

Al contrario de las cookies, esta información queda guardada en el ordenador del cliente y no viaja con cada petición. Soportado por prácticamente todos los navegadores, excepto IE6, IE7 y Safari 3.2. Web SQL Database Base de datos SQL que la mayoría de los navegadores la implementan usando SQLite, cuyo dialecto de SQL es bastante completo.

· Muy interesante para aplicaciones web.
· Soporte en Chrome, Safari, Opera, iOS y Android.
· El desarrollo se ha abandonado y podría desaparecer de la especificación.
· Parece que en el futuro será sustituido por IndexedDB. DRAG AND DROP GEOLOCALIZACIÓN WEBWORKERS - Una API para lanzar procesos en segundo plano.
- El usuario puede seguir haciendo otras cosas.
- Pueden hacer peticiones XMLHttpRequest.
- Soporte en Firefox, Safari y Chrome. Muchas gracias por vuestra atención...
Full transcript