Diseño De Sitios Web

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA

PROGRAMA DE INGENIERÍA DE SISTEMAS

MODULO DIISEÑO DE SIITIIOS WEB

Autores:

Ingenieros:

JORGE EDUARDO SALAZAR ZÚÑIGA

ORLANDO PUENTES ANDRADE

Revisión y Modificación

(Ingeniero. MAURICIO PERDOMO VARGAS)

La Plata Huila – 10 de Diciembre de 2009

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA

PROGRAMA DE INGENIERÍA DE SISTEMAS

CONTENIDO

INTRODUCCIÓN AL CURSO DISEÑO DE SITIOS WEB 1

ÍTEM TITULO PAG.

1. UNIDAD 1. GENERALIDADES DEL

MODELAMIENTO Y LAS ARQUITECTURAS WEB

4

1.1 INTRODUCCIÓN 4

1.2 CAPITULO 1: TEMAS CLAVES DEL DISEÑO DE SITIOS WEB 5

1.2.1 LECCIÓN 1: QUE ES EL DISEÑO DE SITIOS WEB 5

1.2.2 LECCIÓN 2: LA PIRÁMIDE DEL DISEÑO WEB 5

1.2.3 LECCIÓN 3: MODELOS PARA EL DESARROLLO WEB. 6

1.2.4 LECCIÓN 4: EVALUACIÓN DE UN SITIO WEB 7

1.2.5 LECCIÓN 5: RECOMENDACIONES FINALES 8

1.2.6 ACTIVIDADES 10

1.2.7 AUTOEVALUACIÓN 10

1.2.8 BIBLIOGRAFÍA 10

1.3 CAPITULO 2: EL PROCESO DEL DISEÑO WEB 11

1.3.1 LECCIÓN 6: NECESIDAD DE UNA METODOLOGÍA DE

DISEÑO Y DESARROLLO.

11

1.3.2 LECCIÓN 7: ENFOQUE DE UN PROYECTO DE UN SITIO

WEB.

11

1.3.3 LECCIÓN 8: PLANIFICACIÓN DEL SITIO 13

1.3.4 LECCIÓN 9: ETAPAS DE LA FASE DEL DISEÑO 14

1.3.5 LECCIÓN 10: IMPLANTACIÓN DE LA VERSIÓN BETA DEL

SITIO.

15

1.3.6 ACTIVIDADES 16

1.3.7 AUTOEVALUACIÓN 16

1.3.8 BIBLIOGRAFÍA 16

1.4 CAPITULO 3: VARIABLES DE ÉXITO PARA LOS SITIOS

WEB

17

1.4.1 LECCIÓN 11: DISEÑO PARA LOS USUARIOS 17

1.4.2 LECCIÓN 12: RESPUESTA Y TIEMPO DE REACCIÓN 19

1.4.3 LECCIÓN 13: TIPOS DE SITIOS WEB 21

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA

PROGRAMA DE INGENIERÍA DE SISTEMAS

1.4.4 LECCIÓN 14: TIPOS Y ELECCIÓN DE LA ESTRUCTURA DE

UN SITIO

24

1.4.5 LECCIÓN 15: TEORÍA Y PRÁCTICA DE LA EXPLORACIÓN 27

1.4.6 ACTIVIDADES 33

1.4.7 AUTOEVALUACIÓN 33

1.4.8. BIBLIOGRAFÍA 34

2 UNIDAD 2: VÍNCULOS, BÚSQUEDAS Y

TIPOGRAFÍA PARA EL DISEÑO WEB

35

2.1 INTRODUCCIÓN 35

2.2 CAPITULO 4: VÍNCULOS: TEXTO, BOTONES, ÍCONOS Y

GRÁFICOS

36

2.2.1 LECCIÓN 16: VÍNCULOS EN EL DISEÑO WEB 36

2.2.2 LECCIÓN 17: BÚSQUEDA, DISEÑO Y MOTORES DE

BÚSQUEDA

41

2.2.3 LECCIÓN 18: COMO AJUSTARSE Y SER VISIBLE PARA LOS

