2. § Introducción
§ Conceptos
importantes
del
diseño
web
§ Modelo
de
Área
§ Modelo
de
Bo>cario
y
Gaudioso
§ Profundización
en
los
contenidos
web
§ Accesibilidad
§ Conclusiones
§ BibliograEa
§ WebgraEa
3. Proponemos
a
con>nuación
algunas
reflexiones
y
orientaciones
en
el
diseño
de
espacios
web
de
carácter
educa>vo,
barajando
aspectos
como
la
representación
de
la
información,
la
navegación,
la
hipertextualidad,
el
diseño,
etc.
4. ü El
usuario
de
Internet,
¿lee
ó
simplemente
hojea
las
páginas
de
la
red?
ü Los
contenidos
extensos,
¿atraen
la
atención
del
usuario?
ü El
abuso
de
las
mayúsculas,
¿ayuda
ó
entorpece
la
lectura
en
la
web?
ü Los
enlaces
rotos ,
¿causan
una
buena
ó
mala
impresión
en
el
usuario
de
la
red?
5. § Los
textos
móviles
y
la
tecnología
puntera,
¿ayudan
al
buen
diseño
web?
§ Las
imágenes
sin
texto
alterna>vo,
¿proporcionan
suficiente
información?
§ Los
fondos
de
pantalla
y
colores
llama>vos,
¿permiten
leer
con
facilidad?
§ ¿Son
realmente
accesibles
para
todos
los
usuarios
las
webs
que
visitamos?
6. Todos
los
usuarios,
incluso
los
discapacitados,
>enen
derecho
navegar
y
aprender
en
la
web.
No
olvidemos
que
éstos
ob>enen
un
aliciente
especial
al
navegar
en
Internet.
Por
ello
debemos
hacer
diseños
pensando
también
en
ellos.
7. § Usabilidad.
Facilidad
de
uso
y
amabilidad
del
entorno.
§ Navegabilidad.
Alude
a
la
estructura
que
permite
al
usuario
una
navegación
fácil.
§ Accesibilidad.
Requisito
que
debe
reunir
una
web
para
que
los
discapacitados
accedan
a
la
información.
8. ü El
usuario
es
el
que
manda.
ü La
calidad
se
basa
en
la
rapidez
y
la
fiabilidad.
ü Seguridad.
ü Los
malos
enlaces
hacen
perder
la
confianza
en
el
web.
ü Simplifica,
reduce
y
op>miza.
ü Conclusiones
al
principio.
ü No
poner
cosas
que
los
usuarios
no
necesiten.
ü Poner
buenos
contenidos.
9. q Diseño
pedagógico.
Obje>vos,
estrategias,
evaluación,
público
al
que
va
dirigida,
etc.
q Diseño
estructural.
Estructuración
de
los
contenidos
(división
en
varias
webs).
q Diseño
formal.
Edición
de
la
página
web
u>lizando
un
editor
adecuado.
10. Tareas
en
el
diseño
y
desarrollo
de
una
web
docente:
§ Clarificar
el
porqué
y
para
qué
de
la
elaboración
del
material.
§ Iden>ficar
las
caracterís>cas
de
los
usuarios.
§ Planificar
y
desarrollar
los
componentes
didác>cos.
§ Planificar
la
estructura
del
web.
§ Diseñar
el
formato
o
interface
gráfico.
§ Desarrollar
las
páginas
que
configuran
el
material.
§ Comprobar
en
dis>ntos
navegadores
el
web
elaborado.
§ Realizar
una
prueba
con
un
grupo
de
alumnos.
§ Publicar
el
material
en
Internet.
11. Aspectos
reseñables
en
cuanto
a
los
contenidos
del
web:
§ Obje>vos
claros.
§ Componentes
aconsejados
como
un
mapa
web,
resumen
introductorio
y
datos
de
referencia.
§ Contenidos
estructurados.
§ Navegabilidad
adecuada.
§ Gráficos
con
texto
alterna>vo
y
con
información
de
interés.
12. § Estructurar
y
secuenciar
los
contenidos.
§ Incluir
las
caracterís>cas
de
los
potenciales
usuarios.
§ Considerar
que
el
material
se
u>lizará
lejos
de
la
presencia
del
profesor.
§ Incorporar
ac>vidades
interac>vas.
§ Enlazar
con
otras
webs
relacionadas.
§ Incorporar
recursos
de
comunicación
telemá>ca.
13. Algunos
errores
de
diseño
son:
§ Tecnología
puntera.
§ Texto
y
gráficos
móviles.
§ Información
desactualizada.
§ Tiempo
de
carga
excesivos.
14. Algunas
normas
básicas
de
legibilidad
(según
Marcelo
et
al,
2002)
son:
§ Texto
negro
sobre
blanco.
§ Fondos
con
colores
claros.
§ Fuentes
suficientemente
grandes.
§ Texto
quieto.
§ Alineación
del
texto
a
la
izquierda.
§ U>lización
de
la
fuente
serif.
§ Evitar
las
mayúsculas.
15. La
accesibilidad
consiste
en
proporcionar
flexibilidad
para
acomodarse
a
las
necesidades
y
preferencias
de
los
usuarios.
16. Las
discapacidades
se
clasifican
en:
§ Discapacidades
visuales.
§ Discapacidades
audi>vas.
§ Discapacidades
motoras.
§ Discapacidades
cogni>vas.
19. § Ciegos.
Tienen
problemas
con
las
imágenes,
Java-‐
Script,
flash,
plug-‐ins
y
tablas.
§ Personas
con
restos
visuales.
Necesitan
letras
grandes.
§ Daltónicos.
El
color
no
debe
representar
información
relevante.
Si
se
u>liza
el
rojo
sería
conveniente
u>lizar
alguna
marca
o
señal.
20. § Sordos.
Los
clips
de
vídeo
y
los
sonidos
les
crean
problemas.
Es
conveniente
u>lizar
subctulos.
§ Sordo-‐ciegos.
Son
los
que
>enen
más
problemas.
Necesitan
lectores
de
Braille.
§ Con
restos
audi?vos.
Necesitan
de
tecnología
que
amplifique
el
sonido.
21. § Personas
con
discapacidades
motoras.
Deben
u>lizar
ratones
cefálicos,
varillas
bucales,
punteros,
teclados
expandidos,
etc.
§ Personas
con
discapacidades
cogni?vas.
Pueden
u>lizar
lectores
de
pantalla,
pero
necesitan
gráficos
e
imágenes.
Las
imágenes
deben
llevar
texto
alterna>vo.
22. § Igualdad.
§ Flexibilidad
en
el
uso.
§ Uso
simple
e
intui>vo.
§ Información
percep>ble.
§ Mínimo
esfuerzo
Esico.
23. § Imágenes
con
texto
alterna>vo.
§ No
u>lizar
animaciones.
§ No
u>lizar
el
color
en
informaciones
importantes.
§ Describir
claramente
los
enlaces.
§ Organización
clara
de
los
contenidos.
§ Marcar
los
cambios
de
idioma.
§ Evitar
las
tablas,
pero
si
se
usan,
hacer
tablas
línea
a
línea.
§ Evaluar
el
si>o
web
con
alguna
herramienta
de
accesibilidad.
24. § Definir
los
obje>vos
de
la
web.
§ Delimitar
el
grupo
des>natario.
§ Seleccionar
los
contenidos.
§ Diseñar
(según
pautas
de
accesibilidad).
§ Evaluar
la
web.
§ Colgar
la
web
en
Internet
(si
la
evaluación
hubiese
sido
posi>va)
25. En
la
dirección:
hdp://www.nils.org.au/ais/web/resour
ces/toolbar/
podemos
encontrar
una
barra
con
un
conjunto
de
herramientas
para
la
validación
de
la
accesibilidad
de
webs.
Esta
barra
se
descarga
y
se
incorpora
al
navegador.
26. U>lizando
el
test
T.A.W.
(en
español)
y
aplicándolo
a
la
página
de
la
UNED,
hdp://www.uned.es
obtenemos
lo
siguiente:
Se
han
encontrado
errores
que
hacen
esta
página
inaccesible.
Debe
solucionarlos
para
obtener
el
icono
de
accesibilidad
TAW.
Revise
los
errores
y
como
solucionarlos.
Nos
vuelve
a
ocurrir
lo
mismo
si
aplicamos
el
test
a
la
página
del
CNICE
hdp://www.cnice.mecd.es
27. • No
existen
recetas
para
un
buen
diseño,
todo
depende
de
la
finalidad
del
web.
• Hay
que
aprovechar
la
hipertextualidad
y
no
poner
en
la
red
sólo
contenidos
de
formato
impreso.
• La
producción
de
materiales
web
es
una
labor
de
equipo:
expertos
en
didác>ca,
expertos
en
diseño
gráfico,
técnicos
informá>cos
y
expertos
en
contenidos
del
web.
• La
sencillez
del
diseño
es
un
parámetro
básico.
• Los
contenidos
han
de
ser
de
calidad
y
deben
estar
actualizados.
28. § AGUADED
Y
CABERO.
(2002).
Educar
en
red.
Internet
como
recurso
para
la
educación.
Málaga.
Ediciones
Aljibe.
§ AREA,
M.
(2003).
Guía
didác?ca.
Creación
y
uso
de
webs
para
la
docencia
universitaria.
§ BOIS,
O.
(2000).
Web
sin
barreras:
las
nuevas
ventajas
aportadas
por
HTML4
y
las
CSS2.
En
I
Congreso
virtual
integración
sin
barreras
en
el
siglo
XXI.
§ BOTICARIO
Y
GAUDIOSO.
(2001).
Aprender
y
formar
en
Internet.
Madrid.
Paraninfo.
§ MARCELO
et
al.
(2000).
E-‐learning.
Teleformación.
Barcelona.
Ediciones
Ges>ón
2000.
§ MEYERTONS
Y
BOWERS.
(2000).
Accesibility
of
on
line
materials.
En
hdp://www.access.pdx.edu/workshops.
29. § hdp://dewey.uab.es/pmarques/buenidea.htm
Ideas
para
aprovechar
el
ciberespacio
en
educación.
§ hdp://www-‐3.ibm.com/able/accessweb.html
Lista
con
problemas
de
accesibilidad
y
soluciones
posibles.
§ hdp://www.w3.org
Pautas
de
diseño
web
de
la
WAI.
§ hdp://www.cast.org/bobby/
Página
con
el
programa
Bobby
de
validación
de
accesibilidad.
§ hdp://validator.w3.org/
Página
con
el
programa
Validator
para
el
estudio
de
la
accesibilidad
de
una
web.
