Fortement convaincu de l’efficacité du tryptique “contenu/sémantique Web/qualités globales” pour positionner simplement et efficacement un site Internet, nous avons mis en place un test en conditions réelles. Ou comment prouver aux décideurs de l’importance de créer un site dans une démarche de qualité…

1 mois après la mise en ligne du site, les résultats sont encore plus probants : retrouvez tous les détails de cette expérience en consultant le site comment-vendre-sur-internet.fr : une expérience en conditions réelles de création et mise en place d’un site Internet d’e-commerce de qualité créé sur un cycle de production court :

• Principes de l’expérience,
• Méthodologie de l’expérience,
• Processus de création du site d’e-commerce,
• Caractéristiques du site d’e-commerce,
• Résultats de l’expérience “efficacité d’un site internet de vente en ligne”,
• Conclusions de l’expérience “efficacité d’un site internet de vente en ligne”,
• Suites à donner.

Principes et méthodologie du test

Objectifs du test

Positionner en un mois un site Internet d’e-commerce sur un secteur concurrentiel :

• En travaillant uniquement le site en lui-même (pas d’inscriptions dans les annuaires,…),
• En employant que des principes fondamentaux de l’optimisation et de la qualité des sites Internet (accessibilité, utilisabilité,…),
• En ne recourant qu’à des techniques autorisées.

Choix du secteur d’activité

Notre prospection nous a amené à retenir le secteur de la vente en ligne de tissus et plus particulièrement la vente de tissus “Liberty” très tendance. Ce choix a été motivé par :

• La présence de nombreux acteurs proposant ce type de vente,
• La présence d’acteurs recourant aux liens sponsorisés pour se positionner et recruter des prospects,
• La présence de la suggestion “tissus liberty” lors de la saisie du terme “tissus” sur le moteur de recherche Google.fr (ce qui laisse entendre un fort intérêt pour cette requête),
• Les conseils de notre moitié pour le choix de mots clés tendance,
• Une étude montrant que les taux de conversions les plus élevés s’effectuent sur des requêtes de 3 à 5 mots clés.

Choix de l’URL

Nous l’avons déjà évoqué sur ce blog, le choix de l’URL a toute son importance pour envisager une bonne visibilité. Nous avons donc réservé l’URL : www.tissus-laines-et-mercerie.fr le 18 février 2010.

Choix du CMS

N’étant pas développeur, disposant d’un labs de temps très mince, notre choix est allé vers le CMS payant Kiubi. Ce choix a été motivé par :

• La simplicité d’installation et d’utilisation de l’outil (rarement vu une interface d’administration si conviviale et attirante),
• La qualité du code HTML restitué et la possibilité de le customiser pour améliorer la sémantique des pages,
• La possibilité de travailler les balises META manuellement ou de manière automatique,
• La possibilité de générer des URL pertinentes (mais hélas qu’on ne peut raccourcir),
• Un heureux hasard qui nous a permis de tester l’outil gratuitement (merci Kiubi).

Design et customisation des templates

Une fois le compte Kiubi ouvert, nous nous sommes accordés 2 jours de travail pour poser une charte graphique simple mais efficace, et réaliser l’intégration HTML des différents templates sur la base d’un des gabarits fournis par Kiubi.

Choix des produits et principes de la vente en ligne

• Nous avons retenu une vingtaine de produits répondant aux catégories “tissus”, “laines”, “mercerie” composant le nom de domaine acquis,
• Nous avons bien rempli le rayon “tissus Liberty” sur lequel nous avions décidé de travailler plus particulièrement,
• Pour chaque produit une fiche détaillé a été rédigée de manière soignée avec son illustration,
• Bref nous avons procédé comme si nous préparions un vrai site pour vendre en conditions réelles, mais nous avons appliquer une politique tarifaire très élevée pour nous préserver de toute vente réelle.

Les points sur lesquels nous avons été vigilants :

Du point de vue de l’intégration HTML et de la qualité des pages du site nous avons suivi les principes fondamentaux suivants :

• Un seul titre de niveau 1 cohérent avec le META titre de la page (répété 2 fois dans le code HTML : au tout début après le <body>, puis dans le code),
• Des titres de niveaux inférieurs utilisés à bon escient,
• Utilisation des listes pour les menus,
• Non obstructivité des éléments multimédias,
• Séparation du code et de la mise en forme,…

Du point de vue des éléments de référencement, nous avons veillé :

• A ce que chaque page possède un titre, une description et des mots clés spécifiques et propres, en rapport avec le contenu de la page et cohérent avec le titre de niveau 1,
• A ce que chaque page dispose d’une URL pertinente et signifiante.

Mise en ligne du site

• Nous avons procéder à “l’ouverture commerciale” du site en ouvrant le nom de domaine le 22 février 2010.
• Les outils de suivis Google Analytics et Webmaster Tools furent mis en place le même jour.
• Le site fut soumis à www.google.fr et dmoz.org, un hyperlien fut mis en place depuis le site e-tropisme.fr et c’est tout (pas d’autres inscriptions dans les annuaires) !

Premier état des lieux 15 jours après la mise en ligne

Une bonne visibilité acquise sur les requêtes correspondant aux produits vendus

Seulement 15 jours après la mise en ligne, au 8 mars 2010 :

• Le site www.tissus-laines-et-mercerie.fr a reçu 144 visites via 120 expressions clés dont 84% proviennent des moteurs de recherche (en premier lieu Google avec près de 70% de part de marchés).
• Le site www.tissus-laines-et-mercerie.fr s’est positionné parmi les sites concurrents sur le secteur “tissu Liberty” sur de nombreuses requêtes composées de 2 à 4 mots clés comme le montre le schéma suivant (source Yooda).

Positionnement sur 44 requêtes et 5 moteurs de recherche (8 mars 2010)*

* Légendes

44 mots clés testés choisis parmi les requêtes des internautes concernant le thême “tissu Liberty” :

tissu liberty bleu, tissu liberty jaune, tissu liberty vert, tissu liberty parme, tissu liberty noir, tissu liberty rouge, tissu liberty motifs, tissu liberty fleurs, tissu liberty motifs géométriques, tissu liberty motifs fleurs, tissu bleu, tissu jaune, tissu rouge, tissu vert, tissu parme, tissu noir, tissu marque liberty, tissu motif liberty, tissus liberty bleu, tissus liberty jaune, tissus liberty vert, tissus liberty parme, tissus liberty noir, tissus liberty rouge, tissus liberty motifs, tissus liberty fleurs, tissus liberty motifs géométriques, tissus liberty motifs fleurs, tissus bleu, tissus jaune, tissus rouge, tissus vert, tissus parme, tissus noir, liberty motifs, liberty fleurs, liberty motifs géométriques, liberty motifs fleurs, tissu liberty fabric, tissus liberty fabric, tissu liberty, tissus liberty, tissu liberty vente, tissus liberty vente,

4 sites testés dont 3 présents avant le lancement du site www.tissus-laines-et-mercerie.fr

• http://tissusliberty.blogspot.com
• http://bleudetoiles.oxatis.com
• http://www.tissus-reine.com
• http://www.tissus-laines-et-mercerie.fr

5 moteurs de recherche testés

• Google.fr
• Free.fr
• Orange.fr
• Voila.fr
• Yahoo.fr

Une présence également sur d’autres requêtes

