Programacin web

2.1 Arquitectura de las aplicaciones 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 estn basadas en el modelo Cliente/Servidor que gestionan servidores web, y que
utilizan como interfaz pginas 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, PDAs, 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 (fat client).

Las capas son:

Cliente (fat client): 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 usuari o y a los datos, esta
capa intermedia centraliza la lgica de negocio, haciendo la administracin ms sencil a, 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

1.2 tecnologias
Las fases de un desarrollo web, as como los lenguajes de programacin usados,
son muy extensos y variados, y por ello necesitamos herramientas especficas para
cada una de ellas. Conoceremos a continuacin las principales herramientas
existentes para poder desarrollar fcilmente un proyecto web.
En el desarrollo web tenemos unas herramientas para el diseo, otras para la
maquetacin, otras para la programacin, y para la depuracin. Todas las
herramientas que usemos son muy importantes, desde el Sistema Operativo hasta
el comando ms insignificante, y por ello debemos elegir la ms adecuada a
nuestras necesidades y capacidades.

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo,

como es lgico, y su eleccin no es tan trivial. Hay que tener en cuenta las
aplicaciones de las que dispone el Sistema Operativo y sus costes.
Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como
Photoshop, Dreamweaver, Fireworks, ASP .NET Y por otro lado tenemos
GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos tambin
estn disponibles en Windows).

Otra caracterstica a tener en cuenta es las facilidades que el Sistema Operativo

aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y
esto es porque Windows no fue diseado para los desarrolladores, sino para
personas que no tienen muchos conocimientos sobre informtica.
Y por el contrario GNU/Linux fue creado por desarrolladores, y para
desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de
herramientas que nos harn la vida mucho ms fcil, que adems son libres.
Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del
proceso que forman el ciclo de vida de un desarrollo web.
Diseo:

El diseo consiste en crear esbozos de la web final mediante una herramienta

grfica, como Photoshop, GIMP o Inkscape.
Maquetacin HTML/CSS:

La maquetacin consiste en convertir los esbozos creados en la fase anterior en

plantillas

HTML, su respectiva hoja de estilos, y las imgenes usadas. Es posible

saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de
si dominamos herramientas como Photoshop o no.
Programacin cliente:

La programacin cliente consiste bsicamente en Javascript. Una web puede no

tener necesidad de hacer programacin cliente, como puede ser una pequea web
corporativa con poca informacin esttica, o puede que requiera enormes esfuerzos
en esta fase, como ocurre con los proyectos

Web 2.0.

Programacin servidor:

En esta fase, que se desarrolla junto con la anterior, crearemos la aplicacin web
en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.
Depuracin:

Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas
unitarias, aserciones, trazas, etc.
Pruebas en local:

En nuestro servidor local haremos todas las pruebas posibles.

Subir ficheros al hosting:

Una vez nuestra web est completada y bien testeada en nuestro servidor local
(desarrollo), la subiremos al servidor del hosting elegido (produccin). Dependiendo
del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso

Subversin.

Pruebas en hosting:

Realizaremos las ltimas pruebas en el servidor del hosting para comprobar que el
cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor
local debe tener exactamente la misma configuracin que el servidor del hosting.
Herramientas: desarrollo en PHP

A continuacin se enumeran las herramientas bsicas para el desarrollo de una web

en PHP, en sus diferentes fases de diseo e implementacin.
Fases: diseo y maquetacin

Adobe PhotoShop
GIMP:
Inkscape
Adobe Fireworks
Dreamweaver, Aptana, Amaya:

Fase: maquetacin
Fases: maquetacin, programacin cliente
Fase: programacin servidor

Con l crearemos fcilmente la aplicacin web en PHP. Aunque podremos

usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con
el plugin PHP.
Otra aplicacin muy til que est muy ligada a Zend Studio es Zend
Platform, un mdulo para Apache que permite depurar una web
directamente en el navegador (Internet Explorer o Firefox), adems de otras
funciones ms complejas, como alertas configurables para que nos enve
un email por cada error ocurrido en la web, o cuando un script sobrepase un
tiempo determinado de ejecucin, por ejemplo.
Fase: prueba local

Apache
Firefox / Firebug / Web Developer Extension

Fases: pruebas en local, depuracin

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma

pgina para ver los cambios en tiempo real, consultar los tiempos de carga
de la pgina en conjunto, de las imgenes, javascripts, hojas de estilo, etc,
as como sus tamaos, etc. Y Web Developer nos ofrece herramientas muy
tiles como ver las cookies de la web, ocultar imgenes, cambiar el tamao
del navegador a resoluciones estndar, etc.
Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto est
listo, deberemos subirlo al servidor del hosting.
La herramienta a utilizar depender de las opciones que nos ofrezca el hosting,
que desgraciadamente en la mayora de los casos es solamente el antiguo FTP
(FileZilla). En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH),
y la tarea consistir simplemente en configurar el FTP y copiar y pegar los
directorios que queramos subir.

1.4 planeacin

1. Planificar el futuro
Puede sonar un poco duro que nos tengamos planear el futuro de algo que an no
existe pero es as, que pasa si en un futuro tuvieramos problemas de escalabilidad, y s
tuvieramos que migrar las bases de datos de MySql a Oracle, de una buena planificacin
depende la dificultad en un futuro de realizar cambios en la plataforma que
sostiene nuestra aplicacin.

2. Documentacin
Documenta todo lo que puedas tu aplicacin en especial aquellas partes de la misma que
hayan requerido un mayor tiempo de desarrollo, en un futuro cercano te librar de ms de
un quebradero de cabeza.

3. No empiezes por los pequeos detalles

A menudo es ms sencillo plantearse el desarrollo de pequeos servicios cmo pueden ser
los RSS o una galera de imgenes, pero es fundamental comenzar por lo que vendr a
ser la base de nuestra aplicacin, de este modo podremos ir completando nuestra
aplicacin en un orden lgico, primero los cimientos

4. Diseo de la interfaz
Esta entrada puede que te ayude en esta parte, es importante conseguir un buen diseo
para nuestra interfaz, es importante conseguir un interfaz que se atractivo y til para la
gran mayoria de los usuarios, lo ms importante es llegar a conectar con el usuario y la
mejor manera es ofrecerle la mayor cantidad de informacin posible para que se llegue a
sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una
mala eleccin en la combinacin de los colores que se integran en nuestra interfaz.

5. Evita construirte libreras o frameworks innecesarios

Muchas personas siempre sostienen que es mejor que cada desarrollador utilize sus propias
libreras, pero la realidad es que en muchas ocasiones esto supone una gran prdida de
tiempo, es mejor buscar una librera o framework que se parezca lo ms posible a lo
deseado que desarrollarlo por ti mismo.

6. Ten un plan de proyecto

Asegrate de que cada desarrollador que trabaje en el proyecto sepa qu es lo que
debe de hacer y cundo tiene que hacerlo, teniendo todo esto redactado en un
documento te ayudar a identificar problemas.

7. Elige el lenguaje adecuado

Ya sabes que hay numerosas discusiones sobre Cal es el mejor lenguaje de
programacin?, la respuesta a menudo es depende de para que quieras utilizarlo, por
eso asegrate de escoger el lenguaje adecuado.

8. Evita las distracciones

Optimiza tu tiempo, cuando ests trabajando que nada te distraiga, ni llamadas telefnicas,
ni clientes de mensajeras instantneas, proponte un buen nmero de horas al da de
trabajo aislado dedicado al proyecto.

9. Sigue un buen control de calidad

Muchas veces nos equivocamos al planificar los tiempos de proyecto y esto lleva a
menudo a los desarrolladores a tener que escribir cdigo sucio, esta es una buena opcin si
lo que quieres es una demo de la aplicacin funcionando pero ea actitud te traer problemas
en el futuro.

10. Plantate los pasos a seguir despues del desarrollo

Ten en cuenta que est fase de desarrollo algn da deber acabar, estudia con qu
frecuencia se deber actualizar y que se necesita para que este funcione