web - web engineering

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

Tehnologii Web

Dr. SabinCorneliu BuragaFacultatea de Informatica

Universitatea “A.I.Cuza” – Iasi, Romania

http://www.infoiasi.ro/~busaco/



Interactiune & inginerie Web

AspecteAspecte privindprivind dezvoltareadezvoltarea aplicatiiloraplicatiilor WebWeb

DetaliiDetalii in in [[PSW, 197PSW, 197‐‐298298]] [TX, 299[TX, 299‐‐327327] [SW, 245] [SW, 245‐‐272]272]Vezi si G. Kappel et al. (eds.), Web Engineering,

Wiley & Sons, 2006



“Sa te stradui sa adaptezi intotdeaunamomeala pe gustul pestelui.”

Lloyd George



Inginerie WebPreliminarii

Aspecte de interesDezvoltare, testare & exploatareManagementul aplicatiilor Web

“Concluzii”

cuprins



Aplicatii Web ≡ sisteme software complexe,in evolutie permanenta

intro



Realitati privitoare la proiectele Webde anvergura:

neadaptare la cerintele de tip business (84%)intirzieri in lansare (79%)neincadrare in buget (63%)lipsa functionalitatii (53%)calitatea precara a aplicatiei (52%)

intro



intro

Asigurarea calitatii aplicatiilor Webcorectitudine & robustete (reliability) extindere & reutilizare (modularitate)

compatibilitateeficienta

portabilitateusurinta in utilizare (usability)



intro

Asigurarea calitatii aplicatiilor Webfunctionalitate

relevanta momentului lansarii (timeliness)mentenabilitate

securitate

alti factori:verificabilitate, integritate, reparabilitate, economie



Necesitati:scopuri & cerinte clar specificatedezvoltarea sistematica,in faze, a aplicatiilor Web

planificarea judicioasaa etapelor de dezvoltare

controlul permanent al intreguluiproces de dezvoltareWeb

intro

InginerieInginerieWebWeb



Categorii de aplicatii WebCentrate pe documenteInteractiveTranzactionaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic

aspecte de interes

Evolutia in timpa complexitatii



Centrate pe documente – document centriccontinut/pagini static(e): situri de companii, personale

Interactiveexpozitii virtuale, situri de stiri/calatorii

Tranzactionaleonline banking, solutii B2B (businesstobusiness), fluxuri de activitati (workflow‐uri)

Colaborativetele‐conferinteWeb, wiki‐uri, servicii elearning,servicii peertopeer – e.g., partajare de resurse

aspecte de interes



Orientate spre portalurilocalizare unitara a informatiilor: tehnice, de afaceri,…

De tip ubicuuservicii mobile bazate pe locatia utilizatorului, disponibile pe mai multe plaforme –Webul mobil

Web socialblog‐uri, spatii de lucru virtuale, filtrare colaborativa

Web semantic – modelarea cunostintelor pentru a fi“intelese” de calculatoare; sisteme de recomandare, management de cunostinte, mediatizare complexa etc.

aspecte de interes



Aspecte comune: stabilirea standardelor de calitate

licitare & negociere – aspect important: copyright‐uldocumentare

verificare & validaremanagement

cerinte

Vezi si initiativaCreative Commons:

www.creativecommons.org



Lipsa unei structuri reale (tangibile)Multi‐disciplinaritate

Necunoasterea publicului‐tinta realVolatilitatea cerintelor & constringerilor

Mediu de operare impredictibilImpactul sistemelor traditionale (legacy)

Aspecte calitative diferiteInexperienta vizitatorilorTermenul de lansare

aspecte specifice aplicatiilor web



Situl Web al unui muzician“To maintain and develop lasting relationships with fansof Robert’s music. In addition to being visually and

emotionally appealing and appropriate to Robert’s fan base,the site should be a reliable source for current informationon Robert’s activities and provide consistently updatedaudio and visual stimuli that encourage repeated visits

