LISTA DE CHEQUEO DE LOS CAMBIOS

A REALIZAR AL PROYECTO

1. INTRODUCCIÓN.

En la actualidad existen muchas herramientas para pulir tanto los contenidos, como
la estructura, arquitectura y organización de la información, como tambien todos los
posibles fallos técnicos, de enlaces, de código y apariencia. De la misma manera
como estas herramientas presentan a disposición del desarrollador o diseñador web
los errores, es preciso conocer la forma de resolverlos. Sin embargo en el desarrollo
de multimedia de tipo online la diversidad de errores e inconsistencias de todo tipo
es muy grande, por ende en este documento se clasifica en dos grandes pilares que
son la accesabilidad y la usabilidad, y a partir de estos conceptos se desprenden
otras agrupaciones para tener en cuenta.

Dada la mecánica de aprendizaje autodidácta que plantea el SENA, en este

documento se muestran los lineamientos básicos para el desarrollo y corrección de
los errores más comunes y algunas herramientas que ayudarán a optimizar y
ofrecer un producto de calidad superior al usuario, de igual forma ofrecerle una
experiencia en la navegación que permita su permanencia dentro de la multimedia
y a su vez obtenga una experiencia positiva.

1
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

2. ESTRUCTURA DE CONTENIDOS.
1. Introducción.
2. Estructura de contenidos.
3. Mapa de contenido.
4. Desarrollo de contenidos.
4.1. Accesibilidad.
4.1.1. Inclusión de personas en condiciones de discapacidad.
4.1.2. Acceso mediante dispositivos móviles.
4.1.3. Acceso mediante todos los navegadores.
4.2. Optimización de peso.
4.2.1. Carga de imágenes.
4.2.2. Tamaño real de las imágenes en las galerías.
4.2.3. Html.
4.2.4. Tablas.
4.2.5. Carga de cascadas CSS.
4.2.6. Conexión a base de datos.
4.3. Herramientas de uso libre para la optimización y búsqueda de errores.
4.3.1. Total Validator.
4.3.2. Clean CSS.
4.3.3. W3C CSS Validator.
4.3.4. W3C Markup Validator.
4.3.5. TAW3.
4.3.6. WAVE.
4.3.7. BrowserShots.
4.3.8. Ready.Mobi.
4.3.3. Pingdom.
5. Glosario.
6. Bibliografía.

2
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

3. MAPA DE CONTENIDO.

3
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4. DESARROLLO DE CONTENIDOS.

Luego de realizada la revisión de navegación y fallos posibles, se debe realizar la

lista de chequeo de los cambios pertinentes a la usabilidad y accesibilidad de
acuerdo a los resultados arrojados por la revisión.

Los primeros cambios que se deben realizar son los referentes a la usabilidad.

Algunos de los detalles más importantes a la hora de tener en cuenta el concepto

de la usabilidad son:

4.1. ACCESIBILIDAD.

Este concepto hace referencia ya no a la facilidad de uso si no a la posibilidad de

acceso, en la cual se contempla tanto la posibilidad de acceder a un contenido por
personas con limitaciones individuales, discapacidades, dominio del idioma, o
limitaciones derivadas del contexto de acceso como software o hardware, ancho de
banda de la conexión empleada, computadores con sistemas operativos no
actualizados o limitados, etc., y las personas en condiciones físicas y mentales
normales.

4.1.1. Inclusión de personas en condiciones de discapacidad.

Es preciso contemplar que existe una audiencia mínima con respecto a la mayor
audiencia para la que se está creando una pieza multimedia, sin embargo esta
porción mínima de audiencia se debe tener muy en cuenta ya que en la actualidad
el desarrollo social de las personas se debe dar en condiciones igualitarias.

4
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.1.2. Acceso mediante dispositivos móviles.

Actualmente existe un concepto llamado el Responsive Web Design o traducido al

español Diseño Web Adaptativo, que se refiere al desarrollo de los sitios web
pensando en los dispositivos de lectura actuales como, dispositivos móviles, tablets
y smartphones; esta técnica lo que hace es a través del buen uso del código html y
css de los sitios web, convierte una sola versión del sitio en versiones
multiplataforma, sin tener que crear una versión de la misma página web para
dispositivos móviles y aún con mayor trabajo cuando se tratase de desarrollar, una
para iphone, otra versión para Android, otra para Iopera, etc.

