En este articulo hablaremos acerca de la técnica RWD, que es usada mundialmente para el diseño Web actual

1. República Bolivariana de Venezuela
Ministerio del Poder Popular Para la Educación
Universidad Centrooccidental Lisando Alvarado
Decanato de Ciencias y Tecnología (UCLA DCyT)
¿Qué es el RWD y su implementación?
Autor: Giovanni Quagliano
C.I: 23.299.236
Desarrollo Móvil (E32)
Barquisimeto, febrero de 2016

2. INTRODUCCIÓN:
Debido a la era en la que actualmente vivimos; como estudiantes del increíble
mundo de la programación nos surgen una serie de interrogantes en el área de la
programación web. Desde que tuvimos nuestro primer acceso a internet, hemos visitado
millones de páginas, (redes sociales, webs musicales, comercio, blogs) de cualquier tipo,
pero desde hace algunos años como usuarios de la tecnología y de los gadgets tendemos a
dejar el computador (PC/Laptop) a un lado, para comenzar a usar: (tabletas, teléfonos
inteligentes, televisores inteligentes, relojes inteligentes, lentes inteligentes).Alguna de las
interrogante que como usuarios y/o desarrolladores nos surgen pueden ser: ¿Cómo se
adaptan estás paginas a cada uno de estos dispositivos? ¿Tenemos que crear la misma
página, para cada dispositivo? ¿Cuántos días, meses, años, tardaremos en crear y diseñar
la misma web para cada dispositivo que vaya saliendo al mercado? Pero para beneficio
propio esto no es así, gracias a una filosofía de diseño y desarrollo creada por Ethan
Marcotte llamada Reponsive Web Desing¸ también vista por su siglas (RWD) y nos hacemos
más interrogantes. ¿Qué es esto? ¿Cómo digiero esto? ¿Cómo aprendo esto? ¿Me es útil
aprender esto? Todas estas interrogantes trataremos de responderlas a continuación.
Nota: Recomendamos al lector ir hacer clic en los
hipervínculos con el fin de complementar el artículo, ya que
aquí solo hacemos referencia a lo más básico

3. ¿QUÉ ES EL RESPONSIVE WEB DESING (RWD)?
Responsive Web Desing, o en español diseño web adaptable, adaptativo o responsivo es
una tendencia de diseño y desarrollo de páginas webs que pueden ser visualizadas
perfectamente en todo tipo de dispositivo (gadgets), y gracias a esto los desarrolladores no
tenemos que crear una versión para cada dispositivo existente o que se vaya a inventar
(como se hacía años atrás), puesto que dicha técnica permite que una sola web sea
inteligente, ¿Cómo es esto? Pues que la página web se adapte a cada dispositivo, con esto
no hablamos solo al tamaño, calidad de imágenes, letras etc. Esta técnica va más allá de
esto puesto que la pagina está obligada a adaptarse y/o reestructurarse para cada
dispositivo donde se visualice. Pero… ¿Cómo funciona esto? Sencillo, como se comentó más
arriba, en lugar de construir una website para cada tipo dispositivo, sea crea una sola web
con la ayuda de un conjunto de herramientas que hacen posible esto:
 CCS3 (Cascading Style Sheets o Hoja de estilo en cascada)
 Media Queries (Las media queries son una serie de órdenes que se incluyen en la
hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes
resoluciones de pantalla. Para entenderlo mejor, los diseños de las páginas web, al
igual que los periódicos y las revistas, están basados en columnas, entonces con la
filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5
columnas, para una tableta (800x600 píxeles) necesitaría sólo 4, y en el caso de un
teléfono inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas
serían 3.)
 Layout
Pudiendo así la web detectar desde que dispositivo está siendo visualizada, mostrando
su versión más óptima para dicho dispositivo, ya sea reorganizando elementos,
mostrando menos elementos (imágenes) o más ligeras, redistribuyendo las columnas
en el diseño, menos texto, etc.). ¿Es ventajoso esto de diseñar un web inteligente? En
todo sentido, puesto que todo lo que haga referencia a ahorrar tiempo y dinero, lo es.
Ya que de esta forma se reducen los costos de creación y mantenimiento cuando el

4. diseño de las pantallas es similar entre dispositivos de distintos tamaños, desde el punto
de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los
resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan
de estas. También se evitarían errores al acceder al sitio web en concreto desde los
llamados social links, es decir, desde enlaces que los usuarios comparten en medios
sociales tales como Facebook o Twitter, y que pueden acabar en error dependiendo de
qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede
¿CÓMO PODEMOS IMPLEMENTAR DICHA TÉCNICA Y CON QUE LENGUAJES?
Esta técnica es para sitios webs, y como toda web es desarrollada en HTML este será la base
de todo, debemos tener un código organizado y limpio, con buena semántica; gracias a
HTML5 podemos tener todo esto; pero no solo es HTML, si no también CCS (se puede
considerar que este es quien hace la gran parte del trabajo) ya que recordemos que HTML
es solo la estructura de la casa y el CCS es el diseño de la casa (color, pintura, etc.) pero CCS
no hace el trabajo completo, por eso más arriba definimos que el (RWD) no es una
herramienta, es un conjunto de herramientas las que hacen posible esto. El CCS
conjuntamente con los Media Queries, hacen posible que la web entienda, el tamaño de la
pantalla, la orientación o la resolución de donde se está visitando la web, esto nos permite
cambiar el layaout o la tipografía del diseño, además las rejillas fluidas basadas en CCS
podemos conseguir que los elementos que fluyan por la pantalla, se recoloquen para
adaptarse de nuevo al tamaño de la pantalla o a la resolución del monitor. Además, no
podemos dejar por fuera los Java Scripts, ya que con estos podemos adaptarnos a las
necesidades del dispositivo de donde se esté visualizando la página, y así nos permite
utilizar herramientas como geolocalización, o eventos táctiles para la interacción del sitio.
En resumen, lo que nos permite básicamente hacer o implementar un sitio web responsivo
son básicamente estos tres (3) elementos (HTML, CCS, Java Script)

