Vous êtes sur la page 1sur 28

Lalo antes Gratis!

En nuestro sitio puede obtener, en forma gratuita, un


captulo de cada uno de nuestros libros:

usershop.mpediciones.com

Nuestros libros incluyen guas visuales, explicaciones paso a paso, recuadros complementarios, ejercicios,
glosarios, atajos de teclado y todos los elementos necesarios para asegurar un aprendizaje exitoso y estar
conectado con el mundo de la tecnologa.

Conctese con nosotros!


usershop.mpediciones.com
o por e-mail a: lectores@mpediciones.com

ARGENTINA

(011)4959-5000

CHILE

(2)335-74-77 / 2-335-75-45

ESPAA

(93)635-4120 / 93-635-4121

MEXICO
(55)5350-3099 55-5600-4815

TTULO:

CREACIN DE SITIOS WEB

AUTOR:

Pablo Vzquez

COLECCIN:

Manuales USERS

FORMATO:

17 x 24 cm

PGINAS:

320

Copyright MMVI, MP Ediciones S.A. Es una publicacin


de Gradi S.A. Hecho el depsito que marca la ley. Todos los
derechos reservados. Est prohibida la reproduccin parcial
o total del contenido sin la previa autorizacin
del editor. La editorial no asume responsabilidad alguna
por cualquier consecuencia derivada de la fabricacin,
funcionamiento y/o utilizacin de los servicios y productos
que se describen y/o analizan. Impreso en Argentina.
Primera impresin realizada en Sociedad Impresora Americana,
Lavardn 153/57, Buenos Aires, Argentina.
Todas las marcas mencionadas en este libro
son propiedad exclusiva de sus respectivos dueos.

Cantone, Dante
Creacin de sitios web - 1a ed. - Banfield - Lomas de Zamora : Gradi S.A., 2006.
320 p.; 24 x 17 cm. (Manual Users; 98)
ISBN 987-22995-9-5
ISBN 978-987-22995-9-0
1. Informtica. I. Ttulo
CDD 005.3

CREACIN
DE SITIOS
WEB
Las mejores herramientas
PLANIFICACIN Y PRODUCCIN
FIREWORKS | DREAMWEAVER | FLASH
PUBLICACIN Y PROMOCIN
CONFIGURAR UN SERVIDOR PROPIO

CREACIN DE SITIOS WEB

Pablo Vzquez
Es Tcnico en Reparacin de PC y Redes Informticas, egresado
en 2001 y especializado en reas como Linux, diseo grfico y de
pginas web, y administracin de servidores. Desde 2002 trabaja como instructor en armado y reparacin de PC, redes informticas y administracin de Windows NT/2000, en FUCE
(Fundacin Unin de Centros Educativos). Tambin desarrolla
tareas de diseo grfico y de pginas web en ASD (Argentina
Software Design), y de administrador de redes y servidores, manejando complejos servicios en sistemas como Windows NT y
Linux en sus diferentes versiones para servidor. Es una de las ms
recientes incorporaciones de la editorial, donde se ha desempeado como redactor y editor en las colecciones de fascculos Mi PC
y Profesional del hardware.

Dedicatoria
A mis padres y hermano, por el apoyo.
A Luca, por estar siempre incondicionalmente.

Agradecimentos
A Diego y Daniel, por sus valiosos y constantes aportes de conocimientos editoriales y por su excelente metodologa de trabajo.
A Pablo, por la oportunidad.
A mi familia y amigos, por el apoyo y el inters en este material.

Prlogo

PRLOGO
La creacin de nuestros propios sitios web resulta una tarea muy creativa y apasionante, en la que podemos aplicar todo nuestro gusto, intuicin y criterio visual. Pero, adems de desplegar nuestro sentido de la esttica y de la didctica, tambin deberemos implementar criterios de organizacin y planificacin, para establecer objetivos y determinar el mejor modo de comunicarnos con el pblico objetivo (o target) de los sitios web que desarrollemos. Un seguimiento correcto de todas estas etapas iniciales nos permitir desarrollar sitios sumamente profesionales.
Quien se encargue del diseo y la publicacin de sitios web debe tener en claro en
todo momento la meta final del producto, ya que esto ser lo que lleve a definir todos los restantes factores, como el diseo mismo (colores, logotipo, tipografas, estilos, formas, diagramacin) o la eleccin del mtodo de publicacin (servicios de
alojamiento, servidor web propio, promocin, etc.).
Un diseador web, adems, debe actuar como desarrollador e implementador de todas estas soluciones, para que el cliente final y los visitantes de sus sitios queden satisfechos. El diseador no tendr que buscar una respuesta general a todas las problemticas decisiones que se presenten, sino que tendr que definir diferentes y especficos mtodos para ofrecer un abanico de soluciones posibles.
Para lograr ptimos resultados, no slo debemos conocer los procesos sino que necesitaremos dominar las herramientas, servicios y complementos que Internet nos
ofrece para sacarle el mayor provecho.
El software de diseo web, como los editores HTML o los programas de edicin de
imagen digital, sern de gran ayuda para el desarrollo de nuestros sitios y sus componentes. Es fundamental, tambin, tener un conocimiento acabado de los servicios
que hay disponibles en Internet para el registro de dominios, el alojamiento de nuestro sitio y su promocin a travs del alta en buscadores o el intercambio de enlaces.
Este libro propone un abanico de soluciones fundamentales para el desarrollador de
sitios web profesionales. Para ello se tendrn en cuenta dos criterios a la hora de seleccionar las herramientas y definir los procedimientos: la simplicidad y el menor
costo. De todas maneras, dentro de la evaluacin de todos estos componentes, se ha
priorizado la calidad del producto final para luego aplicar la evaluacin de costo y
facilidad. Es por eso que no todas las herramientas son gratuitas, ni tampoco podemos decir que todos los procedimientos y ejemplos sern sencillos de implementar.
Pero desde luego, si se presta atencin y se tienen en cuenta todas las alternativas
ofrecidas, el recorrido por este libro ser ameno, entretenido y sin mayores inconvenientes en la puesta en prctica.
No resta ms que desearles un seguro xito en la creacin de sus propios sitios web.
Pablo Eduardo Vzquez
pabloevazquez@gmail.com
5

CREACIN DE SITIOS WEB

