Ce document détaille un programme de formation pour la création de sites web, abordant des thèmes comme les langages de programmation, les CMS et l'accessibilité. Il est structuré en trois jours, chacun comportant des sessions sur la conception, la mise en page, et le contenu web. La formation inclut aussi des travaux pratiques et des conseils sur l'utilisation d'outils et de ressources pour améliorer l'expérience utilisateur.

1. SAPIENS - Programme 2009 de développement de compétences Module 4 – Créer un site web

2. Présentons-nous... Moi, Vous, vos attentes ? Christophe RUDELLE Consultant Tel : 05 61 69 06 00 [email_address]

3. Programme de la formation – Jour 1 Tour de table (15 mn) Les briques techniques de base de la création d’un site web (1h30) XHTML, CSS, JavaScript, AJAX, PHP, MySQL Les outils de création de site web Nom de domaine et hébergement Pause (15 mn) Un site web, pour quoi faire? (1h00) Les questions à se poser avant de se lancer (30 mn) Déjeuner (1h30) Mon premier outil de conception : une feuille de papier et un crayon (30 mn) Travaux pratiques Choisir un CMS (1h15) Bilan de la journée (15 mn)

4. Les briques techniques de base / 1 Qu’est-ce qu’un site web? C’est une succession de pages web! Qu’est-ce qu’une page web? C’est un ensemble de contenus textuels et multimédias ordonnés (mis en page) selon une apparence définie Deux notion fondamentales: contenu et apparence Deux langages informatiques (ou codes) : XHTML et CSS XHTML ? eXtensible HyperText Markup Language : c’est le langage de base du web, héritier du HTML. Il permet de marquer le contenu de la page (on parle de balise), de le qualifier. Par exemple « ceci est un titre » ou encore « ceci est une image » CSS ? Cascading Style Sheets (en français, feuille de style en cascade): c’est un langage qui permet de décrire la mise en page du contenu dans la page (on parle de propriétés). Par exemple « le titre est centré » ou encore « le fond de ma page est bleu » L’ensemble est appelé « code source » de la page web

5. Les briques techniques de base / 2 Illustration http://www.csszengarden.com/?cssfile=/188/188.css&page=0

6. Les briques techniques de base / 3 Trois autres langages utilisés dans un site web Javascript C’est un langage dit client car il est exécuté par la machine locale au sein du navigateur C’est un langage de programmation Il permet d’exécuter des opérations sur le code XHTML d’une page web sans avoir à recharger cette page AJAX Asynchronous JavaScript and XML C’est également un langage de programmation Il combine XML et JavaScript pour communiquer avec le serveur web et recharger dynamiquement certains éléments d’une page web PHP C’est un langage dit serveur car il est exécuté sur le serveur web. C’est un langage de programmation proche du C++ Il va permettre d’automatiser certaines actions de mise à jour des pages web. Il permet de rendre dynamique des pages web statiques lorsqu’elles ne sont écrites qu’en XHTML

7. Les briques techniques de base / 4 Les outils pour créer un site web : du plus simple ou plus sophistiqué Un éditeur de texte! Si on souhaite programmer le code source d’un page directement en langage XHTML et CSS, le Bloc Notes de Windows suffit! Quelques outils un tout petit peu plus pratiques Notepad++ sous Windows Smultron ou Coda sous Mac emacs sous Linux Un éditeur de page web ou éditeur WYSIWYG WYSIWYG kezako? « What You See Is What You Get » Logiciel qui permet de rédiger le contenu et de faire de la mise en page pour le web sans avoir à coder Nvu en libre Macromedia Dreamweaver ,FrontPage ou iWeb en propriétaires Un CMS pour Content Management System

8. Les briques techniques de base / 5 Le principe du CMS Logiciel de gestion de contenus destiné à la conception et à la mise à jour dynamique de site web Quelques caractéristiques : Utilisation d’une interface web pour l’administration du site et la production du contenu Installation sur le serveur web Accès depuis un navigateur, quelque soit le système d’exploitation Séparation entre contenu et présentation Stockage du contenu en base de données Utilisation de gabarits qui définissent la mise en page (css) et la structuration des données (XML) Edition de page simplifiée Gestion des droits des utilisateurs Gestion du processus de publication (workflow) Ajouts de modules fonctionnels

