Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
Published by Articulate® Presenter www.articulate.com
Presentation Details: Slides: 38 Duration: 00:19:34
Presenter Details: Name: Gisselle Tapia Title: Vicerectora Auxiliar Asuntos Académicos - Campus Virtual
Content Editor: Name: Karola Ramírez Title: Diseñadora Instruccional
Notes: Bienvenidos al módulo Diseño Gráfico de un Curso en Línea.
Notes: En este módulo trabajaremos los siguientes temas: Imagen digital Armonía en el diseño Derechos de autor
Notes: Introducción
En este módulo revisaremos los elementos gráficos y visuales
que se deben considerar en el diseño gráfico de un curso en
línea. Incluye una orientación sobre el uso de imágenes y
derechos de autor.
La armonía del diseño gráfico implica el manejo adecuado de
los elementos, este factor aumenta la percepción de confort
en los estudiantes de un curso distancia.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados. 1
ñ á
í
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Contenido
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Introducción
En este módulo revisaremos los elementos gráficos y visuales que se deben considerar en el diseño gráfico de un curso en línea. Incluye una orientación sobre el uso de imágenes y derechos de autor.
La armonía del diseño gráfico implica el manejo adecuado de los elementos, este factor aumenta la percepción de confort en los estudiantes de un curso distancia.
3
Published by Articulate® Presenter www.articulate.com
Notes: Los objetivos de este módulo son:
• Discutir los elementos del diseño gráfico para ambientes virtuales.
• Aplicar los fundamentos del diseño gráfico en una presentación electrónica, para un curso en línea.
• Discutir ley de derechos de autor para la utilización de recursos de la Web.
Notes: Imagen digital
Notes: La imagen digital está formada por una serie de matrices numéricas de ceros (0) y unos (1) que se almacenan en una memoria informática y que definen las características de una fotografía. Estos números binarios (O,1), se representan como pequeños cuadraditos, llamados píxeles, que forman un mosaico. Como los píxeles suelen ser muy pequeños, el ojo y el cerebro del observador se encargan de formar una imagen continua, ignorando las diminutas piezas que la forman.
Notes: Pero qué es DPI? DPI significa en ingles dots per inch o en español puntos por pulgadas. Esos dots son en si unos cuadritos y esos cuadritos se llaman pixeles. La cantidad de pixeles que usas en una imagen se le llama resolución. La imagen está formada por millones de cuadritos, cada cuadrito es un color sólido. Mientras más cuadritos hayan para componer esa imagen, mejor calidad se va a tener. Cuando una imagen tiene poco pixeles (el nombre de los cuadritos) se dice que la imagen está pixelada. Próximamente vamos a hablar de resoluciones.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Objetivos
• Considerar todos los elementos que componen una imagen digital.
• Identificar los aspectos que permiten armonizar el diseño gráfico de un curso en línea.
• Presentar referencias sobre la ley de derechos de autor para la utilización de recursos de la Web.
4
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Resolución(DPI dots per inch o puntos por pulgada)
Está formada por una serie de matrices numéricas de ceros (0) y unos (1) que se almacenan en una memoria informática y que definen las características de una fotografía.
Píxeles - forman un mosaico.
Mientras más pixeles mejor será la resolución o calidad de la imagen y mayor será su peso.
6Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Resolución (continuación)
7Imagen digital
Published by Articulate® Presenter www.articulate.com
Notes: Resolución es la cantidad de pixeles que vas a usar por
imagen (DPI) si colocas un número de 50 de resolución eso
significa que cada pulgada en la imagen va a tener una
cantidad de 50 cuadritos componiéndola.
Por ejemplo:
• 72 DPI se utiliza para imágenes a ser publicadas en
la Web, videos o imágenes que solo se verán en una
pantalla y no están intencionadas a ser impresas.
• 150 DPI se utiliza para una imagen que se va a
imprimir en blanco y negro, formatos pequeños, o un
tamaño excesivamente grande como los conocidos
rótulos publicitarios o billboards a color que su
intención es verse de lejos.
• 300 DPI es la resolución ideal para una imagen que
se va a imprimir a color, y que se espera sea de
buena calidad para colocar en una revista o cualquier
publicación impresa.
NOTA: Para el propósito de este módulo solo trabajaremos
con imágenes de 72 DPI. El alto por ciento de las imágenes
que se bajan de Internet suele ser de 72 DPI. Hay páginas
que se dedican a la venta de imágenes y ellas proveen las
mismas imágenes con una alta definición que excede esta
medida.
Notes: ¿Cómo verificar la resolución en las imágenes?
1. Seleccione la imagen 2. Haga un right click y elija Properties 3. Presione sobre Summary, e identifique la Resolución
horizontal y vertical
Notes: Estos son algunos ejemplos de imágenes y sus diferentes resoluciones. Por ejemplo si la primera imagen con una resolución de 300 dpi (dots per inch) puntos por pulgadas. Es ideal para ser impresa para una revista o poster. La segunda imagen con una resolución de 150 dpi es ideal para ser impresa para periódicos y si fuese a color la imagen, entonces un tamaño pequeño. La tercera imagen con una resolución de 72 dpi es ideal solo para ser vista en un monitor, ya sea televisión o una computadora no es de buena calidad para ser impresa.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Resolución en casos específicos
Tamaños que se usan en frecuencia para la resolución:
72 DPI - Web, video o imagen que no se va imprimir.
150 DPI - imagen que se va a imprimir en blanco y negro o un tamaño excesivamente grande como los conocidos rótulos publicitarios o “billboards”.
300 DPI - imagen que se va imprimir a color de buena calidad.
8Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
¿Cómo verificar la resolución en las imágenes?
9Imagen digital
12
3
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Resolución de imágenes
10Imagen digital
1 2 3
Published by Articulate® Presenter www.articulate.com
Notes: Estos son formatos típicos que se usan cuando trabajamos para la web. A continuación, hablaré de cada uno y dire sus fortalezas y debilidades.
Notes: JPG es actualmente el formato más usado y mas popular en la web para las imágenes. Este formato es liviano y se puede usar virtualmente en cualquier computadora de hoy día. Las fotos que tomas en una cámara digital salva las fotos en este formato. Su debilidad es que no es la mejor calidad para una imagen y es preferible que se use para imágenes que van ser usadas para la web o videos y no para ser impresas. También este tipo de imagen no tiene transparencias. Solo imágenes sólidas.
Notes: GIF o Graphic Interchange Format que se caracteriza por:
• 256 colores
• Creación de títulos, botones o animaciones
• Creado por CompuServe en 1987 para dotar
de un formato de imagen a color para sus
áreas de descarga de ficheros sustituyendo
su temprano formato
• Nota: Los beneficios principales para usar
este formato son los siguientes:
cuando necesitas una imagen de pocos
colores a un peso extremadamente pequeño.
También cuando necesitas una animación.
Muchos web banner son animados en este
formato.
Y por último, si quieres que la imagen tenga
transparencia.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Formatos
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
GIF (Graphic Interchange Format)
11Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Formatos: JPEG
• Es un algoritmo diseñado para comprimir imágenes fijas con 24 bits de profundidad o en escala de grises. La compresión es con pérdida de calidad por lo tanto al descomprimir la imagen no es la misma.
12Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Formatos: GIF 256 colores
Creación de títulos, botones o animaciones
Creado por CompuServe en 1987 para dotar de un formato de imagen a color para sus áreas de descarga de ficheros sustituyendo su temprano formato
13Imagen digital
La misma imagen, en versión .gif escuatro veces más
liviana.
Published by Articulate® Presenter www.articulate.com
Notes: PNG, es el más nuevo y el menos usado. Es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Desarrollado para solventar las deficiencias del formato GIF. Permite almacenar imágenes con una mayor profundidad de color. De todos los formatos este tiende a mantener la mejor calidad a la imagen y también puede tener transparencias. El problema de usar este formato es que tiende a ser muy pesado o el más pesado comparado con las opciones mencionadas. Hay ocasiones en las cuales este tipo de imagen no es compatible, por ejemplo, este formato no es compatible con Blackboard. Se considera que el formato “jpg” es mejor para fotografía digital, mientras que los formatos .gif y .png son mejores para imágenes gráficas.
Notes: ¿Cómo usted puede controlar la resolución o tamaño de la
imagen?
Discutamos diferentes alternativas:
Photoshop, es un programa de edición.
Microsoft Picture Manager viene incluido en el paquete de
programas de Windows.
Scanner es posible elegir el tipo de resolución deseada de
una imagen.
En la cámara digital, encuentra predeterminadas varias
opciones según la marca. Puede conseguir más información
sobre fotografía digital en:
http://www.eduteka.org/FotografiaDigital2.php
Notes: En photoshop los pasos para trabajar la resolución son los
siguientes:
1) Localice la opción Image en la parte superior del programa.
2) En el submenú presione sobre Image size
3) Una vez abra una ventana se desplegará la información de
tamaño de la imagen.
En este ejemplo solo vamos estar pendientes a la parte de
resolución.
Nota:
Pixel Dimensions: es el tamaño en el cual el documento se va
a ver en la pantalla.
Document Size: es el tamaño del documento como tal, es
decir, si lo imprimes ese es el tamaño que va imprimir.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Formatos: PNG
• Formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes.
• Desarrollado para solventar las deficiencias del formato GIF.
• Permite almacenar imágenes con una mayor profundidad de color.
• Transparencias
14Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
¿Cómo editar una imagen?
Photoshop
o MicroSoft Picture Manager
Scanner
o Cámara digitalMás información sobre fotografía digital en: http://www.eduteka.org/FotografiaDigital2.php
15Imagen digital
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Edición de imágenes
16Imagen digital
P
h
o
t
o
s
h
o
p
Published by Articulate® Presenter www.articulate.com
Notes: Ahora vamos a ver un ejemplo de cómo editar una foto para que pueda utilizarla en su perfil de Facilitador/a, con Microsoft Office Picture Manager
1. Localice la imagen que va a insertar en su clase. Puede ser la fotografía tipo carnet.
2. Haga un right clic sobre ella y 3. Elija abrirla con MS Manager
Notes: 4. En la parte superior del programa elija “Edit Picture”
5. En la parte derecha del programa elija “Resize”
6. Escriba la nueva medida
Nota: A veces al editar la medida de la foto a 150x150, puede
que el programa lo ajuste de la mejor manera posible, lo
importante es que la medida no exceda los 150x150 en
ninguna de sus dimensiones. Uno de sus lados puede ser
menor pero nunca mayor.
Notes: Mediante un Scanner es otra forma para bajar el tamaño a
una imagen o foto que ya usted posee.
Antes de llevarla a su computadora en la sección de
resolución puede bajar o subir el tamaño.
Nota: es preferible scannear una foto a buena calidad de
resolución y luego con un programa de edición bajar la
resolución. Pero si no es una alternativa, entonces es mejor
scannear a 72 dpi para propósitos de subir imágenes que
serán publicadas en Web.
También recuerde que una vez baje la resolución de la
imagen no debe subirla. Es decir, si escaneó la imagen a 72
DPI y después va a photoshop y pone la imagen a 300 DPI,
el programa va a inventar información no existente y eso
provocará que la imagen de torne borrosa.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Ejemplo: Edición de una foto
17Imagen digital
M
S
M
A
N
A
G
E
R
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.18
Ejemplo: Edición de una foto (continuación)
5150 150
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
S
c
a
n
n
e
r
19Imagen digital
Published by Articulate® Presenter www.articulate.com
Notes: Una cámara digital es diferente, la resolución en la mayoría
de éstas es 72 dpi. Lo que cambia es el tamaño de la foto y el
peso.
La M es de mega pixels.
Mientras más pesada la imagen mejor calidad pero recuerde
que esas fotos de gran tamaño, son muy buenas para
impresión pero no para trabajarlas en un documento que va a
ser visualizado en un monitor, y puede tornar su curso algo
lento, y si los estudiantes tienen opción de bajar o grabar ese
material, puede que se les haga algo difícil.
Notes: Armonía en el diseño
Notes: Antes de comenzar a seleccionar elementos de diseño gráfico para su curso en línea, hágase las siguientes preguntas:
1. ¿Cuál es el tema del curso?, es ambientalista? Económico? Industrial, etc.
2. ¿Qué imágenes tiene disponible para usar que estén libres de derechos de autor? Si las imágenes que va a usar son de cierto color eso puede determinar los colores de fondo que tiene de alternativa.
3. ¿Cuál será la dinámica del curso? Por ejemplo, si su curso está relacionado a temas ambientales probablemente desee seleccionar una paleta de colores orientada a los colores que más se destacan en la naturaleza. Si su curso es del campo de administración de empresa probablemente utilice colores más fríos o sobrios.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Elementos básicos de diseño gráfico para un curso online
Consideraciones iniciales:
Relacionar tema del curso con colores del área académica
Escoger imágenes universales que sean pertinentes y libres
Seleccionar paleta de colores que sea uniforme en todo el curso
22Armonía en el diseño
Published by Articulate® Presenter www.articulate.com
Notes: Ahora revisemos:
¿Cuáles son los elementos gráficos básicos y clave para el
diseño de un curso?
• Banner – Es lo que identifica el curso y contiene el
título y código del mismo. Puede estar compuesto de
imágenes representativas del curso. Un tamaño
estándar para el banner de un curso en línea puede
ser 701 x 160 pixeles.
• Plantilla para presentar la información. Generalmente
se utilizan las presentaciones en formato PowerPoint.
Podría incluir plantillas para el texto en HTML.
• Color de los botones del Menú, títulos de los módulos
u otros textos que desee incluir dentro del curso en
línea.
Notes: Algunas recomendaciones que podemos darle son:
• No utilice más de tres colores para el fondo de su
presentación.
• Seleccione colores que no roben la atención del usuario,
ni dificulten la legibilidad del texto.
• El banner superior está más organizado con un patrón de
colores que permite leer claramente el nombre del curso
y acordes al área académica. La imagen es de buena
calidad.
• El de la parte inferior tiene muchos efectos y aunque
esencialmente es una paleta de verde con grises son tan
neutrales que se hace un poco difícil poder leer la
información o sacar el tema del curso.
Notes: Le presentamos tres ejemplos de las páginas de inicio de
distintos cursos en líneas en diferentes plataformas
educativas.
Visualicen las diferencias en las opciones de entrada, menú
de navegación, banner o imágenes y colores.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Elementos de diseño gráfico (continuación)
Banner, pantalla (imágenes)
Presentación de información (plantillas)
PowerPoint
Tipo de texto (HTML)
Texto directo en plataforma
Significado y uso de color
23Armonía en el diseño
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Ejemplos de banner
24Armonía en el diseño
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Ejemplos Pantalla curso, menú
25Armonía en el diseño
Published by Articulate® Presenter www.articulate.com
Notes: Una vez tenga una idea de los colores más apropiados para
su curso, vamos a crear las plantillas para las presentaciones
PowerPoint.
Siga estas sencillas instrucciones:
• En el menú de inicio de su computadora, elija trabajar en
el programa PowerPoint
• Enseguida se desplegará una plantilla ppt acorde a la
edición de programa que usted tenga instalado en su PC.
• Identifique y elija la opción de Design. Puede escoger uno
de los fondos que están disponibles o también en esta
sección podrá cambiar el fondo de su presentación.
Vamos a diseñar el curso a su gusto:
Explore las opciones de diseño en: Colors, Fonts y Themes.
NOTA: En View/Slide Master usted puede hacer cambios que
impacten todos los “slides” o plantillas de la presentación.
Notes: Blanco
Luz, bondad, inocencia y perfección
Amarillo
Luz / Energía / Felicidad
Naranja
Alegría / Trópico
Rojo
Pasión/Violencia
Púrpura
Realeza / Poder
Azul
Lealtad/ Fe/ Inteligencia
Verde
Naturaleza/ Fertilidad /Esperanza
Negro
Muerte/Misterio
Notes: Observe estas combinaciones de colores que
tradicionalmente funcionan para hacer un contraste adecuado
entre el color del texto y el color del fondo.
Recuerde la importancia de la legibilidad, eso implica que el
color del fondo de la plantilla, tiene que ir tono con el color
que utiliza para escribir el texto.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Selección de plantilla Ppt
26Armonía en el diseño
Paso 1 Paso 2
Paso 3
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Significado y uso del color
27Armonía en el diseño
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Combinación de colores
Negro sobre amarillo
Verde sobre blanco
Azul sobre blanco
Blanco sobre azul
Negro sobre blanco
Amarillo sobre negro
Amarillo sobre azul
Blanco sobre rojo
28Armonía en el diseño
Para ver diferentes combinaciones de colores
creadas por diseñadores de al rededor del mundo visite:http://kuler.adobe.com
Published by Articulate® Presenter www.articulate.com
Notes: Una rueda típica de colores fríos a colores tibios. Colores
opuestos uno al otro tienden a ser una buena combinación.
También un truco rápido, si usa un color de la parte superior
de la rueda como fondo, debe utilizar los colores de la parte
inferior para los textos, o viceversa.
Notes: Tipografía:
Una vez que seleccione los colores y el fondo, es hora de
escoger una tipografía adecuada. Hay miles de tipografías.
Al trabajar en PowerPoint, puede observarlas en el menú
principal de HOME en la opción de Font.
Además del tipo de letra, otros factores importantes son el
tamaño y el color. El tamaño se mide en puntos. Por lo
general el título de una presentación en PowerPoint mide 40
puntos. El Texto de la presentación debe medir entre 24 y 36,
dependiendo en dónde aparecerá publicada la presentación.
En relación al color, recuerde las sugerencias o
combinaciones que presentamos anteriormente para que la
información sea legible.
Nota: aunque los programas de edición y en este caso
PowerPoint ya vienen con tipografías predeterminadas,
también las puede bajar gratis de la Internet.
En el lado izquierdo de la pantalla puede ver una imagen
tomada de la página www.dafonts.com
Notes: Ahora veamos algunos tipos de letra o tipografía:
Los que aparecen en la columna de la izquierda no son
apropiados para presentaciones educativas a las que
acceden estudiantes con diversos tipos de inteligencias y en
algunos casos personas que pudieran tener algún
impedimento visual. Este tipo de letra por lo general tiene
muchos elementos decorativos que distraen del mensaje que
se quiere llevar al lector.
Los que aparecen en la columna de la derecha sí son
apropiados para trabajos académicos y presentaciones en
línea. Este tipo de letra es sencilla y facilita la lectura.
Cabe indicar que en estos ejemplos la letra está en formato
normal, tamaño 22.
Al seleccionar la tipografía evalúe la situación o estilo que
aplique o sea más apropiado al diseño.
Published by Articulate® Presenter www.articulate.com
Notes: Para mantener visualmente limpio cada “slide” debe tratar de
seguir esta regla, mejor conocida como la Regla del 6 X 6.
Esto quiere decir, seis palabras por línea, seis líneas por
visual con un total no mayor de 36 palabras por slide.
Notes: Otro error común es escribir todo el texto en mayúsculas.
Observe que dificulta la lectura.
También preste atención en cómo escribe los títulos. En
español se suelen escribir de dos formas:
• Primera letra en mayúscula y las demás en minúscula
• Con relación a los bullets o viñetas, procure
indentarlas en formato secuencial, como se presenta
en este slide
Notes: Derechos de autor
Notes: Cuando los facilitadores a distancia diseñan sus recursos
instruccionales, donde incluyen imágenes y otro material
suceptible a reclamaciones por derechos de autor, deben
tomar en cuenta las leyes que aplican, en nuestro caso a
Puerto Rico que son las mismas de Estados Unidos.
Las leyes de derechos de autor según el Código Federal,
protegen a los autores de: “obras originales”, literarias,
dramáticas, musicales, artísticas e intelectuales.
Le recomendamos que verifique otros enlaces de interés en
la sección referencias de la carpeta de este módulo.
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Tipografía (recomendaciones finales)
• EVITE ESCRIBIR TODAS LAS PALABRAS EN MAYÚSCULAS
– (Observe que dificulta la lectura)
• Títulos
– Primera letra en mayúscula y las demás en minúscula.
• Bullets (viñetas)
– Indentadas en formato secuencial
33Armonía en el diseño
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
Leyes que aplican a Puerto Rico
• Protección proporcionada por las leyes de Estados Unidos
• Título 17, del Código Federal - Derecho de Autor “Copyright”
http://www.copyright.gov/title17/
Nota: Vea otros enlaces en la sección de referencias.
35Derechos de autor
Published by Articulate® Presenter www.articulate.com
Notes: Es importante que tenga en mente la lista que se presenta
donde detallamos lo qué está protegido por la Ley de
Derechos de Autor.
Notes: Recuerde que todo lo que usted baje de Internet fue creado
por alguien y necesita tener cautela sobre lo que puede y no
puede usarse.
Por ejemplo, para esta presentación no se podría colocar un
vídeo sin darle crédito al autor. Así mismo, si una imagen,
tabla, foto deben ser reconocidas y citadas adecuadamente.
Es importante que incorpore en sus presentaciones citas
según formato APA, esto evita en gran medida incurrir en
plagio.
Notes:
© Sistema Universitario Ana G. Méndez, 2012. Derechos Reservados.
¿Qué está protegido por las leyes? (continuación)
• Obras literarias
• Trabajos musicales
• Obras dramáticas
• Trabajos coreográficos
• Películas
• Animaciones
• Obras arquitectónicas
• Trabajos pictóricos, gráficos y esculturales
• Programa de computadoras
• Grabaciones
37