Supports de cours Fit4Digital future - CMS

16AA01/1 © HOUSE OF TRAINING
1
OPENING
DOORS TO
KNOWLEDGE
AND SKILLS
FIT 4
Digital Future
CMS
Annabelle Buffart
Inspiiro.me

Annabelle Buffart
o Communication & Infographie web
o Manager @ Inspiiro.me
o Cat & troll

o Qui êtes-vous ?
o Quel est votre projet?
Parlez-moi de vous

À qui je m’adresse ?
(Proto) Persona
1. Caractéristiques
2. Ses objectifs
3. Son utilisation du digital

A vous!
Nom,
prénom
Job
A propos
Type
Niveau
Besoins
Problèmes

<h1>Le Titre de la page</h1>
h1 {
font-size:18px;
line-height: 26px;
font: arial, sans-serif;
}
Le couple HTML + CSS

Découvrez
WordPress
CONTENT MANAGEMENT SYSTEM
Pour les blogs au début
Maintenant sans limite
OPEN-SOURCE
Communauté
Libre de droit
Numéro 1
Plus de 29% du Web !!!

Installer & configurer WordPress

Mamp vous permet d’avoir un serveur sur votre ordinateur. Mais celui-ci
n’est pas accessible depuis l’extérieur
1. https://www.mamp.info/en/
2. Download Windows
3. Installer Mamp
4. Ouvrir Mamp (et non la version pro! )
5. Préférences  Web Server  Document Root  Documents
1. Créer un nouveau dossier « Sites »
2. PHP 7.2
Ce dossier sera votre serveur local pour tous vos sites
Installer le serveur

1. https://wordpress.org/download/
2. Download
3. Placer le dossier « Wordpress » dans « Sites » et le renommer par votre
projet
4. Aller dans « Mamp »  Open WebStart page
5. Aller sur localhost  NomdeVotreProjet
6. Choisir la langue
Installer Wordpress – Part 1

La base de données est l’endroit où les composants (textes, images,
fichier...) seront enregistrés
1. Aller dans « Mamp »  Open WebStart page
2. Tools  PHPMyAdmin
3. New  Wordpress
Créer la base de données

http://www.monsite.com/wp-admin
WordPress est installé ! On se logue ?

Post types = Pages, posts, etc. Media = images,
PDF, etc.
Thèmes = look & feel Plugins =
fonctionnalités
Core = le software en lui-même
Comment WordPress est-il structuré ?

POST
o Principalement utilisé pour les
blogs
o Répertoriée dans l'ordre
antéchronologique
• dernier en premier
o Peut être organisé avec des
catégories et des tags
Les posts et les pages
PAGE
o Contenu plutôt statique
o La date de publication n'est
généralement pas affichée
o Des éléments de contenu
intemporels
o Organisé hiérarchiquement
o Exemples typiques
• Accueil
• Pages "À propos" et
"Contact"
• Avertissement légal
• Produit et services

POSTS
o Créer 2 articles de blog
Pages
o Créer 4 pages
• Home
• Services
• Blog
• A propos
Les posts et les pages

o General
• Toujours laisser le rôle par défaut sur “Subscriber” et ne jamais
permettre à tous le monde de s’inscrire
• Choisissez la langue de votre installation
• Définir votre fuseau horaire, le format des dates et du temps
o Reading
• Décourager les moteurs de recherches tant que vous créez le site
- Ne pas oublier de décocher lors de la mise en ligne
o Discussion
• Désactiver les pingbacks et trackbacks
• Ne pas permettre les commentaires par défaut
o Media
• Sauf si vous prévoyez d’avoir des milliers d’images sur votre site, ne
pas organiser les medias dans des fichiers par mois et par année
o Permalinks
• Toujours choisir « Titre de la publication »
Bonnes pratiques de configuration

o Une page avec une liste d'articles de blog en tant que contenu
o Aussi appelée la page "blog home"
o Par défaut, est défini comme la page d'accueil de votre site sur une
nouvelle installation de WordPress
o Vous pouvez définir une autre page, réelle, en tant que page d'accueil
• Settings > Reading
Une page spéciale : l’index du blog

o Thèmes
• Ensemble de fichier définissant l’aspect visuel du site
• Gratuits >< Payants
• Testons-en quelques-uns: Apparence  Thèmes  Ajouter
Thèmes

