Aujourd'hui, que vous soyez particulier, en charge d'une association, artisan ou responsable d'une petite entreprise, vous serez amené, à un moment ou à un autre, à créer votre site pour présenter vos hobbies, votre activité, votre entreprise... Nous disposons de tous les moyens techniques mais la mise en place d'un tel projet reste malgré tout une tâche ardue pour qui n'est pas du métier. Ce livre a pour objectif de vous apprendre à concevoir et à réaliser votre projet de A à Z. Il se compose de deux parties, méthodologique et pratique.

Vous commencerez par découvrir ce qu'est un site web : quelles sont les technologies exploitées, quels sont les différents types de contenus que l'on peut afficher et comment les mettre en œuvre ? Vous découvrirez les différentes possibilités pour créer le site et leurs implications techniques. Les CMS (Content Management System) permettent de créer et de gérer des sites web sans connaissance technique et sont aujourd'hui la solution la plus utilisée : nous vous donnons des indications pour le choix du CMS à utiliser selon les fonctionnalités que vous souhaitez implanter dans votre site (multilinguisme, création de champs personnalisés, droits des utilisateurs, gestion des médias...) : nous verrons les solutions proposées par plusieurs CMS (Joomla!, WordPress, SPIP, PluXml, Zwii…) pour chacun de ces critères.

Une fois le choix de la technologie effectué, il est essentiel de s'attacher à  l'ergonomie, au design de votre site ainsi qu'à la navigation entre les pages afin de concevoir un site web convivial et attractif.

Il est tout aussi important de bien maîtriser le contenu rédactionnel et d'optimiser vos pages pour un référencement efficace dans les moteurs de recherche.

La dernière étape de cette partie méthodologique concerne le choix d'un hébergement, l'estimation des besoins techniques, le travail avec les acteurs du projet et le suivi de la réalisation du site.

Dans la deuxième partie du livre, vous aurez l'occasion de mettre en pratique tous ces concepts car vous réaliserez étape par étape le site web d'une association à l'aide de la version en ligne du CMS WordPress, wordpress.com qui permet de créer un site web avec facilité et efficacité. Une fois ce projet terminé, vous disposerez de toute la théorie et de toute la pratique nécessaire à la réalisation de votre premier site web.

Téléchargements

• Webographie

Introduction

1. Introduction

Les langages

1. L’objectif
2. L’HTML
   1. 1. L’état des lieux
   2. 2. Les éléments HTML
   3. 3. Les attributs
   4. 4. Les caractères
   5. 5. Les espaces
   6. 6. Les couleurs
3. Les CSS
   1. 1. L’état des lieux
   2. 2. Les sélecteurs
   3. 3. La mise en forme
   4. 4. La mise en page

Les navigateurs web

1. L’objectif
2. L’affichage
3. Les plugins
4. Les principaux navigateurs
   1. 1. Microsoft Internet Explorer et Edge
   2. 2. Apple Safari
   3. 3. Mozilla Firefox
   4. 4. Opera
   5. 5. Google Chrome
   6. 6. Les parts de marché
5. Le respect des standards
6. Les supports de diffusion
   1. 1. Les sites pour écran d’ordinateur
   2. 2. Les sites pour les petits écrans

Le contenu des pages web

1. L’objectif
2. Le texte
   1. 1. Les en-têtes
   2. 2. Les paragraphes
   3. 3. Les citations
   4. 4. Les listes numérotées
   5. 5. Les listes à puces
   6. 6. Les listes de définitions
   7. 7. Les autres types de texte
3. La mise en forme du texte
   1. 1. Mettre en gras
   2. 2. Mettre en italique
   3. 3. Mettre en souligné et en barré
   4. 4. Les indices et exposants
   5. 5. Les autres mises en forme
4. Les polices de caractères
   1. 1. La problématique
   2. 2. Les polices génériques
   3. 3. Les polices web
5. La taille des caractères
   1. 1. La problématique
   2. 2. Les unités relatives
6. Les liens hypertextes
   1. 1. Utiliser des liens
   2. 2. Les différents types de liens
   3. 3. Les destinations des liens
7. Les images
   1. 1. Des images optimisées pour le Web
   2. 2. La taille des images
   3. 3. Les formats pour le Web
   4. 4. Les dessins
8. Les formulaires
   1. 1. L’utilité des formulaires
   2. 2. Les éléments des formulaires
9. Le multimédia
10. L’interaction utilisateur
    1. 1. La programmation
    2. 2. Des exemples
11. Les sites web
    1. 1. Les sites statiques
    2. 2. Les sites dynamiques

