Modelat d'Aplicacions WEB

Enginyeria del Software II 07/03/2013

Rachid Mahmoudi u1062996@campus.udg.edu Professor: Joan Antoni, Sellares Chiva

2

Index 1- Història .............................................................................................................................. 4

2- Introducció ......................................................................................................................... 7

3- Conceptes bàsics ............................................................................................................... 8

4- Aplicació Web ................................................................................................................... 8

5- Pàgina Web........................................................................................................................ 9

6- Web .................................................................................................................................... 9

7- Servidor Web ..................................................................................................................... 9

8- Funcionament d'una aplicació web ................................................................................10

9- Pàgines web estàtiques ....................................................................................................10

9.1- Característiques pàgina web estàtica ....................................................................... 11

10- Pàgines web dinàmiques ............................................................................................... 11

10.1- Característiques d’una pàgina web dinàmica ........................................................ 12

11- Pàgines Web animades................................................................................................... 12

12- Web 1.0 ........................................................................................................................... 12

12.1- Característiques ....................................................................................................... 13

13- Web 2.0 ........................................................................................................................... 13

13.1- Característiques ....................................................................................................... 14

14- Web semàntica o Web 3.0 ............................................................................................. 14

15- Arquitectura Web ........................................................................................................... 14

15.1- Protocol HTTP ......................................................................................................... 15

15.2- URL .......................................................................................................................... 15

15.3- HTML ....................................................................................................................... 15

16- Modelatge de l'anàlisi per aplicacions web .................................................................. 15

16.1- Anàlisi D’aplicacions Web ....................................................................................... 16

16.2- Disseny D’aplicacions Web..................................................................................... 17

16.3- Metodologies de disseny web ................................................................................. 18

17- OOHDM .......................................................................................................................... 18

17.1 Fase 1: Obtenció de requeriments ............................................................................ 19

17.2- Fase 2: disseny Conceptual ..................................................................................... 19

17.3- Fase 3: Disseny navegació ...................................................................................... 19

17.4- Fase 4: Disseny d'Interfície Abstracta ................................................................... 19

17.5- Fase 5: Implementació ............................................................................................ 19

18- Avantatges ................................................................................................................. 20

19- Desavantatges ............................................................................................................ 20

20- Exemple pràctic ............................................................................................................ 20

3

20.1- Fase 1: Obtenció de requeriments ......................................................................... 21

20.2- Fase 2: Diseño conceptual .................................................................................... 22

20.3- Fase 3: Disseny navegacional ............................................................................... 22

20.4- Fase 4: Disseny d'interfície abstracta................................................................... 23

20.5- Fase 5: Implementació .......................................................................................... 24

21- Bibliografia..................................................................................................................25

4

1- Història Les aplicacions web interactives poc a poc han revolucionat la forma d'utilitzar Internet, augmentant el contingut de les pàgines amb text estàtic (text que no evoluciona, sinó que romanen com és) a un contingut ric i interactiu, per tant escalable.

El concepte de l'aplicació web no és nou. De fet, un dels primer llenguatge de programació per al desenvolupament d'aplicacions web és el "Perl". Va ser inventat per Larry Wall el 1987 abans que Internet es convertís en accessible per al públic en general. Però va ser el 1995 quan el programador Rasmus Lerdorf va posar a disposició el llenguatge PHP amb el que tot el desenvolupament d'aplicacions web realment va enlairar. Avui en dia, moltes d'aquestes aplicacions s'han desenvolupat en PHP, com Google, Facebook i Wikipedia.

Uns mesos més tard, Netscape, el navegador web més antic i popular, va anunciar una nova tecnologia, JavaScript, el que permet als programadors canviar de forma dinàmica el contingut d'una pàgina web que havia estat fins ara text estàtic. Aquesta tecnologia permet un nou enfocament per al desenvolupament d'aplicacions web, que eren, i encara avui, molt més interactives per als usuaris. Per exemple, la instantània de Google, que mostra els resultats de cerca en un moment en què la paraula s'escriu, fa un ús intensiu de JavaScript. Les actualitzacions del lloc web de productes de Microsoft també utilitza aquesta tecnologia.

A l'any següent, el 1996, dos desenvolupadors, Sabeer Bhatia i Jack Smith van llançar Hotmail (no va ser un desenvolupament original de Microsoft), un servei de correu en línia que permet (per primera vegada) per al públic en general per accedir i consultar el correu electrònic sempre que sigui els usuaris poguessin estar en qualsevol lloc lluny del seu ordinador.

Després va venir la famosa plataforma Flash s'utilitza per afegir contingut interactiu per a llocs web. Flash va fer la seva aparició el 1997, conegut com Shockwave Flash. Més tard, després de ser adquirit per Macromedia i Adobe, Flash va esdevenir una plataforma per desenvolupar aplicacions web interactives.