4.1.3. Acceso mediante todos los navgadores.

Dado que los navegadores interpretan de manera particular los elementos que
componen una web, resulta en ocasiones que la compatibilidad entre el uno y el
otro no es total, por consiguiente si por ejemplo la página web se ve bien en el
navegador google chrome, no quiere decir que se vea igual de bien en el navegador
mozilla Firefox o internet explorer, por ende existen diferentes formas de optimizar
el código de acuerdo al agente lector o intérprete.

4.2. Optimización de peso.

Se tendrá que buscar formas de reducir el peso de las fotos e imágenes y para este
caso se necesitará de varios servicios y aplicaciones que optimicen las imágenes
sin perder calidad.

5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.2.1. Carga de Imágenes.

Cuando una imagen es trabajada con el fin de ser subida a la web, debe exportarse
en una resolución no mayor a 72 dpi. Las imágenes y los contenidos multimedia son
los que más hacen que la web sea lenta o eficaz. En la actualidad cuando se
desarrolla pensando en las multiplataformas, es decir en Responsive Design, el
tratamiento de las imágenes pasa a ser un tema de mayor profundidad, dado que si
lo que se quiere es realizar un solo contenido que se adapte a todos los dispositivos,
la imagen que se cargará es la misma, en la pantalla de un ordenador de mesa que
en la de un Smartphone, por consiguiente el peso de carga en el Smartphone será
de mayor uso de procesador que el del ordenador de mesa. En el mercado actual
ya existen algunas herramientas que ayudan a redimensionar la imágenes de
acuerdo al ancho en pixeles de donde van a ser mostradas, así mismo la w3c, que
es el organismo internacional que rige la calidad de los contenidos en cuanto a
accesibilidad y usabilidad, realizó unas reglas aplicadas a los estilos
css,determinando un nuevo atributo y a su vez un nuevo elemento específico
orientado a la redimensión de las imágenes, este atributo es para html5.

4.2.2. Tamaño real de imágenes.

En las galerías de imágenes suele suceder que se realiza mediante una

herramienta de jquery o java, un redimensionamiento de las imágenes para crear
las vistas en miniatura, algunas de estas herramientas solamente redimensionan
las imágenes sin crear unas nuevas a la medida, esta acción hace que sea mucho
más pesada la carga, por ende lo ideal es usar herramientas que permitan crear y
no redimensionar, vistas en miniatura y que estas a su vez escriban la información
en la carpeta caché del servidor.

4.2.3. Html.

El cuerpo html, aunque pueda pesar tan solo 2 kb, en la construcción y la descarga
de los contenidos puede generar un mayor peso y a su vez un retardo en la carga
de los mismos, recomendaciones como usar una sola hoja de estilos css, usar div
en vez de tablas anidadas, dimensionar las imágenes con pixeles exactos y no
porcentajes (aunque este principio contradice al responive design), entre otros son
las sugerencias realizadas por la w3c en la optimización de la carga de html.

6
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.2.4. Tablas.

En el tratamiento de las tablas es recomendable no anidar más de una, y en vez de

usar tablas anidadas, los div son la solución más adecuada para la optimización de
la carga. Si en definitiva la solución debido al objetivo del proyecto no aplica para
usar divs, la recomendación es usar tablas pero con contenidos más pequeños, de
manera que no tenga que depender de la descarga general de la página, para
mostrar el contenido de dicha tabla.

4.2.5. Carga de cascadas CCS.

Los estilos css también ayudan a la carga de manera rápida, usable y accesible de
una pieza multimedia. Actualmente existen compresores automáticos que optimizan
las hojas de estilos css, abreviando las propiedades a aplicar, convirtiéndolo así en
un código más fácil de leer e interpretar por el navegador.

4.2.6. Conexión a base datos.

