Modelatge d’Aplicacions WebEnginyeria del Software II

Isaac Moles BuyoAntonio Rodriguez Benitez

Índex Introducció

Que és la Internet? Una mica d‘Història WEB 1.0 WEB 2.0 WEB 3.0

Modelatge Web Arquitectura Web

Que és Internet?

Conjunt descentralitzat de xarxes de comunicació.

WEB: Sistema de documents interconnectats disponibles a Internet.

Una mica d'Història

Primeres idees nascudes al finals dels 50.

En els 60 i els 70 primeres implementacions practiques.

Dècada dels 90 neixen les bases de la Internet moderna.

WEB 1.0 1991

HTML, només de lectura.

Limitada a lo que el webmaster hi puja.

Comença a morir al bum .com de 2001.

WEB 1.5

Bum .com de 2001

Webs una mica més dinàmiques.

CMS : Sistema de gestió de continguts

WEB 2.0 Neix al 2004

Orientada a interacció.

Xarxes socials.

Dependents dels usuaris.

WEB 3.0 (I) Evolució de la interacció en la web en

diferents àmbits. Intel·ligència artificial Base de dades Web semàntica i SOA Evolució del 3D a la Web.

Experts no es posen d'acord en una definició formal

WEB 3.0 (II) Intel·ligència artificial:

Hi ha molts escèptics

IBM i Google estan implementat sistema de reconeixement d'èxits musicals utilitzant webs de música d’Universitats.

WEB 3.0 (III) Bases de dades:

Data Web

Cerca a traves de bases de dades per la web

Dades tan accessibles com les planes web.

WEB 3.0 (VI) Web semàntica:

Utilitzen raonament lògic i d’agents intel·ligents per mostrar la informació

Per els navegadors s’utilitza xHTML, JavaScript...

Per dades s'utilitzen llenguatges interpretats, bases de dades relacionals, protocols...

WEB 3.0 (V) Evolució al 3D:

Espais tridimensionals amb la informació.

Poder-se moure pel mon 3D del la web com per una “ciutat interactiva” amb un avatar.

Evolució del concepte de “Second Life”

Modelatge Web

Mirarem les següents metodologies de modelatge d’aplicacions Web: EORM OOHDM SOHDM WSDM RNA

Modelatge Web: EORM (I) Metodologia de relació entre objectes.

Model iteratiu de modelat orientat a objectes.

Una de les primeres propostes per web centrada en el paradigma de la orientació a objectes.

Modelatge Web: EORM (II) Hi ha programes per automatitzar

l’aplicació de la metodologia:

ONTOS Studio: Part gràfica.

SGBDOO: Bases de dades.

EORM: Generació de codi font.

Modelatge Web: EORM (III) Fases en que es divideix la metodologia:

Fase d'anàlisi.

Fase de disseny.

Fase de construcció.

Modelatge Web: EORM (III) Fases en que es divideix la metodologia:

Fase d'anàlisi: Orientar a objectes el sistema. No tenir en compte els hipervincles.

Fase de disseny.

Fase de construcció.

Modelatge Web: EORM (III) Fases en que es divideix la metodologia:

Fase d'anàlisi.

Fase de disseny: S’afegeixen els hipervincles com objectes a

l’estructura d’objectes.

Fase de construcció.

Modelatge Web: EORM (III) Fases en que es divideix la metodologia:

Fase d'anàlisi.

Fase de disseny.

Fase de construcció: Es converteixen els esquemes en codi.

Modelatge Web: OOHDM (I)

Object-Oriented Hipermedia Desing Method

A cada fase es van millorant els models d’objectes.

Modelatge Web: OOHDM (II) Fases de l’OOHDM:

Fase Conceptual

Fase Navegacional

Fase d'Interfície Abstracta

Fase d’Implementació

Modelatge Web: OOHDM (III) Fase Conceptual:

Es construeix l’esquema conceptual: Objectes del domini Relacions entre ells

Format per classes, relacions i subsistemes

Modelatge Web: OOHDM (IV) Fase Navegacional:

Es una part critica del model.

Es basa en extreure vistes del concepte que formaran les pàgines.

