Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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.