UNIVERSIDAD SAN PEDRO

FACULTAD DE INGENIERA
ESCUELA ACADMICO PROFESIONAL DE
INGENIERA
INFORMTICA Y DE SISTEMAS

BARRETO LAVADO NAPOLEON

WEB ADAPTATIVA
Tras analizar los problemas de las aplicaciones actuales a la hora de permitir
que sus usuarios las adapten en funcin de sus necesidades diarias, se presentan
una serie de recomendaciones de diseo orientadas a aumentar este potencial
adaptativo.

Chimbote - 2014

EDICATORIA
A mis Padres que me vieron nacer y por ser la base de mi formacin, que
con su esfuerzo me ensearon, sus buenas costumbres impartindome
valores que hoy me sirven para adquirir conocimientos y comprender todo
lo que hacen por verme a un tiempo no muy lejano convertido en un
profesional competitivo y apto dentro del marco de exigencias que el
mercado requiere.

A mis hermanos por prestarme

atencin en mis inquietudes de
estudiante y brindarme su apoyo
moral de incentivarme a buscar
soluciones concretas y verdicas.

A DIOS, por iluminarme con su

infinito amor lleno de esperanza,
confianza y la magnificencia con
la que resplandece su gloria, y
cuidarme en cualquier lugar, en
cualquier
momento
y
circunstancia.

AGRADECIMIENTO
Al Seor Jesucristo, mi Seor y
Dios, por ensearme el camino
correcto de la vida, guindome y
fortalecindome cada da con su
Santo Espritu.

A mis Padres, Hermanos y

Hermanas por creer y confiar
siempre en m, apoyndome en
todas las decisiones que he
tomado en la vida con una visin
de fortaleza.

A mis maestros, en especial al Ing.

Heber Gomes Hurtado por sus
consejos
y
por
compartir
desinteresadamente sus amplios
conocimientos y experiencia a mis
compaeros.

A mis compaeros y compaeras

de clases, por el apoyo y
motivacin que de ellos he
recibido.

RESUMEN
En este documento se hace una breve descripcin de los antecedentes, caractersticas y
beneficios de la tcnica del Diseo Web Adaptativo o Responsivo (Responsive Web Design,
en ingls). Su importancia se debe a que es un mtodo de produccin de sitios web,
orientado a la adaptacin de los contenidos en las diferentes reas de despliegue de los
navegadores y a las formas de interaccin en dispositivos porttiles. Identifica algunas
propiedades del medio en que se despliega la informacin: tamao, orientacin,
funcionalidad y caractersticas de interaccin para determinar el acomodo inmediato y
automatizado de los elementos; aprovechando las caractersticas esenciales del dispositivo.
Entre sus aspectos relevantes, se menciona la programacin y el diseo nico de los
contenidos, as como el apego a los principios de usabilidad en el sistema.
Palabras clave
: Diseo Web Adaptativo o Responsivo; usabilidad; dispositivos; proceso de modelado;
consulta de medios; cuadrcula flexible.

WEB ADAPTATIVA
INTRODUCCIN:
En las ltimas dcadas, el crecimiento y expansin de sistemas mviles y tabletas ha
impactado en diversas reas. Tal es el caso de la produccin de sitios en Internet que busca
mtodos de innovacin con soluciones efectivas para presentar los contenidos en
dispositivos porttiles, considerando su diversificacin y sus distintas formas de
interaccin.
Siendo la web un proveedor de informacin compleja y extensa, la idea de innovar para lo
nuevo se ha orientado a la creacin del
Diseo Web Adaptativo como una solucin a la presentacin del sitio en cualquier medio
porttil.
Las posibilidades y beneficios de este mtodo han sido aceptados y adoptados por una gran
mayora de desarrolladores de pginas. Trabajar con proporciones en lugar de pixeles, en
el posicionamiento de los componentes del sitio, marca un cambio sustantivo para su
despliegue en reas cambiantes o pantallas diversas

