TALLER DE HTML5.Clase 01 – Prof. Germán RODRÍGUEZ

NIVELACIÓNConceptos básicos para hablar el mismo idioma

Conocimientos mínimos

Browsers

FIREFOX SAFARI OPERA EXPLORER CHROME

AMAYA MOSAIC NETSCAPE ROCKMELT CANARY/AURORA

Gente

Timeline

SOBRE EL HTML5Panorámica

¿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”.

¿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

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.

Cosas nuevas de Javascript

• Nuevos métodos DOM.

• Geolocalización.

• Drag y Drop nativo.

• XMLHttpRequest 2.

• Almacenamiento local.

• Navegación Offline.

• WebSockets y WebWorkers.

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.

Navegadores (2011/2013)

Distribución Explorer

IE8

IE7

IE6IE10

IE9

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

PRACTICA #1De XHTML a HTML5

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.

Migrando (simplicidad)

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>

<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.

<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.

<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).

<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).

<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.

<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.

<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>.

<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.

Ejemplo de estructura HTML5

Nuestro sitio como HTML5

Y explorer??? http://code.google.com/p/html5shiv/