L'any següent va marcar un punt d'inflexió per als mitjans de comunicació en línia. De fet, el 17 de gener de 1998, el lloc web The Drudge Report va anunciar per primera vegada un informe de notícies abans que es difongués en els mitjans de televisió i la premsa tradicional. Es va informar l'escàndol Clinton / Lewinsky. Aquest esdeveniment va ser el detonant del periodisme en línia tal com el coneixem avui en dia. Abans d'aquesta data, internet mai havia estat considerat un mitjà de comunicació més importants.

El mateix any, la companyia Google va desenvolupar el seu primer motor de cerca en línia que, per la seva nova forma d'indexar pàgines web, facilita

5

enormement la recerca d'informació a Internet. Google segueix innovant i es va convertir en un dels més prolífics pel que fa a les aplicacions web, amb indicació del molt popular Google Maps, Google Docs, Gmail i en augment.

A principis de 2001, poc després de l'explosió de la bombolla d'internet, Wikipedia es va llançar com un sub-projecte de Nupedia, una enciclopèdia en línia tradicional. Per desenvolupar la seva plataforma, s'utilitza un tipus de Viquipèdia de l'aplicació web anomenada "wiki", que permet a qualsevol usuari afegir contingut. Les contribucions no es van fer esperar, i al final del primer any de funcionament, Wikipedia ja comptava amb 20000 pàgines en 18 idiomes. Avui en dia, gairebé 21 milions d'articles en 285 idiomes conformen el sisè lloc més visitat al món, sent el primer Google.

El 2003, MySpace va ser fundat i més tard, del 2005 al 2008, el lloc es va convertir en el mitjà de comunicació social més visitat. MySpace va ser una plataforma de llançament per a altres aplicacions web coneguts com YouTube, i Slide.com! RockYou, tots els quals van començar com mòduls addicionals per als usuaris de MySpace abans d'esdevenir seus propis llocs web en el seu propi dret.

Llavors, tres esdeveniments molt importants van ocórrer en 2004. En primer lloc, en una conferència de la Web 2.0 a càrrec de John Battelle i Tim O'Reilly, el concepte de "web com a plataforma" va ser esmentat per primera vegada. Aquesta innovació va aplanar el camí per a futures aplicacions web, és a dir, un programari que aprofita els avantatges de la connexió a Internet i que es desvien de l'ús tradicional de l'escriptori. En segon lloc, el lloc interactiu del Digg es va engegar. Va proposar una nova manera de crear i localitzar continguts internet mitjançant la promoció de notícies i enllaços democràticament votat pels usuaris. I, finalment, el tercer gran esdeveniment, però no menys important, va ser el llançament de Facebook, que estava llavors en la seva infància, obert només als estudiants. Amb un milió de subscriptors a finals de 2004, Facebook s'ha convertit en el mitjà de comunicació i al més utilitzat amb més de 900 milions d'usuaris. Aquest és el segon lloc més visitat al planeta i té la major quantitat de fotos compartides pels usuaris amb un total de gairebé 500.000.000.000 de fotos pujades a la plataforma. Facebook ha revolucionat la miríada d'aspectes relacionats amb la vida social la comercialització, i la política ... a la web.

El 2005, YouTube va ser llançat oficialment, permet als usuaris compartir vídeos en línia. De simple lloc per compartir vídeos a internet a una plataforma madura que es coneix avui en dia, YouTube ara ofereix prop de 4000 milions de vídeos al dia, a més d'un servei de lloguer de pel·lícules en línia, i, finalment, episodis d'emissió per les empreses o les pel·lícules de MGM, Lions Gate Entertainment i CBS.

6

Twitter, per la seva banda, es va engegar el 2006. Amb els anys, la popularitat de Twitter ha augmentat de 1,6 milions de 'tweets' el 2007 amb la impressionant xifra de 340 milions de dòlars per dia en març de 2012 (equivalent a gairebé 4000 'tweets' per segon).

L'any 2007 va estar marcat per l'aparició de l'iPhone, que va ser sens dubte responsable de l'arribada de la nova moda per les plataformes mòbils i aplicacions web. Ara són accessibles per telèfon intel·ligent.

A principis de 2011, l'empresa Kickstarter, que facilita el finançament de projectes en línia de forma participativa, ha arribat als 4000 projectes amb més de 30 milions de dòlars en donacions. D'altra banda, gairebé el 44% dels projectes s'han iniciat amb èxit des d'aquesta plataforma.

7

