Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

Diseño Web Responsivo III El codigo

Feb 15, 2013   //   by Diseño Web Roger Soto   //   Programacion  //  7 Comments

Por fin la parte que mas me gusta de esta serie de 3 artículos sobre diseño web responsivo: El Código puro y duro, pero antes algunas consideraciones

Antes de :

  • Empecemos en Grande

  • Lo primero que se recomienda es empezar tu diseño web responsivo desde el tamaño mas grande en que vaya a ser desplayado, es decir si piensas crear una pagina que se muestre en pantallas de 1920×1080, se empieza diseñando para ese tamaño y luego se va modificando el diseño web responsivo para pantallas mas pequeñas.

  • No Usar Valores exactos!!

  • En su lugar usaremos valores porcentuales para esto nos ayuda la regla de 3 simple es decir si empezamos con una ancho total de 960px, y queremos un sidebar de 300px tendríamos que sacarlo asi: ancho deseado x ancho total / 100, o para el caso 300×960/100 = 31.25% , y lo mismo para cada caja o div o sección que se quiera crear.

  • No ventas Popup

  • Los ventanas popup se muestran encima de la pagina principal y en dispositivos móviles no se puede distinguir esto y suele dar confusiones, lo mejor es no usarlas o usarlas con sabiduría.

  • No Muestres todo!!

  • Hay que pensar que los dispositivos mas pequeños como teléfonos, no se puede mostrar todo la información, así que lo mejor es ocultar para los móviles las cosas que no se necesiten, por ejemplo, publicidad, o el buscador en la misma pagina.

El Código

Bueno el código para el Diseño Web Responsivo no tiene mucha magia, pero es importante conocer sus partes

primero el infaltable meta viewport que tiene la finalidad de indicarle al dispositivo que estemos usando de que tamaño y a que zoom se va a mostrar nuestra pagina web.

La línea 007 de este código indica que la pagina se va a ver en todo el ancho de la pantalla a una escale de 1 y el usuario no la puede escalar. mas info en este link

Luego como los navegadores antiguos no reconocen el meta viewport ni los meta querys, no apoyamos en java script para solucionarlo esto se aplica en las líneas de la 12 a la 20.

Luego la Magia, pasamos a la sección que nos va a permitir escalar las imágenes eso lo logramos con css y lo apreciamos en las líneas de la 30 a la 34 donde le indicamos que las imágenes, los videos, y los objetos que incrustemos ocupen todo el ancho del contener que los soporta, es decir si utilizamos un ancho de 960px, y dentro creamos dos cajas una de contenido de 70% ancho y la otra sidebar de 30% de ancho, y luego dentro de esas cajas incrustamos imágenes, las imágenes ocuparían el 100% de la caja que lo contiene. y si luego cambiamos el tamaño del ancho de 960px por 500px los contenedores y sus imágenes se redimensionaran automáticamente.

Y al final los Media Queries, que nos permiten ejecutar una sección de css según sea el tamaña de la pantalla, es decir cuando nuestra pagina se despliega en una pantalla de 980px de ancho se ejecuta la todo el css que no esta destro de las etiquetas metaquery mas el css que esta dentro de la etiqueta @media screen and (max-width: 980px) y cuando la pantalla se reduce a 700px igual se ejecuta todo el css mas el contenido de la etiqueta @media screen and (max-width: 700px);

dos observaciones, la redimensión de videos, seria tema de otro post explicar al detalle la forma de tratar los videos ya que usualmente no responden o se hacen una franja muy delgada, esto lo corregimos con un una regla css “.video-container” que nos va a permitir generar la altura para el video, revisen esa regla para que les funcione, y el otro problema es el redimensión de backgrounds, esto se soluciona fácil con la regla background-size, pero tienen modificar esta regla para cada media query.

.. Y eso es todo, he tratado de hacerlo lo más simple posible, espero que haya servido de ayuda. si no, no duden en consultar.
compartan este esfuerzo, y si necesitan una pagina web ya saben a quien llamar.

Ejemplo Funcionando Descarga el Ejemplo

7 Comentarios

  • […] Cualquiera de estos frameWorks es una gran decisión a la hora de empezar un proyecto responsivo, pero como desarrolladores debemos conocer los pormenores del código para ello lo pasaremos a explicar en nuestro siguiente post que lo puedes encontrat aqui. […]

  • Excelente aporte. Muchas gracias

  • No veo el codigo, solo lo describes. Se puede ver?

  • Recien vi el ejemplo pero no se puede descargar el ejemplo, el zipeado esta defectuoso

    • Hola acabo de revisar el zip y lo he podido descargar y abir y editar sin complicaciones, porfavor revisa tu descaga, muchas gracias por reportar links rotos o problemas con la web

  • Que buen post. Gracias por la informaci

  • Muy bien explicado muchas gracias!

Que opinas de esto?