He amien a de apoyo a la na egación
web pa a pe sonas con discapacidad
MEMORIA TRABAJO DE FIN DE GRADO
Realizado po :
Lo ena Jiménez Co a
Di igido po :
Raquel He ás Balles e os
Susana Bau is a Blasco
Depa amen o de Ingenie ía del So wa e e In eligencia A icial
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
Junio 2018
Documen o maque ado con TEX
i
S .1.0.
He amien a de apoyo a la
na egación web pa a pe sonas con
discapacidad
Depa amen o de Ingenie ía del So wa e e In eligencia
A icial
Facul ad de In o má ica
Uni e sidad Complu ense de Mad id
Junio 2018
Ag adecimien os
Ag adezco al colegio Es udio 3 AFANIAS, en especial a los docen es que
pa icipa on, su colabo ación y apo ación con es e p oyec o.
A los alumnos del colegio Es udio 3 AFANIAS, po su pa icipación, ale-
g ía, ag adecimien o y buena acogida de es e p oyec o. Po enseña me una
isión del mundo o almen e di e en e.
A mis u o as, Raquel He ás y Susana Bau is a, po hace posible que
es e p oyec o sea de u ilidad en un colegio de enseñanza. Po egala me la
expe iencia de pode pa icipa en un p oyec o eal.

F ases
Lo que sabemos es una go a de agua lo que igno amos es el océano.
Isaac New on
Nues os sen idos nos pe mi en pe cibi solo una pequeña po ción del
mundo ex e io .
Nikola Tesla
Solo una ida dedicada a los demás me ece se i ida.
Albe Eins ein
C eo que muchos niños se sien en solos y aislados en su p opio mundo.
Tim Bu on
Las cosas que haces son las que e hacen, así que haz lo que sabes y sab ás
lo que ales.
Mien as eas sólo con us ojos se ás siemp e ciego.
El Chojin
Todo el mundo iene el de echo a una ida digna y el debe de ayuda a
los o os a ene la cuando lo consigue.
Juancho Ma qués
ii
Resumen
En la ac ualidad, cada ez más pe sonas acceden a in e ne dia iamen e
po di e sos mo i os. Sin emba go, no odos los usua ios poseen las mismas
capacidades pa a na ega a a és de in e ne . En el caso de los colec i os
que p esen an discapacidad o a anzada edad, en e o os, es habi ual que
encuen en di e sas ba e as que les dicul an el acceso, encon ándose con
p oblemas pa a lee , esc ibi o en ende ex os a la ho a de na ega po
in e ne . Po ello, su ge la necesidad de adap a la web a es os colec i os,
haciéndola accesible pa a odo ipo de usua ios. Una página web es accesible
cuando sus con enidos es án disponibles pa a odo ipo de usua io, pe mi-
iendo así in e ac ua de o ma o al e independien e con la página web.
Exis en de e minadas pau as pa a hace la web más accesible, po ejemplo,
escoge un ipo de le a cla a y de amaño g ande pa a acili a la lec u a
del ex o a pe sonas con dicul ad lec o a, sin emba go, es as pau as no se
cumplen en la mayo ía de los casos.
Como p oyec o de n de g ado se ha ealizado el análisis, diseño e imple-
men ación de una he amien a de apoyo a la na egación web pa a colec i os
de pe sonas que p esen an algún ipo de dicul ad a la ho a de comp ende
el lenguaje esc i o. En odo el desa ollo del p oyec o se ha lle ado a cabo
una ap oximación cen ada en el usua io nal, con la colabo ación del cole-
gio Es udio 3 AFANIAS. Conside ando las ca ac e ís icas de los usua ios que
pueden ene p oblemas a la ho a de lee o in e p e a un ex o, es e p oyec o
se ha desa ollado con el n de acili a a dichos usua ios la na egación en
in e ne , acili ándoles de mane a sencilla un conjun o de he amien as que
les ayuden a comp ende los ex os cuando es én na egando.
La aplicación, ReadI , es una ex ensión desa ollada en Google Ch ome,
ya que es uno de los na egado es web más u ilizados po la mayo ía de los
usua ios. A a és del uso de se icios ex e nos, pe mi e a los usua ios com-
p ende mejo el ex o al que se en en an, po ejemplo, pudiendo busca
las dis in as acepciones de una palab a que no en ienden o mos ando un
esumen del ex o que p opo ciona la página web.
ix

Índice
Ag adecimien os
F ases
ii
Resumen
ix
Abs ac
xi
Palab as Cla e
xiii
Keywo ds
x
1. In oducción 1
1.1. Obje i os ............................. 2
1.2. Mo i ación ............................ 2
1.3. Es uc u a del documen o . . . . . . . . . . . . . . . . . . . . 3
1.4. Ges ión del p oyec o . . . . . . . . . . . . . . . . . . . . . . . 4
2. P eamble 5
2.1. Goals ............................... 6
2.2. Mo i a ion............................. 6
2.3. Documen s uc u e . . . . . . . . . . . . . . . . . . . . . . . 7
2.4. P ojec managemen . . . . . . . . . . . . . . . . . . . . . . . 7
3. Es ado del a e 9
3.1. El concep o de la accesibilidad web . . . . . . . . . . . . . . . 9
3.1.1. ¾Qué es la Accesibilidad Web? . . . . . . . . . . . . . 9
3.1.2. Pau as de Accesibilidad al Con enido en la Web . . . . 10
3.1.3. ¾Po qué la Accesibilidad Web es impo an e? . . . . . 14
3.2. ¾Qué es la Lec u a Fácil? . . . . . . . . . . . . . . . . . . . . 14
3.2.1. Di ec ices in e nacionales de la IFLA . . . . . . . . . 14
3.2.2. ¾Po qué la lec u a ácil es necesa ia? . . . . . . . . . . 17
3.3. P oyec os elacionados . . . . . . . . . . . . . . . . . . . . . . 17
x ii
x iii Índice
3.3.1. inSui ........................... 17
3.3.2. Na egaFácil........................ 18
3.3.3. ATba ........................... 20
3.3.4. Ex ensión WAVE E alua ion Tool . . . . . . . . . . . 23
3.3.5. OpenDyslexic y OpenDyslexic Fon -Helpe bi d-F ee . 23
4. Tecnología 27
4.1. O ígenes de Google Ch ome . . . . . . . . . . . . . . . . . . . 27
4.1.1. Ve siones ......................... 28
4.2. ¾Qué es una ex ensión? . . . . . . . . . . . . . . . . . . . . . 29
4.2.1. ¾Po qué una ex ensión pa a Ch ome? . . . . . . . . . 30
4.2.2. Ca ac e ís icas básicas de Google Ch ome . . . . . . . 31
4.3. Es uc u a gene al de las ex ensiones en Google Ch ome . . . 32
4.3.1. A qui ec u a de la en ana eme gen e . . . . . . . . . 34
4.4. Mundos aislados en las ex ensiones de Google Ch ome . . . . 35
5. Diseño cen ado en el usua io 39
5.1. Colegio Es udio 3 AFANIAS . . . . . . . . . . . . . . . . . . 40
5.2. Colegio Es udio 3 AFANIAS: P ime a eunión . . . . . . . . . 40
5.2.1. Mockup ejemplo 1: Click con el bo ón de echo. . . . . 41
5.2.2. Mockup ejemplo 2: Ba a de menú. . . . . . . . . . . . 42
5.2.3. Menú gua da . . . . . . . . . . . . . . . . . . . . . . . 45
5.2.4. Ma cas de gua dado en el documen o. . . . . . . . . . 45
5.2.5. Colegio Es udio 3 AFANIAS: P ime as conclusiones . 45
5.3. Colegio Es udio 3 AFANIAS: Segunda eunión . . . . . . . . 47
5.4. Colegio Es udio 3 AFANIAS: Te ce a eunión . . . . . . . . . 48
5.4.1. Colegio Es udio 3 AFANIAS: Cues iona ios sob e la
aplicación......................... 48
5.4.2. Colegio Es udio 3 AFANIAS: Resul ados as la e ce-
a eunión......................... 50
6. Desc ipción de la aplicación 55
6.1. Ba a de menú de la aplicación . . . . . . . . . . . . . . . . . 55
6.1.1. Ba a de búsqueda . . . . . . . . . . . . . . . . . . . . 55
6.1.2. Blog............................ 56
6.1.3. Deniciones........................ 56
6.1.4. Palab as pa ecidas . . . . . . . . . . . . . . . . . . . . 56
6.1.5. Palab as con a ias . . . . . . . . . . . . . . . . . . . . 57
6.1.6. Pic og amas........................ 57
6.1.7. You ube.......................... 57
6.1.8. Wikipedia......................... 58
6.1.9. Resumen ......................... 58
Índice xix
6.1.10. Lec u a en oz al a . . . . . . . . . . . . . . . . . . . . 58
6.1.11. Icono de los eng anajes . . . . . . . . . . . . . . . . . 58
6.2. Congu ación de la ba a de menú de la aplicación . . . . . . 59
6.3. Gua da los da os del usua io . . . . . . . . . . . . . . . . . . 60
6.4. Expo a los da os del usua io . . . . . . . . . . . . . . . . . . 61
7. A qui ec u a de la aplicación 65
7.1. In oducción............................ 65
7.2. A qui ec u a ........................... 66
7.2.1. A chi os p incipales . . . . . . . . . . . . . . . . . . . 66
7.2.2. Selec ionSe icesMenu . . . . . . . . . . . . . . . . . . 67
7.2.3. Se ices .......................... 68
7.2.4. Toolba .......................... 71
7.2.5. Modals .......................... 71
7.2.6. S o age .......................... 72
7.3. Ins alación del plugin . . . . . . . . . . . . . . . . . . . . . . . 73
7.4. Ex ensibilidad del plugin . . . . . . . . . . . . . . . . . . . . . 74
8. Conclusiones y abajo u u o 79
8.1. Conclusiones ........................... 79
8.2. T abajo u u o .......................... 80
9. Conclusions and u u e wo k 83
9.1. Conclusions............................ 83
9.2. Fu u ewo k............................ 84
Bibliog a ía 85
Índice de gu as
3.1. Diseño de Na egaFácil . . . . . . . . . . . . . . . . . . . . . . 19
3.2. Diseño de la ba a de he amien as . . . . . . . . . . . . . . . 21
3.3. Resul ados as ejecu a WAVE . . . . . . . . . . . . . . . . . 24
3.4. Plugins OpenDyslexic y OpenDyslexic Fon -Helpe bi d-F ee . 25
3.5. Aplicando los plugins OpenDyslexic . . . . . . . . . . . . . . 26
4.1. Ve siones de Ch ome o denadas de meno a mayo es abilidad 28
4.2. Uso de dis in os ipos na egado es . . . . . . . . . . . . . . . 30
4.3. Es uc u a gene al de una ex ensión pa a Ch ome . . . . . . . 32
4.4. Page Ac ion s B owse Ac ion . . . . . . . . . . . . . . . . . 34
4.5. A qui ec u a de la en ana eme gen e . . . . . . . . . . . . . 35
4.6. Ejemplo de una es uc u a DOM . . . . . . . . . . . . . . . . 36
4.7. DOMcompa ido......................... 36
4.8. DOM compa ido con mundos aislados . . . . . . . . . . . . . 37
4.9. A qui ec u a que mues a el in e cambio de in o mación . . . 37
5.1. Selección de palab as pulsando bo ón de echo . . . . . . . . . 42
5.2. Selección de palab as a a és de una ba a de menú . . . . . 43
5.3. Selección de palab as a a és de una ba a de menú esc i-
biendo ex o............................ 44
5.4. Ob eniendo los alo es gua dados po el usua io . . . . . . . . 46
5.5. Ejemplo de ma cas de gua dado . . . . . . . . . . . . . . . . . 47
5.6. Respues as en o ma de semá o o . . . . . . . . . . . . . . . . 49
6.1. Ba a p incipal de la aplicación . . . . . . . . . . . . . . . . . 55
6.2. Deniciones de la palab a casa . . . . . . . . . . . . . . . . . 56
6.3. Resul ado de una palab a que no p esen a deniciones . . . . 57
6.4. Pic og amas de la palab a casa . . . . . . . . . . . . . . . . . 58
6.5. Ejemplo usando la opción de esumen . . . . . . . . . . . . . 59
6.6. Ejemplo de los da os gua dados po el usua io . . . . . . . . . 60
6.7. Resul ado de l a los se icios adecuados pa a el usua io . . 61
6.8. Gua dando los da os del usua io . . . . . . . . . . . . . . . . 62
xxi