Si c’est le rayon “tissu Liberty” que nous avons le plus développé (11 produits), nous avons également mis en vente un type de pelote de laine et un article de mercerie. Là-encore nous constatons des résultats significatifs en positionnant le site en première page sur des requêtes comme :

• “pelote coton bio sur Google.fr“,
• “pelote coton sur Google.fr“,…

Ce n’est qu’un début…

Evidemment une boutique en ligne avec seulement 15 produits en rayon à des prix prohibitifs aura du mal à avoir un grand succès, et de nombreux chantiers resteraient à réaliser pour en faire une vraie boutique en ligne. Nous continuerons si le temps nous le permet cette expérience dans le semaines qui viennent de manière à apporter plus d’audience au site sur une offre élargie.

Parmi les autres chantiers qui pourraient être menées si ce site n’était pas un site de test, il faudrait :

• Développer l’offre, étoffer les contenus,
• Procéder à des insciptions sur des annuaires, à des échanges de liens,
• Développer les contenus du blog lié au site,
• Accroitre la notoriété sociale en devenant actif sur des outils sociaux majeurs,…

Mais ce n’est pas le principal objectif de ce test !

Conclusions

A peine 15 jours après le lancement commercial du site de test, nous avons réussi au moins partiellement le défi que nous nous étions fixé :

• Le site bien que pauvre en produits en vente a acquis une bonne visibilité sur des requêtes pertinentes par rapport à ses cibles et objectifs,
• Le site possède déjà une audience en internautes prospects générés par les moteurs de recherche,
• Le site a été construit et conçu en repectant un certain nombre de principes simples dans les domaines de la qualité des sites Internet (cf Opquast), de la sémantique Web, de l’accessibilité (cf Référentiel Général pour l’Accessibilité des sites Internet Administrations) du référencement naturel (cf bonnes pratiques préconisées par Google).

Nous disposons maintenant (et libre à vous de vous y référer) d’une petite expérience apportant la preuve  :

• que la qualité des sites Internet est essentielle pour la réussite d’un projet d’ecommerce,
• qu’il est encore possible de se positionner sur des marchés concurrentiels par une démarque orientée qualité et une conception orientée utilisateurs,
• que la mise en place et les développements d’un site disposant d’un fort potentiel de développement n’est pas forcément coûteuse !

Il ne me reste plus qu’à reprendre mon costume de prêcheur et à faire du porte à porte auprès des sites effectuant de l’achat de liens sponsorisés dans cette thématique pour tenter de les convaincre du bien fondé de ma démarche. Mais cette fois-ci je disposerai d’éléments tangibles pour étoffer mon discours !

Je suis friand de tous vos commentaires, remarques et critiques sur cet article !

Et encore merci à Kiubi pour l’aide fournie au travers de ce CMS simple et convivial…

Plus d’informations

Retrouvez tous les détails de cette expérience en consultant le site comment-vendre-sur-internet.fr : une expérience en conditions réelles de création et mise en place d’un site Internet d’e-commerce de qualité créé sur un cycle de production court :

• Principes de l’expérience,
• Méthodologie de l’expérience,
• Processus de création du site d’e-commerce,
• Caractéristiques du site d’e-commerce,
• Résultats de l’expérience “efficacité d’un site internet de vente en ligne”,
• Conclusions de l’expérience “efficacité d’un site internet de vente en ligne”,
• Suites à donner.

La forme

Nous avons ainsi utilisé pour HTML 5 des éléments structurant tels que :

1
2
3
4
5

<header></header> <!-- pour identifier l'en-tête de la page -->
<footer></footer> <!-- pour identifier le pied de page -->
<nav></nav> <!-- pour identifier une zone de navigation -->
<section></section> <!-- pour identifier la section variable de la page -->
<figure></figure> <!-- pour identifier une zone d'illustration et sa légende -->

Pour les CSS 3 nous avons joué avec les ombrés sur les textes ou les blocs, les arrondis ou les rotations.
Alors bien évidemment le site est moins jolie sous Internet Explorer 8 voir inutilisable sous les versions précédentes d’Internet Explorer… Peu importe le principe était d’essayer ces nouvelles versions de langage (et nous avons mis en place un message s’affichant spécifiquement aux utilisateurs d’Internet Explorer pour les inviter à changer de navigateur).

Le fond

Du point de vue des contenus le site présente :

• une définition du développeur Front-end au travers des compétences que doit réunir ce type de professionnel du Web,
• quelques une de nos dernières références en matière d’intégration et de développements Front-end,
• des ressources variées et régulièrement mises à jour en HTML 5 et CSS 3

Son objet est de :

• corriger les épreuves réalisées lors de la précédente séance,
• donner des notions de base concernant le référencement naturel ou SEO.

Corrections des épreuves

Nous reprendrons ici étape par étape le travail qui devait être réalisé lors des épreuves d’intégration XHTML/CSS.

Vous pouvez également télécharger les documents correspondant aux corrections :

• Correction de l’épreuve n°2 : epreuve2-correct.html,
• Correction de l’épreuve n°3 : epreuve3-correct.html.

Notion de référencement naturel ou SEO

Définitions et généralités sur le “référencement” et le “positionnement”

Référencement

Un site est référencé sur un moteur de recherche à partir du moment où les pages qui le composent sont indexées par un moteur de recherche.

Positionnement

Le positionnement définit la visibilité du site parmi tous les autres sites qui sont indexés sur le moteur de recherche.

Référencement versus positionnement

Un site Internet peut se comparer à un produit dans un supermarché :

• lorsque le produit est présent dans le supermarché, il est référencé comme tous les autres produits proposés par l’entreprise
• lorsque le produit est présent en tête de gondole, il est non seulement référencé, mais acquière une bonne visibilité à priori favorable à ses ventes, le produit possède alors un bon positionnement, c’est-à-dire une bonne visibilité.

Par excès de langage les termes référencement et positionnement sont souvent amalgamés au profit du seul terme référencement.

Définitions et généralités « liens organiques » « liens sponsorisés »

Liens organiques

Les liens organiques ou liens naturels proviennent du cœur même du moteur de recherche fournis par l’algorithme propre à chaque moteur. Ils n’ont rien à voir avec les liens sponsorisés assimilables à une démarche de publicité.

Liens sponsorisés

Les liens sponsorisés ou liens commerciaux sont également affichés dans les résultats proposés par les moteurs de recherche, mais ils le sont dans des zones indépendantes des résultats naturels. La présence d’un site parmi les liens sponsorisés peut se comparer à une campagne publicitaire.

Définitions et généralités : 3 étapes lors du référencement

L’affichage des résultats par un moteur se décompose en 3 étapes clés :

1. Extraction depuis l’index du moteur des pages contenant les mots de la requête saisie. Le moteur se sert d’un index de recherche dans lequel les pages du site devront être présentes.
2. Classement des résultats par pertinence. Les mots clés pertinents par rapport à l’activité du site devront être présentes dans les pages indexées par le moteur.
3. Restitution dans le navigateur des résultats. Les termes clés pertinents devront être positionnés dans des « zones chaudes » essentielles pour un bon positionnement.

Sources : http://www.google.fr/intl/en/corporate/tech.html.

Définitions et généralités : Quelles positions sont cruciales en terme de recrutement de prospect ?

Classiquement on peut parler d’un site positionné s’il figure parmi les 30 premiers résultats.

