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

Présentation au sujet: "Technologies de lInternet dynamique 2/7 : Conception d'un site dynamique et introduction au JavaScript CNAM – cycle C."— Transcription de la présentation:

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

2 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 2 Quel langage pour quel rôle ? Des recouvrements mais des rôles bien établis Des recouvrements mais des rôles bien établis Il faut se forcer à utiliser le langage le plus adapté ! (Ex: rollover d'images) Il faut se forcer à utiliser le langage le plus adapté ! (Ex: rollover d'images)

3 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 3 Répartition de la charge : séquence d'utilisation 1)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 dynamique d'une page statique ! 2)Côté client : petites adaptations possibles (en local !)petites adaptations possibles (en local !) graphiques : DHTML(JavaScript)+CSSgraphiques : DHTML(JavaScript)+CSS contenu :, + JavaScriptcontenu :, + JavaScript

4 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 4 Exemple d'un diaporama Quel côté ( client-serveur ) ? Quel langage ? Quel côté ( client-serveur ) ? 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, mais il y en a toujours une meilleure. Il n'y a pas toujours qu'une solution, mais il y en a toujours une meilleure.

5 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 5 Conception 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àjs Tri = gain de temps des Màjs

6 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 6 Contenu 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é ?

7 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 7 Organisation du site Ouvrez un document texte nommé cnam-xy.txt et décrivez succintement Ouvrez un document texte nommé cnam-xy.txt et décrivez succintement L'arborescence des répertoiresL'arborescence des répertoires Les fichiers de chacun de ces répertoires fixez les noms dès maintenantLes fichiers de chacun de ces répertoires fixez les noms dès maintenant Uploadez votre fichier sur : Uploadez votre fichier sur : ftpperso.free.frftpperso.free.fr Login/Pwd: aurelien.barbier / cnamcnamLogin/Pwd: aurelien.barbier / cnamcnam répertoire: tmprépertoire: tmp

8 23/01/2006 : 18h30-21h30 Aurélien Barbier-Accary 8 Introduction au JavaScript Allez sur la page du cours sur JavaScript Allez 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 implicitement Variables typées implicitement Tableaux indexés et associatifs Tableaux indexés et associatifs Fontions à nombre d'arguments variable Fontions à 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/DHTML Voir la fonction findObj() du cours DOM/DHTML