FRAGMENTADOR AUTOMÁTICO DE PÁGINAS WEB PARA SU CORRECTA VISUALIZACIÓN EN
DISPOSITIVOS MÓVILES
AUTORES: Juan Carlos Olivares Rojas, Ignacio Aguilar Magaña
DIRECCIÓN: Instituto Tecnológico de Morelia, Departamento de Sistemas y Computación
Email: jcolivares@itmorelia.edu.mx, iaguilar@itmorelia.edu.mx
INTRODUCCIÓN
En muchos dispositivos móviles sobre todo
los de gama media y baja, al ser dispositivos
económicos no poseen de muchas
característcas de hardware tales como CPUs
veloces, aceleradores de gráficas, memoria
RAM y ROM; por este motivo, el visualizar
páginas Web a través de estos dispositivos
se vuelve muy complicado. Por esta razón se
hace necesario de un mecanismo que
permita mejorar la visualización de páginas
web en dichos dispositivos a través de dividir
las páginas en entidades más pequeñas
completamente visualizables.
ANTECEDENTES
La Web es el servicio más utilizado en la
Internet. Desde su creación en 1991 ha
estado en continuo cambio y proceso de
mejora.
Muchos autores se han enfocado a tratar de
enfocar en cubrir algunos aspectos negativos
de lo que es la Web sin tener mucho éxito
dado que han tratado de solucionar los
problemas desde sus efectos no desde sus
causas. Las causas por las cuales muchos
de estos trabajos de investigación han
fracasado se debe a que no han solucionado
el problema estructural que pueden presentar
las páginas Web en su construcción.
Alguno de los problemas de las aplicaciones
Web se han solucionado gracias a que las
redes de computadoras cada vez son más
rápidas y ubicuas, lo que permite el manejo
de aplicaciones más ricas e interactivas.
Uno de los problemas que presenta la Web
es que se encuentra actualmente
fragmentada. Ya que para lograr que una
aplicación Web sea visualizada desde
cualquier dispositivo se necesita tener un
sitio Web especialmente diseñado para ello.
Aunque muchos de los dispositivos más
modernos ya tienen capacidades más
avanzadas que les permiten ver los recursos
Web como si fueran cualquier PC aún se
presenta el problema del scrolling, donde el
usuario tiene que recorrer hacia todas
direcciones su pantalla con el objetivo de
visualizar el recurso Web de forma completa.
METODOLOGÍA
Dentro de la línea de investigación de
Ingeniería de Software del Departamento de
Sistemas y Computación del Instituto
Tecnológico de Morelia se cuenta con un
prototipo denominado ReWeb perteneciente
a un proyecto de investigación denominado
Refactorización de Aplicaciones Web
(ReWeb). El primer paso fue adentrándonos
al proyecto, leyendo bibliografía relacionada
al proyecto. Se hicieron varias pruebas con el
prototipo para saber donde agregar nuestra
nueva funcionalidad. La nueva funcionalidad
se agregó en forma dinámica a través de
tecnología Ajax.
ESTADO DEL ARTE
A continuación se muestran las principales
herramientas Web que existen para visualizar
sitios Web de forma fragmentada y con
metadatos:
Método de Visualización Minimap[1]
Método en el que se basaron los
navegadores de los dispositivos Nokia S60,
esto por la preferencia marcada hacia dicho
método de acuerdo a los resultados del
estudio realizado por Virpi Roto, Andrei
Popescu, Antti Koivisto y Elina Vartiaimen
para Nokia en Abril del 2006.
Dicho método se desarrolló con el fin de
alcanzar los siguientes requerimientos:
1. Mostrar más contenido en la pantalla.
2. Eliminar el scrolling horizontal al leer una
columna de texto.
3. Proporcionar suficiente información de
contexto para proporcionar una idea de la
estructura de la página así como comunicar
la posición actual dentro de la página.
Dichos requerimientos se logran a través de
dos procesos: escalamiento de layout y
overview . En el escalamiento de layout se
modifica el CSS, específicamente el tamaño
del texto de acuerdo al contenido del resto de
la página y limitando el ancho máximo del
texto al ancho del puerto de vista del
navegador. En el overview se presenta una
versión reducida de la página web, indicando
la parte en la que se encuentra el usuario
actualmente.
CMo (Prototipo de navegación orientado al
contexto para dispositivos móviles)[2]
De acuerdo al sistema desarrollado por
Yevgen Borodin, Jalal Mahmud e I.V.
Ramakrishnan en el departamento de
computación de la universidad Stony Brook,
el cual segmenta las páginas web en clusters
semánticos de información, esto es, dividir la
página en base a la relevancia de los
segmentos que la conforman, mostrando
primero los de mayor relevancia de uno en
uno. El prototipo se encuentra como un
servlet de Java en el servidor Apache
Tomcat, actuando como un proxy entre los
usuarios móviles y el internet.
Mejora de usabilidad WAP[3]
En el trabajo presentado por George
Buchanan, Sarah Farrant, Matt Jones, Harold
Thimbleby de la universidad Middlesex, así
como Gary Marsden de la Universidad de
Cape Town y Michael Pazzani, se presentan
tres maneras de mejorar la usabilidad,
evitando el scrolling vertical.
Para eliminar el scrolling vertical, únicamente
se muestran los caracteres que caben en la
pantalla, de manera que al mover el cursor a
la línea incompleta, los caracteres faltantes
se muestran, otro método es mostrando las
líneas completas, siendo necesario
desplazarse verticalmente para visualizar el
contenido de la columna. La tercera y más
óptima manera consiste en la segmentación
de la columna a mostrar, optando por la
paginación; siendo necesario ir de página en
página para ver el contenido de la columna
en cuestión.
Uso del Análisis de Enlaces para mejorar el
Layout en Dispositivos Móviles[4]
Xinyi Yin y Wee Sun Lee propusieron un
algoritmo de clasificación, el cual consiste en
la construcción de un grafo de la página web
deseada, de manera que las secciones que
no son vistas regularmente por la mayoría de
los usuarios se eliminan, mostrando así una
versión optimizada y más concreta de la
página, conteniendo únicamente los
elementos más populares de la misma, por
así decirlo.
Estudio Digital Multidisciplinar Scroll[5]
Scroll es un estudio digital multidisciplinar
cuyo giro son proyectos de ingeniería web,
consultoría SEO y diseño gráfico, esta
empresa se cuenta como una opción
adicional a los algoritmos y prototipos
mencionados anteriormente, porque como
parte de sus servicios ofrecen la optimización
de sitios web para móviles. Esto dado a que
están conscientes de que el número de
usuarios que ingresan a los sitios a través de
una Tablet o Smartphone llegan a ser igual o
incluso a superar al número de usuarios que
lo hacen a través de una pc o laptop; de esta
manera los sitios web únicamente se adaptan
al dispositivo en el que se visualizan, claro
todo esto por un costo determinado.
Gurenet Soluciones Tecnológicas [6]
Empresa española creada en 2002 con el
propósito de ofrecer servicios como: Internet
(Diseño de páginas web, marketing y
publicidad, hosting y dominios), diseño
gráfico (Creación de imagen corporativa) y
Multimedia (Duplicación de CDs y DVDs).
Dentro del diseño de páginas web ofrece el
servicio de adaptar una página web a móvil y
tablets, con la posibilidad de solicitar un
presupuesto sin compromiso alguno.
JQuery Mobile [7]
Framework de javascript destinado a la
creación de sitios web optimizados para
dispositivos móviles, utilizando etiquetas
HTML con atributos definidos por el
framework que al ser leídos por JQuery se
toman como metadatos para la creación de la ap miza pági muest págin
interfaz de usuario. do nas ra tu as
de ubicac con
Onbile [8] cont ión más
Es una plataforma en línea que permite crear enid dentro conte
un website móvil, proporcionando también el o de la nido,
hosting. Ofrece servicio gratuito así como liger págin sea
otros planes con mayores capacidades de o a. texto
almacenamiento y optimización SEO como: *Adap o
paquete profesional por o el paquete e- ta las imág
commerce por 140 pesos. colum enes
nas result
de a
Mippin [9] texto nece
Es una herramienta en línea que permite al sario
crear aplicaciones web para cualquier ancho hacer
dispositivo que funcionan de manera nativa, de la zoom
esto, por un precio de 1283 pesos al año. pantal .
la del
A continuación se presentan las dispos
herramientas, agrupadas en tres categorías: itivo.
prototipos (corresponde prácticamente a CMo

 *Pres *No
algoritmos que permiten una visualización enta es un
óptima de una página web en un móvil), las proto
empresas (organizaciones que ofrecen como págin tipo
servicio la adaptación de una página web a as de
móvil a un costo determinado) y creación segm acce
desde cero (herramientas que permiten la entad so
creación de aplicaciones o sitios web con las as. públi
características adecuadas para su co.
visualización en dispositivos móviles). Usabil
mini  *Perm *Hoy
idad miza ite la en
Se revisan distintos aspectos, siendo uno WAP do visuali día
muy importante el del scrolling, dado que es zación no es
un problema al que se pretende dar solución óptim tan
en este proyecto. Aspectos adicionales son a de nece
las fortalezas y debilidades propias de cada págin sario,
herramienta así como la visibilidad que as en dado
proporcionan en un dispositivo móvil. pantal que
las los
∂ Prototipos peque Smar
ñas. tphon
e se
Text
o carac
teriza
Herra Scr Scrol visib Fortal Debili
n por
mient oll l le ezas dade
pose
as hori verti sin s
er
zont cal nec
panta
al esid
llas
ad
más
de
gran
zoo
des.
m
Análisi
mini  *Mues *No
Minim
mini *En *Te *En
s de miza tra mues et.
Enlac do una tra la Gure
mini  *Pres *Dad
es versió págin net miza enta o que
n a do una es
simplif comp visuali una
icada leta zació empr
de la por lo n esa
págin que óptim espa
a pued a del ñola,
basad e conte el
a en dejar nido. costo
la fuera por
inform la su
ación infor servic
más maci io
vista ón pued
por el que e ser
usuari busc eleva
o. a el do.
usuar
io.