from fans.”

cerinte: exemplu



Punctele de plecare in dezvoltarea FlickrPresupuneri initiale (assumptions):

folosirea succesului blogging‐ului, partajarea nu doara insemnarilor, ci si fotografiilor (personale),

suport pentru realizarea de comentarii + tagging

Oamenilor le place sa‐si impartaseasca amintirile

Declaratia scopului (claim): “Flickr.com is almost certainlythe best online photo management and sharing application

in the world.” – pretindea Flickr in 2005

cerinte: exemplu



Privitoare la continut (audienta, context de navigare, preferinte, disponibilitate etc.)

InteractiuneWebCalitative (functionalitate, fiabilitate, utilizabilitate, eficienta, mentenabilitate, portabilitate)

Privitoare la mediul de executie – e.g., wirelessReferitoare la evolutieVizindWeb‐ul social – content mashup: “It’s yours to take, rearrange and reuse”

noi tipuri de cerinte



intrebare

In ce mod dezvoltam o aplicatie Web?



Uzual, se recurge la o metodologie

Se prefera abordarile conduse de modele(modeldriven development)

modelare



Metodologii orientate spre:Date: RMM (Relationship Management Methodology), Hera, WebML

Hipertext: HDM (Hypertext Design Model), WSDM (Web Site Design Method)

Obiecte: OOHDM (ObjectOriented HDM), UWE (UMLbased Web Engineering), OOWS (ObjectOriented Web Solutions)

Software: WAE (Web Application Extension)

modelare



Robert Baxley



Jesse Garrett



Calitatea aplicatiilor Web este influentatade arhitectura pe care se bazeaza

Dezvoltarea unei arhitecturi software ia in calcul:cerinte functionale – impuse de clienti, vizitatori,…factori calitativi – vizind performanta, reutilizabilitatea, scalabilitatea etc.

aspecte tehnice – OS,middleware, sisteme legacy,…experienta – recurgerea la arhitecturi existente, pattern‐uri, management de proiecte etc.

arhitecturi



Arhitecturi Web generice – componente:Client(i)FirewallProxyServer(e) WebServer(e) de baze de dateServer(e) de continut multimediaServer(e) de management al continutuluiServer(e) de aplicatiiAplicatii traditionale (legacy)

arhitecturi



Designul informatiilor (information design)Initial, doar authoringAspect important: arhitectura informationala(IA – Information Architecture)

dezvoltare

Detalii la master,in cadrul cursuluiInteractiune om

calculator



Designul informatiilorPresentation design – proiectarea interfetei Web

la nivel de pagina (document)la nivel de sit/aplicatieindependenta de platforma & dispozitiv

dezvoltare



Designul informatiilorStructura generala a unui sit Web:

Pagina de start (home page)Sumar & scop, tipul continutului,…Ofera maniere de parcurgere

Paginile subiectelor principaleSectiuni importante ale sitului

Paginile subsidiareDivizeaza continutul, ofera acces la resurse etc.

dezvoltare



dezvoltare



Designul informatiilorPresentation designLayout – facilitat de template‐uriFluxul vizual (flow) – focalizarea atentieiCromaticaAspecte privind continutul – text, imagini, animatii, video, hipermedia, 3DWeb typography, grafica raster vs. vectoriala,streaming, accesibilitate, internationalizare,…

dezvoltare



dezvoltare



Designul informatiilorInteraction design – proiectarea interactiunii

HTML DHTML applet‐uri/ActiveX FlashSuita de tehnologii AJAX

Mentinere, reutilizare, scalabilitate, extensibilitateProiectarea navigarii – semantici diferite ale legaturilor: navigare, download, procesare, asociere de meta‐date

dezvoltare



Designul informatiilorInteraction design

