1.

Esquema de funcionamiento de un servicio web

La World Wide Web, WWW, o la Web es sin duda el servicio ms extendido y utilizado
en Internet hoy en da.
Se trata de la contribucin ms importante en la difusin de Internet, lo que ha
supuesto un verdadero cambio a todos los niveles de la Sociedad.
En la actualidad, todos los aspectos tecnolgicos relacionados con la WWW son coordinados
por el World Wide Web Consortium (W3C), formado por un conjunto de entidades pblicas y
privadas cuya responsabilidad es coordinar los estndares, normas y promocin de la Web.
La tecnologa en la que se basa la Web es muy simple. Consta de los siguientes
elementos generales:

Un mecanismo para la localizacin de los recursos (archivos) o URL (Universal Resource

Locator).
Un "lenguaje de programacin" sencillo para escribir las pginas Web, basado en
enlaces de Hipertexto llamado HTML (HiperText Markup Language).
Un protocolo de comunicaciones llamado HTTP (Hipertext Transfer Protocol).
Una herramienta de navegacin o visualizador (browser) de las pginas Web escritas
en HTML, contenidas en servidores cuyo acceso se realiza mediante una URL.

En realidad, podra entenderse WWW como una red de informacin mundial basada
en el HTTP, a travs del que accedemos mediante visualizadores a infinidad de recursos
Hipermedia unidos entre s mediante Hiperenlaces. La telaraa mundial ha conseguido
atrapar a todas las reas de la actividad humana de forma que estn presentes en ella
servidores pblicos de informacin accesible a cualquier usuario de Internet que la necesite.
La informacin que desea ponerse en la Web, se disea en forma de pginas para ser
leda secuencialmente como si de un libro se tratase. La lectura secuencial slo se altera
cuando en las pginas se encuentran enlaces de Hipertexto (hipervnculos) que permiten
avanzar varios prrafos o apartados en la misma pgina, o saltar a otra pgina de la Web
situada en otro servidor diferente.
Los hipervnculos, como hemos visto, son fcilmente detectables por aparecer
normalmente subrayados y en un color diferente, de forma que se identifican clara y
rpidamente.
Al conjunto de pginas referentes al mismo tema almacenadas en un mismo servidor
Web se le denomina Sitio Web (website). Las pginas iniciales o principales de estos sitios web
suelen llamarse pgina principal o pgina principal predeterminada (home page) y suelen
organizarse a modo de ndices de lo que contiene todo el sitio web.

El protocolo HTTP (Protocolo de Transferencia de Hipertexto) es el responsable de

garantizar la comunicacin entre los clientes y servidores Web. Situado en el nivel de
Aplicacin del modelo o pila de protocolos TCP/IP, emplea el conocido TCP (Protocolo de
Control de Transporte) como protocolo para el correcto transporte de la informacin.
Bajo el paradigma cliente/servidor, los usuarios utilizarn los clientes Web (Internet
Explorer, Firefox, Opera, Safari, etc) para solicitar a los servidores la transmisin de pginas.
Esta transmisin siempre ser en sentido descendente pues a los clientes Web no les est
permitido la transferencia de pginas al servidor (sentido ascendente). Cuando se solicita una
pgina Web se genera una peticin HTTP por el navegador que ser enviada hasta el servidor
Web (Internet Information Server, Apache, etc) a travs una conexin TCP particular,
independiente de las anteriores. La forma de actuar por pasos ser:

El cliente establece la conexin con el servidor Web

El cliente le enva una peticin
El servidor responde a esa peticin
El servidor cierra la conexin (HTTP/1.0)

NOTA: HTTP usa el puerto TCP 80 por defecto en los servidores Web, por el que se permite el acceso al mismo por
parte y se negocia la comunicacin con los clientes Web (browser).

Los Localizadores Uniformes de Recursos se conocen mejor por las siglas URL. Una URL
es una cadena de texto (con un formato determinado) que identifica de manera UNVOCA un
recurso dentro de la red. La informacin que contiene una URL es la siguiente:
Protocolo de comunicaciones que hay que utilizar para obtener el recurso (p.e.,
GOPHER, FTP, HTTP, TELNET, etc.).
Lugar donde se encuentra, referido al Host que aloja el recurso (p.e., ftp.ifes.es,
www.ifes.es, www.w3.org, pablo.ifes.es, localhost, 158.49.107.41:81, etc.).
Nombre del Recurso, indicando la ubicacin dentro de la mquina donde se encuentra
(p.e., /pub/programa.zip, /ait/ejemplos.htm, /index.htm, etc.). Puede incluir una
cadena de consulta.
Por tanto, el formato general que puede tener una URL sera el siguiente:
protocolo://host:puerto/camino/recurso[?consulta]
Los navegadores, visualizadores o browsers de contenidos Web son los programas
clientes usados para navegar por la WWW y visualizar la informacin obtenida de los
servidores.
Se denomina aplicacin web a aquellas aplicaciones que los usuarios pueden utilizar
accediendo a un servidor web a travs de Internet o de una intranet mediante un navegador.
En otras palabras, es una aplicacin software que se codifica en un lenguaje soportado por los
navegadores web en la que se confa la ejecucin al navegador.
Las aplicaciones web son populares debido a lo prctico del navegador web como
cliente ligero, a la independencia del sistema operativo, as como a la facilidad para actualizar y
mantener aplicaciones web sin distribuir e instalar software a miles de usuarios potenciales.

