Criterios y recomendaciones técnicas para la producción y evaluación de

Recursos Didácticos DigitalesUTE y CV 2016 / UPEV - IPN

Introducción

La UPEV ha recopilado las principales características técnicas que deben cubrir los contenidos digitales para cumplir con estándares a nivel Nacional e Internacional, basándose en las mejores prácticas y recomendaciones para la producción de RDDs.

Imagen tomada de : http://venezolanosonline.com/wp-content/uploads/2016/04/contenidodigital1-800x335.jpg

Interfaz

Es el espacio o medio donde se produce el RDD y por el cual el usuario tiene la facilidad de localizar la información , navegando, descargando información, utilizar enlaces, realizar actividades, etc.

De forma sencilla, intuitiva y de fácil comprensión (sin utilizar complicados manuales), sin complejas instalaciones ni profundos conocimientos informáticos para utilizarlo

Imagen tomada de :http://www.domodesk.com/images//domolista/frontend1.jpg

Interfaz (II)

• Es importante que la interfaz sea agradable a la vista

• Si la estructura se torna un tanto compleja, incluir secciones de ayuda (como preguntas y respuestas a dificultades comunes, medios de contacto con el o los autores) Siempre visible y en el mismo lugar a lo largo de los contenidos.

Navegación

Cuando nuestro RDD es extenso o se estructura en secciones debemos incluir algunos elementos que permitan al usuario conocer su ubicación y manejarlo de forma sencilla como menús, mapas de sitio, barras de navegación o en todo caso permitan al usuario regresar al inicio o punto de partida mediante un botón con esta función desde el punto (lugar en la estructura) en el que se encuentre.

Navegación (II)

Se recomienda utilizar las barras de navegación en recursos estructurados por unidades, temas y subtemas.

Cuando incluimos diversos mecanismos de navegación debido a la profundidad de algún contenido, estos deben ser sencillos, claros y consistentes, estructurados de manera lógica

Debemos cuidar que los nombres de categorías o secciones en el menú no sean demasiado extensas para no “desconfigurar” el aspecto del mismo (en su defecto usemos nombres cortos : Unidad1, Tema 1, etc.)

Navegación (III)

Debemos revisar el adecuado funcionamiento del menú (si es que decidimos programarlo) probando que las ligas sean funcionales y correctas.

Debe sr de un tamaño adecuado y facilitar la navegación por lo que debe estar en un lugar fijo siempre en todas las secciones de nuestra estructura.

Si optamos por un menú dinámico (aparecen opciones al solo pasar el mouse) debemos revisa su comportamiento y fácil uso.

Elementos para la adecuada operación de elementos multimedia

De acuerdo a los Objetivos y Estrategias de enseñanza y aprendizaje a utilizar, la integración de audiovisuales, animaciones y recursos interactivos deberán considerar ciertos criterios para :

a) Audio

b) Video

c) Animación

Audio

• Correcta dicción en platicas, narraciones, explicaciones, etc. así como una adecuada velocidad

• Los sonidos de fondo en una narración no deben interferir o sobrepasar el nivel de la voz

• Incluir en este recurso un botón de reproducción/paro para un mayor control

• Utilizar formatos estándar como MP3, WAV y WMA

Audio (II)

• Si se incluyen pistas, no se recomienda que se reproduzcan automáticamente, por lo que debemos incluir un botón de reproducción/paro, adelantar/atrasar pausar, silenciar para controlar y modular el sonido

• Aunque la duración del audio estará determinada por la estrategia didáctica, no se recomienda que sea muy prolongada o se perderá el interés por parte del usuario y además por el espacio de almacenamiento y reproducción puede tornarse lenta o entrecortada.

Video• Debemos aplicar los mismos criterios usados en el apartado anterior en cuanto a

audio y botones de control• La imagen deberá ser aceptable ya que si se incluyen diagramas, texto o

esquemas, se deben ver claramente• Utilizar formatos compatibles (AVI,MPEG,MP4, Quick Time)• Los videos convertidos FLV (video de Flash) permiten mayor compresión e incorporación automática de controles y elementos de seguridad para evitar extracciones no autoizadas

