Herramientas para el desarrollo web

1. HERRAMIENTAS PARA EL DESARROLLO WEB

1.1 HTML

El lenguaje que "hablan" las páginas web se llama HTML (HyperText Markup Language) y fue creado en 1992 por un físico nuclear llamado Tim Berners-Lee. Berners-Lee tomó dos herramientas preexistentes: el concepto de hipertexto (que permite conectar documentos entre sí a través de palabras que obran como puentes) y el SGML (siglas en inglés de lenguaje estándar de marcación general), que sirve para poner etiquetas o marcas en un texto que indiquen qué es cada parte y cómo debe verse.

El HTML (siglas en inglés de Lenguaje de Marcación General de Hipertexto) no es exactamente un lenguaje, sino un sistema muy simple de etiquetas (algo así como palabras claves) que contienen órdenes y se insertan en el texto que uno quiere publicar. Es decir: un documento HTML no es más que texto. Parte de ese texto es lo que uno quiere comunicar; el resto son las etiquetas HTML, que le explican a los browsers que reciban la página cómo va a estar dispuesta la información que se ve en pantalla. Por ejemplo, una etiqueta HTML puede servir para indicar: "el título a continuación va en negrita", o "acá va insertada una imagen".

La estructura de una etiqueta HTML es simple. La orden siempre va encerrada entre los signos mayor que (<) y menor que (>). Por ejemplo: "Acá empieza el título del documento" se escribe: .

Ahora que sabemos abrir y cerrar etiquetas vamos a meternos en la estructura básica de un documento HTML.

Cualquier documento HTML bien redactado tiene ocho etiquetas básicas que marcan las secciones principales del archivo:

[pic 1]

• La etiqueta  indica el inicio de un documento HTML.

• Cabecera:
  Las etiquetas  y  delimitan, respectivamente, el comienzo y el final de la cabecera del documento. La cabecera es un lugar en el que se puede guardar información acerca del documento que, en principio, no va a aparecer en el interior de la ventana del browser del usuario. Por ejemplo, aquí se coloca las etiquetas , entre medio de las cuales se pueden poner palabras que servirán para darle un nombre genérico al documento. Atención: este título aparecerá en la delgada barra superior de la ventana del browser (en Windows, típicamente dispuesta en azul), no dentro de la pantalla. Por lo tanto, el contenido dentro de (pese al nombre de estas etiquetas) no suele ser interpretado por los usuarios como el título real de la página; sólo sirve como una referencia. Hay otras etiquetas, que veremos más adelante, que cumplen mejor la función de titular un documento.

• Cuerpo:
  Las etiquetas  y , delimitan el cuerpo del documento. El cuerpo contiene todo lo que el usuario observará en pantalla, es decir, en la ventana principal del navegador. Entre estas dos etiquetas va el texto que uno quiere publicar, intercalado con las etiquetas HTML necesarias para que se vea adecuadamente en pantalla.

• En la última línea, la etiqueta  indica la finalización del documento HTML.

A continuación, vamos a ir descubriendo las etiquetas básicas que se pueden insertar dentro del espacio delimitado por  y para darle formato al texto que contenga el documento:

• Texto en negrita
• Texto realzado
• Texto en bastardilla
• Texto subrayado
• Texto tachado
• Párrafos
• Cómo alinear un párrafo
• Cortes
• Línea divisoria
• Comentarios

1.2 DHTML

Nestcape Navigator 2.0 e Internet Explorer 3.0 dieron a conocer modelos de objetos básicos para documentos HTML.  Sin embargo, el nivel de soporte estaba limitado a la lógica condicional durante la carga de la página y la validación de formularios.  No se aceptaban cambios que pudieran alterar la forma, estilo o presentación del documento.  Internet Explorer 4.0 elimina esta limitación por medio de un modelo de objetos mejorado.

En lugar de definir un modelo completamente nuevo, los desarrolladores crearon y diseñaron el modelo de objetos de Dynamic HTML como un super conjunto del modelo existente.  

El modelo de objetos de Dynamic HTML es sólido con los paradigmas actuales de programación, permitiendo a los desarrolladores apoyarse en sus conocimientos.

1.2 CARACTERISTICAS ESPECIALES

• Dynamic HTML permite crear páginas y aplicaciones web interactivas.

• Dynamic HTML proporciona un gran modelo de eventos estrechamente relacionados con la estructura del documento sobre el que trabaja, este modelo esta basado en dos grandes características nuevas para el control del comportamiento del documento.

1. Promoción de eventos: La promoción de eventos no existía en versiones anteriores del modelo de objetos de HTML porque no era necesaria.  Antes, los desarrolladores de los exploradores pensaban que únicamente una serie de elementos era bastante interesante como para provocar eventos.  Sin embargo, con la introducción de Dynamic HTML, todos los elementos provocan eventos.

1. Acciones predeterminadas:  Representan el manejo del evento por el mismo explorador.

Con el modelo de objetos de Dynamic HTML es posible sustituir una acción predeterminada existente por un comportamiento personalizado.  Si un evento no tiene acción predeterminada y vamos a escribir un comportamiento para el mismo, conviene cancelar la potencial acción predeterminada.  Con esto aseguraremos que el código seguirá ejecutándose correctamente si algún explorador incluye mas tarde una acción predeterminada para dicho evento.

La acción predeterminada no siempre la define el origen del evento (puede estar definida por un elemento padre).

• Creación de Guiones.  Los guiones no son la única manera de acceder al modelo de objetos de Dynamic HTML: existen tres formas alternativas de acceder al modelo de objetos de Dynamic HTML:

• A través de guiones dentro de una página HTML o referenciados en la misma.  Estos guiones pueden acceder al documento o documentos actuales desde el mismo dominio en otros marcos o ventanas.
• A través de complementos y controles introducidos que residen en la página.
• A través de equipos que residan fuera del explorador o junto al mismo.  Por ejemplo, el cuadro de dialogo Buscar de Internet Exploren 4.0 se creó utilizando Dynamic HTML.

• Vinculación de Eventos

La vinculación de eventos es la asociación entre un evento especifico y un guión.  Dynamic HTML une una serie de métodos independientes del lenguaje para vincular guiones a eventos.  además, los propios intérpretes de guiones pueden proporcionar sus propios métodos para permitir la vinculación de eventos.

En Dynamic HTML, todos los elementos que se encuentran dentro del documento se han ampliado para admitir eventos de ratón y teclado.  Estos eventos se muestran como atributos directamente en cada elemento, lo que permite una asociación directa entre el elemento y su comportamiento.  Un ejemplo puede ser, vincular el evento onclick de un botón a una función mediante un atributo, tal como se muestra a continuación:

        se invocará la función foo() . - - >

        ONCLICK=”foo();” LANGUAGE=”JavaScript”>

• El objeto event.  

Proporciona la información relacionada con un evento.  El objeto event es un mecanismo independiente del lenguaje para el paso de parámetros y controlar el paso de modelos de eventos, por ejemplo, en un evento de ratón, la información condicional a la posición actual del ratón y el estado del botón se exponen por medio de las propiedades del objeto event para la identificación del elemento que originó la secuencia del evento y para controlar tanto la promoción del evento como la acción por omisión:

• event.scrElement
• event.cancelBuble
• event.returnValue

• La propiedad scrElement devuelve el elemento que primero genero el evento.

• La propiedad de cancelBuble se utiliza para detener la promoción de evento en su recorrido ascendente por la jerarquía.

• La propiedad returnValue se usa fundamentalmente para anular la acción predeterminada de un evento.  Sin embargo, si escribimos código que añada cierto comportamiento debido a un evento, deberemos cancelar siempre el comportamiento predeterminado, de forma que si se añade una acción por omisión al evento, el comportamiento de la página no cambia.  Para cancelar la acción predeterminada, esta propiedad deberá tomar el valor false.

3.3 JAVA

Sun Microsystems, líder en servidores para Internet, uno de cuyos lemas desde hace mucho tiempo es "the network is the computer" (lo que quiere dar a entender que el verdadero ordenador es la red en su conjunto y no cada máquina individual), es quien ha desarrollado el lenguaje Java, en un intento de resolver simultáneamente todos los problemas que se le plantean a los desarrolladores de software por la proliferación de arquitecturas incompatibles, tanto entre las diferentes máquinas como entre los diversos sistemas operativos y sistemas de ventanas que funcionaban sobre una misma máquina, añadiendo la dificultad de crear aplicaciones distribuidas en una red como Internet.

...