Aunque existen muchas variaciones posibles, una aplicacin web est normalmente
estructurada como una aplicacin de tres-capas. En su forma ms comn, el navegador web
ofrece la primera capa y un motor capaz de usar alguna tecnologa web dinmica (ejemplo:
PHP, Java Servlets o ASP, ASP.NET, CGI, ColdFusion, embPerl, Python o Ruby on Rails)
constituye la capa de en medio. Por ltimo, una base de datos constituye la tercera y ltima
capa.
El navegador web manda peticiones a la capa de en medio que ofrece servicios
valindose de consultas y actualizaciones a la base de datos y a su vez proporciona una interfaz
de usuario.

Modelo cliente/servidor
Un proceso o una aplicacin pueden proporcionar unos servicios a los clientes que son
los que usan esos servicios.
Cuando un proceso o una aplicacin desea un servicio se enva un mensaje solicitando
ese servicio: una peticin. El proceso que cumple el servicio se llama servidor y el solicitante se
llama
cliente.

Los procesos clientes y servidores han de seguir un protocolo de comunicaciones que defina:
Cmo se codifican las peticiones
Cmo se sincronizan los procesos para las distintas peticiones.
La forma de sincronizacin nos dice si el cliente puede seguir adelante justo despus
de enviar la peticin, o por el contrario tiene que esperar a que el servidor le enve una
respuesta.
Funciones del servidor en un modelo cliente/servidor:

Aceptar los requerimientos de bases de datos que hacen los clientes.

Procesar requerimientos de bases de datos.
Formatear datos para trasmitirlos a los clientes.
Procesar la lgica de la aplicacin y realizar validaciones a nivel de bases de
datos.

Funciones del cliente en un modelo cliente/servidor:

Administrar la interfaz de usuario.

Interactuar con el usuario.
Procesar la lgica de la aplicacin y hacer validaciones locales.
Generar requerimientos de bases de datos.
Recibir resultados del servidor.
Formatear resultados.

2. Lenguajes de marcas
Un lenguaje de marcas es una forma de codificar un documento que, junto con el
texto, incorpora etiquetas o marcas que contienen informacin adicional acerca de la
estructura del texto o su presentacin. El lenguaje de marcas ms extendido es el HTML,
fundamento del World Wide Web. Los lenguajes de marcado suelen confundirse con lenguajes
de programacin. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene
funciones aritmticas o variables, como s poseen los lenguajes de programacin.
Existen otros lenguajes de marcado, aparte de HTML en el mundo de WWW, como:
XHTML, Wireless ML, Handhelp ML, RDF Y Meta Content Framework.
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es
el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para
describir la estructura y el contenido en forma de texto, as como para complementar el texto
con objetos tales como imgenes. HTML se escribe en forma de etiquetas, rodeadas por
corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia
de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el
comportamiento de navegadores web y otros procesadores de HTML.

Cdigos HTML bsicos

<html>: define el inicio del documento HTML, le indica al navegador que lo que viene

a continuacin debe ser interpretado como cdigo HTML

<script>: incrusta un script en una web, o se llama a uno mediante src="url del
script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript
text/javascript.
<head>: define la cabecera del documento HTML; esta cabecera suele contener

informacin sobre el documento que no se muestra directamente al usuario. Como por

ejemplo el ttulo de la ventana del navegador. Dentro de la cabecera <head> podemos
encontrar:

<title>: define el ttulo de la pgina. Por lo general, el ttulo aparece en la

barra de ttulo encima de la ventana.

<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link

rel="stylesheet" href="/style.css" type="text/css">.

<style>: para colocar el estilo interno de la pgina; ya sea usando CSS, u

otros lenguajes similares. No es necesario colocarlo si se va a vincular a un

archivo externo usando la etiqueta <link>.

<meta>: para metadatos como la autora o la licencia, incluso para indicar

parmetros http (mediante http-equiv="") cuando no se pueden modificar

por no estar disponible la configuracin o por dificultades con server-side

scripting.

<body>: define el contenido principal o cuerpo del documento. Esta es la

parte del documento html que se muestra en el navegador; dentro de esta

etiqueta pueden definirse propiedades comunes a toda la pgina, como color
de fondo y mrgenes. Dentro del cuerpo <body> podemos encontrar
numerosas etiquetas. A continuacin se indican algunas a modo de ejemplo:

<h1> a <h6>: encabezados o ttulos del documento con diferente relevancia.

<table>: define una tabla.

<tr>: fila de una tabla.

<td>: celda de una tabla (debe estar dentro de una fila).

<a>: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el
parmetro de pasada por medio del atributo href. Por ejemplo: <a
href="http://www.wikipedia.org">Wikipedia</a> se representa

como Wikipedia).

<div>: divisin de la pgina. Se recomienda, junto con css, en vez de <table>

cuando se desea alinear contenido.

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se
encuentra la imagen. Por ejemplo: <img src="./imgenes/mifoto.jpg"
/>. Es conveniente, por accesibilidad, poner un atributo alt="texto
alternativo".

<li><ol><ul>: etiquetas para listas.

<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta

<strong>).

<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta

<em>).

<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta

<del>).

<u>: texto subrayado.

La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal
como se muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table>.

<script>Cdigo de un [[script]] integrado en la

pgina</script>.