2- Introducció Els llocs web, en general, són complexos i enormement dinàmics. requereixen fases de desenvolupament curtes amb la finalitat de posar en marxa el producte i executar ràpidament. Sovint, els desenvolupadors van directe cap a la fase de codificació sense comprendre que estan tractant de construir o com volen construir. La codificació respecte del servidor sovint es fa ad hoc, les taules de bases de dades s'agreguen conforme es necessiten i l'arquitectura evoluciona en una forma de vegades no intencional.

Els sistemes web són relativament nous en el món del computació. Cada vegada són més complexes i per tant són un nou repte per als enginyers del software. Com el software, al principi no es modelava, aviat sorgeixen metodologia es que intenten solucionar el problema. Un problema que es agreuja en els sistemes web pel fet que aquests fomenten un entorn de requisits molt canviants. Això pot ser degut a un nombre d'usuaris mundial que provoca un gran nombre de requisits. A més l'equip de desenvolupadors sol ser petit.

Gràcies al desenvolupament de noves eines i tecnologies, les Aplicacions web són cada vegada més populars. La facilitat del seu desenvolupament provoca, de vegades, l'absència d'una anàlisi i disseny correctes, però estan aconseguint reemplaçar les aplicacions software tradicionals. El que aquí anem a veure és una presentació genèrica del funcionament i estructura d'aquestes aplicacions.

El desenvolupament de la web no es deu a una única persona. Però si busquem un únic pare del web, aquest és Tim bernés-Lee. A ell es deuen els tres elements que van ser clau en el naixement de la web

HTML: com a llenguatge per crear els continguts del web, basat en Standard Generalized Markup Language (SGML).

HTTP: com a protocol de comunicació entre els ordinadors de la web, encarregat de la transferència de les pàgines web i altres recursos.

URL: com a mitjà del localització (adreçament) dels diferents recursos a Internet

8

3- Conceptes bàsics Model client-servidor

Un client demanda serveis o recursos a un servidor a través d'una interfície, usant un protocol HTTP.

Aquesta arquitectura consisteix bàsicament en un client (navegador) que realitza peticions a un altre programa (el servidor) que li dóna resposta. Encara que aquesta idea es pot aplicar a programes que s'executen sobre una sola computadora és més avantatjosa en un sistema operatiu multiusuari distribuït a través d'una xarxa de computadores.

4- Aplicació Web "Una aplicació web és un lloc web on la navegació a través del lloc, i l'entrada de dades per part d'un usuari, afecten el estat de la lògica del negoci.

En essència, una aplicació web utilitza un lloc web com a entrada (front-end) a una aplicació típica.

... Si no hi ha lògica del negoci al servidor, el sistema no pot ser cridat aplicació Web. “

[Conallen 99]

Des de la perspectiva d'un usuari, pot ser difícil percebre la diferència entre un lloc web i una aplicació web. Segons el Diccionari Oxford en línia, ens assabentem que una aplicació és "un programa o conjunt de programes per ajudar l'usuari d'un ordinador per processar una tasca específica". Una aplicació web és bàsicament una manera de facilitar l'assoliment d'una tasca específica ... a la web, a diferència d'un lloc web estàtic que és més aviat una eina, no menys important, per a la comunicació. El terme més decisiu d'aquesta definició és "tasca específica". L'aplicació web per tant permet a l'usuari

9

interactuar directament amb tu i les teves dades, tot en forma personalitzada, per dur a terme aquesta tasca específica!

5- Pàgina Web Una pàgina web és un document del web (World Wide Web), normalment en format HTML/XHTML i amb extensions de fitxer .html o .htm. El seu contingut és hipertext amb hipervincles per facilitar la navegació d'una pàgina o secció a una altra.

6- Web Web és un vocable anglès que significa "xarxa", "teranyina" o "malla". El concepte s'utilitza en l'àmbit tecnològic per nomenar a una xarxa informàtica i, en general, a Internet (en aquest cas, sol escriure com a Web, amb la W majúscula). El terme, de tota manera, té diversos usos. A més de nomenar a Internet en general, la paraula web pot servir fer esment a una pàgina web, un lloc web o fins a un servidor web. Una pàgina web és un document que inclou un arxiu HTML amb text, imatges, vídeos, animacions Flash, etc. Al conjunt de pàgines web que solen formar part del mateix domini o subdomini d'Internet hi coneix com lloc web. Dins del lloc web, totes les pàgines guarden alguna relació entre si i estan vinculades mitjançant vincles (també coneguts com enllaços, hipervincles, links).