EL LIBRO DE UN VISTAZO
Este libro est dirigido a quienes deseen inciarse en el desarrollo de sus sitios
web, as como a aquellos usuarios intermedios que deseen adquirir una visin total del proceso de produccin, conociendo y aplicando herramientas variadas.

Captulo 1

propiedades para lograr una mejor calidad y

CONOCIMIENTOS PREVIOS

diversos efectos. Utilizaremos Fireworks, el

A modo de introduccin, trataremos los temas

poderoso editor grfico de Macromedia.

primarios y todos los conocimientos que, de


antemano, debemos abarcar para tener claro

Captulo 4

todo lo que se refiera a Internet, que ser la

DREAMWEAVER BSICO

herramienta ms utilizada durante la lectura

En este captulo hemos llegado por fin al

de este libro. Profundizaremos tambin todas

diseo formal de nuestros sitios.

las reas que vinculan esta gran red al diseo

Analizaremos una de las aplicaciones ms

y la creatividad, como la World Wide Web y los

potentes para diseo web: Macromedia

protocolos de comunicaciones respectivos.

Dreamweaver. Conoceremos todas las


caractersticas del programa y las tareas

Captulo 2

bsicas de trabajo a travs de los contenidos

PLANIFICACIN Y PRODUCCIN DEL SITIO

explicados y del anlisis de un proyecto

Para lograr diseos ptimos de sitios, ser

simple de creacin de pginas web.

necesario tener en cuenta una serie de


factores y procesos previos al diseo mismo.

Captulo 5

Entre ellos, se destacan la planificacin del

DREAMWEAVER AVANZADO

sitio, que incluir puntos como la definicin

Para desarrollar sitios web sumamente

de objetivos y la direccin artstica, y, por otro

profesionales, ser de vital importancia la

lado, el hecho de comenzar a conocer la

lectura de este captulo. Ahondaremos en las

estructura bsica de una pgina web a travs

opciones ms avanzadas de Dreamweaver,

de su costado ms puro: el lenguaje HTML.

analizando en primer trmino la alternativa


de programacin en HTML de cada una de las

Captulo 3

herramientas que podemos llegar a incluir en

IMAGEN Y ANIMACIN

nuestras pginas. Entre ellas, tablas, capas,

Si deseamos que nuestros sitios sean

marcos, imgenes, CSS, etc.

visualmente atractivos y grficamente


ptimos, necesitaremos optimizarlos

Captulo 6

mediante el adecuado procesamiento de las

PUBLICACIN DE SITIOS

imgenes que incluiremos. Para ello,

Al terminar la planificacin y la

debemos conocer todas las alternativas en

implementacin del diseo y de todos sus

cuanto a formatos, como tambin una

elementos, llegar la hora de verlos

herramienta que nos permita modificar sus

publicados en la Web. En este captulo,

El libro de un vistazo

veremos todas las opciones disponibles para

analizaremos alternativas para lograr

ello, incluyendo el montaje de un servidor

mantener nuestros asiduos visitantes, como

propio, el registro de dominios regionales, la

el envo de boletines electrnicos o el

contratacin de servicios de alojamiento y

intercambio de banners publicitarios.

diferentes mtodos de redireccin.

Apndice A
Captulo 7

BASES DE DATOS

MACROMEDIA FLASH Y OTRAS

La inclusin a nuestro servidor web de un

HERRAMIENTAS

servidor de bases de datos puede ser una

Contamos con muchas alternativas

tarea muy til y funcional para la

adicionales para incluir en nuestros sitios

interactividad con los usuarios de nuestros

web. Mediante la lectura y puesta en prctica

sitios web. Esta opcin puede ofrecer una

de los contenidos de este captulo, podremos

gran versatilidad en cuanto a opciones de

lograr conocer ms acerca de todas ellas.

registro y seguridad en los datos remotos, y lo

Desde la inclusin de animaciones y

podemos lograr mediante MySQL Server,

complejas aplicaciones mediante Flash, hasta

gestor y administrador de bases de datos

otros componentes extra en Java, PHP o ASP,

gratuito, estable y potente.

sern sencillamente explicados y

Apndice B

funcionalmente aplicados.

SITIOS Y PROGRAMAS RECOMENDADOS

Captulo 8

Servicios de alojamiento web, obtencin de

PUBLICIDAD DEL SITIO

recursos, como fuentes tipogrficas, templates

Una correcta promocin para nuestras

grficos o iconos e imgenes para la Web. La

pginas ser fundamental a la hora de

descarga de herramientas gratuitas para la

conseguir nuevos visitantes y potenciales

ejecucin de diferentes tareas, como creacin

clientes. Contamos con muchas opciones para

de animaciones o clientes FTP. Todo esto

lograrlo, dentro de las cuales se destaca el

podremos conseguirlo mediante el listado de

indexado en los buscadores ms importantes

sitios recomendados que se ofrecen en este

de la Web, como Google o Yahoo!. Tambin

segundo apndice.

INFORMACIN COMPLEMENTARIA

A lo largo de este manual encontrar una serie de recuadros que le brindarn informacin complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados.
Cada recuadro est identificado con uno de los siguientes iconos:

CURIOSIDADES
E IDEAS

ATENCIN

DATOS TILES Y
NOVEDADES

SITIOS WEB

UNA NUEVA DIMENSIN

EN LIBROS
TUTORIALES
Aqu encontrar diferentes
tutoriales en video relacionados
con el libro. Slo deber hacer
un clic en Ver Tutorial para
bajar el video a su PC.

GUA
Una completa gua con sitios
web, para acceder a ms
informacin y recursos tiles
que le permitirn profundizar
sus conocimientos.

SOFTWARE
Las mejores aplicaciones
y herramientas
accesorias, ejemplos y
listados del libro para que no
tenga que invertir su tiempo en
transcribirlos.

OnWeb, el sitio que le permitir aprovechar al mximo cada uno de


nuestros libros, con contenido exclusivo: la mejor seleccin de software y
los ejemplos analizados en el texto, tutoriales en video y una completa
gua de sitios de Internet. > Adems, un foro a travs del cual podr
realizar interconsultas con otros lectores y usuarios, debatir con ellos y
estar en contacto con la editorial. Como siempre, MP Ediciones, a la
vanguardia en la divulgacin de la tecnologa.

