1.1 U1 ARQUITECTURA INVESTIGACIÓN

         

     

INSTITUTO TECNOLÓGICO DE VILLAHERMOSA 

               

           

TIERRA, TIEMPO, TRABAJO Y TECNOLOGÍA

INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN Y LAS COMUNICACIONES

- PROGRAMACIÓN WEB–

U1 ARQUITECTURA

PRESENTA:

TRINIDAD DEL CARMEN BAEZA DIAZ

                                                  VILLAHERMOSA, TABASCO, FEBRERO 2016.

1.1 Evolución de las Aplicaciones web

La programación web es un término adecuado para describir el proceso general que engloba el diseño y la creación de un sitio web.

La 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 ya que 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.

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 visitas

·                     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 resolución típica de 88x31 pixels 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 podian adherir comentarios ni nada parecido

·                     Todas sus páginas se creaban de forma fija y muy pocas veces se actualizaban.

·                     No se trata de una nueva versión, sino de una nueva forma de ver las cosas.

La web 2.0

El término Web 2.0 comprende aquellos sitios 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. 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 estáticos donde los usuarios se limitan a la observación pasiva de los contenidos que se han creado para ellos.

Servicios asociados:

·                     Blogs: Un blog es un espacio web personal en el que su autor puede escribir cronológicamente artículos, noticias...(con imágenes y enlaces).

·                     Wikis: Una wiki es un espacio web corporativo, organizado mediante una estructura hipertextual de páginas donde varias personas elaboran contenidos de manera asíncrona. 

·                     Redes sociales: Sitios web donde cada usuario tiene una página 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, según 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 vídeos subidos y compartidos por los usuarios.
• Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos también tenemos la oportunidad de organizar las fotos con etiquetas, separándolas 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 (síncronas)
• Encuestas en línea

La web 3.0

Es una expresión que se utiliza para describir la evolución del uso y la interacción de las personas en internet a través de diferentes formas entre los que se incluyen la transformación de la red en una base de datos, un movimiento social hacia crear contenidos accesibles por múltiples aplicaciones non-browser, el empuje de las tecnologías de inteligencia artificial, la web semántica, la Web Geoespacial o la Web 3D.

Entre sus innovaciones destacan:

·                     Bases de datos

·                     Inteligencia artificial

·                     Web semántica y SOA

·                     Evolución al 3D

La web 4.0

las aplicaciones ya no estarán en nuestras PC’s, estarán en la internet y por ende en todos lados.

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

·         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…

Arquitectura de dos capas

La WWW está basado en el modelo Cliente / Servidor. El Cliente principal en el WWW son los browsers o navegadores que solicitan información al Servidor.
El Servidor son los Servidores Web que proporcionan documentos y contenidos multimedia a los clientes através de la red.
Esta arquitectura consiste básicamente en un cliente que realiza peticiones a otro programa (el servidor) que le da respuesta.

Ventajas:

1.    Centralizacion del control

2.    Escalabilidad

3.    Facil mantenimiento

Desventajas:

4.    Congestión del trafico.

5.    El cliente no dispone de los recursos que pueden existir en el servidor

Al conectarnos a internet estamos navegando en 3 capas.
Al abrir un formulario web de inscripción (capa de presentación)
Después de enviar la información esta es verificada (capa de negocios).
Finalmente la información es grabada en una base de datos (capa de datos).

La WEB

Ø  Base de datos

Ø  Tablas

Ø  Procedimientos almacenados

Ø  Componentes de datos

Capa de Datos

Ø  ADO .NET

Ø  SQL SERVER 20000

Ø  Procedimientos almacenados

Ø  Componentes (c#, vb, c++, j#)

Ø  XML

Capa de Negocio

Ø  Reglas del negocios

Ø  Validaciones

Ø  Cálculos

Ø  Flujos y procesos

Capa de Negocios Microsoft

Ø  Lenguajes de Componentes (c#, vb, c++, j#)

Ø  Componentes Locales

Ø  Componentes Web (Servicios web)

Ø  Comunicación entre componentes utilizando el SOAP y XML

Capa de presentación

Ø  Formularios

Ø  Informes

Ø  Respuestas al usuario

3.1 Planificación de Proyectos Web

No importa cual sea el tamaño del proyecto, es fundamental crear un Plan de Proyecto que capture la toma de decisiones, y que, cuando el proyecto sea lanzado, sirva como archivo documental de todos los procesos estratégicos inherentes al proyecto.

1. Definición del Proyecto

Descubrimiento

• Entrevistas a las partes interesadas (clientes, proveedores, etc.)

• Análisis de la competencia

• Estudio de los Perfiles de audiencia o Investigación de la audiencia/mercado: Perfiles de las audiencias principales y secundarias o Capacidades y Restricciones de la audiencia: habilidades, expectación, necesidades típicas, requerimientos de navegador/plataforma, etc.

 Análisis

 • Finalidad última del site

• Funcionalidades y contenidos necesarios en el producto final

• Capacidades internas de la empresa: recursos financieros y recursos de personal (equipo)

Estrategia

 • Objetivos de negocio: primarios y secundarios

• Estrategia de comunicación: tono y estilo (resumidos en un briefing creativo)

• Métricas de éxito

• Plan de Marketing

• Alcance: decidir qué hacer ahora y qué puede esperar para una segunda fase

Plan de Proyecto (Borrador)

 • Resumen del Proyecto

• Estrategia

• Audiencia

• Requerimientos

o Funcionales/Interactivos

o Contenidos o Visuales

• Alcance

• Métricas de éxito

• Marketing

• Mantenimiento y soporte posterior

• Desarrollo futuro

• Equipo y roles

• Relación con el cliente (gestión de la cuenta)

• Ciclo de aprobación

• Presupuesto

• Timming

Entregables en la fase de Definición del Proyecto

– Para un proyecto pequeño: Plan de Proyecto

– Para un proyecto grande: Plan de Proyecto, Briefing Creativo y Plan de Marketing

2. Diseño Estructural

• Inventario del contenido existente: textos, imagines, vídeos, incluyendo fuentes que no provengan de la web (libros, fotografías, etc…)

• Contenido que tenga que ser creado o editado (imágenes, textos, traducciones, vídeos, etc…)

• Responsabilidades de autoría y edición (equipo: asignación de recursos)

• Plan de mantenimiento de contenidos

Definición Funcional

 • Requisitos Funcionales

o Planificación de usuario

• Requerimientos de tecnología

o Tecnologías a emplear

o Servidor y Hosting

o Desarrollo e integración de aplicaciones (tanto propias como de terceros)

o Integración de datos (tanto propios como de terceros)

o Relaciones y responsabilidades con proveedores y/o terceros

o Plan de pruebas: proceso de detección de errores (bug tracking) y proceso       de resolución de errores (bug fixing)

o Desarrollo o mantenimiento en curso

• Requerimientos de planificación e integración

o Integración de Marketing: marketing mediante via postal, email, teléfono u otros

medios

o Planificación del Back-office e integración de éste con la base de datos

• Requisitos de Soporte

o Plan de soporte al usuario final

o Formación o contratación de personal interno

o Mantenimiento del site en curso

• Responsabilidades internas

• Responsabilidades de los Proveedores

Diagramas a nivel de Site y de Página

• Arquitectura de la Información

• Mapa del Site

• Wireframes: representación esquemática de las páginas

• Convenciones de Nombres y Etiquetas (Nomenclaturas)

Entregables de esta fase de Diseño Estructural

– Para proyectos pequeños: Diagrama de Arquitectura de Información, Wireframes

– Para proyectos grandes: Diagrama de Arquitectura de Información, Wireframes,

Especificaciones Funcionales, Especificaciones Técnicas, Plan de Pruebas, Plan de

Soporte

– Cuando se requiera mantener relaciones con proveedores: Contrato con el proveedor, Contrato de Aceptación del Servicio, Licenciamiento, Contrato de Confidencialidad

Pruebas del Diseño Estructural y Finalización de esta fase

– Revisión de los wireframes con las partes implicadas (cliente, etc.)

– Comprobación de los wireframes con 3-5 usuarios

 3. Recopilación y Creación de Contenidos

• Creación y edición de contenidos de acuerdo con la arquitectura de información del site y de los diagramas de las páginas; para reutilización de los contenidos es recomendable que se preparen directamente para la web

• Determinación del origen de las fotografías, vídeos e ilustraciones

Revisión de los Contenidos y Finalización de esta fase

– Aceptación de los contenidos mediante un ciclo de aprobación de los mismos

4. Diseño Visual

Diseño Gráfico del Site

• Aplicación de la marca e identidad visual

• Fotografía, Vídeo e Ilustración

• Obtención de los Componentes de diseño

• Prototipo de baja resolución

Entregables de esta fase de Diseño Gráfico del Site

– Para un proyecto pequeño: Componentes de diseño

– Para un proyecto grande: Componentes de diseño, Guía de estilo, Prototipo interactivo de las secciones clave del site

Revisión del Diseño y Finalización de esta fase

– Aceptación del diseño mediante un ciclo de aprobación del mismo

– Comprobación del diseño con 3-5 usuarios

5. Producción

 • Instalación y configuración del Servidor y del Hosting

• Desarrollo de los datos y/o de la base de datos

• Desarrollo de la aplicación

• Desarrollo y/o Integración del sistema de gestión de contenidos (CMS)

• Diseño y desarrollo de las páginas y plantillas: HTML, CSS, JavaScript (y/o otros scripts cliente a nivel de página)

• Diseño de elementos reutilizables: gráficos, navegación, META tags, etc.

• Pruebas de Control de Calidad

Construcción del Site

• Asignación de contenidos de prueba

• Aplicación de estilos

• Integración de datos, aplicaciones u otras funcionalidades

• Almacenamiento en el servidor de desarrollo (para pruebas)

Pruebas de Calidad

 • Prueba de los contenidos y revisión de los mismos: comprobación de enlaces, revisión de textos e imágenes, etc.

• Pruebas funcionales: pruebas sobre la aplicación y sobre elementos interactivos

• Pruebas de integración

• Pruebas de navegación

• Planificación final del proceso de calidad

• Pruebas en los distintos navegadores

Revisión

 • Revisión por parte de las partes implicadas (clientes, etc.) y aprobaciones finales.

6. Lanzamiento

 Puesta en Marcha

 • Lanzamiento previo con base de datos con pocos usuarios; lanzamiento progresivo con la base de datos completa

• Marketing sobre el site

• Posicionamiento del site (SEP)

• Soporte de usuarios

Mantenimiento

• Puesta del site en manos del equipo de mantenimiento

• Métricas sobre el site: recuperación de datos (informes), reportes y monitorización

• Establecimiento como site inicial o realización de ajustes en la planificación

 

Tecnologíaspara el desarrollo de aplicaciones web

 

Tecnologías en la capa de Presentación

ü  Java Server Faces (JSF): La tecnología Java Server Faces es un marco de desarrollo de los componentes de la interfaz de usuario, válido para todas aquellas aplicaciones web basadas en la tecnología Java.

ü  Richfaces: RichFaces es un marco de código abierto que añade 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 validación, los medios de conversión y la gestión de los recursos estáticos y dinámicos. Los componentes de RichFaces con soporte Ajax y aspecto altamente personalizable pueden ser fácilmente incorporados a aplicaciones JSF.

ü  Ajax: Es el acrónimo para Asynchronous Java Script + XML y el concepto es: Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en background, los datos que son usados para actualizar la página solo re-renderizando la página y mostrando u ocultando porciones de la misma.

AJAX incorpora:

ü  Presentación basada en estándares usando XHTML y CSS.

ü  Exhibición e interacción dinámicas usando el Document Object Model.

ü  Intercambio y manipulación de datos usando XML y XSLT.

ü  Recuperación de datos asincrónica usando XML Http Request.

ü  Ajax4Jsf: Es una librería open source que se integra totalmente en la arquitectura de JSF y extiende la funcionalidad de sus etiquetas dotándolas con tecnología Ajax de forma limpia y sin añadir código Java Script. Mediante este framework se puede variar el ciclo de vida de una petición JSF, recargar determinados componentes de la página sin necesidad de recargarla por completo, realizar peticiones al servidor automáticas, control de cualquier evento de usuario, etc. En definitiva Ajax4jsf permite dotar a la aplicación JSF de contenido mucho más profesional con muy poco esfuerzo.

ü  Facelets: Es un framework simplificado de presentación, en donde es posible diseñar de forma libre una página web y luego asociarle los componentes JSF específicos. Aporta mayor libertad al diseñador 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 aplicación web. Estos no se complementan naturalmente. JSP procesa los elementos de la página 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 vacío entre JSP y JSF, siendo una tecnología centrada en crear árboles de componentes y estar relacionado con el complejo ciclo de vida JSF.

ü  Extensible Markup Language (XML): No es solo un lenguaje, es una forma de especificar lenguajes, de ahí el término 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 información. Se ha convertido en un formato universal para el intercambio de información estructurada entre diferentes plataformas. En la actualidad permite la compatibilidad entre sistemas para compartir la información.

ü  Java Script: Es un lenguaje de programación interpretado, es decir, no requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos códigos. Tiene la ventaja de ser incorporado en cualquier página web, puede ser ejecutado sin la necesidad de instalar otro programa para ser visualizado. Tiene como principal característica ser un lenguaje independiente de la plataforma.

Tecnologías en la capa de Negocio

ü  Servidor de Aplicaciones: JBoss es un servidor de aplicaciones para Java. Es muy reconocido por ser de los primeros servidores de aplicación empresarial gratuito y open source. Al estar basado en Java, puede ser utilizado en cualquier sistema operativo que lo soporte, ofreciendo una plataforma de alto rendimiento para aplicaciones java, aplicaciones Web y Portales.

ü  Enterprise Java Beans (EJB): Es una plataforma para construir aplicaciones de negocio portables, escalables, y reutilizables utilizando el lenguaje de programación java. Permite a los desarrolladores enfocarse en la lógica del negocio sin tener que emplear tiempo en la conformación del código de la infraestructura. Desde el punto de vista del desarrollador es un pedazo de código 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.

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

Tecnologías en la capa de Acceso a Datos

ü  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. También puede utilizarse directamente en aplicaciones web y aplicaciones clientes; incluso fuera de la plataforma Java EE.

ü  Framework Hibernate: Hibernate es una capa de persistencia objeto/relacional y un generador de sentencias SQL. Permite diseñar objetos persistentes que podrán incluir polimorfismo, relaciones, colecciones, y un gran número de tipos de datos. De una manera muy rápida y optimizada se puede generar bases de datos en cualquiera de los entornos soportados: Oracle, DB2, MySql, etc. Y lo más importante de todo, es open source, lo que supone, entre otras cosas, que no se tiene que pagar nada por adquirirlo.

Hibernate ofrece también 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.

ü  JBoss Seam: JBoss Seam es una nueva y poderosa aplicación para la construcción de la próxima generación de aplicaciones Web 2.0 de la unificación y la integración de tecnologías, como Java Script asíncrono y XML (AJAX), Java Server Faces (JSF), Enterprise Java Beans (EJB3), Java Portlets y Business Process Management (BPM).

Herramientas

o    Eclipse Ganymede: Es un entorno integrado (IDE) para desarrollo de aplicaciones con java. Está soportado por IBM, es un proyecto open source, multiplataforma para desarrollar lo que el proyecto llama "Aplicaciones de Cliente Enriquecido". Se está convirtiendo en el estándar de facto de los entornos de desarrollo para Java. Y es que Eclipse no es tan solo un IDE, se trata de un marco de trabajo modular ampliable mediante complementos (plugins). De hecho, existen complementos que permite usar Eclipse para programar en PHP, Perl, Python, C/C++, etc.

o    PostgreSQL Server 8.3: Es un potente gestor de código abierto, ofrece servicios de control de concurrencia multi-versión, soportando casi toda la sintaxis SQL (incluyendo subconsultas, transacciones, tipos y funciones definidas por el usuario), contando también con un amplio conjunto de enlaces con lenguajes de programación (incluyendo C, C++, Java, Perl y Python). Es extensible, brinda gran estabilidad y confiabilidad y es multiplataforma. Tiene soporte para lenguajes procedurales internos, incluyendo un lenguaje nativo denominado PL/PGSQL. Este lenguaje es comparable al lenguaje procedural del sistema de gestión de base de datos relacional Oracle, PL/SQL. Una de sus ventajas es la excelente documentación que existe, además de contar con una comunidad de usuarios y desarrolladores a los que acudir en caso de tener problemas.

CONCEPTOS CLAVES EN PROGRAMACIÓN WEB

CGI (Common Gateway Interface): Una de las primeras formas de crear contenido dinámico.

Cookies: es un string que se pasa en una cabecera HTTP y que el navegador puede guardar en un pequeño fichero de texto.

Hipertexto: Habilidad de navegar desde un documento a otro a través de conexiones (hyperlinks o links).

HTML (HyperText Markup Language) Lenguaje con el que se definen páginas Web.

Protocolo HTTP: Protocolo de aplicación para transferencia de hipertexto.

RDF (Resource Description Framework).

URL (UniformResourceLocator)  Descriptor del acceso (cómo encontrar) un recurso java.

WSDL (Web Services Description Language).

XHTML (eXtensible HyperText Markup Language).

Xlink (XML Linking Language): Permite definir de forma estándar hipervínculos en archivos XML.

XPath: Permite identificar de forma inequívoca cualquier elemento o atributo de un documento XML.

XPointer y Xfragments: Lenguajes para apuntar a partes de un archivo XML.

Xquery: Lenguaje de consulta similar a SQL para colecciones de datos XML.

XSchema: Lenguaje de esquema empleado para describir la estructura y contenido adecuados de los elementos incluidos en documentos XML.

XSL (EXtensible Stylesheet Language): Familia de lenguajes para definición de presentación o formato de documentos XML.

XSL-FO: Permite describir la forma en que se presentan los componentes de un documento XML.

XSLT: Para transformar la información en el formato final más apropiado para el usuario