CONTENIDO

1. INTRODUCCIN................................................................................................3
2. RESUMEN..........................................................................................................4
3. OBJETIVOS........................................................................................................5
4. DESARROLLO DEL ESTUDIO..........................................................................6
4.1

Definicin de Qu es Responsive Web Design?..................................6

4.2
IMPORTANCIA
DEL
USUARIO
MVIL
PARA
EMPRESAS
TECNOLGICAS...................................................................................................7
4.2.1 Recomendaciones de Google sobre RWD............................................7
4.3 COMPARACIN ENTRE APLICACIONES MVILES Y APLICACIONES
NATIVAS................................................................................................................8
4.4 CONCEPTOS Y TCNICAS QUE APORTA RESPONSIVE WEB DESIGN 10
4.4.1 El concepto del Mobile First..............................................................10
6 VENTAJAS E INCONVENIENTES DEL EMPLEO DE REPONSIVE WEB
DESING...................................................................................................................12
6.1. Ventajas........................................................................................................12
6.2. Desventajas..................................................................................................12
7. TCNICAS DE IMPLEMENTACIN...................................................................12
7.1 Mostly Fluid (Mayormente fluido)...............................................................13
7.2. Column Drop (Cada de columnas)...........................................................13
7.3. Layout Shifter (Cambio de layout).............................................................14
7.4. Tiny Tweaks (Cambios Minsculos)..........................................................14
7.5 Off Canvas (Fuera del Lienzo)....................................................................15
8. HERRAMIENTAS PARA PROBAR DISEOS RESPONSIVOS........................15
9. EMPLEO DE FRAMEWORK PARA RWD......................................................16
9.1 Concepto de un framework front-end........................................................16
9.2 Ventajas y desventajas de framework front-end.......................................16
9.3 Bootstrap.......................................................................................................17
CONCLUSIONES....................................................................................................19
BIBLIOGRAFA.......................................................................................................20

1. INTRODUCCIN
La presente investigacin nos da a conocer lo que conocemos como Reponsive
Web, casi cada nuevo cliente en estos das quiere una versin mvil de su sitio
web es prcticamente imprescindible, despus de todo, un diseo para el
BlackBerry, otra para el iPhone, el iPad, Notebook, Kindle y todas las resoluciones
de pantalla debe ser compatible tambin. En los prximos cinco aos, lo ms
probable es que disear para una serie de invenciones adicionales.
En el campo del diseo y desarrollo web, estamos llegando rpidamente al
punto de no poder mantenerse al da con las nuevas resoluciones y dispositivos
sin fin. Para muchos sitios web, la creacin de un sitio Versin para cada
resolucin y nuevo dispositivo sera imposible, o al menos poco prctico.
Debemos sufrir las consecuencias de la prdida de los visitantes de un
dispositivo, para el beneficio de obtener visitantes de otro? O hay otra opcin?
Claro que s, trasplantar esta disciplina en el diseo web, y tenemos una idea
nueva sin embargo, toda similares.
Al

igual

que

la

arquitectura

sensible,

diseo

web

debe

ajustar

automticamente. No debe requerir un sin nmero de soluciones a medida para

cada nueva categora de usuarios. Obviamente, no podemos utilizar sensores de
movimiento y robtica para lograr esto la forma de un edificio lo hara. Los diseos

fluidos, consultas de medios y secuencias de comandos que puede volver a

formatear las pginas Web y del margen de ganancia sin esfuerzo o
automticamente. Pero el diseo web de respuesta es no slo sobre las
resoluciones de pantalla ajustables e imgenes de tamao automticamente, sino
ms bien de una forma totalmente nueva de pensar en el diseo. Vamos a hablar
de todas estas caractersticas, adems de otras ideas en la fabricacin dentro del
desarrollo del tema que presentaremos a lo largo de la investigacin.

2. RESUMEN
El siguiente trabajo tiene como objetivo presentar el tema Responsive Web
que en la actualidad ha tomado mucha importancia, ya que intenta dar solucin a
los problemas de experiencias de usuario que surgen con la diversidad de
dispositivos mviles que se conectan a diario a Internet.
Al recorrer los distintos puntos y algunos ms importantes intentaremos dar
una visin general del problema y buscar que soluciones son ms eficientes para
conseguir que nuestras pginas webs se adapten a cualquier tipo de dispositivo
dando como resultado un mejor diseo web adaptable donde el enfoque que se
sugiere sea tanto en el diseo de la aplicacin como el desarrollo. Ambos deben
responder al comportamiento del usuario y el medio ambiente en funcin del
tamao de la pantalla, la plataforma y la orientacin.
La prctica consiste en una mezcla de redes flexibles y diseos, imgenes y
un uso inteligente de las consultas de medios CSS. A medida que el usuario
cambia desde su ordenador porttil para el iPad, el sitio web debe cambiar
automticamente para adaptarse a la resolucin, tamao de imagen y script
habilidades. En otras palabras, el sitio web debe tener la tecnologa para
responder automticamente a las preferencias del usuario.

Esto eliminara la necesidad de un diseo diferente y fase de desarrollo

para cada nuevo aparato en el mercado siendo ms competitivos tanto para un
desarrollador de software, como una empresa para su pgina de presentacin.

3. OBJETIVOS
Establecer un claro concepto sobre que es diseo web responsivo, tcnicas
que se pueden implementar, y framework de front-end ms utilizados.
Dar a conocer en las distintas tcnicas y herramientas para implementar
interfaces de usuarios web que se adapten a cualquier dispositivo que
tenga acceso a Internet.
Identificar las ventajas y desventajas de implementar las diferentes tcnicas

de diseo web responsivo.

4. DESARROLLO DEL ESTUDIO

4.1 Definicin de Qu es Responsive Web Design?
Aunque se ha realizado una pequea introduccin, en la siguiente seccin del
trabajo se van a describir las ideas principales y claves sobre el tema principal que
es Responsive Web Design.
Tomando una mejor definicin de (Marcote, 2010, pg. 5) Responsive Web
Design es una filosofa o nuevo enfoque para solucionar los problemas de diseo
para la gran diversidad de resoluciones y dispositivos. Este enfoque quiere
centrarse en el contenido, y en el cliente, en su experiencia de usuario, si deja de
trabajar con su equipo de sobremesa y quiere continuar navegando en la misma
pgina web desde una tablet o smartphone. Adems la misma quiere eliminar la
necesidad de diseos diferentes y nuevos desarrollos para distintas resoluciones y
por el contrario, sugiere que nuestro desarrollo debe dar soporte y responder a la
necesidad del contexto sobre el que se est ejecutando, teniendo en cuenta
parmetros como el tamao de pantalla, el tipo de dispositivo o la orientacin. La
pgina web debe de tener la capacidad de adaptarse a cada dispositivo, creando
una solucin nica.
En este artculo se describen las tcnicas y conceptos bsicos que deben
asumirse a la hora de implementar un diseo Responsive. Sin embargo, aunque
veremos en este documento las tcnicas y herramientas disponibles, Responsive

Web Design es una nueva forma de pensar tanto para los desarrolladores y
diseadores en la actualidad.
A nivel implementacin Responsive Web Design tiene tres conceptos claves,
los cuales se mencionan a continuacin:
El uso de los Media Queries que nos ofrece CSS3 permitindonos
aplicar estilos condicionalmente teniendo en cuenta parmetros de la
pantalla.
El diseo web fluido, se trata de layouts definidos en porcentajes que se
ajustan a los anchos de la pantalla.
Los elementos fluidos dentro de estos layouts, como son las fuentes, las
imgenes o elementos multimedia.
Al crear un sitio con este mtodo solo necesitamos una nica versin de HTML
y CSS que funcionar adecuadamente en cualquier tipo de dispositivo y
resolucin. Con Responsive Web Design debemos de dejar de fascinarnos en que
nuestra web se vea idntica en cada dispositivo ya que con cada resolucin de
pantalla cambia mejorando el aspecto de la aplicacin.

4.2 IMPORTANCIA DEL USUARIO MVIL PARA

EMPRESAS TECNOLGICAS
4.2.1 Recomendaciones de Google sobre RWD
Google es el gran buscador y en quien el mundo entero escucha sus
recomendaciones para posicionarse y optimizar sus sitios web para maximizar el
nmero de clientes que acceden a su negocio a travs de ste. Google se ha
inclinado al respecto y ha detallado su gran preferencia por los sitios desarrollados
con Responsive Web Design. El argumento para el que afronta esta
recomendacin es el de un mismo cdigo HTML bajo una misma URL accesible a
todos los dispositivos que facilita la indexacin en el buscador interactuando con
esta nica URL.

Aun as reconoce otras posibles alternativas a esta recomendacin que

desaconseja siempre y cuando sea posible atenerse a estos diseos Responsive
Web Design. Tcnicas que se han ido empleando hasta hoy, como son las de
redirigir la URL de la versin mvil o poseer distinta URL para cada dispositivo.

4.3 COMPARACIN ENTRE APLICACIONES MVILES Y