Modelatge Web: OOHDM (V) Fase d'Interfície Abstracta:

Definir com es representaran els objectes de cada vista.

Amb una bona representació es poden definir moltes interfícies per una vista d’un model Navegacional.

Modelatge Web: OOHDM (VI) Fase d'Interfície Abstracta:

Definir com es representaran els objectes de cada vista.

Amb una bona representació es poden definir moltes interfícies per una vista d’un model Navegacional.

Modelatge Web: OOHDM (VII) Fase d’Implementació:

Decidir segons l’usuari i el context:

Quines parts de la vista Navegacional s’han de mostrar.

Com mostrar aquestes vistes. Com emmagatzemar les dades.

Modelatge Web: SOHDM (I)

Mètode de disseny orientat a objectes per hipervincles que és basa en escenaris.

Utilitza un sistema d’escenaris per capturar les necessitats del sistema.

Modelatge Web: SOHDM (II) Fases del SOHDM:

Fase d'Anàlisis Fase de Modelat d’Objectes Fase de Disseny de Vistes Fase de Disseny Navegacional Fase de Disseny de la Implementació Fase de Construcció

Modelatge Web: SOHDM (III)

Fase d’Anàlisis:

Estudi de les necessitats de l’aplicació, l’entorn de treball i els actors.

Te com a finalitat representar les activitats que pot fer el sistema.

Modelatge Web: SOHDM (IV)

Fase de Modelat d’Objectes:

Es crea el diagrama de classes.

Representa l’estructura conceptual del sistema.

Modelatge Web: SOHDM (V) Fase de Disseny de Vistes:

Es reorganitzen els objectes en unitats Navegacionals.

Representen una vista dels objectes del sistema.

Modelatge Web: SOHDM (VI) Fase de Disseny Navegacional:

Es complementen les vistes amb les definicions dels Hipervincles.

Fase del Disseny de la Implementació:

Es dissenyen les pàgines, la interfície i la base de dades.

Modelatge Web: SOHDM (VII) Fase de Construcció:

Es construeix la base de dades del sistema.

Es construeix l’aplicació.

Modelatge Web: WSDM (I)

Web Site Desing Method

Es basa en modelar l’aplicació web basant-se en el tipus d’usuaris que l’utilitzaran.

Modelatge Web: WSDM (II)

Fases del mètode WSDM:

Fase de Model d’Usuari Fase de Disseny Conceptual Fase de Disseny de la Implementació Fase de Realització de la Implementació

Modelatge Web: WSDM (III) Fase de Model d’Usuari:

S’intenten detectar els perfils dels usuaris (Públic objectiu, objectius de màrqueting...)

Es pot dividir en: Classificació d’usuaris Descripció dels grups d’usuari

Modelatge Web: WSDM (IV) Fase de Disseny Conceptual:

Diferent al de OOHDM

Es realitzen dos tasques: Disseny del model d’objectes. Disseny del model Navegacional.

Modelatge Web: WSDM (V) Fase de Disseny de la Implementació:

Modela la interfície de cada rol d’usuari.

Es construirà l’arquitectura de navegació.

Inclou el disseny de la pàgina principal.

Modelatge Web: WSDM (VI)

Fase de Realització de la Implementació:

Es codifiquen tots els aspectes amb el llenguatge concret triat.

Modelatge Web: RNA (I)

Relationship Navigational Analysis

Defineix una seqüencia de passos que s’utilitzen pel disseny web.

Ressalta la necessitat de treballar amb l’especificació de requisits.

Modelatge Web: RNA (II) Fases del RNA:

Fase d'anàlisis de l’entorn. Fase de definició d’elements. Fase d'anàlisi del coneixement. Fase d'anàlisi de navegació. Fase d’implementació de l'anàlisi.

Modelatge Web: RNA (III) Fases d’anàlisis de l’entorn:

Determinar usuaris finals de l’aplicació.

Es classifiquen en grups segons els seus perfils.

Modelatge Web: RNA (IV) Fases de definició d’elements:

Es llisten els elements d'interès.

Aquests elements poden ser: Documents Pantalles que es requereixin Informació variada.

