Responsive Web Design.
El diseño web adaptable o adaptativo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria, entre otras. Esta tecnología pretende que con un solo diseño web, se tenga una visualización adecuada en cualquier dispositivo.
El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.
El diseño web adaptativo se vale de diferentes herramientas como CSS y JavaScript.
CSS
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo «style».
Es importante conocer esto, ya que las herramientas a ser discutidas a continuación utilizan extensivamente CSS

Herramientas.
1. Twitter Bootstrap.
Twitter Bootstrap es un framework o conjunto de herramientas de software libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.
Este framework es altamente utilizado, este genera paginas web adaptativas y si se conoce un poco de Javascript permite utilizar herramientas aun mas interesantes como los carruseles y modals.
Aca hay un link para un tutorial completo de bootstrap.
\
2. Webflow
Webflow es una herramienta en linea de tipo lo que ves es lo que obtienes, con la cual se pueden crear sitios web adaptativos, utilizando bootstrap 3.0, aunque sus mejores funciones son pagadas, vale la pena conocer sobre esta herramienta.
A continuación se deja el link del canal de youtube de webflow donde se puede encontrar mucha información sobre esta herramienta y tutoriales.
3. Pingendo
Pingendo es una aplicación utilizada con bootstrap, esta permite la creación de paginas web adaptativas y muestra visualmente como el resultado del diseño y permite editar código fuente.
A continuacion se deja un link con un tutorial de esta herramienta.
Como ultimo punto se deja una pagina web en donde se pueden encontrar plantillas de bootstrap con su demostracion en linea, cabe destacar que el codigo fuente de todas estas paginas esta disponible para ser descargado, adaptado y utilizado.
Start bootstrap
Thank you for sharing this article regarding packages of Responsive Web Desing. I was looking for details of Responsive web design and finally i did get it from here.
ResponderEliminarMuchas gracias al blog por compartir con nosotros la importancia de tener una página web para nuestros negocios, por mi parte recurrí a Diseño web en León y me ha ido genial.
ResponderEliminarMuy importante es tener una página web. Pero lo más importante después es tener visibilidad en Google. ¿De que te sirve una web si nadie la conoce? Para eso está la agencia seo marbella profesionales dedicados con tu proyecto para promocionarlo y darle visibilidad.
ResponderEliminar