1

Índice

1.1. Internet y la World Wide Web .......................................................................................... 2 1.2. Los servidores Web Navegadores y editores de páginas Web .................................... 6 1.3. Tecnologías del lado del cliente y del lado del servidor ............................................. 12 1.4. Principales lenguajes de edición de páginas Web ....................................................... 14 1.5. Contenido estático vs contenido dinámico ................................................................... 18 1.6. El concepto de sitio Web.................................................................................................. 20 1.7. Publicar el Sitio en Internet. ........................................................................................... 21

2

Unidad I

Conceptos Básicos - Introducción al Diseño y Desarrollo Web Objetivo Al final de esta unidad, habrás desarrollado los conocimientos y habilidades para

comprender los siguientes conceptos:

• Origen de Internet y la Web. Navegadores, http, Servidores Web.

• Fundamentos de la Web y su relación con Internet. Tecnologías del lado del cliente y del lado del servidor.

• Planificación del sitio Web a desarrollar. Páginas estáticas y dinámicas.

• Proceso de desarrollo. Distintos tipos de herramientas y recursos generales para el desarrollo de sitios Web.

• Estructura de una página Web. Sitios local y remoto.

3

1.1. Internet y la World Wide Web

Introducción a Internet

La definición más conocida de Internet dice que es una red de redes. Pero esto significa

prácticamente nada para quien recién se inicia, quien -siguiendo al pie de la letra la definición-

podría llegar a pensar que Internet es una maraña de cables entrelazados. Nada más lejos de

la realidad.

Supongamos que su computadora es un teléfono. Entonces levanta el tubo, disca un

número y se comunica con alguien. Puede enviar información (hablar) o recibir información

(escuchar). Este es el modo en que funciona Internet.

No se introducen número de teléfono sino direcciones formadas por números letras. Estas

direcciones -su nombre técnico es URL- comunican a otras computadoras que ofrecen

información. Por ejemplo si escribe la dirección www.lanacion.com.ar se comunicará con el

periódico La Nación de la República Argentina.

Una diferencia fundamental de Internet con el teléfono es que se puede transmitir casi

cualquier tipo de información. Puede ser un texto como el que está leyendo, una fotografía, un

sonido, etc.

Cuando se habla de redes -entonces- se está haciendo referencia a la posibilidad de que

una computadora se comunique con otra, y esta a su vez con otra más, y así prácticamente

hasta el infinito.

Un poco de historia para posicionarnos. Internet, la red de redes, ya ha cumplido

más de 30 años de existencia. Nació como un proyecto del Departamento de Defensa

de los Estados Unidos (USA DoD) y fue diseñada como un sistema descentralizado, o

sea, que no este centralizado en un solo lugar geográfico. Esto es, para que siga

funcionando aún en caso de un ataque nuclear, temor muy de moda por aquellos tiempos.

Comprende un conjunto de ‘protocolos’ de transporte de datos, llamados TCP/IP:

Transport Control Protocol/Internet Protocol (Protocolo de Transporte de Datos/Protocolo

Entre Redes).

Esto es, el protocolo es una serie de ‘convenciones’, previamente acordadas, para

realizar algo en común. Un protocolo de transporte de datos indica la forma en que se

enviará información, cómo se dará la dirección de llegada y la de origen, cómo se

confirmará el arribo, qué se hará si no llega a destino, etc., etc.

Sobre la base de esos protocolos que regulan la interacción y comunicación de la red de

computadoras conectadas en toda la extensión del globo terráqueo que se ha

denominado Internet, se fueron creando diversos servicios, algunos muy conocidos: el

correo electrónico, el chat, la web, entre otros. Todos los servicios que ofrece Internet son

llevados a cabo por miles de computadoras que están permanentemente encendidas y

conectadas a Internet, esperando que los usuarios les soliciten los servicios y sirviéndolos

4

una vez solicitados. Como decimos, hay servidores para todo, los que ofrecen correo

electrónico, otros hacen posible nuestras conversaciones por chat, otros la transferencia

de archivos o la visita a las páginas web y así hasta completar la lista extensa de servicios

de Internet.

También existe otro tipo de servidores que son los que se encargan de proveer el acceso

a Internet a nuestras computadoras, éstos son los proveedores de acceso a Internet o,

por sus siglas en ingles, ISP (Internet Service Provider), los servidores a los que nos

conectamos con nuestros módems. Los hay tanto pagos (Arnet, Infovía, etc.), como

gratuitos (Datafull, Yahoo!, FullZero, etc.).

Cuando haces una llamada con el módem a los servidores que te proveen el acceso

entras a formar parte de la gran red Internet y mientras mantengas la conexión

podrás acceder a todos los servidores repartidos por todo el mundo y solicitarles sus

servicios.

En el momento que pedimos un servicio de Internet nos convertimos en ‘clientes’ del

servidor que lo ofrece, de ahí la denominación de arquitectura ‘Cliente- Servidor’. Para

solicitar uno de estos servicios es necesario contar con un programa especial que suele ser

distinto para cada uno de los servicios de Internet. Por ejemplo, para acceder al correo

electrónico utilizamos Outlook Express, Eudora u otro, para acceder a la web utilizamos Mozilla

FireFox o Internet Explorer, para entrar en el chat utilizamos un programa como MSN,

GoogleTalk, o para realizar una transferencia de archivos podríamos hacer uso de

CuteFTP o WS-FTP. Todos estos programas que nos dan acceso a los servicios de Internet se

denominan ‘clientes’, como se puede ver, para ser el cliente de un servidor de Internet

necesitamos un programa cliente del servicio al que intentamos acceder.

WWW - La Web es un servicio de Internet

Toda esta introducción sirve para que nos demos cuenta que Internet es un conjunto de

servicios y la World Wide Web, que se podría traducir más o menos como “La Telaraña de

Amplitud Mundial” o “La Gran Telaraña Mundial” (de aquí en adelante la llamaremos simplemente

‘la Web’), que es lo que tratamos de analizar, es un servicio mas de ellos. Probablemente sea

el más popular en estos momentos y a veces parezca que Internet se limita a la Web,

como en los anuncios comerciales, donde casi siempre nos venden portales o productos de la

Web como si éstos fueran lo único que se puede hacer en Internet.

La Web es entonces un servicio que inicialmente fue creado para permitir el acceso

a documentos de información (en formato electrónico), hoy en día llamados ‘páginas

Web’, interrelacionados mucho más complejamente que la simple secuencia de una página

tras otra de un tradicional libro. Por lo que consiste en un inmenso conjunto de páginas

