Departamento de Lenguajes y

Sistemas Informáticos

Diseño de sitios web

Curso 2017-2018

[Link]
Departamento de Lenguajes y Sistemas Informáticos
Ingeniería Web – Curso 2017-2018

Contenidos
• AJAX
• RIA
• Patrones RIA de diseño web

• Referencias
Ingeniería Web – Curso 2017-2018

AJAX
• Asynchronous Javascript And XML
• XML y JavaScript asíncronos
• No es una nueva tecnología,
– sino un conjunto de tecnologías, el uso de las
cuales permite una nueva filosofía de desarrollo de
aplicaciones web.
• Combinación de HTML/XHTML, CSS, Javascript,
DOM, XML, XSLT, HTTP.
– Todas ellas son estándares abiertos, tecnologías
implantadas, difundidas y conocidas en Internet.
Ingeniería Web – Curso 2017-2018

AJAX
• La filosofía que se plantea con AJAX es:
– Cargar y renderizar una página para luego
mantenerse en esa misma página mientras scripts y
rutinas van al servidor buscando, en background,
los datos que son usados para actualizar la página
solo re-dibujando la parte de la página que cambia.
• Se aporta un nuevo enfoque al desarrollo de
• aplicaciones web.
– Funcionamiento similar a las aplicaciones
autónomas.
– Cambio del concepto de programación clásico.
– Reducción del tráfico que generan las aplicaciones
web en cuanto al tamaño de las transacciones.
Ingeniería Web – Curso 2017-2018

AJAX
Ingeniería Web – Curso 2017-2018

AJAX
• La mayor parte del tráfico
se da al iniciar la
comunicación
• Durante la interacción del
usuario se envía la mínima
cantidad de información posible
para agilizar la aplicación.
• La página no espera la
respuesta del servidor.
• Se generan transacciones
asíncronas mientras la
aplicación continua
funcionando.
Ingeniería Web – Curso 2017-2018

AJAX
• Ventajas
– Transacciones asíncronas, el usuario
no tiene que esperar después de una petición.
– Aproximación a las aplicaciones tradicionales en
cuanto a interactividad y velocidad de respuesta.
• Desventajas
– Puede aumentar el número de peticiones contra el
servidor.
– Pérdida de control de navegación.
• Los botones atrás y adelante del navegador
dejan de funcionar.
• No se puede crear un favorito (marcador)
Ingeniería Web – Curso 2017-2018

RIA
• La filosofía de las RIA es emular en una
aplicación web el comportamiento de una
aplicación de escritorio:
– Tiempos de respuesta más rápidos o
instantaneos (anticipación al usuario).
– Interfaces mejorados, controles de
formularios ampliados respecto el
repertorio del HTML.
• Este concepto ha permitido sitios web como:
gmail, dropbox, y la llamada computación en
la nube: cloud computing y cloud apps.
Ingeniería Web – Curso 2017-2018

RIA
• Rich Internet Application
• Aplicación web con características y
comportamiento de una aplicación de
escritorio.
• Usan las últimas tecnologías web:HTML5,
CSS3, Java (AJAX).
• Anteriormente se basaban en otras
tecnologías: Flash, JavaFX, Silverlight, etc.
• Actualmente se usan frameworks basados
en HTML5 como: GWT, Dojo, Kendo UI, .net
Framework, etc.
Ingeniería Web – Curso 2017-2018

