Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML5 CSS3
HTML5 CSS3
Hernán Beati
@hernan_beati
[email protected]
Hernán Beati
Desarrollador Web + 12 años
+ coautor con
Autor libro: Maximiliano Firtman
Fundador de:
Docente en:
Web = HTML
Lenguaje universal, base de la Web
HTML 4.01 = 1999
XHTML 1.0 = 2000
XHTML 1.1 = 2001
XHTML 2 = ?
HTML5
¿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
+ + + ...
Nuevo en HTML5
Nuevas etiquetas semánticas
(Google debe entender los contenidos)
Movimientos: transformaciones,
transiciones, animaciones
(menor uso de JavaScript)
*(conceptos erróneos)
El principal:
Esperar que la
perfección total se
haga realidad un día.
El “Día D” nunca existirá…
“Cuando todos los seres
humanos del mundo se
actualicen a X
navegador...”
Sí
Versión explicada:
Se puede usar
mediante técnicas
de compatibilidad
Principales técnicas:
l Mejora progresiva
(Progressive enhancement).
l Degradación elegante
(Graceful degradation).
l Mejora regresiva
(Regressive enhancement).
1. Mejora progresiva
(Progressive enhancement)
www.csszengarden.com
2. Degradación elegante
(Graceful degradation)
3. Mejora Regresiva:
Complementar al navegador
l 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).
Diseño Adaptable
(responsive design)
NO BUSCAR UNIFORMIDAD!!!
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!!!).
Y más!...
“...pero yo quiero que mis
diseños se vean idénticos en
todos los navegadores y en todos
los dispositivos...”
¿!!!?
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.
Es lo lógico...
Conclusión:
HTML5 es el estándar
más consensuado
de la historia!
Todos lo apoyan...
¿Objetivo de nuevas etiquetas?
l Article
l Aside
l Nav
l Section
1. Article
Es el contenido importante
de cada página
Ver ejemplo
2. Aside
l Es información secundaria,
que podría no estar.
Ver ejemplo
3. Nav
l Una barra de navegación.
Ver ejemplo
4. Section
l 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>
</section>
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
Compatibilizador para Explorer
Textos más semánticos
l Mark: resultados resaltados (en vez de
span, em o strong)
l Time: Hora, Fecha, o ambas cosas
l Meter: Medidas dentro de una escala
l Progress: Medidas dinámicas,
cambiantes
<Etiquetas> que cambiaron
Extensibilidad con
Microdata y
Microformatos
“Google debe entender cuál contenido es
importante y cuál no lo es...”
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897
l Datos personales
l Opiniones / revisiones
l Contactos
l Productos
l Empresas
l Recetas
l Eventos
l Video
<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
¿Principal dificultad de los
formularios?
Validación!
Soluciones HTML5:
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>
(con JavaScript)
Compatibilizar
formularios
para navegadores
viejos
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-family: 'Mega'; /* Nombre a usar */
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://
mediaqueri.e
s
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;
}
Conversor
agrega prefijos
http://animationfillcode.com
Soporte navegadores
y ejemplos
http://robertnyman.com/css3/
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/
Estar pendientes de
avances del W3C:
http://www.w3.org/Style/CSS/current-work
APIs de JavaScript
(son algo para programadores,
solo daremos un vistazo para
saber qué posibilidades hay)
Objetivos:
1) No depender de librerías
(JQuery y similares) para
funcionalidades comunes
2) Nuevas funcionalidades
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
Ver ejemplos:
http://www.html5demos.com
Hernán Beati
@hernan_beati
[email protected]