BIENVENIDO A LOS SERVICIOS EXCLUSIVOS DE ONWEB:


Ingrese al sitio usershop.mpediciones.com. La primera vez que
acceda, deber registrarse con un nombre de usuario y una clave.
Para completar el proceso de registro, se le har una pregunta
referida al libro y se le solicitarn sus datos personales.

U S E R S H O P. M P E D I C I O N E S . C O M

Contenido

CONTENIDO
Sobre el autor

Formateo de textos

37

Prlogo

Insercin de imgenes

40

El libro de un vistazo

Informacin complementaria

Introduccin

12

Captulo 1

Breve historia de Internet


La conexin
La World Wide Web
Los sitios web

42
43

Actividades

44

Captulo 3

CONOCIMIENTOS PREVIOS
Qu es Internet?

Los enlaces
Resumen

IMAGEN Y ANIMACIN
14

Las imgenes digitales

46

14

El diseo y la Web

46

16

Grficos vectoriales

47

17

Los mapas de bits

48

19

Los formatos

49

Los colores en la Web

53

La tipografa

56

La pantalla principal

59

Filtros y comandos

62

HTML y Fireworks

65

Resumen

71

Actividades

72

Captulo 4

El navegador

22

Transferencia de archivos: FTP

26

DREAMWEAVER BSICO

Resumen

27

Macromedia Dreamweaver 8

Actividades

28

Obtener, instalar y ejecutar


Dreamweaver

Captulo 2

54

Macromedia Fireworks

La pantalla principal

74
75
78

PLANIFICACIN Y PRODUCCIN
DEL SITIO
Definicin del sitio

30

Objetivos del sitio

30

Definir contenidos

30

La direccin artstica

32

El lenguaje web: HTML

33

Qu son los tags?

34

Tags bsicos

34

CREACIN DE SITIOS WEB

Las vistas

79

La barra de herramientas

La sintaxis

133

Las clases

135

de archivo

81

CSS: propiedades

La barra Insertar

82

de las etiquetas

137

Tareas bsicas

84

CSS en Dreamweaver

138

Comenzar a trabajar

87

Capas (layers)

146

Crear la estructura local del sitio

87

Las capas de Dreamweaver

148

Definicin del sitio

88

Servidor remoto

92

Modificadores

Nuestro primer diseo

96

Enlaces a marcos

152

Resumen

99

Insertar marcos en Dreamweaver

153

Actividades

100

Los marcos

150
151

Resumen

157

Actividades

158

Captulo 5
Captulo 6

DREAMWEAVER AVANZADO
Insercin de imgenes

102

PUBLICACIN DE SITIOS

Modificar una imagen

104

Conceptos tericos previos

Imgenes de sustitucin

105

El protocolo TCP/IP

158

Barras de navegacin

109

Resolucin de nombres de dominio

163

lbum de fotos web

110

Nuestro propio servidor web

165

Internet Information Server

165

Apache Server

174

Simulacin de IP esttica

180

Registrar dominios
El alojamiento (hosting)

Elementos de texto

113

205

Hosting dedicado

205

Housing

206

Resumen

209

Actividades

210

114

Las listas

115

Los enlaces

119

MACROMEDIA FLASH

120

Y OTRAS HERRAMIENTAS

123

Macromedia Flash 8 Professional

Los enlaces en Dreamweaver

187
205

Hosting compartido

Las cabeceras de texto

Las tablas

158

Captulo 7

212

Definir las filas

124

Flash Player

213

Definir las celdas

124

Instalar Flash

213

Tablas en Dreamweaver

125

Iniciar Flash 8

216

Dividir y combinar celdas

129

El escenario

218

133

Las lneas de tiempo

220

Hojas de estilo

10

Contenido

Apndice B

Los paneles

222

La barra de herramientas

224

SITIOS Y PROGRAMAS RECOMENDADOS

Tareas bsicas de diseo

226

Gua de sitios

296

241

HotScripts

296

241

Recursos gratis

296

PHP

243

FatScripts

297

Java y Javascript

245

Scripts.com

297

Aplicaciones mediante scripts


ASP

Resumen

245

Free Webmaster Resources

Actividades

246

(thefreecountry.com)

Captulo 8
PUBLICIDAD DEL SITIO
Registro en buscadores

Creamundo

298

LetraMana

299

Fuentes de recursos gratis

299

Font Reactor

300

101 Free Fonts

300

DaFont

301

Free Fonts

301

Free Web Templates

302

Templates Box

302

248

Los buscadores

249

Registrar nuestros sitios

251

Elementos para tener en cuenta

256

Herramientas adicionales

260

Otros mtodos de promocin

298

270

Los banners

270

Boletines electrnicos

274

SmartFTP

Resumen

275

CuteFTP

303

Actividades

276

FTP Explorer

304

BulletProf FTP

304

Core FTP

305

Apndice A
BASES DE DATOS

Software recomendado

303
303

Swish

305

Qu es una base de datos?

278

Arachnophilia

306

El servidor

278

Alleycode

306

El lenguaje SQL

279

Amaya

307

MySQL

280

GIMP

307

Manipulacin de las bases de datos

289

IrfanView

308

Resumen

294

Image After

308

11

CREACIN DE SITIOS WEB

