Unidad 1 Arquitectura.(Investigación de la Unidad)

1.1 Evolución de las aplicaciones web.

Con la introducción de Internet y del Web en concreto, se han abierto infinidad de posibilidades en cuanto al acceso a la información desde casi cualquier sitio. Esto representa un desafío a los desarrolladores de aplicaciones, ya que los avances en tecnología demandan cada vez aplicaciones más rápidas, ligeras y robustas que permitan utilizar el Web.

Afortunadamente, tenemos herramientas potentes para realizar esto, ya que han surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el Web, por ejemplo, sea un mero trámite. El único problema es decidir entre el conjunto de posibilidades la correcta para cada situación.

1.1.1  Web 1.0 

Ejemplo de web 1.0

La 'Web 1.0 (1991-2003) es la forma más básica que existe, con navegadores de sólo texto bastante rápidos. Después surgió el HTML que hizo las páginas web más agradables a la vista, así como los primeros navegadores visuales tales como IE, Netscape, explorer (en versiones antiguas), etc.

La Web 1.0 es de sólo lectura. El usuario no puede interactuar con el contenido de la página (nada de comentarios, respuestas, citas, etc), estando totalmente limitado a lo que el Webmaster sube a ésta.

Web 1.0 se refiere a un estado de la World Wide Web, y cualquier página web diseñada con un estilo anterior del fenómeno de la Web 2.0. Es en general un término que ha sido creado para describir la Web antes del impacto de la fiebre punto com en el 2001, que es visto por muchos como el momento en que el internet dio un giro.

Es la forma más fácil en el sentido del término Web 1.0 cuando es usada en relación a término Web 2.0, para comparar los dos y mostrar ejemplos de cada uno.

       

     CARACTERÍSTICAS

Diseño de elementos en la Web 1.0 Algunos elementos de diseño típicos de un sitio Web 1.0 incluyen:

*Páginas estáticas en vez de dinámicas por el usuario que la visita

*El uso de framesets o Marcos.

*Extensiones propias del HTML como el parpadeo y las marquesinas, etiquetas              introducidas durante la guerra de navegadores web.

*Libros de visitas online o guestbooks

Botones GIF, casi siempre a una resolución típica de 88x31 pixel en tamaño promocionando navegadores web u otros productos.

*formularios HTML enviados vía email. Un usuario llenaba un formulario y después de hacer clic se enviaba a través de un cliente de correo electrónico, con el problema que en el código se podía observar los detalles del envío del correo electrónico.

* No se podían adherir comentarios ni nada parecido

1.1.2  Web 2.0

El término Web 2.0 está asociado a aplicaciones web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración 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 donde los usuarios se limitan a la observación pasiva de los contenidos que se ha creado para ellos. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones web, los servicios de red social, los servicios de alojamientos de videos, las wikis, blogs y mashups.

 SERVICIOS ASOCIADOS

Para compartir en la Web 2.0 se utilizan una serie de herramientas, entre las que se pueden destacar:

•Blogs: Un blog es un espacio web personal en el que su autor (puede haber varios autores autorizados) puede escribir cronológicamente artículos, noticias...(con imágenes y enlaces), pero además es un espacio colaborativo donde los lectores también pueden escribir sus comentarios a cada uno de los artículos (entradas/post) que ha realizado el autor. La blogosfera es el conjunto de blogs que hay en internet.

•Wikis: En hawaiano "wiki" significa: rápido, informal. Una wiki es un espacio web corporativo, organizado mediante una estructura hipertextual de páginas (referenciadas en un menú lateral), donde varias personas elaboran contenidos de manera asíncrona. Basta pulsar el botón "editar" para acceder a los contenidos y modificarlos. Suelen mantener un archivo histórico de las versiones anteriores y facilitan la realización de copias de seguridad de los contenidos. Hay diversos servidores de wiki gratuitos.

•Entornos para compartir recursos: Todos estos entornos nos permiten almacenar recursos en Internet, compartirlos y visualizarlos cuando nos convenga desde Internet. Constituyen una inmensa fuente de recursos y lugares donde publicar materiales para su difusión mundial.

•Documentos: podemos subir nuestros documentos y compartirlos, embebiéndolos en un Blog o Wiki, enviándolos por correo.

•Videos: Al igual que los Documentos, anteriormente mencionados, se pueden "embeber" un video tomado de algún repositorio que lo permita, tal como YouTube.

•Presentaciones

•Fotos

•Plataformas educativas

•Aulas virtuales (síncronas)

•Redes Sociales

1.1.3  Web 3.0

Bases de Datos

Inteligencia Artificial

Web Semántica

3D

Bases de Datos

•Surgimiento de la “Data Web” con la tecnología SPARQL.

•SPARQL: Protoclo RDF Query Lenguage

Inteligencia Artificial

•Programas más avanzados e Inteligencia Humana:

•Extraen el Sentido

•Ordenan la Red.

•Establecen un patrón de conducta de interacción

Web Semántica

•Extensión del Sistema SPARQL e Inteligencia Artificial.

•Programas con el poder de razonar.

•Basado en descripciones lógicas, interconectar conceptos y datos en la red.

Web 3D

•Concepto de Espacios Tridimensionales.

•Creación de Avatars.

1.2 Arquitectura de las aplicaciones web.

La arquitectura tradicional de cliente/servidor también es conocida como arquitectura de dos capas. Requiere una interfaz de usuario que se instala y se ejecuta en una PC o estación de trabajo y envía solicitudes a un servidor para ejecutar operaciones complejas.

Por ejemplo, una estación de trabajo utilizada como cliente puede ejecutar una aplicación 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 ambiente de dos capas funciona adecuadamente. Las herramientas para el desarrollo con dos capas son robustas y ampliamente evaluadas.

Las técnicas de ingeniería de software de prototipo se emplean fácilmente. Las soluciones de dos capas trabajan bien en ambientes no dinámicos estables, pero no se ejecutan bien en organizaciones dinámicas.

Desventajas del sistema de dos capas:

Los ambientes de dos capas requieren control excesivo de las versiones y demandan esfuerzo de distribución de la aplicación cuando se les hacen cambios. Esto se debe al hecho de que la mayoría de la aplicación lógica existe en la estación de trabajo del cliente.

La seguridad del sistema en un diseño de dos capas es compleja y a menudo requiere administración de las bases de datos; esto es debido al número de dispositivos con acceso directo al amibente de esas bases de datos.

Las herramientas del cliente y de la base de datos, utilizadas en diseños de dos capas, constantemente están 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 diseño 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 búsqueda 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 presentación que incluye no sólo el navegador, sino tamién el servidor web que es el responsale de presentar los datos un formato adecuado.
• El segundo nivel está referido habitualmente a algún tipo de programa o script.
• Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecución. Una aplicación Web típica 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 aplicación: Navegador Web
• Capa 2 : Servidor de Aplicaciones: Apache, Servidor Tomcat con servlet’s
• 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 estación de trabajo, al servidor de capa intermedia, son más flexiles que en el diseño de dos capas, ya que la estación solo necesita transferir parámetros 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 código de la capa intermedia puede ser reutilizado por múltiples aplicaciones si está diseíado en formato modular.

La separación de roles en tres capas, hace más fácil reemplazar o modificar una capa sin afectar a los módulos restantes.

Desventajas de las Arquitecturas de Tres Capas y asadas en Web

Los ambientes de tres capas pueden incrementar el tráfico en la red y requiere más balance de carga u tolerancia a las fallas.

Los exploradores actuales no son todos iguales.

La estandarización 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 Tecnologías para el desarrollo de aplicaciones web.

Lenguaje de Programación Web

Los lenguajes de programación Web han ido surgiendo según las necesidades de las plataformas, intentando facilitar el trabajo a los desarrolladores de aplicaciones.

HTML

La información publicada en la Web debe ser mediante un lenguaje que sea entendido universalmente. El lenguaje utilizado por la World Wide Web es el HTML, actualmente el lenguaje hipermedia más aceptado a nivel mundial. Por tanto, es uno de los lenguajes de programación web más importante y uno de los más usados para la creación de documentos. El HyperText Markup Language (HTML) es un lenguaje de marcado que se diseñó con el objetivo de estructurar documentos y mostrarlos en forma de hipertexto. El mismo brinda la información correspondiente relacionada con el contenido a mostrar en cada fragmento de información, y permite establecer relaciones unidireccionales entre documentos. Los archivos pueden tener las extensiones (htm, html). Este lenguaje cumple con dos objetivos fundamentales para el diseño y visualización de un documento digital:

§  Organiza un documento en elementos lógicos, tales como: encabezado, párrafo, etc.

§  Define las operaciones tipográficas y las funciones que debe ejecutar un programa visualizador sobre dichos elementos.

JAVASCRIPT

JavaScript es un lenguaje de programación orientado a objetos. Es un lenguaje dinámico, las variables no necesitan ser introducidas antes de su uso y los tipos de variables se resuelven dinámicamente durante su ejecución. Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Fue creado por Brendan Eich en la empresa Netscape Communications. El código JavaScript que se encuentra dentro de las páginas web puede ser interpretado por todos los navegadores. Permite que las definiciones de funciones y otro tipo de código sean modificados mientras el programa se esté ejecutando. El modelo de ejecución de JavaScript se basa en la interpretación del código fuente. Es un lenguaje de alto nivel, multiplataforma y no necesita compilación. Está basado en objetos, admite la programación estructurada y maneja la mayoría de los eventos que se pueden producir sobre la página web. La mayoría de los navegadores en sus últimas versiones interpretan el código JavaScript integrado dentro de las páginas web.

Hojas de Estilo en Cascada (CSS)

Las Hojas de estilo en Cascada, en inglés Cascading Style Sheets (CSS), fueron diseñadas y desarrolladas por la World Wide Web Consortium (W3C). Una hoja de estilos CSS es el tipo de documento que utiliza un navegador Web para redefinir las propiedades de los distintos elementos y las etiquetas en el código HTML. Permite dar formato a los documentos de forma global. Proporciona al diseñador de páginas web definir un conjunto de ampliaciones HTML especiales y aplicarlas al documento. Provee la especificación e intercambio de los fondos para textos y documentos, así como sus tipos y tamaños de fuente. Las definiciones del formato de un documento se pueden colocar en archivos separados y aplicarlas a un grupo de documentos. Posibilitan además aplicar un formato modificado a documentos HTML ya existentes. Con los CSS se puede aplicar a un documento diferentes estilos de orígenes. Los CSS constituyen una herramienta poderosa para el diseño de documentos HTML, pues permiten modificar la representación del documento mediante la asignación de un nuevo estilo.

Lenguajes DBMS

En la estructura básica de un Sistema Manejador de Base de Datos se enuncian dos lenguajes que permiten trabajar sobre la base de datos.  Estos lenguajes estándar son:

• DDL (Data Definition language):  Lenguaje de Definición de Datos.  Por medio de este el DBMS identifica las descripciones de los elementos de los esquemas y almacena la descripción del esquema en el catálogo del DBMS.

Por medio de este el DBMS especifica el esquma conceptual e interno (Base de datos Almacenada).

• SDL (Store Definition language): Lenguaje de definición de almacenamiento.  Es utilizado por el DBMS para especificar el esquema interno que corresponde a la Base de Datos Almacenada.

• VDL (View Definition language): Lenguaje de Definición de Vistas.  Es utilizado por el DBMS para especificar las vistas del usuario y sus correspondiencias con el esquema conceptual.

En las Bases de Datos Relacionales, el SQL, representa una combinación de los anteriores.

• DML (Data Manipulation language): Lenguaje de Manipulación de Datos.  Permite la manipulación de las operaciones de Inserción, Eliminación y Modificación.

• Tipos de DML's:
• De alto Nivel o No por procedimientos: SQL.

De bajo Nivel o por procedimientos

1.4 Planificación de aplicaciones web.

A menudo antes de empezar un proyecto no tenemos claro cúal es el objetivo del mismo o qué pretendemos alcanzar por eso esta pequeña lista te puede ayudar a la hora de planificar un proyecto.
Planificar una aplicación 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 aún 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 planificación depende la dificultad en un futuro de realizar cambios en la plataforma que sostiene nuestra aplicación.

2. Documentación

Documenta todo lo que puedas tu aplicación en especial aquellas partes de la misma que hayan requerido un mayor tiempo de desarrollo, en un futuro cercano te librará de más de un quebradero de cabeza.

3. No empiezes por los pequeños detalles

A menudo es más sencillo plantearse el desarrollo de pequeños servicios cómo pueden ser los RSS o una galería de imágenes, pero es fundamental comenzar por lo que vendrá a ser la base de nuestra aplicación, de este modo podremos ir completando nuestra aplicación en un orden lógico, primero los cimientos.

4. Diseño de la interfaz

Esta entrada puede que te ayude en esta parte, es importante conseguir un buen diseño para nuestra interfaz, es importante conseguir un interfaz que se atractivo y útil para la gran mayoria de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle la mayor cantidad de información posible para que se llegue a sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una mala elección en la combinación de los colores que se integran en nuestra interfaz.

5. Evita construirte librerías o frameworks innecesarios

Muchas personas siempre sostienen que es mejor que cada desarrollador utilize sus propias librerías, pero la realidad es que en muchas ocasiones esto supone una gran pérdida de tiempo, es mejor buscar una librería o framework que se parezca lo más posible a lo deseado que desarrollarlo por ti mismo.

6. Ten un plan de proyecto

Asegúrate de que cada desarrollador que trabaje en el proyecto sepa qué es lo que debe de hacer y cuándo 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 ¿Cúal es el mejor lenguaje de programación?, la respuesta a menudo es depende de para que quieras utilizarlo, por eso asegúrate de escoger el lenguaje adecuado.

8. Evita las distracciones

Optimiza tu tiempo, cuando estés trabajando que nada te distraiga, ni llamadas telefónicas, ni clientes de mensajerías instantáneas, proponte un buen número de horas al día 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 “código sucio”, esta es una buena opción si lo que quieres es una demo de la aplicación funcionando pero ea actitud te traerá problemas en el futuro.

10. Plantéate los pasos a seguir despues del desarrollo

Ten en cuenta que está fase de desarrollo algún día deberá acabar, estudia con qué frecuencia se deberá actualizar y que se necesita para que este funcione

Bibliografia:

Mauricio. (22 de Febrero de 2013). appsdelweb. Obtenido de appsdelweb: http://appsdelweb.blogspot.mx/

Pacheco Velasco, E., & Jose. (11 de Noviembre de 2009). prograweb. Obtenido de prograweb: http://www.prograweb.com.mx/pweb/