SAPIENS2009 - Module 4B

SAPIENS - Programme 2009 de développement

de compétencesModule 4 – Créer un site web

Présentons-nous...

Moi,

Vous, vos attentes ?

Christophe RUDELLEConsultant

Tel : 05 61 69 06 00 [email protected]

Christophe RUDELLEConsultant

Tel : 05 61 69 06 00 [email protected]

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)

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


Illustration

http://www.csszengarden.com/?cssfile=/188/188.css&page=0


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


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


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


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


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 ...


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-config

urer-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

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

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

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/navig

ation.php3

http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/

A vous de jouer...

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...


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)

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

Installer un CMSEtude de cas SPIP

Installer un CMSEtude de cas Joomla

Installer un CMSEtude de cas Drupal

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

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


Les principales propriétés http://www.siteduzero.com/tutoriel-3-13639-

liste-des-proprietes-css.html


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


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)

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

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

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


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


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


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)

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/

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

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.

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/

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

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/

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 :

Les images

L’exemple de Flickr Rapide découverte de Flickr Intégration de photos Flickr dans un site

web : l’exemple de SPIP

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é

L’audio

Podcast et webradios Deezer Podemus

DewPlayer http://www.alsacreations.fr/dewplayer

Les documents externes

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

Les widgets applicatifs

La cartographie avec googlemaps

Une infinité de widgets applicatifs http://www.widgetbox.com/

Référencer son site / 1

15.000.000.000Nombre 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?


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


Pour info, part de marché des principaux moteurs de recherche au niveau mondial

Source : Market Share – Décembre 2008

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

Retrouvez toutes les ressources de cette

formation sur :www.netvibes.com/sapiens2009

Merci !

MERCI !

SAPIENS2009 - Module 4B

Technology

Transcript of SAPIENS2009 - Module 4B