Desarrollo de Páginas

Web

INTRODUCCIÓN A
LAS
TECNOLOGÍAS
INFORMÁTICAS

Escuela de Ingeniería de Sistemas y Computación – Universidad del Valle

 Contenido

● El Servicio Web
● El Proceso de Ingeniería Web
 Formulación de Sitios Web
● Plan guía
 Diseño de Sitios Web
● Modelo de Navegación
● Estilos de Diseño Web

EISC - Introducción a las Tecnologías Informáticas 2

 El Servicio Web
●
Muchos programas +
muchos formatos +
muchos protocolos = http://www.univalle.edu.co/pagina.html
caos
●
Iniciativa World Wide
Web (WWW) Internet
Documento HTML

Tim Berners-Lee pagina.html
1.989 y asociados del
CERN
●
Nuevo sistema de
información
●
Propósito orden
●
Programa llamado Cliente Web Servidor Web
Browser Navegador: Explorer, Opera, Firefox http://www.univalle.edu.co/
●
Idea central: SO: MacOS, Linux, Windows
pagina.html

Metáfora
Hipertexto
EISC - Introducción a las Tecnologías Informáticas 3
 El Servicio Web

● El WWW es un sistema de información global, interactivo,

dinámico, de plataforma independiente; basado en
hipertextos que corre sobre Internet.
● Los documentos HTML se ubican en computadores con un
software y dominio que les permite que sean visibles en la
Web.
● Este software se conoce como Servidor Web.
 Ejemplo: Apache, IIS, Cherokee, lighttpd, thttpd, entre
otros
● El usuario utiliza un navegador y una URL para ubicar el
servidor y el documento que requiere dentro de él a través
de Internet.

EISC - Introducción a las Tecnologías Informáticas 4

 El Servicio Web

● ¿Quién es el dueño del Web?

 No existe un individuo o entidad dueña del Web
 Es un sistema de dominio público de carácter abierto y libre.
 Pero existen ciertas entidades a nivel mundial, que lideran e