xxii Índice de igu as
6.9. Ejemplo de los da os gua dados po el usua io . . . . . . . . . 63
6.10. Gua dando los da os del usua io . . . . . . . . . . . . . . . . 64
7.1. Es uc u a del p oyec o . . . . . . . . . . . . . . . . . . . . . 66
7.2. Ru a pa a accede a la pes aña
Ex ensiones
del na egado . . 74
7.3. Opciones que apa ecen as habili a el
Modo desa ollado
. 74
Índice de Tablas
5.1. Respues as del cues iona ios de los alumnos . . . . . . . . . . 52
5.2. Respues as del cues iona ios de los p o eso es . . . . . . . . . 53
xxiii
Capí ulo 1
In oducción
La ecnología es á cada día más a aigada en la sociedad ac ual de mane-
a muy signica i a. Con el paso del iempo, cada ez exis en más usua ios
que acceden a in e ne a dia io po di e sos mo i os.
Cabe supone que no odos poseen las mismas capacidades pa a na ega
en la web. Pa a muchos usua ios exis e una g an ba e a que les dicul a o
incluso impide el uso pa cial o o al de la ed. Es a ba e a puede se causada
po dis in os mo i os: edad a anzada, pe sonas ex anje as que no conocen
el idioma, dis in os ipos de discapacidades: isuales, mo o as, sono as, ísi-
cas, cogni i as...
Es e p oyec o nace con la idea de acili a el acceso web a aquellos co-
lec i os de pe sonas que p esen an algún ipo de dicul ad a la ho a de
comp ende el lenguaje esc i o. Sin emba go, no odas las dicul ades pue-
den a a se de la misma o ma, po lo que esul a ealmen e di ícil aba ca
odas en una sola aplicación.
Po an o, el obje i o p incipal de es e p oyec o consis e en hace la
in o mación web más accesible a aquellos colec i os de pe sonas con dis-
capacidades como T as o nos del Espec o Au is a (TEA) o as o nos del
lenguaje como a asia
1
o dislexia
2
, que ienen p oblemas con la lec u a de los
con enidos que se p esen an en la web. Además, decidimos o ien a lo a que
cada usua io pudie a escoge la ayuda que necesi a aco de a sus necesida-
des.
1
T as o no del lenguaje que se ca ac e iza po la incapacidad o la dicul ad de comu-
nica se median e el habla, la esc i u a o la mímica y se debe a lesiones ce eb ales.
2
Al e ación de la capacidad de lee po la que se con unden o se al e a el o den de
le as, sílabas o palab as.
1
8
Capí ulo 2.
P eamble
−
TeXs udio
was used o he de elopmen o he memo y. TeXs udio is
an edi o o LaTeX
4
open sou ce and c oss-pla o m, wo king on he
TeXiS
5
.
−
Gi NIL
6
, a eposi o y wi hin he o ganiza ion o he UCM's NIL
7
e-
sea ch g oup in Gi hub, was used o code change managemen and
con ol.
4
I is a ex composi ion sys em, aimed a he c ea ion o w i en documen s wi h a
high ypog aphic quali y.
5
Fu he in o ma ion abou TeXiS a
h p://gaia. di.ucm.es/ esea ch/ exis
6
We can nd he eposi o y a
h ps://gi hub.com/NILG oup/
TFG-1718-AccesibilidadWeb
7
Mo e in o ma ion abou NIL can be ound a
h p://nil. di.ucm.es/

Capí ulo 3
Es ado del a e
En es e capí ulo a a emos el ema de la accesibilidad web y la lec u a
ácil, así cómo las aplicaciones que exis en en la ac ualidad pa a consegui
que los si ios web sean más accesibles pa a odos aquellos usua ios que lo
necesi en.
3.1. El concep o de la accesibilidad web
El obje i o de es a sección es explica el concep o de la Accesibilidad
web y p esen a las pau as de Accesibilidad de Con enido desa olladas
po el W3C
1
(W3C, 2018) y po qué son impo an es.
3.1.1. ¾Qué es la Accesibilidad Web?
La Accesibilidad Web (Mo a, 2018) iene como obje i o log a que las
páginas web sean u ilizables po el máximo núme o de pe sonas, indepen-
dien emen e de sus conocimien os o capacidades pe sonales. Conc e amen e,
o ece la posibilidad de que la in o mación web pueda se comp endida y
consul ada po pe sonas con discapacidad, cuyo obje i o es ga an iza la
igualdad de opo unidades, e i ando así odo ipo de disc iminación. Cuan-
do hablamos de accesibilidad web se hace e e encia a un diseño web que
pe mi i á que es as pe sonas puedan pe cibi , en ende , na ega e in e ac-
ua con la web. Exis en o os colec i os, como pe sonas de a anzada edad
a las que ambién benecia la accesibilidad web.
La Accesibilidad Web engloba muchos ipos de discapacidades, inclu-
yendo p oblemas isuales, audi i os, ísicos, cogni i os, neu ológicos y del
1
El Conso cio Wo ld Wide Web (Wo ld Wide Web Conso ium, en inglés) es una co-
munidad in e nacional donde di e sas o ganizaciones y pe sonas abajan conjun amen e
pa a desa olla es ánda es web.
9
10
Capí ulo 3.
Es ado del a e
habla. Hoy en día, exis en muchas pe sonas con dis in as discapacidades que
no pueden u iliza la web, ya que ac ualmen e la g an mayo ía de los si ios
web p esen an g andes ba e as de accesibilidad.
Pa a que el acceso a la in o mación sea posible exis en de e minadas
no mas y equisi os que las páginas web deben cumpli , al como indica
la Ley de Accesibilidad de la In o mación en las Páginas Web (Ley N
◦
26.653). El cumplimien o de es as pau as con ibuye a que el con enido sea
más accesible pa a odas las pe sonas, con o sin discapacidad, incluyendo a
aquellos usua ios que pa a accede a la web u ilicen he amien as de apoyo
( isuales, audi i as, mo ices...).
3.1.2. Pau as de Accesibilidad al Con enido en la Web
Una de las p incipales inicia i as del W3C es el desa ollo de no mas de
accesibilidad. El obje i o de la Inicia i a pa a la Accesibilidad Web (Web
Accessibili y Ini ia i e, WAI (Hen y, 2018)) es desa olla los es ánda es de
accesibilidad. Los g upos de abajo del WAI desa ollan las no mas de ac-
cesibilidad pa a los na egado es web, pa a las he amien as de au o , de
e aluación y pa a el con enido web. Las no mas del G upo de T abajo pa a
el Con enido Web se llaman Pau as de Accesibilidad al Con enido en la Web
(Web Con en Accessibili y Guidelines, WCAG).
Ac ualmen e, exis en dos e siones pa a las Pau as de Accesibilidad al
Con enido en la Web.
3.1.2.1. Pau as de Accesibilidad al Con enido en la Web 1.0
La e sión 1.0 de las Pau as de Accesibilidad al Con enido en la Web
(Web Con en Accessibili y Guidelines 1.0, WCAG 1.0 (Chisholm e al.,
1999)) ue un a ance impo an e pa a log a que In e ne sea más accesi-
ble pa a las pe sonas con discapacidad.
Es as pau as ue on esc i as en 1999, c eando 14 di ec ices y nume osos
pun os de con ol que podían u iliza se pa a de e mina la accesibilidad de
una página web. P opo cionaban es p io idades, ni eles de cumplimien o
o ni eles de adecuación, es deci , la medida en que una página web cumple
las di ec ices.
−
P io idad 1 o Ni el de adecuación A.
Se a a de un equisi o
básico pa a que algunos g upos de usua ios pudie an usa el con enido
web.
−
P io idad 2 o Ni el de adecuación AA.
Indicaba una mejo
3.1. El concep o de la accesibilidad web 11
accesibilidad y la eliminación de impo an es ba e as de acceso al
con enido.
−
P io idad 3 o Ni el de adecuación AAA.
P opo cionaba mejo-
as a la accesibilidad del con enido web.
A con inuación, desa ollamos las pau as de accesibilidad al con enido en
la Web 1.0(Chisholm e al., 1999):
−
P opo ciona al e na i as equi alen es pa a el con enido isual y audi-
i o.
•
Los ex os al e na i os al con enido isual o audi i o benecian a
pe sonas ciegas y/o so das y a aquellos usua ios que deciden anu-
la la desca ga de imágenes y/o sonidos, po ejemplo, po mo i os
de elocidad de acceso a In e ne .
•
Los equi alen es no ex uales, como pueden se dibujos o ídeos,
benecian a pe sonas anal abe as o con dicul ades en la lec u a.
−
No basa se únicamen e en el colo . Los ex os y g ácos deben com-
p ende se sin necesidad de e los colo es. El cumplimien o de es a
pau a benecia a pe sonas con dicul ades pa a e los colo es y a
usua ios que u ilizan pan allas monoc omá icas.
−
U iliza ma cado es y hojas de es ilo ap opiadamen e. La p esen ación
de los con enidos se debe ealiza con hojas de es ilo. Con el uso de
ma cado es de p esen ación los usua ios que u ilizan so wa e especia-
lizado end án dicul ades pa a en ende la es uc u a de la página.
−
Iden ica el idioma que se usa. Es a pau a implica usa ma cado es
que acili en la p onunciación o in e p e ación de ex o ab e iado. Se
debe indica el idioma p edominan e en cada página y ma ca aquellas
exp esiones que se encuen en en o a lengua. Así, los sin e izado es
de oz son capaces de cambia su p onunciación en unción del idioma
siemp e y cuando se usen los ma cado es ap opiados.
−
C ea ablas que se ans o men co ec amen e. Las ablas sólo se de-
ben u iliza pa a ma ca in o mación abula ( ablas de da os). El uso
de ablas con o os nes c ea dicul ades pa a los usua ios que usan
lec o es de pan alla. De la misma o ma, las ablas mal es uc u adas
(po ejemplo, sin encabezados < h>) dicul an la lec u a a usua ios
que no pueden isualiza la in o mación de o ma global: ciegos con
lec o es de pan alla y/o disposi i os
b aille
, decien es isuales que
u ilizan magnicado es de pan alla o usua ios con disposi i os de pan-
alla pequeña.
12
Capí ulo 3.
Es ado del a e
−
Asegu a que las páginas que inco po en nue as ecnologías se ans o -
men co ec amen e. Una página basada en ecnologías mode nas iene
que se accesible al desconec a la o al isualiza la con na egado es
an iguos. El usua io puede desconec a las ecnologías más mode nas
pa a gana en apidez de desca ga. Sin emba go, los con enidos deben
pe manece accesibles.
−
Ga an iza el con ol sob e los cambios de con enido sensibles en el
iempo. Es impo an e pausa o de ene el mo imien o, el pa padeo,
el desplazamien o o la ac ualización au omá ica de obje os o páginas.
Algunas pe sonas con discapacidades cogni i as o isuales no pueden
lee el ex o en mo imien o. Además, los lec o es de pan alla no pueden
lee ex o en mo imien o.
−
Ga an iza el acceso di ec o a las in e aces de usua io in eg adas. Se
debe asegu a que la in e az de usua io siga los p incipios del diseño
accesible: acceso independien e del disposi i o a la uncionalidad, la
ope abilidad del eclado, la oz p opia, e c. Cuando un obje o inc us-
ado iene su p opia in e az, és a debe se accesible. Si la in e az
del obje o inc us ado no puede se accesible, se debe p opo ciona una
solución accesible al e na i a.
−
El diseño debe ga an iza la independencia del disposi i o. Usa un-
ciones que pe mi an la ac i ación de elemen os de página a a és de
una a iedad de disposi i os de en ada.
−
Usa soluciones p o isionales de accesibilidad pa a que las ecnologías
de asis encia y los na egado es an iguos uncionen co ec amen e.
−
U iliza las ecnologías W3C (según las especicaciones) y segui las
pau as de accesibilidad. Cuando no sea posible u iliza una ecnolo-
gía W3C, o si al hace lo el ma e ial no se ans o ma co ec amen e,
p opo ciona una e sión al e na i a del con enido que sea accesible.
−
P opo ciona in o mación de con ex o y o ien ación pa a ayuda a los
usua ios a comp ende páginas o elemen os complejos. Las elaciones
complejas en e pa es de una página pueden se di íciles de in e p e a
pa a las pe sonas con discapacidades cogni i as y las pe sonas con
discapacidades isuales.
−
P opo ciona mecanismos de na egación cla os y consis en es (in o -
mación de o ien ación, ba as de na egación, un mapa del si io, e c.)
pa a aumen a la p obabilidad de que una pe sona encuen e lo que
busca en un si io.
−
Asegu a que los documen os sean cla os y sencillos pa a que se puedan
en ende más ácilmen e. Un diseño de página consis en e, con g ácos
3.1. El concep o de la accesibilidad web 13
econocibles y un lenguaje ácil de en ende , benecian en pa icula
a las pe sonas con discapacidades cogni i as o que ienen dicul ades
pa a lee .
3.1.2.2. Pau as de Accesibilidad al Con enido en la Web 2.0
Con el paso del iempo, las WCAG 1.0 comenza on a queda se obsole as,
ya que debido al a ance de las ecnologías web esul aba más di ícil e ica
sus pau as.
Po ello, apa ecen Las Pau as de Accesibilidad al Con enido en la Web
2.0 (Web Con en Accessibili y Guidelines 2.0, WCAG 2.0 (Chisholm e al.,
2008)), que se undamen an en WCAG 1.0, in oduciendo algunos cambios
signica i os.
A un ni el p ác ico, algunos de los cambios se mues an igual que las
WCAG 1.0. Po ejemplo, los o mula ios oda ía equie en e ique as, las a-
blas de da os deben con ene cabece as y las imágenes oda ía equie en un
ex o al e na i o, po lo que los desa ollado es web que ya diseñan si ios
web accesibles no end án que cambia demasiado sus hábi os.
Po o o lado, las WCAG 2.0 ep esen an un cambio en su loso ía. Los
cambios impo an es implican que las pau as es án cen adas en p incipios
más que en écnicas, pe mi iendo que las pau as sigan siendo ele an es in-
cluso cuando la ecnología cambie. Además, es án diseñadas pa a que su
adecuación se pueda e ica de o ma able.
El cambio de pau as cen adas en las écnicas a pau as cen adas en p in-
cipios dio luga a un núme o educido de ideas de ni el supe io o p incipios.
Las WCAG 1.0 enían ca o ce p incipios en el ni el supe io . En cambio, las
WCAG 2.0 p esen a únicamen e cua o p incipios en el ni el supe io . Cada
uno de es os cua o p incipios se indica con una sola palab a:
−
P incipio 1: Pe cep ible.
La in o mación y los componen es de
la in e az de usua io deben es a p esen ables pa a los usua ios de
mane as que puedan pe cibi .
−
P incipio 2: Ope able.
Los componen es de la in e az de usua io
y la na egación deben se ope ables.
−
P incipio 3: Comp ensible.
La in o mación y el uncionamien o de
la in e az de usua io deben se comp ensibles.
−
P incipio 4: Robus o.
El con enido debe se lo sucien emen e o-
bus o como pa a que pueda se in e p e ado de mane a conable po

