1.

1 Evolucin de las Aplicaciones

web
La programacin web es un trmino adecuado para describir el proceso general que
engloba el diseo y la creacin de un sitio web.
Hace algunos aos, los sitios web no eran mucho ms que folletos digitales.
Actualmente los sitios son ms grandes y complejos.
Con la introduccin de comercio electrnico y las pginas dinmicas, los sitios ya han
dejado atrs los folletos y han pasado a ser autnticas aplicaciones de software.

La web 1.0
La Web 1.0 (1991-2003) es la forma ms bsica que existe, con navegadores de slo
texto bastante rpidos ya que es de slo lectura. El usuario no puede interactuar con el
contenido de la pgina (nada de comentarios, respuestas, citas, etc), estando
totalmente limitado a lo que el Webmaster sube a sta.

Algunos elementos de diseo tpicos de un sitio Web 1.0 incluyen:

Pginas estticas en vez de dinmicas por el usuario que la visita2

El uso de framesets o Marcos.
Extensiones propias del HTML como <bilnk>
introducidas durante la guerra de navegadores web.
Libros de visitas online o guestbooks

<marquee>,

etiquetas

botones GIF, casi siempre a una resolucin tpica de 88x31 pixels en tamao
promocionando navegadores web u otros productos.3
formularios HTML enviados va email. Un usuario llenaba un formulario y
despus de hacer clic se enviaba a travs de un cliente de correo electrnico, con el
problema que en el cdigo se poda observar los detalles del envo del correo
electrnico.
No se podian adherir comentarios ni nada parecido
Todas sus pginas se creaban de forma fija y muy pocas veces se actualizaban.
No se trata de una nueva versin, sino de una nueva forma de ver las cosas.

La web 2.0
El trmino Web 2.0 comprende aquellos sitios web que facilitan el compartir
informacin, la interoperabilidad, el diseo centrado en el usuario1 y lacolaboracin en
la World Wide Web. Un sitio Web 2.0 permite a los usuarios interactuar y colaborar
entre s como creadores de contenido generado por usuarios en una comunidad virtual,
a diferencia de sitios web estticos donde los usuarios se limitan a la observacin
pasiva de los contenidos que se han creado para ellos. Ejemplos de la Web 2.0 son las
comunidades web, los servicios web, las aplicaciones Web, los servicios de red social,
losservicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomas.

Servicios asociados:

Blogs: Un blog es un espacio web personal en el que su autor puede escribir

cronolgicamente artculos, noticias...(con imgenes y enlaces).

Wikis: Una wiki es un espacio web corporativo, organizado mediante una

estructura hipertextual de pginas donde varias personas elaboran contenidos de

manera asncrona.
Redes sociales: Sitios web donde cada usuario tiene una pgina donde publica

contenidos y se comunica con otros usuarios. Ejemplos: Facebook, Twitter, Tuenti, Hi5,
Myspace, etc.
Entornos para compartir recursos: Entornos que nos permiten almacenar
recursos o contenidos en Internet, compartirlos y visualizarlos cuando nos convenga.
Existen de diversos tipos, segn el contenido que albergan o el uso que se les da:

Documentos: Google Drive y Office Web Apps (SkyDrive), en los cuales

podemos subir nuestros documentos, compartirlos y modificarlos.

Videos: Youtube, Vimeo, Dailymotion, Dalealplay... Contienen miles de

vdeos subidos y compartidos por los usuarios.

Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos tambin

tenemos la oportunidad de organizar las fotos con etiquetas, separndolas por grupos
como si fueran lbumes, podemos seleccionar y guardar aparte las fotos que no
queremos publicar.

Agregadores de noticias: Digg, Meneame... Noticias de cualquier medio

son agregadas y votadas por los usuarios.

Almacenamiento online: Dropbox, Google Drive, SkyDrive

Presentaciones: Prezzi, Slideshare.

Plataformas educativas

Aulas virtuales (sncronas)

Encuestas en lnea

La web 3.0
Web 3.0 es una expresin que se utiliza para describir la evolucin del uso y la
interaccin de las personas en internet a travs de diferentes formas entre los que se
incluyen la transformacin de la red en una base de datos, un movimiento social hacia
crear contenidos accesibles por mltiples aplicaciones non-browser, el empuje de las
tecnologas de inteligencia artificial, la web semntica, la Web Geoespacial o la Web
3D.

Se basa en la idea de aadir metadatos semnticos y ontolgicos a la World Wide Web.

Esas informaciones adicionales que describen el contenido, el significado y la relacin
de los datos se deben proporcionar de manera formal, para que as sea posible
evaluarlas automticamente por mquinas de procesamiento. El objetivo es mejorar
Internet ampliando la interoperabilidad entre los sistemas informticos usando
"agentes inteligentes". Agentes inteligentes son programas en las computadoras que
buscan informacin sin operadores humanos. Con la web 3.0 se busca que los usuarios
puedan conectarse desde cualquier lugar, cualquier dispositivo y a cualquier momento.
Entre sus innovaciones destacan:

Bases de datos

Inteligencia artificial

Web semntica y SOA

Evolucin al 3D

La web 4.0
las aplicaciones ya no estarn en nuestras PCs, estarn en la internet y
por ende en todos lados. Pasaremos de una red tonta a una red
inteligente donde el objetivo primordial ser el de unir las inteligencias
donde tanto las personas como las cosas se comuniquen entre s para
generar la toma de decisiones. Para el 2020 o quizs antes se espera
que haya agentes en la Web que conozcan, aprendan y razonen como
lo hacemos las personas.La Web Ubicua es un concepto que est an en
desarrollo, pero me llama curiosamente la atencin como se van
complementando algunas tecnologas que nos permiten imaginar o
soar lo que podemos esperar en un futuro no muy lejano. Imagnese
recibir informacin en su celular en la calle por la que camina y que su

propio equipo le haga una reservacin en el restaurant de la esquina con

solo saber sus gustos.

1.2 Arquitectura de las aplicaciones Web

La arquitectura tradicional de cliente/servidor tamin es conocida como arquitectura de dos

capas. Requiere una interfaz de usuario que se instala y se ejecuta en una PC o estacin de
trabajo y enva solicitudes a un servidor para ejecutar operaciones complejas.

Por ejemplo, una estacin de trabajo utilizada como cliente puede ejecutar una aplicacin de
interfaz de usuario que interroga a un servidor central de ases de datos.

Ventajas del Sistema de Dos Capas:

El desarrollo de aplicaciones en un amibente de dos capas funciona adecuadamente, pero no
es necesariamente lo ms eficiente. Las herramientas para el desarrollo con dos capas son
robustas y ampliamente evaluadas.
Las tcnicas de ingeniera de software de prototipo se emplean fcilmente. Las soluciones de
dos capas trabajan ien en ambientes no dinmicos estales, pero no se ejecutan bien en
organizaciones rpidamente cambiantes.

Desventajas del sistema de dos capas:

Los ambientes de dos capas requieren control excesivo de las versiones y demandan
esfuerzo de distriucin de la aplicacin cuando se les hacen camios. Esto se dee al hecho de
que la mayora de la aplicacin lgica existe en la estacin de trabajo del cliente.
La seguridad del sistema en un diseo de dos capas es compleja y a menudo requiere
administracin de las bases de datos; esto es deido al nmero de dispositivos con acceso
directo al amibente de esas bases de datos.
Las herramientas del cliente y de la base de datos, utilizadas en diseos de dos capas,
constantemente estn cambiando. La dependencia a largo plazo de cualquier herramienta,
puede complicar el escalamiento futuro o las implementaciones.
Arquitectura de tres capas
La arquitectura de tres capas es un diseo reciente que introduce una capa intermedia en el
proceso. Cada capa es un proceso separado y bien definido corriendo en plataformas
separadas. En la arquitectura tradicional de tres capas se instala una interfaz de usuario en la
computadora del usuario final (el cliente). La arquitectura asada en Web transforma la interfaz
de bsqueda existente (el explorador de Web), en la interfaz del usuario final.

La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles

El primer nivel consiste en la capa de presentacin que incluye no slo el navegador,

sino tamin el servidor web que es el responsale de presentar los datos un formato adecuado.

El segundo nivel est referido haitualmente a algn tipo de programa o script.

Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su

ejecucin. Una aplicacin Web tpica recoger datos del usuario (primer nivel), los enviar al
servidor, que ejecutar un programa (segundo y tercer nivel) y cuyo resultado ser formateado
y presentado al usuario en el navegador (primer nivel otra vez).

Las diferentes capas suelen ser:

Capa 1: Cliente de aplicacin: Navegador Web

Capa 2 : Servidor de Aplicaciones: Apache, Servidor Tomcat con servlets

Capa 3 : Servidor de Datos: base de datos, servidor SMTP

Ventajas de la arquitectura de tres capas:
Las llamadas de la interfaz del usuario en la estacin de trabajo, al servidor de capa
intermedia, son ms flexiles que en el diseo de dos capas, ya que la estacin solo necesita
transferir parmetros a la capa intermedia.
Con la arquitectura de tres capas, la interfaz del cliente no es requerida para comprender o
comunicarse con el receptor de los datos. Por lo tanto, esa estructura de los datos puede ser
modificada sin cambiar la interfaz del usuario en la PC.
El cdigo de la capa intermedia puede ser reutilizado por mltiples aplicaciones si est
diseado en formato modular.
La separacin de roles en tres capas, hace ms fcil reemplazar o modificar una capa sin
afectar a los mdulos restantes.
Desventajas de las Arquitecturas de Tres Capas y asadas en Web

Los ambientes de tres capas pueden incrementar el trfico en la red y requiere ms balance
de carga u tolerancia a las fallas.
Los exploradores actuales no son todos iguales.
La estandarizacin entre diferentes proveedores ha sido lenta en desarrollarse. Muchas
organizaciones son forzadas a escoger uno en lugar de otro, mientras que cada uno ofrece
sus propias y distintas ventajas.

1.3 Tecnologas para el desarrollo de aplicaciones web.

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 Planificacin de aplicaciones web

A menudo antes de empezar un proyecto no tenemos claro cul es el objetivo
del mismo o qu pretendemos alcanzar por eso esta pequea lista te puede
ayudar a la hora de planificar un proyecto.

Planificar una aplicacin web implica pensar y definir muchas cuestiones de

importancia:

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 tuviramos problemas de
escalabilidad, y s tuviramos 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 empieces 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 mayora 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
utilice 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 Cul 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 despus 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.