conectadas unas a otras por un sistema de ‘hiperenlaces’ o ‘vínculos’.

El concepto de ‘la Web’ no es que las computadoras o las redes están conectadas formando

una tela de araña (esto es en realidad Internet) sino que la ‘información’ está

conectada formando una tela de araña. Este es el concepto de los ‘hiperenlaces’ (Hyperlink)

o simplemente enlaces.

El sistema con el que está construido la Web se llama ‘hipertexto’ y es un entramado de

páginas conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como

la ayuda de Windows y son muy fáciles de utilizar y ayudan a encontrar lo que buscamos

rápidamente. Los enlaces en una página Web, o en la ayuda de Windows, se pueden identificar

5

porque están casi siempre subrayados y en un color diferente al resto del texto. Cuando

movemos el puntero del mouse sobre ellos, el mismo se transforma en una ‘manito’. Esto nos

indica que podemos hacer click ahí y obtendremos la información relacionada al enlace.

La Web no solo se limita a presentar textos y enlaces, sino que también puede ofrecernos

imágenes, videos, sonido y todo tipo de presentaciones, llegando a ser el servicio más rico en

medios que tiene Internet. Por esta razón, para referirnos al sistema que implementa ‘la Web’

(hipertexto), se ha acuñado un nuevo término que es ‘hipermedia’, haciendo referencia a que

‘la Web’ permite contenidos multimedia.

Multimedia, por si alguno no lo sabe, hace referencia a muchos medios, solamente quiere

decir que se están utilizando para presentar información muchos medios, como son el vídeo, el

audio o realidad virtual. Cuando nos venden una computadora multimedia, nos venden una

computadora que está construida para poder trabajar con muchos medios, como imagen,

sonido, animación, video, 3D, etc.

¿Cómo es una Web por dentro?

Para poder visualizar una página Web necesitamos un navegador, o cliente Web, estas

páginas parecen una sola entidad, pero no es así, están compuesta por multitud de diferentes

archivos separados, como son las imágenes por un lado, los posibles vídeos por otro y lo más

importante, el código fuente que dice donde colocar cada texto, cada imagen o cada video y la

forma que tendrán estos al ser colocados en la página. No es problema que las páginas Web

estén compuestas por tantos elementos, ya que rápidamente veremos que su organización es

fácil y que no se nos van a perder o escapar ninguno.

Como hemos podido imaginar y a modo de resumen, para publicar en Internet

necesitaremos construir unos documentos hipertexto, o hipermedia, con sus correspondientes

archivos de imagen o video y colocarlos en unas computadoras que se denominan servidores

de páginas Web. Pero esto es algo que vamos a tratar de explicar poco a poco en las

siguientes unidades.

Aunque signifique adelantarse a los acontecimientos, es interesante señalar que, con una

simple acción podemos ver el código fuente de las páginas, es decir, cómo están hechas por

dentro. Para ello en el navegador: Internet Explorer se ha de seleccionar del menú Ver �

Código fuente y en Mozilla Firefox se ha de seleccionar Ver � Origen de la página.

Cabe destacar que para realizar el trabajo de desarrollo de un sitio Web, no es necesario

estar conectado a Internet. De este modo no se estaría pagando el servicio de acceso y, en el

caso de utilizar un módem telefónico, tampoco la tarifa de teléfono. Las páginas se pueden

crear y visualizar sin estar conectados, o como comúnmente se denomina en la jerga, estando

‘off- line’.

Las páginas Web están compuestas por el archivo fuente de la misma y los archivos de

imágenes, video y otros objetos que incluyan.

6

La Home Page

Como mencionamos, la información que aparece en ‘la Web’ está contenida en unos

documentos llamados ‘páginas Web’. La primer página, o conjunto de páginas, que se

visualizan al acceder a un sitio se le llama ‘Home Page’, o página de inicio, y es el punto de

partida hacia el resto de la información contenida en el sitio.

En general, la ‘home page’ sólo es una de un conjunto de páginas con información

relacionada que conforman un sitio (o site), es su puerta de entrada.

Se llama ‘home page’ a la primer página que se visualiza al acceder a un sitio web

URL

Al igual que una casa u oficina, cada página Web también posee una dirección de cómo

localizarla. Esta dirección es la URL (Uniform Resource Locator) y gracias a ella todo el mundo

puede acceder a la página Web directamente.

Tomemos como ejemplo la URL ficticia que podría tener este documento que estas leyendo

si estuviese publicado en la Web. La URL es los que introducimos en el campo de ‘dirección’ de

los navegadores de Internet. En este caso sería: El ‘nombre de dominio’ siempre tiene dos o

más partes separadas por puntos, y normalmente consisten en el nombre de la organización,

el tipo de organización y el país al que pertenece.

De los que hacen referencia al tipo de organización podemos encontrar sufijos como:

.com – referido a un sitio perteneciente a una organización comercial

.edu - referido a un sitio perteneciente a una entidad educativa

.org - referido a un sitio perteneciente a una organización sin fines de lucro entre otros.

En lo que respecta a la ubicación geográfica se pueden mencionar:

.ar – referido a un sitio de Argentina

.us - referido a un sitio de Estados Unidos

.br - referido a un sitio de Brasil

.mx - referido a un sitio de México entre otros.

Debemos tener en cuenta que las URL ‘no contienen espacios en blanco’.

Al acceder a un sitio por su ‘nombre de dominio’ nos presentará la ‘home page’ que tenga

configurada, pero también es posible acceder a una página específica si tenés la dirección,

tales como:

‘http://www.miservidor.com.ar’

‘http://www.miservidor.com.ar/desarrolloweb/introduccion.html’

Indica que se quiere visualizar una página Web Nombre del dominio en donde encontraré la página deseada

7

Esto demuestra que hay varias formas de acceder a las páginas de un sitio. Si queremos, y

si tenemos la dirección o URL, podemos saltar la ‘home page’ y visualizar directamente la

página deseada.

1.2. Los servidores Web Navegadores y editores de páginas Web

Como ya dijimos para ver una página web necesitamos un navegador, aplicación que debe

estar instalada en nuestra PC. Pero veamos una definición más técnica.

Un navegador web o explorador web (del inglés, navigator o browser) es una aplicación

software que permite al usuario recuperar y visualizar documentos de hipertexto, comúnmente

descritos en HTML, desde servidores web de todo el mundo a través de Internet. Cualquier

navegador actual permite mostrar o ejecutar gráficos, secuencias de vídeo, sonido,

