Révision
L'évaluation se portera sur les critères suivants :
- CMS
- Critiquer l'utilisation d'un CMS.
- Comparer les fonctionnalités de différents CMS.
- Responsive Web Design
- Expliquer le concept du Responsive Web Design.
- Adapter un site Web pour le rendre responsive.
- Formater du code.
- JavaScript
- Différencier HTML, CSS et JavaScript.
- Expliquer le principe du DOM.
- Python
- Utiliser les variables.
- Utiliser les boucles.
Note | 1 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 |
---|---|---|---|---|---|---|---|---|---|---|
Nombre de critères validés | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
CMS
Qu'est-ce qu'un CMS et à quoi sert-il ?
Réponse possible
Un CMS (Content Management System) est un système de gestion de contenu. Il permet de créer, modifier et organiser du contenu sur un site Web sans avoir besoin de connaissances techniques en programmation. Il facilite la gestion de contenu pour les utilisateurs qui n'ont pas de compétences en développement Web.
Quels sont les avantages et les inconvénients d'un CMS ?
Réponse possible
Avantages : Facilité d'utilisation, gain de temps, coût réduit, mises à jour régulières, communauté active, etc.
Inconvénients : Personnalisation limitée, performances réduites, sécurité, dépendance vis-à-vis du CMS, etc.
Quelles sont les différences entre WordPress et Google Sites ?
Réponse possible
WordPress est un CMS open source très populaire, tandis que Google Sites est un outil de création de site Web gratuit et hébergé par Google. WordPress offre plus de fonctionnalités et de personnalisation, mais nécessite un hébergement et une maintenance régulière. Google Sites est plus simple et rapide à utiliser, mais offre moins de flexibilité.
Expliquer les termes suivants en rapport avec un CMS :
- Thème
- Plugin
- Page
- Article
- Catégorie
- Tag (étiquette)
Réponses possibles
- Un thème détermine l'apparence d'un site Web. Il permet de personnaliser le design et la mise en page du site global.
- Un plugin est un module d'extension qui ajoute des fonctionnalités supplémentaires à un site Web. Il permet d'ajouter des fonctionnalités spécifiques codées par quelqu'un d'autre.
- Une page est une partie statique d'un site Web. Elle est généralement utilisée pour des contenus qui ne changent pas souvent, comme une page "À propos".
- Un article un contenu avec une date de publication. Il est généralement utilisé pour des contenus qui sont publiés régulièrement, comme des articles de blog.
- Une catégorie est une manière d'organiser les articles en groupes thématiques. Elle permet de classer les contenus en fonction de leur sujet.
- Un tag est un mot-clé associé à un article. Il permet de classer les contenus en fonction de leur sujet ou de leur thème.
https://www.mirobolus.fr/quelle-difference-entre-un-article-une-page-une-categorie/
Responsive Web Design
Qu'est-ce que le Responsive Web Design ?
Réponse possible
Le Responsive Web Design est une approche de conception Web qui vise à créer des sites Web qui s'adaptent automatiquement à différents appareils et tailles d'écran. Cela permet d'offrir une expérience utilisateur optimale sur tous les appareils, du smartphone à l'ordinateur de bureau.
Adapter un site Web
Utiliser le système de grille de Bootstrap pour agencer les éléments comme demandé sur différentes tailles d'écran.
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
Pour tous les écrans :
Solution possible
<div class="row">
<div class="col">
<div>A</div>
</div>
<div class="col">
<div>B</div>
</div>
<div class="col">
<div>C</div>
</div>
<div class="col">
<div>D</div>
</div>
</div>
Pour tous les écrans :
Solution possible
<div class="row">
<div class="col-6">
<div>A</div>
</div>
<div class="col-3">
<div>B</div>
</div>
<div class="col-3">
<div>C</div>
</div>
<div class="col-9">
<div>D</div>
</div>
</div>
Sur écran md
et moins :
Sur écran md
et plus :
Solution possible
<div class="row">
<div class="col-6 col-md-12">
<div>A</div>
</div>
<div class="col-6">
<div>B</div>
</div>
<div class="col-6">
<div>C</div>
</div>
<div class="col-6">
<div>D</div>
</div>
</div>
Sur écran sm
et moins :
Sur écran entre sm
et lg
:
Sur écran lg
et plus :
Solution possible
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<div>A</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div>B</div>
</div>
<div class="col-6 col-lg-4">
<div>C</div>
</div>
<div class="col-6 col-lg-12">
<div>D</div>
</div>
</div>
JavaScript
DOM
Dessiner le DOM pour le code HTML suivant :
<!doctype html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
<h1>Titre</h1>
<p>Paragraphe</p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</body>
</html>
Solution
Format + DOM
Formatter le code suivant pour qu'il soit correctement indenté :
<div class="container"><div class="row">
<div class="col">Colonne 1
</div>
<div class="col">Colonne 2</div></div>
<div class="row">
<div class="col">Colonne 3</div><div class="col">
Colonne 4</div></div></div>
Solution
<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
</div>
<div class="row">
<div class="col">Colonne 3</div>
<div class="col">Colonne 4</div>
</div>
</div>
Dessiner le DOM du code HTML précédent.
Solution
- Quel est le parent de
Colonne 3
? - Quels sont les enfants de
.container
? - Quels sont les voisins de
Colonne 2
?
Réponses
- Le deuxième
div.row
. - Les deux
div.row
. Colonne 1
.
Python
Variable
Que vont imprimer les programmes suivants ?
a = 5
b = 3
print(b)
print(a)
print(a + b)
Solution
3
5
8
a = 2
print(a)
a = a + 3
print(a)
b = a * 2
print(b)
a = 4
print(a, b)
Solution
2
5
10
4 10
Boucle
Que vont imprimer les programmes suivants ?
for i in range(4):
print("Bonjour")
Solution
Bonjour
Bonjour
Bonjour
for i in range(3):
print(i)
Solution
0
1
2
for i in range(6):
a = i * 2
print(a, i)
Solution
0 0
2 1
4 2
6 3
8 4
10 5
for i in range(10):
print("4 x", i, "=", 4 * i)
Solution
4 x 0 = 0
4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
4 x 5 = 20
4 x 6 = 24
4 x 7 = 28
4 x 8 = 32
4 x 9 = 36
Tester du code Python en ligne : https://www.algopython.fr/outil/console