Introduccin a

HTML 5 / CSS 3
HTML 5 / CSS 3
 INTRODUCCIN

HTML 5 / CSS 3
 OFFLINE
Offline
Almacenamiento
Conectividad
Acceso a ficheros
WEB ONLINE
Semntica
Audio/Video Permite realizar aplicaciones web offline
3D/Grficos - application cache - web SQL y BBDD
- localStorage - online/offline events
Presentacin
Rendimiento

HTML 5 / CSS 3
 ALMACENAMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite que las aplicaciones web guarden
datos en el dispositivo
Semntica
-Web Storage: sessionStorage/localStorage
Audio/Video - Web SQL Database
3D/Grficos - IndexedDB

Presentacin
Rendimiento

HTML 5 / CSS 3
 CONECTIVIDAD
Offline
Almacenamiento
Conectividad
Acceso a ficheros Mejora el rendimiento del acceso en tiempo
real entre aplicaciones / dispositivos /
Semntica
servidor
Audio/Video
- Cross Document Messaging
3D/Grficos -XMLHTTPRequest 2
- Web Sockets
Presentacin - Server-Sent Events

Rendimiento

HTML 5 / CSS 3
 ACCESO A FICHEROS
Offline
Almacenamiento Permite que las aplicaciones webs puedan
acceder (a)sincronamente a ficheros del
Conectividad dispositivo
Acceso a ficheros - File API
- FileReader API
Semntica
- Filesystem & FileWritter API
Audio/Video - BlobBuilder API
- Blob URLs
3D/Grficos
Presentacin
Rendimiento

File API

FilerReader API

Filesystem & FileWritter API

BlobBuilder API

Blob URLs

HTML 5 / CSS 3
 SEMNTICA
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite el uso de nuevas etiquetas / atributos
que determinan la naturaleza del contenido.
Semntica
- Elementos multimedia
Audio/Video - Elementos estructurales
- Atributos semnticos
3D/Grficos - Nuevos tipos / atributos de campos de formulario
- Sintaxis de Microformatos / microdata
Presentacin --Etc
Rendimiento

HTML 5 / CSS 3
 AUDIO / VIDEO
Offline
Almacenamiento
Conectividad
Permite no solo incluir contenido multimedia
Acceso a ficheros (audio / video) sino acceder, controlar y mani-
pular determinados aspectos de los mismos
Semntica
Audio/Video
3D/Grficos
Presentacin
Rendimiento

Video

Audio

HTML 5 / CSS 3
 3D/GRFICOS
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Semntica
Permite crear animaciones y/o efectos visuales
Audio/Video en websites/aplicaciones web sin necesidad
3D/Grficos de plugins adicionales (por ej: flash)
- 2D Canvas
Presentacin - WebGL
- SVG
Rendimiento
- 3D CSS transforms

HTML 5 / CSS 3
 PRESENTACIN
Offline
Almacenamiento
Permite crear sitios web/aplicaciones vistosas
Conectividad y visualmente enriquecidas que producen
mejores experiencias de usuario.
Acceso a ficheros
- CSS3 3D Transforms
Semntica - CSS3 Transforms
- CSS3 Animation
Audio/Video - CSS3 Transition
- Webfonts
3D/Grficos
Presentacin
Rendimiento

3D transforms

CSS3 Transforms

CSS3 Animation

CSS3 Transitions

HTML 5 / CSS 3
 RENDIMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Permite crear aplicaciones que rivalizan en
Semntica rendimiento a las aplicaciones nativas, ms
Audio/Video responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)
3D/Grficos - Almacenamiento local
- Carga asncrona
Presentacin - App cach
- Webfonts
Rendimiento

HTML 5 / CSS 3
 HISTORIA DE HTML 5

2004 Apple, Mozilla & Opera no consiguieron crear un estndar HTML4.

En consecuencia forman la Web WHATWG

2005 Se publica el borrador Web Applications 1.0

2007 W3C adopta a WHATGW y publica el borrador HTML5

2009 Finalizacin del borrador

Gracias a Google, Apple y los dispositivos mviles HTML5 surge con fuerza

2012 Primer Release Candidate de HTML5 [previsin W3C]

2020 Finalizacin de test [previsin W3C]

2022 Creacin del estndar HTML5 [previsin W3C]

HTML 5 / CSS 3
 ESTADO ACTUAL (MAYO 2012)

www.findmebyip.com/litmus/#html5-web-applications

HTML 5 / CSS 3
 BENEFICIOS

HTML5 = Evolucin

Mejor manejo de errores

Mayor estandarizacin

Cdigo ms semntico

Ms accesible