Cuando una multimedia de tipo online deja de ser una simple página web, para
convertirse en una aplicación o sistema de información con administración de
contenido, consultas, búsquedas, galerías, entre otras cosas, la base de datos pasa
a ser una parte fundamental en la carga de la información, ya que los contenidos no
van a a estar disponibles en un archivo html, si no que directamente el sitio al ser
llamado mediante la url se va a conectar a la base de datos, esta debe contener una
estructura organizada, esto hará que en el momento de la consulta sea mostrado
más rápido el resultado, existen varias recomendaciones de carácter técnico, como
las consultas sql que se deben programar desde el php, diseñar la base de datos
con una estructura organizada, se recomienda no almacenar las imágenes en la
base de datos, si no que crear el enlace de carga, para que cuando cargue la página
por completo, comience a cargar las imágenes.

7
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.3. Herramientas de uso libre para la optimización y búsqueda de errores.

Existen diferentes herramientas que pueden ayudar a encontrar y resolver errores

de accesibilidad, usabilidad y contenido.

4.3.1. Total Validator.

Es una herramienta que incluye un sistema completo de análisis de una página web,
el software es de uso libre, y al instalarlo solamente con escribir la url que quiere
consultar, arroja resultados que comprenden desde ortografía hasta errores de
código y enlaces rotos.

Ej. http://www.totalvalidator.com/

8
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.3.2. Clean CSS.

Con esta herramienta se optimiza y reparan errores del código css, es de uso libre
y al realizar la optimización se obtiene una ganancia de aproximadamente el 30%
de velocidad en carga.

Ej. http://www.cleancss.com/

4.3.3. W3C CSS Validator.

De la misma manera que la herramienta anterior revisa el código css, además

contiene ayuda para la interpretación de cada navegador.

Ej. http://jigsaw.w3.org/css-validator/

9
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.3.4. W3C Markup Validator.

La w3c pone a disposición esta herramienta, como la más completa para detectar
los errores en general.

Ej. http://validator.w3.org/

4.3.5. TAW3.

De una manera muy sencilla, con solo escribir la url a analizar, obtendrá los
resultados de errores, advertencias e incluso información de lo que no pudo ser
revisado automáticamente y que requiere de una revisión manual.

Ej. http://www.tawdis.net/

10
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Apr endizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.3.6. WAVE.

Esta herramienta es más visual y mediante la inserción de etiquetas de colores

dentro de la misma interfaz de lo que se está analizando ayuda con los errores.

Ej. http://wave.webaim.org/

4.3.7. BrowserShots.

Con esta herramienta se puede evaluar la accesibilidad con los diferentes

navegadores sin necesidad de descargarlos y hacer las pruebas uno por uno.

Ej. http://browsershots.org/

11
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR AL PROYECTO

4.3.8. Ready.Mobi.

Igual que las herramientas de evaluación de accesibilidad de los navegadores de

escritorio, esta herramienta evalúa la accesibilidad a través de dispositivos móviles.

Ej. http://ready.mobi/launch.jsp?locale=en_EN

4.3.9. Pingdom.

Excelente herramienta para revisar la velocidad de carga del sitio.

Ej. http://tools.pingdom.com/fpt/

12
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Apr endizaje
 GLOSARIO
Producción Multimedia:
LISTA DE CHEQUEO DE LOS CAMBIOS
A REALIZAR AL PROYECTO

Accesibilidad: Posibilidad de acceso, en la cual se contempla tanto la posibilidad

de acceder a un contenido por personas con limitaciones individuales,
discapacidades, dominio del idioma, o limitaciones derivadas del contexto de
acceso como software o hardware.

Arquitectura de la información: Es definida como el arte y la ciencia de organizar

espacios de información con el fin de ayudar a los usuarios a satisfacer sus
necesidades de información. La actividad de organizar comporta la estructuración,
clasificación y rotulado de los contenidos de la multimedia.

Base de datos: Sistema estructurado que permite la escritura, almacenamiento y

consulta de datos. Generalmente los datos están relacionados o construidos bajo
un mismo contexto. Existen varios gestores de bases de datos, algunos más
robustos que otros, pero que cumplen con el objetivo de estar almacenados para su
consulta.

Caché: Hace referencia a un sistema de buffer para alojar información de consulta

continua para tenerla disponible cuando se acceda nuevamente y reduzca el
consumo de ancho de banda y a su vez reduzca el tiempo y peso de carga de una
página web.

