Repblica Dominicana

Universidad Autnoma de Santo Domingo

UASD Centro Mao
Facultad de Ciencias
Escuela de Informtica

DESARROLLO DE PGINAS WEB PARA EL ACCESO A LA

INFORMACION DESDE CUALQUIER DISPOSITIVO DE
NAVEGACION (CASO: DISEO DE PAGINA WEB DE LA
ASOCIACION DE PRODUCTORES DE BANANO LAS MERCEDES).
Curso optativo equivalente a la tesis de grado para optar por el ttulo de
Licenciado en Informtica.
Presentado por:
Miguel ngel Peralta Polanco ----------- BC-4048
Eli Leandro Gonzlez Cruz -------------- DB-1786
Edwin Antonio Guzmn Rodrguez - 100047785
Asesor:
Juan Miguel Liriano, MES, MSI.
Coordinador:
Juan Miguel Liriano Duran, MES, MSI.

Mao, Valverde
Agosto, 2016

Los conceptos emitidos en la

presente tesis son de la
exclusiva responsabilidad de
los sustentantes

TTULO:
Desarrollo de Pginas Web para el acceso a la
informacin desde cualquier dispositivo de navegacin
(caso: Diseo de pgina web de la Asociacin de
Productores de Banano las Mercedes).

CAPITULO I
ASPECTOS GENERALES

1.1 PLANTEAMIENTO DEL PROBLEMA

La pgina web de una marca o empresa es la representacin de la

misma. Hoy en da es imprescindible tener presencia en internet para
existir, y la pgina web es la muestra de lo que una empresa hace y
cmo lo hace. Por eso es muy importante tener un sitio web profesional
ajustado a las necesidades, interactivo y que sea adaptado a los
distintos dispositivos electrnicos de navegacin. En la actualidad
existen aproximadamente ms de 5000 millones de dispositivos
conectados a la web1, tales como Smartphone, tabletas, libros
electrnicos, televisores, videoconsolas, etc., y a medida que pasa el
tiempo va creciendo la demanda del acceso a la informacin en la red.
Una pgina web se define como un documento electrnico el cual
contiene informacin textual, visual y/o sonora que se encuentra alojado
en un servidor y puede ser accesible mediante el uso de navegadores.
Una pgina web forma parte de una coleccin de otras pginas webs,
dando lugar al denominado sitio web, el cual se encuentra identificado
bajo el nombre de un dominio2.
Actualmente existen muchas empresas que utilizan esta herramienta,
pero son muy pocas las que realmente obtienen beneficios, y todo esto
se debe al mal uso de la publicidad, marketing o por qu no, el diseo de
la misma pgina.
Estamos en un mundo mvil, y cada vez ms accedemos a internet
desde dispositivos variados, con necesidades y en situaciones
diferentes. As como los diseadores sobre el papel tenan el control
absoluto de lo que se presentaba estticamente, fijo e impreso; al
disear para web se encuentran con multitud de resolucin de pantallas,
con navegadores diferentes y con formas de interactuar que van desde
un teclado, un mouse, un stylus (Lpiz ptico) o los dedos. Como dice
John Allsop, desarrollador: Debemos entender y adoptar la idea de que
la web no tiene los mismos lmites, y debemos disear con esta
flexibilidad; pero primero debemos aceptar la marea y el flujo de las
cosas.
En consecuencia al avance de la gran variedad de tipos de tecnologas
que se integraban para navegar en internet, les surge a los diseadores
web la necesidad de buscar alternativas para adaptar las interfaces de
usuario a la pluralidad de tamaos de pantallas y resoluciones de los
diferentes tipos de terminales.
1 Intel, Visual.ly, [En lnea]. Disponible en: http://visual.ly/internet-

things
2 http://www.quees.info/que-es-una-pagina-web.html

Para el ao 2000, los diseadores en busca de una solucin para dicho