Soporte multimedia

HTML 5 / CSS 3
 BENEFICIOS

Acceso a recursos como webcams o micrfonos

Almacenamiento Local

Webworkers

Geolocalizacin

Gestin de formularios

Menor dependencia de plugins y Javascript

HTML 5 / CSS 3
 NOVEDADES

Etiquetado del documento

DOCTYPE
XHTML 1.0 HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/x
<!DOCTYPE html>
html1-strict.dtd">

HTML 5 / CSS 3
 NOVEDADES

Etiquetado del documento

META
HTML 4.01 HTML5

<meta http-equiv=Content-Type
content=text/html; charset=UTF-8> <meta charset=UTF-8>

HTML 5 / CSS 3
 NOVEDADES

Etiquetado del documento

SCRIPT
HTML 4.01 HTML5

<script type=text/javascript
<script src=file.js></script>
src=file.js> </script>

<script type=text/javascript>
<script>

</script>
</script>

HTML 5 / CSS 3
 NOVEDADES

Etiquetado del documento

HOJAS DE ESTILO
HTML 4.01 HTML5

<link rel=stylesheet type=text/css <link rel=stylesheet

href=estilos.css>
href=estilos.css>

HTML 5 / CSS 3
 NOVEDADES

Etiquetado del documento

ETIQUETA A
HTML 4.01 HTML5

<h2> <a href=acercaDe.htm>

<a href=acercaDe.htm>Acerca <h2>Acerca de</h2>
de</a>
<p>Conoce quines somos</p>
</h2>
</a>
<p>
<a href=acercaDe.htm>Conoce
quines somos</a>
</p>

HTML 5 / CSS 3
 NOVEDADES

Nuevas etiquetas de presentacin

<div id=header> <header>

<div id=menu> <nav>

<div> <article>

<div> <aside>
<div> <section>

<div id=footer> <footer>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup> <header>
<nav> representa la cabecera de un
documento o seccin
<article>
<hgroup>
<aside>
<section>
representa el ttulo de una seccin.
Se usa para agrupar conjuntos de
elementos h1-h6 (ttulos y
<footer>
subttulos)

<header>
<hgroup>
<h1>Mi Blog</h1>
<h2>Esforzndome para trabajar menos</h2>
</hgroup>
</header>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup> <nav>
<nav> representa una seccin del
documento que contiene navegacin
<article>

<aside>
<section>

<nav>
<ul>
<footer> <li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">galera</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup>
<article>
<nav>
representa una pieza de contenido
<article> independiente dentro de un
documento
<aside>
<section>
<section>
representa una seccin del
<footer>
documento (un captulo, un
apartado, etc) agrupa una serie de
contenidos con una temtica
comn

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup> <article>
<hgroup>
<nav> <h1>Ttulo del artculo</h1>
<h2>Subttulo del artculo</h2>
<article> </hgroup>
<p>Lorem ipsum dolor sit amet, consectetur
<aside> adipiscing elit.</p>
<section>
<section>
<h1>Captulo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur
<footer> adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
<section>
<h1>Captulo 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Integer bibendum scelerisque
neque, ac facilisis neque</p>
</section>
</article>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup> <figure>
<nav> representa un diagrama, una
ilustracin, una fotografa, etc
<article>

<aside>
<figcaption>
<section>
representa la nota al pie del elemento
incluido en <figure>
<footer>

<figure>
<img src=javier.jpg" alt=Javier Gonzlez">
<figcaption> Javier Gonzlez impartiendo seminarios
sobre tecnologas web</figcaption>
</figure>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup>
<aside>
representa contenidos que no estn
<nav>
directamente relacionados con el resto
<article> de contenido de la pgina o que aporta
informacin adicional
<aside>
<section>

<article>
<footer>
<header><h1>Tecnologas web</h1></header>
<p>bla bla bla</p>
<aside>
<ul>
<li><a href=#>Links sobre HTML5</a></li>
<li><a href=#>Links sobre CSS3</a></li>
</ul>
</aside>
</article>

HTML 5 / CSS 3
 NUEVAS ETIQUETAS DE PRESENTACIN
<header>
<hgroup> <footer>
<nav> representa el pie de una seccin o
pgina. Suele contener informacin
<article>
sobre el autor, copyright, etc
<aside>
<section>

<footer>
<footer>
<p> 2012 Bla bla bla bla</p>
</footer>

HTML 5 / CSS 3
 CANVAS

Lienzo utilizado para representar imgenes, grficos, dibujos y/o elementos visuales
al vuelo con Javascript

No requiere plugins, ni codecs

