CreaciÃ³n de un sitio web como herramienta auxiliar en la ...

More documents

Recommendations

Info

A mis revisores, los profesores María de la Luz Palacios Villavicencio, Eruvid Cortés Camacho y Alfonso Acosta Romero, por leer mi trabajo y ayudar a mejorarlo por medio de sus observaciones y correcciones. A ASA y CONACYT por el apoyo y las facilidades brindadas para la realización de este proyecto. Así como al Gobierno de México, quien por medio de la Secretaría de Educación Pública me otorgaron una beca para cubrir los gastos de impresión de este proyecto. A todas las personas que lleguen a leer este trabajo. A todos ustedes Gracias. vi
Índice 1. Antecedentes 1 1.1 Introducción 1 1.2 Antecedentes 2 1.3 Planteamiento del problema 6 1.4. Justificación 7 1.5 Objetivos 8 1.6 Metodología 9 2. Investigación 11 2.1 Conceptos básicos para la web. 11 2.2 Principios y convenciones del diseño para la creación de sitios web. 12 2.3 Principios y convenciones del Diseño Editorial 13 2.3.1 Disposición, distribución o Layout 13 2.3.2 Jerarquía Visual 16 2.3.3 Consistencia 17 2.3.4 Flujo 20 2.3.5 Registro 21 2.3.6 Texto, Tipografía y Legibilidad 21 2.3.6.1 Fuente y Legibilidad 23 2.3.6.2 Color y Legibilidad 30 2.3.6.3 Tamaño y Legibilidad 32 2.3.7 Escribir para la web 32 2.3.7.1 Factores que afectan la forma de escribir en web 33 2.3.7.2 Beneficios de una buena escritura 35 2.3.7.3 Recomendaciones para la presentación de la información 36 2.4 Principios y convenciones del Diseño Gráfico 39 2.4.1 Contraste 39 2.4.2 Color 40 2.4.2.1 Percepción del Color 41 2.4.2.2 Significado del Color 42 2.4.2.3 Aplicaciones web del Color 44 2.4.2.4 Variaciones en el Color 48 2.4.3 Principios Gestalt de la percepción 49 2.4.3.1 Ley de la Pregnancia 50 2.4.3.2 Ley de la figura-fondo 51 2.4.3.3 Ley de la segregación de las unidades 52 2.4.3.4 Ley de la conexión de lo uniforme 52 2.4.4 Equilibrio 54 2.5 Principios y convenciones del Diseño Web 54 2.5.1 Tipos de contenido 54 2.5.1.1 Imágenes 55 2.5.1.1.1 Formato de la imagen 56 2.5.1.1.2 Resolución 58 vii
Page 1: Universidad Tecnológica de la Mixt
Page 5: Agradecimientos A Dios, por haber p
Page 9 and 10: 4.2 Elección del medio visual adec
Page 11 and 12: Índice de Imágenes Imagen 2.1 Com
Page 13 and 14: Índice de Tablas Tabla 1.1 Tipos d
Page 15 and 16: 1. Antecedentes 1.1 Introducción E
Page 17 and 18: El reto ha sido desde entonces crea
Page 19 and 20: Tipos de Capacitación Presencial A
Page 21 and 22: olvidó por completo dos factores d
Page 23 and 24: Dado que el organizador de herramie
Page 25 and 26: 2. Investigación 2.1 Conceptos bá
Page 27 and 28: ial, aquellos relacionados con el d
Page 29 and 30: web. Todos los contenidos (texto, i
Page 31 and 32: • Son atraídos primero por color
Page 33 and 34: Imagen 2.4 Ejemplo de un sitio web
Page 35 and 36: 2.3.5 Registro Los elementos que ti
Page 37 and 38: Según Brinck 15 la legibilidad, se
Page 39 and 40: Tamaño Espaciado Los tamaños de p
Page 41 and 42: Una alternativa, frecuentemente uti
Page 43 and 44: Desventajas • Se requiere tener i
Page 45 and 46: Brinck 26 recomienda tener especial
Page 47 and 48: Las personas entran a la web para b
Page 49 and 50: Imagen 2.10 Comparación entre una
Page 51 and 52: De acuerdo con Lidwell 47 , en un t
Page 53 and 54: 2.4.1 Contraste De acuerdo con Wong
Page 55 and 56: • Sistema sustractivo CMYK (Cyan
Page 57 and 58:
Estas asociaciones pueden ser utili
Page 59 and 60:
• Agrupar objetos relacionados y
Page 61 and 62:
a cada sección un color propio. Al
Page 63 and 64:
Uno de esos factores es que los mon
Page 65 and 66:
2.4.3.2 Ley de la figura-fondo Esta
Page 67 and 68:
Imagen 2.19 Aplicación de la Ley d
Page 69 and 70:
Esto debido, a que los contenidos w
Page 71 and 72:
Formato GIF JPEG PNG Característic
Page 73 and 74:
La resolución en monitores es much
Page 75 and 76:
Estado Arriba: Es el aspecto del bo
Page 77 and 78:
Afortunadamente hoy en día, gracia
Page 79 and 80:
Nielsen 98 no recomienda esto, debi
Page 81 and 82:
Según Graham 100 , en una página
Page 83 and 84:
velocidades de conexión, los largo
Page 85 and 86:
Según Graham 104 una buena navegac
Page 87 and 88:
que la información secundaria o co
Page 89 and 90:
Características • Es común enco
Page 91 and 92:
puede proporcionar índices de tér
Page 93 and 94:
• Los usuarios no tienen necesida
Page 95 and 96:
3. Análisis de Requerimientos 3.1
Page 97 and 98:
Dependiendo de la diversidad de usu
Page 99 and 100:
Información sobre la Compañía No
Page 101 and 102:
Carlos tiene ocho años trabajando
Page 103 and 104:
Escenario 2 Título: Consultar una
Page 105 and 106:
3.3 Definición de la plataforma ob
Page 107 and 108:
Las resoluciones de monitor más co
Page 109 and 110:
Un dato más a considerar relaciona
Page 111 and 112:
Desafortunadamente la mayoría de l
Page 113 and 114:
• Será preferible no utilizar co
Page 115 and 116:
En un análisis competitivo para si
Page 117 and 118:
• Los bloques de evaluación resu
Page 119 and 120:
• La interfaz resulta sencilla y
Page 121 and 122:
4. Diseño de contenidos 4.1 Consid
Page 123 and 124:
tir información y conocimientos es
Page 125 and 126:
Las imágenes fueron entonces el me
Page 127 and 128:
10. Causa y efecto. Estas instrucci
Page 129 and 130:
• Bocetos originales. Estos se ut
Page 131 and 132:
En lo referente al estilo de redacc
Page 133 and 134:
4.8.3 Resultados de la primera seri
Page 135 and 136:
Pareja 1 Pareja 2 Pareja 3 Tabla 4.
Page 137 and 138:
5. Diseño Conceptual 5.1 Análisis
Page 139 and 140:
Tarea Importancia Frecuencia Sub-ta
Page 141 and 142:
Omnisciencia De acuerdo con este mo
Page 143 and 144:
La función de las etiquetas es mos
Page 145 and 146:
Imagen 5.1 Diagrama Horizontal de
Page 147 and 148:
Imagen 5.2. Diagramas para una estr
Page 149 and 150:
Imagen 5.3 Boceto de la propuesta A
Page 151 and 152:
uno de ellos se encuentre en una so
Page 153 and 154:
6. Maquetas y prototipos 6.1 Creaci
Page 155 and 156:
Las maquetas en papel cuentan con c
Page 157 and 158:
6.3 Prototipos Una vez realizadas l
Page 159 and 160:
6.4 Maquetas y prototipos para el s
Page 161 and 162:
6.4.2 Maquetas en papel para el sit
Page 163 and 164:
Esta zona es completada con un bot
Page 165 and 166:
Requerimientos Prop. 1 Prop. 2 Prop
Page 167 and 168:
Inmediatamente después aparecen lo
Page 169 and 170:
7. Producción 7.1 Producción del
Page 171 and 172:
• En ocasiones agregar una imagen
Page 173 and 174:
Imagen 7.5 Páginas modelo. El orde
Page 175 and 176:
Imagen 7.6 Pantallas de la versión
Page 177 and 178:
Los símbolos son objetos que se pu
Page 179 and 180:
En Flash los objetos no solamente o
Page 181 and 182:
El siguiente paso fue en animar los
Page 183 and 184:
El cambio más importante es la sim
Page 185 and 186:
8. Evaluación 8.1 Pruebas de usabi
Page 187 and 188:
El número de usuarios a evaluar en
Page 189 and 190:
toma notas cortas. Mientras los obs
Page 191 and 192:
8.5.2 Realización Las pruebas se r
Page 193 and 194:
Usuario 2 (Grupo 2) Sitio web bási
Page 195 and 196:
Sitio web multimedia • Al termina
Page 197 and 198:
9. Conclusiones 9.1 Revisión de lo
Page 199 and 200:
dor comienza con una página web en
Page 201 and 202:
En el contexto de la web, los tecn
Page 203 and 204:
Anexo 1 Instrucciones visuales y es
Page 205 and 206:
191
Page 207 and 208:
193
Page 209 and 210:
195
Page 211 and 212:
197
Page 213 and 214:
199
Page 215 and 216:
201
Page 217 and 218:
203
Page 219 and 220:
Anexo 2 Cuestionario realizado dura
Page 221 and 222:
¿Comprendió las  instruccione
Page 223 and 224:
Anexo 3 Guión para las pruebas de
Page 225 and 226:
“Déjeme contarle un poco sobre q
Page 227 and 228:
Los términos o palabras utilizadas
Page 229 and 230:
Anexo 4 Cuestionario realizado dura
Page 231 and 232:
Sitio web básico Realizar la Tarea
Page 233 and 234:
5. Las imágenes o animaciones util
Page 235 and 236:
• NIELSEN Jakob, LORANGER Hoa, Pr
Page 237 and 238:
Créditos de las Imágenes Imagen 2
show all

CreaciÃ³n de un sitio web como herramienta auxiliar en la ...

Create successful ePaper yourself

Delete template?

Save as template?