9. Les briques techniques de base / 6 Bref rappel sur l’architecture du web Un site web, c’est à dire un ensemble organisé de pages web, est stocké sur un serveur web Un serveur web est un service logiciel installé sur une machine informatique reliée en permanence au réseau Internet Elle peut-être localisé chez vous, dans une entreprise ou chez une société spécialisée que l’on appelle un hébergeur, et qui opère des datacenters

10. Les briques techniques de base / 7 Bref rappel sur l’architecture du web Toute machine connectée à Internet dispose d’une adresse IP La notion de nom de domaine Définition : : Correspondance en langage courant de l’adresse IP d’une machine connectée à Internet. Par exemple, à l’adresse IP xxx.xxx.xxx.xxx correspond le nom de domaine www.nomdedomaine.fr . La correspondance entre adresse IP et nom de domaine est effectuée sur le réseau par des Domain Name Servers (ou serveur de nom de domaine) http://www.afnic.fr/guide/genic Composition du nom de domaine : nom + extension Vous avez le libre choix du nom à condition qu’il n’ait pas été préalablement déposé Le nom peut contenir les caractères suivants : A à Z, 0 à 9 et le tiret (pas de distinction majuscule, minuscule) L’extension : géographique : .fr, .uk, .us ... générique : .com, .net, .org, .biz ...

11. Les briques techniques de base / 8

12. Les briques techniques de base / 9 Une alternative temporaire : installer un site web en local Sur Windows avec EasyPhp ou WAMP http://www.wampserver.com/ http://www.itanea.com/blog/2008/08/11/tutoriel-bien-configurer-wamp-pour-developper-en-local Voir par exemple : http://www.generationcyb.net/Installer-SPIP-en-local-avec,1566 Sous Linux avec LAMP ou Xampp http://www.commentcamarche.net/faq/sujet-7971-installation-rapide-de-lamp-apache-mysql-php-sous-linux http://www.commentcamarche.net/contents/php/phpinst.php3 Sur Mac OS avec MAMP http://www.mamp.info/en/index.html Voir par exemple : http://www.spip-contrib.net/Installer-SPIP-sous-Mac-OS-X

13. Un site web pour quoi faire ? Les questions à se poser: Pourquoi avez-vous besoin d’un site web? Quels sont les moyens de communication déjà utilisés? Quelles complémentarités éventuelles? Quels publics souhaitez-vous toucher? Quelles sont les attentes de vos publics? Quels sont vos objectifs de communication vers ces publics? Que viennent chercher vos visiteurs? Que souhaitez vous leur apporter? Quelle est la valeur ajoutée de votre site? Comment allez vous évaluer l’impact de votre site? Quelles perspectives d’évolution?  Définir votre stratégie éditoriale

14. Un site web comment faire ? Moyens et contenus Se poser, dès la phase de conception, la question de la mise à jour des contenus Un projet de site commence et non pas finit à la mise en ligne! Quels ressources pour mettre à jour le contenu? Quelle fréquence? Faire un état des lieux des contenus disponibles Textes Images Audio, vidéos

15. Un site web comment faire ? Définir la charte graphique et la cinématique générale du site Le rubriquage et l’arborescence Le zoning Les menus La navigation dans le site Maximum de 3 clics pour accéder à l’information Pas plus de 7 rubriques d’informations par page Les principaux critères d’ergonomie Sobriété, Lisibilité, Utilisabilité, Rapidité, Interactivité, Adaptabilité, Accessibilité Quelques ressources http://www.rankspirit.com/design-site-web.php http://www.commentcamarche.net/contents/web/navigation.php3 http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/

16. A vous de jouer...