APLICACIONES NATIVAS
El desarrollo de una aplicacin para mvil requiere de una planificacin y
distintos procesos de desarrollo de software para finalmente obtener una
implementacin de la aplicacin ideada para un dispositivo mvil. Sin embargo,
antes de comenzar el desarrollo se debe de decidir cul va a ser la forma de
implementacin de esta aplicacin ya que existen distintas opciones, como puede
ser desarrollar una aplicacin nativa para una plataforma o desarrollar una
aplicacin web que corra en un navegador.
Una aplicacin nativa es una aplicacin desarrollada para una plataforma
mvil concreta instalndose directamente en el propio dispositivo. Estas
aplicaciones nativas suelen estar subidas en los markets oficiales de la plataforma
como puede ser la Apple App Store o el Play Store de Google. Una aplicacin
web, es una aplicacin disponible en Internet que se puede acceder a travs de un
navegador web de cualquier tipo de dispositivo, ya sea mvil o de escritorio. Este
tipo de aplicaciones no necesitan instalarse directamente en el dispositivo.
En este proceso de planificacin se debe decidir qu tipo de aplicacin se
adapta mejor a las necesidades, para ello se deben de tener en cuenta distintos
puntos. En los siguientes prrafos se desea destacar las ventajas e
inconvenientes de cada una de estas posibilidades. Una aplicacin nativa requiere
menos esfuerzo y son mucho ms rpidas y eficiente al trabajar con
caractersticas del dispositivo como pueden ser la ge localizacin o el
acelermetro. Adems estas aplicaciones poseen un total apoyo de las tiendas de

aplicaciones pudindose encontrar y descargar fcilmente, adems de aportar una

mayor seguridad.
Sin embargo, en una aplicacin nativa cada plataforma mvil dispone de su
propio entorno de desarrollo, ya que cada uno requiere de un lenguaje de
programacin distinto, mientras iOS emplea Objective C, Android emplea Java,
mientras que las aplicaciones webs emplean nicamente HTML, CSS y Javascript
funcionando en cualquier navegador. Esto implica un mayor coste para el
desarrollador y la gran desventaja es que la aplicacin desarrollada en una de las
plataformas no ser compatible con otras, debiendo portarse con un coste extra.
Aunque hemos hablado del apoyo de las tiendas de apps, obtener que tu
aplicacin sea aprobada puede llegar a ser bastante molesto adems de poseer
un coste. Otro inconveniente es las diversas versiones que lances de tu aplicacin,
pues no todo los usuarios actualizan sus aplicaciones pudiendo tener instalada
versiones anteriores de la aplicacin siendo complicado el darles soporte.
Por otro lado, las aplicaciones webs son mucho ms fciles de mantener,
pues aunque accedan desde distintos dispositivos, el cdigo es comn para todos,
lo que aporta menor coste, agilidad de cambios y frente a las aplicaciones nativas,
siempre tener la ltima versin actualizada de sta por si es necesario el arreglo
de un bug. Las aplicaciones webs no requieren la supervisin de ninguna tienda
de aplicaciones, ni siquiera de pasar ningn tipo de filtro.
Las desventajas de las aplicaciones web principalmente se encuentra en la
compatibilidad de los navegadores webs, siempre requieren conexin a internet
para funcionar, aunque pueden ser instaladas localmente para su empleo online, y
adems muchos destacan los problemas de privacidad, pues se puede rastrear la
actividad del usuario y existen mayores problemas de seguridad.
Se deben considerar cada uno de estos puntos positivos y negativos para
decidir qu tipo de aplicacin es ms conveniente depende de las necesidades del
proyecto.

Para disponer si se quiere desarrollar una aplicacin nativa o una aplicacin

web, se debe tener en cuenta los siguientes puntos:

Velocidad y rendimiento.
Caractersticas especficas del dispositivo.
Necesidad de internet.
Soporte multiplataforma.
Presupuesto.

Asimismo, se debe de buscar un equilibrio en la eleccin marcado por los

requisitos del proyecto a desarrollar, los cuales sellen el xito de ste. En este
proyecto se busca dar soluciones al tipo de aplicaciones web para que sean
adaptables a todo tipo de dispositivo y obtengan mayor fuerza en la batalla con las
aplicaciones nativas.

4.4 CONCEPTOS Y TCNICAS QUE APORTA

