AsmaBENLETAIFA

Janvier2015

Plan

Gnrationsduweb
Technologies
ApplicationsWeb
Architecturesdeservices
CloudComputing
MobileCloudcomputing

ABLSERTEL2014

2013

ABLSERTEL2014

2011

ABLSERTEL2014

2009

ABLSERTEL2014

ABLSERTEL2014

ABLSERTEL2014

Web1.0
PagesWeb
statique

Web1.5
WebDynamique

+BD
+systme_gestion_contenu

Web2.0
WebSocial
considrerContenuplusquelaspect

Web3.0
Web3D

+Appriches
+changesSOAP/XML
+websmantique

Web4.0
WebOS
Outilsuniquementenligne
Cloud/Virtualisation

ABLSERTEL2014

symbioticweb
readwriteexecutionconcurrency
web.
8

ABLSERTEL2014

ABLSERTEL2014

10

This is the First Generation of the Internet.

It was invented ay Al Gore.
This was promoted by AOL.
This primarily gives us information and nothing else.
There was only one web browser Mosaic
Read-only web
The early web provided a limited user
interactions or content contributions and only allowed to
search the information and read it.

ABLSERTEL2014

11

Web1.0

ABLSERTEL2014

12

ModleduWeb1.0

ABLSERTEL2014

13

ABLSERTEL2014

14

ABLSERTEL2014

15

ABLSERTEL2014

16

ABLSERTEL2014

17

ABLSERTEL2014

18

ABLSERTEL2014

19

ABLSERTEL2014

20

ABLSERTEL2014

21

Qq ex:notiondeClient_riche
Java1
SappuiesurdescontrlesnatifsdesOS(Windows,Mac,
Linux)
SurlabibliothquegraphiqueAWT:AbstractWindowing
Toolkit)

Java2
DesSwingslaplacedeAWT
LescomposantsSwingsrespectentdesdesignpatternde
laconceptionorienteObjet
ABLSERTEL2014

22

Typesdapplications
AppC/S
Avantages:Ergonomie
Problmes:Maintenance,dploiement,misejour

AppWeb
Avantages:delintraction
EllesreposentsurunTraitementmtier(ctServeur)etuneIHM
(ctClientlger:telquelenavigateurWeb)

AppRiches
Avantages:MixerErgonomieetIntraction
DetypesRIA:Rich InternetApplication
RDA:Rich DesktopApplication
Ex:JAva

ABLSERTEL2014

23

CONSISTOF3Parts

ABLSERTEL2014

24

RIA : Rich Internet Application

RDA : Rich Desktop Application

RIA
UtiliseunnavigateurpourlapartieIHMdelapplication
UtilisedestechniquesexistantesexAJAX(AsynchronesJavascript and
XML)
DveloppesenJavascript,DHTML,bibliothquesdecomposants(Yahoo
UI,Rico,Dojo)

RDA
Desapplicationswebquisexccutent surlebureausansnavigateur,
NcessitedesAPIsouunemachinevirtuelle,dessystmessousjacents
(DragandDrop,acc sau systmesdefichiers)
Ex:
AdobeAIR:AppFlex
JavaWebStart
Javaavecdessoclesapplicatifs:EclipseRCP:Java+SWT
Netbeans RCP:Java+Swing
(RCPrich Clientplateform)

ABLSERTEL2014

25

AppRiches
Fonctionnalit
Composantsgraphiquevolus
bandedemenu,onglets,grillesdedveloppement

Supportmultinavigateuraveclemmecode
Meilleurractivitgrceunraffrraissement partiel
delapage
viaXML,desrequteshttp

Intgrationdumultimdia
ducontenuriche

ABLSERTEL2014

26

AppRiches
Limites
Supportnoncomplet,nonhomogne
(HTML,CSS,)

IncompatibilitJavascript aveclesdiffrents
navigateurs
Lasauvegardedeltatreposegnralementsur
descookies

ABLSERTEL2014

27

TypesdeClients
ClientLourd
Logicieltlcharger
installer
mettrejoursurtouslespostessilyamisejour

ClientLeger

Navigateur
AppletJava(client)
Formulairesphp
Clienttelnet

Clientriche
Cotclient:desoutilsdeconceptiondIHM:dinterfacesgraphique
Ex:windows form c++ /formulaireVisualBasic
Lesapplicationsriches:windows form .Net/javaSwing deJ2EE/app Ajax
deWeb2.0:utilisentunchangedinformationentreC/Spourmettre
jourunepageWeb
ABLSERTEL2014

28

Richesseduneapplication

Interfacesriches
RDA,RIA
Client
Lourd

Siteweb

Appnatives,Java,XML,AJAX,HTML

ABLSERTEL2014

Client
Leger

29

MVCFrameworks

ABLSERTEL2014

30

MVC :modelviewcontroller
Lepatron modlevuecontrleur, toutcommeles
patrons modlevueprsentation ou Prsentation,
abstraction,contrle,estunmodledestin
rpondreauxbesoinsdesapplicationsinteractivesen
sparantlesproblmatiquesliesauxdiffrents
composantsauseindeleurarchitecturerespective.
Ce paradigme regroupelesfonctionsncessairesen
troiscatgories :
un modle (modlededonnes),
une vue (prsentation,interfaceutilisateur)
uncontrleur(logiquedecontrle,gestiondes
vnements,synchronisation)
ABLSERTEL2014

31

MVC
Le modle reprsentelecur(algorithmique)de
l'application :traitementsdesdonnes,interactionsavec
labasededonnes,etc.
Lavue:Ceavecquoil'utilisateurinteragitsenomme
prcismentla vue.Sapremiretcheestdeprsenterles
rsultatsrenvoysparlemodle.Sasecondetcheestde
recevoirtouteactiondel'utilisateur(hover,clicdesouris,
slectiond'unboutonradio,cochage d'unecase,entre
detexte,demouvements,devoix,etc.).
Lecontrleurprendenchargelagestiondesvnements
desynchronisationpourmettrejourlavueoulemodle
etlessynchroniser.Ilreoittouslesvnementsde
l'utilisateuretenclenchelesactionseffectuer.
ABLSERTEL2014

32

AJAX

ABLSERTEL2014

33

Web2.0
Web2.0wasdefinedbyDaleDoughertyin
2004asareadwriteweb
Thetechnologiesofweb2.0allow
assemblingandmanaginglargeglobal
crowdswithcommoninterestsin social
interactions.

ABLSERTEL2014

34

Howtobringtheexperienceofdesktopintobrowser
weatheritisofGraphicalpointofvieworUsabilitypointofview
suchasDragandDrop.

ABLSERTEL2014

35

ItshowshowWEB2.0applicationsexposesthefunctionalitysothatotherapps
canintegratetherefunctionalityprovidingamuchrichersetofapplications.

ABLSERTEL2014

36

ABLSERTEL2014

37

Web2.0appstendtointeractmuchmorewiththeenduser.
Heretheusernotjustonlyusetheapplicationbutistheparticipant
partofthissocialnatureofthisapplicationstheenduseristhemainpartoftheapps
byprovidingfeedback,allowingtheapplicationtoexpandbysocialmedia.
ABLSERTEL2014

38

AJAX- It has some key technology that is used web 2.0 application.
It is used for rich user experience
It works in any browser such as Firefox , opera , chrome.

Web Services- It is the key part of Web 2.0.

It need a language to make it easy to use the services.

Iteritive- It means you can very easily add features , develop it .

And get those applications updated.
It is because there are many end users and you have to be updated.
ABLSERTEL2014

39

Comparisonbetweenweb1.0andweb2.0

ABLSERTEL2014

40

ABLSERTEL2014

41

ABLSERTEL2014

42

Some Statistics Of WEB 2.0

NoofPresentUsers

AmountOfDataStored

TotalFacebookusercanbecome
4th largestcountryintheworld.

ABLSERTEL2014

43

ABLSERTEL2014

44

Web3.0
Web3.0orsemanticwebdesirestodecrease
humanstasksanddecisionsandleavethem
tomachinesbyprovidingmachinereadable
contentsontheweb.
InGeneral,web3.0isincludedtwomain
platforms,semantictechnologiesandsocial
computingenvironment.
ABLSERTEL2014

45

Web3.0isnotverydifferentfromthewebweknow
now.
Itisthemodificationofthepresenttechniques.

ABLSERTEL2014

46

Lewebsmantique
VersunWebsmantique:
Recherchesintelligentesderessourcespr
indexes
Travauxencourssurlesontologies,lesmtadonnes
Webdesdonnes

Coexistencedediffrentswebs:documentaire,
social,smantique

ABLSERTEL2014

47
47

Lewebsmantique

Constatdesinsuffisancesdu web1 :
absencededescriptionetdindexationdesressources
htrognitdesformats
pasdestructureexpliciteduweb:pasdexploitationdelasignification
desliensentrelesdocuments
Objectifsdenombreuxtravaux,depuis10ans:
meilleurestructurationduweb,exploitationsmantiquedelanature
duweb(SemanticWeb )...
Acteurprincipal:W3C

