html 5 y css 3 ¡el futuro ya estáaquí!
TRANSCRIPT
© 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
UN POCO DE HISTORIA...
“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
UN POCO DE HISTORIA...
“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
UN POCO DE HISTORIA...
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
UN POCO DE HISTORIA...
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
UN POCO DE HISTORIA...
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
UN POCO DE HISTORIA...
“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
LO NUEVO: multimedia
<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
LO NUEVO: multimedia
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
UN POCO DE HISTORIA...
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 44
NOVEDADES: bordes
Ahora: border-radius
© ESI 2009 45
NOVEDADES: bordes
border-image:Uso de imagen como borde de un elemento:
© ESI 2009 46
NOVEDADES: bordes
Fondos múltiples :Podemos utilizar varias imágenes
como fondo de un elemento:
© ESI 2009 47
NOVEDADES: tipografías
font-family:Uso de tipografía personalizada:
© ESI 2009 48
NOVEDADES: sombras
box-shadow:sombra en un bloque:
text-shadow:sombra en un texto:
© ESI 2009 49
NOVEDADES: transparencias
opacity:transparencia de un elemento.
© ESI 2009 50
NOVEDADES: transparencias
color RGB:también con transparencia de un elemento.
© ESI 2009 51
NOVEDADES: columnas múltiples
column-count:Distribuir el contenido en columnas:
© ESI 2009 52
NOVEDADES: transformaciones
transition:transiciones de color, posición, etc...
gradient:degradados de color...
reflect:reflejos...
mask-image:máscaras...
© ESI 2009 53
¿PUEDO USAR HTML 5 y CSS 3 YA?
© 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
PROBLEMAS DE SOPORTE
Extensiones propias del navegador:
A veces el navegador no soporta la propiedad CSS 3. sin embargo sí que soporta una propia:
© ESI 2009 56
PROBLEMAS DE SOPORTE
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 61
AGRADECIMIENTOS
• Enpresa Digitala
• @ Calabaceen• @ sigmar666• @ Allenkhow
© 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