Modelatge
d’Aplicacions
Web
Enginyeria del Software II
Isaac Moles Buyo
Antonio 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
 CMS
una mica més dinàmiques.
: Sistema de gestió de continguts
WEB 2.0
 Neix
al 2004
 Orientada
 Xarxes
a interacció.
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
Method
A
Hipermedia Desing
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

Es complementen les vistes amb les
definicions dels Hipervincles.
 Fase

de Disseny Navegacional:
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
 Es
Site Desing Method
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

S'enriqueix l’esquema anterior amb les
possibilitats de navegació.
 Fases

d'anàlisi de navegació:
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. Eines
experimentades. Adequats per entorns estàtics.
-exigeix
alt control versió client. Dificultat garantir
seguretat 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 canvis
sense 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 en
la Web que utilitzen aplicacions Web per fomentar
el 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 comunitats
amb 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 a
sectors 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 als
seus empleats.
 Integren la horitzontalitat i la verticalitat.
 Permeten gestionar els recursos humans.
Altres arquitectures
 B2B2C:
un negoci ven a clients utilitzant un
venedor com intermediari.
 C2B2C: venda entre consumidors a través d’un
intermediari.
 P2P (Person to Person): pagament entre individus
a través d’una transacció (p.e.: una subasta o
sistemes de pagament via mòbil).
Alguna Pregunta?
Modelatge
d’Aplicacions
Web
Enginyeria del Software II
Isaac Moles Buyo
Antonio Rodriguez Benitez
Descargar

Modelatge d’Aplicacions Web