7- Servidor Web Els servidors web són aquells la tasca és allotjar llocs i / o aplicacions, les quals són accedides pels clients utilitzant un navegador que es comunica amb el servidor utilitzant el protocol HTTP (hypertext markup language). Bàsicament un servidor web consta d'un intèrpret HTTP que es manté a l'espera de peticions de clients i li respon amb el contingut segons sigui sol · licitat. El client, un cop rebut el codi, ho interpreta i ho exhibeix en pantalla. A més els servidors poden disposar d'un intèrpret d'altres llenguatges de programació que executen codi embegut dins del codi HTML de les pàgines que conté el lloc abans d'enviar el resultat al client. Això es coneix com programació de costat del servidor i utilitza llenguatges com ASP, PHP, Perl i Ajax. Els avantatges d'utilitzar aquests llenguatges rau en la potència dels mateixos

10

executant tasques més complexes com, per exemple accedir a bases de dades abstraient al client de tota l'operació.

executant tasques més complexes com, per exemple accedir a bases de dades abstraient al client de tota l'operació.

8- Funcionament d'una aplicació web Una aplicació web és un conjunt de pàgines web estàtiques i dinàmiques. Una pàgina web estàtica és aquella que no canvia. Quan un usuari la sol·licita, el servidor web envia la pàgina al navegador web sol·licitant sense cap modificació. Per contra, el servidor modifica les pàgines web dinàmiques abans de enviar-les al navegador sol·licitant. La naturalesa canviant d'aquest tipus de pàgina, és el que li dóna el nom de dinàmica.

9- Pàgines web estàtiques

Els dissenys web estàtics, són aquells llocs que apunten només a mostrar informació permanent sense que es pugui interactuar més enllà de la navegació amb la pàgina web visitada. Aquest tipus de dissenys web són incapaços de suportar aplicacions web com gestors de base de dades, fòrums, xats en línia, etc.

Els dissenys web estàtics són una excel·lent opció per a aquelles empreses on només volen mostrar informació sobre el seu perfil comercial, com ho són: qui som, on som, a què ens dediquem, els nostres serveis, etc.

El principal avantatge d'aquest tipus de disseny web és ser altament accessibles econòmicament. Sense deixar de ser dissenys fixos, tenen imatges i textos, però no necessiten de cap tipus de programació especial.

11

El dissenyador escriu totes les línies de codi HTML de la pàgina, abans de col·locar al servidor. Atès que el codi HTML no canvia un cop col·locat al servidor, aquest tipus de pàgina s'anomena estàtica.

Quan el servidor web rep una petició d'una pàgina estàtica, el servidor llegeix la sol·licitud, localitza la pàgina i l'envia al navegador sol·licitant. La figura esquematitza el procés.

9.1- Característiques pàgina web estàtica Una pàgina web estàtica presenta les següents característiques:

Absència de moviment i funcionalitats. Absoluta opacitat als desitjos o recerques del visitant a la pàgina. Realitzades en XHTML o HTML. Per canviar els continguts de la pàgina, és imprescindible accedir al

servidor on està allotjada la pàgina. L'usuari no té cap possibilitat de seleccionar, ordenar o modificar els

continguts o el disseny de la pàgina al seu gust. El procés d'actualització és lent, tediós i essencialment manual. No es poden utilitzar funcionalitats com ara bases de dades, fòrums, etc.

10- Pàgines web dinàmiques Aquests tipus de dissenys inclouen a tots aquells llocs que li brinden al navegant la possibilitat d'intercomunicar dins de la pàgina, aquests dissenys web permeten crear aplicacions dins de la pàgina, com enquestes, fòrums, comentaris estil bloc, comandes en línia, etc.

El desenvolupament d'aquests dissenys web requereixen major complexitat a l'hora de crear-els, ja que necessiten de coneixements específics pel que fa a llenguatges de programació, com així també la creació i gestió d'una base de dades, ja que són llocs actualitzables periòdicament i en els quals es reflecteixen les eleccions o accions de l'usuari en qualsevol moment.

El gran avantatge amb què operen aquests dissenys web són la dinàmica i servei que ofereixen a través de la programació d'aplicacions específiques per a cada empresa i target de clients, proporcionant d'aquesta manera llocs web agradables i útils al moment de visitar-los.

12

10.1- Característiques d’una pàgina web dinàmica Per contra, una pàgina web dinàmica té les següents característiques:

Gran nombre de possibilitats en el seu disseny i desenvolupament. El visitant pot alterar el disseny, continguts o presentació de la pàgina al

seu gust. En la seva realització s'utilitzen diversos llenguatges i tècniques de

programació. El procés d'actualització és summament senzill, sense necessitat d'entrar

al servidor. Permet un gran nombre de funcionalitats com ara bases de dades,

fòrums, contingut dinàmic, etc. Poden realitzar íntegrament amb programari de lliure distribució.

Hi ha una àmplia comunitat de programadors que dóna suport desinteressat.