Nociones bsicas de HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos bsico,
como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que
admita texto sin formato como GNU, Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++,
entre otros.
Existen adems, otros editores para la realizacin de sitios web con caractersticas
WYSIWYG (What You See Is What You Get, o en espaol: lo que ves es lo que obtienes).
Estos editores permiten ver el resultado de lo que se est editando en tiempo real, a medida
que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de
realizar sitios web, sino que una forma un tanto ms simple ya que estos programas, adems
de tener la opcin de trabajar con la vista preliminar, tiene su propia seccin HTML la cual va
generando todo el cdigo a medida que se va trabajando. Algunos ejemplos de editores
WYSIWYG son KompoZer, Microsoft FrontPage, o Macromedia Dreamweaver.
Las etiquetas bsicas o mnimas son:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>
Seleccionando la opcin ver cdigo fuente en el navegador, se puede ver realmente
la informacin que est recibiendo ste y cmo la est interpretando. Por ejemplo: en Internet
Explorer o en Firefox, simplemente hay que desplegar el men ver y luego elegir cdigo
fuente. De esta forma, se abrir el editor de texto configurado como predeterminado en el
sistema con el cdigo fuente de la pgina que se est viendo en ese momento en el
explorador. Otra forma ms rpida consiste en hacer clic con el botn derecho del ratn en
cualquier punto del rea donde el navegador muestra la pgina web y elegir ver cdigo
fuente.
Para el navegador Firefox existe el plugin Firebug, un depurador que permite entre
otras cosas visualizar el cdigo HTML de la pgina que estamos visualizando de forma
dinmica, y que incluso resalta el trozo de cdigo por el que est pasando el ratn en cada

momento, por lo que es una herramienta muy til para aprender diversos conceptos de este
lenguaje.
El diseo en HTML aparte de cumplir con las especificaciones propias del lenguaje
debe respetar unos criterios de accesibilidad web, siguiendo unas pautas, o las normativas y
leyes vigentes en los pases donde se regule dicho concepto. Se encuentra disponible y
desarrollado por el W3C a travs de las Pautas de Accesibilidad al Contenido Web 1.0 WCAG
(actualizadas recientemente con la especificacin 2.0), aunque muchos pases tienen
especificaciones propias, como es el caso de Espaa con la Norma UNE 139803.

Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de
archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y
de presentacin de los contenidos: tipo, fuente y tamao de letras, justificacin del texto,
colores y fondos, etc. Las hojas de estilo permiten liberar la composicin del texto de los
aspectos visuales y favorecen que se estructure y anote mediante cdigos que permiten un
tratamiento ms eficaz de los contenidos. Dos lenguajes de hojas de estilo son CSS y XSL.
La versin actual, HTML 4.0 se public el 24 de Abril de 1998, entre sus novedades
destacaron la utilizacin de hojas de estilos CSS, la posibilidad de incluir pequeos programas o
scripts, la mejora de la accesibilidad de las pginas diseadas, tablas complejas y agilidad en
los formularios. Con este nuevo estndar lleg una plataforma para entretener a los
navegantes de Internet con juegos y aplicaciones desarrollados en otros lenguajes como Java.
En el ao 2004, las empresas Apple, Mozilla y Opera se organizaron para formar la
asociacin Web Hypertext Application Technology Working Group (WHATWG), cuya actividad
se centra en el futuro estndar HTML 5.
Nota: Borrador oficial -> http://dev.w3.org/html5/spec/Overview.html

Ejemplo de pgina HTML sencilla:

< HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pgina (chispas). Por el
momento no se que tendr, pero dentro de poco
pondr aqu muchas cosas interesantes.
</BODY>
</HTML>

Otro ejemplo de pgina HTML:

<html>
<head>
<title> Mi Segundo html </title>
</head>
<body background="imagenes/fondo.jpg" text="#FFFFFF">

<font face="verdana" size="3" color="#FFFF66"><b>Estoy comenzando a programar en html, es sencillo y

lo voy a aprender muy bien.</b></font>
<hr color="#FFCC33" size="20" width="50%" align="center" noshade>
<p>Realizar un salto de prrafo que no es lo mismo que un salto de lnea, por eso estoy realizando luego
del punto y aparte un salto de prrafo.<p>Realizar un salto de prrafo que no es lo mismo que un salto de lnea, por
eso aqu estoy realizando luego
del punto y aparte un salto de prrafo.<p>
</body>
</html>

3. Lenguajes de scripts de navegador

Un lenguaje de script es un pequeo lenguaje de programacin cuyo cdigo se inserta
dentro del documento HTML. Este cdigo se ejecuta en el navegador del usuario al cargar la
pgina, o cuando sucede algo especial como puede ser el pulsar sobre un enlace.
Estos lenguajes permiten variar dinmicamente el contenido del documento, modificar
el comportamiento normal del navegador, validar formularios, realizar pequeos trucos
visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y
no en la mquina donde estn alojadas, por lo que no podrn realizar cosas como manejar
bases de datos.
Algunos lenguajes de script del lado del cliente son:
a. JAVASCRIPT
Javascript es un lenguaje de programacin utilizado para crear
pequeos programitas encargados de realizar acciones dentro del
mbito de una pgina web. Se trata de un lenguaje de programacin
del lado del cliente, porque es el navegador el que soporta la carga de
procesamiento. Su uso se basa fundamentalmente en la creacin de
efectos especiales en las pginas y la definicin de interactividades con
el usuario.
Las sentencias escritas en javascript se encapsulan entre las etiquetas
<script> y </script>. por ejemplo, si en el cdigo de una pgina Web
incluimos la sentencia
<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

b. APPLETS DE JAVA

Es otra manera de incluir cdigo a ejecutar en los

clientes que visualizan una pgina web. Se trata de
pequeos programas hechos en Java, que se transfieren
con las pginas web y que el navegador ejecuta en el
espacio de la pgina.
Los applets de Java estn programados en Java y precompilados, es
por ello que la manera de trabajar de stos vara un poco con respecto
a los lenguajes de script como Javascript. Los applets son ms difciles

de programar que los scripts en Javascript y requerirn unos

