Académique Documents
Professionnel Documents
Culture Documents
6 de febrero de 2014
Contenido
Tecnolog a Internet 2 / 18
1 2 3 4 5 6 7
Cu al es la diferencia a grandes rasgos entre html5 y html? Cuando se utiliza el termino maquetaci on? Cu al es la funci on de un programador frontend? Cu al es la funci on de un programador backend? Podemos pasarle atributos al tag <html>? Qu e podemos denir dentro la etiqueta <head>? Para quienes es importante el tag <meta>?
Tecnolog a Internet 3 / 18
Ejemplo
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html > <html lang= " es " > <head > <meta charset= " iso-8859-1 " > <meta name= " description " content= " Ejemplo HTML5 " > <meta name= " keywords " content= " HTML5 , CSS3 , JavaScript " > <title > titulo del documento </title > <link rel= " stylesheet " href= " misestilos.css " > </head > <body > </body > </html >
Tecnolog a Internet 4 / 18
Un vistazo a los fundamentos del dise no de p aginas web responsivas Frameworks para el desarrollo de p aginas responsivas Procesarodes de CSS y sus sintaxis para componer estilos Preparar las herramientas para construir sitios web responsivos
Tecnolog a Internet 5 / 18
RWD b asicamente permite que un sitio web para responder o adaptarse a un tama no de visualizaci on diferente, mayor o menor, sin tener que congurar un dominio/subdominio espec co para las personas que utilizan dispositivos m oviles. La apariencia de la p agina web pueden ser mantenidos como para tener experiencias similares en diferentes tama nos de los dispositivos. Esto es posible con el uso de la viewport meta tag y CSS3 media queries.
Tecnolog a Internet 6 / 18
Un sitio web que responsivo est a construido principalmente con dos componentes
Viewport Meta Tag .- Esta etiqueta se coloca dentro de la etiqueta <head> y se utiliza para controlar la escala de la p agina web http://developer.apple.com/library/ios/#documentation/ AppleApplications/Reference/SafariWebContent/ UsingtheViewport/UsingtheViewport.html CSS3 Media queries .- Especica a los estilos par que muestren del tama no del viewport especicaso http://www.w3.org/TR/css3-mediaqueries/
Tecnolog a Internet 7 / 18
Si a nadimos el siguiente Viewport Meta Tag con la escala inicial a 1 permitir a a la p agina Web escalar en un 100 por ciento del tama no de visualizaci on al abrirlo por primera vez.
1 <meta name= " viewport " content= " width=device-width , initial-scale=1 " >
Tecnolog a Internet 8 / 18
El siguiente fragmento de c odigo muestra c omo podemos ocultar las im agenes cuando el tama no de la ventana esta entre 321 y 480 p xeles:
1 2 3 @media screen and ( min-width: 321 px ) and ( max-width: 480 px ) { img { display: none; } }
Tecnolog a Internet 9 / 18
http://www.smashingmagazine.com/ http://mediaqueri.es
Tecnolog a Internet 10 / 18
Imagenes responsivas .- La w3c propone el tag picture para solucionar el problema, pero aun sigue en desarrollo http://www.w3.org/community/respimg/
Tecnolog a Internet 11 / 18
Tecnolog a Internet 12 / 18
Tecnolog a Internet 13 / 18
Tecnolog a Internet 14 / 18
Bootstrap
http://living.is
Fundation
http://projection.pixar.com http://globalcloset.education.nationalgeographic.com/ www.getswizzle.com
Tecnolog a Internet 15 / 18
Tecnolog a Internet 16 / 18
Editores .- Aptana Browsers .- Firefox, Chrome, Explorer Plugins extras para ver dise nos responsivas
Tecnolog a Internet 17 / 18
Bookmarklets
Tecnolog a Internet 18 / 18