INFORMÁTICA Tema: PÁGINA WEB

Transcripción

1 INFORMÁTICA Tema: PÁGINA WEB Mucha información se guarda en nuestra computadora, si recorremos las carpetas de nuestro disco duro encontraremos multitud de archivos o ficheros de distinta naturaleza que reconocemos fácilmente por el icono asociado y por su extensión. La imagen siguiente puede ser la de cualquier carpeta de nuestros discos duros u otros almacenamientos donde encontramos un archivo de texto, un documento de Word, una imagen, una hoja de cálculo y página Web reconocible por el icono de Explorer (o el de Firefox u otros) y la extensión "htm" o "html". Podemos decir que una página web no es más que un documento especialmente diseñado para transmitirse por Internet... Una página web contiene principalmente información textual, hipervículos a otros recursos y elementos multimedia como imágenes, video, etc. Pero un documento de Word también puede contener los mismos elementos, por lo tanto qué diferencia una página Web de un documento de Word? Se trata de documentos radicalmente distintos en cuanto a su estructura, funcionamiento y finalidad. Algunas diferencias básicas son: Un documento de Word está optimizado para que sólo se lea con el programa Word de Microsoft. Una página web está diseñada para ser procesada por un navegador (agente de usuario) como Explorer, Firefox, Safari, etc. Evidentemente para abrir un documento de Word necesitamos tener instalado en el sistema la aplicación Word de Microsoft. Para poder leer una página web necesitamos tener instalado un navegador o browser. Si la página se encuentra en Internet, obviamente necesitaremos una conexión a Internet con un proveedor aparte del navegador... Las páginas webs están especialmente diseñadas para almacenarse en los servidores web de Internet. Los documentos de Word se almacenan en los discos locales del usuario, aunque también pueden almacenarse en servidores pero con el objeto de ser descargados. Las páginas webs se transmiten mediante un protocolo de comunicaciones llamado HTTP (HyperText Transfer Protocol) de la familia TCP/IP que permite enviar documentos de todo tipo y formatos, como gráficos, audio, video, etc. Este protocolo es usado en cada una de las transacciones que se realizan en la Web (WWW). Los documentos de Word no tienen esa posibilidad.

2 Para localizar las páginas se creó un sistema de direccionamiento llamado URL (Uniform Resource Locator) consistente en una secuencia de caracteres, de acuerdo a un formato estándar, que permite localizar cada recurso (documentos, imágenes, etc) en Internet. El URL es el texto que se escribe en la barra de dirección del navegador y que asigna una dirección única a cada una de las páginas o recursos de información disponibles en la Internet... Las páginas web se escriben en un lenguaje de marcado de etiquetas llamado HTML cuya principal característica es la facilidad para crear hipervínculos o enlaces a otros recursos de Internet. Esta característica hace posible saltar (navegar) de una página a otra con un simple clic de ratón siendo esto la base del éxito de la Web. Diversos programas son utilizados para crear y diseñar páginas web, ejemplo de ellos dreamweaver, frontpage, Microsoft Word, etc. Las páginas Web no tienen necesariamente que alojarse en un servidor de Internet, pueden almacenarse localmente en discos duros, DVD, etc. Obviamente en estos casos no serán accesibles públicamente mediante Internet. TRANSMISION DE LA PÁGINA Una página web es un documento que puede contener elementos muy diversos como textos, imágenes, videos, sonidos, etc. Pero estos elementos no se guardan de forma compacta (incrustada) en un sólo archivo, sino que existen como ficheros independientes y son enlazados mediante un documento HTML/XHTML de manera que cuando se solicita dicho documento también se solicitan los archivos enlazados. El navegador del cliente compone y visualiza conforme los recibe, apareciendo finalmente (cuando finaliza la descarga de la página) como un todo. El siguiente gráfico muestra como se transmite los documentos por la red... Veamos un ejemplo muy básico. Imaginemos que solicitamos una página llamada "imagenes.htm" ubicada en algún servidor (no indicamos el URL para simplificar) cuyo contenido es algo de texto y tres imágenes maquetadas con algún elemento (como una tabla). La página completa estará compuesta por cuatro archivos como puede verse en la imagen siguiente de abajo: Los archivos anteriores se encontrarán en alguna carpeta de un disco de algún servidor al que se accederá por un URL que no indicamos para simplificar... El navegador (Explorer, Firefox, safari, etc.) solicitará la página "imágenes.htm". Esta contiene los elementos de maquetación, el texto y los enlaces a las imágenes (pero no las imágenes). El navegador maquetará (compondrá) los elementos, mostrará el texto cuando lo reciba y los huecos donde situará las imágenes cuando lleguen. La imagen siguiente ilustra el proceso...

