Compréhension de la structure d'un site Web

Podcast Beta

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Quelle est l'importance de suivre les consignes d'installation pour WAMP?

Cela n'affecte pas la qualité de l'installation.

Elles sont optionnelles et peuvent être ignorées.

Elles garantissent une installation sans erreurs. (correct)

Ces consignes permettent d'accélérer l'installation.

Quel élément indique que les serveurs fonctionnent dans MAMP?

Un bouton désactivé

Un message d'erreur

Des voyants verts (correct)

Des voyants rouges

Quels types d'informations peut-on obtenir sur la Page de démarrage de MAMP?

Les fichiers à télécharger

L'activation automatique des serveurs

Les erreurs d’installation

Les versions de PHP et les ports par défaut (correct)

À quoi sert l'interface phpMyAdmin dans MAMP?

À administrer les bases de données Signup and view all the answers

Où doivent être placés les fichiers dans MAMP pour les rendre accessibles?

Dans le dossier public Signup and view all the answers

Quelles sont les trois couches logicielles d'un site Web ?

Client, Serveur de traitement, Serveur de données Signup and view all the answers

Quel est l'objectif principal du développement local ?

Tester les modifications sans serveur distant Signup and view all the answers

Quelle technologie est utilisée pour le serveur de traitement en Back End ?

PHP Signup and view all the answers

Quel est l'environnement de serveurs décrit par la sigle LAMP ?

Linux, Apache, MySQL, PHP Signup and view all the answers

À quoi sert un serveur web de type LAMP ?

Simuler un serveur web pour le développement Signup and view all the answers

Quel est l'un des principaux problèmes rencontrés lors du démarrage de MAMP ?

Problèmes sur les 'ports' Signup and view all the answers

Qu'est-ce que MAMP ?

Une solution multiplateforme pour le développement local Signup and view all the answers

Quelle composante n'est pas incluse dans l'environnement MAMP standard ?

Python Signup and view all the answers

Quel type de code constitue le site Web côté Client ?

Code source exécuté dans le navigateur Signup and view all the answers

Quel langage est particulièrement utilisé pour la gestion de base de données dans le Back End ?

SQL Signup and view all the answers

Où se trouve le dossier htdocs sur macOS ?

/Applications/MAMP/htdocs Signup and view all the answers

Quelle est la combinaison de login et mot de passe pour la base de données avec MAMP ?

root/root Signup and view all the answers

Quel dossier devez-vous créer après avoir décompressé l'archive de WordPress ?

monjolisite Signup and view all the answers

Comment devez-vous déposer le dossier de WordPress sur le serveur local lors de l'utilisation de MAMP ?

Dans le dossier htdocs Signup and view all the answers

Quel nom de base de données est recommandé lors de la création d'une nouvelle base de données dans phpMyAdmin ?

monjolisite Signup and view all the answers

Quelle est l'URL pour lancer l'installation de WordPress après avoir déposé les fichiers ?

<a href="http://localhost/monjolisite">http://localhost/monjolisite</a> Signup and view all the answers

Quelle information n'est pas nécessaire lors de la configuration de la connexion pour l'installation de WordPress ?

Adresse email Signup and view all the answers

Quel dossier contient les fichiers nécessaires au fonctionnement de WordPress ?

Dossier contenant 16 fichiers et 3 dossiers Signup and view all the answers

Quelle est une des étapes pour créer une base de données avec phpMyAdmin ?

Indiquer un nom pour la base de données Signup and view all the answers

Quel outil est utilisé pour gérer les bases de données lors de l'installation de WordPress localement avec MAMP ?

phpMyAdmin Signup and view all the answers

Quel terme désigne le système de création de sites web WordPress?

Content Management System Signup and view all the answers

Quelle fonctionnalité WordPress permet d'ajouter des capacités supplémentaires?

Plugins Signup and view all the answers

Quelle option fait partie des étapes d'installation de WordPress?

Choisir un mot de passe solide Signup and view all the answers

Quel type de contenu WordPress est conçu pour être dynamique?

Les Articles Signup and view all the answers

Qu'est-ce que Gutenberg dans WordPress?

Un outil de publication Signup and view all the answers

Comment accède-t-on au BackOffice de WordPress?

