Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.
-
Upload
plinio-adames -
Category
Documents
-
view
67 -
download
1
Transcript of Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.
![Page 1: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/1.jpg)
Diseño gráfico
Universidad de Puerto Rico en Aguadilla
Prof. Awilda Meléndez16 de abril de 2004
![Page 2: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/2.jpg)
2
Objetivos Planificar y organizar sitios
web Conocer los principios básicos
de diseño para páginas web
![Page 3: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/3.jpg)
3
¿Qué es una página Web?
Páginas de texto con mensajes codificados que le indican a un browser o lector lo que tiene que hacer
Código html – hypertext markup language
![Page 4: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/4.jpg)
Planificación y organización de
cartapacios
![Page 5: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/5.jpg)
5
¿Cómo diseñar un sitio web?
Utilizar lápiz y papel en la etapa inicial Enumerar los temas que se interesan
incluir Agrupar los temas relacionados:
establecer categorías Dibujar un diagrama o mapa conceptual
del sitio (site map) Dibujar el storyboard Crear prototipo Realizar pruebas de usabilidad Incorporar cambios sugeridos
![Page 6: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/6.jpg)
6
Mapa del sitio web
![Page 7: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/7.jpg)
7
Características del mapa del sitio Web
Bloques representan una página Nombre del archivo o documento Breve descripción de la página
Organización jerárquica Preferiblemente un máximo de 3
niveles Líneas representan enlaces entre
las páginas
![Page 8: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/8.jpg)
8
Características del storyboard
![Page 9: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/9.jpg)
9
Características del storyboard
![Page 10: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/10.jpg)
10
Características del storyboard
![Page 11: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/11.jpg)
11
Características del storyboard
Dibujo de la organización de la página web (page layout)
Un dibujo por cada nivel Contenido de cada dibujo
Navegación Tipo de material Principios de diseño
Correspondencia con el mapa del sitio
![Page 12: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/12.jpg)
12
Prototipo
Título
![Page 13: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/13.jpg)
13
Prototipo Versión parcial del producto final
para determinar posibles problemas con el sitio web
Plantilla para las demás páginas web
Todas las páginas tendrán un título. Éste aparecerá en la barra de título
![Page 14: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/14.jpg)
14
Prototipo
Título
![Page 15: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/15.jpg)
15
Prototipo
Título
![Page 16: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/16.jpg)
16
Prototipo
![Page 17: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/17.jpg)
17
Prototipo
![Page 18: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/18.jpg)
18
Prueba de usabilidad Evaluación del sitio web (usuarios)
Objetivos Facilidad para localizar información
(navegación) Facilidad para conocer el lugar en el que se
encuentran Organización de la página Principios de diseño Enlaces funcionales Imágenes o gráficas Contratiempos o dificultades
Proceso continuo
![Page 19: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/19.jpg)
19
Prueba de usabilidad
![Page 20: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/20.jpg)
Selección de nombres para cartapacios y
documentos
![Page 21: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/21.jpg)
21
Organización de cartapacios en Páginas Académicas
![Page 22: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/22.jpg)
22
Organización sugerida dentro de las unidades
Pre-prueba Contenido (instrucción) Práctica Aplicaciones Post-prueba
![Page 23: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/23.jpg)
23
Recomendaciones Seleccione prefijos que indiquen lo
que contiene un documento hd – headline nav - navegación
Comenzar con la misma letra o grupo de letras
Utilice letras minúsculas
![Page 24: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/24.jpg)
24
Recomendaciones No incluya espacios Seleccione nombres cortos Guárdelos con las extensiones htm o html Nombre la página principal (home page)
index.html
Nota: En el caso de Páginas Académicas, recuerde utilizar la nomenclatura establecida para cada cartapacio (Páginas Académicas, Unidad 04 – Estructura y contenido de los archivos).
![Page 25: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/25.jpg)
25
Organización de un cartapacio
Seleccione un nombre para el cartapacio principal
Cree dos subcartapacios Uno para todo los documentos de
referencia, imágenes originales,etc. Otro para almacenar la página que
publicará Cada subcartapacio tendrá otros
cartapacios para guardar los documentos según sus características
![Page 26: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/26.jpg)
Principios de diseño
![Page 27: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/27.jpg)
27
Práctica: Principios de diseño
Instrucciones En el cartapacio My Documents, abra
el documento Prototipo Cambie el nombre al documento
añadiéndole el número 1 y su nombre Ejemplo: Prototipo1_Jose
Realice cambios en la organización de la página y a los atributos del texto
Guarde el documento
![Page 28: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/28.jpg)
28
Práctica: Principios de diseño
![Page 29: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/29.jpg)
29
Principios de diseño
Alineación Proximidad Repetición Contraste
![Page 30: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/30.jpg)
30
Alineación
![Page 31: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/31.jpg)
31
Alineación Todos los artículos, objetos o texto, están
alineados unos con respecto a los demás Es una fuerza unificadora Útil cuando se presenta mucha
información Seleccione un tipo de alineación para su
sitio web Prefiera alineaciones hacia la derecha o
hacia la izquierda Modifique la alineación de forma limitada
para llamar la atención
![Page 32: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/32.jpg)
32
Alineación
Ventajas Evita la distracción y el cansancio al
mover los ojos através de toda la página
Facilita la búsqueda de información Provee la sensación de páginas
profesionales o sofisticadas
![Page 33: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/33.jpg)
33
Proximidad
![Page 34: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/34.jpg)
34
Proximidad Relación que se produce cuando los
objetos y los textos se colocan cerca
Objetos físicamente cercanos producen el efecto de estar relacionados
Los espacios producen el efecto de establecer jerarquías en la información
![Page 35: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/35.jpg)
35
Repetición
![Page 36: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/36.jpg)
36
Repetición
![Page 37: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/37.jpg)
37
Repetición
Repetición de elementos a través de todo el proyecto
Establece relación entre todas las páginas o secciones
Ejemplo de elementos Botones Estilo colores
![Page 38: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/38.jpg)
38
Repetición
Ventaja Usuario sabe donde se encuentra y
como buscar información
![Page 39: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/39.jpg)
39
Contraste
![Page 40: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/40.jpg)
40
Contraste
Característica de una página que atrae la atención visual
Crea jerarquía en la información Ayuda a definir lo que es
importante
![Page 41: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/41.jpg)
41
Repaso: Principios de diseño
San Diego State University Encyclopedia of Educational
Technology
![Page 42: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/42.jpg)
42
Práctica: Principios de diseño
Instrucciones En el cartapacio My Documents, abra el
documento Prototipo Cambie el nombre al documento
añadiéndole el número 2 y su nombre Ejemplo: Prototipo2_Jose
Realice cambios en la organización de la página y en los atributos del texto
Guarde el documento Compare el documento con el
Prototipo1
![Page 43: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/43.jpg)
43
Práctica: Principios de diseño
![Page 44: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/44.jpg)
Interfase y navegación
![Page 45: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/45.jpg)
45
Interfase Apariencia de una página Forma en la cual los usuarios
interactúan Navegación
![Page 46: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/46.jpg)
46
Navegación Forma en la cual los usuarios se
mueven a través de las páginas Sencilla y clara Accesible Pueden ser botones, texto, gráficas, etc. Imágenes deben incluir textos alternos Debe proveerse más de un método Ser repetitiva Proveer un índice o un mapa del sitio
![Page 47: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/47.jpg)
Características de un buen diseño
![Page 48: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/48.jpg)
48
Características de un buen diseño
Provea en la página inicial Una idea clara del sitio Impresión visual Espacio de 640 x 460 pixels (ancho por
largo) No utilice letras mayúsculas para el
cuerpo del documento Seleccione fondos claros Evite confusión presentando texto que
aparente ser un enlace
![Page 49: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/49.jpg)
49
Características de un buen diseño
Tome en consideración la audiencia Utilice tablas para organizar texto y
gráficas Utilice oraciones y párrafos cortos Incluya un título en todas las páginas Mantenga el tamaño de las páginas web
igual o menor a 30,000 bytes Coloque la información más importante al
comienzo de la página Utilice recursos gráficos con resolución de
72dpi
![Page 50: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/50.jpg)
50
Características de un buen diseño
Utilice texto alterno en las gráficas e imágenes
Provee información Reduce el tiempo para acceder enlaces Aparecen aún cuando las gráficas no
se observen Provee información a los programados
utilizados por personas con limitaciones visuales. Programados convierten el texto a sonido
![Page 51: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/51.jpg)
51
Características de un buen diseño
![Page 52: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/52.jpg)
52
Características de un buen diseño
![Page 53: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/53.jpg)
53
Características de un buen diseño
![Page 54: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/54.jpg)
54
Características de un buen diseño
![Page 55: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/55.jpg)
55
Características de un buen diseño
![Page 56: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/56.jpg)
56
Práctica: Características de un buen diseño
Instrucciones Busque en la Internet un ejemplo que
haga uso de los principios de diseño Busque en la Internet un ejemplo que no haga uso de los principios de diseño
![Page 57: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/57.jpg)
Color, gráficas y tipografía
![Page 58: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/58.jpg)
58
Color
Utilizar modelo RGB (Red, Green, Blue)
Modo que utilizan las pantallas o monitores de computadoras
Browser safe colors Cada color puede tener
una escala de 256 colores (0 al 255)
![Page 59: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/59.jpg)
59
Gráficas o imágenes
Formatos o atributos GIF
Graphic Interchange Format Pueden observarse en cualquier
tipo de computadora Son comprimidas Utilizan una escala de 256
colores Útiles para íconos, texto,
dibujos digitales con pocos colores
![Page 60: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/60.jpg)
60
Gráficas o imágenes Formatos o atributos
JPEG Joint Photographic Experts
Group Pueden observarse en
cualquier tipo de computadora
Son comprimidas Pueden tener millones de
colores Útiles para fotos o imágenes
con combinaciones de colores complejas
![Page 61: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/61.jpg)
61
Gráficas o imágenes Resolución para la Internet
72 dpi (puntos por pulgada) Si necesita mayor resolución, cree un
enlace que abra otra página con la misma imagen pero con la resolución deseada
Thumbnails – imagen de baja resolución Ejemplo: catálogos en línea
![Page 62: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/62.jpg)
62
TipografíaLa facilidad para leer en línea aumenta cuando:
Se utilizan caracteres sin adornos para el cuerpo de la página (Sans Serif) Caracteres con adornos se conocen como Serif
El espacio entre caracteres es proporcional a su tamaño (Proportional type)
El tamaño de los caracteres está entre 10 y 14 puntos
El número de palabras por línea es de 9 a 12
![Page 63: Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.](https://reader033.fdocuments.mx/reader033/viewer/2022061303/54f6e2fd4a7959b84f8b4639/html5/thumbnails/63.jpg)
63
Recursos en línea Web Page Design for Designers
http://www.wpdfd.com/index.htm Vincent Flanders: Web Pages that Suck
http://www.webpagesthatsuck.com/ Web Page Design - From Planning to Posting
http://www.essdack.org/webdesign/ Eyewire
http://www.eyewire.com/magazine/columns/robin/index.htm
The Enciclopedia of Educational Technologyhttp://coe.sdsu.edu/eet/
Principles for One Stop Information and Traininghttp://clipt.sdsu.edu/posit/tx/db.htm
Research Based: Web Design and Usability Guidelineshttp://www.usability.gov/guidelines/