5. ALGUNOS DE LOS FRAMEWORKS MÁS FAMOSO PARA IMPLEMENTAR RWD SON:
Antes de continuar con este punto tenemos que mencionar que son frameworks, para
luego entender cuáles son las más comunes o los mejores a la hora de implementar
RWD. Un Framework es un entorno o ambiente de trabajo para desarrollo;
dependiendo del lenguaje normalmente integra componentes que facilitan el desarrollo
de aplicaciones como el soporte de programa, bibliotecas, plantillas y más. En resumen,
un frameworks puede ser ventajoso a la hora de desarrollar puesto que nos podría
facilitar muchas cosas a la hora de desarrollar, pero no siempre sera así. Se recomienda
al lector profundizar acerca de estos.
Continuando con los frameworks más famosos para RWD, tenemos los siguientes:
1. Bootstrap
2. Foundation
3. Skeleton
4. HTML5 Boilerplate
5. HTML KickStart
6. MontageJS
7. SproutCore
8. Zebra
9. CreateJS
10. Less Framework
¿QUÉ SON LOS MEDIA QUERIES?
Las Media Queries, incorporadas en CSS3, son las primeras construcciones del
lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en
determinadas situaciones.
Las Media Queries son, en una traducción rápida, consultas de las características del medio
donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo
se aplicarán en caso que esa consulta del medio sea satisfactoria.
Nota: Recomendamos al lector investigar acerca de cada uno
de estos, ya que no podemos céntranos en uno por uno;
puesto que sería muy extenso el articulo

6. Son una de las herramientas fundamentales para implementar el "Responsive Web Design"
y han llegado de la mano de las CSS3, convirtiéndose en un aliado fundamental de cualquier
diseñador web.
En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para
distintos tamaños de la pantalla. Son sencillas de entender y aplicar, aunque el estándar es
bastante sofisticado, con diversas posibilidades. Existen muchos usos, algunos no tan
habituales en el mundo del diseño actual, pero que podrán tener su protagonismo en algún
momento. Como comentábamos en párrafos más arriba las media queries pueden decirnos
si el dispositivo tiene una relación de pantalla 4:3 o 16/9, o una profundidad de color dada.
Las Media Queries representan una evolución importante de CSS, puesto que suponen la
primera estructura condicional en el lenguaje. Sabemos que CSS no es un lenguaje de
programación, ni tiene motivos para parecerse, pero existen muchas cosas que se
implementan en los lenguajes de programación y que nos vendrían bien en el desarrollo
con CSS, como es el caso de los condicionales.
- "Si ocurre esto, entonces haz tal cosa" -
Una construcción condicional como esta es tan útil y básica que, aunque CSS no sea un
lenguaje de programación, necesita incorporarlas. Ejemplos de casos en los que nos vendría
bien un condicional:
- Si la pantalla del usuario tiene estas características, entonces aplica estos estilos
- Si se imprime el documento en la impresora, aplica estos estilos.
- Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición
horizontal (landscape), entonces aplica este CSS.
Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las Media
Queries. Son un paso al frente en cuanto a la separación entre el contenido y su

7. representación, puesto que nos facilitan que el contenido de una página pueda adaptarse
al medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener
que tocar el HTML para nada.

8. CONCLUSIÓN
Para finalizar este artículo, podemos decir que de ahora en adelante estamos en la
obligación de desarrollar todos los sitios usando este conjunto de técnicas, ya que es la
manera más óptima, puesto que los más importante de los sitios webs es su contenido y en
cuantos dispositivos puedo llegar a mostrar dicho contenido de la manera más elegante y
llamativa, para así seducir a nuestros futuros clientes. Queremos mencionar que no
debemos quedarnos en el ayer, ni en el hoy, siempre tenemos que pensar en el futuro,
además que estamos en la era del internet de las cosas y cada vez salen más aparatos en el
mundo con acceso a internet; debemos aprovecharnos de esto para empezar a formarnos
como desarrolladores webs.
Esperamos haya sido de total entretenimiento para los lectores, para que despierten
su curiosidad en el desarrollo web.
Agradecimientos al profesor José Rojas por despertarnos la curiosidad de este
extenso mundo, y por el material tan didáctico que nos regaló.

9. Algunas páginas de donde me he apoyado para este artículo:
 http://designinstruct.com/roundups/html5-frameworks/
 http://www.desarrolloweb.com/articulos/prototipado-diseno-web.html
 http://www.desarrolloweb.com/articulos/resumen-fundamentos-rwd.html
 http://www.desarrolloweb.com/articulos/diseno-responsive-web.html
 http://www.desarrolloweb.com/articulos/taller-responsive-web-design.html
 http://www.desarrolloweb.com/articulos/css-media-queries.html
 www.adinteractive.co/web/diseno-web-adaptable-practico
 https://es.wikipedia.org/wiki/Framework
 https://translate.google.com/translate?sl=en&tl=es&js=y&prev=_t&hl=es-
419&ie=UTF-8&u=http%3A%2F%2Fethanmarcotte.com%2F&edit-text=&act=url