Aspectos básicos de las aplicaciones web

La interfaz de usuario se ha simplificado en Dreamweaver y versiones posteriores. Como resultado, es posible que no encuentre algunas de las opciones que se describen en este artículo en Dreamweaver y versiones posteriores. Para obtener más información, consulte este artículo.

Acerca de las aplicaciones web

Una aplicación web es un sitio web que contiene páginas con contenido parcial o totalmente indeterminado. El contenido final de una página se determina únicamente cuando el visitante solicita una página del servidor web. Dado que el contenido final de la página varía de solicitud en solicitud según las acciones del visitante, este tipo de página se denomina página dinámica.

Las aplicaciones web se crean para abordar una variedad de desafíos y problemas. Esta sección describe usos comunes de las aplicaciones web y proporciona un ejemplo simple.

Usos comunes de las aplicaciones Web

Las aplicaciones web tienen muchos usos tanto para visitantes del sitio como para desarrolladores, incluyendo los siguientes:

• Permitir que los visitantes encuentren información de forma rápida y sencilla en un sitio web rico en contenido.

  Este tipo de aplicación web brinda a los visitantes la capacidad de buscar, organizar y navegar por el contenido como mejor les parezca. Los ejemplos incluyen intranets de compañías, Microsoft MSDN (www.msdn.microsoft.com), y Amazon.com (www.amazon.com).

• Recoger, guardar y analizar datos suministrados por los visitantes de los sitios.

  En el pasado, los datos introducidos en formularios HTML se enviaban como mensajes de correo electrónico a empleados o aplicaciones CGI para su procesamiento. Una aplicación web puede guardar datos de formularios directamente en una base de datos y también extraer los datos y crear informes web para su análisis.Los ejemplos incluyen páginas de banca en línea, páginas de pago de tiendas web, encuestas y formularios de comentarios de usuario.

• Actualizar sitios Web cuyo contenido cambia constantemente.

  Una aplicación web libera al diseñador web de actualizar continuamente el HTML del sitio. Los proveedores de contenido como editores de noticias proporcionan a la aplicación web contenido, y la aplicación web actualiza el sitio automáticamente. Los ejemplos incluyen el Economist (www.economist.com) y CNN (www.cnn.com).

Ejemplo de aplicación web

Janet es una diseñadora web profesional y usuaria de Dreamweaver desde hace mucho tiempo, responsable de mantener los sitios de intranet e Internet de una compañía de tamaño mediano de 1000 empleados. Un día, Chris de Recursos Humanos viene a verla con un problema. Recursos Humanos administra un programa de ejercicios para empleados que otorga puntos a los empleados por cada milla caminada, en bicicleta o corrida. Cada empleado debe reportar sus totales de millas mensuales en un correo electrónico a Chris. Al final del mes, Chris reúne todos los mensajes de correo electrónico y otorga a los empleados pequeños premios en efectivo según sus totales de puntos.

El problema de Pedro es que el programa de salud ha tenido demasiado éxito. Tantos empleados participan ahora que Chris se ve inundado con correos electrónicos al final de cada mes. Chris le pregunta a Janet si existe una solución basada en web.

Janet propone una aplicación web basada en intranet que realiza las siguientes tareas:

• Permite a los empleados introducir su kilometraje en una página web usando un formulario HTML simple

• Almacenar los kilómetros recorridos por cada empleado en una base de datos

• Calcular los puntos en función de los datos de kilometraje

• Permitir a los empleados supervisar su progreso mensual

• Proporciona a Chris acceso con un solo clic a los totales de puntos al final de cada mes

  Janet pone en funcionamiento la aplicación antes de la hora del almuerzo usando Dreamweaver, que tiene las herramientas que necesita para generar este tipo de aplicación de forma rápida y sencilla.

Funcionamiento de una aplicación Web

Una aplicación web es una colección de páginas web estáticas y dinámicas.Una página web estática es aquella que no cambia cuando un visitante del sitio la solicita: El servidor web envía la página al explorador solicitante sin modificarla.Por el contrario, una página web dinámica es modificada por el servidor antes de enviarse al explorador solicitante.La naturaleza cambiante de la página es la razón por la que se llama dinámica.

Por ejemplo, podrías diseñar una página para mostrar resultados de fitness, dejando cierta información (como el nombre del empleado y los resultados) para ser determinada cuando la página sea solicitada por un empleado en particular.

Las siguientes secciones describen cómo funcionan las aplicaciones web con mayor detalle.

Procesamiento de páginas web estáticas

Un sitio web estático comprende un conjunto de páginas HTML relacionadas y archivos alojados en un ordenador que ejecuta un servidor web.

Un servidor web es software que sirve páginas web en respuesta a solicitudes de navegadores web.Una solicitud de página se genera cuando un visitante hace clic en un enlace de una página web, selecciona un marcador en un explorador o introduce una URL en el cuadro de texto de dirección de un explorador.

El contenido final de una página web estática es determinado por el diseñador de la página y no cambia cuando se solicita la página.Aquí tienes un ejemplo:

<html>

<head>

<title>Página de información de Trio Motors</title>

</head>

<body>

<h1>Acerca de Trio Motors</h1>

<p>Trio Motors es un fabricante líder de automóviles.</p>

</body>

</html>

Cada línea del código HTML de la página la escribe el diseñador antes de que la página se coloque en el servidor.Porque el HTML no cambia una vez que está en el servidor, este tipo de página se llama página estática.

En sentido estricto, una página “estática” puede no ser estática en absoluto. Por ejemplo, una imagen de sustitución o contenido de Flash (un archivo SWF) puede hacer que una página estática tome vida. No obstante, en esta guía se habla de página estática cuando ésta se envía al navegador sin modificaciones.

Cuando el servidor web recibe una solicitud de una página estática, el servidor lee la solicitud, encuentra la página y la envía al explorador solicitante, como muestra el siguiente ejemplo:

En el caso de las aplicaciones web, ciertas líneas de código no están determinadas cuando el visitante solicita la página.Estas líneas deben determinarse mediante algún mecanismo antes de que la página pueda enviarse al explorador. El mecanismo se analiza en la siguiente sección.

Procesamiento de páginas dinámicas

Cuando un servidor web recibe una solicitud de una página web estática, el servidor envía la página directamente al explorador que la solicita. Sin embargo, cuando el servidor web recibe una solicitud de una página dinámica, reacciona de manera diferente: pasa la página a una pieza especial de software responsable de finalizar la página. Este software especial se denomina servidor de aplicaciones.

El servidor de aplicaciones lee el código de la página, finaliza la página según las instrucciones del código y, a continuación, elimina el código de la página. El resultado es una página estática que el servidor de aplicaciones devuelve al servidor web, que luego envía la página al explorador que la solicita. Todo lo que recibe el explorador cuando llega la página es HTML puro. A continuación se incluye una vista de este proceso:

Acceso a una base de datos

Un servidor de aplicaciones te permite trabajar con recursos del lado del servidor como bases de datos.Por ejemplo, una página dinámica puede indicar al servidor de aplicaciones que extraiga datos de una base de datos y los inserte en el HTML de la página. Para más información, consulte www.adobe.com/go/learn_dw_dbguide_es.

Usar una base de datos para almacenar contenido te permite separar el diseño del sitio web del contenido que quieres mostrar a los usuarios del sitio.En lugar de escribir archivos HTML individuales para cada página, solo necesitas escribir una página (o plantilla) para los diferentes tipos de información que quieres presentar.Luego puedes cargar contenido en una base de datos y hacer que el sitio web recupere ese contenido en respuesta a una solicitud del usuario.También puedes actualizar información en una sola fuente y luego propagar ese cambio por todo el sitio web sin tener que editar manualmente cada página.Puedes usar Adobe Dreamweaver para diseñar formularios web para insertar, actualizar o eliminar datos de la base de datos.

La instrucción para extraer datos de una base de datos se llama consulta de base de datos. Una consulta consiste en criterios de búsqueda expresados en un lenguaje de base de datos llamado SQL (Structured Query Language). La consulta SQL se escribe en los scripts o etiquetas del lado del servidor de la página.

Un servidor de aplicaciones no puede comunicarse directamente con una base de datos porque el formato propietario de la base de datos hace que los datos sean indescifrables de la misma manera que un documento de Microsoft Word abierto en Notepad o BBEdit puede ser indescifrable.El servidor de aplicaciones puede comunicarse con la base de datos solo a través del intermediario de un controlador de base de datos: software que actúa como un intérprete entre el servidor de aplicaciones y la base de datos.

Después de que el controlador establece la comunicación, la consulta se ejecuta contra la base de datos y se crea un conjunto de registros. Un conjunto de registros es un conjunto de datos extraído de una o más tablas de una base de datos. El conjunto de registros se devuelve al servidor de aplicaciones, que usa los datos para completar la página.

A continuación se ofrece una consulta de base de datos sencilla escrita en SQL:

SELECT lastname, firstname, fitpoints

FROM employees

Esta instrucción crea un conjunto de registros de tres columnas y lo llena con filas que contienen el apellido, el nombre y los puntos de fitness de todos los empleados de la base de datos. Para más información, consulte www.adobe.com/go/learn_dw_sqlprimer_es.

En el siguiente ejemplo se muestra el proceso de consulta de una base de datos y de devolución de datos al explorador:

Puedes usar prácticamente cualquier base de datos con tu aplicación web, siempre que el controlador de base de datos correspondiente esté instalado en el servidor.

Si planeas generar aplicaciones pequeñas de bajo coste, puedes usar una base de datos basada en archivos, como una creada en Microsoft Access. Si planeas generar aplicaciones sólidas esenciales para la Empresa, puedes usar una base de datos basada en servidor, como una creada en Microsoft SQL Server, Oracle 9i o MySQL.

Si tu base de datos se encuentra en un sistema diferente al servidor web, asegúrate de tener una conexión rápida entre los dos sistemas para que tu aplicación web pueda funcionar de forma rápida y eficaz.

Creación de páginas dinámicas

La creación de una página dinámica implica, en primer lugar, escribir el código HTML y, seguidamente, añadir los scripts o etiquetas del lado del servidor al código HTML para crear la página dinámica. Al visualizar el código resultante, el lenguaje aparece incrustado en el código HTML de la página. Por esta razón, estos lenguajes se conocen como lenguajes de programación incrustados en HTML. En el siguiente ejemplo básico se utiliza ColdFusion Markup Language (CFML):

Nota: La compatibilidad con CFML se eliminó de Dreamweaver y versiones posteriores.

<html>

<head>

<title>Página de información de Trio Motors</title>

</head>

<body>

<h1>Acerca de Trio Motors</h1>

<p>Trio Motors es un fabricante de automóviles líder.</p>

<!--- las instrucciones incrustadas empiezan aquí --->

<cfset department="Sales">

<cfoutput>

<p>No deje de visitar nuestra página de #department#.</p>

</cfoutput>

<!--- las instrucciones incrustadas terminan aquí --->

</body>

</html>

Las instrucciones incrustadas de esta página realizan las siguientes acciones:

El servidor de aplicaciones devuelve la siguiente página al servidor web:

<html>

<head>

<title>Página de información de Trio Motors</title>

</head>

<body>

<h1>Acerca de Trio Motors</h1>

<p>Trio Motors es un fabricante de automóviles líder.</p>

<p>Asegúrate de visitar nuestra página de Ventas.</p>

</body>

</html>

El servidor web envía la página al explorador solicitante, que la muestra de la siguiente manera:

Acerca de Trio Motors

Trio Motors es un fabricante de automóviles líder.

Asegúrate de visitar nuestra página de Ventas.

Eliges un lenguaje de Scripts o basado en etiquetas para usar dependiendo de la tecnología de servidor disponible en tu servidor. Estos son los lenguajes más populares para las tecnologías de servidor compatibles con Dreamweaver:

Dreamweaver puede crear los scripts del lado del servidor o etiquetas necesarias para que tus páginas funcionen, o puedes escribirlas a mano en el entorno de codificación de Dreamweaver.

Terminología de aplicaciones web

Esta sección define términos utilizados con frecuencia relacionados con aplicaciones web.

Software que ayuda a un servidor web a procesar páginas web que contienen scripts del lado del servidor o etiquetas.Cuando se solicita una página de este tipo al servidor, el servidor web entrega la página al servidor de aplicaciones para procesarla antes de enviar la página al explorador.Para obtener más información, consulta Cómo funciona una aplicación web.

Entre los servidores de aplicaciones más habituales se encuentran ColdFusion y PHP.

Una colección de datos almacenados en tablas. Cada fila de una tabla constituye un registro y cada columna constituye un campo en el registro, como se muestra en el siguiente ejemplo:

Software que actúa como intérprete entre una aplicación web y una base de datos. Los datos de una base de datos se almacenan en un formato propietario. Un controlador de base de datos permite que la aplicación web lea y manipule datos que de otro modo serían indescifrables.

(SGBD o sistema de base de datos) Software utilizado para crear y manipular bases de datos. Entre los sistemas de base de datos comunes se incluyen Microsoft Access, Oracle 9i y MySQL.

Operación mediante la cual se extrae un juego de registros de una base de datos. Una consulta consta de criterios de búsqueda expresados en un lenguaje de base de datos llamado SQL. Por ejemplo, la consulta puede especificar que solo se incluyan ciertas columnas o determinados registros en el conjunto de registros.

Una página web personalizada por un servidor de aplicaciones antes de que la página se envíe a un explorador.

Un conjunto de datos extraído de una o más tablas de una base de datos, como en el siguiente ejemplo:

Una base de datos que contiene más de una tabla, y las tablas comparten datos. La siguiente base de datos es relacional porque dos tablas comparten la columna DepartmentID.

La tecnología que utiliza un servidor de aplicaciones para modificar páginas dinámicas en tiempo de ejecución.

El entorno de desarrollo de Adobe Dreamweaver es compatible con las siguientes tecnologías de servidor:

• Adobe® ColdFusion®

• Microsoft Active Server Pages (ASP)

• PHP: Hypertext Preprocessor (PHP)

  También puede utilizar el entorno de codificación de Adobe Dreamweaver para desarrollar páginas para cualquier otra tecnología de servidor que no aparezca en la lista.

Una página web que un servidor de aplicaciones no modifica antes de que la página se envíe a un explorador.Para obtener más información, consulte Procesamiento de páginas web estáticas.

Un sitio web que contiene páginas con contenido parcial o totalmente indeterminado. El contenido final de estas páginas se determina únicamente cuando un visitante solicita una página del servidor web. Dado que el contenido final de la página varía de una solicitud a otra según las acciones del visitante, este tipo de página se denomina página dinámica.

Software que envía páginas web como respuesta a solicitudes de exploradores web. Se genera una solicitud de página cuando un visitante hace clic en un enlace de una página web en el explorador, selecciona un marcador en el explorador o introduce una URL en el cuadro de texto de dirección del explorador.

Entre los servidores web populares se incluyen Microsoft Internet Information Server (IIS) y Apache HTTP Server.

Temas similares

• Guía de bases de datos para principiantes
• Elección de un servidor de aplicaciones