HTML5 & CSS3

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

2. Nuevo en HTML5 Nuevas etiquetas semánticas (Navegadores 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)

3. 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)

4. 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

5. 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.

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

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

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

9. 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

10. 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>

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

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

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

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

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

16. 4.a Section = “parte de...” Puede haber una o más sections dentro de un article: <article> <section>Datos del Autor</section> <section>Comentarios</section> </article> Ver ejemplo

17. 4.b Section = “contenedor de...” Una section puede tener articles dentro (¡con sections dentro!): <section> <article>Noticia de hoy</article> <article>Noticia de ayer</article> </article> Ver ejemplo

18. Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body. Ver ejemplo

20. FigureNo es solo para fotos (diagramas, SVG, MathML, listas de código) que puedan ser referenciados (apéndice, índice, etc.) <figure> <figcaption>Bla</figcaption> <img src="logo.jpg" /> </figure> Ver ejemplo

22. 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

23. <Etiquetas> que cambiaron • A puede envolver varias cosas (bloques) • Address pertenece a una sección, no solo a la página entera • B estilo “diferente”, pero no más importante ni negrita • I cambio de entonación (en otro idioma, tecnicismos) • Strong es algo importante, aunque no se vea distinto • Cite ahora es para “título” de la obra citada, no para “autor” • Hr cambio de tema entre párrafos (Ej.: viñeta entre estrofas) • Small es la letra chica de los contratos, términos legales

24. nuevos type:search, tel, url, email, number, range, datetime, datetime-local, date, month, week, time, color

25. Search:<input type="search">-Botón “x” para “limpiar”-No permite saltos de línea-Degrada en “text”

26. Tel:<input type="tel">-Puede incluir espacios o guiones-Degrada en “text”-Por ahora, es solo semántica

27. URL:<input type="url">Valida que sea una URL absoluta

28. Email:<input type="email">Verifica que la casilla sea válida. Puede llevar el atributo multiple y en ese caso acepta varias casillas separadas por comas.

29. Number:<input type="number" min="0" max="100" step="10" value="50">Formato: -12345.678e+90(puede ser negativo, usa punto para decimales, e para exponente, mássigno y potencia)

30. Range:<input type="range"min="0" max="100" step="10" value="50">Usar si no importa la precisión del número, sino la usabilidad.

31. Date:<input type="date">Puede llevar min, max (rango permitido) y step (por default, de a 1 día)Formato: 2011-09-19

32. Datetime:<input type="datetime">Fecha y hora en formato UTC:2011-05-19T10:55:59.001-03:00

33. Month:<input type="month">-Mismos atributos que Date (min, max, step)-Formato: 2011-05-¿vencimiento de tarjeta de crédito?

34. Week:<input type="week">Mismos atributos que Date (min, max, step)Formato: 2011-W17

35. Time:<input type="time" min="11:30" max="23:30" step="600">Mismos atributos que date. Formato: 11:59 Formato con segundos (opcionales): 11:59:59

36. Color:<input type="color">Opera 11+

37. Atributos nuevos

38. Multiple<input type="file" multiple="true">Se usa en inputs de tipo file o email

39. Autocomplete<input type="text" autocomplete=“on”> (por default)<input type="text" autocomplete=“off”>

40. Campos obligatorios<form> <input type="email" id="casilla" required> <input type="submit" value="Subscribirse"></form>

41. Autofocus<input type="text" autofocus>(a un solo campo, o solo tomará el último)

42. Placeholder<input type="text" placeholder="Escriba su nombre">(tener en cuenta que el placeholder se esconde si hay autofocus)

43. Pattern<label> Nro. de Tarjeta de Crédito:<input pattern="[0-9]{13,16}"></label>

44. Datalist (auto-suggest)<input type="url" name="diario" list="sugerencias"> <datalist id="sugerencias"> <option label="La Nación" value="http://www.lanacion.com.ar"></option> <option label="Clarín" value="http://www.clarin.com"></option> <option label="Página 12" value="http://www.pagina12.com.ar"></option> <option label="Infobae" value="http://www.infobae.com"></option> </datalist>

45. No validar:<form novalidate>Para usar validación propia(con JavaScript)

46. Compatibilizar formulariospara navegadores viejoshttps://github.com/ryanseddon/H5F

47. Multimedia HTML5: Audio, video y animaciones

48. Audio<audio controls="controls"> <source src=“x.ogg" type="audio/ogg" /> <source src=“x.mp3" type="audio/mpeg" />Contenido alternativo.</audio>

49. Formatos soportados.mp3 - Chrome y Safari.ogg - Firefox y Opera¿Explorer? Fallback con Player.flv

50. Video<video controls="controls" preload="auto"><source src= "x.mp4" type="video/mp4" /> <source src= "x.webm" type="video/webm" /><source src= "x.ogg" type="video/ogg" /> Contenido alternativo.</video>