animaciones y programas diversos además del texto y los hipervínculos o enlaces.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de

texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar

ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier

otro dispositivo que este conectado a la computadora del usuario o a través de Internet, y que

tenga los recursos necesarios para la transmisión de los documentos (un software servidor

web).

La comunicación entre el servidor web y el navegador se realiza mediante el protocolo

HTTP.

Existe una lista detallada de navegadores, algunos de ellos son: • Amaya del W3C • Internet Explorer

o Avant Browser o Maxthon o G-Browser

• Mozilla (SeaMonkey) y derivados: o Mozilla Firefox o Beonex o Navegador web IBM para OS/2 o Aphrodite o Flock o Galeon para GNOME o Epiphany para GNOME o Skipstone o K-Meleon para Windows o Camino para Mac OS X

• Netscape Navigator (hasta la versión 4.xx) • Opera • Konqueror (KHTML)

o Abrowse • Safari • iCab • OmniWeb • Dillo • IBrowse • AWeb • Voyager • Espial Escape • HotJava

8

Navegadores web basados en texto: • Links • Lynx • Netrik • w3m

Windows Internet Explorer (también conocido antes como Internet Explorer, IE o MSIE)

es un navegador de Internet producido por Microsoft para su plataforma Windows y más tarde

para Apple Macintosh y Solaris Unix. Las versiones para estos dos últimos sistemas fueron

descontinuadas en el 2006 y 2002 respectivamente.

Fue creado en 1995 tras la adquisición por Microsoft del código fuente de Mosaic, un

navegador desarrollado por Spyglass, siendo rebautizado entonces como Internet Explorer.

Actualmente es el navegador de Internet más popular y más utilizado en el mundo, rebasando

en gran medida a las competencias existentes.

Mozilla Firefox es un navegador de Internet, con interfaz gráfica de usuario desarrollado

por la Corporación Mozilla y un gran número de voluntarios externos. Firefox, oficialmente

abreviado como Fx o fx, y comúnmente como FF, comenzó como un derivado del Mozilla

Application Suite, que terminó por reemplazarlo como el producto bandera del proyecto

Mozilla, bajo la dirección de la Fundación Mozilla. Fue la evolución del Netscape Navegator en

su última versión.

Mozilla Firefox es un navegador web multiplataforma, que está disponible en versiones para

Microsoft Windows, Mac OS X y Linux. Sin embargo el código ha sido portado por terceros a

otros sistemas operativos como FreeBSD, OS/2, Solaris, SkyOS, BeOS y más recientemente,

Windows XP Professional x64 Edition.

El código fuente de Firefox está disponible libremente bajo la triple licencia de Mozilla como

un programa libre y de código abierto. La versión estable actual es la 2.0.0.3, que fue liberada

el 20 de marzo de 2007.

9

¿Qué necesitas para empezar?

Para ponerte a diseñar páginas Web sencillas hace falta realmente pocas herramientas. En

la mayoría de los equipos que se instalan con Windows 98/Me/XP se encuentran todos los

materiales necesarios para empezar sin necesidad de obtener nuevos programas.

En concreto, las herramientas ‘mínimas’ son un ‘editor de textos’ y/o un ‘editor de páginas

Web’ como el Front Page o el Composer de Mozilla, o Dreamweaver de Macromedia , con los

que programaremos nuestras páginas, y un cliente Web (navegador) como Internet Explorer o

FireFox, con los que las visualizaremos. Como una computadora con Windows por defecto

siempre tiene instalado el Block de Notas y también el Internet Explorer se puede empezar a

construir una página Web sin más requerimientos de lo que ya tenemos.

En otros sistemas distintos de Windows será también muy fácil obtener un editor de textos

sencillo y un navegador con el que ver las páginas que vamos a crear, si es que no están

instalados ya.

Editores de HTML

Para las personas que no deseen complicarse la vida con el ‘lenguaje HTML’, porque no

tengan tiempo de aprenderlo o porque no sientan ganas de hacerlo, hay una posibilidad

distinta a programar directamente ‘a mano’ el HTML en texto. Se puede utilizar un tipo de

programas que nos permiten diseñar la página como si estuviéramos escribiendo un

documento con un procesador de textos como Microsoft Word. En este caso es el editor de

HTML el encargado de arreglárselas con el lenguaje y programar internamente la página con el

‘código HTML’ según lo que nosotros estemos diseñando.

Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación de

documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de

texto con coloreado de sintaxis, hasta entornos WYSIWYG en los que de manera visual se

pueden colocar distintos elementos sobre una vista previa de la página, encargándose el

programa de generar el documento HTML.

Con el ‘editor HTML’ podemos colocar imágenes, definir estilos, utilizar negritas o cursivas,

etc., sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor

el que conoce estas etiquetas y las utiliza convenientemente.

‘WYSIWYG’ (What You See Is What You Get, o Lo que ves es lo que obtenés) porque

cuando trabajas con ellos lo que ves que estás creando con el editor es lo que obtienes luego

cuando grabas la página y la visualizas en el navegador.

No hay razón de unirse a un bando, por un lado las personas que prefieren crear las páginas

programando el HTML y por otro las personas que utilizan editores HTML. Muchas veces es

conveniente retocar manualmente el código generado por los editores. O bien, te puede llegar

a interesar seguir con el aprendizaje del uso de las tecnologías Web y aprender a crear páginas

dinámicas con algún lenguaje de programación, lo que te requerirá el conocimiento de HTML.

Algunas diferencias entre hacerlo de un modo u otro son las siguientes:

10

Cuando una persona profundiza en el diseño de páginas Web llega un momento en el que le

hace falta conocer las dos maneras de construir páginas Web. A los programadores en HTML

les hará falta aprender un editor porque eso aumentará su productividad y los que utilizan

editores necesitarán aprender un poco de HTML para arreglar alguna cosa que el editor ha

hecho mal o realizar alguna tarea que el editor no puede hacer.

Existen multitud de editores de HTML ‘WYSIWYG’, es importante elegir un editor bueno

porque nuestros trabajos van a depender de sus resultados.

Ejemplos claros de editores de páginas web son NVU, Mozilla Composer, Amaya,

Dreamweaver o Microsoft Frontpage, entre otros.

Microsoft FrontPage es un editor HTML WYSIWYG y herramienta de administración de páginas web de Microsoft para el sistema operativo Windows. Forma parte de la suite Microsoft Office. Muchos consideran que el código HTML generado por esta aplicación es un poco descuidado y muchas veces reiterativo, especialmente en versiones antiguas. Como un ejemplo de esto, cabe señalar que la aplicación inserta todavía la etiqueta font, que ya está obsoleta ante W3C.

