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?