TEMA 53 –
Desarrollo para navegadores web: html, DHTML,
JAVASCRIPT, CSS, DOM y objetos incrustados.
Índice
Introducción ... 2
HTML – Hypertext Markup Language – ... 2
Estructura de un documento html ... 3
El cuerpo de documento ... 3
Evolución ... 4
Xhtml - Extensible html- ... 5
CSS – Cascade Style Sheets- ... 5
Descripción del lenguaje CSS ... 6
JAVASCRIPT ... 7
El funcionamiento de JAVASCRIPT...7
Incrustar Javascript en HTML...7
DOM –Document Object Model- ... 8
AJAX – JavaScript Asíncrono y XML- ... 9
HTML Dinámico ... 10
Objetos incrustados ... 10
Introducción
El principal servicio de Internet es la WWW –Wold Wide Web- Este servicio consiste en acceder a un conjunto inmenso de páginas de hipertexto interconectadas entre ellas. Se accede a ellas a través de los navegadores web, que leen las páginas de hipertexto y las visualizan. Las páginas web están compuestas de código en varios lenguajes.
El funcionamiento del servicio Web adopta una arquitectura cliente / servidor. El cliente –el navegador web- solicita los recursos alojados en un servidor WEB. La comunicación se realiza siguiendo el protocolo http –Protocolo de transporte de hipertexto-. La tecnología utilizada en el lado del cliente y en el lado del servidor es diferente. Este tema trata sobre las tecnologías del lado del cliente.
Los lenguajes más utilizados son el html, JAVASCRIPT y CSS que están regulados y estandarizados por el W3C –WWW Consortium-.
El uso de lenguajes estándares permite que las páginas web puedan ser desarrolladas sin tener en cuenta que sistema operativo o navegador web utiliza el cliente. Realmente, esto no es cierto al 100%, puesto que ningún navegador interpreta al 100% todos los estándares web.
El éxito de las tecnologías web ha sido tanto, que actualmente se desarrollan las aplicaciones corporativas de forma que usen el navegador web como interfaz de usuario. Estas aplicaciones se denominan aplicaciones web.
Los principales lenguajes estándares para el desarrollo de software web son:
HTML – Hypertext Markup Language –
Es el lenguaje estándar para crear páginas de hipertexto, constituye el núcleo de los servicios web. HTML es un lenguaje de etiquetas definido usando el metalenguaje SGML.
Un documento html es un texto plano, que interpreta el navegador web. Se compone de:
Contenidos: Texto, imágenes, vídeos…
Estructura: Cómo se organizan los contenidos
Formato: Cómo de muestran los contenidos
Enlaces: Partes del documento que enlazan con otras páginas web u otros recursos de Internet.
El Html es un lenguaje de etiquetas. Cada etiqueta es una instrucción que indica al navegador web como mostrar una página html. Un documento html consta de contenidos de texto y etiquetas html.
Existen cuatro tipos de etiquetas de marcado:
1. Estructurales: Definen la estructura del documento web. HTML permite muchas estructuras diferentes: Capas (<div>), tablas (<table>), marcos (<frame>)…
2. De formato: Describe la apariencia de los elementos que constituyen el documento. Ej.
<b>negrita</b>. Las etiquetas estructurales pueden tener atributos de formato.
3. Enlaces: La etiqueta que enlaza una parte de la página web con un recurso web. Ej: <a href=www.caib.es>CAIB</a>
4. Objetos: Permiten crear formularios dentro de la página (<form> <button>…) o adjuntar otro tipo de objetos como películas flash, applets…
Estructura de un documento html
Un documento html tiene una estructura jerárquica, siendo el elemento raíz, las etiquetas <html>…</html>.
El documento HTML se divide en una sección de cabecera (entre <HEAD> y </HEAD>) y un cuerpo de documento (entre <BODY> y </BODY>).
La cabecera del documento
El elemento HEAD contiene información sobre el documento –metainformación-, como el título (elemento TITLE), palabras claves útiles para los motores de busca (elemento META) y otros datos que no se consideran contenido del documento: autor del documento, copyright, fecha, versión del lenguaje html utilizado...
Un documento HTML válido debe declarar la versión de HTML usada en el documento. Este declaración indica qué DTD (Documento Type Definition) se usa para el documento.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
El cuerpo de documento
El cuerpo del documento contiene su contenido. Hay una gran variedad de elementos y atributos que podemos usar dentro del cuerpo del documento para maquetar y dar forma a la página web HTML utiliza cuatro tipos de construcciones de SGML: elementos, atributos, referencias de caracteres y comentarios.
1. Elementos: Son las partes que representan los componentes de una página web. HTML incluye tipos de elementos que representan párrafos, enlaces, listas, imágenes, etc...
Cada declaración de tipo de elemento generalmente se compone tres partes: una etiqueta de comienzo (start tag), el contenido y una etiqueta de finalización (end tag).
El nombre del elemento aparece en el inicio de la etiqueta (escrito como <nombre-etiqueta>) y en la parte final de la etiqueta (escrito como </nombre-<nombre-etiqueta>). Por ejemplo, la etiqueta del elemento P que delimita un párrafo:
<p>
Esto es un párrafo … </p>
Algunos elementos HTML permiten al autor omitir el final de la etiqueta (por ejemplo los elementos LE y P). Unos cuántos elementos también permiten omitir el inicio de la etiqueta (por ejemplo los elementos HEAD y el BODY).
Algunos elementos HTML no tienen contenido. Por ejemplo, el elemento BR (salto de línea). Este tipo de elementos nunca tienen end tags.
Las etiquetas pueden contener otras etiquetas, siempre y cuando la etiqueta de inicio y fin estén contenidas en el mismo elemento.
2. Atributos. Los elementos pueden tener propiedades asociadas, denominadas atributos. Los pares atributo/valor aparecen dentro de la etiqueta inicial de un elemento. Pueden aparecer cualquier número de parejos atributo/valor, separados por espacios y en cualquier orden.
En este ejemplo, se puede ver el atributo id del elemento H1: <H1 id=”section1”>
Esto es un ejemplo </H1>
El valor del atributo se puede delimitar usando comillas doble, comillas simples o sin comillas, aunque se recomienda no eliminarlas.
3. Caracteres de referencia. Es una referencia para caracteres que no pueden ser incluidos en los contenidos del HTML. Por ejemplo, caracteres reservados del lenguaje, caracteres no ASCII…. Los caracteres de referencia empiezan con “&” y acaban con punto y coma (;). Algunos ejemplos:
< representa el símbolo < " representa el símbolo “
Los navegadores sustituyen la referencia por el carácter al visualizar la página.
4. Comentarios. Los comentarios dentro HTML no se visualizan y tienen la siguiente sintaxis:
<!-- esto es un comentario --> Html tiene una serie de inconvenientes:
Las páginas web pueden representarse de forma diferente según el navegador web utilizado, debido a diferentes interpretaciones del estándar.
Html posee una funcionalidad limitada. La potencia de los navegadores web a aumentado más rápidamente de lo que ha evolucionado el lenguaje html. Por ello, se han embebido nuevas tecnologías al código html para tener más funcionalidades: JAVASCRIPT, Applets…
El lenguaje html permite definir la estructura y formato de la web. Describir ambas características utilizando html provoca una excesiva complejidad, lo que aumenta el coste del desarrollo y del mantenimiento de una web site. Para remediar este problema, surgieron las CSS – Cascade Style Sheets-.
Evolución
El primer estándar del lenguaje html surgió en 1995, denominado html 2.0, en vez de 1.0 para distinguirlo de las versiones no oficiales.
El estándar ha ido evolucionando para ir incorporando las nuevas funcionalidades que ofrecen los navegadores (Netscape en especial). Añadió tablas, texto alrededor de las imágenes, código script embebido…
La última versión de html es la 4.01, denominada estricta. Esta versión declara obsoletos todos los atributos y etiquetas relacionadas con el formato, se mantienen en el lenguaje por cuestiones de compatibilidad con las versiones anteriores. Todas las funciones para el formato se dejan al lenguaje CSS.
La versión 4.01 es la última, el sucesor del lenguaje html es el xhtml.
Xhtml - Extensible
html-Xhtml es un lenguaje de marcado con las mismas capacidades expresivas de html pero con un sintaxis más estricta. Html es un producto de SGML y xhtml de XML.
W3C recomendó su uso en el 2000. Su aparición vino motivada por la necesidad de facilitar la visualización de páginas web en dispositivos móviles, PDAs…
En xhtml se separa el contenido de su presentación, como en el html 4.01. Xhtml se ocupa de definir la estructura del documento, y la representación se establece mediante CSS.
Las diferencias entre html 4.01 y xhtml 1.0 son menores, principalmente enfocadas a cumplir las reglas de sintaxis del XML. Los principales cambios son:
El nombre de las etiquetas siempre deben estar escritas en minusculas.
El valor asignado a los atributos siempre tiene que estar entrecomillado, utilizando preferentemente comillas dobles. Ej: <body background=”red”>
Todas las etiquetas tienen que estar cerradas. Las etiquetas vacías utilizan una representación diferente. Ejemplo: <br/>, <img src=…>
La transición entre html y xhtml es está haciendo lentamente, porque los navegadores soportan ambos lenguajes y muchas herramientas de desarrollo web todavía generan código html.
La versión actual de xhtml es la 1.1 y ya hay un borrador para la versión 2.
CSS – Cascade Style
Sheets-El CSS es un lenguaje utilizado para especificar el formato de presentación de un documento estructurado, escrito en html, xhtml o xml. La versión actual es la 2.
Las especificaciones de la CSS las mantiene W3C.
La hoja de estilo puede acompañar el documento html/xml o ser suministrado por el mismo cliente. Generalmente, se suministra al navegador junto al documento html, de dos formas diferentes:
De forma externa , una hoja CSS separada del documento html. Dentro del documento html se indica la dirección de la hoja CSS a utilizar.
Embebido dentro del documento . En el documento html se introduce código CSS. Esta técnica no permite compartir el código CSS entre varias páginas html.
El uso de hojas CSS suministradas por el usuario, es conseguir homogeneizar el formato de las páginas web, independientemente de su origen. Por ejemplo, los navegadores suelen tener un CSS genérica para los documentos sin estilo.
Las ventajas de usar CSS son:
Usar un mismo documento CSS en varias páginas diferentes, reduce el coste del mantenimiento y el volumen de información a transmitir.
El código html se reduce y simplifica , al contener sólo la información de la estructura del documento.
Permite aplicar CSS diferentes al mismo documento según el tipo de usuario. Permite personalizar el formato de los documentos.
Descripción del lenguaje CSS
Las páginas CSS se componen de un conjunto de selectores con atributos del estilo asociados. El selector establece a que etiqueta de html queremos que afecte el estilo. A la etiqueta que indiquemos en el selector le afectarán todas las parejas "parametro:valor" que hayamos puesto entre las llaves detrás de él en el fichero de estilo css.
Selector {
parametro:valor; parametro:valor; ...
}
CSS nos permite elegir etiquetas, además de por el nombre, por lo siguiente:
Cómo esté situado etiqueta respecto a otras etiquetas, es decir, si están anidados, si son adyacentes, etc. Ejemplo:
Form p { font-size: 150 %}. Los párrafos dentro de un formulario tienen un tamaño de ldel 150%.
En función de si ocurre en ellos algún evento del usuario, como click de ratón, ratón encima, tiene el foco, etc. Ejemplo:
a:visited{ color: red}. Los enlaces visitados tendrán color rojo.
En función de si tiene determinados atributos, como por ejemplo el atributo “class”.
.importante { color: blue}. Las etiquetas de clase “importante” tendrán letras de color azul.
Para poder distinguir etiquetas del mismo tipo, las etiquetas de html admiten dos posibles atributos: class e id. A ellos se les pone como valor el nombre que nosotros queramos. Por ejemplo:
<p class="importante">Esto es un parrafo importante</p> <div id="contenido_principal">Aquí el contenido principal</div>
La diferencia entre id y class es que id es un identificador único para todo el texto html. Es decir, sólo debe haber un id="contenido_principal" en todo el documento html, mientras que puede haber muchas etiquetas con class="importante".
JAVASCRIPT
Un documento html se le puede añadir nueva funcionalidad utilizando un lenguaje de Script. El código Script puede ir embebido dentro del documento html o en un fichero externo asociado al documento html mediante una etiqueta, como las hojas CSS.
Existe un estándar oficial ISO, el ECMAScript, que proviene de la versión 1.5 de JAVASCRIPT. Ningún navegador cumple rigurosamente con el estándar oficial. ECMAScript, cada navegador tiene sus propias extensiones al estándar, lo que provoca problemas de compatibilidad de código. A pesar de su nombre, JAVASCRIPT no tiene nada que ver con el lenguaje Java de Sun. La semejanza del nombre es solo una cuestión comercial.
El funcionamiento de JAVASCRIPT
El lenguaje JAVASCRIPT es un lenguaje orientado a objetos de sintaxis inspirada en el lenguaje C.
Es interpretado por el navegador para ejecutarse. Al no tener que compilarse se consigue que la ejecución sea inmediata y permite un mayor control por parte del navegador de la ejecución. La perdida de velocidad de ejecución que supone un lenguaje interpretado no supone un problema grave para el tipo de aplicación donde se utiliza.
Javascript se utiliza en el desarrollo de páginas web para hacer cosas cómo:
• Añadir efectos visuales a las páginas web , por ejemplo menús desplegables o modificar el apariencia de texto o imágenes cuando el ratón pasa sobre ellas.
• Mostrar páginas web en ventanas modificadas (sin barra de herramientas, de estado,...)
• Validar y formatear los datos de entrada en los formularios HTML.
Incrustar Javascript en HTML
Se puede incrustar código Javascript en un documento HTML de la siguiente manera:
1. Como expresiones y funciones dentro de un a etiqueta <SCRIPT> . Un documento puede tener múltiplos tags <SCRIPT> distribuidos entre el código HTML de la página. El tag <SCRIPT> dispone del atributo LANGUAGE que nos permito definir los tipos de versión de Javascript que estamos utilizando. Esto nos sirve para que el navegador pueda ignorar el código si no soporta la versión con el cual nosotros estamos programando
<SCRIPT language=”text/javascript”> Expresiones Javascript...
</SCRIPT>
Si el “script” se encuentra en el cuerpo de la página web, se ejecuta al visualizarla. Si esta en la cabecera, se lee pero no se ejecuta. Se utiliza para declarar variables y funciones.
2. Especificando un fichero externo que contienda el código JAVASCRIPT . El atributo SRC del tag <SCRIPT> nos especifica un fichero con código fuente Javascript sin necesidad de tener que incrustar el código dentro de la página HTML.
<SCRIPT src=”common.js”>…
3. Utilizando expresiones Javascript como valores para los atributos HTML. Usando entidades Javascript, se pueden especificar expresiones Javascript como el valor de un atributo HTML. Los valores de entidad se evalúan dinámicamente. Esto permito crear construcciones HTML más flexible, puesto que los atributos de un elemento HTML puede depender de la información referentes a otros elementos de la página.
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
4. Como controladores de acontecimientos en algun as etiquetas de HTML (generalmente en formularios) . Las aplicaciones Javascript suelen estar relacionadas a acontecimientos. Los acontecimientos son hechos relacionados con la acción de un usuario o cuestiones temporales. Por ejemplo, la pulsación de un botón, cambiar un campo de texto o mover el ratón.
Para que el script sea capaz de reaccionar a este acontecimiento, se pueden definir controladores de acontecimientos (event handlers) como por ejemplo onChange y onClick.
<input type="button" value="Calculate" onClick="computar(this.form)">
En este ejemplo, al pulsar el botón, se invoca la función computar con la referencia al formulario como parámetro.
La ejecución del script es guiada por eventos, tanto lanzados por el usuario (la pulsación de un botón) como por el navegador (evento temporal). Los elementos html poseen eventos inherentes a ellos mismos, que pueden ser asociados a una función JAVASCRIPT.
La interacción entre el programa de JAVASCRIPT y el navegador se realiza a través del Interfaz DOM –Document Object Model-.
DOM –Document Object
Model-El modelo DOM es una estructura en árbol que describe un documento XML o HTML. DOM proporciona un API orientado a objetos que permite parsear un documento html o xml en una estructura en árbol y operar con sus contenidos.
El estándar de modelo DOM para HTML o XML es mantenido por W3C.
Por ejemplo, la raíz del árbol es el elemento Document, de la raíz surge la rama image que contiene un array con los objetos que representan las imágenes de la página web. Para cambiar la fuente de una imagen en particular, se haría de la siguiente forma:
Document.image[id_image].src= Url nueva imagen
El principal problema del uso de DOM es que los navegadores no cumplen rigurosamente con el estándar al crear el árbol DOM de una página, esto provoca que se puedan crean modelos DOM diferentes para una misma página web.
El código JAVASCRIPT debe ser desarrollado para detectar estas diferencias y ejecutarse correctamente. Esto provoca tener que crear código más complejo con funcionalidad replicada para cada navegador, lo que conlleva un mayor esfuerzo (=coste) en el desarrollo y
AJAX – JavaScript Asíncrono y XML-
Es una técnica de desarrollo web para crear aplicaciones interactivas. Se basa en conseguir páginas más interactivas intercambiando pequeñas cantidades de información con el servidor sin tener que recargar la página cada vez que el usuario realice una acción.
Esta técnica combina las siguientes tecnologías:
1. Xhtml, o html, y CSS como lenguajes de marcado y formateo de la página web
2. Un lenguaje de script del lado de usuario , generalmente Javascript, que accede al árbol DOM de la página para modificar la información mostrada por el navegador.
3. El API XMLhttpRequest, utilizado para intercambiar información de forma asíncrona con el servidor.
4. XML, suele ser el formato utilizado en la información intercambiada con el servidor, aunque otros formatos pueden ser utilizados, como texto plano o html.
El uso de AJAX crea aplicaciones cliente-servidor con cliente pesado, pues el navegador además de representar la web, se encarga de calcular qué debe ser representado. Aunque es una labor que los ordenadores actuales soportan sin mucho esfuerzo.
Las aplicaciones AJAX son interactivas, el tiempo de respuesta a las acciones con el usuario es muy corto, pues los datos intercambiados con el servidor son de poco volumen, y, al usar tecnologías estándares son portables. Permite crear aplicaciones web muy potentes, como por ejemplo las herramientas ofimáticas de GoogleDocs.
Su inconveniente es que las aplicaciones presentan un uso diferente a la webs tradicionales, lo que desconcierta al usuario. El botón de “marcha atrás” no suele funcionar y en conexiones con comunicaciones lentas, el usuario puede notar lentitud sin comprender que es por la red, al no mostrar el navegador las típicas señales de conexión al servidor.
AJAX es una de las tecnologías usadas para crear aplicaciones RIA –Aplicaciones de Internet Enriquecidas-. Las aplicaciones RIA se basan en minimizar el tráfico con el servidor. Una aplicación RIA se carga toda la aplicación al acceder, y el navegador intercambia datos con el servidor solo cuando lo necesita, por ejemplo para acceder a una base de datos.
HTML Dinámico
El html dinámico, o DHTML, comprende a la técnica de construir páginas web compuestas de los lenguajes html (o xhtml), CSS y un lenguaje de script, generalmente JAVASCRIPT, que permiten la creación de páginas web más animadas e interactivas. Busca que las páginas se asemejen al interfaz de las aplicaciones de escritorio.
Para alcanzar este objetivo, las tecnologías web iniciales han evolucionado hacia:
• Una visión orientada a objetos de la página web y del suyos elementos.
• Aparición de la CSS (Hojas de estilo en cascad) y la posibilidad de organizar el contenido en capas
• La posibilidad de referenciar mediante programación la mayoría de elementos de una página web. (Árbol DOM de la página)
• Uso de fuentes dinámicas
El lenguaje html se utiliza para definir la estructura de los elementos de la página web. El CSS especifica el formato de los elementos de la página y el lenguaje de script aporta funcionalidad a la página.
La forma tradicional de desarrollar páginas web era utilizando sólo html. Este tipo de desarrollos se denomina “html estático”. Con el html se define la estructura y formato de la página web. Las ventajas del html dinámico frente al estático son:
El DHTML aporta mucha más funcionalidad, gracias al lenguaje de script. El html aporta una funcionalidad mucho más limitada.
Separa la definición de la estructura de la página, de su formato. Con el uso de CSS se permite un control del formato más potente y flexible, facilita tener una apariencia homogénea en todas las páginas de una web site.
Mejor rendimiento. La versión xhtml y html 4.01 strict es más fácil de renderizar. Al separar el código CSS y el JAVASCRIPT del html, permite que se pueda compartir por varias páginas y así sólo hay que descargarlo una vez.
Menor coste de mantenimiento, al no tener código replicado, los cambios sólo se tienen que hacer una vez.
AJAX se puede entender como la aplicación de la tecnología DHTML para crear aplicaciones RIA.
Objetos incrustados
Los objetos incrustados o Plug-in son programas que se instalan y usan como parte de un navegador web. Un navegador permite descargar e instalar aplicaciones adicionales que pueden realizar funciones inicialmente no soportadas por una página web (vídeo, audio en directo, presentaciones, etc...). Estas aplicaciones son las denominados plug-in.
Existen etiquetas html para indicar la presencia de un objeto incrustado dentro de la página web. Los navegadores reconocen las etiquetas y ejecutan el programa necesario para visualizar el objeto dentro de la página web.
páginas web y Macromedia flash player, un reproductor de presentaciones multimedia interactivas.
Puesto que en el mercado hay miles de aplicaciones plug-in disponibles, tan sólo se suelen descargar en el navegador aquellas que son necesarios para visualizar una página.
Los objetos incrustados no son tecnología estándares. Su uso puede provocar problemas de mantenimiento y portabilidad de la aplicaciones que los usan.
Otras tecnologías: Applets
Los applets son pequeñas aplicaciones escritas Java que típicamente se ejecutan dentro de un navegador web. Proporcionan una funcionalidad que el html no proporciona. Una página web puede referenciar un applet utilizando un tag especial de HTML. El navegador descargará el código del applet desde el servidor en tiempo de petición y lo ejecutará en la máquina virtual Java del navegador web.
El modelo de ejecución de los applets protege al usuario de posibles violaciones de seguridad. Todo el código descargado se considera inseguro y se le aplican limitaciones muy estrictas. Un applet NO puede acceder a ficheros de la máquina cliente, ejecutar programas, etc.
Estas restricciones no se aplican cuando el applet está en el mismo ordenador cliente, o el applet está firmado. Un applet firmado incorpora la firma digital de su distribuidor, si este es de confianza, el Applet también.
Es una tecnología en retroceso, ha sido sustituida por tecnologías propietarias como Flash, o el uso de aplicaciones AJAX.
