html5-css3 (PDF, 2865 Kb )

HTML 5 y CSS 3
¡el futuro ya está aquí!
Zamudio, 22-10-09
© ESI 2009
1
¿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
2
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
3
HTML 5
© ESI 2009
4
“Guiando la
web hacia su
máximo
potencial...”
© ESI 2009
5
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
6
UN POCO DE HISTORIA...
“XHTML 2.0 seems to me the live proof that
something is going wrong at W3C... I strongly
suggest dropping all XHTML 2.0 efforts in favor
of a new “xHTML 5.0” language. Clearly a
successor to HTML 4, feature-oriented, made for
the web.”
Daniel Glazman, Diciembre 2002
© ESI 2009
7
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 to
incrementally improve the existing web
standards... so that web content authors can
actually deploy new formats interoperably.”
Brendan Eich, Junio 2004
© ESI 2009
8
UN POCO DE HISTORIA...
Web Hypertext Application Technology Working
Group:
• Junio’04 – Marzo’07: trabajando en una
evolución del HTML (no XHTML) al margen
del W3C.
WHATWG está formado por:
© ESI 2009
9
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
10
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
11
UN POCO DE HISTORIA...
“We're investing in HTML 5 for the future” (Ian
Jacobs).
“XHTML was a rat hole, and now we can use W3C
folks to help make HTML 5 better” (Dion
Almaer).
© ESI 2009
12
¿Y cuándo se
aprobará HTML 5
como estándar
© ESI 2009
13
ETAPAS DE UN ESTÁNDAR W3C
© ESI 2009
14
HITOS
• Abril’07: especificaciones HTML 5 y Web Forms
2.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
15
FECHA ESTIMADA
Todas las estimaciones
apuntan al año 2012…
… pero también podría ser
en 2015.
¿apostamos?
© ESI 2009
16
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
17
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
18
MANEJO DE ERRORES
“Authors will write invalid content regardless of what
we spec. So the spec states what authors must not
do, 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 and
slashes in empty tags and namespaces all at once
didn't work” (Tim Berners-Lee, Octubre’06).
© ESI 2009
19
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
20
LO QUE DECIMOS ADIÓS
Elementos:
Atributos:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt
u
© ESI 2009
21
abbr
archive
axis
charset
classid
codetype
declare
header
name
nohref
profile
rev
scheme
standby
summary
target
valuetype
version
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
22
LO NUEVO
•
•
•
•
•
•
© ESI 2009
23
Estructuración.
Multimedia.
Gráficos.
Formularios.
Nuevas APIs.
Otros elementos.
LO NUEVO: estructuración
Nuevos elementos:
•
•
•
•
•
•
•
<header>
<footer>
<nav>
<aside>
<article>
<section>
<dialog>
• …
© ESI 2009
24
LO NUEVO: estructuración
Antes:
Divitis (en muchos casos, aguda):
© ESI 2009
25
LO NUEVO: estructuración
Ahora:
Utilizamos los elementos estructurales para dar
sentido y significado a los contenidos:
© ESI 2009
26
LO NUEVO: multimedia
Nuevos elementos:
• <audio>
• <video>
Y todo de manera nativa en el navegador,
sin plugins.
© ESI 2009
27
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 Theora
de manera nativa.
• Safari y Chrome soportan H.264.
© ESI 2009
28
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
29
LO NUEVO: gráficos
Nuevos elementos:
• <figure>
• <canvas>
• <canvas> permite mostrar gráficos en tiempo
real, animaciones, etc.
© ESI 2009
30
LO NUEVO: gráficos
<figure> permite asociar texto con contenido
embebido (incluyendo videos, audios, citas o
imágenes).
© ESI 2009
31
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
32
LO NUEVO: nuevas APIs
• Drag & Drop.
• Geolocalización.
• Cambios en la API de DOM:
– getElementsByClassName
– sessionStorage / localStorage
– ...
© ESI 2009
33
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
34
CSS 3
© ESI 2009
35
UN POCO DE HISTORIA...
W3C:
• Diciembre 1996: CSS 1
• Mayo 1998: CSS 2
• Septiembre 2009: CSS 2.1
© ESI 2009
36
¿Y cómo va el
desarrollo de CSS 3
© ESI 2009
37
CSS 3 EN MÓDULOS
• La especificación CSS 3 se ha dividido en
diversos módulos (p.e.):
© ESI 2009
38
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
39
LAS NOVEDADES
•
•
•
•
•
•
•
bordes: control total
tipografías
sombras
transparencias
columnas múltiples
transformaciones
etc.
© ESI 2009
40
NOVEDADES: bordes
Bordes Redondeados:
Antes:
• Generador de esquinas redondeadas.
• Funciones javascript.
• Múltiples <div>...
© ESI 2009
41
NOVEDADES: bordes
© ESI 2009
42
NOVEDADES: bordes
© ESI 2009
43
NOVEDADES: bordes
Ahora: border-radius
© ESI 2009
44
NOVEDADES: bordes
border-image:
Uso de imagen como borde de un elemento:
© ESI 2009
45
NOVEDADES: bordes
Fondos múltiples:
Podemos utilizar varias imágenes
como fondo de un elemento:
© ESI 2009
46
NOVEDADES: tipografías
font-family:
Uso de tipografía personalizada:
© ESI 2009
47
NOVEDADES: sombras
box-shadow:
sombra en un bloque:
text-shadow:
sombra en un texto:
© ESI 2009
48
NOVEDADES: transparencias
opacity:
transparencia de un elemento.
© ESI 2009
49
NOVEDADES: transparencias
color RGB:
también con transparencia de un elemento.
© ESI 2009
50
NOVEDADES: columnas múltiples
column-count:
Distribuir el contenido en columnas:
© ESI 2009
51
NOVEDADES: transformaciones
transition:
transiciones de color, posición, etc...
gradient:
degradados de color...
reflect:
reflejos...
mask-image:
máscaras...
© ESI 2009
52
¿PUEDO USAR HTML 5 y CSS 3 YA?
© ESI 2009
53
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>
© ESI 2009
54
<style>
figure {
border: 1px solid #333;
padding: 4px;
}
</style>
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
55
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
56
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
57
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-languagedumped-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
58
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-html5h264-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
59
ENLACES DE INTERÉS
• Fuentes e Internet Explorer: http://jontangerine.com/log/2008/10/font-facein-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-gethtml5-working-in-ie-and-firefox-2/
• Diferencias entre las versiones de Internet Explorer:
http://www.smashingmagazine.com/2009/10/14/css-differences-ininternet-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
60
AGRADECIMIENTOS
• Enpresa Digitala
• @ Calabaceen
• @ sigmar666
• @ Allenkhow
© ESI 2009
61
¡¡MUCHAS GRACIAS POR VUESTRA ASISTENCIA!!
Ainhoa Iglesias
Unidad Accesibilidad
Área sociedad de Información
[email protected]
@antxoa7 en Twitter
Parque Tecnológico, # 204
E-48170 Zamudio
Bizkaia (Spain)
Tel.: +34 94 420 95 19
Fax: +34 94 420 94 20
www.esi.es
© ESI 2009
62