DISEÑO DE RECURSOS EDUCATIVOS DIGITALES

BIBIANA CHÁVARRO QUIMBAYAGRADO: 1103

ÁREA: TECNOLOGÍA E INFORMÁTICAESCUELA NORMAL SUPERIOR DE NEIVA

DIFERENCIE ENTRE MATERIALES EDUCATIVOS

• La diferencia entre los materiales educativos creados por empresas y los materiales creados por profesores es que los primeros son puro diseño gráfico y los segundos puro diseño didáctico (con algunas excepciones).

CAUSA DEL MAL DISEÑO GRAFICO

• Si no se tiene educación visual y información sobre accesibilidad y usabilidad de contenidos interactivos, podemos encontrar buenos materiales con mal diseño grafico que produce mala sensación y dificulta su comprensión y uso.

EJEMPLO:• TEXTOS CON LA MISMA INFORMACIÓN:

Representa el lado oscuro, todo lo que no se debe hacer, el camino del mal, pues distrae al lector con su mal grafico, además de que da pereza, dificultando su uso.

Sigue unas premisas básicas para un diseño funcional y accesible. Un diseño que centre la atención en el contenido, que no distraiga al lector, en este caso, al alumno.

PAUTAS BASICAS

• Conocer bien el tema y los puntos esenciales• Hacer textos cortos, concisos, correctos y directos• Reforzar el mensaje con herramientas a tu alcance, ejemplo:

Fotos.• Utilizar estructura lógica que facilite la lectura.• Ser innovador para captar la atención.• Recuerda escribir para el lector y no para ti.• Piensa como y para el lector.

• Deben ser motivadores, entretenidos y educativos• Pueden ser abiertos, gratuitos, adaptables y reutilizables.• Lo formatos abiertos y estándares mejoran su accesibilidad.• Siempre están bajo algún tipo de licencia, es recomendable decir y

explicitar.• Escucha al lector para ello permite que dejen comentarios sobre tu

herramienta.

LA ESRUCTURA

El visitante tiene que leer y entender el mensaje en cuestión de segundos con textos cortos y concisos, ya que el texto largo puede ser des estimado de inmediato.

No utilizar lenguaje rebuscado, debe ser un lenguaje mas coloquial, cuida la ortografía. Todo lo que hagas debe seguir una maquetación coherente. La simetría, el orden y la compensación de los espacios le da coherencia al diseño.

Repite la idea principal para reforzar el mensaje.

EL FONDO

Utiliza colores planos no imágenes para el fondo, al hacer una actividad didáctica lo importante es el contenido. Las imágenes de fondo repetidas o grandes dificultan la visualización del texto, añadiendo un peso considerable.

LOS COLORES

No pongas en una pantalla una combinación de colores que no llevarías puesta, como si estuvieras frente a tu armario elige los colores que desees según tu estilo.

Imita los diseñadores que trabajan con una paleta de colores que han elegido. Crea una paleta de 3 a 5-6 colores y  construye todo el material sobre esos colores ( para ayudarte en la elección hay herramientas como kuler.adobe.com donde puedes crear tus propias paletas de colores y buscar dentro de las que ya han creado otros usuarios).

De esa paleta de colores procura que unos sean claros y otros oscuros. utilizando los claros para los fondos y los oscuros para el texto, creando varios contrastes que obviamente centren su atencion en el texto que es el que lleva la idea.

LA TIPOGRAFIA1. La tipografía es un elemento muy importante del diseño. Usa fuentes determinadas

si tu actividad se va a ver por un navegador. Si usas un tipo de fuente que el usuario no tiene instalada la sustituirá por la fuente por defecto del navegador y tu diseño ya NO APARECERÁ TAL COMO LO HICISTE.

2. No hay fuentes más bonitas que otras, depende al contexto en el que se le coloque. En nuestro caso las fuentes deben ser sencillas y muy legibles. Como habrás comprobado son pocas las fuentes que se pueden usar con seguridad de que cualquiera las tendrá instaladas. Pero son suficientes para hacer muy buenos diseños y además son las más legibles.

3. NO USAR COMIC SANS: Sólo hay una cosa que un diseñador odie más que Internet Explorer 6 y es la fuente Comic Sans.

