Tutorial - Diseño y Maquetación Web para Smartphones y Tabl - Taringa!

1/8/2014 Tutorial: Diseo y maquetacin web para smartphones y tabl - Taringa!
http://www.taringa.net/posts/hazlo-tu-mismo/17999833/Tutorial-Diseno-y-maquetacion-web-para-smartphones-y-tabl.html 1/5
Lo ms destacado En ascenso Lo ms reciente Crear Post!
HAZLO TU MISMO | HACE 7 DAS
Tutorial: Diseo y maquetacin web para
smartphones y tabl

Alf - No hay problema!
directv.com.ar/ofertas/
Alf en On Directv -Dejanos tus datos y te contactaremos!
Tutorial: Diseo y maquetacin web para
smartphones y tablets
En este artculo os mostrar como maquetar una web para que se adapte a diferentes resoluciones de pantallas,
smartphones y tablets. Tendencia que en ingls se llama Responsive Design. Para ello utilizar como ejemplo
mi otro blog http://antoylola.com/ El objetivo es utilizar la clase y propiedades CSS3 media queries para adaptar
un nico diseo a diferentes resoluciones. Para ello basaremos la estructura de nuestra web y elementos en
medidas relativas como em y %. Como resultado obtendremos una web mucho ms navegable y funcional.
Principales ventajas de una web optimizada para moviles y tablets
Diseo adaptado a nuestra pantalla
Comodidad a la hora de navegar y leer textos al no tener que usar el zoom.
Contenido ms directo, los elementos irrelevantes se eliminan.
Mayor impacto visual.
0 0 0
Regular
17
Seguidores
169
Puntos
15
Posts
byPitBuLL
w INGRESAR REGISTRARTE
Posts Mi T! Comunidades T! Msica Juegos Tops

