Post on 04-Jan-2022
Red Colaborativa para soportar los procesos
de enseñanza-aprendizaje en el área de
Interacción Humano - Computador a nivel
Iberoamericano
UN AÑO DE WEBINARS SOBRE HCI EN ESPAÑOL
Adaptación en la Web Nuria Medina Medina nmedina@ugr.es
Grupo de investigación GEDES, Universidad de Granada, España
20 de junio de 2019
El modelo hipermedia
• El origen de la Web
Adaptación en la Web, por Nuria Medina Medina 2
Vannevar Bush, 1945: “As we may think”
automatización
Memex: recuperación asociativa de información
tecnología
H
I
P
E
R
T
E
X
T
O
El modelo hipermedia
• El origen de la Web
Adaptación en la Web, por Nuria Medina Medina 3
"Con 'hipertexto', me refiero a una escritura no secuencial, a un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla interactiva. De acuerdo con la noción popular, se trata de una serie de bloques de texto conectados entre sí por nexos, que forman diferentes itinerarios para el usuario"... "Hipertexto es una combinación de textos en lenguaje natural y la capacidad del ordenador de exposición dinámica de un texto no lineal". Ted Nelson, 1965
hipermedia
Internet
En 1989, dentro del CERN (el nodo de Internet más grande de Europa), Tim Berners-Lee tuvo la idea de unir Internet y el hipertexto dando lugar a la World Wide Web.
Necesidad de adaptación
• Sobrecarga cognitiva
Adaptación en la Web, por Nuria Medina Medina 4
• Desorientación
Es necesario adaptar tanto la estructura de enlaces (navegación) como la presentación de contenidos (nodos y anclajes).
Sistemas hipermedia adaptativos
Adaptación en la Web, por Nuria Medina Medina 5
Sistema Hipermedia
Modelo de Usuario
Adaptación del SH
usando el MU
Los Sistemas Hipermedia Adaptativos surgen a finales de los 80 para mejorar la interacción del usuario con los sistemas hipermedia tradicionales.
SHA definido por Peter Brusilovsky
Sistemas hipermedia adaptativos
Adaptación en la Web, por Nuria Medina Medina 6
Diseño de la Adaptación
Diseño del MU
Diseño del SH
Técnicas de adaptación
Adaptación en la Web, por Nuria Medina Medina 7
Métodos de Adaptación
Consejo de navegación
Soporte de orientación
Vistas personalizadas
Navegación Adaptativa
Presentación Adaptativa
Explicación adicional
Variantes de la información
Ordenación de la información
Técnicas de adaptación
Adaptación en la Web, por Nuria Medina Medina 8
• De la Presentación
– Texto condicional
– Estirar/encoger texto
– Variantes de fragmento
– Variantes de página
– Técnicas basadas en marcos
• De la Navegación – Consejo directo
– Ordenación de enlaces
– Anotación de enlaces
– Borrado de enlaces
– Ocultación de enlaces
– Deshabilitación de enlaces
Técnicas de adaptación
Adaptación en la Web, por Nuria Medina Medina 9
Texto condicional, explicación adicional de prerrequisito (solo aparece si el usuario no tiene este conocimiento previo)
Variante de fragmento del anterior (se usa cuando el nivel lingüístico del lector es más bajo)
*página original (adaptación simulada)
Técnicas de adaptación
Adaptación en la Web, por Nuria Medina Medina 10
Reordenación de enlaces (según los intereses del usuario)
Consejo directo (se recomienda en función de los intereses del usuario)
Deshabilitación de enlaces (se anulan dos enlaces no recomendados para el usuario)
*página original (adaptación simulada)
Adaptación a…
Adaptación en la Web, por Nuria Medina Medina 11
Una vez modelado un grupo de usuarios, ese conocimiento puede usarse para adaptarnos al grupo o para sugerir mejoras a cada individuo.
El Modelo de Usuario se puede representar con estereotipos, con tablas, con redes bayesianas, redes de Petri, etc.
Puede haber otros tipos de adaptación como adaptación al dispositivo, adaptación al entorno, etc., pero la adaptación al usuario es la más habitual.
Adaptación al usuario
Usuario individual
Recomendación individual
Grupo de usuarios
Recomendación al grupo
Recomendación individual
Interacción con la adaptación
Adaptación en la Web, por Nuria Medina Medina 12
Interacción Usuario-Adaptación
Sin Control Adaptación
Con Control Adaptación
Adaptativo Adaptable/Configurable
El usuario indica explícitamente todos los ajustes que desea en el sistema
El sistema infiere los ajustes que debe hacer para mejorar la experiencia del usuario
Modelado de usuario
Adaptación en la Web, por Nuria Medina Medina 13
• El modelo de usuario, al que de forma
abreviada notamos MU, es precisamente,
la representación interna que el sistema
mantiene del usuario para
posteriormente ser capaz de adaptar su
estructura y navegación a las
características y necesidades del mismo
• Puede incluir: contexto personal,
conocimientos, experiencia, intereses,
preferencias, historia, objetivos,
necesidades, intenciones, estado físico y
psicológico, ubicación, etc.
• El MU ha sido definido por varios autores
como “el espejo de usuario”
– Debe ser continuamente actualizado de
forma que siempre refleje el estado
actual del usuario
• El MU será consultado por el sistema para
ajustarse de acuerdo a lo que se ha
definido previamente en los mecanismos
de adaptación
• Así, la tarea de modelado de usuario tiene
una influencia decisiva sobre la idoneidad
de la adaptación
Taxonomía de modelos de usuario
Adaptación en la Web, por Nuria Medina Medina 14
• Se ha definido una taxonomía para clasificar los distintos tipos de modelos de usuario de acuerdo a su estructura y gestión
Medina-Medina, N., & García-Cabrera, L. (2016). A taxonomy for user models in adaptive systems: special considerations for learning environments. The Knowledge Engineering Review, 31(2), 124-141.
Taxonomía de modelos de usuario
Adaptación en la Web, por Nuria Medina Medina 15
Taxonomía de modelos de usuario
Adaptación en la Web, por Nuria Medina Medina 16
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 17
Web adaptativa Web dinámica
• Un sitio web dinámico es aquel que cambia su contenido o visualización en función de uno o varios parámetros Normalmente, para averiguar el valor de un parámetro es necesario acceder a una base
de datos Para consultar los datos de una tabla de la base de datos se suelen usar lenguajes de
consulta, tipo SQL
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 18
• El procesamiento para generar las secciones dinámicas de la página web se puede hacer en:
El servidor que aloja la
página, usando lenguajes tipo JSP, PHP o ASP
El cliente que visualiza la página web, usando lenguajes tipo javaScript
javaScript
PHP
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 19
DHTML: Integra HTML con hojas de estilo (CSS)
para el cambiar el formato y JavaScript para
cambiar el comportamiento de determinados
elementos de la página
Con DOM (API para obtener el modelo de objetos del
documento) se puede hacer accesible cada párrafo
del texto, cada celda de una tabla, cada carácter, etc.,
y luego modificarlo con JavaScript
PROCESAMIENTO EN EL CLIENTE
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 20
PROCESAMIENTO EN EL CLIENTE
JavaScript es un lenguaje de programación
interpretado que puede usarse en páginas web
mediante el uso de etiquetas <script> </script>
El código JavaScript se ejecuta en el navegador web
dónde se visita la página, por lo tanto debe estar
habilitado en el navegador
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 21
PROCESAMIENTO EN EL SERVIDOR
PHP: Lenguaje de programación para el pre-
procesamiento del hipertexto
Se incluye el código script con las etiquetas
<?php ?> dentro del html y se ejecuta en el
servidor antes de devolver la página
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 22
PROCESAMIENTO EN EL SERVIDOR
MySQL: Es un sistema de gestión de bases
de datos relacional, que puede ser usado
para almacenar y consultar los datos
dinámicos y parámetros en el servidor
Desde PHP se puede acceder fácilmente a
una base de datos en MySQL empleando
las funciones que existen
phpMyAdmin es una herramienta escrita en PHP para crear bases de datos MySQL utilizando el navegador web
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 23
<?php
// Consultar el valor de un atributo para un usuario
$gusto="";
$consulta = "SELECT `puntoCocinado` FROM `usuarios` where
`usuarios`.`id` = $id_usuario_actual";
$resultado = mysql_query($consulta);
$row = mysql_fetch_array($resultado);
$gusto = $row['puntoCocinado'];
?>
PROCESAMIENTO EN EL SERVIDOR
<?php
// Conectar con la base de datos denominada usuarios
$conectar = mysql_connect(‘servidor', ‘usuario', ‘clave');
if (!$conectar)
{
die('Error de conexión con el servidor de la BD');
}
mysql_select_db("usuarios", $conectar);
?>
Tecnología para web adaptativa
Adaptación en la Web, por Nuria Medina Medina 24
<?php
//Texto condicional
if ($edad < 18){
echo "Avisa a un adulto para que haga el encargo";
}
?>
PROCESAMIENTO EN EL SERVIDOR
<p>
Cocinamos los pollos más sabrosos...
<br>
Compruébalo tú mismo en la foto:
<br>
// Variantes de un fragmento
<img src=
<?php
if ($gusto == "hecho") echo "polloMuyHecho.jpg>";
else echo "polloPocoHecho.jpg>";
?>
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 25
GOOGLE NOTICIAS
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 26
GOOGLE NOTICIAS
GOOGLE NOTICIAS
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 27
YOUTUBE
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 28
Vídeos de los canales en los que nos hemos suscrito
Vídeos recomendados en función de los vídeos previamente visualizados
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 29
YOUTUBE
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 30
E-COMMERCE
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 31
E-COMMERCE
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 32
E-COMMERCE
Ejemplos de adaptación en la Web
Adaptación en la Web, por Nuria Medina Medina 33
E-COMMERCE
Conclusión
Adaptación en la Web, por Nuria Medina Medina 34
• Modelo de usuario
• Web adaptativa
• Modelo de adaptación
• Modelo de dominio del sitio web
Determinar la estructura y
funcionalidad del sitio web
Identificar las necesidades
de adaptación
Identificar los atributos del usuario que
determinarán la adaptación
Concretar las técnicas de
adaptación y la tecnología de web dinámica
Red Colaborativa para soportar los procesos
de enseñanza-aprendizaje en el área de
Interacción Humano - Computador a nivel
Iberoamericano
UN AÑO DE WEBINARS SOBRE HCI EN ESPAÑOL
Adaptación en la Web Nuria Medina Medina nmedina@ugr.es
Grupo de investigación GEDES, Universidad de Granada, España
20 de junio de 2019