∂ Creación desde cero

∂ Empresas
Visi
Visib Herra Scr Scro bilid Fortale Debili
Emp Scro Scroll ilida Fortal Debili mient oll ll ad zas dades
resa ll vertic d de ezas dade as hori verti de
s horiz al texto s zon cal text
ontal sin tal o
nece sin
sida nec
d de esid
zoo ad
m de
Scrol
mini  *Pres *Dad zoo
l miza enta o que m
Studi do una es JQuer
mini  *Comp *Dism
os visuali una y miza atible inuye
zació empr Mobil do con la
n esa e múltipl veloci
óptim espa es dad
a del ñola, platafor de
conte el mas. carga
nido, costo *Ligero de la
más por y págin
agrad su rápido. a.
able servic *Basad *Prop
para io o en orcion
la pued JQuery a un
vista e ser . aspec
que la eleva *No to
de do. requier visual
Guren e de estan
 otros dariza s
progra do. (andr
mas oid,
especi iphon
ales. e,
Onbil
mini  *Comp *Cost Wind
e miza atible o de ows
(webs do con $1680 mobil
ites) múltipl al e).
es año.
platafor
Eliminado
mas.  Cumple con el requisito
*Ancho
de
banda RESULTADOS
ilimitad
o. Se desarrolló un prototipo que permite
*Almac fraccionar las páginas Web en secciones a
enamie través del uso de enlaces y de la tecnología
nto de Ajax si está disponible en el navegador del
500MB dispositivo móvil.
*Soport
e. Entre las ventajas de fragmentar las páginas
*Costo Web en pequeños trozos se encuentran las
relativa siguientes:
mente ✓ Podemos ocultar los elementos
barato secundarios, menos necesarios y hacer que
de sean mostrados a solicitud del lector.
aproxi ✓ Ocultar elementos pesados de cargar
madam como son imágenes grandes videos, etc. y
ente mostrarlos solo a petición del lector.
$1680
✓ Hacer las páginas más reducidas
al año.
relativamente, de forma que sea más rápido
Mippi
mini  *Ofrece *Cost
deslizarse con el navegador hasta el final.
n miza un o de
✓ Dar la opción de ocultar secciones
(aplic do costo $1283
acion más al año innecesarias para el lector.
es) bajo de por ✓ Dar la opción de mostrar información
$1283 plataf adicional, solo al que esté interesado en
al año. ormas ellas.
*Aplica limita
ción das. ¿Cómo ocultar o mostrar una parte o área de
para *Cost una página?
Iphone o
y aproxi Para ocultar o mostrar una sección se utiliza
Androi mado la propiedad Style display. Puede ser usada
d así de mediante el estilo CSS o con Javascript.
como $12,9 Para definir si un elemento se muestra u
website 80 oculta en una página, se pueden usar varias
móvil. por propiedades, las más empleadas son las
aplica siguientes:
cione style.display = 'none'
s style.display = 'block'
nativa style.display = 'inline' (predeterminada)
La primera de ellas lo oculta y las dos
siguiente lo muestran ya sea en forma de
bloque (ocupando una línea completa) o
inline (permite contenido flotante a uno u otro
lado). Esta función se uso para ocultar el
texto las imágenes y los enlaces, usando DIV
ya que a estas etiquetas le podemos poner
un ID (identificador) con el cual llamaremos la
función de mostrar y ocultar.
Usamos este ejemplo donde el DIV tiene un
identificador denominado hidden con el cual
se conecta al script, asemos el uso un link
para hacer la referencia.

