Post on 03-Nov-2014
description
HTML 5 / CSS 3
Introducción a HTML 5 / CSS 3
HTML 5 / CSS 3
INTRODUCCIÓN
HTML 5 / CSS 3
OFFLINE
Offline
WEBConectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
ONLINE
Permite realizar aplicaciones web offline- application cache- localStorage
- web SQL y BBDD- online/offline
events
HTML 5 / CSS 3
ALMACENAMIENTO
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Permite que las aplicaciones web guardendatos en el dispositivo
- Web Storage: sessionStorage/localStorage
- Web SQL Database- IndexedDB
HTML 5 / CSS 3
CONECTIVIDAD
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Mejora el rendimiento del acceso en tiempo real entre aplicaciones / dispositivos / servidor
- Cross Document Messaging- XMLHTTPRequest 2- Web Sockets- Server-Sent Events
HTML 5 / CSS 3
ACCESO A FICHEROS
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento Permite que las aplicaciones webs puedan acceder (a)sincronamente a ficheros del dispositivo
- File API- FileReader API- Filesystem & FileWritter API- BlobBuilder API- Blob URLs
File API
FilerReader API
Filesystem & FileWritter API
BlobBuilder API
Blob URLs
HTML 5 / CSS 3
SEMÁNTICA
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Permite el uso de nuevas etiquetas / atributos que determinan la naturaleza del contenido.
- Elementos multimedia- Elementos estructurales- Atributos semánticos- Nuevos tipos / atributos de campos de
formulario - Sintaxis de Microformatos / microdata- -Etc
HTML 5 / CSS 3
AUDIO / VIDEO
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Permite no solo incluir contenido multimedia (audio / video) sino acceder, controlar y mani-pular determinados aspectos de los mismos
Video
Audio
HTML 5 / CSS 3
3D/GRÁFICOS
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Permite crear animaciones y/o efectos visuales en websites/aplicaciones web sin necesidad de plugins adicionales (por ej: flash)
- 2D Canvas- WebGL- SVG- 3D CSS transforms
HTML 5 / CSS 3
PRESENTACIÓN
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
AlmacenamientoPermite crear sitios web/aplicaciones vistosas y visualmente enriquecidas que producen mejores experiencias de usuario.
- CSS3 3D Transforms- CSS3 Transforms- CSS3 Animation- CSS3 Transition- Webfonts
3D transforms
CSS3 Transforms
CSS3 Animation
CSS3 Transitions
HTML 5 / CSS 3
RENDIMIENTO
Offline
Conectividad
Acceso a ficheros
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Almacenamiento
Permite crear aplicaciones que rivalizan en rendimiento a las aplicaciones nativas, más responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)- Almacenamiento local- Carga asíncrona- App caché- Webfonts
HTML 5 / CSS 3
2004
2005
2007
2009
2012
2020
2022
Apple, Mozilla & Opera no consiguieron crear un estándar HTML4.En consecuencia forman la Web WHATWG
Se publica el borrador Web Applications 1.0
W3C “adopta” a WHATGW y publica el borrador HTML5
Finalización del borrador
Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza
Primer Release Candidate de HTML5 [previsión W3C]
Finalización de test [previsión W3C]
Creación del estándar HTML5 [previsión W3C]
HISTORIA DE HTML 5
HTML 5 / CSS 3
ESTADO ACTUAL (MAYO 2012)
www.findmebyip.com/litmus/#html5-web-applications
HTML 5 / CSS 3
HTML5 = Evolución
Mejor manejo de errores
Mayor estandarización
Código más semántico
Más accesible
Soporte multimedia
BENEFICIOS
HTML 5 / CSS 3
BENEFICIOS
Acceso a recursos como webcams o micrófonos
Almacenamiento Local
Webworkers
Geolocalización
Gestión de formularios
Menor dependencia de plugins y Javascript
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoDOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 HTML5
<!DOCTYPE html>
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoMETA
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
HTML 4.01 HTML5
<meta charset=”UTF-8”>
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoSCRIPT
<script type=”text/javascript” src=”file.js”> </script>
<script type=”text/javascript”>………
</script>
HTML 4.01 HTML5
<script src=”file.js”></script>
<script>………
</script>
HTML 5 / CSS 3
HOJAS DE ESTILO
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
HTML 4.01 HTML5
<link rel=”stylesheet” href=”estilos.css”>
NOVEDADES
Etiquetado del documento
HTML 5 / CSS 3
NOVEDADES
Etiquetado del documentoETIQUETA “A”
<h2><a href=”acercaDe.htm”>Acerca de</a>
</h2><p>
<a href=”acercaDe.htm”>Conoce quiénes somos</a>
</p>
HTML 4.01 HTML5
<a href=”acercaDe.htm”><h2>Acerca de</h2><p>Conoce quiénes somos</p>
</a>
HTML 5 / CSS 3
Nuevas etiquetas de presentación
<div id=“header”>
<div id=“menu”>
<div id=“footer”>
<div>
<div><div>
<header>
<nav>
<footer>
<article>
<section><aside>
NOVEDADES
HTML 5 / CSS 3
<nav>
<footer>
<article>
<section><aside>
<header><hgroup> <header>
representa la cabecera de un documento o sección
<hgroup>
representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y subtítulos)
<header><hgroup>
<h1>Mi Blog</h1><h2>Esforzándome para trabajar
menos</h2></hgroup>
</header>
NUEVAS ETIQUETAS DE PRESENTACIÓN
HTML 5 / CSS 3
<footer>
<article>
<section><aside>
<header><hgroup> <nav>
representa una sección del documento que contiene navegación
<nav><ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">galería</a></li> <li><a href="#">contacto</a></li></ul>
</nav>
<nav>
NUEVAS ETIQUETAS DE PRESENTACIÓN
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<footer>
<aside>
<header><hgroup> <article>
representa una pieza de contenido independiente dentro de un documento
<nav>
<article>
<section>
<section>
representa una sección del documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática común
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<footer>
<aside>
<header><hgroup>
<nav>
<article>
<section>
<article> <hgroup>
<h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2>
</hgroup> <p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p> <section>
<h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p>
</section> <section>
<h1>Capítulo 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
<figure>
representa un diagrama, una ilustración, una fotografía, etc
<figure> <img src=“javier.jpg" alt=“Javier González"> <figcaption> Javier González impartiendo
seminarios sobre tecnologías web</figcaption></figure>
<footer>
<aside>
<header><hgroup>
<nav>
<article>
<section><figcaption>
representa la “nota al pie” del elemento incluido en <figure>
NUEVAS ETIQUETAS DE PRESENTACIÓN
HTML 5 / CSS 3
NUEVAS ETIQUETAS DE PRESENTACIÓN
<footer>
<aside>
<header><hgroup>
<nav>
<article>
<section>
<aside>
representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional
<article> <header><h1>Tecnologías 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 PRESENTACIÓN
<aside>
<header><hgroup>
<nav>
<article>
<section>
<footer>
representa el pie de una sección o página. Suele contener información sobre el autor, copyright, etc
<footer> <p>© 2012 Bla bla bla bla</p></footer>
<footer>
HTML 5 / CSS 3
Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales “al vuelo” con Javascript
No requiere plugins, ni codecs
Mapa de bits (no hay reescalado)
El contenido no se añade al DOM
Puede ser exportado
•
<canvas id="miLienzo" width="360" height="240"><p>Tu navegador no soporta canvas</p>
</canvas><script>var lienzo =
document.getElementById(‘miLienzo’)
var context = lienzo.getContext('2d');</script
http://www.whatwg.org/specs/web-apps/current-work/#2dcontext
http://code.google.com/p/explorercanvas/
http://billmill.org/static/canvastutorial/index.html
CANVAS
HTML 5 / CSS 3
width & height
autoplay
loop
source
poster
controls
Autobufferpreload
VIDEO
HTML 5 / CSS 3
<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 vídeo</a> </object>
</video>
VIDEO
Ejemplo de video
HTML 5 / CSS 3
autoplay
source
loop
autobuffer
controls
preload
AUDIO
HTML 5 / CSS 3
<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 canción</a>
</object> </audio>
Ejemplo de audio
AUDIO
HTML 5 / CSS 3
FORMULARIOS
<input> type
searchEmailphoneurltelrange (*)number (*)datedatetimedatetime-localmonthcolour
min (*) max (*)
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 / CSS 3
FORMULARIOS
autofocus
<input>required autocomplete
pattern
placeholder
onoff
Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
Ejemplo de formulario
HTML 5 / CSS 3
<acronym><applet><basefont><big><center><dir><font><frame>
<frameset><isindex><noframes><s><strike><tt><u>
ETIQUETAS
abbralign alinkarchiveaxisbackground bgcolorborder cellpadding cellspacing charcharoffcharsetclassidclearcodebase
codetypecompact compactdeclarehspacelinklongdescmarginheight marginwidth name nohrefnoshade nowrap profilerevrules
schemescopeshapesize standbytargettexttypetype valign valuetypeversionvlinkvspacewidth
ATRIBUTOS
<small><b>
<cite><i>
REDEFINIDAS
<a>
ELEMENTOS QUE DESAPARECEN
HTML 5 / CSS 3
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
document.querySelector(selector): acceso al primer elemento 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>
<script>var elemento = document.querySelector("section div.wrapper");
</script>
JAVASCRIPT
HTML 5 / CSS 3
draggable (true|false): el elemento puede ser arrastrado hacia otro elemento
EVENTOS
• dragstart• drag
• dragenter• dragover• dragleave
• drop
• dragend
Ejemplo de drag&drop
DRAG & DROP
HTML 5 / CSS 3
Bases de datosLocales
Lógica de la aplicacióne interfaz de usuario
data generada por el usuario, o recursos solicitados
VSCache
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Se fuerza a tenerInstalado el plugin.
Problemas con Firewalls
Se fuerza a usar unNavegador
determinado
Poca información (4 Kb)
Reduce velocidad
Técnicas de Almacenamiento Offline Previas
Navegador
Basado en Plugins
Cookies
HTML 5 / CSS 3
Técnicas de Almacenamiento con HTML5
Diferentes APIs:Web Storage (Local Storage or DOM Storage)Web SQL DatabaseIndexedDBFile Storage
PRINCIPIOS:Normas estándar para “todos” los navegadores.Información solo accesible desde el propio navegador.Interacción de la API y la Base de Datos es asíncrona
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
Web Storage
TIPOS DE DATOS:localStorage Permanecen hasta que el usuario los borra
sessionStorage Desaparecen al cerrarse el navegador
El más compatible.Estructura clave-valor
Integridad de los datos.Race conditions
http://html5demos.com/storagehttp://playground.html5rocks.com/#localstoragehttp://playground.html5rocks.com/#sessionstorage
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
Web SQL Database
Como las DDBB tradicionales.
Estructura relacionada (joins)
Más 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 información.
Pocos navegadores lo soportan, pero está previsto ser soportado por todos
HTML 5 / CSS 3
ALMACENAMIENTO LOCAL
FileStorage
Puedes guardar información binaria (como texto), y grandes cantidades de información.
File Reader soportado solo por Chrome
FileWriter todavía no soportado por nadie
Cuando sea soportado será bueno para almacenar grandes cantidades de información
HTML 5 / CSS 3
¡LO QUIERO USAR YA!
Por defecto usar WEB STORAGE (+ simple & + compatible )
Ayudarse de librerías como persis.js ó
Protegerse contra la perdida de datosNo guardar información privadaLos usuarios pueden borrar los datos fácilmenteSincronizarse con el servidor frecuentemente
Securizar los datosAlto riesgo en navegadores compartidosSessionStorage mejor que LocalStorageEncriptar informaciónEvitar guardar cierto tipo de datos
ALMACENAMIENTO LOCAL
HTML 5 / CSS 3
WebSockets
Permite la comunicación bidireccional con cualquier servidor mediante un determinado protocolo de red.
La conexión con el servidor se establece de forma asíncrona, en segundo plano, y la gestión del todo su ciclo de vida se realiza a través de callbacks que reciben eventos
Debemos utilizar "ws://" para establecer conexiones con el protocolo websocket.
El constructor admite además un parámetro adicional para que indicar un conjunto de subprotocolos, pero aún está sin definir.
<script>var ws = new WebSocket("ws://echo.websocket.org");
</script>
la URL del código de ejemplo es válida muy útil para pruebas, es un sencillo servidor websocket que actúa como eco (reenvía al cliente lo mismo que recibe).
HTML 5 / CSS 3
WebSockets
<script>ws.onopen = function(event){
//Conexión abierta}ws.onmessage = function(event){ //Mensaje recibido en
event.data;}ws.onclose = function(event){ //Conexión cerrada}ws.onerror = function(event){ //Error en la conexión}</script>
<script>ws.send("ping");//mandar mensaje al servidorws.close();// cerrar la conexión
</script>
EVENTOS FUNCIONES
ATRIBUTOS- url (string con la dirección)- protocol (string con el protocolo)- 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 ejecución concurrentes con una gran carga de trabajo y duración indeterminada.
Las tareas funcionan al margen del proceso normal de gestión de eventos de los controles de la interface de usuario, evitando bloquear la página durante su ejecución.
<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.
Limitación: no tienen un contexto de navegación 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 código 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 comunicación se realiza a través de "postMessage", y el manejador "onmessage".
Una comunicación básica entre padre e hijo tendría cuatro pasos:
<script>worker.postMessage("Información para el worker");
</script>
<script>self.onmessage = function(event){
//Recibe "Información para el worker" en event.data
};</script>
<script>self.postMessage("Información para el padre");
</script>
<script> worker.onmessage = function(event){ //Recibe "Info para el padre" en event.data};</script>
1) El hilo padre manda un mensaje (evento) al worker:
2) El worker recibe el mensaje en el atributo "data" del evento
3) El worker termina su proceso y envía un mensaje (evento) al padre:
4) El padre recibe el mensaje en el atributo "data" del evento
HTML 5 / CSS 3
CSS 3
HTML 5 CSS 3
estructura presentación
HTML 5 / CSS 3
1996
1998
2000
2002
2009
CSS 1: permite dar estilos independientemente del navegador y del HTML
CSS2: nuevas funcionalidades, pero implementación lenta
Semilla del CSS3.
Se plantea una lista de mejoras de CSS2
Borrador de CSS3
CSS2.1: Crea lo que ahora consideramos el estándar
Implementación en algunos navegadores de algunas partes de CSS3
2005 Empieza el desarrollo de CSS3
HISTORIA DE CSS 3
HTML 5 / CSS 3
Mejora en los selectores
Nuevos estilos SombraOpacidadesquinas redondeadas…
Mejora en tipografías
Transformaciones
Reduce la cantidad de HTML (divitis)
Reduce las peticiones de imágenes
¡Nuestra pagina va a ser más rápida!
CSS 3 VS CSS 2
HTML 5 / CSS 3
NOVEDADES DE CSS 3
• Bordes• Fondos• Color• Text effects• Layout multicolumna• Transiciones• Animaciones• Selectores• Media Queries
HTML 5 / CSS 3
border-image: url(border.png) 27 27 27 27 round round;
border-image
box-shadow: 10px 10px 5px #888;
box-shadow / text-shadow
border-radius: 15px;
border-radius
BORDES
border: 5px solid #000;border-colors:#e00 #c30 #c50 #c60 #c70
border-color
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
NOVEDADES DE CSS 3
HTML 5 / CSS 3
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
MULTIPLE BACKGROUNDS
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html
NOVEDADES DE CSS 3
HTML 5 / CSS 3
• rotate : transform: rotate(30deg);
• skew :transform: skew(-30deg);
• translate transform: translate(30px,10px);
• scale :
transform: scale(0.5,2.0);
TRANSFORM
http://www.the-art-of-web.com/css/css-animation/
http://www.ejhansel.com/transform/
NOVEDADES DE CSS 3
HTML 5 / CSS 3
rgb(255,192,0,1); rgb(255,192,0,0.5);
• RGBA: (Red, Green, Blue, Alpha)
Opacity: 1.0 Opacity: 0.5
• Opacity
• HSLA: (Hue, Saturation, Lightness, Alpha)
hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);
• HSL: (Hue, Saturation, Lightness)
hsl(21,97%,52%)
COLOR
NOVEDADES DE CSS 3
HTML 5 / CSS 3
NOVEDADES DE CSS 3
• column-count
• column-width
• column-gap
• column-rule
MULTI-COLUMN LAYOUT
HTML 5 / CSS 3
WebFonts
WEBFONTS
@font-face { 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
NOVEDADES DE CSS 3
HTML 5 / CSS 3
NOVEDADES DE CSS 3
Text-shadowText-shadow: Xpos Ypos Blur Color;
ejemplo de sombra
Text-overflowText-overflow: ellipsis-word;
Lorem ipsum dolor sit…
Word-wrapword-wrap: break-word;
This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit
TEXTOS
http://lab.simurai.com/flashlight
HTML 5 / CSS 3
NOVEDADES DE CSS 3
• :enabled
• :disabled
• :checked
NUEVAS PSEUDO-CLASES
HTML 5 / CSS 3
NOVEDADES DE CSS 3
a[href^=“http://web”]
a[href*=“.es”]
a[href$=“.pdf”]
[att$=val]termina por val
[att^=val]empieza por val
[att*=val]contiene val
<a href=“http://web.com/home.html”>
<a href=“http://web.com/img.jpg”>
<a href=“http://web.com/img.gif”>
<a href=“http://site.com/file.pdf”>
<a href=“http://site.es/home/index.pdf”>
<a href=“http://site.es/about.html”>
<a href=“http://site.com/home.html”>
SELECTORES DE ATRIBUTOS
HTML 5 / CSS 3
NOVEDADES DE CSS 3
MEDIA QUERIES
min-width & max-widthdiferentes estilos según el tamaño de la pantalla
http://mediaqueri.es/
HTML 5 / CSS 3
ESTADO ACTUAL DE CSS 3
http://www.w3.org/Style/CSS/current-work#tablehttp://www.findmebyip.com/litmus/#target-selector
HTML 5 / CSS 3
¡podemos usar CSS3 desde hoy!
Aumentamos y ensuciamos el código
No todos los navegadores lo soportan
Posibles solucioneseccstender.orgless.jsFicheros .css para cada navegadorcss3generator.com
-o-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px;-ms-border-radius: 10px;
ESTADO ACTUAL DE CSS 3