Buscar
q
Os dejo otro ejemplo de web con Responsive Design, como veis hay 3 versiones de la misma web que dependen
del tamao de la ventana y del dispositivo. Podis encontrar muchos ms ejemplos en: MediaQueri.es Para ver
el funcionamiento de la clase @media slo debis ir estrechando la ventana de vuestro navegador.
Comenzar
1 Maqueta tu web utilizando unidades relativas:
En lugar de usar px utiliza % o em para el tamao de tus capas, fuentes e imgenes (especialmente para el
ancho). As te ser ms cmodo adaptar tu web a diferentes resoluciones. Inicialmente puedes limitar la capa
contenedora con la propiedad max-width, o bien establecer un ancho en px y luego cambiarlo a % a travs de
@media
2 Aade el meta tag viewport en el <head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Este meta tag se utiliza para controlar cmo aparecer el contenido HTML en los navegadores mviles. As nos
aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el
contenido tendr el ancho del dispositivo y que la escala mnima y mxima es de 1. Ms detalles e info
3 Utilzamos la clase @media para adaptar nuestra web
La expresin @media de css3, es fundamental. Nos permite establecer condiciones desde CSS para conocer el
dispositivo desde el que se accede a nuestra web y aplicar nuevos estilos CSS. Por ejemplo: podemos eliminar el
sidebar de nuestro blog si el navegador mide menos de 600px. Tenis la info ms detallada en:
http://www.w3.org/TR/css3-mediaqueries/ Las propiedades que ms nos interesan son las siguientes:
a) width y height: Ancho y alto del navegador (podemos aadir el prefijo min- o max-)
b) device-width y device-height: Ancho y alto del dispositivo, mviles y tablets (podemos aadir el prefijo min- o
max- )
c) orientation: Orientacin del mvil o tablet (para panormico utilizaremos orientation:portrait, para vertical
orientation:landscape)
Cmo trabajar con media queries?
Sintaxis, ejemplos bsicos
Ventana o monitor menor de 800px
@media screen and (max-width: 800px) {
#contenedor{
width:100%;
}
}
Con @media screen estamos iniciando la consulta media query, para aadir condiciones debemos utilizar and.
Es este caso estamos aplicando un ancho del 100% a la capa #contenedor si el monitor o ventana tiene una
resolucin inferior a 800px
Smartphones
@media screen and (max-device-width : 480px) {
#sidebar{
display:none;
}
#menu{
text-align:center;
}
}
Los anteriores estilos slo se aplicaran a si el dispositivo tiene un ancho inferior a 480px
Ipad en posicin vertical
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
.entry, .entry-content
{
font-size:1.2em;
line-height:1.5em;
}
}
Uniendo esta tres condiciones and (min-device-width : 768px) and (max-device-width : 1024px) Estamos
limitando que los estilos slo se apliquen a dispositivos que con una resolucin de entre 768px y 1024, y con and
(orientation : landscape) indicamos que se apliquen cuando estn en posicin vertical. Esta media query se
aplicara a Ipad.
Resoluciones y media queries para los principales mviles, tablets y monitores
HAZLO TU MISMO
Diapositivas de la
conferencia Diseo
web para dispositivos
HAZLO TU MISMO
Maquetacion css,html
responsive con
adobe brackets parte
1
HAZLO TU MISMO
La importancia de la
web mvil
HAZLO TU MISMO
Maquetacion css,html
responsive con
adobe brackets parte
2
Aqu os dejo una lista de recursos
@media queries: Nmsdvid.com/snippets/
Simulador de dispositivos mviles, podrs ver como queda tu web en los telfonos y tablets ms usados
ResponsiNator.com
@media queries para principales monitores, smartphones y tablets: http://css-tricks.com/snippets/css/media-
queries-for-standard-devices/
Herramienta para redimensionar nuestro navegador a las principales resoluciones de monitores, tablets y
smartphones: ResizeMyBrowser.com
Plantilla basada en 960.css para maquetar con responsive design: https://github.com/davatron5000/Foldy960
Servicios para adaptar tu web a mviles y tablets.
Por ltimo recordarte que si tienes una empresa, eres agencia o diseador ponemos a tu disposicin nuestros
servicios de maquetacin web
Fuentes de Informacin
web movil html css diseno maquetacion maquetacion web CSS3 responsive
responsive design
Tags
Dar puntos 1 2 3 4 5 6 7 8 9 +10
Votos: 4 - T! score: 5 / 10
20 Puntos
Compartir 0 0 0 0
Seguir A favoritos
0
Seguidores
189
Visitas
8
Favoritos
1 comentario
@Eric55on hace 7 das +1
Posts Relacionados
VIDEOS ON-LINE
Curso HTML5, CSS3, y JQuery,
responsive web design
(Exelent)
HAZLO TU MISMO
Que es el Responsive Design?
(CSS)
INFO
Generador de estilos CSS3 en
lnea y muy sencillo
NOTICIAS
Revista MBP - Revolucin web,
MBP se adapta a vos
Avisos Taringa!
Alf - No hay problema!
directv.com.ar/ofertas/
Alf en On Directv -Dejanos tus datos y
te contactaremos!
Juega GRATIS - Nuevo S4
League!
yuisy.com/s4-league
Haz click y juega online GRATIS ahora!
Potencia tu conocimiento
taringa.net/registro
nete gratis a Taringa y s parte de la
inteligencia colectiva!
Diseo y maquetacin web para smartphones y tablets
HAZLO TU MISMO
para los pibes de
Taringa
HAZLO TU MISMO
Pelate una
mandarina con estilo
HAZLO TU MISMO
Hackear y
sorprender a tus
amigos nivel
amateur
HAZLO TU MISMO
Puerto USB en la
pared casero
HAZLO TU MISMO
Angry Birds te va a
sorprender
HAZLO TU MISMO
Como conseguir que
Harvard aparezca en
tu CV
Gracias por el aporte bro
@byPitBuLL hace 1 da +1
Me Alegro q te guste
Ir al cielo
Buscar...
Anunciar Ayuda Protocolo Desarrolladores Denuncias Report Abuse - DMCA Trminos y condiciones Privacidad de datos Reportar bug
Versin anterior

Tutorial - Diseño y Maquetación Web para Smartphones y Tabl - Taringa!

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutorial - Diseño y Maquetación Web para Smartphones y Tabl - Taringa!

Transféré par

Droits d'auteur :

Formats disponibles

1/8/2014 Tutorial: Diseo y maquetacin web para smartphones y tabl - Taringa!

Vous aimerez peut-être aussi