RIA
• La filosofía de las RIA es emular en una
aplicación web el comportamiento de una
aplicación de escritorio:
– Tiempos de respuesta más rápidos o
instantaneos (anticipación al usuario).
– Interfaces mejorados, controles de
formularios ampliados respecto el
repertorio del HTML.
• Este concepto ha permitido sitios web como:
gmail, dropbox, y la llamada computación en
la nube: cloud computing y cloud apps.
• Cuidado con la accesibilidad!!!
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• RIA ofrece interactividad y reacción similar a una
aplicación de escritorio, si está bien diseñada.
• Por otro lado, establece una comunicación más
constante con el servidor con el fin de dar respuesta a
la interacción del usuario. Ya no hay un evento de
'submit' claro.
• Flash primero, AJAX después y HTML5+CSS3 en la
actualidad han permitido este tipo de sitios web.
• RIA permite aplicaciones o prestaciones como:
editores de texto avanzados, formularios inteligentes
con validación en tiempo real, campos con
autocompletado de valores, páginas con contenido
editable in situ, filtrado y ordenación en tiempo real
contra el servidor, drag'n'drop, etc.
• Además de aportar efectos visuales como:
animaciones, transiciones, carruseles, etc.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Editor avanzado (Rich-text editor)
– Permite al usuario introducir información textual
enriquecida (negrita, subrallados, imágenes, enlaces,
etc.) con un editor y los controles necesarios.
– Mostrar el textarea y los controles necesarios,
funcionando con filosofía WYSYWYG.
– Los usuarios no tienen porque saber HTML pero si
estan familiarizados con procesadores de texto.
– Posibilidad de cambiar a texto plano o vista HTML.
– Ofrece opciones apropiadas al entorno: tablas en
gmail?
– Posibilidad de ampliar el área de edición.
– Apto para blogs, mailers, documentación on line, etc.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Formulario inteligente (Rich form)
– Para evitar envios de formularios erróneos y esperas
en obtener las respuestas, los formularios se pueden
diseñar 'inteligentes'.
– Pistas, formatos flexibles, valores por defecto,
indicadores de campos obligatorios, autocompletado,
sugerencias de valores, etc.
– Validar cada campo del formulario (onblur),
mostrando mensajes de error apropiados.
– Modificar los campos en funcion de las elecciones del
usuario.
– Diseñar los controles para minimizar las posibilidades
de error.
– Indicadores de campo OK, medidores de 'correctitud'.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Autocompletado o sugerencias de campos
– HTML: Input/list + datalist/option.
– Sugerir al usuario alternativas mientras escribe y
permitir seleccionar una de ellas. Y, conforme
escribe, va cribando las alternativas posibles,
hasta quedar solo una o ninguna.
– Permitir acceder con el teclado a una de las
alternativas y habilitar una tecla (enter, tab) para
seleccionarla.
– Remarcar la alternativa coincidente en la lista de
sugerencias.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Edición in situ
– Con el fin de hacer la interaccion más fluida, en
algunos casos es posible habilitar la opcion de
permitir modificar datos 'in situ' en un listado o
una vista detalle.
– Solo si son pocos datos. A veces incluso se
puede permitir añadir nuevos datos.
– Modificar visualmente, mostrar un cuadro de texto
editable.
– Mostrar información e instrucciones sobre como
completar la modificación. Permitir validarla o
cancelarla.
– En la propiedad a editar, selecciona todo el texto
automáticamente.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Vista global y detallada
– Se trata de permitir al usuario moverse entre la
vista detalle y la global, manteniendo en la vista
detalle un acceso o resumen de la global (p.e.:
minimapa).
• Preview en tiempo real
– Ofrecer una vista inmediata de resultados de las
opciones del usuario, en tiempo real, sin
necesidad de hacer un submit. Para ello se deben
aceptar algunas opciones con valores por defecto
que el usuario todavía no ha escogido.
– En items visuales o 3D, permitir ofrecer varias
vistas, en lugar de una.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Consultas dinámicas
– Permitir al usuario filtrar resultados por medio del
uso combinado de sliders, botones de radio,
botones de comprobación, etc.
– La idea es conseguir un filtrado asíncrono
mientras el usuario 'trastea' con el formulario,
evitando en todo momento realizar un submit
clásico.
– Las opciones deben estar visibles en todo
momento, para realzar el efecto de filtrado
dinámico, evitando usar desplegables.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Drag-and-Drop
– Permitir áreas de drag and drop como método
visual para organizar items, mover elementos,
construir listas, indicar una acción, cambiar
tamaño de un objeto.
– Esto permite reorganizar elementos más
interactivamente sin necesidad de realizar un
submit y tener que esperar sus resultados para
ver el cambio efectuado en pantalla.
– Mostrar claramente los objetos arrastrables y las
áreas donde soltarlos.
• Remarcar objetos o áreas.
• Cambiar el cursor del ratón.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Slider
– Mostrar un slider para gestionar datos que
permiten un rango de valores, de esta forma es
más visual y se reducen posibilidad de errores.
– Tipos de sliders: numéricos enteros, decimales,
color-pickers, cantidades monetarias, etc.
– En caso de valores muy precisos, permitir
escribirlo en un campo de texto.
– Mostrar los valores mínimos y máximos
permitidos, así como el valor actualmente
seleccionado.
– Mostrar valores intermedios que faciliten al
usuario saber los intervalos o saber por donde va.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Animaciones y transiciones
– Para indicar al usuario que ha realizado una
determinada acción (al no haber recarga
completa puede ser confuso), se pueden usar
efectos visuales para llamar la atención del
usuario.
– Iconos animados, CSS3, relojes de espera, etc.
– Transiciones al mostrar nuevo contenido: slides,
fades (degradados), etc.
– Animaciones breves, evitando efectos o
transiciones no necesarios que pueda distraer la
atención del usuario.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Barras de progreso
– En algunas tareas que pueden tardar, es conveniente
mostrarle al usuario una barra de progreso que le de
una idea del estado de consecución del proceso.
– Le indicamos al usuario que la tarea esta todavia en
ejecución.
– Un gráfico animado, un mensaje 'cargando...'.
• Remarcar cambios
– Remarcar las partes de la página que han cambiado
(que muestran información novedosa) puede ser
cargante si cambian muchas áreas al mismo tiempo.
– Se pueden atenuar los efectos que indican contenido
nuevo por criterios de antigüedad, importancia, etc.
– Usar colores suaves, enmarcados, etc.
Ingeniería Web – Curso 2017-2018

Patrones de RIA
• Carruseles
– Cuando el número total de elementos de un
listado no cabe en el espacio de página, se
pueden mostrar como un carrusel o slideshow
(presentación).
– Permite al usuario moverse por los elementos
(típicamente imágenes) adelante y atrás.
– Se pueden poner las miniaturas para un acceso
directo. Si no caben las miniaturas, avisar que
hay más elementos en el carrusel.
– Se puede animar el carrusel automáticamente y
con efectos en cada transición.
Ingeniería Web – Curso 2017-2018

Referencias
• Definiciones de Wikipedia (versión lengua inglesa):
[Link]
• [Link]
• The Design of sites: patterns for creating winning web
sites. DUYNE, Douglas K. van ; LANDAY, James A. ;
HONG, Jason I. Prentice Hall, 2007.
• Web application design patterns. VORA, Pawan.
Morgan Kaufman, 2009.
• Apuntes de Programación de Internet/Programación
Hipermedia. Sergio Luján Mora.
Ingeniería Web – Curso 2017-2018

Referencias
• AJAX (Wikipedia):
– [Link]
• Ajax: A New Approach to Web Applications:
– [Link]
[Link]
• AJAX un nuevo acercamiento a aplicaciones web
(traducción del anterior):
• [Link]
acercamiento
• “Hola mundo” en Ajax:
– [Link]
• Introducción a Ajax:
– [Link]