Via l'adresse wp-admin Signup and view all the answers

Quels éléments doivent être vérifiés si l'installation de WordPress échoue ?

Identifiant, mot de passe et nom du serveur corrects Signup and view all the answers

Quel type de contenu est principalement statique dans WordPress?

Les Pages Signup and view all the answers

Quel thème par défaut apparait après l'installation de WordPress ?

TwentyTwentyThree Signup and view all the answers

Quels niveaux de réglages sont disponibles pour la personnalisation d'un site WordPress ?

Réglages dans l'espace d'admin de WordPress Signup and view all the answers

Quelles informations sont généralement associées à un Article dans WordPress?

Un seul auteur Signup and view all the answers

Quelle est la fonction des catégories dans WordPress?

Filtrer et archiver les articles Signup and view all the answers

Quel outil est mentionné comme l'éditeur natif de WordPress ?

Gutenberg Signup and view all the answers

Quel type de contenu est créé pour permettre des interactions entre utilisateurs dans WordPress?

Les Commentaires Signup and view all the answers

Qu'est-ce qu'un modèle de démarrage dans WordPress ?

Un thème prédéfini avec des réglages spécifiques Signup and view all the answers

Quels sont les éléments à prendre en compte lors de la réflexion sur les contenus d'un site ?

Les souhaits de la maquette et les contraintes du CMS Signup and view all the answers

Que doit-on faire avant de se connecter à WordPress ?

Noter son identifiant et son mot de passe Signup and view all the answers

Quelles parties du site peuvent être ajustées dans les réglages de WordPress ?

Les couleurs et typographies, ainsi que les éléments du site Signup and view all the answers

Quel est l'objectif principal de la maintenance d'un site WordPress ?

S'assurer de la sécurité et du bon fonctionnement Signup and view all the answers

Quel type de contenu peut influencer la décision de l'arborescence d'un site ?

Le caractère statique ou dynamique des contenus Signup and view all the answers

Study Notes

Compréhension de la « structure » d’un site Web

Trois couches logicielles : Client, Serveur de traitement, et Serveur de données.
Les trois couches peuvent être situées sur la même machine ou sur des machines distinctes.
Chaque couche échange des demandes et des réponses avec la ou les couches voisines.
Le développement local se fait sur la même machine, sans nécessairement être en réseau.

### Le site Web côté Client

Le résultat de l’exécution du code source dans le navigateur.
L’interface d’interaction avec l’utilisateur (IHM).
Développé avec les méthodes et langages du développement Front End, comme HTML, CSS et JavaScript.

Le site Web côté Serveur

Le code source qui définit les réponses à afficher en fonction des demandes de l’utilisateur.
Deux serveurs : le serveur de traitement et le serveur de données.
Développés avec les méthodes et langages du développement Back End.
Exemples : PHP pour le serveur de traitement et SQL pour le serveur de données (modèle relationnel).

Installation et démarrage d’un serveur local

Un serveur WEB de type LAMP : Linux, Apache, MySQL, PHP.
Linux : système d’exploitation.
Apache : serveur web.
MySQL : outil de gestion de bases de données.
PHP : langage de script côté serveur.
Permet de simuler un serveur WEB comme chez un hébergeur.
Prévisualise les modifications et évite les mises en ligne coûteuses en temps.

Installation et Démarrage d’un serveur local : Solutions

MAMP (multiplateforme) : la solution recommandée.
WAMP (Windows) : disponible sur le site web www.wampserver.com.
XAMPP (multiplateforme) : une bonne alternative.
uWamp (Windows) : une solution légère mais moins complète.

Installation et démarrage d’un serveur local : Attention

Si les serveurs ne sont pas installés ou à l’arrêt, l’exécution des codes sources est impossible.
Le client affichera une page d’erreur ou le code édité, semblable à un éditeur de texte.

Installation et démarrage d’un serveur local : MAMP

macOS (système d’exploitation) mais fonctionne aussi avec Windows.
Apache (serveur WEB) mais l’on peut aussi utiliser NGINX.
MySQL ou MariaDB (systèmes de gestion de bases de données).
PHP, Perl ou Python (langages de développement utilisés pour le WEB).
Existe en version PRO, mais la version standard est suffisante.

Installation et démarrage d’un serveur local : MAMP Installation