INTRODUCCIN
El objetivo de este libro es brindar, tanto al lector novicio como al usuario intermedio que ya ha hecho sus primeras armas en esta actividad, un amplio recorrido por el proceso de desarrollo de sitios web. Con un claro enfoque prctico,
nuestra misin ser que el lector adquiera los conocimientos necesarios para planear, disear, publicar y promocionar sitios web de manera sencilla, organizada y
con el menor costo posible.
En el primer captulo, tendremos un panorama de los conceptos bsicos, tanto
del diseo y la creatividad en la presentacin de los contenidos, como de las caractersticas tcnicas de Internet, sus protocolos de comunicaciones o la World
Wide Web, entre otros temas.
Luego, abordaremos el proceso previo de planificacin del sitio y tomaremos contacto con un aspecto esencial de nuestra actividad, el lenguaje HTML en que se
codifican o construyen los sitios web. En adelante, sin embargo, usaremos mayormente las herramientas de diseo ms difundidas (Dreamweaver, Fireworks y
otras), que nos permiten obtener resultados de alto profesionalismo, sin necesidad de mayor dominio de programacin. Muchos lectores, seguramente, ya estarn familiarizados con algunas de ellas.
Como el formato HTML, con que se estructuran los sitios web, slo despliega
texto, el siguiente paso ser comenzar a preparar los elementos visuales que acompaarn al texto (imagen y animacin). Conoceremos las caractersticas y los formatos ms convenientes para su utilizacin en la Web y comenzaremos a aplicar
Macromedia Fireworks para la edicin de esas imgenes.
Entrando de lleno en la etapa prctica del armado de un sitio web, en los captulos
4 y 5, comenzaremos a utilizar Macromedia Dreamweaver para estructurar nuestro
sitio, con todos los contenidos que hemos seleccionado y organizado de manera
previa. Aqu es donde empezaremos a ver los resultados prcticos de nuestro aprendizaje. De lo bsico a lo avanzado, iremos viendo las diferentes herramientas y opciones que nos brinda Dreamweaver para dar forma y estilo a nuestro sitio.
Una vez que el contenido ha adquirido forma, nos encontramos en el momento
crucial de publicar nuestro sitio. En el captulo 6 veremos cmo realizar esta vital tarea, resolviendo los distintos requerimientos, como el registro del dominio y
el alojamiento del sitio.
Acercndonos al final, abordaremos algunas herramientas importantes para la
animacin e interactividad del sitio, haciendo especial nfasis en la utilizacin de
Macromedia Flash. Y, por ltimo, aprenderemos los distintos modos de difundir
y promocionar nuestros sitios, a travs de distintas opciones, como la inclusin
en buscadores o el intercambio de enlaces.

12

CREACIN DE SITIOS WEB

Captulo

Conocimientos
previos
En este primer captulo empezaremos
a conocer mucho ms acerca de Internet
y todas las caractersticas que se nos
ofrecen a partir de este estupendo
mtodo de comunicacin. Tambin
repasaremos los conceptos de protocolos
ms utilizados, los servicios
y los componentes de este tipo de red.

SERVICIO DE ATENCIN AL LECTOR: lectores@mpediciones.com

Qu es Internet?
Breve historia de Internet
La conexin
La World Wide Web
Los sitios web
El navegador
Transferencia de archivos: FTP
Resumen
Actividades

14
14
16
17
19
22
26
27
28

CREACIN DE SITIOS WEB

QU ES INTERNET?
Internet es un sistema mundial de computadoras en red integrado por las redes y subredes de cada pas, que comparten diferentes clases de recursos y permiten comunicarse y acceder a los datos de cualquier computadora que est conectada a ellas, e incluso establecer comunicaciones directas con los usuarios de todas estas terminales.
Internet se basa en un sistema de cliente-servidor. Los clientes son los usuarios
que aprovecharn los recursos y los servidores los equipos que los ofrecen y administran. Es una manera rpida, inteligente y de bajo costo, por lo que actualmente se ha convertido en el medio de comunicacin y obtencin de datos ms
utilizado en el mundo entero.
El proyecto de Internet naci de la mano de ARPA (Advanced Research Projects
Agency) en Estados Unidos, alrededor del ao 1969. Inicialmente se la conoci con
el nombre de ARPAnet, y su objetivo principal fue permitir una comunicacin rpida y eficaz entre los investigadores de la agencia.
Hoy en da, Internet es un sistema de comunicacin pblico, cooperativo y autosuficiente econmicamente. A nivel tcnico, se distingue porque basa su funcionamiento en un protocolo de transmisin de datos veloz y seguro: el TCP/IP.

Solicitud
Web
(HTTP)
Internet
Archivos
(FTP)
Clientes
(navegador, cliente FTP,
cliente de correo, etc.)

Respuesta

Servidores
(servicios)
E-mail
(POP y SMTP)

Figura 1. En este diagrama se muestra el funcionamiento


bsico del sistema clienteservidor que utiliza Internet.

Breve historia de Internet


A comienzos de la dcada del 60, el Departamento de Defensa de los EEUU comenz a preocuparse por el sistema utilizado en las comunicaciones internas. En
1962, un investigador del gobierno llamado Paul Baran present un proyecto

14

Qu es Internet?

que solucionaba satisfactoriamente todos los problemas que se presentaban con


el mtodo de comunicacin utilizado. Era un sistema de computadoras conectadas entre s por una misma red de manera descentralizada.
Este proyecto fue debatido durante varios aos mientras se analizaban las ventajas
y desventajas que podra significar, hasta que en 1969 la ARPA del Pentgono cre
la ARPAnet, el primer sistema de computacin con equipos conectados en red.
Este sistema funcion satisfactoriamente durante varios aos con su implementacin en redes pequeas, es decir, con pocas estaciones de trabajo conectadas a
ella. El problema surgi cuando se intent masificar
el uso de este mtodo: no exista un protocolo de comunicaciones comn en todas las computadoras ya
que utilizaban distintos sistemas operativos.
Finalmente, en el ao 1978 se cre el protocolo TCP/IP
(Transmition Control Protocol/Internet Protocol). Desde
ese momento se comenz a utilizar el trmino Internet.
Este protocolo fue inmediatamente adoptado como estndar por el Departamento de Defensa, y en 1982 su
red de computadoras adopt el nombre de MILnet.
Figura 2. Existen muchos equipos que actan como
servidores web y de otros servicios de Internet sin tener
grandes prestaciones.

En 1987, la NSF (National Science Foundation) decidi enlazar cinco centros en distintas ciudades de los EEUU. De esa manera naci la NSFnet, que alcanz la velocidad de transferencia de 1,5 Mbps (el mximo hasta ese momento era de 56 Kbps,
la velocidad que actualmente ofrecen los mdems de conexin telefnica).
En la dcada del 90 se cre la World Wide Web mediante la utilizacin de tres
novedosos recursos: el lenguaje HTML (Hipertext Markup Language), el HTTP
(Hypertext Transfer Protocol) y un programa cliente (navegador o browser).
En el ao 1993, dos desarrolladores del NCSA (Nacional Center Supercomputing Aplications) elaboraron un sistema de navegacin web y se alejaron de esa compaa para

OTROS PROTOCOLOS

