Html5ycss3 101029060142 Phpapp02

HTML 5 + CSS 3
Introduccin y aplicacin desde hoy
QUE VAMOS A VER
HTML 5
Introduccin e Historia Estado Actual Beneficios Novedades
CSS 3
Introduccin e Historia CSS 3 vs. CSS 2 Novedades Estado Actual
28 de Octubre de 2010
HTML 5 y CSS 3
QU ES HTML 5
HTML 5 y CSS 3
QUE ES HTML 5
Es una evolucin.
HTML 5 y CSS 3
QUE ES HTML 5
Nuevas etiquetas de presentacin.

<div id=header> <div id=menu> <div> <div> <div> <article> <section> <aside> <header> <nav>
<div id=footer>
28 de Octubre de 2010 HTML 5 y CSS 3
<footer>
5
QUE ES HTML 5
Estandarizacin 1/2
video geolocalizacin
canvas
audio
drag & drop
HTML 5 y CSS 3
QUE ES HTML 5
Estandarizacin 2/2
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3
HISTORIA DE HTML 5
HTML 5 y CSS 3
HISTORIA HTML 5
2004 2005 2007 2009
Apple, Mozilla & Opera no consiguieron crear un estndar HTML4. En consecuencia forman la Web WHATWG Se publica el borrador Web Applications 1.0 W3C adopta a WHATGW y publica el borrador HTML5 Finalizacin del borrador Gracias a Google, Apple y los dispositivos mviles HTML5 surge con fuerza
2012 2020 2022
Primer Release Candidate de HTML5 [previsin W3C] Finalizacin de test [previsin W3C] Creacin del estndar HTML5 [previsin W3C]
HTML 5 y CSS 3 9
ESTADO ACTUAL
HTML 5 y CSS 3
10
ESTADO ACTUAL Est HTML 5 preparado ya?

Faltan ms de 10 aos Soporte actual limitado Partes controvertidas (video) Navegadores obsoletos
Alto nmero de usuarios usa versiones viejas de IE
www.ishtml5readyyet.com
HTML 5 y CSS 3
11
ESTADO ACTUAL NO HACE FALTA ESPERAR HASTA 2022 !

