Desarrollo de sitios Web dinmicos

Introduccin
HTML
XHTML
CSS
Generacin de pginas dinmicas en el servidor

INTRODUCCIN
El sitio Web es el medio ms barato para darse a conocer rpidamente con un alcance mundial. Esto es extensible
no slo a empresas que comercializan productos y servicios, o bien a profesionales autnomos, lo mismo les
sucede a las personas o a las organizaciones que actan sin nimo de lucro, tratando de divulgar sus obras,
inquietudes o ideas.
Los sitios Web ofrecan antiguamente casi de forma exclusiva contenidos basados en texto y eran
bastanteestticos; en la actualidad son sitios interactivos con abundancia de elementos multimedia (imgenes,
iconos, botones, barras espaciadoras, documentos, grficos animados, msica de fondo, animaciones, fragmentos
de vdeos de baja calidad, etc.).
Antes de que se popularizaran los lenguajes de desarrollo Web, la forma clsica de realizar un sitio Web consista
en escribir las pginas directamente con cdigo HTML a travs de un editor Web. Esta tarea es factible cuando se
trata de sitios con muy poco contenido y que no se actualizan con frecuencia, pero se convierte en desesperante en
aquellos sitios con muchos contenidos y que incorporan novedades con asiduidad. Por ejemplo, si se quieren
realizar en HTML cambios sobre algn elemento comn a todas las pginas del sitio, se deben aplicar en todas las
pginas, una por una, con lo que se convierte en un trabajo muy tedioso. Los lenguajes de desarrollo Web intentan
facilitar las tareas de los creadores de aplicaciones, de manera que se automaticen los procesos y se multipliquen
las posibilidades.
De este modo, mientras mediante HTML slo es posible crear sitios Web estticos, mediante los lenguajes de
desarrollo Web se pueden crear sitios Web dinmicos. Un sitio Web dinmico es uno que puede tener cambios
frecuentes en la informacin. Cuando el servidor Web recibe una peticin para una determinada pgina de un sitio
Web, la pgina se genera automticamente por el software como respuesta directa a la peticin de la pgina. Es
decir, una pgina Web dinmica es una pgina que permite al usuario interactuar con ella, que permite actualizar
los datos ofrecidos sin tener que ser editada de nuevo y que contiene efectos especiales.
Para crear una pgina dinmica no basta con programar en HTML, ya que este lenguaje, como veremos, es muy
limitado. Es necesario combinar HTML con otros lenguajes, como Perl, PHP, JSP, ASP.NET, JavaScript, Java, etc.
La generacin del contenido dinmico puede suceder en el servidor o en el cliente, emplendose por lo general
lenguajes distintos en cada caso, si bien hay lenguajes que pueden trabajar segn ambos paradigmas. Cada lenguaje
tiene unas reglas de programacin y un funcionamiento distinto. A la combinacin de estos elementos se le conoce
como HTML dinmico o DHTML (Dynamic HTML).

Figura 1: Sitio Web de "El Mundo" con componentes dinmicos y multimedia

1

HTML
El HTML (HyperText Markup Language) o lenguaje de marcas de hipertexto, es el lenguaje estndar en el que se
crean las pginas Web de Internet. La sintaxis y semntica bsica de HTML est definida en el estndar de HTML
del W3C (World Wide Web Consortium), el consorcio internacional encargado del desarrollo de los estndares de
la Web.
Un documento de hipertexto (hipertext) es aquel que contiene informacin cruzada con otros documentos, lo cual
nos permite realizar una lectura no secuencial pasando de una seccin o documento a otro desde la misma
aplicacin con la que lo estamos visualizando mediante los denominados enlaces (links). Los enlaces son palabras
o frases generalmente resaltadas y subrayadas, que aparecen en el texto y que dirigen al lector automticamente al
pulsar sobre ellos con el ratn a otras partes del documento o a un documento diferente, pero con el que mantienen
alguna relacin.
HTML permite, adems, crear documentos de tipo multimedia, es decir, que contengan informacin ms all de
la simplemente textual, como por ejemplo: imgenes, vdeo, sonido, o animaciones. Los documentos HTML, cuya
extensin es .htm o .html, se conforman como documentos de texto plano, en los que todo el formato del texto
se especifica mediante marcas de texto o etiquetas (tags), que delimitan los contenidos a los que afecta la etiqueta
(disponemos de etiquetas de inicio y de final de marcado). Algunos ejemplos de etiquetas son: <head></head>,
<body></body>, <h1></h1>, etc.
Los navegadores (browsers) son unas herramientas software gratuitas, que se comunican con los servidores Web
mediante el protocolo HTTP (Hypertext Transfer Protocol) o protocolo de transferencia de hipertexto, leen las
instrucciones HTML y las presentan al usuario segn se indica. La identificacin de los distintos servidores en la
Red se realiza mediante su identificador uniforme de recurso o URL (Universal Resource Locator).
En nuestros das, el desarrollo Web se realiza mediante editores WYSIWYNG, que permiten manipular los
ficheros de forma ms potente y cmoda. Los editores WYSIWYG (What You See Is What You Get), que
podramos traducir por lo que ves es lo que obtienes, han sido creados especficamente para facilitar el diseo de
sitios Web. Estos programas incluyen generalmente diferentes visualizaciones en su interfaz (cdigo fuente
HTML, ventana WYSIWYG, visin de etiquetas HTML realzadas), que pueden seleccionarse mediante un
intuitivo sistema de pestaas. Entre los editores desarrollados especficamente para construir documentos HTML
estn FrontPage, Dreamweaver o NVU.