17. Choisir un CMS Les principaux CMS Il y en a des dizaines : http://cmsmatrix.org/ et http://guidecms.com/ Mais on peut restreindre le choix à cinq ou six Spip : http://www.spip.net/ Joomla : http://www.joomla.fr/ Typo3 : http://www.typo3.fr/ eZPublish : http://ez.no/fr/ Drupal : http://drupalfr.org/ Et dans une moindre mesure WordPress : http://fr.wordpress.org/ Il existe également des sites de génération et d’administration de sites web en ligne Jimdo, WIX...

18. Programme de la formation – Jour 2 Retour sur la séance précédente (15 mn) CMS mode d’emploi Installer et configurer un CMS (1h15) Pause (15 mn) Les fonctionnalités de base d’un CMS (1h15) Déjeuner (1h30) Donner du style à son site (2h00) Et revoilà le CSS Templates et autres gabarits Questions diverses (30mn)

19. Installer un CMS Trois propositions: SPIP http://www.spip.net/rubrique151.html Joomla http://www.joomla.fr/ Drupal http://drupalfr.org/node/4678 Les principales étapes Télécharger la dernière version du CMS sur le site de référence Créer la base de données sur le serveur d’hébergement Télécharger via ftp les fichiers décompressés dans le dossier www de votre espace d’hébergement Lancer la procédure d’installation à partir de votre navigateur

20. Installer un CMS Etude de cas SPIP

21. Installer un CMS Etude de cas Joomla

22. Installer un CMS Etude de cas Drupal

23. Principales fonctions d’un CMS Configuration générale du site Gestion des utilisateurs Gestion du contenu Gestion des médias Gestion des templates Gestion des modules externes

24. Donner du style à son site Savoir déchiffrer une feuille de style css La composition d’une feuille de style Balise 1 { propriété : valeur; propriété : valeur; } Balise 1 : nom de la balise HTML dont on veux spécifier le style Propriété : effets de style à appliquer à la balise Valeur : valeur de la propriété ! # style : style unique appelé par le paramètre id=« style » .style : style global appelé par le paramètre class=« style » Notion d’héritage

25. Donner du style à son site Les principales propriétés http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html

26. Donner du style à son site S’inspirer de templates existants Où trouver des templates? Sous SPIP http://www.spip-contrib.net/Jeu-de-squelettes Sous Joomla http://www.joomlafrance.org/telecharger/select/Templates_et_Graphisme/par_titre/1.html Sous Drupal http://drupal.org/project/Themes

27. Programme de la formation – Jour 3 Retour sur la séance précédente (15 mn) Rédiger pour le web (1h00) Définir un projet éditorial collaboratif (30 mn) Les spécificités de l’écriture pour le web (30mn) Des exemples de sites participatifs autour de la lecture et du livre (30 mn) Pause (15 mn) Les questions d’accessibilité (30 mn) Déjeuner (1h30) Enrichir son site avec des contenus et des services externes (1h15) Flux RSS L’ajout de contenus multimédias / Widgets et autres mash-up Pause (15 mn) Référencer son site web (1h00) Bilan de la formation (15 mn)

28. Définir un projet éditorial collaboratif / 1 Quels objectifs de communication? Institutionnel versus Informel? Choisir le bon ton Informatif versus Participatif? Susciter l’interactivité Transactionnel? Quels contenus? Auto-produits versus agrégés Textes, photos, audios, vidéos... Quels moyens? Une ou plusieurs mains? La notion de comité éditorial Intégrer des adhérents, des lecteurs, des habitants, des libraires, des élus? Quels rôles pour chaque contributeur? L’importance d’un rédacteur en chef / animateur Quelle fréquence? Se fixer des obligations de mise à jour « raisonnables » Quels liens, quel réseau? S’inscrire dans un réseau de sites sur la même thématique, sur le même territoire

29. Définir un projet éditorial collaboratif / 2 Un site de bibliothèque, pour quoi faire? Donner de la visibilité à la bibliothèque Informer sur ses actions Prolonger et enrichir la relation avec l’usager, les partenaires Générer des communautés de lecteurs En faire des contributeurs Générer des visites physiques Partager son expérience, son savoir, ses découvertes, ses coups de cœur S’inscrire dans un réseau

