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

… 1990 (novembre): s'instal·la el primer servidor web i es publica la primera

pàgina web. …

Figura : Tim Berners-Lee al costat d'una pantalla d'ordinador que mostra el seu primer navegador web

la primera pàgina web : http://nxoc01.cern.ch/hypertext/WWW/TheProject.html

Gràcies al desenvolupament de noveseines i tecnologies, les Aplicacions websón cada vegada més populars. Lafacilitat del seu desenvolupamentprovoca, de vegades, l'absència d'unaanàlisi i disseny correctes, però estanaconseguint reemplaçar les aplicacionssoftware tradicionals.

"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]

Model client-servidor› Un client demanda serveis o recursos a un servidor a

través d'una interfície, usant un protocol

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.

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.

Aquests tipus de dissenys inclouena tots aquells llocs que li brinden alnavegant la possibilitat d'intercomunicar dins de la pàgina,aquests dissenys web permetencrear aplicacions dins de la pàgina,com enquestes, fòrums, comentaris

estil bloc, comandes en línia, etc

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ó.

Des del punt de vista del creador de continguts:Web 1.0 = molts coneixements + tècnics dificultat d'allotjamentWeb 2.0 = pocs coneixement tècnics + moltes oportunitats d'allotjament

Des del punt de vista del navegant:Web 1.0 = Web de Lectura + IndividualPersones connectant-se a la web

Web 2.0 = Web de Lectura / Escriptura + SocialPersones connectant-se a persones - xarxes socials, wikis, col·laboració, possibilitat de compartir.

Hyper Text Transfer Protocol (Protocol de transferència d'hipertext).

S'usa per a la transmissió d'arxius d'hipertext (documents HTML i multimèdia) a Internet. És a dir, s'usa en cada transacció de la Web.

URL (Uniform Resources Location o "Localitzador uniforme de recursos").

És una seqüència de caràcters, d'acord a un format estàndard, que s'usa per nomenar recursos, com documents i imatges en Internet, per la seva localització.

Un servidor web és un programa que implementa el protocol HTTP). Aquest protocol pertany a la capa d'aplicació del model OSI i està dissenyat per transferir el que s'anomena hipertextos,

pàgines web o pàgines HTML: textos complexos amb enllaços, figures, formularis, botons i objectes incrustats com animacions o reproductors de música.

En Enginyeria Software, UML és un llenguatge estàndard de modelat per a aplicacions software

Diagrames UML per al modelat d'aplicacions› Casos d'ús› De classe› De interacció› D'estat› De activitat› De paquets

Desenvolupament de casos d'ús

› Coneguts també com "fas de funcionalitat“› Els casos d'ús es desenvolupen per a cada

categoria d'usuari descrita a la jerarquia d'usuari

El Modelatge d'Anàlisi per webapps • Activitats d'anàlisi: › Anàlisi de contingut › Anàlisi d'interacció › Anàlisi de funcions › Anàlisi de configuració

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.

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.

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

Eines a utilitzar:• Diagrama d'activitat.

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.

El disseny es pot subdividir en:

› Disseny arquitectònic› Disseny de navegació› Disseny de la interfície

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. Cal escollir enllaços de navegació adequats per al contingut, 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ó

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.› 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.

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 HypermediaDesign 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.

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

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.

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.

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

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ó 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ò.

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

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.

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.

"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, 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.

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

Buscant informació sobre un cursPerquè 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 temaEls 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

Escenaris especificats per usuaris en el cas d'estudis

Buscant un curs donat un temaRols. 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.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.

Cas d'ús Buscant un curs donat un tema

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.

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".

ADVs relacionades amb el cas d'ús "Buscant un curs donat un tema"

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.