Diversitdesexpressions : websmantique , web3.0 , web

intelligent
VisiondeT.BernersLeedun webdesdonnes

ABLSERTEL2014

48
48

Lewebsmantique
L'informationetlesservicessurleWebsontaujourd'huipeu
exploitablespardesmachinesEtdemoinsenmoins
exploitablessansl'aidedesmachines

Lewebdedemain:
unvasteespaced'changesderessourcesentremachines
permettantl'exploitationdegrandsvolumesd'informationset
deservicesvaris,aidantlesutilisateursenleslibrantd'une
(bonne)partiedeleurtravailderecherche,etdecombinaison
decesressources

ABLSERTEL2014

49
49

ABLSERTEL2014

50

Abt 4billionuserswillbeusing
InternetonMobilePhones

TherewillbenoLargeComputers

Allthesedaytodayusingappliences will
connectedtointernet.
ABLSERTEL2014

51

ABLSERTEL2014

52

ABLSERTEL2014

53

ABLSERTEL2014

54

ABLSERTEL2014

55

ABLSERTEL2014

56

Comparisonbetweenweb2.0andweb3.0

ABLSERTEL2014

57

ABLSERTEL2014

58

ABLSERTEL2014

59

Rsum
Web1.0,2.0ou3.0 Dequeltypetesvous?
LeWebaparcourubeaucoupdechemindepuis1990.
Enpeudetemps,noussommespasssdepages
textuellessurfondgrisreliesentreellesl'aide
d'hyperliensversdesapplicationsrichesetintelligentes.
Sil'Internetpeuttreconsidrcommelarvolution
desdeuxderniresdcennies,leschangementseuxse
sontfaitsdansuncadrevolutif.L'undescomposants
lespluspopulairesd'InternetestvidemmentleWeb.
Cedernieraconnujusqu'maintenanttroisgrandes
priodesquisesuperposentetenrichissentlespriodes
prcdentes.Voicienimagel'volutionWebde1990
nosjours.
ABLSERTEL2014

60

LeWeb1.0 Diffusion
LesproducteursWebdiffusentdescontenusvers
lesusagers.Ilscrentdescontenusbasssurce
qu'ilspensentquelesgensveulent.Ils'agit
principalementdepagescomposesdetexteset
d'imagesreliesentreellesl'aided'hyperliens.

ABLSERTEL2014

61

LeWeb2.0 Collaboration
Lamiseenplacedenouvellesplateformespermet
auxusagersdecreretdepartagerdescontenus
Webriches.L'interactivitestlamode,l'usagerest
lafoisconsommateuretproducteurdecontenu.
Onvoitalorsapparatrelesblogues;la
baladodiffusion;lepartagedevidos,dephotoset
demusique;lesystmedetags;lesfilsRSS;ainsi
quelaprolifrationdesrseauxsociaux.

ABLSERTEL2014

62

ABLSERTEL2014

63

LeWeb3.0 Smantique
Danslesdixprochainesannes,nousconnatrons

leWebentempsrel,
l'interoprationnalit dessystmes,
l'intgrationaccruedesjeuxenligne,
desmondesvirtuelsetdesportails3Ddansl'ducation,lesentrepriseset
nosvies.

Laprsenced'agentsintelligentsetdewidgets permettraauxusagersde
personnaliserInternetselonleursintrtsetleursgroupesd'amisoude
relations.
L'usagerdevientconsommateur,producteuretdiffuseur.

ABLSERTEL2014

64

Web3.0
L'avnementduWebsmantiquevamodifierlamaniredefaire
desrecherchessurInternet.
Cellescineserontplussurlabasedemotscls,maissurla
comprhensiondulangageusueldechacunetpartirdu
comportementdel'usager.
Letraitementdesdonnesseferadeplusenpluspardesagents
intelligentsetdesapplicationsenligne.
Enfin,leWeb3.0seraunevolutionduWeb2.0avecdesservices
encorepluspousss,plusintuitifsetoleprincipedesmashups
seraexploitsaumaximumavecdessitesconcentrantun
ensembledeservices.
ABLSERTEL2014

65

ABLSERTEL2014

66

ABLSERTEL2014

67

ABLSERTEL2014

68

Web4.0
Web4.0willbeasareadwriteexecution
concurrencywebwithintelligent
interactions,butthereisstillnoexact
definitionofit.
Web4.0isalsoknownassymbioticwebin
whichhumanmindandmachinescan
interactinsymbiosis.
ABLSERTEL2014

69

ABLSERTEL2014

70

Google

les outilsgratuits, astucieuxetinnovants delagalaxieGoogle,

Lesoutilsde rechercheweb (requtessimples,avancesoucomplexes...);
Lesoutilsde bureautique (tableur,traitementdetexte...),de multimdia(stockage,gestionetretouchede
photos,cration3D...)etdepersonnalisation devotreordinateur(iGoogle,plugin,barred'outils...);
Lesoutils d'information (actualit,fluxRSS...),de communication (email,messagerie,blog...)
et d'vasion (cartographie,photossatellites...).
ABLSERTEL2014

71

ABLSERTEL2014

72

ABLSERTEL2014

73

Architecturedufutur:SOFEA
ServiceOrientedFrontEndArchitecture
Anarchitecturalstyleforwebapplicationsin
SOA(&Cloud)environments
SynonymouswithSinglePageWebApplications
LifeabovetheServiceTier
HowtoBuildApplicationFrontendsinaServiceOriented
World
ArchitecturalStyle
Notanimplementation
Prasad,etalproposethattheSOArevolutionhasleft
behind applicationfrontends/UIs
ABLSERTEL2014

74

SOFEAis now
Feasible because

Necessary because

1)MaturityoftheSOA
paradigm intheory and
Practice

1)SOAisthedefacto
delivery mechanism for
cloudbased services
(CloudandSOAare
complementary
technologies)

2)Advancements in
browserbased client
technologies,especially
JavaScriptbrowser
engines andAJAXtoolkits

2)Diversity ofclient
platforms
Growing
dominanceof
Mobileclients
ABLSERTEL2014

75

ABLSERTEL2014

76

ABLSERTEL2014

77

ABLSERTEL2014

78

MOBILE WEB
APPLICATION

ABLSERTEL2014

79

 Mobileweb

Appnative

ABLSERTEL2014

80

ABLSERTEL2014

81

Mobileapplications
APPOUWEBAPP?
Etsiapp,surquelle(s)plateforme(s)?
Quellessolutionsfacelamultiplicationdes
plateformes?

ABLSERTEL2014

82

ABLSERTEL2014

83

ApplicationsWeb
Lesframeworks /helpers JavaScript
Frameworks
jQuery Mobile
Sencha Touch
jQTouch (bassurZepto)
Jo
Frameworks minimalistes
Xui.jsZepto
Helpers
Modernizr
Initializr
PhoneGap

ABLSERTEL2014

84

Commentchoisirunframework ?
Besoin(utilisationdesfonctionnalitsde
lappareil,performance)
Platesformescibles
Licensing
Simplicit
Connaissance

ABLSERTEL2014

85

jQuery Mobile
Unframework WebpourSmartphoneet
tablettesdveloppparlafondationjQuery.
Unsystmedinterfacesutilisateursbassur
lHTML5.
Crpartirdesframeworks prouvsjQuery et
jQuery UI.
Lger,amliorprogressivement,possdeun
systmedethmessimpleetflexible.
http://jquerymobile.com/
ABLSERTEL2014

86

Simplicit/Connaissance
UtilisablesanscrireunelignedeJavaScript
http://jquerymobile.com/demos/1.1.0/
Possdedesoutilsgraphiquepourletheming
http://jquerymobile.com/themeroller/
Desoutilsdecrationdinterfacesexistent
http://www.codiqa.com/
ABLSERTEL2014

87

Sencha Touch
Unframework WebpourSmartphoneet
tablettesdveloppparlasocitSencha Inc.
Unsystmedinterfacesutilisateursbassur
lHTML5.
Bassurleframework WebSencha ExtJS.
Possdeunerichebibliothquede
composants.
http://www.sencha.com/products/touch/
ABLSERTEL2014

88

PhoneGap
PhoneGap estuneplateformeHTML5qui
permet,toutenutilisantdestechnologiesWeb,de
crerdesapplicationsnativesaccdantaux
diffrentesAPIetdisponiblessurlesstores.
http://phonegap.com/
PhoneGap estopensourceetgratuit.
PhoneGap peuttreutilispardesdveloppeurs
oudessocitspourdistribuerdesapplications
gratuites,commercialesoubienopensource.
ABLSERTEL2014

89

PhoneGap
Platesformessupportes:Android,iOS,
WindowsPhone,WebOS,BlackBerry,Symbian,
Bada.
PhoneGap estgnralementutilisavec
certainsframeworks JavaScript:Sencha Touch
jQuery Touch

ABLSERTEL2014

90

