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? Servicios y recursos ¿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 Estructura WWW 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. JPG: 10,6 KB GIF: 37 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