Professional Documents
Culture Documents
Hernán Beati
@hernan_beati
hernan@saberweb.com.ar
Nuevo en HTML5
Nuevas etiquetas semánticas
(Navegadores debe entender los contenidos)
Movimientos: transformaciones,
transiciones, animaciones
(menor uso de JavaScript)
Diseño Adaptable
(responsive design)
Y más!...
Antes: W3C definía
reglas, que luego los
navegadores iban
aplicando
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
Ejemplos:
Antes: Ahora:
<div id=“wrapper”></div> <section></section>
<div id=“noticia”></div> <article></article>
<div id=“banners”></div> <aside></aside>
<div id=“header”></div> <header></header>
<div id=“footer”></div> <footer></footer>
<div id=“nav”></div> <nav></nav>
<div id=“foto”> <figure>
<img src=“x” /> <img src=“x” />
<p>Esta foto habla de...</p> <figcaption><p>Esta foto
</div> habla de...</p></figcaption>
</figure>
Secciones explícitas
Article
Aside
Nav
Section
1. Article
Es el contenido importante
de cada página
Ver ejemplo
2. Aside
Es información secundaria,
que podría no estar.
Ver ejemplo
3. Nav
Una barra de navegación.
Ver ejemplo
4. Section
Una sección explícita.
Ver ejemplo
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
4.b Section = “contenedor de...”
<section>
<article>Noticia de hoy</article>
<article>Noticia de ayer</article>
</article>
Ver ejemplo
Headers & Footers
Pertenecen a secciones
(article, aside, nav y section)
además del body.
Ver ejemplo
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
Textos más semánticos
Formato: -12345.678e+90
(puede ser negativo, usa punto para decimales,
e para exponente, más
signo y potencia)
Range:
<input type="range"
min="0" max="100" step="10"
value="50">
Formato: 11:59
Formato con segundos (opcionales): 11:59:59
Color:
<input type="color">
Opera 11+
Atributos nuevos
Multiple
<input type="text"
autocomplete=“on”> (por default)
<input type="text"
autocomplete=“off”>
Campos obligatorios
<form>
<input type="email" id="casilla" required>
<input type="submit" value="Subscribirse">
</form>
Autofocus
<input type="text"
placeholder="Escriba su nombre">
<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>
No validar:
<form novalidate>
https://github.com/ryanseddon/H5F
Multimedia HTML5:
Audio, video y
animaciones
Audio
<audio controls="controls">
Contenido alternativo.
</audio>
Formatos soportados
.mp3 - Chrome y Safari
.ogg - Firefox y Opera
Contenido alternativo.
</video>
Formatos soportados
.mp4– Chrome 6, Safari 5, Explorer 9
.ogg y WebM – Chrome, Firefox y
Opera
3 tecnologías:
1) Canvas (bitmap)
2) SVG (vectorial) -poco soporte-
3) CSS3 Animations
Ejemplos de Canvas
http://agent8ball.com/
http://www.s5-style.com/
Libros sobre Canvas
Asegurar soporte:
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
http://excanvas.sourceforge.net
Referencias oficiales de HTML5:
#titulos{
font-family: Mifuente, arial, helvetica,
sans-serif;
}
@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 */
}
Columnas
column-count: Cuántas
column-width: Ancho
column-gap: Hueco
column-rule: Rayita
.tres_columnas{
column-count: 3;
column-width: 120px;
column-gap: 24px;
column-rule: 1px solid #999;
}
2. Colores en CSS3
RGBa
HSL
HSLa
Degradés
Transparencias
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
¿Y Explorer?
Comentarios Condicionales:
<!--[if IE]>
<link rel= “stylesheet”
href= “hojaexplorer.css”>
<![endif]-->
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;
}
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
Tono, saturación, brillo: HSL
body{
background-color: hsl(360,100%,20%);
}
#algo {
border-radius:10px;
}
Border-image
#algo{
border-image: url("borde.png")
12 repeat round;
}
Ejemplo de border-image
http://www.w3.org/TR/css3-background/#border-images
Ejemplo de Box-shadow
.sombra {
box-shadow: 10px 10px 5px #999;
}
Sombra en Explorer
.sombra {
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.
Shadow(color='#969696',
Direction=135, Strength=3);
}
Text-shadow
.sombra {
text-shadow: 10px 10px 5px #999;
}
Media queries
(consultas sobre el medio)
http://www.w3.org/TR/css3-mediaqueries
http://media
queri.es
Media “a la antigua”
En el HTML:
<link rel="stylesheet” media="screen"
href=“pantalla.css">
Sitio PC
+ media queries =
Sitio móvil??????
La ausencia de detección
de Media Queries debe ser
el primer filtro!
Mejor:
Sitio Móvil
+ media queries =
Sitio PC
(Progressive enhancement)
Móvil primero:
Transición = “dinámica”,
cambia entre dos estados
1. scale
2. rotate
3. skew
4. translate
5. matrix
1. Scale
transform: scale(1.5);
/* Aumenta 50% ambos sentidos */
transform:scale(1.5,0.5);
/* Aumenta 50% horizontal y reduce
50% vertical */
Escalar en Explorer <9
Por separado:
skewX(grados)
skewY(grados)
4. Translate
transform: translate(30px,10px);
Por separado:
translateX(distancia)
translateY(distancia)
Transiciones
a:hover {
color: yellow; background: blue;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
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.
Editor online
de timing de transiciones:
http://matthewlein.com/ceaser/
Comparación de timings:
http://www.the-art-of-web.com/css/timing-function/
@-webkit-keyframes nombre {
0% {
transform:funcion(valor);
}
20% {
transform:funcion(valor);
}
100% {
transform:funcion(valor);
}
}
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;
}