Internet ofrece una gran cantidad de servicios. Cada uno de ellos se asocia con un puerto de comunicacin diferente. Entre los ms usados encontramos el correo electrnico (puerto POP para la entrada de datos y SMTP para la salida), la mensajera instantnea (cada mensajero utiliza el puerto
sobre el que funciona su red) y el que nos importa a nosotros: la Web (comnmente el puerto 80).

15

CREACIN DE SITIOS WEB

apostar todo a la creacin de una de las primeras empresas dedicadas exclusivamente a


este rubro: Netscape. ste fue uno de los primeros navegadores web del mercado.
Alrededor del ao 1995, el nmero de servidores web, es decir, supercomputadoras
que alojaban sitios web, super la cantidad de servidores FTP, por lo que creci
mucho ms el uso de esta tecnologa, hasta que logr convertirse en lo que es actualmente: la mayor red mundial de datos del planeta.
Posteriormente se cre la Internet Society, un ente regulador de contenidos y actividades para esa gran red. Segn este organismo, hoy en da el trfico de Internet se
triplica cada dos meses y alcanza a ms de 200 pases.

La conexin
Aunque para poder crear nuestra propia pgina y montar un servidor web sera necesario que ya contramos con una conexin a Internet y con conocimientos bsicos sobre esta red y sobre informtica en general, repasaremos los conceptos mnimos acerca de las diferentes clases de conexiones que
existen y sus principales caractersticas.
Bsicamente, en el mercado contamos con
dos tipos de conexiones a Internet, que
son las ms utilizadas hoy en da.
El primer tipo es la conexin dial-up, que
se realiza mediante la lnea telefnica. Para
ello, debemos contar con un dispositivo de
hardware especial denominado mdem,
que puede ser de dos tipos: interno (se instala dentro del gabinete en un slot de expansin de la placa madre) o externo (queda fuera de la computadora y se conecta a
algn puerto del gabinete, que ltimamente es el USB). Un mdem de acceso telefnico presenta dos conectores: uno para coFigura 3. Ejemplo de un mdem dial-up nectar el cable de la lnea telefnica (LINE)
de 56 Kbps interno.
y otro para enchufar el telfono (PHONE).
La palabra mdem es una simplificacin de los trminos modulador/demodulador, lo que indica de manera resumida la funcionalidad de este componente.
La operatoria de un mdem se sintetiza en la codificacin y decodificacin de
datos para transmitirlos como bits por la lnea de voz del cable de telfono.
Este tipo de conexiones es uno de los ms primitivos, y debido a que la lnea telefnica no posee una alta tecnologa, tienen una velocidad lenta en la transferencia de datos y un bajo nivel
de seguridad. La velocidad mxima alcanzada en conexiones dial-up es de 56 Kbps.
16

La World Wide Web

En una conexin telefnica, el mdem utiliza el tono de marcado para establecer la conexin y se necesita contar con un nombre de usuario y contrasea, que
son proporcionados por nuestro ISP (Internet Service Provider, es decir, proveedor de servicio de Internet).
El segundo tipo de conexin a Internet es la conexin de banda ancha, que tambin
utiliza un mdem para establecer la comunicacin (normalmente externos). Estas
conexiones brindan ms seguridad y una mayor velocidad de transferencia de datos.
Existen diferentes variantes. La
ms utilizada en conexiones hogareas se establece (al igual que las
dial-up) mediante la lnea telefnica y es llamada DSL (Digital Suscriber Line) o ADSL (Asymmetric
Digital Subscriber Line). A diferencia de las conexiones por lnea tele- Figura 4. Fotografa de un mdem DSL externo.
fnica tradicionales, en las conexiones ADSL se aplica a la lnea telefnica un proceso de digitalizacin que permite estas altas velocidades. Actualmente, el estndar de velocidad de estas conexiones flucta entre los 256 Kbps y los 2 Mbps.

LA WORLD WIDE WEB


Sin dudarlo, se puede decir que el recurso ms utilizado en el mbito de Internet es la
World Wide Web, comnmente denominada Web. Se trata de un sistema de hipertexto que funciona sobre la gran red de redes. Como ya dijimos, Internet y todos sus
servicios funcionan principalmente a travs de un sistema de clientes y servidores. En
el caso de la World Wide Web, el funcionamiento es de la misma manera. Para explicarlo de forma sencilla y resumida, los servidores web sern los que alojarn las diferentes pginas de cada sitio junto con sus componentes (imgenes, animaciones, aplica-

CONEXIONES DE BANDA ANCHA

Existen tambin otras variantes para conexiones de banda ancha, quiz ms utilizadas en empresas y redes ms grandes. Se trata del cablemdem y las conexiones satelitales. En el primer
caso, los datos son enviados y recibidos a travs del cable coaxil de TV por cable, y en el segundo, se necesita una antena para conectarse satelitalmente con el proveedor (ISP).

17

CREACIN DE SITIOS WEB

ciones, etc.). El cliente web ser el que consumir todos esos recursos brindados por los
servidores. Para eso, el cliente web debe contar con un software que interprete y permita visualizar las pginas web. Estos programas, denominados navegadores web o
browsers, nos dan la posibilidad de recorrer las diferentes pginas de un sitio web a travs de los links (tambin llamados vnculos o enlaces) y mediante un mtodo de resolucin de nombres (DNS) que explicaremos ms adelante. Ya hemos aclarado que
para que el servicio web funcione debemos contar con algunos factores imprescindibles. Ordenemos un poco estos conceptos y veamos las caractersticas y relevancia que
posee cada uno. Como primer eslabn, encontramos los servidores que contienen sitios web constituidos por pginas web, imgenes y diferentes componentes adicionales
que las conformarn. Como contrapunto, encontramos al cliente web, que debe contar con una conexin a Internet y un navegador para explorar las diferentes pginas de
los mltiples sitios de la World Wide Web.
Ahora que tenemos en claro los niveles y elementos que constituyen y con los que
deben contar un cliente y un servidor web, analicemos cada uno de ellos.

Figura 5. Internet Explorer es uno de los navegadores web ms populares del mercado.

EL E-MAIL

