FAQ
Questions plus ou moins fréquentes, et tentatives de réponses.
Il est généralement suffisant d’avoir une seule feuille de style pour chaque site (= pour chaque “ensemble de pages”).
Pour sélectionner spécifiquement des éléments sur différentes pages, on peut utiliser des class:
index.html
<body class="homepage">
<h1>Accueil</h1>
</body>portfolio.html
<body class="portfolio">
<h1>Portfolio</h1>
</body>styles.css
.homepage h1 { color: blue;}
.portfolio h1 { color: green;}Mais on peut parfaitement lier plusieurs feuilles de style à un même document HTML. Ainsi, dans le <head> d’un fichier HTML, on peut avoir:
<link href="css/fonts.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/accueil.css" rel="stylesheet" type="text/css">Ici, le fichier fonts.css contiendrait les déclarations @font-face. Le fichier styles.css contiendrait les styles communs à l’ensemble du site. Le fichier accueil.css ne contiendrait que des styles spécifiques à la page d’accueil.
Pour attribuer un arrière-plan à une page, on utilise en CSS la propriété background (voir la documentation de référence).
Background: Linear gradients
On peut utiliser des dégradés linéaires en tant que background-image. On peut déterminer son point de départ et son angle, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose un générateur de dégradés ainsi que de nombreux dégradés prédéfinis.
Background: Radial gradients
On peut utiliser des dégradés radiaux en tant que background-image. On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose aussi de générer des dégradés radiaux.
Background: Conic gradients
On peut utiliser des dégradés coniques (les transitions entre les couleurs ont lieu autour d’un centre plutôt que depuis le centre). On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose aussi de générer des dégradés radiaux.
Background: Repeating gradient
Les dégradés linéaires ou radiaux peuvent être répétés pour générer des motifs, grâce aux propriétés d’arrière-plan repeating-linear-gradient et repeating-radial-gradient ou aux possibilités de dimensionnement des images d’arrière plan proposées par background-size.
Le site magicpatterns.design, celui de Temani Aff ou de Léa Vérou proposent un certain nombre de motifs basés sur ces possibilités.
Multiple backgrounds
Un élément peut avoir plusieurs arrières-plans. Les propriétés de dégradés doivent être séparées par des virgules. Les exemples ci-dessous n’utilisent que les dégradés précédemment évoqués mais on peut également utiliser des images (png, jpg, svg, gif) multiples en tant qu’arrières-plans.
Plusieurs formats d’image sont adaptés à la publication en ligne : les formats « matriciels » (ou bitmap) les plus fréquemment utilisés sont jpg, gif et png ; pour les images vectorielles, le format est svg.
⚠ Si le poids (en octets) d’une image excède 1 Mo et qu’aucune raison d’extrême importance ne le demande, il est nécessaire de réduire le poids de cette image en la redimensionnannt ou en la compressant.
Voir ici pour intégrer des images à une page web.
Dimensions
Les images doivent être redimensionnées à une taille cohérente avec leur taille d’affichage1. Une image destinée à un affichage pleine-page n’excèdera généralement pas 2000 pixels de large ; en cas d’affichage multi-colonnes (vignettes) on réduira jusqu’à 600, voire 350 pixels de large. Cette réduction permet d’améliorer la navigation sur un site en allégeant le poids total téléchargé ainsi qu’en aidant les appareils moins puissants à les afficher et les traiter.
Compression
Le format jpg autorise une compression importante, permettant une grande réduction du poids des fichiers, au détriment de leur qualité. En jpg, une image floue se compressera mieux et de manière moins visible qu’une image nette.
De nouveaux formats sont apparus ces dernières années qui offrent de meilleurs compressions pour une qualité d’image équivalente : avif et webp. Pour exporter une image dans ces formats, utiliser ⚡ ImageMagick ou ✨ GIMP en local ou Photopea en ligne2.
Dans le cadre de projets au sein de l’école, on peut se satisfaire des formats webp ou avif. Pour fournir un support plus étendu aux anciens navigateurs, il faudra se tourner vers l’élément <picture> et l’attribut srcset qui permettent de proposer au navigateur différents formats d’image, adaptés à chaque résolution d’écran et aux capacités des navigateurs.
Il existe plusieurs façons d’exécuter un programme au démarrage du Raspberry Pi. Dans cet exemple, il s’agit de démarrer un script Python, mais la méthode peut simplement s’adapter à un script bash ou un programme graphique du Raspberry Pi (voir la section GUI).
Remplacez mondossier/monscript.py par le nom du programme en utilisant le chemin absolu du programme et non son chemin relatif.
rc.local
rc.local est un fichier administré par le système qui s’exécute après le démarrage de tous les services du système. C’est la méthode la plus simple pour exécuter des programmes au démarrage sur les systèmes Linux. On ne peut utiliser cette méthode que pour les programmes sans interface graphique, car rc.local s’exécute avant que le système de fenêtrage du Raspberry Pi ne démarre.
- Dans un terminal, taper la commande suivante pour ouvrir le fichier rc.local :
sudo nano /etc/rc.local. - Dans le fichier rc.local, entrez la ligne de code suivante (avant la ligne «
exit 0») :python3 /home/pi/mondossier/monscript.py &.(conserver le « &. » en fin de ligne).
Cron
Cron est un utilitaire de configuration et de planification des tâches sur les systèmes de type Unix. Il permet de planifier l’exécution de programmes à intervalles réguliers. Les fonctionnalités de Cron reposent sur le démon crond, un service d’arrière-plan qui exécute les programmes programmés dans la table des tâches cron, crontab. On doit donc modifier cette table afin d’ajouter une planification pour le programme que l’on souhaite exécuter au démarrage :
- Dans un terminal, taper la commande suivante pour modifier la table des tâches cron (crontab):
crontab -e. On doit alors sélectionner un éditeur (nano). - Insérer une ligne après les commentaires :
@reboot python3 /home/pi/mondossier/monscript.py &.(conserver le « &. » en fin de ligne).
GUI
Autostart permet d’exécuter des programmes basés sur une interface graphique. Il s’assure que le système X Window et l’environnement de bureau LXDE sont disponibles avant que le système n’exécute les programmes planifiés.
- Dans un terminal, taper la commande suivante pour créer un fichier .desktop dans le répertoire autostart :
sudo nano /etc/xdg/autostart/monprojet.desktop. - Dans le fichier monprojet.desktop, ajouter les lignes de code suivantes :
[Desktop Entry] Name=MonScript Exec=/usr/bin/python3 /home/pi/mondossier/monscript.pyOn peut également utiliser autostart pour lancer un programme graphique, par exemple:
[Desktop Entry] Name=MaPageWebAuDemarrage Exec=chromium-browser --kiosk-printing http://localhost/autoprint.html
Dans tous les cas
- Ensuite, appuyez sur CTRL + o pour enregistrer le fichier.
- Dans le terminal, entrez
sudo reboot.