Figura 2: Edicin Web con NVU y acceso a su centro de ayuda.

XHTML
XHTML (eXtensible Hypertext Markup Language) o lenguaje de marcas de hipertexto extendido, tambin
desarrollado por el W3C, es un lenguaje ms potente que HTML, que naci precisamente con el objetivo de
remplazar a HTML ante sus limitaciones de uso con las cada vez ms abundantes herramientas basadas en XML.
XHTML extiende HTML combinando su sintaxis, diseado para mostrar datos, con la de XML, diseado para
describir los datos. Es decir, XHTML es la versin XML de HTML, por lo que tiene, bsicamente, las mismas
funcionalidades, pero cumple las especificaciones, ms estrictas, de XML. Su objetivo es avanzar en el proyecto
del W3C de lograr una Web semntica, donde la informacin y la forma de presentarla, estn claramente
separadas. La Web Semntica, tambin conocida por Web 3.0, es una Web extendida dotada de mayor significado,
en la que cualquier usuario en Internet podr encontrar respuestas a sus preguntas de forma ms rpida y sencilla
gracias a una informacin mejor definida.
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos bsicos a cumplir en lo
que a cdigo se refiere; por ejemplo: estructuracin coherente dentro del documento donde se incluiran elementos
correctamente anidados, etiquetas y sus atributos en minsculas, elementos cerrados correctamente, atributos de
valores entrecomillados, etc. La extensin de los ficheros XHTML es .xhtml.
En la actualidad HTML y XHTML coexisten en Internet y los navegadores soportan indistintamente ambos
lenguajes. XHTML se emplea en varias aplicaciones como en los sitios Web destinados a dispositivos mviles, en
aplicaciones empresariales y en un creciente nmero de aplicaciones Web como el software para crear blogs.

CSS
Las hojas de estilo en cascada o CSS (Cascading Style Sheets) son un conjunto de reglas que indican al navegador
cmo visualizar los elementos del documento al que se aplican, permitiendo as la disociacin entre contenidos y
su presentacin. Esto facilita mucho el diseo y el mantenimiento de las pginas, pues se puede variar la
presentacin de una pgina (tipo y tamao de letra, mrgenes, colores, etc.), o de todo el conjunto de ellas, sin tener
que introducirse en su cdigo HTML.
En general, cada etiqueta HTML define sus propias reglas para mostrar el texto que engloba. Con las hojas de
estilo podemos cambiar cada una de estas reglas y, por lo tanto, el comportamiento de cada etiqueta. Incluso,
gracias a las clases, se pueden definir variaciones de diseo no asociadas a ninguna clase en concreto, pero que
podemos asociar a etiquetas concretas.
Hay tres maneras de aadir estilos a nuestras pginas Web:
Aadiendo instrucciones de estilo slo a etiquetas concretas o a un grupo de ellas. Es la opcin ms utilizada,
pero no facilita la disociacin entre el contenido y su presentacin.
Incluyendo el bloque de estilo en la cabecera de una pgina concreta. Esto permite cambiar la apariencia de
una hoja entera, cambiando unas pocas lneas.
Enlazando todas las pginas que componen un sitio del Web con un fichero con extensin .css- que
contiene la hoja de estilo. De esta manera, se puede cambiar la apariencia de mltiples pginas retocando un
solo fichero.
Podemos utilizar en nuestras pginas uno, dos o los tres mtodos descritos. Para evitar conflictos entre los distintos
mtodos, el orden de precedencia (de mayor a menor) es el indicado en la enumeracin anterior. Lo ms prctico es
utilizar el tercer mtodo -enlace a una hoja de estilo-, para dar una apariencia consistente a todas las pginas, y si es
necesario modificar un aspecto concreto en alguna de ellas, utilizar el segundo o el primero.