Compta amb un gran nombre de solucions predissenyades de lliure disposició.

11- Pàgines Web animades Els dissenys web animats, són aquells llocs on s'apunta a mostrar informació permanent però amb moviment, ja sigui a través de l'animació de menús, passi d'imatges o fotografies o animacions en l'accés a les diferents seccions del lloc web.

Els dissenys web animats poden ser desenvolupats enterament en Flash (encara que aquesta tecnologia ja no és tan utilitzada) o també utilitzar una combinació de llenguatges conjuntament amb aplicacions JQuery, que és el llenguatge que actualment utilitzem en aquest tipus de desenvolupaments.

Són una excel·lent opció per a aquelles empreses en les quals es vol mostrar informació sobre el seu perfil comercial, però que alhora, necessiten aconseguir un impacte visual en els seus potencials clients, com per exemple, agències de models, fotògrafs, dissenyadors de modes, d'Interiors, d'exteriors, etc.

12- Web 1.0 La Web 1.0 (1991-2003) és la forma més bàsica que existeix, amb navegadors de només text bastant ràpids. Després va sorgir l'HTML que va fer les pàgines web més agradables a la vista, així com els primers navegadors visuals com ara IE, Netscape, Explorer (en versions antigues), etc.

13

La Web 1.0 és de només lectura. L'usuari no pot interactuar amb el contingut de la pàgina (res de comentaris, respostes, cites, etc.), Estant totalment limitat al que el Webmaster puja a aquesta.

Web 1.0 es refereix a un estat de la World Wide Web, i qualsevol pàgina web dissenyada amb un estil anterior del fenomen de la Web 2.0. És en general un terme que ha estat creat per descriure la Web abans de l'impacte de la febre punt com (. Com) el 2001, que és vist per molts com el moment en què l'internet va donar un gir.

12.1- Característiques Disseny d'elements a la Web 1.0 Alguns elements de disseny típics d'un lloc web 1.0 inclouen:

Pàgines estàtiques en lloc de dinàmiques per l'usuari que la visita. L'ús d'framesets o Marc. Extensions pròpies de l'HTML com el parpelleig i les marquesines,

etiquetes introduïdes durant la guerra de navegadors web. Llibres de visites en línia o guestbooks Botons GIF, gairebé sempre a una resolució típica de 88x31 píxels en

grandària promocionant navegadors web o altres productes. Formularis HTML enviats per correu electrònic. Un usuari omplia un

formulari i després de fer clic s'enviava a través d'un client de correu electrònic, amb el problema que en el codi es podia observar els detalls de l'enviament del correu electrònic.

13- Web 2.0 No hi ha definició consensuada, ja que es tracta d'una etiqueta per nomenar una tendència.

" Un fenomen social en relació amb la creació i distribució de continguts a Internet, caracteritzat per la comunicació oberta, la descentralització d'autoritat, la llibertat de compartir i utilitzar, dins d'un enfocament que tracta a les relacions humanes com converses "

Alberto Ortiz de Zárate Manual de uso del blog en la empresa. Infonomía.

14

13.1- Característiques Les aplicacions web de la nova era es caracteritzen per:

La plataforma és el web, es tendeix a utilitzar més que el mateix PC. Les dades són l'important, el 'Intel Inside'. Arquitectura de participació col·lectiva que formen les trucades xarxes

socials. Els desenvolupadors no pertanyen a grans empreses, són independents. Tot és sempre beta (es millora contínuament).