Actualmente (2010)
Terminando borrador Partes ya disponibles Adaptacin rpida en navegadores Mayor nmero de dispositivos soportados Google y Apple lo apoyan Microsoft adopta estndares
(IE 9 mejorar considerablemente) www.findmebyip.com/litmus/#target-selector www.caniuse.com
HTML 5 y CSS 3
12
ESTADO ACTUAL
www.findmebyip.com/litmus/#html5-web-applications www.caniuse.com
HTML 5 y CSS 3
13
BENEFICIOS
HTML 5 y CSS 3
14
BENEFICIOS 1/2
HTML5 = Evolucin Mejor manejo de errores Mayor estandarizacin Cdigo ms semntico Ms accesible Soporte multimedia
28 de Octubre de 2010 HTML 5 y CSS 3 15
BENEFICIOS 2/2
Acceso a recursos como webcams o micrfonos Almacenamiento Local Webworkers Geolocalizacin Gestin de formularios Menor dependencia de plugins y Javascript
NOVEDADES
HTML 5 y CSS 3
17
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 html1-strict.dtd">
<!DOCTYPE html>
HTML 5 y CSS 3
18
META
HTML 4.01 HTML5
<meta http-equiv= Content-Type content= text/html; charset=UTF-8 >
<meta charset= UTF-8 >
HTML 5 y CSS 3
19
SCRIPT
HTML 4.01
<script type= text/javascript src= file.js > </script> <script type= text/javascript > </script>
HTML5
<script src= file.js ></script>
<script> </script>
HTML 5 y CSS 3
20
HOJAS DE ESTILO
HTML 4.01 HTML5
<link rel= stylesheet type= text/css href= estilos.css >
<link rel= stylesheet href= estilos.css >
HTML 5 y CSS 3
21
ETIQUETA A
HTML 4.01
<h2> <a href= acercaDe.htm >Acerca de</a> </h2> <p> <a href= acercaDe.htm >Conoce quines somos</a> </p>
HTML5
<a href= acercaDe.htm > <h2>Acerca de</h2> <p>Conoce quines somos</p> </a>
HTML 5 y CSS 3
22
ETIQUETADO DE DOCUMENTOS
HTML 5 y CSS 3
23
ELEMENTOS ESTRUCTURALES
<header> <hgroup> <nav> <article> <aside>
<section>
<footer>
HTML 5 y CSS 3
24
<header> <hgroup> <nav> <article>
<header>
representa la cabecera de un documento o seccin
<hgroup>
<section> <aside>
<footer>
representa el ttulo de una seccin. e usa para a rupar conjuntos de elementos 1(ttulos subttulos)
<header> <hgroup> <h1>Mi Blog</h1> <h2>Esforzndome para trabajar menos</h2> </hgroup> </header>
HTML 5 y CSS 3
25
<header> <hgroup> <nav> <article> <aside> <nav> <ul> <li><a <li><a <li><a <li><a </ul> </nav>
<nav>
representa una seccin del documento que contiene navegacin
<section>
<footer>
href="#">home</a></li> href="#">blog</a></li> href="#">galera</a></li> href="#">contacto</a></li>
HTML 5 y CSS 3
26
<article>
representa una pieza de contenido independiente dentro de un documento
<section>
<section>
<footer>
representa una seccin del documento (un cap tulo, un apartado, etc) agrupa una serie de contenidos con una temtica comn
HTML 5 y CSS 3
27
<header> <hgroup> <nav> <article> <aside> <article> <hgroup> <h1>Ttulo del artculo</h1> <h2>Subttulo del artculo</h2> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <h1>Captulo 1</h1> <p>Lorem ipsum dolor sit amet, consectetur 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>
<section>
<footer>
HTML 5 y CSS 3
28
<dialog>
representa una transcripcin de una conversacin, o los subt tulos de algn elemento embebido (audio o video)
<section>
<footer>
??? !!!!!
<dialog> <dt>Pedro:</dt> <dd>Toc, toc.</dd> <dt>Jaime</dt> <ddS?</dd> <dt>Pedro:</dt> <dd>Es aqu el Seminario de HTML5 y CSS3?</dd> <dt>Jaime</dt> <dd>Pasa, pasa</dd> </dialog>
HTML 5 y CSS 3
29
<figure>
representa un diagrama, una ilustracin, una fotograf a, etc
<figcaption>
representa la nota al pie del elemento incluido en <figure>
<section>
<footer>
<figure> <img src= fede.jpg" alt= Federico Caro"> <figcaption>Federico Caro impartiendo seminarios sobre tecnologas web</figcaption> </figure>
HTML 5 y CSS 3
30
<aside>
representa contenidos que no estn directamente relacionados con el resto de contenido de la pgina o que aporta informacin adicional
<article> <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>
<section>
<footer>
HTML 5 y CSS 3
31
<footer>
representa el pie de una seccin o pgina. Suele contener informacin sobre el autor, copyright, etc
<section>
<footer>
<footer> <p> 2010 Bla bla bla bla</p> </footer>
HTML 5 y CSS 3
32
CANVAS
HTML 5 y CSS 3
33
CANVAS
L e z ut l z d r re rese t r e es, r f c s, d buj s y/o ele e tos v su les l vuelo con J v scr t No re u ere lu ns, ni codecs M de bits (no y reesc l do) de l OM
<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
El contenido no se uede ser ex ort do
http://www.whatwg.org/specs/web-apps/current-work/
http://code.google.com/p/explorercanvas/ http://billmill.org/static/canvastutorial/index.html 28 de Octubre de 2010 HTML 5 y CSS 3 34
dcontext
ELEMENTOS MULTIMEDIA
HTML 5 y CSS 3
35
VIDEO
width & height
poster
autoplay
controls
loop
Autobuffer preload
source
HTML 5 y CSS 3
36
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>
HTML 5 y CSS 3
37
AUDIO
autoplay source loop autobuffer controls preload
HTML 5 y CSS 3
38
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>
HTML 5 y CSS 3
39
FORMULARIOS
HTML 5 y CSS 3
40
FORMULARIOS
placeholder
autofocus
required
<input>
autocomplete
on off
pattern
Expresiones regulares
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3
41
FORMULARIOS
<input>
min (*) max (*)
type
search email url tel range (*) number (*) date datetime datetime-local month color
http://www.findmebyip.com/litmus/#html5-forms-inputs
HTML 5 y CSS 3
42
JAVASCRIPT
NUEVOS MTODOS 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> elementos = document.querySelectorAll("section div.wrapper"); elementos = document.querySelectorAll("div.content, div.wrapper"); 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 y CSS 3
43
DRAG & DROP
HTML 5 y CSS 3
44
JAVASCRIPT
PROPIEDADES
draggable (true|false): el elemento puede ser arrastrado hacia otro elemento
EVENTOS
dragstart drag dragenter dragover dragleave drop dragend
HTML 5 y CSS 3
45
ELEMENTOS QUE DESAPARECEN
HTML 5 y CSS 3
46
ELEMENTOS QUE DESAPARECEN