14
Capí ulo 3.
Es ado del a e
una amplia a iedad de agen es de usua io, incluidas las ecnologías de
asis encia.
3.1.3. ¾Po qué la Accesibilidad Web es impo an e?
Hoy en día, usamos in e ne pa a muchos aspec os de nues a ida: edu-
cación, empleo, sanidad, en e enimien o... Po ello, es impo an e que la
web sea accesible pa a pode p opo ciona acceso equi a i o y en igualdad
de opo unidades pa a odas pe sonas.
El hecho de que una página web sea accesible pe mi e ayuda a que
pe sonas con discapacidad pa icipen más ac i amen e en la sociedad, in-
eg ándose en és a en mayo medida, b indándoles así una opo unidad de
accede a la in o mación y de in e ac ua .
3.2. ¾Qué es la Lec u a Fácil?
Podemos encon a dos deniciones lige amen e dis in as pa a es e é -
mino:
−
Adap ación lingüís ica de un ex o que acili a más la lec u a de un
con enido, aunque no su comp ensión.
−
Adap ación que hace más ácil an o la lec u a como la comp ensión.
La Lec u a Fácil no sólo aba ca el ex o, sino ambién se ee e a las ilus-
aciones y maque ación. Se di ige a odas las pe sonas, en especial a aquellas
que ienen dicul ades lec o as ansi o ias (inmig ación, inco po ación a -
día a la lec u a, escola ización decien e...) o pe manen es ( as o nos del
ap endizaje, di e sidad uncional, senilidad...).
3.2.1. Di ec ices in e nacionales de la IFLA
En 1997 la IFLA
2
(In e na ional Fede a ion o Lib a y Associa ions and
Ins i u ions) c eó una se ie de Di ec ices In e nacionales que han sido a-
ducidas a odos los idiomas de la Unión Eu opea, den o de un p oyec o
que pe sigue hace accesible a odos los ciudadanos los se icios y medios de
comunicación.
El obje i o que se p e ende con es as di ec ices es de e mina las pau as
que debe segui quien edac a un ex o pa a que su lec u a sea ácilmen e
2
Pa a más in o mación, consul a la página h p://www.ia.o g
3.2. ¾Qué es la Lec u a Fácil? 15
comp ensible po odos.
Las Di ec ices de Lec u a Fácil an di igidas a odas las pe sonas que
engan dicul ades pa a lee y en ende el idioma del país en el que esiden.
Po ejemplo, pe sonas con discapacidad cogni i a, colec i os que padecen
o o ipo de discapacidad que a ec a ambién a su capacidad de lec u a o
comp ensión, pe sonas con un bajo ni el cul u al, pe sonas mayo es...
Pa a hace un ex o que sea comp ensible pa a el mayo núme o de pe -
sonas, exis en una se ie de no mas de diseño y de edacción.
3.2.1.1. No mas de diseño
El diseño de las publicaciones juega un papel impo an e en la acilidad
de lec u a. Las ecomendaciones más impo an es a ene en cuen a en lo
que se ee e al diseño son(Mo eno y F anco, 2009):
−
Elegi le as cla as, como A ial, Hel é ica, Ve dana, Times New Roman
o Sans Se i , en e o as.
−
U iliza como máximo dos ipos de le as den o del mismo documen o.
−
El amaño de la le a ha de se g ande o congu able si el o ma o es
elec ónico.
−
No u iliza mayúsculas ni cu si as. Usa la neg i a o el sub ayado pa a
en a iza palab as o ases.
−
No jus ica el ex o a la de echa. Lo más ap opiado es usa una ali-
neación a la izquie da.
−
No pone dibujos como ondo de un ex o.
−
In en a u iliza una sola línea pa a cada o ación.
−
E i a sepa a los elemen os cons i u i os de la o ación, de modo que
és a quede siemp e den o de una misma página.
−
No inclui demasiada in o mación en una página.
−
No usa nunca la imp esión in e ida.
−
U iliza colo es pa a los dibujos.
−
No usa guiones pa a sepa a palab as la gas en el ma gen de echo del
ex o
16
Capí ulo 3.
Es ado del a e
3.2.1.2. No mas de edacción
El o o ipo de pau as a segui son las elacionadas con el con enido del
ex o, que son undamen ales pa a que odos puedan en ende la in o mación
que que emos ansmi i . Sin emba go, el uso de es as pau as no implica cae
en un lenguaje simplis a e in an il.
Las pau as elacionadas con el con enido son (Mo eno y F anco, 2009):
−
Usa un lenguaje sencillo y cla o.
−
E i a concep os abs ac os. Si han de usa se, u iliza ejemplos con-
c e os o acla aciones.
−
Emplea ocablos co os ela i os al lenguaje co idiano hablado.
−
Pe sonica el ex o an o como sea posible. Es mejo deci us ed iene
de echo a... que los usua ios del se icio ienen de echo a...
−
Hace uso de ejemplos p ác icos.
−
Di igi se a los lec o es de mane a espe uosa.
−
Inclui una sola idea p incipal en cada o ación.
−
U iliza un lenguaje posi i o.
−
Emplea p e e en emen e la oz ac i a en e a la pasi a.
−
No da po asumidos conocimien os p e ios sob e el ema en cues ión.
−
Se sis emá ico al u iliza las palab as.
−
No emplea el subjun i o.
−
Tene cuidado con el lenguaje gu a i o o me a ó ico si son ocablos
de uso poco común.
−
No emplea palab as de o o idioma.
−
Menciona , siemp e que sea posible, una di ección de con ac o pa a
solici a más in o mación.
−
E i a el uso de je gas, ab e ia u as e iniciales.
3.3. P oyec os elacionados 17
3.2.2. ¾Po qué la lec u a ácil es necesa ia?
La lec u a ácil es necesa ia po que:
−
El acceso a la lec u a y a la in o mación es un de echo y una necesidad
social.
−
Lee es un place que pe mi e compa i ideas, pensamien os y expe-
iencias.
−
Muchos ex os ienen un exceso de ecnicismos, una sin axis compleja
y una p esen ación poco cla a.
−
Exis e cie o po cen aje de la población que p esen a dicul ades lec-
o as.
3.3. P oyec os elacionados
En es a sección comen a emos algunos de los p oyec os que exis en en la
ac ualidad pa a a on a el p oblema de la accesibilidad web.
3.3.1. inSui
InSui
3
p opo ciona accesibilidad y usabilidad web de mane a sencilla.
Se a a de un p oduc o de apoyo que añade a la página web una capa de
in o mación semán ica, pe sonalizada po expe os en accesibilidad y usabi-
lidad.
3.3.1.1. ¾Qué nos pe mi e inSui ?
InSui nos pe mi e:
−
Mejo a de mane a au omá ica el cumplimien o de muchas de las eco-
mendaciones del W3C en ma e ia de accesibilidad web, haciendo que
la web sea más accesible y usable.
−
P opo ciona desde la nube las ayudas écnicas pa a que cada pe sona
pueda na ega de mane a adap ada a sus necesidades y p e e encias.
3.3.1.2. ¾Qué o ece inSui ?
Al p opo ciona las ayudas desde la nube,
inSui
es á en con inua e olu-
ción. Cada pe sona puede na ega de mane a adap ada a sus necesidades y
p e e encias. O ece las siguien es ayudas écnicas:
3
Pa a más in o mación, accede a la página
h ps://www.insui .ne /es/
24
Capí ulo 3.
Es ado del a e
Figu a 3.3: Resul ados as ejecu a WAVE

