0

TECNOLGICO DE ESTUDIOS
SUPERIORES DE COACALCO
TECNOLGICO DE ESTUDIOS
SUPERIORES DE COACALCO
PAGINAS WEB

HTML vs XML dentro del
desarrollo de aplicaciones web.


Presenta: Arenas Noyola Victor M.
Grupos: 3721
INGENIERA EN SISTEMAS COMPUTACIONALES

COACALCO DE BERRIOZABAL, MX. ENERO DE 2014
1

ndice

INTRODUCCIN-------------------------------------------------------------------------------------2
JUSTIFICACIN-------------------------------------------------------------------------------------2
XML------------------------------------------------------------------------------------------------------3
XML contra HTML----------------------------------------------------------------------4
Presentar Documentos XML------------------------------------------------------------5
Generar XML desde JSP-----------------------------------------------------------------8
Generar XML desde JSP y JavaBeans----------------------------------------------9
Convertir XML a Objetos del Lado del Servidor---------------------------- 12
El Entorno de Software-----------------------------------------------------------------12
API Simple para XML (SAX) ----------------------------------------------------------13
Document Object Model (DOM) -----------------------------------------------------19
Transformar XML-------------------------------------------------------------------------22
HTML ---------------------------------------------------------------------------------------------25
Java en las Pginas Web--------------------------------------------------------25
Insercin de Applets Java---------------------------------------------------------27

Especificando la direccin del applet--------------------------------------------30

Otros atributos de la etiqueta APPLET-------------------------------------------31

El nuevo estndar: la etiqueta OBJECT----------------------------------------38

Insercin de un applet Java----------------------------------------------------39

ActiveX, la tecnologa del futuro----------------------------------------------40

Insercin de un control ActiveX-----------------------------------------------42

CONCLUSIONES ----------------------------------------------------------------------------------45
BIBLIOGRAFA-------------------------------------------------------------------------------------46
2

INTRODUCCIN
XML y HTML son lenguajes muy diferentes. Ambos nacen de la misma inspiracin
llamada SGML por lo que su sintaxis es similar, aunque cada uno fue diseado
para cumplir distintas funciones:
El XML (eXtensive Markup Language) es un lenguaje que fue concebido para
describir informacin. Su funcin principal es ayudarnos a organizar contenidos y
eso hace que los documentos XML sean portables hacia diferentes tipos de
aplicaciones.
El HTML (HyperText Markup Language) por otro lado ha sido concebido para
mostrar informacin, determinar como acta y que hace. Su funcin radica en
ayudarnos a darle formato a los diversos contenidos de una pgina.
Resumiendo, el XML sirve para describir informacin y el HTML sirve para darle
formato y presentarla a travs de un navegador. O sea que el XML no es ni ser
nunca un reemplazo del HTML sino un complemento que sirve para manejar la
informacin separada del formato.
JUSTIFICACION
Con el motivo de presentar dos perspectivas del desarrollo de aplicaciones web
en este trabajo se vern cules son las herramientas que ofrecen html y xml ra
realizar dicha tarea.










3


XML es un metalenguaje usado para definir documentos que contienen datos
estructurados. Las caractersticas y beneficios del XML se pueden agrupar en
estas reas principales:
Extensibilidad: como metalenguaje, XML puede usarse para crear sus
propios lenguajes de marcas. Hoy en da existen muchos lenguajes de
marcas basados en XML, incluyendo "Wireless Markup Language" (WML).
Estructura precisa: HTML sufre de una pobre estructura que hace dificil
procesar eficientemente documentos HTML. Por otro lado, los documentos
XML estn bien estructurados, cada documento tiene un elemento raz y
todos los dems elementos deben estar anidados dentro de otros
elementos.
Dos tipos de documentos: hay dos tipos principales de documentos XML.
1. Documentos Vlidos: un documento XML vlido est definido por
una "Document Type Definition" (DTD), que es la gramtica del
documento que define qu tipos de elementos, atributos y entidades
podra haber en el documento. El DTD define el orden y tambin la
ocurrencia de elementos.
2. Documentos Bien-Formateados: un documento XML bien
formateado no tiene que adherirse a una DTD. Pero debe seguir dos
reglas: 1) todo elemento debe tener una etiqueta de apertura y otra
de cierre. 2) debe haber un elemento raz que contenga todos los
otros elementos.
Extensin Poderosa: Como se mencion anteriormente, XML slo se usa
para definir la sntaxis. En otras palabras, se usa para definir contenido.
Para definir la semntica, el estilo o la presentacin, necesitamos usar
"Extensible Stylesheet Language" (XSL). Observa que un documento
podra tener mltiples hojas de estilo que podran ser usadas por diferentes
usuarios.
Nota:
Un documento bien formateado es manejable si el documento es simple, o cuando
se procesan estructuras sencillas a travs de la red cuando no hay problemas de
ancho de banda, ya que no tiene la sobrecarga de un DTD complejo.


4

XML contra HTML
XML y HTML son lenguajes de marcas, donde las etiquetas se usan para anotar
los datos. Las principales diferencias son:
En HTML, la sntaxis y la semntica del documento est definidas. HTML
slo se puede usar para crear una representacin visible para el usuario.
XML permite definir sntaxis de documentos.
Los documentos HTML no estn bien formateados. Por ejemplo, no todas
las etiquetas tiene su correspondiente etiqueta de cierre. Los documentos
XML estn bien formateados.
Los nombres de las etiquetas son sensibles a las maysculas en XML, pero
no en HTML.
Miremos un documento XML. El ejemplo siguiente es un documento de ejemplo
XML, desde un servidor ficticio de cotizaciones, representa una lista de stocks.
Como podemos ver, hay un elemento raz (portfolio), y cada elemento tiene una
etiqueta de inicio y una etiqueta de cierre..
Ejemplo 1: strocks.xml
<?xml version="1.0" encoding="UTF-8"?>
<portfolio>
<stock>
<symbol>SUNW</symbol>
<name>Sun Microsystems</name>
<price>17.1</price>
</stock>
<stock>
<symbol>AOL</symbol>
<name>America Online</name>
<price>51.05</price>
</stock>
<stock>
<symbol>IBM</symbol>
<name>International Business Machines</name>
<price>116.10</price>
</stock>
<stock>
<symbol>MOT</symbol>
<name>MOTOROLA</name>
<price>15.20</price>
</Stock>
</portfolio>
5

La primera lnea indica el nmero de versin de XML, que es 1; y le permite al
procesador conocer qu esquema de cdificacin se va a utilizar "UTF-8".
Aunque es un documento sencillo contiene informacin til que puede ser
procesada fcilmente porque est bien estructurada. Por ejemplo, el servidor de
stocks podra querer ordenar el portfolio, en un orden especfico, basndose en el
precio de los stocks.
Presentar Documentos XML
Los documentos XML contienen datos portables. Esto significa que el ejemplo 1
puede procesarse como salida para diferentes navegadores (navegadores de
escritorio para PC, micro navegadores para dispositivos de mano). En otras
palabras, un documento XML puede ser transformado en HTML o WML o
cualquier otro lenguaje de marcas.
Si cargamos el documento stocks.xml en un navegador que soporte XML (como
IE de Microsoft), veramos algo similar a la Figura 1:


Figura 1: stocks.xml en un navegador
Bsicamente, el navegador ha analizado el documento y lo ha mostrado de una
forma estructurada. Pero, esto no es realmente til desde el punto de vista de un
6

usuario. Los usuarios desean ver los datos mostrados como informacin til de
una forma que sea fcil de navegar.
Una forma agradable para mostrar documentos XML es aplicar una transformacin
sobre el documento XML, para extraer los datos o para crear un nuevo formato
(como transformar datos XML a HTML). Esta transformacin se puede hacer
usando un lenguaje de transformacin como "Extensible Stylesheet Language
Transformation" (XSLT), que forma parte de XSL. XSL permite que escribamos el
vocabulario XML para especificar la semntica del formato. Es decir hay dos
partes de XSL, que son parte de la actividad de estilo del World Wide Web
Consortium (W3C).
Lenguaje de Transformacin (XSLT)
Lenguaje de Formateo (objetos de formateo XSL)
La hoja de estilos XSL del Ejemplo 2 realiza la transformacin requerida para el
elemento portfolio. Genera marcas HTML y extrae datos de los elementos del
documento stocks.xml.
Ejemplo 2: stocks.xsl
<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl=
"http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<html>
<head>
<title>Stocks</title>
</head>
<body bgcolor="#ffffcc" text="#0000ff">
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="portfolio">

<table border="2" width="50%">
<tr>
<th>Stock Symbol</th>
<th>Company Name</th>
<th>Price</th>
</tr>
<xsl:for-each select="stock">
<tr>
7

<td>
<i><xsl:value-of select=
"symbol"/></i>
</td>
<td>
<xsl:value-of select="name"/>
</td>
<td>
<xsl:value-of select="price"/>
</td>

</tr>
</xsl:for-each>
</table>
</xsl:template>

</xsl:stylesheet>
Parece un poco complejo , no? Sola al principio, una vez que conozcamos la
sntaxis XSL es bastante sencillo. Aqu lo tenemos todo sobre la sntaxis de arriba:
xsl:stylesheet: elemento raz
xsl:template: cmo transformar los nodos seleccionados
match: atributo para seleccionar un nodo
"/": nodo raz del documento XML de entrada
xsl:apply-templates: aplica las plantillas a los hijos del nodo seleccionado
xsl:value-of: nodo seleccionados (extrae datos de los nodos seleccionados)
Ahora la cuestin es: cmo usar esta hoja de estilos XSL con el documento
stocks.xml? La respuesta es sencilla, necesitamos modificar la primera lnea del
documento stocks.xml del Ejemplo 1 para usar la hoja de estilos stocks.xsl para su
representacin. La primera lnea del ejemplo 1 ahora debera ser:
<?xml:stylesheet type="text/xsl" href="stocks.xsl" version="1.0"
encoding="UTF-8"?>
Esto dice bsicamente que cuando cargamos stocks.xml en un navegador (ser
analizado como un rbol de nodos), se debe utilizar la hoja de estilos
correspondiente para extraer datos de los nodos del rbol. Cuando cargamos el
fichero stocks.xml modificado en un navegador que soporta XML y XSL (como IE
de Microsoft), veremos algo similar a la figura 2.:
8



Figura 2: Usando una hoja de estilo (stocks.xsl)
Generar XML desde JSP
Se puede usar la tecnologa JSP para generar documentos XML. Una pgina JSP
podra generar fcilmente una respuesta conteniendo el documento stocks.xml
del Ejemplo 1, como se ve en el ejemplo 3. El principal requerimiento para generar
XML es que la pgina JSP seleccione el tipo de contenido de la pgina de forma
apropiada. Como podemos ver a partir del ejemplo 3, el tipo de contenido se
selecciona a text/xml. Se puede usar la misma tcnica para generar otros
lenguajes de marcas (como WML).
Ejemplo 3: genXML.jsp

<%@ page contentType="text/xml" %>

<?xml version="1.0" encoding="UTF-8"?>

<portfolio>
<stock>
<symbol>SUNW</symbol>
<name>Sun Microsystems</name>
<price>17.1</price>
</stock>
<stock>
<symbol>AOL</symbol>
<name>America Online</name>
<price>51.05</price>
</stock>
<stock>
<symbol>IBM</symbol>
<name>International Business
Machines</name>
<price>116.10</price>
</stock>
<stock>
9

<symbol>MOT</symbol>
<name>MOTOROLA</name>
<price>15.20</price>
</stock>
</portfolio>
Si solicitamos la pgina genXML.jsp desde un servidor Web (como Tomcat),
veramos algo similar a la figura 1.
Generar XML desde JSP y JavaBeans
Los datos para XML tambin pueden recuperarse desde un componente
JavaBean. Por ejemplo, el siguiente componente JavaBean, PortfolioBean, define
un bean con datos de stocks:
Ejemplo 4: PortfolioBean.java
package stocks;

import java.util.*;

public class PortfolioBean implements
java.io.Serializable {
private Vector portfolio = new Vector();

public PortfolioBean() {
portfolio.addElement(new Stock("SUNW",
"Sun Microsystems", (float) 17.1));
portfolio.addElement(new Stock("AOL",
"America Online", (float) 51.05));
portfolio.addElement(new Stock("IBM",
"International Business Machines",
(float) 116.10));
portfolio.addElement(new Stock("MOT",
"MOTOROLA", (float) 15.20));
}

public Iterator getPortfolio() {
return portfolio.iterator();
}
}
La clase PortfolioBean usa la clase Stock que se muestra en el Ejemplo 5.
Ejemplo 5: Stock.java
10

package stocks;

public class Stock implements java.io.Serializable {
private String symbol;
private String name;
private float price;

public Stock(String symbol, String name,
float price) {
this.symbol = symbol;
this.name = name;
this.price = price;
}

public String getSymbol() {
return symbol;
}

public String getName() {
return name;
}

public float getPrice() {
return price;
}
}
Ahora, podemos escribir una pgina JSP para generar un documento XML donde
los datos son recuperados desde el PortfolioBean, como se ve en el Ejemplo 6.
Ejemplo 6: stocks.jsp
<%@ page contentType="text/xml" %>
<%@ page import="stocks.*" %>

<jsp:useBean id="portfolio"
class="stocks.PortfolioBean" />

<%
java.util.Iterator folio =
portfolio.getPortfolio();
Stock stock = null;
%>

<?xml version="1.0" encoding="UTF-8"?>
<portfolio>
<% while (folio.hasNext()) { %>
11

<% stock = (Stock)folio.next(); %>
<stock>
<symbol<>%=
stock.getSymbol() %></symbol>
<name<>%=
stock.getName() %></name>
<price<>%=
stock.getPrice() %></price>
</stock>
<% } %>
</portfolio>
Si solicitamos la pgina stocks.jsp desde un navegador Web que soporte XML,
obtendramos algo similar a la Figura 3.


Figure 3: Generar XML desde JSP y JavaBeans
Si reemplazamos la lnea:
<?xml version="1.0" encoding="UTF-8"?>
12

con una lnea que especifique una hoja de estilos:
<?xml:stylesheet type="text/xsl" href="stocks.xsl" version="1.0"
encoding="UTF-8"?>
El documento XML ser generado y se aplicar la hoja de estilo XSL y veremos
algo similar a la figura 2 anterior.
Convertir XML a Objetos del Lado del Servidor
Hemos visto cmo generar XML, as que la pregunta ahora es cmo consumirlo (o
usarlo) en aplicaciones. Para poder hacer todo lo que necesitamos para convertir
XML en objetos del lado del servidor y extraer las propiedades del objeto. La
conversin no es automtica; tenemos que analizar manualmente un documento
XML, y encapsularlo dentro de un componente JavaBeans. En el futuro sin
embargo, la tecnologa de unin XML/Java automatizar este proceso pues
permitir compilar un esquema XML en clases Java.
Para analizar se pueden usar dos interfaces:
Simple API for XML (SAX)
Document Object Model (DOM)
Antes de introducirnos en esta tcnica de anlisis, primero describiremos el
entorno de software.
El Entorno de Software
El entorno de software que usaremos para analizar es el API para Procesamiento
de XML (JAXP) versin 1.1 que soporta SAX , DOM level 2, y XSL
transformations.
Para instalarlo, lo descomprimimos en un directorio de nuestro eleccin, y
actualizamos el classpath para incluir el rbol de fichero JAR del JAXP.
crimson.jar: el analizador XML por defecto, que fue derivado del analizador
"Java Project X " de Sun
xalan.jar: El motor XSLT por defecto
jaxp.jar: los APIs
Alternativamente, podemos instalar estos ficheros JAR como extensiones de Java
2 simplemente copindolos en el directorio JAVA_HOME/jre/lib/ext, donde
JAVA_HOME es el directorio donde instalamos el JDK (por ejemplo c:\jdk1.3).
Instalar los ficheros JAR como extensiones de Java 2 elimina la necesidad de
modificar el classpath.
13


API Simple para XML (SAX)
SAX es un sencillo API para XML. No es un analizador! Simplemente es un
interface estndar, implementado por muchos y diferentes analizadores XML, que
fue desarrollado por los miembros de la XML-DEV mailing list, actualmente
hospedada por OASIS.
La ventaja principal de SAX es que es ligero y rpido. Esto es principalmente
porque es un API basado en eventos, lo que significa que reporta eventos de
anlisis (como el comienzo y el final de los elementos) directamente a la aplicacin
usando servicios repetidos, segn lo mostrado en la Figura 4. Por lo tanto, la
aplicacin implementa manejadores para ocuparse de los diversos eventos, como
el manejo de eventos en un interface grfico de usuario.


Figura 4: SAX usa retrollamadas para notificar a los manejadores las cosas de
inters
Usar SAX implica los siguientes pasos, mostrados en le Figura 7.
Implementar uno o ms manejadores (en este ejemplo se implementa el
ContentHandler)
Crear un XMLReader
Crear un InputSource
Llamar a parse sobre la fuente de entrada
Observa que MySAXParserBean sobreescribe los mtodos startElement,
endElement, y characters, todos los cuales estn definidos por el interface
ContentHandler. El analizador llama al mtodo startElement al principio de cada
elemento del documento XML, y llama al mtodo characters para reportar cada
dato de caracter, y finalmente llama al mtodo endElement al final de cada
elemento del documento XML.
Ejemplo 7: MyParserBean.java
package saxbean;

14

import java.io.*;
import java.util.*;
import org.xml.sax.*;
import org.xml.sax.helpers.DefaultHandler;
import javax.xml.parsers.SAXParserFactory;
import
javax.xml.parsers.ParserConfigurationException;
import javax.xml.parsers.SAXParser;

public class MySAXParserBean extends
DefaultHandler implements java.io.Serializable {
private String text;
private Vector vector = new Vector();
private MyElement current = null;

public MySAXParserBean() {
}

public Vector parse(String filename) throws
Exception {
SAXParserFactory spf =
SAXParserFactory.newInstance();
spf.setValidating(false);
SAXParser saxParser = spf.newSAXParser();
// create an XML reader
XMLReader reader = saxParser.getXMLReader();
FileReader file = new FileReader(filename);
// set handler
reader.setContentHandler(this);
// call parse on an input source
reader.parse(new InputSource(file));
return vector;
}

// receive notification of the beginning of an
element
public void startElement (String uri, String name,
String qName, Attributes atts) {
current = new MyElement(
uri, name, qName, atts);
vector.addElement(current);
text = new String();

}

// receive notification of the end of an element
public void endElement (String uri, String name,
15

String qName) {
if(current != null && text != null) {
current.setValue(text.trim());
}
current = null;
}

// receive notification of character data
public void characters (char ch[], int start,
int length) {
if(current != null && text != null) {
String value = new String(
ch, start, length);
text += value;
}
}
}
MySAXParserBean est usando la clase MyElement, que se define en el ejemplo
8.
Ejemplo 8: MyElement.java
package saxbean;

import org.xml.sax.Attributes;

public class MyElement implements
java.io.Serializable {
String uri;
String localName;
String qName;
String value=null;
Attributes attributes;

public MyElement(String uri, String localName,
String qName, Attributes attributes) {
this.uri = uri;
this.localName = localName;
this.qName = qName;
this.attributes = attributes;
}

public String getUri() {
return uri;
}

16

public String getLocalName() {
return localName;
}

public String getQname() {
return qName;
}

public Attributes getAttributes() {
return attributes;
}

public String getValue() {
return value;
}

public void setValue(String value) {
this.value = value;
}
}
Ahora, si queremos, podemos probar el MySAXParserBean desde la lnea de
comando para asegurarnos de que funciona. El ejemplo 9 muestra una sencilla
clase de prueba:
Ejemplo 9: MyTestDriver.java
import java.io.*;
import java.util.*;

public class MyTestDriver {

public static void main(String argv[]) {
String file = new String(argv[0]);
MySAXParserBean p = new MySAXParserBean();
String str = null;
try {
Collection v = p.parse(file);
Iterator it = v.iterator();
while(it.hasNext()) {
MyElement element =
(MyElement)it.next();
String tag = element.getLocalName();

if(tag.equals("symbol")) {
System.out.println("Symbol.
" + element.getValue());
17

} else if(tag.equals("name")) {
System.out.println("Name: "
+element.getValue());
} else if (tag.equals("price")) {
System.out.println("Price: "
+element.getValue());
}
}
} catch (Exception e) {
}
}
}
Si ejecutamos MyTestDriver proporcionndole el documento XML del ejemplo 1
"stocks.xml", veremos algo similar a la Figura 5.


Figura 5: Probar el analizador XML desde la lnea de comandos.
Ahora, veamos cmo usar el MySAXParserBean desde una pgina JSP. Como
podemos ver desde el Ejemplo 10, es sencillo. LLamamos al mtodo parse de
MySAXParserBean sobre el documento XML (stocks.xml), y luego iteramos sobre
los stocks para extraer los datos y formatearlos en una tabla HTML.
Nota:
El documento XML de entrada al mtodo parse pueder ser una URL que
referencie a un documento XML (como http://www.host.com/xml/ebiz.xml).
Ejemplo 10: saxstocks.jsp
<html>
<head>
<title>sax parser</title>
<%@ page import="java.util.*" %>
<%@ page import="saxbean.*" %>
</head>
18


<body bgcolor="#ffffcc">

<jsp:useBean id="saxparser"
class="saxbean.MySAXParserBean" />

<%
Collection stocks =
saxparser.parse("c:/stocks/stocks.xml");
Iterator ir = stocks.iterator();
%>

<center>
<h3>My Portfolio</h3>
<table border="2" width="50%">
<tr>
<th>Stock Symbol</th>
<th>Company Name</th>
<th>Price</th>
</tr>
<tr>

<%
while(ir.hasNext()) {
MyElement element = (MyElement) ir.next();
String tag = element.getLocalName();
if(tag.equals("symbol")) { %>
<td><%= element.getValue() %></td>
<% } else if (tag.equals("name")) { %>
<td><%= element.getValue() %></td>
<% } else if (tag.equals("price")) { %>
<td><%= element.getValue() %><
/td></tr><tr>
<% } %>
<% } %>

</body>
</html>
Si solicitamos saxstocks.jsp veremos algo similar a la Figura 6.
19



Figura 6: Usar MySAXParserBean desdeJSP
Document Object Model (DOM)
DOM es un interface neutral a la plataforma - y al lenguaje- para acceder y
actualizar documentos. Sin embargo, al contrario que SAX, DOM accede a un
documento XML a travs de una estructura arborescente, compuesta por nodos
elemento y nodos de texto, segn lo mostrado en la figura 7.


Figura 7: DOM crea un rbol desde un documento XML.
El rbol ser construido en memoria y por lo tanto se consumen grandes requisitos
de memoria al usar DOM. Sin embargo, la ventaja de DOM es que es ms simple
de programar que SAX. Como podemos ver desde el ejemplo 11, un documento
XML se puede convertir en un rbol con tres lneas de cdigo. Una vez que
tengamos un rbol, podemos recorrerlo o atravesarlo hacia adelante y hacia atrs.
Ejemplo 11: MyDOMParserBean.java
package dombean;

import javax.xml.parsers.*;
import org.w3c.dom.*;
20


import java.io.*;

public class MyDOMParserBean
implements java.io.Serializable {
public MyDOMParserBean() {
}

public static Document
getDocument(String file) throws Exception {

// Step 1: create a DocumentBuilderFactory
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();

// Step 2: create a DocumentBuilder
DocumentBuilder db = dbf.newDocumentBuilder();

// Step 3: parse the input file to geta Document object
Document doc = db.parse(new File(file));
return doc;
}
}
Esto producir un rbol, por eso necesitamos atraversarlo, Esto se hace usando el
mtodo traverseTree en la pgina JSP, domstocks.jsp, en el ejemplo 12.
Ejemplo 12: domstocks.jsp
<html>
<head>
<title>dom parser</title>
<%@ page import="javax.xml.parsers.*" %>
<%@ page import="org.w3c.dom.*" %>
<%@ page import="dombean.*" %>
</head>

<body bgcolor="#ffffcc">

<center>
<h3>My Portfolio</h3>
<table border="2" width="50%">
<tr>
<th>Stock Symbol</th>
<th>Company Name</th>
<th>Price</th>
</tr>

21

<jsp:useBean id="domparser" class="dombean.MyDOMParserBean" />

<%
Document doc = domparser.getDocument("c:/stocks/stocks.xml");
traverseTree(doc, out);
%>

<%! private void traverseTree(Node node,
JspWriter out) throws Exception {
if(node == null) {
return;
}
int type = node.getNodeType();

switch (type) {
// handle document nodes
case Node.DOCUMENT_NODE: {
out.println("<tr>");
traverseTree(((Document)node).getDocumentElement(), out);
break;
}
// handle element nodes
case Node.ELEMENT_NODE: {
String elementName = node.getNodeName();
if(elementName.equals("stock")) {
out.println("</tr><tr>");
}
NodeList childNodes = node.getChildNodes();
if(childNodes != null) {
int length = childNodes.getLength();
for (int loopIndex = 0; loopIndex <
length ; loopIndex++)
{
traverseTree
(childNodes.item(loopIndex),out);
}
}
break;
}
// handle text nodes
case Node.TEXT_NODE: {
String data =
node.getNodeValue().trim();

if((data.indexOf("\n") <0) && (data.length() > 0)) {
out.println("<td>"+
data+"</td>");
22

}
}
}
}

%>

</body>
</html>
Si solicitamos domstocks.jsp desde un navegador, veramos algo similar a la
figura 6 de arriba.
Transformar XML
Como que los navegadores estn llegando a estar disponibles en ms
dispositivos, la habilidad de transformar datos de Internet en mltiples formatos,
como XML, HTML, WML, o XHTML, se est convirtiendo cada vez en ms
importante. El XSLT se puede utilizar para transformar XML en cualquier formato
deseado. Un motor de transformacin o un procesador tomara un documento
XML como entrada y utilizara la hoja de estilo de transformacin XSL para crear
un nuevo formato de documento, segn lo mostrado en la figura 8.


Figura 8: Usar un motor XSLT
El ejemplo siguiente, xml2html, muestra cmo transformar el documento XML,
stocks.xml, en un documento HTML, stocks.html. Como podemos ver, una vez
que tengamos el documento XML y la hoja de estilo XSL a aplicar, toda la
transformacin se hace en tres lneas.
Ejemplo 13: xml2html.java
23

import javax.xml.transform.*;
import javax.xml.transform.stream.*;
import java.io.*;

public class xml2html {
public static void main(String[] args)
throws TransformerException,
TransformerConfigurationException,
FileNotFoundException, IOException
{
TransformerFactory tFactory = TransformerFactory.newInstance();
Transformer transformer = tFactory.newTransformer(new
StreamSource("stocks.xsl"));
transformer.transform(new StreamSource(args[0]), new
StreamResult(new FileOutputStream(args[1])));
System.out.println("** The output is written in "+ args[1]+" **");
}
}
Para ejecutar este ejemplo, usamos el comando:
C:> java xml2html stocks.xml stocks.html
stocks.xml es el fichero de entrada, y ser transformado en stocks.html
basndose en la hoja de estilos stocks.xsl. Aqu estamos utilizando la hoja de
estilo anterior, pero hemos agregado un par de nuevas lneas para especificar el
mtodo de salida (HTML en este caso) segn lo mostrado en el ejemplo 14.
Ejemplo 14: stocks2.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl=
"http://www.w3.org/1999/XSL/Transform" version=
"1.0">

<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
<html>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="portfolio">
<table border="2" width="50%">
24

<xsl:for-each select="stock">
<tr>
<td>
<i><xsl:value-of select=
"symbol"/></i>
</td>
<td>
<xsl:value-of select="name"/>
</td>
<td>
<xsl:value-of select="price"/>
</td>

</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
Se generarn las etiquetas HTML como se muestra en la Figura 9:


Figura 9: Transformacin xml2html

25




Definindolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las
pginas web de internet". Ms concretamente, HTML es el lenguaje con el que se
"escriben" la mayora de pginas web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los
programas que utilizan los diseadores generan pginas escritas en HTML y los
navegadores (por ejemplo Google Chrome o Mozilla Firefox) que utilizamos los
usuarios muestran las pginas web despus de leer su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de
diseo, es muy fcil de aprender y escribir por parte de las personas. En realidad,
HTML son las siglas de HyperText Markup Language y ms adelante se ver el
significado de cada una de estas palabras.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas
define un organismo sin nimo de lucro llamado World Wide Web Consortium,
ms conocido como W3C. Como se trata de un estndar reconocido por todas las
empresas relacionadas con el mundo de internet, una misma pgina HTML se
visualiza de forma muy similar en cualquier navegador de cualquier sistema
operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido
universalmente y que permite publicar informacin de forma global". Desde su
creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente
para crear documentos electrnicos a ser un lenguaje que se utiliza en diversas
aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.
Java en las Pginas Web.
Hasta ahora hemos visto una serie de mtodos que nos permiten incluir sonido,
vdeo y otros contenidos multimedia as como multitud de archivos de diferentes
formatos en una pgina Web. Al insertar alguno de estos objetos conseguimos
incluso tener cierta interactividad con el visitante de las pginas y gracias a ellos
quedan cubiertas gran parte de nuestras necesidades, pero seguimos teniendo
algunas limitaciones. Gracias al lenguaje Java podremos insertar contenido
multimedia con mucha mayor libertad y, lo que es ms importante, conseguiremos
interactividad completa con los navegantes.
26

Java es un lenguaje de programacin desarrollado por la empresa Sun
Microsystems. En la actualidad esta misma empresa se encarga, junto con otras
empresas asociadas, de su desarrollo. En la pgina Java.sun.com (figura 1.1)
podemos encontrar gran cantidad de recursos relacionados con Java,
incluyendo tutoriales, libros o cdigo algunos de los cuales se distribuye
gratuitamente. Centrndonos en el lenguaje, ste es muy similar a los usados para
realizar las aplicaciones que usamos habitualmente en nuestros ordenadores
(Word, Netscape,Explorer o el propio Windows). La gran diferencia de
Java con respecto a otros lenguajes consiste en la posibilidad de hacer
pequeos programas y ejecutarlos desde una pgina Web. Estos programas
reciben el nombre de applets Cada da hay ms pginas en Internet que los usan
consiguiendo lo que hasta hace poco era imposible. En la pgina de Gamelan
(www.Gamelan.com) podemos encontrar gran cantidad relacionada con la
tecnologa Java, en la figura 1.2 podemos ver una muestra de esta pgina. En
una de sus pginas de su nueva ubicacin:
www.developer.com/directories/pages/dir.Java.sites.html nos ofrecen un listado
de las mejores Webs que podemos encontrar hoy en da que usen la tecnologa
Java, es muy recomendable visitar alguna de ellas para hacernos una idea real
de lo que puede llegar a conseguirse usando este excelente lenguaje.


Figura 1.1. En la pgina Web de Sun Microsystems, creadora del lenguaje Java,
podemos encontrar gran cantidad de documentacin y ejemplos de sus posibilidades

27



Figura 1.2. Gamela es una excelente fuente de recursos Java conocida desde hace
tiempo. En la actualidad su direccin est en proceso de cambio a: www.developer.com

El conocimiento del lenguaje Java se muestra cada vez ms importante para
todos aquellos programadores de Internet. Ms adelante en esta obra
abordaremos ampliamente su estudio y aprenderemos a crear nuestras propias
Aplicaciones y applets. Sin embargo no es necesario conocer este lenguaje para
aprovechar sus caractersticas en nuestras pginas Web. Existen gran cantidad de
applets gratuitos que se distribuyen a travs del WWW y que pueden ser usados
libremente en nuestras pginas. En esta seccin aprenderemos a insertarlos en
nuestras pginas y a usarlos adecuadamente para aprovechar las posibilidades de
esta nueva tecnologa.

Nota
La propia compaa Sun Microsystems ha creado una pgina en la que se
muestran ejemplos y se distribuyen gratuitamente gran cantidad de applets.
La direccin es: Java.sun.com/applets/index.html.
Otra forma de buscar applets gratuitos en el WWW consiste en dirigirse al
ndice Yahoo y buscar la cadena "Java applets".


Insercin de Applets Java
.
De ahora en adelante consideraremos que ya tenemos un applet, bien porque lo
hemos programado nosotros mismos, bien porque estamos usando un applet de
distribucin gratuita, es hora de aprender a insertarlo en nuestra pgina Web. Para
ello usaremos una nueva etiqueta:

APPLET. Esta etiqueta est formada por una instruccin de inicio, <APPLET> , y
una instruccin de fin, </APPLET> .


28

Nota
La etiqueta APPLET fue introducida por Netscape en la versin 2.0 de
Navigator fruto de un acuerdo con Sun para soportar la tecnologa
Java. Todos sus navegadores posteriores tambin la soportan. El otro
gran navegador, Microsoft Internet Explorer, soporta la tecnologa Java
desde la versin 3.0. En cuanto al estndar se refiere, esta etiqueta se
incluye en la especificacin HTML 3.2, aunque no podemos asegurar que
los navegadores posteriores que respetan la norma HTML 3.2 soporten la
tecnologa Java, simplemente entienden la etiqueta, pero no son capaces
de ejecutar un applet.

La insercin de un applet en una pgina es similar a la insercin de una imagen, a
lo cual ya estamos muy acostumbrados. Deberemos especificar el archivo donde
se encuentra el applet y las dimensiones (anchura y altura) que este debe ocupar
en la pgina. Al igual que ocurra con las imgenes el applet se introducir en el
lugar exacto donde indique su cdigo, si es necesario se insertar entre el texto,
pero no pasar a una nueva lnea, como suceda con las marquesinas, si no lo
indicamos especficamente (con la etiqueta <BR> ). Para indicar el archivo en el
que se encuentra el applet usaremos el atributo CODE y para especificar la
anchura y altura en pixeles usaremos WIDTH y HEIGHT respectivamente. En
resumen, para insertar un applet debemos usar el siguiente cdigo
En cualquier lugar de la pgina:


<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
</APPLET>


Los tres atributos que hemos usado deben incluirse obligatoriamente siempre que
insertemos un applet. Esto parece obvio con el atributo CODE , ya que no se
podra insertar el applet sin indicar donde est, pero resulta ms extrao con los
atributos WIDTH y HEIGHT . Aun as, si no especificamos el tamao que debe
ocupar el applet en la pgina no ser mostrado ni ejecutado por el navegador.
Debemos estar muy atentos a este detalle ya que hasta ahora estos dos atributos
eran totalmente optativos y por ello es un error comn olvidarlos y no ser capaz de
descubrir porqu no funciona el applet.

Y aqu vemos como insertar un applet de ejemplo:

<HTML>
<HEAD>
<TITLE>Applet sonoro</TITLE>
</HEAD>
<BODY>
<APPLETCODE="SoundExample.classWIDTH=450
HEIGHT=50></APPLET>
</BODY></HTML>
29

Aviso

Los applets de Java son sensibles a las maysculas y a las minsculas,
si no ponemos el nombre del archivo exactamente igual, incluyendo
maysculas o minsculas, no hubiera funcionado. Por ejemplo, si
hubiramos escrito CODE="soundexample.class" el cdigo anterior no
hubiera funcionado. Este es un ejemplo muy comn por lo que debemos
tener cuidado.


Si visualizamos este archivo con un navegador que soporte la tecnologa Java
debemos obtener el resultado de la figura 1.3.


Figura 1.3. Este es el aspecto que muestra nuestro primer applet insertado en una pgina
Web. En un navegador con soporte Java podemos pulsar sobre los botones para
obtener diferentes sonidos.



Nota

Los applets Java tienen la terminacin .class , como ya hemos
comentado antes, esto exige que para poder usar un applet debemos
utilizar un sistema operativo que soporte nombres largos. Desgraciada-
mente los usuarios de Windows 3.1 no podrn probar esta tecnologa
localmente en su ordenador. Afortunadamente esto no significa que no
puedan disfrutar los applets que estn publicados en el WWW.


Pasemos a explicar que ocurre cuando el navegador se encuentra con el cdigo
anterior. En primer lugar busca el archivo SoundExample.class en la misma
direccin URL y en el mismo directorio donde se encuentre la pgina actual y lo
baja a nuestro ordenador (este es un ejemplo en el que ambos archivos ya estn
30

en nuestro ordenador, con lo que este paso no sera necesario). Mientras reserva
un rectngulo, con las dimensiones especificadas por los atributos WIDTH y
HEIGHT , donde ser mostrado el applet. Una vez ha llegado el archivo anterior el
navegador llama a lo que se conoce como mquina virtual Java (tambin
llamada JVM, Java Virtual Machine ) que pasar a ejecutar el applet. A partir de
ese momento el applet se ejecutar como cualquier otro programa de nuestro
ordenador, aunque lo har en el interior de la pgina Web. De esta forma cuando
nuestro cursos este dentro del rectngulo de 450x50 creado el control pasar al
applet y si pulsamos los botones el propio applet ser el encargado de realizar las
acciones oportunas. La Mquina Virtual Java implementa adems ciertas
medidas de seguridad para que el applet no pueda, por ejemplo, borrar nuestro
disco duro. Una vez conocemos el funcionamiento de los applets podemos
adentrarnos ms a fondo en las diferentes caractersticas de estos que pueden ser
modificadas con el lenguaje HTML.


Especificando la direccin del applet.

Dejando a un lado el ejemplo y volviendo al cdigo general es obvio que el cdigo
es, todava, muy sencillo. Para empezar el archivo con el applet (que siempre
tiene la extensin .class ) se encuentra en el mismo directorio que el documento
HTML de la pgina actual. Lo habitual, sin embargo, es agrupar todos los applets
Java en un directorio dedicado de la misma manera que hacamos con las
imgenes. Podramos pensar que para reflejar este cambio no tendramos ms
que cambiar ligeramente el cdigo y escribir:

<APPLET CODE="applets/nombre_applet.class" WIDTH="ancho"
HEIGHT="alto">
</APPLET>


Por desgracia, este cdigo es incorrecto. El atributo CODE permite nicamente
especificar el nombre del archivo donde se encuentra el applet, pero no podemos
incluir un directorio ni, por supuesto, una direccin de Internet. Significa esto que
es imposible? Afortunadamente no, los diseadores de esta etiqueta pensaron en
ello e introdujeron un nuevo atributo, CODEBASE , que nos permitir indicar la
direccin URL o ruta de directorios donde se encuentre el archivo especificado en
el atributo CODE . Usando CODEBASE podemos reescribir el cdigo anterior de
manera correcta:


<APPLET CODEBASE="applets/" CODE="nombre_applet.class"
WIDTH="ancho" HEIGHT="alto">
</APPLET>


31

Sin embargo podemos ir ms all. Podemos usar en nuestra pgina un applet que
se encuentre en cualquier otro lugar del WWW sin tener que copiarlo a nuestro
servidor. Para ello no tendremos ms que usar el atributo CODEBASE para
especificar la direccin base. Por ejemplo:

<APPLET code=TicTacToe.class width=120 height=120
CODEBASE="http:// Java .sun.com/applets/TicTacToe/1.1/">
</APPLET>

Esta direccin es real, si incluimos este cdigo en una pgina habremos insertado
un juego de las tres en raya como el que vemos en la figura 1.4 en el que
cualquier visitante de nuestra pgina podr jugar (contra el ordenador). Si vemos
en cualquier pgina un applet que nos gusta y sus autores permiten que sea
utilizado en pginas ajenas (esto es muy importante) no debemos dudarlo y
usarlo. La carga del applet no ser ms lenta que si estuviera en nuestro mismo
servidor y adems tendremos a nuestra disposicin una mayor cantidad de
applets, ya que muchos autores permiten el uso de applets siempre y cuando
estos no sean copiados de su servidor sino usados directamente desde l.


Figura 1.4. Usando applets Java podemos insertar juegos interactivos como en este
caso. Usando el atributo CODEBASE no es necesario que el applet est en nuestro
servidor.


Otros atributos de la etiqueta APPLET.

Adems de los cuatro atributos que hemos vistos hasta ahora, que suelen usarse
prcticamente siempre, existen otros que pueden resultarnos muy tiles. Todos
ellos se encuentran incluidos en el estndar HTML 3.2:

NAME="nombre del applet" : Este atributo es usado para identificar el applet entre
el resto de elementos u otros applets de la pgina. Poner el nombre del applet no
es necesario, pero los buenos programadores aconsejan hacerlo por una cuestin
32

de estilo. Por otro lado tener el applet identificado es tremendamente til o incluso
obligatorio si posterior- mente queremos que este se comunique, por ejemplo, con
cdigo JavaScript.

ALIGN: Con esta etiqueta podremos controlar el alineamiento horizontal de la
pgina. Puede tomar tres valores: Left, right y center para conseguir que el applet
est alineado a la izquierda, a la derecha o est centrado respectivamente. El
funcionamiento de estos tres valores es similar al de las imgenes y si
especificamos un alineamiento a cualquiera de los dos lados el texto circundante
envolver al applet.

VSPACE="pixeles": Con este atributo establecemos un margen vertical del tamao
en pixeles especificado. El margen vertical se refiere a la distancia entre la parte
superior del applet y los elementos de la pgina que estn sobre l y entre la parte
inferior y los elementos situados debajo.

HSPACE="pixeles" : Este atributo nos permite establecer el ancho del margen
horizontal, es decir el espacio entre el applet y los elementos que estn situados a
su derecha y a su izquierda.

ALT="texto alternativo" : Esta etiqueta es usada por aquellos navegadores que
s entienden la etiqueta APPLET , pero no soportan la tecnologa Java. Todos
los navegadores que cumplan la norma HTML 3.2 entienden esta etiqueta, pero
eso no quiere decir que sean capaces de ejecutar un applet. Esto ocurre, por
ejemplo, con los navegadores de slo texto, ya que al ser los applets grficos en
su mayora no son capaces de mostrarlos en pantalla. Este texto tambin es
mostrado si en un navegador con soporte de tecnologa Java tiene algn
problema y no es capaz de ejecutar el applet.

Continuando con el ejemplo anteriormente mostrado podemos usar estos atributos
para obtener un cdigo ms completo. Para empezar es muy recomendable usar
siempre los atributos NAME y ALT, con lo que quedara (mostramos nicamente
el cdigo correspondiente a la insercin del applet):

<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT=50
ALT="Su navegador soporta la tecnologa Java , pero por algn error no
es capaz de mostrar este applet"NAME="Ejemplo Sonoro">
</APPLET>

Por otro lado podemos usar el atributo ALIGN para que el texto bordee el applet.
En este caso es recomendable usar tambin VSPACE y HSPACE para crear un
margen:

<APPLET CODEBASE="ej1/" CODE="SoundExample.class" WIDTH=450
HEIGHT=50 ALIGN="left" HSPACE=15 VSPACE=15>
</APPLET>
33

Escribiendo texto antes y despus de esta etiqueta obtenemos el resultado de la
figura 1.5.



Figura 11.5. Usando los atributos

Los atributos anteriores son los que aparecieron inicialmente junto con la etiqueta
APPLET y que fueron adoptados por el estndar HTML 3.2 pero adems de estas,
tanto Microsoft como Netscape han ido incorporando otros nuevos en sus
navegadores:

ARCHIVE="archivo_comprimido": Permite especificar un archivo auxiliar al applet
de Java donde pueden ser insertados todas las imgenes, sonidos y cualquier
otro archivo auxiliar que pueda ser necesario para la ejecucin del applet. La
existencia de este atributo ha sido pensada para comprimir todos los archivos
auxiliares en uno slo de menor tamao para que el tiempo de carga sea menor.
Cualquier otro fichero que necesite el applet que no este incluido en este archivo
comprimido ser buscado por los mtodos habituales. Este atributo es exclusivo
del navegador Netscape Navigator.

MAYSCRIPT: Este atributo se usa por si slo, sin ningn valor, y su presencia
significa que el applet Java puede ser accedido usando cdigo JavaScript.

TITLE="texto": Este atributo exclusivo de Internet Explorer 4.0 permite indicar un
texto que ser mostrado en un bocadillo cuando el navegante pase el ratn por
encima del applet. Aunque el contenido de este atributo slo es entendido por
Explorer puede ser usado con total libertad, ya que no perjudica nada a los
usuarios del resto de navegadores. Estos son todos los atributos que pueden ser
usados en la etiqueta APPLET , pero existe otro mtodo adicional para especificar
parmetros particulares de cada uno de estos programas escritos en Java: la
etiqueta PARAM.



34

La etiqueta PARAM Esta etiqueta consta de una nica instruccin, <PARAM>
, que debe ser insertada en el interior de la etiqueta APPLET (entre la instruccin
de inicio y la instruccin de fin) y cuya funcin ser definir parmetros para el
applet. Los parmetros son propiedades especficas de cada applet que permiten
modificar sus caractersticas. Los parmetros constan de un nombre y un valor
que son indicados usando los atributos NAME y VALUE de la siguiente manera:

<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
<PARAM NAME="nombre_parmetro" VALUE="valor_parmetro">
</APPLET>

La etiqueta PARAM puede ser usada tantas veces sea necesario para un mismo
applet siendo necesario usarla una vez para cada uno de los parmetros. En
general los applets que se distribuyen gratuitamente constan de gran nmero de
parmetros, para poder adaptarse a las necesidades de los distintos usuarios que
vayan a utilizarlo. Por esta razn siempre van acompaados de documentacin.
Quiz el applet ms conocido es Animator.class, este applet toma un conjunto de
imgenes y las va mostrando ordenadamente para crear un efecto de animacin.
Este era el nico mtodo existente para crear animaciones antes de la aparicin
de los GIFS animados. Tras la aparicin de estos la utilizacin de este applet ha
decrecido, pero sigue siendo til en ciertas ocasiones y nos servir como
excelente ejemplo para mostrar el uso de la etiqueta PARAM . Para insertar el
applet debemos copiar el contenido de este directorio a otra ubicacin y crear un
documento HTML con el siguiente cdigo:

<HTML>
<HEAD>
<TITLE>El saludo de Duke</TITLE>
</HEAD>
<BODY>
<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68>
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES
VALUE="2500|100|100|100|100|100|100|100|100|100">
</APPLET>
</BODY>
</HTML>

En este caso hemos usado 4 parmetros del applet, aunque en realidad tiene
muchos ms. Los explicaremos brevemente. El parmetro imagesource nos
permite indicar el directorio donde se encuentran las imgenes, un punto significa
el directorio actual. Estas imgenes deben llamarse obligatoriamente T1.gif, T2.gif,
T3.gif, etc. El parmetro end image indica el nmero de imgenes de los que
consta la animacin y en esta ocasin sern 10, desde T1.gif hasta T2.gif. Los
parmetros pause y pauses nos permiten controlar las pausas entre las imgenes,
35

con el ltimo controlamos de manera independiente las pausas que se realizan
entre cada una de las imgenes de manera individual. Al visualizar este cdigo
con un navegador con soporte Java veremos la mascota de Java, Duke,
saludando. En la figura 1.6 podemos apreciar una captura del resultado. Una gran
ventaja de este mtodo para crear animaciones es que simplemente cambiando
las imgenes T1.gif ,T2.gif ,etc. por unas propias podemos crear otra animacin
distinta sin necesitar ninguna aplicacin como era el caso de los GIFs animados.



Figura 11.6. El applet Animator.class es uno de los ms conocidos y usados en las
pginas Web por la facilidad que ofrece para crear animaciones.



Nota
Para obtener ms informacin sobre el applet Animator.class o sobre
muchos otros applets de distribucin gratuita podemos visitar la pgina
antes mencionada Java.sun.com. Alternativas a los applets Java
.
Dado que la tecnologa Java es relativamente nueva y requiere grandes
recursos por parte del navegador, slo algunos como Netscape Navigator 2.0 o
superior y Internet Explorer 3.0 o superior la soportan. Dado que no sabemos
que navegadores usarn los visitantes de nuestras pginas es conveniente aadir
alternativas para aquellos que no sean capaces de mostrar el applet.
Anteriormente hemos visto la existencia del atributo ALT que permite especificar
un texto alternativo. Sin embargo tiene dos inconvenientes:

Este atributo slo ser entendido por aquellos navegadores que entiendan la
etiqueta APPLET , con lo que seguimos sin tener una alternativa para el resto de
navegadores.

Con ALT nicamente podemos insertar un texto, ni imgenes ni ningn otro
elemento HTML, con lo que nuestras posibilidades para ofrecer alternativas
quedan muy menguadas. Afortunadamente existe otro mtodo. Como hemos
indicado al principio de esta seccin, y como ya hemos comprobado por los
ejemplos, la etiqueta APPLET consta de una instruccin de inicio y de una
instruccin de fin. Vimos que entre ellas podamos insertar una o varias etiquetas
36

PARAM para especificar los parmetros especficos de cada applet. Pero adems
podemos insertar otras etiquetas HTML que sern ignoradas por aquellos
navegadores con soporte Java, pero sern mostradas por todos aquellos que no
soporten esta tecnologa, con lo que nos servir como contenido alternativo al
applet:

<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
<PARAM NAME="nombre_parmetro" VALUE="valor_parmetro">
... Cdigo HTML alternativo...
</APPLET>

Siguiendo con el ejemplo de la mascota de Java, si queremos que nuestra
pgina este preparada para todos los navegadores debemos aadir el atributo
ALT as como contenido alternativo antes de la instruccin </APPLET>.

He aqu un ejemplo:

<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68 ALT="Lo siento
no puede ver el applet">
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES
VALUE="2500|100|100|100|100|100|100|100|100|100">
<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te saluda">
</APPLET>

En este caso los usuarios de navegadores sin soporte Java vern una imagen
de Duke saludando (aunque sin movimiento) del mismo tamao que el applet. Si
en el texto de la pgina hemos hecho referencia a que los navegantes van a ver
un applet en accin debemos insertar tambin junto con la imagen un texto que
advierta que el applet no puede ser visualizado con ese navegador y que a cambio
se muestra una imagen. En la figura 1.7 vemos el ejemplo anterior visto con el
navegador Opera, que no soporta la tecnologa Java. En un medio esttico
como este no se aprecia la diferencia, pero esta existe, ya que en este caso la
imagen no tiene movimiento.

37



Figura 1.7. El navegador Opera no soporta la tecnologa Java, por lo que
mostrar el cdigo alternativo, en este caso uno de los GIFs de la animacin.

Con este ejemplo damos por concluido el aprendizaje de la etiqueta APPLET. En
la figura 1.8 podemos ver un ejemplo.




Figura 1.8. Resumen de todos los atributos de la etiqueta APPLET y de su
subetiqueta PARAM.


38

El nuevo estndar: la etiqueta OBJECT.

Hasta ahora hemos aprendido a insertar diferentes tipos de objetos en las pginas
Web, para insertar imgenes usbamos la etiqueta IMG, para insertar objetos para
plug-ins usbamos EMBED, para insertar frames flotantes IFRAME, para insertar
applets Java APPLET, etc. Observando esta diversidad y viendo que cada
desarrollador de navegadores creaba sus propios mtodos para incluir objetos en
las pginas el consorcio W3C creo un grupo de trabajo para buscar una solucin
que englobar y unificara todos los mtodos actualmente existentes. La solucin
fue la creacin de una nueva etiqueta para el lenguaje HTML: OBJECT , que fue
introducida en el estndar HTML 3.2, aunque es a partir de la versin HTML 4.0
cuando se est empezando a darle la importancia que merece.

Usando esta etiqueta es posible incluir varios tipos de ficheros multimedia (vdeo y
sonido MPEG, ficheros Shockwave/Director, etc.), applets de Java,
controles ActiveX (que veremos en la siguiente seccin), documentos HTML o
prcticamente cualquier otro tipo de objeto. Por ejemplo para incluir un vdeo AVI
debemos usar el siguiente cdigo:

<OBJECT DATA="flores.avi" TYPE="video/avi" WIDTH=100 HEIGHT=100>
<IMG SRC="flores.gif" WIDTH=100 HEIGHT=100 ALT="[FLORES]">
</OBJECT>


En este caso el funcionamiento es muy similar al de la etiqueta EMBED y ahora el
cdigo alternativo deber ser mostrado entre <OBJECT> y </OBJECT> . Este
cdigo ser ignorado por los navegadores que entiendan la etiqueta OBJECT.

Qu navegadores soportan este nuevo estndar? Las versiones 4.0 y posteriores
de Internet Explorer y Netscape Navigator entienden la etiqueta, aunque
todava no soportan todas las posibilidades que ofrece. Sin embargo el Web
Consortium le est dando un fuerte impulso, con lo es de suponer que las futuras
versiones de estos navegadores si no hagan y que poco a poco se tender hacia
un mayor uso de la etiqueta OBJECT. Esta seccin es slo una introduccin a
este nuevo estndar. Hemos considerado que un estudio detallado no era
apropiado porque esta etiqueta no puede ser usada todava de manera
fiable(excepto para insertar controles ActiveX que enseguida veremos). El lector
interesado puede adquirir ms informacin a travs del Web Consortium en las
siguientes direcciones:

http://www.w3.org/pub/www/TR/WD-object.html
http://www.w3.org/TR/WD-html40/struct/objects.html#h-14.3

En la figura 1.9 hemos incluido de modo informativo la pgina del Web Consortium
que explica el funcionamiento del atributo OBJECT y todos sus atributos.
39



Figura 11.9. La etiqueta OBJECT ha sido creada por los expertos del Web
Consortium para englobar la inclusin de todo tipo de objetos en las pginas Web.


Una seccin que si hemos considerado importante explicar es la insercin de los
applets Java recin vistos usando la etiqueta applet, ya que aunque actualmente
este mtodo sea operativo, se ir imponiendo con el tiempo.

Insercin de un applet Java
.
El objetivo actual del Web Consortium es que la etiqueta OBJECT conviva por un
tiempo con la etiqueta APPLET para sustituirla ms adelante. Hoy en da el uso de
la etiqueta OBJECT no est muy extendido con lo que la forma ms segura de
insertar un applet sigue siendo usando la etiqueta APPLET , sin embargo la
siguiente generacin de navegadores permitir tambin el uso de OBJECT que
acabar siendo el nico mtodo aceptado y como buenos programadores nosotros
debemos estar preparados.

Para poder llevar a cabo todas las funciones de la etiqueta APPLET tambin es
posible usar la etiqueta <PARAM> para especificar parmetros para los applets u
otros objetos que los necesiten. Aunque esta etiqueta debe ser insertada entre
<OBJECT> y </OBJECT> no ser ignorado por los navegadores que entiendan
esta etiqueta.

40

Adems la etiqueta PARAM tiene dos nuevos atributos al ser usada en el interior
de OBJECT , estos son:

VALUETYPE="...": Este atributo especifica que tipo de valor recibir el parmetro.
Hay tres posibles valores:

Data: El valor especificado ser pasado al objeto como una cadena de caracteres.
Este es el valor por defecto y antes de la existencia del atributo VALUETYPE era
la nica posibilidad.

Ref: El valor especificado es una direccin URL que indica donde estn
almacenados los valores para dicho parmetro. La direccin debe ser pasada tal
cual al objeto.

Object: El valor es el nombre de otro objeto del mismo documento precedido del
smbolo #.

TYPE="tipo_mime": Este atributo especifica el tipo mime del valor asignado a este
atributo con VALUE.

Exceptuando estas diferencias, el funcionamiento es idntico. Por ejemplo, para
insertar el applet del segundo de nuestros ejemplos (El saludo de Duke) usando
la etiqueta OBJECT debemos escribir:

<OBJECT codetype="application/octet-stream" classid="Java
:Animator.class"
width=55 height=68 ALT="Lo siento, no puede ver el applet">
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES
VALUE="2500|100|100|100|100|100|100|100|100|100">
<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te saluda">
</OBJECT>

Como vemos la diferencia con la etiqueta APPLET es pequea, con la nica
complejidad aadida de indicar en el atributo CODETYPE el tipo MIME del applet,
que es el indicado en este ejemplo siempre. Esto es necesario para indicar al
navegador que se trata de un applet de modo que si no soporta esta tecnologa
este pueda ser capaz de decidir no bajar el archivo.


ActiveX, la tecnologa del futuro.

La, denominada, tecnologa ActiveX desarrollada por Microsoft hizo su aparicin
en Internet con el navegador Internet Explorer 3.0. Su objetivo es similar al de
41

los plug-ins, insertar objetos de diferente tipo en una pgina Web, aunque va
mucho ms all al aadir mayores posibilidades de interaccin y comunicacin
con programas externos. Existen pginas en Internet que basan toda su
presentacin en controles ActiveX para crear Webs
realmente impactantes.


En la figura 1.10 vemos la pgina de ForecastX que ofrece el parte meteorolgico
en tiempo real usando esta novedosa tecnologa.


Figura 1.10. ForecastX ofrece un servicio meteorolgico en tiempo real gracias a la
tecnologa ActiveX.

ActiveX est compuesto por dos tipos de objetos: controles Activos (Active
controls) y documentos Activos (Active documents). Estos ltimos permiten
insertar documentos con formato PDF, DOC, etc. La tecnologa ActiveX
funciona de una manera similar al mecanismo de Microsoft OLE (Object Linking
and Embedding, Enlazado e incrustacin de objetos) que usa su sistema operativo
Windows, por lo que los usuarios de ste les resultar familiar, lo realmente
novedoso es la aplicacin de esta tecnologa al WWW.

Los controles ActiveX guardan parecidos con los objetos para plug-ins y con los
applets Java, aunque presenta algunas mejoras con respecto a ambos. Como
ocurra con los plug-ins, los controles y documentos de ActiveX pueden ser
insertados en un pgina Web, sin embargo no requieren un pequeo programilla
para cada tipo de objeto ActiveX, esta nueva tecnologa ha sido denominada
como auto contenida porque cada objeto tiene suficiente informacin para
ejecutarse l mismo sin ayuda de ninguna aplicacin.

Tal y como ocurre con los applets podemos crear nuestros propios controles o
usar los creados por otros programadores que nos los venden o distribuyen
42

gratutamente. Si optamos por programarlos nosotros mismos existen
herramientas que lo convierten prcticamente en un juego de nios, entre ellas
destaca las creadas para este fin por Microsoft y que distribuye a travs de su
Web (www.microsoft.com/ie/).

Hoy por hoy el nico inconveniente de la tecnologa ActiveX consiste en que
slo puede ser visto desde es sistema operativo Windows y con el Navegador
Internet Explorer, aunque afortunadamente parece que esto cambiar pronto.

Insercin de un control ActiveX.

El cdigo HTML necesario para insertar un control o documento ActiveX en una
pgina Web fue desarrollado por Microsoft en colaboracin con el Web
Consortium, con lo que se acord el uso del estndar OBJECT que hemos visto
en la seccin anterior. A continuacin veremos un sencillo ejemplo que no requiere
ningn archivo especial, el nico requisito para poder visualizarlo consistir en
tener instalado el navegador Internet Explorer 3.0 o superior. El cdigo usado
para insertar el control ActiveX ser:

<OBJECT WIDTH=250 HEIGHT=340
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">
<PARAM NAME="angle" VALUE="55">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="3">
<PARAM NAME="caption" VALUE="Curso WEBMASTER">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="Backcolor" VALUE="#006600">
<PARAM NAME="Forecolor" VALUE="#FFFFFF">
Para visualizar el control ActiveX necesita Explorer 3.0 o posterior.
</OBJECT>

En la figura 1.11 podemos ver el resultado obtenido tal y como se ve con Internet
Explorer 4.0. Pasemos a explicar el este cdigo: El valor del atributo CLASSID
es el que identifica el tipo de control ActiveX que estamos insertando. Este
cdigo es complejo y se sale de los objetivos de esta obra.

43



Figura 11.11. Usando este control ActiveX podemos crear efectos variados con
texto, con lo que pueden sustituir el uso de imgenes con la consiguiente
disminucin tiempo de carga de nuestras pginas.

Volviendo a nuestro ejemplo, entre los principales parmetros usados en la
insercin de este control ActiveX encontramos:

Caption: Es el texto que debe insertarse con las caractersticas que se indican con
el resto de parmetros.

Angle: Es el ngulo del texto con la horizontal en grados. Si le damos el valor 90 el
control mostrar el texto en vertical.

FontSize: Es el tamao del texto.

FontName: Es el tipo de letra.

Backcolor y Forecolor: Son el color del fondo y el color del texto respectivamente.
Invitamos al lector a hacer pruebas modificando los valores de estos y el resto
atributos y cambiando el texto para adaptarlo a nuestras necesidades y poder
incorporarlo en sus propias pginas. Vemos un ejemplo en la figura 1.12.
44




Figura 1.12. Usando el mismo control ActiveX que en la figura 11.25 pero con un
cdigo algo ms complejo podemos crear este efecto tan atractivo.

Por ltimo nos queda resaltar que existe un plug-in para Netscape Navigator,
Ncompass, que aade a este navegador la posibilidad de entender controles y
documentos ActiveX. Este plug-in puede ser obtenido en la pgina Web de
Ncompass en el WWW: www.ncompasslabas.com. Si pensamos incorporar la
tecnologa ActiveX a nuestras pginas es muy recomendable incluir una enlace
a esta pgina para que todos los usuarios de Netscape que las visiten puedan
adquirirlo y disfrutar, tambin, de los controles que hayamos usado. Tambin es
importante destacar que Microsoft ha llegado a acuerdos con diversas compaas
para exportar la tecnologa ActiveX a Mac y UNIX, con lo que es de esperar
que en poco tiempo se convierta en un mtodo estndar para insertar objetos
multi-plataforma aunque hoy por hoy no se puede decir que la sea, al contrario
que Java.





45

CONCLUSIONES
El HTML se preocupa por formatear datos y para ello son las etiquetas que tiene el
lenguaje, para formatear la informacin que se desea mostrar.
El XML se preocupa por estructurar la informacin que pretende almacenar. La
estructura la marca la lgica propia de la informacin.
El desarrollo del HTML estuvo marcado la competencia entre los distintos visores
del mercado. Cada uno quera ser el mejor e inventaba etiquetas nuevas que a la
larga entraban a formar parte del estndar del W3C, como la etiqueta <FRAME>.
El desarrollo del XML est siendo llevado a cabo con rigor, siempre ajustado a lo
que marca el estndar que desarrolla el W3C, entidad que est desarrollando el
XML con ms diligencia que las empresas con intereses particulares.
Procesar la informacin en HTML es inviable, por estar mezclada con los estilos y
las etiquetas que formatean la informacin.
En XML se puede procesar la informacin con mucha facilidad, porque todo est
ordenado de una manera lgica, as mismo el formateo de la informacin para que
se pueda entender bien por el usuario es viable a travs de un pequeo
procesamiento, a travs de hojas de estilos o similares.












46

BIBLIOGRAFA
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-
html.pdf
http://www.programacion.com/articulo/desarrollo_de_aplicacio
nes_web_con_jsp_y_xml_120/3