content editor: contenidointroducción · 2012-03-19 · numéricas de ceros (0) y unos (1) que se...

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


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


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.


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



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


Resolución (continuación)

7Imagen digital


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.


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


¿Cómo verificar la resolución en las imágenes?

9Imagen digital

12

3


Resolución de imágenes

10Imagen digital

1 2 3


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.


Formatos

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

GIF (Graphic Interchange Format)

11Imagen digital


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


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.


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.


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


¿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


Edición de imágenes

16Imagen digital

P

h

o

t

o

s

h

o

p


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.


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


S

c

a

n

n

e

r

19Imagen digital


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.




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


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.


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



Ejemplos de banner



Ejemplos Pantalla curso, menú



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.


Selección de plantilla Ppt


Paso 1 Paso 2

Paso 3


Significado y uso del color



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


Para ver diferentes combinaciones de colores

creadas por diseñadores de al rededor del mundo visite:http://kuler.adobe.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.


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.


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



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


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:


¿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

content editor: contenidointroducción · 2012-03-19 · numéricas de ceros (0) y unos (1) que se...

Documents