Beruflich Dokumente
Kultur Dokumente
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)
Video, audio y animacin sin plugins
(Acceso universal: cualquier dispositivo, cualquier
navegador, cualquier versin)
Nuevos elementos de formularios
(Ms usabilidad y menor uso de JavaScript)
Nuevo en CSS3
Usar cualquier tipografa
Efectos decorativos: sombras, RGBa,
bordes redondeados, gradientes,
(menor uso de imgenes)
Movimientos: transformaciones,
transiciones, animaciones
(menor uso de JavaScript)
Diseo adaptable: Media Queries
Selectores ms precisos
(menor uso de marcado innecesario)
Nuevo en Scripts
Animaciones con Canvas
Drag & Drop
Geolocalizacin 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 (actualizacin en vivo, tipo Ajax)
Hilos (threads) Web Workers
Pero...cul es
la pregunta?
(que todos nos estamos
haciendo con HTML5 y CSS3)
Ya se puede usar!?
Naaahh...
si en Explorer
no anda!
Esa duda se basa en
rumores*
*(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...
La diversidad de versiones y plataformas
siempre existir: sin plugins, JavaScript
desactivado, resoluciones MUY diferentes.
Cuando todos los
navegadores interpreten
idnticamente el 100% del
estndar...
Las diferencias entre navegadores siempre existirn,
jams hubo 2 navegadores iguales.
La evolucin / innovacin implementando nuevas
capacidades, siempre existir.
Siempre seguirn en uso navegadores antiguos.
Cuando el W3C publique
la especificacin, ah s se
podr usar!
En 2015 recin ser Recomendacin. Para
2022 la habrn implementado los navegadores?
HTML: primer estndar VIVO, sin versin.
Se estandarizan las innovaciones.
Lo que ya funciona nunca se quitar.
...porque yo quiero que mis
diseos se vean idnticos en
todos los navegadores y en todos
los dispositivos...
!? Existen celulares de 128 x 160 pixeles, y
plasmas de 1920 x 1200px!!
Y entonces
cul es la respuesta?
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)
Despus de crear una pgina
bsica, que funcione en
Explorer, agreguemos
funcionalidades extra para
navegadores ms potentes,
usando selectores avanzados.
Dave Shea (2003)
www.csszengarden.com
2. Degradacin elegante
(Graceful degradation)
Disear para los navegadores ms
potentes y mviles, haciendo uso
pleno de HTML5 y CSS3, asumiendo que
no se va a ver idntico.
Degrada en sitio menos decorado o menos
funcional (le falta algo).
Andy Clarke propone crear hoja
de estilo de texto plano para
Explorers viejos, y no perder
tiempo en compatibilizar la
esttica...
(O cobrar ese tiempo aparte!)
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).
Se les llama shims, polyfills, scripts
compatibilizadores, etc.
Por ejemplo: Modernizr, Selectivizr, Yepnope.
Tercera posicin:
3. Mejora Regresiva:
Complementar al navegador
Aceptar diferencias entre dispositivos...
...pero tambin aceptar diferencias
entre navegadores y sus versiones.
NO BUSCAR UNIFORMIDAD!!!
En el fondo, el concepto clave es aplicar
Diseo Adaptable
(responsive design)
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!!!).
-Olvidarse completamente de navegadores
anteriores y limitados, diseando slo para
navegadores modernos (Andy Clarke)
qu debo hacer
para usar
HTML5 y CSS3 ya?
Entonces,
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.
Algo es diseo si es funcional a una meta,
EL DISEO NO ES ARTE
La pregunta del
diseo web debe ser:
puedo hacer las tareas
que vine a hacer al sitio?
(Con cualquier dispositivo,
con cualquier navegador y versin)
Deberemos explicar a
clientes y jefes
que cada usuario
ver levemente distinto
cada sitio web
Porque es inevitable
y no tiene nada de malo!
Diseo adaptable = Responsive design
Resumiendo:
(respuestas a la pregunta)
S, se puede usar HTML5 y CSS3 hoy!
Aplicando tcnicas de compatibilidad:
Mejora progresiva, Degradacin elegante o
Mejora regresiva.
Debemos aceptar la flexibilidad de la web, y
cambiar nuestras expectativas de diseo.
HTML5:
Primer estndar
vivo
Antes: W3C defina
reglas, que luego los
navegadores iban
aplicando
Ahora: navegadores
innovan, y W3C lo
agrega al estndar
Es lo lgico...
Conclusin:
HTML5 es el estndar
ms consensuado
de la historia!
Todos lo apoyan...
Objetivo de nuevas etiquetas?
Usar etiquetas con
significado
Google debe entender cul contenido es
importante y cul no lo es.
Estructuras nuevas
Article: contenido fundamental, independiente
Aside: contenido accesorio, no fundamental
Nav: barra de navegacin
Section: una seccin o bloque (ex DIV)
Header: introduccin / orientacin sobre seccin
Footer: final de una seccin
Hgroup: grupo de encabezados
Figure: contenido relacionado (imagen, video,
audio, canvas, grficos, tablas estadsticas, etc.)
Figcaption: leyenda de un elemento Figure
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>
Secciones explcitas
Article
Aside
Nav
Section
1. Article
Es el contenido importante
de cada pgina
Puede haber uno, o varios por pgina
Ver ejemplo
2. Aside
Es informacin secundaria,
que podra no estar.
Ej.: Barras laterales, banners.
Ver ejemplo
3. Nav
Una barra de navegacin.
Puede haber una, o varias por pgina
Ver ejemplo
4. Section
Una seccin explcita.
Puede haber una, o varias por pgina
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...
Una section puede tener articles
dentro (con sections dentro!):
<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
A puede envolver varias cosas (bloques)
Address pertenece a una seccin, no solo a la pgina entera
B estilo diferente, pero no ms importante ni negrita
I cambio de entonacin (en otro idioma, tecnicismos)
Strong es algo importante, aunque no se vea distinto
Cite ahora es para ttulo de la obra citada, no para autor
Hr cambio de tema entre prrafos (Ej.: vieta entre estrofas)
Small es la letra chica de los contratos, trminos legales
An ms significado?
Extensibilidad con
Microdata y
Microformatos
Google debe entender cul contenido es
importante y cul no lo es...
Datos personales
Opiniones / revisiones
Contactos
Productos
Empresas
Recetas
Eventos
Video
http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897
<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:
Nuevos tipos de input
y nuevos atributos
auto-validables
13 nuevos type:
search, tel, url, email,
number, range, datetime,
datetime-local, date, month,
week, time, color
Search:
<input type="search">
-Botn x para limpiar
-No permite saltos de lnea
-Degrada en text
Tel:
<input type="tel">
-Puede incluir espacios o guiones
-Degrada en text
-Por ahora, es solo semntica
URL:
<input type="url">
Valida que sea una URL absoluta
Email:
<input type="email">
Verifica que la casilla sea vlida.
Puede llevar el atributo multiple y en ese caso
acepta varias casillas separadas por comas.
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, ms
signo y potencia)
Range:
<input type="range"
min="0" max="100" step="10"
value="50">
Usar si no importa la precisin del nmero,
sino la usabilidad.
Date:
<input type="date">
Puede llevar min, max (rango permitido) y
step (por default, de a 1 da)
Formato: 2011-09-19
Datetime:
<input type="datetime">
Fecha y hora en formato UTC:
2011-05-19T10:55:59.001-03:00
Month:
<input type="month">
-Mismos atributos que Date (min, max, step)
-Formato: 2011-05
-vencimiento de tarjeta de crdito?
Week:
<input type="week">
Mismos atributos que Date (min, max, step)
Formato: 2011-W17
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
Color:
<input type="color">
Opera 11+
Atributos nuevos
Multiple
<input type="file" multiple="true">
Se usa en inputs de tipo file o email
Autocomplete
<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" autofocus>
(a un solo campo, o solo tomar el ltimo)
Placeholder
<input type="text"
placeholder="Escriba su nombre">
(tener en cuenta que el placeholder se
esconde si hay autofocus)
Pattern
<label>
Nro. de Tarjeta de Crdito:
<input pattern="[0-9]{13,16}">
</label>
Datalist (auto-suggest)
<input type="url" name="diario" list="sugerencias">
<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>
Para usar validacin propia
(con JavaScript)
Compatibilizar
formularios
para navegadores
viejos
https://github.com/ryanseddon/H5F
Multimedia HTML5:
Audio, video y
animaciones
Audio
<audio controls="controls">
<source src=x.ogg" type="audio/ogg" />
<source src=x.mp3" type="audio/mpeg" />
Contenido alternativo.
</audio>
Formatos soportados
.mp3 - Chrome y Safari
.ogg - Firefox y Opera
Explorer? Fallback con Player .flv
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>
Formatos soportados
.mp4 Chrome 6, Safari 5, Explorer 9
.ogg y WebM Chrome, Firefox y
Opera
Explorer viejo? Fallback con .flv
Valores de Preload
preload="none" (no descarga nada)
preload="metadata" (no baja el video,
pero s sus metadatos -tamao, etc.-)
preload="auto" (lo baja por adelantado)
preload="" (igual a auto, lo baja)
Si no es declarado, cada navegador decide, aunque
especificacin dice que debe aplicar metadata.
Poster
poster="imagen_inicial.jpg
Imagen que se ve antes de dar play
Video con fallback
http://camendesign.com/code/video_for_everybody
Animaciones
a la HTML5 (sin Flash)
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:
Versin aprobada (vieja):
http://www.w3.org/TR/html5/
Versin borrador vivo:
http://dev.w3.org/html5/markup/Overview.html
Versin del WHATWG:
http://www.whatwg.org/html
Hacemos un break!
Y seguimos con:
Posibilidades de CSS3
Nuevas posibilidades
estticas
Textos: Fuentes, columnas, wrap.
Colores: transparencia, degrad.
Elementos decorativos: bordes,
sombras de cajas y de textos,
efectos 3D, fondos mltiples.
1. Tipografas
con @font-face
@font-face{
font-family:Mifuente;
src: fuente.woff;
}
#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%);
}
Valor de Tono: 0 a 360
(0 rojo, 120 verde,
240 azul, 360 rojo)
Conversor para fallback:
http://serennu.com/colour/hsltorgb.php
Tono, saturacin, brillo +
Translucidez: HSLa
body{
background-color:
hsla(300,130%,65%,10%);
}
HSL con translucidez Alpha
Generador de Degrads
http://gradients.glrzad.com
Bordes redondeados
#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)
Detectan caractersticas de un dispositivo,
para aplicarle distintos estilos
http://www.w3.org/TR/css3-mediaqueries
http://mediaqueri.es
http://media
queri.es
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">
Media dentro de CSS
@media screen {
h1 { font-size: 2em; }
}
Caractersticas
detectables
width, height, device-width, device-height,
orientation, aspect-ratio, device-aspect-
ratio, color, color-index, monochrome,
resolution, scan, grid
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)">
Detectar orientacin
<link rel="stylesheet" media="all and
(orientation:portrait)" href=vertical.css">
<link rel="stylesheet" media="all and
(orientation:landscape)"href=horizontal.css">
Deteccin de tamao
@media screen and (min-width: 400px) and
(max-width: 2900px) {
/* solo leern esto en PCs */
}
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">
Criterio antiguo (actual!):
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:
<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">
Compatibilidad para
navegadores viejos:
http://code.google.com/p/css3-mediaqueries-js
TODOS los fallbacks:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Transformaciones, transiciones
y animaciones con CSS3
Transformacin = esttica,
cambia valor de una propiedad
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
zoom: 1; /* Siempre al principio, para
activar hasLayout */
/* Ahora s, reducimos o ampliamos */
zoom: 1.5; /* Aumenta tamao */
2. Rotate
transform:rotate(45deg);
Positivo: sentido agujas del reloj
Negativo: contra reloj
3. Skew
transform: skew(5deg,-5deg);
Por separado:
skewX(grados)
skewY(grados)
4. Translate
transform: translate(30px,10px);
Por separado:
translateX(distancia)
translateY(distancia)
Transiciones
Cambio de valor de una
propiedad en un tiempo
Ejemplo:
a {
color: white; background: red;
}
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/
Valores de timing por defecto:
http://www.w3.org/TR/css3-transitions/
Animaciones
solo con CSS!
Referencia oficial del W3C:
http://dev.w3.org/csswg/css3-animations/
Pasos:
1. Defino keyframes
(similar a capa en Flash)
2. Relaciono con objeto
y defino propiedades
1. Defino keyframes:
@-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
Usar tcnicas de compatibilidad
tambin para JavaScript:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Conclusin:
Usar HTML5 y CSS3
mediante tcnicas
de compatibilidad
+Aplicar Diseo Adaptable
(responsive design)
HTML5 CSS3
Hernn Beati
@hernan_beati
hernan@saberweb.com.ar