html 5 y css 3 ¡el futuro ya estáaquí!

© ESI 2009 1

HTML 5 y CSS 3¡el futuro ya está aquí!

Zamudio, 22-10-09

© ESI 2009 2

¿QUÉ VAMOS A VER HOY?

• Introducción: evolución de los estándares HTML, XHTML y CSS.

• Diferencias entre HTML 5 / CSS 3 y sus versiones previas.

• Nuevos elementos HTML 5 y CSS 3.• Ejemplos. • Soporte en los navegadores actuales.

© ESI 2009 3

A TENER EN CUENTA

Las especificaciones HTML 5 y CSS 3 se encuentran en fase de creación y desarrollo, por lo que todos los elementos, atributos y propiedades que se van a ver en esta presentación pueden variar e incluso desaparecer de la futura especificación final .

© ESI 2009 4

HTML 5

© ESI 2009 5

“Guiando la web hacia su máximo potencial...”

© ESI 2009 6

UN POCO DE HISTORIA...

W3C:

• 1997: publica HTML 4 como recomendación.• 1997-2006: centra su esfuerzo en el desarrollo

de XHTML 1.

© ESI 2009 7


“XHTML 2.0 seems to me the live proof thatsomething is going wrong at W3C... I stronglysuggest dropping all XHTML 2.0 efforts in favor of a new “xHTML 5.0” language. Clearly a successor to HTML 4, feature-oriented, made forthe web.”

Daniel Glazman, Diciembre 2002

© ESI 2009 8


“The dream of a new web, based on XHTML+SVG+SMIL+XForms, is just that — a dream... The best way to help the Web is toincrementally improve the existing web standards... so that web content authors can actually deploy new formats interoperably.”

Brendan Eich, Junio 2004

© ESI 2009 9


Web Hypertext Application Technology WorkingGroup:

• Junio’04 – Marzo’07: trabajando en una evolución del HTML (no XHTML) al margen del W3C.

WHATWG está formado por:

© ESI 2009 10


W3C:• Marzo’07:

– crea un Grupo de trabajo (Working Group) para desarrollar HTML 5.

– crea otro Grupo de trabajo para desarrollar XHTML 2.

Ambos grupos trabajan en paralelo.

© ESI 2009 11


W3C:• Febrero’09:

– Se anuncia que el Grupo de trabajo de XHTML 2 cesará su actividad a finales de 2009.

– Se aumentarán los recursos para el Grupo de trabajo de HTML 5.

– El trabajo de mantenimiento sobre XHTML 1.1 continuará, para arreglar bugs.

© ESI 2009 12


“We're investing in HTML 5 for the future” (IanJacobs).

“XHTML was a rat hole, and now we can use W3C folks to help make HTML 5 better” (DionAlmaer).

© ESI 2009 13

¿Y cuándo se aprobará HTML 5 como estándar

© ESI 2009 14

ETAPAS DE UN ESTÁNDAR W3C

© ESI 2009 15

HITOS

• Abril’07: especificaciones HTML 5 y Web Forms2.0 adoptadas como bases para revisión.

• Noviembre’07: (principios de diseño HTML) 1ºborrador de trabajo público.

• Febrero’08: 1º borrador de trabajo público.• Marzo’09* : Última llamada borrador de trabajo.

• Junio’09: Candidato a Recomendación.• Junio’10: Propuesto a Recomendación.• Septiembre’10: HTML5 es Recomendación.

* los editores estiman Octubre’09

© ESI 2009 16

FECHA ESTIMADA

Todas las estimaciones apuntan al año 2012…

… pero también podría ser en 2015.

¿apostamos?

© ESI 2009 17

OBJETIVOS DE HTML 5

• Proveer buen soporte para contenidos existentes y aplicaciones web.

• Optimizar la retro-compatibilidad (con HTML 4, XHTML 1)

• Nuevas APIs.• Asegurar la interoperabilidad.• Definir de manera precisa el comportamiento de

los Agentes de Usuario.• Especificación formal del manejo de errores . • Evolución (no revolución).

© ESI 2009 18

MANEJO DE ERRORES

• HTML no es XML.• HTML no es SGML.• La mayoría del contenido HTML no está bien

formado (de acuerdo a XML).

Y a pesar de los fallos, las páginas web se visualizan y evolucionan!!

© ESI 2009 19

MANEJO DE ERRORES

“Authors will write invalid content regardless of whatwe spec. So the spec states what authors must notdo, and then tells implementers what they must do when an author does it anyway” (Ian Hickson).

“The attempt to get the world to switch to XML, including quotes around attribute values andslashes in empty tags and namespaces all at once didn't work” (Tim Berners-Lee, Octubre’06).