ABLSERTEL2014

91

Verslewebdesktop

ABLSERTEL2014

92

Lesapplisnatives?
Pasbesoinpour
Similaireaunatif(CSS+JS,Jo,Sencha Touch)
Golocalisation(fournieparlenavigateur)
Sons(HTML5)
Stockagepersistentctclient
(localStorage,WebStorage,WebSQL
Database,Lawnchair,PersistJS)
Notificationspushaveclappliouverte(Web
Sockets)
ABLSERTEL2014

93

Enrevanche,besoindesapplis
nativespour
Contacts
EnvoideSMS/MMS
Enregistrementdeson/vido
Photos(prise,modificationetaccsbibliothque)
Acclromtre/Magntomtre/Vibreur
Notificationspushaveclappliferme
Dunemaniregnrale,lescapacitsdupriphrique

ABLSERTEL2014

94

4Approches
Appli100%web
Appli95%web
ApplinativebaseHTML+CSS+JS:hybride
ApplinativebaseSDKplateforme:100%
native

ABLSERTEL2014

95

Applis100%web
HTMLpermetlastructurequonveut
CSSpermetlaspectquonveut
JSpermetlecomportementquonveut
Onalagolocalisation
Onaleson
Pourquoichanger?

ABLSERTEL2014

96

100%web:lesoutils
HTML5,CSS3(dontTransforms,Animations,
Transitions),JS
CSSMediaQueries
XUI,ZeptoJS
Jo,Wink,Sencha Touch
WebStorage,WebSQLDatabase,Lawnchair,
PersistJS
WebSockets,Socket.IO
ABLSERTEL2014

97

100%web:pour/contre
Avantages
Quedeschosesquonaimedj
Dveloppementdanstonnavigateur!
PasdAppStores,devalidations,de
dploiement
Inconvnients
Pasdaccslamajoritdescapacitsdes
priphriques

ABLSERTEL2014

98

Applis95%web
Lorsquelestechnoswebsuffisentlaspect,
maisquelecomportementrequiertenplusdes
fonctionsdupriphrique
Caslesplusfrquents:
Notificationspush
Vibreur
Acclromtre

ABLSERTEL2014

99

95%web:lesoutils
Lesmmesquepourle100%web
pluslesSDKnatifsouleurenrobage
unifi(voirapprochesuivante)

ABLSERTEL2014

100

95%web:pour/contre
Avantages
Presquetousceuxdu100%web
Accstouteslescapacitsdespriphriques
Inconvnients
AppStores,soumission+acceptation,
dploiement,etc.
Ilfautsefarcirlesdiffrentesplatesformes
cibles

ABLSERTEL2014

101

Applisnativesbases
HTML+CSS+JS:hybrides
Lepriphriqueestcensfairepartieintgrantede
lexprienceutilisateurquonrecherche
MaisctUI,lestechnoswebsuffisenttoujoursnos
besoins.
Besoinstypiques:
Manipulationdimages(prisedephoto,accs
albums)
Prisedeson(chataudio,identificationdemusique)
Accsaucarnetdadresses

ABLSERTEL2014

102

Hybrides:lesoutils
Phonegap
Titanium Mobile
Unify

ABLSERTEL2014

103

Phonegap
APIJavaScriptunifie,accessibledirectdanstes
pages
Fournitunaccsauxcapacitslocalesdu
priphrique
Camera/Contact/Device /Network/
Notification/
iPhone,Android,webOS,Symbian,Blackberry,
WP7
FaitparNitobi.Opensource.SurGithub.
ABLSERTEL2014

104

Titanium Mobile
APIJavaScriptunifie,maispasdanslespages
directement
Fournitunaccsauxcapacitslocalesdu
priphrique
Camera/Contact/Device /Network/Notification/

iPhone,Android
FaitparAppcelerator.MixOSS/commercial.

ABLSERTEL2014

105

Unify
Engros,Phonegap +qooxdoo +SASS
MaintenuparDeutscheTelekom.
OpensourcedepuisJSConf.eu2010.Sur
Github.
http://unify.github.com/unify/
(pasbienrfrencencore)

ABLSERTEL2014

106

UnmotsurlesSDK
LesimulateurAndroid met3plombes
dmarrer
LeSDKBlackberry netournequesur
Windows(?!)
LeSDKwebOS ncessiteuneVMVirtualBox
(bon)
Etpuissimulateurpriphrique!

ABLSERTEL2014

107

Date
build.phonegap.com
Enligne,gratuit
Tufilestonwww/,ilstesortenttonappli
packagepourchaqueplateformepriseen
charge!
apparat.io
Mmeprincipe,sortiedbut2011
ABLSERTEL2014

108

Hybrides:pour/contre
Avantages
Sionsedbrouillebien,oncodesonappli
uneseulefois,etonladploiesurlensemble
desplatesformesprisesencharge!
Inconvnients
Ilfautquandmmeinstaller/configurertous
lesSDKetoutilsassocis
ABLSERTEL2014

109

Dveloppementdapplications
mobilesnatives
Signification:utilisationdetechnologiesnatives,
dinterfacesnatives,doutilsnatifs,dAPInatives
Lessolutionsdedveloppementnatifssont
fournisparlesditeursdesdiffrentesplates
formes.
Chaquesolutiondisposedoutilsdesimulation.
ABLSERTEL2014

110

Dveloppementdapplications
mobilesnatives

ABLSERTEL2014

111

ABLSERTEL2014

112

Applis100%natives
OnutiliseleSDKnatifdelaplateforme,sonlangage,sonAPI
OnaaccslintgralitdesAPIdelaplateforme,donconpeutproposer
uneexprienceaussiricheetnativequonlesouhaite.
lesoutils
Bin,lesSDKs,quoi(tousgratuits):
iOS =Xcode (excellentesdocs)+iPhoneDeveloper
Programpourpouvoirdployersurpriph./store($99/an)
Android =Eclipse+Android SDK
webOS =SDK/PDK(basJava+JS)
Symbian =Aptana +SDK
Blackberry =Eclipse+SDK(maisqueWindows!)

ABLSERTEL2014

113

100%natives:pour/contre
Avantages
OnpeututiliserlatotaledesfonctionsduSDKet
dupriphrique
Ongarantit(sionveut)unL&Fnatif
Inconvnients
OndoitapprendrelAPI(voireunlangage),et
parfoispayerpouravoirledroitdedployer
(Apple/iOS,$99/an).
ABLSERTEL2014

114

Enrsum

ABLSERTEL2014

115

Ilestplusquetemps!
Laconsultationwebsurlesmobiles/tablettes/
etc.estentraindexplosercellesurdesktop.
Utiliserintelligemmentlescapacitsdu
priphriquespermetdespasserellessympa
(ralitaugmente,mediablogging,geo
blogging)
Touteslestechnossontutilisablespourlagrosse
majoritdumarchdessmartphones !
ABLSERTEL2014

116

MobileWebApplications

ABLSERTEL2014

117

MobileWebApplications
Whataremobilewebapplications?
Increasinglypopularwaytodelivercontentand
businessapplicationstomobiledevices
Alternativetodevelopingnativemobileapps
NoneedfordownloadandinstallationviaanAppStore
RunonanyOS,desktop,tablet,smartphone
RequirebrowserandInternetconnection

ABLSERTEL2014

118

MobileWebApplications
DevelopmentandDeployment
Easytodevelopusing standardwebtechnologiesandframeworks
Webappsareusedthroughawebbrowserwiththebulkoffunctionally
executedonthewebserver
AdvancesinHTML,CSSandJavaScriptallowforshiftingmorefunctionality
tothebrowser,providingricheruserexperienceandbetterperformance
Easytomaintainandeasyrolloutofupgrades

ABLSERTEL2014

119

MobileWebApplications
Limitations
Browsersdonottypicallyhaveaccesstoadvancedfunctionsofadevice,like
GPS,camera,addressbook,etc.*
Webappsareoftenslowerthannativeapps
MobilewebappsrequirepermanentInternetconnection
UsingofflinewebapplicationcachingandplatformslikePhoneGap,
Titanium,etc.provideswaystoaddresstheselimitations
*HTML5geolocation,FileuploadsandcameraaccesswithMediaCaptureandFileAPIiniOS6

ABLSERTEL2014

120

jQueryMobile
Overview
TouchoptimizedJavaScriptframeworkforsmartphones&tablets
BuiltonjQueryandjQueryUIfoundation
Unifieduserinterfacesystemacrossallpopularmobileplatforms
Lightweightsizeandminimalimagedependenciesforspeed
Responsivedesigntechniquesallowthesameunderlyingcodebaseto
automaticallyscalefromsmartphonetotabletanddesktopsizedscreens

ABLSERTEL2014

121

jQueryMobile
Overview
AJAXbasednavigationsystemtoenableanimatedpagetransitionswhile
maintainingbackbutton,bookmarkingandandcleanURLs
Supportfortouchandmouseeventstoallowfordifferentuserinput
methodsusingasimpleAPI
AccessibilityfeatureslikeWAIARIAintegratedthroughoutframework
Supportforscreenreadersandotherassistivetechnologies

