Los lenguajes de la web
Contenidos:
–Cómo funciona la web
–HTML
–JavaScript
–HTML Dinámico
–VRML
–CGI
–Java
–XML
Postgrau en Eines i Idees per a la Interactivitat en Internet
Barcelona, 18 de Noviembre del 2000
Cómo funciona la web
• Cómo nace Internet: unión de redes
(Internet es antes que la www)
• Varios protocolos (qué es un protocolo?):
– TCP/IP
– HTTP, FTP, SMTP, Telnet, ...
Capas
Aplicación Transporte Red Subred Aplicación Transporte Red Subred Red Subred Subred 2 Subred 1 ORIGEN ROUTER DESTINO OSI TCP/IP Aplicación Presentación Aplicación SesiónTransporte Transporte (TCP o UDP) Red Red (IP)
Enlace Subredes Física (Propia de la red local)
Internet
INTERNET CLIENTE
Internet
CLIENTE SERVIDOR INTERNET Router SubredHTML
• HTML (HyperText Markup Language) es el
lenguaje básico de las páginas webs
• En realidad no es un lenguaje, sólo un
conjunto de
etiquetas
(tags) para formatear
el texto, permitiendo definir enlaces
• Versiones nuevas de HTML permiten definir
tablas, marcos (frames), elementos
multimedia (uso de plugins), formularios, ...
• Hay muchos editores visuales (entre ellos
Un ejemplo de HTML
<HTML>
<HEAD>
<TITLE>Titulo</HTML>
</HEAD>
<BODY BGCOLOR=“#FFFFFF”>
Esto es una página <b>HTML</b>.<br>
Podemos definir un enlace a la página de la <a
href=“http://www.upf.es”>UPF</a>.<br>
También insertar una imagen: <img src=“imagen1.gif”>.
</BODY>
Cómo llega una página hasta
nuestro ordenador
CLIENTE SERVIDOR WEB Petición información (HTTP) ejemplo: http://www.upf.es/hola.html Página HTML resultado (hola.html)JavaScript
• JavaScript permite definir
funciones
dentro de la
propia página HTML que respondan a
eventos
tales como pasar con el ratón sobre una imagen o
pasar de un campo a otro de un formulario.
• Ofrece la interactividad suficiente como para crear
una aplicación multimedia como el “Atles de les
Illes Balears”
(
http://www.iua.upf.es/~jblat/material/atles/inici.htm
). Muy
Un ejemplo de Javascript
<HTML> <HEAD> <TITLE>Untitled-2</TITLE> <SCRIPT LANGUAGE="JavaScript"> function load(nom) {nombo = nom + "2.gif";
document.images[nom].src = nombo; }
function unload(nom) {
nombo = nom + "1.gif";
document.images[nom].src = nombo; }
</SCRIPT> </HEAD>
<BODY BGCOLOR="#FFFFFF">
<a href="#" onmouseover="load('bola')" onmouseout="unload('bola')";><img src="bola1.gif" name="bola" border=0></a>
</BODY> </HTML>
HTML Dinámico
• El HTML dinámico no es más que la
definición de una serie de objetos
(javascript) que permiten crear capas
(layers) y animaciones en las
páginas
.
• También permite definir
hojas de estilo
(plantillas) para independizar los datos de
su presentación
• Utilizable desde versiones 4 de navegador
• Problemas de
compatibilidad
• Un buen editor: DreamWeaver de
Macromedia
Un ejemplo de HTML dinámico
<HTML> <HEAD> <TITLE>DHTML</TITLE> <STYLE TYPE="text/css"> .estilocapa { position: absolute; visibility: hidden; left: 0px; top: 0px; } </STYLE> <SCRIPT LANGUAGE="JavaScript1.2" SRC="dhtml.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> // Sentido de la animación sentido = 0; // Estado de la animación animandose = false;// Quienes han terminado la animacion quienes = 0;
// Precarga de las imágenes img1 = new Image(); img1.src = "adolf1.gif";
<BODY onload="iniciar()">
<DIV ID="capa1" CLASS="estilocapa">
<IMG SRC="xxadolf1.gif" WIDTH=320 HEIGHT=200 BORDER=0> </DIV>
<DIV ID="capa2" CLASS="estilocapa">
<IMG SRC="xxadolf2.gif" WIDTH=320 HEIGHT=200 BORDER=0> </DIV>
<DIV ID="capa3" CLASS="estilocapa">
<TABLE WIDTH="320" BORDER="0" HEIGHT="200"> <TR> <TD VALIGN="MIDDLE"> <CENTER><FONT FACE="Verdana"><B>¡¡Esto es HTML<BR>Dinámico!!</B></FONT></CENTER> </TD> </TR> </TABLE> </DIV> </BODY> </HTML>
VRML
• Virtual Reality Modelling Language
• Se utiliza para crear
mundos virtuales
en
la red (3D interactivo)
CGI (I)
• La interfaz CGI (Common Gateway
Interface) permite conectar el servidor con
bases de datos
.
• El cliente sigue recibiendo una página
HTML creada dinámicamente con los
datos recuperados de la consulta
CGI (II)
BASE DE DATOS
CLIENTE SERVIDOR WEB
Petición información Página HTML Programa CGI llamada a CGI Página HTML creada dinámicamente a partir de la Consulta a la BD (SQL) Resultado de la MÁQUINA DEL SERVIDO
Ejemplo de CGI (en C)
main()
{
printf(“Content-type: text/html\n\n”);
/* \n significa cambio de línea, con lo hemos dejado la línea en blanco */
printf(“<HTML>\n”);
printf(“<HEAD>\n”);
printf(“<TITLE>CGI sencillo<TITLE>\n”);
printf(“</HEAD>\n”);
printf(“<BODY>\n”);
printf(“<B>Hola, soy un CGI</b>\n”);
printf(“</BODY>\n”);
printf(“</HTML>\n”);
}
Ejemplo de ASP
<%@ LANGUAGE = VBScript %> <html>
<body>
<b>Ejemplo de recuperación de datos de ACCESS</b><p>
Éstos son los diferentes tipos de alujamientos turísticos:<p>
<table width=100% border=1> <%
set con =
Server.CreateObject("ADODB.Connection") con.Open "hoteles"
misql = " select * from tipo" set res = con.execute(misql) %>
<tr>
<TD>Identificador del tipo</TD> <TD>Nombre</TD>
<TD>Descripción</TD> </tr>
<% Do While not res.eof%> <TR> <TD><% = res("tipo_id") %></TD> <TD><% = res("nombre") %></TD> <TD><% = res("descripcion") %></TD> </TR> <% res.MoveNext Loop res.close con.close %> </table> <br> <br>
Gracias por visitarnos </body>
Java
• Java es un
lenguaje de programación
(orientado a objetos) de propósito general,
cuya característica más atractiva es el ser
multiplataforma
.
Compilador JAVA Código fuente (Java)
Byte-codes JVM (UNIX) JVM (Mac) JVM (PC) Código Máquina (UNIX) Código Máquina (Mac) Código Máquina (PC)
Java (II)
• Al ser un lenguaje general, permite
muchas más cosas que los anteriores
• Java se utiliza:
– incrustado en las páginas webs:
applets
import java.io.*;
public class Ejemplo1 {
static int n;
static Contador laCuenta;
public static void main(String args[]) {
System.out.println("Cuenta ..."); laCuenta = new Contador();
System.out.println (laCuenta.getCuenta()); n = laCuenta.incCuenta(); System.out.println (n); laCuenta.incCuenta(); System.out.println (laCuenta.getCuenta()); System.out.println (laCuenta.incCuenta()); } }
Un ejemplo de Java (applet)
import java.awt.*; import java.applet.*;
public class Ejemplo2 extends Applet {
static int n;
static Contador laCuenta;
public Ejemplo2() // Constructor {
laCuenta = new Contador(); }
public void paint(Graphics g) // Se ejecuta cada vez que se hay que redibujar { g.drawString("Cuenta...",20,20); g.drawString(String.valueOf(laCuenta.getCuenta()),20,35); n = laCuenta.incCuenta(); g.drawString(String.valueOf(n),20,50); laCuenta.incCuenta(); g.drawString(String.valueOf(laCuenta.getCuenta()),20,65); g.drawString(String.valueOf(laCuenta.incCuenta()),20,80); } }
XML
• XML: eXtended Markup Language.
Proviene del standard SGML
•
Describe
semánticamente
los contenidos
de los documentos
•
Separa
los datos de la presentación
•
Permite que cada comunidad de usuarios
puedan definir sus propias etiquetas de
marcado,
Ej: <PRICE>, <AUTHOR>, <SECTION>,
<DATE>, <IMPORTANCE LEVEL="Expert">
• XML != HTML++ ; XML ==
SGML--• XML + DTD + XSL
Ejemplo de XML
<?xml version="1.0"?>
<!DOCTYPE BookCatalogue SYSTEM "file://localhost/xml-course/xsl/BookCatalogue.dtd">
<BookCatalogue>
<Book>
<Title>My Life and Times</Title>
<Author>Paul McCartney</Author>
<Date>July, 1998</Date>
<ISBN>94303-12021-43892</ISBN>
<Publisher>McMillin Publishing</Publisher>
</Book>
<Book>
<Title>Illusions The Adventures of a Reluctant Messiah</Title>
<Author>Richard Bach</Author>
<Date>1977</Date>
<ISBN>0-440-34319-4</ISBN>
<Publisher>Dell Publishing Co.</Publisher>
</Book>
<Book>
<Title>The First and Last Freedom</Title>
<Author>J. Krishnamurti</Author>
<Date>1954</Date>
<ISBN>0-06-064831-7</ISBN>
<Publisher>Harper & Row</Publisher>
</Book>
<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Book Catalogue</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> <xsl:template match="BookCatalogue"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Book"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Title"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Author"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Date"> <xsl:apply-templates/> </xsl:template> <xsl:template match="ISBN"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Publisher"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()"> <xsl:value-of select="."/> </xsl:template> </xsl:stylesheet>