Téléchargez la version adaptée à votre OS.
Double-cliquez sur le fichier pour lancer l’installation.
Double-cliquez sur l’application MAMP installée pour la lancer.
Si les serveurs ne démarrent pas, il y a souvent un problème avec les « ports » (un des problèmes courants).
Pour WAMP, il y a plus d’étapes préalables décrites dans la documentation, suivez les consignes d’installation étape par étape.

Serveurs Apache et MySQL : Interfaces

MAMP offre une interface de contrôle.
Elle indique l’état des serveurs (voyants verts = fonctionnels).
Des boutons permettent de démarrer et d’arrêter les serveurs.

Serveurs Apache et MySQL : Interfaces - "Open Web Start Page"

La page de démarrage de MAMP s’ouvre dans le navigateur et fournit des informations utiles pour l’administration.
Informations telles que la version de PHP, les ports par défaut pour chaque serveur (configurables en paramètres), l’identifiant et le mot de passe de connexion à la base de données, etc.
Lien pour démarrer phpMyAdmin : l’interface d’administration des bases de données.

Serveurs Apache et MySQL : Interfaces - phpMyAdmin

L’interface d’administration des bases de données (s’ouvre dans le navigateur par défaut).

Serveurs Apache et MySQL : Dossiers et fichiers

MAMP : les fichiers doivent être placés dans le dossier « htdocs » (ou « www », selon les outils).
Sur macOS : /Applications/MAMP/htdocs.
Sur Windows : dans le répertoire « htdocs » où vous avez installé l’application.
Cette configuration est modifiable via les préférences.

Serveurs Apache et MySQL : Dossiers et fichier : Configuration

Plusieurs solutions pour déployer un serveur.
Avec MAMP : placez vos documents dans le dossier « htdocs ». Les identifiants de connexion à la BDD sont : root/root.
Avec d’autres outils : le répertoire peut être « WEB » ou « WWW », les identifiants de connexion peuvent être : root/“vide” ou autre.
De nombreux sites web offrent de l’aide pour chaque outil sur internet.

Obtenir l’archive de WordPress

WordPress est libre et gratuit.
Téléchargez la dernière version sur wordpress.org (pour des raisons de sécurité).
Décompressez l’archive .zip sur votre ordinateur.
Un dossier « wordpress » est créé.
Renommez ce dossier en « monjolisite » (ou tout autre nom que « wordpress »).

Déposer les fichiers

Le dossier complet de WordPress doit être déposé sur le serveur local.
Vérifiez la compatibilité de version de PHP entre WordPress et votre serveur.
Si vous utilisez MAMP en local, déposez le dossier « monjolisite » au sein du dossier « htdocs ».
Assurez-vous que c’est bien un dossier contenant 16 fichiers et 3 dossiers.
Nommez le dossier « monjolisite » en fonction de votre projet.
Dans la suite, ce dossier sera appelé « monjolisite ».

Création de la base de données

WordPress nécessite une base de données pour fonctionner.
Créez une base de données avec phpMyAdmin.
phpMyAdmin est accessible depuis la page de lancement de MAMP.
Pour lancer phpMyAdmin, vous devrez peut-être indiquer le login et le mot de passe (pour MAMP) : root/root.
Pour créer la base, indiquez un nom (conseil : même nom que le projet).
Dans l’onglet « database » :
- Database name : monjolisite.
- Cliquez sur « create ».

Installation de WordPress

Les fichiers ont été placés sur le serveur.
Une base de données a été créée.
Lancez l’installation.
Ouvrez votre navigateur et accédez à l’adresse : http://localhost/monjolisite.
Une liste de langues apparaît, sélectionnez le français et cliquez sur « Continue ».

Installation : Configuration de la connexion

Fournissez quatre informations :
- Nom de la base : monjolisite.
- Login / MDP : root/root.
- Nom du serveur : localhost.
- Ne modifiez pas _wp.
Validez.

Installation : Fin de l’installation

Si tout a été renseigné correctement, l’installation est terminée.
Lancez l’installation.
Si l’installation échoue, vérifiez les informations saisies (fautes de frappe, login, mdp, serveur, nom de base), assurez-vous que le serveur est démarré et recommencez.

Installation : Informations à renseigner