3.3. P oyec os elacionados 25
(a) Plugin OpenDyslexic
(b) Plugin OpenDyslexic Fon -Helpe bi d-F ee
Figu a 3.4: Plugins OpenDyslexic y OpenDyslexic Fon -Helpe bi d-F ee
26
Capí ulo 3.
Es ado del a e
(a) An es de aplica los cambios de los plugins
(b) Despues de aplica los cambios de los plugins
Figu a 3.5: Aplicando los plugins OpenDyslexic
Capí ulo 4
Tecnología
En es e capí ulo habla emos sob e la ecnología escogida pa a desa olla
el p oyec o, una ex ensión pa a Google Ch ome. Desc ibi emos los dis in os
mo i os pa a selecciona la en e a o as al e na i as.
T aza emos nas pinceladas ace ca de los o ígenes de dicho na egado ,
las dis in as e siones que exis en en la ac ualidad y sus p incipales ca ac e-
ís icas.
Desc ibi emos algunos ipos de ex ensiones que nos podemos encon a
en in e ne , así como las más usadas según las necesidades de los usua ios.
Explica emos qué es una ex ensión web, deniendo su es uc u a y a qui ec-
u a gene ales.
4.1. O ígenes de Google Ch ome
Ch ome (Leona do, 2012) ue p esen ado po p ime a ez de mane a o-
cial el 2 de Sep iemb e de 2008 pa a Mic oso Windows (únicamen e pa a
XP y e siones pos e io es) en 43 idiomas siendo una e sión be a. Ob u o
en un b e e pe iodo de iempo el 1% del me cado de na egado es. Un iempo
después, el 11 de Diciemb e de 2008 ue lanzado de mane a ocial.
Es a p ime a e sión pasó las p uebas de Acid1
1
y Acid2
2
(es a úl ima
con un pequeño e o ). Ob u o 79 pun os de 100 en la p ueba de Acid3
3
,
1
O iginalmen e llamado Box Acid Tes , es una página de p ueba pa a los na egado es
web. Se desa olló en oc ub e de 1998 y ue impo an e pa a es ablece una base de
e e encia pa a la in e ope abilidad de los p ime os na egado es web.
2
Es una página de p ueba publicada pa a de ec a allos de ende ización. Fue desa-
ollada en el espí i u de Acid1. Fue lanzada el 13 de ab il de 2005.
3
Pone a p ueba los na egado es con los es ánda es web. Desa ollo desde ab il de 2007
y lanzado el 3 de ma zo de 2008.
27
28
Capí ulo 4.
Tecnología
siendo supe io a In e ne Explo e y Fi e ox, pe o in e io a Ope a.
El 9 de diciemb e de 2009, Google anunció la publicación de las e siones
be a de Ch ome pa a Mac OS X y Linux. A p incipios de 2010 ya cuen a con
más de 1500 unciones disponibles. En ma zo, su gen los con oles de p i a-
cidad y el aduc o de Google. El 25 de mayo de 2010 Google anunció la
e sión es able de su na egado Google Ch ome e sión 5 simul áneamen e
pa a odas las pla a o mas Mic oso Windows, Mac OS X y Linux. Al mes
siguien e, se in eg a Flash a Ch ome. En eb e o de 2012 se lanza la e sión
be a pa a And oid. En junio, su gen las e siones de Ch ome pa a iPhone y
iPad.
Ac ualmen e, el na egado es á disponible pa a la pla a o ma Mic oso
Windows en más de 50 idiomas. La e sión pa a sis emas Mac OS X y Linux
se encuen a ac ualmen e en desa ollo, con disponibilidades de e siones
be a en ambos sis emas ope a i os.
4.1.1. Ve siones
Google Ch ome es el na egado web más u ilizado en odo el mundo.
Ac ualmen e, exis en cinco e siones (Velasco, 2017) de Google Ch ome dis-
in as, cada una de ellas pensadas pa a una nalidad en conc e o.
Figu a 4.1: Ve siones de Ch ome o denadas de meno a mayo es abilidad
Google Ch ome S able
Se a a de la más es able de Ch ome y la más usada po los usua ios. Es la
e sión nal, lib e de e o es lis a pa a unciona , p opo cionando la mejo
expe iencia, segu idad y endimien o mien as na egamos en la web. Recibe
las ac ualizaciones más impo an es, siendo p obadas an es po las demás
e siones de desa ollo.
4.2. ¾Qué es una ex ensión? 29
Google Ch ome Be a
Es conside ada como la e sión más equilib ada que o ece Google pa a dis-
posi i os And oid. Funciona igual que Google Ch ome S able y suele es a
adelan ada, ya que Google suele p oba aquí odas las unciones que, con el
iempo, llega án a la e sión nal, po lo que exis e la posibilidad de encon-
a algunos e o es.
Ch ome Be a es ecomendada pa a aquellos usua ios que su an p oble-
mas con la e sión es able o pa a los que quie an dis u a an es de las
no edades. Es a e sión se suele ac ualiza odas las semanas y suele ecibi
una ac ualización mayo cada seis semanas.
Google Ch ome De
Es in e io de la e sión Be a y S able, po lo que es más ines able. Se a-
a de una a ian e pensada pa a desa ollado es, pa a de ec a los e o es,
soluciona los y desa olla nue as e siones. Su p incipal obje i o es que los
adminis ado es sean capaces de comp oba que sus páginas web uncionen
bien con las nue as ex ensiones y complemen os ins alados.
Google Ch ome Cana y
Es la e sión más ines able de odas. Se gene a au omá icamen e desde los
se ido es de Google con odos los cambios que se han ealizado en el código
sin ningún ipo de comp obación. Se ca ac e iza po con inuas ac ualizacio-
nes, e o es y su unción expe imen al. Es a a ian e es á des inada a los
desa ollado es, pa a pode comunica los e o es exis en es. Puede ecibi
has a sie e ac ualizaciones a la semana.
Google Ch omiun
Ch omium es uno de los p oyec os más in e esan es de la compañía g acias
a su di e sidad. Su obje i o p incipal es p opo ciona un na egado con
mayo es abilidad, elocidad y segu idad además de inclui una in e az de
usua io sencilla y ecien e. Ch omium es el na egado base del que es á
cons uido Ch ome y iene sus mismas ca ac e ís icas de diseño, pe o con
un logo ipo lige amen e di e en e y sin el apoyo come cial y écnico de la
compañía Google.
4.2. ¾Qué es una ex ensión?
Las ex ensiones son pequeños p og amas que se ins alan den o del na e-
gado (Google Ch ome, Fi e ox, Ope a, e c.) que pe mi en modica y mejo-
a la uncionalidad del na egado , acili ando la expe iencia de los usua ios
una ez que son ins aladas. Suelen ene un amaño bas an e pequeño (no
más de 1MB). Se desa ollan u ilizando ecnologías web ales como HTML,