Antes:

<b>W3C</b>

<font size="+2">El W3C desarrolla estándares Web</font>

Ahora:

<h1>W3C</h1>

<h2>El W3C desarrolla estándares Web</h2>

Otro ejemplo es que posee funciones que SOLO funcionan en Internet Explorer (como los WebBots).

Microsoft ha dejado de producir FrontPage en 2006, y ofrece actualmente dos productos

alternativos, con tecnologías más actualizadas: SharePoint Designer --parte de Microsoft

Office-- y Expression Web. Este último puede considerarse el sucesor directo de FrontPage.

Macromedia Dreamweaver es un editor WYSIWYG de páginas web, creado por

Macromedia(actualmente Adobe Systems). Es el programa de este tipo más utilizado en el

sector del diseño y la programación web, por sus funcionalidades, su integración con otras

herramientas como Macromedia Flash y, recientemente, por su soporte de los estándares del

World Wide Web Consortium. Tiene soporte tanto para edición de imágenes como para

animación a través de su integración con otras herramientas

11

Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la

web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no

validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Se vende como parte de la suite Macromedia Studio, junto con Macromedia Flash,

Macromedia Freehand y Macromedia Fireworks.

La gran base de este editor sobre otros es su gran poder de ampliación y personalización

del mismo, puesto que este programa, sus rutinas (como la de insertar un hipervínculo, una

imagen o añadir un comportamiento) están hechas en Javascript-C lo que le ofrece una gran

flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones

de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello

hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su

gusto.

Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG, sin

embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y

algunos frameworks del lado servidor.

Construir las páginas

Por fin empezamos a introducir el trabajar en una página y vamos a ver algunos ‘consejos

útiles’ para hacerlo bien.

Es el momento en el que nos ponemos manos a la obra. El programar o diseñar las páginas

podrá gustar más o menos que otras acciones como planearlas o publicarlas más tarde, pero

no cabe duda que es el momento más excitante porque nuestros deseos y nuestras ideas

empiezan a concretarse en los resultados que esperábamos conseguir y nuestro sitio Web

comienza a tomar forma.

Para ahorrarnos errores cuando hagamos las páginas podemos seguir una serie de ‘consejos

útiles’. De todas formas, a medida que avancemos, iremos resaltando estos y otros consejos

importantes.

• No utilizar ‘espacios en blanco’ en los nombres de los archivos de las páginas o las

imágenes. Tampoco utilizar ‘caracteres o letras’ que no pertenezcan al conjunto de caracteres

norteamericano, como la ñ o los acentos.

• Tener cuidado con las ‘mayúsculas’ y las ‘minúsculas’ en los nombres de los archivos que

tratamos. Si las utilizamos equivocadamente la página podrá funcionar en nuestro Windows

(por que le dan igual las mayúsculas y las minúsculas), pero al subirla a un servidor Linux o

Unix, que son los que mayormente ofrecen servidores Web, podría ser que no funcionase

(porque estos sistemas distinguen entre mayúsculas y minúsculas, MiPagina.htm va a ser

referencia a una página distinta que mipagina.htm).

• Enterarse de cómo funciona el documento por defecto, que se explicará más adelante.

• Trabajar siempre con una extensión del archivo HTML específica. No mezclar en un

mismo proyecto páginas con extensión .html y .htm.

12

Elementos de una página Web

El diseño de una página Web tiene un solo propósito: dirigir la atención del ojo del lector

hacia un punto en particular. No basta con que sea una página bonita.

Debemos ser analíticos y decidir qué mensajes debe obtener el usuario de una página en

particular.

Si nuestro objetivo es presentar una simple oración, podemos simplemente hacer uso de

texto, y así lo haremos en nuestro primer paso por ser este el más sencillo. Pero el texto no es

el único recurso del que disponemos al momento de comunicar un mensaje en una página

Web, también disponemos de varios elementos que seguramente al presentarlos te serán

familiares si es que has navegado un poco por la Web.

Texto

Es el recurso más utilizado. Como comentamos anteriormente, el objetivo es comunicar un

mensaje, y la forma más fácil de lograrlo siempre va a ser simplemente ‘escribirlo’.

Gráficos e imágenes

Una página con solo texto puede no resultar muy llamativa, por lo que es muy probable que

quieras incluir algunas imágenes en ella. Pero siempre con el objetivo de lograr una mejor

comunicación, no es bueno sobrecargar una página con imágenes. Por lo que si una imagen o

fotografía no ayuda a la comunicación o transmisión del mensaje, es mejor no utilizarla. Que el

famoso refrán ‘Una imagen vale mil palabras’ no se convierta en ‘Por una imagen, mil palabras

más’.

Hiperenlaces o simplemente enlaces

No creo que el objetivo de un sitio Web sea la simple presentación de una sola ‘home page’

y nada más. Hay que relacionar la información contenida en las diferentes páginas (como en el

árbol del sitio) y la forma de hacerlo es mediante los ‘Hiperenlaces’ o simplemente ‘enlaces’.

Este es uno de los principios fundamentales de la Web, los mecanismos de entrelazado de

páginas, son los enlaces los que posibilitan la navegación.

Tablas

Las ‘tablas’ nos proporcionan el medio para agregar ‘estructura vertical y horizontal’ a

nuestras páginas. Van mucho más allá de la utilización que se les da en un procesador de

textos como Word. Por lo que gracias a ellas se puede extender la organización de textos,

imágenes, y otros elementos en una página Web.

Marcos (o Frames)

Los ‘marcos’ ofrecen la posibilidad de dividir una ventana de un navegador de Internet en

distintas áreas de navegación. Estas pueden ser independientes como así también podemos

relacionarlas.

Un claro ejemplo, utilizado por muchos sitios hoy en día, es dividir una ventana en dos

ventanas verticales. Una más angosta, situada a la izquierda, con los enlaces de las diferentes

secciones del sitio (comúnmente llamaba ‘barra de navegación’). Y una más ancha, situada a

la derecha, que permita una mejor presentación de la información. Así cuando el visitante

13

haga un click en un enlace de la ventana izquierda, la información asociada aparecerá en la

ventana de la derecha.

Ya veremos ejemplos de esto cuando lleguemos al tema.

Otros

Existen otros elementos para ser utilizados en circunstancias específicas, tales como: líneas

horizontales, formularios, animaciones vectoriales, videos, Java Applets, etc. De los cuales