ETIQUETAS <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u>
abbr align alink archive axis background bgcolor border cellpadding cellspacing char charoff charset classid clear codebase
ATRIBUTOS
codetype compact compact declare hspace link longdesc marginheight marginwidth name nohref noshade nowrap profile rev rules scheme scope shape size standby target text type type valign valuetype version vlink vspace width
REDEFINIDAS <small> <cite> <a> <b> <i>
HTML 5 y CSS 3
47
ALMACENAMIENTO LOCAL
HTML 5 y CSS 3
48
Web != online
HTML 5 y CSS 3
49
Cache
VS
Bases de datos Locales
Lgica de la aplicacin e interfaz de usuario
data generada por el usuario, o recursos solicitados
HTML 5 y CSS 3
50
Tcnicas de Almacenamiento Offline Previas

Cookies
Se fuerza a tener Instalado el plugin. Problemas con Firewalls
Navegador
Poca informacin (4 Kb) Reduce velocidad
Se fuerza a usar un Navegador determinado
Basado en Plugins
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 y CSS 3
52
Web Storage
El ms compatible. Estructura clave-valor Integridad de los datos. Race conditions
TIPOS DE DATOS: localStorage sessionStorage
Permanecen hasta que el usuario los borra Desaparecen al cerrarse el navegador
http://html5demos.com/storage http://playground.html5rocks.com/#localstorage http://playground.html5rocks.com/#sessionstorage 28 de Octubre de 2010 HTML 5 y CSS 3 53
Web SQL Database
Como las DDBB tradicionales. Estructura relacionada (joins)
Ms complejas. IE y Firefox no son compatibles
http://playground.html5rocks.com/#async_transactions 28 de Octubre de 2010 HTML 5 y CSS 3 54
IndexedDB
Mezcla entre Web Storage y Web SQL Database Estructura relacionada (joins) Transacciones de informacin. Ningn navegador lo soporta, pero est previsto ser soportado por todos
HTML 5 y CSS 3
55
ALMACENAMIENTO LOCAL FileStorage