Cependant différentes études ont montré que seule une position parmi les 5 premiers résultats de la première page permettait de drainer réellement des nouveaux internautes sur un site.

Etude de la Cornell University (sources : http://cs.cornell.edu/People/tj/publications/joachimes_etal_05a.pdf)

• 40% des internautes cliquent d’abord sur le premier résultat
• 16% sur le 2nd
• 10% sur le 3ème
• 5-6% sur les 4, 5 et 6èmes résultats.

Triangle d’or

Une étude menée par Dit-It.com, l’œil de l’internaute exploite un « triangle d’or » situé en haut et à gauche des pages de résultat de Google, ce qui permet d’établir un taux de visibilité pour chaque rang des liens proposés par le moteur :

• position 1 à 3 : 100%,
• position 4 : 85%,
• position 5 : 60%,
• position 6 et 7 : 50%

Plus le résultat est rouge vif, plus la zone est lue instinctivement par l‘œil des internautes.

La ligne rouge horizontale représente la ligne de flottaison (partie visible du navigateur sans scroll).

Sources : http://www.prweb.com/releases/2005/03/prweb213516.htm

Définitions et généralités : pages satellites

Pages satellites

Il s’agit de pages web correspondant à plusieurs critères :

• page entièrement conçue pour les moteurs et le référencement,
• page optimisée pour être réactive par rapport aux critères de pertinence des moteurs,
• page contenant des redirections automatiques vers les pages réelles du site.

De 2004 à 2006, l’essentiel des référenceurs usaient et abusaient de ces procédés. C’est désormais à proscrire :

• Les moteurs de recherche considèrent les pages satellites comme du spam,
• Certains moteurs n’hésitent pas à « blacklister » les sites usant encore de ces systèmes pour optimiser le référencement,
• Le positionnement et son amélioration doit se faire au niveau des pages réelles du site par des actions simples et honnêtes.

A consulter : http://www.google.fr/support/webmasters/bin/answer.py?answer=35769

Fonctionnement des moteurs et annuaires

Fonctionnement des moteurs et annuaires : Moteur de recherche

Un moteur de recherche est un ensemble de logiciels parcourant le web pour indexer les pages visitées avec 3 étapes principales :

• COLLECTE D’INFORMATIONS : ou « crawl » grâce à des robots (crawlers, spiders)
• INDEXATION DES DONNEES COLLECTEES : dans une base de données de documents nommée index
• TRAITEMENT DES REQUETES : grâce à un système d’interrogation de l’index et le classement des résultats en fonction des critères de pertinence par rapport à la requête de l’internaute.

Le système de ranking

Le ranking est un processus consistant pour le moteur à classer automatiquement les données de manière à ce que les pages les plus pertinentes apparaissent en premier dans les résultats.

Les moteurs utilisent généralement un mélange de différents systèmes de ranking :

• Le tri par pertinence

Les résultats d’une requête sont triés en fonction de 6 facteurs principaux appliqués au terme de la question :

• Localisation du mot dans le document ou son adresse (url)
• Densité du mot (nombre d’occurrences)
• Mise en exergue du mot,…

• Le tri par popularité

C’est le pagerank pour google à priori indépendant du contenu des pages, il désigne le nombre et la qualité des liens pointant vers les documents.

Plus une page est pointée par des liens émanant de pages populaires, plus sa popularité est grande et meilleur est son classement.

• Le tri par mesure d’audience
• Le tri par clustering,…

Fonctionnement des moteurs et annuaires : Annuaires

Un système très différent de celui des moteurs :

• Aucune recherche n’est effectuée sur le contenu des documents
• Ils proposent une collection de fiches descriptives des sites référencés
• Chaque site est rangé dans une hiérarchie de catégories et sous-catégories
• L’intégration dans les données de l’annuaire correspond à une action volontaire non automatisée.

A noter que le trafic généré par les annuaires est désormais très faible.

La préparation du référencement

6 étapes clés :

1. Choix des mots clés

Ils doivent répondre à 2 notions :

• l’intérêt des mots clés par rapport aux requêtes saisies par les internautes
• la faisabilité du positionnement

Concept de « longue traine » (long tail) :

Source de l’image : Webilus

La sélection des mots clés stratégiques se réalise sur :

• l’intuition
• la base d’outils permettant d’élargir la réflexion notamment en fonction du comportement des internautes.
  • sondages/enquêtes
  • résultats constatés sur les moteurs
  • audit de concurrence
  • fautes d’orthographe potentielles

2. Choix des moteurs et annuaires à prendre en compte

• Vérifier ceux qui induisent déjà la plus grande part de la conquête de clients.
• Ceux où les concurrents sont déjà présents.

3. Création/modification des pages en fonction des mots clés

4. Soumission/vérification de l’indexation des pages dans les moteurs

5. Vérification du positionnement et du trafic généré

6. Suivi et corrections/améliorations

Optimisation des pages du site

« Content is king »

Aucun positionnement possible sans contenu c’est désormais la règle d’or du référencement naturel.

Le concept de « zone chaude »

Dès lors que le contenu est réfléchi et optimisé pour permettre d’envisager un bon positionnement, la phase d’optimisation est envisageable. Cette optimisation nécessite de travailler au niveau du code html des pages et se focalise sur certaines zones du code, d’où le concept de « zones chaudes ».

zone chaude n°1, la balise <title></title>

C’est le titre du site qui s’affiche au niveau de la partie haute du navigateur.
Plus elle est placée haut dans le code html, meilleur sera le poids de la balise dans le référencement.
Toutes les pages doivent avoir un titre différent, et le titre doit comprendre au maximum les expressions clés à raison de 5 à 10 mots.
Attention toutefois à ne pas travailler le titre que pour le référencement, car c’est aussi le premier élément lu par les internautes consultant les résultats d’un recherche sur un moteur.

Le titre doit : contenir 10 mots au maximum, résumer la page en question, contenir les mots clés importants en rapport avec le contenu.

zone chaude n°2, le texte visible

Il s’agit de tous les éléments textuels des pages (pas les images, les flashs,…) s’affichant sans aucune action de l’internaute (donc pas les attributs alt et title).

Classiquement, on considère les premiers mots de la pages comme prépondérants du point de vue du référencement, il est donc nécessaire que cette première partie contienne les mots et expressions clés importantes.

• La mise en exergue du texte : si les mots clés sont contenus dans les balises <strong> ou <em> ou constitue un lien les moteurs les considéreront avec plus de poids. De même l’utilisation des balises de structuration du texte font varier l’interprétation du poids des expressions par les moteurs (balises <h1>, <h2>, <h3>, <h4>,…)
• A priori les moteurs sont incapables de prendre en compte l’interaction avec les feuilles de styles (CSS). Il vaut mieux mettre en gras un mot clé à l’aide de la balise <strong> que d’appliquer le style gras en css (font-weight : bold;).
• L’indice de de densité d’un mot clé, c’est-à-dire sa redondance par rapport au texte possède un poids et influence le positionnement. Ce critère est cependant de moins en moins considéré. L’outil http://www.keyworddensity.com/ permet d’évaluer cette densité. A priori, la redondance forte (supérieure à 10%) est le seuil d’influence sur le positionnement.
• Les déclinaisons du type féminin, pluriels sont à considérer pour augmenter l’impact du mot clé en matière de positionnement.
• Créer une page dédiée par expression clé, c’est-à-dire spécialiser les pages est favorable aux actions de référencement.

zone chaude n°3, l’url de la page

• Posséder un nom de domaine signifiant sans redirection
• Ajouter des mots clés dans le nom de domaine
• Un seul nom de domaine pour éviter d’être considéré comme du spam
• Privilégier plusieurs petits sites plutôt qu’un vaste et unique site
• Séparer les mots clés importants dans le nom de domaine ou l’url
• Créer des sous domaines du type : motclé.votresite.com
• Insérer les mots clés importants et intelligibles séparés par des tirets dans les url

zone chaude n°4, liens et réputations

• La première règle est de construire des liens de forme simples : <a href=«  »>texte du lien</a> et d’éviter tout recours aux javascripts.
• Utiliser un lien pointant vers une page dont la sémantique est pertinente à par rapport au texte du lien revêt également une grande importance : <a href=«parier-en-direct.html»>parier en direct</a>. C’est le principe du Google Bombing. Il faut donc que le texte du lien soit signifiant et en rapport avec le contenu de la page pointée et son url.

zone chaude n°5, liens PageRank et popularité

L’indice de popularité est devenu au fil du temps un critère important pour le classement des résultats des moteurs. Il est donc nécessaire de mettre en place :

• De nombreux liens pointant vers son site
• Des liens provenant de sites eux-mêmes populaires c’est-à-dire reconnus notamment pour leur audience

L’indice de popularité est calculé pour chaque page et non pour un site globalement.

Focus sur le mode de calcul du Pagerank de Google :

• Le Pagerank s’affiche dans la barre d’outils de Google sous forme d’une note variant de 0 à 10 (http://www.google.com/tools/firefox/toolbar/FT3/intl/fr/index.html)
• Le mode de calcul du PageRank répond à une formule complexe, qui peut s’expliquer au travers des 2 exemples suivants. La conclusion est qu’il vaut mieux avoir peu de lien entrant de qualité que beaucoup de liens entrant venant de pages au PR faible.
• Pour augmenter le PR d’une page, il faut que d’autres pages ayant un PR important renvoient vers cette page, et que ces pages possèdent peu de liens renvoyant vers d’autres pages.

Zone chaude n°6, les balises META

• L’influence des balises META sur le positionnement d’un site est de moins en moins important.
• Elles sont intégrées dans l’en-tête de la page (<head></head>) au plus haut dans le code dans l’ordre suivant :

Consignes pour l’optimisation des META :

• TITRE : 10-15 mots, s’affichant dans le haut du navigateur & comme lien souligné dans le moteur
• DESCRIPTION :
  200 caractères, s’affichant dans le haut du navigateur et sur la page de résultat des moteurs
• MOTS CLES :
  10-15 mots, s’affichant dans le haut du navigateur et sur la page de résultat des moteurs
• ROBOTS :
  ici on « autorise » l’indexation par les moteurs, et on les « autorise » à suivre tous les liens de la page

1
2
3
4

<title>PMU : consulter le programme des courses, les arrivées, les résultats des courses hippiques, jouer aux paris PMU</title> 
<meta name="Description" content="Avec le PMU, consultez les programmes, les arrivées et les rapports des courses hippiques. Jouez au Quinté+, Quarté+, Tiercé, pariez spOt. " /> 
<meta name="Keywords" content="Quinté+, Quarté+, Tiercé, pariez spOt, programmes, arrivées, rapports, courses hippiques," /> 
<meta name="robots" content=" index, follow " />

Seules ces 4 balises ont un impact sur le référencement et le positionnement d’un site, toutes les autres n’ont aucun impact.

• Pour les 3 premières balises, pour maximiser le positionnement elles doivent contenir des expressions clés :
  • En rapport avec le contenu de la page
  • En rapport avec l’url de la page
  • Réellement saisies par les internautes
• Indiquer dans la balise keywords les masculins/féminins/pluriels maximise également le référencement, il en est de même pour les caractères accentués à écrire sous forme normale ou sous forme codée (&eacute; pour é,…)
• Il faut également noter que la mise en place de titre et description spécifique à chaque page a tendance à augmenter le nombre de pages indexées par le moteur de recherche.

zone chaude n°7, alt et title

Le alt est pris en compte par google, pas par Yahoo et MSN, l’attribut title est pris en compte par aucun des 3 moteurs principaux.

Les autres critères favorables au positionnement

• Validité/conformité W3C du code html
• Date de création (une page ancienne a plus de poids) : exemple « bouchon » sur google pour le site Amorim
• Nombre de pages du site (plus il a de volume, plus il est considéré comme de confiance)
• Fréquence de mise à jour (plus elle est importante, plus le site est considéré comme intéressant)
• Historique du site (taux de renouvellement,…)

Les contraintes et obstacles au référencement

Les animations flash sont très mal « indexables »

Le contenu d’animations flash n’est pas indexable en l’état, il faut donc replacer tous les contenus textuels présents dans l’animation dans une balise placée sous la balise de l’animation flash, la balise <noembed></noembed>

La problématique javacript

• Les moteurs de recherche ne peuvent interpréter les javascripts.
• Il est donc nécessaire de fournir aux moteurs de recherche (comme aux internautes naviguant sans javascript) de pouvoir accéder au contenu proposé via un javascript, ou suivre un lien proposé sous forme de javascript.

Autres contraintes

• la présence de frames,
• les redirections,
• les pages bloquées par un login/mot de passe,
• les pages dynamiques et url exotiques,
• la présence de cookies empêchant la navigation en cas de non acceptation,…

Le plan du site et le sitemap, une bonne arme pour contourner les problèmes d’indexation

• Le recours à la création d’une page de plan du site pourra permettre de contourner aisément les problématiques de « blocage » des moteurs de recherche par les javascripts, les fichiers flashs ou les autres obstacles au référencement
• Le sitemap (fichier xml contenant toutes les url des pages du site, leurs noms, et des informations associées (date de mise à jour,…) est assez récent (Google – juin 2005) et permet à certains moteurs de suivre tous les liens contenus dans le site malgré certains obstacles potentiels à l’indexation).

Sources

Cette présentation a été réalisée sur la base de l’ouvrage :

• « Réussir son référencement web » d’Olivier Andrieux (http://www.editions-eyrolles.com/Livre/9782212122640/reussir-son-referencement-web) aux Editions Eyrolles

Pour plus d’informations sur le référencement et le positionnement les sites suivants sont recommandés :

• http://www.abondance.com/
• http://www.webrankinfo.com/
• http://www.webrankinfo.com/actualites/index.php (blog)

Durée : 3 à 4 heures

Décomposée en 3 parties à traiter obligatoirement dans l’ordre

Partie n°1 : questionnaire à Choix Multiple

• • Téléchargez le quiz
  • Généralités sur l’intégration et la création de sites Internet
  • Durée : 45 minutes maximum
  • Chaque question comporte 3 propositions dont une seule est exacte, vous devez cocher la réponse exacte
  • Notation :
    • 1 point en plus si la réponse est juste
    • 0,5 points en moins si la réponse choisie est fausse
    • 0 point en cas de non réponse
  • Il y a 15 questions au total, la note maximum est donc de 15/15
  • Le document au format papier est distribué en début d’exercice et récupérer 45 minutes après.

Partie n°2 - Exercice d’intégration XHTML

Principes

• Exercice d’intégration XHTML
• Durée : 1h30

Déroulement

• Télécharger le document epreuve2.html,
• Enregistrez-le sur votre ordinateur, en le renommant epreuve2_votrenom-votreprenom.html en remplaçant “votrenom” par votre nom et “votreprenom” par votre prénom,
• Ouvrez le document avec un éditeur de code,
• Suivez les consignes proposées dans le document Word préalablement distribué au début de l’épreuve
• Durée : 1h30

Partie n°3 - Exercice de création de styles CSS

Principes

• Exercice d’intégration de styles CSS
• Durée : 1h30

Déroulement

• Télécharger le document epreuve3.html,
• Enregistrez-le sur votre ordinateur, en le renommant epreuve3_votrenom-votreprenom.html en remplaçant “votrenom” par votre nom et “votreprenom” par votre prénom,
• Ouvrez le document avec un éditeur de code,
• Suivez les consignes proposées dans le document Word distribué en séance,
• il s’agit de compléter les styles CSS déjà présents dans la partie <head></head> de la page web,
• Durée : 1h30

Cette séance a pour objectif de :

• Reprendre des fondamentaux de l’intégration XHTML (révisions et rappels),
• Présenter comment intégrer d’autres éléments (formulaires,…),

Sources

• Nicolas Royackkers - Le langage XHTML/CSS - Université de Picardie Jules Verne. Nous le remercions pour l’aide fourni.

Rappels sur l’intégration XHTML

Un document XHTML est consultable sur des médias différents :

Le recours aux CSS permet de varier les mises en forme sans changer le contenu de la page Web :

Rappel : des aides mémoires pour s’y retrouver…

• Code XHTML : http://www.gosquared.com/images/help_sheets/HTML%20Help%20Sheet%2002.pdf
• Code CSS : http://www.gosquared.com/images/help_sheets/CSS%20Help%20Sheet%2002.pdf

Structure d’une page XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<code><html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
 
<!DOCTYPE html PUBLIC "?//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1?strict.dtd">
 
<html>
 
<head>
 
  <title>ici le titre de la page</title>
 
  <style type="text/css">
 
    .Style1 {	font-weight: bold;
    font-style: italic;}
 
  </style>
 
</head>
 
  <body>
 
  <p>contenu de la page...</p>
 
</body>
</html></code>

Le corps de la page

Le corps de la page est l’endroit où doit être placé l’ensemble du contenu du document. Le balisage XHTML
permet de décrire la structure et la sémantique de ce contenu.

Éléments bloc et éléments en ligne

L’élément body (corps du document) admet un grand nombre d’éléments d’enfants. Ils sont tous optionnels
et l’ordre de leur apparition n’est pas contraint.

Titres et paragraphes

Les éléments de base de toute page de texte, qu’elle soit publiée sur le web ou non, sont les titres et les
paragraphes.

Les titres

Il existe six niveaux de titres possibles en XHTML. Ce sont : h1, h2, h3, h4, h5 et h6 (h est ici
l’abréviation du mot anglais header). L’élément h1 est un titre de niveau 1, qui est le niveau le plus élevé
dans la hiérarchie des titres. On l’utilise en général pour titrer la page. Les éléments h2 peuvent être
considérés comme des titres de chapitres, h3 comme des titres de sections, h4 comme des titres de
sous-sections, etc.
Exemple :

1

<code><h1>Présentation</h1></code>

Les paragraphes

Un paragraphe de texte est défini par l’élément p.
Exemple :

1
2

<code><p>A mi-chemin entre Paris et Lille (moins d’une heure de train chacune),à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures de Londres,
  l’université de Picardie est au coeur de l’Europe.</p></code>

Les titres et les paragraphes sont des éléments de type bloc. Par défaut, les navigateurs afficheront un
espacement après chaque titre et chaque paragraphe.
Exemple du corps d’une page comportant un titre
général et deux chapitres :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<code>
 
  <h1>Présentation</h1>
 
  <h2>Amiens au coeur de l’Europe</h2>
 
  <p>
  A mi-chemin entre Paris et Lille (moins d’une heure de train chacune),à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures
  de Londres, l’université de Picardie est au coeur de l’Europe.</p>
 
  <h2>Les sites d’implantation</h2>
 
  <p>
  L’université de Picardie Jules Verne est présente dans six villes
  de la région : Amiens, Beauvais, Creil, Saint-Quentin, Laon, Cuffies-Soissons.</p>
 
  <p>Bienvenue à l’Université de Picardie !</p>
 
  </code>

Observez le rendu de cet exemple dans votre navigateur préféré.

Les sauts de ligne

Pour provoquer un saut de ligne à l’affichage sans pour autant changer de paragraphe, on utilise l’élément
sans contenu br (abréviation de l’anglais break rule).
Exemple :<p>Bienvenue<br />
à l’Université de Picardie !</p>

Sémantique du texte

Dans le texte d’une page, certains mots ou certaines expressions ont un rôle particulier. XHTML offre de nombreuses balises ayant un rôle sémantique pour les repérer. Comme on peut s’y attendre, presque toutes délimitent des éléments en ligne.

Emphase

L’emphase consiste à mettre en avant une portion de texte. Il s’agit de montrer qu’un mot ou une expression
possèdent une importance particulière. XHTML offre deux niveaux de mise en valeur : faible, avec l’élément
em et forte avec l’élément strong.

Exemple :

1

<code> <p><em>Ce texte</em> est important, mais <strong>celui-ci</strong> est encore plus important !</p>   </code>

Citations

Deux éléments permettent de définir des citations : l’élément en ligne q (pour quote en anglais) et l’élément
bloc blockquote. Le choix se fera selon la longueur de la citation et son rôle dans le texte.

Exemples :

1
2
3
4
5
6
7
8

<code> <p>Boileau a écrit : <q>Ce qui se conçoit bien s’énonce clairement</q>.</p>
<blockquote>
<p>
Posons pour maxime que les premiers mouvements de la nature sont toujours droits :
il n’y a point de perversité originelle dans le coeur humain.
Il ne s’y trouve pas un seul vice dont on ne puisse dire comment et par où il est entré.
</p>
</blockquote></code>

Observez le rendu de cet exemple dans votre navigateur préféré.

Indice et exposant

XHTML n’est pas un langage adapté à l’écriture d’expressions mathématiques complexes. Il permet
cependant d’exprimer les notions d’indice et d’exposant grâce aux éléments sub et sup respectivement.

Exemples :

1
2

<code><p>La formule chimique du dioxyde de carbone s’écrit CO<sub>2</sub>.</p>
<p>y = x<sup>4</sup> - 3x<sup>2</sup> + 1</p></code>

Abréviation, acronyme et définition

Terminons par trois balises en ligne dont le nom est assez facile à retenir : abbr identifie une abréviation,
acronym un acronyme

Exemples :

1
2

<code><p><abbr title="france">fr</abbr> est une abréviation répertoriée par l’<acronym title="International Standards Organization">ISO</acronym>
pour désigner la langue française.</p></code>

Les listes

Les listes simples constituent des éléments "bloc" à vocation uniquement structurelle. On distingue les listes
non ordonnées ul (unordered list) et les listes ordonnées ol (ordered list). Une liste doit comporter un ou
plusieurs éléments enfants li (list item). Il s’agit des éléments de la liste, également de type bloc, qui
contiennent les différentes parties du texte.

Exemple de la recette de l’oeuf à la coque :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<code><h1>Recette de l’oeuf à la coque</h1>
<h2>Ingrédients</h2>
<ul>
<li>un oeuf bien frais</li>
<li>du pain</li>
<li>du sel</li>
</ul>
<h2>Préparation</h2>
<ol>
<li>faire bouillir de l’eau</li>
<li>y plonger l’oeuf et déclencher le minuteur</li>
<li>découper le pain en mouillettes</li>
<li>retirer l’oeuf après 2 minutes de cuisson</li>
<li>dans un coquetier, casser son extrémité supérieure</li>
<li>saler légèrement et déguster avec les mouillettes</li>
</ol></code>

Lors du rendu du document par défaut, une liste non ordonnée sera représentée par une liste à puces, tandis
qu’une liste ordonnée sera représentée sous la forme d’une liste numérotée. Observez le rendu de cet exemple dans votre navigateur préféré.

Les liens

Nous voici parvenus au coeur du langage XHTML : les liens hypertextes ou hyperliens ou tout simplement liens. Permettant de lier une page avec n’importe quel autre document, ils sont sans doute à l’origine du
formidable succès qu’a rencontré le web.
Un lien est inséré à l’aide de l’élément en ligne a (abréviation de l’anglais anchor). La balise ouvrante a comporte l’attribut obligatoire href, qui spécifie l’adresse de la page désignée par le lien (URL du document
cible). L’élément a possède également des attributs optionnels qui peuvent être utiles dans certains cas. Citons notamment le title : donne une brève description du document désigné par le lien, généralement affichée sous forme
d’une info-bulle lors du survol du lien par le pointeur de souris.

Exemple de lien vers un autre site, également appelé lien externe :

1

<code><p>Pour plus d’informations, consultez le site du <a href="http://www.w3.org" title="le site du W3C">W3C</a>.</p></code>

Terminons ce tour d’horizon avec les liens spéciaux. Ceux-ci n’utilisent pas le protocole HTTP et vont déclencher l’exécution d’un autre logiciel.

L’exemple le plus courant est celui d’un lien de type mailto, qui va ouvrir le logiciel de messagerie configuré par défaut :

1

<code><p><a href="mailto:nicolas.royackkers AT u-picardie POINT fr ">Contacter l’auteur</a> du cours</p></code>

Images

Les navigateurs sont capables d’afficher des images dans les pages web. Les formats d’image supportés nativement par tous les navigateurs sont au nombre de trois : GIF, PNG et JPEG. Les deux premiers sont des formats utilisant une compression sans perte, le troisième offre une compression bien supérieure (dont le taux est réglable), mais au prix de la perte de certains détails de l’image.

Il comporte deux attributs obligatoires :

• src : l’adresse du fichier contenant l’image à afficher
• alt : un texte court décrivant le contenu de l’image ; cet attribut est indispensable pour lespériphériques de sortie non visuels (plage Braille, synthétiseur vocal, etc.) ou encore les navigateurs
  n’affichant pas les images

Exemple :

1

<code><p><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="champ de tournesols" /></p></code>

L’élément img comporte différents attributs optionnels, dont on peut citer :

• height : hauteur d’affichage de l’image, en pixels
• width : largeur d’affichage de l’image, en pixels

Il est facile de combiner des éléments a et img pour créer une image cliquable, c’est-à-dire un lien
hypergraphique et non hypertexte. Il suffit de placer une image comme contenu d’un lien.

Exemple :

1

<code><p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="champ de tournesols" /></a></p></code>

Un clic de souris en n’importe quel point de l’image entraînera le chargement de la page désignée par le lien. Observez le rendu de cet exemple dans votre navigateur préféré.

Tableaux

En matière de création web, les tableaux possèdent une réputation sulfureuse. En effet, ils ont longtemps été
détournés de leur emploi normal pour servir à agencer les pages. Ainsi, un document était souvent découpé
en une multitude de cellules de tableaux imbriqués, chacune d’elles permettant de positionner précisément unélément de la page. Bien qu’efficace sur le plan visuel, cette technique de mise en page bafouait le rôle sémantique des tableaux et produisait un code excessivement lourd et difficile à maintenir. Très populaire dans la seconde moitié des années 90, elle a été rendue obsolète par la généralisation des feuilles de style.

Pour en savoir plus, consultez par exemple cet excellent article : En quoi la mise en page par tableaux est-elle stupide ? (http://www.cybercodeur.net/weblog/presentations/seybold/everything.html)
Cela étant précisé, les tableaux restent utiles pour présenter des données naturellement tabulaires, que ce soit
dans un document bureautique ou une page web. En XHTML, on insère un tableau à l’aide de l’élément
table. Ensuite, on définit les lignes du tableau à l’aide d’éléments tr (table row). Enfin, on définit les
cellules de chaque ligne à l’aide d’éléments td (table data). Un tableau doit comporter au moins une ligne
(élément enfant tr) et une ligne doit compter au moins une cellule (élément enfant td).

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<code><table>
<tr>
<td>Allemagne</td>
<td>82</td>
</tr>
<tr>
<td>Danemark</td>
<td>5</td>
</tr>
<tr>
<td>Pays-Bas</td>
<td>16</td>
</tr>
</table>
</code>

Consultez cet exemple dans votre navigateur

La représentation par défaut est minimaliste : l’affichage des données occupe la place strictement nécessaire et le contour (ou bordure) des cellules n’est pas dessiné par la plupart des navigateurs. On pourra facilement modifier cela grâce aux feuilles de styles. On peut également donner un titre au tableau grâce à l’élément caption, qui, s’il est employé, doit être le premier élément enfant de l’élément table.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<code><table border="1">
<caption>Peuplement de trois pays d’Europe</caption>
<tr>
<th>Pays</th>
<th>Population (en millions)</th>
</tr>
<tr>
<td>Allemagne</td>
<td align="right">82</td>
</tr>
<tr>
<td>Danemark</td>
<td align="right">5</td>
</tr>
<tr>
<td>Pays-Bas</td>
<td align="right">16</td>
</tr>
</table></code>

Consultez cet exemple dans votre navigateur

Comme dans les logiciels tableurs, XHTML permet de créer des tableaux dont certaines cellules sont
fusionnées, c’est-à-dire réunies en une seule. Pour fusionner plusieurs cellules d’une même ligne, on utilise
l’attribut colspan d’un élément td (ou th). La valeur de cet attribut est le nombre de cellules situées à droite
de la cellule courante à réunir avec celle-ci.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<code><table border="1">
<caption>Notes du second trimestre</caption>
<tr>
<th>Prénom</th>
<th>Maths</th>
<th>Français</th>
</tr>
<tr>
<td>Bianca</td>
<td align="right">15</td>
<td align="right">12</td>
</tr>
<tr>
<td>Mamadou</td>
<td align="right">11</td>
<td align="right">18</td>
</tr>
<tr>
<td>Jules</td>
<td colspan="2" align="center">absent</td>
</tr>
</table>
</code>

Consultez cet exemple dans votre navigateur

De manière similaire, il est possible de fusionner des cellules appartenant à une même colonne grâce à
l’attribut rowspan de l’élément tr.

Les éléments génériques div et span

Pour aller plus loin encore, le langage XHTML met à disposition des développeurs deux éléments génériques. L’un est un élément de type bloc, c’est div. L’autre est un élément en ligne, c’est span. Aucun rôle sémantique n’est attribué à ces éléments.

L’élément div

Reprenons l’exemple du menu principal d’une page web et imaginons qu’il n’est pas constitué seulement une
liste de liens, mais également d’un paragraphe de texte. Comment regrouper sémantiquement ces différents éléments pour signifier que, ensemble, ils forment le menu principal de la page ?

Tout simplement en les incluant dans un bloc div nommé de façon pertinente avec id :

1
2
3
4
5
6
7
8
9
10

<code><div id="menu">
<p>ZeBootik vous propose :</p>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Nous contacter</a></li>
</ul>
</div>
</code>

Comme on le voit, l’utilisation combinée de l’élément div et de l’attribut id est particulièrement adaptée à la définition des grandes parties qui constituent généralement tout document web : entête, menu, zone principale, pied de page, éventuels encarts publicitaires, etc.

L’élément span

L’élément span, de part son type en ligne, sert naturellement à enrichir la sémantique du document de manière locale. Continuons avec notre exemple culinaire et imaginons que nous souhaitions repérer sémantiquement tous les termes désignant des fruits ou des légumes dans le texte des recettes. Évidemment, aucun élément du langage XHTML ne joue un rôle aussi spécialisé. C’est là que l’élément span intervient.

Exemple :

1
2
3
4

<code>
<ul><li>Couper les <span class="fruit">pommes</span>en quartiers</li>
<li>Peler et émincer l’<span class="légume">oignon</span></li></ul>
</code>

L’élément span ayant une utilisation locale, il est probable qu’il soit utilisé pour repérer plusieurs fois le même rôle sémantique dans une même page. C’est pourquoi il est le plus souvent utilisé avec un attribut class. Ces mécanismes de balisage peuvent être adaptés à tout domaine. Ils constituent un moyen d’enrichir et de personnaliser la structure et la sémantique d’un document de manière illimitée.

Les formulaires en XHTML

1

<code><form method="post" action="traitement.php"></code>

1
2
3
4
5
6

<code><form method="post" action="rechercher.php">
    <p>
        <label for="recherche">Rechercher : </label>
        <input type="text" name="recherche" id="recherche" />
    </p>
</form></code>

1
2
3
4
5
6
7
8

<code><form method="post" action="rechercher.php">
    <p>
        <label for="recherche">Rechercher : </label>
        <input type="text" name="recherche" id="recherche" />
        <input type="submit" value="Rechercher" />
    </p>
</form>
</code>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<code><form method="post" action="traite_options.php">
    <p>Choisissez vos options :</p>
    <p>
        <input type="checkbox" name="jantes_alliage"  id="jantes_alliage" />
        <label for="jantes_alliage" >Jantes alliage</label> <br />
        <input type="checkbox" name="peinture_metal" id="peinture_metal" />
        <label for="peinture_metal" >Peinture métallisée</label> <br />
        <input type="checkbox" name="clim_auto" id="clim_auto" />
        <label for="clim_auto">Climatisation automatique</label> <br />
        <input type="checkbox" name="gps" id="gps" />
        <label for="gps">Système GPS</label> <br />
        <input type="checkbox" name="assistance" id="assistance" checked="checked" />
        <label for="assistance">Assistance 24h/24 (gratuit)</label>
    </p>
 
    <p>
        <input type="submit" value="Confirmer" />
    </p>
</form>
</code>

1
2
3
4
5
6
7
8
9
10
11

<code>
<form method="post" action="remarques.php">
    <p>
        <label for="texte_reclamation">Vos remarques complémentaires :</label> <br />
        <textarea name="texte_reclamation" id="texte_reclamation" rows="8" cols="50"></textarea>
    </p>
    <p>
        <input type="submit" value="Valider" />
    </p>
</form>
</code>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<code>
<form method="post" action="mois_naissance.php">
    <p>
        <label for="mois">Quel est votre mois de naissance ? </label> <br />
        <select name="mois" id="mois">
            <option value="1">Janvier</option>
            <option value="2">Février</option>
            <option value="3">Mars</option>
            <option value="4">Avril</option>
            <option value="5">Mai</option>
            <option value="6">Juin</option>
            <option value="7">Juillet</option>
            <option value="8">Août</option>
            <option value="9">Septembre</option>
            <option value="10">Octobre</option>
            <option value="11">Novembre</option>
            <option value="12">Décembre</option>
        </select>
    </p>
    <p>
        <input type="submit" value="Valider" />
    </p>
</form>
</code>

Cette séance a pour objectif de réaliser l’intégration d’une page web complète en réalisant d’une part son intégration XHTML, et d’autre part sa mise en forme en CSS.

Principe

• Travail individuel de 3h30 heures visant :
  • à intégrer une page web simple d’après une charte graphique proposée
  • à vérifier la qualité de l’intégration à l’aide des validateurs :
    • Validateur du code HTML : http://validator.w3.org/#validate_by_upload
    • Validateur du code CSS : http://jigsaw.w3.org/css-validator/#validate_by_input
• Ce travail n’est pas noté, il s’agit d’un exercice préparatoire à la prochaine évaluation !

Déroulement de l’exercice

• Récupérer la maquette disponible en cliquant sur ce lien : maquette au format jpg ;
• Récupérer le répertoire contenant les éléments de base (un répertoire "images" contenant 4 images et un fichier HTML) pour l’intégration en cliquant sur le lien : télécharger le répertoire ;
• Décompresser le répertoire ;
• Ouvrir la page index.html avec votre éditeur de code pour commencer à réaliser l’intégration XHTML/CSS, vous disposez de 3h30 environs pour réaliser l’exercice ;
• Tous les contenus textuels peuvent être récupérés dans le fichier texte : télécharger le fichier texte ;
• Je suis à votre disposition pour vous aider à chaque moment à réaliser le travail demandé ;
• Au bout de 3h30 de travail, je passerai récupérer sur une clé USB le répertoire-site ;
• Vous pouvez vous aider en vous servant des exercices et cours des séances précédentes ou en cherchant des informations directement sur les moteurs de recherche ;
• Le but est que la page web montée et finalisée soit à 100% la copie de la maquette proposée au format jpeg.

Vous pouvez vous servir des aides-mémoires déjà communiqués :

• Code XHTML : http://www.gosquared.com/images/help_sheets/HTML%20Help%20Sheet%2002.pdf
• Code CSS : http://www.gosquared.com/images/help_sheets/CSS%20Help%20Sheet%2002.pdf

Plan de l’intégration à réaliser

Le plan ci-après doit vous aider à vous repérer et à identifier les travaux à réaliser successivement.

1. Les CSS qui s’appliquent à la balise body sont déjà en place ;
2. Créer un premier conteneur (div) qui contiendra l’ensemble de la page (largeur : 1000 pixels, couleur de fond : #f1f1f1) ;
3. Créer un second conteneur à l’intérieur du premier qui sera consacré à la têtière et qui contiendra à gauche le logo SRC, le titre du site (utilisation de la balise <h1>) et l’image d’illustration de droite (vous n’aurez pas à préciser la couleur de la police du texte du <h1>, elle est héritée des styles précisés dans le "body" qui s’appliquent par défaut à tous les éléments de texte) ;
4. Créer après le conteneur de têtière un nouveau conteneur qui contiendra toute le contenu du menu au footer (lien de pied de page) ;
5. Créer dans ce nouveau conteneur, le menu principal à partir d’une liste ordonnée (<ul><li></li></ul>), la couleur de fond utilisée est le #145285, la couleur des textes des liens est du blanc ;
6. Mettre en place le contenu de la page composé de <h2> cliquables et de paragraphe :
   1. Les <h2> cliquables ont pour couleur #145285, la taille de la police est de 16px
   2. Les <h3> ont pour couleur #145285, le texte est justifié, la taille de la police est de 13px
   3. Les <p> ont pour couleur : #145285, le texte est justifié, la taille de la police est de 11px
7. Mettre en place l’image illustrant le paragraphe sur les étudiants chinois ;
8. Créer le footer en intégrant les liens dans un paragraphe (couleur de fond : #145285, taille de police : 10px; texte aligné à droite) ;
9. Vérifier le rendu sur votre navigateur ;
10. Vérifier le respect des normes à l’aide du validateur du code HTML : http://validator.w3.org/#validate_by_upload ;
11. Vérifier le respect des normes à l’aide du validateur du code CSS : http://jigsaw.w3.org/css-validator/#validate_by_input (copier coller le code CSS uniquement dans le champ du formulaire)
12. Si tout est conforme, enregistrer la page index.html en "nom-prenom.html", et appelez-moi pour que je récupère votre travail sur clé USB.

Merci et bon courage…

Cette séance a pour objectif de présenter le processus d’intégration web au travers de la découpe et du montage d’une page web simple.

Rappels

Lors des séances 6 et 7 nous avons commencé à réaliser l’intégration d’une page Web :

• En utilisant le fichier Photoshop (PSD) transmis par l’infographiste après validation de la charte graphique par le client
• En créant le code XHTML/CSS dans un éditeur de code (notepad, dreamweaver,…) de manière à recréer l’interface designée par l’infographiste.

Cette huitième séance de cours vise à achever l’intégration XHTML/CSS de la page web puis à tester sa conformité avec les validateurs de code.

Objet de la huitième séance

Reprise de l’intégration

• Récupérez les éléments suivants :
  • Répertoire contenant : hotel_hunan.zip
    • La page et les éléments liés en cours de construction
    • Fichier Photoshop ayant servi de source au découpage des éléments visuels appelés dans la page web
• Décompresser le répertoire récupéré
• Ouvrir le fichier Photoshop
• Ouvrir le fichier HTML avec un éditeur de code

Validation de la conformité du code XHTML/CSS

• Validateur du code HTML : http://validator.w3.org/#validate_by_upload
• Validateur du code CSS : http://jigsaw.w3.org/css-validator/#validate-by-upload

Préparation de la 9ème séance de cours

Dans le cadre des cours suivants, les élèves vont devoir créer une version web de leur CV qui sera mise en ligne une fois achevée et pourra ainsi être utilisée par les élèves pour leur recherche de stages ou d’emplois ultérieures. Cet exercice personnel sera noté. Pour anticiper au travail, les élèves devront pour le jeudi 14 janvier préparer les éléments suivants :

• CV au format Word
  
  • identité
  • adresse et coordonnées
  • parcours scolaire
  • parcours professionnel
  • hobbies/loisirs
  • photographie d’identité
• Recherche de sites séducteurs par le graphisme, ou l’ergonomie proposés :
  • sélectionner 3 sites Internet dont le graphisme et l’ergonomie séduit les élèves

Les prochaines séances de cours auront lieu les jeudi 14 et vendredi 15 janvier 2010.

Le développeur front-office c’est le nouveau terme qui qualifie l’intégrateur XHTML/CSS, celui qui part du bon vieux PSD fourni par les infographistes et qui en fait des pages interactives fonctionnelles sur tous les navigateurs et accessibles à tous (vive l’utopie).

Zoom sur le métier de développeur front-office

Lors de la dernière session de Paris Web qui s’est déroulée à l’automne dernier, Stéphane Deschamps (Orange - France Télécom) a proposé une conférence au cours de laquelle il montre les évolutions du métier d’intégrateur XHTML/CSS. Vous pouvez retrouver la vidéo de la conférence accompagnée de sa présentation de diapositives sur le site de Paris Web à l’adresse : http://videos.paris-web.fr/2009/j01-ga-integrateurs-montez-au-front–stephane-deschamps–parisweb2009.mov.

Je la conseille vivement à ceux qui exerce déjà ce métier (ils souriront certainement de nombreuses fois devant les histoires vécues racontées par Stéphane) ainsi qu’à ceux qui souhaitent en faire leur métier !

Il y a de nombreuses autres vidéos à visionner sur le site toujours hyper intéressant de ParisWeb : http://videos.paris-web.fr/2009/.

Cet article a été rédigé d’après l’article en anglais dispensé par le très intéressant blog www.quirksmode.org dont je vous recommande une lecture attentive !

Si vous avez déjà construit des feuilles de styles CSS en utilisant les propriétés “float“, vous avez du rencontrer en conséquence deux types de problèmes :

• Si l’élément contenant des éléments flottants possèdent une bordure, celle-ci ne s’aligne pas sur le bas de l’élément le plus haut,
• Si vous voulez placer un élément flottant en revenant dans le flux après les éléments flottants, leur positionnement dans le navigateur internet semble étrange !

En général (et c’est le cas de la plupart des intégrateurs avec lesquels j’en ai parlé) on rompt les flottements et on revient dans le flux normal en plaçant après les éléments flottants un élément qui possèdent les propriétés “clear:both“.

Le souci s’est que du point de vue de la sémantique ce n’est pas très pertinent car cette propriété nécessaite souvent la mise en place d’un élément HTML supplémentaire non justifié (un <br /> très souvent…).

Or l’article http://www.quirksmode.org/css/clearing.html propose une solution bien plus intelligente et respectueuse de la sémantique.

L’élément contenant les éléments flottants doit possèder la propriété “overflow:hidden” et possèder au moins une propriété fixant sa hauteur ou sa largeur :

1
2
3

div.container {border: 1px solid #000000;overflow: hidden;width: 100%;}
div.left {width: 45%;float: left;}
div.right {width: 45%;float: right;}

Dans ce code, le premier élément ayant comme classe container possède une largeur en % et la propriété “overflow:hidden”. Il contient deux élément flottants “right” et “left”. Sa bordure se cale cependant correctement grâce aux 2 propriétés combinées concernant la largeur et la visibilité.

Plus d’informations sur l’article en langue anglaise http://www.quirksmode.org/css/clearing.html.

Dans la trousse à outil des intégrateurs XHTML/CSS, Firebug est devenu un outil indispensable au point que bien souvent l’envie nous prend de cliquer sur le petit insecte en bas à droite de l’écran et ce sur tous les navigateurs, mais hélas ce n’est pas possible. Pourtant j’ai découvert récemment la possibilité de mettre en place un équivalent bien pratique sur les navigateurs ne disposant pas de cette extension indispensable pour les tests d’interopérabilité.

Mettez du Firebug dans d’autres navigateurs…

La méthode à suivre est très simple, elle est décrite en langue anglaise à l’adresse : http://getfirebug.com/lite.html. FireBug Lite se comporte comme Firebug avec les mêmes fonctionnalités, pour sa mise en place il suffit d’appeler dans les pages qui doivent être testées un appel javascript supplémentaire :

1

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js" type="text/javascript"><!--mce:0--></script>

Le code source du javascript est disponible à l’adresse : http://getfirebug.com/releases/lite/1.2/