o Plugins
• Extensions fonctionnelles
• https://wordpress.org/plugins/
- Jeter un oeil aux commentaires et à la “date de dernière mise à jours”
- Eviter les plugins abandonnés (> 1 an)
• Ce n’est pas un concours de celui qui en aura le plus
- Pensez “ce dont j’ai besoin” plutôt que “ce qu’il peut faire”
Plugins

Travaillons la structure de votre
site

o Aller à Apparence / Menu
• Créez un nouveau menu et nommez-le comme vous voulez, par
exemple "Menu principal"
- Pensez que d’autres utiliserons le site après vous. Tâchez donc de toujours
être descriptif et précis lorsque vous nommez des éléments.
• Sélectionnez les pages et ajoutez-les au menu
• Réorganiser-le
o Autre menu possible:
• Liens personnalisés
• Catégories
Ajouter un menu

o Ajouter le contenu et image dans vos pages
o http://www.cupcakeipsum.com/
Structure d’un article de blog

o Ne téléchargez que des thèmes et des plugins provenant de sources
fiables
• Évitez les thèmes et les plugins qui ne sont pas maintenus
• Non mis à jour depuis plus de 2 ans = abandonné
- Si une vulnérabilité est trouvée, il y a des chances qu'elle ne soit pas
réparée rapidement
o Supprimer les thèmes et les plugins que vous n'utilisez pas
o Ne téléchargez jamais de thèmes (plugins) payants (premium) ou de
plugins gratuitement sur des sites Web louches
• Cela semble tentant, surtout quand on a un budget serré, mais … ils
viennent avec l'ajout de code malveillant
Bases de la sécurité WordPress : plugins et conseils

o Allez sur https://gtmetrix.com/ et entrez l'URL de
votre site
En quelques secondes, vous obtiendrez un aperçu
de la vitesse de votre site avec quelques statistiques
et deux notes (basé sur 2 systèmes d'audit)
o Il vous montrera également les principaux
problèmes sur lesquels vous devriez vous
concentrer pour le rendre meilleur.
Vitesse du site : faites un point

o Redimensionner de manière appropriée avant de les uploader
• Cette image de 8.4Mb 6000x4000px de votre appareil photo reflex
numérique n’est pas utile sur le Web
- La résolution d'écran Full HD est de 1920x1080 pixels. Aucun site Web
n'est plus grand que cela
o Vos photos n'ont même pas besoin de faire 1920px de large, elles
s’affichent généralement beaucoup plus petit
• 50% de réduction de la taille de l'image = 75% de réduction de poids
o Compresser et optimiser
• La compression JPEG "lossy" à 60-80% de qualité fait généralement
peu ou pas de différence visuelle
• L'optimisation sans perte peut rendre les fichiers image jpeg jusqu'à
35% plus petits
Taille de vos images

o Redimensionner et compresser votre image
• Dans votre outil d'édition d'image préféré (Photoshop, etc.), et
enregistrez en utilisant "Enregistrer pour le Web"
• OU à partir d'un outil en ligne gratuit comme http://www.picresize.com/
o Utilisez un plugin comme WP Smush pour le faire directement dans votre
tableau de bord WordPress
• OU Utilisez un outil en ligne comme https://tinypng.com/
• OU Utiliser des outils locaux pour optimiser les images directement sur
votre ordinateur
- Windows: RIOT (Outil d'optimisation de l'image radicale)
- MacOS: ImageOptim
- Linux: jpegoptim et optipng
Taille de vos images

o Votre thème et vos plugins peuvent ajouter de
nombreux fichiers .css et .js à la page d'accueil
de votre site
• Plus de fichiers = plus de requêtes http = plus
lent chargement de la page
o Les réduire et les combiner améliore
grandement la vitesse du site
• Plugin recommandé: Autoptimize
• 3 clics pour prendre soin de tout cela:
optimiser HTML, optimiser JS, optimiser CSS
- /! L'optimisation JavaScript nécessite parfois
des paramètres avancés, décochez-la si sur
votre site bug après l'avoir activée.
Optimisation :
Minifier et combiner le CSS et JS

o WordPress génère chaque page à la volée chaque fois que quelqu'un
leur rend visite
o Le "Cache" est le processus d'enregistrement des pages une fois qu'elles
sont générées, afin qu'elles puissent être servies telles quelles aux
prochains visiteurs pendant les prochaines heures.
• Améliore grandement la vitesse du site et réduit la charge du serveur
• Plugin recommandé: WP Super Cache
- Installez, accédez aux paramètres, définissez "Caching On". Terminé!
Optimisation:
Activer le cache sur votre site

Optimisons-le pour les moteurs
de recherches

o Soyez le meilleur ami de Google
o Plugin recommandé : Yoast SEO
• Vous pouvez l’installer les yeux fermés
SEO (Search Engine Optimization)

o SEO Technique
• WordPress est, par défaut, déjà assez bon pour le référencement
• Yoast SEO ajustera automatiquement quelques éléments techniques
pour le rendre encore meilleur
- Vous rappelle de définir vos permaliens
- Vous aide à décider quelles pages Google devrait ou ne devrait pas indexer
- etc.
• Il fournit également des fonctionnalités utiles telles que la génération de
sitemap XML, l'optimisation du flux RSS, la gestion des fichiers
.htaccess et des fichiers robots.txt, etc.

o Analyse de contenu et coaching
• Yoast SEO vous donne un retour en temps réel pour vous aider à écrire
du meilleur contenu
• Vous permet de modifier manuellement le titre de la page et la meta
description pour contrôler l'affichage de chaque page et article dans les
résultats de recherche de Google
• Analyse et vous rappeler des détails faciles à oublier, tels que les
balises ALT des images
• Analyse votre contenu en fonction du mot clé que vous ciblez

HYPER TEXT MARKUP LANGUAGE
Architecture du web
Langage « coté navigateur »
BALISES
Déclaratives
STANDARDISÉ
Structure de page
Cross-browser
HIÉRARCHIE
Relations de filiation
Le Dieu HTML

OBJECTIFS ET
FONCTIONNEMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
DÉCRIRE
Le rôle de chaque
élément
STRUCTURER
C’est l’architecture
de la page
BALISES
Par deux
Ouverture et fermeture
<…> et </…>

HTML
LES BASES
• COMMENCE PAR
<!DOCTYPE html>
• DÉBUT DU DOCUMENT
<html>
• LA PART VISIBLE COMMENCE
À
<body>
• TITRES ou HEADINGS
<h1>…</h1>
<h2>…</h2>
• PARAGRAPHES
<p>…</p>

EXERCICE
PRATIQUE
CODER
SAUVER SOUS HTML
OUVRIR AVEC NAVIGATEUR
OUVRIR ÉDITEUR

LES META-DONNÉES
Permettent de stocker
des infos qui ne seront
pas affichées.
BALISES META
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
<meta description="Ceci est
la description de la page">
</head>
<body>

FORMAT DE TEXTE
GRAS <b> ou <strong>
<p>Ce texte est <b>gras</b>.</p>
ITALIC <i> ou <em>
<p>Ce texte est <i>italic</i>.</p>
SURLIGNÉ <mark>
<h2>On adore
<mark>surligner</mark></h2>
EXPOSANT <sup>
<p>Pour les <sup>matheux</sup>.</p>

LEUR RÔLE
Chaque élément peut
avoir des attributs.
Ils fournissent des
informations
supplémentaires
ATTRIBUTS
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>
<p title="À propos">My first
paragraph.</p>
</body>
</html>
OÙ ?
Toujours défini dans la
balise d’ouverture.
COMMENT ?
nom="valeur"

2 TYPES
Ordonnées ou non.
LES LISTES
<ul style="list-style-type:square">
<li>eBook</li>
<li>Blog</li>
<li>Vidéo</li>
</ul>
<ol type="A">
<li>Interview</li>
<li>Podcast</li>
</ol>

HYPERLIEN
Élément, texte ou
image cliquable qui
permet de diriger vers
un autre.
LES LIENS
<a href="url">texte du lien</a>
<a href="http://adoraweb.lu">Visitez
notre site</a>
<a href="images.jpg">Ouvrir l’image</a>
ATTRIBUT TARGET
target="_blank" -> nouvelle page
target="_self" -> même page

ALT
L’attribut ALT permet
de donner des
informations aux
moteurs de
recherches, mais aussi
d’afficher un texte si
l’image ne charge pas.
LES IMAGES
<a href="url">texte du lien</a>
<img src="pic_mountain.jpg"
alt="Mountain View" width="128"
height="128">
<img src="pic_mountain.jpg"
alt="Mountain View"
style="width:304px;height:228px;">
<a href="index.html">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;
height:42px;">
</a>
À privilégier
Car évite les
conflits.

ATTRIBUT STYLE
style="property: value;"
<body style="background-color:lightgrey;">
<h1 style="color:blue;">Ce texte
est bleu.</h1>
<p style="color:red;">Ce texte est
rouge.</p>
</body>
TROIS SOLUTIONS
Inline - un attribut
Interne - balise <style> dans <head>
Externe - un lieu vers un fichier
externe…
ET LE STYLE ALORS ?

CASCADE STYLE SHEET
Architecture du web
Language « coté navigateur »
STANDARDISÉ
Un même style pour les mêmes éléments
Cross-browser
HIÉRARCHIE
Relations de filiation
Top-down
Le Saint CSS

TROIS POSSIBILITÉS
<h1 style="color:blue;">This is a
Blue Heading</h1>
———————————————————————————
<head>
<style>
body
{background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
———————————————————————————
<head>
<link rel="stylesheet"
href="styles.css">
</head>
INLINE
Attribut d’un élément
INTERNE
Centralisé pour toute
la page
EXTERNE
Centralisé pour toutes
les pages

CSS
LES BASES
• PAR DÉFAUT
styles.css
• SYNTAXE
• MODÈLE
p {
border:1px solid
black;
padding:10px;
}

SYSTÈME DE SÉLECTION
<p id="salon-juillet">Je suis
spécial</p>
p#salon-juillet {
color: blue;
}
———————————————————————————
Attribut ID
Pour un élément
#id
Attribut CLASS
Pour un ensemble
d’éléments
.class
<p class="introduction">Je suis
le premier paragraphe de chaque
page</p>
p.introduction {
color: blue;
}
———————————————————————————
h1, h2, p {
text-align: center;
color: red;
}
Groupe
Les mêmes règles pour
plusieurs éléments

SYSTÈME DE SÉLECTION (2)
h1, h2, p {
text-align: center;
color: red;
}
Groupe
Les mêmes règles pour
plusieurs éléments
Addition
Plusieurs class
<p class="introduction home">…</p>
p.introduction.home {
color:blue;
}
Filliation
Tous les … sous les …
ul li {
padding-left: 15px;
}
————————————————————————
————————————————————————

QUELQUES ÉLÉMENTS
color: #00ff00;
text-align: right;
text-decoration: underline;
text-transform: uppercase;
background-color: #b0c4de;

MARGIN & PADDING
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Système de notation
Hauteurs - Côtés
margin: 100px 50px;
Haut - Droite - Bas - Gauche
margin: 100px 25px 30px 50px;
MARGIN
Espace hors de la box
PADDING
Espace au sein de la
box
p {
padding: 10% 20%;
}

DISPLAY
p {
display: inline;
}
BLOCK
Les uns en dessous des
autres
INLINE
Les uns à côté des
autres
p {
display: block;
}

div & span
<span>...</span>
<h2>Ceci est un <span>titre</span></h2>
DIV
Construire des blocks
SPAN
Sélection des zones
sans créer de block
<div>...</div>
<div>
<h1>Titre</h1>
<p>texte</p>
</div>

EXERCICE
LE WEB, UNE AFFAIRE QUI MARCHE
L’origine
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
• Lorem ipsum dolor
• sit amet
• consectetur
ACHETER EN LIGNE

Avertissement
o Les informations contenues dans ce document sont fournies à titre purement
informatif. Bien que la House of Training mette tout en œuvre pour s'assurer
que l'information communiquée soit exacte et actuelle, elle décline toute
responsabilité quant à d'éventuels préjudices, pertes, manques à gagner,
directs ou indirects induits par l'utilisation de ces informations.
o La totalité du contenu fait l'objet d'un droit d'auteur, tous droits réservés.

Supports de cours Fit4Digital future - CMS

Contenu connexe

Tendances

Similaire à Supports de cours Fit4Digital future - CMS

Dernier

Supports de cours Fit4Digital future - CMS