Definiciones
El hipertexto ha sido definido como un enfoque para manejar y organizar información, en el cual los datos se almacenan en una red de nodos conectados por enlaces. Los nodos contenienen textos y si contienen además gráficos, imágenes, audio, animaciones y video, así como código ejecutable u otra forma de datos se les da el nombre de hipermedio, es decir, una generalización de hipertexto.
Considerando cómo se representa el conocimiento humano, el hombre opera por asociación, saltando de un item al próximo, en forma casi instantánea. El paradigma hipermedia intenta modelar este proceso con enlaces entre pedazos de información contenidos en nodos.
Funcionamiento de la web
La visualización de una página web de la World Wide Web normalmente la URL de la página en el navegador web, o siguiendo un enlace de hipertexto a esa página o recurso. En ese momento el navegador comienza una serie de comunicaciones, transparentes para el usuario, para obtener los datos de la página y visualizarla.
El primer paso consiste en traducir la parte nombre del servidor de la URL en una dirección IP usando la base de datos distribuida de Internet conocida como DNS. Esta dirección IP es necesaria para contactar con el servidor web y poder enviarle paquetes de datos.
El siguiente paso es enviar una petición HTTP al servidor Web solicitando el recurso. En el caso de una página web típica, primero se solicita el texto HTML y luego es inmediatamente analizado por el navegador, el cual, después, hace peticiones adicionales para los gráficos y otros ficheros que formen parte de la página. Las estadísticas de popularidad de un sitio web normalmente están basadas en el número de páginas vistas o las peticiones de servidor asociadas, o peticiones de fichero, que tienen lugar.
Al recibir los ficheros solicitados desde el servidor web, el navegador renderiza la página tal y como se describe en el código HTML, el CSS y otros lenguajes web. Al final se incorporan las imágenes y otros recursos para producir la página que ve el usuario en su pantalla.
Correo web
Casi todos los proveedores de correo dan el servicio de correo web (webmail): permiten enviar y recibir correos mediante un sitio web diseñado para ello, y por tanto usando sólo un navegador web. La alternativa es usar un programa de correo especializado.
El correo web es cómodo para mucha gente, porque permite ver y almacenar los mensajes desde cualquier sitio (en un servidor remoto, accesible por el sitio web) en vez de en un ordenador personal concreto.
Como desventaja, es difícil de ampliar con otras funcionalidades, porque el sitio ofrece un conjunto de servicios concretos y no podemos cambiarlos. Además, suele ser más lento que un programa de correo, ya que hay que estar continuamente conectado a páginas web y leer los correos de uno en uno.
Cliente de correo
También están los clientes de correo electrónico, que son programas para gestionar los mensajes recibidos y poder escribir nuevos.
Suelen incorporar muchas más funcionalidades que el correo web, ya que todo el control del correo pasa a estar en el ordenador del usuario. Por ejemplo, algunos incorporan potentes filtros anti-spam.
Por el contrario, necesitan que el proveedor de correo ofrezca este servicio, ya que no todos permiten usar un programa especializado (algunos sólo dan correo web). En caso de que sí lo permita, el proveedor tiene que explicar detalladamente cómo hay que configurar el programa de correo. Esta información siempre está en su página web, ya que es imprescindible para poder hacer funcionar el programa, y es distinta en cada proveedor. Entre los datos necesarios están: tipo de conexión (POP o IMAP), dirección del servidor de correo, nombre de usuario y contraseña. Con estos datos, el programa ya es capaz de obtener y descargar nuestro correo.
El funcionamiento de un programa de correo es muy diferente al de un correo web, ya que un programa de correo descarga de golpe todos los mensajes que tenemos disponibles, y luego pueden ser leídos sin estar conectados a Internet (además, se quedan grabados en el ordenador). En cambio, en una página web se leen de uno en uno, y hay que estar conectado a la red todo el tiempo.
Algunos ejemplos de programas que realizan las funciones de cliente de correo electrónico son Mozilla Thunderbird, Outlook Express y Eudora (ver lista completa).
Funcionamiento
Escritura del mensaje
Se pueden mandar mensajes entre computadores personales o entre dos terminales de una computadora central. Los mensajes se archivan en un buzón (una manera rápida de mandar mensajes). Cuando una persona decide escribir un correo electrónico, su programa (o correo web) le pedirá como mínimo tres cosas:
- Destinatario: una o varias direcciones de correo a las que ha de llegar el mensaje
- Asunto: una descripción corta que verá la persona que lo reciba antes de abrir el correo
- El propio mensaje. Puede ser sólo texto, o incluir formato, y no hay límite de tamaño
Además, se suele dar la opción de incluir archivos adjuntos al mensaje. Esto permite traspasar datos informáticos de cualquier tipo mediante el correo electrónico.
Origen de la web
La Web fue creada en 1989 por el inglés Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (lenguaje con los que se crean las páginas Web), en los últimos años ha abogado por su visión de una Web Semántica, empezó a escribir un programa que le permitiera almacenar información. De modo magistral, dio forma y aplicación a un par de conceptos que ya habían sido formulados de forma más o menos vaga y genérica: El hipervínculo, que conducía directamente al concepto de hipertexto, de ahí al de páginas HTML (páginas Web) que a su vez,darían origen a un nuevo servicio de Internet (mejor diríamos una nueva forma de usar la Red) que acabaría arrasando, y a un nuevo paradigma de arquitectura de la información:Los "Hypermedia".
Las páginas de hipertexto, con sus hipervínculos enlazando información en cualquier parte del mundo, tejen una telaraña mundial,"World Wide Web",abreviadamente "La Web";WWW o W3.
No confundir "la Web" con "la Red". La Red, es Internet y estaba inventada bastante antes. La Web es uno de los muchos servicios que proporciona Internet. Además, como la Web es, entre otras cosas, una "interfase" para utilizar la red (de tremendo éxito), muchos de los servicios se han "maquillado de Web", adoptando formas compatibles con los navegadores.
Partes de un documento HTML
Un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por y donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.
El cuerpo, flanqueado por las etiquetas y , que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
Ø Herramientas de desarrollo: fases de un desarrollo web, así como los lenguajes de programación usados, son muy extensas y variadas, y por ello necesitamos herramientas específicas para cada una de ellas. Conoceremos a continuación las principales herramientas existentes para poder desarrollar fácilmente un proyecto web.
En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.
Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes.
Fases de desarrollo de una Web
Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo Web.
· Diseño:
El diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.
· Maquetación HTML/CSS:
La maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Programación cliente:
· Programación servidor:
En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación Web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.
· Depuración:
Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.
· Pruebas en local:
En nuestro servidor local haremos todas las pruebas posibles.
· Subir ficheros al hosting:
Una vez nuestra Web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción).
Ø Elementos: Una página Web tiene contenido que puede ser visto o escuchado por el usuario final. Éstos elementos incluyen:
• Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas .El texto editable puede marcarse con el ratón o el teclado y copiarse a otra aplicación, como el bloc de notas (muchos de los elementos textuales de las páginas, en especial los títulos, botones de navegación, etc. son realmente gráficos, y su texto no es editable.)
• Imágenes. Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede hablar de tres formatos casi exclusivamente: GIF, JPG y PNG.
Ø Atributos: Existe una serie de atributos que se aplican de manera global a toda la página, como el color de fondo el del texto, de los enlaces, márgenes, etc.
Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la página muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta y, como decíamos son generales a toda la página.
Atributos para fondos
bgcolor: especificamos un color de fondo para la página. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador.
Background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página
Color del texto
text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.
Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el texto. Los tres atributos son los siguientes:
link: el color de los enlaces que no han sido visitados. (Por defecto es azul clarito)
vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitada. Es el color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería ser un poco menos vivo que el color de los enlaces normales.
Alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.
Márgenes
Con otros atributos de la etiqueta se pueden asignan espacios de margen en las páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.
Leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.
Topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.
Marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
Marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)
Lenguaje Estructurado: Lenguaje con el que está desarrollada una página Web.
Editor: Programa utilizado para crear páginas Web sin la necesidad de tener que aprender el lenguaje. Ejemplos: M. Front Page 2000 y Macro-media Dreamweaver.
Servidor: Máquina conectada a Internet que –entre otros servicios- ofrece albergue para páginas Web haciendo que estén accesibles desde cualquier punto de Internet.
Cliente FTP: Programa que permite conectarse al servidor para publicar páginas Web.
Hosting: Hospedaje Web.
Dominio: Dirección Web asociada a una página Web.
ISP: En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros.
URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso.
El tipo más común de dirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de dirección URL son gopher://, que proporciona la dirección de Internet de un directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP. Ejemplos: http://www.mitecnologico.com , http://www.google.com
Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones, juegos e interacción con el usuario.
Frames (marcos): Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los demás.
Webmaster: Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web.
Tablas: Deben utilizarse únicamente para datos tabulados. Nunca para maquetar.
Banner: Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.
Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.
Propiedades: Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar propiedades para elementos de página como tablas, gráficos y elementos activos.
Ø Estructura básica de una pagina: Un documento escrito en HTML contendría básicamente las siguientes etiquetas :
Indica el inicio del documento.
Inicio de la cabecera.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.
El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza
http://www.webtaller.com/manual-html/index.hml
Donde....
http:// es el indicador de pagina Web
www.webtaller.com es el Dominio (nombre) del ordenador
/manual-html/ es el Directorio dentro del ordenador
index.html es el Fichero que contiene la página Web
Ø Cuerpo: Los parámetros que admite la etiqueta
Background: define un grafico de fondo para la página.
bgcolor: define un color de fondo de la página.
text: cambia el color del texto
link: cambia el color de un enlace no visitado
leftmargin / topmargin: especifica el número de píxeles de margen entre el borde de la ventana y el contenido de la página, por default cero.
marginwidth / marginheight: igual en el caso anterior pero para navegadores de Netscape.
Aquí en esta parte ingresamos la información (el contenido de nuestra página) etiquetas HTML, código embebido de otros lenguajes permitidos embeberse en HTML. Aconsejable las propiedades y atributos de etiquetas HTML manejarlas con hojas de estilo.
Ø Titulares: Existen cuatro pasos para integrar titulares en su página web.
1. Escoja la sección o categoría.
2. Elija un tipo de diseño o edítelo.
3. Obtenga su código.
4. Intégrelo en su web.
Los titulares se actualizarán en tiempo real, manteniendo siempre informados a los lectores de su página.
Ø Hiperenlaces: La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlaces es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc.
Para incluir un Hiperenlaces se utiliza la directiva . El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el ratón sobre el, se realzará la función de hiperenlaces indicada por la directiva . Si el Hiperenlaces esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlaces si lo pulsamos.
5. imágenes: Las imágenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la embellecen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de imágenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imágenes en
La segunda es que el visitante haya deshabilitado la carga automática de imágenes lo cual podría ser muy perjudicial si hemos escogido imágenes para explicación de algo, o como link, etc.
En cuanto a las imágenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado así por sus siglas en inglés, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarrolló, el Joint Photograph Expert Group).
El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imágenes entre sí a través de
Por otro lado, el formato JPG fue creado especialmente para almacenar imágenes con calidad fotográfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores más extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es más pesado, ya que posee un mecanismo de compresión que reduce el tamaño del archivo mediante cierta pérdida en la información.
Como regla general, conviene utilizar archivos con extensión JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un GIF.