Les techniques de création

1. L’objectif
2. Créer des sites web
   1. 1. Le développement pur
   2. 2. Les éditeurs de code
   3. 3. Les logiciels graphiques
   4. 4. Les limites des solutions de création
3. Les gestionnaires de contenu
   1. 1. Des solutions efficaces
   2. 2. Les contraintes techniques
   3. 3. Les CMS en exemple
   4. 4. Les constructeurs en ligne
4. Le type de projet
   1. 1. Type d’information
   2. 2. L’autonomie
   3. 3. L’organisation du contenu
5. Les types de contenu
   1. 1. Les objectifs
   2. 2. L’organisation de l’information
   3. 3. Les différents contenus
   4. 4. Les types de contenu et les CMS
6. La structure du contenu
   1. 1. Les objectifs
   2. 2. Les champs de saisie
   3. 3. La structure de l’information
   4. 4. La saisie de l’information
   5. 5. Les types de champs
   6. 6. Les options des champs
   7. 7. Des exemples de champs de saisie
   8. 8. Les champs de saisie et les CMS
7. La taxinomie
   1. 1. Les objectifs
   2. 2. L’utilisation de la taxinomie
   3. 3. La taxinomie et les CMS
8. La gestion du contenu
   1. 1. Les objectifs
   2. 2. Les statuts
   3. 3. La publication
   4. 4. La corbeille et l’archivage
   5. 5. Les versions
   6. 6. Les relations
   7. 7. La gestion du contenu et les CMS
9. Le workflow
   1. 1. Les objectifs
   2. 2. Le flux rédactionnel
   3. 3. Les droits des utilisateurs
   4. 4. La précision des droits
   5. 5. Des fonctionnalités importantes
   6. 6. Le workflow et les CMS
10. L'interface d'administration
    1. 1. Les objectifs
    2. 2. Une interface efficiente
    3. 3. L’interface de gestion
    4. 4. La personnalisation
    5. 5. L’éditeur de texte
    6. 6. La mise en forme en markdown
    7. 7. L’interface et les CMS
11. La gestion des médias
    1. 1. Les objectifs
    2. 2. Les types de médias
    3. 3. L’importation
    4. 4. La médiathèque
    5. 5. Le traitement des images
    6. 6. La gestion des médias et les CMS
12. L'apparence du site
    1. 1. Les objectifs
    2. 2. Les différents types de thème
    3. 3. La personnalisation des thèmes
    4. 4. Les thèmes et les CMS
13. Les fonctionnalités spécifiques
    1. 1. Les objectifs
    2. 2. Le choix des extensions
    3. 3. Les dépendances
    4. 4. La compatibilité
    5. 5. Les extensions et les CMS
14. Les sites multilingues
    1. 1. Les objectifs
    2. 2. L’interface d’administration
    3. 3. L’accès au multilinguisme
    4. 4. Le processus du multilinguisme
    5. 5. La taxinomie
    6. 6. La structure du contenu
    7. 7. Les extensions
    8. 8. Les visiteurs
    9. 9. Le multilinguisme et les CMS
15. Le multisites
16. Le socle technique
17. Le référencement
18. D'autres critères de choix
    1. 1. La licence
    2. 2. Les coûts
    3. 3. Les communautés
    4. 4. La pérennité
19. Choisir un CMS
    1. 1. Les CMS et leur cible principale
    2. 2. Les besoins
    3. 3. Les fonctionnalités indispensables
    4. 4. Un artisan
    5. 5. Une librairie
20. Concevoir le contenu graphique
    1. 1. Qui doit le produire ?
    2. 2. Les photos
    3. 3. La vidéo
    4. 4. L’audio
    5. 5. Les animations
    6. 6. Le dessin

Les différents types de contenu web

1. L’objectif
2. Les sites de présentation
3. Les sites d’information
4. Les sites marchands
5. Les blogs
6. Les forums
7. Les Wikis
8. D’autres services de contenu
   1. 1. Les flux RSS
   2. 2. Twitter
   3. 3. Les réseaux sociaux
   4. 4. Les newsletters
9. L’évolution des contenus
   1. 1. Dans les sites
   2. 2. Les solutions techniques

L’ergonomie des sites web

1. L’objectif
2. Quelques définitions
   1. 1. L’ergonomie
   2. 2. L’ergonomie des sites web
3. Quelques principes de l’ergonomie
   1. 1. La loi de proximité
   2. 2. La loi de similarité
   3. 3. Les éléments cliquables
