Post on 22-Jan-2016
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/