Vous êtes sur la page 1sur 27

MasterInfo

PROGRAMMATION WEB AVANCEE

Plisfsbapengwenl!
VincentPag vpage@univag.fr UniversitAntillesGuyane

Prsentation de l'EC

ModuleComplet:12hC/12hTD/12hTP=>12/0/24 Cettepartie:6hC/0hTD/12hTP Objectifducours:Conceptiond'applicationsWeb Planducours:


Rappelssurlessitesweb Notiond'architectureWeb Clientriches AJAX

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Introduction :
Deplusenplus,lesapplicationsprofessionnellesse construisentsurunearchitectureWeb.
Exemple:GestiondesclientschezOrange... (!=webservicenonabordici) Il s'agit d'applications client/serveur, le serveur centralisant des donnes pour de nombreux clients. Trois modles de dveloppement:

Application Web

ClientLourd(leclientfaittout,leserveurrpondauxrequtes) ClientLger(leserveurfaittout,leclientnefaitqu'afficher) ClientSemiLger/clientriche


(intermdiaireentrelesdeux.ex:AJAX) VincentPag vpage@univag.fr UniversitAntillesGuyane

Introduction :
Intrtdesmodlesclientlgers: Choix:client=navigateurWeb

Application Web

Aucunemaintenanceduclient. Interoprabilittotale(heu.....) Pour les entreprises, ces oprations de maintenances reprsentent80%dubudgetlogiciel... Interoprabilitpossibleencasde

RESPECTDESSTANDARDS
parlesconstructeursdenavigateurs parlesconcepteursdepagesWeb.
VincentPag vpage@univag.fr UniversitAntillesGuyane

Rappels sur les sites Web


Bonnespratiquesdeconception: Cahierdescharges. Fonctionnalits CharteGraphique. LangageXHTML+CSS(miseenforme) Testssurdenombreuxnavigateurs Sipossible,utiliserunCMSexistant Sipossible,utiliserunframeworkdedveloppement (danslestp,pasdeframeworkcarlongapprendre)
VincentPag vpage@univag.fr UniversitAntillesGuyane

Introduction :

conception d'une application Web


UneapplicationWebest...uneapplication! Maintenancedusitefaitepardesnoninformaticiens =>Prvoiruneinterfacedemaintenance(backend) pasderglesparticulires:programmation... uneseulergle:maximumd'infosdanslaBDD Biendistinguercequidoitetrepossibleounon. =>Tempsdedveloppementplusgrandpourlabackend(plus complexeengnral)

Introduction :

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Problmes pour les application Web

Introduction :

Technique: Chaqueactionchargeunenouvellepage =>Beaucoupdetrafic(siuneseulechosechange) =>Nechargerqu'unmorceaudepage??? Marketing: Pasforcmenttrsbeau(peud'animations...) =>RendrepossiblelesapindeNol(...)

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Remarques non techniques


10ans:Clientlourd=>applicationperso/pbd'interoperabilite 5ans:PriseencomptedesrecommandationW3C 4ans:ClientLger=>bonneinteroperabilit 2ans:apparitionduWeb2.0=>clientsriches... Retourenarriere?OUI(pourlatechnique) maisbienorchestrparlemarketingdegrossesentreprises =>invitable. =>Pourvous:Fairedesclientsrichespropres

Introduction :

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Problmes des clients riches


EntantquesiteWeb: Pasd'historiquedenavigation pasdebookmark Pbd'indexation. Pbd'accessibilit =>Onpeutpartiellementyarrivernanmoins.

Introduction :

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

quelques technologies clients riches


Ici:clientsriches=bellesapplications... Lesanciens(etsouventbasesdesnouveaux)
Flash/AppletJava/Javascript

Introduction :

Lesrcents:descriptiond'interfacexml
AdobeFlex:Duflash,avecunframeworkdedeveloppement(payant) OpenLazlo:duflashavecunframeworkopensource+serveurJava Xul(zoul):moteurderendu(javascript:dansfirefoxoustandalone)+scripts d'actionsenjavascript respectelesstandardsw3c... AJAX(pasvraimenttechnologiemaisrestesurunebasenav.Web) WinPF:CourcheprsentationchezMicrosoft.net3.0 Appolo:environnementd'execution/nouveaunavigateurchezadobe... VincentPag vpage@univag.fr UniversitAntillesGuyane