<canvas id="miLienzo" width="360"
height="240">
<p>Tu navegador no soporta canvas</p>
Mapa de bits (no hay reescalado) </canvas>
<script>
var lienzo =
El contenido no se aade al DOM document.getElementById(miLienzo)
var context = lienzo.getContext('2d');
</script
Puede ser exportado

http://www.whatwg.org/specs/web-apps/current-work/#2dcontext

http://code.google.com/p/explorercanvas/

http://billmill.org/static/canvastutorial/index.html

HTML 5 / CSS 3
 VIDEO

width & height poster

autoplay controls

loop Autobuffer
preload

source

HTML 5 / CSS 3
 VIDEO

<video controls width="360" height="240">

<source src="movie.mp4">
<source src="movie.ogv" type="video/ogg codecs='theora, vorbis'">
<source src="movie.webm" type="video/webm codecs='vp8, vorbis'">
<object type="application/x-shockwave-flash"
width="360" height="240" data="player.swf?file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4">
<a href="movie.mp4">Descargar vdeo</a>
</object>
</video>

Ejemplo de video

HTML 5 / CSS 3
 AUDIO

autoplay

source

loop

autobuffer

controls

preload

HTML 5 / CSS 3
 AUDIO

<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash data="player.swf?soundFile=song.mp3">
<param name="movie" value="player.swf?soundFile=song.mp3">
<a href="song.mp3">Descargar cancin</a>
</object>
</audio>

Ejemplo de audio

HTML 5 / CSS 3
 FORMULARIOS

search
Email
phone
<input> type url
tel
range (*)
number (*)
min (*) max (*) date
datetime
datetime-local
month
colour
http://www.findmebyip.com/litmus/#html5-forms-inputs

HTML 5 / CSS 3
 FORMULARIOS

placeholder autofocus

required
<input> autocomplete
on
off

pattern Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs

Ejemplo de formulario

HTML 5 / CSS 3
 ELEMENTOS QUE DESAPARECEN

ETIQUETAS ATRIBUTOS
<acronym> <frameset> abbr codetype scheme
<applet> <isindex> align compact scope
alink compact shape
<basefont> <noframes> archive declare size
axis hspace standby
<big> <s> background link target
<center> <strike> bgcolor longdesc text
border marginheight type
<dir> <tt> cellpadding marginwidth type
cellspacing name valign
<font> <u> char nohref valuetype
<frame> charoff noshade version
charset nowrap vlink
classid profile vspace
clear rev width
REDEFINIDAS codebase rules

<small> <cite>
<b> <i> <a>

HTML 5 / CSS 3
 JAVASCRIPT

document.getElementByClassName: acceso a todos los elementos del DOM

que compartan la clase especificada
document.querySelectorAll(selector): acceso a todos los elementos del
DOM con el selector especificado
<script>
var elementos1 = document.querySelectorAll("section div.wrapper");
var elementos2 = document.querySelectorAll("div.content, div.wrapper");
var inputsText = document.querySelectorAll('[type=text]');
</script>

document.querySelector(selector): acceso al primer elemento del DOM con

el selector especificado
<script>
var elemento = document.querySelector("section div.wrapper");
</script>

HTML 5 / CSS 3
 DRAG & DROP

draggable (true|false): el elemento puede ser arrastrado hacia otro

elemento

EVENTOS

dragstart dragenter drop

drag dragover dragend
dragleave

Ejemplo de drag&drop

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

Cache
VS Bases de datos
Locales

Lgica de la aplicacin data generada por el usuario,

e interfaz de usuario o recursos solicitados

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

Tcnicas de Almacenamiento Offline Previas

Cookies Se fuerza a tener Navegador

Instalado el plugin.

Problemas con Firewalls

Poca informacin (4 Kb) Se fuerza a usar un

Navegador
Reduce velocidad determinado
Basado en Plugins

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

Tcnicas de Almacenamiento con HTML5

Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File Storage

PRINCIPIOS:
Normas estndar para todos los navegadores.
Informacin solo accesible desde el propio navegador.
Interaccin de la API y la Base de Datos es asncrona

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

Web Storage

El ms compatible. Integridad de los datos.

Estructura clave-valor Race conditions

TIPOS DE DATOS:
localStorage Permanecen hasta que el usuario los borra

sessionStorage Desaparecen al cerrarse el navegador

http://html5demos.com/storage
http://playground.html5rocks.com/#localstorage
http://playground.html5rocks.com/#sessionstorage

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

Web SQL Database

Como las DDBB tradicionales.

Estructura relacionada (joins)

Ms complejas.

IE y Firefox no son compatibles

http://playground.html5rocks.com/#async_transactions

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

IndexedDB

