Desarrollo de Paginas Web Internet - Web Internet - Web Qué es la Internet? - Qué es la Web? Internet: Una red de computadoras a nivel mundial Web: Una forma de organizar la información existente en Internet 2 Qué es Internet? Internet Una red de computadoras a nivel mundial Protocolo TCP/IP Los computadoras que componen la Internet se denominan Servidores Proveedor de Acceso. Internet Proveedor de Acceso: Servidor al que se conecta un usuario para acceder a los múltiples servicios ofrecidos por el resto de los servidores de Internet. Usuario final Proveedor de Acceso Internet Esquema de acceso a Internet 3 4
Internet Protocolos de Internet: TCP/IP Internet Protocolos de Internet: TCP/IP El protocolo TCP (Transmission Control Protocol): Se encarga de dividir la información que se desea enviar y de recomponer los paquetes para obtener el envío original TCP IP Paquete de datos Subpaquetes de datos IP TCP El protocolo IP (Internet Protocol): Se encarga de enrutar los datos transmitidos Esquema de funcionamiento de TCP/IP 5 6 Internet Cómo identificar un máquina en Internet? Básicamente Existen dos formas Dirección de IP: está formada por cuatro números decimales, separados entre sí por un punto, con un valor comprendido entre 0 y 255. 175.215.176.160 Identificación DNS (Domain Name System): La computadora puede ser identificada por una cadena de caracteres. 7 WEB Qué es la WEB? WEB (WWW o World Wide Web) La Web es una forma distinta de organizar toda la información existente en Internet Mecanismo de acceso común de fácil uso, Hipertexto y Multimedia. 8
WEB WEB Hipertexto: Forma de organizar la información. Puntos del texto unidos con otros mediante relaciones Da la posibilidad de cambiar el recorrido de lectura Multimedia: Es la combinación de varias tecnologías de presentación de información. Videos Música Animaciones Foros Un poco de historia acerca de la Web En 1991 la red Internet ya existía, permitía enviar mensajes intercambiar archivos o debatir mediante la participación en foros, textual y estaba despoblada de gráficos, sonido y video. Tim Berners-Lee conocido como el padre de la Web fue el primero en vislumbrar el potencial de Internet Surgió de la necesidad de intercambiar información que contenía fórmulas matemáticas, casi imposibles de expresar en texto. 9 10 WEB Cómo se organiza la Información? Berners-Lee define la web como: un sistema de información multimedial distribuido, heterogéneo y colaborativo. Página Web Sitio Web Dirección Electrónica La Web es un intento de organizar toda la información existente en Internet a través de una interfaz gráfica común. 11 Enlaces (Links) 12
WEB Cómo se organiza la Información? Sitio Web (o Site): conjunto de páginas Web relacionadas entre sí que pertenecen a una determinada organización o individuo Enlace (link): es la forma en que son denominadas las conexiones entre un texto y otro de la Web. URL (Uniform Resource Locator): El URL es la dirección que tiene asignada un documento para poder ser localizado en la Red. 13 WEB Cómo Trabaja? La Web trabaja con dos elementos principales: El lenguaje HTML (HyperText Mark-up Language o Lenguaje de Marcas de HiperTexto) El protocolo HTTP (HyperText Transfer Protocol o Protocolo para la Transferencia de HiperTexto). 14 Desarrollo de Páginas Web Diseño Web Consideraciones sobre el Diseño de Sitios Web Diseñar para una variedad de navegadores Diseñar para una variedad de Displays 16
Por qué diseñar para una variedad de navegadores? Implementación de HTML y elementos de scripting propios. Características y capacidades mejoradas con cada nueva versión no significa que las versiones más viejas dejan de usarse. Considerar: El mercado de los navegadores existente. Para qué navegador diseñar? Diseñar para el denominador común más Bajo Diseñar para la Versión actual Salvando la Diferencia Algo para cada quién (Something for Everyone) Escribir un buen HTML Servicios de Validación HTML 17 18 Servicios de Validación HTML The World Wide Web Consortium s HTML Validator http://validator.w3.org/ WebSiteGaragehttp://www.websitegarage.com/ NetMechanic http://www.netmechanic.com/ Doctor HTMLhttp://www2.imagiware.com/RxHTML/ Lista de Validadores de Yahoo: http://www.yahoo.com/computers_and_internet/informa tion_and_documentation/data_formats/html/validati on_and_checkers/ Editores HTML como Validadores 19 Conocer a su Audiencia y el fin para el cual está diseñado. Antes de diseñar un nuevo sitio, Definir: Plataforma. Navegadores más utilizados en la zona de acceso. Velocidades de conexión de los usuarios destinatarios No hay líneas de guía sobre el soporte de navegadores que puedan anticipar cada situación de diseño. Seguir estándares de facto Navegar por sitios similares Colores acorde al fin del sitio 20
Considerar el Propósito de su Sitio: Conocer cómo será usado el sitio. Quienes están en busca de información Quienes están navegando la Web por entretenimiento. Test! Test! Test! La palabra final en el dilema de diseñar para una variedad de navegadores es siempre TEST!. Testee su sitio sobre: Diversos navegadores Diversas versiones de navegadores Diversas configuraciones de plataformas Otras consideraciones : Uso de Ventanas Pop-up Combinación de Páginas Elección de un Tamaño de Página Para qué resolución diseñar? Cuál considerar como estándar? 21 22 Diseño Flexible: El texto y los elementos en un archivo HTML fluirán en la ventana del navegador, llenando todo el espacio disponible Cuando la ventana del navegador es redimensionada, los elementos refluyen para adaptarse a las nuevas dimensiones. Las páginas web son flexibles por defecto. Ventajas Las páginas web serán desplegadas sobre una variedad de resoluciones y condiciones de monitor. Al mantener las páginas flexibles se ajustan cada display. El espacio del monitor completo es llenado Esta más cerca al espíritu y a la naturaleza del medio. 23 24
Desventajas En monitores grandes, la longitud de las líneas de texto puede irse de las manos. Elementos flotantes en monitores grandes y encimados en monitores muy pequeños Los resultados de diseños flexibles son impredecibles 25 Creación de páginas flexibles Los archivos HTML simples son flexibles por defecto, Se puede introducir estructura a un documento flexible usando tablas y frames. Las tablas son usadas para crear columnas de texto y para dividir la página web en secciones lógicas. Usar Medidas relativas (porcentajes) para tablas y celdas La tabla se redimensiona con la ventana del navegador; Las columnas y elementos permanecen proporcionales unos a otros. Los Frames también pueden ser usados para agregar estructura a un diseño flexible. Se especifican con valores en porcentajes o para llenar automáticamente cualquier espacio restante en la ventana. 26 Diseño Fijo La página se diseña con un ancho fijo que permanecerá igual para todos los usuarios Esta propuesta se basa en los principios de diseño para la imprenta. Ventajas La página web se verá igual independientemente del tamaño del monitor. Provee un mejor control sobre las longitudes de líneas. 27 28
Desventajas: Si la ventana del navegador es más pequeña que la grilla para la página, partes de la página no será visible y puede requerir scrolling horizontal para ser vista. Es difícil controlar el tamaño de tipos en los navegadores Tratar de controlar totalmente el desplegado de una página web excede al medio. Creación de páginas fijas Son creados usando una tabla estructural con medidas absolutas especificadas en píxeles. Gráficos transparentes de tamaño fijo Etiquetas <spacer> propietarios de Netscape Elementos de posicionamiento de las Hojas de Estilo en Cascada 29 30