4. Quelques conseils en ergonomie
   1. 1. L’architecture du site
   2. 2. L’organisation visuelle
   3. 3. L’homogénéité de l’interface
   4. 4. Les habitudes
   5. 5. Les boutons et les liens
   6. 6. La police de caractères et les liens
   7. 7. Aider les visiteurs
   8. 8. Une interface rapide
   9. 9. Laissez l’utilisateur décider
5. Quelques idées préconçues
   1. 1. La règle des trois clics
   2. 2. Les internautes ne « scrollent » pas
   3. 3. Les internautes lisent en F, E, Z…
   4. 4. Un site multimédia et technique

Des conseils sur le design

1. L’objectif
2. La qualité professionnelle
3. Les chartes graphiques
4. Un design adapté à vos visiteurs
5. Bien utiliser le multimédia
6. L’impression des pages

La navigation dans les sites web

1. L’objectif
2. La page d’accueil
   1. 1. Une navigation compréhensible
   2. 2. La page d’accueil graphique
   3. 3. La page d’accueil horizontale
   4. 4. La page d’accueil portail
   5. 5. Les pages d’accueil intermédiaires
   6. 6. Le retour à la page d’accueil
3. La navigation dans le site
   1. 1. Les navigations classiques
   2. 2. La barre de navigation principale
   3. 3. La barre de navigation secondaire
   4. 4. La barre de navigation d’accès rapide
   5. 5. La barre de navigation d’information généraleet légale
   6. 6. Les plans des sites
   7. 7. Le fil d’Ariane
4. Le schéma de navigation classique
5. Les navigations originales

L’accessibilité des sites web

1. L’objectif
2. Le handicap et le Web
   1. 1. Des chiffres
   2. 2. Les formes de handicap sensoriel et moteur
   3. 3. Les solutions logicielles et matérielles
   4. 4. Créer un site accessible
3. Le cadre légal en France
4. Créer des sites accessibles
   1. 1. Pour les sites publics
   2. 2. Les normes du W3C
   3. 3. Le référentiel Accessiweb
   4. 4. Les techniques à mettre en place

La gestion et la rédaction du contenu

1. L’objectif
2. La gestion du contenu
   1. 1. Actualiser le contenu
   2. 2. Gérer le flux rédactionnel
   3. 3. Proposer un contenu utile
   4. 4. La crédibilité du site
   5. 5. Les contacts
3. Des conseils pour écrire pour le Web
   1. 1. La cible du site
   2. 2. Faites simple
   3. 3. Écrire court
   4. 4. Quelques erreurs à éviter
   5. 5. La pyramide inversée
   6. 6. La règle des cinq W
   7. 7. L’importance des titres

Le référencement de votre site web

1. L’objectif
2. Les moteurs de recherche
   1. 1. Utilisation des moteurs
   2. 2. Les recherches des internautes
   3. 3. Le référencement naturel
   4. 4. Les mots-clés
3. Les critères in page
   1. 1. Les principes
   2. 2. Le titre des pages
   3. 3. L’élément meta description
   4. 4. Des URL de page optimisées
   5. 5. Des liens explicites
   6. 6. Des images optimisées
   7. 7. Les éléments d’en-tête
   8. 8. Les mots en gras
   9. 9. La qualité du contenu
4. Les critères off page
   1. 1. Les principes
   2. 2. Les backlinks
   3. 3. La réputation
5. Analyse de la fréquentation
   1. 1. Google Analytics
   2. 2. Les rapports en temps réel
   3. 3. Les rapports d’audience
   4. 4. Les rapports d’acquisition
   5. 5. Les rapports de comportement
   6. 6. Les rapports de conversion

L’hébergement

1. L’objectif
2. Le nom de domaine
   1. 1. Les adresses IP
   2. 2. Les noms de domaine
   3. 3. Choisir un nom de domaine
   4. 4. La syntaxe du nom de domaine
   5. 5. Déposer son nom de domaine
   6. 6. Disponibilité du nom de domaine
3. L’hébergement
   1. 1. Accéder à Internet
   2. 2. L’hébergement des FAI
   3. 3. L’hébergement gratuit
   4. 4. L’hébergement professionnel mutualisé
   5. 5. L’hébergement professionnel dédié
4. Les besoins techniques
   1. 1. Estimation du projet
   2. 2. L’espace disque
   3. 3. La fréquentation du site
   4. 4. La messagerie
   5. 5. La sécurité des réseaux
   6. 6. Les sauvegardes
   7. 7. Le support technique

La gestion du projet

1. L’objectif
2. Les acteurs du projet
   1. 1. La gestion de projet
   2. 2. Les maîtrises
   3. 3. Les métiers