Imagen tomada de : https://accolombia.com/wp-content/uploads/2014/11/Comparacion-de-resoluciones-estandar-de-video.jpg

Video (II)

• No se deben incluir ligas a videos de sitios (como youtube), ya que no hay garantía de su disponibilidad y esos materiales tienen derechos de autor, por lo cual habría que solicitar la autorización.

• Si se descargan estos videos, se requerirá de la autorización del autor para incluirlos en nuestro RDD.

• Si incluimos un video de otro autor utilizando en nuestro RDD la liga para abrirlo, debemos incluir las referencias de autoría y fuente, además de las leyendas “Con fines educativos” o “Para su uso educativo”

Animación

• Debemos aplicar los mismos criterios usados en el apartado “Audio” en cuanto a audio y botones de control

• La calidad de las imágenes deberá ser clara para apreciar todo el contenido en estas.

• No se recomienda que la reproducción automática, por lo que debemos incluir al menos un botón de reproducción/paro

• Las animaciones y tutoriales con botones interactivos deben estar en formatos swf, exe (para Windows ) o app (Mac)

Criterios de Diseño Gráfico

Todos hemos ocupado la frase mágica "No soy diseñador", y que nos disculpa cuando la creatividad se ausenta de nosotros .

Sin embargo, podemos probar e intentar hacer cosas bonitas por la satisfacción que da estimular la vista y despertar el interés de los demás

Interfaz

• Tomando en cuenta que el espacio de diseño gráfico es aplicable solo a los recursos visuales, identificaremos a la interfaz como la pantalla o ventana donde se muestran los contenidos de un RDD

• Todos los elementos deben estar en equilibrio, es decir, evitar saturación de textos, colores o imágenes en ciertas zonas, por lo que debemos hacer una correcta distribución de los contenidos de manera uniforme y constante en todas las pantallas del RDD

EL CÍRCULO CROMÁTICO: Qué es y cómo utilizarlo• RUEDA DE COLOR. Basada en el arco iris, es una representación de los colores

que permite entender cómo se relacionan entre sí para conseguir determinados efectos.

PRIMARIOS. Son el rojo, el azul y el amarillo. Son colores puros, a partir de cuya mezcla se crean todos los demás.

SECUNDARIOS. Surgen de la combinación, a partes iguales, de los colores primarios. Son: naranja (se obtiene mezclando rojo y amarillo), verde (amarillo y azul) y violeta (azul y rojo).

TERCIARIOS. También llamados complementarios, el resto de colores del círculo resultan de mezclar primarios y secundarios.

ARMONÍA O CONTRASTE. Con los colores que están más próximos entre sí en la rueda de color lograrás un conjunto equilibrado, y con los opuestos obtendrás más vida y carácter.

Interfaz (II)

Interfaz (III)

• Se recomienda manejar un espacio para una resolución de pantalla de 800x600 ya que esta facilita la lectura y visibilidad

• La interfaz debe permitir una visualización cómoda y sencilla combinando colores constantes con diseños atractivos permitiendo que fluya el proceso de aprendizaje

• Evitar la saturación de elementos visuales y eliminar los huecos o espacios muertos

Interfaz (III)

• Si se incluyen documentos o descargables (docx, pdf, pptx) es importante que en estos se incluya la misma identidad grafica utilizada en nuestro RDD, al igual que en paginas HTML

Colores, fondos y contrastes

Imágenes como fondo.- Se debe garantizar que no interfieran con la legibilidad del texto (usar fondos sin textura cuyos colores contrasten con el texto)No utilizar fondos animados ya que constituyen un distractorLos colores de iconos y gráficos no deberán distraer al usuario (no

usar colores muy brillantes o que dificulten la lectura)

Texto

Dado que es el componente básico debemos utilizar el formato adecuado:

• Arial, Helvética, Tahoma y Verana son los formatos mas recomendados en sus modos sans serif (sin patines) por su legibilidad incluso para personas con problemas de visibilidad

• El tamaño conveniente es de 1 EMS o 12 puntos con un interlineado de al menos 20% del tamaño de la altura del texto (se permite utilizar texto mas grande para títulos o mas pequeño para un pie o referencia bibliográfica) manteniendo siempre un equilibrio

