Criterios Técnicos y de diseño gráfico para RDDs

1. Criterios y recomendaciones técnicas
para la producción y evaluación de
Recursos Didácticos Digitales
UTE y CV 2016 / UPEV - IPN

2. 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

3. 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

4. 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.

5. 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.

6. 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.)

7. 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.

8. 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

9. 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

10. 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.

11. 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

12. 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”

13. 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)

14. 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

15. 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

16. 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)

17. 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

18. 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

19. 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 distractor
Los colores de iconos y gráficos no deberán distraer al usuario (no
usar colores muy brillantes o que dificulten la lectura)

20. 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)

21. 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)

22. 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.

23. 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.

24. 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

25. 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)

26. 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)

27. 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

28. 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/

29. Paleta de colores (III)

30. 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/fdad
lpmlbimjjlpdknpjoejgedagffhg
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

31. 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/