SAPIENS2009 - Module 4B

40 %
60 %
Information about SAPIENS2009 - Module 4B

Published on April 9, 2009

Author: consultic

Source: slideshare.net

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

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

Moi,

Vous, vos attentes ?

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)

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

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

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

Illustration

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

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

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

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

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

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

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

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

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

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

Les briques techniques de base / 8

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

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

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

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

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/navigation.php3 http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/

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/

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

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

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)

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

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 CMS Etude de cas SPIP

Installer un CMS Etude de cas Joomla

Installer un CMS Etude 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

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

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

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

Les principales propriétés

http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html

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

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

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)

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

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

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

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

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

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

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

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

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)

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/

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

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.

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/

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

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/

« 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 :

« 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

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é

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

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

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/

La cartographie avec googlemaps

Une infinité de widgets applicatifs

http://www.widgetbox.com/

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?

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

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

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

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

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

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 !

www.netvibes.com/sapiens2009

MERCI !

Add a comment

Related pages

SAPIENS2009 - Module 4B - Technology

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

SAPIENS2009 - Module 2 - Technology

1. SAPIENS - Programme 2009 de développement de compétences Module 2 – Mieux comprendre les matériels et les réseaux informatiques 2. Programme…
Read more