GENERACIN DE PGINAS DINMICAS EN EL SERVIDOR

Las pginas Web pueden generarse dinmicamente mediante varias secuencias de comandos en el servidor. Una
vez que el navegador las recibe, las trata como pginas HTML normales y simplemente las despliega. Por ejemplo,
cuando un usuario rellena los distintos campos de un formulario y hace clic en el botn de envo, se enva un
mensaje al servidor con toda esta informacin. Ahora esta informacin deber ser entregada a un programa o a una
secuencia de comandos para que los procesen. Por lo general, el procesamiento implica el uso de la informacin
proporcionada por el usuario para buscar un registro en una base de datos del disco del servidor y generar una
pgina HTML personalizada para regresarla al cliente.
3

En una pgina Web dinmica en el servidor, la base de datos almacena y suministra la informacin que se le
presentar al usuario, con la gran ventaja de que la informacin puede variar segn el usuario, horario, etc. Una vez
tengamos claro que nos interesa un sitio Web dinmico, deberemos definir qu tecnologa usar y qu base de datos.
Existen varias opciones para elegir el gestor de la base de datos: Oracle, PostgreSQL, Microsoft SQL Server,
MySQL, etc. Todos ellos pueden usarse para pginas Web dinmicas, aunque dependiendo de la plataforma del
servidor Web (Apache, IIS, Tomcat, etc.) y del lenguaje de programacin Web utilizado (Perl, PHP, JSP, etc.), se
usa ms una u otra.
CGI
La forma tradicional de manejar formularios y otras pginas Web interactivas es un sistema estndar
denominadoCGI (Common Gateway Interface) o interfaz de puerta de enlace comn. En una aplicacin CGI, el
servidor Web pasa las solicitudes del cliente a un programa externo. La salida de dicho programa es enviada al
cliente en lugar del archivo esttico tradicional. Por lo general, estos programas son secuencias de comandos
escritas en lenguajePerl, aunque algunas veces se emplea Python e incluso lenguajes compilados (C, C++, Java,
etc.).
Perl es un lenguaje de programacin interpretado -no requiere de un proceso de compilacin previo-, derivado del
lenguaje de programacin C pero ms sencillo, extraordinariamente potente y flexible, y muy extendido entre
administradores de sistemas y desarrolladores Web. La base de programas y herramientas existentes en Perl es muy
grande, lo que le podr ayudar a la mejora de su pgina Web sin muchas dificultades.
Perl permite manipulaciones sencillas de ficheros y textos, as como la extraccin y manipulacin de cadenas de
caracteres, unidas a unas bsquedas rpidas y sencillas. Esta caracterstica ha sido tremendamente utilizada en la
interpretacin de formularios y generacin de pginas dinmicas Web mediante CGI y de ah la razn de su xito.
Una reciente utilidad de este lenguaje se encuentra en el procesamiento de documentos XML.
Si queremos trabajar con Perl en el servidor Web ser necesario tener instalado el intrprete del lenguaje. Por
convencin, los ficheros tienen la extensin .pl o .cgi y se suelen ubicar en el directorio cgi-bin.

PHP
Las secuencias de comandos CGI no son la nica forma de generar contenido dinmico en el servidor. Otra forma
muy comn y ms sencilla es introducir pequeas secuencias de comandos y hacer que sea el servidor mismo quien
las ejecute para generar la pgina. Un lenguaje muy popular es PHP (PHP Hypertext Pre-processor). La principal
ventaja frente a ASP.NET, JSP o ColdFusion, es que es gratuito. Symfony es un potente entorno gratuito de
desarrollo de aplicaciones basado en PHP.
PHPes un lenguaje de cdigo abierto interpretado de alto nivel, especialmente pensado para desarrollos Web y el
cual puede ser embebido en pginas HTML. La mayora de su sintaxis es similar a C, Java y Perl. Es un lenguaje
relativamente fcil y muy verstil, porque funciona con la mayor parte de los sistemas operativos y servidores.
Permite realizar muchos tipos de aplicaciones Web rpidamente gracias a su gran librera de funciones y
documentacin.
Para utilizar PHP, el servidor Web debe entenderlo. Por lo general, las pginas Web que contienen comandos PHP
(dentro de la etiqueta <?php ?>) tienen una extensin .php en vez de .html. En cualquier caso, el cliente
nunca ve el cdigo PHP, sino los resultados que produce en cdigo HTML.
4