RESPONSIVE WEB DESIGN
4.4.1 El concepto del Mobile First
Hasta ahora todos los sitios web eran diseados slo para equipos de
sobremesa y el proceso de navegar por la Web en los telfonos mviles era
bastante incmodo. Sin embargo, las tecnologas estn cambiando y el principio
de Mobile First se est convirtiendo en un concepto cada vez ms extendido.
Mobile First es una filosofa desarrollada por Luke Wroblewski, la cual seala la
priorizacin del entorno mvil frente al escritorio a la hora de desarrollar
experiencias de usuario.
Mobile First se trata de la prctica de desarrollar un diseo desde su forma
ms bsica plantendolo primeramente para la pequea pantalla de un
Smartphone, basndose en un crecimiento iterativo que aporte cimientos al diseo
para otros dispositivos de mayor resolucin.

Figura: Concepto Grfico de Mobile First.

Esta tcnica se centra en ir de lo ms concreto a lo ms abstracto
centrndose nicamente en el contenido, implicando ir definiendo estilos
gradualmente desde una simple base. La pgina web es creada inicialmente para
dispositivos con menor capacidad y despus se aaden nuevas caractersticas
empleando Media Queries y CSS3. Los navegadores que no soporten esta
tecnologa recibirn el contenido simplificado (la versin mobile), y los
navegadores avanzados trabajaran con las media queries definidos.
Los motivos esenciales para aplicar esta filosofa son los de llegar a ms
gente, obligar al diseador centrarse en los contenidos y funcionalidades que son
los que van a marcar las necesidades del usuario aprovechando el espacio
disponible y lo primordial con la tecnologa que poseemos ahora mismo, sacar
provecho de las funcionalidades mviles como pueden ser la geo localizacin o los
eventos tctiles.

6 VENTAJAS E INCONVENIENTES DEL EMPLEO DE

REPONSIVE WEB DESING
6.1. Ventajas
(Esther Labrada & Cristina Salgado, Enero 2013, pg. 3) Diseo Web
Adaptativo como una solucin a la presentacin del sitio en cualquier medio
porttil. En la anterior cita nos da a conocer la principal ventaja del diseo
adaptivo que es: tener una aplicacin web para todo tipo de dispositivos. Como
tambin para reducir costos. Otra gran ventaja es el mantenimiento de la

aplicacin, porque solo posee una aplicacin para realizar el mantenimiento.

Como el caso de cambiar un estilo o agregar una nueva funcionalidad, solo sera
en el aplicativo.

6.2. Desventajas
Para el diseo web adaptivo, posee una gran desventaja que es, tratar de
convertir un sitio web en responsivo, por el tiempo que emplea el diseador y el
programador para determinar los objetos que deben cambiar, desaparecer,
transformarse por cada tipo de tamao de pantalla. Otro problema es los tiempos
de carga para los diseos web, porque debera de descargar todo el diseo por la
red, aunque solamente usurara la mitad del diseo.

7. TCNICAS DE IMPLEMENTACIN
A continuacin, se estarn mencionando las principales tcnicas para
implementar un diseo web adaptivo o responsivo, como son Luke, Wroblewski
entre otros.

7.1 Mostly Fluid (Mayormente fluido)

Es el diseo ms popular entre la comunidad web, el cual consiste en apilar
las columnas, una tras otras segn el tamao de resolucin del dispositivo.
Tambin se puede combinar con otras tcnicas, para ampliar el campo de
expansin del diseo. Como, por ejemplo:

Figura 1: Ejemplo Mostly Fluid (Mayormente fluido)

Fuente: propia

7.2. Column Drop (Cada de columnas)

Est presente tcnica, es sencilla de implementa, el cual consiste en crear
varias columnas y al finalizar el tamao termina en una solo columna, por cada
reduccin de resolucin, dejan caer cada columna segn la reduccin de
resolucin de la pantalla

Figura 2: Ejemplo Column Drop (Cada de columnas)

Fuente: propia

7.3. Layout Shifter (Cambio de layout)

Esta tcnica es ms complicada que las dos anteriores, porque consiste en
realizar un diseo por cada rango de resolucin, aunque puede ser adapta con las
dos anteriores, este Layout es muy comn en los Framework de diseo para
realizar responsive el cual veremos ms adelante.

Figura 3: Ejemplo Layout Shifter (Cambio de layout)

Fuente: propia

7.4. Tiny Tweaks (Cambios Minsculos)

Este patrn de diseo es el ms sencillo de implementar, el consiste en
utilizar controles que se puedan reducir, con la resolucin de los dispositivos y un
diseo simple que no padezca de cambios en la pantalla.

Figura 4: Ejemplo Tiny Tweaks (Cambios Minsculos)

Fuente: propia