Strategii de navigare: meniuri (orizontale si/sauverticale), legaturi conexe, paginari, cele mai recente pagini vizitate, harta sitului(site map), cautare interna in cadrul sitului, contextuala (e.g., breadcrumb navigation), navigare sociala & bazata pe termeni de continut(tag‐uri), navigare cartografica, 3D,…

dezvoltare



Asigurarea interactiunii bogate cu utilizatorul

AJAX – Asynchronous JavaScript And XML(Jeese James Garrett)

dezvoltare



O suita de tehnologii deschise:limbaje standardizate de structurare/prezentare a datelor (XHTML, CSS)

redare & interactiune via standardul DOMinterschimb & manipulare de date prin XML, JSON (JavaScript Object Notation) sau HTML

transfer asincron de date via XMLHttpRequestprocesare prin ECMAScript (JavaScript)

dezvoltare: ajax



Componenta de baza: obiectul XMLHttpRequestDisponibil la nivel de browser Web via ECMAScriptPermite realizarea de cereri HTTP (e.g., GET & POST) dintr‐un program rulind la nivel de client (browser) spre o aplicatie de pe server, intr‐un mod asincron

Paginilor Web nu mai trebuie reincarcate complet, continutul lor XHTML fiind manipulat prin DOM

Uzual, datele vehiculate intre programele client si server sunt modelate in XML

dezvoltare: ajax



Componenta de baza: obiectul XMLHttpRequest

In curs de standardizare la Consortiul Web(last working draft – aprilie 2008)

http://www.w3.org/TR/XMLHttpRequest/

dezvoltare: ajax



Client Client ((browserbrowser))

Server Server WebWeb

XMLHttpRequestXMLHttpRequest Server Server aplicatiiaplicatii

open (“GET”)

open (“POST”)send (...)

DOMDOM

Fereastra navigatorului Datele XML (pe server)

dezvoltare: ajax – exemplu

Verificareaexistenteiunui cont pe server



dezvoltare: ajax – exemplu

Verificareaexistenteiunui cont pe server

Client Web(utilizator)

Server Web(aplicatie)

Instantiereobiect XHR

Cerere HTTP

Alte actiuni

Raspuns HTTP

Procesari

Procesarearaspunsului

Alterare DOM al paginii Web

SurseSurse de date

BD/XML



Metode importante oferite de XMLHttpRequestopen () – initiaza – deschide – o conexiune HTTP cu serverul, trimitind o cerere (GET, POST,…)

send () – transmite (asincron) date, spre aplicatiarulind pe server – uzual, se vehiculeaza date XML

abort () – abandoneaza transferul curentsetRequestHeader () – specifica anumite cimpuride antet HTTP

dezvoltare: ajax



Proprietati de baza ale XMLHttpRequestreadyState – codul de stare a transferului(e.g., 4 ≡ transfer efectuat complet)

status – codul de stare HTTP: 200 (Ok), 404 (Not Found), 500 (Server Error) etc.

statusText – mesajul coresp. codului de stare HTTPonreadystatechange – specifica functia ce va fi invocatala modificarile de stare ale transferului de date dintre server si client

dezvoltare: ajax



Indicarea “virstei” (modificarii) informatiei afisateYellow Fade Technique, FAT (Fade Anything Technique)

Reimprospatarea periodica a continutuluiAnticiparea download‐urilor(pre‐incarcarea datelor ce vor fi solicitate)

Auto‐completarea datelor (completion, suggest)Validarea datelor introduse de utilizatorEfectuarea de operatii drag & dropDezvoltarea de componente de interfata Web (widgets), interactionind pe baza evenimentelor survenite

dezvoltare: ajax – utilizari



Evitarea incarcarii intregii paginiPro: se pot modifica doar fragmente de documentContra: bookmarking‐ul poate fi compromis

Distinctia dintre aplicatie Web si sit WebTrebuie sa primeze asteptarile (expectations)utilizatorului

Oferirea de alternative la AJAX, atunci cind suportul pentru acesta nu este implementat/activatGraceful degradation