conocimientos bsicos o medios del lenguaje Java.
La principal ventaja de utilizar applets consiste en que son mucho
menos dependientes del navegador que los scripts en Javascript,
incluso independientes del sistema operativo del ordenador donde se
ejecutan. Adems, Java es ms potente que Javascript, por lo que el
nmero de aplicaciones de los applets podr ser mayor.
Como desventajas en relacin con Javascript cabe sealar que los
applets son ms lentos de procesar y que tienen espacio muy
delimitado en la pgina donde se ejecutan, es decir, no se mezclan con
todos los componentes de la pgina ni tienen acceso a ellos. Es por ello
que con los applets de Java no podremos hacer directamente cosas
como abrir ventanas secundarias, controlar Frames, formularios,
capas, etc.

c. VISUAL BASIC SCRIPT

Es un lenguaje de programacin de scripts del lado del cliente, pero
slo compatible con Internet Explorer. Es por ello que su utilizacin
est desaconsejada a favor de Javascript.
Est basado en Visual Basic, un popular lenguaje para crear
aplicaciones Windows. Tanto su sintaxis como la manera de trabajar
estn muy inspirados 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 versin reducida del primero.
El modo de funcionamiento de Visual Basic Script para construir
efectos especiales en pginas web es muy similar al utilizado en
Javascript y los recursos a los que se puede acceder tambin son los
mismos: el navegador.
Ejemplo de script en Javascript:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--function HolaMundo() {
alert("Hola, mundo!");
}
// --->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">

</FORM>
</BODY>
</HTML>

4. Lenguajes de scripts de servidor

Algunos lenguajes de script del lado del servidor son:
a. CGI
Es el sistema ms antiguo que existe para la programacin
de las pginas dinmicas de servidor. Actualmente se
encuentra un poco desfasado por diversas razones entre las que
destaca la dificultad con la que se desarrollan los programas y la
pesada carga que supone para el servidor que los ejecuta.
Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo,
otros lenguajes como C, C++ o Visual Basic pueden ser tambin
empleados para construirlos.
b. PERL
Perl es un lenguaje de programacin interpretado, al igual
que muchos otros lenguajes de Internet como Javascript o
ASP. Esto quiere decir que el cdigo de los scripts en Perl no se compila
sino que cada vez que se quiere ejecutar se lee el cdigo y se pone en
marcha interpretando lo que hay escrito. Adems es extensible a partir
de otros lenguajes, ya que desde Perl podremos hacer llamadas a
subprogramas escritos en otros lenguajes. Tambin desde otros
lenguajes podremos ejecutar cdigo Perl.
c. ASP
ASP (Active Server Pages) es la tecnologa desarrollada
por Microsoft para la creacin de pginas dinmicas
del servidor. ASP se escribe en la misma pgina web, utilizando el
lenguaje Visual Basic Script o Jscript (Javascript de Microsoft).
d. PHP
PHP es el acrnimo de Hipertext Preprocesor. Es un
lenguaje de programacin del lado del servidor gratuito
e independiente de plataforma, rpido, con una gran librera de
funciones y mucha documentacin.
e. JSP
JSP es un acrnimo de Java Server Pages, que en

castellano vendra a decir algo como Pginas de Servidor Java. Es, pues,
una tecnologa orientada a crear pginas web con programacin en
Java. Con JSP podemos crear aplicaciones web que se ejecuten en
variados servidores web, de mltiples plataformas, ya que Java es en
esencia un lenguaje multiplataforma. Por tanto, las JSP podremos
escribirlas con nuestro editor HTML/XML habitual.
Lenguajes del lado cliente-servidor
a. DHTML
DHTML no es precisamente un lenguaje de
programacin. Ms bien se trata de una nueva
capacidad de la que disponen los navegadores
modernos, por la cual se puede tener un mayor control sobre la pgina
que antes.
Cualquier pgina que responde a las actividades del usuario y realiza
efectos y funcionalidades se puede englobar dentro del DHTML, pero
en este caso nos referimos ms a efectos en el navegador por los
cuales se pueden mostrar y ocultar elementos de la pgina, se puede
modificar su posicin, dimensiones, color, etc.
DHTML nos da ms control sobre la pgina, gracias a que los
navegadores modernos incluyen una nueva estructura para visualizar
en pginas web denominada capa. Las capas se pueden ocultar,
mostrar, desplazar, etc.
Para realizar las acciones sobre la pgina, como modificar la apariencia
de una capa, seguimos necesitando un lenguaje de programacin del
lado del cliente como Javascript o VBScript.
En la actualidad, DHTML tambin puede englobar la programacin en
el servidor.
Dentro del concepto de DHTML se engloban tambin las Hojas de
Estilo en Cascada o CSS (Cascade Style Sheets).
b. XML
XML es una tecnologa en realidad muy sencilla que tiene a
su alrededor otras tecnologas que la complementan y la
hacen mucho ms grande y con unas posibilidades mucho mayores.
XML, con todas las tecnologas relacionadas, representa una manera
distinta de hacer las cosas, ms avanzada, cuya principal novedad
consiste en permitir compartir los datos con los que se trabaja a todos
los niveles, por todas las aplicaciones y soportes.

5. Hojas de estilo (CSS)

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten
aplicar formato a los documentos escritos en HTML (y en otros lenguajes estructurados, como
XML) separando el contenido de las pginas de su apariencia. Para el diseador, esto significa
que la informacin estar contenida en la pgina HTML, pero este archivo no debe definir
cmo ser visualizada esa informacin. Las indicaciones acerca de la composicin visual del
documento estarn especificadas en el archivo de la CSS.
Veamos primero como trabaja el cdigo HTML. En HTML, las etiquetas (tags) le indican
al navegador los elementos que componen la pgina y ste aplica el formato a cada elemento
en particular, por ejemplo:
<H1>Ttulo</H1>