Mezcla entre Web Storage y Web SQL Database

Estructura relacionada (joins)

Transacciones de informacin.

Pocos navegadores lo soportan, pero est previsto ser

soportado por todos

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

FileStorage

Puedes guardar informacin binaria (como texto), y grandes

cantidades de informacin.

File Reader soportado solo por Chrome

FileWriter todava no soportado por nadie

Cuando sea soportado ser bueno para almacenar

grandes cantidades de informacin

HTML 5 / CSS 3
 ALMACENAMIENTO LOCAL

LO QUIERO USAR YA!

Por defecto usar WEB STORAGE (+ simple & + compatible )

Ayudarse de libreras como persis.js

Protegerse contra la perdida de datos

No guardar informacin privada
Los usuarios pueden borrar los datos fcilmente
Sincronizarse con el servidor frecuentemente

Securizar los datos

Alto riesgo en navegadores compartidos
SessionStorage mejor que LocalStorage
Encriptar informacin
Evitar guardar cierto tipo de datos

HTML 5 / CSS 3
 WebSockets

Permite la comunicacin bidireccional con cualquier servidor mediante

un determinado protocolo de red.

La conexin con el servidor se establece de forma asncrona, en segundo

plano, y la gestin del todo su ciclo de vida se realiza a travs de callbacks
que reciben eventos
<script>
var ws = new WebSocket("ws://echo.websocket.org");
</script>

Debemos utilizar "ws://" para establecer conexiones con el protocolo

websocket.

El constructor admite adems un parmetro adicional para que indicar un

conjunto de subprotocolos, pero an est sin definir.
la URL del cdigo de ejemplo es vlida muy til para pruebas, es un sencillo servidor websocket
que acta como eco (reenva al cliente lo mismo que recibe).

HTML 5 / CSS 3
 WebSockets
EVENTOS FUNCIONES
<script> <script>
ws.onopen = function(event){ ws.send("ping");
//Conexin abierta //mandar mensaje al servidor
} ws.close();
ws.onmessage = function(event){ // cerrar la conexin
//Mensaje recibido en event.data;
} </script>
ws.onclose = function(event){
//Conexin cerrada
}
ws.onerror = function(event){ ATRIBUTOS
//Error en la conexin -url (string con la direccin)
} - protocol (string con el protocolo)
</script> - readyState
-Conectando (0)
-Abierto (1)
-Cerrando (2)
- Cerrado (3)
-bufferedAmount (n de bytes pendientes de enviar al server)

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today

HTML 5 / CSS 3
 WEB WORKERS

Tareas JavaScript que pueden lanzarse en segundo plano, a modo de threads.

Su objetivo es permitir que las aplicaciones web puedan lanzar hilos de ejecucin
concurrentes con una gran carga de trabajo y duracin indeterminada.

Las tareas funcionan al margen del proceso normal de gestin de eventos de los
controles de la interface de usuario, evitando bloquear la pgina durante su
ejecucin.

<script>
var worker = new Worker("worker.js");
</script>

<button type="button" onclick="worker.terminate();"> Kill</button>

HTML 5 / CSS 3
 WEB WORKERS

Pueden procesar eventos, callbacks, e incluso es posible crear otros workers.

Limitacin: no tienen un contexto de navegacin asociado.

No pueden acceder al DOM, window, document o parent, Pero s a navigator, location,

XMLHttpRequest, timers, applicationCache o Web SQL database.

Permiten la posibilidad de ejecutar el cdigo de otros scripts

<script>
importScripts("script1.js"); //De uno en uno...
importScripts("script2.js");
importScripts("script3.js", "script4.js"); //.. o varios a la vez
</script>

HTML 5 / CSS 3
 WEB WORKERS

Permite comunicar el hilo padre principal con el worker hijo.

La comunicacin se realiza a travs de "postMessage", y el manejador "onmessage".

Una comunicacin bsica entre padre e hijo tendra cuatro pasos:

1) El hilo padre manda un mensaje (evento) al worker: 3) El worker termina su proceso y enva un mensaje (evento) al padre:

<script> <script>
worker.postMessage("Informacin self.postMessage("Informacin para
para el worker"); el padre");
</script> </script>

2) El worker recibe el mensaje en el atributo "data" del evento 4) El padre recibe el mensaje en el atributo "data" del evento

<script> <script>
self.onmessage = function(event){ worker.onmessage = function(event){
//Recibe "Informacin para el worker" //Recibe "Info para el padre" en event.data
en event.data };
}; </script>
</script>

HTML 5 / CSS 3
 CSS 3

HTML 5 CSS 3

estructura presentacin

