Juan Ramn Lpez Rodrguez

Tecnologas (II)
Lenguajes para el Web

 Juan Ramn Lpez Rodrguez

Lenguajes para Web:

Introduccin

Los lenguajes Web permiten desarrollar las pginas que

componen los sitios Web
Presentaremos aqu los principales lenguajes de
desarrollo Web
Conoceremos sus caractersticas distintivas.
Distinguiremos varios tipos de lenguajes, que nos
ofrecen funcionalidades diferentes.

 Juan Ramn Lpez Rodrguez

Pginas estticas
Hemos visto ya que la Web (WWW, World
Wide Web) est formada por un conjunto
(masivo) de pginas web.
Las pginas se organizan en forma de sitios
Web, desde los que se pueden descargar.
Las pginas web se escriben utilizando un
lenguaje especial: HTML (Hypertext
Markup Language)

 Juan Ramn Lpez Rodrguez

Pginas estticas (2)

Un fichero HTML no es ms que texto etiquetado

Un navegador, al mostrar una pgina Web, interpreta
las etiquetas y le da formato al texto contenido en el
fichero HTML.
Por lo tanto, la nica funcionalidad que ofrece HTML
es la de dar formato a un texto fijo.
HTML no es un lenguaje de programacin, y no permite el
procesamiento de informacin
Como mucho, nos permite saltar de una pgina a otra, por
medio de los enlaces (hipertexto).

 Juan Ramn Lpez Rodrguez

Pginas estticas (2)

Un fichero HTML no es ms que texto etiquetado

Un navegador, al mostrar una pgina Web, interpreta
las etiquetas y le da formato al texto contenido en el
fichero HTML.
Por lo tanto, la nica funcionalidad que ofrece HTML
es la de dar formato a un texto fijo.
HTML no es un lenguaje de programacin, y no permite el
procesamiento de informacin
Como mucho, nos permite saltar de una pgina a otra, por
medio de los enlaces (hipertexto).

 Juan Ramn Lpez Rodrguez

Pginas estticas (2)

Un fichero HTML no es ms que texto etiquetado

Un navegador, al mostrar una pgina Web, interpreta
las etiquetas y le da formato al texto contenido en el
fichero HTML.
Por lo tanto, la nica funcionalidad que ofrece HTML
es la de dar formato a un texto fijo.
HTML no es un lenguaje de programacin, y no permite el
procesamiento de informacin
Como mucho, nos permite saltar de una pgina a otra, por
medio de los enlaces (hipertexto).

 Juan Ramn Lpez Rodrguez

Pginas estticas (3)

Por ese motivo, a las pginas web generadas nicamente a partir
de cdigo HTML se las conoce como pginas estticas: no
admiten ningn tipo de dinamismo ni de interaccin
La funcin del servidor Web, ante la peticin de una pgina de
este tipo, es la de:

Recuperar del disco duro, el fichero HTML que contiene la pgina.

Enviar el fichero HTML al cliente

La funcin del cliente Web (el navegador), ante la peticin de una

pgina de este tipo es la de:
Recuperar el texto y las etiquetas del fichero HTML
Dar formato al texto y presentarlo en la pantalla en forma de pgina
Web

Solicitud: http://www.udc.es/index.html
index.html

Envo: index.html

INTERNET

Servidor web:
www.udc.es

Disco
servidor
web

 Juan Ramn Lpez Rodrguez

Pginas estticas (3)

index.html

INTERNET

Servidor web:
www.udc.es

 Juan Ramn Lpez Rodrguez

Pginas estticas (3)

index.html

INTERNET

Servidor web:
www.udc.es

 Juan Ramn Lpez Rodrguez

Pginas dinmicas

La concepcin inicial de la Web no peda ms

Con el tiempo, se ha visto que era necesaria una
mayor funcionalidad
Necesaria la incorporacin de dinamismo e
interactividad a las pginas Web
Sitios Web -> Aplicaciones Web
Formularios
Procesamiento de informacin
Actualizacin automtica de pginas

 Juan Ramn Lpez Rodrguez

Pginas dinmicas (2)

Ejemplo:
servicio de
correo de
la UDC:
aplicacin
webmail

Si pinchamos sobre
un mensaje, aparece
destacado en
amarillo

Podemos marcar
algunos mensajes
con checkboxes

 Juan Ramn Lpez Rodrguez

Pginas dinmicas (3)

Lo que vemos es una

pgina Web normal,
escrita con HTML
Pero nadie reescribe la
pgina cada vez que llega
un mensaje
El servidor web se
comunica con el
servidor de correo de
la UDC, y reescribe el
cdigo HTML de la
pgina para incluir nuevos
mensajes
El servidor tambin avisa
al navegador para
avisarlo que debe
mostrar una nueva
versin de la pgina

 Juan Ramn Lpez Rodrguez

Pginas dinmicas (4)

El navegador, una vez
avisado, solicita la
nueva versin de la
pgina al servidor web,
y, al recibirla, la
muestra en pantalla
Parece que la pgina
ha cambiado, pero en
realidad es una
pgina nueva!

 Juan Ramn Lpez Rodrguez

Pginas dinmicas (5)

Para conseguirlo:
Cambios en los navegadores web
Cambios en los servidores web

...y eso ha dado lugar a nuevos:

Lenguajes Web del lado del cliente
Lenguajes Web del lado del servidor

... que permiten aadir dinamismo a las

pginas

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente

Los navegadores (los clientes web) son extendidos para
proporcionar ms funcionalidad
No se ampla HTML: se crean nuevos lenguajes que el
navegador tambin entiende
El navegador ejecuta los programas escritos en esos lenguajes
(nueva funcin), proporcionando nuevas funcionalidades a las
pginas.
Los programas que debe ejecutar llegan incrustados en medio
del cdigo HTML de la pgina que enva el servidor web

Peticin de pgina

Navegador (cliente)

Respuesta: Pgina en HTML + programas

escritos en lenguajes del lado del cliente

Servidor Web

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente (2)

Javascript:

Desarrollado por Netscape,

Copiado por otros navegadores
Finalmente, estandarizado como ECMAScript

Permite, entre otras cosas:

Abrir nuevas ventanas

Mens dinmicos
Mostrar texto en movimiento o que cambia de formato de forma automtica
Validar entradas en un formulario, y mostrar mensajes de error
Producir efectos asociados al movimiento del ratn o a la pulsacin del teclado (botn que
huye!)

HTML y Javascript se complementan: Desde los programas escritos en

Javascript se puede hacer referencia a los elementos HTML de una pgina
(botones, imgenes, encabezados, listas...) y manipularlos.
Inconvenientes:
Dependiente del navegador, e incluso del S.O
Funcionalidad limitada comparada con la de otros lenguajes de cliente
Peticin de pgina

Navegador (cliente)

Respuesta: Pgina en HTML + programas

javascript

Servidor Web

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente (3)

Java: Desarrollado por Sun Microsystems
Permite desarrollar pequeos programas llamados applets, que van
incrustados en las pginas web.
La pgina lleva incrustado en su contenido un ordenador virtual que es
capaz de ejecutar el applet. Una pequea ventana dentro de la pgina funciona
como el monitor de ese ordenador. El applet controla ese monitor virtual
y lo usa como si fuese la pantalla del ordenador.
Los applets son independientes del navegador y del sistema operativo, pero su
ejecucin es lenta
Inconvenientes:

Los applets estn aislados del resto de la pgina: no se complementan con otros
elementos de la pgina, ni tienen acceso a los mismos.
Necesario tener instalado en el ordenador la Mquina Virtual Java (JRE)
Los applets no pueden ser muy grandes (tiempo de tx. por la red)
Peticin de pgina

+
Navegador (cliente)

Respuesta: Pgina en HTML + applets de

Java

Servidor Web

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente (4)

Ejemplo: tres en raya

http://java.sun.com/applets/jdk/1.4/demo/applets/TicTacToe/example1.html

Ms ejemplos:
http://java.sun.com/applets/jdk/1.4/index
.html

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente (5)

ActiveX: Respuesta de Microsoft a Sun Ms.

Controles ActiveX: equivalentes a los applets.
Ejemplo: Windows Update

Pueden estar escritos usando lenguajes de programacin

convencionales: C++, Delphi,Visual Basic...
Funcionan nicamente en el entorno Windows: IE Explorer
Aparte del Explorer, funcionan en ciertos navegadores
instalndoles una extensin (plugin), pero con problemas.
Tienen acceso a otros elementos de la pgina y a recursos del
ordenador: riesgo de seguridad
(http://www.microsoft.com/latam/protect/yourself/downloads/activex.mspx)

Peticin de pgina

Navegador (cliente)

Respuesta: Pgina en HTML + control

ActiveX

Servidor Web

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del cliente (6)

Shockwave Flash (Adobe)

Es una aplicacin en forma de estudio que permite animar de forma ptima
una secuencia de imgenes que funcionan como fotogramas
Las animaciones se guardan como ficheros con extensin .swf
Pensado para la produccin y entrega de contenido interactivo sin importar
la plataforma

Pueden aparecer en una pgina web para ser vista en un navegador, o pueden ser reproducidos
independientemente por un reproductor Flash
Necesitamos instalar un plugin en el navegador para poder ver las animaciones Flash

Incluye un lenguaje de programacin denominado Action Script que

permite la creacin de pelculas o animaciones con altsimo contenido
interactivo
Ejemplos: http://www.cristalab.com/ejemplos/
Tambin incluye un formato para la transmisin de vdeo: Flash Video
(Youtube)
Peticin de pgina

Navegador (cliente)

Respuesta: Pgina en HTML + fichero swf

Servidor Web

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor

Los servidores Web son extendidos para proporcionar ms funcionalidad

Antes: entrega de pginas HTML estticas a los navegadores: ya estn
escritas, no se pueden cambiar
Ahora: el servidor web es capaz de generar l mismo nuevas pginas
Web (a partir de unas plantillas) en funcin de las peticiones recibidas.

Posibilidades:
Recuperacin de informacin desde una BD y generacin dinmica de una
pgina web
Procesamiento pesado de informacin que no pueda ser realizado por los
navegadores.
Servidor Web
Peticin de pgina
plantilla

Navegador (cliente)

Disco
serv. web

Respuesta: Pgina HTML

(generada dinmicamente)
Base de datos

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor (2)

Cmo se definen las plantillas?
Cmo se rellenan con datos?

Tecnologa CGI (Common Gateway Interface)

Es la tecnologa de servidor ms antigua.

El servidor Web delega en otro programa (el CGI) la generacin dinmica de
las pginas
Los programas estn escritos en lenguajes de programacin convencionales: C,
Perl, C++, Visual Basic
Inconvenientes:

La comunicacin entre servidor y programa CGI retrasa la entrega de las pginas

El CGI consume recursos del servidor (se est ejecutando a la vez que el servidor web)

Respuesta: Pgina HTML

(generada dinmicamente)

Consultas.cgi

dni=666.666

Servidor Web

Peticin:
http://www.udc.es/consultanotas.cgi?dni=666.666

plantilla

Base de datos

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor (3)

Solucin: es el servidor Web quien debe generar las pginas: eliminar los
intermediarios
Nuevos lenguajes son necesarios: JSP, ASP, PHP
Los servidores Web deben ser mejorados para soportar esos lenguajes
Qu lenguaje elegir? Depende de:
Presupuesto
Hosting disponible
Experiencia de programacin

Peticin:
http://www.udc.es/consultanotas.asp?dni=666.666

Respuesta: Pgina HTML

(generada dinmicamente)

Servidor Web

dni=666.666

Plantilla (ASP, JSP, PHP)

Base de datos

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor (4)

JSP: Java Server Pages

Lenguaje desarrollado por SUN Microsystems

Basado en lenguaje JAVA
Independiente del S.O.
El servidor Web comprende el lenguaje JSP y
genera nuevo cdigo HTML a partir de
instrucciones JSP

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor (5)

ASP: Java Server Pages

Alternativa de Microsoft a JSP
Basado en lenguaje Visual Basic
Tecnologa exclusiva, servidores slo
funcionan en S.O. Windows
El servidor Web comprende el lenguaje ASP
y genera nuevo cdigo HTML a partir de
instrucciones ASP

 Juan Ramn Lpez Rodrguez

Lenguajes del lado del servidor (6)

PHP
Similar a ASP, pero en este caso se trata de
tecnologa abierta y gratuita
Potente a la hora de interaccionar con todo
tipo de gestores de bases de datos

 Juan Ramn Lpez Rodrguez

Pginas dinmicas: gestin de la

cach
Visitar pginas es lento. Hay que descargarse la pgina
(incluyendo imgenes, vdeos) por la red
Los clientes web (navegadores) incorporan una cach donde
guardan el contenido de las ltimas pginas visitadas
Si se vuelve a visitar una pgina reciente, el navegador usa la
copia local, en lugar de volverla a descargar

http://www.udc.es/index.html

index.html

Servidor web

INTERNET
index.html (copia)

Cach

 Juan Ramn Lpez Rodrguez

Pginas dinmicas: gestin de la

cach (2)
Visitar pginas es lento. Hay que descargarse la pgina
(incluyendo imgenes, vdeos) por la red
Los clientes web (navegadores) incorporan una cach donde
guardan el contenido de las ltimas pginas visitadas
Si se vuelve a visitar una pgina reciente, el navegador usa la
copia local, en lugar de volverla a descargar
http://www.udc.es/index.html

index.html

Servidor web

INTERNET
index.html (copia)

Cach

 Juan Ramn Lpez Rodrguez

Pginas dinmicas: gestin de la

cach (2)
Este mecanismo funciona si la pgina no cambia nunca
Pero si las pginas se generan dinmicamente, la copia local
puede no coincidir con la ltima versin de la pgina
Hay que configurar en navegador para que confirme, antes de
usar la copia local, si es buena

http://www.udc.es/index.html

Pregunta: La pgina ha
cambiado?

Respuesta: No

index.html

Servidor web

INTERNET
index.html (copia)

Cach

 Juan Ramn Lpez Rodrguez

Pginas dinmicas: gestin de la

cach (2)
Este mecanismo funciona si la pgina no cambia nunca
Pero si las pginas se generan dinmicamente, la copia local
puede no coincidir con la ltima versin de la pgina
Hay que configurar en navegador para que confirme, antes de
usar la copia local, si es buena

Pregunta: La pgina ha
cambiado?
Respuesta: S
http://www.udc.es/index.html
Servidor web
index.html

INTERNET
index.html (copia)

Cach

 Juan Ramn Lpez Rodrguez

Pginas dinmicas: gestin de la

cach (3)

 Juan Ramn Lpez Rodrguez

Enlaces en pginas web

Referencias relativas y absolutas.

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Paso 1: Elaborar las pginas

En nuestro ordenador, utilizando

cualquier aplicacin de diseo
web, creamos nuestras pginas
El resultado:
Un conjunto de ficheros html (uno
por cada pgina)
Los ficheros organizados en un
conjunto de carpetas
hay que ser ordenados!!!

C:

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Pero la web no es web si no hay
hipervnculos!!!
Donde estn mis enlaces???
Vamos a crear enlaces:
Para apuntar desde una pgina a otra, hay que
crear un enlace
Normalmente, apuntamos el enlace a la
direccin web de la pgina:
http://www.udc.es/index.html
Problema: aun no hemos publicado nuestra
web: no hay direccin web!!!
Solucin: hagamos que el enlace apunte al
fichero que contiene la pgina

C:

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Qu pginas tengo disponibles

para crear enlaces?

C:

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Creamos los siguientes enlaces:

C:

Novedades enero: C:/Documentos/Web/Principal/Novidades/xaneiro.html

Mes siguiente: C:/Documentos/Web/Principal/Novidades/febreiro.html

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Paso 2: Publicar

Contratamos un web hosting y un dominio

(direccin de nuestra web)
El proveedor de hosting nos reserva un espacio
en disco
Las pginas que almacenemos all sern
accesibles a travs de un servidor web
Copiamos nuestra web al servidor usando el
FTP
Problema: no sabemos en qu lugar del
disco se han copiado nuestros ficheros

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Al final, resulta que

nos han reservado
disco en:

y copiamos all
nuestra web

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Desagradable sorpresa: los enlaces ya no funcionan

Las pginas ya no estn en el mismo sitio que
ocupaban en nuestro ordenador

C:/Documentos/Web/Principal/Novidades/xaneiro.html
C:/Documentos/Web/Principal/indice.html
C:/Documentos/Web/Principal/Novidades/febreiro.html

 Juan Ramn Lpez Rodrguez

Elaboracin de una web

Solucin: usar referencias relativas en vez de

referencias absolutas
Funcionan siempre, y ademas son ms cortas!

. / Novidades/xaneiro.html
.. / indice.html
. / febreiro.html

 Juan Ramn Lpez Rodrguez

Copyright
Algunos derechos reservados.
Este documento se distribuye bajo la
licencia Creative Commons 3.0
Reconocimiento-Compartir, disponible en:

http://creativecommons.org/licenses/by-sa/3.0/