• No se recomienda utilizar mas de dos tipografías dentro de un RDD (utilizar por ejemplo un tipo para títulos y otro para contenido)

Texto (II)

• Las líneas de texto no deben sobrepasar los limites de la pagina, utilizar un margen imaginario de al menos 2 cm

• Jerarquizar títulos y subtítulos con ayuda de color y tipografía (se puede usar negritas para distinguirlos del contenido)

• Se recomienda usar colores y/o subrayado para hipertextos (ligas)

Imagen

• Utilizar formatos compatibles con los navegadores (GIF, JPG, JPEG, y/o PNG) con una resolución recomendada de 72 dpi

• Logotipos, fotografías, esquemas y demás imágenes deben verse claras y sin distorsión (usar su tamaño exacto para garantizar su nitidez y claridad en el contenido)

• No se recomienda el uso de imágenes descargadas ya que no fueron hechas específicamente para el recurso y pueden ser de tamaño o resolución inadecuadas, además de infringir los derechos de autor.

Imagen (II)

• Si la imagen es demasiado grande se recomienda cortarla en secciones para evitar la carga lenta de la misma

• Diseñar los elementos iconográficos de manera intuitiva y constante para fácil entendimiento del usuario , de lo contrario se deberá incluir un manual de uso y explicación de los mismos y no se deberán utilizar iconos no indicados en el manual.

• Al presentar diagramas, esquemas, tablas, etc. con imágenes, debemos aplicar el criterios de texto ya mencionados.

Imagen (III)

• Utilizar “pop ups” para una imagen demasiado grande y no perder la distribución de la interfaz, o convertirla en PDF para que el usuario cambie fácilmente el tamaño a su gusto

• Utilizar Pies de Foto o atributos que aclaren el significado de las imágenes

Elementos Multimedia

La cantidad de estos dependerá de los propósitos y estrategias didácticas debiendo considerar:

• Un diseño estético, idóneo y consistente con la identidad gráfica del recurso (gráficos, fotos ,animaciones, video, audio)

• Al usar imágenes y texto debemos aplicar los criterios para texto e imágenes

• No existen criterios de diseño gráfico para recursos en formato de audio exclusivamente (audiolibros)

Elementos Multimedia (II)

• En las presentaciones (PPT, Prezi, Libre Office, etc.) se deben también aplicar los criterios de diseño grafico aquí incluidos (para todos los elementos)

Paleta de colores

No es mas alla que un conjunto de colores, existen de todos tamaños y para todos los fines, y podemos usar el termino para referirnos a los millones de colores RGB (Red, Green Blue) que se pueden manejar en una computadora.

Cuando pensemos en una paleta e colores , imaginemos un numero de colores reducido que hemos escogido por alguna razón, ya sea porque combinan, o porque sirven para lo que deseamos transmitir y que utilizaremos de manera constante a lo largo de nuestro diseño

Paleta de colores (II)

Cuando te enfrentas ante la tarea de crear un diseño, muchas veces lo más difícil es comenzar

Un buen modo de comenzar y muy sencillo para cualquier persona es simplemente jugar con los colores creando una paleta.

Otro método para guiarnos es mirar las paletas creadas por otras personas , puedes visualizar algunos en http://www.colourlovers.com/

Paleta de colores (III)

Para crear una paleta de colores puedes utilizar herramientas que te facilitan la creación de la misma y además están disponibles en la red:

Palette Creator: https://chrome.google.com/webstore/detail/palette%C2%ADcreator/fdadlpmlbimjjlpdknpjoejgedagffhg

Permite crear paletas desde la selección de colores. Es muy parecida a la herramienta simple de Colourlovers, pero con la ventaja que te permite ver colores "similares" a los que vas escogiendo.

Paleta de colores (IV)

Fuente: http://www.desarrolloweb.com/articulos/como-crear-mejores-paletas-color.html

Creación de Paletas

• http://www.colorotate.org/

• http://kuler.adobe.com/

• http://www.colourlovers.com/

• http://www.colr.org/

• http://aviary.com/tools/toucan

• http://www.palettefx.com/