HTML 5 / CSS 3
 HISTORIA DE CSS 3

1996 CSS 1: permite dar estilos independientemente del navegador y del HTML

1998 CSS2: nuevas funcionalidades, pero implementacin lenta

Semilla del CSS3.

Se plantea una lista de mejoras de CSS2

2000 Borrador de CSS3

2002 CSS2.1: Crea lo que ahora consideramos el estndar

2005 Empieza el desarrollo de CSS3

2009 Implementacin en algunos navegadores de algunas partes de CSS3

HTML 5 / CSS 3
 CSS 3 VS CSS 2
Mejora en los selectores

Nuevos estilos
Sombra
Opacidad
esquinas redondeadas

Mejora en tipografas

Transformaciones

Reduce la cantidad de HTML (divitis)

Reduce las peticiones de imgenes

Nuestra pagina va a ser ms rpida!

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

Bordes
Fondos
Color
Text effects
Layout multicolumna
Transiciones
Animaciones
Selectores
Media Queries

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

BORDES
border-radius border-color
border-radius: 15px; border: 5px solid #000;
border-colors:#e00 #c30 #c50 #c60 #c70

border-image box-shadow / text-shadow

border-image: url(border.png) box-shadow: 10px 10px 5px #888;
27 27 27 27 round round;

http://www.webdesignerwall.com/demo/css3-dropdown-menu/

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

MULTIPLE BACKGROUNDS
background:
url(../topImage.jpg) top left no-repeat,
url(../centerImage.jpg) top right repeat-y,
url(../bottomImage.jpg) bottom center no-repeat;

top image

center image

bottom image

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

TRANSFORM
rotate : skew :
transform: rotate(30deg); transform: skew(-30deg);

http://www.ejhansel.com/transform/

scale : translate
transform: scale(0.5,2.0); transform: translate(30px,10px);

http://www.the-art-of-web.com/css/css-animation/

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

COLOR

Opacity HSL:
(Hue, Saturation, Lightness)

Opacity: 1.0 Opacity: 0.5 hsl(21,97%,52%)

RGBA: HSLA:
(Red, Green, Blue, Alpha) (Hue, Saturation, Lightness, Alpha)

rgb(255,192,0,1); rgb(255,192,0,0.5); hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

MULTI-COLUMN LAYOUT

column-count

column-width

column-gap

column-rule

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

WEBFONTS
@font-face {
WebFonts font-family: FontName';
src: url('Gondola_SD-webfont.eot');
src: local(''), url(' FontName.woff')
format('woff'), url(' FontName.ttf')
format('truetype'),
url(' FontName.svg#webfontsgM4b18D')
format('svg');
font-weight: normal;
font-style: normal;
}

div {
font-family: FontName;
}

http://www.fontsquirrel.com/fontface/generator

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

TEXTOS

Text-shadow
Text-shadow: Xpos Ypos Blur Color;

ejemplo de sombra Word-wrap

word-wrap: break-word;
http://lab.simurai.com/flashlight

This paragraph has long words

thisisaveryverylongwordthatisntreall
yoneword and again a
Text-overflow longwordwithnospacesinit

Text-overflow: ellipsis-word;

Lorem ipsum dolor sit

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

NUEVAS PSEUDO-CLASES

:enabled

:disabled

:checked

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

SELECTORES DE ATRIBUTOS

[att*=val] [att^=val] [att$=val]

contiene val empieza por val termina por val

<a href=http://web.com/home.html>
a[href^=http://web]
<a href=http://web.com/img.jpg>

<a href=http://web.com/img.gif>

a[href*=.es] <a href=http://site.com/file.pdf>

<a href=http://site.es/home/index.pdf>

a[href$=.pdf] <a href=http://site.es/about.html>

<a href=http://site.com/home.html>

HTML 5 / CSS 3
 NOVEDADES DE CSS 3

MEDIA QUERIES

min-width & max-width

diferentes estilos segn el tamao de la pantalla

http://mediaqueri.es/

HTML 5 / CSS 3
 ESTADO ACTUAL DE CSS 3

http://www.w3.org/Style/CSS/current-work#table
http://www.findmebyip.com/litmus/#target-selector

HTML 5 / CSS 3
 ESTADO ACTUAL DE CSS 3

-o-border-radius: 10px; -webkit-border-radius: 10px;

-ms-border-radius: 10px; -moz-border-radius: 10px;

podemos usar CSS3 desde hoy!

Aumentamos y ensuciamos el cdigo

No todos los navegadores lo soportan

Posibles soluciones
eccstender.org
less.js
Ficheros .css para cada navegador
css3generator.com

HTML 5 / CSS 3