ASP.NET
Tambin es muy importante ASP (Active Server Pages), la alternativa que ofrece Microsoft para generar sitios
Web dinmicos, conjuntamente con su software servidor IIS (Internet Information Server). Desde su primera
versin ha evolucionado hasta denominarse ASP.NET y estar dentro de la plataforma .NET.
Una de las principales ventajas de ASP.NET es la gran cantidad de lenguajes que soporta, destacando: VB.NET
(que deriva del Visual Basic); C# (una versin mejorada de C++) y JScript.NET (que deriva de
JavaScript). ASP.NET constituye un entorno abierto en el que se puede combinar cdigo HTML, scripts y
componentes ActiveX del servidor para crear soluciones dinmicas y de calidad para la Web. El Proyecto Mono lo
ha llevado a Linux, Solaris, Mac y Unix. Las pginas que utilizan esta tecnologa tienen la extensin .asp.
JSP
Otra tcnica es JSP (Java Server Pages), que es similar a PHP, excepto que la parte dinmica se escribe en el
lenguaje de programacin Java en vez de PHP.
JSP est desarrollado por Sun Microsystems y es una tecnologa Java que permite generar contenido dinmico para
Web, en forma de documentos HTML, XML o de otro tipo. De este modo, las JSP permiten la utilizacin de
cdigo Java mediante scripts. Adems es posible utilizar algunas acciones JSP predefinidas mediante etiquetas.
Estas etiquetas pueden ser enriquecidas mediante la utilizacin de libreras de etiquetas (taglibs) externas e incluso
personalizadas. Las pginas que utilizan JSP tienen la extensin .jsp.
ColdFusion
Es un entorno de desarrollo Web dinmico y un servidor Web que permite trabajar con distintos lenguajes como
ASP, PHP, JSP, etc. Integra el ColdFusion Markup Language un lenguaje creado por Macromedia (ahora Adobe)
cuyo funcionamiento se basa en etiquetas especiales integradas sobre el cdigo HTML.
ColdFusion es una plataforma que se puede ejecutar de forma concurrente con la mayora de los servidores Web de
Windows, Mac, Linux y Solaris.
GENERACIN DE PGINAS DINMICAS EN EL CLIENTE
Las secuencias de comandos CGI, PHP, ASP.NET, JSP y ColdFusion resuelven el problema de manejar
formularios e interacciones de bases de datos en el servidor. Pueden aceptar informacin entrante de formularios,
buscar informacin en bases de datos y generar pginas HTML con los resultados.
Sin embargo, ninguno de ellos puede responder a los movimientos del ratn o interactuar de manera directa con los
usuarios. Para ello es necesario tener secuencias de comandos incrustadas en pginas HTML que se ejecuten en la
mquina cliente y no en el servidor. Las secuencias de tales comandos son posibles comenzando con la etiqueta
<script>. El lenguaje de secuencias de comandos ms popular para cliente es JavaScript. En este caso, todo el
trabajo se realiza de manera local en el navegador, no hay contacto con el servidor, por lo que generalmente es ms
rpido. Otras alternativas populares son los applets de Java, los controles ActiveX y las animaciones Flash.
Los usos de JavaScript y PHP son completamente diferentes. PHP, ASP y JSP se utilizan cuando es necesaria la
interaccin con una base de datos remota. JavaScript se utiliza cuando la interaccin es con el usuario en la
mquina cliente. Es posible y comn tener pginas que utilicen PHP y JavaScript u otros lenguajes
simultneamente, aunque stas no pueden hacer el mismo trabajo. JavaScript, por ejemplo, es muy empleado para
comprobar la validez de los campos introducidos en el formulario antes de realizar el envo al servidor, conseguir
efectos visuales y sonoros, textos en movimiento, utilidades (relojes, calendarios, programas educativos, juegos
interactivos, etc.), etc.

JavaScript
JavaScript -que no tiene relacin con Java a pesar de su nombre- es un lenguaje de scripts interpretado que est
embebido en los navegadores Web (el propio navegador es el intrprete y no hay mquinas virtuales para ello). De
este modo, permite a los desarrolladores Web crear pginas HTML dinmicas que procesen la entrada del usuario y
que sean capaces de gestionar datos persistentes usando objetos especiales, archivos y bases de datos relacionales.
El cdigo JavaScript para cliente se integra directamente en pginas HTML (a veces por modularidad se separa en
ficheros con extensin .js) y es interpretado, en su totalidad, por el cliente Web en tiempo de ejecucin, sirviendo
as para todos los sistemas operativos. Puesto que con frecuencia es necesario ofrecer el mayor rendimiento
posible, las aplicaciones JavaScript desarrolladas para servidores se pueden compilar antes de instalarlas en dichos
servidores.
AJAX (Asynchronous JavaScript And XML) es un trmino que engloba a la utilizacin de varias tecnologas,
para crear aplicaciones Web dinmicas que se ejecutan en el cliente mediante JavaScript y XML, junto a XHTML
y HTML con CSS. Puesto que permiten realizar cambios sobre la misma pgina sin necesidad de recargarla, se
consigue un notable aumento de interactividad, velocidad y usabilidad.
Java
Los applets son pequeos programas de Java que se han compilado -extensin .class- en instrucciones de
mquina para una computadora virtual llamada JVM (Java Virtual Machine). Java es un lenguaje de programacin
orientado a objetos desarrollado por Sun Microsystems basndose en el lenguaje C++. Aunque es tambin un
lenguaje de carcter general, su principal caracterstica es la de ser independiente de cualquier plataforma. Mientras
los applets se almacenan en el servidor pero se ejecutan en el lado cliente previa descarga, los servletsson
aplicaciones que se almacenan y ejecutan en el servidor (sustituyen a las CGI).
Si en una de nuestras pginas hemos referenciado a un applet (mediante la etiqueta <applet>), cuando un usuario
cargue la pgina, recibir del servidor dicho applet (al igual que ocurre con una imagen o sonido), y se ejecutar en
su navegador. Debido a que los subprogramas de Java se interpretan en vez de ejecutarse directamente, el
intrprete Java puede evitar que realicen acciones que puedan daar la seguridad del PC.
ActiveX
La respuesta de Microsoft a los applets de Java fueron los controles ActiveX. Active X define unas normas para el
desarrollo de objetos COM (Component Object Model), pudiendo ser generados con multitud de lenguajes (Visual
Basic, Java, C++, etc.). Se trata as de programas compilados -extensin .ocx, ".dll" o ".exe"- y ejecutados en el
hardware. Cuando el navegador ve un control ActiveX en una pgina Web, lo descarga, verifica su identidad y lo
ejecuta.
Los controles ActiveX son muy rpidos y verstiles, pero tradicionalmente han presentado problemas de seguridad.
Tambin tienen problemas de compatibilidad con plataformas distintas a Windows.
Flash
Flash de Adobe (antes Macromedia) es otro medio para integrar aplicaciones dentro de una pgina Web que ha
desbancado a Java. Adobe ha creado en torno a Flash una herramienta muy amigable y multiplataforma para crear
animaciones y aplicaciones, e incluso ofrecer vdeo y audio en streaming. Los ficheros que genera con extensin
.swf- son muy compactos, se transmiten rpidamente y pueden visualizarse durante su descarga, siendo adems
compatibles con la mayora de los navegadores existentes.
Los diseadores de la Web utilizan Flash para crear controles de navegacin, logotipos animados, animaciones de
gran formato con sonido sincronizado e incluso sitios Web con capacidad sensorial. Flash le permite animar
objetos para dar la impresin de que se mueven por la pantalla, as como cambiar su forma, tamao, color,
opacidad, rotacin y otras propiedades. Tambin puede crear animacin fotograma a fotograma, creando una
imagen diferente para cada fotograma. Otra posibilidad consiste en crear una animacin interpolada, es decir, crear
los fotogramas primero y ltimo de una animacin y dejar que Flash cree los fotogramas intermedios. Las pelculas
Flash son grficos vectoriales compactos que se descargan y se adaptan de inmediato al tamao de la pantalla del
usuario. Para soportar Flash, se debe instalar el plugin Flash Player en el navegador.