Antecedentes
Como un antecedente del Design Web Responsive, se encuentra la filosofa de Mejora
progresiva, establecida por Steven Champeon en 2003. Este planteamiento, promueve la
continua supervisin tecnolgica de los sitios siguiendo la dinmica de crecimiento de los
navegadores. Es decir, se promueve hacer mejoras tcnicas cada vez que se presenten
actualizaciones en los navegadores, garantizando que el sitio se mantenga tcnicamente a
la vanguardia. Con esta vigilancia continua, se aprovechan las posibilidades de las hojas de
estilo, o Cascading Style Sheets (CSS), y el sitio se mantiene preparado para la
implementacin de nuevos estndares.
En 2009, Ethan Marcone propone Fluid Grids. La propuesta complementa la produccin de
pginas con sistemas de estructuracin para el diseo de sitios mediante la aplicacin de
una serie de estilos en el archivo CSS, los cuales organizan los contenidos de una pgina. De
esta manera, los estilos establecen un contenedor dividido mediante guas verticales y
horizontales en los que se incorporan los elementos de diseo de la pgina, ofreciendo la
posibilidad de que los elementos puedan salir del marco que los contiene, para originar otro
tipo de sensaciones en la percepcin del usuario.
Luke Wroblewski, en 2009, propone Mobile First, concepto basado en el crecimiento
exponencial de los sistemas porttiles frente a las computadoras. Recomienda que el diseo
se oriente para ser desplegado en esos dispositivos, con el propsito de estar preparados al
inminente cambio de equipos grandes a equipos porttiles para la consulta de sitios.
Esta serie de reflexiones y propuestas son las que enmarcan el surgimiento, en 2010, del
Responsive Web Design de Ethan Marcotte. Quin, basndose a su vez en los principios de
Arquitecture Responsive, encuentra en el concepto: intercambio de informacin continuo y

constructivo, la nocin de que los espacios y quienes los habitan deben influenciarse
mutuamente.
Traducido al mbito de la tecnologa; se trata de que el diseo de los contenidos y su espacio
de presentacin se encuentren intrnsecamente vinculados

Fuente:
http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly201412-201412-map
Qu es Responsive Web Desing?
El Responsive Web Design (RWD) trata bsicamente de adaptar una web a cualquier tipo
de pantalla y dispositivo. Es decir, que no se nos descoloque la web en la pantalla de nuestra
tableta, Smartphone o bien resoluciones menos comunes de las pantallas del ordenador. La
web se adapta perfectamente a la pantalla facilitando su lectura y uso.
Parece algo lgico pero tiene mucho ms de funcionalidad en diseo de lo que muchos creen.
Y, adems de funcionalidad, es una necesidad ya que cada vez son ms los usuarios que
utilizan el mvil o la Tablet para navegar por internet.
Si eres usuario de estos dispositivos ya sabrs la lata que es no poder ver una web
correctamente porque sigue estando en un "formato" acorde con la pantalla de un
ordenador standard.
Cmo funciona el Responsive Web Design?
Es indispensable conocer los CSS Media Queries que nos permiten activar y desactivar
partes del CSS para que se adapte a la pantalla adecuada. Y, ojo! Slo funciona con los
navegadores modernos. Internet 6, 7 y 8 no lo soportan aunque puede haber soluciones con
el uso de Javascript.
La principal diferencia es que ya no jugamos con pxeles sino con porcentajes abandonando
as los anchos fijos de una web. El Responsive Web Design prefiere el concepto de
proporcin. As, cuando veamos el mismo contenido en la pantalla de nuestro mvil todos
los elementos se harn proporcionalmente ms pequeos. Eso s, sern los elementos que
nosotros escojamos.

