Taller sobre HTML5 y CSS3 que dicté en la conferencia ArtMedia 2011, en la Universidad Maimónides.

1. HTML5 & CSS3 Hernán Beati @hernan_beati [email_address]

2. Hernán Beati Desarrollador 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 = 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 + + + ...

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

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

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á…

18. ¿Y entonces c uál es la respuesta ? ¿ Ya se puede usar!?

19. Versión abreviada: Sí

20. Versión explicada: Se puede usar mediante técnicas de compatibilidad

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 plano para Explorers viejos, y no perder tiempo en compatibilizar la estética... (O cobrar ese tiempo aparte!)

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. ¿qué debo hacer para usar HTML5 y CSS3 ya ? Entonces,

29. Cambiar la forma de pensar el diseño web.

30. Nuestro concepto de diseño web no 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 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

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)

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

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 consensuado de 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.

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

50. 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. 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. Headers & Footers Pertenecen a secciones (article, aside, nav y section) además del body. Ver ejemplo

54. 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=&quot;logo.jpg&quot; /> </figure> Ver ejemplo

56. Compatibilizador para Explorer

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

61. <div class=&quot;vcard&quot; > <img class=&quot;photo&quot; src=&quot;http://www.sitio.com/tim.jpg&quot; /> <strong class=&quot;fn&quot; >Tim Berners-Lee</strong> <span class=&quot;title&quot; >Director</span> del <span class=&quot;org&quot; >W3C</span> <span class=&quot;adr&quot; > <span class=&quot;street-address&quot; >C/Ada Byron, 39</span> <span class=&quot;locality&quot; >Asturias</span>, <span class=&quot;region&quot; >España</span> <span class=&quot;postal-code&quot; >33203</span> </span> </div> Ver ejemplo

62. ¿Principal dificultad de los formularios? Validación!

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

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

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

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

67. URL: <input type=&quot; url &quot;> Valida que sea una URL absoluta

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

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

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

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

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

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

74. Week: <input type=&quot; week &quot;> Mismos atributos que Date (min, max, step) Formato: 2011-W17

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

76. Color: <input type=&quot; color &quot;> Opera 11+

77. Atributos nuevos

78. Multiple <input type=&quot;file&quot; multiple=&quot;true&quot; > Se usa en inputs de tipo file o email

79. Autocomplete <input type=&quot;text&quot; autocomplete=“on” > (por default) <input type=&quot;text&quot; autocomplete=“off” >

80. Campos obligatorios <form> <input type=&quot;email&quot; id=&quot;casilla&quot; required > <input type=&quot;submit&quot; value=&quot;Subscribirse&quot;> </form>

81. Autofocus <input type=&quot;text&quot; autofocus > (a un solo campo, o solo tomará el último)

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

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

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

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

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

87. Multimedia HTML5 : Audio, video y animaciones

88. Audio <audio controls=&quot;controls&quot;> <source src=“x. ogg &quot; type=&quot;audio/ ogg &quot; /> <source src=“x. mp3 &quot; type=&quot;audio/ mpeg &quot; /> Contenido alternativo. </audio>

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

90. Video <video controls=&quot;controls&quot; preload=&quot;auto&quot;> <source src= &quot;x. mp4 &quot; type=&quot;video/ mp4 &quot; /> <source src= &quot;x. webm &quot; type=&quot;video/ webm &quot; /> <source src= &quot;x. ogg &quot; type=&quot;video/ ogg &quot; /> Contenido alternativo. </video>

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

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

93. Poster poster=&quot; imagen_inicial.jpg “ Imagen que se ve antes de dar play

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

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

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

97. Libros sobre Canvas

98. Asegurar soporte: <!--[if IE]> <script src=&quot;excanvas.js&quot;></script> <![endif]--> http://excanvas.sourceforge.net

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

100. Hacemos un break! Y seguimos con: Posibilidades de CSS3

101. 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. 1. Tipografías con @font-face

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

105. @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. Columnas column-count : Cuántas column-width : Ancho column-gap : Hueco column-rule : Rayita

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

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

109. 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. ¿Y Explorer? Comentarios Condicionales: <!--[if IE ]> <link rel= “stylesheet” href= “ hojaexplorer.css ”> <![endif]-->

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

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

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

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

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

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

118. Border-image #algo{ border-image : url(&quot;borde.png&quot;) 12 repeat round; }

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

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

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

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

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

126. http://mediaqueri.es http://mediaqueri.es

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

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

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

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

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

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

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

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

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

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

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

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

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

140. Transformaciones, transiciones y animaciones con CSS3

141. 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. Transformaciones

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

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

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

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

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

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

149. Transiciones Cambio de valor de una propiedad en un tiempo

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

151. 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. 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/

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

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

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

156. 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. Conversor agrega prefijos http://animationfillcode.com

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

159. Sencha Animator (+/- Flash 3) http://www.sencha.com/products/animator/ Adobe Wallaby http://labs.adobe.com/downloads/wallaby.html Adobe Edge labs.adobe.com/technologies/edge/

160. Estar pendientes de avances del W3C: http://www.w3.org/Style/CSS/current-work

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

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

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

164. Ver ejemplos: http://www.html5demos.com Usar técnicas de compatibilidad también para JavaScript: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

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

166. HTML5 & CSS3 Hernán Beati @hernan_beati [email_address]