Puedes guardar informacin binaria (como texto), y grandes cantidades de informacin. File Reader soportado solo por Chrome FileWriter todav a no soportado por nadie Cuando sea soportado ser bueno para almacenar grandes cantidades de informacin
HTML 5 y CSS 3
56
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 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 y CSS 3
57
CSS 3
HTML 5 y CSS 3
58
CSS 3
HTML 5
vs
HTML 5 y CSS 3
CSS 3
estructura
presentacin
www.paradigmatecnologico.com
59
HISTORIA DE CSS 3
HTML 5 y CSS 3
60
HISTORIA CSS 3
1996 1998
CSS 1: permite dar estilos independientemente del navegador y del HTML CSS2: nuevas funcionalidades, pero implementacin lenta Semilla del CSS3. Se plantea una lista de mejoras de CSS2
2000 2002 2005 2009
Borrador de CSS3 CSS2.1: Crea lo que ahora consideramos el estndar Empieza el desarrollo de CSS3 Implementacin en algunos navegadores de algunas partes de CSS3
HTML 5 y CSS 3
61
CSS 3 VS CSS 2
HTML 5 y CSS 3
62
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 imgenes Nuestra pagina va a ser ms rpida!
NOVEDADES
Bordes Fondos Color Text effects Layout multicolumna Transiciones Selectores Media Queries
HTML 5 y CSS 3
64
NOVEDADES BORDES
border-radius
border-radius: 15px;
border-color
border: 5px solid #000; border-colors:#e00 #c30 #c50 #c60 #c70
border-image
border-image: url(border.png) 27 27 27 27 round round;
box-shadow / text-shadow
box-shadow: 10px 10px 5px #888;
http://www.webdesignerwall.com/demo/css3-dropdown-menu/ 28 de Octubre de 2010 HTML 5 y CSS 3 65
NOVEDADES 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 28 de Octubre de 2010 HTML 5 y CSS 3 66
NOVEDADES TRANSFORM
rotate :
transform: rotate(30deg);
skew :
transform: skew(-30deg);
http://www.ejhansel.com/transform/
scale :
transform: scale(0.5,2.0);
translate
transform: translate(30px,10px);
http://lab.simurai.com/css/tilt-shift/ 28 de Octubre de 2010 HTML 5 y CSS 3 67
NOVEDADES
Un gran poder conlleva una gran responsabilidad
HTML 5 y CSS 3
68
NOVEDADES COLOR
Opacity
Opacity: 1.0 Opacity: 0.5
HSL:
(Hue, Saturation, Lightness)
hsl(21,97%,52%)
RGBA:
(Red, Green, Blue, Alpha) rgb(255,192,0,1); rgb(255,192,0,0.5);
HSLA:
(Hue, Saturation, Lightness, Alpha)
hsla(21,97%,52%,1); hsla(21,97%,52%,0.5);
HTML 5 y CSS 3
69
NOVEDADES MULTI-COLUMN LAYOUT

column-count column-width column-gap column-rule
HTML 5 y CSS 3
70
NOVEDADES 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.paradigmatecnologico.com/
HTML 5 y CSS 3
71
NOVEDADES TEXTOS
Text-shadow
Text-shadow: Xpos Ypos Blur Color;
ejemplo de sombra
http://lab.simurai.com/css/flashlight
Word-wrap
word-wrap: break-word;
This paragraph has long words thisisaveryverylongwordthatisntr eallyoneword and again a longwordwithnospacesinit
Text-overflow
Text-overflow: ellipsis-word;
Lorem ipsum dolor sit
HTML 5 y CSS 3
72
NOVEDADES NUEVAS PSEUDO-CLASES
:enabled :disabled :checked
HTML 5 y CSS 3
73
NOVEDADES SELECTORES DE ATRIBUTOS