14- Web semàntica o Web 3.0 La Web semàntica (de l'anglès semantic web) és la "Web de les dades". Es basa en la idea d'afegir metadades semàntics i ontològics a la World Wide Web. Aquestes informacions addicionals-que descriuen el contingut.

L'objectiu és millorar Internet ampliant la interoperabilitat entre els sistemes informàtics usant "agents intel·ligents". Agents intel·ligents són programes en els ordinadors que busquen informació sense operadors humans. El precursor de la idea, Tim Berners-Lee, va intentar des del principi incloure informació semàntica en la seva creació, la World Wide Web, però per diferents causes no va ser possible. Per aquest motiu va introduir el concepte de semàntica amb la intenció de recuperar aquesta omissió.

15- Arquitectura Web L'arquitectura d'un lloc web té tres components principals: un servidor web, una connexió de xarxa, i un o més clients (navegadors). El servidor web distribueix pàgines d'informació formatada als clients que les sol·liciten. Els requeriments són fets a través de una connexió de xarxa, i per això s'usa el protocol HTTP.

15

15.1- Protocol HTTP El Protocol de Transferència d'Hipertext (Hypertext Transfer Protocol) és un senzill protocol client-servidor que articula els intercanvis d'informació entre els clients web i els servidors HTTP. L'especificació completa del protocol HTTP 1/0 està recollida en el RFC 1945. Va ser proposat per Tim Berners-Lee, atenent les necessitats d'un sistema global de distribució d'informació com el World Wide Web.

15.2- URL Un localitzador de recursos uniforme, més comunament anomenat URL (sigla en anglès de uniform resource locator), és una seqüència de caràcters, d'acord amb un format modèlic i estàndard, que s'usa per nomenar recursos a Internet per a la seva localització o identificació, com per exemple documents textuals, imatges, vídeos, presentacions digitals, etc.

15.3- HTML HTML (acrònim d'Hyper Text Markup Language, en català, "llenguatge de marcat d'hipertext"), és un llenguatge de marcat que deriva de l'SGML dissenyat per estructurar textos i relacionar-els en forma d'hipertext. Gràcies a Internet i als navegadors web, s'ha convertit en un dels formats més populars que existeixen per a la construcció de documents per a la web.

16- Modelatge de l'anàlisi per aplicacions web El modelatge d'anàlisi per a una aplicacions web es basa en la informació que contenen els casos d'ús desenvolupats per a l'aplicació. Les descripcions dels casos d'ús s'analitzen gramaticalment per identificar potencials classes de anàlisis i les operacions i atributs associats amb cada classe. S'identifica el

16

contingut que presentarà la aplicacions web i s'extreuen les funcions que es desenvoluparan a partir de les descripcions de cas d'ús.

Anàlisi de contingut: Identifica tot l 'espectre del contingut que oferirà les aplicacions web. El contingut Inclou text, gràfiques i imatges, així com activitats de vídeo i àudio.

Anàlisi d'Interacció: descriu com interactua l'usuari Amb la aplicacions web.

Anàlisi de Funcions: Defineix els Operacions que s'aplicaran al contingut de la aplicacions web i descriu Altres Funcions de processament, Independents del contingut però necessàries per a l'usuari final.

Anàlisi de Configuració: Descriu l'ambient i la infraestructura a la qual resideix la aplicacions web.

16.1- Anàlisi D’aplicacions Web Establir els requisits tècnics necessaris per produir l'aplicació, identificar els elements del contingut a incorporar i definir els requisits del disseny gràfic (estètica). Es poden identificar quatre tipus d'anàlisi:

Anàlisi del contingut. Descriure l'espectre complet de contingut a incloure (com ara text, gràfics, imatges, vídeo i so). Es poden utilitzar eines de modelatge de dades.

Eines a utilitzar:

Diagrama d'arbre de dades. Diagrama de classes.

Anàlisi de la interacció. Descriure la interacció entre l'usuari i l'aplicació web. Es poden fer servir casos pràctics.

Eines a utilitzar:

Diagrama de casos d'ús. Diagrama de seqüència. Diagrama d'estat. Propotips d'interfície d'usuari.

Anàlisi funcional. Descripció detallada de totes les funcions i operacions a realitzar en el lloc per part dels visitants.

17

Eines a utilitzar:

Diagrama d'activitat.

Anàlisi de configuració. Descripció detallada de l'entorn i de la infraestructura on resideix l'aplicació (Internet, Intranet o Extranet). Indicar la infraestructura dels components i el grau de la utilització de la base de dades per generar el contingut.

Eines a utilitzar:

Diagrama de desplegament.

16.2- Disseny D’aplicacions Web El disseny es pot subdividir en:

Disseny arquitectònic. Definir l'estructura global hipermèdia per a l'aplicació. Es recomana incloure diagrames que mostren l'estructura (lineal, reticular, jeràrquica o de xarxa) de l'aplicació.

Disseny de navegació. Definir les rutes de navegació que permeten a l'usuari accedir al contingut i als serveis. Les opcions de navegació han de ser consistents en totes les pàgines. Cal escollir enllaços de navegació adequats per al contingut, establir les convencions i suports adequats, per exemple les icones i enllaços gràfics han de tenir un aspecte «clickable (capacitat de accedir)». Es recomana dissenyar ajudes per a la navegació com ara mapes de lloc, taules de contingut, mecanismes de recerca i serveis dinàmics d'ajuda.

Eines a utilitzar (opcional): Diagrama de USN (Unitat Semàntica de Navegació

Disseny de la interfície. Dissenyar una interfície que sigui consistent en totes les pàgines, com ara colors, tipus de lletra, posició de les opcions de navegació, etc. Unes línies generals de disseny són:

Considerar la probabilitat d'errors del servidor. La lectura a la pantalla és més lenta que llegir una còpia impresa, per tant

no obligar a l'usuari a llegir grans volums de text a monitor. Evitar símbols «sota construcció» ja que aixequen expectació i

provoquen un enllaç innecessari. Evitar que l'usuari hagi de recórrer la pantalla (en el possible), la

informació important ha d'estar a la vista. Els menús de navegació i les barres de capçalera s'han de dissenyar de

manera consistent i han d'estar disponibles en totes les pàgines. Considerar que l'estètica no substitueix la funcionalitat.

18

Les opcions de navegació han de ser òbvies, fins i tot per a l'usuari casual.

En el disseny de la base de dades incloure:

Normalització. Diagrama Entitat-Relació (E-R). Integritat referencial. Cardinalitat.

16.3- Metodologies de disseny web En l'actualitat són poques les metodologies existents que permeten als desenvolupadors aconseguir productes de programari hipermèdia reusables i fàcils de mantenir.

Tot i això, ha nascut una tendència a considerar el desenvolupament hipermedial amb un enfocament de procés d'enginyeria (del programari), de manera que ja s'han proposat algunes metodologies per a aquesta finalitat.

Una d'elles és OOHDM (Object Oriented Hypermedia Design Method), la qual serà analitzada amb el principal objectiu d'identificar els seus avantatges, desavantatges i la seva real aplicació a aquest tipus d'aplicacions.

17- OOHDM OOHDM és una metodologia orientada a objectes.

El seu procés de desenvolupament té 5 fases on es combinen notacions UML i altres pròpies de la metodologia.

Abans OOHDM era només per a aplicacions com

CD-ROM promocionals Enciclopèdies Museus virtuals

19

17.1- Fase 1: Obtenció de requeriments L'eina en la qual es fonamenta aquesta fase són els diagrames de casos d'usos, els quals són dissenyats per escenaris amb la finalitat d'obtenir de manera clara els requeriments i accions del sistema.

17.2- Fase 2: disseny Conceptual Es construeix un model orientat a objectes que representi el domini de l'aplicació utilitzant les tècniques pròpies de l'orientació a objectes.

La finalitat principal durant aquesta fase és capturar el domini semàntic de l'aplicació tenint en compte el paper dels usuaris i les tasques que desenvolupen.

El resultat d'aquesta fase és un model de classes relacionades que es divideix en subsistemes.

Productes: Diagrama de classes, Divisió en subsistemes i relacions Eines: Tècniques de modelat OO, patrons de disseny Mecanismes: Classificació, agregació, generalització i especialització Objectiu de disseny: Model semàntic de l'aplicació

17.3- Fase 3: Disseny navegació L'estructura de navegació d'una aplicació hipermèdia està definida per un esquema de classes de navegació específica, que reflecteix una possible visualització escollida.

En OOHDM hi ha una sèrie de classes especials predefinides, que es coneixen com classes navegacionals:

Nodes Enllaços Estructures d'accés

› els menús › els índexs › Les guies de ruta

17.4- Fase 4: Disseny d'Interfície Abstracta Això consisteix en definir:

Quins objectes d'interfície va a percebre l'usuari

El camí en el qual apareixeran els diferents objectes de navegació

Què objecte d'interfície actuaran a la navegació

20

La forma de sincronització dels objectes multimèdia i la interfície de transformacions.

MODELS DE VISTES ABSTRACTES DE DADES (ADV): els models dels ADV no són més que representacions formals que s'usen per mostrar tot això.

17.5- Fase 5: Implementació Un cop complertes les 4 fases anteriors només queda portar els objectes a un llenguatge concret de programació.

Productes: Aplicació executable

Eines: L'entorn del llenguatge de programació

Mecanismes: Els oferts pel llenguatge

Objectiu de disseny: obtenir l'aplicació executable

18- Avantatges Una separació clara entre el conceptual, el navegacional i el visual.

Aquesta independència fa que el manteniment de l'aplicació sigui molt més senzill.

Fa un estudi profund dels aspectes d'interfície, essencial no només en les aplicacions multimèdia, sinó que és un punt crític en qualsevol dels sistemes que es desenvolupen actualment.

Fa ús també de l'orientació a objectes i d'un diagrama tan estandarditzat com el de classes, per representar l'aspecte de la navegació a través de les classes navegacionals.

19- Desavantatges Ha deixat fora del seu àmbit un aspecte essencial que és el tractament de la funcionalitat del sistema.

No ofereix cap mecanisme per treballar amb múltiples actors.

20- Exemple pràctic "All Horizons" és una empresa que ofereix serveis de capacitació a diferents empreses a nivell nacional. El seu principal fort són els cursos i seminaris relacionats amb temes informàtics. La idea és desenvolupar un lloc "web" que sigui capaç d'oferir informació en forma intuïtiva dels cursos i seminaris que s'imparteixen. A més seria òptim agregar petites funcionalitats, com ara,

21

permetre als usuaris baixar els textos i documents relacionats amb el curs que han pres o donar-els la possibilitat de veure la seva nota obtinguda en el curs.

20.1 Fase 1: Obtenció de requeriments Identificació de rols i tasques

rols: › Alumne:

Buscar informació sobre un curs Buscar informació sobre un professor Obtenir el material per a un curs

› potencial Alumne › Professor › Agent de Vendes › Secretària › Coordinador

Especificació d'escenaris

Buscant informació sobre un curs

Perquè un usuari decideixi prendre un curs, primer necessitarà obtenir informació sobre curs, tal com, el programa, el nom del professor, els horaris, etc.

Buscant un curs donat un tema

Els cursos hauran de poder buscar per tema si l'usuari és un programat, alguns temes d'interès per el seran per exemple, "C + +", "Visual Basic", Per a un administrador de xarxes dels temes d'interès seran "Firewalls", "Routers" , per tant els cursos hauran de ser classificats pel tipus d'usuari

Especificació de casos d'ús

Buscant un curs donat un tema Rols. Potencial Alumne, Agent de vendes.

Descripció:

1. L'usuari ingressa el tema o part d'ell.

2. L'aplicació retorna un conjunt de cursos relacionats amb el tema, l'usuari selecciona un curs.

22

3. Per al curs seleccionat, l'aplicació lliura el nom, el total d'hores, l'objectiu i les dates d'inici del curs. L'usuari, si vol, pot baixar la taula de continguts del curs.

Validació de casos d'ús i UIDs

En aquesta etapa, el desenvolupador ha de interactuar amb cada usuari per validar els casos d'ús i UIDs obtinguts, mostrant i explicant cada un d'ells per veure si el o els usuaris estan d'acord. L'usuari haurà intercedir només en aquells casos d'ús i UIDs en què participa.

20.2- Fase 2: Diseño conceptual

20.3- Fase 3: Disseny navegacional Per a cada UID es crearan diagrames de context i targetes d'especificació que detallen la informació continguda en el diagrama. A la següent figura es grafica el diagrama de context corresponent al UID del cas d'ús "Buscant un curs donat un tema".

23

Aplicació del disseny navegacional

20.4- Fase 4: Disseny d'interfície abstracta

24

20.5- Fase 5: Implementació Un cop acabades les etapes anteriors, el desenvolupador té un complet coneixement del domini del problema. A més d'això, té una idea bàsica de com es veuran les interfícies.

Per començar amb la implementació el desenvolupador haurà de triar on emmagatzemarà els objectes i amb quin llenguatge o eina desenvoluparà les interfícies, cal aclarir que generalment el desenvolupador s'encarrega del costat tècnic de la interfície, la part gràfica i el que li donarà la manera com apareix a la interfície serà el dissenyador gràfic.

25

21- Bibliografía http://gplsi.dlsi.ua.es/~slujan/materiales/pi-cliente2-muestra.pdf

http://www.reypastor.org/departamentos/dinf/enalam/dreamweaver/01internet.htm

https://www.lsi.us.es/docs/informes/LSI-2002-4.pdf

http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Historia-desarrollo-aplicaciones-web.html

http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web

http://desaplwebjnh.blogspot.com.es/2013/02/unidad-1-plataforma-web.html

http://kaory-sm.blogspot.com.es/

http://quinterosbellino.blogspot.com.es/2011/08/web-10-definicion-y-caracteristicas.html

http://quinterosbellino.blogspot.com.es/

http://www.juntadeandalucia.es/averroes/mochiladigital/didactica/introduccion_web20.pdf

http://neo.lcc.uma.es/evirtual/cdd/tutorial/aplicacion/http.html

users.dsic.upv.es/asignaturas/.../182000.doc

http://www.it.uc3m.es/pedmume/DAT/ficheros/12_WebML.pdf

http://www.slideshare.net/JUANMAZAMENDEZ/modelado-web

https://www.lsi.us.es/docs/informes/LSI-2002-4.pdf

http://es.scribd.com/doc/54223007/Modelado-Con-Uml-de-Aplicaciones-Web

http://sophia.javeriana.edu.co/~cbustaca/Arquitectura%20Software/Clases/Java%20EE5/presentaciones/Aplicaciones%20web.pdf

http://www.slideshare.net/MaritzaD/modelado-de-analisis-para-aplicaciones-web

http://www.slideshare.net/grialusal/modelado-conceptual-de-aplicaciones-web

http://ocw.udl.cat/enginyeria-i-arquitectura/enginyeria-del-software-iii/Continguts/1%20-%20Introduccion/2-Arquitectura.pdf

http://www.iadis.net/dl/final_uploads/200405c025.pdf