Technologies de lInternet dynamique 2/7 : Conception d'un site dynamique et introduction au JavaScript CNAM – cycle C

Technologies de Technologies de l’Internet dynamiquel’Internet dynamique

2/7 : Conception d'un site dynamique2/7 : Conception d'un site dynamiqueet introduction au JavaScriptet introduction au JavaScript

CNAM – cycle CCNAM – cycle C

23/01/2006 : 18h30-21h3023/01/2006 : 18h30-21h30 Aurélien Barbier-AccaryAurélien Barbier-Accary 22

Quel langage pour quel rôle ?Quel langage pour quel rôle ? Des recouvrements mais des rôles Des recouvrements mais des rôles

bien établisbien établis

Il faut se forcer à utiliser le langage le Il faut se forcer à utiliser le langage le plus adapté ! (Ex: rollover d'images)plus adapté ! (Ex: rollover d'images)

Contenu Mise en formeStatique XHTML CSS

XSLT

Interactif (client)

JavaScript, Applets Java

CSS, DHTML(JavaScript)

Création dynamique

(serveur)

PHP/MySQL, Servlets Java, Xquery-XPath


Répartition de la charge :Répartition de la charge :séquence d'utilisationséquence d'utilisation

1)1)Côté serveur :Côté serveur :• base de données MySQLbase de données MySQL• patrons de pages PHP+XHTML+CSSpatrons de pages PHP+XHTML+CSS• données extérieures de requêtedonnées extérieures de requête

Création dynamiqueCréation dynamique d'une d'une page statiquepage statique ! !

2)2)Côté client :Côté client :• petites adaptations possibles (petites adaptations possibles (en local !en local !))• graphiques : DHTML(JavaScript)+CSSgraphiques : DHTML(JavaScript)+CSS• contenu : contenu : <div><div>,,<span><span> + JavaScript + JavaScript


Exemple d'un diaporamaExemple d'un diaporama Quel côté (Quel côté (client-serveurclient-serveur) ? Quel langage ?) ? Quel langage ?

• Choix des photos de la gallerieChoix des photos de la gallerie• Choix des quelques vignettes visiblesChoix des quelques vignettes visibles• Zoom sur une vignette pointéeZoom sur une vignette pointée• Tri des photos par nom ou par dateTri des photos par nom ou par date• Affichage écran Vs affichage imprimanteAffichage écran Vs affichage imprimante• ......

Il n'y a pas toujours qu'une solution, Il n'y a pas toujours qu'une solution, mais il y en a toujours une meilleure.mais il y en a toujours une meilleure.


Conception d'un siteConception d'un site Il faut gérer :Il faut gérer :

• Des pages statiques (accueil, news, ...)Des pages statiques (accueil, news, ...)• Des images du site (icônes, logos, ...)Des images du site (icônes, logos, ...)

• Des patrons de pages dynamiquesDes patrons de pages dynamiques• Des images de contenu (photos, ...)Des images de contenu (photos, ...)• Des scriptsDes scripts• Une base de donnéesUne base de données

Tri = gain de temps des MàjsTri = gain de temps des Màjs


Contenu de notre site projetContenu de notre site projet

Fonctionnalités basiques :Fonctionnalités basiques :• Consultation de recettesConsultation de recettes• Recherche de recettes par ???Recherche de recettes par ???• ??????

Fonctionnalités étendues :Fonctionnalités étendues :• Adaptation des quantités au nb. de pers.Adaptation des quantités au nb. de pers.• Dépôt d'avis des internautesDépôt d'avis des internautes• ??????

A quoi avez-vous pensé ?A quoi avez-vous pensé ?


Organisation du siteOrganisation du site Ouvrez un document texte nommé Ouvrez un document texte nommé

cnam-cnam-xyxy.txt.txt et décrivez succintement et décrivez succintement• L'arborescence des répertoiresL'arborescence des répertoires• Les fichiers de chacun de ces répertoiresLes fichiers de chacun de ces répertoires

fixez les noms dès maintenant fixez les noms dès maintenant

Uploadez votre fichier sur :Uploadez votre fichier sur :• ftpperso.free.frftpperso.free.fr• Login/Pwd: Login/Pwd: aurelien.barbieraurelien.barbier / / cnamcnamcnamcnam• répertoire: répertoire: tmptmp


Introduction au JavaScriptIntroduction au JavaScript Allez sur la page du cours sur JavaScriptAllez sur la page du cours sur JavaScript

• Insertion d'un script : 4 possibilitésInsertion d'un script : 4 possibilités• Syntaxe similaire au C/C++ mais :Syntaxe similaire au C/C++ mais :

Variables typées implicitementVariables typées implicitement Tableaux indexés et associatifsTableaux indexés et associatifs Fontions à nombre d'arguments variableFontions à nombre d'arguments variable

• Trouver un objet: les pbs commencent...Trouver un objet: les pbs commencent... InternetExplorer : document.all[]InternetExplorer : document.all[] Recommandations W3C: getElementById()Recommandations W3C: getElementById()

Voir la fonction findObj() du cours DOM/DHTMLVoir la fonction findObj() du cours DOM/DHTML

Documents

Technologies de lInternet dynamique 2/7 : Conception d'un site dynamique et introduction au JavaScript CNAM – cycle C