30. Rédiger pour le web / 1 Le titre Ajouter une majuscule au titre... Ou ne pas en ajouter mais être cohérent Le titre sera : Court (entre 4 et 10 mots) Visible Explicite Accrocheur Contenant des mots-clés Ayant une signification autonome Dont les premiers mots sont les plus signifiants Si une date est associé au titre, la placer après le titre Source : http://www.redaction.be/exemples/44conseils_nov_04.htm

31. Rédiger pour le web / 2 L’introduction Limitez l’accroche à un seul paragraphe court Utilisez la mise en gras Résumez l’essentiel de l’information Règle des 5W : Who, what, when, where, why Allez droit au but : principe de la pyramide inversée ou commencez par l’essentiel

32. Rédiger pour le web / 3 Le contenu Découpez l’information en plusieurs paragraphes Une seule idée par paragraphe Utilisez des intertitres Surtout dans les textes longs (plus de 2000 signes) Limitez la longueur de la page (entre 500 et 4000 signes) Mettez les mots-clés en gras Utilisez des listes à puces Utilisez des phrases courtes (15-20 mots) Utilisez des dates « absolues » Evitez les repères spatiaux

33. Rédiger pour le web / 4 Insérer le contenu d’un document directement dans le corps de l’article plutôt que d’avoir un article vide avec un fichier word attaché Utiliser judicieusement Titre / Chapeau / Texte Pour un référencement optimum, répéter les mots-clés de l’article plusieurs fois dans ces différentes zones (entre 3 et 7% d’occurence pour l’ensemble de l’article)

34. Quelques exemples de sites Un exemple de portail de bibliothèques en réseau http://www.risom.fr/ Deux exemples de sites de médiathèque Toulouse : http://www.bibliotheque.toulouse.fr/ Mérignac : http://www.mediatheque.merignac.com Un portail Netvibes sur la bibliosphère http://www.netvibes.com/bibliobsession Une librairie sur Internet http://www.bibliosurf.com/ La plus grande librairie web 2.0 http://www.librarything.fr/

