M3202 — CM #1

Développement web S3


Présentation de M3202

Nom
M3202 : Développement web S3
Sur AMeTICE
[18] - S3 - M3202 : Développement web (A. Gonzalez-Lorenzo)
Heures
CM TD TP
3 × 2 5 × 2 5 × 2
Objectif
Utiliser WordPress :
  • découvrir un CMS (système de gestion de contenu)
  • gérer un site web (sans coder en PHP)
  • modifier un thème (theme)
Évaluation
Questions à rendre, exercices à rendre, un projet.

WordPress 101

Les langages

Les langages de la programmation web sont :

Front-end
HTML, CSS et JavaScript
Back-end
PHP, Java, Python, Ruby, C#, ...
Bases de données
SQL

Les frameworks

Un langage offre beaucoup de liberté, mais on ne dois pas réinventer le roue

Un framework est un ensemble d'instructions dans un langage : on peut faire moins de choses, mais on a moins de choses à contrôler.

Quelques frameworks sont :

Front-end
Bootstrap, Materialize, React, Angular, ...
Back-end
Laravel, Symfony, Django, Ruby on Rails, ....

Les CMS

On peut simplifier encore plus la programmation web avec un CMS : on réduit la liberté, et on améliore l'usabilité.

Un CMS (Content Management System, système de gestion de contenu) est un logiciel qui permet de gérer facilement un site web dynamique :

  • structurer le contenu (texte, vidéo, images) dans une arborescence
  • gérer les utilisateurs (profil, commentaires)
  • gérer une base de données

Quelques CMS sont : WordPress, Joomla!, Drupal, Squarespace, Vapid, TYPO3, MODX...

Le plus utilisé est WordPress pour plusieurs raisons : bonne documentation, de nombreux thèmes et extensions, interface intuitive.

WordPress

WordPress est libre, sous licence GPLv2, mais il est développé par la société Automattic.

Il a été créé en 2003 (très vieux). La version actuelle est la version 4.9.8, mais la version 5.0 es prévue en 2018.

Le contenu d'un site web WordPress est stocké dans une base de données (MySQL).

La mise en page est faite par le thème (theme). Il en existe beaucoup.

En plus, on peut ajouter des extensions (plugins) pour rajouter des fonctionnalités (bloquer le spam, surveiller les statistiques de visites).

Attention !

wordpress.org
site web du CMS WordPress
wordpress.com
hébergement de sites web WordPress

Le back office (facile)

Un site web avec WordPress contient

  1. une partie publique (front office) et
  2. un espace d'administration (back office)

On change en cliquant sur le nom du site (barre supérieure noire, à droite du logo WordPress).

Le back office sert à paramétrer notre site web. Le menu à gauche permet d'accéder à chaque section.

La plupart des pages du back office ont deux boutons (en haut à droite) :

  • Options de l'écran (Screen Options)
  • Aide (Help)

Tableau de bord

Par défaut on est sur le Tableau de bord (dashboard), qui affiche des informations générales sur notre site web.

Il y a trois types de rubriques sur un site web WordPress :

  1. les articles (posts)
  2. les pages (pages)
  3. les types de contenus personnalisés (custom post types)

Article

Un article est une rubrique éphémère, une actualité.

Un article est daté, commenté par les utilisateurs, signé par un auteur et classé dans (au moins) une catégorie.

Une catégorie regroupe des articles sous une thématique proche. On peut imbriquer les catégories.

Dans Articles on a accès à la liste de tous les articles avec ses données.

On crée un nouvel article dans Articles/Ajouter. La barre d'outils ressemble a Microsoft Word. Quelques choses à remarquer sont :

  • le bouton Texte affiche le code HTML
  • le bouton Insérer/modifier un lien contient des options supplémentaires
  • le bouton Insérer la balise « Lire la suite... » coupe l'article dans la page d'accueil
  • le bouton Coller en texte permet de coller depuis un logiciel de traitement de texte

Il y a plusieurs blocs pour paramétrer un article.

Le bloc Publier : régler l'état, la visibilité et la date de publication, ainsi que prévisualiser l'article.

Le bloc Image mise en avant : associer une image à l'article.

Le bloc Catégories : assigner des catégories à l'article.

Le bloc Étiquettes : assigner des mots clés ou tags pour retrouver un article avec le moteur de recherche.

Le bloc Format : formater un contenu. Selon le thème, ça peut avoir aucun effet.

Le bloc Extrait : ajouter un résumé de l'article. Certains thèmes l'utilisent.

Le bloc Révisions : liste de toutes les versions de l'article sauvegardées.

Page

Une page est comme un article, mais statique et permanent. Par exemple : la page de contact ou de présentation.

Une page n'a pas de catégorie, mais peut être structurée dans une arborescence.

Dans Pages on a la liste de toutes les pages avec ses données.

Dans Pages/Ajouter on crée une nouvelle page. Il y a un bloc nouveau : Attributs de page. Il permet d'établir l'arborescence des pages.

Médias

Dans Médias on a toutes les images, fichiers de son et de vidéo utilisés dans notre site web.

Ces fichiers sont sauvegardés dans le répertoire wp-content/uploads/.

Commentaires

Dans Commentaires on a tous les commentaires sur toutes les rubriques.

On peut les modifier (!), supprimer ou même répondre.

On peut aussi paramétrer les commentaires sur Réglages/Discussion.

Le back office (moins facile)

Thèmes

Dans Apparence/Thèmes on peut ajouter et activer un thème pour notre site web. Cela ne change pas seulement l'aspect du site web, mais certaines de ses fonctionnalités.

On peut régler les paramètres d'un thème sur Apparence/Personnaliser : couleurs, en-tête, arrière-plan, etc.

Menu

Un menu de navigation permet d'accéder aux pages (ou articles aussi) de notre site web à travers de hyper-liens.

Dans Apparence/Menus on peut créer, modifier et placer de menus de navigation.

Extension

Une extension (plugin) est une fonctionnalité qu'on ajoute à notre site web WordPress.

Dans Extensions on a accès à toutes les extensions installées (actives ou pas).

Widget

Un widget est un plugin qui permet d'insérer une fonctionnalité sur votre site web. Il est donc visible pour les visiteurs.

La liste de widgets se trouve sur Apparence/Widgets.

Utilisateurs

Un site web WordPress à des utilisateurs (users) enregistrés.

Chaque utilisateur a un rôle : abonné (moins de droits), contributeur, auteur, éditeur ou administrateur (plus de droits).

On peut gérer la liste des utilisateurs dans Utilisateurs

Ressources

  • Documentation officielle
  • Simon KERN : Créez vos sites Web avec WordPress
  • Laurent DUMOULIN : WordPress - Développez avec PHP

À rendre (aujourd'hui)

Soumettre une bonne (!) question sur ce qu'on a vu aujourd'hui dans «Question à rendre du CM n° 1»