HTML5 & CSS3

1. HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar

2. Hernán BeatiDesarrollador Web + 12 años + coautor con Maximiliano Firtman Autor libro: Fundador de: Docente en:

3. Web = HTML Lenguaje universal, base de la Web

4. HTML 4.01 = 1999XHTML 1.0 = 2000 XHTML 1.1 = 2001XHTML 2 = ?HTML5

5. ¿A qué se le llama HTML5? HTML5(nuevas etiquetas, marcado)CSS3(nuevos estilos)APIs JavaScript(programación)+ Otros estándares W3C (SVG, MathMl)+ Estándares “de facto” (microformatos)+ Experimentos de algún navegador+ + + ...

6. Nuevo en HTML5 Nuevas etiquetas semánticas (Google debe entender los contenidos) Video, audio y animación sin plugins (Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versión) Nuevos elementos de formularios(Más usabilidad y menor uso de JavaScript)

7. Nuevo en CSS3 Usar cualquier tipografía Efectos decorativos: sombras, RGBa, bordes redondeados, gradientes, (menor uso de imágenes) Movimientos: transformaciones, transiciones, animaciones(menor uso de JavaScript) Diseño adaptable: Media Queries Selectoresmás precisos (menor uso de marcado innecesario)

8. Nuevo en Scripts Animaciones conCanvas Drag & Drop Geolocalizacióndel usuario Trabajo offline(cache de aplicaciones)Web Storage (session y local) File System API (archivos enteros) Bases de datos del lado del cliente Websockets(actualización en vivo, tipo Ajax) Hilos (threads) Web Workers

9. Pero...¿cuál es “la” pregunta? (que todos nos estamos haciendo con HTML5 y CSS3)

10. ¿Ya se puede usar!?

11. “Naaahh...¡si en Explorer no anda!”

12. Esa duda se basa en rumores**(conceptos erróneos)

13. El principal: Esperar que la perfección total se haga realidad un día.El “Día D” nunca existirá…

14. “Cuando todos los seres humanos del mundo seactualicena X navegador...” • La diversidad de versiones y plataformas siempre existirá: sin plugins, JavaScript desactivado, resoluciones MUY diferentes.

15. “Cuando todos los navegadores interpreten idénticamente el 100% del estándar...” • Las diferencias entre navegadores siempre existirán, jamás hubo 2 navegadores iguales. • La evolución / innovación implementando nuevas capacidades, siempre existirá. • Siempre seguirán en uso navegadores antiguos.

16. “Cuando el W3C publique la especificación, ahí sí se podrá usar!” • En 2015 recién será “Recomendación”. ¿Para 2022 la habrán implementado los navegadores? • HTML: primer estándarVIVO, sin versión. • Se estandarizan las innovaciones. • Lo que ya funciona nunca se quitará.

17. “...porque yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...” • ¿!? Existen celulares de 128 x 160 pixeles, y plasmas de 1920 x 1200px!!

18. ¿Y entoncescuál es la respuesta?¿Ya se puede usar!?

19. Versión abreviada:Sí

20. Versión explicada:Se puede usarmediantetécnicasde compatibilidad

21. Principales técnicas: • Mejora progresiva (Progressive enhancement). • Degradación elegante (Graceful degradation). • Mejora regresiva (Regressive enhancement).

22. 1. Mejora progresiva(Progressive enhancement) “Después de crear una página básica, que funcione en Explorer, agreguemos funcionalidades extra para navegadores más potentes, usando selectores avanzados.” Dave Shea (2003) www.csszengarden.com

23. 2. Degradación elegante(Graceful degradation) “Diseñar para los navegadores más potentes y móviles, haciendo uso pleno de HTML5 y CSS3, asumiendo que no se va a ver idéntico.” Degrada en sitio menos decorado o menos funcional (le “falta” algo).

24. Andy Clarke propone crear hoja de estilo de texto planopara Explorers viejos, y no perder tiempo en compatibilizar la estética... (O cobrar ese tiempo aparte!)

25. Tercera posición: 3. Mejora Regresiva: Complementar al navegador • Aplicamos nuevas etiquetas HTML5 y CSS3 para navegadores nuevos, y luego agregamos scripts para “fabricar” esa misma funcionalidaden navegadores que no la traen (funcional, o a veces característica estética). Se les llama shims, polyfills, scripts compatibilizadores, etc. Por ejemplo: Modernizr, Selectivizr, Yepnope.

