Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/

1. Introducción a
HTML 5 / CSS 3
HTML 5 / CSS 3

2. INTRODUCCIÓN
HTML 5 / CSS 3

3. OFFLINE
Offline
Almacenamiento
Conectividad
Acceso a ficheros
WEB ONLINE
Semántica
Audio/Video Permite realizar aplicaciones web offline
3D/Gráficos - application cache - web SQL y BBDD
- localStorage - online/offline events
Presentación
Rendimiento
HTML 5 / CSS 3

4. ALMACENAMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite que las aplicaciones web guarden
datos en el dispositivo
Semántica
-Web Storage: sessionStorage/localStorage
Audio/Video - Web SQL Database
3D/Gráficos - IndexedDB
Presentación
Rendimiento
HTML 5 / CSS 3

5. CONECTIVIDAD
Offline
Almacenamiento
Conectividad
Acceso a ficheros Mejora el rendimiento del acceso en tiempo
real entre aplicaciones / dispositivos /
Semántica
servidor
Audio/Video
- Cross Document Messaging
3D/Gráficos -XMLHTTPRequest 2
- Web Sockets
Presentación - Server-Sent Events
Rendimiento
HTML 5 / CSS 3

6. 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
Semántica
- Filesystem & FileWritter API
Audio/Video - BlobBuilder API
- Blob URLs
3D/Gráficos
Presentación
Rendimiento
File API
FilerReader API
Filesystem & FileWritter API
BlobBuilder API
Blob URLs
HTML 5 / CSS 3

7. SEMÁNTICA
Offline
Almacenamiento
Conectividad
Acceso a ficheros Permite el uso de nuevas etiquetas / atributos
que determinan la naturaleza del contenido.
Semántica
- Elementos multimedia
Audio/Video - Elementos estructurales
- Atributos semánticos
3D/Gráficos - Nuevos tipos / atributos de campos de formulario
- Sintaxis de Microformatos / microdata
Presentación --Etc
Rendimiento
HTML 5 / CSS 3

8. 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
Semántica
Audio/Video
3D/Gráficos
Presentación
Rendimiento
Video
Audio
HTML 5 / CSS 3

9. 3D/GRÁFICOS
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Semántica
Permite crear animaciones y/o efectos visuales
Audio/Video en websites/aplicaciones web sin necesidad
3D/Gráficos de plugins adicionales (por ej: flash)
- 2D Canvas
Presentación - WebGL
- SVG
Rendimiento
- 3D CSS transforms
HTML 5 / CSS 3

10. PRESENTACIÓN
Offline
Almacenamiento
Permite crear sitios web/aplicaciones vistosas
Conectividad y visualmente enriquecidas que producen
mejores experiencias de usuario.
Acceso a ficheros
- CSS3 3D Transforms
Semántica - CSS3 Transforms
- CSS3 Animation
Audio/Video - CSS3 Transition
- Webfonts
3D/Gráficos
Presentación
Rendimiento
3D transforms
CSS3 Transforms
CSS3 Animation
CSS3 Transitions
HTML 5 / CSS 3

11. RENDIMIENTO
Offline
Almacenamiento
Conectividad
Acceso a ficheros
Permite crear aplicaciones que rivalizan en
Semántica rendimiento a las aplicaciones nativas, más
Audio/Video responsivas que las aplicaciones tradicionales
- Webworkers (procesos en background)
3D/Gráficos - Almacenamiento local
- Carga asíncrona
Presentación - App caché
- Webfonts
Rendimiento
HTML 5 / CSS 3

12. HISTORIA DE HTML 5
2004 Apple, Mozilla & Opera no consiguieron crear un estándar 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 Finalización del borrador
Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza
2012 Primer Release Candidate de HTML5 [previsión W3C]
2020 Finalización de test [previsión W3C]
2022 Creación del estándar HTML5 [previsión W3C]
HTML 5 / CSS 3

13. ESTADO ACTUAL (MAYO 2012)
www.findmebyip.com/litmus/#html5-web-applications
HTML 5 / CSS 3

14. BENEFICIOS
HTML5 = Evolución
Mejor manejo de errores
Mayor estandarización
Código más semántico
Más accesible
Soporte multimedia
HTML 5 / CSS 3

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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 quiénes somos</p>
</h2>
</a>
<p>
<a href=‛acercaDe.htm‛>Conoce
quiénes somos</a>
</p>
HTML 5 / CSS 3

21. NOVEDADES
Nuevas etiquetas de presentación
<div id=“header”> <header>
<div id=“menu”> <nav>
<div> <article>
<div> <aside>
<div> <section>
<div id=“footer”> <footer>
HTML 5 / CSS 3

22. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <header>
<nav> representa la cabecera de un
documento o sección
<article>
<hgroup>
<aside>
<section>
representa el título de una sección.
Se usa para agrupar conjuntos de
elementos h1-h6 (títulos y
<footer>
subtítulos)
<header>
<hgroup>
<h1>Mi Blog</h1>
<h2>Esforzándome para trabajar menos</h2>
</hgroup>
</header>
HTML 5 / CSS 3

23. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <nav>
<nav> representa una sección del
documento que contiene navegación
<article>
<aside>
<section>
<nav>
<ul>
<footer> <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>
HTML 5 / CSS 3

24. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup>
<article>
<nav>
representa una pieza de contenido
<article> independiente dentro de un
documento
<aside>
<section>
<section>
representa una sección del
<footer>
documento (un capítulo, un
apartado, etc) agrupa una serie de
contenidos con una temática
común
HTML 5 / CSS 3

25. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <article>
<hgroup>
<nav> <h1>Título del artículo</h1>
<h2>Subtítulo del artículo</h2>
<article> </hgroup>
<p>Lorem ipsum dolor sit amet, consectetur
<aside> adipiscing elit.</p>
<section>
<section>
<h1>Capítulo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur
<footer> 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

26. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <figure>
<nav> representa un diagrama, una
ilustración, una fotografía, etc
<article>
<aside>
<figcaption>
<section>
representa la “nota al pie” del elemento
incluido en <figure>
<footer>
<figure>
<img src=‚javier.jpg" alt=‚Javier González">
<figcaption> Javier González impartiendo seminarios
sobre tecnologías web</figcaption>
</figure>
HTML 5 / CSS 3

27. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup>
<aside>
representa contenidos que no están
<nav>
directamente relacionados con el resto
<article> de contenido de la página o que aporta
información adicional
<aside>
<section>
<article>
<footer>
<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

28. NUEVAS ETIQUETAS DE PRESENTACIÓN
<header>
<hgroup> <footer>
<nav> representa el pie de una sección o
página. Suele contener información
<article>
sobre el autor, copyright, etc
<aside>
<section>
<footer>
<footer>
<p>© 2012 Bla bla bla bla</p>
</footer>
HTML 5 / CSS 3

29. CANVAS
Lienzo utilizado para representar imágenes, gráficos, 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 añade 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

30. VIDEO
width & height poster
autoplay controls
loop Autobuffer
preload
source
HTML 5 / CSS 3

31. 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 vídeo</a>
</object>
</video>
Ejemplo de video
HTML 5 / CSS 3

32. AUDIO
autoplay
source
loop
autobuffer
controls
preload
HTML 5 / CSS 3

33. 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 canción</a>
</object>
</audio>
Ejemplo de audio
HTML 5 / CSS 3

34. 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

35. 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

36. 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

37. 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

38. 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

39. ALMACENAMIENTO LOCAL
Cache
VS Bases de datos
Locales
Lógica de la aplicación data generada por el usuario,
e interfaz de usuario o recursos solicitados
HTML 5 / CSS 3

40. ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento Offline Previas
Cookies Se fuerza a tener Navegador
Instalado el plugin.
Problemas con Firewalls
Poca información (4 Kb) Se fuerza a usar un
Navegador
Reduce velocidad determinado
Basado en Plugins
HTML 5 / CSS 3

41. ALMACENAMIENTO LOCAL
Técnicas de Almacenamiento con HTML5
Diferentes APIs:
Web Storage (Local Storage or DOM Storage)
Web SQL Database
IndexedDB
File 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
HTML 5 / CSS 3

42. ALMACENAMIENTO LOCAL
Web Storage
El más 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

43. 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

44. 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

45. 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

46. ALMACENAMIENTO LOCAL
¡LO QUIERO USAR YA!
Por defecto usar WEB STORAGE (+ simple & + compatible )
Ayudarse de librerías como persis.js ó
Protegerse contra la perdida de datos
No guardar información privada
Los usuarios pueden borrar los datos fácilmente
Sincronizarse con el servidor frecuentemente
Securizar los datos
Alto riesgo en navegadores compartidos
SessionStorage mejor que LocalStorage
Encriptar información
Evitar guardar cierto tipo de datos
HTML 5 / CSS 3

47. 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
<script>
var ws = new WebSocket("ws://echo.websocket.org");
</script>
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.
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

48. WebSockets
EVENTOS FUNCIONES
<script> <script>
ws.onopen = function(event){ ws.send("ping");
//Conexión abierta //mandar mensaje al servidor
} ws.close();
ws.onmessage = function(event){ // cerrar la conexión
//Mensaje recibido en event.data;
} </script>
ws.onclose = function(event){
//Conexión cerrada
}
ws.onerror = function(event){ ATRIBUTOS
//Error en la conexión -url (string con la dirección)
} - 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

49. 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

50. 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

51. 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:
1) El hilo padre manda un mensaje (evento) al worker: 3) El worker termina su proceso y envía un mensaje (evento) al padre:
<script> <script>
worker.postMessage("Información self.postMessage("Información 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 "Información para el worker" //Recibe "Info para el padre" en event.data
en event.data };
}; </script>
</script>
HTML 5 / CSS 3

52. CSS 3
HTML 5 CSS 3
estructura presentación
HTML 5 / CSS 3

53. HISTORIA DE CSS 3
1996 CSS 1: permite dar estilos independientemente del navegador y del HTML
1998 CSS2: nuevas funcionalidades, pero implementación 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 estándar
2005 Empieza el desarrollo de CSS3
2009 Implementación en algunos navegadores de algunas partes de CSS3
HTML 5 / CSS 3

54. CSS 3 VS CSS 2
Mejora en los selectores
Nuevos estilos
Sombra
Opacidad
esquinas 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!
HTML 5 / CSS 3

55. NOVEDADES DE CSS 3
• Bordes
• Fondos
• Color
• Text effects
• Layout multicolumna
• Transiciones
• Animaciones
• Selectores
• Media Queries
HTML 5 / CSS 3

56. 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

57. 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

58. 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

59. 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

60. NOVEDADES DE CSS 3
MULTI-COLUMN LAYOUT
• column-count
• column-width
• column-gap
• column-rule
HTML 5 / CSS 3

61. 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

62. 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

63. NOVEDADES DE CSS 3
NUEVAS PSEUDO-CLASES
• :enabled
• :disabled
• :checked
HTML 5 / CSS 3

64. 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

65. NOVEDADES DE CSS 3
MEDIA QUERIES
min-width & max-width
diferentes estilos según el tamaño de la pantalla
http://mediaqueri.es/
HTML 5 / CSS 3

66. 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

67. 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 código
No todos los navegadores lo soportan
Posibles soluciones
eccstender.org
less.js
Ficheros .css para cada navegador
css3generator.com
HTML 5 / CSS 3