7.5 Off Canvas (Fuera del Lienzo)

Este diseo tiene la finalidad de ocultar parte del diseo original, para los
distintivos con menor resolucin, y de tal manera acercarse a los diseos para
dispositivos mviles como, por ejemplo.

Figura 5: Ejemplo Off Canvas (Fuera del Lienzo)

Fuente: propia

8. HERRAMIENTAS PARA PROBAR DISEOS

RESPONSIVOS
Para poder probar un diseo responsivo bastara solamente con cambiar la
resolucin de pantalla en el navegador, aunque puede realizar variantes segn el
proveedor del dispositivo. Por lo que se recomienda utilizar herramientas
diseadas para este fin como son las siguientes paginas

https://quirktools.com/screenfly/
http://www.responsinator.com/

En dichas herramientas simula la resolucin y caractersticas especiales de los

diferentes dispositivos que tiene a su disposicin.

9. EMPLEO DE FRAMEWORK PARA RWD

9.1 Concepto de un framework front-end
Un framework para front-end es un conjunto de herramientas que nos
permite facilitar el realizar las tcnicas de responsivas para las pginas web. La
mayora de proyectos web parte de un mismo punto, por lo que estas
herramientas nos permiten realizar esta partida de manera ms amena y rpida.
Por lo general estos framework, utilizan un estilo por grids o columnas en
las cuales despus pueden realizar apartados con filas etc. Usualmente estos

framework comparten su estructura, la cual consta de un archivo CSS y otro JS.

Los cuales son incrustados en la pgina web para su vista.

9.2 Ventajas y desventajas de framework front-end

La principal ventaja de los framework, es la rapidez para realizar los
diseos web responsivos. Para su rpida publicacin y de tal forma solamente
dejan la lgica del proyecto para los desarrolladores. Otra ventaja es el apoyo de
las comunidades para estos framework, como son las comunidades de bootstrap y
fountation zurb, como tambin se pueden toar decisiones ms rpidas con
respecto a la paraciencia de los controles, fondo, estilos etc.
Sin embargo, pierden libertad los proyectos que usan estos framework,
porque deben ligarse a una maquetacin establecida, y controles genricos
creados especialmente para este framework.

9.3 Bootstrap
El framework de Bootstrap, tiene una estructura de un archivo css y otro
de JavaScript el cual posee una carpeta con imgenes reducidas las cuales,
despus pueden crear iconos para su uso,

Figura 6: Estructura de Boostrap

Fuente: Pagina de boostrap http://getbootstrap.com/getting-started/
El framework de boostrap posee una gran variedad de controles como son:
botones animados, paneles, acordeones, carrusel etc. Todos ellos bajo una
plantilla de grid en 12 columnas para su posicionamiento dentro de la pgina web.
La cual puede tener 4 tipos de tamaos de resolucin como son los siguientes:
Extra small
devices Phones
(<768px)

Small

devices Medium

devices Large

Tablets

Desktops

Desktops

(768px)

(992px)

(1200px)

devices

Figura 7: Estructura de Boostrap

Fuente: Pagina de boostrap http://getbootstrap.com/examples/theme/

CONCLUSIONES

Se estableci un concepto amplio sobre que es diseo web responsivo, y

se identific diferentes tcnicas posibles a desarrollar, como se dio una
breve explicacin sobre el framework front-end ms utilizadon, Boostrap.

Dieron a conocer las diferentes tcnicas y herramientas para realizar

interfaces web que se adaptan a cualquier dispositivo que tenga acceso a
internet. Como son las tcnicas siguientes: Mostly floud, Columm Drop, Tiny

Tweaks entre otras.

Se identific los beneficios y desventajas de implementar las diferentes
tcnicas expuesta como tambin el framework desarrollo, Bootstrap. Entre
los cuales podemos mencionar:
o Al implementar framework fornt-end obtienen mayor velocidad de
desarrollo de interfaces.
o El costo es reducido en gran tamao como el tiempo del proyecto.
o Se pierde libertad en diseo, porque deben guiarse sobre una
maquetacin ya establecida.
o Entre las tcnicas, dependiendo la tcnica a utilizar se debe de tener
en cuenda que deben de tener una cantidad de tiempo y recurso
humano, para realizar el diseo independiente de la lgica y
desarrollo del proyecto.

BIBLIOGRAFA

Esther Labrada, M., & Cristina Salgado, C. (Enero 2013). Diseo web
adaptivo o responsivo. Tecnologas de Informacin y Comunicacin

-UNAM.
Marcote, E. (2010). Responsive Web Design. A List Apart, 10.