algunos veremos y de los otros simplemente haremos solo referencia.

1.3. Tecnologías del lado del cliente y del lado del servidor

El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas en

forma de código HTML fundamentalmente y convertirlas en las páginas que son el resultado de

dicha orden.

Cuando nosotros hacemos clic sobre un enlace hipertexto, en realidad lo que pasa es que

establecemos una petición de un archivo HTML residente en el servidor el cual es enviado e

interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son

reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un

formato comprensible para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no

sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente

incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el

navegador y no necesitan un pretratamiento.

14

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por

ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite

que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por

regla general, los servidores que aceptan páginas con scripts de lado servidor son en su

mayoría de pago o sus prestaciones son muy limitadas. Inversamente, un lenguaje de lado

servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de

un navegador a otro o respecto a las versiones del mismo.

Lenguajes web de cliente Javascript Visual Basic Script DHTML

CSS

Applets de Java

Lenguajes web de servidor CGI, Common Gateway Interface

ASP, Active Server Pages

PHP, Hypertext Preprocesor JSP, Java Server Pages

15

1.4. Principales lenguajes de edición de páginas Web

HTML

¿Qué es HTML?

Las páginas Web están escritas siguiendo el lenguaje ‘HTML’ (HyperText Markup Language,

o Lenguaje de Marcación de Hipertextos), el cual se mantiene en constante desarrollo a fin de

atender todas las demandas de crecimiento de la web.

Se representa con texto puro respetando una estructura que define su presentación y

contenido. Básicamente el lenguaje define un conjunto de elementos u objetos representados

por ‘etiquetas’ (o Tags) que sirven para definir la forma en la que presentar el texto y otros

elementos de la página.

El HTML se creó en un principio con objetivos de divulgar ‘contenidos’. No se pensó que la

Web llegara a ser un área de ocio con carácter ‘multimedia’, de modo que, el HTML se creó sin

dar respuesta a todos los posibles usos que se le iba a dar y a todos los públicos que lo

utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, se han ido

incorporando modificaciones con el tiempo, estos son los ‘estándares del HTML’. Numerosos

estándares se han presentado ya. El HTML 4.01 es la revisión del estándar 4.0 publicado en

1997, y es el último estándar en agosto de 2002. Aunque hoy en día ya están trabajando en

un nuevo estándar llamado XHTML para extender su uso a un más amplio conjunto de

dispositivos de visualización: televisores, teléfonos celulares, dispositivos de mano, visores en

automóviles, etc.

El HTML es un lenguaje de programación muy fácil de aprender, lo que permite que

cualquier persona, aunque no haya programado en la vida pueda enfrentarse a la tarea de

crear una Web. HTML es fácil y en poco tiempo se puede dominar el lenguaje. Si bien uno

puede escribir y editar el código HTML ‘a mano’ con un editor de texto, también se pueden

utilizar muchos editores del lenguaje, como Microsoft FrontPage o Netscape Composer,

capaces de crear documentos en lenguaje HTML sin recurrir al lenguaje mismo, de esto se

encarga el programa. Ya veremos más de estos editores más adelante en la sección ‘Editores

de HTML’.

Como mencionamos, este lenguaje se representa finalmente en un documento de texto. Así

pues, el archivo donde está contenido el código HTML es un archivo de texto, con una

peculiaridad, que tiene extensión .html o .htm (es indiferente cuál utilizar). De modo que

cuando programemos en HTML, ya sea que lo hagamos con un editor de textos o no,

guardaremos nuestros trabajos en archivos con extensión .html, por ejemplo mipagina.html

Por adelantar un poco cómo se utiliza el HTML te contamos que el lenguaje consta de

‘etiquetas’ que tienen esta forma:

<Nombre de la Etiqueta>, ejemplo:<B> o <P>.

Cada etiqueta significa algo específico, por ejemplo:

<B> significa que se escriba en negrita (Bold),

<P> significa un párrafo,

<TITLE> especifica el título de la página, etc.

Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir

de ese punto la etiqueta no debe de afectar más.

16

Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita.

Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o

estilo que queremos aplicar a nuestro documento.

Ejemplo de un párrafo de texto con una parte en negritas.

En html:

<P>Este párrafo tiene <B>esta parte en negrita.</B></P>.

Al visualizarlo obtendríamos:

Este párrafo tiene esta parte en negrita.

Ejemplo de un documento de texto que define una página Web completa, creado con el Bloc

de Notas de Windows:

La misma página visualizada con el navegador Microsoft Internet Explorer:

Estructura de un documento HTML

Mencionamos que HTML se escribe utilizando ‘etiquetas’, esto es, instrucciones escritas

entre paréntesis angulares (< >). Pero como la unidad de información en la Web es una

‘página’ (o documento HTML), esta posee una estructura determinada que nos permite una

organización del documento.

17

Hay tres etiquetas fundamentales que son las que definen la estructura del documento

HTML.

• La etiqueta <HTML> es obligatoria y define el inicio y el final del documento. Dentro de

este documento, podemos asimismo distinguir dos partes principales:

• El ‘encabezado’, delimitado por las etiquetas <HEAD> y </HEAD>, donde se situarán

elementos de índole informativa, tales como: el título de la página.

• El ‘cuerpo’, entre las etiquetas <BODY> y </BODY>, que será donde colocaremos

nuestro texto e imágenes delimitados a su vez por otros elementos de estructura, como las

tablas. En fin, aquí irá contenido el mensaje a transmitir al visitante.

El resultado es un documento con la siguiente estructura:

<HTML>

<HEAD>

<TITLE>Título de la pagina</TITLE>

</HEAD>

<BODY>

<P>Un texto simple en el cuerpo</P>

</BODY>

</HTML>

JavaScript

Javascript es un lenguaje de programación utilizado para crear pequeños programitas

encargados de realizar acciones dentro del ámbito de una página web. Se trata de un lenguaje

de programación del lado del cliente, porque es el navegador el que soporta la carga de

procesamiento. Su uso se basa fundamentalmente en la creación de efectos especiales en las

páginas y la definición de interactividades con el usuario.

Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y

</script>. por ejemplo, si en el código de una página Web incluimos la sentencia

<script>

window.alert("Bienvenido a mi sitio web. Gracias...")

</script>

al abrir la página con el navegador se nos mostrará una ventana de bienvenida.

VBScript

Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con

Internet Explorer. Es por ello que su utilización está desaconsejada a favor de Javascript.

Sección de encabezado.

Sección de cuerpo.

Define el inicio del documento HTML

Fin del documento

18

Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su