ABLSERTEL2014

122

jQueryMobile
DifferencesbetweenjQueryandjQueryMobile
jQuery:LibrarythatmakesiteasiertowriteJavaScriptthroughselectors,
eventhandlingandsupportforAJAXrequests
jQueryMobile:
FrameworkbuiltontopofjQuery
Usedbydeveloperstobuildmobileinterfaces
CodingisdoneusingplainHTMLmarkupforthemostpart
jQueryMobileautomaticallyappliesstylesandaddfunctionalitytowidgets

ABLSERTEL2014

123

ABLSERTEL2014

124

QUELLESSOLUTIONSFACELA
MULTIPLICATIONDESPLATEFORMES?
ABLSERTEL2014

125

ABLSERTEL2014

126

ABLSERTEL2014

127

ABLSERTEL2014

128

ABLSERTEL2014

129

ABLSERTEL2014

130

ABLSERTEL2014

131

Iphone

ABLSERTEL2014

132

ABLSERTEL2014

133

ABLSERTEL2014

134

Android

ABLSERTEL2014

135

ABLSERTEL2014

136

blackberry

ABLSERTEL2014

137

ABLSERTEL2014

138

WindowsMobile/phone

ABLSERTEL2014

139

ABLSERTEL2014

140

Nokia

ABLSERTEL2014

141

ABLSERTEL2014

142

ABLSERTEL2014

143

Palm

ABLSERTEL2014

144

ABLSERTEL2014

145

Commentconcilierces
environnementshtrognes?
Unproblme,plusieurssolutions!

ABLSERTEL2014

146

ABLSERTEL2014

147

JavaME:unerponse?

ABLSERTEL2014

148

Frameworkdedveloppementcross
platform

ABLSERTEL2014

149

Frameworkdedveloppementcross
platform

ABLSERTEL2014

150

Compilationcroise

ABLSERTEL2014

151

Compilationcroise

ABLSERTEL2014

152

DveloppementWeb

ABLSERTEL2014

153

ABLSERTEL2014

154

ABLSERTEL2014

155

ABLSERTEL2014

156

ABLSERTEL2014

157

ABLSERTEL2014

158

ABLSERTEL2014

159

ABLSERTEL2014

160

Finalementquelledirectionprendre
?

ABLSERTEL2014

161

Demain:HTML5&CSS3

ABLSERTEL2014

162

ABLSERTEL2014

163

Dveloppementhybride

ABLSERTEL2014

164

But:offriruneplateformemobile

ABLSERTEL2014

165

ABLSERTEL2014

166

CLOUD COMPUTING

ABLSERTEL2014

167

TheriseofInternetscale
Applications

ABLSERTEL2014

168

Infrastructure/DataScale
Largescaleinfrastructure
Google:200+clusters,hundredsofthousands
machines
Facebook:2000+machines
Yahoo:34000+machines

Hugevolumeofdata(a.k.a.bigdata)
Google:20PBdataperday(2008)
Facebook:36PBofstoreddata,processing8090TB
perday(2010)
Yahoo:170PBdatastoredspreadacrosstheglobe.
Processing3PBperday(2010)
ABLSERTEL2014

169

CloudComputing

Amodeldesignedforrunninglargeapplicationsinascalableandcost
efficientmanner
Harnessingmassiveresourcecapacitiesinthecomputingplatforms,e.g.data
centers
Sharingresourcesamongapplicationsbasedonusageinanondemand fashion
Dynamicallyscalingupanddownserviceinfrastructures

Rolesinacloudcomputingenvironment
Cloudproviders(a.k.a.infrastructureproviders)
Serviceproviders
Endusers

ABLSERTEL2014

170

ABLSERTEL2014

171

CloudComputing

ABLSERTEL2014

172

CloudComputing:
What does it mean ?

ABLSERTEL2014

173

CloudComputing Hype Cycle

ABLSERTEL2014

174

ABLSERTEL2014

175

ABLSERTEL2014

176

ABLSERTEL2014

177

ABLSERTEL2014

178

ClientAgnosticism*

*:somethingthatisgeneralizedsothatitisinteroperableamongvarioussystems.
ABLSERTEL2014

179

ABLSERTEL2014

180

MOBILE CLOUD
COMPUTING

ABLSERTEL2014

181

MobileCloudComputing Overview

ABLSERTEL2014

182

KeySystemComponents

ABLSERTEL2014

183

ABLSERTEL2014

184

ABLSERTEL2014

185

PHP

ABLSERTEL2014

186

JAvascript

ABLSERTEL2014

187

ABLSERTEL2014

188

flex

ABLSERTEL2014

189

Ajax

ABLSERTEL2014

190

MobileWebApplications

ABLSERTEL2014

191

MobileWebApplications
Whataremobilewebapplications?
Increasinglypopularwaytodelivercontentand
businessapplicationstomobiledevices
Alternativetodevelopingnativemobileapps
NoneedfordownloadandinstallationviaanAppStore
RunonanyOS,desktop,tablet,smartphone
RequirebrowserandInternetconnection

ABLSERTEL2014

192

MobileWebApplications
DevelopmentandDeployment
Easytodevelopusing standardwebtechnologiesandframeworks
Webappsareusedthroughawebbrowserwiththebulkoffunctionally
executedonthewebserver
AdvancesinHTML,CSSandJavaScriptallowforshiftingmorefunctionality
tothebrowser,providingricheruserexperienceandbetterperformance
Easytomaintainandeasyrolloutofupgrades

ABLSERTEL2014

193

MobileWebApplications
Limitations
Browsersdonottypicallyhaveaccesstoadvancedfunctionsofadevice,like
GPS,camera,addressbook,etc.*
Webappsareoftenslowerthannativeapps
MobilewebappsrequirepermanentInternetconnection
UsingofflinewebapplicationcachingandplatformslikePhoneGap,
Titanium,etc.provideswaystoaddresstheselimitations
*HTML5geolocation,FileuploadsandcameraaccesswithMediaCaptureandFileAPIiniOS6

ABLSERTEL2014

194

jQueryMobile
Overview
TouchoptimizedJavaScriptframeworkforsmartphones&tablets
BuiltonjQueryandjQueryUIfoundation
Unifieduserinterfacesystemacrossallpopularmobileplatforms
Lightweightsizeandminimalimagedependenciesforspeed
Responsivedesigntechniquesallowthesameunderlyingcodebaseto
automaticallyscalefromsmartphonetotabletanddesktopsizedscreens

ABLSERTEL2014

195

jQueryMobile
Overview
AJAXbasednavigationsystemtoenableanimatedpagetransitionswhile
maintainingbackbutton,bookmarkingandandcleanURLs
Supportfortouchandmouseeventstoallowfordifferentuserinput
methodsusingasimpleAPI
AccessibilityfeatureslikeWAIARIAintegratedthroughoutframework
Supportforscreenreadersandotherassistivetechnologies

ABLSERTEL2014

196

jQueryMobile
DifferencesbetweenjQueryandjQueryMobile
jQuery:LibrarythatmakesiteasiertowriteJavaScriptthroughselectors,
eventhandlingandsupportforAJAXrequests
jQueryMobile:
FrameworkbuiltontopofjQuery
Usedbydeveloperstobuildmobileinterfaces
CodingisdoneusingplainHTMLmarkupforthemostpart
jQueryMobileautomaticallyappliesstylesandaddfunctionalitytowidgets

ABLSERTEL2014

197

ABLSERTEL2014

198

LES ARCHITECTURES
WEB SERVICES,SOAPREST

ABLSERTEL2014

199

ABLSERTEL2014

200

ABLSERTEL2014

201

ABLSERTEL2014

202

ABLSERTEL2014

203

ABLSERTEL2014

204

ABLSERTEL2014

205

ABLSERTEL2014

206

SANCE 2

Plan
HTML,CGI,PHP,DHTML,XML,XSL,Javascript
Eclipse,netbeans
Struts,hibernate,spring

Ajax,HTML5,CSS3
REST
JSON,jquery

Webservices
Reseaux sociaux(lab :inclureiconetwitter/facebook)
Cloud(lab :jelastic/google app Engine /)
Lab :Parse/tizen

ABLSERTEL2014

208

ABLSERTEL2014

209

LES BONS OUTILS POUR

COMMENCER INTGRER
VOTRE SITE WEB

HTML/CSS

ABLSERTEL2014

210

ABLSERTEL2014

211

Introduction
Pourdbuterdanslacrationdepagesweb,vous
aurezbesoindemettreenoeuvre deuxlangages
: HTML et CSS,quiserontrdigsl'aided'unlogiciel
nommditeur decodesource etsauvegardssous
formedefichierspossdantlesextensions.htmlet
.css.Ceuxciserontenvoysviaun logicielFTP qui
permetdepublierlesfichiersdepuisvotreordinateur
versleserveurweboilsserontstocksetmis
dispositiondesvisiteurs.Etenfinpourconsultervotre
siteilvoussuffirad'utiliserl'autrelogicielqu'est
le navigateurweb quiinterprtelescodessourceset
faitlelienentrevosdeuxfichiersHTMLetCSS.