<a
href=\"javascript:MostrarOcultar('hidden')\">T
exto</a>
<div id=\"hidden\"
style=\"display:none;\"><h4><xsl:value-of
select='body'/></h4><br/></div>

La primera prueba se realizó en formato
HTML y este fue el resultado.
Ilustración 2 Página Mostrando sus Elementos Desplegables
Las pruebas de los otros formatos se asieron
usando el explorador de Mozilla Firefox
usando complementos, para poder visualizar
los resultados en el formato HTML-MP y
WML ya que no se pudo hacerlas en
dispositivos móviles como se deseaba.

Para visualizar los formatos en WML

utilizamos FireFox 3.6 con complemento para
lectura en formatos WML y XHTML-MP.

Ilustración 1 Página Reformateada en Fragmentos para Mejorar su
Visualización
Si damos un click en cada enlace nos
mostrara el texto las imágenes y los enlaces
que hay en la página.
CONCLUSIONES
Se adecuo de forma correcta el prototipo
denominado ReWeb con la funcionalidad de
fragmentar páginas Web para dispositivos
móviles. Después de realizar varias pruebas
y depuraciones se concluyo de forma exitosa
dicho trabajo, garantizando de forma
adecuada la visualización de páginas Web en
dispositivos móviles con capacidades
limitadas. Como trabajo futuro se pretende
trabajar en un algoritmo que permita dividir
en fragmentos más exactos las páginas Web
a visualizar.