3. Les aspects juridiques
   1. 1. Les lois en vigueur
   2. 2. La déclaration à la CNIL
   3. 3. Les mentions légales
4. Protéger son site
   1. 1. Le nom de domaine
   2. 2. Le contenu
   3. 3. Le design et la structure
   4. 4. L’information sur la protection
5. La gestion du projet
   1. 1. Le cahier des charges
   2. 2. Le plan projet
   3. 3. La conception
   4. 4. La réalisation
   5. 5. La recette
   6. 6. La mise en ligne

Création d'un site avec WordPress.com

1. Les objectifs
2. Le choix technologique
3. Les offres de WordPress.com
4. Les concepts de WordPress
5. Créer le site sur WordPress.com
   1. 1. Choisir le type de projet voulu
   2. 2. Choisir le nom de domaine
   3. 3. Sélectionner l’offre voulue
   4. 4. Créer le compte
   5. 5. La connexion au site
6. Les connexions à l'administration du site
   1. 1. Se connecter à la fin de l’installation
   2. 2. Se déconnecter
   3. 3. Se connecter à l’administration
   4. 4. La confirmation de la création
   5. 5. Se connecter à partir du site publié
7. Les réglages du site
   1. 1. Accéder aux réglages
   2. 2. Le profil du site
   3. 3. La visibilité du site
   4. 4. Le pied de page
   5. 5. Les outils du site
8. Les types de contenu
9. Classer les articles
   1. 1. Les catégories
   2. 2. Créer une catégorie
   3. 3. Modifier une catégorie
   4. 4. Supprimer une catégorie
   5. 5. Les étiquettes
   6. 6. Créer une étiquette
   7. 7. Gérer les étiquettes
10. Les paramètres de rédaction
    1. 1. Confirmer la publication
    2. 2. Le format des articles
    3. 3. Le format des dates et des heures
    4. 4. Le début de la semaine
    5. 5. Le récapitulatif
11. Rédiger des articles
    1. 1. Créer un nouvel article
    2. 2. Le contenu rédactionnel
    3. 3. Mettre en forme les titres
    4. 4. Mettre en forme les paragraphes
    5. 5. Créer des listes
    6. 6. Insérer des liens
    7. 7. Mettre en forme le texte
    8. 8. Insérer une image
    9. 9. L’enregistrement de l’article
    10. 10. L’aperçu de l’article
12. Les paramètres des articles
    1. 1. Les classifications de l’article
    2. 2. L’image à la une
    3. 3. Afficher les boutons de partage
    4. 4. Les options supplémentaires
    5. 5. La publication de l’article
13. La gestion des articles
    1. 1. Lister les articles
    2. 2. Les articles dans la liste
    3. 3. Modifier un article
    4. 4. Modifier l’état d’un article
    5. 5. Supprimer un article
    6. 6. Les boutons d’action
14. Les pages du site
    1. 1. Les pages existantes
    2. 2. Créer une page
    3. 3. L’ordre des pages dans le menu
    4. 4. Gérer les pages
15. La gestion des médias
    1. 1. Utiliser les médias
    2. 2. Afficher les médias
    3. 3. Insérer une image dans la bibliothèque
    4. 4. Modifier une image
16. Les témoignages
    1. 1. Utiliser les témoignages
    2. 2. Créer un nouveau témoignage
    3. 3. Gérer les témoignages
    4. 4. L’affichage en page d’accueil
    5. 5. L’affichage de tous les témoignages
17. Les commentaires
    1. 1. Utiliser les commentaires
    2. 2. Paramétrer les commentaires
    3. 3. Déposer un commentaire
    4. 4. Modérer les commentaires
18. Exploiter les thèmes
    1. 1. Utiliser les thèmes
    2. 2. Le thème par défaut
    3. 3. La personnalisation du thème
    4. 4. L’identité du site
    5. 5. Les couleurs et l’arrière-plan
    6. 6. Les polices
    7. 7. L’image d’en-tête
    8. 8. Les menus
    9. 9. Les options de contenu
    10. 10. Les widgets
    11. 11. La page d’accueil du site
    12. 12. Le contenu mis en valeur
    13. 13. Les options du thème
    14. 14. Les témoignages
    15. 15. Changer de thème
19. Les utilisateurs
    1. 1. Comprendre la gestion utilisateurs
    2. 2. Modifier son profil
    3. 3. Les rôles des utilisateurs
    4. 4. Ajouter un contributeur
20. Les statistiques
21. Le partage du contenu
    1. 1. Les réseaux sociaux
    2. 2. Les boutons de partage
22. Conclusion