30
Capí ulo 4.
Tecnología
Ja asc ip y CSS.
Cada usua io puede selecciona la ex ensión que quie a en unción de sus
necesidades e ins ala la en su na egado . Hoy en día exis e g an a iedad de
ex ensiones pa a cub i las necesidades de los usua ios. Pueden se g a is o
de pago, pueden se c eadas po los desa ollado es de Google o po e ce os.
4.2.1. ¾Po qué una ex ensión pa a Ch ome?
Uno de los p incipales mo i os pa a desa olla una ex ensión pa a Goo-
gle Ch ome es que es uno de los na egado es más u ilizados a ni el mundial
po los usua ios.
En la gu a 4.2 podemos comp oba en el diag ama de sec o es
4
cómo el
po cen aje de uso de los usua ios de dicho na egado es supe io en casi un
40% espec o del es o.
Figu a 4.2: Uso de dis in os ipos na egado es
Escogiendo Ch ome como na egado pa a el desa ollo del p oyec o p o-
po ciona íamos sopo e a un amplio núme o de usua ios que usan in e ne
a dia io. Sin emba go, la na egación no es igual pa a odos. Cada usua io
puede p esen a dis in os p oblemas a la ho a de comp ende un a ículo, po
ejemplo, que con enga palab as de las que desconoce su signicado. Desa-
ollando una ex ensión, pod emos cub i es a y o os ipos de p oblemá ica
pa a un sec o conc e o de usua ios en odas las páginas a las que desee
accede .
4
Diag ama ex aído del a ículo
h ps://www.muycompu e .com/2017/03/01/
na egado es-web- eb e o/
4.2. ¾Qué es una ex ensión? 31
O o mo i o que impulsó al desa ollo de una ex ensión es apo a la
capacidad de mejo a los se icios que nos p opo ciona el na egado pa a
aquellas pe sonas con mayo dicul ad.
Una ca ac e ís ica impo an e a ene en cuen a, es que es muy sencillo
habili a un ex ensión de Ch ome, como explica emos en o a sección.
4.2.2. Ca ac e ís icas básicas de Google Ch ome
Google Ch ome p opo ciona una se ie de ca ac e ís icas que lo hacen di-
e en e y comple o. P esen a una in e az simple y cla a, cuen a con g an
es abilidad y segu idad. La mejo ca ac e ís ica que p opo ciona pa a los
usua ios es la apidez. Indicamos a con inuación algunas ca ac e ís icas bá-
sicas (DKEN2302, 2015) (Chau in, 2012):
−
Na egación segu a:
Pa a na ega de mane a más segu a, Google
Ch ome ad ie e al usua io cuando es á a pun o de isi a un si io
sospechoso o insegu o. Al ealiza la na egación median e pes añas
independien es, que es án incomunicadas, se impide el obo de la in-
o mación.
−
E icacia:
Google Ch ome es á diseñado pa a sopo a aplicaciones
web complejas y es compa ible con los lenguajes de p og amación ac-
uales.
−
Sopo a mejo as y ac ualizaciones:
Es á disponible pa a Win-
dows, Mac y Linux, al igual que sus con inuas mejo as, cuya nalidad
es que el na egado sea más ápido, es able y uncional.
−
Velocidad:
El obje i o p incipal de Ch ome es la elocidad de na e-
gación, desde su ejecución has a la ca ga de aplicaciones web complejas.
−
P oduc i idad:
El usua io puede accede a sus ma cado es, pes añas
abie as e his o ial desde cualquie disposi i o que sea compa ible con
Ch ome.
−
Compa ibilidad:
Google Ch ome siemp e se encuen a en cons an-
e c ecimien o po pa e de sus desa ollado es, lo que pe mi e inclui
nue as ex ensiones pa a mejo a la compa ibilidad con o as aplicacio-
nes.
−
In e az sencilla y uncional:
Es á diseñado pa a se lo más
sencillo posible.
−
Adminis ado de a eas:
Ch ome con iene un adminis ado de
a eas que nos indica qué ecu sos se es án consumiendo y en qué pá-
ginas.
32
Capí ulo 4.
Tecnología
−
P i acidad:
A a és del modo de incógni o, Ch ome pe mi e con o-
la la in o mación de p i acidad y p o ege la, na egando en la web sin
gua da el his o ial de na egación ni las búsquedas, pe mi iendo así al
usua io na ega de mane a anónima.
−
Ma cado es ins an áneos:
Si el usua io econoce un si io de in e-
és, puede gua da lo como si io p e e ido en los Ma cado es de Google
Ch ome. Además, el na egado ambién pe mi e gene a ca pe as pa a
o ganiza nues os ma cado es.
4.3. Es uc u a gene al de las ex ensiones en Goo-
gle Ch ome
Como ya hemos mencionado, las ex ensiones son pequeños p og amas
so wa e que pueden modica y mejo a la uncionalidad del na egado
Ch ome. Po ello, es impo an e conoce su es uc u a gene al
5
.
Pa a desa olla una ex ensión, lo p ime o que hay que hace es c ea un
che o llamado
mani es .json
. Se a a de un a chi o que con iene oda la
congu ación, p opiedades e in o mación sob e la ex ensión. Se compone de
da os o ma eados en JSON, que desc iben me ada os de la ex ensión, los
pe misos de los que dispone y los o os componen es de la ex ensión.
En la gu a 4.3 podemos e cuáles son los elemen os de los que se compone
la es uc u a de la ex ensión y cuya congu ación debe á es a eejada en
el che o de manies o.
Figu a 4.3: Es uc u a gene al de una ex ensión pa a Ch ome
5
Más in o mación en
h ps://de elope .ch ome.com/ex ensions/o e iew
4.3. Es uc u a gene al de las ex ensiones en Google Ch ome 33
A con inuación, explica emos b e emen e qué es cada elemen o del que
se compone es a es uc u a:
−
Con en sc ip
(Sc ip de con enido)
: se u ilizan pa a ene acceso
al DOM
6
de la página. Son che os CSS y Ja aSc ip que se inyec an
en las páginas po las que los usua ios na egan. Se ejecu an después de
que la página web en la que el usua io se encuen e se haya ca gado.
−
Backg ound sc ip
(Sc ip de ondo)
: son los con olado es de nues-
a aplicación. Se ejecu a cuando se inicia Ch ome y siemp e es á escu-
chando odos los posibles e en os que gene e la ex ensión en ch ome.
Cuán o más compleja sea la ex ensión, más necesa io se á el sc ip de
ondo.
−
B owse ac ion
(Acción del na egado )
: es la pa e más simple de
la in e az de usua io pa a ex ensiones. Una acción del na egado es
un bo ón (el bo ón ama illo de la gu a 4.3 ) que se ag ega a la ba-
a de he amien as p incipal a la de echa del omnibox
7
. La ex ensión
puede cambia el icono y mos a popups eme gen es, que se c ean u i-
lizando HTML y se dimensionan de o ma dinámica en unción de los
con enidos.
−
Page ac ion
(Acción de página)
: Son simila es a las acciones del
na egado , pe o es án en el onmibox y solo apa ecen en de e minadas
páginas(el bo ón ojo de la gu a 4.3 ).
−
Además, podemos añadi odos los a chi os necesa ios pa a desa olla
nues a aplicación, como imágenes, biblio ecas de Ja aSc ip ...
Todos los a chi os deben es a con enidos en una sola ca pe a. De es-
a mane a, cuando se dis ibuye la ex ensión, el con enido de la ca pe a se
empaque a en un a chi o ZIP con sujo .c x, como explica emos en o o ca-
pí ulo más de alladamen e.
Además, se dis inguen dos ipos de ex ensiones que podemos cons ui :
−
Acciones de página:
acciones que dependen de la página.
−
Acciones de na egado :
acciones que no son dependien es de la
página.
En la gu a 4.4 mos amos un ejemplo de cada uno de los dis in os ipos.
Como podemos e , el
Page Ac ion
apa ece únicamen e cuando ealizamos
una búsqueda en una página de e minada. Po o o lado, el
B owse Ac ion
,
en es e caso la ex ensión
AdBlock
, se encuen a p esen e en odas las páginas.
6
Documen Obje Model (modelo de obje o de documen o)
7
La ba a de di ecciones combinada con el cuad o de búsqueda de Google.
40
Capí ulo 5.
Diseño cen ado en el usua io
−
An es de empeza a c ea la aplicación, pa a de ec a ápidamen e los
e o es de diseño.
−
Du an e el desa ollo de la aplicación, pa a no des ia nos y cen a -
nos en nues os obje i os pa a consegui la uncionalidad y usabilidad
deseadas.
−
Una ez desa ollada y lanzada, pa a conoce los pasos de debe emos
segui pa a mejo a en una siguien e e sión.
Po an o, g acias a es a ap oximación, asegu amos que nues a aplica-
ción sea ealmen e ú il, p esen e un al o ni el de usabilidad y uncionalidad
pa a nues os usua ios nales.
5.1. Colegio Es udio 3 AFANIAS
El Colegio de Educación Especial Es udio 3 AFANIAS
1
es un cen o
conce ado con La Conseje ía de Educación, Ju en ud y Depo e de la co-
munidad de Mad id. En el colegio Es udio 3 AFANIAS se escola iza alumnos
en e los es y los ein iún años con necesidades educa i as especiales aso-
ciadas a discapacidad in elec ual, plu ideciencias y as o no gene alizado
del desa ollo, en las e apas de Educación In an il, Educación Básica Obli-
ga o ia y P og amas pa a la T ansición a la Vida Adul a.
G acias a Raquel He ás y Susana Bau is a, u o as del p oyec o, conse-
guimos conce a una eunión a p incipios de diciemb e con el pe sonal del
colegio Es udio 3 AFANIAS pa a p esen a una p ime a ap oximación de la
aplicación que íbamos a desa olla .
En nues a p ime a isi a al cen o nos eunimos con Ca los Roldán ( es-
ponsable TIC del colegio) que nos ayuda ía a comp oba la u ilidad y usabi-
lidad de nues a ex ensión, nos hizo una pequeña isi a guiada po el colegio,
p esen ándonos a los alumnos que pa icipa ían en el es de e aluación.
5.2. Colegio Es udio 3 AFANIAS: P ime a eunión
Una ez eunidos en el colegio con el esponsable TIC del cen o, expusi-
mos que nues a in ención e a desa olla una ex ensión en Google Ch ome
pa a ayuda a sus alumnos (u o as pe sonas que lo necesi a an) a na ega
mejo en la ed.
1
Podemos encon a más in o mación en:
h p://colegioes udio3.blogspo .com/

5.2. Colegio Es udio 3 AFANIAS: P ime a eunión 41
Nues o obje i o p incipal e a consegui in o mación ace ca de las nece-
sidades básicas de los alumnos. Así, pod íamos ocaliza mejo el desa ollo
de nues a aplicación en mejo a su na egación en in e ne , e i ando la po-
sibilidad de desa olla una he amien a que no cub ie a las necesidades de
los usua ios a los que es á en ocada la aplicación.
Nues as p opues as p e endían esol e cues iones elacionadas con la
in e az y uncionalidad de la aplicación. Po ello, nos plan eamos las cues-
iones siguien es:
−
Cuál e a la mane a más sencilla pa a ob ene palab as que plan ea-
an dicul ades pa a los usua ios: seleccionando el ex o de la página,
esc ibiéndolo...
−
Cómo debíamos p esen a la in e az de nues a he amien a: mos an-
do una ba a de he amien as en odas las páginas, mos a un menú
as selecciona la palab a que les p esen a dicul ades...
−
Cuáles se ían las he amien as más ú iles pa a acili a la lec u a de
los usua ios: sinónimos, an ónimos, deniciones...
−
Qué opciones pod ían esul a in e esan es: gua da y expo a los da-
os que ellos busca an, mos a ma cas de gua dado en el documen o...
An e es a p oblemá ica de no sabe qué in e az desa olla , ealizamos
una se ie de
mockups
2
pa a p esen á selos a los p o eso es del cen o, quiénes
pod ían decidi cuál es el diseño y la u ilidad más in e esan e o qué unciona-
lidad e a la más ap opiada pa a o ien a nos a la ho a de ealiza la aplicación.
A con inuación, se explican los
mockups
y las conclusiones ob enidas as
la eunión.
5.2.1. Mockup ejemplo 1: Click con el bo ón de echo.
Una ez ac i ada la ex ensión, como mos amos en la gu a 5.1, una de
las ideas p opues as consis ía en selecciona la palab a o el ex o que p esen e
dicul ades pa a el usua io pulsando click de echo pos e io men e sob e ella.
En el menú desplegado debemos selecciona
mi-plugin
, co espondien e con
la aplicación a desa olla . Es o desplega ía un submenú que enume a ía los
se icios p es ados po el p og ama. El usua io pod á escoge la opción que
necesi e. En es e ejemplo, clicando sob e deniciones pod á e odas las
acepciones de la palab a pe os po medio de una en ana eme gen e.
2
Fo omon ajes que pe mi en a los diseñado es g ácos y web mos a al clien e cómo
queda an sus diseños.
42
Capí ulo 5.
Diseño cen ado en el usua io
(a) Selección de los se icios que necesi a el usua io
(b) Ven ana eme gen e esul an e
Figu a 5.1: Selección de palab as pulsando bo ón de echo
5.2.2. Mockup ejemplo 2: Ba a de menú.
Como segunda p opues a, expusimos la posibilidad de diseña una ba a
de menú con una se ie de se icios que o ece ía la aplicación. An e es a
si uación, dis inguimos dos posibilidades:
5.2. Colegio Es udio 3 AFANIAS: P ime a eunión 43
−
Opción 1: Menú seleccionando la palab a.
El usua io de-
be selecciona el ex o de la página web en la que se encuen a que le
p esen e dicul ades y escoge una de las opciones exis en e en la ba a
de menú pe sonalizada como se mues a en la gu a 5.2, clicando la
opción deseada. Pos e io men e, apa ece á una en ana eme gen e con
odos los signicados de la palab a.
(a) Escogiendo la palab a seleccionada po el usua io
(b) Ven ana eme gen e esul an e
Figu a 5.2: Selección de palab as a a és de una ba a de menú
44
Capí ulo 5.
Diseño cen ado en el usua io
−
Opción 2: Esc ibi en el menú la palab a.
O a ca ac e-
ís ica consis ía en inclui una ba a de búsqueda en el menú pe so-
nalizado. De es a mane a, el usua io end ía la posibilidad de esc ibi
una palab a o ex o que le p esen e p oblemas. Una ez in oducida
la palab a, en el ejemplo de la gu a 5.3 debe íamos clica en la op-
ción deniciones. Nos apa ece á una en ana eme gen e con odas las
acepciones de la palab a pe os.
(a) Esc ibiendo la palab a deseada po el usua io
(b) Ven ana eme gen e esul an e
Figu a 5.3: Selección de palab as a a és de una ba a de menú esc ibiendo
ex o
5.2. Colegio Es udio 3 AFANIAS: P ime a eunión 45
5.2.3. Menú gua da .
Una ez explicada la emá ica de la aplicación, ambién plan eamos si
pod ía esul a in e esan e pode almacena los da os que los usua ios ha-
yan buscado en algún momen o, pa a que los puedan consul a siemp e que
quie an, como mos amos en la gu a 5.4
5.2.4. Ma cas de gua dado en el documen o.
Como úl ima apo ación a la explicación, concluimos mos ando una idea
ex aída de la aplicación
Na egaFácil
, que como mos amos en la gu a 5.5
consis e en añadi ma cas de gua dado en odas aquellas palab as que el
usua io haya buscado cualquie ipo de in o mación.
5.2.5. Colegio Es udio 3 AFANIAS: P ime as conclusiones
Una ez e minada la exposición, ue momen o de con as a nues as
ideas con las de Ca los Roldán, el cual nos indicó las siguien es pau as que
debe íamos ene en cuen a:
−
Algunos de los alumnos sí pueden selecciona ex o, pe o no odos.
−
Recalcó la impo ancia de amplia el ex o.
−
Algunos de los alumnos sí que pod ían que e ob ene in o mación
ex ual.
−
Indicó que esul a ía in e esan e pode ma ca la in o mación más im-
po an e a modo de esúmenes.
−
En cuan o al menú, deben en ende las palab as. Po ejemplo, en luga
de mos a la opción sinónimos sus i ui la po palab as pa ecidas.
O a opción se ía mos a pic og amas
3
en luga de palab as.
−
Se ía buena idea pone los ex os en mayúsculas.
−
Añadi la opción a na ega po You ube o la Wikipedia se ía una g an
apo ación.
−
Como cada alumno iene dis in os ipos de discapacidad, esul a in-
e esan e pode pe sonaliza pa a cada usua io qué opciones end á
disponibles en la ex ensión.
3
Dibujo o signo g áco que exp esa un concep o elacionado ma e ialmen e con el
obje o al que se ee e.