ABLSERTEL2014

212

ABLSERTEL2014

213

LeslangagesHTMLetCSS
Cesdeuxlangagessecompltent,l'unposele
squelettedusitealorsquel'autrelemeten
forme.

ABLSERTEL2014

214

HTML
HyperTextMarkup Language (ou Langagedebalisage
hypertexte)
HTML,nen1994,estlelangageduWebparexcellence.C'estlui
quiindiqueaunavigateurdequoiestconstituelapagewebqu'il
estentraindeconsulter,tantauniveaudelalanguede
prononciation,desontitreetcontenu,maisaussietsurtoutdela
structureetdelafonctiondel'ensembledeslmentsquila
composent :paragraphes,citations,titres,listes,lienshypertextes,
images.Lafonction(smantique)deceslmentsest
dterminantepourlesnavigateurs,maisaussipourd'autresoutils
telsquelesmoteursderecherche,lesplagesBraille,les
imprimantes,etc.
Lesmdias(images,sons,vidos,fichierstlchargeables)nesont
pasintgrsdirectementauseindelapage HTML,maissont
"appels"parcelleci.Ilsdoiventfigurersurleserveurwebafin
d'tredisponiblesauxvisiteurs.

ABLSERTEL2014

215

CSS
Cascading StyleSheets (ou Feuillesdestylesen
cascades)

Lelangage CSS (nen1996)metenforme

le HTML maisnestructurepaslapageweb.Ilva
dcorerlesdiffrentslmentsdelapage,en
dfinissantunecouleurdefondpourunblocou
encoreunetailledepolicepouruntitre.Il
permettragalementdedimensionneret
positionnertousleslmentscommeonle
souhaitesurlapage,etdegrerladiffusiondes
informationssurungrandnombredesupports :
crand'ordinateur,maisaussismartphone,
imprimante,tlvision,email,etc.
ABLSERTEL2014

216

Lesoutilspourbiencoder
Avantdecommencerintgrervotre
maquette,ilfaudravousmunirdebonsoutils
pourdvelopperaumieuxvotrepageweb.
Deuxlogicielsvousserontalors
indispensables : unditeur HTML afinde
coderdemanirepropreetlisibleet un
navigateurweb pourafficherettestervotre
pageweb.
ABLSERTEL2014

217

diteursdecodesource
Les WYSIWYG (What you see is what you get)
Cesontdeslogicielsgnrantautomatiquementlecode
(HTML, CSS etJavascript)lorsdelamanipulationd'objets
graphiquesauseindel'interfaceduprogramme
permettantainsil'utilisateurdecomposerlersultat
final(visuel)desapageweb,telqu'illeferaitl'aided'un
logicielgraphiquecommePhotoshopouGimp.
Ceslogicielssontmanieravecprudencecarbienque
simpled'utilisationetintuitifs,ilsneproposentqu'une
versionpurementvisuelledudocumentetgnrent
parfoisuncodepeuaccessibleetbrouillon(balises
employespourleuraspectetnonleurfonction).Ilfaudra
doncgnralementutilisercetypedelogicielavec
prcaution.
ABLSERTEL2014

218

 Dreamweaver :Logicielclbred'Adobeaux
multiplesfonctionnalits(PHP,serveurFTP...)
maiscoteux.
BlueGriffon :DveloppparDanielGlazman
(membredugroupedetravail CSS duW3C),il
estlgeretperformant(etgratuitaussi!)

ABLSERTEL2014

219

Lesditeurs HTML textuels

Ceslogicielsmettentencouleurlesdiffrentespartiesdu
code(couleurssyntaxiques)pourunemeilleurelisibilit
contrairementunditeurdetextebasiquetelNotepad
(PC)ouTextEdit (Mac)aveclesquelsilesttoutfait
possibledecoder.Ilsproposentunaidelasaisie
proposantdiffrentstermesl'utilisateur(auto
complmentation)etajoutentunetabulationendbutde
ligneafindegarantirclartetlisibilitaucode(auto
indentation).
SousWindows :
Notepad++ estunlogicielcompletetefficace.
ETexteditor,diteurplbiscitparRaphalGoetter dans
sonlivre "CSSavances Vers HTML5et CSS3".
ABLSERTEL2014

220

Quelleestladiffrenceentreles
cheminsrelatifsetabsolus?
Souventsourced'erreurs,depagesintrouvables,
d'imagesmanquantesoudestylesnonappliqus,le
formatd'crituredesliensesttrsimportant.Et
pourtant,onneprendpasforcmentgardelafaon
dontonfaitpointercesdernierverslesdiffrents
fichierscible.Suivantlaconventiond'critureutilise,
denombreuxproblmespeuventsurvenir.Eneffet,
deuxtypesd'criturescohabitent,chacuneavecleur
spcificitpropre :
lechemin relatif (absencedeslashinitial)
lechemin absolu (slashenprfixeduchemin)

ABLSERTEL2014

221

Hbergementweb