especifica que el texto "Ttulo" es un Encabezado (Heading) de nivel 1 dentro de los 6 niveles
definidos por HTML. El navegador aplicar a ese texto el formato predeterminado (que vara
un poco si se trata de Internet Explorer, Firefox, o si usamos Windows, Mac o Linux).
Si quisiramos componer los encabezados H1 con tipografa Arial, de 19 puntos, en color azul y
alineacin central, deberamos especificarlo del siguiente modo:
<H1 ALIGN="center">
<FONT FACE="Arial" COLOR="#0000FF" SIZE="5">
Ttulo</FONT>
</H1>

Por supuesto, esto debera repetirse en cada encabezado H1 de cada pgina de nuestro sitio.
Las Hoja de Estilo no utilizan el archivo de la pgina Web para especificar el formato de la
pgina (en realidad, a veces pueden hacerlo, como veremos ms adelante). En su lugar, usan
un archivo de texto puro con extensin .CSS que luego se vincula a la pgina.
Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una o ms
declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaracin tiene dos
partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso, 19pt). Estas reglas
son las que determinan cmo deber mostrarse la pgina.
Nuevamente, si quisiramos componer los encabezados H1 con tipografa Arial, de 19 puntos,
en color azul y alineacin central, el archivo CSS debera contener el siguiente texto:
H1 {
font-family: Arial, Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;

Luego, en cada pgina de nuestro sitio agregamos un link a la Hoja de Estilo:

<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">

El elemento LINK especifica:

el tipo de vnculo: a una hoja de estilo ("stylesheet")

la ubicacin de la hoja de estilo a travs del atributo "href"
el tipo de hoja de estilo que se vincula: "text/css"

Ahora, todos los encabezado H1 de las pginas que contienen la referencia al archivo de la CSS
tendrn el aspecto que hemos definido.
Hemos visto cmo las reglas de estilo se especifican en un archivo externo. Este mtodo es el
ms recomendable y el que permite mayor flexibilidad: los estilos pueden cambiarse sin tocar
el cdigo HTML y la CSS puede ser compartida por varias pginas.
Tambin existe la posibilidad de poner la hoja de estilo dentro de una pgina HTML usando el
elemento STYLE.
<HTML>
<HEAD>
<TITLE>CSS incrustada</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Ttulo color azul</H1>
<P>Un prrafo cualquiera...
</BODY>
</HTML>

Este mtodo permite aplicar la hoja de estilo solamente a la pgina que la contiene. Si bien no
es tan prctico como usar una CSS externa, resulta til cuando en nuestro sitio tenemos
algunas pocas pginas que usan un formato distinto al resto.
En muchos casos convendr usar ambos mtodos simultneamente: poner un link a una hoja
externa para aplicar un estilo general y luego crear una hoja incrustada en la que solamente
deberemos definir las reglas especficas para esa pgina. Por las leyes de cascada de las CSS, en
caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada) con
distintos valores, tiene preponderancia la definida en la hoja incrustada.
Por ltimo, tambin es posible aplicar el estilo directamente en la etiqueta HTML:
<P STYLE="text-align: left; text-indent: 1em">

Si consideramos los ejemplos anteriores, resultan evidentes algunas ventajas:

1. Con una Hoja de Estilo podemos alterar la presentacin de cada elemento sin tocar el
cdigo HTML, ahorrando esfuerzo y tiempo de edicin. Si quisiramos alinear a la
izquierda los encabezados H1 de nuestras pginas, bastara con cambiar en la CSS la
declaracin "text-align: center" por "text-align: left" e inmediatamente cada H1 se
alineara a la izquierda en todas las pginas vinculadas a la Hoja de Estilo. De este
modo no slo simplificamos el mantenimiento del sitio sino que adems reducimos las
posibilidades de cometer errores.
2. El lenguaje de las CSS ofrece herramientas de composicin ms potentes que HTML.
Hemos especificado en los ejemplos una fuente alternativa genrica (Sans-serif) para
el caso de que la mquina del usuario no contenga la Arial (en HTML no existen estas
fuentes genricas). Con HTML, el tamao de la fuente se especifica con un sistema de
medidas predeterminadas por el browser (en el ejemplo, SIZE=5), con las CSS hemos
especificado el tamao en puntos tipogrficos (y podemos hacerlo en cm, pixeles,
cuadratines, altura de la x, etc.). Ms an, las CSS permiten aplicar prcticamente
todas las propiedades a cualquier elemento de la pgina, mientras que HTML slo
permite un nmero limitado de propiedades para cada elemento.
3. Se evita tener que recurrir a trucos para conseguir algunos efectos. Con CSS no es
necesario usar imgenes invisibles para hacer una sangra (la propiedad text-indent se
encarga de eso) o usar una tabla para ubicar un elemento en determinado lugar de la
pantalla (las CSS permiten posicionar con precisin cualquier elemento).
4. El lenguaje de las Hojas de Estilo, aunque muy potente, es relativamente sencillo y fcil
de aprender.
5. Los documentos que usan CSS generalmente resultan ms compactos.
6. Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una
cascada de estilos con la informacin de cada una.
7. Pueden usarse con otros lenguajes de programacin (como JavaScript) para conseguir
efectos dinmicos en las pginas.
8. Se pueden especificar Hojas de Estilo para diferentes navegadores y tipos de medios
(impresos, braille, auditivos, etc.).
9. El usuario con alguna discapacidad (o simplemente por preferencias) puede definir su
propia Hoja de Estilo y la regla !important obliga a su navegador a suplantar la Hoja de
Estilo del autor.
En cuanto a las desventajas en el uso de las Hojas de Estilo, la nica de importancia es
el soporte irregular que tienen las CSS por parte de los navegadores. Ciertas propiedades que
funcionan en un browser no funcionan en otros, o existen diferencias en un mismo navegador
segn sea para Windows o Mac. Tambin existen diferencias entre distintas versiones de un
mismo browser.
Esto puede provocar que:

1. Nuestra pgina sea visualizada por el lector con un formato no deseado por nosotros.
En todo caso, el navegador aplicar el formato predeterminado y nuestro trabajo de
composicin habr sido intil.
2. Algunas propiedades de las CSS (como las que afectan la posicin o visibilidad de los
elementos) pueden provocar que una parte del contenido de nuestra pgina resulte
inaccesible desde ciertos navegadores si no son utilizadas correctamente.
Debe entenderse que las Hojas de Estilo fueron diseadas para permitir que los
autores influyan en la composicin de la pgina, pero no para que la controlen. Una CSS
sugiere al browser un estilo de composicin para el documento pero no puede forzarlo a
aplicar un formato determinado.
Las Hojas de Estilo son una herramienta que puede resultar muy efectiva para lograr
una presentacin atractiva de la pgina siempre que la pgina no sea dependiente de la Hoja
de Estilo. Se debe considerar en todo momento aquellos navegadores que no soportan CSS,
cuidando que los mismos puedan mostrar la pgina correctamente y en su totalidad an
cuando nuestras reglas de estilo no sean aplicadas.

6. Herramientas de diseo web

Hoy en da contina la discusin acerca de la conveniencia o no de emplear editores
WYSISYG o no. Algunos diseadores prefieren seguir escribiendo el cdigo directamente sobre
un editor de texto plano, al estilo del Bloc de Notas de Microsoft, otros prefieren los editores
de texto especializados en lenguajes web y de programacin, otros prefieren los editores de
texto con ventana de vista previa, mientras que otros emplean la opcin ms avanzada, que
son los editores WYSIWYG.

Editores de texto plano y navegador

Generan el archivo HTML, las hojas de estilo y los scripts sobre una o varias hojas de
texto plano y valoran los resultados directamente sobre el o los navegadores. Este mtodo es
el ms primitivo, aunque no ha perdido vigencia. Durante el aprendizaje de los lenguajes de
diseo web y de programacin, todos los centros de enseanza inician el estudio de HTML,
XHTML y CSS con este rudimentario mtodo. Y la razn es que es el mejor mtodo para
conocer a fondo los lenguajes de diseo y programacin. La generacin de cdigo a partir de
editores de texto plano implica necesariamente la comprensin plena del funcionamiento del
sistema.
Los diseadores web que emplean esta opcin desechan la ayuda que constituye el
software especializado. No tiene muchas ventajas sobre el resto de los mtodos, solo la
certeza de que quienes lo hacen tienen un pleno dominio de los diferentes lenguajes. Como
mtodo de aprendizaje, seguramente sea el mejor, ya que el conocimiento del lenguaje deja
de ser una opcin para ser absolutamente obligatorio. Siempre, y no solo para quienes optan
por este sistema de trabajo, es necesario contar con varios navegadores, siendo el mnimo
recomendado de tres, ya que las diferencias en la interpretacin del cdigo por parte de los
navegadores, obliga a visualizar las pginas en ms de un navegador.

Editores de texto especializados en HTML y CSS

Se emplean editores de texto, pero que tienen algunas funciones especializadas en los
lenguajes de diseo web y programacin, como autocompletado de etiquetas de cierre,
coloreado de acuerdo a la sintaxis del lenguaje, posibilidad de seleccionar las etiquetas de una
barra de herramientas y otras muy variadas. Por ejemplo, cuando se escribe una lnea de
cdigo, sta no adquiere los diferentes colores correspondientes a la sintaxis hasta que no est
correctamente escrita. Para visualizar los resultados, emplean uno o ms navegadores, a los
que, tras cada cambio, se le hace click en el botn refrescar para ver los mismos.
El desarrollo del diseo web y el creciente nmero de diseadores ha planteado la
posibilidad de crear herramientas especializadas en la escritura de cdigos. La cantidad de
editores de este tipo existentes es enorme, siendo en su mayora gratuitos, aunque algunos
son de pago o forman parte de paquetes de software para diseadores web. Otra
caracterstica que los diferencia a unos de otros, es la especializacin en los diferentes
lenguajes. Algunos editores tienen soporte casi exclusivamente para HTML, aun cuando
colorean varios lenguajes ms, mientras que otros editores tienen herramientas especiales
para diferentes tipos de lenguajes, incluyendo los lenguajes de programacin.

Editores de texto especializados con ventana de vista previa

Se cuenta con una herramienta en el editor que hace las veces de navegador, por lo
que pueden ir viendo los cambios que van efectuando a medida que los van haciendo.
Comparten muchas de las caractersticas descriptas para el grupo de editores
anteriores, con el elemento distintivo de poseer entre sus herramientas un visor en tiempo
real (generalmente en la misma ventana que se escribe el cdigo) que permite al diseador
web observar el resultado de lo que se encuentra escribiendo sin tener que ir a la ventana del
navegador y refrescar la pgina.

Editores WYSIWIG

Los editores WYSIWYG son algo bastante ms complejo, y consiste en (tal como indica
la sigla que les da nombre: What You See Is What You Get Lo que ves es lo que obtienes) la
creacin de pginas web arrastrando y colocando, completado por elementos que permiten
modificar los atributos de los elementos que se van colocando.
Tambin cuenta entre sus herramientas la edicin de los cdigos sobre texto plano,
aunque su mejor herramienta es la ventana donde el diseador realiza las modificaciones

