1 HTML5 & CSS3 Hernán Beati @hernan_beati 1
2 Hernán Beati Desarrollador Web + 12 años+ coautor con Maximiliano Firtman Autor libro: Fundador de: Docente en: 2
3 Lenguaje universal, base de la WebWeb = HTML Lenguaje universal, base de la Web 3
4 HTML 4.01 = 1999 XHTML 1.0 = 2000 XHTML 1.1 = 2001 XHTML 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 5
6 Nuevas etiquetas semánticas Video, audio y animación sin pluginsNuevo 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) 6
7 Nuevo en CSS3 Usar cualquier tipografíaEfectos decorativos: sombras, RGBa, bordes redondeados, gradientes, (menor uso de imágenes) Movimientos: transformaciones, transiciones, animaciones (menor uso de JavaScript) Diseño adaptable: Media Queries Selectores más precisos (menor uso de marcado innecesario) 7
8 Nuevo en Scripts Animaciones con Canvas Drag & DropGeolocalización del usuario Trabajo offline (cache de aplicaciones) Web Storage (session y local) File System API (archivos enteros) Bases de datos del lado del cliente Web sockets (actualización en vivo, tipo Ajax) Hilos (threads) Web Workers 8
9 Pero...¿cuál es “la” pregunta?(que todos nos estamos haciendo con HTML5 y CSS3) 9
10 ¿Ya se puede usar!? 10
11 “Naaahh... ¡si en Explorer no anda!”11
12 Esa duda se basa en rumores* *(conceptos erróneos)12
13 El principal: Esperar que la perfección total se haga realidad un díaEl principal: Esperar que la perfección total se haga realidad un día. El “Día D” nunca existirá… 13
14 “Cuando todos los seres humanos del mundo se actualicen a X navegadorLa diversidad de versiones y plataformas siempre existirá: sin plugins, JavaScript desactivado, resoluciones MUY diferentes. 14
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. 15
16 “Cuando el W3C publique la especificación, ahí sí se podrá usar!”En 2015 recién será “Recomendación”. ¿Para la habrán implementado los navegadores? HTML: primer estándar VIVO, sin versión. Se estandarizan las innovaciones. Lo que ya funciona nunca se quitará. 16
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!! 17
18 ¿Y entonces cuál es la respuesta? ¿Ya se puede usar!?18
19 Versión abreviada: Sí 19
20 Versión explicada: Se puede usar mediante técnicas de compatibilidad20
21 Principales técnicas:Mejora progresiva (Progressive enhancement). Degradación elegante (Graceful degradation). Mejora regresiva (Regressive enhancement). 21
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) 22
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). 23
24 Andy Clarke propone crear hoja de estilo de texto plano para Explorers viejos, y no perder tiempo en compatibilizar la estética... (O cobrar ese tiempo aparte!) 24
25 3. Mejora Regresiva: Complementar al navegadorTercera 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 funcionalidad en 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. 25
26 Diseño Adaptable (responsive design)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…) 27
28 ¿qué debo hacer para usar HTML5 y CSS3 ya?Entonces, ¿qué debo hacer para usar HTML5 y CSS3 ya? 28
29 Cambiar la forma de pensar el diseño web.29
30 Nuestro concepto de diseño web no puede seguir siendo el mismo que en diseño “gráfico”.30
31 La web es <---flexible---> (múltiples dispositivos, múltiples navegadores)31
32 La web es MUY flexible: (¿Para cuál resolución diseñar? Para TODAS!!)Y más!... 32
33 “...pero yo quiero que mis diseños se vean idénticos en todos los navegadores y en todos los dispositivos...” ¿!!!? 33
34 Algo es diseño si es funcional a una meta,Pensar el diseño web como creación de experiencias de 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 34
35 “La” pregunta del diseño web debe ser:¿puedo hacer las tareas que vine a hacer al sitio? (Con cualquier dispositivo, con cualquier navegador y versión) 35
36 Diseño adaptable = Responsive designDeberemos explicar a clientes y jefes que cada usuario “verá levemente distinto” cada sitio web ¡Porque es inevitable y no tiene nada de malo! Diseño adaptable = Responsive design 36
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. 37
38 HTML5: Primer estándar “vivo”38
39 Antes: W3C definía reglas, que luego los navegadores iban aplicando39
40 Ahora: navegadores innovan, y W3C lo agrega al estándarEs lo lógico... 40
41 Conclusión: HTML5 es el estándar más consensuado de la historiaConclusión: HTML5 es el estándar más consensuado de la historia! Todos lo apoyan... 41
42 ¿Objetivo de nuevas etiquetas? Usar etiquetas con significadoGoogle debe entender cuál contenido es importante y cuál no lo es. 42
43 Estructuras nuevas Article: contenido fundamental, independienteAside: 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 43
44 Ejemplos: Antes:
Esta foto habla de...
Esta foto habla de...
45 ¿Aún más significado? Extensibilidad con Microdata y Microformatos“Google debe entender cuál contenido es importante y cuál no lo es...” 45
46 Secciones explícitas Article Aside Nav Section 46
47 1. Article Es el contenido importante de cada páginaPuede haber uno, o varios por página Ver ejemplo 47
48 2. Aside Es información secundaria, que podría no estar.Ej.: Barras laterales, banners. Ver ejemplo 48
49 3. Nav Una barra de navegación. Puede haber una, o varias por páginaVer ejemplo 49
50 4. Section Una sección explícita. Puede haber una, o varias por páginaVer ejemplo 50
51 4.a Section = “parte de...” Puede haber una o más sections dentro de un article:
52 4.b Section = “contenedor de...”Una section puede tener articles dentro (¡con sections dentro!):
53 Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body. Ver ejemplo 53
54 54
55 Figure No es solo para fotos (diagramas, SVG, MathML, listas de código) que puedan ser referenciados (apéndice, índice, etc.) 
Ver ejemplo 55
56
57 Compatibilizador para Explorer
58 Textos más semánticos Mark: resultados resaltados (en vez de span, em o strong) Time: Hora, Fecha, o ambas cosas Meter: Medidas dentro de una escala Progress: Medidas dinámicas, cambiantes 58
59
60 ¿Aún más significado? Extensibilidad con Microdata y Microformatos“Google debe entender cuál contenido es importante y cuál no lo es...” 60
61 Opiniones / revisiones Contactos Productos Empresas Recetas Eventos Datos personales Opiniones / revisiones Contactos Productos Empresas Recetas Eventos Video 61
62
Tim Berners-Lee Director del W3C C/Ada Byron, 39 Asturias, España 33203 63 ¿Principal dificultad de los formularios? Validación!63
64 Soluciones HTML5: Nuevos tipos de input y nuevos atributos auto-validables64
65 13 nuevos type: search, tel, url, , number, range, datetime, datetime-local, date, month, week, time, color 65
66 Search: -Botón “x” para “limpiar” -No permite saltos de línea -Degrada en “text” 66
67 Tel: -Puede incluir espacios o guiones -Degrada en “text” -Por ahora, es solo semántica 67
68 URL: Valida que sea una URL absoluta68
69 Email: Verifica que la casilla sea válida Verifica que la casilla sea válida. Puede llevar el atributo multiple y en ese caso acepta varias casillas separadas por comas. 69
70 Number: Formato: e+90 (puede ser negativo, usa punto para decimales, e para exponente, más signo y potencia) 70
71 Range: Usar si no importa la precisión del número, sino la usabilidad. 71
72 Date: Puede llevar min, max (rango permitido) y step (por default, de a 1 día) Formato: 72
73 Datetime: Fecha y hora en formato UTC: 2011-05-19T10:55:59.001-03:0073
74 Month: -Mismos atributos que Date (min, max, step) -Formato: ¿vencimiento de tarjeta de crédito? 74
75 Week: Mismos atributos que Date (min, max, step) Formato: 2011-W1775
76 Time: Mismos atributos que date. Formato: 11:59 Formato con segundos (opcionales): 11:59:59 76
77 Color: Opera 11+77
78 Atributos nuevos 78
79 Multiple Se usa en inputs de tipo file o email79
80 Autocomplete (por default) 80
81 Campos obligatorios 81
82 Autofocus (a un solo campo, o solo tomará el último)82
83 Placeholder (tener en cuenta que el placeholder se esconde si hay autofocus) 83
84 Pattern
85 Datalist (auto-suggest) 85
86 No validar: