Autor:

Carlos Alberto Mrquez Mrquez

Docente:

Irving Eyssautier Mndez

Grupo:

6TB

Tema:

Unidad 1

Arquitectura

Tabla de contenido
A. Introduccin ......................................................................................................... 3
1.1

Evolucin de las aplicaciones web ................................................................ 4

1.2

Arquitectura de las aplicaciones web ............................................................ 8

1.2.1

Modelo de dos Capas. ........................................................................... 10

1.2.2

Modelo de tres Capas. ......................................................................... 12

1.3

Tecnologas para el desarrollo de aplicaciones web ................................... 14

1.3.1

Tecnologas en la capa de Presentacin ................................................ 14

1.3.2

Tecnologas en la capa de Negocio ....................................................... 16

1.3.3

Tecnologas en la capa de Acceso a Datos............................................ 17

1.4

Planificacin de aplicaciones web ............................................................... 19

B. Conclusin ......................................................................................................... 26
C. Referencias ......................................................................................................... 27

Ilustraciones
FIG. 1 SISTEMA WEB..................................................................................................... 8
FIG. 2 MODELO 2 CAPAS ............................................................................................. 11
FIG. 3 MODELO 3 CAPAS ............................................................................................ 13
FIG. 4 DIBUJO DE LA APLICACIN ............................................................................... 20
FIG. 5 VERSIN WEB DE EBAY .................................................................................... 21
FIG. 6 VERSIN MVIL DE GOOGLE DOCS. .................................................................. 22
FIG. 7 VERSIN MVIL DE EBAY................................................................................. 22
FIG. 8 VERSIN WEB DE GOOGLE DOCS. .................................................................... 22

A. Introduccin

La programacin web es un trmino adecuado para describir el proceso general que

cubre el diseo y la creacin de un sitio web.

En tiempo atrs, los sitios no eran muy complejos, inclusive podramos hablar que
eran textos planos con imgenes sin vida, actualmente las paginas han ido
evolucionando con el paso del tiempo y con la adquisicin de nuevas necesidades,
tano por parte de las empresas como de las personas.

Con la revolucin que se dio en internet de generar pginas con ms vistas y ms

funciones, los textos planos dejaron de ser una va de comunicacin web, ahora las
aplicaciones web (as las podemos llamar en la actualidad) son complejas a partir de
que el e-commerce ha tenido auge en la web, pues ahora las paginas son autnticos
programas diseados para adquirir datos de un usuario, compra-venta de productos
en lnea, pagos de servicio desde la web, y consultas avanzadas que dan de mucho
de qu hablar.
Ahora las personas encargadas de generar un pgina web se tienen que preocupar por
no hacer solo una pgina con texto e imgenes, sino tambin con campos, quizs que
se conecte a una base de datos, una pgina dinmica en donde el usuario final
interacte con sta, cabe mencionar que ahora las paginas son de necesidad si no
general aun, pero que han ido ganando terreno conforme la gente va encontrando en
ellas practicidad

1.1 Evolucin de las aplicaciones web

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> y <marquee>, etiquetas

introducidas durante la guerra de navegadores web.

Libros de visitas online o guestbooks

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.

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
4

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

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.
5

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

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

En la Web 4 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.
(Mauricio, 2011)

1.2

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.

fig. 1 Sistema web

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.
1.2.1 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.

10

fig. 2 modelo 2 capas

11

1.2.2 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

12

fig. 3 Modelo 3 capas

(Instituto Tecnologico de Matehuala, s.f.)

13

1.3 Tecnologas para el desarrollo de aplicaciones web

1.3.1 Tecnologas en la capa de Presentacin
1.3.1.1 Java Server Faces (JSF)
La tecnologa Java Server Faces es un marco de desarrollo de los componentes de la
interfaz de usuario, vlido para todas aquellas aplicaciones web basadas en la
tecnologa Java.
1.3.1.2 Richfaces
RichFaces es un marco de cdigo abierto que aade a las aplicaciones capacidad de
Ajax en JSF, sin recurrir a Java Script. RichFaces aprovecha el framework Java
Server Faces, incluyendo su ciclo de vida, la validacin, los medios de conversin y
la gestin de los recursos estticos y dinmicos. Los componentes de RichFaces con
soporte Ajax y aspecto altamente personalizable pueden ser fcilmente incorporados
a aplicaciones JSF.
1.3.1.3 Ajax
Es el acrnimo para Asynchronous Java Script + XML y el concepto es: Cargar y
renderizar una pgina, luego mantenerse en esa pgina mientras scripts y rutinas van
al servidor buscando, en background, los datos que son usados para actualizar la
pgina solo re-renderizando la pgina y mostrando u ocultando porciones de la
misma. [2]
AJAX incorpora:

Presentacin basada en estndares usando XHTML y CSS.

Exhibicin e interaccin dinmicas usando el Document Object Model.

Intercambio y manipulacin de datos usando XML y XSLT.

Recuperacin de datos asincrnica usando XML Http Request.

14

1.3.1.4 Ajax4Jsf
Es una librera open source que se integra totalmente en la arquitectura de JSF y
extiende la funcionalidad de sus etiquetas dotndolas con tecnologa Ajax de forma
limpia y sin aadir cdigo Java Script. Mediante este framework se puede variar el
ciclo de vida de una peticin JSF, recargar determinados componentes de la pgina
sin necesidad de recargarla por completo, realizar peticiones al servidor automticas,
control de cualquier evento de usuario, etc. En definitiva Ajax4jsf permite dotar a la
aplicacin JSF de contenido mucho ms profesional con muy poco esfuerzo. [3]
1.3.1.5 Facelets
Es un framework simplificado de presentacin, en donde es posible disear de forma
libre una pgina web y luego asociarle los componentes JSF especficos. Aporta
mayor libertad al diseador y mejora los informes de errores que tiene JSF. Permite
que JSP (Java Server Pages) y JSF (Java Server Faces) puedan funcionar
conjuntamente en una misma aplicacin web. Estos no se complementan
naturalmente. JSP procesa los elementos de la pgina de arriba a abajo, mientras que
JSF dicta su propio re-rendering (ya que su ciclo de vida est dividido en fases
marcadas). Facelets llena este vaco entre JSP y JSF, siendo una tecnologa centrada
en crear rboles de componentes y estar relacionado con el complejo ciclo de vida
JSF.
Las principales ventajas de Facelets son:

Construccin de interfaces basadas en plantillas.

Rpida creacin de componentes por composicin.

Fcil creacin de funciones y libreras de componentes.

Facelets provee un proceso de compilacin ms rpido que JSP.

Provee templating, lo cual implica reutilizacin de cdigo, simplificacin de

desarrollo y facilidad en el mantenimiento de grandes aplicaciones.
15

1.3.1.6 Lenguaje de Marcado de Hipertexto Extensible (XHTML)

Es una versin ms estricta y limpia de HTML, que nace con el objetivo de remplazar
a HTML ante su limitacin de uso con las cada vez ms abundantes herramientas
basadas en XML. XHTML extiende HTML 4.0 combinando la sintaxis de HTML,
diseado para mostrar datos, con la de XML, diseado para describir los datos. [4]
1.3.1.7 Extensible Markup Language (XML)
No es solo un lenguaje, es una forma de especificar lenguajes, de ah el trmino de
extensible. Es un leguaje de etiquetas no predefinidas previamente, es decir, el
programador es el que las crea en cada caso. El XML ahorra tiempos de desarrollo y
proporciona ventajas, dotando a webs y a aplicaciones de una forma realmente
potente de guardar la informacin. Se ha convertido en un formato universal para el
intercambio de informacin estructurada entre diferentes plataformas. En la
actualidad permite la compatibilidad entre sistemas para compartir la informacin.
1.3.1.8 Java Script
Es un lenguaje de programacin interpretado, es decir, no requiere de compilacin
ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados
de interpretar estos cdigos. Tiene la ventaja de ser incorporado en cualquier pgina
web, puede ser ejecutado sin la necesidad de instalar otro programa para ser
visualizado. Tiene como principal caracterstica ser un lenguaje independiente de la
plataforma.
1.3.2 Tecnologas en la capa de Negocio
1.3.2.1 Servidor de Aplicaciones
JBoss es un servidor de aplicaciones para Java. Es muy reconocido por ser de los
primeros servidores de aplicacin empresarial gratuito y open source. Al estar basado
en Java, puede ser utilizado en cualquier sistema operativo que lo soporte, ofreciendo

16

una plataforma de alto rendimiento para aplicaciones java, aplicaciones Web y

Portales.
1.3.2.2 Enterprise Java Beans (EJB)
Es una plataforma para construir aplicaciones de negocio portables, escalables, y
reutilizables utilizando el lenguaje de programacin java. Permite a los
desarrolladores enfocarse en la lgica del negocio sin tener que emplear tiempo en
la conformacin del cdigo de la infraestructura. Desde el punto de vista del
desarrollador es un pedazo de cdigo java que se ejecuta en un entorno especializado
denominado contenedor EJB que proporciona un conjunto de servicios. El servicio
de persistencia es proporcionado por un framework especializado denominado
proveedor de persistencia.
1.3.2.3 Plain Old Java Object (POJO"s)
Son las siglas utilizadas por programadores java para enfatizar el uso de clases
simples y que no dependen de un framework en especial.
1.3.3 Tecnologas en la capa de Acceso a Datos
1.3.3.1 Java Persistence API (JPA)
El Java Persistence API fue desarrollado por el grupo de expertos de EJB 3.0, aunque
su uso no se limita a los componentes software EJB. Tambin puede utilizarse
directamente en aplicaciones web y aplicaciones clientes; incluso fuera de la
plataforma Java EE.
En su definicin, se han combinado ideas y conceptos de los principales frameworks
de persistencia como Hibernate, Toplink y JDO y de las versiones anteriores de EJB.
Todos estos cuentan actualmente con una implementacin JPA.

17

1.3.3.2 Framework Hibernate

Hibernate es una capa de persistencia objeto/relacional y un generador de sentencias
SQL. Permite disear objetos persistentes que podrn incluir polimorfismo,
relaciones, colecciones, y un gran nmero de tipos de datos. De una manera muy
rpida y optimizada se puede generar bases de datos en cualquiera de los entornos
soportados: Oracle, DB2, MySql, etc. Y lo ms importante de todo, es open source,
lo que supone, entre otras cosas, que no se tiene que pagar nada por adquirirlo.
Hibernate ofrece tambin un lenguaje de consulta de datos llamado HQL (Hibernate
Query Language). Puede ser usado para desarrollar y distribuir aplicaciones de forma
gratuita. Es utilizado en las aplicaciones Java EE.
1.3.3.3 JBoss Seam
JBoss Seam es una nueva y poderosa aplicacin para la construccin de la prxima
generacin de aplicaciones Web 2.0 de la unificacin y la integracin de tecnologas,
como Java Script asncrono y XML (AJAX), Java Server Faces (JSF), Enterprise
Java Beans (EJB3), Java Portlets y Business Process Management (BPM).
Es un framework que integra y unifica los distintos estndares de la plataforma Java
EE, pudiendo trabajar con todos ellos siguiendo el mismo modelo de programacin.
Ha sido diseado intentado simplificar al mximo el desarrollo de aplicaciones,
basando el diseo en POJOs con anotaciones. Estos componentes se usan desde la
capa de persistencia hasta la de presentacin, poniendo todas las capas en
comunicacin directa. El ncleo principal de Seam est formado por las
especificaciones EJB3 y JSF.
(Daz., s.f.)

18

1.4 Planificacin de aplicaciones web

Si se tienen un idea sobre alguna aplicacin web, primero se tiene que planificar
cuidadosamente los pasos a seguir. Esta parte no puede ser omitida, pues de ello
depender la calidad del software as como los menos errores posibles en nuestra
aplicacin o modificacin de alguna mas.
Una declaracin de intensiones
Para empezar se debe anotar A quien esta dirigida la aplicacin, Cul es su
funcin? Y Cul es el pblico objetivo de la aplicacion?, de la forma mas precisa
posible, y se debe pensar en el contexto/situacin en la que el pblico utilizara al
aplicacin. Ejemplo:
Funcionalidad.
Obtener la ubicacin de un dispositivo con la mayor precisin posible.
Ingresar la ubicacin en un mapa de google.
Grupo de usuarios.
Desarrolladores que quieran aprender acerca de aplicaiones web abiertas y su
desarrollo para ser usada probablemente en una oficina o en un tren.
Cualquier persona que quiera saber cmo funciona, o para usarla al aire libre.
Lo ideal sera que se hiciera la aplicacin lo ms sencillo posible, centrarse en
conseguir que haga una cosa o un par de cosas, estrechamente relacionadas. Si se
tienen muchas ideas que desea alcanzar, es posible que desee dividirlas en diferentes
aplicaciones. Si la aplicacin requiere de experiencias diferentes para cada
plataforma, es probable que necesite tener listas separadas de aplicaciones para
escritorio y mviles (o incluso Tablet o TV).

19

A continuacin, intente escribir un resumen del uso de la aplicacin, que atraer a

las personas a descargarlo y probarlo. Si usted puede resumirlo en una frase,
entonces su idea es probablemente una buena opcin para una aplicacin!. Ejemplo
Para "Location Finder", escribimos:
Location Finder utiliza la geolocalizacin para saber dnde te encuentras, y
muestra un mapa de los alrededores, haciendo uso de los mapas de Google.
Pero quizs para una aplicacin solamente destinada a los usuarios finales seria as:
Location finder Localiza tu ubicacin y muestra lo que hay alrededor.
Primer dibujo de la aplicacin
Una vez que haya decidido sobre la intencin y el objetivo del pblico al usar su
aplicacin, siempre es una buena idea empezar con papel o bocetos, intente dibujar
lo que la aplicacin va a mostrar, y vea como el usuario usara su aplicacin.
Probablemente querr hacer un conjunto separado de dibujos para escritorio, mvil,
Tablet, TV, etc, si su lista de funcionalidades as lo requieren.
Siempre, incluya notas sobre lo que se necesita sean: grficos, funciones, etc, en cada
etapa, ya que al llegar a las etapas de diseo y desarrollo, sera necesario incluirlas y
as sera menos propenso al olvido de interesantes funcionalidades. Para "Location
Finder", hice solo un dibujo por lo sencillo de la aplicacin:

fig. 4 dibujo de la aplicacin

20

Para una aplicacin compleja dibujemos las diferentes reas de la aplicacin, intente
representar las diferentes reas de trabajo, tambin intentemos pensar en lo que busca
el usuario con su aplicacin.
Puede cualquier programa convertir una pgina en una aplicacin abierta?
Toda pgina o documento se puede convertir en una aplicacin Web abierta, pero en
algunos casos tales como procesadores de texto, o complicados sistemas de ventas
en lnea, no se puede convertir fcilmente, para estos casos es necesario hacer una
versin diferente para mviles, lo mejor es hacer algo parecido a lo que hizo el
servicio de ventas en lnea eBay, como podemos ver en su pgina web de escritorio
contiene complicados sistemas que seran un verdadero caos en un mvil, lo que hizo
eBay es dividir toda la informacin y hacer que sea lo ms fcil de ver, logro hacer
que deslizando hacia abajo la pantalla se vea el resto de la informacin, adems eBay
puso lo ms relevante arriba y las funcionalidades menos utilizadas abajo, o ms
escondidas, intento hacer las mnimas interacciones con el teclado.

fig. 5 versin web de eBay

21

fig. 7 versin mvil de eBay

fig. 6 versin mvil de google Docs.

Google Docs. Es otro interesante ejemplo, en su versin de escritorio goza de

funcionalidades que en un mvil seran un verdadero caos, lo que hizo fue dejar solo
el visualizador de texto, en una interfaz simple, bonita y amigable.

fig. 8 versin Web de google Docs.

22

En esta etapa ya se debe pensar en las diferentes versiones de la aplicacin, para

mviles, tablets, y escritorio, que se incluir y que no, En la mayora de las
situaciones solo necesitaras fcilmente convertir tu web, o una web en una
aplicacin, en otras situaciones tendrs que disear un entorno totalmente nuevo para
mviles, o tablets y a veces ser necesario crear una aplicacin especialmente para
su uso en una determinada plataforma.
Si vas a hacer un entorno totalmente diferente al clsico, preocpate de dar la
opcin a los usuarios de cambiar entre el clsico y tu entorno, no creas que a todos
los usuarios les gustara lo que tu hagas.
(Mozilla Developer Network and individual contributors, 2015)
Pensar sobre las tecnologas que se usaran.
Muchas personas creen que llenar su aplicacin de funcionalidades la hace cada vez
mejor, y probablemente sea as, pero no olvides que el diseo y separar los
contenidos, es muy importante, para que tu aplicacin llegue a ser popular, si
integraras tecnologas de ltima generacin, preocpate de que para el usuario sea
fcil usar la aplicacin.
En general lo ms importante es la funcionalidad, el diseo, y los requisitos de la
aplicacin, adems de integrar nuevas y alucinantes tecnologas. Ejemplos de
preguntas que te ayudaran:
Es necesario el almacenamiento offline? si tu aplicacin necesita conectarse a
internet frecuentemente, para guardar datos, lo ms probable es que necesites una
conexin cliente-servidor-base de datos. Si tu aplicacin necesita guardar los datos
en el dispositivo, lo mejor sera que se instale en el sistema. Si necesitaras que la
informacin este en el mvil y en la red, tu necesitaras un mecanismo especial
cliente-servicio de almacenamiento en lnea, tales como IndexedDB o localStorage.

23

(La informacin proporcionada en estas lneas es bsica, se necesitara un grado

mayor de conocimiento, para la implementacin de su aplicacin)
Necesitas reproducir o manipular videos, fotos etc.? Probablemente necesitemoas
funciones de HTML5 tales como <canvas>, <video>, o <audio>.
Para obtener informacin acerca de lo que sucede alrededor del dispositivo
necesitaras API's. Tales como: API del estado de la batera, API del sensor de
proximidad, o API de la orientacin del dispositivo.
Plan de pruebas
Quizs esto se considere obvio pero es una de las partes ms importantes de un
proyecto, pues el plan de pruebas permite la correccin de errores antes de la
liberacin de la aplicacin al pblico, recuerda probar cada caracterstica de tu
aplicacin en periodos cortos de tiempo, para as no quedar con muchos errores,
tiempo y dinero desperdiciado. Un resumen del plan de pruebas:

Crea una versin bsica de tu aplicacin y entrgasela a tus familiares, amigos,

colegas, que ellos te den la primera impresin y te digan si les gusta o no, y si
tienen alguna idea para agregar a la aplicacin o si hay un error, tambin
pregntales sobre el diseo, si est bien si le falta algo, si es muy aburrido, o
si tiene mucho color, todo esto te servir para solucionar los primero
problemas.

Comparte tus dibujos, y haz preguntas tales como, le falta algo?, qu les
gustara que incluya en mi aplicacin?, qu diseo les gusta ms?

Despus de esto es una buena idea compartir tu aplicacin con personas fuera
del equipo de diseo, desconocidos, y que te digan realmente lo que es tu
aplicacin para ellos, y si la descargaran o no, por qu si y por qu no.

Haz diversas pruebas con tu aplicacin, hazla funcionar bajo estrs (varias
aplicaciones al mismo tiempo) y hazla funcionar en diversos dispositivos,

24

puede que solo en tu dispositivo funcione correctamente, tambin pruebala en

momentos de escaza memoria, y en navegadores antiguos, si quieres hacer una
aplicacin geneal, preocupate de que funcione en todos los dispositivos.

Antes de enviar la aplicacin al pblico en general, prueba todas las funciones

nuevamente, corrige todos los errores restantes, y termina de solucionar los
problemas, aunque despus actualizes la aplicacin a una nueva versin, no
puedes asegurarte de que todos la actualizaran.

25

B. Conclusin

La evolucin de las aplicaciones web ha ido incrementando con el paso del tiempo y
de las necesidades de la personas.
Quizs, ahora sea el motivo por el cual las personas exigen ms de las aplicaciones
que ven en internet, pues de manera tajante y dura las personas no visitan unapgina
de texto plano, si la pgina no logra lo que en resumen proyecta no sera de gran valor
tenerla activada, pues los visitantes harn caso omiso de sta.
Por ello los expertos en el rea, estudiantes en tecnologas de la informacin y dems
personas involucradas en el mbito de desarrollo web, debemos estar conscientes de
mejorar da con da, ampliar los conocimientos, todo

aparitr de conocer las

estructuras de las aplicaciones web, si cimentamos bien esos conocimientos,

podremos evolucionar con la tecnologa a la par.
Es importante tener en cuenta nuestra planificacin, de ello depende la calidad y la
utilidad de nuestra pgina web.

26

C. Referencias

Daz., I. Y. (s.f.). Monografias. Obtenido de

http://www.monografias.com/trabajos98/tecnologias-y-herramientasdesarrollo-aplicaciones-web-java/tecnologias-y-herramientas-desarrolloaplicaciones-web-java.shtml#tecnologia
Instituto Tecnologico de Matehuala. (s.f.). Programacion web. Obtenido de
https://programacionwebisc.wordpress.com/2-1-arquitectura-de-lasaplicaciones-web/
Mauricio. (julio de 2011). Blogspot.mx. Obtenido de Desarrollo de Aplicaciones
Web: http://appsdelweb.blogspot.mx/2013/02/11-evolucion-de-lasaplicaciones-web.html
Mozilla Developer Network and individual contributors. (2015). Centro de
aplicaciones. Obtenido de
https://developer.mozilla.org/es/Apps/Design/Planning_your_app

27