El correo electrnico o e-mail es un servicio que se brinda a travs de grandes redes y tambin a
travs de Internet. Es un sistema de envo y recepcin de mensajes de texto e hipertexto pero no perteneciente a la World Wide Web, ya que utiliza protocolos diferentes para establecer las comunicaciones. En los mensajes de correo electrnico tambin podemos adjuntar imgenes y archivos.

18

La World Wide Web

Los sitios web


Un sitio de la Web en un conjunto de documentos electrnicos de hipertexto (pginas
web) que componen y hacen referencia a un tema determinado. Normalmente estn
definidos por una pgina de bienvenida (home page), que ser la que se muestre inicialmente y desde la que se podr acceder a las dems pginas mediante enlaces (links).
Los sitios web poseen un nombre de dominio particular que se conoce popularmente como direccin de Internet. Como ya debemos saber, en una red TCP/IP cada
equipo es identificado por un nmero IP, que puede ser dinmico (cambia en cada
inicio de sesin) o esttico (es siempre la misma). Generalmente, en las conexiones
dial-up y en las de banda ancha para usuarios hogareos la IP suele ser dinmica. En
cambio, en los servicios que se brindan a empresas, estas direcciones son estticas (o
fijas) porque es ms comn que en este mbito se brinden servicios y, por esa razn,
es necesario que la mquina se identifique siempre de la misma manera para poder
encontrarla dentro de Internet y as acceder a sus servicios (sitios web, e-mail, etc.).
Siguiendo este criterio, cuando deseamos acceder a un sitio de la Web, tendramos que indicar a nuestro navegador el nmero de IP del servidor que aloja a ese
sitio. Aqu se nos plantea el primer inconveniente: no sera demasiado complejo memorizar una enorme cantidad de datos numricos? La solucin naci a partir de la implementacin de un sistema de resolucin de nombres: el DNS (Domain Name System), que traduce cada nombre de dominio a la direccin IP asociada a partir de una tabla de registros. Este nombre de dominio o URL es mucho ms fcil de recordar para nosotros, y es de esta manera que le indicamos a
nuestro navegador el sitio al que queremos acceder.
Pero si no tuvisemos una IP fija, podramos usar otra modalidad de DNS llamada DDNS (Dynamic DNS). Este DNS dinmico se encarga de actualizar la
tabla de asociaciones cada vez que la IP cambia. Generalmente, este servicio es
prestado por empresas que proveen un programa que, al instalarse en la computadora, enva de forma automtica la nueva direccin IP.
Las direcciones de Internet estn compuestas por varios elementos. Tomemos el ejemplo de http://www.google.com.ar. El prefijo http:// indica al navegador el puerto que
se usar para acceder al sitio. Actualmente los navegadores reconocen automticamente este comando, por lo que es posible obviarlo. Entonces, la direccin de Internet que-

MLTIPLES DOMINIOS

El sistema de DNS tambin es muy til para asignar diferentes nombres de dominio a una misma
IP, es decir, que en un mismo servidor podemos alojar varios sitios web, pero en diferentes directorios del servidor. Por ejemplo, si en nuestro servidor tenemos una carpeta que se denomina sitio
principal y otra sitio secundario, podremos aplicar un nombre de dominio a cada una de ellas.

19

CREACIN DE SITIOS WEB

dara como www.google.com.ar. Posteriormente encontramos la sigla www, que aclara al browser que el sitio en cuestin pertenece a la World Wide Web. Luego se indica
el nombre en s del sitio, que es a eleccin de su administrador. En este caso, google.
Por ltimo, encontramos los sufijos .com y .ar. El primero establece la categora del sitio, es decir, qu tipo de usuario u organizacin lo posee. En el caso del .com se entiende que es una empresa comercial, pero existen otros sufijos, como .org (organizaciones
sin fines de lucro), .edu (educacin), .gov (entidades gubernamentales), .mil (entidades militares), etc. El ltimo sufijo hace referencia al pas donde se encuentra el servidor web que aloja al sitio. Es as que .ar representa a la Argentina, .mx a Mxico, .br
a Brasil, .es a Espaa, .it a Italia o .cl a Chile, entre otros. Es muy posible tambin que
encontremos sitios sin este ltimo sufijo, como, por ejemplo, www.hotmail.com, lo
que indica que este sitio no pertenece a ningn pas en particular.

Figura 6. Las organizaciones, como las Naciones Unidas,


utilizan sufijo .org para publicar sus sitios.

LAS DESCARGAS

Una descarga o download es una interaccin, entre el servidor web y el cliente, que nos permite extraer archivos desde aquel hasta nuestro equipo mediante el protocolo HTTP sin la necesidad de
contar con el servicio de FTP (aunque ste es bastante ms veloz en la descarga). Esto se realiza mediante un clic en un enlace que hace referencia a un archivo ubicado en el servidor.

20

La World Wide Web

Las pginas web


Cada pgina que compone un sitio web puede estar conformada por diferentes
elementos que hacen de ella un documento mucho ms atractivo, tanto en su aspecto visual como en sus contenidos. Dentro de Internet podemos encontrarnos
con pginas con todo tipo de componentes, como imgenes, animaciones, elementos dinmicos como mens desplegables o barras de navegacin y aplicaciones complementarias, como plugins y applets que realizan diferentes funciones
(en captulos posteriores analizaremos cada uno de estos elementos).

Figura 7. Muchos sitios web nos ofrecen diferente calidad


de servicios, como, por ejemplo, los foros de discusin.

Las pginas de hipertexto convencionales son documentos electrnicos con formato HTML, que es el lenguaje bsico por el cual se desarrollan (o programan)
las pginas. Este formato soporta dos extensiones para sus archivos: HTML y
HTM, por lo que la pgina de inicio de nuestro sitio quedara nombrada, por

OTROS FORMATOS

Existen tambin otros formatos (de los que hablaremos en captulos posteriores con mayor
profundidad) que son aceptados e interpretados por los servidores web y los clientes (navegadores), como los ASP, PHP, CGI o XML. stos son pginas web desarrolladas con diferentes
lenguajes de programacin.

21

CREACIN DE SITIOS WEB