arrastrando y soltando con el ratn, en un sistema similar al que se emplea en procesadores

de texto como Microsoft Word o Writer.
Algunos de estos editores son de manejo tan sencillo, que para muchas de las tareas
propias del diseo de pginas web no se requiere conocimiento de lenguaje HTML. Sin
embargo, a la hora de darle atributos a los diferentes componentes de la pgina, el diseador
deber contar con conocimientos bsicos de HTML y CSS.

Eleccin del editor HTML

Cada diseador debe desarrollar su mtodo de trabajo, aquel con el que se sienta ms
cmodo. No existen recetas preestablecidas y hay tantas formas de trabajar como
diseadores. Lo mismo sucede con el software que se ha de seleccionar. En una primera
instancia, el diseador debe elegir el mtodo que emplear y luego probar herramientas hasta
encontrar una que lo satisfaga.
A continuacin damos las descripciones de algunos de los programas ms conocidos,
pero solo son algunos de una muy amplia gama.

Algunos editores de texto especializados

Bluefish

Desarrollado inicialmente para Linux, en la actualidad hay versiones para

otros sistemas operativos como Solaris, MacOS-X y otros, aunque no
existe una versin para Microsoft Windows.
Soporta varios archivos abiertos a la vez
Marcado de sintaxis personalizable para HTML, PHP, JSP, SQL, XML, CSS, Javascript,
Python, Perl, Pascal y otros.
Asistentes para creacin de documentos.
Asistentes para la creacin de tablas y marcos.
Soporta diferentes juegos de caracteres.
Dilogos para la insercin de imgenes.
Traducido a 22 idiomas, entre los que se encuentra el espaol.
Gratuito.
Licencia GPL.

Weaverslave

Desarrollado para Windows, es compatible con todas las versiones de este sistema
operativo desde Windows 95.
Totalmente portable
Puede trabajar con varios archivos a la vez.
Marcado con colores de sintaxis para DHTML, CSS, JS, PHP (4 y 5), MySQL, PERL, C, C++
y otros.
Ventana de colores.
Inspector de etiquetas.
Navegador de archivos e imgenes.
Traducido a varios idiomas (incluidos) entre los que est el espaol.
Gratuito.
Software propietario.

Editores de texto con ventanas de vista previa

Aptana

Windows, MacOS-X y Linux.

Cliente FTP.
Posibilidad de instalar un plug-in que permite la escritura en el
lado del servidor.
Panel de vista previa Firefox e Internet Explorer.
Soporte principal para HTML, XHTML y CSS, aunque tambin cuenta con herramientas
para Php, Python, Ruby, CSS, Ajax, HTML y Adobe AIR.
Marcado de sintaxis por colores.
Una muy variada serie de herramientas y dilogos.
Gratuito.
GNU / GPL.

Arachnophilia

Unix, Linux, MacOS-X y Windows

Ventana de vista previa.
HTML, CSS, JS, C++, CGI, PERL, Java y otros.
Marcado de sintaxis en colores.
Gratuito.
Software propietario.

HTML-kit

Este software solo es compatible con Microsoft Windows

95 en adelante.
Ventana de vista previa mltiple.
Validacin de cdigo.
Cliente FTP.
HTML, XHTML, XML, CSS, XSL, PHP, ASP, VB, C/C++, SQL, Java, Javascript, Delphi, Perl
Sugerencias y sistema de correccin de errores.
Gratis.
Software propietario.

Editores WYSIWYG

Adobe Dreamweaver

Versiones para Windows y MacOS-X.

Se le considera el editor ms potente, pero tambin el ms pesado y el de mayores
requerimientos de hardware.
Ventana de visualizacin.
Sugerencias de cdigo.
Herramientas avanzadas para imgenes de Photoshop (PSD).
Utiliza CSS.
Datos dinmicos (sencillos) sin empleo de XML ni bases de datos.
Diseo sin escritura de cdigo (aunque el usuario puede modificar el cdigo
manualmente).
Alto costo
Software propietario.

NVU

Multiplataforma
ltima versin estable: 1.0 de junio de 2005. En la actualidad se ha
abandonado su desarrollo.
Cliente FTP.
Edicin de cdigo fuente.
Marcos, formularios, tablas, plantillas de diseo, hojas de estilo CSS, etc.
Gratis.
MPL / GPL / LGPL.

Amaya

Multiplataforma
Navegador.
Genera pginas HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML
2.0, muchas caractersticas CSS 2.
Renderizado de imgenes.
Herramientas para imgenes vectoriales (SVG).
Edicin WYSIWYG.
Gratuito.
Licencia W3C.

7. Relacin entre pginas web y bases de datos

Unos de los tipos ms comunes de pginas web dinmicas son los vinculados a bases de
datos. Esto significa que las pginas web cogen la informacin de una base de datos (la
pgina web est conectado a la base de datos a travs de la programacin,) e inserta la
informacin en la pgina web cada vez que esta se carga.
Si la informacin almacenada en la base de datos cambia, la pgina web conectada a la
base de datos tambin cambiar en consecuencia (y automticamente) sin intervencin
humana.
Por ejemplo, en los sitios web de organizaciones bancarias en lnea, donde se puede
acceder (con su nombre de usuario y contrasea) y ver el saldo de su cuenta bancaria, la
informacin de su cuenta bancaria se almacena en una base de datos que est conectada
a la pgina web a travs de la programacin (por ejemplo: PHP, ASP), permitindole
ver su informacin bancaria.
Imagnese si su informacin bancaria fuera actualizada y cambiada a mano cada vez que
su balance cambiara Sera totalmente imposible!!
En la Web, se suelen usar principalmente los siguientes tipos de bases de datos:
Access: Es una base de datos desarrollada por Microsoft comnmente utilizada bajo el
lenguaje ASP (Active Server Pages). Esta base de datos, debe ser creada bajo el
programa Microsoft Access el cual crea el archivo .mdb con la estructura ya explicada.
El programa usa un entorno grfico propio.
Cuando un sitio web requiere una solucin simple de base de datos bajo plataforma Windows,
Microsoft Access es una opcin muy comn.
De hecho, Access no es apropiado para un sitio web de trfico mediano o alto. Por supuesto
que no se puede comparar con Oracle o SQL Server.