AGRADECIMIENTOS

Agradecemos al Programa Interinstitucional

para el Fortalecimiento de la Investigación y
del Posgrado en el Pacífico: “Delfin” con la
cual nos apoyaron los siguientes alumnos
con parte de la investigación: Alan Díaz Pére
del Instituto Tecnológico Superior de
Puruándiro, Argelia Tovar Bulnes del
Tecnológico de Estudios Superiores de
Jocotitlán y de Valerio Soto Sánchez del
Instituto Tecnológico Superior de Los Ríos.

REFERENCIAS BIBLIOGRÁFICAS

[1] Tanenbaum, A. (2002), Redes de

Computadoras, Pearson Educación: México.
[2] Paulson, L. (2006) “TV Comes to the
Mobile Phone”, revista IEEE Computer, abril
de 2006.
[3] W3C (2006), Mobile Web Best Practices
1.0, Basic Guidelines, W3C Working Draft 12
April 2006, http://www.w3.org/TR/mobile-bp/
[4] W3C (2005), Scope of Mobile Web Best
Practices, W3C Working Group Note 20
December 2005,
http://www.w3.org/TR/mobile-bp-scope/ [última
consulta: septiembre de 2009]
[5] Subramanya, et al. (2006), “User
Interfaces for Mobile Content”, revista IEEE
Computer, vol. 39, no. 4, pp. 85-87, ISSN:
0018-9162, abril de 2006.
[6] Douglas, P (2009) Guidelines for GOOD
Web Design,
http://staff.serrc.org/keithz/serrcwbst/
ysdclsrmwbst/cmpsrpdfs/guidelines_for_good
_web_design.ppt
[7] Pressman (2009), Ingeniería del Software
Un Enfoque Practico, 5º Edición, Mc Graw
Hill, México, 2002 ISBN: 84-481-3214-9, pp.
640.
[8] Flores B., et al. (2996), El Rol de la
Cibermetría en el Diagnóstico de Usabilidad
de Sitios Web, V Jornadas Iberoamericanas
de Ingeniería del Software e Ingeniería del
conocimiento V JIIISIC’06, Puebla, Puebla,
México, 1 al 3 de Febrero de 2006, ISBN;
970-94770-0-5, pp. 175-181.
[9] Refactoring: Improving the Design of
Existing Code. Addison-Wesley, 1999.