ES

www.codigo-facil.com > Responsive web design

Responsive Web Design


Adapta tu web al dispositivo que accede a ella

Que es y para que sirve?


La tecnologia evoluciona a pasos agigantados creando nuevos productos, que a su vez ponen en escena otros contextos para presentar la informacion.

De esta forma nos encontramos ante la necesidad de adaptar nuestros diseños a las diferentes plataformas, y es asi como surge el "Responsive Web Design", una tecnica que aprovecha los nuevos estandares CSS3 de los navegadores de ultima generacion, para que nuestros portales se adapten en funcion del dispositivo que accede a el.

Como se implementa?


Como he comentado anteriormente, la implamentacion del Responsive Web Design, se realiza mediante CSS3 y mas concretamente con los media queries.

Los media queries son una serie de reglas que podemos establecer dentro de nuestros css. Entonces podremos definir nuestros estilos en funcion de una serie de parametros que haran que nuestra web se adapte a los dispositivos que nosotros consideremos mas importantes en funcion de la estructura que hemos diseñado, segun la informacion que publicamos.

Pero lo fundamental para una correcta implementacion, en mi opinion, es en primer lugar tener claro cuales son los principales dispositivos que existen en el mercado. A continuacion un analisis del proyecto que queremos elaborar y de la informacion que va a contener, con el fin de optimizar los esfuerzos y asi economizar en tiempos de desarrollo, puesto que podria no ser necesaria una adaptacion total a todos los dispositivos existentes en el mercado.
Algunos ejemplos de tamaños de pantalla en algunos dispositivos :
  • 320 * 480 iPhone 4
  • 320 * 568 iPhone 5
  • 240 * 320 Crappy Android
  • 380 * 685 Samsung galaxy
  • 768 * 1024 iPad
Nota : No confundir el tamaño de pantalla del dispositivo con la resolucion a la que funciona el sistema, en este caso he mostrado unicamente el tamaño de la pantalla.
Ejemplos de uso de media queries

  1. <style>
  2. //regla para detectar monitores normales
  3. @media only screen and (min-device-width : 1024px )
  4. and (orientation : landscape)
  5. {
  6.    .logo{
  7.      width:200px;
  8.      float:left;
  9.    }
  10.  
  11.    .menu{
  12.      background:#cccccc;
  13.    }
  14.  
  15.    .subMenu{
  16.      width:200px;
  17.      float:left;
  18.    }
  19. }
  20.  
  21. /*
  22. regla para detectar un dispositivo tipo iPhone
  23. Ademas añado una regla que contemple resoluciones inferiores a
  24. 1024 para monitores mas antiguos u otros dispositivos
  25. que no cumplan la 1 condicion
  26. */
  27. @media only screen and (max-device-width : 320px )
  28. ,only screen and (max-width : 1023px)
  29. {
  30.    .logo{
  31.      width:100%;
  32.      float:none;
  33.    }
  34.  
  35.   .menu{
  36.      background:#cccccc;
  37.      clear:both;
  38.    }
  39.  
  40.    .subMenu{
  41.      width:100%;
  42.      float:none;
  43.    }
  44. }
  45. </style>

Comentarios :

En el ejemplo anterior hemos visto una forma sencilla de aplicacion de los media queries. Destacar que para declarar una regla su sintaxis es la siguiente @media, en mi ejemplo yo he añadido only screen y en algunos casos and (max-device-width), esto es para indicar las condiciones de aplicacion, en este caso, que el medio que accede sea un monitor y que el ancho de la pantalla del mismo sea como maximo el especificado.

En este ejemplo unicamente he contemplado 2 casos, un monitor normal de ordenador y una pantalla de un telefono de ultima generacion, en funcion a quien accede distribuyo las capas de una forma u otra. Pero como he comentado es un ejemplo muy basico que nos sirve como toma de contacto, el codigo dependera de nosotros y de los requirimientos de nuestros proyectos.

Y hasta aqui el articulo de hoy, como siempre os doy las gracias por vuestro apoyo, nos vemos en futuras actualizaciones.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
2