ejemplo, como inicio.html. Es conveniente aclarar que la mayora de los servicios que mantienen servidores web aceptan como nombre de pgina inicial los
nombres de archivo index o default. Igualmente, ms adelante comprenderemos
ms acerca de los servidores web y su contenido.
Adems del texto tradicional, imgenes y contenidos dinmicos, una pgina web
suele contener lo que normalmente se llama link o hipervnculo. Estos pueden
ser representados por texto o imgenes y su funcin es dar acceso directo a otra
pgina del mismo sitio o a una de otro diferente. La primera clase se denomina
link con vnculo interno, y tiene la referencia a una pgina ubicada dentro del
mismo servidor que la que estamos visualizando. La segunda da acceso a un sitio
externo o a alguna de sus pginas. Un link tambin pude hacer referencia directa
a la creacin de un mensaje de correo electrnico, pero esto depende del servicio
de correo que est configurado como predeterminado en el equipo cliente (en
Windows, generalmente es Outlook). Lo primordial que hay que tener en cuenta con respecto a las pginas web, es su organizacin dentro del sitio, que ser definida por el mapa del sitio que tengamos en mente.

EL NAVEGADOR
Tcnica y prcticamente, un navegador web (tambin llamado browser) es una
aplicacin que se instala en la computadora del cliente y que, mediante una conexin a Internet, permite acceder a todos los sitios de la red mundial y as visualizar pginas de hipertexto estticas y dinmicas.
Como ya dijimos, las pginas web pueden contener contenidos de todo tipo, como
texto plano, links, imgenes, animaciones, secuencias de audio y video y aplicaciones
de todo tipo, y para que stos puedan ser visualizados y ejecutados adecuadamente, el
navegador web debe contar con los soportes necesarios para cada tipo de dato digital.
Un factor fundamental en la navegacin de sitios web son los links, ya que a travs
de ellos podremos acceder a otras pginas, volver a la anterior, enviar mensajes de
correo electrnico, iniciar descargas y algunas tareas complementarias ms.

CARACTERSTICAS ADICIONALES

Un navegador web tambin nos da la posibilidad de marcar pginas web para acceder de manera
ms fcil posteriormente. Estos accesos son denominados marcadores, bookmarks o favoritos.
Otra caracterstica de los navegadores es la de poder acceder a todas las pginas visitadas anteriormente en un perodo determinado de tiempo. Esta funcin normalmente se denomina historial.

22

El navegador

La comunicacin entre el navegador web del cliente y el servidor web de Internet se establece mediante el protocolo HTTP, aunque en la mayora de los casos tambin se soportan otros protocolos adicionales, como el FTP, el Gopher y
el HTTPS (versin cifrada y ms segura del HTTP).
Entonces, podemos decir que la funcin bsica de un navegador es mostrar en
pantalla documentos HTML (pginas web) alojados en servidores web. Actualmente, los navegadores poseen la capacidad de interpretar tambin la renderizacin de imgenes y animaciones, la reproduccin de audio y video en tiempo real
(streaming), y la ejecucin de diversos programas y scripts en diferentes formatos y mediante diversos protocolos.
Figura 8. Internet Explorer y Mozilla Firefox son las
opciones ms difundidas entre los navegadores.

En cuanto a las diferentes opciones que se nos presentan a la hora de instalar un


navegador, todo depender del sistema operativo que utilicemos. En este libro
nos centraremos en el uso de Windows XP Profesional, y las variantes que manejamos son varias: Opera, Firefox, Amaya, etc., pero la que se presentar como
ejemplo en todos los ejercicios y explicaciones es la ms popular y fcil de usar
de todas: Internet Explorer (ya incluido con Windows).
Este programa fue producido por Microsoft en el ao 1995 y su primera versin fue
lanzada con la versin de Windows de ese ao (Windows 95). Desde ese entonces,
Windows se estableci en el mercado como el sistema operativo estndar y, junto a
ello, Internet Explorer tambin se convirti en el lder en popularidad.
Con cada nueva versin de Windows lanzada al mercado, se incluy tambin una
de Internet Explorer, que llega hasta la versin 7.0 que es incluida con Windows
Vista. La versin que utilizaremos en este libro es la ms estable, funcional y verstil de todas: Internet Explorer 6.0 incluida con Windows XP, que ms adelante conoceremos y analizaremos de forma ms profunda.

El protocolo HTTP y las transacciones de datos


