Aller au contenu principal

Content Management System

Objectifs​

Qu'est-ce qu'un CMS ?

Cours​

Content Management System

Page Web dynamique

Content Management System

  • Content Management System (CMS) : Système de gestion de contenu (SGC)

  • Permet de gérer (créer, modifier, supprimer) le contenu d'un site web.

  • Séparation du contenu et de la présentation.

    • Gestion du contenu non technique.

    • Gestion de la présentation par des templates.

  • Portail d'administration pour les utilisateurs.

  • Exemples : WordPress, Joomla, Drupal, …

Content Management System

  • Utilisateur·ice : Visite le site

  • Administrateur·ice : Gère le site à travers un chemin restreint (pas tout le monde peut accéder à /admin)

  • Frontend : Partie client (visible) du site

  • Backend : Partie serveur du site

  • Base de données : Stockage des données

WYSIWYG

  • What You See Is What You Get (Ce que vous voyez est ce que vous obtenez).

  • Éditeurs qui affichent le rendu final pendant l'édition.

  • Exemples : Microsoft Office, LibreOffice, Google Docs, …

  • Contre-exemples : HTML, Markdown, …

https://upload.wikimedia.org/wikipedia/commons/d/d6/Lorem_Ipsum_-_WYSIWYG_en_Latex_-_tekst_als_paden.svg

https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_-_WYSIWYG_en_Latex_-_tekst_als_paden.svg

Markdown

  • Langage de balisage léger pour formater du texte.

  • Syntaxe simple pour les titres, listes, liens, images, …

  • Utilisé pour les fichiers README, générer du HTML, …


# Titre de niveau 1
## Titre de niveau 2
Texte en **gras** et en *italique*.
- Item 1
- Item 2
[Wikipédia](https://www.wikipedia.org)
![Image](https://example.com/image.png)
F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Exercices​

Cahier des charges​

Vous travaillez pour une agence de voyage qui souhaite créer un site Web pour présenter ses services. L'agence a entendu parler de WordPress et souhaite que vous preniez quelques heures pour évaluer les fonctionnalités de WordPress.com. Voici les besoins de l'agence :

  • Une page d'accueil qui présente l'agence et ses services.
    • Un diaporama d'images
    • Un court texte de présentation
  • Une page qui liste les différents articles de blog.
    • Chaque article décrit une destination (ville, activité, musée, etc.).
    • Lister les articles par catégorie selon les critères suivants :
      • Activité (ville, nature, balnéaire, mixte, etc.).
      • Géographique (Europe, Asie, Amérique, etc.).
      • Transport (train, avion, voiture, etc.).
    • Chaque article doit contenir
      • un titre
      • un texte descriptif
      • une image
      • une date de publication
      • une carte (localisation de la destination)
      • un lien vers le site officiel de la destination
  • Une page de contact contenant :
    • Les coordonnées de l'agence.
    • Un formulaire de contact.

Google Sites​

  • Créer un site Web sur Google Sites qui répond aux besoins de l'agence.
  • Comparer les fonctionnalités de Google Sites avec celles de WordPress.com.
  • Identifier les avantages et les inconvénients de Google Sites pour l'agence.

WordPress.com​

  • Créer un compte sur WordPress.com.
  • Créer un site Web qui répond aux besoins de l'agence..
    • Utiliser tous les outils à disposition pour trouver comment personnaliser votre site (moteur de recherche, tutoriels, …).
    • Voici un article pour vous aider à démarrer : Prise en main de WordPress.com.
  • Voici les objectifs :
    • Changer le thème du site.
    • Ajouter une page.
    • Ajouter un article.
    • Ajouter une image.
    • Ajouter un utilisateur : blueur (avec le rôle de contributeur).
Conseils
  • Observer la liste des pages et des articles déjà créés.
  • Créer une nouvelle page blanche pour expérimenter les fonctionnalités de WordPress.com.
    • Tester les différentes options et observer les résultats.
    • Faire pareil pour les articles.

Markdown​

JavaScript​

  • Créer un dossier javascript-guess dans le répertoire OneDrive/3cci/informatique. 
    OneDrive/
    └── 3cci/
        └── informatique/
            └── javascript-guess/
  • Ouvrir le dossier javascript-guess dans Visual Studio Code.
  • Faire votre premier code JavaScript.

Références​

Dernière mise à jour le