Modelatge Web: RNA (V) Fases d'anàlisi del coneixement:

Crear esquema que representa l’aplicació.

RNA proposa: Identificar Objectes. Identificar Processos. Identificar Operacions

Modelatge Web: RNA (VI) Fases d'anàlisi de navegació:

S'enriqueix l’esquema anterior amb les possibilitats de navegació.

Fases d’implementació de l’anàlisi:

S’implementa l’esquema complert de la fase anterior.

Tipus de disseny

‐Arquitectura tradicional (client ‐ servidor)

‐Arquitectura de 3 capes

‐Arquitectura de 4 capes

‐Arquitectura de 7 capes

Arquitectura tradicional (client ‐servidor)

Estructura tradicional d’una aplicació web: Client

Servidor

+ràpid desenvolupar respecte anteriors. Einesexperimentades. Adequats per entorns estàtics.

‐exigeix alt control versió client. Dificultat garantirseguretat BBDD.

Arquitectura tradicional (client –servidor) (I)

Arquitectura tradicional (client ‐servidor) (II)

Llenguatges:

HTML

Javascript

Applets de Java

Visual Basic script

CSS

Flash

Arquitectura en 3 capes (I) Capa de presentació i interfície d’usuari

Capa de Negoci

Capa d’accés a dades

+Major flexibilitat (capa intermitja). Possibilitat canvissense percepció client. Reutilització codi.

‐Increment tràfic xarxa. Diversitat de navegadors,cadascun amb particularitats.

Arquitectura en 3 capes (II)

Arquitectura en 3 capes (III)

Llenguatges:

PERL

ASP

PHP

JSP

@P=split//,".URRUU\c8R";@d=split//,"\nrekcah xinU / lreP rehtona tsuJ";sub p{@p{"r$p","u$p"}=(P,P);pipe"r$p","u$p";++$p;($q*=2)+=$f=!fork;map{$P=$P[$f^ord($p{$_})&6];$p{$_}=/ ^$P/ix?$P:close$_}keys%p}p;p;p;p;p;map{$p{$_}=~/^[P.]/&&close$_}%p;wait until$?;map{/^r/&&<$_>}%p;$_=$d[$q];sleep rand(2)if/\S/;print

Arquitectura en 4 capes

Capa de Presentació

Capa d’Aplicació

Capa de Domini de l’Aplicació

Capa de Repositori

Arquitectura en 7 capes

Capa de Presentació

Capa d’interfície de servei

Capa d’implementació del servei

Capa de tipus de dades

Capa lògica de negoci

Capa d’entitats de negoci

Capa repositori de dades

Arquitectures i models de negoci

Tipus d’arquitectures i models de negoci basats enla Web que utilitzen aplicacions Web per fomentarel comerç electrònic (e‐commerce y e‐business):

B2B: Business to Business

B2C: Business to Consumer

B2E: Business to Employee

Business to Business (B2B)

Orientats al negoci electrònic entre comunitatsamb interessos comuns (e‐business).

Major volum de negoci que l’esquema B2C.

Portals i aplicacions sectorials (p.e.: banca,informàtica, etc.)

Rapidesa en les compres.

Mecanismes de seguretat.

Business to Consumer (B2C)

Orientats al comerç electrònic de particulars asectors concrets (e‐commerce).

Portals i aplicacions horitzontals (p.e.:amazon)

Rapidesa en les compres i pagament electrònic(VISA, AMEX, etc.)

Mecanismes de seguretat

Business to Employee (B2E)

Model centrat en l’empleat, treballador o individu.

Portals altament personalitzats.

Les companyies ofereixen productes i serveis alsseus empleats.

Integren la horitzontalitat i la verticalitat.

Permeten gestionar els recursos humans.

Altres arquitectures

B2B2C: un negoci ven a clients utilitzant unvenedor com intermediari.

C2B2C: venda entre consumidors a través d’unintermediari.

P2P (Person to Person): pagament entre individusa través d’una transacció (p.e.: una subasta osistemes de pagament via mòbil).

Modelatge d’Aplicacions WebEnginyeria del Software II

Isaac Moles BuyoAntonio Rodriguez Benitez

Alguna Pregunta?