Ce cours
NousnouscantonneronsunesolutionAJAXsansframework: Domainehypertechnologique,volutionconstante,pasde visibilita3ans(bcpd'argentenjeu). Javascript:faitpartiedebeaucoupdesolutions. Client=navigateur(apeuprstous) Serveursanscontraintes(envoyerduxml/html) leframeworkpeutimposerdescontraintesserveur(GoogleWeb Toolkit

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Introduction AJAX
AJAXn'estpasunlangage.C'estunempilementde technologiespermettantderglerleproblme: Commentnerechargerqu'unepartiedelapage. AJAXsignifieAsynchronousJavascriptAndXML Encasd'action:
Javascriptdtectel'action faitunerequteauserveurquiluirenvoieunfichierXML. Javascriptmodifieledocumentpouryintgrerlecontenureu. lecotAsynchrone:lapagen'estpasbloqueenl'attentedu fichierxml
VincentPag vpage@univag.fr UniversitAntillesGuyane

Introduction AJAX
Pourlemomentrestreintjavascript (scurispourleclient) Ouvrelaportedevraiesapplicationswebsansla lourdeurdesappletsJava....
Beaucoupdejavascriptpour:

dclencherlesrequetes(xmlhttprequest) analyserledocumentxmlreu modifierledocumentaffich


VincentPag vpage@univag.fr UniversitAntillesGuyane

Javascript
Enfait,plutotECMAscript(standard) +diversesimplmentations:javascript,jscript... Pourquoijen'aimepasECMAscript: Implmentationsdiffrentesetincompatibles! (notezquecesontlesDOMquisontincompatibles) Votrenavigateurcomprendlesinstructionsdustandard +d'autres(innerHTML) =>onpeututiliserunframeworkpours'abstraire unpeudesproblmesd'incompatibilitjavascript
(ex:dojo/prototype,mochikit/Jquery,scriptaculous....)

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Javascript
Auseind'unepageHTML:baliseSCRIPT: <scripttype="text/javascript"> <! //Meslignesdecode > ou <scripttype="text/javascript"src="foo.js"></script> syntaxeprocheduC,C++.... variablesdclaresmaispastypes: vari,j,chaine,monTableau; Objectif:modifierlecontenudespagesWeb.... VincentPag vpage@univag.fr UniversitAntillesGuyane

Javascript
3Objetscreslorsqu'unepageestprsente: Window:dcritlafenetredunavigateur Navigator:contientlespropritsdunavigateur Document:Contientlespropritsetmthodesdela pageWeb. Chacunadespropritsetmthodesutiles... Avousdelesconnatre!
nepasutiliserlespropsdunavigatorpourlacompatibilit...
VincentPag vpage@univag.fr UniversitAntillesGuyane

Javascript et le DOM
Javascriptenluimemen'agitpassurledocument... IllefaitautraversduDOM LeDOM(DocumentObjectModel)seveutuneAPIpour lesdocumentshtmletxml... pourlemoment,DOM1,etDOM2... Fournitunereprsentationstructurelledudocumentetdes mthodespouraccdersoncontenuetsa prsentation. Lareprsentationdudocumentestcelled'unarbre. Ausommet,l'lmenthtml.....
VincentPag vpage@univag.fr UniversitAntillesGuyane

Exemple d'arbre selon le DOM

<TABLE> <TBODY> <TR> <TD>ShadyGrove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>OvertheRiver,Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE>

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Proprits des noeuds selon le DOM


ParentNode theparentnodeofthecurrentnode childNodes[n] retrievesthenthchildofthecurrentnode firstChild thefirstchildofthecurrentnode,ornothingifthere'snone lastChild thelastchildofthecurrentnode,ornothingifthere'snone nextSibling thenextsiblingofthecurrentnode,ornothingifthere'snone prevSibling theprevioussiblingofthecurrentnode,ornothingifthere'snone nodeType thenodetype,suchas"TR","IMG","TABLE",etc. attributes thenode'sattributeobjects nodeName thenameofthenode +nodeValue(silenoeudestdetypefeuille:dutexte)

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Javascript et le DOM
Oublieztouslesaccesendocument.all[""]ou document.layer.... Attrapezleselementsendocument.getElementById oudocument.getElementByTagName outoutemthodequidescenddansl'arbre! N'utilisezpasinnerHTMLmaisdesinstructionsqui modifientexplicitementleDOMtree... appendChild,createTextNode,removeNode....
VincentPag vpage@univag.fr UniversitAntillesGuyane

Javascript et le DOM
Exempledemanipd'unobjet:
Mettonsquenotrecodehtmlcontiennelalignesuivante: <pid="intro">Ceciestl'ancienparagraphe</p>

1.Onrepredanslecodel'elementparsonid(parexemple) varmonElement=document.getElementById("pgIntro"); 2.Onchangeunepropritdecetlment: monElement.style.fontSize="12pt"; ou monElement.innerHTML("Ceciestmonnouveauparagraphe"); (AttentioninnerHTMLesttrsdconseill) VincentPag vpage@univag.fr UniversitAntillesGuyane

Javascript et les evenements


Gestionnairesd'evenements: Liaisonentrelescriptetlesactionsutilisateurs:s'inserententantqu'attributs
d'untaghtml.Lavaleurdel'attributestlafonctionquigrel'venement.

onAbort(encasd'interruption) onBlur(enquittant) onChange(aprsmodificationrussie) onClick(encliquant) onDblClick(endoublecliquant) onError(encasd'erreur) onFocus(enactivant) onKeydown(enappuyantsurunetouche) onKeypress(enmaintenantunetouche appuye) onKeyup(enrelchantlatouche) onLoad(enchargeantunfichier)

onMousedown(enmaintenantlatouchedesourisappuye) onMousemove(enbougeantlasouris) onMouseout(enquittantl'lmentaveclasouris) onMouseover(enpassantsurl'lmentaveclasouris) onMouseUp(enrelchantlatouchedesouris) onReset(eninitialisantleformulaire) onSelect(enslectionnantdutexte) onSubmit(enenvoyantleformulaire) onUnload(enquittantlefichier)

Utilisablesenfonctiondestags...
UniversitAntillesGuyane

VincentPag

vpage@univag.fr

Javascript et les evenements


Unexemplevnement.(pbsecorsent)
voiluncodequifonctionne(pourdetrsmauvaisesraisons)avecIEetFirefox:
<htmlxmlns="http://www.w3c?.org/1999/xhtml"xml:lang="fr"> <head> <title>thisismytest</title> <scripttype="text/javascript"> <! window.onload=function(){alert("finchargementpage");} functiontestEvent(ev){ alert('Iwastriggeredas"type:"+ev.type); } > </script> </head> <bodyonclick="testEvent(event)"onmousemove="testEvent(event)"> <h1onclick="testEvent(event)">Titre</h1> </body> </html>

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Javascript et les evenements


Attention Accessibilit: Riennedoittreinaccessiblesansjavascript Riennedoitprendreencomptevoshabitudesavous =>doublezlesonclickavecdesonfocus... Compatibilit: lesevenementsnesontpasgrsdelamemefacon. (passaged'argument)=>framework! Surchargedegestionnaires: Unseulgestionnairewindow.onLoad=>ecras...
VincentPag vpage@univag.fr UniversitAntillesGuyane

Faireunerequeteauserveur:XMLHttpRequest
varxmlHttp=newXMLHttpRequest();//Firefox... xmlHttp.open("GET","monfichier.xml",true); xmlHttp.send(null); Savoirqueleserveurarpondu: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { .... } } Rcuprerlesdonnees; xmlHttp.responseTextouxmlHttp.responseXML+JavaScriptObjectNotation pourresponseXML:lirelesdonnes:compliqu=>sarissa vpage@univag.fr VincentPag UniversitAntillesGuyane

AJAX le dbut

Clients riches conclusion


Faitesdurichepropre! AJAX:EventuellementsiDOM... Encodant,ayezunexemplaireduDOMsousla main:
deuxDOM:leDOMxmletleDOMHTML(surcouche) Listedesmthodesdispoetorigine( DOM1:xml+htmlobsolte. DOM2:xml+html4.01ouxhtml1.0ok. DOM3:encours

VincentPag

vpage@univag.fr

UniversitAntillesGuyane

Dveloppement Web
mise en pratique Quelstypesdesolutionsexistent?
(sitestatique,sitestatiqueCMS,dveloppementnatif,dveloppementdansuncadredeframework) Quelscritrespermettentdechoisiruntypedesolution. commentlesitesemaintient(etquimaintient) choixdel'hbergeur. budget rutilisabilit/volutionnarit. besoinsendesignvolu. Quelstypedesolutions/infrastructurechoisiriezvouspour: danslecasouvoustes 1.Unparticulier 2.Unemicroentreprisededveloppementweb 3.Uneentreprisededveloppementweb. Pour LesiteWebdevotregroupederaggaprfr. LeforumtudiantdumasterInfo. lesiteofficieldumasterInfo SitedeventeenlignepourunePME UnsitedeventeenlignepourAmazone. Uneapplicationdegestiondestock unsitevitrinepourunartistepeintre

VincentPag

vpage@univag.fr

UniversitAntillesGuyane