4. No utilizar un tamaño de fuente menor de 12.

LAS IMAGENES

• Gifs animados. Totalmente prohibidos los gifs animados, pues no tienen finalidad académica.

• Imágenes con transparencias. Si vas a usar este tipo de imágenes utiliza imágenes PNG en lugar de GIF. Los gifs dejan un borde blanco alrededor de la imagen que queda fatal. Si tu fondo no es blanco utiliza imágenes png y esos molestos píxeles no aparecerán.

• Peso de las imágenes.  Procura que tus imágenes pesen lo menos posible. Para que no sea lenta la carga, pon las pequeñas no necesitas una gran resolución para que se vean bien. Tampoco agrandes las fotos pues quedan pixeladas dificultando la visión y dando un mal aspecto a tu material.

MULTIMEDIA

• La musiquilla de fondo. Esto es una carga innecesaria para una página y además de distraer  molesta. Hay que eliminar todo aquello que no sea necesario para la actividad. No hay que adornar.

• Flash. De esto hablaremos más profundamente en un post pero como adelanto te aconsejo que lo evites siempre que puedas. No es accesible y requiere de mucho trabajo, no merece la pena.

GRACIAS POR SU ATENCIÓN

GRACIAS POR SU ATENCIÓN

♫♪GRACIAS POR SU ATENCIÓN

GRACIAS POR SU ATENCIÓN

GR

AC

IAS

PO

R S

U A

TE

NC

IÓN

GRACIAS POR SU ATENCIÓN

GRACIAS POR SU ATENCIÓN

GRACIAS POR SU ATENCIÓN

WEBGRAFIA• http://www.slideshare.net/AlbaLuzMartinez/pre-contenidos-digitales-2055342• http://www.edufrikis.com/consejos-graficos-para-el-diseno-de-actividades-didacticas/• http://www.slideshare.net/lamaga/crear-reutilizar-y-compartir-contenidos-educativos• http://www.icti.es/blog/detalle/articulo/como-crear-contenidos-web-de-calidad/• http://www.google.com.co/imgres?num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=0OI0G8YTFwk04M:&im

grefurl=http://eduman-nice.com/comicos/el-chiste-de-hoy-27/&docid=VWk87SMe3-WUfM&imgurl=http://www.eduman-pic.com/nice/img/ef8dcf7b3fb36371d07c5b04f047f343.gif&w=180&h=267&ei=nFQQUNOvEcX_6QHWzYGQCA&zoom=1&iact=hc&vpx=259&vpy=184&dur=327&hovh=192&hovw=130&tx=65&ty=98&sig=105865844912306760946&page=1&tbnh=144&tbnw=97&start=0&ndsp=18&ved=1t:429,r:13,s:0,i:110

• http://www.google.com.co/imgres?start=136&num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=ui71jMCn9sN4xM:&imgrefurl=http://animedg302.blogspot.com/&docid=ByTnKv7BMostRM&imgurl=http://1.bp.blogspot.com/_M6QeULfRXuI/TILv65TVlwI/AAAAAAAAAA8/0MLoALZZFpA/s1600/DISE%252525C3%25252591O_GRAFICO_WEB_thumb%2525255B3%2525255D.jpg&w=446&h=338&ei=5VQQULnXN8a06wHhyIDwDw&zoom=1&iact=hc&vpx=374&vpy=371&dur=2665&hovh=195&hovw=258&tx=164&ty=132&sig=105865844912306760946&page=8&tbnh=154&tbnw=204&ndsp=20&ved=1t:429,r:2,s:136,i:142 MODIFICADO POR BIBIANA CHAVARRO

• http://www.google.com.co/imgres?num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=-NhVcIWDhsyv5M:&imgrefurl=http://es.wikipedia.org/wiki/Derecho_de_autor&docid=LgMOvagboRgovM&imgurl=http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Copyright.svg/220px-Copyright.svg.png&w=220&h=220&ei=M1UQUMCpDeba6wH6uoGwAQ&zoom=1&iact=rc&dur=394&sig=105865844912306760946&sqi=2&page=1&tbnh=150&tbnw=150&start=0&ndsp=13&ved=1t:429,r:0,s:0,i:119&tx=55&ty=39