Eliminarea paginilor de confirmare

dezvoltare: ajax – aspecte importante



Minimizarea traficului dintre browser si serverStabilirea unui mod de interactiune clar (interactiuneHTML versus AJAX versus aplicatie conventionala)

Evitarea confuziilor, prin adoptarea conventiilor de interactiuneWeb/clasica

Eliminarea distragerii utilizatorului (e.g., folosirea de animatii gratuite)

Adoptarea AJAX pentru cresterea utilizabilitatii, nu doar de dragul tehnologiei

dezvoltare: ajax – principii de proiectare



Instrumente – exemple reprezentative:La nivel de client (biblioteci JavaScript):

Dojo, Prototype, Rico, Script.aculo.us, YUILa nivel de server: AJAX ASP.NET (C#), CPAINT,

DWR (Java), HTML::AJAX (PHP), jMaki (Java), Mason (Perl), Ruby on Rails (Ruby), Sajax, Symphony (PHP), SWATO (Java), Taconite (Java),…

API‐uri specializate – e.g., Google AJAX Search APIDepanatoare JavaScript: Firebug (pentru Firefox),

Script Debugger (pentru IE, din Microsoft Office)

dezvoltare: ajax



AJAX ofera premisele invocarii asincrone de servicii Web in stilul REST, folosind POX (Plain Old XML),

JSON (JavaScript Object Notation) sauAHAH (Asynchronous HTML and HTTP)

dezvoltare: ajax



Furzizeaza suport pentru dezvoltarea de aplicatii Web hibride –mashups – ce combina continuturi multiple

intr‐o forma unitara pe baza API‐uri publice,fluxurilor RSS/Atom si serviciilor Web

A se vizita ProgrammableWeb.com

Detalii in [PW2, 183-242]

dezvoltare: ajax



Studiu de caz: Google AJAX Search APIAcces asincron la serviciile de cautare Google (resurse Web, video, blog‐uri etc.)

Transfer folosind JSON intre Google si paginaWebLa nivel de client, se ofera controale de cautare– e.g., obiectul GSearchControl

dezvoltare: ajax



Studiu de caz: Google AJAX Search APICautare asincrona via Google

function startCautare () {var sc = new GSearchControl (); // instantiere control de cautaresc.addSearcher (new GwebSearch ()); // cautam pe Websc.draw (rezultat); // stabilim containerul de redare a rezultatelorsc.execute ("Web social"); // executam o cautare

}…<body onload="javascript:startCautare ()">

<div id="rezultat" /></body>

dezvoltare: ajaxJavaScript



!!

ajax: demo



Designul functionalitatii (functional design)Paradigme de comunicareintre (module de) aplicatii

SOA – Service Oriented ArchitectureIntegrare la nivel de… dateaplicatieprocese de afaceri

dezvoltare



Implementarea propriu‐zisa

dezvoltare

Revezi o parte dintre cursurileanterioare…



Teste specifice in contextul aplicatiilor WebErori ale continutului (e.g., structura, meta‐date)Probleme la nivel de hipertext (e.g., broken links)Estetica interfetei Web – dificil de evaluat/testatGradul de independenta de dispozitiv (numar mare de dispozitive & caracteristici potentiale)

Utilizabilitate, accesibilitate, multi‐lingvismIntegrarea componentelorGradul de disponibilitate permanenta side flexibilitate (evolutie continua)

testare



Alte tipuri de testari: Privind performanta: incarcare, stressing, testare continua

Referitoare la securitateAutomate

testare



Documente (X)HTML – validator.w3.org, TidyDocumente CSS

Documente XML – bine‐formatate / valideScript‐uri pe partea client (JavaScript)

Programe rulate la nivel de server (CGI, JSP, PHP,…)Integritatea si accesul la sistemul de fisiereIntegritatea si accesul la bazele de dateRezolvarea independentei de navigator

Prevenirea/solutionarea problemelor de securitateRezolvarea scalabilitatii aplicatiei Web

…

testare: exemplu – codul‐sursa



Disponibilitatea imediata & globala: 24 h × 7 zile, numar nelimitat de utilizatoriSuport permanent acordat clientilor

Includerea aplicatiei Web in fluxul de activitati(workflow‐ul) deja existent al organizatieiAsteptari: cresterea productivitatii, asigurareacalitatii, reducerea ciclurilor de activitati etc.

Efect posibil: redefinireaworkflow‐urilorContinua evolutie a aplicatiei Web

exploatare: aspecte de interes



Publicarea situluiServer dedicatFurnizor de gazduireWeb (hosting)Fara Under construction nicaieri!

Alegerea domeniului (poate reflecta brand‐ul)“Batalia” numelor de domeniiServicii de redirectionareUtilizarea de domenii “speciale”: .tv (Tuvalu), .fm (Federatia Micronezia) etc.

exploatare: aspecte de interes



Numele sitului “legat” de numele organizatieiAnunturi publicitare catre toti clientii, furnizorii etc. Affiliate marketing (schimb de banner‐e, pay per click,…)SEM (Search engine marketing)

inscrierea la motoare de cautareoptimizarea pentru motoarele de cautare(SEO – search engine optimization)

Contentrelated marketing (e.g., Google AdWords)Folosirea tehnologiilor Web‐ului social

exploatare: promovarea



Mentinerea (administrarea) continutuluiobtinerea, crearea, pregatirea, managementul,

prezentarea, procesarea, publicarea si reutilizareacontinuturilor in maniera sistematica si structurata

Puncte de vedere:organizational

tehnicreferitoare la utilizator

exploatare



In nivel organizational: Managementul cunostintelor(knowledge management)

Managementul relatiilor cu clientii(CRM – Client Relationship Management)

Planificarea resurselor(ERP – Enterprise Resource Planning)

Managementulworkflow‐urilor + business rulesIntegrarea aplicatiilor(EAI – Enterprise Application Integration)

exploatare: management



In nivel tehnic: Managementul continutului de catre personalnon‐tehnic, asigurindu‐se separatia dintrecontinut, structura si presentare

sisteme de management al continutului(CMS – Content Management Systems)

instrumente colaborative(e.g., enterprise wiki)




Privind utilizatorul:Asigurarea consistentei designuluiOferirea de continut in mai multe limbiUtilizabilitateMediatizare, agregare, mixareCresterea performantei (e.g., caching)“8090% of the enduser response time is spent on the frontend” – a se consulta Steve Souders, High Performance Web Sites, O’Reilly, 2007




Usage analysisMetode explicite (offline) vs.metode implicite (online)

Metode explicite – bazate pe date oferite de utilizatorExemple: chestionare, analiza mesajelor de email

exploatare: analiza utilizarii



Usage analysisMetode implicite (online) – colectarea automata

Construirea profilului utilizator: Web usage miningAnaliza fisierelor de jurnalizare a accesului(e.g., access.log la Apache, awstats,…)

Masurarea popularitatii sitului (viteza de incarcare, numarul de accesari, timpul de vizitare, numarulde banner‐e vizualizate,…) – legaturi spre situri de monitorizare/raportare (e.g., Google Analytics)

exploatare: analiza utilizarii



Parametrii unui proiect Web:Obiectiv principalResurse umane

DurataCost

AbordareTehnologiiProceseRezultat

Profilul echipei

management



Parametrii unui proiect Web:

Obiectiv principalcrearea unui produs utilizabil in cit mai scurt timp posibil

management




Resurse umaneuzual, 3‐9 indivizi

management




Durata~3‐6 luni

management




Costde ordinul miilor de dolari

management




Abordaremetode agile, asamblare de componente, prototipizare

management




Tehnologiibazate pe componente, proiectare/programare vizuala,

multimedia etc.

management




Proceseadhoc (“agile”)

management




Rezultatreutilizabilitate mare, componente standard,

aplicatii uzual standardizate

management




Profilul echipeidesigneri multimedia, programatori Web,

specialisti in marketing si/sau relatii cu publicul

management



Personal – aplicatii Web de anverguraManagement: Site editor, Project managerDezvoltare: System architect, Creative lead, Security architect, Data (DB/XML) modeler & developer, Component developer, UI developer, Graphic artist(s), HCI engineer

Programare: Serverside programmers, Clientside programmers, Data/component integration programmers

Testare: Testing lead, Component tester, Application integration tester

management: personal



Personal – aplicatii Web de anverguraOperatii tehnice asupra serverului Web: Webmaster, Hardware & network technicians, Network admin., Backup operator, Database admin., Uptime monitor, Security monitor

Marketing: Content producers & editors, Branding & advertising experts, Direct emarketer


Strategii: inhouse, outsourcing (offshore), nearshore



Conform statisticilor SiteMap (2006/2007)



Componenta tipica:




Caracteristici: multidisciplinaritate

paralelism al activitatilordimensiuni reduse




Web Designer: mainly a frontend developer

graphics applications, (X)HTML, CSS, crossbrowser compatibility, experienta in design vizual, cunostinte privind interactiuneaWeb, JavaScript,…




Web Developer: mainly a backend developer

cel putin 1 limbaj obiectual, serverside scripting, protocoale & standarde Internet/Web,

cunostinte de baze de date, expertiza in tehnologii XML,familiaritate cu sisteme CMS/wiki,cunostinte privitoare la SOA,…




Web Technician: junior Web developerasistent (ajutor) al webmaster‐ului,designerului sau dezvoltatorului Web

in formare de abilitati

Web Maintainer: maintains informationactualizeaza continutului disponibil pe Web

via o interfataWYSIWYG, uzual




Evidenta riscurilor – factori importanti:Definirea neclara a obiectivelorFocalizarea asupra unei audiente nereprezentative(e.g., conducerea organizatiei)

Structura bazata pe organigramaLipsa consistentei datorata outsourcing‐uluiLipsa bugetului alocat mentenantei

management



Evidenta riscurilor – factori importanti:Preluarea inflexibila a continutuluidin surse de documente traditionale

Lipsa navigariiNeintelegerea diferentei Internet/intranetMarketing vs. usabilitySubestimarea semnificatiei prezentei pe Web

management



Supravietuirea dupa dezastruCampania negativa“Niciodata nu critica adversarii!”

Probleme de securitatePromptitudinea

Loadbalancing (servere multiple)Replicarea datelor importanteRealizarea copiilor de siguranta

management

Construireaunui

“dark site”



Optimizarea sitului (implicit a designului) are loc permanent

Fenomenul perpetual betaa se vizita The Museum of Modern Betas:

http://momb.socio-kybernetics.net/

Situl trebuie sa reactioneze in timp‐realla interactiunea cu utilizatorul

“concluzii”



Un numar tot mai mare de servicii populare disponibile online se bazeaza pe continut generat de utilizatori

– conform Alexa.com (aprilie 2008):1. Yahoo! 2. Google 3. YouTube 4. Windows Live 6. MySpace7. Wikipedia 8. Facebook 9. Blogger 11. Orkut 13. Baidu

14. Microsoft 18. eBay 19. Hi5 26. PhotoBucket 28. Amazon29. IMDB 36. WordPress 39. Flickr 40. Friendster 48. DailyMotion56. LiveJournal 72. Apple 72. Deviantart 78. About 96. Download

necesitatea altor metode/tehnici de dezvoltareWeb

“concluzii”



Inginerie WebPreliminarii

Aspecte de interesDezvoltare, testare & exploatareManagementul aplicatiilor Web

“Concluzii”

rezumat



??

web - web engineering

Technology