PDF de programación - Tutorial multimedia para la enseñanza – Aprendizaje de diseño web dirigido a estudiantes de sistemas

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

2011



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.

ASESOR



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

DEDICATORIA







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.

Pablo Javier Carlosama I.







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.

Pablo Javier Carlosama I.





CONTENIDO



ÍNDICE GENERAL

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

1.5 Cronograma…………………………………………………………………...……. 10





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

a) Estudiantes de Cuarto Nivel de la Carrera de Sistemas.……………………............ 19



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

2.2.2.2 Herramientas……………………………………………………………………... 34



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

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



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……………