 |
Introducción a los lenguajes
del web |
Indice del manual de lenguajes del
web
Bienvenidos a la introducción a los lenguajes del web.
Para empezar podemos ver el índice que vamos a seguir y los objetivos a
cubrir.
Vamos a estudiar de manera global el
mundo de la programación de páginas web. Para ello empezaremos estudiando
rápidamente algunos conceptos básicos, que seguramente muchos ya sabremos, como
el marco donde la web se desarrolla, qué es una página web, cómo se construye
una página y el lenguaje HTML. Además veremos qué es una página estática y
dinámica distinguiendo entre páginas dinámicas de cliente y servidor.
Nos detendremos con mayor profundidad en la presentación de cada uno de
los lenguajes que tenemos a nuestra disposición para construir páginas web,
enmarcados en el ámbito donde se ejecutan: cliente o servidor.
Para
finalizar, conoceremos el lenguaje XML y las tecnologías relacionadas con él,
para entender porqué es tan importante este lenguaje y cómo se desarrollan las
webs que lo utilizan.
Informe de Miguel Angel
Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Introducción a la web
La web se
encuadra dentro de Internet, no es más que un servicio de los muchos que presta
la Red, entre los que podemos encontrar
- Correo electrónico
- IRC o chat
- FTP
- El propio web
1.1 Web es un sistema Hipertexto/Hipermedia
El sistema con el que está construido el web se llama hipertexto y es un
entramado de páginas conectadas con enlaces.
Los sistemas de hipertexto
se utilizan en otros contextos aparte del web, como la ayuda del Windows. Son
muy fáciles de utilizar y también es muy fácil encontrar lo que buscamos
rápidamente, gracias a que pulsando enlaces vamos accediendo a la información
que más nos interesa.
La web no solo se limita a presentar textos y
enlaces, sino que también puede ofrecernos imágenes, videos, sonido y todo tipo
de presentaciones, llegando a ser el servicio más rico en medios que tiene
Internet. Por esta razón, para referirnos al sistema que implementa el web
(hipertexto), se ha acuñado un nuevo término que es hipermedia, haciendo
referencia a que el web permite contenidos multimedia.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Lenguaje HTML
Una página web la vemos
en nuestro navegador, o cliente web, y parece una sola entidad, pero no es así,
está compuesta por multitud de diferentes ficheros, como son las imágenes, los
posibles vídeos y lo más importante: el código fuente.
El código de las
páginas está escrito en un lenguaje llamado HTML, que indica básicamente donde
colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser
colocados en la página.
El HTML se creó en un principio con objetivos
divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter
multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles
usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en
un futuro.
el lenguaje consta de etiquetas que tienen esta forma
<B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B>
significa que se escriba en negrita (bold) o <P> significa un párrafo,
<A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente
etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la
etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir
en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan
para definir la forma o estilo que queremos aplicar a nuestro documento.
<B>Esto está en negrita</B>.
Partes de un documento HTML
Un documento HTML ha de estar delimitado por la etiqueta
<html> y </html>. Dentro de este documento, podemos asimismo
distinguir dos partes principales:
El encabezado, delimitado por
<head> y </head> donde colocaremos etiquetas de índole informativo
como por ejemplo el titulo de nuestra página.
El cuerpo, flanqueado por
las etiquetas <body> y </body>, que será donde colocaremos nuestro
texto e imágenes delimitados a su vez por otras etiquetas como las que hemos
visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son
importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador:
Texto e imágenes
</body>
</html>
Con todo
lo que conocemos ya sobre HTML podemos construir una página web que ya tiene
bastante sentido. Vemos un ejemplo a continuación.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para
Todos</b>.</p>
<p>Aquí aprenderás
recetas fáciles y deliciosas.</p>
</body>
</html>
Podemos ver esa página en marcha para hacernos una idea exacta de los
resultados.
| Referencia: Para aprender todos los detalles del
lenguaje HTML tenemos en DesarrolloWeb.com un Manual de HTML que
hará las delicias de sus lectores.
Ir al Manual de
HTML. |
Informe de
Miguel Angel Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Páginas estáticas Vs. dinámicas
En la
web podemos encontrar, o construir, dos tipos de páginas:
- Las que se presentan sin movimiento y sin funcionalidades más allá de los
enlaces
- Las páginas que tienen efectos especiales y en las que podemos
interactuar.
Las primeras páginas son las que denominamos páginas
estáticas, se construyen con el lenguaje HTML, que no permite grandes florituras
para crear efectos ni funcionalidades más allá de los enlaces.
Estas
páginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a los
desarrolladores como a los visitantes, ya que sólo se pueden presentar textos
planos acompañados de imágenes y a lo sumo contenidos multimedia como pueden ser
videos o sonidos
El segundo tipo de páginas se denomina página dinámica.
Una página es dinámica cuando se incluye cualquier efecto especial o
funcionalidad y para ello es necesario utilizar otros lenguajes de programación,
aparte del simple HTML.
Mientras que las páginas estáticas todo el mundo
se las puede imaginar y no merecen más explicaciones, las páginas dinámicas son
más complejas y versátiles. Para aclarar este concepto, veremos con detalle a
continuación qué son las páginas dinámicas.
| Referencia: En DesarrolloWeb.com tenemos otro
manual que explica también las diferencias entre páginas estáticas y
dinámicas, pero desde otro punto de vista. El manual también introduce
seriamente en el concepto de página dinámica y puede ser de utilidad su
lectura.
Ir al Manual de
páginas dinámicas. |
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Páginas dinámicas
Como hemos visto,
una página es dinámica cuando realiza efectos especiales o implementa alguna
funcionalidad o interactividad.
Además, hemos visto que para
programar una página dinámica necesitaremos otros lenguajes aparte del HTML. Sin
embargo, nunca hay que olvidarse del HTML, ya que éste es la base del desarrollo
web: generalmente al escribir una página dinámica el código de los otros
lenguajes de programación se incluye embebido dentro del mismo código HTML.
Una razón por la que construiremos una página dinámica es la simple
vistosidad que pueden alcanzar los trabajos, ya que podemos hacer presentaciones
más entretenidas de las que se consiguen utilizando únicamente HTML. Pero vamos
a ver con calma algunas razones menos obvias pero más importantes.
Supongamos que hemos decidido realizar un portal de televisión donde una
de las informaciones principales a proveer podría ser la programación semanal.
Efectivamente, esta información suele ser dada por las televisiones con meses de
antelación y podría ser muy fácilmente almacenada en una base de datos. Si
trabajásemos con páginas HTML, tendríamos que construir una página independiente
para cada semana en la cual introduciríamos "a mano" cada uno de los programas
de cada una de las cadenas. Asimismo, cada semana nos tendríamos que acordar de
descolgar la página de la semana pasada y colgar la de la actual. Todo esto
podría ser fácilmente resuelto mediante páginas dinámicas. En este caso, lo que
haríamos sería crear un programa (solo uno) que se encargaría de recoger de la
base de datos de la programación aquellos programas que son retransmitidos en
las fechas que nos interesan y de confeccionar una página donde aparecerían
ordenados por cadena y por hora de retransmisión. De este modo, podemos
automatizar un proceso y desentendernos de un aspecto de la página por unos
meses.
Este hecho lo podríamos aplicar a otras situaciones: podemos
preparar el horóscopo de todos los días, las promociones de un sitio de
e-comercio...
Podemos hacer una clasificación a las páginas dinámicas en
función de dónde se lleva a cabo el procesamiento de la página, es decir, el
computador que cargará con el peso adicional que supone que la página realice
efectos y funcionalidades.
| Referencia: Cabe señalar también en este punto la
existencia de otro manual que explica el concepto de página dinámica.
Puede ser de utilidad su lectura.
Ir al Manual de
páginas dinámicas. |
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Páginas dinámicas de cliente
Son las
páginas dinámicas que se procesan en el cliente. En estas páginas toda la carga
de procesamiento de los efectos y funcionalidades la soporta el navegador.
Usos típicos de las páginas de cliente son efectos especiales para webs
como rollovers o control de ventanas, presentaciones en las que se pueden mover
objetos por la página, control de formularios, cálculos, etc.
El código
necesario para crear los efectos y funcionalidades se incluye dentro del mismo
archivo HTML y es llamado SCRIPT. Cuando una página HTML contiene scripts de
cliente, el navegador se encarga de interpretarlos y ejecutarlos para realizar
los efectos y funcionalidades.
Las páginas dinámicas de cliente se
escriben en dos lenguajes de programación principalmente: Javascript y Visual
Basic Script (VBScript), que veremos en detalle más adelante. También veremos el
concepto de DHTML y conoceremos las CSS.
| Nota: Flash es una
tecnología, y un programa, para crear efectos especiales en páginas web.
Con Flash
también conseguimos hacer páginas dinámicas del lado del cliente. Como
este manual explica los lenguajes del web, no hemos incluido el Flash por
ninguna parte, porque no es un lenguaje. Sin embargo, si tuvieramos que
catalogarlo en algún sitio quedaría dentro del ámbito de las páginas
dinámicas de cliente. |
Las páginas del cliente son
muy dependientes del sistema donde se están ejecutando y esa es su principal
desventaja, ya que cada navegador tiene sus propias características, incluso
cada versión, y lo que puede funcionar en un navegador puede no funcionar en
otro.
Como ventaja se puede decir que estas páginas descargan al
servidor algunos trabajos, ofrecen respuestas inmediatas a las acciones del
usuario y permiten la utilización de algunos recursos de la máquina local.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Páginas dinámicas de servidor
Podemos
hablar también de páginas dinámicas del servidor, que son reconocidas,
interpretadas y ejecutadas por el propio servidor.
Las páginas del
servidor son útiles en muchas ocasiones. Con ellas se puede hacer todo tipo de
aplicaciones web. Desde agendas a foros, sistemas de documentación,
estadísticas, juegos, chats, etc. Son especialmente útiles en trabajos que se
tiene que acceder a información centralizada, situada en una base de datos en el
servidor, y cuando por razones de seguridad los cálculos no se pueden realizar
en el ordenador del usuario.
Es importante destacar que las páginas
dinámicas de servidor son necesarias porque para hacer la mayoría de las
aplicaciones web se debe tener acceso a muchos recursos externos al ordenador
del cliente, principalmente bases de datos alojadas en servidores de Internet.
Un caso claro es un banco: no tiene ningún sentido que el cliente tenga acceso a
toda la base de datos, sólo a la información que le concierne.
Las
páginas dinámicas del servidor se suelen escribir en el mismo archivo HTML,
mezclado con el código HTML, al igual que ocurría en las páginas del cliente.
Cuando una página es solicitada por parte de un cliente, el servidor ejecuta los
scripts y se genera una página resultado, que solamente contiene código HTML.
Este resultado final es el que se envía al cliente y puede ser interpretado sin
lugar a errores ni incompatibilidades, puesto que sólo contiene HTML
Luego es el servidor el que maneja toda la información de las bases de
datos y cualquier otro recurso, como imágenes o servidores de correo y luego
envía al cliente una página web con los resultados de todas las operaciones.
Para escribir páginas dinámicas de servidor existen varios lenguajes,
que veremos con detenimiento más adelante. Common Gateway Interface (CGI)
comúnmente escritos en Perl, Active Server Pages (ASP), Hipertext Preprocesor
(PHP), y Java Server Pages (JSP).
Las ventajas de este tipo de
programación son que el cliente no puede ver los scripts, ya que se ejecutan y
transforman en HTML antes de enviarlos. Además son independientes del navegador
del usuario, ya que el código que reciben es HTML fácilmente interpretable.
Como desventajas se puede señalar que será necesario un servidor más
potente y con más capacidades que el necesario para las páginas de cliente.
Además, estos servidores podrán soportar menos usuarios concurrentes, porque se
requerirá más tiempo de procesamiento para cada uno.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es Javascript
Javascript es un
lenguaje de programación utilizado para crear pequeños programitas encargados de
realizar acciones dentro del ámbito de una página web.
Se trata de un lenguaje de programación del lado del cliente, porque es el
navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad
con la mayoría de los navegadores modernos, es el lenguaje de programación del
lado del cliente más utilizado.
Con Javascript podemos crear efectos especiales en las páginas y definir
interactividades con el usuario. El navegador del cliente es el encargado de
interpretar las instrucciones Javascript y ejecutarlas para realizar estos
efectos e interactividades, de modo que el mayor recurso, y tal vez el único,
con que cuenta este lenguaje es el propio navegador.
Javascript es el
siguiente paso, después del HTML, que puede dar un programador de la web que
decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de
programación bastante sencillo y pensado para hacer las cosas con
rapidez, a veces con ligereza. Incluso las personas que no tengan una
experiencia previa en la programación podrán aprender este lenguaje con
facilidad y utilizarlo en toda su potencia con sólo un poco de práctica.
Entre las acciones típicas que se pueden realizar en Javascript tenemos
dos vertientes. Por un lado los efectos especiales sobre páginas web,
para crear contenidos dinámicos y elementos de la página que tengan movimiento,
cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite
ejecutar instrucciones como respuesta a las acciones del usuario, con lo que
podemos crear páginas interactivas con programas como calculadoras,
agendas, o tablas de cálculo.
Javascript es un lenguaje con muchas
posibilidades, permite la programación de pequeños scripts, pero también de
programas más grandes, orientados a objetos, con funciones, estructuras de datos
complejas, etc. Además, Javascript pone a disposición del programador todos los
elementos que forman la página web, para que éste pueda acceder a ellos y
modificarlos dinámicamente.
Con Javascript el programador, que se convierte en el verdadero dueño y
controlador de cada cosa que ocurre en la página cuando la está visualizando el
cliente.
| Ver también: Para que quede claro el lenguaje y
alguna aplicación práctica, que se puede hacer y entender rápidamente, se
puede acceder al artículo Efectos Rápidos con
Javascript. En dicho artículo veremos la implementación de un botón de
volver y la muestra de la última modificación de una página web.
|
Referencias
En DesarrolloWeb.com
hemos publicado un manual de
programación en Javascript, donde explicamos toda la sintaxis y metodología
de programaión.
Además, podemos acceder al Manual de Javascript II,
donde vamos a tratar de acercarnos a este lenguaje en profundidad y conocer
todos sus secretos y recursos disponibles.
También hemos hecho una
recopilación de scripts interesantes para hacer directamente una variada gama de
efectos y utilidades para páginas web. En nuestro Taller de Javascript.
Además de estos manuales, tenemos muchos otros recursos interesantes
sobre el lenguaje en nuestro buscador,
en la sección Javascript.
Informe de Miguel
Angel Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es Visual Basic Script
Es un
lenguaje de programación de scripts del lado del cliente, pero sólo compatible
con Internet Explorer. Es por ello que su utilización está desaconsejada a favor
de Javascript.
Está basado en Visual Basic, un popular lenguaje para
crear aplicaciones Windows. Tanto su sintaxis como la manera de trabajar están
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 versión
reducida del primero.
El modo de funcionamiento de Visual Basic Script
para construir efectos especiales en páginas web es muy similar al utilizado en
Javascript y los recursos a los que se puede acceder también son los mismos: el
navegador.
Como decimos, no debemos utilizar este lenguaje en la mayoría
de las ocasiones, aunque un caso donde tendría sentido utilizar Visual Basic
Script sería la construcción de una Intranet donde sepamos con toda seguridad
que los navegadores que se van a conectar serán siempre Internet Explorer. En
este caso, un programador habitual de Visual Basic tendría más facilidades para
realizar los scripts utilizando Visual Basic Script en lugar de Javascript.
| Nota: El popular ASP (Active Server Pages) es
una tecnología de programación del lado del servidor. Habitualmente, los
scripts ASP se escriben con Visual Basic Script también y eso no nos debe
liar. Visual Basic Script, por tanto, es un lenguaje que se puede utilizar
para la programación en el cliente, pero también para la programación en
el servidor.
En este artículo hemos hablado del lenguaje en su faceta del lado del
cliente, puesto que en la faceta del servidor tenemos muchos manuales,
pero están englobados dentro de la programación en ASP.
|
Referencias
En
DesarrolloWeb.com tenemos un manual de Visual Basic
Script, que resulta ser uno de los pocos que se encuentran el la Red sobre
esta materia. Está orientado a enseñar la sintaxis y la programación del lado
del cliente con el lenguaje.
Informe de Miguel
Angel Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
DHTML
DHTML no es precisamente un
lenguaje de programación. Más 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 página que antes.
Cualquier página que responde a las
actividades del usuario y realiza efectos y funcionalidades se puede englobar
dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador
por los cuales se pueden mostrar y ocultar elementos de la página, se puede
modificar su posición, dimensiones, color, etc.
DHTML nos da más control
sobre la página, gracias a que los navegadores modernos incluyen una nueva
estructura para visualizar en páginas web denominada capa. Las capas se pueden
ocultar, mostrar, desplazar, etc.
Para realizar las acciones sobre la
página, como modificar la apariencia de una capa, seguimos necesitando un
lenguaje de programación del lado del cliente como Javascript o
VBScript.
Aclaración: DHTML también puede englobar la
programación en el servidor.
Depende del autor que esté
describiendo lo que es DHTML, muchas veces hace también referencia a la
programación en el servidor y no sólo a la del cliente, como hemos
apuntado en este artículo. Nosotros también pensamos que en cierto modo
debería incluirse ese tipo de programación y así lo hemos constatado en un
artículo publicado con anterioridad en DesarrolloWeb sobre Qué es DHTML.
Dicho de otro modo y para que quede claro. Las fronteras del DHTML
quedan poco definidas. Las que marcamos en el presente artículo son sólo
las que engloban a los procesos en el cliente, pero también podríamos
decir que DHTML es cualquier cosa que hace una página dinámica, ya sea en
el cliente, el servidor o las dos cosas.
|
Dentro del concepto de DHTML se engloban
también las Hojas de Estilo
en Cascada o CSS (Cascade Style Sheets), que veremos a continuación.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es CSS
CSS, es una tecnología que
nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos
mucho más dueños de los resultados finales de la página, pudiendo hacer muchas
cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes,
tipos de letra, fondos, colores...
CSS son las siglas de Cascading Style
Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver
algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer
la tecnología entera.
Las Hojas de Estilo
en Cascada se escriben dentro del código HTML de la página web, solo en casos
avanzados se pueden escribir en un archivo a parte y enlazar la página con ese
archivo. En un principio vamos a utilizar la manera más directa de aplicar
estilos a los elementos de la página, mas adelante veremos la declaración en
archivos externos. Para ello, y esto es la primera lección de este artículo,
vamos a conocer un nuevo atributo que se puede utilizar en casi todas las
etiquetas HTML: style.
Ejemplo:
<p
style="color:green;font-weight:bold">El párrafo saldrá con color verde y en
negrita</p>
Dentro del atributo style se deben indicar los
atributos de estilos CSS separados por punto y coma (;). Durante este artículo
vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí
son:
Color: indica el color del contenido la etiqueta donde
estemos utilizándolo, generalmente indica el color del texto.
Font-weight: indica el grosor del texto. Bold sirve para poner en
negrita.
Con HTML
definimos el color de los enlaces en la etiqueta <body>, con lo atributos
link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo
el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto,
para que tenga otro color que el definido en la etiqueta <body>?
Para hacer esto utilizaremos el atributo style dentro del enlace:
<a href="mienlace.html" style="color:red">
Así saldrá el enlace en color rojo, independientemente de lo
definido para todo el documento.
Con CSS
podemos definir el espacio que hay entre cada línea del documento, utilizando el
atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el
espacio entre cada una de sus líneas sea 25 pixels:
<p style="line-height: 25px;">
Un párrafo normal en el
que cada una de las líneas está separada 25 pixels de la otra. Hay que poner
suficiente texto como para que se vean 2 líneas, así saldrán separadas
</p>
| Espaciado entre caracteres |
Se
puede definir también el espacio entre cada carácter. Esto se hace con el
atributo de CSS letter-spacing. Veamos un ejemplo:
<p style="letter-spacing:12cm">
Este párrafo tiene las
letras espaciadas por 1 centímetro.
</p>
Este atributo,
al igual que ocurre con muchos otros de CSS, no está soportado por todos los
navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.
Uno de los
efectos más significativos y fáciles de realizar con CSS es eliminar el
subrayado de los enlaces de una página web. Existe un atributo que sirve para
definir la decoración de un texto, si está subrayado, tachado, o si no tiene
ninguna de estas "decoraciones". Es el atributo text-decoration, en este caso
indicaremos en un enlace que no queremos decoración:
<a href="mipagina.html" style="text-decoration:none">
| Incluir estilos para todo un sitio web
|
Una de las características más potentes de la
programación con hojas de estilo consiste en definir los estilos de todo un
sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las
declaraciones de estilos de la página y enlazando todas las páginas del sitio
con ese archivo. De este modo, todas las páginas comparten una misma declaración
de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.
Veamos ahora todo el proceso para incluir estilos con un fichero
externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquier extensión,
aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo
es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis
CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo
style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás.
Podemos ver un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight :
normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color :
Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la página web con la
hoja de estilos
Para ello vamos a colocar la etiqueta <LINK>
con los atributos
- rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
- type="text/css" porque el archivo es de texto, en sintaxis CSS.
- href="estilos.css" indica el nombre del fichero fuente de los estilos.
Veamos una página web entera que enlaza con la declaración de estilos
anterior:
<html>
<head>
<link
rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página
que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>
Esta página
tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
Es muy fácil.
</p>
</body>
</html>
| Las CSS tienen mucho más jugo
|
Las Hojas de Estilo en Cascada son un estándar muy
amplio, con unas especificaciones y posibilidades muy grandes. En este artículo
hemos visto unos cuantos efectos interesantes que realizar aunque no tengamos
ningún conocimiento previo. Sin embargo, lo mejor para trabajar con esta
tecnología es conocerla bien, gracias a ello, los resultados serán mucho más
sorprendentes.
Para ampliar esta información y conocer más sobre CSS se
puede encontrar un manual en desarrolloweb.com www.desarrolloweb.com/manuales/2
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué son los Applets de Java
Es otra
manera de incluir código a ejecutar en los clientes que visualizan una página
web. Se trata de pequeños programas hechos en Java, que se transfieren con las
páginas web y que el navegador ejecuta en el espacio de la página.
Los applets de Java están programados en Java y precompilados, es por ello
que la manera de trabajar de éstos varía un poco con respecto a los lenguajes de
script como Javascript. Los applets son más difíciles de programar que los
scripts en Javascript y requerirán unos conocimientos básicos 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. Además, Java es más
potente que Javascript, por lo que el número de aplicaciones de los applets
podrá ser mayor.
Como desventajas en relación con Javascript cabe señalar que los applets son
más lentos de procesar y que tienen espacio muy delimitado en la página donde se
ejecutan, es decir, no se mezclan con todos los componentes de la página 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ómo es posible la multiplataforma en Java
Java es compatible con todos los sistemas porque basa su funcionamiento en
los Byte Codes, que no es más que una precompilación del código fuente de Java.
Estos Byte Codes no son el programa en Java propiamente dicho, sino un
archivo que contiene un código intermedio que puede manejar la Máquina Virtual
de Java. Cada sistema operativo dispone de una Maquina Virtual de Java que puede
interpretar los Byte Codes y transformarlos a sentencias ejecutables en el
sistema en cuestión.
Ejemplos de Applets de Java
En la web podemos encontrar muchos ejemplos de applets de Java muy útiles y
complejos. Nosotros aquí vamos a mostrar un par de ejemplos que no tienen
demasiada importancia, pero que pueden aclarar un poco más de qué se tratan
estos applets.
- Ejemplo de Reloj 3D. Efecto visual para incorporar un
reloj digitan el 3D en tu página web.
- Ejemplo de banner dinámico. Una animación de diversas
palabras que salen en el espacio de un banner. Se puede configurar para que
salga el texto que deseemos.
Nota: Los applets no los hemos hecho nosotros.
Estos applets los hemos descargado de Internet para mostrarlos en
este artículo. Si lo deseáis, podéis acceder a los archivos .zip con los
applets y su código para mostrarlos en una página HTML.
+ Reloj
3D - 5.10 Kb
+ Banner
animado - 14.6 Kb |
Ampliación
Si deseas ampliar la información sobre los applets o sobre Java recomendamos
estudiar la sección Java
en el buscador de DesarrolloWeb.com.
Informe de
Miguel Angel Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es CGI
Es el sistema más antiguo
que existe para la programación de las páginas
dinámicas 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 también empleados para
construirlos.
El funcionamiento básico de un programa CGI es parecido al
apuntado para el conjunto de las páginas dinámicas del servidor, con algunas
particularidades.
- Se realiza una petición http, a la que pueden acompañar datos llegados o
bien por un formulario o bien a través de la URL.
- El servidor ejecuta los programas CGI a los que se accede y trabaja con
los recursos necesarios para llevar a cabo las acciones, como por ejemplo
bases de datos.
- El programa CGI va escribiendo en la salida estándar el resultado de la
ejecución del CGI, que incluye etiquetas HTML, ya que lo que se escribe es una
página web.
Algunas desventajas de la programación en CGI son las
siguientes:
- Los resultados se escriben directamente con el CGI, así que el código del
programa se mezcla con el del HTML haciendo difícil su comprensión y
mantenimiento.
- Cada programa CGI que se pone en marcha lo hace en un espacio de memoria
propio. Así, si tres usuarios ponen en marcha un CGI a la vez se multiplicará
por tres la cantidad de recursos que ocupe ese CGI. Esto significa una grave
ineficiencia.
Para completar esta información sería interesante
acceder a la sección CGI de
nuestro directorio de enlaces, donde podemos encontrar sitios en Internet
que ofrecen tutoriales sobre la tecnología y directorios
de programas CGI ya creados para hacer cosas tan variadas como tiendas,
foros, envio de formularios, etc.
Informe de
Miguel Angel Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es Perl
Es un lenguaje de
programación muy utilizado para construir aplicaciones CGI para el web. Perl es
un acrónimo de Practical Extracting and Reporting Languaje, que viene a indicar
que se trata de un lenguaje de programación muy práctico para extraer
información de archivos de texto y generar informes a partir del contendido de
los ficheros.
Es un lenguaje libre de uso, eso quiere decir que es
gratuito. Antes estaba muy asociado a la plataforma Uníx, pero en la actualidad
está disponible en otros sistemas operativos como Windows.
Perl es un
lenguaje de programación interpretado, al igual que muchos otros lenguajes de
Internet como Javascript o
ASP. Esto
quiere decir que el código de los scripts en Perl no se compila sino que cada
vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo
que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde
Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También
desde otros lenguajes podremos ejecutar código Perl.
Perl está inspirado
a partir de lenguajes como C, sh, awk y sed (algunos provenientes de los
sistemas Uníx), pero está enfocado a ser más práctico y fácil que estos últimos.
Es por ello que un programador que haya trabajado con el lenguaje C y los otros
tendrá menos problemas en entenderlo y utilizarlo rápidamente. Una diferencia
fundamental de Perl con respecto a los otros lenguajes es que no limita el
tamaño de los datos con los que trabaja, el límite lo pone la memoria que en ese
momento se encuentre disponible.
Si queremos trabajar con Perl será
necesario tener instalado el interprete del lenguaje. A partir de ese momento
podemos ejecutar CGIs en nuestros servidores web. El proceso para conseguirlo
puede variar de unos servidores a otros, pero se suelen colocar en un directorio
especial del servidor llamado cgi-bin donde hemos colocado los correspondientes
permisos CGI. Además, los archivos con el código también deberán tener permiso
de ejecución.
Este informe se complementa con los enlaces que podéis
encontrar en la sección
Perl de nuestro buscador y ocasionalmente la sección
CGI.
Informe de Miguel Angel
Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es ASP
ASP (Active Server Pages)
es la tecnología desarrollada por Microsoft para la creación de páginas
dinámicas del servidor. ASP se escribe en la misma página web, utilizando el
lenguaje Visual Basic
Script o Jscript (Javascript de Microsoft).
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor
web, justo antes de que se envíe la página a través de Internet al cliente.
Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de
datos, conexiones en red, y otras tareas para crear la página final que verá el
cliente. El cliente solamente recibe una página con el código HTML resultante de
la ejecución de la PHP. Como la página resultante contiene únicamente código
HTML, es compatible con todos los navegadores. Podemos saber algo más sobre la
programación del servidor y del cliente en el artículo qué es DHTML.
El tipo de servidores que emplean este lenguaje son, evidentemente, todos
aquellos que funcionan con sistema Windows NT, aunque también se puede utilizar
en un PC con windows 98 si instalamos un servidor denominado Personal Web Server.
Incluso en sistemas Linux podemos utilizar las ASP si intalamos un componente
denominado Chilisoft,
aunque parece claro que será mejor trabajar sobre el servidor web para el que
está pensado: Internet
Information Server.
Con las ASP podemos realizar muchos tipos de aplicaciones distintas. Nos
permite acceso a bases de datos, al sistema de archivos del servidor y en
general a todos los recursos que tenga el propio servidor. También tenemos la
posibilidad de comprar componentes ActiveX fabricados por distintas empresas de
desarrollo de software que sirven para realizar múltiples usos, como el envio de
correo, generar gráficas dinámicamente, y un largo etc.
Actualmente se ha presentado ya la segunda versión de ASP, el ASP.NET, que
comprende algunas mejoras en cuanto a posibilidades del lenguaje y rapidez con
la que funciona. ASP.NET tiene algunas diferencias en cuanto a sintaxis con el
ASP, de modo que se ha de tratar de distinta manera uno de otro.
Para enterarnos bien de lo que es ASP y aprender a programar en el lenguaje
disponemos de una sección en
DesarrolloWeb dedicada por entero a tratar ASP a fondo.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es PHP
PHP es el acrónimo de
Hipertext Preprocesor. Es un lenguaje de programación del lado del servidor
gratuito e independiente de plataforma, rápido, con una gran librería de
funciones y mucha documentación.
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor
web, justo antes de que se envíe la página a través de Internet al cliente.
Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de
datos, conexiones en red, y otras tareas para crear la página final que verá el
cliente. El cliente solamente recibe una página con el código HTML resultante de
la ejecución de la PHP. Como la página resultante contiene únicamente código
HTML, es compatible con todos los navegadores. Podemos saber algo más sobre la
programación del servidor y del cliente en el artículo qué es DHTML.
Esquema del funcionamiento de las páginas
PHP. Una vez que ya conocemos el concepto de lenguaje de programación de scripts
del lado del servidor podemos hablar de PHP. PHP se escribe dentro del código
HTML, lo que lo hace realmente fácil de utilizar, al igual que ocurre con el
popular ASP de Microsoft, pero
con algunas ventajas como su gratuidad, independencia de plataforma, rapidez y
seguridad. Cualquiera puede descargar a través de la página principal de PHP http://www.php.net/ y de manera
gratuita, un módulo que hace que nuestro servidor web comprenda los scripts
realizados en este lenguaje. Es independiente de plataforma, puesto que existe
un módulo de PHP para casi cualquier servidor web. Esto hace que cualquier
sistema pueda ser compatible con el lenguaje y significa una ventaja importante,
ya que permite portar el sitio desarrollado en PHP de un sistema a otro sin
prácticamente ningún trabajo.
PHP, en el caso de estar montado sobre un servidor Linux u Unix, es más
rápido que ASP, dado que se
ejecuta en un único espacio de memoria y esto evita las comunicaciones entre
componentes COM que se realizan entre todas las tecnologías implicadas en una
página ASP.
Por último señalábamos la seguridad, en este punto también es importante el
hecho de que en muchas ocasiones PHP se encuentra instalado sobre servidores
Unix o Linux, que son de sobra conocidos como más veloces y seguros que el
sistema operativo donde se ejecuta las ASP, Windows NT o 2000. Además, PHP
permite configurar el servidor de modo que se permita o rechacen diferentes
usos, lo que puede hacer al lenguaje más o menos seguro dependiendo de las
necesidades de cada cual.
Fue creado originalmente en 1994 por Rasmus Lerdorf, pero como PHP está
desarrollado en política de código abierto, a lo largo de su historia ha
tenido muchas contribuciones de otros desarrolladores. Actualmente PHP se
encuentra en su versión 4, que utiliza el motor Zend, desarrollado con
mayor meditación para cubrir las necesidades de las aplicaciones web actuales.
Este lenguaje de programación está preparado para realizar muchos tipos de
aplicaciones web gracias a la extensa librería de funciones con la que está
dotado. La librería de funciones cubre desde cálculos matemáticos complejos
hasta tratamiento de conexiones de red, por poner dos ejemplos.
Algunas de las más importantes capacidades de PHP son: compatibilidad con
las bases de
datos más comunes, como MySQL,
mSQL, Oracle,
Informix, y ODBC, por ejemplo. Incluye funciones para el envío de correo
electrónico, upload de archivos, crear dinámicamente en el
servidor imágenes en formato GIF, incluso animadas y una lista interminable
de utilidades adicionales.
Se puede obtener mucha más información de PHP en los diversos manuales de PHP
que hemos publicado en desarrolloweb. Manuales que atienden a los diversos
niveles de cada programdor:
- Programación en
PHP: Aprende PHP desde el principio con este manual que toca las
prestaciones más imprescindibles.
- Programación en PHP
II: Aprende a hacer una aplicación práctica en PHP. Un sistema de
postales.
- Taller de PHP: otros
artículos prácticos más avanzados con el lenguaje.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Qué es JSP
JSP es un acrónimo de Java
Server Pages, que en castellano vendría a decir algo como Páginas de Servidor
Java. Es, pues, una tecnología orientada a crear páginas web con programación en
Java.
Con JSP podemos crear aplicaciones web que se
ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en
esencia un lenguaje multiplataforma. Las páginas JSP están compuestas de código
HTML/XML mezclado con etiquetas especiales para programar scripts de servidor en
sintaxis Java. Por tanto, las JSP podremos escribirlas con nuestro editor
HTML/XML habitual.
Motor JSP
El motor de las páginas JSP
está basado en los servlets de Java -programas en Java destinados a ejecutarse
en el servidor-, aunque el número de desarrolladores que pueden afrontar la
programación de JSP es mucho mayor, dado que resulta mucho más sencillo aprender
que los servlets.
En JSP creamos páginas de manera parecida a como se
crean en ASP o PHP -otras dos tecnologías de
servidor-. Generamos archivos con extensión .jsp que incluyen, dentro de la
estructura de etiquetas HTML, las sentencias Java a ejecutar en el servidor.
Antes de que sean funcionales los archivos, el motor JSP lleva a cabo una fase
de traducción de esa página en un servlet, implementado en un archivo class
(Byte codes de Java). Esta fase de traducción se lleva a cabo habitualmente
cuando se recibe la primera solicitud de la página .jsp, aunque existe la opción
de precompilar en código para evitar ese tiempo de espera la primera vez que un
cliente solicita la página.
Ejemplo de página JSP
En la
imagen siguiente se puede ver un ejemplo extremadamente simple de una página JSP
y el esquema de conversión de esa página en un servlet.
Prerequisitos
Para aprender JSP, aparte de
conocer HTML, será necesario comprender y tener algo de experiencia en la
programación en Java, que es
un lenguaje
de programación Orientado a Objetos por completo. Una vez conocida la
programación en Java se puede estudiar por encima el sistema de Servlets, lo que
nos dará una mejor idea del funcionamiento interno del motor JSP.
Para
aprender Java podemos consultar algunos enlaces del
correspondiente directorio de nuestro buscador de enlaces.
Además,
necesitaremos descargar e instalar Tomcat, el contenedor de servlets usado en la referencia
oficial de implementación de JSP. Podemos acceder a un ejercicio para aprender a realizar esta instalación,
disponible también en la referencia de aprendizaje de la página de Java.
Referencias JSP
Hemos creado una nueva sección en
nuestro directorio dedicada por completo a las páginas JSP, que será muy
interesante para todo aquel que desee profundizar en el tema.
Informe de Miguel Angel Alvarez
Director
desarrolloweb.com
Mail: eugim@desarrolloweb.com
Comparando JSP con ASP
JSP y ASP sirven
para hacer, más o menos, el mismo tipo de aplicaciones web. Sin embargo, en el
fondo tienen bastantes diferencias. Después de mi experiencia en el trabajo con
JSP, un día un cliente me preguntó por qué no programaba la página en ASP en
lugar de JSP, ya que había oido hablar que el sistema de Microsoft tenía unas
características muy apropiadas para su modelo de negocio. A partir de esta
sugerencia, y para que mi cliente quedase satisfecho con la tecnología JSP -que
es la que prefiero utilizar-, preparé una lista de ventajas de utilizar páginas
dinámicas Java frente a las de Microsoft.
Plataforma e independencia
del servidor
JSP sigue la filosofía de la arquitectura JAVA de
"escribe una vez ejecuta donde quieras". La implantación de ASP está limitada
para arquitecturas basadas en tecnología Microsoft.
Así, JSP se puede
ejecutar en los sistemas operativos y servidores web más populares, como por
ejemplo Apache, Netscape o Microsoft IIS. Mientras que ASP sólo tiene soporte
nativo para los servidores IIS y Personal Web Server, que son los dos servidores
web para sistemas Microsoft, el primero con tecnología NT y el segundo para
sistemas Windows 98 y similares.
Proceso de desarrollo abierto (open
source)
El API JSP se beneficia de la extendida comunidad JAVA
existente, por el contrario la tecnología ASP es específica de Microsoft que
desarrolla sus procesos internamente.
TAGS
Mientras que
tanto JSP como ASP usan una combinación de tags y scripts para crear paginas web
dinámicas, la tecnología JSP permite a los desarrolladores crear nuevos tags.
Así los desarrolladores pueden crear nuevos tags y no depender tanto de los
scripts.
Reusabilidad entre plataformas.
Los componentes
JSP son reusables en distintas plataformas (UNIX, Windows).
La
ventaja Java
La tecnología JSP usa Java como lenguaje de Script
mientras que ASP usa VBScript o Jscript. Java es un lenguaje mas potente y
escalable que los lenguajes de Script. Las páginas JSP son compilados en
Servlets por lo que actúan como una puerta a todos los servicios Java de
Servidor y librerías Java para aplicaciones http. Java hace el trabajo del
desarrollador más fácil p. e. ayuda a proteger el sistema contra las "caídas"
mientras que las aplicaciones ASP sobre sistemas NT son más susceptibles a
sufrirlas, también ayuda en el manejo de la memoria protegiendo contra fallos de
memoria y el duro trabajo de buscar los fallos de perdida de punteros de memoria
que pueden hacer mas lento el funcionamiento de una aplicación.
Mantenimiento
Las aplicaciones que usan JSP tiene un
mantenimiento más fácil que las que usan ASP.
- Los lenguajes de Script están bien para pequeñas aplicaciones, pero no
encajan bien para aplicaciones grandes. Java es un lenguaje estructurado y es
más fácil de construir y mantenimientos grandes como aplicaciones modulares.
- La tecnología JSP hace mayor énfasis en los componentes que en los
Scripts, esto hace que sea más fácil revisar el contenido sin que afecte a la
lógica o revisar la lógica sin cambiar el contenido.
- La arquitectura EJB encapsula la lógica de p. e.: acceso a BD, seguridad,
integridad transaccional y aislamiento de la aplicación.
- Debido a que la tecnología JSP es abierta y multiplataforma, los
servidores web, plataformas y otros componentes pueden ser fácilmente
actualizados o cambiados sin que afecte a las aplicaciones basadas en la
tecnología JSP.
Conclusión
Las ventajas sobre utilizar
la tecnología Java con respecto a la propietaria de Microsoft (ASP) son, como se
ha podido ver, diversas e interesantes. Sin embargo, podemos apuntar una ventaja
de la programación en ASP, pues resulta bastante más fácil de aprender que JSP,
por lo menos si no se tiene una experiencia previa en programación. Esto es
debido a que Java es un lenguaje muy potente, pero un poco más complicado de
usar porque es orientado a objetos y la manera de escribir los programas es más
rígida.
Informe de Natxo
Mendez
Qué es
XML
XML es una tecnología en realidad muy sencilla que tiene a
su alrededor otras tecnologías que la complementan y la hacen mucho más grande y
con unas posibilidades mucho mayores. Vamos a ver a lo largo de varios
capítulos una introducción al mundo XML, es decir, al lenguaje así como a
las tecnologías que trabajan con él, sus usos, ventajas y modos de llevar a cabo
las tareas.
XML, con todas las tecnologías relacionadas, representa una manera distinta
de hacer las cosas, más 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. Así pues, el XML juega un papel importantísimo en este
mundo actual, que tiende a la globalización y la compatibilidad entre los
sistemas, ya que es la tecnología que permitirá compartir la información de una
manera segura, fiable, fácil. Además, XML permite al programador y los soportes
dedicar sus esfuerzos a las tareas importantes cuando trabaja con los datos, ya
que algunas tareas tediosas como la validación de estos o el recorrido de las
estructuras corre a cargo del lenguaje y está especificado por el estándar, de
modo que el programador no tiene que preocuparse por ello.
Vemos que XML no está sólo, sino que hay un mundo de tecnologías alrededor de
él, de posibilidades, maneras más fáciles e interesantes de trabajar con los
datos y, en definitiva, un avance a la hora de tratar la información, que es en
realidad el objetivo de la informática en general. XML, o mejor dicho, el mundo
XML no es un lenguaje, sino varios lenguajes, no es una sintaxis, sino varias y
no es una manera totalmente nueva de trabajar, sino una manera más refinada que
permitirá que todas las anteriores se puedan comunicar entre si sin problemas,
ya que los datos cobran sentido. Todo esto lo veremos con calma en la Introducción a XML.
XML es interesante en el mundo de Internet y el e-bussiness, ya que existen
muchos sistemas distintos que tienen que comunicarse entre si, pero como se ha
podido imaginar, interesa por igual a todas las ramas de la informática y el
tratamiento de datos, ya que permite muchos avances a la hora de trabajar con
ellos.
En la introducción a
XML, a lo largo de los siguientes capítulos, vamos a ver algunas
características importantes de la tecnología que nos permitirán comprender mejor
el mundo XML y cómo soluciona nuestros problemas a la hora de trabajar con los
datos.
Informe de Miguel Angel
Alvarez
Director desarrolloweb.com
Mail: eugim@desarrolloweb.com