Tutorial multimedia para la enseñanza - aprendizaje de diseño web dirigido a estudiantes de sistemas de UNIANDES Ibarra

(1)

UNIVERSIDAD REGIONAL AUTÓNOMA DE LOS ANDES

“UNIANDES”

FACULTAD DE SISTEMAS MERCANTILES

CARRERA DE SISTEMAS

PROYECTO INFORMÁTICO PREVIO LA OBTENCIÓN DEL TÍTULO DE

INGENIERO EN SISTEMAS E INFORMÁTICA

TEMA:

“TUTORIAL MULTIMEDIA PARA LA ENSEÑANZA – APRENDIZAJE DE DISEÑO

WEB DIRIGIDO A ESTUDIANTES DE SISTEMAS DE UNIANDES IBARRA.”

AUTOR:

Tcnlg. Pablo Javier Carlosama Iguanchi

ASESOR:

Ing. Marco A. Checa C.

IBARRA – ECUADOR

(2)

UNIVERSIDAD REGIONAL AUTÓNOMA DE LOS ANDES

CERTIFICACIÓN

Yo, Ing. Marco A. Checa C., certifico que el “TUTORIAL MULTIMEDIA PARA LA ENSEÑANZA – APRENDIZAJE DE DISEÑO WEB DIRIGIDO A ESTUDIANTES DE

SISTEMAS DE UNIANDES IBARRA” ha sido cuidadosamente revisado y cumple con los

formatos y requisitos establecidos por la Universidad Regional Autónoma de Los Andes – UNIANDES, por lo que autorizo su presentación y defensa.

Atentamente,

Ing. Marco A. Checa C.

(3)

UNIVERSIDAD REGIONAL AUTÓNOMA DE LOS ANDES

DECLARACIÓN DE AUTORÍA

Yo, Tcnlg. Pablo Javier Carlosama Iguanchi declaro que el presente proyecto y todos los contenidos han sido desarrollados y son de exclusiva responsabilidad del autor.

Atentamente,

Tcnlg. Pablo Javier Carlosama Iguanchi C.C. 100251823-9

AUTOR

(4)

Me gustaría dedicar este Trabajo a toda mi familia.

Para mis padres Aníbal y Luz María, mis hermanos Beatriz, Héctor y Leonor, a todos ellos especialmente les dedico este Trabajo. Por su paciencia, por su comprensión, por su empeño, por su fuerza,

por su amor, por ser tal y como son. Son las personas que más directamente han sufrido las consecuencias del trabajo realizado siempre estuvieron

a mi lado apoyándome con su gran dosis de amor, nunca les podré estar suficientemente agradecido.

A mis compañeros de labores de UNIANDES, por haberme enseñado a encarar las adversidades sin perder nunca la dignidad ni desfallecer en el intento.

(5)

AGRADECIMIENTO

A mis distinguidos Maestros de UNIANDES, quienes me supieron apoyar en lo académico, en lo científico

y en lo personal, agradecerles por su tiempo, sus palabras y su apoyo.

Un reconocimiento especial al Dr. Lenin Burbano y al Ing. Marco Checa quien con sus valiosos conocimientos y amplia experiencia en la formación de profesionales han sabido guiarme con sabiduría en el desarrollo de esta Investigación.

(6)

ÍNDICE GENERAL

CONTENIDO

CAPITULO I.……….. 1

INTRODUCCIÓN………... 1

1.1 Antecedentes………..……. 1

1.2 Objetivos……… 2

1.2.1 Objetivo General………. 2

1.2.2 Objetivos Específicos……….. 2

1.3 Metodología………... 3

1.4 Recursos………. 4

1.4.1 Recursos Humanos……….. 4

1.4.2 Recursos Técnicos……….. 5

1.4.2.1 Equipo Informático - Desarrollo……….. 5

1.4.2.2 Software para Desarrollo………. 6

1.4.2.3 Equipo Informático – Implementación……… 7

1.4.3 Recursos Económicos………. 8

1.4.3.1 Materiales y Suministros……… 8

1.4.3.2 Servicios Básicos……….. 9

1.4.3.3 Resumen de Costos de Recursos Económicos……… 9

(7)

CAPITULO II.……….. 12

PROPUESTA.……….…….. 12

2.1 Fase de Inicio.……….…. 12

2.1.1 Visión.……….……….. 12

2.1.1.1 Introducción.……….. 12

2.1.1.1.1 Propósito.……….... 12

2.1.1.1.2 Alcance.………... 12

2.1.1.1.3 Acrónimos y abreviaciones…….………. 13

2.1.1.1.4 Referencias.……….. 14

2.1.1.2 Posicionamiento.………. 14

2.1.1.2.1 Oportunidad de Negocio.………. 14

2.1.1.2.2 Sentencia que define el problema….……… 15

2.1.1.2.3 Sentencia que define la posición del Producto….……… 15

2.1.1.3 Descripción de Stakeholders (participantes en el proyecto) y usuarios….………. 16

2.1.1.3.1 Resumen de Stakeholders.……… 16

2.1.1.3.2 Resumen de usuarios.………... 17

2.1.1.3.4 Perfil de los Stakeholders.……… 17

a) Representante del área técnica y sistemas de información….……… 17

b) Representante para proporcionar las principales necesidades de la Institución…… 18

c) Representante para proporcionar la metodología para la enseñanza de Diseño Web 18 2.1.1.3.5 Perfiles de Usuario.……….. 19

(8)

2.1.1.4 Descripción Global del Producto.………... 19

2.1.1.4.1 Perspectiva del producto….………... 19

2.1.1.4.2 Resumen de características….………... 19

2.1.1.5 Otros Requisitos del Producto……… 20

2.1.1.5.1 Requisitos de sistema……….. 20

2.1.1.5.2 Requisitos de desempeño……….… 20

2.1.1.5.3 Requisitos de entorno……….……. 20

2.1.1.6 Requisitos de documentación………. 20

2.1.1.6.1 Manual de usuario……… 21

2.1.2 Lista de Riesgos………. 21

2.2 Fase de Elaboración……….. 22

2.2.1 Diagramas de casos de uso desarrollados……….. 22

2.2.1.1 Diagrama principal……….. 22

2.2.1.1.1 Información acerca de El color en la web….……….. 23

2.2.1.1.2 Información acerca de Esquemas de color……….. 25

2.2.1.1.3 Información acerca de El diseño equilibrado……….. 27

2.2.1.1.4 Información acerca de Tipografía en la web.……….. 29

2.2.1.1.5 Información acerca de Gráficos digitales….……….. 31

2.2.1.1.6 Caso de Uso de Evaluación……….... 33

a) Diagrama de Actividad de Evaluación………. 33

2.2.2 Arquitectura……….. 34

2.2.2.1 Diagrama de Hardware………. 34

(9)

2.2.3 Diseño……….….. 35

2.2.3.1 Diseño de Entradas………. 35

2.2.3.1.1 Diseño de Entradas para el Tutorial Multimedia……….. 35

a) Contenido de pantalla del Menú Principal……….… 35

b) Diseño de entradas: Presentación del Tutorial Multimedia………...……… 36

c) Diseño de entradas de la Unidad 1: El color en la web. ………..……… 37

c.1) Pantalla del primer contenido: Círculo Cromático………..……… 38

c.2) Pantalla del segundo contenido: Tono………..………. 39

c.3) Pantalla del tercer contenido: Saturación y Luminosidad………..………… 40

c.4) Pantalla del cuarto contenido: Menú Principal………..………. 41

d) Diseño de entradas de la Unidad 2: Esquemas de color...……….….. 42

d.1) Pantalla del primer contenido: Colores Complementarios y cercanos...… 43

d.2) Pantalla del segundo contenido: Tríadas Complementarias...……… 44

d.3) Pantalla del tercer contenido: Contiguos………..………. 45

d.4) Pantalla del cuarto contenido: Menú Principal………..……… 46

e) Diseño de entradas de la Unidad 3: El diseño equilibrado...………….………….. 47

e.1) Pantalla del primer contenido: Contraste de colores...………….………….. 48

e.2) Pantalla del segundo contenido: Contraste de tonos...………….………….. 49

e.3) Pantalla del tercer contenido: Contraste Texto – Fondo...………….…….. 50

e.4) Pantalla del cuarto contenido: Menú Principal...……….……… 51

f) Diseño de entradas de la Unidad 4: Tipografía en la web...……….…. 52

f.1) Pantalla del primer contenido: Tamaño de las fuentes...……….. 53

(10)

f.3) Pantalla del tercer contenido: Buen uso de textos en páginas web...……….. 55

f.4) Pantalla del cuarto contenido: Menú Principal...……….……… 56

g) Diseño de entradas de la Unidad 5: Gráficos Digitales……….……. 57

g.1) Pantalla del primer contenido: Profundidad de color……….. 58

g.2) Pantalla del segundo contenido: Peso de un archivo gráfico………. 59

g.3) Pantalla del tercer contenido: Gráficos vectoriales……… 60

g.4) Pantalla del cuarto contenido: Menú Principal………... 61

h) Diseño de Entradas para el módulo de Video Tutoriales………... 62

h.1) Pantalla del Video Tutorial Nº 1: Página Web con Adobe Dreamweaver CS3 63 h.2) Pantalla del Video Tutorial Nº 2: Crear página de inicio en HTML. ……… 64

h.3) Pantalla del Video Tutorial Nº 3: Página Web con Adobe Flash CS3. ……. 65

h.4) Pantalla del Video Tutorial Nº 4: Crear sitio completo en Flash CS3. ……. 66

h.5) Pantalla del Video Tutorial Nº 5: Página Web con Adobe Fireworks CS3…. 67 h.6) Pantalla del Video Tutorial Nº 6: Crear sitio con Adobe Fireworks CS3. … 68 h.7) Pantalla del Video Tutorial Nº 7: Diseño de una web desde cero con Photoshop CS3. ………... 69

h.8) Pantalla del Video Tutorial Nº 8: Creación de página web con Adobe Photoshop CS3. ………... 70

i) Diseño de Entradas para el módulo de Evaluación………... 71

2.2.3.2 Diseño de Salidas………...………...………. 72

2.2.3.2.1 Diseño de pantalla para resultados de la Evaluación………... 72

2.3 Construcción………...………...……….. 73

(11)

2.4 Transición………...………...……….. 86

CAPITULO III...………. 87

ESTUDIO DE VIABILIDAD…..……….………. 87

3.1 Viabilidad Técnica………. 87

3.2 Viabilidad Operativa………. 88

3.3 Viabilidad Económica………... 88

CAPITULO IV……… 89

DOCUMENTACIÓN……… 89

4.1 Manual de Usuario………... 89

4.1.1 Requerimientos mínimos para la utilización del Tutorial Multimedia……….. 89

4.1.2 Uso del Tutorial Multimedia………. 90

4.1.2.1 Pantalla principal del Tutorial Multimedia……… 90

4.1.2.2 Presentación del Tutorial Multimedia……… 90

4.1.2.3 Pantalla de contenidos de la Unidad 1: El color en la web. ………. 91

4.1.2.3.1 Pantalla del primer contenido: Círculo Cromático………. 91

4.1.2.3.2 Pantalla del segundo contenido: Tono……… 92

4.1.2.3.3 Pantalla del tercer contenido: Saturación y Luminosidad……… 92

4.1.2.3.4 Pantalla del cuarto contenido: Menú Principal……… 93

4.1.2.4 Pantalla de contenidos de la Unidad 2: Esquemas de color. ………. 93

4.1.2.4.1 Pantalla del primer contenido: Colores Complementarios y cercanos…………. 94

(12)

4.1.2.4.3 Pantalla del tercer contenido: Contiguos………. 95

4.1.2.5 Pantalla de contenidos de la Unidad 3: El diseño equilibrado. ………. 96

4.1.2.5.1 Pantalla del primer contenido: Contraste de colores……….. 96

4.1.2.5.2 Pantalla del segundo contenido: Contraste de tonos……….. 97

4.1.2.5.3 Pantalla del tercer contenido: Contraste Texto - Fondo……… 97

4.1.2.5.4 Pantalla del cuarto contenido: Menú Principal………. 98

4.1.2.6 Pantalla de contenidos de la Unidad 4: Tipografía en la web………. 98

4.1.2.6.1 Pantalla del primer contenido: Tamaño de las fuentes………. 99

4.1.2.6.2 Pantalla del segundo contenido: Fuentes a usar……… 99

4.1.2.6.3 Pantalla del tercer contenido: Buen uso de textos en páginas web……… 100

4.1.2.7 Pantalla de contenidos de la Unidad 5: Gráficos Digitales……… 101

4.1.2.7.1 Pantalla del primer contenido: Profundidad de color………. 101

4.1.2.7.2 Pantalla del segundo contenido: Peso de un archivo gráfico……….. 102

4.1.2.7.3 Pantalla del tercer contenido: Gráficos vectoriales………. 102

4.1.2.8 Pantalla de contenidos del módulo de Video Tutoriales……… 103

4.1.2.8.1 Pantalla del Video Tutorial Nº 1: Página Web con Adobe Dreamweaver CS3... 104

4.1.2.8.2 Pantalla del Video Tutorial Nº 2: Crear página de inicio en HTML. …………. 104

4.1.2.8.3 Pantalla del Video Tutorial Nº 3: Página Web con Adobe Flash CS3. ……….. 105

4.1.2.8.4 Pantalla del Video Tutorial Nº 4: Crear sitio completo en Flash CS3. ……….. 105

(13)

4.1.2.8.6 Pantalla del Video Tutorial Nº 6: Crear sitio con Adobe Fireworks CS3. ……. 106

4.1.2.8.7 Pantalla del Video Tutorial Nº 7: Diseño de una web desde cero con Photoshop CS3. ……… 107

4.1.2.8.8 Pantalla del Video Tutorial Nº 8: Creación de páginas web con Adobe Photoshop CS3. ……….… 107

4.1.2.9 Pantalla de contenidos del módulo de Evaluación………. 108

4.2 Manual Técnico………. 109

4.2.1 Herramientas utilizadas……… 109

4.2.1.1 Adobe Flash CS3 Professional……… 109

4.2.1.2 Adobe Photoshop CS3……… 110

4.2.1.3 Adobe Illustrator CS3……… 111

4.2.1.4 Enterprise Architect……… 112

4.2.1.5 Microsoft Project……….. 113

4.2.1.6 Adobe Audition CS3………. 113

4.2.1.7 Adobe Dreamweaver CS3……….. 114

CONCLUSIONES RECOMENDACIONES BIBLIOGRAFÍA

(14)

ÍNDICE DE ILUSTRACIONES

Ilustración 1.1 Diagrama de Cronograma de actividades……… 10

Ilustración 2.1 Diagrama de casos de uso principal……… 22

Ilustración 2.2 Diagrama de casos de uso El color en la web ……… 23

Ilustración 2.3 Diagrama de casos de uso Esquemas de color ………... 25

Ilustración 2.4 Diagrama de casos de El diseño equilibrado ...………... 27

Ilustración 2.5 Diagrama de casos de Tipografía en la web …………..………. 29

Ilustración 2.6 Diagrama de casos de uso Gráficos digitales ………. 31

Ilustración 2.7 Diagrama de Actividad de Evaluación ………... 33

Ilustración 2.8 Diagrama de arquitectura de la Aplicación………. 34

Ilustración 2.9 Pantalla de Menú principal del Tutorial Multimedia. ……….. 35

Ilustración 2.10 Pantalla de Presentación del Tutorial Multimedia...………. 36

Ilustración 2.11 Pantalla de contenidos de la Unidad 1 del Tutorial Multimedia...…….. 37

Ilustración 2.12 Pantalla de desarrollo del primer contenido de la unidad 1. ...………… 38

Ilustración 2.13 Pantalla de desarrollo del segundo contenido de la unidad 1. ...………. 39

Ilustración 2.14 Pantalla de desarrollo del tercer contenido de la unidad 1. ...…………. 40

Ilustración 2.15 Pantalla de regreso al Menú Principal. ……….... 41

Ilustración 2.16 Pantalla de contenidos de la Unidad 2 del Tutorial Multimedia....…... 42

Ilustración 2.18 Pantalla de desarrollo del segundo contenido de la unidad 2. ...……… 44

Ilustración 2.19 Pantalla de desarrollo del tercer contenido de la unidad 2. ...…………. 45

(15)

Ilustración 2.21 Pantalla de contenidos de la Unidad 3 del Tutorial Multimedia...… 47

Ilustración 2.23 Pantalla de desarrollo del segundo contenido de la unidad 3. ...………. 49

Ilustración 2.24 Pantalla de desarrollo del tercer contenido de la unidad 3. ………….… 50

Ilustración 2.25 Pantalla de regreso al Menú Principal. ……… 51

Ilustración 2.26 Pantalla de contenidos de la Unidad 4 del Tutorial Multimedia. ……… 52

Ilustración 2.27 Pantalla de desarrollo del primer contenido de la unidad 4. ……… 53

Ilustración 2.28 Pantalla de desarrollo del segundo contenido de la unidad 4. ………… 54

Ilustración 2.29 Pantalla de desarrollo del tercer contenido de la unidad 4. ………….… 55

Ilustración 2.31 Pantalla de contenidos de la Unidad 5 del Tutorial Multimedia. ……… 57

Ilustración 2.32 Pantalla de desarrollo del primer contenido de la unidad 5. ……… 58

Ilustración 2.33 Pantalla de desarrollo del segundo contenido de la unidad 5. ………… 59

Ilustración 2.34 Pantalla de desarrollo del tercer contenido de la unidad 5. ……… 60

Ilustración 2.36 Pantalla del módulo de Video Tutoriales……… 62

Ilustración 2.37 Pantalla del video tutorial Nº 1……… 63

(16)

Ilustración 2.45 Pantalla de la Evaluación……… 71

Ilustración 2.46 Pantalla de reporte de la evaluación………. 72

Ilustración 4.1 Pantalla principal del Tutorial Multimedia. ………. 90

Ilustración 4.2 Pantalla de Presentación del Tutorial Multimedia………. 90

Ilustración 4.3 Pantalla de contenidos de la Unidad 1: El color en la web. ………. 91

Ilustración 4.4 Pantalla del primer contenido: Círculo Cromático………. 91

Ilustración 4.5 Pantalla del segundo contenido: Tono………. 92

Ilustración 4.6 Pantalla del tercer contenido: Saturación y Luminosidad………. 92

Ilustración 4.7 Pantalla de regreso al Menú Principal. ………. 93

Ilustración 4.8 Pantalla de contenidos de la Unidad 2: Esquemas de color……….. 93

Ilustración 4.9 Pantalla del primer contenido: Colores Complementarios y cercanos…… 94

Ilustración 4.10 Pantalla del segundo contenido: Tríadas Complementarias……….. 94

Ilustración 4.11 Pantalla del tercer contenido: Contiguos……….. 95

Ilustración 4.12 Pantalla de regreso al Menú Principal……….. 95

Ilustración 4.13 Pantalla de contenidos de la Unidad 3: El diseño equilibrado…………. 96

Ilustración 4.14 Pantalla del primer contenido: Contraste de colores……… 96

Ilustración 4.15 Pantalla del segundo contenido: Contraste de tonos……… 97

Ilustración 4.16 Pantalla del tercer contenido: Contraste Texto - Fondo……… 97

Ilustración 4.17 Pantalla de regreso al Menú Principal……….. 98

Ilustración 4.18 Pantalla de contenidos de la Unidad 4: Tipografía en la web………….. 98

Ilustración 4.19 Pantalla del primer contenido: Tamaño de las fuentes……….. 99

(17)

Ilustración 4.21 Pantalla del tercer contenido: Buen uso de textos en páginas web…….. 100

Ilustración 4.22 Pantalla del cuarto contenido: Menú Principal………. 100

Ilustración 4.23 Pantalla de contenidos de la Unidad 5: Gráficos Digitales………. 101

Ilustración 4.24 Pantalla del primer contenido: Profundidad de color………. 101

Ilustración 4.25 Pantalla del segundo contenido: Peso de un archivo gráfico……… 102

Ilustración 4.26 Pantalla del tercer contenido: Gráficos vectoriales……….. 102

Ilustración 4.27 Pantalla de regreso al Menú Principal………. 103

Ilustración 4.28 Pantalla del módulo de Video Tutoriales……… 103

Ilustración 4.37 Pantalla de la Evaluación………. 108

(18)

ÍNDICE DE TABLAS

Tabla 1.1 Descripción de recursos Humanos……….. 4

Tabla 1.2 Descripción de requisitos de hardware para el desarrollo del Tutorial Multimedia……….. 5

Tabla 1.3 Descripción de requisitos de hardware recomendados para el funcionamiento del Tutorial Multimedia.………. 6

Tabla 1.4 Descripción de Recursos económicos para el desarrollo del Tutorial Multimedia……….………..….. 7

Tabla 1.5 Descripción de materiales y suministros para el desarrollo del Tutorial Multimedia……….………..…... 7

Tabla 1.6 Descripción de servicios básicos para el desarrollo del Tutorial Multimedia.... 8

Tabla 1.7 Descripción de resumen de recursos económicos para el desarrollo del Tutorial Multimedia.……… 8

Tabla 2.1 Descripción que define la sentencia del problema para la construcción del Tutorial Multimedia………... 13

Tabla 2.2 Descripción que define la posición del producto……… 13

Tabla 2.3 Descripción de resumen de Stakeholders………... 14

Tabla 2.4 Descripción de resumen de usuarios………... 15

Tabla 2.5 Descripción de representantes del área técnica y sistemas de información…… 16

(19)

enseñanza de Diseño Web……..………...……….. 17

Tabla 2.8 Descripción de perfil de estudiantes de Cuarto Nivel de la Carrera de Sistemas 17 Tabla 2.9 Descripción de resumen de características del producto………. 18

Tabla 2.10 Descripción de lista de Riesgos...……….. 22

Tabla 2.11 Descripción de El color en la web……….. 25

Tabla 2.12 Descripción de Esquemas de color……… 27

Tabla 2.13 Descripción de El diseño equilibrado……… 29

Tabla 2.14 Descripción de Tipografía en la web………. 31

Tabla 2.15 Descripción de Gráficos digitales………. 33

(20)

RESUMEN EJECUTIVO

El disponer de herramientas que nos permiten generar, procesar y combinar textos, imágenes, sonido y vídeo para transmitir conocimientos a multitud de usuarios, bajo un costo muy reducido, ha revolucionado las técnicas de enseñanza tradicional, tanto presencial como a distancia. Y si además, entre estas dos citadas, nace una nueva modalidad, la enseñanza online o virtual, podemos presumir de estar en un entorno privilegiado, óptimo y muy atractivo para desarrollar técnicas e ingenios innovadores, y lo más importante, con un alto rendimiento en los procesos educativos.

En Internet el usuario es el que manda, esto quiere decir que sin usuarios el sitio muere. Si se desea hacer una página web decente habrá que simplificar, reducir y optimizar los elementos.

El inadecuado empleo del diseño web por parte de estudiantes de la Carrera de Sistemas de UNIANDES Ibarra origina que los usuarios no visiten nuestros sitios web. Por esta razón “el buen uso del diseño web es una característica que mide qué tan intuitiva y fácil de usar es una página web para el usuario común”.1

El presente proyecto informático muestra un trabajo en el cual se desarrolla un tutorial multimedia para facilitar el aprendizaje de Diseño Web a nivel básico en los estudiantes de Sistemas de UNIANDES Ibarra.

Este documento se encuentra dividido en cuatro capítulos como siguen:

El primer capítulo corresponde a la Introducción el mismo se divide en: antecedentes, objetivos, metodología, recursos y cronograma.

El segundo capítulo corresponde a la Propuesta el mismo se divide en: inicio, elaboración, construcción y transición. En este capítulo se lleva a cabo el desarrollo del tutorial multimedia, a

1

(21)

través de la integración y personalización de varias herramientas informáticas con el objetivo de tener un tutorial funcional para proveer los conocimientos que los diferentes actores del proceso educativo han requerido, para finalmente realizar una serie de pruebas que tienen por misión detectar fallas en el funcionamiento del software y realizar el afinamiento respectivo.

En el tercer capítulo se realiza un Estudio de Viabilidad el mismo se divide en: viabilidad técnica, viabilidad operativa y viabilidad económica.

El capítulo cuarto consta de los respectivos manuales tanto técnico como de usuario.

Finalmente se presentan las respectivas conclusiones, las mismas que han sido obtenidas de las encuestas aplicadas y una vez terminado el proyecto informático, para luego plantear las recomendaciones necesarias. Además el documento cuenta con la bibliografía y anexos necesarios para el desarrollo del mismo.

El Tutorial Multimedia como herramienta pedagógica estratégica, fusiona la Pedagogía y la Informática, creando un instrumento de ayuda a los estudiantes para el aprendizaje de Diseño Web.

Esta aplicación constituye una herramienta de apoyo a los docentes para impartir el conocimiento en un escenario donde el educando se convierta en el protagonista del proceso de enseñanza-aprendizaje.

(22)

EXECUTIVE SUMMARY

The availability of tools that allow us to generate, process and combine text, images, sound and video to transmit knowledge to many users, under a very low cost, has revolutionized the traditional teaching techniques, both onsite and remotely. And if, between these two mentioned, was born a new form, online or virtual education, we can boast of being in a privileged environment, excellent and very attractive to develop innovative techniques and mills, and most importantly, high performance educational processes.

In Internet user is in charge, this means that no users the site dies. If you want to make a decent website that will simplify, reduce and optimize the elements.

The inadequate usability web design by students of the School of Systems originates Ibarra UNIANDES that users do not visit our websites. For this reason "the good use of web design is a feature that measures how intuitive and easy to use is a website for the average user."

This project shows a work computer which has developed a multimedia tutorial for facilitating learning Web Design at basic level in students UNIANDES Systems Ibarra.

This document is divided into four chapters as follows:

(23)

The second chapter is the proposal it is divided into: initiation, development, construction and transition. This chapter conducts multimedia application development through the integration and customization of various tools in order to have a functional tutorial to provide the knowledge that the different actors of the educational process are required to finally make a series of tests which are dedicated to detect malfunctions of the software and perform the respective affinities.

In the third chapter presents a feasibility study it is divided into: technical feasibility, operational feasibility and economic viability.

The fourth chapter consists of the respective manuals, both technical and user.

Finally, we present the respective findings, the same that have been obtained from the surveys and once the computer project, then raise the necessary recommendations. Furthermore, the document has the bibliography and appendices required for the development.

Multimedia Tutorial strategic as a teaching tool, blends and Computer Education, creating a tool to help students to learn Web design.

This application is a tool to support teachers to impart knowledge in a scenario where the learner becomes the protagonist of the teaching-learning process.

(24)

1

CAPITULO I

INTRODUCCIÓN

1.1 ANTECEDENTES

Hoy en día en la mayoría de los países desarrollados la incorporación de la tecnología como herramienta didáctica para la enseñanza de diferentes asignaturas a los estudiantes ha sido de gran utilidad porque ha permitido un importante desarrollo ya que se enfocan a un método de enseñanza más efectivo.

En el Ecuador la inversión en Ciencia y Tecnología es considerable y a diferencia de los países desarrollados no se ha involucrado profundamente en proyectos para educación con metodologías de enseñanza interactivas, por lo que nos priva de la oportunidad de ir avanzando y evolucionando, además nos deja en desventaja comparativa para emprender proyectos significativos, en cuanto a la formación del talento humano y el desarrollo de competencias para la construcción de conocimientos.

La Universidad Regional Autónoma de Los Andes UNIANDES Ibarra cuenta con cinco laboratorios de Computación y no existen aplicaciones multimedia que ayuden a mejorar la enseñanza aprendizaje de Diseño Web para los estudiantes de Sistemas de UNIANDES Ibarra, por esta razón ha tomado la iniciativa para apoyar al desarrollo de este Tutorial Multimedia el cual les permitirá interactuar y despertar su interés y creatividad, además los docentes aprovecharán los recursos tecnológicos disponibles de la Institución para total beneficio de sus estudiantes.

1.2 OBJETIVOS

1.2.1 Objetivo General

(25)

2

1.2.2 Objetivos Específicos

 Fundamentar científicamente los conceptos de proceso enseñanza-aprendizaje en el diseño web.

 Diagnosticar las necesidades de los docentes y estudiantes para la enseñanza aprendizaje de Diseño Web en la Universidad Regional Autónoma de Los Andes UNIANDES Ibarra.

 Desarrollar el Tutorial Multimedia de Diseño Web.

 Validar la propuesta.

1.3 METODOLOGÍA

La Metodología de desarrollo a utilizar es RUP (Rational Unified Process), ya que trabaja en base a iteraciones e incorpora el análisis de riesgos en todas sus fases para garantizar la calidad de la aplicación.

 Fase de Inicio: En esta fase se hace mayor énfasis en el modelado de los requisitos. Los documentos entregables son los siguientes:

 Un documento visión: que es una visión general de los requerimientos del proyecto.  Estimar un coste en recursos y tiempo de todo el proyecto

 Modelo inicial de Casos de Uso en un 20%  Lista de Riesgos.

 Fase de Elaboración: En esta fase se analiza el dominio del problema y se establece los cimientos de la arquitectura a utilizar.

Los documentos entregables son los siguientes:

(26)

3  Diseño de entradas y salidas.

 Fase de Construcción: La finalidad de esta fase es alcanzar la capacidad operacional de la Aplicación, todos los componentes, características y requisitos deben ser implementados y probados en su totalidad.

Los documentos entregables son los siguientes:

 Modelos Completos (Casos de Uso, Análisis, Diseño, Despliegue e Implementación)  Arquitectura integral.

 Riesgos presentados mitigados  Manual Inicial de Usuario

 Versión aceptable del producto (Prototipo Operacional Beta)

 Fase de Transición: El Objetivo de esta fase es poner el producto en manos de los usuarios finales y lograr su aprobación total.

Los documentos entregables son los siguientes:  Un prototipo operacional

 Descripción completa de la arquitectura  Manuales Técnico y de Usuario.

1.4 RECURSOS

1.4.1 RECURSOS HUMANOS

RECURSO DESCRIPCIÓN

Tcnlg. Pablo Javier Carlosama I. (Desarrollador)

Encargado de desarrollar el Tutorial Multimedia.

Dr. Lenin Burbano G. (Director Institución )

Proporciona la información sobre las principales necesidades en las diferentes asignaturas.

Ing. Marco Checa C. (Docente)

Suministra información acerca de dificultades y metodología de enseñanza.

Estudiantes de Cuarto Nivel de la Carrera de Sistemas Informáticos de UNIANDES Ibarra

(27)

4

Tabla 1.1 Descripción de Recursos Humanos. Fuente: Autor

1.4.2 RECURSOS TÉCNICOS:

 Para el desarrollo de este Tutorial Multimedia se requiere un equipo informático con las siguientes características:

1.4.2.1 EQUIPO INFORMÁTICO - DESARROLLO

DESCRIPCIÓN CAPACIDAD

CASE Procesador Intel Core 2 Duo CPU

Memoria RAM 1 GB

Disco Duro HD 500 GB

DVD - RW 16 X

Tarjeta Madre Tarjeta de Video

Tarjeta de Sonido (Audio)

Fuente de Poder 115V/230V

Monitor 17’’

Teclado 101 Teclas

Mouse

(28)

5

 Para el desarrollo del Tutorial Multimedia se requiere el siguiente software:

1.4.2.2 SOFTWARE PARA DESARROLLO

DESCRIPCIÓN VERSIÓN

Microsoft Windows XP

Adobe Flash CS3

Dreamweaver CS3

Fireworks CS3

Photoshop CS3

Illustrator CS3

Audition CS3

Enterprise Architect 7.5

Microsoft Project 2007

(29)

6

 Para que el Tutorial Multimedia funcione correctamente se recomienda el siguiente equipo informático:

1.4.2.3 EQUIPO INFORMÁTICO – IMPLEMENTACIÓN

DESCRIPCIÓN CAPACIDAD

MÍNIMA

CAPACIDAD

RECOMENDADA

CASE Procesador

1.6 MHZ

Intel Core 2 Duo CPU Memoria RAM

512 MB

1 GB Disco Duro HD

100 GB

500 GB

DVD - RW _{CD-ROM 52 X}

lectura

DVD - RW Tarjeta Madre

Tarjeta de Video

Tarjeta de Sonido Fuente de Poder

115V/230V

115V/230V Monitor

15”

17’’

Teclado 101 Teclas 101 Teclas

Mouse Parlantes

Tabla 1.4 Descripción de requisitos de hardware recomendados para el funcionamiento del Tutorial Multimedia. Fuente: Autor

Los laboratorios de la Institución cuentan con dos servidores y 64 estaciones de trabajo con similares características a las que se ha recomendado.

(30)

7

Tabla 1.5 Descripción de recursos económicos para el desarrollo del Tutorial Multimedia. Fuente: Autor

1.4.3.1 Materiales y Suministros:

DESCRIPCIÓN COSTO

5 resmas de Papel USD 25,oo

4 cartuchos de Tinta USD 35,oo

TOTAL USD 60,oo

Tabla 1.6 Descripción de materiales y suministros para el desarrollo del Tutorial Multimedia. Fuente: Autor

CANTIDAD DESCRIPCIÓN COSTO

1 EQUIPO INFORMÁTICO – DESARROLLO Intel P IV (Procesador 1.6MHZ, Memoria de 128MB, Disco duro 40GB)

USD 800,oo

1 Par de Parlantes USD 25,oo

1 Impresora USD 60,oo

1 Micrófono USD 10,oo

1 EQUIPO INFORMÁTICO – CLIENTE Intel P IV (Procesador 1.8 MHZ o superior, Memoria 256 MB o superior, Disco duro 80 GB)

(31)

8

1.4.3.2 Servicios Básicos:

DESCRIPCIÓN COSTO

Luz Eléctrica USD 35,oo

Acceso a Internet USD 60,oo

Transporte USD 20,oo

TOTAL USD 115,oo

Tabla 1.7 Descripción de servicios básicos para el desarrollo del Tutorial Multimedia. Fuente: Autor

1.4.3.3 Resumen de Costos de Recursos Económicos:

Tabla 1.8 Descripción de resumen de recursos económicos para el desarrollo del Tutorial Multimedia. Fuente: Autor

DESCRIPCIÓN COSTOS

Equipos USD 895,oo Materiales y Suministros USD 60,oo Servicios Básicos USD 115,oo Subtotal USD1070,oo Imprevistos (10%) USD 107,oo

(32)

9

(33)

10

(34)

(35)

12

CAPITULO II

PROPUESTA

2.1 FASE DE INICIO

En esta fase se desarrollará el documento Visión que da una idea general del proyecto a realizarse, el diagrama de casos de uso principal.

2.1.1 Visión

2.1.1.1 Introducción

2.1.1.1.1Propósito

El principal objetivo de este documento es recopilar, examinar y definir las principales necesidades y las características del Tutorial Multimedia facilitar el aprendizaje de Diseño Web en los estudiantes de Sistemas de UNIANDES Ibarra.

El documento se centra en la funcionalidad requerida por los participantes en el proyecto y los usuarios finales.

Los detalles de cómo el sistema cubre los requerimientos se pueden observar en la especificación de los casos de uso y otros documentos adicionales.

2.1.1.1.2 Alcance

(36)

13

2.1.1.1.3 Acrónimos, y abreviaciones

RUP.- Es el acrónimo de Rational Unified Process. Es un proceso de desarrollo de software y junto con el Lenguaje Unificado de Modelado UML, constituye la metodología estándar más utilizada para el análisis, implementación y documentación de sistemas orientados a objetos.

CS3.- Es el acrónimo de Creative Suite 3. Adobe CS3 es la tercera versión de una suite de distintas aplicaciones en forma de talleres y estudios dotados de herramientas y funciones altamente profesionales creada y producida por Adobe Systems y que están dirigidas a la Publicación Impresa, Publicación Web, Post Producción de Video, y Dispositivos Móviles.

UML.- Es el acrónimo de Unified Modeling Language por sus siglas en inglés. Es el lenguaje de modelado de sistemas de software más conocido y utilizado en la actualidad; está respaldado por el OMG (Object Management Group).

OMG.- Es el acrónimo de Object Management Group (Grupo de Administración de Objetos). Un consorcio de fabricantes formado para definir y promover las especificaciones de objetos de CORBA.

ASCII.- Es el acrónimo de American Standard Code for Information Interchange. Un juego de caracteres de 7 bits ampliamente usado para representar letras y símbolos presentes en un teclado de EE.UU. ASCII permite que los equipos y sus programas puedan intercambiar información.

HTTP.- Protocolo de transferencia de hipertexto. El protocolo subyacente mediante el cual se comunican los clientes y los servidores Web. Es un protocolo genérico, sin estado y orientado a objetos. Una característica de HTTP es la escritura y la negociación de la representación de los datos, que permite construir sistemas independientemente de los datos que se van a transmitir.

WWW.- Es el acrónimo de World Wide Web. También conocido como Web o WWW. Un

(37)

14

HTML.- Es el Lenguaje de marcado de hipertexto. Un lenguaje de marcado simple usado para crear documentos de hipertexto que pueden transportarse de una plataforma a otra. Los archivos HTML son simples archivos de texto ASCII con códigos incrustados para indicar el formato y los vínculos de hipertexto.

XML.- Es el Lenguaje de marcado extensible. Un formato de datos para intercambio de datos estructurado en Web. Recibe el nombre de "lenguaje de marcado extensible" porque no tiene un formato fijo como HTML. Un lenguaje de marcado normal define una forma de describir la información en cierta clase de documentos (por ejemplo, HTML). Con XML, los autores pueden definir su propio lenguaje de marcado personalizado para muchas clases de documentos.

2.1.1.1.4 Referencias

 Glosario

 Plan de desarrollo de software

 RUP (acrónimo de Rational Unified Process)  Diagrama de casos de uso

2.1.1.2 Posicionamiento

2.1.1.2.1 Oportunidad de Negocio

Este tutorial multimedia permitirá a los estudiantes interactuar con cada una de las unidades. Lo cual facilitará el aprendizaje gracias a interfaces gráficas sencillas y amigables.

(38)

15

El problema de La dificultad para el aprendizaje de Diseño Web en los estudiantes de Cuarto Nivel de Sistemas de UNIANDES Ibarra.

Afecta a Director de la Institución Catedrático(a) del Silabo

Estudiantes de Cuarto Nivel de Sistemas de UNIANDES Ibarra.

El impacto asociado es Que los estudiantes aprendan, despierten el interés y desarrollen la creatividad, lo que no es muy práctico con la metodología de enseñanza tradicional.

Una solución apropiada sería Desarrollar una herramienta llamativa e interactiva para la enseñanza – aprendizaje de esta asignatura.

Tabla 2.1 Descripción que define la sentencia del problema para la construcción del Tutorial Multimedia. Fuente: Autor

2.1.1.2.3 Sentencia que define la posición del Producto

Para Catedrático(a) del Sílabo,

Estudiantes de Cuarto Nivel de la Carrera de Sistemas Quienes Hacen el proceso de enseñanza - aprendizaje

El nombre del producto Tutorial Multimedia para la enseñanza – aprendizaje de Diseño Web Que Mejorará la enseñanza - aprendizaje de Diseño Web

No como La metodología actual

Nuestro producto Permite aprender y evaluar a los estudiantes mediante una interfaz gráfica sencilla y amigable

Tabla 2.2 Descripción que define la posición del producto. Fuente: Autor

2.1.1.3 Descripción de Stakeholders (participantes en el proyecto) y usuarios

(39)

16

A continuación se muestra un perfil de los participantes y los usuarios involucrados en el proyecto, así como los problemas más importantes que éstos perciben para enfocar la solución propuesta hacia ellos.

2.1.1.3.1 Resumen de Stakeholders

Nombre Descripción Responsabilidades

Tcnlg. Pablo Javier Carlosama I.

Dr. Lenin Burbano G.

Ing. Marco Checa

Desarrollador

Director de la Institución

Catedrático(a) del Sílabo

El stakeholder realiza:

Encargado del desarrollo del tutorial

Representa a todos los usuarios posibles del sistema

Seguimiento del desarrollo del proyecto Aprueba requisitos y funcionalidades

(40)

17

2.1.1.3.2 Resumen de usuarios

Nombre Descripción Stakeholder

Estudiantes de Cuarto Nivel de la Carrera de

Sistemas

Encargados de interactuar con la aplicación Evaluar y usar la aplicación

Ing. Marco Checa Encargado(a) de guiar a los estudiantes en la aplicación

Evaluar y usar la aplicación.

Tabla 2.4 Descripción de resumen de usuarios. Fuente: Autor

2.1.1.3.4 Perfil de los Stakeholders

a) Representante del área técnica y sistemas de información

Representante Pablo Javier Carlosama Iguanchi

Descripción Estudiante de la Universidad Regional Autónoma de Los Andes UNIANDES Ibarra

Tipo Tecnólogo en Sistemas

Responsabilidades Encargado de desarrollar el Tutorial Multimedia

Grado de participación Revisión de requerimientos, estructura de la aplicación

(41)

18

b) Representante para proporcionar las principales necesidades de la Institución

Representante Dr. Lenin Burbano G.

Descripción Representante de la Institución

Tipo Director General

Responsabilidades Encargado de mostrar las necesidades de los usuarios del sistema. Además, lleva a cabo un seguimiento del desarrollo del proyecto y aprobación de los requisitos y funcionalidades del sistema

Grado de participación Proporcionar los requerimientos, estructura del sistema

Tabla 2.6 Descripción de representantes de proporcionar las principales necesidades de la Institución. Fuente: Autor

c) Representante para proporcionar la metodología para la enseñanza de Diseño Web

Representante Ing. Marco Checa

Descripción Representante de los estudiantes de Cuarto Nivel de la Carrera de Sistemas

Tipo Catedrático(a) del Sílabo

Responsabilidades Encargado(a) de mostrar las necesidades de los usuarios del sistema, la metodología utilizada para la enseñanza. Además, lleva a cabo un seguimiento del desarrollo del proyecto y aprobación de los requisitos y funcionalidades del sistema.

Grado de participación Proporcionar los requerimientos, estructura del sistema

(42)

19

2.1.1.3.5 Perfiles de Usuario

a) Estudiantes de Cuarto Nivel de la Carrera de Sistemas

Representante Estudiantes

Descripción Interactuar con el producto

Tipo Estudiantes de Cuarto Nivel de la Carrera de Sistemas

Responsabilidades Responsables de interactuar y realizar evaluaciones para su aprendizaje Grado de participación A definir por el cliente

Comentarios Ninguno

Tabla 2.8 Descripción de perfil de estudiantes de Cuarto Nivel de la Carrera de Sistemas. Fuente: Autor

2.1.1.4 Descripción Global del Producto

2.1.1.4.1 Perspectiva del producto

La aplicación a desarrollar es un Tutorial Multimedia dirigido a docentes y estudiantes de Cuarto Nivel de la Carrera de Sistemas de la Universidad Regional Autónoma de Los Andes UNIANDES Ibarra con la finalidad de facilitar el aprendizaje de Diseño Web.

2.1.1.4.2 Resumen de características

A continuación se mostrará un listado con los beneficios que obtendrá el cliente a partir del producto:

Beneficio del cliente Características que lo apoyan Menor dificultad para el aprendizaje de los

estudiantes

Herramienta llamativa

Mayor interactividad en el proceso de aprendizaje Evaluaciones para cada unidad Mayor interés por aprender Diseño Web Metodología o forma diferente de

enseñanza.

Ayuda para el Catedrático(a) Material didáctico útil para la enseñanza

Tabla 2.9 Descripción de resumen de características del producto. Fuente: Autor

2.1.1.5 Otros Requisitos del Producto

2.1.1.5.1 Requisitos de sistema

(43)

20  Que sea interactiva y llamativa para los estudiantes  Que incorpore evaluaciones

 Que no requiera de muchos recursos técnicos para utilizar  Sistema Operativo Windows XP

 Contenidos y metodología basada en el Silabo

2.1.1.5.2 Requisitos de desempeño

El cliente da a conocer que el tutorial no sea muy extenso para que los estudiantes no se cansen frente al computador y tengan ánimo de utilizarlo nuevamente.

2.1.1.5.3 Requisitos de entorno

El cliente define estos requisitos de la siguiente manera:

 Que el computador requerido para soportar este sistema, sea con los que dispone la Institución

 El personal que trabajará con la aplicación

2.1.1.6 Requisitos de documentación

(44)

21

2.1.1.6.1 Manual de usuario

El cliente solicita que el manual de usuario debe estar bien detallado, de tal forma que no haya problemas en su utilización.

2.1.2 Lista de Riesgos

Riesgo (descripción) Impacto Probabilidad de ocurrencia

Mitigación

Que no se disponga con la

información necesaria para la

construcción del proyecto

9 30%

Identificar cuidadosamente a todos los participantes del proyecto

Que no se cuente con los

equipos necesarios para el

desarrollo e implantación del

tutorial multimedia

9 20%

La Institución puede hacer una adquisición para hacer posible la implantación del proyecto

Que los equipos no cumplan

con las características

técnicas

8 15%

Adquirir y adaptar los recursos faltantes a los equipos

existentes

Cambio de las autoridades en

la Institución 8 10%

Realizar un acuerdo escrito para que el proyecto se realice y se implante

Diseño inadecuado de

interface del proyecto 9 20%

Tener reuniones constantes con todos los participantes del proyecto

(45)

22

2.2 FASE DE ELABORACIÓN

2.2.1 Diagramas de casos de uso desarrollados

2.2.1.1 Diagrama principal

uc Actores

Estudiante Catdrático(a)

El color en la w eb

Esquemas de color

El diseño equilibrado

Tipografía en la w eb

Gráficos digitales

Ilustración 2.1 Diagrama de casos de uso principal. Fuente: Autor

(46)

23 uc Actores Estudiante Círculo cromático Tono Saturación Luminosidad Catedrático(a)

Ilustración 2.2 Diagrama de casos de uso El color en la web. Fuente: Autor

Descripción acerca de El color en la web

Propósito Activación Flujo Principal

Aprender a utilizar el Círculo cromático

Si el Usuario pulsa clic en el botón Círculo cromático

1: El usuario debe ingresar al tutorial multimedia

2: Pulsar clic en el icono donde se encuentra Círculo cromático 3: Si pulsa en el icono de Círculo cromático podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

Trabajar con el Tono

Si el Usuario pulsa clic en el botón Tono

2: Pulsar clic en el icono donde se encuentra Tono

3: Si pulsa en el icono Tono podrá continuar navegando para conocer la información del tema

4: Regresar al menú principal

Conocer la Saturación

Si el Usuario pulsa clic en el botón Saturación

2: Pulsar clic en el icono donde se encuentra Saturación

3: Si pulsa en el icono Saturación podrá continuar navegando para conocer la información del tema

(47)

24

Conocer la Luminosidad

Si el Usuario pulsa clic en el botón Luminosidad

2: Pulsar clic en el icono donde se encuentra Luminosidad

3: Si pulsa en el icono de Luminosidad podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

(48)

25

2.2.1.1.2 Información acerca de Esquemas de color

uc Actores Estudiante Catedrático(a) Colores complementarios Complementarios cercanos Tríadas complementarias Colores Contiguos

Ilustración 2.3 Diagrama de casos de uso Esquemas de color. Fuente: Autor

Descripción acerca de Esquemas de color

Aprender a utilizar los Colores

complementarios

Si el Usuario pulsa clic en el botón Colores complementarios

2: Pulsar clic en el icono donde se encuentra Colores complementarios 3: Si pulsa en el icono de Colores complementarios podrá continuar navegando para conocer la

información del tema

Trabajar con los Complementarios cercanos

Si el Usuario pulsa clic en el botón Complementarios cercanos

2: Pulsar clic en el icono donde se encuentra Complementarios cercanos 3: Si pulsa en el icono de

Complementarios cercanos podrá continuar navegando para conocer la información del tema

(49)

26

Conocer las Tríadas

complementarias

Si el Usuario pulsa clic en el botón Tríadas complementarias

2: Pulsar clic en el icono donde se encuentra Tríadas complementarias 3: Si pulsa en el icono de Tríadas complementarias podrá continuar navegando para conocer la

información del tema

Conocer los Colores Contiguos

Si el Usuario pulsa clic en el botón Colores Contiguos

2: Pulsar clic en el icono donde se encuentra Colores Contiguos 3: Si pulsa en el icono de Colores Contiguos podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

(50)

27

2.2.1.1.3 Información acerca de El diseño equilibrado

uc Actores

Estudiante Catedrático(a) El contraste

Contraste de tonos

Contraste de colores

Contraste texto-fondo

Ilustración 2.4 Diagrama de casos de El diseño equilibrado. Fuente: Autor

Descripción acerca de El diseño equilibrado

Aprender a utilizar El contraste

Si el Usuario pulsa clic en el botón El contraste

2: Pulsar clic en el icono donde se encuentra El contraste

3: Si pulsa en el icono El contraste podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

Trabajar con el Contraste de tonos

Si el Usuario pulsa clic en el botón elContraste de tonos

2: Pulsar clic en el icono donde se encuentra Contraste de tonos

3: Si pulsa en el icono de el Contraste de tonos podrá continuar navegando para conocer la información del tema

(51)

28

Conocer el Contraste de colores

Si el Usuario pulsa clic en el botón el Contraste de colores

2: Pulsar clic en el icono donde se encuentra el Contraste de colores

3: Si pulsa en el icono de el Contraste de colores podrá continuar navegando para conocer la información del tema

Conocer el Contraste texto-fondo

Si el Usuario pulsa clic en el botón el Contraste texto-fondo

2: Pulsar clic en el icono donde se encuentra el Contraste texto-fondo 3: Si pulsa en el icono de el Contraste texto-fondo podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

(52)

29

2.2.1.1.4 Información acerca de Tipografía en la web

uc Actores

Estudiante

Catedrático(a) Tamaño de las

fuentes

Fuentes a usar en las páginas w eb

Disposición de textos en una página w eb

Buen uso de textos en una página w eb

Ilustración 2.5 Diagrama de casos de Tipografía en la web. Fuente: Autor

