Tupale

Como crear webs y aplicaciones responsive design, css3 y html5 facil

Con el crecimiento que esta teniendo el mercado móvil y la conectividad desde estos dispositivos, es importante considerar que nuestros sitios ya no son visto solamente desde desktops y laptops, sino también desde laptops y smartphomes, lo que plantea un problema importante: La resolucion y tamaño de nuestros sitios y aplicaciones.

Antes para diseñar una web que tuviera versión móvil lo que hacíamos era crear dos webs de diferentes resoluciones y por medio de javascript verificar el navegador del usuario, así si el cliente se conectaba usando una laptop – desktop o si lo hacia usando un dispositivo móvil se mostraría una u otra pagina.

Pero actualmente tenemos html5 y css3 que nos permiten utilizar una técnica llamada Responsive Design que es crear un sitio web que se adapte a diferente resoluciones comúnmente usadas por desktops, laptops, tablets y smartphones. Aunque mas adelante escribiré algún tutorial explicando en detalle como realizar responsive design desde cero, por ahora los dejo con la forma mas simple que he encontrado para hacer Responsive Design.

La forma mas simple que he encontrado es el uso de un framework HTML5, este nos da unos parámetros a seguir y nos brinda la capacidad de crear nuestros sitios con responsive design de manera muy fácil y rápida  ademas que es ideal para crear aplicaciones basadas en web por sus recursos como set de iconos, estilos de botones tablas, javascript basico minificado, chrome frame, etc.

Bootstrap

Este es el framework mas completo que he encontrado, la implementación es muy simple y la documentación es muy completa. Para usar Bootstrap sigue los siguientes pasos:

  1. Ve a http://twitter.github.com/bootstrap/ y descarga la ultima versión.
  2. Descomprime el archivo en tu carpeta de trabajo y nombra la carpeta resultante con el nombre de tu proyecto.
  3. Abre index.html y comienza a adaptar tu diseño y desarrollo sobre el Framework.

Hecho por nerds para nerds.

Bootstrap de nerd para nerds

Bootstrap de nerd para nerds

Bootstrap es muy completo pero debe ser estudiado para sacarle el verdadero provecho, es muy importante que antes y durante nuestro desarrollo consultemos la documentación muy seguido para ver que herramientas y clases podemos explotar para lograr nuestras metas y así no reescribir código innecesariamente. Esto especialmente con la base CSS que ya incluye una serie de estilos para botones, flotar objetos, definir espacios y tipografías  Y también la parte de javascript que ya incluye ventanas modales, carruseles, etc, etc, etc.

Hecha para cualquier lugar.

Responsive Design

Responsive Design

Esta es la parte que nos interesa, este hecho para cualquier lugar hace referencia al responsive design, en la documentación puedes encontrar una sección llamada Scaffolding que seria algo así como el andamiaje del sitio, es una estructura de columna y posiciones en la que te debes basar para trabajar correctamente con este framework HTML5. Tiene grillas CSS preestablecidas de máximo 12 columnas que puedes repartir como quieras y que se ajustaran apropiadamente en los navegadores de diferentes resoluciones, ademas de eso los menús cambian de formato al encoger la resolución y las imágenes reducen su tamaño automáticamente.

Empaquetado con features

Features

Features

Bootstrap incluye plugins javascript muy útiles como los carruseles, autocompletado e campos, tabs, slides, etc, ademas de tener la mas reciente versión de jQuery para que lo uses de manera eficiente incluyendo las llamadas en el archivo main.js.

2 comments for “Como crear webs y aplicaciones responsive design, css3 y html5 facil

  1. 17 diciembre, 2012 at 5:31 PM

    Muy Bien, esta es la línea a seguir, para la era post Flash. Gracias por la informacion.

Deja un comentario

A %d blogueros les gusta esto: