DESARROLLO DE SOFTWARE PARA WEB

INVESTIGACION

Qu es un Sitio web y Pgina web? - Definicin de Sitio web y Pgina web En ingls website o web site, un sitio web es un sitio (localizacin) en la World Wide Web que contiene documentos (pginas web) organizados jerrquicamente. Cada documento (pgina web) contiene texto y o grficos que aparecen como informacin digital en la pantalla de un ordenador. Un sitio puede contener una combinacin de grficos, texto, audio, vdeo, y otros materiales dinmicos o estticos. Cada sitio web tiene una pgina de inicio (en ingls Home Page), que es el primer documento que ve el usuario cuando entra en el sitio web poniendo el nombre del dominio de ese sitio web en un navegador. El sitio normalmente tiene otros documentos (pginas web) adicionales. Cada sitio pertenece y es gestionado y por un individuo, una compaa o una organizacin. Como medio, los sitios web son similares a las pelculas, a la televisin o a las revistas, en que tambin crean y manipulan imgenes digitales y texto, pero un sitio web es tambin un medio de comunicacin. La diferencia principal entre un sitio web y los medios tradicionales es que un sitio web est en una red de ordenadores (Internet) y est codificado de manera que permite que los usuarios interacten con l. Una vez en un sitio web, puedes realizar compras, bsquedas, enviar mensajes, y otras actividades interactivas. Diferencia entre sitio web y pgina web A veces se utiliza errneamente el trmino pgina web para referirse a sitio web. Una pgina web es parte de un sitio web y es un nico archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados pginas web. Si lo comparramos con un libro, un sitio web sera el libro entero y una pgina web de ese sitio web sera un captulo de ese libro. El ttulo del libro sera el nombre del dominio del sitio web. Un captulo, al igual que una pgina web, tiene un nombre que lo define. Decimos que sera un captulo y no una pgina del libro porque a menudo es necesario desplazarse hacia bajo en la pantalla para ver todo el contenido de una pgina web, al igual que en un libro te desplazas a travs de varias pginas para ver todo el contenido de un captulo. El ndice de los captulos del libro sera el equivalente al mapa del sitio web (sitemap en ingls).

PROGRAMACION WEB EN CAPAS Suele hablarse de diseo y desarrollo web en trminos de "capas", adoptando un modelo de capas que se suele utilizar para describir protocolos de redes. Con el concepto de diseo por capas no encontramos con la capa estructural, que es la base sobre la que se aplican el resto de capas. A continuacin sigue la capa de presentacin que hace uso de hojas de estilo en cascada (CSS) y que proporciona las instrucciones sobre el aspecto del documento en la pantalla, sobre el sonido o sobre el modo en el que ser formateado si va a ser impreso. Adems de estas dos capas existe una tercera capa, la capa de comportamiento, donde a travs del scripting y la programacin se aade interactividad y efectos dinmicos a un sitio. Este blog se crea con objeto de hacer una visin del diseo web, a travs de enlaces a documentos oficiales y de diversos autores, de acuerdo a este nuevo modelo de diseo Web. EL DISEO POR CAPAS. CAPA ESTRUCTURAL Al principio los desarrolladores de navegadores se centraron en la creacin de etiquetas (etiquetas para Netscape o etiquetas para Internet Explorer), muchas veces incompatibles entre navegadores. La comunidad Web est regresando a la concepcin original del HTML, como un

lenguaje de marcado, un lenguaje para describir la estructura del documento y no para proporcionar instrucciones sobre su aspecto. De esto ltimo se ocupa otra capa, la capa de presentacin. El marcado estructural del documento es la base sobre la que se aplicarn las capas de presentacin y comportamiento. Estos son los lenguajes estndar actuales para el marcado estructural. XHTML 1.0 y XHTML 1.1: XHTML son las siglas de Extensible Hypertext Markup Language o Lenguaje de Marcado de Hipertexto. XHTML 1.0 es simplemente HTML 4.0 reescrito de acuerdo a las reglas de sintaxis ms estrictas de XML. XHTML 1.1 se libera de elementos y atributos depreciados y se ha modularizado para facilitar expansiones futuras. XHTML todava est en desarrollo. La ltima versin de HTML fue HTML 4.01 HTML 5 que sigue siendo soportado universalmente por los navegadores actuales pero no ser compatible a largo plazo. Se pueden encontrar vnculos a todas las especificaciones XHTML 1.0, XHTML 1.1 y HTML 5 en la pgina www.w3.org/MarkUp/. XML 1.0: XML (Extensible Markup Language, Lenguaje Extensible de Marcado) es un grupo de reglas para la creacin de nuevos lenguajes de marcado. Permite a los desarrolladores crear grupos personalizados de etiquetas para usos especiales. CAPA DE PRESENTACIN Ya que todas las instrucciones de presentacin se han eliminado del estndar de marcado, esta informacin para a ser un trabajo exclusivo de las hojas de estilo en cascada. Los estndares de hojas de estilos se estn desarrollando en fases, de este modo: CSS Nivel 1: Este estndar de hojas de estilo ha sido una recomendacin desde 1996 y ahora tiene soporte completo por las versiones actuales de los navegadores. El nivel 1 contiene reglas que controlan la presentacin en pantalla del texto, mrgenes y bordes. CSS Nivel 2.1: Esta recomendacin es conocida por la adicin del posicionamiento absoluto de los elementos de la pgina Web. El nivel 2 alcanz el estatus de recomendacin en 1998. CSS Nivel 3: El nivel 3 se construye sobre el nivel 2, pero est modularizado para facilitar expansiones futuras y para permitir a los dispositivos soportar subconjuntos lgicos. Esta versin todava est en desarrollo. CAPA DE COMPORTAMIENTO El scripting y programacin de esta capa aaden interactividad y efectos dinmicos a un sitio. Modelos de objeto DOM (Documento Objeto Modelo, Modelo de Objetos del Documento) permite a scripts y aplicaciones acceder y actualizar el contenido, estructura y estilo de un documento nombrando formalmente cada una de sus partes, sus atributos y el modo en el que el objeto puede ser manipulado. Al principio, cada uno de los navegadores principales tena su propio DOM, dificultando la creacin de efectos interactivos para todos los navegadores. Modelo de Objetos del Documento (Ncleo) Nivel 1: Esta versin incluye documentos HTML y XML as como la manipulacin y navegacin de documentos. Esta especificacin puede encontrarse en www.w3.org/TR/REC-DOM-Level-1/. Modelo de Objetos del Documento Nivel 2: El nivel 2 incluye un modelo de objetos de hoja de estilos, permitiendo manipular informacin de estilo. En www.w3.org/DOM/DOMTR pueden

encontrarse vnculos al ncleo y otros mdulos de la especificacin de Modelo de Objetos del Documento Nivel 2. Scripting Netscape introdujo su lenguaje de programacin Web, JavaScript, con su navegador Navegador 2.0. Originalmente se llamaba "Livescript" pero cuando la marca pas a ser compartida por Sun, se aadi "Java" al nombre. Microsoft respondi con su propio JScript mientras soportaba algunos niveles de JavaScript en la versin 3.0 de su navegador. Se necesitaba un estndar vlido para los distintos navegadores. JavaScript 1.5/ECMAScript 262: El W3C est desarrollando una versin estandarizada de JavaScript en coordinacin con Ecma Internacional, una asociacin internacional de industria dedicada a la estandarizacin de sistemas de informacin y comunicacin. De acuerdo al sitio de Mozilla, e JavaScript de Netscape es un supe grupo de lenguaje de programacin estndar de ECMAScript con diferencias muy suaves respecto a l estndar publicado. En la prctica comn, la mayora de los desarrolladores se refieren simplemente a "JavaScript", siendo implcita la implementacin estndar.

ARQUITECTURA DEL MODELO 4+1 VISTAS El modelo de 4+1 vista fue desarrollado para remediar este problema. El modelo 4+1 describe la arquitectura del software usando cinco vistas recurrentes.

La vista lgica. La vista de procesos. La vista fsica. La vista de desarrollo. Modelo 4+1 vistas de Kruchten (para Dummies) El modelo 4+1 de Kruchten, es un modelo de vistas [1] diseado por el profesor Philippe Kruchten y que encaja con el estndar IEEE 1471-2000 (Recommended Practice for Architecture Description of Software-Intensive Systems [5]) que se utiliza para describir la arquitectura de un sistema software intensivo basado en el uso de mltiples puntos de vista. Vale, si por ahora no te has enterado de nada y no ests en 3 o 4 de carrera de Ingeniera del Software (o derivados) no te preocupes es normal, y si estas en 3 o 4 de carrera y aun as no te has enterado de nada, Ponte las pilas YA! Porque estas cosas te deberan (por lo menos) sonar.

Bueno, vamos por pasos. Antes de entrar a explicar ms en detalle el modelo de kruchten vamos a explicar e intentar dejar claro algunos conceptos como por ejemplo qu es un sistema software, qu es una vista y qu es un punto de vista. Lo primero es saber qu es eso de un sistema software, el cual lo definimos con la siguiente ecuacin (made in jarroba.com). Sistema software = Hardware + Software Efectivamente, a grandes rasgos un sistema software es un software (ms o menos complejo) que corre en un determinado hardware (ms o menos complejo). Por ejemplo, todo el rollo de los cajeros automticos es un sistema software ya que en un hardware que llamamos cajero, se ejecuta algn tipo de programa (software) el cual nos permite realizar determinadas gestiones. Otra cosa de la que habla este modelo de Kruchten es sobre los conceptos de vista y puntos de vista, pues bien una vista no es ms que una representacin de todo el sistema software desde una determinada perspectiva, y un punto de vista se define como un conjunto de reglas (o normas) para realizar y entender las vistas. Bien, sino te ha quedado muy claro que es esto de las vistas y los puntos de vista, vamos a explicarlo con una sencilla analoga del mundo de la arquitectura (de la arquitectura de las casas, edificios y esas cosas): Si un arquitecto nos muestra un plano de una casa (como la de la siguiente imagen), nos est mostrando una vista de la casa y como no tenemos ni idea de arquitectura, cuando nos explique o nos d un documento en el que explique que un determinado smbolo del plano representa a una puerta u otro smbolo representa una mesa, nos estar dado un punto de vista para que podamos entender el plano de la casa. Si ms tarde nos mostrase otro plano (o maqueta) de la casa, nos estara dando otra vista de la casa y nos tendr que explicar el nuevo punto de vista, es decir, que nos tendr que explicar que significa cada smbolo u objeto de esa nueva vista.

Bueno pues vistos los conceptos de lo que son las vistas y los puntos de vista, y habiendo explicado que es un sistema software, uno ya se puede hacer a la idea de que va el modelo 4+1 vistas de Kruchten para la descripcin de arquitecturas de sistemas software NO? Pues s, lo que propone Kruchten es que un sistema software se ha de documentar y mostrar (tal y como se propone en el estndar IEEE 1471-2000) con 4 vistas bien diferenciadas y estas 4 vistas se han de relacionar entre s con una vista ms, que es la denominada vista +1. Estas 4 vista las

denomin Kruchten como: vista lgica, vista de procesos, vista de despliegue y vista fsica y la vista +1 que tiene la funcin de relacionar las 4 vistas citadas, la denomin vista de escenario. Cada una de estas vistas ha de mostrar toda la arquitectura del sistema software que se est documentando, pero cada una de ellas ha de documentarse de forma diferente y ha de mostrar aspectos diferentes del sistema software. A continuacin, pasamos a explicar que informacin ha de haber en la documentacin de cada una de estas vistas.

Vista Lgica: En esta vista se representa la funcionalidad que el sistema proporcionara a los usuarios finales. Es decir, se ha de representar lo que el sistema debe hacer, y las funciones y servicios que ofrece. Para completar la documentacin de esta vista se pueden incluir los diagramas de clases, de comunicacin o de secuencia de UML.

Vista de Despliegue: En esta vista se muestra el sistema desde la perspectiva de un programador y se ocupa de la gestin del software; o en otras palabras, se va a mostrar cmo est dividido el

sistema software en componentes y las dependencias que hay entre esos componentes. Para completar la documentacin de esta vista se pueden incluir los diagramas de componentes y de paquetes de UML.

Vista de Procesos: En esta vista se muestran los procesos que hay en el sistema y la forma en la que se comunican estos procesos; es decir, se representa desde la perspectiva de un integrador de sistemas, el flujo de trabajo paso a paso de negocio y operacionales de los componentes que conforman el sistema. Para completar la documentacin de esta vista se puede incluir el diagrama de actividad de UML.

Vista Fsica: En esta vista se muestra desde la perspectiva de un ingeniero de sistemas todos los componentes fsicos del sistema as como las conexiones fsicas entre esos componentes que conforman la solucin (incluyendo los servicios). Para completar la documentacin de esta vista se puede incluir el diagrama de despliegue de UML.

+1 Vista de Escenarios: Esta vista va a ser representada por los casos de uso software y va a tener la funcin de unir y relacionar las otras 4 vistas, esto quiere decir que desde un caso de uso podemos ver cmo se van ligando las otras 4 vistas, con lo que tendremos una trazabilidad de componentes, clases, equipos, paquetes, etc., para realizar cada caso de uso. Para completar la documentacin de esta vista se pueden incluir los diagramas de casos de uso de UML.

Una vez explicadas las vistas que propone Kruchten y la forma de documentarlas, se puede apreciar que es un modelo bastante bueno para documentar la arquitectura de un sistema software complejo, ya que todos los Stakeholders (personas interesadas en el proyecto, desde el usuario del sistema hasta el manda ms de la empresa) pueden entender el sistema software que se est desarrollando desde diferentes perspectivas. Para terminar, solo recomendar la utilizacin de este modelo 4+1 vistas de Kruchten para la documentacin de arquitecturas de sistemas software siguiendo el estndar IEEE 1471-2000.

ELEMENTOS QUE CONLLEBA A LA ARQUITECTURA DE SOFTWARE El uso ms habitual es la organizacin en grupos de los elementos de modelado. En aplicaciones pequeas no es necesario. Pasos a realizar: 1. Examinar los modelos en busca de grupos de elementos cercanos semntica o conceptualmente. 2. Englobar cada uno de dichos grupos en un paquete. 3. Para cada paquete, diferenciar los elementos a los que se podr acceder desde fuera (pblicos) frente a los que no (privados). En caso de duda, marcar como privado. 4. Conectar los paquetes que dependen de otros por dependencias (import o access). ANLISIS Y DISEO DE SISTEMAS El Anlisis y el Diseo de sistema, tienen como fin estudiar sistemticamente la operacin de ingreso de los datos, el flujo de los mismos y la salida de la informacin; todo ello dentro del contexto de una empresa en particular.

ANLISIS ESTRUCTURADO El Anlisis Estructurado es un mtodo para el anlisis de sistemas manuales o automatizados, que conduce al desarrollo de especificaciones para sistemas nuevos o para efectuar modificaciones a los ya existentes. El objetivo que persigue el anlisis estructurado es organizar las tareas asociadas con la determinacin de requerimientos para obtener la comprensin completa y exacta de una situacin dada. Componentes: Smbolos grficos: Son los iconos y convenciones para identificar y describir los componentes de un sistema y las relaciones entre estos. Diccionarios de datos: Descripciones de todos los datos utilizados en el sistema. Puede ser manual o automatizado. Descripciones de procesos y procedimientos: Declaraciones formales que emplean tcnicas y lenguajes que permiten describir actividades importantes que forman parte del sistema. Reglas: Estndares para describir y documentar el sistema en forma correcta y completa.

DISEO ESTRUCTURADO El Diseo Estructurado es una tcnica especfica que busca crear programas formados por mdulos independientes unos de otros desde el punto de vista funcional y no mostrar la lgica de los programas. La herramienta fundamental del diseo estructurado es el diagrama estructurado, el cual describe la interaccin entre mdulos independientes junto con los datos que un mdulo pasa a otro cuando interacciona con l.

ANLISIS Y DISEO ORIENTADO A OBJETOS La Orientacin a Objetos puede describirse como el conjunto de disciplinas que desarrollan y modernizan software que facilitan la construccin de sistemas complejos a partir de componentes. El atractivo intuitivo de la orientacin a objetos es que proporciona conceptos y herramientas con las cuales se modela y representa el mundo real tan fielmente como sea posible.

Las tcnicas orientadas a objetos proporcionan mejoras y metodologas para construir sistemas de software complejos a partir de unidades de software modularizado y reutilizable. La orientacin a objetos trata de cubrir las necesidades de los usuarios finales, as como las propias de los desarrolladores de productos software. Estas tareas se realizan mediante la modelizacin del mundo real. El soporte fundamental es el modelo objeto. El Anlisis Orientado a Objetos y su Diseo se enfoca en los objetos. Los objetos tienen ciertos comportamientos y atributos que determinan la manera en que interactan y funcionan. No se intenta proporcionar un orden para las acciones al momento del diseo debido a que los objetos funcionan basados en la manera en que funcionan otros objetos. Caractersticas Principales del Enfoque Orientado a Objetos Identidad: Los datos se organizan en entidades discretas y distinguibles llamadas objetos. Estos objetos pueden ser concretos o abstractos, pero cada objeto tiene su propia identidad. Clasificacin: Los objetos que tengan los mismos atributos y comportamiento se agrupan en clases. Una clase es una abstraccin que describe propiedades (atributos y comportamiento) relevantes para una aplicacin determinada, ignorando el resto. Polimorfismo: El polimorfismo permite que una misma operacin pueda llevarse a cabo de forma diferente en clases diferentes. Herencia: El concepto de herencia se refiere al compartir de atributos y operaciones basadas en una relacin jerrquica entre varias clases. Una clase puede definirse de forma general y luego refinarse en sucesivas subclases. Cada clase hereda todas las propiedades (atributos y operaciones) de su superclase y aade sus propiedades particulares. DIFERENCIAS Anlisis y Diseo Estructurado Anlisis y diseo Orientado a Objetos El anlisis estructurado se basa fundamentalmente en la descomposicin funcional del sistema que se desea construir, lo cual requiere comprender primero el dominio del problema y a continuacin documentar las funciones y subfunciones que debe proporcionar el sistema. El enfoque Orientado a Objetos invierte el mtodo estructurado, se centra en primer lugar en identificar los objetos del dominio de aplicacin y despus en establecer procedimientos que los manejen. El software desarrollado con mtodos estructurados suele ser ms frgil ante los cambios de requisitos; pues si estos cambian, un sistema basado en descomposicin funcional puede requerir una reestructuracin masiva. El software Orientado a Objetos se mantiene mejor ante los cambios de requisitos, porque se basa en la estructura subyacente del dominio de aplicacin por lo que las modificaciones necesarias pueden ser ms fcilmente localizables. El Anlisis Estructurado modela los sistemas desde un punto de vista ms prximo a su implementacin en un ordenador (entrada/proceso/salida). El Anlisis Orientado a Objetos se basa en modelar el sistema mediante los objetos que forman parte de l y las relaciones estticas (herencia y composicin) o dinmicas (uso) entre estos objetos. Este enfoque pretende conseguir modelos que se ajusten mejor al problema real. El anlisis estructurado incorpora modelos de datos, de procesos y de comportamiento. El enfoque Orientado a Objetos, utiliza los mismos modelos que el anlisis estructurado. Las diferencias principales consisten en la mayor importancia que se da al modelo de datos, por encima de los otros dos, y en el enfoque orientado a objetos de este modelo. El modelado de datos mediante el enfoque estructurado, est ms orientado al diseo de bases de datos y se centra exclusivamente en la identificacin de los datos que maneja un sistema y en las relaciones estticas que se establecen entre esos datos. En el AOO, los objetos encapsulan tanto atributos como procedimientos (operaciones que se realizan sobre los objetos), e incorpora adems conceptos como el polimorfismo o la herencia que

facilitan la reutilizacin de cdigo. El uso de AOO puede facilitar mucho la creacin de prototipos, y las tcnicas de desarrollo evolutivo de software.