[att*=val]
contiene val
[att^=val]
empieza por val
[att$=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 y CSS 3
74
NOVEDADES MEDIA QUERIES

min-width & max-width
diferentes estilos segn el tamao de la pantalla
http://dev.sencha.com/deploy/touch/examples/kitchensink/
HTML 5 y CSS 3
75
ESTADO ACTUAL
HTML 5 y CSS 3
76
ESTADO ACTUAL
Desarrollo dividido en mdulos
Selectores, fuentes, colores,
6-8
http://www.w3.org/Style/CSS/current-work#table http://www.findmebyip.com/litmus/#target-selector
HTML 5 y CSS 3
77
PROPIEDADES DE NAVEGADOR
HTML 5 y CSS 3
78
PROPIEDADES DE NAVEGADOR
-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 y CSS 3 79
CONCLUSIONES
HTML 5 y CSS 3
80
CONCLUSIONES
ES EL MOMENTO
Internet en el mvil Aplicaciones online Alta implantacin en navegadores
WEB = CAMBIO PRONTO SER EL ESTANDARD PRACTICA E IMPLEMENTALO POCO A POCO

28 de Octubre de 2010 81
HTML 5 y CSS 3
MUCHAS GRACIAS!
ALGUNA PREGUNTA?
HTML 5 y CSS 3
82

Html5ycss3 101029060142 Phpapp02

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Html5ycss3 101029060142 Phpapp02

Uploaded by

Copyright:

Available Formats

HTML 5 + CSS 3

Introduccin y aplicacin desde hoy

QUE VAMOS A VER

Nuevas etiquetas de presentacin.

drag & drop

2004 2005 2007 2009

2012 2020 2022

ESTADO ACTUAL Est HTML 5 preparado ya?

ESTADO ACTUAL NO HACE FALTA ESPERAR HASTA 2022 !

ETIQUETADO DEL DOCUMENTO

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

ETIQUETADO DEL DOCUMENTO

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

<meta charset= UTF-8 >

ETIQUETADO DEL DOCUMENTO

ETIQUETADO DEL DOCUMENTO

<link rel= stylesheet type= text/css href= estilos.css >

<link rel= stylesheet href= estilos.css >

ETIQUETADO DEL DOCUMENTO

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

<footer> <p> 2010 Bla bla bla bla</p> </footer>

El contenido no se uede ser ex ort do

http://code.google.com/p/explorercanvas/ http://billmill.org/static/canvastutorial/index.html 28 de Octubre de 2010 HTML 5 y CSS 3 34

width & height

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

DRAG & DROP

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

ELEMENTOS QUE DESAPARECEN

ELEMENTOS QUE DESAPARECEN

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

Bases de datos Locales

Lgica de la aplicacin e interfaz de usuario

data generada por el usuario, o recursos solicitados

Tcnicas de Almacenamiento Offline Previas

Poca informacin (4 Kb) Reduce velocidad

Se fuerza a usar un Navegador determinado

ALMACENAMIENTO LOCAL Tcnicas de Almacenamiento con HTML5

TIPOS DE DATOS: localStorage sessionStorage

Permanecen hasta que el usuario los borra Desaparecen al cerrarse el navegador

http://html5demos.com/storage http://playground.html5rocks.com/#localstorage http://playground.html5rocks.com/#sessionstorage 28 de Octubre de 2010 HTML 5 y CSS 3 53

Web SQL Database

Como las DDBB tradicionales. Estructura relacionada (joins)

Ms complejas. IE y Firefox no son compatibles

http://playground.html5rocks.com/#async_transactions 28 de Octubre de 2010 HTML 5 y CSS 3 54

ALMACENAMIENTO LOCAL FileStorage

ALMACENAMIENTO LOCAL LO QUIERO USAR YA!

Securizar los datos

2000 2002 2005 2009

CSS 3 VS. CSS 2

http://www.webdesignerwall.com/demo/css3-dropdown-menu/ 28 de Octubre de 2010 HTML 5 y CSS 3 65

NOVEDADES MULTIPLE BACKGROUNDS

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html 28 de Octubre de 2010 HTML 5 y CSS 3 66

http://lab.simurai.com/css/tilt-shift/ 28 de Octubre de 2010 HTML 5 y CSS 3 67

Un gran poder conlleva una gran responsabilidad

NOVEDADES MULTI-COLUMN LAYOUT

Lorem ipsum dolor sit

NOVEDADES NUEVAS PSEUDO-CLASES

:enabled :disabled :checked

NOVEDADES SELECTORES DE ATRIBUTOS

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

NOVEDADES MEDIA QUERIES