35. Qu’est-ce que l’accessibilité? Accessibilité humaine et accessibilité logicielle Prendre en compte les handicaps Visuel, auditif, moteur Prendre en compte les multiples configurations matérielles et logicielles Terminaux et navigateurs Afin de d’assurer un accès optimal à tout internaute L’accessibilité des sites web s’appuient sur des standards Le rôle du W3C au travers du projet WAI (Web Accessibility Initiative) HTML, CSS, XML, SVG... 3 axes de travail Outils de production de contenus : ATAG (Authoring Tools Accessibility Guidelines) Contenus : WCAG (Web Content Accessibility Guidelines) Outils de consultation : UAAG (User Agent Accessibility Guidelines

36. Qu’est-ce que l’accessibilité? Les Guidelines définissent des niveaux d’accessibilité WCAG 1.0 niveaux 1, 2, 3 : http://www.w3.org/TR/WCAG10/ WCAG 2.0 niveaux A, AA, AAA : http://www.w3.org/TR/WCAG20/ En France Labellisation Accessiweb Trois niveaux : Bronze, Argent et Or DGME : Le référentiel général d’accessibilité des sites publics (RGAA) : http://www.references.modernisation.gouv.fr/rgaa-accessibilite La loi n°2005-102 sur l’égalité des chances promulguée le 11 février 2005 stipule que les informations diffusées sur les services de communication publique en ligne doivent être accessibles aux personnes handicapées.

37. Mon site est-il accessible? Utiliser les standards du web permet déjà, dans une utilisation « normale », de s’assurer d’un niveau minimal d’accessibilité Comment vérifier l’accessibilité d’un site Le visiter avec plusieurs navigateurs Le visiter en retirant l’ensemble des images Le visiter en désactivant les feuilles de style Des outils permettent de tester l’accessibilité d’un site Markup Validation Service du W3C : http://validator.w3.org/ OCAWA : http://www.ocawa.com/fr/Accueil.htm Le site d’accessiweb : http://www.accessiweb.org/fr/portail_accessibilite_du_web/outils_et_technologies/default.asp?sub_id=33 10 outils pour tester l’accessibilité de votre site web : http://leblog.vendeesign.com/web20/10-services-web-pour-tester-laccessibilite-de-votre-site/

38. Enrichir son site avec des contenus et des services externes Les flux RSS Les images Flickr Les vidéos YouTube Dailymotion Les fichiers audios Deezer Podemus, Dewplayer Les documents externes Slideshare, docstoc ,issuu... Des widgets applicatifs Cartographie avec googlemaps Autres

39. La notion de widget « Widgets » ? Une définition : « Un « widget », contraction anglaise de window et gadget, est une mini-application qui peut être intégrée sur une page web (un site Internet, un blog...) ou directement sur le bureau d’un ordinateur selon le système d’exploitation utilisé. Certains services web sont en fait des moteurs d’affichage de widgets, tels netvibes, iGoogle ou encore MyYahoo !, c’est à dire qu’ils assemblent en un même lieu, une page web personnelle, de multiples widgets issus de sources très variées. » Quelques exemples : www.netvibes.com http://eco.netvibes.com/widgets http://www.netvibes.com/grandgrenoble#Service http://www.google.fr/ig/directory?hl=fr&root=/ig&dpos=top http://www.widgetbox.com/

40. Les flux RSS « RSS » ? Une définition : « RSS signifie Really Simple Syndication ou également Rich Site Summary. C’est un format de syndication de contenus web, c’ est à dire qu’il permet de « récupérer » de manière automatique, par un protocole dont l’acronyme est RSS (on parle ainsi de flux RSS), des flux d’informations produits par d’autres sites web. » Sur un site web, on repère la disponibilité d’un flux RSS par l’icône suivante : Il existe des lecteurs de flux RSS, en ligne, sous forme de logiciel ou intégré à des navigateurs ou des logiciels de courrier électronique Quelques exemples :

41. Les images L’exemple de Flickr Rapide découverte de Flickr Intégration de photos Flickr dans un site web : l’exemple de SPIP

42. Les vidéos Youtube et Dailymotion Rapide découverte de Youtube Intégration d’une vidéo dans un article d’un site web en utilisant le lecteur embarqué

43. L’audio Podcast et webradios Deezer Podemus DewPlayer http://www.alsacreations.fr/dewplayer

44. Les documents externes Insérer des fichiers pdf, des présentations ppt et d’autres types de documents en utilisant: Slideshare Docstoc Scribd Issuu

45. Les widgets applicatifs La cartographie avec googlemaps Une infinité de widgets applicatifs http://www.widgetbox.com/

46. Référencer son site / 1 15.000.000.000 Nombre approximatif de pages web indexées Comment trouver une aiguille dans une botte de foin, ou une planète avec de la vie dans l’univers?

47. Référencer son site / 2 Première étape : Au commencement était l’indexation : Dans les annuaires Dans les moteurs de recherche L’exemple de Yahoo , DMOZ et de Google http://siteexplorer.search.yahoo.com/fr/free/submit http://www.dmoz.org/add.html http://www.google.fr/intl/fr/submityourcontent/tools.html#web

48. Référencer son site / 3 Pour info, part de marché des principaux moteurs de recherche au niveau mondial Source : Market Share – Décembre 2008

49. Référencer votre site / 4 Seconde étape : travailler son positionnement sur le long terme Quelques astuces Une URL de site signifiante Un format d’adressage des pages signifiant Soignez le contenu Rédigez vos articles en intégrant les mots clés par lesquels vous souhaitez être accessible Mettez à jour régulièrement le contenu du site Soignez votre PageRank en tissant des liens Insérer des liens dans vos articles Ajouter une page Plan du site Echanger des liens avec d’autres sites connexes Pour vérifier les liens pointant vers votre site, dans le requêteur google, entrez link:www.monsite.fr

50. Retrouvez toutes les ressources de cette formation sur : www.netvibes.com/sapiens2009 Merci !

51. MERCI !