sintaxis como la manera de trabajar están muy inspiradas en él. Sin embargo, no todo lo que

se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este último es

una versión reducida del primero.

El modo de funcionamiento de Visual Basic Script para construir efectos especiales en

páginas web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder

también son los mismos: el navegador.

CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta.

Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo

hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes,

tipos de letra, fondos, colores... Incluso podemos definir nuestros propios estilos en un archivo

externo a nuestras páginas; así, si en algún momento queremos cambiar alguno de ellos,

automáticamente se nos actualizarán todas las páginas vinculadas de nuestro sitio.

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

1.5. Contenido estático vs contenido dinámico

En la web podemos encontrar, o construir, dos tipos de páginas:

• Las que se presentan sin movimiento y sin funcionalidades más allá de los enlaces.

• Las páginas que tienen efectos especiales y en las que podemos interactuar.

Las primeras páginas son las que denominamos páginas estáticas, se construyen con el

lenguaje HTML, que no permite grandes facilidades para crear efectos ni funcionalidades más

allá de los enlaces.

Estas páginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a los

desarrolladores como a los visitantes, ya que sólo se pueden presentar textos planos

acompañados de imágenes y a lo sumo contenidos multimedia como pueden ser videos o

sonidos.

El segundo tipo de páginas se denomina página dinámica. Una página es dinámica cuando

se incluye cualquier efecto especial o funcionalidad y para ello es necesario utilizar otros

lenguajes de programación, aparte del simple HTML.

Mientras que las páginas estáticas todo el mundo se las puede imaginar y no merecen más

explicaciones, las páginas dinámicas son más complejas y versátiles. Para aclarar este

concepto, veremos con detalle a continuación qué son las páginas dinámicas.

Páginas dinámicas

Una página es dinámica cuando realiza efectos especiales o implementa alguna

funcionalidad o interactividad.

Además, hemos visto que para programar una página dinámica necesitaremos otros

lenguajes aparte del HTML. Sin embargo, nunca hay que olvidarse del HTML, ya que éste es la

19

base del desarrollo web: generalmente al escribir una página dinámica el código de los otros

lenguajes de programación se incluye embebido dentro del mismo código HTML.

Una razón por la que construiremos una página dinámica es la simple vistosidad que pueden

alcanzar los trabajos, ya que podemos hacer presentaciones más entretenidas de las que se

consiguen utilizando únicamente HTML. Pero vamos a ver con calma algunas razones menos

obvias pero más importantes.

Supongamos que hemos decidido realizar un portal de un canal televisivo donde una de las

informaciones principales a proveer podría ser la programación semanal. Efectivamente, esta

información suele ser dada por las televisiones con meses de antelación y podría ser muy

fácilmente almacenada en una base de datos. Si trabajásemos con páginas HTML, tendríamos

que construir una página independiente para cada semana en la cual introduciríamos "a mano"

cada uno de los programas de cada una de las cadenas. Asimismo, cada semana nos

tendríamos que acordar de descolgar la página de la semana pasada y colgar la de la actual.

Todo esto podría ser fácilmente resuelto mediante páginas dinámicas. En este caso, lo que

haríamos sería crear un programa (solo uno) que se encargaría de recoger de la base de datos

de la programación aquellos programas que son retransmitidos en las fechas que nos interesan

y de confeccionar una página donde aparecerían ordenados por cadena y por hora de

retransmisión. De este modo, podemos automatizar un proceso y desentendernos de un

aspecto de la página por unos meses.

Podemos hacer una clasificación a las páginas dinámicas en función de dónde se lleva a

cabo el procesamiento de la página, es decir, el computador que cargará con el peso adicional

que supone que la página realice efectos y funcionalidades.

Páginas dinámicas de cliente

Son las páginas dinámicas que se procesan en el cliente. En estas páginas toda la

carga de procesamiento de los efectos y funcionalidades la soporta el navegador.

Usos típicos de las páginas de cliente son efectos especiales para webs como rollovers o

control de ventanas, presentaciones en las que se pueden mover objetos por la página, control

de formularios, cálculos, etc.

El código necesario para crear los efectos y funcionalidades se incluye dentro del mismo

archivo HTML y es llamado SCRIPT. Cuando una página HTML contiene scripts de cliente, el

navegador se encarga de interpretarlos y ejecutarlos para realizar los efectos y

funcionalidades.

Las páginas dinámicas de cliente se escriben en dos lenguajes de programación

principalmente: Javascript y Visual Basic Script (VBScript).

Las páginas del cliente son muy dependientes del sistema donde se están ejecutando y esa

es su principal desventaja, ya que cada navegador tiene sus propias características, incluso

cada versión, y lo que puede funcionar en un navegador puede no funcionar en otro.

Como ventaja se puede decir que estas páginas descargan al servidor algunos trabajos,

ofrecen respuestas inmediatas a las acciones del usuario y permiten la utilización de algunos

recursos de la máquina local.

20

Páginas dinámicas de servidor

Podemos hablar también de páginas dinámicas del servidor, que son reconocidas,

interpretadas y ejecutadas por el propio servidor.

Las páginas del servidor son útiles en muchas ocasiones. Con ellas se puede hacer todo tipo

de aplicaciones web. Desde agendas a foros, sistemas de documentación, estadísticas, juegos,

chats, etc. Son especialmente útiles en trabajos que se tiene que acceder a información

centralizada, situada en una base de datos en el servidor, y cuando por razones de seguridad

los cálculos no se pueden realizar en el ordenador del usuario.

Es importante destacar que las páginas dinámicas de servidor son necesarias porque para

hacer la mayoría de las aplicaciones web se debe tener acceso a muchos recursos externos al

ordenador del cliente, principalmente bases de datos alojadas en servidores de Internet. Un

caso claro es un banco: no tiene ningún sentido que el cliente tenga acceso a toda la base de

datos, sólo a la información que le concierne.

Las páginas dinámicas del servidor se suelen escribir en el mismo archivo HTML, mezclado

con el código HTML, al igual que ocurría en las páginas del cliente. Cuando una página es

solicitada por parte de un cliente, el servidor ejecuta los scripts y se genera una página

resultado, que solamente contiene código HTML. Este resultado final es el que se envía al

cliente y puede ser interpretado sin lugar a errores ni incompatibilidades, puesto que sólo

contiene HTML.

Luego es el servidor el que maneja toda la información de las bases de datos y cualquier

otro recurso, como imágenes o servidores de correo y luego envía al cliente una página web

con los resultados de todas las operaciones.