Como ya explicamos, el protocolo utilizado para el acceso, visualizacin y navegacin web es el denominado HTTP. Su ltima versin es la 1.1, y su funcionamiento de conexin es simple, ya que se basa en redes cliente-servidor. Cuando el usuario ingresa una direccin de Internet (por ejemplo, http://www.mydaemon.com) en su navegador (cliente web), realiza una peticin de datos. El
protocolo http primero resolver la configuracin DNS establecida en Internet
que corresponde a ese dominio, para poder establecer cul es el nmero de IP
asociado con esta direccin, por ejemplo, 64.226.24.116. Una vez resuelto esto,
intentar establecer la comunicacin con dicho servidor mediante el puerto pre23

CREACIN DE SITIOS WEB

determinado de la Web, es decir, el puerto 80. Cuando se ha establecido esa conexin, se enva la peticin al servidor para que se muestre la pgina solicitada
en el navegador del cliente. Para eso se le indica al servidor web los datos necesarios para la transferencia de los datos, como el nmero de IP o la pgina que
se desea visualizar (si el cliente no especific ninguna en particular, se mostrar
la pgina establecida como inicial en el servidor web de dicho sitio). Con todos
los datos resueltos, el servidor web enviar la respuesta al cliente remoto, mostrando la pgina correspondiente en su navegador.
Una caracterstica muy importante del protocolo HTTP es que no cuenta con la
posibilidad de almacenar datos sobre las conexiones, por lo que cuando una
transaccin de peticin/envo de datos finaliza, los datos que se establecieron se
perdern. La solucin a este conflicto se realiza mediante las cookies. Se trata de
archivos pequeos que se almacenan en la mquina del usuario cliente y en el
servidor web, y guardan toda la informacin recopilada con respecto a los usuarios (login, contraseas, etc.), lo que sirve para que cuando ingresemos nuevamente en ese sitio, seamos reconocidos por l.

Internet Explorer
Como ya vimos, para la navegacin por Internet (y tambin para testear nuestras pginas), ser necesario contar con un cliente web, es decir, un navegador.
En nuestro caso utilizaremos el ms popular: Internet Explorer. Esta aplicacin
est incluida en Windows XP y podremos acceder a ella yendo a Inicio/Todos los
programas/Internet Explorer.
En el caso que en nuestra instalacin de Windows no hayamos incluido este programa, para instalarlo simplemente debemos ir a Inicio/Panel de control/Agregar
o quitar programas. All seleccionamos la opcin Agregar o quitar componentes de
Windows y marcamos la casilla que identifica a Internet Explorer. Insertamos el
CD de Windows XP y seguimos todos los pasos del proceso de instalacin.
Para obtener ms informacin acerca de Internet Explorer, podemos ingresar en
el sitio www.microsoft.com/spain/windows/ie/default.mspx, donde encontraremos adems, sus caractersticas principales, artculos sobre su utilizacin y novedades sobre las nuevas versiones del navegador, entre otras cosas.

FTP ANNIMO

Es posible tambin que el servidor o directorio FTP sea pblico y no requiera un usuario y contrasea especficos. Estos servidores se denominan FTPs annimos y cuando se nos pidan estos datos debemos establecer en ambos casos (usuario y contrasea) la palabra anonymous,
tanto en el caso de los clientes FTP como en el acceso va navegador.

24

El navegador

Los elementos de Internet Explorer

GUA VISUAL 1

Barra de estado: muestra informacin sobre el navegador, el sitio y los procesos entre ambos.
rea de visualizacin: aqu se muestra el contenido de la pgina web.
Botn Atrs: permite volver a la pgina anterior.
Botn Adelante: si navegamos hacia atrs, permite acceder a la pgina siguiente.
Botn Detener: detiene la carga de la pgina web solicitada.
Botn Actualizar: recarga la pgina actual.
Botn Inicio: se dirige a la pgina inicial establecida en Internet Explorer.
Barra de ttulo: muestra el ttulo de la pgina web.
Barra de mens: a travs de los diversos mens permite acceder a todas las
funciones que ofrece Internet Explorer.
Favoritos: muestra una barra lateral con todos los marcadores.
Historial: despliega una barra lateral con todos los sitios visitados ltimamente.
Barra de direcciones: nos permite escribir las direcciones web para luego acceder a ellas mediante el botn Ir o la tecla ENTER.
Botones de control de la ventana: permiten cerrar minimizar, maximizar y restaurar la ventana del navegador.

25

CREACIN DE SITIOS WEB

TRANSFERENCIA DE ARCHIVOS: FTP


Adems del servicio web y el protocolo HTTP, otra de las herramientas que usaremos durante los ejercicios y explicaciones de este libro es el FTP (File Transfer
Protocol). Es fundamental aclarar que no pertenece al mbito de la Web sino por
el contrario, se trata de un protocolo de comunicaciones diferente del HTTP,
que resulta mucho ms eficiente y seguro en la transferencia de grandes cantidades de datos. El servicio de FTP ser de vital importancia a la hora de subir
contenidos a nuestro servidor web.
Al igual que el protocolo HTTP, el FTP tambin necesita de un servidor y de un
cliente. El servidor podr instalarse paralelamente al servidor web, al igual que
el cliente puede ser instalado en simultneo con el navegador.
As como el HTTP utiliza el puerto 80, en FTP usa el puerto 21 de forma predeterminada, aunque estos valores pueden ser modificados en el momento en
que configuramos nuestro servidor.

Figura 9. Los sitios FTP se muestran con la misma


estructura de carpetas que un directorio local.

En algunos navegadores web tambin se nos da la posibilidad de acceder a sitios


FTP, lo que har mucho ms eficaces y rpidas nuestras tareas de subida y bajada de archivos. Esto lo lograremos aclarndole al browser que en lugar de una direccin de Internet, se trata de un sitio FTP al que deseamos acceder, por lo que
en lugar del prefijo http://, tendremos que colocar ftp://. El FTP cuenta tambin con un sistema de seguridad de usuario y contrasea.
26

Transferencia de archivos: FTP

En el caso de un cliente especfico de FTP, la configuracin de estos parmetros


ser fcil, pero en el caso de que queramos acceder a un sitio FTP por medio de
nuestro navegador, tendremos que incorporar estos dos elementos dentro de la
direccin FTP que ingresamos, por lo que sta quedara de la siguiente manera:
ftp://usuario:contrasea@servidor.
Supongamos que nuestro servidor FTP fuera, por ejemplo, una empresa comercial espaola denominada FixServer, por lo que la direccin del servidor FTP de
la misma es fixserver.com.es, y nuestro usuario y contrasea fueran usuario1 y
usr1 respectivamente. Lo que deberamos escribir en la barra de direcciones de
nuestro navegador sera ftp://usuario1:usr1@fixserver.com.es.

RESUMEN
Durante la lectura del captulo transcurrido pudimos aprender y comprender todos los conceptos bsicos que hay que tener en cuenta para comenzar con la planificacin y el desarrollo
de un sitio web profesional. En el prximo captulo seguiremos incorporando conocimientos,
pero ms especficamente acerca de los criterios y objetivos que hay que decidir antes de comenzar con la creacin prctica del sitio.

27

ACTIVIDADES
TEST DE AUTOEVALUACIN
1 Qu diferencia existe entre Internet y la
World Wide Web?
2 Explique las propiedades del protocolo y el
lenguaje predeterminados de la Web.

ACTIVIDADES PRCTICAS
Averige en Internet acerca de otras redes
posteriores a sta, como la ARPANet.
Busque informacin acerca de los otros
navegadores disponibles. Si le es posible
descargue alguno, instlelo en su PC y

3 Qu es un dominio?
4 Explique la funcin de un browser. D dos
ejemplos.
5 Para qu sirve el sistema de DNS?

comprelo con Internet Explorer.


Investigue sobre los restantes protocolos
de Internet (adems de HTTP y FTP).
Averige alguna direccin FTP y trate de
acceder a ella mediante su explorador.

6 Explique FTP.
Infrmese acerca de diferentes clientes
7 Explique el mtodo de transaccin de datos
entre un cliente y un servidor web.
8 Qu son las cookies?
9 Nombre y explique la funcin de tres de los
elementos que componen a Internet Explorer.
10 Cules son las maneras de acceder a un
sitio FTP?

28

FTP. Descargue alguno, instlelo y acceda


a la direccin del punto 4 mediante l.