Embed Size (px)
Citation preview
TECHNOLOGIES DE L’INTERNET
MINI PROJET
Licence Professionnelle TDI
NEMBROT Isabelle
6 Novembre 2009
Kréactiv.netPromotion de la Culture Créole
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture du Site
5/ Informations Diverses
6/ un Code Intéressant suivi de la Conclusion
1/ LE PROJET
Réaliser le site web « vitrine » d’une entreprise
Objectifs :
Faire connaître l’entreprise
Valoriser les produits proposés par l’entreprise
3
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture du Site
5/ Informations Diverses
6/ un Code Intéressant suivi de la Conclusion
2/ LE CAHIER DES CHARGES
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 d’un
fichier XML dont l’affichage est imposé
• Présentation XHTML
5
2/ LE CAHIER DES CHARGES
Deux modes d’affichage 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
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture du Site
5/ Informations Diverses
6/ un Code Intéressant suivi de la Conclusion
3/ PRÉSENTATION DU SITE
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 d’accueil avec le style professionnel
9
3/ PRÉSENTATION DU SITE
Extrait de la page d’accueil avec le style graphique
10
3/ PRÉSENTATION DU SITE
11
Comparaison des deux styles
3/ PRÉSENTATION DU SITE
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture du Site
5/ Informations Diverses
6/ un Code Intéressant suivi de la Conclusion
4/ L’ARCHITECTURE DU SITE
13
4/ L’ARCHITECTURE DU SITE
Présentation des Produits
Trois types de présentation différents :
Gestion des nouveaux produitsCatalogue en ligne de tous les produitsSélection du mois en cours
14
4/ L’ARCHITECTURE DU SITE
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 l’image)
zone d’agrandissement
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’ARCHITECTURE DU SITE
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’ARCHITECTURE DU SITE
Sélection du mois en cours
17
Description :
Présentation AJAX
Affichage des produits du XML dont l’attribut « 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 l’image correspondante
18
Vérification du Formulaire
Plugin utilisé : JQUERY Form Validation Champs obligatoires : liste déroulante et champs de
texte
affichage d’un message d’erreur 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 d’un message d’erreur 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’ARCHITECTURE DU SITE
19
4/ L’ARCHITECTURE DU SITE
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’ARCHITECTURE DU SITE
(Zedd est le surnom de l’administrateur)
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture 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 3.0.14
Internet Explorer version 6
Opera version portable 9.23
Chromium version portable 0.2.151.0
Safari version 4.0.4 22
5/ INFORMATIONS DIVERSES
Problèmes rencontrés
par rapport aux différents navigateurs testés
Internet Explorer1. Visuel : police de balise de titre très grosse2. Présentation AJAX : inaccessible sans passer par un serveur
Opera3. Présentation XHTML : agrandissement des miniatures de
produits non fonctionnel4. 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/ INFORMATIONS DIVERSES
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
Safario Présentation XHTML : agrandissement des miniatures de
produits non fonctionnel
FirefoxAucun problème ! => maquette idéalement déployée
24
5/ INFORMATIONS DIVERSES
PLAN
1 / le Projet
2/ le Cahier des Charges
3/ Présentation du Site
4/ l’Architecture du Site
5/ Informations Diverses
6/ un Code Intéressant suivi de la Conclusion
6/ UN CODE INTÉRESSANT
Extrait du code du formulaire de contact :Page contact.html
<label for="nom"> * NOM : </label>
<input class="input_moy" required='true' mask="alpha" type="text" name="NOM" id="nom" value="">
<label for="cp"> Code Postal : </label>
<input class="input_pt" required='false' maxlength="5" mask='zip' type="text" id="cp" name="Code Postal">
26
6/ UN CODE INTÉRESSANT
Présence d’attributs 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 d’un formulaire)
POURTANT, la page est correcte au niveau du validateur
27
6/ UN CODE INTÉ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
<!ATTLIST input required (true|false) #IMPLIED>
<!ATTLIST input mask CDATA #IMPLIED> ]>
28
6/ UN CODE INTÉRESSANTStructure :
<!ATTLIST elementName attributeName type optionalStatus>
elementName : nom de la balise dans laquelle on souhaite utiliser attributeName (nom de l’attribut non reconnu qu’on veut valider)
type :
CDATA : value de attributeName peut contenir n’importe 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 CODE INTÉ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 à l’utilisation d’AJAX avec JQUERY notamment lors des nombreuses recherches nécessaires effectuées sur Google
31
CONCLUSION
TECHNOLOGIES DE L’INTERNET
MINI PROJET
Licence Professionnelle TDI
NEMBROT Isabelle
6 Novembre 2009
MERCI DE VOTRE ATTENTION