problema comenzaron a crear pginas web estndar en base a la
resolucin de pantalla de los dispositivos, no siendo esto una solucin
real ni conveniente para una empresa ya que para que esta tcnica de
diseo fuera funcional haba que disear la misma web para cada tipo
de dispositivo, haciendo la misma ms costosa y era el usuario quien
deba acoplarse al diseo para el cual el contenido estaba adaptado.
El antes y despus queda establecido en el ao 2007 con la aparicin
del trmino Smartphone y los sistemas diseados para estos, los cuales
tenan una alta capacidad para navegar en internet. A tal
acontecimiento los diseadores trataron de buscar una alternativa para
dar respuesta a las diversas plataformas y las que se presentaran en el
futuro, dando como solucin la creacin de dos dominios, el cual
consista en disear un sitio web para versiones mviles y uno para
equipos de escritorio detectando dicho sitio el tipo de dispositivo que se
conectaba. Esto no resulto ser una solucin factible ya que an se tiene
la problemtica de disear una pgina web por tipo de dispositivo de
navegacin.
Una pgina web no optimizada ofrece una mala experiencia de uso:
Elementos fuera del campo de visin, necesidad de hacer zoom para ver
objetos pequeos, ampliar el texto, etc.). En definitiva, si muestras
contenidos no adaptables al contexto, a las pantallas o resoluciones
desde las que se accede, la efectividad de tu portal cae en picada.
Muchas empresas estn tomando la decisin de reestructurar su TI
(Tecnologa de la informacin), ya que se estn dando cuenta de todos
los cambios positivos que esto implica para su negocio. Es muy
importante que las empresas logren identificar cundo es necesario
cambiar sus procesos de informacin, siempre y cuando estos no estn
funcionando correctamente.
En vista de lo planteado, el diseo de una pgina web que pueda ser
accesible desde cualquier dispositivo de navegacin, cada vez ms se
vuelve imprescindible, ya que el uso de los dispositivos mviles es
mayor y sigue en aumento, en consecuencia la navegacin en la red
usando los mismos va en aumento, y se hace ms comn; a la vez de
que les da a los diseadores de pginas web la solucin a una
problemtica para mejorar la experiencia del usuario a tener mejor y
ms fcil acceso a la informacin.
Con el uso de ese concepto de diseo se pretende disear la pgina web
de la empresa ASOCIACION DE PRODUCTORES DE BANANO LAS
MERCEDES, y as hacer que dicho sistema Web se ajuste a un nuevo
concepto de diseo, el cual har que la informacin de la empresa sea
accesible con respecto los usuarios y a los clientes, desde los diferentes

dispositivos de navegacin que existen en la actualidad, sin la necesidad

de que el contenido de la pgina se pierda.
Debido a la situacin planteada, en la investigacin se da respuestas a
las siguientes interrogantes:
1. Cules principios de diseo web hacen posible una pgina web
con acceso a la informacin desde cualquier dispositivo de
navegacin?
2. Qu beneficio le proporciona a las empresas una pgina web
accesible desde cualquier dispositivo de navegacin?
3. Cules son las ventajas y desventajas que tiene la
implementacin de una pgina web accesible desde cualquier
dispositivo de navegacin en la ASOCIACION DE PRODUCTORES DE
BANANOS LAS MERCEDES?
Estas y otras interrogantes no menos importantes son respondidas
durante el desarrollo de la presente investigacin.

1.2 JUSTIFICACIN E IMPORTANCIA

