Académique Documents
Professionnel Documents
Culture Documents
Hernn Beati
@hernan_beati
hernan@saberweb.com.ar
Hernn Beati
Desarrollador Web + 12 aos
+ coautor con
Maximiliano Firtman
Autor libro:
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 (programacin)
+ Otros estndares W3C (SVG, MathMl)
+ Estndares de facto (microformatos)
+ Experimentos de algn navegador
+ + + ...
Nuevo en HTML5
Nuevas etiquetas semnticas
(Google debe entender los contenidos)
Movimientos: transformaciones,
transiciones, animaciones
(menor uso de JavaScript)
*(conceptos errneos)
El principal:
Esperar que la
perfeccin total se
haga realidad un da.
El Da D nunca existir
Cuando todos los seres
humanos del mundo se
actualicen a X
navegador...
Ya se puede usar!?
Versin abreviada:
S
Versin explicada:
Se puede usar
mediante tcnicas
de compatibilidad
Principales tcnicas:
Mejora progresiva
(Progressive enhancement).
Degradacin elegante
(Graceful degradation).
Mejora regresiva
(Regressive enhancement).
1. Mejora progresiva
(Progressive enhancement)
www.csszengarden.com
2. Degradacin elegante
(Graceful degradation)
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 caracterstica esttica).
Diseo Adaptable
(responsive design)
NO BUSCAR UNIFORMIDAD!!!
Supera actitudes extremas de:
-Usar slo caractersticas CSS bsicas que sean
soportadas por el obsoleto Explorer 6 (recin
Explorer 8 aplic CSS 2.1 completo, 10 aos!!!).
qu debo hacer
para usar
HTML5 y CSS3 ya?
Cambiar la forma
de pensar
el diseo web.
Nuestro concepto
de diseo web no
puede seguir siendo
el mismo que en
diseo grfico.
La web es <---flexible--->
(mltiples dispositivos,
mltiples navegadores)
La web es MUY flexible:
(Para cul resolucin disear? Para TODAS!!)
Y ms!...
...pero yo quiero que mis
diseos se vean idnticos en
todos los navegadores y en todos
los dispositivos...
!!!?
Pensar el diseo web como
creacin de experiencias de
usuario, y no como una
decoracin rgida,
uniformizadora, ni como un
lienzo artstico.
Es lo lgico...
Conclusin:
HTML5 es el estndar
ms consensuado
de la historia!
Todos lo apoyan...
Objetivo de nuevas etiquetas?
Article
Aside
Nav
Section
1. Article
Es el contenido importante
de cada pgina
Ver ejemplo
2. Aside
Es informacin secundaria,
que podra no estar.
Ver ejemplo
3. Nav
Una barra de navegacin.
Ver ejemplo
4. Section
Una seccin explcita.
Ver ejemplo
4.a Section = parte de...
Puede haber una o ms 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)
adems del body.
Ver ejemplo
Figure
No es solo para fotos (diagramas, SVG,
MathML, listas de cdigo) que puedan ser
referenciados (apndice, ndice, etc.)
<figure>
<figcaption>Bla</figcaption>
<img src="logo.jpg" />
</figure>
Ver ejemplo
Compatibilizador para Explorer
Textos ms semnticos
Mark: resultados resaltados (en vez de
span, em o strong)
Time: Hora, Fecha, o ambas cosas
Meter: Medidas dentro de una escala
Progress: Medidas dinmicas,
cambiantes
<Etiquetas> que cambiaron
Extensibilidad con
Microdata y
Microformatos
Google debe entender cul contenido es
importante y cul no lo es...
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897
Datos personales
Opiniones / revisiones
Contactos
Productos
Empresas
Recetas
Eventos
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">Espaa</span>
<span class="postal-code">33203</span>
</span>
</div>
Ver ejemplo
Principal dificultad de los
formularios?
Validacin!
Soluciones HTML5:
Formato: -12345.678e+90
(puede ser negativo, usa punto para decimales,
e para exponente, ms
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 Nacin"
value="http://www.lanacion.com.ar"></option>
<option label="Clarn"
value="http://www.clarin.com"></option>
<option label="Pgina 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 tecnologas:
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: Cuntas
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
Degrads
Transparencias
Translucidez RGBa
body{
background-color:rgb(100,20,40);
/* Fallback slido */
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 slido
RR = Red
GG = Green
BB = Blue
Conversor RGB a Hexadecimal:
http://www.javascripter.net/faq/rgbtohex.htm
Tono, saturacin, 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 mvil??????
La ausencia de deteccin
de Media Queries debe ser
el primer filtro!
Mejor:
Sitio Mvil
+ media queries =
Sitio PC
(Progressive enhancement)
Mvil primero:
Transicin = dinmica,
cambia entre dos estados
Animacin = serie de
transiciones, con timing
Transformaciones
Funciones posibles de transform:
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 animacin.
Editor online
de timing de transiciones:
http://matthewlein.com/ceaser/
Comparacin 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 libreras
(JQuery y similares) para
funcionalidades comunes
2) Nuevas funcionalidades
1. Geolocalizacin
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. Mviles: DeviceMotion, Viewport,
Gestures, Touch
Ver ejemplos:
http://www.html5demos.com
Hernn Beati
@hernan_beati
hernan@saberweb.com.ar