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

Presentación del tema: "HTML5 & CSS3 Hernán Beati @hernan_beati hernan@saberweb.com.ar 1."— Transcripción de la presentación:

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 Web
Web = 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 plugins
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) 6

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

8 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 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ía
El 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 navegador
La 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 compatibilidad
20

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 navegador
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 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 design
Deberemos 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 aplicando
39

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

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

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

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 43

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> 44

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ágina
Puede 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ágina
Ver ejemplo 49

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

51 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 51

52 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 52

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.) <figure> <figcaption>Bla</figcaption> <img src="logo.jpg" /> </figure> 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 <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 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 <div class="vcard"> <img class="photo" src="http://www. sitio
<div class="vcard"> <img class="photo" src=" /> <strong class="fn">Tim Berners-Lee</strong> <span class="title">Director</span> del <span class="org">W3C</span> <span class="adr"> <span class="street-address">C/Ada Byron, 39</span> <span class="locality">Asturias</span>, <span class="region">España</span> <span class="postal-code">33203</span> </span> </div> Ver ejemplo 62

63 ¿Principal dificultad de los formularios? Validación!
63

64 Soluciones HTML5: Nuevos tipos de input y nuevos atributos auto-validables
64

65 13 nuevos type: search, tel, url, , number, range, datetime, datetime-local, date, month, week, time, color 65

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

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

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

69 Email: <input type="email"> Verifica que la casilla sea válida
<input type=" "> 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: <input type="number" min="0" max="100" step="10" value="50"> Formato: e+90 (puede ser negativo, usa punto para decimales, e para exponente, más signo y potencia) 70

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

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

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

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

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

76 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 76

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

78 Atributos nuevos 78

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

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

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

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

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

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

85 Datalist (auto-suggest) <input type="url" name="diario" list="sugerencias"> <datalist id="sugerencias"> <option label="La Nación" value=" <option label="Clarín" value=" <option label="Página 12" value=" <option label="Infobae" value=" </datalist> 85

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

87 Compatibilizar formularios para navegadores viejos https://github
87

88 Multimedia HTML5: Audio, video y animaciones
88

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

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

91 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> 91

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

93 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”. 93

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

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

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

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

98 Libros sobre Canvas 98

99 Asegurar soporte: <. --[if IE]> <script src="excanvas
Asegurar soporte: <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> 99

100 Referencias oficiales de HTML5: Versión aprobada (vieja): http://www
Referencias oficiales de HTML5: Versión aprobada (vieja): Versión borrador “vivo”: Versión del WHATWG: 100

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

102 Nuevas posibilidades estéticas Textos: Fuentes, columnas, wrap
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. 102

103 1. Tipografías con @font-face
103

104

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

106 @font-face { font-family: 'Mega'; /. Nombre a usar. / src: url('mega
@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 */ } 106

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

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

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

110 Translucidez RGBa body{ background-color:rgb(100,20,40); /
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 110

111 ¿Y Explorer. Comentarios Condicionales: <
¿Y Explorer? Comentarios Condicionales: <!--[if IE]> <link rel= “stylesheet” href= “hojaexplorer.css”> <![endif]--> 111

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

113 Formato startColorstr AARRGGBB AA = Alpha, 00 transparente, FF sólido RR = Red GG = Green BB = Blue Conversor RGB a Hexadecimal: 113

114 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: 114

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

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

117

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

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

120 Ejemplo de border-image http://www. w3
120

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

122

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

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

125

126 Media queries (consultas sobre el medio) Detectan características de un dispositivo, para aplicarle distintos estilos 126

127 127

128 Media “a la antigua” En el HTML: <link rel="stylesheet” media="screen" href=“pantalla.css"> <link rel="stylesheet” media="print" href=“impresora.css"> <link rel="stylesheet” media=“handheld" href=“algun-celular.css"> 128

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

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

131 Condiciones (Queries): <link href=“celular
Condiciones (Queries): <link href=“celular.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 320px)” > <link href=“tableta.css" rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 768px)" > <link href=“monitor.css" rel="stylesheet" media="screen and (min-width: 801px)"> 131

132 Detectar orientación <link rel="stylesheet" media="all and (orientation:portrait)" href=“vertical.css"> <link rel="stylesheet" media="all and (orientation:landscape)"href=“horizontal.css"> 132

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

134 iPhone, iPad y PC <link rel="stylesheet" media="all and (max-device-width: 480px)" href=“iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href=“ipad.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href=“ipad-horizontal.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href=“pc.css"> 134

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

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

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

138 Móvil primero: <link rel="stylesheet" media=“screen" href=“celulares.css"> <link rel="stylesheet" media=“screen and (min-device-width:1024px) and (max-width:989px)" href=“pc.css"> 138

139 Compatibilidad para navegadores viejos: http://code. google
139

140 TODOS los fallbacks: https://github
140

141 Transformaciones, transiciones y animaciones con CSS3
141

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

143 Transformaciones 143

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

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

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

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

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

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

150 Transiciones Cambio de valor de una propiedad en un tiempo
150

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

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

153 Editor online de timing de transiciones: http://matthewlein
Editor online de timing de transiciones: Comparación de timings: Valores de timing por defecto: 153

154 Animaciones solo con CSS. Referencia oficial del W3C: http://dev. w3
154

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

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

157 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; } 157

158 Conversor agrega prefijos http://animationfillcode.com
158

159 Soporte navegadores y ejemplos http://robertnyman.com/css3/
159

160 Sencha Animator (+/- Flash 3) http://www. sencha
Sencha Animator (+/- Flash 3) Adobe Wallaby Adobe Edge labs.adobe.com/technologies/edge/ 160

161 Estar pendientes de avances del W3C: http://www. w3
161

162 APIs de JavaScript (son algo para programadores, solo daremos un vistazo para saber qué posibilidades hay) 162

163 Objetivos: 1) No depender de librerías (JQuery y similares) para funcionalidades comunes 2) Nuevas funcionalidades 163

164 1. Geolocalización 2. Multimedia: Audio, Video, Canvas 3
1. Geolocalización Multimedia: Audio, Video, Canvas Trabajo offline con Local Storage, Web Storage, Bases de Datos locales, Application Cache File System, Historial, WebSockets, Drag and Drop, Hilos (Threads): Web Workers 6. Móviles: DeviceMotion, Viewport, Gestures, Touch 164

165 Ver ejemplos: http://www.html5demos.com
Usar técnicas de compatibilidad también para JavaScript: 165

166 Conclusión: Usar HTML5 y CSS3 mediante técnicas de compatibilidad
+Aplicar Diseño Adaptable (responsive design) 166

167 HTML5 & CSS3 Hernán Beati @hernan_beati 167