3 Una vez compuesta la página y colocado el texto, el navegador iniciará la descarga de las imágenes enlazadas. Dependiendo del tamaño de la imagen, de la velocidad de la conexión y otros factores la visualización será más o menos inmediata. A medida que se descarguen completamente se irán mostrando en la ubicación que les corresponda como se ilustra en la imagen siguiente. Hay que tener en cuenta que si la imagen de origen está mal enlazada (o se ha borrado), el navegador seguirá mostrando el hueco donde debería haberse ubicado. En la imagen siguiente suponemos esta situación para la imagen "tres.jpg" ELEMENTOS DE UNA PAGINA WEB Cuando accedemos a una página web pueden aparecer muchas cosas, pero si la observamos con detenimiento comprobaremos que todas las páginas están compuestas básicamente por una serie de elementos fácilmente identificables: fondos, textos, hipervínculos, imágenes estáticas o con movimiento, formularios, videos, etc... FONDOS Todas las páginas tienen fondo necesariamente aunque no se especifique siendo éste normalmente color blanco. El fondo es la superficie de la ventana del navegador que se encuentra detrás de todos los elementos que aparecen en la página. Los creadores de páginas tienen varias opciones a la hora de determinar el fondo: dejar la página sin fondo (blanco), crear un fondo de cualquier color liso, poner una imagen como fondo, poner un motivo que se repita como un mosaico hasta llenar toda la ventana del navegador. TEXTOS Es el elemento más común y frecuente de una página. Tiene poco peso y puede enviarse por las redes de forma eficiente ocupando poco ancho de banda. El texto fluye por el cuerpo del documento adaptándose a los márgenes del contenedor o ventana del navegador. Puede tener distintos atributos como tipo de letra, tamaño, color, fondo,...

4 El texto de una página se puede seleccionar con el ratón para copiarlo y pegarlo en alguna otra aplicación, a no ser que el autor establezca algún mecanismo que evite la copia. La imagen siguiente ilustra lo que ocurre cuando se selecciona el texto... HIPERVINCULOS Aunque una página no tiene porque tener hipervínculos o enlaces, hoy no se concibe una página web que no los tenga, puesto que estos son la esencia de la Los hipervínculos (también llamados enlaces, vínculos, hiperenlaces, ligas...) son objetos de los documentos electrónicos que conectan con otros documentos electrónicos o recursos. La finalidad normal de un hipervínculo es la de obtener de manera rápida y sencilla otros recursos electrónicos locales o en red. El funcionamiento implícito de un hipervículo es muy sencillo: pulsar con el ratón, o con el teclado y este nos conecta con otros recursos. Para crear un hipervínculo utilizando el procesador de textos Word, primero seleccionamos un texto o imagen, a continuación clic botón derecho sobre la selección, aparece una cuadro de texto donde elegimos la opción Hipervínculo, por último buscar > Archivo e indicamos un recurso (archivo de texto, video, sonido, etc...).

5 IMAGENES Y FOTOGRAFIAS Las imágenes, fotos, gráficos, dibujos, ilustraciones, textos gráficos, etc. que aparecen en una página son elementos enlazados, es decir se envían por la red de forma separada. En general las imágenes pueden descargarse individualmente simplemente situando el ratón encima de la imagen, pulsando botón derecho y eligiendo (en Explorer), en el menú que aparece Guardar imagen como... La imagen siguiente muestra el menú de descarga de Explorer. En el disco duro se guardará un archivo independiente con formato JPG, GIF, PNG, etc. Todas las imágenes que aparecen en una página pueden descargarse una a una por este método. No obstante, algunos editores protegen las imágenes para que no se puedan descargar. Existen muchos formatos gráficos para imágenes en la Web, pero sin duda los más ampliamente extendidos son GIF, JPG y PNG. Comentamos algunas características básicas: GIF (Graphics Interchange Format) Este formato fue Creado por CompuServe en 1987 y tiene una amplia utilización en la World Wide Web. Se utiliza tanto para imágenes estáticas como imágenes con movimiento (animadas). Este formato utiliza una paleta de 256 colores como máximo. Las imágenes en RGB deben reducirse a 256 colores con la consiguiente pérdida de calidad. Ventajas: tiene poco peso lo que permite páginas ligeras, es soportado por prácticamente todos los navegadores sin necesidad de plugin o complementos, admite un color transparente para mostrar el fondo del contenedor, es ideal para logotipos y banner publicitarios de pocos de colores, son muy fáciles de crear y diseñar con multitud de aplicaciones... Inconvenientes: su principal limitación es la paleta máxima de 256 colores lo que hace que sea poco adecuado para la fotografía, está sujeto a patente de compresión de datos LZW...