© ESI 2009 20

MANEJO DE ERRORES

¿Cuál es realmente un error grave?

• <input TYPE=“submit” value=“enviar”>• <input type=“submit” value=enviar>• <input type=“submit” value=‘enviar’>• <input …. disabled>• <i><b>bla, bla, bla</i></b>

© ESI 2009 21

LO QUE DECIMOS ADIÓS

Elementos:• acronym• applet• basefont• big• center• dir• font• frame• frameset• isindex• noframes• noscript• s• strike• tt• u

Atributos:• abbr• archive• axis• charset• classid• codetype• declare• header • name• nohref• profile• rev• scheme• standby• summary• target• valuetype• version

© ESI 2009 22

LO NUEVO

Simplificación al máximo:

• antes:<!DOCTYPE html "PUBLIC -//W3C//DTD XHTML 1.0 Strict //EN"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

• ahora:<!DOCTYPE html>

<meta charset="utf-8">

© ESI 2009 23

LO NUEVO

• Estructuración.

• Multimedia.• Gráficos.• Formularios.

• Nuevas APIs.• Otros elementos.

© ESI 2009 24

LO NUEVO: estructuración

Nuevos elementos:• <header>• <footer>

• <nav>• <aside>

• <article>

• <section>• <dialog>

• …

© ESI 2009 25

LO NUEVO: estructuraciónAntes:

Divitis (en muchos casos, aguda):

© ESI 2009 26

LO NUEVO: estructuraciónAhora:

Utilizamos los elementos estructurales para dar sentido y significado a los contenidos:

© ESI 2009 27

LO NUEVO: multimedia

Nuevos elementos:• <audio>

• <video>

Y todo de manera nativa en el navegador,sin plugins.

© ESI 2009 28


<video src="prueba.ogg" controls>Alternativa para navegadores sin soporte

</video>

<audio src="musica.ogg" controls><a href="musica.ogg">Descarga audio</a>

</audio>

• Firefox, Opera y Chrome soportan el formato Ogg Theorade manera nativa.• Safari y Chrome soportan H.264.

© ESI 2009 29


Problemas con los formatos:

Inicialmente, la idea era soportar Ogg Theora y H.264, pero:

• Ogg es open source and libre de licencia.• H.264 está patentado por MPEG.

© ESI 2009 30

LO NUEVO: gráficos

• <canvas> permite mostrar gráficos en tiempo real, animaciones, etc.

Nuevos elementos:• <figure>

• <canvas>

© ESI 2009 31

LO NUEVO: gráficos

<figure> permite asociar texto con contenido embebido (incluyendo videos, audios, citas o imágenes).

© ESI 2009 32

LO NUEVO: formularios

Nuevos tipos de <input> :• datetime : fecha y hora• datetime-local : fecha y hora local• number : número• range : verifica que el valor esté en

un rango• email : dirección de e-mail• url : URL válida• color : provee mecanismo para que

el usuario inserte un color RGB.

© ESI 2009 33

LO NUEVO: nuevas APIs

• Drag & Drop.

• Geolocalización.• Cambios en la API de DOM:

– getElementsByClassName

– sessionStorage / localStorage– ...

© ESI 2009 34

LO NUEVO: otros elementos

• <details> : marca un texto como información adicional.• <datagrid> : para mostrar información tabulada• <datalist> : conjuntamente con el atributo de los inputs

para crear combos.• <time> : Fecha/hora.• <progress> : progreso actual sobre un objetivo (p.e. un

porcentaje).• <meter> : el contenido es una medida (p.e. longitud)• <command> : representa un comando que el usuario puede

ejecutar.• <output> : muestra el resultado de un programa o

proceso• <ruby> : permite la inserción de anotaciones rubi/ruby

para lenguajes asiáticos.

© ESI 2009 35

CSS 3

© ESI 2009 36


W3C:• Diciembre 1996: CSS 1• Mayo 1998: CSS 2• Septiembre 2009: CSS 2.1

© ESI 2009 37

¿Y cómo va el desarrollo de CSS 3

© ESI 2009 38

CSS 3 EN MÓDULOS

• La especificación CSS 3 se ha dividido en diversos módulos (p.e.):

© ESI 2009 39

CSS 3 EN MÓDULOS

• Cada módulo tiene sus propios editores y su propio ritmo, por lo que algunos módulos ya han pasado a ser candidatos a recomendación, y otros acaban de empezar a trabajar:

© ESI 2009 40

LAS NOVEDADES

• bordes: control total• tipografías• sombras • transparencias • columnas múltiples• transformaciones• etc.

© ESI 2009 41

