HTML5 & CSS3 Hernán

Presentación del tema: "HTML5 & CSS3 Hernán"— Transcripción de la presentación:

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 Selectores más precisos (menor uso de marcado innecesario)

4 Nuevo en Scripts Animaciones con Canvas Drag & Drop Geolocalizació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

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

6 La web es (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: Esta foto habla de... Ahora: Esta foto habla de...

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: Datos del Autor Comentarios Ver ejemplo

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

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

19

20 Figure No es solo para fotos (diagramas, SVG, MathML, listas de código) que puedan ser referenciados (apéndice, índice, etc.) Bla Ver ejemplo

21

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 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: -Botón “x” para “limpiar” -No permite saltos de línea -Degrada en “text”

26 Tel: -Puede incluir espacios o guiones -Degrada en “text” -Por ahora, es solo semántica

27 URL: Valida que sea una URL absoluta

28 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: Formato: -12345.678e+90 (puede ser negativo, usa punto para decimales, e para exponente, más signo y potencia)

30 Range: Usar si no importa la precisión del número, sino la usabilidad.

31 Date: Puede llevar min, max (rango permitido) y step (por default, de a 1 día) Formato: 2011-09-19

32 Datetime: Fecha y hora en formato UTC: 2011-05-19T10:55:59.001-03:00

33 Month: -Mismos atributos que Date (min, max, step) -Formato: 2011-05 -¿vencimiento de tarjeta de crédito?

34 Week: Mismos atributos que Date (min, max, step) Formato: 2011-W17

35 Time: Mismos atributos que date. Formato: 11:59 Formato con segundos (opcionales): 11:59:59

36 Color: Opera 11+

37 Atributos nuevos

38 Multiple Se usa en inputs de tipo file o email

39 Autocomplete (por default)

40 Campos obligatorios

41 Autofocus (a un solo campo, o solo tomará el último)

42 Placeholder (tener en cuenta que el placeholder se esconde si hay autofocus)

43 Pattern Nro. de Tarjeta de Crédito:

44 Datalist (auto-suggest)

45 No validar: Para usar validación propia (con JavaScript)

46 Compatibilizar formularios para navegadores viejos https://github.com/ryanseddon/H5F https://github.com/ryanseddon/H5F

47 Multimedia HTML5: Audio, video y animaciones

48 Audio Contenido alternativo.

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

50 Video Contenido alternativo.

51 Formatos soportados. mp4 – Chrome 6, Safari 5, Explorer 9.ogg y WebM – Chrome, Firefox y Opera ¿Explorer viejo? Fallback con.flv

52 Valores de Preload preload="none" (no descarga nada) preload="metadata" (no baja el video, pero sí sus metadatos -tamaño, etc.-) preload="auto" (lo baja por adelantado) preload="" (igual a auto, lo baja) Si no es declarado, cada navegador decide, aunque especificación dice que debe aplicar “metadata”.

53 Poster poster="imagen_inicial.jpg“ Imagen que se ve antes de dar play

54 Video con fallback http://camendesign.com/code/video_for_everybody http://camendesign.com/code/video_for_everybody

55 Animaciones “a la HTML5” (sin Flash) 3 tecnologías: 1) Canvas (bitmap) 2) SVG (vectorial) -poco soporte- 3) CSS3 Animations

56 Ejemplos de Canvas http://agent8ball.com/ http://www.s5-style.com/ http://agent8ball.com/ http://www.s5-style.com/

57 Libros sobre Canvas

58 Asegurar soporte: http://excanvas.sourceforge.net http://excanvas.sourceforge.net

59 Referencias oficiales de HTML5: Versión aprobada (vieja): http://www.w3.org/TR/html5/ Versión borrador “vivo”: http://dev.w3.org/html5/markup/Overview.html Versión del WHATWG: http://www.whatwg.org/html http://www.w3.org/TR/html5/ http://dev.w3.org/html5/markup/Overview.html http://www.whatwg.org/html

60 Hacemos un break! Y seguimos con: Posibilidades de CSS3

61 Nuevas posibilidades estéticas Textos: Fuentes, columnas, wrap. Colores: transparencia, degradé. Elementos decorativos: bordes, sombras de cajas y de textos, efectos 3D, fondos múltiples.

62 1. Tipografías con @font-face

63

64 @font-face{ font-family:Mifuente; src: fuente.woff; } #titulos{ font-family: Mifuente, arial, helvetica, sans-serif; }

65 @font-face { font-family: 'Mega'; /* Nombre a usar */ src: url('mega.eot'); /* Compat. c/IE 9 */ src: url('mega.eot?#iefix') format('embedded- opentype'), /* IE 6-8 */ url('mega.woff') format('woff'), /* resto */ url('mega.ttf') format('truetype'), /* Safari, Android, iOS */ url('mega.svg#MegalopolisExtraRegular') format('svg'); /* iOS versiones viejas */ }

66 Columnas column-count: Cuántas column-width: Ancho column-gap: Hueco column-rule: Rayita

