U.T. 1. Seleccin de arquitecturas y herramientas de programacin.

1.1.

Evolucin y caractersticas de los navegadores web

Qu es la web? Contexto de ejecucin de pginas web. Arquitectura ms habitual. Cliente. Navegador web. Historia de los navegadores web. Guerra de los navegadores web. Segunda guerra de los navegadores web. Caractersticas principales de los navegadores ms comunes utilizados hoy en da. Criterios para diferencias los navegadores web.

1.2.

Arquitectura de ejecucin

Para acceder a una pgina web en un navegador web, se teclea la correspondiente URL (Uniform Resource Locator (en castellano Localizador de recursos uniforme)) y, mediante el protocolo HTTP (Hypertext Transfer Protocol (en espaol Protocolo de Transferencia de Hipertexto)) la recibe el servidor web, que devuelve al cliente la informacin localizada en su sistema de ficheros.

Con el objeto de realizar esta peticin, y mostrar la informacin recibida, los navegadores web estn compuestos de unos elementos que conforman la arquitectura del navegador. Cada navegador tiene su propia arquitectura, pero algunos elementos son bsicos y comunes en todos ellos, es la llamada arquitectura de referencia.

Figura 1. Arquitectura de referencia de un navegador web

Interfaz de usuario: incluye todas las partes visibles del navegador, menos la ventana principal donde se muestra la pgina web solicitada. Motor del buscador: hace de intermediario entre la interfaz de usuario y el motor de renderizado. Su funcin principal es cargar las direcciones web y soportar los mecanismos bsicos de navegacin. Tambin gestiona las alertas de JavaScript y el proceso de carga de una pgina. Adems, es el encargado de consultar y administrar las preferencias de ejecucin del motor de renderizado. Motor de renderizado: interpreta y muestra el contenido solicitado. Analiza el cdigo HTML y CSS, y muestra el resultado. Comunicaciones: implementa los mecanismos necesarios para las llamadas de red, como las solicitudes HTTP, FTP, etc. Tiene una interfaz independiente de la plataforma y realiza implementaciones en segundo plano para cada plataforma. Componente de visualizacin: visualiza pequeos componentes, como ventanas y cuadros combinados. No es especfico de ninguna plataforma. Suele utilizar libreras de la interfaz de usuario del sistema operativo anfitrin. Intrprete de JavaScript: analiza y ejecuta cdigo JavaScript. Parser XML: Los navegadores web suelen incluir un analizador que permite cargar en memoria una representacin en rbol (rbol DOM, Document Object Model) de la pgina web. As, el acceso a los elementos de la pgina es ms rpido. Persistencia de datos: Utilizada por el navegador para guardar datos en el disco duro.

1.3.

Lenguajes y tecnologas de programacin en entorno cliente

Los lenguajes de programacin del entorno cliente son los que se ejecutan en el navegador web.

El lenguaje principal es HTML (HyperText Markup Language, lenguaje de etiquetado de hipertexto).

Existen algunas alternativas y variaciones a HTML, como son: XML (eXtensible Markup Language, lenguaje de marcas extensible) XHTML (eXtensible HTML DHTML (Dynamic HTML)

Para hacer ms interactiva la pgina web, dentro de los lenguajes cliente, podemos incluir los lenguajes de script, tales como JavaScript o VBScript. Existen otros lenguajes, como ActionScript (para crear contenido Flash) o AJAX (extensin a JavaScript para comunicacin asncrona)

1.3.1.

HTML

HyperText Markup Language (lenguaje de etiquetado de hipertexto) no es propiamente un lenguaje de programacin, sino que se basa en la utilizacin de un sistema de etiquetas cerrado aplicado a un documento de texto. Adems, no es compilado, sino que es interpretado (ejecutado a medida que se avanza por el documento HTML).

Con HTML se pueden hacer gran variedad de acciones, desde organizar simplemente el texto y los objetos de una pgina web, pasando por crear listas y tablas, hasta llegar a la esencia de la Web: los hipervnculos. Un hipervnculo es un enlace de una pgina web o un archivo a otra pgina web u otro archivo. HTML ha ido evolucionando dando lugar a lenguajes derivados de este, como XML, XHTML o DHTML, en funcin de la flexibilidad ofrecida al conjunto de etiquetas admitido o de la integracin de HTML con otros lenguajes que

permitan dotar de ms dinamismo e interactividad a las pginas creadas con HTML.

XML es un lenguaje de etiquetado extensible muy simple, pero con unas reglas de codificacin muy estrictas que juegan un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML cuyo objetivo principal es describir datos para su transferencia eficiente y no mostrarlos, como es el caso de HTML.

El HTML Dinmico (DHTML) consiste en aportar interactividad a las pginas web. La integracin de HTML con lenguajes de scripting (JavaScript), hojas de estilo personalizadas (CSS) y la identificacin de los contenidos de una pgina web en formato de rbol (DOM), permite aumentar la funcionalidad e interactividad de la pgina. La principal aportacin de DHTML es servir de herramienta con la que podemos crear efectos que requieren poco o ningn ancho de banda ya que se ejecutan en el entorno del cliente. Se puede utilizar para crear animaciones, juegos, aplicaciones, etc., para introducir nuevas formas de navegar a travs de los sitios web y para crear un autntico entramado de capas que solo con HTML sera imposible abordar. Aunque muchas de las caractersticas del DHTML se podran duplicar con otras herramientas como Java o Flash, DHTML ofrece la ventaja de que no requiere ningn tipo de extensin para poder utilizarlo.

XHTML (eXtensible HyperText Mark-up Language) define la estructura de un documento. Es HTML basado en XML. Los usuarios pueden aadir sus propias etiquetas al contenido. XHTML 1.1 est

modularizado: sus etiquetas se agrupan en mdulos, de esta forma, todo el lenguaje se encuentra descompuesto en mdulos. El significado de las etiquetas y su uso sigue el estndar HTML 4.01. Algunos de estos mdulos son: o Estructura (body, head, html, title)

o Texto (abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var) o Hipertexto (a) o Lista (dl, dt, dd, ol, ul, li) o Applet o Formularios (form, input, label, select, option, textarea) o Imagen (img) o Marcos o Objeto (object, param) o Metainformacin (meta) o Tablas bsicas (caption, table, td, th, tr) o Link (link) o Base (base) o o Adems se pueden aadir nuevos mdulos 1.3.2. CSS

CSS (Cascade Style Sheets, en castellano Hojas de Estilo en Cascada), es un lenguaje de estilos utilizado para describir la presentacin de un documento escrito en lenguaje de etiquetado. La especificacin de CSS es mantenida por el World Wide Web Consortium (W3C). A travs de CSS se pueden definir colores, fuentes, layouts y otros aspectos de la presentacin de un documento. Sirve para separar la estructura de un documento (HTML) de su presentacin (CSS).

Antes de CSS, se utilizaban elementos como <font> o <b> para cambiar el formato de las pginas, combinando estructura y presentacin

Por ejemplo, si queremos que una cabecera est centrada, en cursiva, en rojo y con la fuente Times New Roman, podramos hacer:

<h2 align="center">

<font color="red" size="+4" face="Times New Roman, serif"> <em>Usage of CSS</em> </font> </h2>

Con CSS, el elemento h2 puede ser utilizado para dar estructura al texto, mientras que la hoja de estilo le da sus caractersticas de presentacin. As en XHTML tendramos:

<h2>Usage of CSS</h2>

Mientras que en CSS definiramos las caractersticas de formato para todas las cabeceras:

h2:h2 {text-align: center;color: red;font: italic large "Times New Roman", serif; }

La informacin de un CSS puede ser provista por: Autor de estilos: Un fichero CSS referenciado desde el documento, o embebido en el documento Estilo del usuario: Un fichero CSS local es especificado por el usuario en su navegador para ser aplicado a todos los documentos Estilo del User-Agent: La hoja de estilo por defecto aplicada por el navegador.

Las principales ventajas de CSS son: Informacin de presentacin para una pgina web completa o una coleccin de pginas residente en un nico lugar donde puede ser actualizada Diferentes usuarios pueden tener sus propias hojas de estilo (fuentes grandes) El cdigo del documento es reducido en tamao y complejidad, porque no tiene que contener informacin de presentacin.

Los elementos de un documento son seleccionados a travs de selectores: Todos los elementos: * Por nombre de elemento: ph2 Descendientes: Todos los elementos a descendientes de li: li a Atributos de clase o identificadores: .nombreclase y/o #id para elementos con class="nombreclase" o id="id" Estilos adyacentes: Todos los elementos A precedidos por h2: h2a Existen tambin pseudoclases que redefinen el comportamiento sobre elementos: o hover: define un estilo cuando el usuario apunta a un elemento: a:hover o #elementid:hover o :first-line, :visitedor o :before.

Una hoja de estilos contiene un conjunto de reglas. Cada regla consiste de un selector y un bloque declarativo. Un bloque declarativo contiene un conjunto de declaraciones separadas por ;. Cada declaracin consiste de una propiedad, : y un valor.

Ejemplo CSS

p {font-family: "Garamond", serif;} h2 {font-size: 110%; color: red; background: white;} .note {color: red; background: yellow; font-weight: bold;} p#paragraph1 {margin: none;} a:hover {text-decoration: none;}

Hay 5 reglas, con los selectores p, h2, note, p#paragraph1 y a:hover. Un ejemplo de declaracin es color: red, que asigna el valor rojo a una propiedad. Las dos primeras reglas definen estilos para los elementos HTML p (prrafo) y h2 (cabecera de segundo nivel). El elemento prrafo se renderizar en la fuente Garamond y si no est disponible en Serif.

La cabecera ser renderizada en rojo sobre fondo blanco. La tercera regla define una clase en CSS que puede ser asignada a cualquier elemento del documento, mediante el atributo class. Por ejemplo:

<p class="note">This paragraph will be rendered in red andbold, with a yellow background.</p>

La cuarta regla afectar al elemento p cuyo atributo id tenga el valor paragraph1. No tendr mrgenes dentro de su caja de renderizacin. La ltima regla define la accin hover para todos los elementos <a>.Quitar el subrayado cuando el ratn se mueve sobre el elemento enlace. Los comentarios en CSS se indican con: /* comment*/

1.3.3.

Javascript

Se utiliza principalmente para permitir la programacin en navegadores. Java y Javascript son dos lenguajes diferentes, aunque se aprecien similitudes sintcticas, ya que los dos estn basados en C. Semnticamente son diferentes Para programar scripts web en JavaScript hay que entender el lenguaje JavaScript y el modelo de objetos del documento (DOM) de XHTML. JavaScript puede manipular y recuperar el contenido de una pgina web a travs del DOM, con lo que podremos: Abrir nuevas ventanas Cambiar imgenes cuando el ratn se mueve encima de ellas Validar campos de entrada, etc.

El motor de JavaScript reside en un programa husped y puede operar sobre su entorno. El mayor uso de JavaScript es para crear aplicaciones web dinmicas.

1.3.4.

Applets de Java

Las applets son programas escritos en Java, y que se incluyen en las pginas web para dinamizarlas. Se envan al cliente ya compilados, y se ejecutan en el navegador, que tiene que ser capaz de interpretar Java. Los applets son ms lentos de procesar que JavaScript, adems no son capaces de interactuar con el resto de componentes de la pgina.

Ejemplo Applet Java

import java.applet.Applet; import java.awt.Graphics; public class AppletSimple extends Applet{ public void paint(Graphics g){ g.drawString("Hola Mundo en Java", 50, 25); } }

<html> <head> <title> Un applet simple </title> </head> <body> <p> A continuacin est la salida del programa </p> <applet code="AppletSimple.class" width="300" height="100"> No hay disponible un intrprete de Java </applet> </body> </html>

Establecer Variable de Entorno PATH para que apunte tambin a javac javac AppletSimple.java, genera AppletSimple.class Abrir con el navegador, en funcin de restricciones de seguridad se mostrar el applet o no, en caso de que no, acceder al panel de control de java y configurar la seguridad en media.

Si an as no conseguimos verlo, haremos uso de AppletViewer, aplicacin de java que al pasarle como parmetro un html, nos visualiza el applet de la pgina. Appletviewer AppletSimple.html

1.3.5.

AJAX

AJAX (Asynchronous Javascript and XML) es una combinacin de tecnologas de desarrollo web que genera aplicaciones web interactivas, las tecnologas involucradas son: XHTML y CSS para la presentacin de informacin Document Object Model (DOM) para visualizar dinmicamente e interactuar con la informacin presentada XML, XSLT para intercambiar y manipular datos, JSON y JSON-RPC pueden ser alternativas a XML/XSLT XMLHttpRequest para recuperar datos asncronamente

Javascript como nexo de unin de todas estas tecnologas

1.3.6.

Actionscript

Flash es una tecnologa de animacin actualmente bajo licencia de Adobe y que utiliza ActionScript como lenguaje principal. La principal ventaja de Flash es la capacidad para crear grficos y animaciones vectoriales. La evolucin de Flash lo ha llevado de ser una simple herramienta de dibujo y animacin de escritorio a ser una base para la programacin multimedia y, ms recientemente, convertirse en una completa aplicacin de desarrollo para la Web. ActionScript que puede adaptarse a la mayora de los navegadores y sistemas operativos. Est en declive, pudindose observar prevalencia de otras tecnologas y lenguajes como HMTL 5. El uso de Flash ha permitido crear aplicaciones interactivas de gran complejidad y visualmente muy atractivas que no sera posible crear utilizando DHTML o XHTML directamente. En el lado opuesto, entre las desventajas que tradicionalmente se le han detectado al desarrollo de aplicaciones y pginas web basadas en esta tecnologas podemos destacar, entre otras, el hecho de que, al tratarse de creacin de animaciones de ndole vectorial, el consumo de procesador (y de batera en dispositivos mviles) es ms elevado o que se trate de un software 100% propietario, coartando la libertad de extender o mejorar el ncleo de Flash.

1.4.

Integracin del cdigo con las etiquetas HTML

La integracin de JavaScript y HTML/XHTML podemos hacerla de diferentes formas. Esta flexibilidad se refleja en, al menos, tres formas de incluir cdigo JavaScript en pginas web.

1.4.1.

Java Script en el mismo documento HTML

HTML se basa en el uso de unas etiquetas predefinidas para marcar el texto. Una de estas etiquetas es <script> (y </script> para indicar la finalizacin de un bloque de cdigo embebido). Esta etiqueta puede incluirse en cualquier parte del documento, aunque se recomienda que el cdigo JavaScript, salvo para propsitos concretos de generacin de contenido a visualizar, se defina dentro de la cabecera del documento HTML (entre las etiquetas <head> y </head>).

Podemos ver un ejemplo a continuacin:

<!DOCTYPE

html

PUBLIC

-//W3C//DTD

XHTML

1.0

Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta 8859-1 /> <title>Ejemplo 1</title> <script type=text/javascript> alert(Prueba de JavaScript); </script> </head> <body> <h1>Ejemplo 1: cdigo embebido</h1> </body> </html> http-equiv=Content-Type content=text/html;charset=iso-

El ejemplo anterior muestra una pgina XHTML. Para que sea vlida tenemos que incluir la cabecera <!DOCTYPE y aadir el atributo type con el valor correcto a la etiqueta <script>. Los valores vlidos para este atributo estn estandarizados. Para el caso de JavaScript, el valor correcto es text/javascript. Esta tcnica suele utilizarse cuando se definen instrucciones que se referenciarn desde cualquier parte del documento o cuando se definen funciones con fragmentos de cdigo genricos. La mayor desventaja de este mtodo es que, si ese fragmento de cdigo lo queremos utilizar en otras pginas, debemos incluirlo en cada una de ellas, lo cual es un inconveniente cuando tenemos que realizar modificaciones de dicho cdigo.

1.4.2.

Java Script en un archivo externo

Las mismas instrucciones de JavaScript que se incluyen entre un bloque <script></script> pueden almacenarse en un fichero externo con extensin .js. A continuacin se muestra el contenido de un fichero externo que contiene cdigo JavaScript.

Archivo mensaje.js:

alert(Prueba de JavaScript);

La forma de acceder y enlazar esos ficheros .js con el documento HTML/XHTML es a travs de la propia etiqueta <script>. No existe un lmite en el nmero de ficheros .js que pueden enlazarse en un mismo documento. El siguiente ejemplo muestra cmo se enlazara un documento HTML/XHTML con el fichero anterior mensaje.js:

<!DOCTYPE

html

PUBLIC

-//W3C//DTD

XHTML

1.0

Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta 8859-1 /> <title>Ejemplo 2</title> <script type=text/javascript src=/inc/mensaje.js></script> </head> <body> <h1>Ejemplo 2: fichero externo</h1> </body> </html> http-equiv=Content-Type content=text/html;charset=iso-

El atributo type contendr un valor que indicar la ruta relativa de la ruta donde se encuentra el archivo JavaScript que se quiere enlazar. En este caso est dentro de una carpeta denominada inc. La vinculacin de un mismo fichero externo puede hacerse desde varios documentos HTML/XHTML distintos. De

esta forma, en el caso de que haya que modificar algo, solo hay que hacerlo en un nico fichero.

1.4.3.

Java Script en elementos HTML

El ltimo mtodo suele utilizarse habitualmente como forma de controlar los eventos que suceden asociados a un elemento HTML concreto (aunque tambin puede utilizarse con otros fines). Consiste en insertar fragmentos de JavaScript dentro de atributos de etiquetas HTML de la pgina:

<!DOCTYPE

html

PUBLIC

-//W3C//DTD

XHTML

1.0

Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta 8859-1 /> <title>Ejemplo 3</title> </head> <body> <p onclick=alert(Prueba de JavaScript);> Ejemplo 3: cdigo en atributos </p> </body> </html> http-equiv=Content-Type content=text/html;charset=iso-

La principal desventaja es que el cdigo JavaScript se intercala con el cdigo HTML y, dependiendo de la complejidad y longitud de ste, el mantenimiento y modificacin del cdigo puede resultar ms complicado.