LOGO

Tecnologías Multimedia – Periodismo Online

Profesor: Manuel Gértrudix

 Mapa de contenidos

Diseño aplicado al
desarrollo de
productos de
comunicación en Red

Principios de Técnicas de
Claves de diseño
composición y guionización
multimedia
diseño visual multimedia

Diseño centrado Técnicas de

Reglas esenciales Consideraciones
en experiencia de Reglas y modelos guionización
de usabilidad generales
usuario específicas

Normas y Estándares y
Diseño de Modelos y
recomendaciones especificaciones Tipografía web
Interfaces herramientas
de accesibilidad básicas
 Claves de
diseño
multimedia
 Primeras reflexiones

¿Dónde está el 1,25?

Diseño centrado en Experiencia de Usuario (EU)
Diseño centrado en Experiencia de Usuario (EU)
 Diseño centrado en EU
Lo maravilloso de la tecnología es que la gente acaba
utilizándola para algo completamente distinto de su destino
original. Es este valor de lo inesperado lo que subyace a la
creatividad en la sociedad. (Manuel Castells, 2002: 249)

Una nueva ola en la forma de experimentar los productos, en este caso

el software, que va más allá de la informática. Estamos entrando en un
mundo que cada vez está más cerca de Minority report en cuanto a la
experiencia del usuario. (Forest Key, 2006)

La Experiencia de Usuario es la sensación, sentimiento,

respuesta emocional, valoración y satisfacción del usuario
respecto a un producto, resultado del fenómeno de
interacción con el producto y la interacción con su
proveedor. (Hassan y Martín)
Factores de la experiencia de usuario

Morville (2004)
Utilidad?
 Utilidad

www.barrabes.com

www.diazdesantos.es

www.bankofamerica.com
Utilizable?
 Utilizable

www.seg-social.es

http://www.aeat.es
“Encontrable”?
 “Encontrable”

www.20minutos.es
www.cope.es

www.guardian.co.uk
 Adecuado

www.weyerhaeuser.com/

www.bc.com/

www.bowater.com/en/
 Deseable

http://www.audi.es

http://www.ayto-getafe.org
 Accesible

http://www.once.es

http://www.sport.es/
Creíble?
 Valioso

www.efe.com

http://web.alerta-antivirus.es
 Accesibilidad Web como objetivo
 Razones para construir una web para todos

Marco legal y normativo.

Factores socioeconómicos
 Integración e igualdad.
Dimensión moral
 La expectativa del futuro.
 Dimensión práctica
 “La mitad de tus visitas a tu sitio provienen de Google, y
Google sólo ve lo que un ciego puede ver. Si tu sitio no es
accesible, tendrás menos visitas. Fin de la historia”
(Pemberton)
Dificultades en el acceso a la web
¿Quiénes?

Dificultad Estable
• Discapacitados Físicos
(Visuales, Auditivos,
Motóricos). Dificultad
• Discapacitados Temporal
Psíquicos.

Dificultad
Dificultad
derivada de la
Tecnológica
Edad
 Accesibilidad  Pautas y regulación

W3C (Consorcio para el desarrollo de estándares y especificaciones

técnicas para el crecimiento de Internet)
WAI (Iniciativa para la Accesibilidad Web)
WCAG 1.0 (Guías para el Contenido Accesible en la Web 1.0)
 Pautas A, AA, AAA
 Prioridad 1, 2 Y 3
Nuevo  WCAG 2.0 (Guías para el Contenido Accesible en la
Web 2.0)
 Nueva estructura

 Niveles de adecuación 1, 2 y 3
 Productos Multimedia Accesibles
 PAUTAS FUNDAMENTALES WCAG 1.0
