instructivo de-diseño-grafico- para las adas

PROYECTO CANAIMA EDUCATIVO

INSTRUCTIVO DISEÑO GRÁFICO PARA LA ELABORACIÓN

DE LAS ACTIVIDADES DIGITALIZADAS

PARA LOS APRENDIZAJES (ADA)

DGC/PCE/MV/coordinacióndediseñográfico

Introducción:

El diseño gráfico es uno de los elementos importantes en la elabora-

ción de las Actividades Digitalizadas para los Aprendizajes. Por medio de

este se representa el guión pedagógico a través de imágenes diversas

como ilustraciones, fotografías, botones, tablas, etc, y bajo la interacción

y navegabilidad ofrecida a través del desarrollo técnico del ADA.

El diseño gráfico en el desarrollo del ADA, merece cumplir diversos as-

pectos y condiciones para la creación de las imágenes que complemen-

tan y brindan el objetivo de hacer llegar el mensaje visual-pedagógico

necesario en el ADA.

Por lo dicho anteriormente, el presente instructivo tiene como finalidad

ofrecer las orientaciones principales para el diseño gráfico de las imáge-

nes requeridas para las Actividades Digitalizadas para los Aprendizajes,

destacando en el mismo los elementos más importantes que brinden

conceptos visuales atractivos y que no se distancien de los lineamientos

pedagógicos ni técnicos.


LEY DE INFOGOBIERNO publicada en la Gaceta Oficial de la República

Bolivariana de Venezuela N° 40.274 el 17 de octubre de 2013.

• Artículo 1: “...promover el desarrollo de las tecnologías de informa-

ción libres en el Estado; garantizar la independencia tecnológica; la

apropiación social del conocimiento; así como la seguridad y defensa

de la Nación”.

• Artículo 3: en su numerales 3 y 5:

◦ Universalizar el acceso de las personas a las tecnologías de informa-

ción libres y garantizar su apropiación para beneficio de la sociedad.

◦ Promover el empoderamiento del Poder Popular a través de la gene-

ración de medios de participación y organización de las personas, ha-

ciendo uso de las tecnologías de información.

• Y demás artículos de la Ley que entró en vigencia derogando el de-

creto presidencia 3390 del 2004.

Objetivo del instructivo de diseño gráfico: Especificar los aspectos

más importantes del diseño gráfico en la creación de Actividades Digita-

lizadas para los Aprendizajes (ADA).

Definición de Actividad Digitalizada para los Aprendizajes (ADA):

Recurso para el aprendizaje con formato digital que permite pedagógica-

mente y de manera dinámica, mostrar aspectos de las áreas de

aprendizaje que refuerzan los conocimientos, saberes y destrezas de

las y los estudiantes de Educación Primaria, los contenidos se presentan

con distintos niveles de complejidad a través de conceptos, actividades


lúdicas, lecturas, preguntas generadoras, validaciones, entre otras, in-

corporándose en ellas audios y videos referentes al contenido de la mis-

ma.

Consideraciones para crear un contenido educativo:

1) El presente instructivo suprime deliberadamente las tilde en las

palabras referidas a los nombres de carpetas y documentos

debido que las mismas deben estar escritas sin acentos,

mayúsculas, espacios en blanco, números, ni ningún tipo de

carácter especial ( ñ,/,_ ).

2) Solo deben existir las carpetas que se necesitan para la realización

de las Actividades Digitalizados para los Aprendizajes.

3) Los nombres de las carpetas no deben poseer acentos,

mayúsculas, espacios en blanco, números, ni ningún tipo de

caráter especial ( ñ,/,_ ).

4) Los nombres de las imágenes creadas en cualquiera de sus

formatos (.png, .svg, .xcf), no deben poseer acentos, mayúsculas,

espacios en blanco, ni caráter especial ( ñ,/,_ ).

5) En el siguiente diagrama de carpetas se muestra la estructura de

las mismas. La carpeta “imágenes” (resaltadas en un marco gris)

es la designada para guardar todas las imágenes que conforman

el RDA, ADA o Infografía, organizándolas respectivamente según

su formato en las subcarpetas que la conforman, bien sea, png,

svg o xcf.


En la elaboración las ADA se debe cumplir con la estructura de carpe-

tas que permitirán la organización del contenido que se va a trabajar.

Diagrama de carpetas:


• Archivos de la carpeta imágenes: Esta carpeta posee las imá-

genes que se van a incluir en el contenido educativo y los edita-

bles, bien sean en gráficos vectoriales redimensionables (svg) o

archivos de imagen rasterizada asociados con GIMP (xcf).

• png: formato gráfico basado en un algoritmo de compresión sin

pérdida para imagen en mapa de bits no sujeto a patentes, estas

son las imágenes que serán utilizadas en el desarrollo del conteni-

do educativo, las cuales al ser exportadas no deben poseer carac-

teres especiales, guión bajo, acentos o numeración al principio del

nombre, solo deben ser exportadas en formato png.


Sub-carpetas para ubicar las imagenes en tus tres formatos

Carpeta principal de imagenes

Carpeta para los archivos .png

archivos .png

• svg: editables de los diseños que se han elaborado para un deter-

minado contenido educativo, estos deben estar en la carpeta svg,

dado que se pueden necesitar para la adecuación de alguna ima-

gen o texto que posea el contenido educativo.

• xcf: es el formato nativo de Gimp, esta carpeta contendrá los edi-

tables de las imágenes reales que se han desarrollado para el con-

tenido educativo.


Carpeta para los archivos .svg

Archivos .svg

Archivos .xcf

Carpeta para los archivos .xcf

Consideraciones para la elaboración de Diseño Gráfico ADA

• Iniciar con la lectura del guión pedagógico del ADA realizado por

el docente. La planificación conjunta docente-técnico-diseñador

brindará el desarrollo de un guión gráfico con un esquema

detallado del diseño a realizar.

• Socializar con el docente antes y durante la creación del diseño

gráfico, de esta manera se unificarán ideas, conceptos, estilos,

correcciones, al igual que opiniones o sugerencias que

complementen lo ya expuesto en el guión pedagógico.

Imágenes

1. Para la creación del ADA, las imágenes pueden ser ilustradas,

vectorizadas o fotografías. Cabe destacar que internet al ser una

de los medios principales para la búsqueda y acceso a fotografías,

las mismas deben ser descargadas principalmente de páginas

oficiales, que no posean derecho de autor o privativas de su uso, y

el formato de las mismas debe ser png.


2. Partiendo de la planificación conjunta docente-técnico-diseñador

las imágenes que conformen el ADA deben tener un estilo o línea

gráfica acordado en el equipo y apropiado para el grado del

contenido. De igual modo, gracias a esa planificación se podrá

tener en cuenta la cantidad de imágenes necesarias para construir

el recurso y sus medidas, por ejemplo, intro, pantallas, fondos,

cuadros de diálogos, botones, etc.

3. Tener presente que al establecer e iniciar el diseño gráfico bajo un

estilo, el mismo debe sostenerse en todo el recurso con el fin de

mantener una estética visual en su totalidad. Por ejemplo, estilos

de las imágenes vectoriales, ilustraciones, personajes ilustrados o

vectorizados, estilos de trazo, relleno, colores, fondos de pantallas,

botones, etc.

4. Hacer uso de las aplicaciones libres para el desarrollo del diseño

gráfico de las imágenes que conforman las Actividades

Digitalizadas para los Aprendizajes. A continuación mencionamos

dos de las aplicaciones que se usan principalmente para tal fin,

GIMP e Inkscape:

• GIMP (GNU Image Manipulation Program) el

cual es un programa de edición de imágenes digitales

en forma de mapa de bits, tanto dibujos como

fotografías.


• Inkscape el cual es un editor de gráficos

vectoriales en formato SVG, incluyendo características

para el diseño de formas básicas, trayectorias, texto,

canal alfa, transformaciones, gradientes, edición de

nodos, exportación de SVG a PNG, agrupación de

elementos, etc.

5. Se recomienda mantener al docente al tanto de las imágenes e

ideas gráficas que van realizándose para que sea de su

conocimiento el desarrollo del ADA, de esta manera podrán

hacerse las correcciones necesarias, esto evitaría futuros retrasos

o modificaciones de las imágenes.

6. Las imágenes deben estar diseñadas conforme a la resolución de

pantalla del modelo del equipo portátil Canaima, en este caso

1366x768px.

7. Para el tratamiento de imágenes en general es importante

considerar el uso moderado de los filtros o efectos, modificación

de colores, saturación, brillo, contraste, desenfoque, opacidad, etc,

