T ECHNOLOGIES DE L INTERNET M INI P ROJET Licence Professionnelle TDI NEMBROT Isabelle 6 Novembre 2009 Kréactiv.net Promotion de la Culture Créole

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

1/ LE P ROJET Réaliser le site web « vitrine » dune entreprise Objectifs : Faire connaître lentreprise Valoriser les produits proposés par lentreprise 3

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

2/ LE C AHIER DES C HARGES Langages imposés : HTML 4.0 avec et sans frames XHTML XML et AJAX Deux présentations de produits Présentation AJAX avec la librairie JQUERY à partir dun fichier XML dont laffichage est imposé Présentation XHTML 5

2/ LE C AHIER DES C HARGES Deux modes daffichage différents dont un est imposé en utilisant les feuilles de style en CSS2 ou CSS3 Un formulaire validé en JavaScript avec des champs obligatoires Chacune des pages du site doit être validée par le W3C 6

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

3/ P RÉSENTATION DU S ITE Kréactiv.net Entreprise toulousaine de diffusion de la culture créole Produits vendus : BDs en créole, DVD, CD audio de Musique Créole 8

Extrait de la page daccueil avec le style professionnel 9 3/ P RÉSENTATION DU S ITE

Extrait de la page daccueil avec le style graphique 10 3/ P RÉSENTATION DU S ITE

11 Comparaison des deux styles 3/ P RÉSENTATION DU S ITE

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

4/ L A RCHITECTURE DU S ITE 13

4/ L A RCHITECTURE DU S ITE Présentation des Produits Trois types de présentation différents : Gestion des nouveaux produits Catalogue en ligne de tous les produits Sélection du mois en cours 14

4/ L A RCHITECTURE DU S ITE Gestion des nouveaux produits 15 Description : Présentation XHTML Petites miniatures des produits classés par catégorie Agrandissement de la miniature au clic dans une zone image Absence de description produit (pas de texte, la légende fait partie de limage) zone dagrandissement des miniatures-produits première catégorie de produits et miniatures associée deuxième catégorie de produits et miniatures associée

4/ L A RCHITECTURE DU S ITE Catalogue en ligne de tous les produits 16 Description : Présentation AJAX Affichage de chacun des produits recensés dans le fichier XML dans un bloc-produit numéroté Description du produit minimale (informations indispensables : titre, langue(s), prix, …) Affichage du nombre total de produits disponibles trois blocs-produits nombre total de produits disponibles numéro du produit description rapide du produit

4/ L A RCHITECTURE DU S ITE Sélection du mois en cours 17 Description : Présentation AJAX Affichage des produits du XML dont lattribut « preference » est à 1 Description du produit détaillée (résumé/synopsis, …) dans une zone scrollable reprenant les informations du catalogue en ligne Affichage des produits trois par trois dans un bandeau déroulant géré par des boutons (inactifs en début ou en fin de bande) bande déroulante des images (cliquables) des produits boutons de défilement (inactif vers la gauche) zone scrollable de description des produits au clic sur limage correspondante

18 Vérification du Formulaire Plugin utilisé : JQUERY Form Validation Champs obligatoires : liste déroulante et champs de texte affichage dun message derreur en cas de champ vide Champs non obligatoires Vérification des champs selon un format donné (défini et modifiable directement dans le ficher.js du plugin) affichage dun message derreur en cas de format invalide Zone de message colorée glissante au clic de validation Mise en évidence du champ « frauduleux » en couleur 4/ L A RCHITECTURE DU S ITE

19 4/ L A RCHITECTURE DU S ITE Extrait de la page de contact avec le formulaire Formulaire avec champs obligatoires vides et de format invalide Formulaire avec champs obligatoires remplis avec le bon format

Validation W3C et Copyright Ensemble des pages validées par le validateur du W3C Feuilles de style validées par le validateur CSS2 du W3C Copyright apposé sur chaque page 20 4/ L A RCHITECTURE DU S ITE (Zedd est le surnom de ladministrateur)

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

Maquette vérifiée localement sur cinq navigateurs différents : Firefox version Internet Explorer version 6 Opera version portable 9.23 Chromium version portable Safari version / I NFORMATIONS D IVERSES

Problèmes rencontrés par rapport aux différents navigateurs testés Internet Explorer 1. Visuel : police de balise de titre très grosse 2. Présentation AJAX : inaccessible sans passer par un serveur Opera 1. Présentation XHTML : agrandissement des miniatures de produits non fonctionnel 2. Vérification du formulaire : mauvaise interprétation du plugin ne vérifie pas les listes de choix déroulantes obligatoires impose de remplir tous les champs du formulaire 23 5/ I NFORMATIONS D IVERSES

Problèmes rencontrés par rapport aux différents navigateurs testés (suite) Chromium (navigateur web libre basé sur Google Chrome) o Présentation XHTML : agrandissement des miniatures de produits non fonctionnel Safari o Présentation XHTML : agrandissement des miniatures de produits non fonctionnel Firefox Aucun problème ! => maquette idéalement déployée 24 5/ I NFORMATIONS D IVERSES

P LAN 1 / le Projet 2/ le Cahier des Charges 3/ Présentation du Site 4/ lArchitecture du Site 5/ Informations Diverses 6/ un Code Intéressant suivi de la Conclusion

6/ UN C ODE I NTÉRESSANT Extrait du code du formulaire de contact : Page contact.html * NOM : Code Postal : 26

6/ UN C ODE I NTÉRESSANT Présence dattributs non définis dans les spécifications XHTML donc non reconnus par le W3C required mask (utilisés avec le plugin JQUERY Form Validation pour vérifier les différents champs dun formulaire) POURTANT, la page est correcte au niveau du validateur 27

6/ UN C ODE I NTÉRESSANT Faire reconnaître des attributs non spécifiques au validateur nécessite une DTD personnalisée. Extrait du code du formulaire de contact : Page contact.html ]> 28

6/ UN C ODE I NTÉRESSANT Structure : elementName : nom de la balise dans laquelle on souhaite utiliser attributeName (nom de lattribut non reconnu quon veut valider) type : CDATA : value de attributeName peut contenir nimporte quelle valeur (v1|v2|…|vn) : liste des valeurs que peut prendre attributeName optionalStatus : #IMPLIED : attributeName dans une balise elementName optionnel #REQUIRED : attributeName dans une balise elementName obligatoire 29

6/ UN C ODE I NTÉRESSANT Inconvénient de la DTD personnalisée : Affichage des caractères ]> de la fermeture de la DTD en haut de page Impossibilité de régler cette anomalie à moins de changer le contenu de la DTD (qui ne sera plus reconnue par le W3C) Alternative : utiliser un validateur différent ou un autre plugin pour la vérification du formulaire 30

Projet plaisant bien que exigeant et rigoureux au niveau de la présentation et du résultat visuel Satisfaction apportée dans le désir du travail bien fait et accompli dans les temps De nouvelles connaissances acquises quant à lutilisation dAJAX avec JQUERY notamment lors des nombreuses recherches nécessaires effectuées sur Google 31 C ONCLUSION

T ECHNOLOGIES DE L INTERNET M INI P ROJET Licence Professionnelle TDI NEMBROT Isabelle 6 Novembre 2009 M ERCI DE VOTRE A TTENTION