Actualmente es de mucha importancia que las empresas ofrezcan
servicio en lnea mediante una pgina Web, ya que esto es una forma de
exposicin para obtener nuevos clientes, si se utilizan estrategias
adecuadas de marketing.
El comercio electrnico y la comunicacin inalmbrica, son tambin
parte de esta tecnologa con la que actualmente muchas empresas
suelen ofrecer sus productos y/o servicios, permitiendo a stas obtener
grandes oportunidades de crecimiento, ya que los mismos estarn a la
vista de sus clientes durante todos los das del ao, a la vez que les
permite reducir sus costos de manera significativa, adems de que hoy
en da la mayor parte de dicho comercio se realiza a travs de medios
inalmbricos.
Esta forma de desarrollo de pginas web mejora la experiencia del
usuario, viendo la web de la mejor manera posible para el dispositivo
desde el cual se acceda, a la vez que reduce los costos de creacin y
mantenimiento, ya que no es necesario desarrollar aplicaciones para
distintas versiones mviles, permitiendo que al hacer una bsqueda
aparezca una URL nica en los resultados, por lo que se ahorran
redirecciones y posibles fallos.
Tambin permite la correcta visualizacin y navegacin en cualquier
dispositivo. Esto no significa simplemente que la pgina pueda ser vista
en telfonos mviles, sino que ser posible navegar con comodidad (sin
tener que ampliar el tamao para leer, ni hacer scroll (hacia un lado y a
otro) y que la funcionalidad ser la misma que en la versin de
escritorio.
Mejora la experiencia del usuario, sobre todo de aquellos que acceden
con pantallas de escasa resolucin, telfonos mviles o tabletas. La
facilidad de navegacin, el acceso fcil a los contenidos, y la usabilidad

de una web, son aspectos claves para que el usuario se sienta cmodo,
encuentre la informacin que busca, vuelva y convierta su visita en una
compra.
Hace ms sencillo el mantenimiento, ya que solamente hay una web y
una nica plantilla y favorece el posicionamiento SEO (tcnicas que
buscan que una pgina web aparezca en las primeras posiciones de los
resultados en buscadores). Google puede descubrir mejor tu contenido.
Un punto importante que hay que sealar es que, el adquirir esta
herramienta, ocasionalmente puede resultar costosa, pero puede
otorgarle grandes beneficios a las organizaciones, adems de que las
pone en competencia directa en el mercado, ya que muchas de las
medianas y grandes empresas que estn teniendo xito, es debido al
uso adecuado y actualizacin constante de la tecnologa.

1.3 OBJETIVOS:
1.3.1 GENERAL:
Desarrollar pginas web para el acceso a la informacin desde
cualquier dispositivo de navegacin.

1.3.2 ESPECFICOS:
1. Identificar los diferentes tipos de dispositivos de navegacin web.
2. Identificar los principios bajo los cuales se debe estructurar una
pgina web.
3. Identificar las ventajas y desventajas que representa la
implementacin de una pgina web que se ajuste a cualquier
dispositivo de navegacin.
4. Implementar el diseo web que sea accesible desde cualquier
dispositivo de navegacin en la pgina web de la ASOCIACION DE
PRODUCTORES DE BANANOS LAS MERCEDES.

1.4 ANTECEDENTES:
En el trabajo de John Allsopp (2000) titulado A Dao of Web Design (El
Camino del Diseo Web) sobre las dificultades de controlar el diseo
cuando trabajamos en un medio como la web, podemos ver que los
diferentes tamaos de pantalla y capacidades de los dispositivos, hacen
que no nos podamos enfrentar a un proyecto de diseo de este tipo con
las mismas concepciones con las que nos enfrentbamos a un proyecto
cuya finalidad era la impresin. Ya no tenemos el control del tamao, los
colores o las tipografas. Diseando para la web tenemos la necesidad
de adaptarnos. Se empezaban a trabajar los conceptos que culminaran
en el diseo web adaptativo.
En el ao 2008 el consorcio W3C en su recomendacin Mobile Web Best
Practices (Buenas Prcticas en la Web Mvil) definieron el concepto
OneWeb (Una Web), que se basa en la idea de realizar un diseo web
para todos y accesible desde cualquier dispositivo, buscando que la
experiencia del usuario se enriquezca.
Ethan Marcotte (2009), public un artculo sobre diseo web con rejillas,
en
la
prestigiosa
revista
digital
alistapart.com
(http://alistapart.com/article/responsive-web-design o traduccin de la
misma al espaol http://xn--diseowebresponsive-q0b.org/). Este artculo
define el concepto de diseo web fluido con exactitud, como solucin
para adaptar a la pantalla de cada dispositivo la maquetacin de una

pgina web. Podramos decir que esta filosofa de diseo es uno de los
pasos previos al diseo web adaptativo o Responsive Web Design.
En el 2011, Jeremy Keith, a travs de dos conferencias (One Web y
There Is No Mobile Web; en espaol Una Web y No hay Ninguna
Web Mvil), plantea el diseo adaptativo como solucin a los errores
cometidos hasta el momento en cuanto a la concepcin del diseo web.
Hemos de tener claro, cuando diseamos una pgina web, que no lo
estamos haciendo para un dispositivo determinado; no hay una web
para un ordenador de escritorio o una web para un dispositivo mvil.
Existe un nico contenido, una sola web sobre la que s tenemos que
trabajar para adecuar su usabilidad, adaptndola a las caractersticas de
cada dispositivo.
En ese mismo ao (2011), el Boston Globe, con el diseo de su pgina
web adaptable, caus una gran sensacin en el mundo del diseo web.
Fue el primer gran medio de comunicacin que apostaba por este tipo
de solucin y demostr su utilidad, independientemente del tipo de sitio
que se estuviese diseando. Su perfecta realizacin y cuidado diseo,
hizo ms que la labor evangelizadora de los diseadores de vanguardia.
En el 2012, Miguel ngel lvarez, en su conferencia sobre El Diseo
Web Para Dispositivos Mviles, muestra cules son las corrientes de
diseo ms actuales que nos permiten encarar un desarrollo que sea
compatible con la web en movilidad. Propone hacer sitios web que se
ven correctamente en todos los dispositivos y ordenadores de escritorio.

1.5 OPERACIONALIZACIN DE LAS VARIABLES

OBJETIVO GENERAL: Demostrar la importancia del desarrollo de pginas
web para el acceso a la informacin desde cualquier dispositivo de
navegacin.
Objetivos
especficos
Identificar
los
diferentes
tipos de
dispositivos
de
navegacin
web.

Variables
Dispositivo
de
navegacin
web

Indicadores

Definicin

Dispositivos de
navegacin:
Escritorio.
Mvil.
Tableta.

Dispositivo de
navegacin: Tipos de
computadora de
tamaos diversos, con
capacidades de
procesamiento,
con conexin a
Internet ,
con memoria,
diseado
especficamente para

una funcin, pero que

pueden llevar a cabo
otras funciones ms
generales.

Identificar
los
principios
bajo los
cuales se
debe
estructurar
una pgina
web.

Identificar
las ventajas
y
desventajas
que
representa
la
implementa
cin de una
pgina web
que se
ajuste a
cualquier
dispositivo
de
navegacin.
Implementar
el diseo
web que sea
accesible
desde
cualquier
dispositivo
de
navegacin
en la pgina
web de la
ASOCIACION

Principios de
diseo web.

Principios de
diseo web:
Usabilidad
.
Esttica.
Balance.
Contraste.
nfasis.
Repeticin
o ritmo.
Proximida
do
unidad.

Ventaja: condicin
favorable que algo o
alguien tiene.

Ventajas.
Desventajas.

Ventajas:
Comparati
va.
Competiti
va.
Desventajas:
Comparati
va.
Competiti
va.

Marco lgico.

Implementacin:
instalacin de una
aplicacin informtica,
realizacin o la
ejecucin de un plan,
idea, modelo
cientfico, diseo,
especificacin,
estndar, algoritmo o
poltica

Implementa
cin de la
pgina web.

Principios de diseo
web: Serie de tcnicas
destinadas a hacer al
sitio til y atractivo a
la vez.

Desventaja:
Circunstancia que
hace que una persona
o cosa sea peor o est
en peor situacin que
otras.

DE
PRODUCTOR
ES DE
BANANOS
LAS
MERCEDES.