Discapacidad: También llamada incapacidad, es la condición que presentan

algunas personas con deficiencias físicas, materiales o mentales, que presentan
obstáculos para gozar de una inclusión igualitaria en la sociedad.

Diseño web adaptativo (Responsive Design): Técnica desarrollada para que los
contenidos se adapten de manera automática al entorno del usuario.

Estilos css: En inglés Cascading Style Sheets, es un sistema de comunicación

mediante un lenguaje de código que permite controlar la apriencia visual y
semántica de una multimedia.

Html5: En inglés HyperText Markup Language, es la 5ta versión donde se

implementan atributos y etiquetas nuevas para obtener una mayor cobertura en la
parte gráfica y funcional de los sitios web.

Java Script: Es una de los lenguajes de programación más populares y más

usados, su filosofía esta orientada al trabajo con objetos con el fin de optimizar la
experiencia del lado del usuario.

13
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 GLOSARIO
Producción Multimedia:
LISTA DE CHEQUEO DE LOS CAMBIOS
A REALIZAR AL PROYECTO

Jquery: Es una biblioteca del lenguaje de programación javascript, generalmente

se usa para realizar animaciones y operar sobre el DOM del sitio web.

Mapa del sitio: Es un listado de las páginas accesibles de una página web
completa. Esta lista contiene los hipervínculos a cada una de las páginas.

Menú de navegación: Es lo que permite a un usuario interactuar con la multimedia,

revisar y solicitarle información en el momento que considere pertinente, la
recomendación es que el menú siempre este en el mismo lugar, y conserve la
misma apariencia visual, esto con el fin de garantizarle al usuario una experiencia
positiva en cuanto a usabilidad y accesabilidad.

Navegación: Es la acción de interactuar con un dispositivo que pueda recuperar

una información en el formato que este disponible, mediante una herramienta de
navegación como el navegador o software web (Internet Explorer, Mozilla, Firefox,
Google Chrome, etc).

Php: Es un lenguaje de programación de código del lado del servidor diseñado

especialmente para ambiente web con desarrollo de contenido dinámico, a
diferencia del código html que trabaja a partir de contenido estático es decir al
momento que un usuario solicita un contenido a partir de un enlace o un botón este
contenido es siempre el mismo, mientras que el contenido dinámico, de acuerdo al
momento y al requerimiento del usuario la información cambia o es actualizada
mediante los contenidos almacenados en la base de datos.

Servidor: En el escenario de internet, el servidor actúa como un ente que provee

servicios a otros entes, en este caso usuarios. Como alojamiento de archivos.

Sql: Es un sistema de gestión de base de datos, multiusuario, distribuido bajo la

licencia GNU o GPL, también existe una versión de paga para los proyectos
corporativos.

Usabilidad: Hace referencia a la facilidad de uso de cualquier herramienta creada

por mano de obra de humanos para el uso de humanos.

Url: En inglés Uniform Resource Locator, es un sistema de cadena de caracteres

que de alguna marnera reemplaza a las direcciones ip, por nombres y permite
acceder a una información alojada en un servidor.

14
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 RECURSOS BIBLIOGRÁFICOS
Producción Multimedia:
LISTA DE CHEQUEO DE LOS CAMBIOS
A REALIZAR AL PROYECTO

- Consorcio World Wide Web (W3C), Recuperado el 01 de Octubre de 2013, de http:

//www.w3c.es/Consorcio/, Sobre el w3c

15
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 LISTA DE CHEQUEO DE LOS CAMBIOS A REALIZAR EL PROYECTO

Control de documento
Construcción Objeto de Aprendizaje
Lista de chequeo de los cambios a realizar al proyecto
Desarrollador de contenido
John Fredy Garavito Garzón
Experto temático
Luis Antonio Suárez Martínez
Asesor pedagógico
Maria Teresa Camargo Serrano

Antonio Vecino Valero

Producción Multimedia
Victor Hugo Tabares Carreño

Programador Roberto Chajín Ortiz

Líder expertos temáticos Tatiana Acosta Patiño
Líder línea de producción Santiago Lozada Garcés

16
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje