Aplicaciones WEB

Introduccin al
HTML
Mg. Carlos Alfredo Gil Narvaez

Aplicacin WEB
En la ingeniera de software se denomina
aplicacin web a aquellas herramientas que los
usuarios pueden utilizar accediendo a un
servidor web a travs de Internet o de una
intranet mediante un navegador. En otras
palabras, es una aplicacin software que se
codifica en un lenguaje soportado por los
navegadores web en la que se confa la
ejecucin al navegador.

Las aplicaciones web son populares debido a lo

prctico del navegador web como cliente ligero, a
la independencia del sistema operativo, as como a
la facilidad para actualizar y mantener aplicaciones
web sin distribuir e instalar software a miles de
usuarios potenciales. Existen aplicaciones como los
webmails, wikis, weblogs, tiendas en lnea, etc. Que
son ejemplos bastante conocidos de aplicaciones
web.

Es importante mencionar que una pgina Web

puede contener elementos que permiten una
comunicacin activa entre el usuario y la
informacin. Esto permite que el usuario acceda
a los datos de modo interactivo, gracias a que
la pgina responder a cada una de sus
acciones, como por ejemplo rellenar y enviar
formularios, participar en juegos diversos y
acceder a gestores de base de datos de todo
tipo.

Ventajas

Desventajas

Las aplicaciones web requieren

poco o nada de espacio en
disco.
Adems
suelen
ser
livianas.

Las aplicaciones web requieren navegadores

web totalmente compatibles para funcionar.
Incluso muchas veces requieren las extensiones
apropiadas y actualizadas para operar.

No requieren que los usuarios

las
actualicen,
eso
es
implementado del lado del
servidor.

Muchas veces requieren una conexin a

internet para funcionar, si la misma se
interrumpe, no es posible utilizarla ms. De
todas maneras, en ocasiones, pueden ser
descargadas e instaladas localmente para su
uso offline.

Proveen gran compatibilidad Muchas no son de cdigo abierto, perdiendo

entre plataformas (portabilidad), flexibilidad.
dado
que
operan
en
un
navegador web.
La aplicacin web desaparece si as lo requiere
el desarrollador o si el mismo se extingue. Las
aplicaciones tradicionales, en general, pueden
seguir usndose en esos casos.
El usuario, en general, no tiene libertad de
elegir la versin de la aplicacin web que quiere
usar. Un usuario podra preferir usar una versin
ms antigua, hasta que la nueva sea probada.
En teora, el desarrollador de la aplicacin web

Arquitectura de una Aplicacin

WEB
Una aplicacin Web es proporcionada por un
servidor Web y utilizada por usuarios que se
Conectan desde cualquier punto va clientes
Web (browsers o navegadores). La arquitectura
de un Sitio Web tiene tres componentes
principales:
Un servidor Web
Una conexin de red
Uno o ms clientes

El servidor Web distribuye pginas de

informacin formateada a los clientes que las
solicitan. Los requerimientos son hechos a
travs de una conexin de red, y para ello se
usa el protocolo HTTP. Una vez que se solicita
esta peticin mediante el protocolo HTTP y la
recibe el servidor Web, ste localiza la pgina
Web en su sistema de archivos y la enva de
vuelta al navegador que la solicit.

Las aplicaciones web se basan en una arquitectura

cliente/servidor: por un lado est el cliente (el

navegador, explorador o visualizador) y por otro lado
el servidor (el servidor web). Existen diversas
variantes de la arquitectura bsica segn cmo se
implementen las diferentes funcionalidades de la
parte servidor.
El lenguaje PHP es hoy en da uno de los ms
populares en el desarrollo de aplicaciones web.
Existen otras tecnologas similares, como Java o
.NET, pero PHP es quizs la mejor opcin para
aprender a desarrollar aplicaciones web.

Las pginas Web son el componente principal

de una aplicacin o sitio Web. Los browsers
piden
pginas
(almacenadas
o
creadas
dinmicamente)
con
informacin
a
los
servidores Web. En algunos ambientes de
desarrollo de aplicaciones Web, las pginas
contienen cdigo HTML y scripts dinmicos, que
son ejecutados por el servidor antes de
entregar la pgina.

Una vez que se entrega una pgina, la conexin entre

el browser y el servidor Web se rompe, es decir que la
lgica del negocio en el servidor solamente se activa
por la ejecucin de los scripts de las pginas solicitadas
por el browser (en el servidor, no en el cliente). Cuando
el browser ejecuta un script en el cliente, ste no tiene
acceso directo a los recursos del servidor. Hay otros
componentes que no son scripts, como los applets (una
aplicacin especial que se ejecuta dentro de un
navegador) o los componentes ActiveX. Los scripts del
cliente son por lo general cdigo JavaScript o VBSscript,
mezclados con cdigo HTML.

La coleccin de pginas son en una buena parte

dinmicas (ASP, PHP, etc.), y estn agrupadas
lgicamente para dar un servicio al usuario. El
acceso a las pginas est agrupado tambin en
el tiempo (sesin). Los componentes de una
aplicacin Web son:

1. Lgica de negocio.
Parte ms importante de la aplicacin.
Define los procesos que involucran a la aplicacin.
Conjunto de operaciones requeridas para proveer el servicio.
2. Administracin de los datos.
Manipulacin de BD y archivos.
3. Interfaz
Los usuarios acceden a travs de navegadores, mviles, Tablets,
etc.
Funcionalidad accesible a travs del navegador.
Limitada y dirigida por la aplicacin.

Las aplicaciones web se modelan mediante lo

que se conoce como modelo de capas, Una
capa representa un elemento que procesa o
trata informacin. Los tipos son:
Modelo de dos capas: La informacin
atraviesa dos capas entre la interfaz y la
administracin de los datos.
Modelo de n-capas: La informacin atraviesa
varias capas, el ms habitual es el modelo de
tres capas.

Modelo de dos Capas.

Gran parte de la aplicacin corre en el lado

del cliente.
Las capas son:
Cliente: La lgica de negocio est inmersa
dentro de la aplicacin que realiza el interfaz
de usuario, en el lado del cliente.
Servidor: Administra los datos.

Las limitaciones de este modelo son.

Es difcilmente escalable
Nmero de conexiones reducida
Alta carga de la red.
La flexibilidad es restringida
La funcionalidad es limitada.

Modelo de tres Capas.

Esta diseada para superar las limitaciones de
las arquitecturas ajustadas al modelo de dos
capas, introduce una capa intermedia (la capa
de proceso) Entre presentacin y los datos, los
procesos pueden ser manejados de forma
separada a la interfaz de usuario y a los datos,
esta capa intermedia centraliza la lgica de
negocio, haciendo la administracin
ms
sencilla, los datos se pueden integrar de
mltiples
fuentes, las
aplicaciones web
actuales se ajustan a este modelo.

Las capas de este modelo son:

1. Capa de presentacin (parte en el cliente y
parte en el servidor)
Recoge la informacin del usuario y la enva al
servidor (cliente)
Manda informacin a la capa de proceso para
su procesado
Recibe los resultados de la capa de proceso
Generan la presentacin
Visualizan la presentacin al usuario (cliente)

2. Capa de proceso (servidor web)

Recibe la entrada de datos de la capa de presentacin
Interacta con la capa de datos para realizar operaciones
Manda los resultados procesados a la capa de
presentacin
3. Capa de datos (servidor de datos)
Almacena los datos
Recupera datos
Mantiene los datos
segura la integridad de los datos

Qu es el HTML?
El HTML (Hyper Text Markup Language) es el lenguaje con el

que se escriben las pginas web. Es un lenguaje de

hipertexto, es decir, un lenguaje que permite escribir texto de
forma estructurada, y que est compuesto por etiquetas, que
marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede
contener imgenes, sonido, vdeos, etc., por lo que el resultado
puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm,
para que puedan ser visualizados en los navegadores
(programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML
de los documentos, y de mostrar a los usuarios las pginas web
resultantes del cdigo interpretado.

Compatibilidad con los

navegadores
Como hemos dicho, el navegador instalado en la

computadora del usuario es el que interpreta el

cdigo HTML de la pgina que visita por lo que a
veces puede ocurrir que dos usuarios visualicen la
misma pgina de forma distinta porque tienen
instalados navegadores distintos o incluso versiones
distintas del mismo navegador.
Los navegadores tienen que ser compatibles con la
ltima versin HTML para poder interpretar el mayor
nmero posible de etiquetas. Si un navegador no
reconoce una etiqueta, la ignora y el efecto que
pretenda la etiqueta no queda reflejado en la pgina.

Etiquetas
Las etiquetas o marcas delimitan cada uno de los

elementos que componen un documento HTML.

Existen dos tipos de etiquetas, la de comienzo de
elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los
caracteres < y >. Est compuesta por el
identificador o nombre de la etiqueta, y puede
contener una serie de atributos opcionales que
permiten aadir ciertas propiedades. Su sintaxis
es: <identificador atributo1 atributo2 ...>

La

etiqueta de final est delimitada por los

caracteres </ y >. Est compuesta por el
identificador o nombre de la etiqueta, y no contiene
atributos. Su sintaxis es: </identificador>

Cada

uno de los elementos de la pgina se

encontrar entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepcin de
algunos elementos que no necesitan etiqueta de
cierre. Tambin es posible anidar etiquetas, es decir,
insertar etiquetas entre otras etiquetas de comienzo
y de cierre.

<p align="center">
<font color="#993366"size="4"face="Comic
Sans MS, Arial, MS Sans Serif">
Bienvenidos a la clase de Introduccin a la
Ingeniera de Sistemas
</font>
</p>

Es importante anidar bien las etiquetas, las

etiquetas no se pueden 'cruzar', en nuestro
ejemplo hemos empezado por la etiqueta
<p..>, antes de cerrar esta etiqueta hemos
puesto la <font..> por lo que antes de cerrar la
etiqueta <p..> debemos cerrar la etiqueta
etiqueta <font..>.

Editores HTML
Un editor es un programa que nos permiten
redactar documentos. Hoy en da existen un
gran nmero de editores que permiten crear
pginas web sin la necesidad de escribir ni una
sola lnea de cdigo HTML. Estos editores
disponen de un entorno visual, y generan
automticamente el cdigo de las pginas. Al
poder ver en todo momento cmo quedar la
pgina en el navegador, se facilita la creacin de
las pginas, y el uso de mens permite ganar
rapidez.

Algunos de los editores visuales con los que

podrs crear tus pginas web son Macromedia
Dreamweaver, Microsoft Frontpage, Adobe
Pagemill, NetObjects Fusion, CutePage, HotDog
Proffesional,
Netscape
Composer
y
Arachnophilia, de los cuales algunos tienen la
ventaja de ser gratuitos.