Por ejemplo, si en una web tenemos un men lateral con esta tcnica se puede crear un
men desplegable arriba en la pantalla de los mviles. Disponemos as del mismo contenido
adaptado a una pantalla de 480 pxeles. Tambin podemos desprendernos de contenidos
que pueden ser demasiado cargantes dentro del mvil: widgets, iconos redes sociales
Nosotros manejamos qu queremos mostrar y qu no en cada tipo de dispositivo.
En el sector esta flexibilidad en los elementos se le denomina Breakpoints, es decir,
los puntos donde quieres romper el contenido de la web para adaptarlo a las distintas
resoluciones de pantallas.
Descripcin del Diseo Web Adaptativo
Se describe como una tcnica de diseo y desarrollo web que, mediante el uso de
estructuras e imgenes fluidas, as como de media-queries en la hoja de estilo CSS, consigue
adaptar el sitio web al entorno del usuario.
Toma las mejores prcticas para aplicarlas en la construccin de sitios, logrando buena
calidad en las aplicaciones. La idea es que un solo sitio sea no solo adaptable a las
caractersticas del recurso, sino que llegue a ser adaptativo.
El diseo de la informacin es variable y relativo, denominado fluido. La composicin se
presenta en forma dinmica, puesto que cada elemento se ajusta a las condiciones tcnicas
de despliegue. Para hacer un diseo web adaptativo se debe cumplir con los siguientes
aspectos:
1) Diseo fluido con cuadrculas flexibles o fluid grids.
2) Media Queries.
3) Imgenes, objetos, videos o medios similares flexibles.
4) Fuentes tipogrficas con valores relativos.

Diseo web adaptativo y personalizado

En base al diseo web adaptativo creamos

web con portfolios para profesionales.
Sitios institucionales para Pymes o
grandes empresas. Desarrollos para clientes que necesiten vender sus productos online.
En definitiva, el diseo web adaptativo ofrece solo ventajas. El diseo web adaptativo le
permite una correcta visualizacin de su sitio web en todos los dispositivos ya que todos los
elementos como textos, columnas, imgenes y tablas se adaptan y reajustan
automticamente.
Algo que hay que entender del diseo web adaptativo es que este reajuste de elementos
se realiza sin perder tamao, es decir, un prrafo o una imagen se adapta a la nueva
resolucin, pero no se achica o se hace ilegible, que es eso lo que comnmente se cree del
diseo web adaptativo.

Supongamos a modo de ejemplo que un sitio web tiene un men de navegacin horizontal.
Si el sitio web no fue desarrollado siguiendo los estndares del diseo web adaptativo, al
visualizarse en un dispositivo mvil ese men o bien desaparece de pantalla o veremos ese
men con los elementos (textos e conos) extremadamente chicos. El diseo web
adaptativo, y esto es muy importante, no achica los elementos del sitio. El diseo web
adaptativo vuelve a adaptar el contenido a la nueva resolucin. En el caso mencionado a
modo de ejemplo del men, el diseo web adaptativo re-adaptara el men horizontal y lo
convertira en men vertical, con conos y textos grandes, para que el usuario pueda ver y
seleccionar el contenido correctamente
Diseo de adaptativo "Responsive" en el Futuro
Tenga en cuenta, el diseo de Web Sites adaptativos se encuentra todava en su infancia, y
el futuro parece muy brillante. "Hay un montn de cosas interesantes que vienen con el
diseo responsive", dice Resnick. "Ya se est utilizando elementos de diseo responsive en
las aplicaciones web, y los desarrolladores estn explorando nuevas reas de diseo al
probar un gran nmero de integraciones que ya estn disponibles."
Resnick predice, "A medida que Internet se transforma ms en una plataforma de servicios
e interfaces de usuario que se vinculan como servicios juntos, aprovechando esta tecnologa
en el futuro permitir a las empresas integrar una gran cantidad de servicios de back-end,
tales como , Twitter, Salesforce.com y Amazon Web Services, y luego presentar los datos
integrados publicados en la capa front-end parte publica en un diseo de aplicacin que
se ve muy bien en todos los dispositivos sin necesidad de programacin personalizada
necesaria para cada dispositivo o tamao de pantalla. Ya no son costosas las soluciones de
back-end Administrativas necesarios para integrar sistemas heredados con socios de
negocios.
Costo del Responsive Web Design?
Parece un trabajo que requiere un coste econmico alto, pero nada de eso. Con el
Responsive Web Design creamos diferentes formatos a partir de una misma web y ya no
es necesario crear diferentes sites adaptadas a cada dispositivo. Requiere conocimientos
avanzados en diseo pero que evita muchos problemas de cara al presente tecnolgico:
smartphones y tabletas.