con el fin de presentar un arte final que cumpla claramente el

propósito pedagógico del recurso.

8. Es importante mantener la proporción (ancho, alto, y profundidad)

en las imágenes, además de una adecuada relación entre los

objetos de diferentes dimensiones.DGC/PCE/MV/coordinacióndediseñográfico

9. Se recomienda crear el diseño de imágenes complejas en archivos

independientes, principalmente las imágenes vectoriales, todo

esto para evitar archivos pesados que puedan ralentizar el equipo

de trabajo.

Personajes y entorno gráfico

1. Es importante representar a través de los personajes y el entorno

gráfico diseñado para el ADA, la diversidad cultural, social y

biológica de Venezuela, representando así la variedad de

habitantes, comunidades, ciudades, espacios abiertos de

recreación y entretenimiento propios de la geografía nacional,

incluyendo a su vez, su flora y fauna.

2. En el diseño de los personajes, es necesario reflejar a través de

estos:

• La diversidad étnica presente en los habitantes de las

diferentes regiones de Venezuela.

• La diversidad de géneros representado a través de personajes

femeninos y masculinos en igualdad de participación (partiendo

también de lo planteado en el guión pedagógico).

• La inclusión de personas con discapacidad de cualquier tipo,

bien sea, visual, auditiva, motora, entre otros.

• La inclusión de personas adultos mayores, debido a que forman

parte importante de la cultura, sociedad y educación.


3. En la creación de imágenes vectorizadas o ilustradas de

personajes, en los mismos deben visualizarse claramente las

características físicas así como detalles en rostros, manos, pies,

cabellos, entre otros.

Colores

1. La combinación de colores debe corresponder a la realidad

objetiva y hacerse en concordancia con la teoría del color y fines

pedagógicos.

2. Hacer uso del círculo cromático para brindar armonía en la

composición y combinación de los colores, aplicado de tres

maneras básicas:


Imagen donde se puede apreciar parte de lo mencionado anteriormente. Diversidad de géneros, cultura, diversidad

étnica, la flora y fauna de Venezuela.

a) Colores cálidos con colores fríos.

Por ejemplo: rojo con azul, verde

con amarillo.

b)Colores complementarios. Por

ejemplo: violeta con amarillos,

blanco con negro.

c)Gradientes de color. Por ejemplo:

rojo en sus distintas tonalidades.

3. Se debe evitar el uso excesivo de colores, combinando un máximo

de cuatro colores en el diseño de un elemento de una misma

pantalla (líneas, fondos, textos, flechas, botones, cuadros de

diálogo, otros), esto no incluye las imágenes principales.

4. Es necesario identificar y respetar el uso del color en cuanto a la

diversidad étnica y cultural venezolana.

5. Se permite la aplicación de los distintos tipos de rellenos

encontrados en algunas aplicaciones de diseño como Inkscape,

por ejemplo: relleno uniforme y especiales (relleno degradado,

relleno patrón, relleno de textura).


Distribución de los elementos en la composición

1. Respetar los elementos conceptuales del diseño, como volumen,

forma, medida, espacio en el plano, gravedad, permitiendo la

ubicación y la interrelación de estos en la composición.

2. La distribución de los elementos (imágenes, textos, flechas,

botones, cuadros de dialogo, otros) deben estar equilibrados en las

pantallas, ya sea de manera simétrica o asimétrica.

3. El diseño de las pantallas debe mantener espacios libres, y no

saturadas para permitir el descanso visual.DGC/PCE/MV/coordinacióndediseñográfico

Elementos de diseño gráfico

Composición simétrica Composición asimétrica

Tipografía

1. La fuente usada en el recurso debe ser de licencia libre.

2. Lograr una composición tipográfica adecuada, teniendo en cuenta

su legibilidad, sus proporciones, el contraste entre los trazos

gruesos y delgados, la existencia o falta de remate, su inclinación

y forma.

3. Se recomienda que para la creación o adecuación de las ADAS de

1er y 2do grado, la tipografía sea Dejavu Sans, debido a la buena

legibilidad de esta fuente, la cual es la más apropiada para la niña

o niño que se está iniciando en la lectura y escritura.

4. Se permite el uso de fuentes ornamentales o caligráficas, el mismo

dependerá del contenido del ADA y deberá ser moderado con el

fin de que el texto sea legible evitando la fatiga visual, del mismo