Para escribir páginas dinámicas de servidor existen varios lenguajes, que veremos con

detenimiento más adelante. Common Gateway Interface (CGI) comúnmente escritos en Perl,

Active Server Pages (ASP), Hipertext Preprocesor (PHP), y Java Server Pages (JSP).

Las ventajas de este tipo de programación son que el cliente no puede ver los scripts, ya

que se ejecutan y transforman en HTML antes de enviarlos. Además son independientes del

navegador del usuario, ya que el código que reciben es HTML fácilmente interpretable.

Como desventajas se puede señalar que será necesario un servidor más potente y con más

capacidades que el necesario para las páginas de cliente. Además, estos servidores podrán

soportar menos usuarios concurrentes, porque se requerirá más tiempo de procesamiento para

cada uno.

1.6. El concepto de sitio Web

El concepto de sitio Web hace referencia a un conjunto de documentos electrónicos que

constituyen un "paquete" informacional. La temática que puede abarcar es ilimitada y la

cantidad de información que se puede ofrecer tampoco tiene límites en cuanto tal.

Un sitio Web está formado por un conjunto de páginas Web. En analogía, un sitio Web es,

por ejemplo, una revista, mientras que una página Web es una de las páginas que constituyen

dicha revista.

Cualquier sitio Web publicado en Internet puede ser visto desde cualquier parte del mundo.

Las posibilidades que esto ofrece son inimaginables. Los propósitos para los que nos podemos

21

servir de Internet y las tecnologías de la información en general vienen a cubrir todo el

espectro de propósitos, ya sea para fines personales, de ocio, académicos, laborales,

empresariales, etc. Su gran potencialidad dependerá pues de lo inteligentemente que

empleemos dicha tecnología.

La creación de un sitio Web es algo tan sencillo o tan complicado como manejar un

programa informático más. Lo que hará de una creación Web una tarea sencilla o complicada

dependerá de los objetivos y propósitos con lo que desarrollemos tal aplicación. De todas

formas, sean cuales sean los propósitos y los objetivos, la creación Web es una tarea que hay

que iniciarla empezando por los "cimientos". Si empezamos por los cimientos con una buena

base y comenzamos ha conseguir nuestros primeros modestos objetivos iremos en el buen

camino. Este es el objetivo de este Curso de Diseño y desarrollo Web.

1.7. Publicar el Sitio en Internet.

Pasos previos

Para publicar un sitio en Internet es aconsejable seguir ciertos pasos, primero una

planificación, luego la construcción del sitio Web y más tarde la publicación y constante

actualización del mismo. A continuación vamos a ver cuáles son los pasos previos que

debemos realizar para que nuestro esfuerzo y resultados sean lo más óptimos posibles, es

decir, vamos a ver cuál es la planificación que hay que hacer antes de poner manos a la obra.

Pensar un tema

Puede ser el más importante de los pasos para la creación de una Web. Hay que elaborar la

‘idea’ y documentarla sobre el tema que has elegido para tu sitio Web en Internet.

Cuando hacemos incluso un sitio personal podemos hablar de algún tema interesante como

nuestro equipo de fútbol o nuestro actor favorito, o de un tema que nos conmueva

profundamente, como el ecologismo o la historia de nuestra ciudad.

También podemos construir un sitio que trate de nuestra familia o de nuestras mascotas, o

todo junto, pero tenemos que tener en cuenta que el valor de este tipo de páginas es mucho

menor y que a los demás usuarios seguramente no les va a interesar. Si deseamos construir

un sitio que algún día sea popular, debemos abordar temas que sean de interés para un grupo

de gente.

Una vez pensado el tema es muy importante documentar lo más posible sobre él, aunque

muchas de las ideas pueden estar en nuestra cabeza, es importante tomar notas, fotografías u

opiniones de otras personas que también conocen el asunto que nos traemos en la cabeza. Es

importante que el material que vamos a publicar tenga el mayor valor posible, así

conseguiremos los mejores resultados.

Estructura del sitio

Es importante también que pensemos en la ‘estructura de los contenidos’ de todo el sitio

antes de ponernos a diseñarlo. En este punto tenemos que pensar sobre varias cosas, como

22

las distintas ‘secciones’ que va a contener el sitio, el ‘árbol’ de las páginas que vamos a tratar,

etc.

La manera de que este punto sea realmente útil, es preparar todas estas ideas sobre el

papel. Con toda la tranquilidad del mundo y con toda la determinación posible vamos a

preparar una serie de diagramas y listados que nos permitan dirigir nuestros esfuerzos de la

manera más óptima. Estos conceptos los iremos introduciendo a lo largo de esta unidad

mientras vayas aprendiendo los distintos elementos disponibles para ello.

Es mejor saber a dónde ir y no cómo, que saber cómo y no dónde

Secciones del sitio

No se puede poner toda la información que deseamos comunicar en una sola página.

Deberíamos pensar en qué ‘secciones’ vamos a poner en el sitio. Una con información general,

otra con información de contacto, otra con una visita gráfica a nuestras instalaciones, últimas

noticias, etc.

Piensa en esto como cuando vas a un autoservicio. No todos los productos existentes se

encuentran en la estantería de la puerta principal de la tienda. Sin embargo, usted puede

recorrer los pasillos, encontrar el pasillo apropiado, buscar el área correcta con productos

similares y finalmente seleccionar el producto. Su sitio Web no debe ser diferente. Con 3 pasos

o "clicks" el cliente debería contar con la información que necesita.

Árbol del sitio

Podemos dibujar en un papel cuáles son las distintas ‘secciones’ del sitio, metidas dentro de

cuadrados y representar también los ‘enlaces’ que hay entre cada sección, mediante líneas que

unen esos cuadrados. Es algo muy simple y divertido de hacer, además podemos tener nuevas

ideas para el sitio a medida que lo vamos dibujando. Ejemplo: planeamos la sección principal

‘Deportes’, que contiene las sub-secciones Fútbol, Tenis y Automovilismo. Así vamos armando

un árbol con las estructuras definidas al clasificar los contenidos de nuestro sitio en secciones,

sub-secciones, subsubsecciones, etc.

Mi Sitio

Familiares Mascotas Música

Abuelos Padres AeroSmith Gatos

23

Esquema de una página

Podemos dibujar en papel también una página del sitio que vamos a construir, para que

veamos dónde colocar la barra de navegación, el logotipo del sitio o la empresa, un posible

banner publicitario, etc. Este ‘esquema’ puede ser también de utilidad a la hora de construir las

páginas y siempre es más fácil diseñar sobre el papel que diseñar directamente con la

