Desarrollo de aplicaciones web

1. HTML5 & CSS3

2. PROGRACIÓN DE
SITIOS WEB CON
HTML5

3. HTML5:
Primer estándar
“Dinámico”

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

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

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

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

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

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

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

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

22. Compatibilizador para Explorer

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

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

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

26. Datos personales
Opiniones / revisiones
Contactos
Productos
Empresas
Recetas
Eventos
Video
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897

27. <div class="vcard">
<img class="photo"
src="http://www.sitio.com/tim.jpg" />
<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

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

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

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

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

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

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

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

35. 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ás
signo y potencia)

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

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

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

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

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

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

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

43. Atributos nuevos

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

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

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

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

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

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

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

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

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

53. Multimedia HTML5:
Audio, video y
animaciones

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

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

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

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

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

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

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

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

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

63. Libros sobre Canvas

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

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

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

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

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

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

71. @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 */
}

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

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

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

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

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

77. 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;
}

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

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

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

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

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

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

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

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

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

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

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

92. http://media
queri.es

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

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

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

96. 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)">

97. 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">

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

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

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

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

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

103. 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">

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

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

106. Transformaciones, transiciones
y animaciones con CSS3

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

108. Transformaciones

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

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

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

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

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

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

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

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

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

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

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

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

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

122. 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;
}

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

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

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

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

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

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

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

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

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

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