Aprsavoirconulespremirespagesdevotresite,ilesttempsdeles
rendredisponiblesaumondeentierenleshbergeantsurunserveur
web,afinquetoutunchacunpuisseyaccderensaisissantuneadresse
(detypehttp://www...)danssonnavigateur.
Un serveurweb estunordinateurperformant,laplupartdutemps
dpourvud'cranpourgaindeplace,etdvolusatcheprincipale:
l'hbergement.Onfaitappelunhbergeurprofessionneldans
l'immensemajoritdessituationscarhbergersonsitesursonpropre
ordinateurimposedebonnesconnaissancesdansl'administrationde
serveur,unetrsbonneconnexioninternetsouspeined'tresaturpar
lenombredevisites(pourpeuquevotesiteprennedel'importance)et
unebonnescuritpourprotgersesdonnes.
Deuxprotocoles(aumoins)entrentenjeu:Lapublicationdesfichiers
par FTP(FileTransferProtocol),puislorsdelavisiteleurtlchargement
parlenavigateurviaHTTP (HyperTextTransferProtocol).

ABLSERTEL2014

222

Choixdel'hbergeur
Hbergementmutualis:vouspartagezlesressources
d'unmmeserveuravecplusieursautresclients
Hbergementddi:unserveurentiervousestrserv.

Nikozen
OVH
Amen
Sivit
Nexen Services
etc.
ABLSERTEL2014

223

StructureHTMLetrenduCSSdes
balises:blocetenligne
ComprendrelastructureHTMLetlerenduCSSdesbalisesHTML
Biensouventsontvoqusdes lmentsdetypebloc et
des lmentsdetypeenligne.Ilfautsavoirquecesdsignations
sontquelquepeufaussescarellesmlangentunepartiedes
spcificationsHTML(quiproposentdescatgorisations
d'lments)etunepartiedesspcificationsCSS(quiproposent
desmodlesderendus).
Historiquement, HTML neproposaitquedeuxcatgories
d'lments: leslmentsdeniveaublocketleslmentsde
niveauinline.Cettecatgorisationautoriseounoncertaines
imbrications(parexempleunniveauinline depeutpascontenir
deniveaublock).Enparallle,lesspcifications CSS proposentun
vastechoixdemodesderendupourleslmentsviala
proprit display.Parmilesvaleurslesplusconnuesde display,
l'onretrouve... block et inline.Forcment,c'estunpeuconfusant !
ABLSERTEL2014

224

EnHTML5
Lacatgorisationestamlioreetmodifie
depuisHTML5. Tousleslmentssont
regroupsdansdes modlesdecontenu,
ou Contentmodels, quisedclinentdans7
catgories,dontcertainesserecouvrent
mutuellement.

ABLSERTEL2014

225

Le flux (flow)regroupelaplupartdeslmentscourants,c'estdirelesautressousmodlescitsciaprs,
ainsiquelecontenutextesimple.
Les mtadonnes (metadata)nerelventpasducontenuprincipalmaisparticipentladfinitiondes
informationsgravitantautourdecedernier,parexempleletitredudocument(<title>),lestyle(<style>),les
relationsexternes(<link>),etlesscripts(<script>).Ils'agitdoncpourlaplupartd'lments invisibles.
Le contenusectionnant (sectioning),dfinitlesgrandeszonesdudocumentHTMLoudel'applicationweb
: <article>, <aside>, <nav>, <section>.Parconsensus,lesnavigateursontchoisideconfrerceslmentsun
renduCSSdetype bloc.
La titraille (heading)comprendtouslestitreshirarchiques(<h1> <h6> et<hgroup>),quisonteuxaussipar
dfautaffichsen bloc parlesnavigateurs.
Lecontenude phras (phrasing content)correspondlaplupartdeslmentspouvantapparatredansunflux
detexte,etquisontpourlaplupartd'entreeuxaffichs enligne (parexempleen
CSS display:inline ou display:inlineblock).Onpeutyremarquerentre
autres <audio>, <video>, <iframe>, <canvas>,<img>,leslmentsdeformulairetels
que <input>, <textarea>, <button>,<select> etlebalisagedutexte <strong>, <b>, <i>, <del>,etc.
Lecontenu embarqu (embedded)estplusspcialis
: <audio>, <canvas>,<embed>, <iframe>, <img>, <object>, <video>,<svg>,<math>.
Atitreindicatif,sonapparenceCSSestdfiniepardesespacespossdantunehauteuretunelargeur,souvent
affichsavecuntype display:inlineblock.
Lecontenu interactif estdestintoutcequipermetuneinteractionavecl'utilisateur:lesliens,leslments
mdia,lescontrlesdeformulaire,bref,toutcequipeuttrepilotauclavier,lasourisouaudoigt.

ABLSERTEL2014

226

Embotements

Tousleslmentspossdentdesrglesdfinissantclairement:dansquelautre
lment(parent)ilspeuventtreplacs,etquelsautreslments(enfants)ils
peuventcontenir.Parailleurs,desbalisesbienprcisessontautofermantes,
c'estdiredeslmentsvidesetnedoiventounepeuvent riencontenirdu
tout;c'estlecasde <img />. Cesrglesnedoiventpastrevuescommeune
contrainte,maiscommelefruitd'unelonguerflexionetd'unusagenaturel.Il
seraitparexempleabsurdedeplacerunlment <input> dansun <img> ou
un <hgroup> dansun<select>.

ABLSERTEL2014

227

InitiationaupositionnementenCSS
Pourviterl'usageinconsidrdestableauxde
miseenpage,l'utilisationcorrectedechaque
lment(balisesdiv,p,h1,ul,li,etc.)ainsique
leurpositionnementenCSSestdornavant
indispensable.
LesditeursHTMLvisuelsn'utilisentqu'une
infimepartiedespossibilitsdesbalises
(faussementnommes"calques"engnral),ce
quilesrendsouventpeucompatiblesetpeu
pratiques.

ABLSERTEL2014

228

Tousleslments(balises)HTMLpeuventtrepositionns,dcors,dimensionns,...grceauxstylesCSS.Cela
signifiequelesCSSnes'appliquentpasqu'auxlments<div>contrairementcertainesidesreues :une
image(<img>),uneliste(<ul>),unparagraphe(<p>),etc.peuventtrestylsenCSSsansavoirbesoind'tre
contenusdansunlment<div>.vitezd'ailleursdesurchargervosdocumentsd'lments<div>inutiles.
Employeztoujoursleslmentsselonleurfonctionetnonselonleuraspect(puisquecetaspectpourra
facilementtremodifiviaCSS) :unparagrapheseradfiniparlabalise<p>,untitreparlabalise<h1>,<h2>...,
etc.Notezquel'lment<div>estneutreetsertde"bouchetrou"pourengloberd'autreslmentsouservir
lorsqu'aucunautrelmentn'estappropri.N'utilisezpas<div>pourengloberdeslmentsseuls !
Ilexistedeuxtypesgnrauxd'lmentsHTML :lesbalisesdetype"enligne"etlesbalisesdetype"bloc".Cette
diffrenceestfondamentaleetadenombreusesimplicationssurlesstylesquipeuventtreappliqus.
L'imbricationdeslmentslesunsdanslesautres,etlesnotionsdeparent(parent,anctre,frre,...)
permettentdestylerfacilementleslmentsenutilisantcettehirarchiedanslesslecteursCSS.Celavite
d'employerdesnomsdeclassesoud'idmultiplesetinutiles,quicomplexifientlalectureetlacomprhension
desstyles.
IlexisteplusieursschmasdepositionnementenCSS :unschmadepositionnementdansleFlux
(positionnementpardfaut),ettroisschmasdepositionnementquisortentl'lmentduFlux(positionnement
absolu,positionnementfixetpositionnementflottant).Undernier"positionnement"(relatif)estenfaitune
variantedupositionnementcourantquiprovoqueundcalage.LanotiondeFluxestfondamentale.
Chaqueschmadepositionnementasesrglesetspcificits.Mieuxvautbiencomprendrecesrglespour
viterdesinteractionsoudescomportementsnonsollicits...etdclarerquelesCSSnefonctionnentpas !:)

ABLSERTEL2014

229

Larvolutionwebdesign:HTML5etCSS3
HTML5etCSS3nouspromettentune
rvolutionlafoistechnique(nouveaux
lmentsdesmantiqueetdepriphriques,
nouveauxformulairesnouvellesapplications
dynamiques)etgraphique(policesexotiques,
positionnementsintuitifs,effetsdcoratifsou
danimation,propritsavancesouencore
gestiondestaillesdcran).
ABLSERTEL2014

230

AJAX

ABLSERTEL2014

231

AJAX
(Asynchronous JAvascript andXml)
IlsagitdutiliserducodeJavascript surleclientpour
invoquerleserveurentchedefondetobtenirdes
donnesauformatXMLafindemodifierleDynamic
HTMLetrafrachirunepartiedelapage.
CelaconsisteexploiterlobjetXMLHttpRequest,
prsentdanslesnavigateursrcents.Cecomposant
permetdejouerlerledunclientHTTP,denvoyer
unerequteetdattendrelarponsepourpouvoirla
manipuler.AJAXpermetdoptimiserletraficenne
ramenantquelesdonnesncessairesau
rafrachissementdunepageetnonunepageentire
ABLSERTEL2014

232

Lesapplicationstraditionnellesoffrentunetrsgranderichessede
linterface.DeslogicielscommeOpenOfficeproposentdes
fonctionnalitsquelonneretrouvepassurlessitesinternet.loppos,
lesapplicationsHTMLoffrentunetrsgrandefacilitdaccs.AJAXest
unetechnologiepermettantderapprochercesdeuxobjectifs(figure 1).

ABLSERTEL2014

233

Commentcelafonctionnetil ?

Lerleduserveurconsistemaintenirlensembledesobjetsde
lapplicationetenvoyerquelquesextraitsauclient.Danslafigure 3,le
serveurtransformeunepartiedesobjetsmtierquilpossde(lesobjets
enmarron)etlesenvoieauclientsousunformatcompatibleavecle
HTTP.
LeclienttransformelefluxenobjetsJavascript etmanipulelapage.Le
clientprendenchargequelquesobjetsetsoccupedelesprsenter.Il
apportealorsdesmodificationscertainsobjetsetlespropageau
serveur.Celuicipeutalorsdciderounondesauverlesmodifications.
Nousrevenonsunearchitecturedetypeclient/serveur.
Ilestprfrabledavoirdansleclientunmoteurgnriquede
transformationdumodleversduDHTML.Celapermetdegnraliserle
lienentrelemodlededonneprsentdansleclientetlaprsentation.

ABLSERTEL2014

234

ABLSERTEL2014

235

 Pourlacommunicationentreleclientetleserveur,ily
acinqtapes :
1.Crationdeparamtredelarequtepourleserveur.
2.InvocationderequtesHTTPvialobjet
XMLHttpRequest.
3.Attentedelarponseduserveur.
4.Analyseettransformationdursultat.
5.Modificationdynamiquedelapage.Reprenonsles
diffrentestapespourvoirlesstratgiespossibles
dimplmentations.
ABLSERTEL2014

236

Pourlacrationdeparamtredelarequte,ilyaplusieurs
approches :
CrationduneURLdetypeGET.Lesparamtressontprsents
danslURL,sparsparun&.
RcuprationduformulaireHTTP.LarequteHTTPestdutype
POST.
SrialisationdobjetJavascript.Ilexistedenombreuxformats
(JSON,XML,CSV,etc.).
CrationdunerequteSOAP.

Ensuite,ilfautinvoquerleserveur.LobjetXMLHttpRequest
estprsentdanslesnavigateursrcents.

ABLSERTEL2014

237

Formatdelarponse
Leserveurquireoitlarequteestlibrederetourner
unerponsedansleformatquilsouhaite.
IlpeutretournerdesextraitsdepagesHTML,des
scriptsJSON(JavaScriptObjectNotation,uncode
Javascript permettantlorsdesonexcutionde
construireunestructurecomplexedobjets),desflux
XML(ContentType :text/xml),desfluxSOAPpourles
servicesWeb,ducodeJavascript ouunformat
propritaire.

ABLSERTEL2014

238

AJAX
Introduiten2005parJesseJamesGarrett
ApplicationsWebavecinterfaceutilisateur
Deportation d'unepartiedestraitementsliesa
l'interfaceducodecoteclient
Reduction desressourcesutilisees coteserveur
Economiedebandepassante

Exempled'applicationWebAJAX:
GoogleMail,Maps,Earth,etc.
Listedesuggestionsautomatiques
Traitementdetexte
ABLSERTEL2014

240