computadora.

Estos pasos son opcionales, cualquiera puede ponerse a construir una página nada más al

decidir que desea tener un sitio Web, pero no todo el mundo es capaz de ‘plantearse bien

cuáles son sus objetivos’ y formar un proyecto con todos los puntos desarrollados de

antemano. Los resultados finales son lo más importante y análogamente, como empezar a

construir una casa por el techo, no va a ser lo más positivo para nuestro sitio y los resultados

finales mejorarán si hacemos primero una buena planificación.

Hemos oído muchas veces en nuestra vida el viejo dicho de "bueno, bonito y barato", que

en el caso del diseño Web se puede traducir en "funcional, bonito y navegable", y al igual que

es muy difícil encontrar en la vida real ocasiones en las que se den los tres requisitos del dicho

popular, es difícil también encontrar sitios Web que cumplan los tres requisitos del diseño, y en

esto aporta mucho una planificación previa.

Sitio Local

Ya hemos visto la estructura principal de un documento HTML, pero no debemos olvidar que

dicha información residirá en un archivo. Finalmente cada documento, sea una página, una

imagen u otro elemento, es definido en una computadora como un ‘archivo’ que tiene un

nombre, una extensión, un tamaño, etc. Lo importante de todo esto es que debes entender

que cuando desarrollamos un sitio Web, o sea, un conjunto de páginas Web relacionadas con

un tema en especial (archivos HTML), la imágenes en las que hayamos trabajado para hacerlo

más atractivo y navegable (archivos gif, jpg u otros), y todos los demás elementos que

hayamos incluido residirán en nuestra computadora, al igual que lo hacen nuestros

documentos Word y Excel en la carpeta ‘Mis Documentos’.

Pero, ¿cómo determinar que ese conjunto de archivos constituye un sitio determinado?

Bien, todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco

rígido y dentro de una ‘misma carpeta’. Es indispensable que tengamos todos los archivos bajo

una sola carpeta que denominaremos ‘carpeta raíz’ del sitio local.

Esta estructura de archivos en nuestra computadora se denomina ‘sitio local’ porque al

momento de trabajar en el desarrollo del sitio, lo haremos localmente en nuestra

computadora.

Es aconsejable mantener cierta organización en dicho sitio, tales como:

24

Todos los archivos que compongan tu sitio deben estar almacenados bajo una misma carpeta en tu disco rígido, la ‘carpeta raíz del sitio local’.

Sitio Remoto. Alojar el sitio

Como hemos comentado anteriormente, cualquier servicio que se quiere ofrecer en Internet

tiene que brindarlo un servidor, que es una computadora que se encuentra encendida las 24

horas del día y conectado a Internet también permanentemente. En el caso de los sitios Web,

existen unos servidores que son los responsables de enviar las páginas cuando son solicitadas

por los visitantes en cualquier parte del planeta en cualquier momento del día. Estos

servidores son los ‘servidores Web’. La única manera de que cualquier persona conectada a

Internet pueda visualizar nuestro sitio, es que este esté alojado en un servidor Web conectado

a Internet.

Cuando finalmente terminemos nuestro trabajo y llegue el momento de publicar nuestro

sitio Web en la red, lo que haremos es copiar o ‘subir’ (como se denomina en la jerga) nuestro

‘sitio local’ a estos servidores Web para que estén disponibles a toda los visitantes que lo

quieran navegar.

Una vez que el sitio ha sido subido, en el servidor Web tendremos una estructura de

archivos idéntica a la que tenemos en nuestra computadora. A esta estructura de archivos con

la misma carpeta raíz, subcarpetas, archivos HTML, gif, jpg, etc., en la computadora servidor

Web la denominamos ‘sitio remoto’.

Existen miles de proveedores de alojamiento en todo el mundo. Entre ellos están los que

son ‘gratuitos’ y los ‘pagos’. Obviamente no vamos a obtener las mismas prestaciones entre

ellos. Los que alojan sitios Web gratuitamente muchas veces incluyen sus propagandas en

partes de nuestro sitio o su nombre en la URL. Además, puede resultar que planeemos en un

futuro ampliar el sitio con páginas dinámicas que posean acceso a bases de datos. Esta clase

de servicios la brindan principalmente los proveedores ‘pagos’. Ya veremos más de esto

cuando llegue el momento que tengas que publicar el sitio que hayas desarrollado.

Actualizar el sitio

Lo último por hacer para que nuestro sitio sea exitoso y que los visitantes entren una y otra

vez es mantenerlo siempre bien actualizado. Hay algunos sitios Web que se prestan más que

otros a tener los contenidos actualizados, como son los sitios donde se pueden ver contenidos

25

de actualidad, pero en general todos los sitios pueden mantener secciones con contenidos

actualizables.

Este es un aspecto muy importante, pues si el navegante se percata de que los contenidos

se renuevan constantemente volverá con el tiempo unas cuantas veces. Para dar una imagen

de ‘sitio actualizado’ se pueden utilizar imágenes o textos que resalten donde ponga ‘nuevo’ o

‘new’. También será adecuado poner un área en un sitio visible donde se enumeren las

novedades del sitio, fechas de publicación, etc.

Por lo general habrá que volver siempre sobre este punto para ver qué hay de nuevo y

dónde se puede renovar el contenido del sitio. La Web es ‘muy dinámica’. No es bueno tener

un enlace a un sitio que ya no está más on-line, igual que no es bueno tener una dirección de

correo que ya no existe. Además, si tenemos un área de noticias no será bueno que la noticia

más actual que publiquemos sea de hace tres meses, porque da la impresión de que nunca

renovamos los contenidos.

Si no mantenemos nuestro sitio actualizado el visitante entrará una vez y no lo volverá a

hacerlo nunca más, con lo que habremos perdido una oportunidad de hacernos de un cliente o

de un visitante asiduo. Supongo que habrá quedado claro lo importante de esta tarea, aunque

salta a la vista, creo, para la mayoría de las personas.

Toda tarea de actualización, ya sea de contenidos, imágenes, animaciones, etc., será

llevada a cabo en nuestra computadora. Por lo que hay siempre un paso más a realizar:

publicar las actualizaciones. A esta tarea se la denomina ‘mantener sincronizados los sitios

local y remoto’. Ya veremos cómo hacerlo cuando estudiemos los métodos de publicación.

El ‘sitio remoto’ es una copia idéntica de nuestro ‘sitio local’ pero en el servidor Web. Un

sitio Web que no se mantenga actualizado no seria de mucha utilidad.