# Programmation et design d'interface
## Introduction
L'objectif principal de cet atelier est de vous fournir une base solide pour travailler avec WordPress, que ce soit pour la création de blogs, de sites web personnels, de portfolios ou même de sites e-commerce. Cet atelier est également l'occasion de vous rappeler les bases du web.
Vous trouverez également des termes et/ou des pistes à explorer tout au long de ce fascicule. Libre à vous de les explorer par la suite et ainsi approfondir des notions qui vous semblent pertinentes dans le cadre de votre projet professionnel ou personnel.
L'intervention orale complète cet écrit.
Au sommaire :
[TOC]
## Rappels
Vous trouverez ci-dessous quelques petits rappels (ou peut être pas). Certains servent votre culture du numérique et d'autres sont plus utiles à la compréhension plus profonde de la suite de l'atelier.
### La structure d'un site web
[La structure d'un site web en HTML](https://developer.mozilla.org/fr/docs/Web/HTML) est cruciale pour sa conception et sa lisibilité, et le concept de [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics) (ou encore [ici](https://www.w3schools.com/html/html5_semantic_elements.asp)) y joue un rôle majeur.
Tout commence avec la balise `<html>`, qui enveloppe l'ensemble du contenu de la page. À l'intérieur de cette balise, la `<head>` est utilisée pour stocker des informations importantes telles que le titre de la page et les métadonnées. La partie la plus significative est le corps `<body>`, où la structure réelle du contenu se trouve. Le HTML sémantique implique l'utilisation de balises telles que `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, etc., qui donnent un sens et une structure clairs au contenu, améliorant ainsi l'accessibilité et l'indexation par les moteurs de recherche. Cela permet également une meilleure compréhension du contenu par les navigateurs et les technologies d'assistance pour les personnes en situation de handicap, améliorant ainsi l'expérience globale des utilisateurs sur le site web.
[Le CSS](https://developer.mozilla.org/fr/docs/Web/CSS) est une composante cruciale dans la création de sites web. Elle permet de séparer la structure HTML du design et de la mise en page. En utilisant des règles CSS, on peut définir comment chaque élément HTML doit être présenté visuellement, notamment en termes de couleurs, de polices de caractères, de marges, de largeurs, de hauteurs, de bordures, et bien plus encore.
#### Logiciels utiles pour présenter en HTML/CSS
- [Visual Studio Code](https://code.visualstudio.com/Download)
- Sublime Text
- ...
Lorsque vous éditez un fichier HTML, enregistrez-sous... et sélectionnez HTML ou HyperText Markup Language et de même pour les fichiers CSS avec CSS ou Cascading StyleSheet.
#### Extraits de code
Structure de base d'un fichier .html.
```htmlmixed
<html>
<head>
<!-- Métadonnées, ex : nom du site, favicon, etc. -->
<meta charset="UTF-8">
</head>
<body>
<!-- Contenu du site -->
</body>
</html>
```
Pour lier une feuille de style .css à un fichier .html ; à placer dans la balise `<head></head>`.
```htmlmixed
<link href="/media/examples/link-element-example.css" rel="stylesheet" />
```
#### Pour aller plus loin
- Un framework CSS [TailwindCSS](https://tailwindcss.com/) qui permet de simplifier et d'accéler la création du design d'un site web ;
- Les règles de base pour rendre [un site accessible](https://developer.mozilla.org/fr/docs/Learn/Accessibility/HTML) et [le référentiel associé (RGAA)](https://accessibilite.numerique.gouv.fr/) ;
- [Un très bon document traitant le référencement par Alexandre Tourette](https://alyze.info/doc/cours-seo.pdf).
### L'architecture d'un serveur web
Un serveur web est hébergé sur une machine, cela peut être [un serveur virtuel (*VPS*)](https://www.ovhcloud.com/fr/vps/), [un serveur dédié](https://www.ovhcloud.com/fr/bare-metal/), etc. Le plus souvent, il vous sera mis à disposition de manière transparente sous le nom [d'hébergement mutualisé](https://www.ovhcloud.com/fr/web-hosting/).
Un serveur web est un composant fondamental d'un site web, responsable de la mise à disposition du contenu en ligne. Une configuration classique de serveur web inclut souvent Apache2 comme serveur web, PHP pour la gestion des scripts côté serveur, et MySQL pour la gestion des bases de données. Apache2 est un serveur web robuste et largement utilisé qui répond aux requêtes des navigateurs des utilisateurs et distribue les fichiers HTML, CSS, JavaScript, et autres ressources du site. PHP, un langage de script côté serveur, permet de créer des pages web dynamiques en interagissant avec les bases de données MySQL, où sont stockées et récupérées des données telles que les informations des utilisateurs, les commentaires et autres contenus dynamiques. Cependant, il existe également d'autres configurations possibles pour dynamiser un site web, notamment l'utilisation de langages de programmation tels que Python et JavaScript, en fonction des besoins et des compétences de développement de l'équipe.
### Le nom de domaine
Le nom de domaine est l'adresse conviviale que les utilisateurs saisissent dans leur navigateur web pour accéder à un site internet. Il sert de moyen mnémotechnique pour identifier et localiser un site web sur Internet. Les noms de domaine sont essentiels car ils permettent de remplacer les adresses IP complexes par des chaînes de caractères faciles à retenir.
### WordPress
<img style="float: right; margin-left: 48px; margin-top: 0px; margin-bottom: 12px; width: 192px" src="https://s.w.org/style/images/about/WordPress-logotype-alternative.png" />
WordPress est un système de gestion de contenu (CMS) open source qui permet de créer, gérer et publier des sites web. Il offre une interface intuitive pour la création de pages, d'articles et la gestion de médias, ce qui le rend idéal pour les blogs, les sites d'entreprise, les portfolios, les boutiques en ligne, et bien plus encore. WordPress propose également une vaste bibliothèque de thèmes et d'extensions, permettant ainsi une personnalisation étendue pour répondre aux besoins spécifiques de chaque projet. C'est une plateforme flexible, évolutive et largement adoptée, tant par les utilisateurs débutants que les développeurs expérimentés, pour la création de sites web divers et variés.
[De nombreuses alternatives à WordPress](https://alternativeto.net/software/wordpress/) existent.
## Pré-requis
## Installation de XAMPP
:::info
Si vous êtes sur un Mac avec un processeur M1/M2, tournez vous plutôt vers MAMP que XAMPP.
:::
Télechargez et installez [XAMPP](https://www.apachefriends.org/fr/index.html).
Exécutez XAMPP et lancez les serveurs Apache et MySQL si ils ne sont pas lancés. Ils devraient apparaître en vert comme suit.
Télechargez ensuite [l'archive WordPress](https://fr.wordpress.org/latest-fr_FR.zip).
Cliquez sur le bouton Explorer sur le côté droit de l'interface de XAMPP, puis, ouvrez le dossier `htdocs`.
Décompressez ensuite l'archive WordPress vers ce dossier de manière à ce que les fichiers de WordPress se trouvent directement dans un dossier `wordpress`.
## Installation de WordPress
### Création de la base de données
Rendez-vous sur [l'interface de gestion de la base de donnée SQL *phpMyAdmin*](http://localhost/phpmyadmin/).
Nous allons ensuite créer un utilisateur séparé dédié à la gestion de la base de donnée WordPress. Pour ce faire, rendez-vous sur l'onglet `Comptes utilisateurs`, puis, cliquez sur `Ajouter un compte d'utilisateur`.
Renseignez ensuite les informations pour ce nouveau compte utilisateur :
- nom d'utilisateur : wordpress ;
- nom d'hôte : % (laissez tel quel) ;
- mot de passe : à vous de choisir, vous pouvez rentrer wordpress simplement mais **notez le sur un bloc note** à côté ;
- extension d'authentification : laissez tel quel ;
- ⚠️ **cochez la case** `Créer une base portant son nom et donner à cet utilisateur tous les privilèges sur cette base`.
### Installation de WordPress
Rendez-vous sur [la page dédiée à l'installation de WordPress](http://localhost/wordpress/) et suivez les instructions.
Pour la partie dédiée à la configuration de la base de donnée, renseignez les champs suivants :
- nom de la base de donnée : wordpress ;
- identifiant : wordpress ;
- mot de passe : celui que vous avez noté précédemment ;
- adresse de la base de donnée : localhost ;
- préfixe des tables : laissez tel quel.
Un message confirmant la bonne initialisation doit alors apparaître ("*C’est parfait !...*"). Continuez de suivre les instructions.
Pour la partie dédiée à la configuration du site WordPress en lui-même, renseignez les champs comme vous le souhaitez. N'oubliez pas les identifiants de votre compte administrateur !
Suivez encore les instructions jusqu'à ce que vous soyez en mesure de [vous connecter](http://localhost/wordpress/wp-login.php).
## Découverte de WordPress
### Fonctionnalités de base
#### Les articles
Les articles sont le cœur de la plupart des blogs et sites d'actualités sur WordPress. Ils sont destinés à du contenu fréquemment mis à jour, comme des billets de blog ou des actualités. Les articles sont organisés en catégories et peuvent être tagués, ce qui permet aux visiteurs de trouver rapidement du contenu similaire.
#### Les pages
Contrairement aux articles, les pages sont destinées au contenu statique. Ce sont des sections de votre site qui ne changent généralement pas fréquemment, comme "À propos", "Contact" ou "Services". Les pages ne sont pas organisées par date et n'ont pas de catégories ou de tags.
#### L'onglet *apparence*
La section "Apparence" du tableau de bord WordPress permet aux utilisateurs de personnaliser l'aspect de leur site. Ici, vous pouvez choisir un thème, personnaliser les éléments du thème, ajuster les menus, et définir des widgets. Les thèmes définissent la présentation globale du site, et de nombreux thèmes peuvent être personnalisés pour mieux refléter la marque ou l'identité du propriétaire du site.
#### L'onglet *extensions*
Les extensions permettent d'ajouter des fonctionnalités supplémentaires à un site WordPress. Il existe des milliers d'extensions disponibles, qui peuvent ajouter de nouvelles fonctionnalités, comme des formulaires de contact, des galeries photo, des systèmes de réservation, etc. Les extensions peuvent être gratuites ou payantes, et il est essentiel de les garder à jour pour des raisons de sécurité.
### Extensions recommandées
Pour trouver les extensions les plus pertinentes pour l'usage que vous souhaitez faire, recherchez sur Google "*[site:reddit.com wordpress plugin [usage en anglais]](https://www.google.com/search?q=site%3Areddit.com+wordpress+plugin)*" (comme, par exemple, *[site:reddit.com wordpress plugin seo](https://www.google.com/search?q=site%3Areddit.com+wordpress+plugin+seo)*).
Certaines extensions peuvent ne pas fonctionner totalement étant donné que vous êtes sur des environnements locaux !
Vous trouverez ci-dessous quelques extensions incontournables :
- [All-in-One WP Migration](https://fr.wordpress.org/plugins/all-in-one-wp-migration/) permet de réaliser une sauvegarde d'un site WordPress, à faire avant chaque modification majeure (mise-à-jour, etc.) ;
- [Performance Lab](https://fr.wordpress.org/plugins/performance-lab/) permet d'activer quelques options améliorant la performance de WordPress (entre autre, la conversion automatique des images au format .webp) ;
- [Site Kit by Google](https://fr.wordpress.org/plugins/google-site-kit/) permet d'intégrer facilement les outils d'analyse Google (Google Analytics, etc.) ;
- [The SEO Framework](https://fr.wordpress.org/plugins/autodescription/) permet d'obtenir des conseils pour améliorer le référencement de certains éléments d'un site WordPress ;
- [W3 Total Cache](https://wordpress.org/plugins/w3-total-cache/) permet de configurer la mise en cache des pages WordPress en vue d'améliorer la performance globale du site ;
- [Contact Form 7](https://fr.wordpress.org/plugins/contact-form-7/) permet de créer des formulaires de contact.
### Modification d'un thème
Pour modifier profondémment un thème, il faut vous rendre dans [l'éditeur de fichiers](http://localhost:8081/wp-admin/theme-editor.php).
# QCM
[qcm acncc](https://docs.google.com/forms/d/e/1FAIpQLSd7jx4CJJv0Di7NfuOjRxJbvjm6Yhde2OgS8xmERIoeEr8kgg/viewform?usp=sf_link)
Sign in with Wallet
Connect another wallet