Con el Resposive Web Design no necesitamos actualizar por partida doble (o triple)
el contenido de nuestra web. Con que lo actualicemos una vez ya se adapta a las
distintas pantallas.
La conversin aumenta considerablemente ya que no ponemos barreras al usuario
para acceder a nuestra web y nutrirse de los contenidos que le ofrecemos.
Y, lo ms importante, la comodidad que le proporcionamos al usuario no tiene
precio. Agradecer enormemente habernos tomado la molestia de adaptar la web a
estos formatos que generar un impacto positivo como empresa o proyecto que
apuesta por la innovacin tecnolgica

Los 3 pilares del Responsive Web Design

1. Mostrar texto e imgenes de manera legible en cualquier resolucin de pantalla
2. No mostrar una barra de desplazamiento horizontal, sea cual sea el tamao de la
ventana
3. Dejar siempre espacio para hacer click en los enlaces o botones, el espacio debe ser
lo suficientemente cmodo para pinchar con un dedo pulgar.

A nivel de desarrollo se necesitan 3 cosas esenciales para obtener un diseo adaptativo:

1. Fluid grid: Utiliza porcentajes para definir los anchos de algn elemento
HTML en lugar de pxeles con un tamao fijo. Por ejemplo, un DIV podra
tener un ancho de 650px en el diseo de ancho fijo, mientras que sera
etiquetado como 90% de ancho en el CSS (hoja de estilos) de un diseo fluido.

2. Media query: La nueva versin de hojas de estilo (CSS3) permite consultas

personalizadas al navegador y obtener as ancho mnimo y mximo que
permite. Por ejemplo, una consulta que responde con un mximo de ancho de
450px estara dirigida a los navegadores mviles solamente y serviramos la
hoja de estilos correspondiente. Abajo dejo un ejemplo del cdigo.
<link
href="css/phone.css"
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 450px)">

3. Imgenes adaptables: De naturaleza similar al fluid grid, las imgenes

sensibles no tienen anchos fijos, sino que tienen un mximo de ancho (por lo
general marcado al 100% cuando se muestra en un PC). Esto permite que las
imgenes se reduzcan para ajustarse al ancho de la pantalla mximo que
permita el navegador.
Web adaptativa desde el servidor
Esta alternativa es muy usada, gran parte de los mayores CMS tienen la opcin de dar desde
el servidor una versin totalmente distinta adaptada para mviles, que tiene un cdigo
distinto en un PC y en la web.
Esta tcnica consiste en detectar el dispositivo que se usa, normalmente con el nombre del
agente del navegador (en el puede aparecer por ejemplo: "Android" o "iPhone") y sabiendo
si ests en un mvil se envia una web u otra distinta. Por poner un ejemplo si entris en
Genbeta Dev (un blog de programacin) con el PC, un tablet o un mvil os encontraris tres
versiones distintas de la web.
Para una web muy simple no tiene sentido llevar a cabo el esfuerzo para hacer la adaptacin
para PC y mvil, y por ello es mejor el Responsive Design, pero para un blog o web compleja
no es mala idea hacer una adaptacin para distintos tipos de dispositivo, aunque si se usa
un gestor de contenidos como Wordpress o Joomla probablemente encontraremos
complementos que nos lo harn solo.
El diseo web adaptativo o adaptable (en ingls, Responsive Web Design) es una tcnica de
diseo y desarrollo web donde esta se adapte a la resolucin de la pantalla o al dispositivo
que est visitando su pgina web de manera inteligente.
El Responsive Web Design ayuda a que su pgina se adapte a los tamaos de casi cualquier
pantalla, como por ejemplo, las de los Celulares, SmartPhones, Tablets, Laptops, Notebook
o PC de escritorios. Prcticamente a cualquier dispositivo que pueda navegar en internet,
Cabe mencionar que para las personas que tiene un pgina web espesificamente para
dispositivos mviles, estn obligados a incorporar esta tecnologa.