6 Se utilizan fundamentalmente para publicidad y animaciones básicas... JPG (Joint Photographic Experts Group) Cuando hablamos de archivos JPG en realidad nos referimos a un método de compresión llamado JPEG (con dos formatos JPEG/Exif para cámaras fotográficas y JPEG/JFIF para almacenar y transmitir fotografías en la World Wide Web) que produce archivos comprimidos con pérdida de calidad lo que significa que una imagen en RGB, al comprimirla para perder peso, producirá una pérdida de colores y detalles irrecuperable. Las extensiones pueden ser.jpg,.jpeg,.jpe,.jfif,.jfi,.jif. El algoritmo de compresión JPEG se base en la percepción visual del ojo humano más sensible a la luminancia (brillo) que al tono (color), es decir percibimos mejor los cambios de luminosidad que los cambios en los colores, por lo tanto el algoritmo tratará de mantener la luminosidad y reducirá los colores... Ventajas: reduce el peso de las imágenes de forma considerable, permite ajustar la cantidad de compresión y por tanto cantidad de pérdida de calidad (a más compresión menos peso y menos calidad), es óptimo para la fotografía en la Web, es soportado por prácticamente todos los navegadores sin necesidad de plugin o complementos... Inconvenientes: es irreversible y se acumula la perdida si comprimimos varias veces, no admite transparencia, no es adecuado para imágenes con áreas amplias de colores lisos, poco adecuado para imágenes con textos... PNG (Portable Network Graphics) El formato PNG es actualmente una alternativa a las limitaciones de GIF y JPG. Esto no significa que estos formatos no sean los más adecuados con cierto tipo de imagenes como fotografías que tienen mucho peso, pero en general PNG tiene características superiores a los formatos anteriores. Utiliza un algoritmo de compresión sin pérdida. PNG ofrece dos variantes: PNG de 8 bits y PNG de 24 de bits. Con PNG8 podemos crear archivos indexados de paletas de 256 colores o menos (como GIF) con un color transparente (100% transparente) y tamaños de archivo menores. Con PNG24 podemos tener cualquier cantidad de colores (como JGP), pero la compresión JPEG obtiene archivos de menor peso con calidad similar. Pero PNG ofrece más cosas: imágenes indexadas, en escala de gris, o en RGB con un canal alfa de transparencia, es decir, cada píxel puede ser opaco (0% transparente), transparente (100%) o semitransparente (25%, 40%,...) OBJETOS ANIMADOS La inmensa mayoría de las páginas contienen elementos que tiene movimiento. Se trata de objetos animados cuya función es centrar la atención del lector y que la mayoría de la veces tiene una finalidad publicitaria (banner publicitarios). Son archivos enlazados (como las imágenes) y hay diversos formatos. Comentamos los archivos GIF ANIMADOS y las ANIMACIONES FLASH GIF ANIMADO: Se trata del elemento animado más básico y elemental. Un archivo gif animado se compone de dos o más imágenes, fotogramas o cuadros cada uno de los cuales dispone de un tiempo de visualización en pantalla, de tal forma que cuando el navegador carga el archivo muestra cada cuadro la fracción de tiempo almacenada en dicho cuadro. Este proceso es secuencial y puede repetirse indefinidamente. Otros elementos de una página web son: MULTIMEDIA: VIDEO, MÚSICA, TV, RADIO... CAMPOS, FORMULARIOS Y APLICACIONES INCRUSTADAS (APPLET). ESTRUCTURA DE UN SITIO WEB Es la representación esquemática de todas las páginas web que conforma el sitio WEB. En esta estructura existe una página principal llamada index (o la home page en terminología inglesa) desde la que se puede llegar a otras páginas de la web. Estas otras páginas a su vez son un nodo para llegar a otro grupo de páginas. De esta manera llegaremos a tener las páginas agrupadas en niveles, de manera que para llegar desde el primero al último se deben atravesar los intermedios. Es una estructura muy jerarquizada.

7 Para crear una página web podemos utilizar el procesador de textos Word, con la consideración que al guardar el trabajo deberemos indicarle que es una página web (tipo de documento Página web). Al asignarle el nombres de archivo a nuestra página, tendremos en cuenta no exceder la cantidad de 8 caracteres alfabéticos, estos deben estar escritos en minúscula, podemos incluir números. Muy importante que la extensión sea.htm para nuestro servidor IVCC. Por ejemplo: historia.htm musica80.htm No sería correcto utilizar: Historia.htm (primer letra mayúscula) Musica de los 80.htm (mayúsculas, espacios en blanco y nombre + de 8 caracteres)