46
Capí ulo 5.
Diseño cen ado en el usua io
(a) Selecciona el se icio que que emos
(b) Escoge la palab a que necesi amos
(c) Ven ana eme gen e esul an e
Figu a 5.4: Ob eniendo los alo es gua dados po el usua io
5.3. Colegio Es udio 3 AFANIAS: Segunda eunión 47
Figu a 5.5: Ejemplo de ma cas de gua dado
En cuan o a los
mockups
p esen ados, seleccionó como mejo idea desa-
olla un menú pe sonalizado con la opción de pode esc ibi ex o en una
ba a de búsqueda. Desca ó la idea de gene a ma cas de gua dado, ya que
pod ía causa con usión.
T as deba i la mejo mane a de diseña la aplicación, decidimos con-
ce a una segunda eunión una ez ealizado odo o casi odo el desa ollo
de nues a ex ensión pa a mos á selo a los p o eso es de los alumnos pa a
que ie an el uncionamien o de nues a ex ensión y nos indica an si cub ía
sus necesidades. Pos e io men e, en una e ce a isi a al cen o, los alumnos
pod ían u iliza la ex ensión y conoce sus opiniones.
5.3. Colegio Es udio 3 AFANIAS: Segunda eunión
T as la ase de desa ollo de la aplicación ( e capí ulos 6 y 7), eali-
zamos una segunda eunión con el cen o la p ime a semana de mayo con
Juan Miguel Fe nández ( u o de los alumnos con los que íbamos a ealiza
la e aluación con usua ios nales).
48
Capí ulo 5.
Diseño cen ado en el usua io
Uno de los obje i os de la eunión consis ía en expone nues a he a-
mien a pa a conoce si la aplicación cub ía las necesidades de sus alumnos.
La espues a de Juan Miguel Fe nández esul ó muy posi i a, indicándonos
que nues o plugin eunía muchas uncionalidades que se ían de g an ayuda
pa a sus alumnos. Además, nos indicó ambién que inclui en las opciones
de nues a he amien a el blog del cen o esul a ía ú il du an e sus clases.
O o obje i o ue ma ca la echa pa a ealiza la p ueba con los alumnos
del colegio, jada pa a la segunda semana de mayo.
5.4. Colegio Es udio 3 AFANIAS: Te ce a eunión
El obje i o de es a eunión consis ió en p oba nues a aplicación con los
usua ios nales, en es e caso diez alumnos del colegio Es udio 3 AFANIAS.
Es a isi a se di idió en a ias pa es:
−
Mos a la aplicación a José Ramón Díaz, p o eso esponsable de los
alumnos en el aula de in o má ica.
−
Realiza una p esen ación en el aula de los alumnos mos ándoles po
p ime a ez la aplicación y enseñándoles cómo unciona. Pa a ello,
p epa amos una se ie de ac i idades en las que cub íamos oda la un-
cionalidad de nues a aplicación. Po ejemplo, pa a mos a la uncio-
nalidad de You ube, como Juan Miguel Fe nández nos indicó que en
su iaje de n de cu so i ían a Po A en u a, les mos amos ídeos en
You ube sob e las a acciones del pa que.
−
P oba nues a he amien a en el aula de in o má ica du an e una ho a
siguiendo las pau as de su p o eso . Allí, les indicó dis in as ac i idades
pa a p oba la aplicación: busca en in e ne sus películas a o i as
pa a lee su sinapsis y pos e io men e busca la polí ica de p i acidad
de
Wha sApp
, con el n de comp ende sus con enidos.
Finalmen e, los alumnos y p o eso es ellena ían unos cues iona ios que p e-
pa amos pa a conoce cuáles e an sus opiniones sob e la aplicación.
5.4.1. Colegio Es udio 3 AFANIAS: Cues iona ios sob e la
aplicación
Como abajo p e io a la eunión, c eamos una se ie de cues iona ios
o ien ados a los dis in os pe les de los usua ios con los que abaja íamos:
p o eso es y alumnos. Con es os cues iona ios que íamos consegui las opi-
niones pe sonales de odas las pe sonas que usa on nues a he amien a. De
es a mane a, conoce íamos como de ú il y ácil les esul ó nues o plugin.
5.4. Colegio Es udio 3 AFANIAS: Te ce a eunión 49
Pa a ello, c eamos una es uc u a ipo es de p egun as y espues as de
ipo semá o o con emo iconos
, como emos en la gu a 5.6, donde el e de
ep esen aba
bien
, el ama illo
egula
y el ojo
mal
.
Además, en el caso de los alumnos dejamos una úl ima p egun a donde
pudie an exp esa su opinión de mane a esc i a. En el caso del cues iona io
de los p o eso es, o mulamos una se ie de cues iones cuya espues a pudie an
desa olla de mane a esc i a.
Figu a 5.6: Respues as en o ma de semá o o
5.4.1.1. Cues iona ios sob e la aplicación pa a los usua ios
Las p egun as o muladas pa a los alumnos son:
−
¾Te ha ayudado la opción de Deniciones?
−
¾Te ha ayudado la opción de Palab as pa ecidas?
−
¾Te ha ayudado la opción de Palab as dis in as?
−
¾Te ha ayudado la opción de Pic og amas?
−
¾Te ha ayudado la opción de YouTube?
−
¾Te ha ayudado la opción de Wikipedia?
−
¾Te ha ayudado la opción de Resumen?
−
¾Te ha ayudado la opción de Blog del cole?
−
¾Te ha gus ado?
−
¾Te ha ayudado?
−
¾Lo usa ías pa a na ega po in e ne ?
−
¾Algo más que nos quie as deci ?
56
Capí ulo 6.
Desc ipción de la aplicación
6.1.2. Blog
A a és de es a opción, podemos accede al Blog del colegio Es udio 3
AFANIAS
1
, el cual se nos p esen a á en una en ana nue a. Incluimos el
blog pa a el es udio en el cen o con los usua ios nales, ya que apo a ía
ayuda a los docen es, sin emba go, es a opción es congu able.
6.1.3. Deniciones
Es a opción nos o ece las dis in as acepciones de la palab a escogida po
el usua io. Podemos encon a casuís icas dis in as.
Po un lado, supongamos que el usua io ha buscado la palab a
casa
. El
esul ado se ía el que mues a la gu a 6.2
Figu a 6.2: Deniciones de la palab a casa
De o o modo, cabe la posibilidad de que el usua io haya esc i o mal la
palab a o dicha palab a no exis a, po lo que el esul ado se á el que p esen a
la gu a 6.3
6.1.4. Palab as pa ecidas
Es a opción nos o ece la posibilidad de mos a al usua io los sinónimos
de la palab a que ha seleccionado. Usamos la nomencla u a
Palab as pa e-
cidas
pa a acili a a los usua ios su signicado. De nue o, encon amos dos
casuís icas, que el usua io haya buscado una palab a co ec a o inco ec a.
El esul ado es el mismo que pa a las deniciones.
1
h p://colegioes udio3.blogspo .com.es/

6.1. Ba a de menú de la aplicación 57
Figu a 6.3: Resul ado de una palab a que no p esen a deniciones
6.1.5. Palab as con a ias
Es a opción nos o ece la posibilidad de mos a al usua io los an ónimos
de la palab a que ha seleccionado. Usamos la nomencla u a
Palab as con a-
ias
pa a acili a a los usua ios su signicado. De nue o, encon amos dos
casuís icas, que el usua io haya buscado una palab a co ec a o inco ec a.
El esul ado es el mismo que pa a las deniciones.
6.1.6. Pic og amas
Po medio de es a opción, o ecemos a los usua ios la posibilidad de e
el ex o seleccionado en pic og amas. De es a mane a, como emos en la
gu a 6.4, mos amos los pic og amas asociados a la palab a
casa
. En caso
de no exis i un pic og ama pa a la palab a o ase escogida, mos amos un
mensaje de e o .
6.1.7. You ube
A a és de es a opción, podemos accede a
You ube
, ab iéndose en una
nue a pes aña. Cabe la posibilidad de ab i una nue a en ana de
You ube
simple, es deci , sin ninguna búsqueda ealizada. En el caso de que un usua io
haya seleccionado algún ex o, la en ana nue a se ab i á con la búsqueda
de la palab a seleccionada.
58
Capí ulo 6.
Desc ipción de la aplicación
Figu a 6.4: Pic og amas de la palab a casa
6.1.8. Wikipedia
A a és de es a opción, podemos accede a
Wikipedia
, ab iéndose en
una nue a pes aña. Cabe la posibilidad de ab i una nue a en ana de
Wi-
kipedia
sin ninguna búsqueda ealizada. Si el usua io ha seleccionado algún
ex o, la en ana nue a ab i á la
Wikipedia
con la búsqueda de la palab a
seleccionada.
6.1.9. Resumen
G acias a es a opción el usua io pod á lee el esumen de un ex o la go
que le dicul e su comp ensión. Como mos amos en la gu a 6.5, el usua io
ha de selecciona el ex o que le cause p oblemas de comp ensión y escoge
la opción de
Resumen
.
6.1.10. Lec u a en oz al a
Usando es a opción, el usua io pod á escucha en oz al a el ex o que
ha seleccionado o esc i o en la ba a de búsqueda.
6.1.11. Icono de los eng anajes
Como mos amos en la gu a 6.6, seleccionando es a opción el usua io
pod á e odas y cada una de las búsquedas que ha ealizado, así como
los elemen os que haya seleccionado en dicha búsqueda. Más adelan e en la
sección 6.3 explica emos cómo podemos gua da los da os.
6.2. Congu ación de la ba a de menú de la aplicación 59
(a) Tex o seleccionado que que emos esumi
(b) Resumen del ex o seleccionado
Figu a 6.5: Ejemplo usando la opción de esumen
6.2. Congu ación de la ba a de menú de la apli-
cación
La ba a ho izon al p esen a odos los se icios que nos o ece la apli-
cación. Sin emba go, es posible que no odos sean de u ilidad dependiendo
del usua io que lo use. Po ello, implemen amos una ba a congu able en
60
Capí ulo 6.
Desc ipción de la aplicación
Figu a 6.6: Ejemplo de los da os gua dados po el usua io
la que un u o del usua io pod á adap a la aco de con sus necesidades.
Supongamos que solo se p ecisa de los se icios
Deniciones
,
Palab as
pa ecidas
,
You ube
y
Lec u a en oz al a
. El usua io pod á clica en nues o
plugin, ab iéndose un menú donde pod á selecciona las opciones que desee,
siendo el esul ado que emos en la gu a 6.7.
6.3. Gua da los da os del usua io
O a uncionalidad que p opo ciona nues a aplicación es la posibilidad
de gua da los da os del usua io según las búsquedas que haya ealizado.
Pa a ello, el usua io ha de busca las palab as que le p esen en p oblemas.
Po ejemplo, como emos en la gu a 6.8, suponemos que busca los sinónimos
de
á bol
, selecciona la p ime a palab a y pulsa el bo ón
Gua da
. Además
desea conoce cuáles son las deniciones de la palab a
á bol
y selecciona la
p ime a acepción y pulsa el bo ón
Gua da
.
Una ez ealizadas las búsquedas pe inen es, el usua io pod á e sus
da os gua dados pulsando en la opción de los eng anajes, como explicamos
la sección 6.1.11. El esul ado se á el de la gu a 6.9, en la que podemos
e en colo ojo los da os ela i os a la búsqueda de las deniciones de la
palab a
casa
con las dos acepciones que escogió el usua io y en colo na anja
la búsqueda del pic og ama
mosqui o
.
Además, los da os gua dados po el usua io se almacenan de mane a
pe sis en e en el na egado . Es deci , si el usua io e mina la sesión apagando
el o denado o saliendo del na egado , la p óxima ez que na egue po las
6.4. Expo a los da os del usua io 61
páginas sus da os pe manece án gua dados.
6.4. Expo a los da os del usua io
Nues a aplicación dispone de la posibilidad de expo a los da os que el
usua io ha gua dado. Resul a in e esan e pode ene en un che o odas las
búsquedas que el usua io haya ealizado, con la nalidad de epasa en casa
los concep os es udiados en clase o pa a sabe cuáles son los é minos que
p esen an mayo dicul ad pa a el usua io.
Pa a pode expo a los da os, debemos ene abie a la en ana con los
da os gua dados del usua io. Como emos en la gu a 6.10 debemos pulsa el
bo ón
expo a
, lo que nos gene a á un a chi o con el nomb e
misDa osGua -
dados.h ml
donde se expo a án odos los elemen os gua dados del usua io
(a) Escogiendo las opciones a mos a en
la ba a de menú
(b) Resul ado de l a las opciones deseadas
Figu a 6.7: Resul ado de l a los se icios adecuados pa a el usua io