Un dato impresionante es que en Mxico existen 99 millones de celulares, lo que significa

una penetracin que todava no alcanza el 100% de la poblacin pero del total de celulares
que existen en Mxico, tan slo menos de 16% de ellos se conectan a Internet y se espera
que para 2015 esa cantidad se acerque a 40%, revel el estudio de Yahoo. As que le
pregunto, esta preparado?

Su web visible para mltiples anchos de pantalla.

El diseo de pginas web adaptativo ( 'responsive web design' o multidispositivo) permite
que su web se "adapte" a la pantalla del dispositivo del usuario que le visita, no importando
que sea desde un telfono mvil smartphone Android o iPhone, phablet, tablet Android o
iPad, porttil o desde un ordenador. Tendr una web visible para mltiples anchos de
pantalla.
Cmo funciona
Programaremos una web cuyo contenido y estructura se adaptar al tamao de las pantallas
de los dispositivos que utilicen los usuarios que accedan a su web.
El visitante a la web no tiene que hacer nada, la web se adaptar a l y al dispositivo que
utilice en cada momento, as podr concentrase en el contenido de su web y tendr una
experiencia mucho ms agradable.
Seguramente muchos usuarios entrarn en su web alternativamente desde ambas
plataformas: mvil, tablet, porttil y ordenadores de sobremesa.
Beneficios del Diseo Web Adaptativo
La utilizacin de un diseo web adaptativo trae consigo varios beneficios, tanto para los
usuarios como para los desarrolladores, entre los que destacan:

Reduccin de costos: Se logra gracias a que el cdigo es menor y no se requieren

versiones distintas para su despliegue en cada uno de los dispositivos conocidos.

Eficiencia en la actualizacin: Se utiliza una sola plantilla para la produccin de la

pgina, por lo que resulta eficiente la modificacin.

Mejora en la usabilidad: La legibilidad y caractersticas de uso del sitio se ajustan

automticamente en cada dispositivo.

Capacidad de adaptacin de la interfaz: Al ser un sitio con fluidez, la informacin

es jerarquizada para presentar lo esencial de los contenidos para la consulta del
usuario.

Utilizacin de imgenes, videos y otros medios: Los recursos se redimensionan

proporcionalmente, conservando una calidad ptima en pantalla.

Tamao relativo: Al estar basado en proporciones, es compatible con diferentes

resoluciones y distintos dispositivos.

nica direccin del sitio web (URL): La optimizacin de motores de bsqueda

mejora, al aparecer en los resultados de bsqueda una sola URL.

Conclusiones
En los ltimos aos la utilizacin de dispositivos mviles con navegadores incorporados ha
tenido un gran auge, y con ello, se han incrementado tambin el nmero de internautas.
Cabe decir que la cifra de usuarios de Internet fue de alrededor de 40.6 millones en el 2011,
comparado con el 2010 representa un aumento del 14%. De igual forma, el uso de telfonos
inteligentes para conectarse a Internet se duplic en 2011 con respecto al 2010.
Para este creciente sector, el diseo web adaptativo no solo ofrece soluciones, sino que abre
un panorama de investigacin tecnolgica de gran relevancia para los desarrolladores y
para los sistemas porttiles. A medida que los estndares de HTML y CSS vayan
evolucionando, darn origen a la creacin de elementos reutilizables que minimicen el
tiempo de desarrollo, para dar cobertura a la variedad de navegadores y dispositivos
actuales y futuros. As mismo, el concepto de las interfaces de usuario se reconfigurar, lo
que conllevara a tomar con mayor inters el discurso de los medios

Referencias
http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/
http://www.templatemonster.com/infographics/responsive-web-design-interactiveguide.php
http://www.emenia.es/etiqueta/diseno-web-adaptativo/
http://www.vox-web.com.ar/paginas-web-adaptativas/
http://webadaptativo.blogspot.com/
http://104cubes.com/web-adaptativa-responsive-design/