La red Internet

1er tarea corta: Entregar dos páginas a doble espacio con Arial 12 de la historia de Internet (presente, pasado y futuro).

internet = interconnected network = red de redes

Elementos: Backbones, redes regionales, redes comerciales,

redes locales

La red Internet

¿Estoy conectado a Internet? ¿Puedo hacer ping hacia una máquina en el mundo?

Algunas veces la circulación está limitada por Firewalls.

Servicios y recursos En Internet toda la comunicación se hace por medio de

“sockets”, que es el término anglosajón utilizado para describir puntos finales de comunicación. Podríamos decir que en Internet un “socket” es una tripleta del tipo (protocolo, dirección IP, puerto o identificador del proceso).

La red Internet

Servicios y recursos Protocolos

TCP: Orientado a la conexión. UDP: Sin conexión.

Servicios y su identificador de proceso (puerto) TELNET (puerto 23) FTP – File Transport Protocol (puertos 21/control – 20/datos) DNS – Domain Name System SMTP – Simple Mail Transfer Protocol (puerto 25) NFS – Network File System DHCP – Dynamic Host Configuration Protocol HTTP – HyperText Transport Protocol (puerto 80)

La red Internet

World Wide Web

Protocolo de Transporte HTTP Se abre un “socket” en el puerto 80 del destino (puede

necesitar DNS). GET Respuesta (error o documento)

Estructura WWW HTML (DTD basado en SGML). XHTML (DTD basado en XML). Otros DTD.

Diseño de Sitios Web

Diseño Visual Diseño Lógico Diseño Físico

Meta Principal del Sitio

La meta principal de todo sitio es maximizar el número de visitas al sitio. Esto debe ser considerado en los tres diseños mencionados anteriormente.

Ejemplos:Diseño visual: atractivo, rápido de cargar.Diseño Lógico: algoritmos eficientes.Diseño Físico: buen servidor, buena tasa de transferencia.

Ingeniería Humana

No olvidar nunca que para un buen diseño se necesita un buen análisis de requerimientos.

No perder la parte humana del análisis de requerimientos que debe ser hecho en base a las necesidades del usuario y no en base a nuestro gusto “informático”.

Cómo lograr la meta

El sitio debe estar hecho para resolver los problemas del visitante.

Esto debe ser obvio, V.G.: Google Amazon

Diseño Visual

Marcos (frames):Razones para no usarlos:

Resultan difíciles de indizar para los motores de búsqueda. Esta es la razón por la que muchos sitios ocupan puestos muy bajos en los buscadores sólo por el uso de frames.

Dificultan la inclusión de una página en Favoritos. Una página llena de barras de desplazamiento da un aspecto muy

poco estético al sitio web. Algunos navegadores no imprimen el contenido de los marcos

correctamente. Los marcos no se visualizan bien en monitores con resoluciones de

640x480.

Diseño Visual

Consistencia:

Se debe mantener la consistencia dentro del sitio. Se debe mantener el mismo aspecto y diseño en todas sus páginas.

La inconsistencia es uno de los errores más cometidos en los sitios web.

Diseño Visual

Página de Inicio (Home):

La primera impresión es la más importante. Debe dar una idea general del sitio.

Diseño Visual

Textos:

Son una parte importante. La mayor parte de la información es textual. Deben ser escogidos, revisados y corregidos cuidadosamente, de tal manera que se comuniquen bien las ideas.

Diseño Visual

Texto: Fuente:

Los navegadores utilizan las fuentes disponibles en el sistema operativo. Si se escogen fuentes no disponibles el navegador simplemente no la muestra o escoge otra fuente no deseada. Se debe por lo tanto escoger una fuente que se encuentre disponible en el sistema operativo de los usuarios.

Diseño Visual

Texto: Resaltado del Texto:

Se pueden utilizar la negrita y la cursiva para resaltar, sin embargo sin abuso porque el usuario se acostumbra y se pierde el objetivo del resaltado.Se debe evitar el subrayado porque se puede confundir con los enlaces.Se puede resaltar con mayúsculas sin embargo es preferible utilizarlas únicamente en la primer letra de cada palabra en vez de las palabras enteras porque es más atractivo para el usuario del sitio.

Diseño Visual

Texto: Tamaño del Texto:

Los textos deben ser pequeños y permitir una lectura rápida. O sea, se recomienda la división en secciones. Se deben evitar las páginas largas que impliquen el uso de despliegue.

Diseño Visual

Imágenes, gráficos y animaciones:

Es un recurso importante, sin embargo, su uso indiscriminado puede retrasar la carga del sitio o provocar estrés visual. Por ello se recomiendo utilizar imágenes únicamente cuando sea necesario para comunicar el mensaje que se desea.

Diseño Visual

Imágenes, gráficos y animaciones: Imágenes de los elementos deben ser pequeñas entre 2

Kb y 3 Kb de memoria. Para promoción se recomienda el uso de “thumbnail” de

un tamaño visual 80x80 que pueden estar vinculados a imágenes más grandes.

Utilizar tablas para alinear imágenes de forma horizontal. Las animaciones distraen al usuario del contenido de la

página, por lo que se debe minimizar su uso.

Diseño Visual

Selección del formato Imágenes fotográficas

El formato más recomendado es el JPEG porque consigue una gran compresión con una mínima perdida de calidad.

GIF: 37 KB

JPG: 10,6 KB

PNG: 125 KB

Diseño Visual

Selección del formato Imágenes sencillas

Para las imágenes sencillas con pocos colores y con formas muy delimitadas (como los gráficos estadísticos), el formato más recomendado es el GIF. Con el tiempo puede ser que el formato PNG sustituya al GIF, ya que el primero es más avanzado, aunque su uso no es muy extendido.

GIF: 3,78 KB

JPEG: 31,3 KB

PNG: 2,72 KB

Diseño Visual

Funcionalidad en diferentes navegadores Hay gran diversidad de navegadores, entre ellos

destacan: Internet Explorer y Netscape Navigator.

http://validator.w3.org es un servicio de validación de páginas.

A veces es mejor no utilizar la última versión de los estándares.

Navegabilidad

Navegación útil Guía a los visitantes hacia la información que

requieren de forma rápida e intuitiva. Conduce al visitante hacia las páginas donde este

interactúa con el sitio.

Navegación

Agrupación de la navegación Organización Regla “Siete más menos dos” Navegación Padre-Hijo Navegar debe ser tan fácil desde la cima al fondo

como del fondo hasta la cima.

Navegación

Estructura del sitio Estructura jerárquica

Navegación

Estructura del sitio Lineal

Navegación

Estructura del sitio Lineal con jerarquía

Navegación

Estructura del sitio Red