67 .tres_columnas{ column-count: 3; column-width: 120px; column-gap: 24px; column-rule: 1px solid #999; }

68 2. Colores en CSS3 RGBa HSL HSLa Degradés Transparencias

69 Translucidez RGBa body{ background-color:rgb(100,20,40); /* Fallback sólido */ background- color:rgba(100,20,40,0.5); } A diferencia de opacity, no se hereda! RGBa(0,0,0,0) es transparente total

70 ¿Y Explorer? Comentarios Condicionales:

71 Dentro de hojaexplorer.css:.translucido { background:transparent; filter:progid:DXImageTransform. Microsoft.gradient(startColorstr=#9900 0050,endColorstr=#99000050); /* mismo valor de inicio y fin / zoom: 1; }

72 Formato startColorstr AARRGGBB AA = Alpha, 00 transparente, FF sólido RR = Red GG = Green BB = Blue Conversor RGB a Hexadecimal: http://www.javascripter.net/faq/rgbtohex.htm http://www.javascripter.net/faq/rgbtohex.htm

73 Tono, saturación, brillo: HSL body{ background-color: hsl(360,100%,20%); } Valor de Tono: 0 a 360 (0 rojo, 120 verde, 240 azul, 360 rojo) Conversor para fallback: http://serennu.com/colour/hsltorgb.php http://serennu.com/colour/hsltorgb.php

74 Tono, saturación, brillo + Translucidez: HSLa body{ background-color: hsla(300,130%,65%,10%); } HSL con translucidez Alpha

75 Generador de Degradés http://gradients.glrzad.com http://gradients.glrzad.com

76

77 Bordes redondeados #algo { border-radius:10px; }

78 Border-image #algo{ border-image: url("borde.png") 12 repeat round; }

79 Ejemplo de border-image http://www.w3.org/TR/css3-background/#border-images http://www.w3.org/TR/css3-background/#border-images

80 Ejemplo de Box-shadow.sombra { box-shadow: 10px 10px 5px #999; }

81

82 Sombra en Explorer.sombra { zoom: 1; filter: progid:DXImageTransform.Microsoft. Shadow(color='#969696', Direction=135, Strength=3); }

83 Text-shadow.sombra { text-shadow: 10px 10px 5px #999; }

84

85 Media queries (consultas sobre el medio) Detectan características de un dispositivo, para aplicarle distintos estilos http://www.w3.org/TR/css3-mediaquerieshttp://www.w3.org/TR/css3-mediaqueries

86 http://mediaqueri.es http://media queri.es

87 Media “a la antigua” En el HTML:

88 Media dentro de CSS @media screen { h1 { font-size: 2em; } }

89 Características detectables width, height, device-width, device-height, orientation, aspect-ratio, device-aspect- ratio, color, color-index, monochrome, resolution, scan, grid

90 Condiciones (Queries):

91 Detectar orientación

92 Detección de tamaño @media screen and (min-width: 400px) and (max-width: 2900px) { /* solo leerán esto en PCs */ }

93 iPhone, iPad y PC

94 Criterio antiguo (actual!): Sitio PC + media queries = Sitio móvil??????

95 La ausencia de detección de Media Queries debe ser el primer filtro!

96 Mejor: Sitio Móvil + media queries = Sitio PC (Progressive enhancement)

97 Móvil primero:

98 Compatibilidad para navegadores viejos: http://code.google.com/p/css3-mediaqueries-js http://code.google.com/p/css3-mediaqueries-js

99 TODOS los fallbacks: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

100 Transformaciones, transiciones y animaciones con CSS3

101 Transformación = “estática”, cambia valor de una propiedad Transición = “dinámica”, cambia entre dos estados Animación = “serie de” transiciones, con timing

102 Transformaciones

103 Funciones posibles de transform: 1. scale 2. rotate 3. skew 4. translate 5. matrix

104 1. Scale transform: scale(1.5); /* Aumenta 50% ambos sentidos */ transform:scale(1.5,0.5); /* Aumenta 50% horizontal y reduce 50% vertical */

105 Escalar en Explorer <9 zoom: 1; /* Siempre al principio, para activar hasLayout */ /* Ahora sí, reducimos o ampliamos */ zoom: 1.5; /* Aumenta tamaño */

106 2. Rotate transform:rotate(45deg); Positivo: sentido agujas del reloj Negativo: contra reloj

107 3. Skew transform: skew(5deg,-5deg); Por separado: skewX(grados) skewY(grados)

108 4. Translate transform: translate(30px,10px); Por separado: translateX(distancia) translateY(distancia)

109 Transiciones Cambio de valor de una propiedad en un tiempo

110 Ejemplo: a { color: white; background: red; } a:hover { color: yellow; background: blue; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; }

111 Propiedades por separado transition-property: Propiedad(es) CSS a ser animadas. transition-duration: En segundos. Por defecto el valor es 0. transition-timing-function: Define ease (por defecto), linear, ease-in, ease-out y ease-in-out. transition-delay: Pausa antes de iniciar animación.

112 Editor online de timing de transiciones: http://matthewlein.com/ceaser/ Comparación de timings: http://www.the-art-of-web.com/css/timing-function/ Valores de timing por defecto: http://www.w3.org/TR/css3-transitions/ http://matthewlein.com/ceaser/ http://www.the-art-of-web.com/css/timing-function/ http://www.w3.org/TR/css3-transitions/

113 Animaciones solo con CSS! Referencia oficial del W3C: http://dev.w3.org/csswg/css3-animations/ http://dev.w3.org/csswg/css3-animations/

114 Pasos: 1. Defino keyframes (similar a “capa” en Flash) 2. Relaciono con objeto y defino propiedades

115 1. Defino keyframes: @-webkit-keyframes nombre { 0% { transform:funcion(valor); } 20% { transform:funcion(valor); } 100% { transform:funcion(valor); } }

116 2. Relaciono con objeto y defino propiedades: #objeto { -webkit-animation-name: nombre; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; }