Remplissez les informations nécessaires pour finaliser l’installation.

Entrons dans WordPress

Notez votre identifiant et mémorisez votre mot de passe.
Connectez-vous.

L’interface d’admin : Back Office

Félicitations, vous avez installé WordPress sur votre serveur local.
Pensez à la maintenance et la sécurité de votre installation.
Bonne publication !

Dans le navigateur : Le Site

Le site apparaît avec le thème par défaut (TwentyTwentyThree).

Utilisation d’un autre thème

Nous avons sélectionné, ajouté et activé Astra dans le Back Office de WordPress.
Un modèle de démarrage a également été installé.

Utilisation d’un autre thème : Installation du modèle de démarrage

L’installation du modèle de démarrage est accessible dans Astra.

Utilisation d’un autre thème : Le Site

L’apparence du site après l’installation du thème Astra et du modèle de démarrage.

Personnalisation

Plusieurs niveaux de réglages sont disponibles:
- Généraux dans l’espace d’administration de WordPress.
- Généraux dans la personnalisation du thème Astra.
- Personnalisation du modèle de démarrage dans Astra.
- Avec l’éditeur de bloc (choix de Gutenberg, l’éditeur natif dans WordPress).

Personnalisation : Documentation et tutoriels

De nombreux documents et tutoriels sont disponibles en ligne pour chaque étape de la personnalisation.
Apprenez à formuler des recherches efficaces en utilisant des mots-clés et des prompts bien ciblés.

Réflexion sur les contenus

Trouvez le compromis entre les souhaits de la maquette et les contraintes du CMS.
Ajustez les couleurs, les typographies, changez le logo.
Ajustez la position des éléments dans les différentes parties du site :
- En-tête (header), barre latérale (sidebar), pied de page (footer), page elle-même.
Organisez l’arborescence et les menus.
Choisissez entre des contenus statiques ou dynamiques : page ou article ?

WordPress est un CMS

Content Management System : système de gestion de contenu.
Fonctions principales :
- Permet la saisie de contenu facilement.
- Permet la modification de l’apparence sans changer le contenu.
- Permet l’adjonction de fonctionnalités (plugins).
WordPress permet également de créer son propre modèle de contenu (le THEME).

Votre propre WordPress à distance

La plupart des hébergeurs proposent une installation simplifiée de WordPress.
Suivez le processus d’installation simplifié.
Choisissez un nom pour votre site, un nom de propriétaire (administrateur), un mot de passe (solide) et indiquez votre adresse mail.

Les contenus

WordPress gère principalement quatre types de contenu :
- Articles (post).
- Pages (page).
- Commentaires (comment).
- Média attachés (attachement).
- Il existe également (les dates, les auteurs, les catégories et les tags).
WordPress autorise la création de vos propres types de contenu (Custom Post Type).

Les deux faces de WordPress

WordPress présente un contenu minimal après l’installation :
- 1 article, 1 commentaire, 1 page et le thème de l’année (twentytwentyfour).
Le FrontOffice (localhost, dans les exemples précédents) : la partie visible par les lecteurs, où il est possible de lire mais pas de modifier.
- Pour passer du FrontOffice au BackOffice : https://LeNomDeVotreSite/wp-admin
Le BackOffice : la partie réservée aux administrateurs, où il est possible de tout modifier.
- Les boutons de l’espace d’administration.

Les articles

La base de WordPress, le premier type de contenu utilisé par le moteur de blog.
Un titre.
Un contenu.
Un auteur.
Une date de publication.
Des catégories.
Des tags.
Notion de liste et de page simple.

Gutenberg

Le nouvel outil de publication de WordPress.
WYIWYG (What You See Is What You Get).
Il est très permissif et permet aux utilisateurs de modifier les polices, les couleurs et la mise en forme des paragraphes.

Les pages

Un contenu statique de WordPress.
Un contenu qui n’est pas fait pour évoluer beaucoup au cours du temps.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Ce quiz porte sur la structure fondamentale d'un site Web, en explorant les trois couches logicielles : Client, Serveur de traitement, et Serveur de données. Il examine également les aspects du développement Front End et Back End, ainsi que leur interaction. Testez vos connaissances sur les fonctionnalités de chaque couche et les technologies associées.