26. En el fondo, el concepto clave es aplicar Diseño Adaptable (responsive design) • Aceptar diferencias entre dispositivos... • ...pero también aceptar diferencias entre navegadores y sus versiones. NO BUSCAR UNIFORMIDAD!!!

27. Supera actitudes extremas de:-Usar sólo características CSS básicas que sean soportadas por el obsoleto Explorer 6 (recién Explorer 8 aplicó CSS 2.1 completo, 10 años!!!).-Olvidarse completamente de navegadores anteriores y limitados, diseñando sólo para navegadores modernos (Andy Clarke…)

28. Entonces, ¿qué debo hacerpara usar HTML5 y CSS3 ya?

29. Cambiar la forma de pensarel diseño web.

30. Nuestro concepto de diseño webno puede seguir siendo el mismo que en diseño “gráfico”.

31. La web es <---flexible--->(múltiples dispositivos, múltiples navegadores)

32. La web es MUY flexible:(¿Para cuál resolución diseñar? Para TODAS!!) Y más!...

33. “...pero yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...” ¿!!!?

34. Pensar el diseño web como creación de experienciasde usuario, y no como una decoración rígida, uniformizadora, ni como un lienzo artístico. Algo es diseño si es funcional a una meta, EL DISEÑO NO ES ARTE

35. “La” pregunta del diseño web debe ser: ¿puedo hacerlas tareasque vine a hacer al sitio? (Con cualquier dispositivo, con cualquier navegador y versión)

36. Deberemos explicar aclientes y jefesque cada usuario “verá levemente distinto”cada sitio web ¡Porque es inevitable y no tiene nada de malo! Diseño adaptable = Responsive design

37. Resumiendo:(respuestas a “la” pregunta) • Sí, se puede usar HTML5 y CSS3 hoy! • Aplicando técnicas de compatibilidad:Mejora progresiva, Degradación elegante o Mejora regresiva. • Debemos aceptar la flexibilidad de la web, y cambiar nuestras expectativas de diseño.

38. HTML5: Primer estándar“vivo”

39. Antes: W3C definía reglas, que luego los navegadores iban aplicando

40. Ahora: navegadores innovan, y W3C lo agrega al estándar Es lo lógico...

41. Conclusión: HTML5 es el estándar más consensuadode la historia! Todos lo apoyan...

42. ¿Objetivo de nuevas etiquetas?Usar etiquetas con significado Google debe entender cuál contenido es importante y cuál no lo es.

43. Estructuras nuevas • Article:contenido fundamental, independiente • Aside:contenido accesorio, no fundamental • Nav:barra de navegación • Section:una sección o bloque (ex DIV) • Header:introducción / orientación sobre sección • Footer:final de una sección • Hgroup:grupo de encabezados • Figure:contenido relacionado (imagen, video, audio, canvas, gráficos, tablas estadísticas, etc.) • Figcaption:leyenda de un elemento Figure

44. Ejemplos: • Antes: • <div id=“wrapper”></div> • <div id=“noticia”></div> • <div id=“banners”></div> • <div id=“header”></div> • <div id=“footer”></div> • <div id=“nav”></div> • <div id=“foto”><img src=“x” /><p>Esta foto habla de...</p></div> • Ahora: • <section></section> • <article></article> • <aside></aside> • <header></header> • <footer></footer> • <nav></nav> • <figure><img src=“x” /><figcaption><p>Esta foto habla de...</p></figcaption></figure>

45. ¿Aún más significado?Extensibilidad conMicrodata y Microformatos “Google debe entender cuál contenido es importante y cuál no lo es...”

46. Secciones explícitas • Article • Aside • Nav • Section

47. 1. Article Es el contenido importante de cada página Puede haber uno, o varios por página Ver ejemplo

48. 2. Aside • Es información secundaria, que podría no estar. Ej.: Barras laterales, banners. Ver ejemplo

49. 3. Nav • Una barra de navegación. Puede haber una, o varias por página Ver ejemplo

50. 4. Section • Una sección explícita. Puede haber una, o varias por página Ver ejemplo