Download PAGINA WEB IVCC 2016 - Colegio Virgen del Carmen de Cuyo

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.
Colegio Virgen del Carmen - 2014
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...
Colegio Virgen del Carmen - 2014
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,...
Colegio Virgen del Carmen - 2014
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 WWW...
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...).
Colegio Virgen del Carmen - 2014
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...
Colegio Virgen del Carmen - 2014
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.
Colegio Virgen del Carmen - 2014
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)
Colegio Virgen del Carmen - 2014