1. Proporcionar alternativas equivalentes para el contenido visual y
auditivo
2. No basarse sólo en el color.
3. Utilizar hojas de estilo y hacerlo apropiadamente.
4. Identificar el idioma usado.
Crear tablas que se transformen correctamente.
5. Asegurar la accesibilidad directa de las interfaces incrustadas.
6. Utilizar las tecnologías y pautas W3C.
7. Proporcionar información de contexto y orientación.
8. Asegurarse de que los documentos sean claros y simples.
9. No utilizar ventanas emergentes, o al menos hacerlas accesibles.
 Productos Multimedia Accesibles
 PAUTAS FUNDAMENTALES WCAG 2.0
 El contenido debe ser perceptible.

 La interfaz y sus elementos deben ser operables.

 El contenido y los controles deben ser

comprensibles.

 El contenido debe ser suficientemente robusto

como para poder funcionar tanto con la
tecnología web actual como con la futura,
incluyendo tecnología asistiva.
 Ayudas Técnicas  Software y Hardware
 Software
 Lectores de pantalla
 JAWS (Comercial)

 ORCA (Libre, Open Source)

 Gnopernicus (Libre, Open Source)

 Magnificadores de pantalla
 Sistemas de reconocimiento de voz
 Teclados virtuales, emuladores de ratón, sistemas de barrido.
 Hardware
 Línea Braille, Horno Fusser.
 Bucle magnético.
 Ratones, teclados, dispositivos para manejo del teclado,
pulsadores,etc…
 Estándares y especificaciones básicas

¿Qué son los estándares web?

 Conjunto de tecnologías y protocolos establecidos por el
consorcio W3C que definen, en relación al contenido
basado en Web
 Cómo se debe crear

 Cómo se debe interpretar

 Con la finalidad de que puedan estar siempre disponibles

y accesibles para todos los usuarios de la Red
 Estándares y especificaciones básicas
 ¿Por qué hay que diseñar con estándares?
 Se trabaja más rápido (aunque inicialmente lleve más tiempo
aprenderlos)
 El mantenimiento es más fácil, sencillo y rápido.
 Es menos costoso
 Centralizan el diseño (en pocos ficheros, fácilmente administrables)
 Facilita el despliegue en cualquier SO, navegador, dispositivo
(antiguo, actual o futuro) y salida (pantalla, impresión…)
 Ficheros más optimizados (descarga y presentación más rápida)
 Mayor accesibilidad y mejor experiencia de usuario
 Facilitan el posicionamiento en los buscadores (marcado semántico)
 En consecuencia, maximiza la audiencia potencial
 Principios de
composición y
diseño visual
La comunicación multimedia

VISUAL
• Fija
• Movimiento

INTERACTIVA
• Operaciones
• Itinerarios

AUDITIVA
• Voz
TEXTUAL
• Música • Texto gráfico
• Efectos • Texto escrito
¿Cómo producimos comunicación visual?

Lenguaje Alfabeto  Sintaxis  Comunicación

Comunicación visual
Creación de significado con el concurso de
Técnicas visuales de composición
¿Qué son las técnicas visuales de composición?

 Son un conjunto de estrategias

y técnicas que nos permiten
construir el mensaje visual y
“predecir” cuál será la
“reinterpretación”
estadísticamente posible del
mensaje visual por parte del
receptor.
 Supone la interacción de pares
opuestos e inseparables:
Contenido  Forma

Creador  Audiencia
(Autolector)
Dodo Arslan.it
 ¿Cuáles son esas técnicas?

 El mensaje visual se construye

a través de la definición de
varios factores que funcionan
conjuntamente:
 Textura
 Forma
 Estructura
 Módulo
 Movimiento
 Color…

Frank Gebhard - www.cpeach.de

Uso del color en el diseño web
Herramientas online para color web

Herramienta en línea de Adobe: http://kuler.adobe.com/

Modelos de diseño web
 Diseño de Interfaces

 ¿Qué es una Interfaz?

 La Teoría de los procesos de
interacción persona-
ordenador define la interfaz
de un sistema interactivo
como un dispositivo
tecnológico que permite
una interacción amigable Interfaz principal de la web “Same”

con dicho sistema a través

de modelos de
representación de distinto
tipo (textual, visual, sonoro,
etc.)

Interfaz principal de la web “VeraT”

 Tipología de interfaces
Experiencia menos completa y real

PARC User Interface (PUI)

Touchscreen user interface (TUI)