MySQL: Es una base de datos con licencia GPL. Usualmente se utiliza el software
phpMyAdmin como soporte para administrar la base de datos.
MySQL es el servidor de bases de datos ms popular del alojamiento web actual. Es un
potentsimo sistema, muy fcil de utilizar y aprender a usar. La interaccin con PHP es total,
con lo cual, hay cientos de aplicaciones muy potentes para implementar con este par, que
permiten tener sitios dinmicos, de alta flexibilidad y bajsimo coste. MySQL funciona de
manera ptima en plataforma Unix/Linux.
MySQL es un sistema ideal para servidores compartidos o servidores virtuales, donde el
balance de carga de uso debe controlarse de manera permanente. El sistema ha demostrado
una gran estabilidad en sitios de alto trfico, y hasta en administracin de grandes bibliotecas.

SQL Server: Es una base de datos ms potente que Access y MySql. El SQL Server de Microsoft
es uno de los ms populares sistemas de bases de datos para la plataforma Windows. Si uno va
a manejar sitios de alto trfico en plataforma web es necesario pensar en este tipo de base de
datos, ya que Access ha demostrado ser de muy bajo rendimiento y alto consumo de recursos
para el tema hosting.
El SQL Server es un sistema de base de datos bastante robusto y con muchas funciones SQL
avanzadas. Al igual que con Oracle, el inconveniente es el alto coste de las licencias para su uso
y el hardware de "grueso calibre" que necesitan en el servidor para poder funcionar sin ser
lentos.

Oracle
Oracle tambin es un software para bases de datos muy popular para sitios web apoyados en
bases online de muy alto trfico y altos niveles de consulta. Su fiabilidad es muy buena, es muy
estable y cuenta con un buen soporte tcnico de la empresa.
Oracle es un sistema robusto, potente y completo de base de datos relacional SQL. Es
importante tener en cuenta que para poder correr Oracle como base de datos se requerir de
un servidor dedicado, ya que ningn proveedor de alojamiento web provee este tipo de base
de datos dentro de las plataformas habituales de alojamiento "estndar". Tambin se le
solicitar al cliente que pague las licencias correspondientes que varan en funcin de la
potencia requerida (cantidad de consultas esperables, etc.).

PostgreSQL
PostgreSQL es otro motor para bases de datos ideal para plataforma Unix/Linux. Es de altsima
estabilidad, grandes prestaciones y bajo coste. Tiene un set de instrucciones SQL que para
muchos programadores avanzados resulta mucho ms completo que otros sistemas como el
MySQL.
En lo que respecta a la facilidad para conseguirlo, PostgreSQL es un software de bases de datos
apto para funcionar, al igual que MySQL, en un entorno de servidores compartidos o
servidores virtuales. El tema es que al consumir mayor cantidad de recursos, se podr acceder
a PostgreSQL en servidores virtuales de gama media y alta.

Resumen:

Los sistemas web apoyados en bases de datos dependen mucho de la plataforma en la que
deban correr. Si bien los sistemas diseados para Unix/Linux pueden correr bajo Windows, los
sistemas de bases de datos para Windows no corren en plataforma Unix. Evidentemente el

monopolio Microsoft no quiere que sus productos sean compatibles, a diferencia de lo que
sucede con los sistemas de fuente abierta como MySQL o PostgreSQL.

Si se quiere correr MySQL se puede optar por servidores Unix/Linux o Windows.

Servidores compartidos de gama media y baja pueden correr MySQL, dependiendo del
trfico esperado/soportado.
Si se quiere correr PostgreSQL se puede optar por servidores Unix/Linux o Windows,
pero generalmente solo se encuentra en el mercado oferta sobre Unix/Linux; en
servidores compartidos, solo se consigue en servidores de gama alta.
Si se quiere correr Oracle se necesitan servidores dedicados, por la demanda alta de
recursos que no permiten el uso de servidores compartidos.
Si se quiere correr Microsoft SQL Server hay que usar plataforma Windows. Requiere
alto soporte de hardware o es lento
Si se quiere correr MS Access hay que tener un servidor Windows. Es una plataforma
de poco rendimiento para sitios de medio y alto trfico.

Los Sitios web vinculados a bases de datos pueden ser construidos usando algunas de
las tecnologas disponibles, cada una con sus ventajas respectivas. Algunas de estas
tecnologas/herramientas son: PHP, JSP, ASP, PERL, etc
En ASP se necesitar instalar el Personal Web Server o Internet Information Server.
En PHP necesitar instalar otro servidor. Podran servir varios, pero nuestro consejo es
instalar el Apache, que tiene versiones tanto para Windows como para Linux. En
sistemas Windows, tambin puedes utilizar Personal Web Server o Internet Information
Server.
Por lo que respecta a las bases de datos, dependiendo del lenguaje, tambin podrs
encontrar tiles unas u otras bases de datos. En ASP podras utilizar Access (se
encuentra en el Office de Microsoft) o SQL Server.
En cuanto a PHP, puedes utilizar muy diversas bases de datos, desde Access o SQL
Server, hasta MySQL, Oracle o decenas de otras opciones.