taller de html5. clase 01 – prof. germán rodrÍguez
TRANSCRIPT
![Page 1: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/1.jpg)
TALLER DE HTML5.Clase 01 – Prof. Germán RODRÍGUEZ
![Page 2: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/2.jpg)
NIVELACIÓNConceptos básicos para hablar el mismo idioma
![Page 3: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/3.jpg)
Conocimientos mínimos
![Page 4: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/4.jpg)
Browsers
FIREFOX SAFARI OPERA EXPLORER CHROME
AMAYA MOSAIC NETSCAPE ROCKMELT CANARY/AURORA
![Page 5: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/5.jpg)
Gente
![Page 6: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/6.jpg)
Timeline
![Page 7: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/7.jpg)
SOBRE EL HTML5Panorámica
![Page 8: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/8.jpg)
¿Qué NO es HTML5?• Una nueva versión de
XHTML
• Una manera diferente de hacer páginas web.
• Un reemplazo de FLASH.
• Una palabra “de moda”.
![Page 9: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/9.jpg)
¿Qué SI es HTML5?• Conjunto de tecnologías
para desarrollo de Web Applications.
• Más etiquetas semánticas
• Nuevos atributos.
• Más propiedades CSS3.
• Eliminación total de atributos de diseño.
• Nuevas APIs de JS
![Page 10: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/10.jpg)
Cosas nuevas de HTML5• Ya no desciende de XML
(nuevo doctype).
• Nuevos elementos estructurales, menos divs.
• Player de sonido y video nativo, sin flash.
• Más controles de formulario.
![Page 11: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/11.jpg)
Cosas nuevas de Javascript
• Nuevos métodos DOM.
• Geolocalización.
• Drag y Drop nativo.
• XMLHttpRequest 2.
• Almacenamiento local.
• Navegación Offline.
• WebSockets y WebWorkers.
![Page 12: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/12.jpg)
Soporte de navegadores.• Safari, Chrome, Opera y
Firefox mayor soporte.
• Firefox constantemente lanza cosas nuevas.
• Opera arrasa con los elementos de formulario.
• Internet Explorer: 9+ empieza a dar soporte.
• El universo MOBILE es HTML5 optmized.
![Page 13: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/13.jpg)
Navegadores (2011/2013)
![Page 14: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/14.jpg)
Distribución Explorer
IE8
IE7
IE6IE10
IE9
![Page 15: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/15.jpg)
Fallback (Cross-browser)• Código en el que ‘recae’ el
browser si no soporta una característica.
• Rutinas en JS + CSS.
• Hay dos tipos:
– Shim: Imita la funcionalidad usando la API disponible en el browser.
– Polyfill: No solo imita la funcionalidad sino la API exacta del HTML5
![Page 16: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/16.jpg)
PRACTICA #1De XHTML a HTML5
![Page 17: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/17.jpg)
Hagan esta maqueta• Con sus conocimientos
actuales de HTML Y CSS.
• Con el programa que usen (notepad, dreamweaver, aptana, front page).
• Pueden hacerlo en grupo.
![Page 18: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/18.jpg)
Migrando (simplicidad)
![Page 19: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/19.jpg)
Etiquetas nuevas• HTML5 introduce 28 nuevos elementos
– <section>
– <article>
– <aside>
– <hgroup>
– <header>
– <footer>
– <nav>
– <figure>
– <figcaption>
– <video>
– <audio>
– <source>
– <embed>
– <mark>
– <progress>
– <meter>
– <time>
– <ruby>
– <rt>
– <rp>
– <wbr>
– <canvas>
– <command>
– <details>
– <summary>
– <datalist>
– <keygen>
– <output>
![Page 20: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/20.jpg)
<header></header>• Etiqueta de valor SEMÁNTICO, delimita un
encabezado.
• Puede ser un título (de una página, de un texto, de un área de la web)
• Puede contener elementos de navegación.
• Puede haber más de uno por documento ya que no se limita al encabezado de la página.
![Page 21: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/21.jpg)
<hgroup></hgroup>• Agrupa un conjunto de encabezados (H1/H6)
que corresponden al mismo CONCEPTO.
• Se trata de elementos que trabajan como sub-encabezados.
• Ejemplos de estas combinaciones son:
– Título y subtítulo (de la página o un texto).
– Título y una breve descripción del contenido.
– Título original, traducción a otro idioma, resumen.
• No se usa cuando sólo hay un encabezado.
![Page 22: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/22.jpg)
<h1></h1><!--a--><h6></h6>• Un encabezado es SEMÁNTICAMENTE el texto
que “encabeza” el contenido que sigue.
• NO ES (bajo ningún punto de vista) un texto en negrita más grande o más chico.
• Son JERARQUICOS. No hay <h3> si no hubo un <h2>.
• Están relacionados. Cada <h3> es un sub-nivel de contenidos del <h2>
• HTML5 permite el uso de más de un <h1> por documento (y es válido).
![Page 23: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/23.jpg)
<footer></footer>• Etiqueta de valor SEMÁNTICO, delimita un pie
de contenido.
• Puede haber más de uno en cada documento.
• Puede ser el pie de la página (donde aparece el copyright, cantidad de visitantes, email, etc.), como el pie de un texto (autor, fecha, etc).
![Page 24: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/24.jpg)
<nav></nav>• Es la barra de navegación principal.
• Contiene links que pueden apuntar a recursos externos, a documentos del mismo dominio o a anclas.
• Puede existir más de un <nav> en un mismo documento.
• No debe usarse un <nav> por cada grupo de links que haya en la página.
![Page 25: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/25.jpg)
<article></article>• Representa una porción del contenido que puede
ser leída independientemente del resto de la web.
• Un documento, puede estar formado por muchos <article>, por ejemplo cada una de las entradas de un blog es un artículo.
• Un artículo puede tener su propio <header>, <footer> y <hgroup> (sí, también su propio <h1>).
• Una buena manera de pensar un <article> es imprimir sólo su contenido y ver si aún tiene sentido.
![Page 26: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/26.jpg)
<section></section>• Representa cada grupo de contenidos que
representan un área del documento (una sección, literalmente)
• Es el elemento que reemplaza la mayoría de nuestros <div>.
• Una <section> puede estar formada por un conjunto de <article>.
![Page 27: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/27.jpg)
<aside></aside>• Representa el contenido “aparte” del contexto
donde se ubique. El cual podría no existir y la página seguiría funcionando.
• En un <article> podría ser los posts relacionados, un glosario de términos, etc.
• En un <section> podría ser publicidad, formularios de login contacto buscador, un calendario, etc.
![Page 28: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/28.jpg)
Ejemplo de estructura HTML5
![Page 29: TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ](https://reader036.vdocuments.co/reader036/viewer/2022062315/5665b4351a28abb57c8ffbf2/html5/thumbnails/29.jpg)
Nuestro sitio como HTML5
Y explorer??? http://code.google.com/p/html5shiv/