62
Capí ulo 6.
Desc ipción de la aplicación
con una apa iencia sencilla.
(a) Seleccionando los sinónimos de la palab a á bol
(b) Buscando las acepciones de la palab a á bol
Figu a 6.8: Gua dando los da os del usua io
6.4. Expo a los da os del usua io 63
Figu a 6.9: Ejemplo de los da os gua dados po el usua io
64
Capí ulo 6.
Desc ipción de la aplicación
(a) Seleccionando la opción de expo a da os
(b) Fiche o h ml expo ado con los da os gua dados
Figu a 6.10: Gua dando los da os del usua io
Capí ulo 7
A qui ec u a de la aplicación
Es e capí ulo lo dedica emos a es udia la es uc u a y a qui ec u a de
nues a ex ensión pa a Ch ome, a la que hemos dado el nomb e de ReadI .
En p ime luga explica emos a al o ni el cómo es án o denados los che os
que lo componen. De es a mane a, en un segundo is azo desa olla emos en
p o undidad su con enido y uncionalidad.
Además, explica emos de alladamen e como podemos hace que nues o
p oyec o sea ex ensible aco de a las nue as necesidades que los usua ios pue-
dan necesi a .
7.1. In oducción
En el capí ulo 4 desa ollamos en de alle cómo es á o mada la es uc u a
de una ex ensión de Google Ch ome. Dedica emos es a sección en in oduci
b e emen e la o ganización de los che os que componen el diseño de nues o
plugin.
Como emos en la gu a 7.1, podemos dis ingui en la capa más al a:
−
El che o de congu ación
mani es .json
.
−
El a chi o
popup.h ml
, que ep esen a la
acción del na egado
de nues-
a ex ensión.
−
El che o
s yle.css
, que se co esponde con uno de los
sc ip s de con-
enido
, en el que gua damos los es ilos que deseamos da a la pa e
isual de nues a ex ensión.
−
El a chi o
backg ound.js
, que ep esen a el
sc ip de ondo
de la apli-
cación.
65
72
Capí ulo 7.
A qui ec u a de la aplicación
−
ex Modal.js:
Es e es el che o enca gado de gene a el modal de
ex o co espondien e a las opciones
deniciones
,
sinónimos
y
an óni-
mos
. En la en ana eme gen e nos encon a emos con la posibilidad de
selecciona los elemen os. Po ejemplo, si llamamos al se icio de de-
niciones, el usua io pod á selecciona las acepciones que desee gua da
pulsando el bo ón
Gua da
.
−
imgModal.js:
Es e che o gene a el modal co espondien e a la op-
ción de los
pic og amas
. En la en ana eme gen e la aplicación mos a á
una se ie de imágenes haciendo e e encia a la palab a escogida po el
usua io, quién end á la posibilidad de gua da su búsqueda pulsando
el bo ón
Gua da
.
−
summa yModal.js:
Es e che o gene a el modal elacionado con la
opción de
esumen
. En la en ana eme gen e la aplicación p opo ciona-
á al usua io el esumen del ex o escogido po el usua io, quién pod á
escoge gua da lo pulsando el bo ón
Gua da
.
−
sa eChangesModal.js:
Es e che o gene a el modal as pulsa en
la opción de los eng anajes en la ba a de menú. En la en ana eme -
gen e el usua io pod á e odas sus búsquedas gua dadas. Si lo desea,
el usua io o el u o pod án escoge la opción
Expo a
pa a desca ga
en un che o la in o mación gua dada.
−
e o Modal.js:
Es e che o gene a el modal as pulsa la opción de
deniciones
,
sinónimos
,
an ónimos
,
pic og amas
o
esumen
en el caso
de que el usua io no haya seleccionado o buscado ninguna palab a o
ex o, mos ando al usua io el co espondien e mensaje in o ma i o.
−
noResul sSe iceModal.js:
Es e che o gene a el modal as pul-
sa la opción de
deniciones
,
sinónimos
,
an ónimos
o
pic og amas
en
caso de que la palab a buscada po el usua io no exis a o el se icio
co espondien e no o ezca esul ados, mos ando al usua io el co es-
pondien e mensaje in o ma i o.
7.2.6. S o age
En es a ca pe a almacena emos los che os elacionados con la ges ión de
los da os gua dados po el usua io. En ella podemos encon a dos che os:
−
expo Da a.js:
Se a a de un che o Ja aSc ip enca gado de ex-
po a las búsquedas que el usua io ha ealizado gene ando un a chi-
o
.h ml
que el usua io se desca ga á. Pa a ello, ob enemos los da os
gua dados po el usua io a a és de la unción
ch ome.s o age.sync.ge
p opo cionada po la API de Ch ome. Pos e io men e, almacena emos