AJAX
RegroupeunensembledetechnologieWeb
utilisees conjointement(HTML,CSS,DOM,
Javascript,XMLHttpRequest,XML)
Permetlarecuperation dedonnees surle
serveurdemanireasynchrone,sansinterferer
aveclesdonnees danslapagecourante
(utilisationdel'objetXMLHttpRequest)
Utilisecommeformatd'echange,XML,des
chiers textesetaussiJSON
ABLSERTEL2014

241

Deuxcomposants(ApplicationWeb
Classique):
Serveur(implementation JAVAouPHPparexemple)

Contr^ole general del'application

Proposedesressourcesstatiques:Modele dudocument,
bibliotheque descripts,feuillesdestyle
Traitementdynamiquedesdonnees
Compositiondynamiquedel'interface

Client(implementation Javascript parexemple)

Gestiondesevenements utilisateur
Compositiondynamiquedel'interface

Dialogue:HTTP,(X)HTML
ABLSERTEL2014

242

Fonctionnement

ABLSERTEL2014

243

 1Requteasynchroneauserveurdansunefonction
JavaScript,declenche parunvnement
2TransfertasynchronededonnesenXML
3Traitementdynamiqueducteclientpourachage
inclusion
audocumentHTML,transformationXSLT,etc.
4RequteasynchronesurundocumentXMLen
utilisantun
objetXMLHttpRequest (Mozilla)ouuncontr^ole
ActiveXXMLHTTP(IE)
5PuiscommunicationAJAX
ABLSERTEL2014

244

Fonctionnement
CommunicationAJAX

ABLSERTEL2014

245

Fonctionnement
CommunicationAJAX
Serveur:
Dfinitiondesactions raliserlorsdela
rceptiond'unerequteasynchroneAJAX

ABLSERTEL2014

246

ObjetXMLHttpRequest
APIutilise
parJavaScriptetd'autreslangagesdescripts
pourtransfrerdesdonnesauformatXML,texteou
JSONentreleclient(navigateur)etleserveurWeb
demanireasynchronegnralement.Mais
possibilitd'utilisationsynchrone
Crationdel'objetXMLHttpRequest :mthode
ActiveXObject
(IE)etobjetJavascript XMLHttpRequest
ABLSERTEL2014

247

Exemplesdecode

creation del'objetrequ^t
Chargementasychrone simple
Chargementasychrone XML
Gestiondel'etat XML
TransformationXSLT

*Amettreenplace(voirpdf)
ABLSERTEL2014

248

JavaScriptObjectNotation(JSON)
FormatalternatifaXML
NatifenJavascript
Permetl'echange dedonnees entreclientetserveur
sans
analyse(contrairementauXML).
JSONvs.XML:
JSON:facilitedelectureetsimplicite demiseenoeuvre
XML:extensibleetreconnudanstousleslangagesde
programmation
ABLSERTEL2014

249

ExempledefichierJSON

Utilisationd'unchierJSON
coteclient
coteserveur

*Amettreenplace(voirpdf)

ABLSERTEL2014

250

Avantagesetinconvenients d'AJAX
Avantages:
plusinteractivite auniveauduclient
reponse plusrapide
reduction destransactionsclient/serveur(recuperation desscriptsetdesfeuilles
destyleunefoispourtoute)
separation desmethodes pourlatransmissiondel'informationetdesformats
utilisespourrepresenter lesinformations
Inconvenients :
Pasd'enregistrementdansl'historiquedunavigateurdespagesmodiees
dynamiquement
Solutionenmodiant lapartieancre(#)del'URL
Difficultbookmarker l'etat particulierd'unepage
Pasd'indexationpossibledespagesparlesmoteursderecherche
SiunnavigateurnesupportepasJavascript etAJAX,lapageestinutilisable

ABLSERTEL2014

251

Alternatives
FlexetFlash:concurrentsdeAJAX
Maispossibilite decombinerleurutilisation
voirGoowy http://www.goowy.com/(Bureauvirtuel)
YAML(YAMLAin't Markup Language):formatd'echange
basesurl'utlisation decaracteres speciaux:
:&!? []*,etc.

Bibiotheque :GoogleWebToolkit (AJAXSLT...)

Frameworks :voirhttp://www.ajaxprojects.com/

openAjax (IBM):Dojo
Ruby/RubyonRails(RoR)
PluginsEclipse:RichAjaxPlatform,DirectWebRemoting
PHP:http://ajaxpatterns.org/PHP_Ajax_Frameworks

ABLSERTEL2014

252

JOOMLA ET OPRA
FLEX/AJAX
JAVASCRIPT

ABLSERTEL2014

253

Plan

Joomla
Opra
JavaScript
Flex
Ajax

ABLSERTEL2014

254

Joomla

ABLSERTEL2014

255

1 CEST QUOI JOOMLA ?

JOOMLA! estlatranscriptionphontiqued'un
motswahiliquisignifie"tousensemble",ou
"enuntout".Sacommunautestcomposde
webdesigners,d'administrateurssystmes,de
traducteurs,derdacteurs,deprogrammateurs
etdesmilliersdeparticulierscommevous!

ABLSERTEL2014

256

2 CEST QUOI CMS ?

Un systmedegestiondecontenu ou CMS:Content
ManagementSystem ,estunefamilledelogicielsdestins
laconceptionetlamisejourdynamiquede sites
Web oud'applicationsmultimdia.

ABLSERTEL2014

257

2 CEST QUOI CMS ?

Pouvoirgrervotrecontenudesitetoutseul,sansavoir
forcmentbesoindelinterventiondunspcialiste.Etsivous
tsspcialiste,vouspouvezgagnerdutempsparrapport
lditiondunsitestatique.
Bnficierdunegrandesouplesseetdeflexibilitdansla
gestiondevotrecontenu(grcelasparationdelaformeet
ducontenu),desastructurationdansdesmenus,desfaq,
desrubriques,descatgoriesgnresautomatiquement.

ABLSERTEL2014

258

3 SPCIFICATIONS DE JOOMLA ?

PHP

MySQL

RSS

GNU
ABLSERTEL2014

259

3 SPCIFICATIONS DE JOOMLA ?

design

Fonctionnalits
techniques

contenu

ABLSERTEL2014

260

4 PRINCIPE DE FONCTIONNEMENT DE JOMLA

Utilisationdinterfacesweb:cesontdesinterfaces
dadministration
Sparationentrecontenuetprsentation
ditiondepagessimplifies.
Demultiplesmthodesderangementdelinformation
Gestiondesdroits
Traiterdiffrentsnaturesdecontenus

ABLSERTEL2014

261

5 PERSONNALISATION JOOMLA
auniveauducodedeJoomla! :l'utilisateurquiadesconnaissances
en PHP peutallermettrejourlecodesuivantsesbesoins .
dupointdevuedeaffichage:notiondemodles (template )
Joomla!permetl'utilisateurdecrersonpropremodleen
disposantlesmenussuivantsongot
ajoutdefonctionnalits :ilsefaitsoitsousformedemodules,soit
sousformedecomposants,soitsousformedeplugins

ABLSERTEL2014

262

5 INSTALLATION DE JOOMLA

XAMPP:unlogicielpermettantdemettreenplacefacilementun
serveurweb,un serveurFTP,unserveurdemessagerie.Ilsagitdune
distributiondelogicielslibresApashe,MySql,PHP,Perl,offrant une
bonnesouplessedutilisation.

ABLSERTEL2014

263

CRER VOTRE PROPRE SITE

PAR JOOMLA
Quelques tapes suivre
ABLSERTEL2014

264

9-EXEMPLE DE SITE RALIS PAR

joomla.fr, France
Travel Shop, Irlande
Mrio Moraes, Brsil
Frank Ldtke, Allemagne
Feuille blanche, France
Urth.tv, USA
unric.org, Europe
porsche.com.br, Brsil
Supcomiens.net
ABLSERTEL2014

265

OPERA

ABLSERTEL2014

266

1 CEST QUOI OPERA ?

Opera ,unesuitelogiciellegratuiteet
multiplateformedveloppeparlasocit
norvgienneoprasoftwarequipropose
plusieurslogicielsrelatifsinternet.Cette suite
logiciellecomprendessentiellement

ABLSERTEL2014

267

Unnavigateurweb.(1.67delapartdumarch)
Clientdecourriellctronique(M2)etunlecteurdenouvelles
UnlecteurdefluxauformatRSS.
Uncarnetdadresse
UnclientIRC
Unfiltrageantihamaonnage
Ungestionnairedetlchargement(prenantenchargeles
liensbittorent )
Lareconnaissancevocale
Unoutildanalysedepagesweb.

ABLSERTEL2014

268

2 OPRA: LE NAVIGATEUR
Depuis2005opraestgratuitsurdivers
systmesdexploitation.
Version4et6:moteurderenduHTML
ELECTRA
Version7etplus:moteurderenduHTML
PRESTOamliorerlagestiondesfeuilles
destyleCSS,amliorerlinterprteurde
JavaScript,amliorerlesupportde
DOM(documentobject model)

ABLSERTEL2014

269

3 CEST QUOI OPERA MINI?

un navigateurweb adestinationdesappareilsmobilescomme
les tlphonesmobiles oules PDA.
fonctionnegrce JavaME
dvelopppar Opera Software quilemetentlchargement
gratuitement.

unearchitecture clientserveur

ABLSERTEL2014

270

3 CEST QUOI OPERA MINI?

Avantages:
ClientnecontientaucunmoteurderechercheHTMLclient
lger
Rapiditdanslesserveursopramieuxquechezlemobile
Vitesselevdechargementdepage.
Inconvnients
AnimationsGIFsontconvertiesenimagesfixes
Flashnestpasprisencharge
Serveursdoprasontchargs:navigationbeaucouppluslente.

ABLSERTEL2014

271

JavaScript

ABLSERTEL2014

272

1-CEST QUOI JAVASCRIPT ?

JavaScript est un laguage de scripts

qui incorpor aux balises HTML,
permet d'agrmenter la prsentation
et l'interactivit des pages Web

ABLSERTEL2014

273

2- JAVA VS JAVASCRIPT !!!!

Module (applet) distinct de la page Html

Code intgr dans la page Html

Code source compil avant son excution

Code interprt par le browser au moment de

l'excution

Langage de programmation beaucoup plus

complexe mais plus performant

Codes de programmation simples mais pour

des applications limites

N'accde pas aux objets du navigateur

Permet d'accder aux objets du navigateur

Scurit (code source compil)

Confidentialit des codes nulle (code source

visible)
ABLSERTEL2014

274

3- A QUOI RESSEMBLE UN SCRIPT?

Un script est une portion de code qui

vient s'insrer dans une page HTML.
Le code du script n'est toutefois pas
visible dans la fentre du navigateur
car il est compris entre des balises
(ou tags) spcifiques qui signalent au
navigateur qu'il s'agit d'un script
crit en langage JavaScript.

LesbalisesannonantuncodeJavascript
sontlessuivantes :
<SCRIPTlanguage="Javascript">
Placezicilecodedevotrescript
</SCRIPT>

ABLSERTEL2014

275

3- UN EXEMPLE DE JAVASCRIPT
<SCRIPT LANGUAGE = "JavaScript">
<!-temps = new Date();
heure = temps.getHours();
minutes = temps.getMinutes();
document.write ("<P>Il est " + heure + " heures et " + minutes + " minutes.</P>");
if (heure > 8 && heure < 18) {
document.write ("<CENTER><IMG SRC = 'essai.gif'>");
document.write ("<P>Hello SerTel!!! C'est plutt l'heure de travailler. C'est l'heure de
travailler. Les choses srieuses!!</CENTER>");
}
else {
document.write ("<CENTER><IMG SRC = bye.jpg'>");
document.write ("<P>Wow! Goodbye SerTel </CENTER>");
}
// -->
</SCRIPT>

ABLSERTEL2014

essai2.html

276

AJAX

ABLSERTEL2014

277

1-CEST QUOI AJAX

AJAX est un acronyme signifiant Asynchronous
JavaScript and XML ( XML et Javascript asynchrones )
et dsignant une solution informatique libre pour le
dveloppement d'applications Web. l'image de DHTML
ou de LAMP, AJAX n'est pas une technologie en ellemme, mais un terme qui voque l'utilisation conjointe
d'un ensemble de technologies libres couramment
utilises sur le Web.

ABLSERTEL2014

278

Ajax utilise un modle de programmation comprenant d'une part

la prsentation, d'autre part les vnements.
Les vnements sont les actions de l'utilisateur, qui provoquent
l'appel des fonctions associes aux lments de la page.
Ces fonctions JavaScript identifient les lments de la page grce
au DOM et communiquent avec le serveur par l'objet
XMLHttpRequest.
Pour recueillir des informations sur le serveur cet objet dispose de
deux mthodes:
open: tablit une connexion.
send: envoie une requte au serveur.
Les donnes fournies par le serveur seront rcupres dans les
champs de l'objet XMLHttpRequest:
responseXml pour un fichier XML ou
responseText pour un fichier de texte bru.
Noter qu'il faut crer un nouvel objet XMLHttpRequest, pour
chaque fichier que vous voulez charger.
Il faut attendre la disponibilit des donnes, et l'tat est donn par
l'attribut readyState de XMLHttpRequest.

ABLSERTEL2014

279

Une interface ractive car AJAX permet

de modifier localement la page web

SiJavaScriptestdsactiv,Ajaxnepeutfonctionner.Ilfaut
demanderaulecteurdel'activerparmilesoptionsdu
navigateur.

Une ergonomie amliore car AJAX permet par

exemple d'effectuer des contrles en temps rel dans
les formulaires en interrogeant un serveur HTTP en
arrire plan.

Une rapidit d'excution car seules les

donnes modifier dans la page sont
changes selon le protocole HTTP

Si l'on charge les donnes afficher de faon

dynamique, elles ne font pas partie de la page et
elles ne sont pas prises en compte par les moteurs
de recherche.

- L'aspect asynchrone fait que les modifications se

font avec un dlai (si le traitement sur le serveur est
long), ce qui peut tre dconcertant.
ABLSERTEL2014

280

FLEX

ABLSERTEL2014

281

1-CEST QUOI FLEX

Solutiondedveloppementpuissantepermettantlacrationetle
dploiementd'applicationsRIA(Rich Internet Application).
ProjetcommencparMacromediaen2004puisreprisparAdobe
en2006(dlachatdeMacromediaparAdobe).
Modledeprogrammationfaitappel MXML (bassur XML)
et ActionScript 3.0,reposantsur ECMAScript.
unfichier.swf intgrdansunepagehtml:
Avantage:richessedel'interfacegraphiquedegnrer.swf
Inconvnient:Chargementtrslongdelapage.

ABLSERTEL2014

282

2 - MAIS FLASH PERMET DJ DE FAIRE DES RIA, QUOI SERT UNE AUTRE
TECHNO ?

Aucommencement,Flashnepermettaitquedefairedesanimationsetl'utilisateurne
pouvaitpasinteragiravecelles.
Flashs'estdotd'unlangagedeprogrammation,"ActionScript",quipermettaitd'ajouter
ducodederrirel'animationafindelarendredynamique.
voien1: fairedesanimationsavecuncontenugraphiquevolu,maispeuutilispourses
fonctionnalitsdeprogrammation orientgraphistes
voien2: fairedesfonctionnalitsdeprogrammationavecuncontenugraphiquemodr
Orientdveloppeurs doledveloppementdeflex :solutionplusadapteau
dveloppeurs.

ABLSERTEL2014

283

3 - A QUOI CONSISTE FLEX ?

uneplateformededveloppementconuespcifiquement
pourlesdveloppeursetquis'appuiesurunenouvelleversion
dulangage:ActionScript 3(obitauxrglesdelaPOO)

disposed'un framework fournissantaudveloppeurde

nombreusesclasses undveloppementrapideetuncode
mieuxstructur.
nedisposepasd'outilsdedessin.Lescomposantsncessaires
sontdjcrs,ledveloppeurpeutlesinsrer
possibilitdecrerdesanimationsavecFlex(enActionScript )

ABLSERTEL2014

284

3 INSTALLATION DE FLEX BUILDER 3 ET

EXEMPLE

DvelopperdesanimationsavecActionScript:
pastrspratique!!
Flexbuilder 3 :importerducontenuFlashdansune
applicationFlexdirectement.

ABLSERTEL2014

285

ABLSERTEL2014

286

Techniques

Conceptionetorganisationd'unprojetInternet(PHP,ASP.net)
Matriserledveloppementetlamiseenexploitationd'uneapplicationinternetenPHPetASP.net
SavoirconcevoirunprojetinternetenutilisantunFrameworkPHP
SavoiradministrerunserveuretunsiteInternet

ApplicationinternetRiche
MatriserlelangagedescriptsJavascript etutiliserlatechnologieAJAX.
SavoircrerdesapplicationsrichesenutilisantleFrameworkJavascript Jquery
SavoirintgrerdesanimationsmultimdiautilisantFlash,AS3etFlex.

Serveursd'Application,Serveursdedonnes
Concevoirdesapplicationsinteractivesavec.Net
Mettreenplacedesserveursd'applicationbasssurJ2EE

interfaceHomme/Machine:graphismeetergonomie
ConnatrelesnotionsdebaseenInterfaceHomme/Machine:ergonomie,navigation
Connatrelesnormesd'accessibilit,savoirlesmettreenplacedansunsite
Acqurirlesnotionsdebaseeninfographie(Photoshop)etenwebdesign

ABLSERTEL2014

287

laboratoires
Lab1:webapplication
https://developer.tizen.org/fr/downloads/samp
lewebapplications
https://developer.tizen.org/fr/downloads/samp
lewebapplications/loadwebapptizensdk

ABLSERTEL2014

288