Descripción acerca de Tipografía en la web

Aprender a utilizar el Tamaño de las fuentes

Si el Usuario pulsa clic en el botón Tamaño de las fuentes

2: Pulsar clic en el icono donde se encuentra Tamaño de las fuentes

3: Si pulsa en el icono de Tamaño de las fuentes podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

Trabajar con Fuentes a usar en las páginas web

Si el Usuario pulsa clic en el botón Fuentes a usar en las páginas web

2: Pulsar clic en el icono donde se encuentra Fuentes a usar en las páginas web

3: Si pulsa en el icono Fuentes a usar en las páginas web podrá continuar

navegando para conocer la información del tema

(53)

30

Conocer la Disposición de textos en una página web

Si el Usuario pulsa clic en el botón Disposición de textos en una página web

2: Pulsar clic en el icono donde se encuentra Disposición de textos en una página web

3: Si pulsa en el icono Disposición de textos en una página web podrá continuar navegando para conocer la información del tema

Conocer el Buen uso de textos en una página web

Si el Usuario pulsa clic en el botón Buen uso de textos en una página web

2: Pulsar clic en el icono donde se encuentra Buen uso de textos en una página web

3: Si pulsa en el icono Buen uso de textos en una página web podrá continuar navegando para conocer la información del tema

(54)

31

2.2.1.1.5 Información acerca de Gráficos digitales

uc Actores

Estudiante Caterático(a)

Profundidad de color

Peso de un archiv o gráfico

Optimización de archiv os gráficos

Gráficos v ectoriales

Ilustración 2.6 Diagrama de casos de uso Gráficos digitales. Fuente: Autor

Descripción acerca de Gráficos digitales

Aprender a utilizar Profundidad de color

Si el Usuario pulsa clic en el botón Profundidad de color

2: Pulsar clic en el icono donde se encuentra Profundidad de color 3: Si pulsa en el icono de Profundidad de color podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

Trabajar con Peso de un archivo gráfico

Si el Usuario pulsa clic en el botón Peso de un archivo gráfico

2: Pulsar clic en el icono donde se encuentra Peso de un archivo gráfico 3: Si pulsa en el icono Peso de un archivo gráfico podrá continuar

navegando para conocer la información del tema

(55)

32

Conocer la Optimización de archivos gráficos

Si el Usuario pulsa clic en el botón Optimización de archivos gráficos

2: Pulsar clic en el icono donde se encuentra Optimización de archivos gráficos

3: Si pulsa en el icono Optimización de archivos gráficos podrá continuar navegando para conocer la información del tema

Conocer los Gráficos vectoriales

Si el Usuario pulsa clic en el botón Gráficos vectoriales

2: Pulsar clic en el icono donde se encuentra Gráficos vectoriales 3: Si pulsa en el icono Gráficos

vectoriales podrá continuar navegando para conocer la información del tema 4: Regresar al menú principal

(56)

33

2.2.1.1.6 Caso de Uso de Evaluación

a. Diagrama de Actividad de Evaluación

custom Modelo de interfaz de usuario

Página principal

Leer la pregunta

Responder pregunta

Conocer puntaj e

Estudiante

[ir a evaluación]

[salir de evaluación]

Ilustración 2.7 Diagrama de Actividad de Evaluación. Fuente: Autor

Descripción acerca de Evaluación

Propósito Activación Flujo Principal

Responder Evaluación

Si el Usuario pulsa clic en Evaluación

1. El usuario debe ingresar al software multimedia

2. Pulsar clic en Evaluación.

3. Responder el cuestionario propuesto 4. Ver información sobre evaluación. 5. Regresar al menú principal

(57)

34

2.2.2 Arquitectura

2.2.2.1 Diagrama de Hardware

Ilustración 2.8 Diagrama de arquitectura de la aplicación. Fuente: Autor

2.2.2.2 Herramientas

 Adobe Flash CS3: Para el desarrollo completo de animaciones del Tutorial Multimedia de Diseño Web.

 Adobe Photoshop CS3: para retoque fotográfico de imágenes y transparencias

 Adobe Illustrator CS3: para la vectorización de imágenes

 Adobe Audition CS3: Para la edición de audio

 Adobe Dreamweaver CS3: para la edición y creación de contenidos web.

 Enterprise Architect 7.5: para diseño de los diagramas de Casos de Uso

(58)

35

2.2.3 Diseño

2.2.3.1 Diseño de Entradas

2.2.3.1.1 Diseño de Entradas del Tutorial Multimedia

a) Contenido de pantalla del Menú Principal

Ilustración 2.9 Pantalla de Menú principal del Tutorial Multimedia. Fuente: Autor

(59)

36

b) Diseño de entradas: Presentación del Tutorial Multimedia

Ilustración 2.10 Pantalla de Presentación del Tutorial Multimedia. Fuente: Autor

(60)

37

c) Diseño de entradas de la Unidad 1: El color en la web.

Ilustración 2.11 Pantalla de contenidos de la Unidad 1 del Tutorial Multimedia. Fuente: Autor

(61)

38

c.1) Pantalla del primer contenido: Círculo Cromático

Ilustración 2.12 Pantalla de desarrollo del primer contenido de la unidad 1. Fuente: Autor

(62)

39

c.2) Pantalla del segundo contenido: Tono

Ilustración 2.13 Pantalla de desarrollo del segundo contenido de la unidad 1. Fuente: Autor

(63)

40

c.3) Pantalla del tercer contenido: Saturación y Luminosidad

Ilustración 2.14 Pantalla de desarrollo del tercer contenido de la unidad 1. Fuente: Autor

(64)

41

c.4) Pantalla del cuarto contenido: Menú Principal

(65)

42

d) Diseño de entradas de la Unidad 2: Esquemas de color.

(66)

43

d.1) Pantalla del primer contenido: Colores Complementarios y cercanos

(67)

44

d.2) Pantalla del segundo contenido: Tríadas Complementarias

 El usuario deberá hacer clic en el extremo inferior de la barra deslizante para observar el resto del contenido.

(68)

45

(69)

46

d.4) Pantalla del cuarto contenido: Menú Principal

(70)

47

e) Diseño de entradas de la Unidad 3: El diseño equilibrado.

(71)

48

e.1) Pantalla del primer contenido: Contraste de colores

(72)

49

e.2) Pantalla del segundo contenido: Contraste de tonos

(73)

50

e.3) Pantalla del tercer contenido: Contraste Texto - Fondo

(74)

51

e.4) Pantalla del cuarto contenido: Menú Principal

(75)

52

f) Diseño de entradas de la Unidad 4: Tipografía en la web

(76)

53

f.1) Pantalla del primer contenido: Tamaño de las fuentes

(77)

54

f.2) Pantalla del segundo contenido: Fuentes a usar

(78)

55

f.3) Pantalla del tercer contenido: Buen uso de textos en páginas web

(79)

56

f.4) Pantalla del cuarto contenido: Menú Principal

(80)

57

g) Diseño de entradas de la Unidad 5: Gráficos Digitales

(81)

58

g.1) Pantalla del primer contenido: Profundidad de color

(82)

59

g.2) Pantalla del segundo contenido: Peso de un archivo gráfico

(83)

60

g.3) Pantalla del tercer contenido: Gráficos vectoriales

(84)

61

g.4) Pantalla del cuarto contenido: Menú Principal