NOVEDADES: bordes

Bordes Redondeados:

Antes:• Generador de esquinas redondeadas.

• Funciones javascript.• Múltiples <div>...

© ESI 2009 42

NOVEDADES: bordes

© ESI 2009 43

NOVEDADES: bordes

© ESI 2009 52

NOVEDADES: transformaciones

transition:transiciones de color, posición, etc...

gradient:degradados de color...

reflect:reflejos...

mask-image:máscaras...

© ESI 2009 54

PROBLEMAS DE SOPORTE

Los navegadores actuales (a excepción de Internet Explorer) están adoptando las características de HTML 5 de forma rápida.

Internet Explorer necesita algunas ayudas para hacer que los elementos funcionen.

Por ejemplo, si queremos que IE aplique estilos a elementos “nuevos”, será necesario crearlos antes mediante JS:

<script>document.createElement("figure");

</script>

<style>figure {

border: 1px solid #333;padding: 4px;

}</style>

© ESI 2009 55


Extensiones propias del navegador:

A veces el navegador no soporta la propiedad CSS 3. sin embargo sí que soporta una propia:

© ESI 2009 56


ej. Propiedad CSS 3: border-radius

Propietarias: -moz-border-radius-webkit-border-radius

• Error de validación

• Lo aconsejable es minimizar su uso y ubicarlas en un archivo aparte, para que no se mezclen con las propiedades estándar.

© ESI 2009 57

SITUACIÓN ACTUAL

• Diversidad de navegadores, dispositivos de acceso, resoluciones, configuraciones...

• Las páginas web no se tienen que ver exactamente igual en todos los navegadores y dispositivos.

• Debemos garantizar la legibilidad del contenido (por encima del diseño) y la funcionalidad de la página.

• Antes de aprender elementos html nuevos, tenemos que saber utilizar los ya existentes.

© ESI 2009 58

ENLACES DE INTERÉS

• HTML 5: http://www.w3.org/html/• WHATWG: http://www.whatwg.org/• Grupos del W3C: http://www.w3.org/2003/02/W3COrg.png

• Anuncio del retorno a HTML: http://www.w3c.es/Prensa/2007/nota070307_html.html

• Anuncio descarte de XHTML 2: http://www.networkworld.com/news/2009/070209-xhtml-2-language-dumped-in.html

• Estimaciones de tiempos de HTML 5: http://www.w3.org/2007/03/HTML-WG-charter.html#deliverables

• Hitos HTML 5: http://www.w3.org/html/wg/• Draft actual HTML 5: http://dev.w3.org/html5/markup/spec.html

© ESI 2009 59

ENLACES DE INTERÉS• Guías introductorias a HTML 5:

– http://diveintohtml5.org/– http://www.alistapart.com/articles/previewofhtml5/

• Dialog: http://jsbin.com/obazi• Canvas: http://ernestdelgado.com/public-tests/gifoncanvas/• Formularios: http://christopherj.us/test/• Drag & Drop: http://ljouanneau.com/lab/html5/demodragdrop.html• Más ejemplos: http://html5demos.com/

• Video: http://www.youtube.com/html5• Codecs video: http://www.historiasdequeso.com/2009/06/sobre-youtube-html5-

h264-y-theora.html• Soporte Audio: http://html5doctor.com/native-audio-in-the-browser/

• Estado actual de los grupos de trabajo de los módulos de CSS 3: http://www.w3.org/Style/CSS/current-work

• Soporte actual de HTML 5 y CSS 3 en los navegadores: http://a.deveria.com/caniuse/

© ESI 2009 60

ENLACES DE INTERÉS

• Fuentes e Internet Explorer: http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

• Prefijos de cada navegador: http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

• HTML 5 Super Friends: http://www.zeldman.com/superfriends/• "Creación" de elementos para IE: http://html5doctor.com/how-to-get-

html5-working-in-ie-and-firefox-2/• Diferencias entre las versiones de Internet Explorer:

http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

• ¿Se tienen que ver las páginas iguales en todos los navegadores? http://dowebsitesneedtolookexactlythesameineverybrowser.com/

• Twitter: @CSS3 , @css3gallery , @html5

© ESI 2009 62

¡¡MUCHAS GRACIAS POR VUESTRA ASISTENCIA!!

Parque Tecnológico, # 204E-48170 ZamudioBizkaia (Spain)Tel.: +34 94 420 95 19Fax: +34 94 420 94 20www.esi.es

Ainhoa IglesiasUnidad Accesibilidad

Área sociedad de Información

[email protected]@antxoa7 en Twitter

html 5 y css 3 ¡el futuro ya estáaquí!

Documents