MOTORES DE BÚSQUEDA

46

2.2.4 LECCIÓN 19: OTRAS TÉCNICAS DE PROMOCIÓN EN LÍNEA 53

2.2.5 LECCIÓN 20: EL PROCESO DE ADICIÓN DE UNA FACILIDAD

DE BÚSQUEDA

55

2.2.6 ACTIVIDADES 58

2.2.7 AUTOEVALUACIÓN 58

2.2.8 BIBLIOGRAFÍA 59

2.3 CAPITULO 5: MAPAS DE SITIOS, ÍNDICES Y OTRAS

AYUDAS PARA LA UTILIZACIÓN, LA EXPLORACIÓN Y LA

ORGANIZACIÓN DE PÁGINAS Y TEXTO

60

2.3.1 LECCIÓN 21: PLANOS Y MAPA DEL SITIO. 60

2.3.2 LECCIÓN 22: LAS PAGINAS WEB 64

2.3.3 LECCIÓN 23: PAGINAS DE ENTRADA Y SALIDA PARA UN

SITIO WEB

65

2.3.4 LECCIÓN 24: EL TEXTO EN LAS PAGINAS WEB 67

2.3.5 LECCIÓN 25: LAS TABLAS EN LAS PÁGINAS WEB. 69

2.3.6 ACTIVIDADES 71

2.3.7 AUTOEVALUACIÓN 71

2.3.8 BIBLIOGRAFÍA 72

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA

PROGRAMA DE INGENIERÍA DE SISTEMAS

2.4 CAPITULO 6: COLORES, IMÁGENES Y FONDOS 73

2.4.1 LECCIÓN 26: INTRODUCCIÓN AL COLOR. 73

2.4.2 LECCIÓN 27: DEFINICIÓN DEL COLOR EN LA WEB 75

2.4.3 LECCIÓN 28: COLORES Y FUENTES 79

2.4.4 LECCIÓN 29: IMÁGENES EN LA WEB 86

2.4.5 LECCIÓN 30: IMPORTANCIA DEL TAMAÑO EN LA

DESCARGA DE ARCHIVOS

90

2.4.6 RESUMEN 96

2.4.7 AUTOEVALUACIÓN 96

2.4.8 BIBLIOGRAFÍA 97

3 UNIDAD 3: TECNOLOGÍAS WEB 98

3.1 INTRODUCCIÓN 98

3.2 CAPITULO 7: INTERACTIVIDAD EN LAS PAGINAS WEB 101

3.2.1 LECCIÓN 31: ORGANIZACIÓN DE LA INTERACTIVIDAD

MEDIANTE FUNCIONES GUI.

101

3.2.2 LECCIÓN 32: FORMULARIOS EN LAS PÁGINAS WEB 103

3.2.3 LECCIÓN 33: TECNOLOGÍAS WEB Y SU EFECTO SOBRE EL

DISEÑO WEB

107

3.2.4 LECCIÓN 34: INCLUYENDO IMÁGENES EN LAS PÁGINAS

WEB.

111

3.2.5 LECCIÓN 35: OTRAS CON SIDERACIONES IMPORTANTES. 116

3.2.6 ACTIVIDADES 127

3.2.7 AUTOEVALUACIÓN 127

3.2.8 BIBLIOGRAFÍA 127

3.3 CAPITULO 8 ENTREGA Y ADMINISTRACIÓN DEL SITIO. 128

3.3.1 LECCIÓN 36: PROTOCOLOS DE LA WEB. 128

3.3.2 LECCIÓN 37: SERVICIOS DE LA WEB. 131

3.3.3 LECCIÓN 38: ALGUNAS CONSIDERACIONES SOBRE LA

WWW.

134

3.3.4 LECCIÓN 39: REGISTRO DE DOMINIO ADMINISTRACIÓN Y

SEGURIDAD.

138

3.3.5 LECCIÓN 40: EL FUTURO DEL DISEÑO WEB 141

3.3.6 ACTIVIDADES 144

3.3.7 AUTOEVALUACIÓN 145

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA

PROGRAMA DE INGENIERÍA DE SISTEMAS

3.3.8 BIBLIOGRAFÍA 145

3.4 CAPITULO 9: NUEVAS TENDENCIAS DEL DESARROLLO

WEB.

146

3.4.1 LECCIÓN 41: LOS CMS PRESENTE Y FUTURO DEL DISEÑO

WEB.

146

3.4.2 LECCIÓN 42: EL CMS JOOMLA. 149

3.4.3 LECCIÓN 43: INSTALANDO EL CMS JOOMLA. 154

3.4.4 LECCIÓN 44: PUBLICANDO UN ARTICULO EN JOOMLA 159

3.4.5 LECCIÓN 45: RECOMENDACIONES FINALES 163

3.4.6 ACTIVIDADES 165

3.4.7 AUTOEVALUACIÓN 165

3.4.8 BIBLIOGRAFÍA 166

1

INTRODUCCIÓN

El curso de Diseño de sitios Web, componente electivo de los Programas de

Tecnología e Ingeniería de Sistemas tiene como objetivo la fundamentación de los

conceptos básicos en el Diseño de sitios Web, de los estudiantes de estos

programas o programas afines y/o particulares, bajo la estrategia de educación

abierta y a distancia.

El curso tiene 3 créditos académicos los cuales comprenden el estudio

independiente y el acompañamiento tutorial, con el propósito de:

• Fundamentar la concepción sistémica del moldeamiento de la programación en

Internet.

• Capacitar a los estudiantes para la comprensión, aprehensión de los conceptos

propios de la Programación en Internet.

• Fomentar en el estudiante el espíritu investigativo, despertar la creatividad en

el desarrollo de soluciones a problemas en el amplio espacio que ofrece

Internet.

Este curso está compuesto por tres unidades didácticas a saber:

Unidad 1. Conceptos, antecedentes, El proceso de diseño Web, Diseño para los

usuarios, Tipos de Sitios y arquitecturas, Teoría y práctica de la exploración,

Unidad 2. Vínculos: Texto, Botones, Iconos y Gráficos, Búsqueda y diseño,

Tipografía y Organización del texto en las páginas web, Colores Imágenes y

Fondos,

Unidad 3. Organización de la interactividad mediante funciones GUI, Tecnologías

Web, Publicar un proyecto WEB.

El curso es de carácter teórico – práctico y la metodología a seguir será bajo la

estrategia de educación a distancia. Por tal razón, es importante planificar el

proceso de:

Estudio Independiente: se desarrolla a través del trabajo personal, del trabajo

en pequeños grupos colaborativos de aprendizaje y el trabajo de grupo de

curso.

2

Acompañamiento tutorial: corresponde al tiempo de acompañamiento que el

tutor realiza al estudiante para potenciar el aprendizaje y la formación.

El sistema de evaluación del curso es a través de la evaluación formativa, que

constituye distintas formas de comprobar el avance en el auto aprendizaje del

curso.

En este sentido, se realizarán tres tipos de evaluación alternativas y

complementarias, estas son:

Autoevaluación: evaluación que realiza el estudiante para valorar su propio

proceso de aprendizaje.

Coevaluación: se realiza a través de los grupos colaborativos, y pretende la

socialización de los resultados del trabajo personal.

Heteroevaluación: Es la valoración que realiza la institución de la apropiación

de los conceptos por parte del estudiante.

El Sistema de interactividades vincula a los actores del proceso mediante diversas

actividades de aprendizaje que orientan el trabajo de los estudiantes hacia el logro

de los objetivos que se pretenden, de la siguiente manera:

- Tutor-estudiante: a través del acompañamiento individual

- Estudiante-estudiante: mediante la participación activa en los grupos

colaborativos de aprendizaje.

- Estudiantes-tutor: a través del acompañamiento a los pequeños grupos

colaborativos de aprendizaje.

- Tutor-estudiantes: mediante el acompañamiento en grupo de curso

- Estudiantes-estudiantes: en los procesos de socialización que se realizan en el

grupo de curso.

Para el desarrollo del curso es importante el

...