modo debe tomarse en cuenta todo lo se orienta con respecto a la

educación y el derecho de las personas con Necesidades

Educativas Especiales y con discapacidad, orientación 47 de

las líneas orientadoras 2014 - 2015.

5. El comienzo de cada párrafo debe iniciarse con sangría de tres a

cinco espacios.


6. El texto puede estar alineado de cinco formas: alineado a la

izquierda, alineado a la derecha, justificado, centrado y asimétrico.

En caso que el texto se encuentre justificado, este debe ser

uniforme para evitar grandes espacios en blanco entre palabras

(río tipográfico).

7. Es permitido el uso de viñetas. El tipo de viñeta seleccionado debe

mantenerse en todo el recurso. Cabe destacar que al usar

imágenes como viñetas, las mismas deben esta ajustadas a la

línea gráfica del ADA.

Aspectos importantes de la estructura del ADA

1. Pantallazo:

Toda ADA debe llevar pantalla principal. En ella se muestran el

título, un botón de inicio o barra de navegación y se refleja la

identidad gráfica según el contenido a desarrollar.

DGC/PCE/MV/coordinacióndediseñográficoPantallazo ADA: “Animales beneficiosos o perjudiciales”

• El título se debe mostrar de forma atractiva y sencilla.

• El botón inicio y el resto de botones del menú puede

presentarse en dos modalidades según la línea gráfica:

botón estándar o elemento gráfico de enlace.

◦ Botón estándar: es la imagen

vínculo que se presenta en forma de

figura geométrica. Estos en su

mayoría llevan la palabra que indica

su enlace. Se recomiendo ubicarlo en

la parte inferior de la pantalla.

◦ Elemento gráfico de enlace:

imagen que forma parte del contexto

gráfico (una persona, un animal, una

fruta o planta, un objeto) y que

cumple la función de botón

permitiendo la interacción en el ADA,

Su ubicación dependerá de la

composición gráfica de la pantalla.

2.- Pantalla de menú

• Corresponde a la navegabilidad del ADA, en ella se ubican

los diferentes botones relacionados al contenido a


Elemento gráfico de enlace “Sabías que...” para recurso “Desordenes alimenticios”

Botón “Inicio” para recurso “Animales beneficiosos o

perjudiciales”

desarrollar, actividades, orientaciones y sugerencias, entre

otros.

• Los botones deben ser de fácil identificación para la niña y el

niño manteniendo la misma consistencia en cuanto a tonos,

colores, tipos y tamaños de letra.

• Para mantener un equilibrio visual de los elementos gráficos

del menú, se debe evitar el uso de colores que no

proporcionan el contraste adecuado entre el botón, la fuente

tipográfica, y el fondo de estos. También es necesario no

usar imágenes recargadas en los botones debido a que

pierde legibilidad.


Pantallazo menú: “Industrias básicas y la generación de energia”

3.- Fondo de pantalla

• Hacer uso del color de acuerdo a la temática desarrollada en

el ADA. Tener presente que el fondo de las pantallas es solo

un complemento gráfico y no debe ser tomado como un

elemento principal.

• Hacer uso adecuado de los planos de composición gráfica

(1er plano, 2do plano, 3er plano) permitiendo así una mejor

apreciación del diseño, en cuanto a percepción visual de la

pantalla.

1. Guardado de archivo, entrega de imágenes y seguimiento

• Las imágenes deben estar organizadas respectivamente

según su formato en la carpeta asignada para este, bien sea,

png, svg o xcf.

• Evitar colocar números delante del nombre de cada imagen

al guardarla para evitar errores en el script del recurso al

vincular la imagen. Se recomienda hacerlo así según sea el

formato de imagen: identificarla con el nombre, y si necesita

numeración colocarla después de este.


nombre-01.png nombre-01.xcf nombre-01.svg

• Hacer entrega de las imágenes al técnico y al docente, de

forma ordenada en las rutas y carpetas respectivas.

• Corroborar junto al técnico, el montaje de las imágenes en el

ADA y su correcta visualización (imágenes no pixeladas o

deformadas).

• En el caso que el técnico genere el texto del contenido,

verificar que se cumplan los items especificados en apartado

de tipografías.

Himmaru Ledezma

Coordinador de Diseño

Proyecto Canaima Educativo


instructivo de-diseño-grafico- para las adas

Internet