Content uploaded by Andres Sanoja
Author content
All content in this area was uploaded by Andres Sanoja on Mar 27, 2020
Content may be subject to copyright.
Revista Venezolana de Computación
ISSN: 2244-7040
http://www.svc.net.ve/revecom
Vol. 6, No. 1, pp. 19-27, Junio 2019
Fecha recepción: 11/05/2019, Fecha aceptación: 07/11/2019
de Computación
Manual-design of Blocks: Una Herramienta para Gestionar
Segmentaciones Manuales de P´
aginas Web
Jean Garcia1, Andres Sanoja1
jeangarcialunardi95@gmail.com, andres.sanoja@ciens.ucv.ve
1Escuela de Computaci´
on, Universidad Central de Venezuela, Caracas, Venezuela
Resumen: La segmentaci´
on es una parte importante en el an´
alisis de p´
aginas Web. El objetivo es dividir una p´
agina
en bloques, cada uno representando una parte (o segmento) coherente del contenido. En el presente trabajo describimos
el desarrollo de la herramienta Manual-design of Blocks (MoB). Se incluyen detalles de la investigaci´
on, donde se
comprueba la importancia de MoB en la evaluaci´
on de algoritmos de segmentaci´
on. El objetivo de nuestro trabajo es el
desarrollo de la herramienta MoB. Al mismo tiempo describir los mecanismos para la obtenci´
on de una “base referencial”
de segmentaciones manuales sobre una misma p´
agina y para la posterior obtenci´
on de “la mejor segmentaci´
on manual”.
La mejor segmentaci´
on manual es definida en base a nuestra experiencia y los datos obtenidos, en este trabajo se define
una forma de su obtenci´
on pero no se considera que sea la ´
unica forma de obtener. La mejor segmentac´
on obtenida
queda disponible para la evaluaci´
on de un algoritmo de segmentaci´
on usando el framework Block-o-Matic. Mediante el
uso de MoB se soporta el proceso de conformaci´
on de la base referencial, apoyado con una interfaz de programaci´
on
de aplicaciones Web (API) y un repositorio para su manejo y consulta. Se presentan resultados de las pruebas de
aceptaci´
on.
Palabras Clave: Segmentaci´
on; P´
agina web; Segmentaci´
on Manual; Bom; Block-o-matic.
Abstract: Web page segmentation is an important task in Web page analysis. The objective is to divide a Web page into
blocks, each one representing a coherent part (or segment) of the content. In this work we describe the development
of the Manual-design of Blocks (MoB). At the same time we describe how to get a ground truth of segmentations and
how to compute the“best manual segmentation”. The best manual segmentation is defined based on our experience and
the data obtained, in this investigation we define one way to obtain it, but we do not consider there’s only one way to
achieve this. The best segmentation is then available to be used on the evaluation process of segmentation algorithm
using the Block-o-Matic framework. Also, a Web API and a Web repository for managing the data. Acceptance test
results are presented in this document.
Keywords: Segmentation; Web Page; Manual Segmentation; Bom; Block-o-matic.
I. INT RODU CCI ´
ON
La p´
agina Web es un documento digital de informaci´
on
accesible mediante un navegador de Internet. Esta informaci´
on
se presenta generalmente en formato HTML. Est´
a compuesta
por un conjunto de elementos ordenados en una estructura
de ´
arbol (el ´
arbol DOM), generado por el navegador a partir
del c´
odigo fuente HTML [1]. En el caso del presente trabajo,
la segmentaci´
on de una p´
agina Web es la acci´
on de dividir
una p´
agina Web en fragmentos coherentes (i.e cada fragmento
debe tener un sentido para un usuario) llamados bloques [2].
Cada bloque representa distintos elementos de informaci´
on en
la p´
agina. Un algoritmo de segmentaci´
on define las reglas para
la selecci´
on de dichos segmentos. En general, estas reglas se
definen en base al ´
arbol DOM y las pistas visuales, e.g. tama˜
no
de la letra, separaci´
on, espaciado o colores. Otros enfoques
se definen en base a screenshots o el texto de una p´
agina. La
segmentaci´
on puede ser aplicada en diferentes ´
areas como por
ejemplo:
•Procesos de SEO o Search Engine Optimization. La
segmentaci´
on de la p´
agina Web permite realizar un an´
ali-
sis del contenido de la p´
agina para que esta pueda ser
calificada y ubicada en un ranking.
•Migraci´
on de Formatos. La segmentaci´
on de la p´
agina
Web puede ser utilizada para ayudar en el proceso de
conversi´
on del formato de un documento a otro diferente.
Por ejemplo, se puede migrar una p´
agina Web de la
19
versi´
on del lenguaje HTML4 a HTML5. Se convierten los
bloques de la p´
agina en HTML4 a elementos sem´
anticos,
los cuales se utilizan para la creaci´
on de la nueva versi´
on
de la p´
agina usando el lenguaje HTML5 (e.g. section,
article).
•Archivado de la Web o Web Archiving. La segmenta-
ci´
on permite comparar dos versiones de la misma p´
agina
Web, la versi´
on que actualmente se tiene almacenada
y la versi´
on que se planea almacenar. El encontrar las
diferencias entre ellas permite detectar si resulta eficiente
descargar y almacenar la nueva versi ´
on y sus dependen-
cias.
•Bloqueo de Contenido o Content Blocking. La segmen-
taci´
on de la p´
agina Web permite identificar los segmentos
dentro de la p´
agina que poseen contenido no deseado para
ciertas audiencias. De esta manera bloquear solamente
una porci´
on de la p´
agina sin afectarla como a un todo.
Es importante considerar las necesidades de cada ´
area, depen-
diendo de si se desea un algoritmo de segmentaci´
on gen´
erico
o un algoritmo de segmentaci´
on espec´
ıfico. Se entiende que
mientras m´
as gen´
erico sea, podr´
a ser usado en mayor canti-
dad de p´
aginas Web pero con menos precisi´
on. Para poder
precisar esto el algoritmo de segmentaci´
on debe ser evaluado
[3]. Esta evaluaci´
on se enfoca en comparar la segmentaci´
on
obtenida con un algoritmo contra una segmentaci´
on denomi-
nada como “la mejor segmentaci´
on manual”. As´
ı mismo con
la conformaci´
on de una “base referencial”. En ella residen
las p´
aginas previamente segmentadas y anotadas. Se utiliza
para apoyar tanto la evaluaci´
on como la construcci´
on de la
mejor segmentaci´
on manual. Definir un m´
etodo de evaluaci´
on
formal, en el alcance de nuestro conocimiento, no es pr´
actico
en base a la naturaleza de los est´
andares (ie reglas heur´
ısticas)
W3C. Consideramos una segmentaci´
on manual como la mejor
opci´
on para este caso. Obviamente, esta t´
ecnica no sustituye
un enfoque formal, ya que puede resultar subjetivo dependien-
do de la visualizaci´
on que posea el usuario [4]. Buscamos
la mejor segmentaci´
on manual, la cual es una composici´
on
basada en el consenso entre las diferentes segmentaciones
realizadas por varios usuarios sobre una misma p´
agina Web
y con la misma granularidad. El principio es que un bloque
estar´
a en la mejor segmentaci´
on si el ´
area de la p´
agina ha
sido seleccionada por la mayor´
ıa de los usuarios como un
bloque. Ambas segmentaciones deben estar ajustadas a una
misma granularidad, la cual define el tama˜
no general de los
bloques dentro de una segmentaci´
on. Segmentar una p´
agina
Web manualmente puede ser una tarea compleja y propensa a
errores. Un usuario debe tener conocimientos avanzados del
lenguaje HTML y sus dependencias.
Contribuci´
on: El presente trabajo tiene como objetivo ofrecer
una soluci´
on para la obtenci´
on de la mejor segmentaci´
on
manual mediante el desarrollo de una herramienta que permite
a cualquier usuario realizar segmentaciones manuales de p´
agi-
nas Web. La soluci´
on incluye tres componentes: una extensi´
on
del navegador para la segmentaci´
on manual (MoB extension),
una aplicaci´
on Web como endpoint que recibe las segmen-
taciones manuales, construye la mejor segmentaci´
on manual
y gestiona los datos (MoB API). Finalmente, un repositorio
como archivo Web (MoB Repository). Estan disponible MoB
Repository y descargar la exensi´
on de MoB desde el sitio
Web1o descargar el c´
odigo fuente desde Github2.
Organizaci´
on: En la Secci´
on II presentamos los antecedentes.
En la Secci´
on III describimos la herramienta de segmentaci´
on
manual y consideraciones sobre la granularidad. En la Secci´
on
IV presentamos la API, el repositorio y la propuesta de como
obtener la mejor segmentaci´
on manual. En la Secci´
on V
describimos la verificaci´
on funcional de la herramienta. En la
Secci´
on VI presentamos las conclusiones y trabajos a futuro.
II. AN TEC ED ENT ES
A diferencia de su contraparte en el ´
area de Computaci´
on
Gr´
afica, las herramientas de segmentaci´
on manual para la Web
no han sido muy populares. Lo que si se encuentra, y es mas
com´
un, es realizar anotaciones dentro del c´
odigo HTML. En
principio esta t´
ecnica nos permitir´
ıa indicar cuales elementos
pertenecen a un bloque y asignarle una etiqueta. Sin embargo,
es una actividad tediosa, larga y propensa a errores. Requiere
conocimientos avanzado de HTML y sobre navegadores Web.
Algunas soluciones utilizan la segmentaci´
on manual como
anotaciones y son muy enfocadas en medir las m´
etricas de
precision y recall, por ejemplo en [5][6]. Otros se enfocan en
considerar bloques como nodos de un grafo para as´
ı anotar
p´
aginas con pesos para aplicar m´
etricas de clustering, como
es el caso de [7][8].
Es de nuestro inter´
es contar con un mecanismo que permita
de manera gen´
erica, segmentar manualmente cualquier p´
agina
para ser utilizado en un proceso de evaluaci´
on y de manera
gr´
afica. Kiesel et al. (2017) [9] presentan su versi´
on para
anotaci´
on de etiquetas de segmentos. Dada una segmentaci´
on
(en este caso los bloques son oraciones en un texto), un
experto aporta las etiquetas a cada uno de los segmentos
especificados. Aun cuando en su trabajo se realiza una seg-
mentaci´
on de texto (realizada sobre el texto de una p´
agina
directamente), la herramienta WAT-SL, desarrollada a lo largo
de su investigaci´
on, es en esencia similar a a la herramienta
MoB, ya que tambi´
en es usada para segmentar y anotar dichos
segmentos con etiquetas. Contiene apoyo gr´
afico y no est´
a
restringida a un conjunto de datos de prueba en particular.
Otros investigadores han trabajado tambi´
en en la evaluaci´
on
de segmentaciones de p´
aginas Web, construyendo segmenta-
ciones manuales para probar los evaluadores [10][11]. Estos
´
ultimos generaron datasets para pruebas de sus tesis doc-
torales, que luego quedaron disponibles en l´
ınea. Utilizan
elementos de CSS para denotar un bloque, mediante el uso de
clases CSS. Aun cuando es un enfoque interesante, deja de
lado los aspectos geom´
etricos inherentes de los elementos de
una p´
agina Web. Siendo estos un elemento clave, com´
un en
1https://mob.ciens.ucv.ve
2https://github.com/JeanGarcia/MoB
J. Garcia, A. Sanoja
20
todos los algoritmos de segmentaci´
on y as´
ı poder compararlos.
Nuestro trabajo forma parte de la evaluaci´
on de la segmen-
taci´
on de p´
aginas Web. Fue descrito como un trabajo futuro
propuesto por Sanoja y Ganc¸arski (2015) [2][3]. En el trabajo
se presenta el uso del framework de segmentaci´
on de p´
aginas
Web Block-o-Matic (BoM), para migrar documentos en for-
mato HTML4 a formato HTML5 para evitar la obsolescencia
en el contexto de archivos Web. BoM es la herramienta basada
en el algoritmo hom´
onimo [12], para la segmentaci´
on de una
p´
agina Web de forma autom´
atica. MoB-protoype (Prototipo de
Manual-design of Blocks) es la herramienta de segmentaci´
on
manual, cuya versi´
on debe ser mejorada. Se utiliz´
o como un
prototipo de baja fidelidad implementado como una extensi´
on
para el navegador Chrome, llevando el proceso de manera
semi-autom´
atica. Esta herramienta est´
a orientada a usuarios
expertos.
Figura 1: Versi ´
on Prototipo de MoB
En la Figura 1 se puede observar un ejemplo de como
el usuario crea bloques dependiendo de los elementos del
DOM. Se obtiene un grafo de bloques (respetando la jerarqu´
ıa
en el DOM) o simplemente una segmentaci´
on plana (s´
olo
bloques terminales). Ambas segmentaciones se materializan
en un documento XML. Produce tambi´
en un conjunto de
rect´
angulos presentados de manera visual.
En la Figura 1 se observa que MoB-protoype posee un panel
en la parte superior. En el panel se muestra la leyenda de los
comandos a usar para realizar la segmentaci´
on manual. Se le
presenta al usuario una segmentaci´
on realizada previamente
por BoM. Se le propone al usuario aceptar o modificar la
segmentaci´
on propuesta. Si el usuario desea modificar la
segmentaci´
on, por ejemplo agregar un bloque, debe presionar
F9 y hacer clic en el elemento que desea segmentar. Mediante
el uso de las flechas del teclado el usuario puede navegar la
jerarqu´
ıa del DOM.
Una vez se hayan completado los pasos anteriormente men-
cionados, y el usuario escoja el elemento DOM que desea
segmentar, se resaltar´
a dicho elemento indicando que se
ha segmentado. Este proceso resulta tedioso, complicado y
propenso a errores, incluso para usuarios expertos. Es re-
comendable realizar una mejora en la usabilidad de MoB-
protoype. Por ejemplo, resaltar tentativamente el elemento que
se desea segmentar permiti´
endole al usuario una retroalimen-
taci´
on activa y se crea tambi´
en un sistema de puntajes, el cual
motiva a los usuarios a realizar segmentaciones, entre otros
aspectos a considerar. Proponer una segmentaci´
on usando
BoM al inicio puede no ser justo con otros algoritmos, por lo
que se recomienda no utilizarlo.
En las siguientes secciones se presentaran las mejoras reali-
zadas a MoB-protoype en su nueva versi ´
on.
III. EXT ENSI ´
ON MOB
La extensi´
on de MoB es la herramienta de segmentaci´
on ma-
nual desarrollada por nosotros3. Se utiliza Javascript, HTML5
y CSS3, como una extensi´
on para navegadores Chrome y
Chromium.
A. Funcionalidades de la Extensi´
on MoB
•Consultar informaci´
on: secci´
on de informaci´
on donde
el usuario puede aprender m´
as de la herramienta y sus
diferentes acciones.
•Cambiar idioma: permite al usuario cambiar el idioma
de la interfaz escogiendo entre: ingl´
es, franc´
es o espa˜
nol.
•Consultar puntuaciones: permite a un usuario autenti-
cado en el sistema consultar sus puntuaciones personales
sobre una determinada p´
agina Web o las puntuaciones
globales.
•Registro: permite al usuario registrarse dentro del sistema
MoB.
•Autenticaci´
on: una vez el usuario est´
a registrado, el
sistema le permite autenticarse mediante un inicio de
sesi´
on.
•Segmentaci´
on manual: el sistema le permite al usuario
identificado inicializar la herramienta de segmentaci´
on
manual.
B. Acciones de la Herramienta de Segmentaci´
on
A continuaci´
on describimos las acciones que ofrece la ex-
tensi´
on MoB. Al inicializar la herramienta de segmentaci´
on
manual, aparecer´
a un men´
u con las siguientes acciones:
•Agregar Nuevo Bloque: agregar un nuevo bloque a
la segmentaci´
on. Al ser seleccionada, el usuario puede
recorrer los elementos del DOM con el rat´
on y estos ser´
an
iluminados. Una vez el usuario haga clic sobre alguno
de estos elementos del DOM, se insertar´
a en el HTML
un rect´
angulo representando el bloque segmentado. Este
rect´
angulo posee entre sus atributos los datos del bloque
segmentado (etiqueta, ancho, alto, posici´
on horizontal,
3Disponible en https://mob.ciens.ucv.ve
Revista Venezolana de Computación - ReVeCom (ISSN: 2244-7040) - SVC
Vol. 6, No. 1, Junio 2019
21
posici´
on vertical y el ´
area). Estos datos son almacenados
dentro de un arreglo en Javascript. Este arreglo es utili-
zado para realizar las comparaciones necesarias entre los
diferentes bloques para aplicar las acciones. Al realizar
esta acci´
on se activa un subproceso que verifica si hay
otros bloques dentro del que est´
a a punto de crearse.
De ser as´
ı se eliminan dichos bloques y se conserva
´
unicamente el nuevo que ha sido creado. En caso de que
existan bloques que se intersecten parcialmente con otros
bloques, es necesario la acci´
on de “cortar”, i.e. ajustar los
rect´
angulos.
•Eliminar Bloque: una vez activada, se iluminaran aque-
llos bloques al que el usuario se˜
nale con el rat´
on. Al
hacer clic sobre alguno de estos bloques se disparar´
a una
funci´
on de Javascript la cual remover´
a el elemento DOM
que representa el rect´
angulo del bloque. Ser´
a removido
del arreglo de bloques.
•Unir Bloques: al ser seleccionada, esta acci ´
on permite
al usuario seleccionar dos bloques los cuales se unir´
an.
Esta acci´
on elimina los dos bloques seleccionados y
crea uno nuevo que comparte los l´
ımites superiores e
inferiores m´
aximos de los bloques anteriores. Despu´
es se
comprueba que no cubra otros bloques dentro del nuevo,
en cuyo caso se eliminar´
ıan los internos.
•Cortar Bloques: esta acci ´
on permite seleccionar dos
bloques que se solapen (A y B) y realizar un corte entre
los dos. El orden de selecci´
on importa, pues A ser´
a el
bloque que predominar´
a (se mantendr´
a intacto) y B ser´
a
el bloque que se recortar´
a y ajustar´
a.
•Etiquetar Bloque: al hacer clic sobre un bloque se
mostrar´
a una modal con una lista donde el usuario podr´
a
escoger la etiqueta que mejor se adapte al bloque.
•Seleccionar Bloque: esta acci ´
on permite al usuario se-
leccionar cualquier bloque y obtener una ventana de
informaci´
on con los datos de dicho bloque.
•Panel de Informaci´
on: esta acci´
on despliega un panel
informativo con metadatos de la segmentaci´
on para el
usuario. Ofrece la opci´
on de cambiar la granularidad de
la segmentaci´
on y muestra todas las alertas que puede
presentar la segmentaci´
on.
•Enviar Segmentaci´
on: esta acci´
on activa los procesos
necesarios para la recolecci´
on de datos y env´
ıo hacia la
API de MoB. Comienza por comprobar el estado de la
segmentaci´
on en busca de errores o advertencia, en caso
de presentar errores, la segmentaci´
on no ser´
a enviada y
los procesos de recolecci´
on de datos se cancelan. En caso
contrario, se crea una estructura de JSON para enviar
todos los datos necesarios al API. Se almacena el HTML
renderizado de la p´
agina en un string, esto vendr´
ıa siendo
el HTML de la p´
agina versi´
on MoB. A la vez se hace
una b´
usqueda entre los elementos DOM de la p´
agina
para identificar cuales son los elementos DOM que est´
an
presente en cada bloque segmentado, esta informaci´
on
se almacena en un arreglo junto con los bloques de la
segmentaci´
on. Tambien se incluyen otros datos como
el t´
ıtulo de la p´
agina, la direcci´
on URL, la categor´
ıa,
colecci´
on y dimensiones.
C. Ajustando Bloques a la Granularidad
Para poder realizar la evaluaci´
on se requiere de la mejor
segmentaci´
on manual y la segmentaci´
on realizada por el
algoritmo, ambas con una misma granularidad. Se puede ver el
nivel de granularidad como el nivel de detalle de la segmenta-
ci´
on, a menor granularidad mayor nivel de detalle. Se presenta
a continuaci´
on un an´
alisis que se desprende del descrito en
[2], pero considerando aspectos para su implementaci´
on.
1) Consideraciones Sobre la Granularidad:
•La granularidad se escribe como la relaci´
on existente
entre el ´
area de los bloques y el ´
area total del documento.
•Se considera la cantidad de bloques en la segmentaci´
on.
A menor n´
umero de bloques, mayor granularidad.
•La granularidad puede variar de un documento a otro
en t´
erminos absolutos. Debe mantenerse la relaci´
on en
t´
erminos relativos. Se debe acotar la cantidad de bloques
relativo al par´
ametro de granularidad.
2) Calculando la Granularidad: La granularidad se consi-
dera como un valor G que se lee “Granularidad del documento
a un nivel G”. G es un par´
ametro de la segmentaci´
on. G
toma valores enteros entre 0 y 10 (incluyendo el 0 y e
10). Para poder garantizar una cantidad m´
axima de bloques
segmentados con respecto a la granularidad seleccionada, se
consideran los casos descritos en la Tabla I.
Tabla I: Cantidades M´
aximas de Bloques
G Cantidad M´
axima de Bloques
0 Se puede tener tantos Bloques como elementos tenga el DOM.
1 40
2 36
3 31
4 27
5 22
6 18
7 13
8 8
9 3 bloques (eg. header,content, footer)
10 Se tiene 1 solo Bloque que coincide con el documento
Se escribe G(b)como el valor de granularidad de un bloque
bcualquiera. En aras de simplificar la notaci´
on, se asume el
valor de granularidad del documento, G(document), como
simplemente G.
Esto representa el n´
umero m´
aximo de segmentos en los que
se puede dividir el documento, lo que sigue es considerar un
an´
alisis similar para el ´
area. Se considera el ´
area m´
ınima dado
un valor de G. Pueden existir menos bloques de los esperados,
pero no m´
as. Se establece una correspondencia entre el ´
area
de un bloque y su valor de granularidad. As´
ı un bloque b
con granularidad G(b)debe tener su ´
area dentro de un rango
de valores predefinido. En la f´
ormula (1) se muestra como
seleccionar el ´
area m´
ınima que debe tener cada bloque en un
determinado nivel de granularidad. area(bi)representa el ´
area
del rect´
angulo asociado a un bloque y area(doc)representa
el ´
area del rect´
angulo del documento.
J. Garcia, A. Sanoja
22
area(bi)≥area(doc)
G−1(1)
En una situaci´
on ideal la segmentaci´
on est´
a constituida con
bloques que posean todos la misma granularidad. Sin embar-
go, ese no siempre es el caso. Dado que esto puede resultar
muy restrictivo, se decide dar un rango de tolerancia de una
unidad (1) en el valor G. En otras palabras, el bloque bes
aceptado si G−1≤G(b)≤G+ 1.
D. Diferencias Entre el Prototipo y la Nueva Versi ´
on
Figura 2: Nueva Versi´
on de MoB
Como se mencion´
o anteriormente en la Secci´
on II, en el
trabajo de Sanoja y Gancarski (2015) [2][3] se presenta una
versi´
on prototipo de la herramienta de segmentaci´
on manual
la cual se busca mejorar en este presente trabajo. En la Figura
2 se puede observar que la nueva versi ´
on de la herramienta
posee las siguientes caracter´
ısticas a diferencia de la antigua
versi´
on:
•El color de los bloques refleja el estado de los mismos
y no el nivel de la segmentaci´
on, pues la segmentaci´
on
es plana. En este ejemplo azul significa que est´
a correc-
to y rojo que necesita atenci´
on. Se considera correcto
verificando la granularidad, si tiene etiqueta, si no hay
superposici´
on de bloques, entre otras consideraciones
menores.
•Se restringe al usuario a realizar una segmentaci´
on plana,
lo cual se considera deseable, a diferencia de la versi´
on
anterior la cual es propensa a segmentar en m´
ultiples
niveles.
•El panel de informaci´
on ofrece mayor informaci´
on sobre
la granularidad presente y los bloques, adem´
as de los
posibles errores o advertencias que puedan ocurrir.
•La caja de herramienta ocupa menos espacio al estar
conformada ´
unicamente de met´
aforas de las acciones,
tambi´
en es semi-transparente para poder observar el con-
tenido que existe detr´
as.
•Todas las acciones son llevadas a cabo ´
unicamente con
el rat´
on, sin tener que usar el teclado.
•Se ofrece la acci´
on de “cortar” para poder separar bloques
que se intersectan, y la acci´
on “seleccionar” que permite
obtener toda la informaci´
on de un bloque en espec´
ıfico.
En la Figura 3 se pueden observar los elementos que confor-
man el prototipo anterior. Se concibio como una extensi´
on
simple de Chrome. Un usuario interactua con la p´
agina
modificada por la extensi´
on y puede obtener los resultados
como un archivo separado por comas (CSV). Listando datos
b´
asicos, por ejemplo el id del bloque, los puntos del rect´
angulo
o la cantidad de palabras contenidas en el bloque. En la
Figura 3: Elementos del Prototipo Anterior de MoB
Figura 4 se observa los elementos de la nueva versi ´
on. Aqui
se plantea la segmentaci´
on manual como una soluci´
on. Se
consideran varios usuarios y elementos de referencia como
la ground truth. La extensi´
on de Chrome se replantea, tal
como se describe en este documento. Se incluyen elementos
fuera del alcance de este trabajo, solo deben considerarse los
elementos delimitados. Se consideran los datos b´
asicos de la
versi´
on anterior, m´
as una lista de im´
agenes contenidas, el
texto, asi como un hash de todo el contenido (c.f Secci´
on
C).
Figura 4: Elementos de la Nueva Versi´
on de MoB
IV. MOB AP I YMOB REP OSI TO RY
El MoB API y el MoB Repository est´
an estrechamente rela-
cionados, ya que, el MoB API no s´
olo ofrece servicios REST-
ful sino tambi´
en act´
ua como backend del MoB Repository. A
continuaci´
on se hace una descripci´
on de las caracter´
ısticas
m´
as resaltantes de ambos y su finalidad en el sistema.
A. MoB API
El desarrollo de la API se realiz´
o con el lenguaje de progra-
maci´
on Python v.3.5, apoyado con el microframework Flask
Revista Venezolana de Computación - ReVeCom (ISSN: 2244-7040) - SVC
Vol. 6, No. 1, Junio 2019
23
v.0.12.2. Para la creaci´
on de la base de datos que va conectada
a la API se utiliz´
o el manejador de base de datos PostgreSQL
v.10.1 junto con un componente llamado Postgis 2.4 para
realizar las operaciones entre tablas.
En general, la API de MoB se divide en dos partes: todos los
servicios RESTful que pueden ser ofrecidos a la Extensi´
on
MoB o a terceros y todas aquellas funciones que manejan el
backend del Repositorio MoB. A continuaci´
on se describen
los servicios RESTful que son ofrecidos por la API, mientras
que las funciones que manejan el backend del Repositorio de
MoB se explicar´
an en la siguiente subsecci´
on. Los servicios
ofrecidos son los siguientes:
•Registrar usuario: Permite registrar a un usuario en el
sistema. Para completar el registro se le env´
ıa al usuario
un enlace de activaci´
on a su correo.
•Iniciar sesi´
on: Permite al usuario registrado (y activado)
iniciar sesi´
on en el sistema para hacer uso de sus funcio-
nalidades.
•Cerrar sesi´
on: Borra las cookies de sesi´
on existentes en
el navegador y la sesi´
on existente en el API.
•Recuperar contrase˜
na: Permite al usuario recuperar su
contrase˜
na en caso de extrav´
ıo. El sistema env´
ıa una
combinaci´
on aleatoria de caracteres como contrase˜
na
temporal. Por medidas de seguridad las contrase˜
nas se
encuentran encriptadas por hash en la base de datos.
•Obtener colecciones: Permite obtener una lista con los
nombres de las colecciones y categor´
ıas de estas existen-
tes en la base de datos del sistema.
•Obtener etiquetas: Permite obtener una lista con los
nombres de las etiquetas existentes en la base de datos
del sistema.
•Obtener puntajes globales: Permite obtener una lista
con los mejores puntajes en cada una de las granularida-
des de una p´
agina Web espec´
ıfica.
•Obtener puntajes del usuario: Permite obtener una lista
con los puntajes en cada una de las granularidades de una
p´
agina Web espec´
ıfica para un usuario determinado.
•Cargar segmentaci´
on: Este es uno de los servicios m´
as
importante del API pues representa la base de todo el sis-
tema. Permite cargar los resultados de una segmentaci´
on
a la base de datos y los datos de la p´
agina Web, en caso
de que sea la primera vez que se segmenta. Formando
as´
ı lo que denominamos anteriormente como base de la
verdad.
•Vista previa de segmentaci´
on: Devuelve un canvas con
las figuras y etiquetas de los bloques segmentados para
una segmentaci´
on en espec´
ıfica.
•Obtener segmentaci´
on en formato JSON: Retorna
un JSON con todos los datos de una segmentaci´
on en
espec´
ıfica.
•Obtener segmentaci´
on en formato V-PRIMA: Retorna
todos los datos de una segmentaci´
on en formato V-
PRIMA. El formato V-PRIMA es un XML donde se
especifican los bloques existentes en la segmentaci´
on y
los enlaces, im´
agenes y textos existentes dentro de estos.
Es una adaptaci´
on del formato V-DIFF a nuestro contexto
[13].
•Obtener segmentaci´
on en formato MoB HTML: Retor-
na el HTML original con la informaci´
on de la segmenta-
ci´
on incluida. Se usan tags personalizados, eg. < block >.
•Obtener p´
agina Web en formato WARC: Devuelve la
informaci´
on de una p´
agina Web en formato WARC (Web
ARChive). El formato WARC permite la concatenaci´
on
de m´
ultiples objetos de datos o recursos en un s´
olo
archivo. Es utilizado para almacenar la informaci´
on de
p´
aginas Web junto con sus recursos y metadata.
B. Mob Repository
El sitio Web MoB Repository se desarroll´
o haciendo uso del
lenguaje de marcado HTML5, CSS3 y el lenguaje de pro-
gramaci´
on Javascript. Usamos tambi´
en el framework JQuery,
principalmente para el comportamiento de las p´
aginas y
control de eventos. Todo esto del lado del cliente. Del lado
del servidor est´
a apoyado por el MoB API (Python y Flask)
y la base de datos conectada a este (PostgreSQL y Postgis).
La finalidad del MoB Repository es ofrecerle a los usuarios
del sistema una interfaz para que puedan visualizar las colec-
ciones de segmentaciones manuales almacenadas en la base
de datos. Ver las mejores segmentaciones manuales de cada
p´
agina Web segmentada. A los usuarios administradores les
permite administrar las etiquetas utilizadas en la segmenta-
ci´
on, las colecciones y sus categor´
ıas, as´
ı como los roles de
otros usuarios.
C. Creaci´
on de la Mejor Segmentaci´
on
La mejor segmentaci´
on manual es aquella que contiene los
bloques m´
as populares en un conjunto de segmentaciones
manuales. Si la mayor´
ıa de usuarios han marcado un ´
area
de la p´
agina como un bloque, este se considerar´
a popular.
Entonces tomamos los bloques m´
as populares, creamos una
nueva segmentaci´
on que los contenga, esta ser´
a considerada
la mejor.
Al llevar a cabo la comparaci´
on, los bloques recibir´
an una
serie de puntajes dependiendo de sus similitudes geom´
etricas,
con respecto a los otros bloques. Los puntajes de todos los
bloques correspondientes a una misma segmentaci´
on podr´
an
ser sumados dando la puntuaci´
on total de la segmentaci´
on.
Esto quiere decir que mientras mayor sea el puntaje obtenido,
mayor es el n´
umero de segmentaciones que la respaldan.
Varios de estos atributos se nombran durante el proceso de
comparaci´
on, por lo que aqu´
ı se presenta una leyenda de los
mismos:
•Identificador: Un identificador arbitrario del bloque.
•Geometr´
ıa: La geometr´
ıa del bloque (´
area, ubicaci´
on y
coordenadas del rect´
angulo asociado)
•Puntaje Geom´
etrico: La puntuaci´
on obtenida por simi-
litudes geom´
etricas.
•Etiqueta: La etiqueta que le fue asignada al bloque.
•Puntaje Sem´
antico: La puntuaci´
on obtenida por simili-
tudes sem´
anticas (ie. labels).
J. Garcia, A. Sanoja
24
El proceso de creaci´
on de la mejor segmentaci´
on consta de
las siguientes 3 etapas:
•Identificaci´
on de los Bloques: principalmente se deben
identificar los bloques de la nueva segmentaci´
on a ser
creada Sn+1. Se seleccionan en base a una compara-
ci´
on utilizando las nsegmentaciones ya almacenadas,
S1, ..., Sn. El proceso se puede describir en dos pasos:
•se fija un bloque bn+1
k∈Sn+1,
•se compara contra todos los bloques en todas la seg-
mentaciones pertinentes, ∀bi
j∈Sicon i∈[1, n]en
las dem´
as segmentaciones. Se considera una tolerancia
basada en la Distancia Hausdorff 4entre bn+1
ky un bi
j.
Si la distancia es menor o igual a T 5se considera que
ambos bloques son similares y el bi
jtendr´
ıa el mismo
identificador que bn+1
k.
•Contabilizaci´
on de Puntos: para complementar el pa-
so anterior, se contabilizan todos los bloques bajo un
mismo identificador, para obtener el puntaje geom´
etrico.
Despu´
es, dentro del mismo pool de bloques con el
mismo identificador se contabilizan todos los que posean
las mismas etiquetas, de esta forma obtener el puntaje
sem´
antico. En la Figura 5 se observa el c´
alculo del pun-
taje geom´
etrico. El bloque b1
1tiene equivalentes en las tres
segmentaciones restantes. Esto contabiliza 4 ocurrencias
en el conjunto de segmentaciones. Para el bloque b4
1tiene
correspondencia en dos de las segmentaciones restantes.
Finalmente se suman las ocurrencias y se obtiene el
puntaje geom´
etrico. Este c´
alculo se realiza cada vez que
se incorpora una nueva segmentaci´
on de una p´
agina.
Figura 5: Ejemplo de Puntajes Geom´
etricos
4La distancia Hausdorff es la mayor de todas las distancias existentes desde
un punto en un conjunto hasta el punto m´
as cercano en otro conjunto.
5generalmente T= 30px
En la Figura 6 se muestra un ejemplo para el c´
alculo del
puntaje sem´
antico. Se basa en la coincidencia geom´
etrica
y adicionalmente que la etiqueta de los bloques coincidan.
En el ejemplo se puede observar para la segmentaci´
on
S1las siguientes etiquetas: HDADF (corto para header,
aside,article,aside yfooter, respectivamente). La seg-
mentaci´
on S1tiene el mayor puntaje sem´
antico. Es un
fuerte candidato para ser incorporado
Figura 6: Ejemplo de Puntajes Sem´
anticos
•Creaci´
on de la Mejor Segmentaci´
on: para crear la mejor
segmentaci´
on se incluyen todos aquellos bloques (uno por
cada identificador) cuyo puntaje geom´
etrico sea mayor
que el 50 % del n´
umero de segmentaciones realizadas,
esto garantiza que la mayor´
ıa de los usuarios opina que
ese bloque debe existir. Dicho bloque poseer´
a la etiqueta
m´
as utilizada para ese bloque, es decir, se busca entre los
de un mismo identificador la etiqueta que tenga el mayor
puntaje sem´
antico. En el ejemplo mostrado en la Figura
6 el bloque b1
1tendr´
ıa asociada la etiqueta H la cual es
la m´
as popular para esa ´
area de la p´
agina.
V. VE RIFICAC I ´
ON D EL SI STE MA
Para verificar el sistema desarrollado, se llevaron a cabo dos
pruebas de aceptaci´
on, una funcional y otra no funcional, las
cuales se describir´
an a continuaci´
on.
A. Prueba Funcional
Para comprobar la funcionalidad del sistema, se realiza una
prueba de caja negra. Se busca comprobar si el sistema se
comporta como es esperado seg´
un las funciones que debe
realizar. Tal es el caso en la MoB Extension de insertar,
modificar y eliminar bloques. Al modificar se verifica la
uni´
on y separaci´
on de bloques. En el MoB API la gesti´
on de
Revista Venezolana de Computación - ReVeCom (ISSN: 2244-7040) - SVC
Vol. 6, No. 1, Junio 2019
25
segmentaciones (eg agregar, visualizar), as´
ı como la creaci´
on
de la mejor segmentaci´
on. Y para el MoB Repository observar
que las segmentaciones y p´
aginas est´
en completas y con todas
sus dependencias. La t´
ecnica utilizada es principalmente la
observaci´
on, dada la experiencia con los datos manejados, de
manera satisfactoria.
B. Prueba no Funcional
Las pruebas no funcionales se enfocaron en asegurar si la
herramienta es usable o no. Espec´
ıficamente la herramienta
MoB Extension, para esto se eval´
ua la reacci´
on de 5 in-
dividuos ante el sistema. Se observ´
o las reacciones de los
participantes mientras completan 2 objetivos planteados y
finalmente se les dio un cuestionario para responder seg´
un su
experiencia. Cabe destacar que la herramienta est´
a orientada
a usuarios de 13 a˜
nos en adelante, con inexistentes, bajos,
intermedio o avanzados conocimientos en segmentaci´
on de
p´
aginas Web. En la Figura 7 se muestra un resultado de
ejemplo del formulario. Dada la extensi´
on del formato de
los datos, no se muestran en este documento los gr´
aficos
completos, pero pueden ser consultados en [14]. En la misma
figura puede observarse la pregunta del cuestionario: ¿cu´
anto
tiempo se tom´
o en realizar el segundo objetivo? teniendo
que el 40 % le tom´
o entre 5 y 10 minutos, mientras que el
60 % lo finaliz´
o en menos de 5 minutos. Respuestas como
estas nos permiten tener la confianza que se ha mejorado la
usabilidad substancialmente. Tomando en consideraci´
on que
los usuarios de la versi´
on anterior deb´
ıan tener un background
muy avanzado para poder usar la herramienta.
Figura 7: Prueba No Funcional: Pregunta 5 del Cuestionario
•Realizar una segmentaci´
on manual sobre la p´
agina Web:
https://wiki.apache.org/httpd/RedirectSSL.
•Visitar el Repositorio de MoB y observar la segmentaci´
on
realizada.
En conclusiones generales, bas´
andose en las respuestas ob-
tenidas del cuestionario, los comentarios hechos por los par-
ticipantes y el comportamiento observado de los mismos, se
tiene que:
•El sistema en general presenta un aspecto est´
etico agra-
dable para los usuarios.
•La herramienta de segmentaci´
on permite a los usuarios
inexpertos realizar segmentaciones r´
apidamente sobre una
p´
agina Web, de una forma sencilla.
•La navegaci´
on general del Repositorio MoB es enten-
dible, sin embargo cuando se debe profundizar, buscar
segmentaciones espec´
ıficas, el usuario debe invertir un
poco de tiempo en entender la l´
ogica de la navegaci´
on.
Se puede considerar que el sistema MoB es usable, sin
embargo, algunos usuarios requieren una breve inducci´
on.
VI. CO NCL US ION ES Y TRA BAJO S A FUT URO
Durante el desarrollo de la herramienta de segmentaci´
on
manual (Extensi´
on de MoB), se present´
o uno de los retos
m´
as grandes del proyecto. Se requiri´
o no s´
olo que cumpliese
con su misi´
on de segmentar manualmente la p´
agina Web, sino
mejorar significativamente la usabilidad. Las pruebas de caja
negra y usabilidad permitieron validar los objetivos iniciales
de la herramienta. Se logr´
o reducir la complejidad de una tarea
tediosa y propensa a errores mediante la automatizaci´
on.
En cuanto al repositorio de MoB, el mayor reto fue lograr
una forma comprensible de ordenar toda la informaci´
on sobre
las p´
aginas Web y sus segmentaciones. Despu´
es de realizar
las pruebas de caja negra se evidenci´
o que el repositorio fun-
cionaba como se esperaba. Aun algunos usuarios encontraban
dif´
ıcil la navegaci´
on en el sitio. Esta informaci´
on recopilada
puede ser tomada en cuenta para las mejoras a futuro que se
vayan a realizar sobre el sistema.
Entre los retos presentados en el desarrollo del API de MoB se
encontraba: el poder desarrollar todos los servicios pertinentes
de una forma modular. Presentar estructuras de respuesta que
fuesen f´
acil de comprender y manejar, en especial la estructura
de bloques que se debe usar para la carga de los datos de
la segmentaci´
on. Se incluye una parte de la implementaci´
on
en background para poder detectar una nueva segmentaci´
on
e invocar el proceso de c´
alculo de la mejor segmentaci´
on
manual. Reducir el tiempo de respuesta de este proceso fue un
reto, y que diera respuesta en un tiempo aceptable. Esto fue
resuelto sin contratiempos incluyendo una base de datos con
extensiones geogr´
aficas como Posgis. De esta forma el an´
alisis
de comparar los diferentes bloques se realizo de manera r´
apida
y eficaz.
Este proyecto comenz´
o con la idea de desarrollar una he-
rramienta para ayudar en el desarrollo de otros proyectos.
Sin embargo, a lo largo del desarrollo se fueron extendiendo
las funcionalidades principales y a˜
nadiendo funcionalidades
adicionales a los elementos principales del sistema, reforzan-
do la funcionalidad y permitiendo la evoluci´
on del mismo.
Como resultado tenemos un sistema bastante completo en
donde se pueden realizar segmentaciones manuales, incluir
segmentaciones hechas por algoritmos y ser almacenadas.
La informaci´
on de las segmentaciones puede ser mostrada a
trav´
es de una interfaz Web (Repositorio MoB), y en el caso de
las segmentaciones manuales, pueden ser analizadas y obtener
ese elemento que representa la raz´
on principal por la cual se
realiza este trabajo, la mejor segmentaci´
on manual.
J. Garcia, A. Sanoja
26
Para finalizar, la soluci´
on presentada permite incrementar la
cantidad de p´
aginas existentes en el repositorio, que hasta
el momento posee cerca de 60 p´
aginas realizadas con el
prototipo de MoB. Durante la realizaci´
on de las pruebas de
la nueva versi´
on pudimos observar que agregar una nueva
p´
agina manualmente segmentada promete ser menos com-
plejo. Esto ayuda al equipo de investigaci´
on a tener un
dataset cada vez m´
as completo. Puede visitar el repositorio
en http://bom.ciens.ucv.ve/repo y en https://mob.ciens.ucv.ve
A. Trabajos Futuros
La inclusi´
on de otros formatos de exportaci´
on para las seg-
mentaciones ser´
ıa una buena actualizaci´
on. Seg´
un los resulta-
dos arrojados por la prueba de usabilidad, el Repositorio MoB
presenta una navegaci´
on que puede resultar algo confusa para
algunos usuarios, es por eso que se propone como un trabajo
a futuro la implementaci´
on de una navegaci´
on m´
as intuitiva.
Este tipo de retroalimentaci´
on nos permitir´
a acelerar la confor-
maci´
on de la base referencial. Adem´
as, es importante destacar
que la extensi´
on actual funciona ´
unicamente para el navegador
Chrome/Chromium es por eso que se plantea un trabajo a
futuro donde se adapte dicha extensi´
on para funcionar en una
mayor variedad de navegadores (Firefox, Safari, Opera, entre
otros). Esta nueva versi´
on permite incrementar la cantidad de
usuarios participantes. Esto implica a corto plazo que se debe
mejorar el MoB API para trabajar de manera concurrente en
un ambiente de alto desempe˜
no.
REF ER ENC IA S
[1] Y. Zhu, W3C dom 4.1 W3C working draft, W3C, Feb. 2018.
https://www.w3.org/TR/2018/WD-dom41-20180201/.
[2] A. Sanoja, Web Page Segmentation, Evaluation and Applications. PhD
thesis, Universit´
e Pierre et Marie Curie-Paris VI, https://hal.inria.fr/
tel-01128002/, 2015.
[3] A. Sanoja and S. Ganc¸arski, Web Page Segmentation Evaluation, in Pro-
ceedings of the 30th Annual ACM Symposium on Applied Computing,
pp. 753–760, ACM, 2015.
[4] D. Cai, S. Yu, J.-R. Wen, and W.-Y. Ma, Extracting Content Structure
for Web Pages Based on Visual Representation, in Proceedings of the 5th
Asia-Pacific Web Conference on Web Technologies and Applications,
APWeb’03, (Xian, China), pp. 406–417, Springer-Verlag, 2003.
[5] X. Liu, H. Lin, and Y. Tian, Segmenting Webpage with Gomory-Hu Tree
Based Clustering., JSW, vol. 6, no. 12, pp. 2421–2425, 2011.
[6] E. Uzun, H. V. Agun, and T. Yerlikaya, A Hybrid Approach for
Extracting Informative Content from Web Pages, Information Processing
& Management, vol. 49, no. 4, pp. 928–944, 2013.
[7] D. Chakrabarti, R. Kumar, and K. Punera, A Graph-Theoretic Approach
to Webpage Segmentation, in Proceedings of the 17th International
Conference on World Wide Web, (Beijing, China), pp. 377–386, ACM,
2008.
[8] Z. Jiang, H. Yin, Y. Wu, Y. Lyu, G. Min, and X. Zhang, Constructing
Novel Block Layouts for Webpage Analysis, ACM Trans. Internet
Technol., vol. 19, July 2019.
[9] J. Kiesel, H. Wachsmuth, K. Al-Khatib, and B. Stein, WAT-SL: A Cus-
tomizable Web Annotation Tool for Segment Labeling, in Proceedings of
the Software Demonstrations of the 15th Conference of the European
Chapter of the Association for Computational Linguistics, (Valencia,
Spain), pp. 13–16, Association for Computational Linguistics, April
2017.
[10] J. Blustein, N. R. Di Matteo, and D. Macrini, Designing Experiments to
Compare Web Page Segmenters, in Proceedings of the 2nd International
Workshop on Human Factors in Hypertext, pp. 27–29, 2019.
[11] R. Kreuzer, J. Hage, and A. Feelders, A Quantitative Comparison of Se-
mantic Web Page Segmentation Approaches, in International Conference
on Web Engineering, pp. 374–391, Springer, 2015.
[12] A. Sanoja and S. Ganc¸arski, Block-o-matic: A Web Page Segmentation
Framework, in International Conference on Multimedia Computing and
Systems (ICMCS), (Marrakesh, Moroco), pp. 595–600, April 2014.
[13] Z. Pehlivan, M. Ben-Saad, and S. Ganc¸ arski, Vi-diff: Understanding Web
Pages Changes, in Proceedings of the 21st International Conference on
Database and Expert Systems Applications: Part I, DEXA’10, (Berlin,
Heidelberg), pp. 1–15, Springer-Verlag, 2010.
[14] J. P. Garcia, Desarrollo de una Herramienta Interactiva para la Cons-
trucci´
on de un “Ground Truth” de Segmentaciones de P´
aginas Web,
T.E.G. Escuela de Computaci´
on. Universidad Central de Venezuela,
2018.
Revista Venezolana de Computación - ReVeCom (ISSN: 2244-7040) - SVC
Vol. 6, No. 1, Junio 2019
27