impulsan su organización y desarrollo.
● En los Estados Unidos, existe el WWW (W3); Consortium W3
en el MIT (http://www.w3c.org).
● En Europa existe el INRIA. (http://www.inria.fr)

EISC - Introducción a las Tecnologías Informáticas 5

 El Servicio Web

● Páginas simples y Páginas compuestas

 Simples ------> Texto
● Una sola pasada(petición).
 Compuestas ----> Múltiples pasadas
● Primero el texto.
● Una pasada por cada imagen.
● Una pasada por cada objeto adicional.
● Páginas estáticas y Páginas dinámicas
 Estáticas ----> Información predefinida.
 Dinámicas----> Información que cambia constantemente
(contenido y/o presentación).

EISC - Introducción a las Tecnologías Informáticas 6

 Servicio Web

Cliente web
Internet

Servidor Web Servidor Web

RED ( TCP / IP )

SMBD SMBD

EISC - Introducción a las Tecnologías Informáticas 7

 Servicio Web

Navegador Web Script

Script

Navegador Web
Servidor Web
Script

Scripts Ejecutables del lado

del servidor
Navegador Web

Otros Programas

Archivos Locales

Safari

EISC - Introducción a las Tecnologías Informáticas 8

 El Proceso de Ingeniería Web

Modelo de
Análisis Modelo de Diseño
Contenido Arquitectura
Función Navegación (modelo de
Configuración
navegación)
Planeación Interfaz
Plan de Iteración

Construcción
Formulación Codificación
Análisis del Negocio Pruebas de
Comunicación con el cliente Componentes
Plan Guía
Entrega
Pruebas de
Retroalimentación Aceptación
Uso del Consumidor
Evaluación del Consumidor

EISC - Introducción a las Tecnologías Informáticas 9

 Formulación de Sitios Web
El Plan Guía

Encabezado del Plan Guía

EISC - Introducción a las Tecnologías Informáticas 10

 Formulación de Sitios Web
El Plan Guía
● ¿Cuál es el propósito de la aplicación Web?
___________________________________________________
___________________________________
● ¿A quién está dirigida la aplicación Web?
___________________________________________________
___________________________________
● ¿Qué desean hacer sus clientes en la aplicación Web?
___________________________________________________
___________________________________
● ¿Qué estará disponible en la aplicación Web?
___________________________________________________
___________________________________

EISC - Introducción a las Tecnologías Informáticas 11

 Formulación de Sitios Web
El Plan Guía
● ¿Cuáles son los requisitos de software de la aplicación Web?
___________________________________________________
___________________________________
● ¿Cuáles son los requisitos de hardware de la aplicación Web?
___________________________________________________
___________________________________
● ¿Cuál será la ubicación del servidor Web?
___________________________________________________
___________________________________
● ¿Cuál será el proveedor de acceso a Internet de la aplicación
Web?

EISC - Introducción a las Tecnologías Informáticas 12

 Formulación de Sitios Web
El Plan Guía
● ¿Cuál es el propósito de la Organización?
● ¿De qué modo la construcción de un proyecto web apoyará
este propósito?
● ¿Cuáles son los objetivos a medio plazo?
● ¿Cuáles son los objetivos a largo plazo?
● ¿Qué estrategias relacionadas con la Red se utilizarán para
alcanzar estos objetivos?
● ¿Cómo se medirá el éxito del proyecto web?

EISC - Introducción a las Tecnologías Informáticas 13

 Formulación de Sitios Web
El Plan Guía

Fin del Plan Guía

EISC - Introducción a las Tecnologías Informáticas 14

 Diseño de Sitios Web
El Modelo de Navegación

● Es un documento que ilustra gráficamente el tipo de

páginas Web a construir y las secuencias de acceso y
navegación, inherentes a todo sitio Web.
● Tiene gran influencia en la definición de transacciones y
funciones.
● Se utilizan estereotipos gráficos y de texto

EISC - Introducción a las Tecnologías Informáticas 15

 Diseño de Sitios Web
El Modelo de Navegación
● Iconos gráficos para indicar ● Iconos gráficos para indicar
tipos de páginas estáticas tipos de archivos
enlazados
 Página de Inicio
 PDF
 Página cliente
 Video
 Formulario
 .doc
 Hoja de Estilo
 .ppt
 .xsl
● Nota: Puede enlazar
archivos de cualquier tipo
usando sus íconos

EISC - Introducción a las Tecnologías Informáticas 16

 Diseño de Sitios Web
El Modelo de Navegación
● Estereotipos Gráficos

index.htm
nombrePag.htm misEstilos.css formulario01.htm

reporte.pdf miVideo.mpg hojaDeVida.doc clase01.ppt

EISC - Introducción a las Tecnologías Informáticas 17

 Diseño de Sitios Web
El Modelo de Navegación
● Estereotipos de Texto

EISC - Introducción a las Tecnologías Informáticas 18

 Diseño de Sitios Web
El Modelo de Navegación
● Ejemplo (Páginas Estáticas)
busquedas.htm
<<link>>
estilosUnivalle.css <<input text>> palabrasClaves
<<link>> <<submit>>Buscar

index.htm

<<link>> <<link>> biblioteca.htm

himnoUnivalle.pdf

directorio.htm
<<link>>

EISC - Introducción a las Tecnologías Informáticas 19

 Diseño de Sitios Web

Usuarios

estructura y
Diseño organización
de interfaces

Diseño esquemas de color, plantilla geométrica,

gráfico texto, ubicación, gráficos

Diseño de plantilla, bosquejos de contenidos

contenidos
Diseño de navegación flujos de navegación

Diseño de arquitecturas estructura hipermedia global

Diseño de Componentes lógica de procesamiento detallado

Tecnología

EISC - Introducción a las Tecnologías Informáticas 20

 Diseño de Sitios Web

● Conceptos Claves
 Anticipación – Al sig. movimiento del usuario
 Comunicación – Acciones del usuario
 Consistencia – Guardar armonía en todo el sitio
 Autonomía Controlada – reforzar convenciones de navegación,
validación de usuarios
 Eficiencia – Del usuario no del desarrollador
 Flexibilidad – Tareas directas y aleatorias. Detalles progresivos
 Enfoque – En las tareas del usuario, error de dirigir al contenido mal
relacionado.
 Veracidad – No mentir al usuario
 Agrupación – De tareas o información relacionada

EISC - Introducción a las Tecnologías Informáticas 21

 Diseño de Sitios Web

● Diseño centrado en el usuario

 Tener en cuenta el tipo de usuario y sus expectativas y

necesidades (niños, jóvenes, expertos, novatos)

 Hablar el lenguaje de los usuarios
 Ser consistente
 Minimizar la carga cognitiva
 Armar sistemas eficientes y flexibles
 Diseñar sistemas con criterio minimalista (simplicidad)
y estético
 Pruebas con usuarios reales

EISC - Introducción a las Tecnologías Informáticas 22

 Estructura del Sitio

Pag. Ppal.

Lineal o secuencial
● De lo general a lo específico

● Orden alfabético (índices,

enciclopedias o glosarios)
Categorías Jerárquica
Componentes

Cuadrícula o Retícula
Red Circular

EISC - Introducción a las Tecnologías Informáticas 23

 Estructura del Sitio

Pag. Ppal.

Lineal o secuencial
● De lo general a lo específico

● Orden alfabético (índices,

enciclopedias o glosarios)
Categorías Jerárquica
Componentes

Cuadrícula o Retícula
Red Circular

EISC - Introducción a las Tecnologías Informáticas 24

 Diseño de Sitios Web
Diseño General

EISC - Introducción a las Tecnologías Informáticas 25

 Diseño de Sitios Web
Lógica Visual

● Defina Plantillas ● Procure balance entre el estímulo

 Consistencia visual y la información
 Limpieza  Contraste
 Orden  Áreas verticales
 Composición  Alivio visual

EISC - Introducción a las Tecnologías Informáticas 26

 Diseño de Sitios Web
Áreas de Despliegue Seguro

Quiere decir que si por ejemplo decidimos hacer

una página para una resolución de 800x600
entonces debemos trabajar con unas
420 dimensiones reales de 760x420, éste es el
espacio visible, la diferencia en los números se
debe al espacio utilizado por botones de
navegación que requiere el navegador y nuestro
760 propio sistema operativo.

EISC - Introducción a las Tecnologías Informáticas 27

 Tipografía

● Con las hojas de estilo puede controlar: Color, tamaño,

familia, fondo, manejo de enlaces, etc.
● Para textos largos
 Definir márgenes al contenedor o columna
 Escritura preferiblemente en minúscula
 Columnas no muy anchas (como en las revistas)
 Evite tipografía en colores claros o muy brillantes sobre
colores oscuros
● Utilice texto convertido a gráficas únicamente para
encabezados o botones de navegación, no para párrafos
completos de texto.

EISC - Introducción a las Tecnologías Informáticas 28

 Tipografía

● Tipografías para pantalla en el cuerpo: Verdana, Georgia,

Trebuchet o adaptadas para pantalla como Times New
Roman.

● El tamaño de la fuente varía según la plataforma

● Utilice tipografías Sans–Serif para ecuaciones

EISC - Introducción a las Tecnologías Informáticas 29

 Color
● En el web se usa la paleta RGB (red,green,blue) para definir colores
● Cada color puede tener definida su intensidad entre 0 - 255
expresada con números hexadecimales (00 - FF)

EISC - Introducción a las Tecnologías Informáticas 30

 Gráficos

● Es sumamente importante optimizar correctamente y de

acuerdo al tipo de imagen.
● Entre más pesada la imagen más retarda la carga de la
página.
● Los formatos más utilizados son:
 GIF (para botones, gráficas de tipo ilustraciones que
requieran de fondo transparente)
 JPEG (para una gama de color verdadero, gradientes,
fotografías, imágenes médicas, degradados).
 PNG (todo tipo de gráficas, descarga rápida, color
verdadero, transparencia, combinación entre las dos
anteriores)

EISC - Introducción a las Tecnologías Informáticas 31

 Gráficos
● Se emplean los siguientes tipos de gráficos:
 íconos de pre-visualización (imágenes reducidas o
Thumbnails) ,
 imágenes medianas (de soporte o ilustración de texto) e
 imágenes grandes (gráficas que aparecen como resultado
de ampliación, muestran mayor detalle)

EISC - Introducción a las Tecnologías Informáticas 32

 Gráficos

● Un error común en el diseño de Web: pensar que las

gráficas harán de nuestra página una página bien
diseñada, atractiva e interesante.
 Muy poco funcional
 Si las gráficas no han sido correctamente optimizadas para
Web, serán muy pesadas y tardarán mucho en visualizarse
en el navegador.
 Las imágenes llegan a saturar el layout de nuestra página
muy fácilmente.
 Página SENCILLA, usar fotografías solamente en casos de
apoyo a nuestro contenido, o como parte de nuestra
identidad gráfica, no de forma decorativa.

EISC - Introducción a las Tecnologías Informáticas 33

 Elementos de Navegación
● Presentar claramente la navegación principal o global.
● Acceso claro y rápido a la página principal.
● Sacar provecho del uso de encabezados y pies de página.
● Utilizar cautelosamente gráficas como parte de la navegación.
● Mantener consistencia en la selección de colores asignados a
enlaces y a páginas visitadas.
● Ayudar al usuario a saber dónde están. El cambio de color por
ejemplo, o el simple hecho de desactivar el enlace de la sección en
la que se encuentran.
● Evitar el uso de el comando de subrayado <u></u>, este estilo de
texto resulta confuso pues en Web el subrayado indica la presencia
de un enlace.

EISC - Introducción a las Tecnologías Informáticas 34

 Diseño de Sitios Web

● Encabezados:
identidad gráfica del
sitio.
● Pie de página: el origen
del sitio y enlaces
Zona intermedia de acerca del sitio:
información información legal,
derechos de autor, año
de producción,
contacto, etc.

EISC - Introducción a las Tecnologías Informáticas 35

 Diseño de Sitios Web
Manejo de Tablas

● La tablas se deben
usar para insertar
datos, hoy en dia se
utilizan los divs,
para maquetar la
web.

EISC - Introducción a las Tecnologías Informáticas 36

 Diseño de Sitios Web
Manejo de Divs

Es posible
hacer que el
texto se
acerque un
poco a la
imagen

Es posible
hacer que el
texto se
acerque un
poco a la
imagen

● Utilice los divs para dividir estructuralmente los gráficos.

EISC - Introducción a las Tecnologías Informáticas 37