TALLER DE HTML5. Clase 01 – Prof. Germán RODRÍGUEZ
NIVELACIÓN Conceptos básicos para hablar el mismo idioma
Conocimientos mínimos DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML: <tag atributo="valor">contenido</tag> <tag atributo="valor" /> CSS: #algo | .algo | algo | #algo algo
Browsers FIREFOX SAFARI OPERA EXPLORER CHROME AMAYA MOSAIC NETSCAPE ROCKMELT CANARY/ AURORA
Gente "Tim" Berners-Lee Marc Andreessen Brendan Eich Richard Stallman W3C WHATWG Germán Rodríguez
Timeline Noviembre 89 - Berners-Lee crea el HTML Abril 93 – Release de Mosaic Noviembre 94 - Netscape Agosto 95 – Explorer 1 Noviembre 96 - W3C Abril 98 – HTML 4 Enero 2000 – XHTML Abril 2003 – Fundación Mozilla Enero 2009 – Borrador HTML5
SOBRE EL HTML5 Panorá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 IE6 IE10 IE7 IE8 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 #1 De 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) Cambia el DOCTYPE: <!DOCTYPE html> Cambia el CHARSET: <meta charset="utf-8" /> Los Script se asumen JS <script src="codigo.js" type="text/javascript"> </script> Style y Link se asumen CSS <link rel="stylesheet" type="text/css" href="estilo.css" />
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/