Interfaces 3D

Zooming user interface (ZUI)

Interfaces multimodales

Experiencia más completa y real

 GUI Proceso de realización
 Procesos que intervienen en el desarrollo de una aplicación
compuesta de diferentes interfaces de usuario:
1. Conceptualización: desarrollo de un prototipo de interfaz de usuario.
2. Creación de una línea de diseño: número reducido de pantallas (2 a 3) en las
que se definen los elementos gráficos que caracterizarán a la aplicación.
3. Diseño de todas y cada una de las pantallas (interfaces) que componen la
aplicación.
4. Programación de efectos visuales (si los hubiera: gif’s animados, Flash, etc.)
5. Programación “cliente”: desarrollo de las interfaces previamente diseñadas.
6. Programación “servidor”: programación de la/s interacción/es prevista/s en
la interfaz.
 Tipografía Web  Reglas básicas
 Básicas
 Legibilidad por encima de todo

 Usar fuentes sans-serif para mostrar en pantalla

 Usar medidas en “ems” e integradas en CSS (nunca

píxeles)
 Alto contraste letra-fondo

 Preferentemente, usar colores seguros para la web

 Fuentes “seguras”: Arial, Verdana y Georgia.

 No utilizar “cursivas”

 Útiles
 Los textos enlazados en azul y subrayados

 …
 Técnicas de
guionización
multimedia
 El guión en los procesos de creación multimedia 
Funciones
 Recoge los resultados de las tareas de documentación
 Concreta la arquitectura de la información:
 Organización de la información y los contenidos
 Recuperación de la información
 Estructura de la información e interacción
 Define la utilización de elementos multimedia
 Define los elementos narrativos:
 Personajes
 Acción
 Espacio
 Tiempo
 Presenta la estructura narrativa
 Sirve de orientación a las tareas de producción
 Desarrolla la información, los contenidos, el relato.
 Elaboración de un guión multimedia
 Fases de elaboración

1. Documentación previa > Ideación

2. Selección de elementos multimedia
 Ilustración, animación, fotografía, vídeo, música,
efectos sonoros, locuciones, textos escritos)
 y su tratamiento.
3. Diseño de la arquitectura de la información:
 Selección de contenidos
 Definición de la Interfaz (funciones y elementos) (*)
 Definición de la navegación – Estructura de contenidos:
(*) Diagrama de arquitectura (*)
 Elaboración de un guión multimedia
 Fases de elaboración

4. Descripción de existentes: escenarios,

personajes y elementos gráficos de la interfaz.
5. Descripción de la acción y la interacción: (*) (*)
 Estructura: bloques / secuencias / escenas / planos
 Variables: tareas de fondo; eventos interacción
(si...entonces)
 Contenidos: acción y diálogos -locuciones-.
 Técnicas de guión multimedia

 Storyboarding
 Técnicas de guión multimedia

 Wireframing
 Modelos de guión multimedia

 Estructura de navegación, prototipado…

 Aplicaciones para el proceso de guión-planificación

Tipología de aplicaciones

Creación
(Guión)

Planificación
Creación de
de la
Story Board
Producción

Aplicaciones
Producción
multimedia

Especializadas Previsión
Flujo de y seguimiento
trabajo producción

Integrales
 Referencias
 Claves de diseño
 Stanford Web Credibility Research (http://www.webcredibility.org)
 Internet System Consortium (http://www.isc.org/index.pl?/ops/ds/hosts.php)
 WebbyAwards (http://www.webbyawards.com)
 Conceptos sobre usabilidad (http://ingenieriasimple.com/usabilidad/)
 Usabilidad
 Useit.com (Jakob Nielsen)
 Usarte.org
 No solo usabilidad
 Accesibilidad
 W3C, FUNDACIÓN ONCE, SIDAR, FIAPAS , CEAPAT, CESYA, RPD (Real
Patronato para la Discapacidad)
 Herramientas
 BrowserShot, TypeTester, Kuler
LOGO

Tecnologías Multimedia – Periodismo Online

Profesor: Manuel Gértrudix