7.3. Ins alación del plugin 73
los da os gua dados en un
s ing
con o ma o HTML. Finalmen e, ge-
ne a emos un che o con el nomb e
misDa osGua dados.h ml
que con-
end á las búsquedas gua dadas del usua io, con la echa y la ho a.
−
sa eChanges.js:
Se a a de un che o Ja aSc ip enca gado de gua -
da los da os de las búsquedas ealizadas po el usua io, haciendo uso
de las unciones
ch ome.s o age.sync.ge
y
ch ome.s o age.sync.se
que
nos p opo ciona la API de Ch ome. En p ime luga , gua da emos los
da os que el usua io desea gua da en un a ay. Pos e io men e, ha e-
mos uso de
ch ome.s o age.sync.ge
pa a ob ene da os gua dados po
el usua io an e io men e. En caso de se la p ime a ez que el usua io
gua da los da os, ha emos uso
ch ome.s o age.sync.se
gua dando los
da os del a ay. Si el usua io ya enía da os gua dados, conca ena e-
mos los da os de en ada almacenados en el a ay con los da os ya
gua dados, e i ando sob eesc ibi los da os.
Además, los da os gua dados po el usua io son pe sis en es, es deci , los
da os pe manece án gua dados aunque el usua io haya ce ado el na egado .
7.3. Ins alación del plugin
El p ime paso consis e en desca ga la ca pe a que con iene la unciona-
lidad de la ex ensión, ubicada en el siguien e enlace:
h ps://gi hub.com/NILG oup/TFG-1718-AccesibilidadWeb
.
Una ez desca gada y descomp imida la ca pe a es momen o de ca ga
nues a aplicación en local. Pa a ello, en amos en Google Ch ome y en la
pa e de a iba a la de echa del na egado , pulsamos los
es pun os
, seleccio-
namos la opción
Más he amien as
seguido de
Ex ensiones
, como se mues a
en la gu a 7.2.
Una ez si uados, es p eciso habili a la opción
Modo desa ollado
que
el na egado de Google Ch ome nos o ece, que se encuen a en la pa e
supe io de echa de la pan alla. T as habili a dicha opción, se mos a án
es nue as opciones como mos amos en la gu a 7.3, de las cuales debemos
selecciona la opción
Ca ga descomp imida
.
A con inuación, se nos ab i á un popup donde debemos añadi la u a
en la que se encuen a nues a ca pe a desca gada. Añadimos la u a y pul-
samos
Acep a
. Apa ece á en la pan alla nues a aplicación ca gada desde
local en el o denado del usua io.
74
Capí ulo 7.
A qui ec u a de la aplicación
Figu a 7.2: Ru a pa a accede a la pes aña
Ex ensiones
del na egado
Figu a 7.3: Opciones que apa ecen as habili a el
Modo desa ollado
7.4. Ex ensibilidad del plugin
Una ez explicado el con enido y la uncionalidad de nues a ex ensión
pa a Google Ch ome, amos a con inua explicando cómo un p og amado
puede añadi un nue o se icio que p ecise siguiendo unos pasos. De es a
mane a, nues a aplicación se á ex ensible pa a aquellas pe sonas que sigan
es os pasos. Es impo an e des aca que sus cambios solo se án isibles desde
local, es deci , desde el luga donde ca guen la ex ensión.
Una ez ca gada nues a aplicación, debemos ab i en el en o no que
deseemos el p oyec o,
A om
po ejemplo. Una ez abie o, localizamos los
che os que se deben modica pa a añadi el nue o se icio:
−
c ea ingSe icesMenu.js
7.4. Ex ensibilidad del plugin 75
−
oolba .h ml
−
op ion-selec ed.js
El p ime che o que modica emos se á
c ea ingSe icesMenu.js
, que
encon a emos en la u a  eadI /js/selec ionSe icesMenu/. En él, pode-
mos obse a la a iable
ea u es
, que con iene odos los se icios de los que
dispone el plugin. El desa ollado debe á añadi ahí el pa
[Cla e, Valo ]
del se icio que quie e, donde la
cla e
se co esponde con el iden icado con
el que se gua da á el se icio en la ba a de he amien as y
alo
ep esen a
el nomb e con el que se mos a á el se icio en nues a ba a.
Como mos amos en el siguien e ejemplo, el desa ollado debe á añadi el
co espondien e
[cla e, alo ]
de su se icio desc i os en la línea 10.
1
a ea u es = {
2
"De ini ions":"De iniciones",
3
"Synonyms":"Palab as pa ecidas",
4
"An onyms":"Palab as con a ias",
5
"You ube":"You ube",
6
"Wikipedia":"Wikipedia",
7
"Pic og ams":"Pic og amas",
8
"Summa y":"Resumen",
9
"Ou LoudReading":"Lec u a en oz al a",
10
"Cla e":"Valo "
11
};
El segundo a chi o a e oca se á
oolba .h ml
, que encon amos en la
u a  eadI /. El p og amado debe á añadi una linea de código pa a que
su nue o se icio se mues e en la ba a de he amien as.
Como mos amos a con inuación, el desa ollado debe á añadi su
[cla e,
alo ]
como se mues a en la línea 12 del ejemplo.
1
<ul>
2
<li><inpu id="sea chTex " ype=" ex " placeholde ="Busca ..."
></li>
3
<li id="Blog"><a h e ="#">Blog </a></li>
4
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
De ini ions" class="hidableI ems"><a h e ="#">De iniciones
</a></li>
5
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
Synonyms" class="hidableI ems"><a h e ="#">Palab as
pa ecidas </a></li>
6
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
An onyms" class="hidableI ems"><a h e ="#">Palab as
con a ias </a></li>
7
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
Pic og ams" class="hidableI ems"><a h e ="#">Pic og amas</a
></li>
8
<li id="You ube" class="hidableI ems"><a h e ="#">You ube </a></
li>
76
Capí ulo 7.
A qui ec u a de la aplicación
9
<li id="Wikipedia" class="hidableI ems"><a h e ="#">Wikipedia</
a></li>
10
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
Summa y" class="hidableI ems"><a h e ="#">Resumen </a></li>
11
<li id="Ou LoudReading" class="hidableI ems"><a h e ="#">
Lec u a en oz al a </a></li>
12
<li id="Cla e" class="hidableI ems"><a h e ="#">Valo </a></li>
13
<li da a- oggle="modal" da a - a ge ="#exampleModalLong" id="
ge ChangesId" s yle=" loa : igh "><a h e ="#"><i class=" a
a-cogs"></i></a> </li>
14
</ul>
El úl imo che o que se debe modica se á
op ion-selec ed.js
, si uado
en la u a  eadI /js/se ices. En es e che o se encuen an los pasos más
impo an es, ya que deni án el uncionamien o de su se icio.
Pa a ello, es impo an e que el desa ollado disponga de:
−
Un se icio que a a és de una llamada
GET
o
POST
sea capaz de
ob ene la in o mación deseada así como el o ma o en la que la ecibe.
−
Debe sopo a
h ps
, ya que sino su se icio solo unciona á en páginas
h p
.
En p ime luga , el desa ollado debe á añadi la uncionalidad pa a que
la aplicación econozca cuando el usua io ha escogido su opción. Pa a ello, el
desa ollado debe á añadi el código ela i o a las líneas 9-17 en el siguien e
ejemplo:
1
//Llama al se icio de sinónimos
2
$("#Synonyms").click( unc ion(){
3
i (selec ionableTex == ""){
4
ge Sea chTex ();
5
}
6
a u l = 'h ps://sesa . di.ucm.es/ gapi/se icios/ es /
sinonimos/json/' + use Tex ;
7
a se iceCalled = his. ex Con en ;
8
callingGe WebSe ice(u l, use Tex , se iceCalled);
9
});
10
//Llama al se icio nue o del desa ollado
11
$("#Cla e").click( unc ion(){
12
i (selec ionableTex == ""){
13
ge Sea chTex ();
14
}
15
a u l = u l_se icioNue o;
16
a se iceCalled = his. ex Con en ;
17
callingDe elope Se iceWebSe ice(u l, use Tex ,
se iceCalled);
18
});
Des acamos:
7.4. Ex ensibilidad del plugin 77
−
Línea 11. Con jQue y, comp obamos si el usua io ha escogido nues o
se icio.
−
Líneas 12-14. Comp obamos que el usua io haya seleccionado o buscado
alguna palab a o ex o.
−
Línea 15. Gua damos en la a iable
u l
la u l del nue o se icio que
el desa ollado desea añadi . En caso de que necesi e conoce el ex o
seleccionado po el usua io, lo encon a á en la a iable global
use Tex
.
−
Línea 16. Almacenamos en la a iable
se iceCalled
el nomb e del nue-
o se icio que el desa ollado quie e añadi . Es o se i á pa a gua -
da el í ulo en el modal donde se mos a án los da os gene ados po
el nue o se icio.
−
Línea 17. Llamamos a la unción
callingDe elope Se iceWebSe ice
,
que el desa ollado debe á implemen a pa a hace la llamada a su
se icio. Pod á escoge el nomb e y los pa áme os que sean necesa ios.
En la unción
callingDe elope Se iceWebSe ice
nomb ada an e io men-
e, el desa ollado ha de implemen a una unción que pa see los da os ge-
ne ados po su se icio y llama al modal co espondien e pa a mos a los
esul ados.
En caso de que ninguno de los modales o ecidos po la aplicación si uados
en la u a
eadI /js/modals/
se adap e a la o ma en la que el desa ollado
quie e mos a sus da os, debe á c ea un nue o che o, llamado po ejem-
plo
de elope Modal.js
en la u a an e io men e nomb ada que con end á la
unción
openDe elope Modal(...)
.
A con inuación, mos amos un ejemplo del modal que mues a los esul-
ados de los se icios
deniciones
,
sinónimos
y
an ónimos
pa a explica la
es uc u a que ha de segui :
1
unc ion openDe elope Modal(a ay , se iceCalled , selec edTex )
{
2
jQue y('#modalTi leId').emp y();
3
jQue y('#modalTi leId').append(se iceCalled + ': ' +
selec edTex );
4
jQue y('#modalBodyId').emp y();
5
6
jQue y.each(a ay , unc ion (index , alue) {
7
jQue y('#modalBodyId').append('<label ><inpu ype="checkbox"
class="op ionsSelec ed" id="' + index + '" alue="' +
alue +'">' + alue);
8
jQue y('#modalBodyId').append('</label ><b >');
9
});
10
11
jQue y('#sa eChangesId').show();

78
Capí ulo 7.
A qui ec u a de la aplicación
12
jQue y('#expo ChangesId').hide();
13
}
Donde des acamos:
−
Línea 1. El desa ollado puede añadi los a ibu os que necesi e en su
unción. En el ejemplo, la a iable
a ay
gua da, po ejemplo, las acep-
ciones de la palab a buscada po el usua io en caso de habe solici ado
las
deniciones
. La a iable
se iceCalled
indica el nomb e del se icio
que el usua io ha solici ado. La a iable
selec edTex
se co esponde
con el ex o que el usua io ha seleccionada.
−
Líneas 2 y 3. Se co esponden con el í ulo que mos a á el modal. El
desa ollado iene libe ad pa a gene a ese o ma o u o o que desee
pa a el í ulo. En el ejemplo, mos a ía el nomb e del se icio solici ado
seguido del ex o seleccionado po el usua io.
−
Línea 4. El desa ollado debe esc ibi es a línea, ya que si e pa a
limpia el cue po del modal y deja lo p epa ado pa a los da os nue os
que in oduci á.
−
Líneas 6-9. Se co esponden con la mane a en la que se mues an los
da os ob enidos del nue o se icio. El desa ollado dispone de libe ad
pa a gene a los da os de la mane a que desee.
−
Línea 11. El desa ollado pod á esc ibi es a línea al cual iene en el
ejemplo en caso de que e pe mi i al usua io gua da su búsqueda. En
caso con a io, debe á esc ibi
.hide()
en luga de
.show()
−
Línea 12. El desa ollado debe esc ibi es a línea, ya que no que emos
mos a el bo ón de expo a da os en es e modal.
Siguiendo es as pau as, el desa ollado pod á inclui en la aplicación
odos los se icios que p ecise, pudiéndolo adap a a las necesidades de los
usua ios.
Capí ulo 8
Conclusiones y abajo u u o
Una ez nalizado es e p oyec o llegamos a una se ie de conclusiones y
ecapi ulamos el abajo que espe amos desa olla en un u u o.
8.1. Conclusiones
Al inicio del p oyec o ealizamos una e apa de ap endizaje ace ca de
las dis in as necesidades que pueden p esen a de e minadas pe sonas na e-
gando en la web. Ap endimos que exis en dis in os colec i os, po ejemplo,
pe sonas que p esen an discapacidad o a anzada edad, en e o os, que se
en en an a una ba e a que les dicul a el acceso a in e ne , encon ándose
con p oblemas pa a lee , esc ibi o en ende ex os a la ho a de na ega po
la web.
T as es e p oceso de ap endizaje descub imos que las capacidades de com-
p ensión lec o a a ían de unas pe sonas a o as, po lo que comp endimos
la necesidad y la impo ancia de desa olla nues a aplicación decidiendo
cuáles se ían las uncionalidades que más ayuda p opo ciona ía a dichos co-
lec i os. An e es a p oblemá ica, con amos con la ayuda de los p o esionales
del colegio Es udio 3 AFANIAS pa a escoge las uncionalidades que más se
adap a an a los usua ios.
Pa a desa olla nues a aplicación, decidimos implemen a una ex ensión
pa a Google Ch ome que, a a és de se icios ex e nos, o ece dis in as
opciones que ayudan al usua io a comp ende el ex o al que se en en a.
Además, ReadI p esen a g andes en ajas:
−
Pe mi e congu a a los usua ios los se icios que necesi en, pudiendo
desca a aquellos que no le o ezcan ningún ipo de u ilidad.
−
Al a a se de una ex ensión, es á disponible pa a odos los usua ios
que quie an usa la.
79
80
Capí ulo 8.
Conclusiones y abajo u u o
−
En caso de necesi a lo, se pueden añadi nue os se icios que no con en-
ga ReadI . Un desa ollado pod á inclui en la aplicación un se icio
nue o que los usua ios p ecisen.
T as e alua nues a aplicación en el colegio Es udio 3 AFANIAS con p o-
eso es y diez alumnos del colegio, comp obamos que ReadI no solo acili a
la comp ensión de los ex os que o ece in e ne , sino que ambién impulsa
y anima a los usua ios a mejo a en su ap endizaje e independencia.
Hemos que ido deni ReadI como una aplicación que se congu a co-
mo apoyo o ayuda pa a colec i os de pe sonas que p esen an algún ipo de
dicul ad a la ho a de comp ende el lenguaje esc i o.
8.2. T abajo u u o
ReadI o ece un amplio abanico de posibilidades pa a segui ampliando
sus uncionalidades:
−
Mejo a algunos de los se icios que o ece ReadI , ya que algunos de
ellos no sopo an las ildes o ca ac e es especiales. Además, el se icio
de an ónimos a a ez o ece esul ados. O o ejemplo se ía mos a las
acepciones de las deniciones de mane a más sencilla.
−
O ece más se icios que puedan se de u ilidad pa a los usua ios.
Aumen a el abanico de posibilidades que o ece ReadI lo ha ía más
comple o y ú il, ya que se pod ía aba ca un mayo núme o de p oble-
mas que p esen en los usua ios a la ho a de comp ende el ex o.
−
Du an e la e aluación de ReadI con los alumnos del colegio Es udio
3 AFANIAS, uno de los p o esionales nos explicó que ealiza un se -
icio que pe mi ie a al usua io ansmi i po oz y que la aplicación
ecogie a los da os esul a ía in e esan e.
−
Du an e es a e aluación, descub imos que en el colegio algunos de los
enlaces con los que es udian son PDF. Una p opues a in e esan e se-
ía pode o ece los se icios que p esen a nues a aplicación en los
documen os PDF.
−
Una ez que el usua io busca, po ejemplo, el esumen de un ex o,
esul a ía in e esan e que pudie a selecciona las palab as que le p e-
sen en dicul ades en su lec u a.
Además, as comp oba la ayuda que p opo cionó nues a aplicación en
el colegio Es udio 3 AFANIAS, que emos que ReadI llegue a más colegios
8.2. T abajo u u o 81
u o os cen os pa a pode así elimina en medida de lo posible es a ba e a
a la que se en en an los usua ios. Pa a ello, se publica á en la Web s o e
de Ch ome.