|
|
@@ -1,262 +1,271 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="fr">
|
|
|
+
|
|
|
<?php
|
|
|
-$title = "Site";
|
|
|
-include("../header.php");
|
|
|
+ $title = "Site";
|
|
|
+ include("../../include/head.php");
|
|
|
?>
|
|
|
|
|
|
-<!-- Main -->
|
|
|
-<main role="main" class="container">
|
|
|
- <div class="focus-center">
|
|
|
- <h1>
|
|
|
- Mon site internet
|
|
|
- </h1>
|
|
|
- <img src="https://img.icons8.com/color/96/000000/html-5.png" alt="html-5 flat icon">
|
|
|
- <h2>
|
|
|
- Le site sur lequel vous surfez actuellement ...
|
|
|
- </h2>
|
|
|
- <p class="lead">
|
|
|
- Et soyez heureux, ce site est garanti sans cookie !
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+<body>
|
|
|
+ <!-- Navbar -->
|
|
|
+ <?php
|
|
|
+ include("../../include/navbar.php")
|
|
|
+ ?>
|
|
|
|
|
|
- <!-- Content -->
|
|
|
- <h3>
|
|
|
- <img src="https://img.icons8.com/color/48/000000/term.png" alt="V">
|
|
|
- Introduction
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- J'ai longtemps codé en C++ afin de faire des jeux-vidéo. Mais après avoir gagné un Raspberry Pi lors d'un
|
|
|
- hackaton, je trouvais intéressant d'apprendre et d'appliquer quelques technologies du web afin de les appliquer
|
|
|
- à un projet concret.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Afin de m'entraîner un peu au développement et au déploiement d'un site web, j'ai donc décidé de réaliser mon
|
|
|
- propre site Internet.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- De plus, c'est toujours utile d'avoir un site Internet de présentation afin de se faire connaître par des
|
|
|
- employeurs, collègues et connaissances. Et c'est quand même plus crédible pour un développeur informatique de le
|
|
|
- réaliser lui-même ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- J'ai essayé de rendre cet <strong>article concis et accessible à tous publics</strong>. Peu importe vos
|
|
|
- connaissances en informatique, vous avez sans doute la capacité de le comprendre. N'hésitez donc pas à
|
|
|
- continuer votre lecture ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- C'est parti, voici un petit récapitulatif de ce qui se cache derrière ce que vous avez actuellement sur votre
|
|
|
- écran.
|
|
|
- </p>
|
|
|
+ <!-- Main -->
|
|
|
+ <main role="main" class="container">
|
|
|
+ <div class="focus-center">
|
|
|
+ <h1>
|
|
|
+ Mon site internet
|
|
|
+ </h1>
|
|
|
+ <img src="https://img.icons8.com/color/96/000000/html-5.png" alt="html-5 flat icon">
|
|
|
+ <h2>
|
|
|
+ Le site sur lequel vous surfez actuellement ...
|
|
|
+ </h2>
|
|
|
+ <p class="lead">
|
|
|
+ Et soyez heureux, ce site est garanti sans cookie !
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
- <h3>
|
|
|
- <img src="https://img.icons8.com/color/48/000000/bootstrap.png" alt="V">
|
|
|
- Bootstrap : une affaire de style
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- Ce site a été codé en HTML. Pour voir le code source, il vous suffit d'utiliser la combinaison de touches <code>Ctrl</code>+<code>u</code>
|
|
|
- sous le navigateur Firefox. Et oui, il ne m'a fallu qu'un simple éditeur de texte pour arriver à ce résultat. Un
|
|
|
- éditeur de texte un peu tuné, certes. J'ai d'abord utilisé
|
|
|
- <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>, puis
|
|
|
- <a href="https://www.sublimetext.com/">SublimeText</a>, plus léger, puis
|
|
|
- <a href="https://www.vim.org/">Vim</a>, encore plus léger.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Afin de mettre un peu de style à l'information brute (celle contenue dans le HTML), j'ai utilisé un template CSS
|
|
|
- qui s'appelle Bootstrap. Cette technologie a été développée par Twitter, et est parfois aussi appelé en
|
|
|
- conséquence Twitter Bootstrap. N'hésitez pas à faire un tour sur le
|
|
|
- <a href="https://getbootstrap.com/">site officiel de Bootstrap</a>
|
|
|
- pour savoir de quoi il retourne.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Pour les néophytes, vous devez savoir que CSS est un langage qui permet de définir des feuilles de style. Cela
|
|
|
- permet de mettre en forme tout ce que vous trouvez sur cette page : la barre de navigation horizontale verte, la
|
|
|
- police, la mise en page, les barres vertes sous les titres ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Afin de me faciliter la tâche, j'ai utilisé un template CSS. C'est un ensemble de feuilles de style déjà écrites
|
|
|
- qui me permet de ne pas tout refaire de zéro. La barre de navigation, par exemple, existait déjà sous cette
|
|
|
- forme. Je n'ai fait que modifier des détails, comme la couleur et les titres des liens.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Il faut savoir que Bootstrap est un framework très connu, et donc utilisé dans de nombreux sites web. On peut
|
|
|
- citer BlaBlaCar, par exemple, le fameux site de covoiturage. À cause de cette mode, et malgré la
|
|
|
- personnalisation assurée par les développeurs, les sites se ressemblent (forme des boutons, des onglets). On
|
|
|
- peut donc critiquer le fait que je l'utilise : développer son propre site, c'est devoir se démarquer et montrer
|
|
|
- son originalité. Mais c'est peut-être aussi se tenir au courant des technologies actuelles et de les mettre en
|
|
|
- pratique ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Si vous voulez voir à quoi ressemble le template que j'ai utilisé comme base de mon travail, il est disponible
|
|
|
- sur le site officiel de Bootstrap :
|
|
|
- <a href="https://getbootstrap.com/docs/4.2/examples/starter-template/">Starter Template by Bootstrap</a>.
|
|
|
- </p>
|
|
|
+ <!-- Content -->
|
|
|
+ <h3>
|
|
|
+ <img src="https://img.icons8.com/color/48/000000/term.png" alt="term flat icon">
|
|
|
+ Introduction
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ J'ai longtemps codé en C++ afin de faire des jeux-vidéo. Mais après avoir gagné un Raspberry Pi lors d'un
|
|
|
+ hackaton, je trouvais intéressant d'apprendre et d'appliquer quelques technologies du web afin de les appliquer
|
|
|
+ à un projet concret.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Afin de m'entraîner un peu au développement et au déploiement d'un site web, j'ai donc décidé de réaliser mon
|
|
|
+ propre site Internet.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ De plus, c'est toujours utile d'avoir un site Internet de présentation afin de se faire connaître par des
|
|
|
+ employeurs, collègues et connaissances. Et c'est quand même plus crédible pour un développeur informatique de le
|
|
|
+ réaliser lui-même ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ J'ai essayé de rendre cet <strong>article concis et accessible à tous publics</strong>. Peu importe vos
|
|
|
+ connaissances en informatique, vous avez sans doute la capacité de le comprendre. N'hésitez donc pas à
|
|
|
+ continuer votre lecture ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ C'est parti, voici un petit récapitulatif de ce qui se cache derrière ce que vous avez actuellement sur votre
|
|
|
+ écran.
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>
|
|
|
- <img src="https://img.icons8.com/color/48/000000/raspberry-pi.png" alt="V">
|
|
|
- Raspberry Pi : un petit ordinateur
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- C'est bien de coder son site. Mais pour qu'il soit visible par tous les utilsateurs d'Internet, il faut un
|
|
|
- serveur web ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Basiquement, un serveur web est un ordinateur tout à fait classique, connecté à Internet, qui distribue les
|
|
|
- pages Internet aux clients qui les demandent. Le client, c'est vous. Et la page Internet, c'est l'ensemble du
|
|
|
- code source qui décrit cette page, comme je l'ai expliqué dans la section précédente. Le préfixe
|
|
|
- <code>http</code> dans l'URL définit le protocole qu'utilise votre navigateur (par exemple Firefox, Edge ou
|
|
|
- Safari) pour discuter avec mon ordinateur.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Alors oui, je dis "mon ordinateur", car le serveur qui vient de vous donner cette page web est en fait un micro
|
|
|
- ordinateur branché à ma box Internet dans ma cuisine. C'est un Raspberry Pi 3, que j'ai gagné lors d'un concours
|
|
|
- de programmation fin 2017.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Pour ceux qui se demandent à quoi peut ressembler une telle machine, je vous laisse visiter
|
|
|
- <a href="https://www.raspberrypi.org/products/raspberry-pi-3-model-b/"> le site du vendeur officiel</a>.
|
|
|
- En fait, c'est tout simplement une unité centrale, comme celle que vous pouvez avoir dans votre bureau, mais en
|
|
|
- plus petit. Beaucoup plus petit. Mais tout autant fonctionnel (il marche bien mon site, non ?).
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Après, il a fallu configurer l'appareil. Le système d'exploitation est Debian, une distribution de Linux. Pour
|
|
|
- les néophites, un système d'exploitation est le programme principal qui vous permet d'utiliser votre ordinateur
|
|
|
- personnel. Debian est à Linux ce que Windows 10 est à Microsoft Windows (en gros).
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Enfin, il suffit d'installer un serveur HTTP (le programme qui répondra à votre navigateur). Ici j'ai utilisé
|
|
|
- <a href="https://httpd.apache.org/">Apache 2</a>, un programme libre très fonctionnel.
|
|
|
- </p>
|
|
|
+ <h3>
|
|
|
+ <img src="https://img.icons8.com/color/48/000000/bootstrap.png" alt="bootstrap logo flat icon">
|
|
|
+ Bootstrap : une affaire de style
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ Ce site a été codé en HTML. Pour voir le code source, il vous suffit d'utiliser la combinaison de touches <code>Ctrl</code>+<code>u</code>
|
|
|
+ sous le navigateur Firefox. Et oui, il ne m'a fallu qu'un simple éditeur de texte pour arriver à ce résultat. Un
|
|
|
+ éditeur de texte un peu tuné, certes. J'ai d'abord utilisé
|
|
|
+ <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>, puis
|
|
|
+ <a href="https://www.sublimetext.com/">SublimeText</a>, plus léger, puis
|
|
|
+ <a href="https://www.vim.org/">Vim</a>, encore plus léger.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Afin de mettre un peu de style à l'information brute (celle contenue dans le HTML), j'ai utilisé un template CSS
|
|
|
+ qui s'appelle Bootstrap. Cette technologie a été développée par Twitter, et est parfois aussi appelé en
|
|
|
+ conséquence Twitter Bootstrap. N'hésitez pas à faire un tour sur le
|
|
|
+ <a href="https://getbootstrap.com/">site officiel de Bootstrap</a>
|
|
|
+ pour savoir de quoi il retourne.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Pour les néophytes, vous devez savoir que CSS est un langage qui permet de définir des feuilles de style. Cela
|
|
|
+ permet de mettre en forme tout ce que vous trouvez sur cette page : la barre de navigation horizontale verte, la
|
|
|
+ police, la mise en page, les barres vertes sous les titres ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Afin de me faciliter la tâche, j'ai utilisé un template CSS. C'est un ensemble de feuilles de style déjà écrites
|
|
|
+ qui me permet de ne pas tout refaire de zéro. La barre de navigation, par exemple, existait déjà sous cette
|
|
|
+ forme. Je n'ai fait que modifier des détails, comme la couleur et les titres des liens.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Il faut savoir que Bootstrap est un framework très connu, et donc utilisé dans de nombreux sites web. On peut
|
|
|
+ citer BlaBlaCar, par exemple, le fameux site de covoiturage. À cause de cette mode, et malgré la
|
|
|
+ personnalisation assurée par les développeurs, les sites se ressemblent (forme des boutons, des onglets). On
|
|
|
+ peut donc critiquer le fait que je l'utilise : développer son propre site, c'est devoir se démarquer et montrer
|
|
|
+ son originalité. Mais c'est peut-être aussi se tenir au courant des technologies actuelles et de les mettre en
|
|
|
+ pratique ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Si vous voulez voir à quoi ressemble le template que j'ai utilisé comme base de mon travail, il est disponible
|
|
|
+ sur le site officiel de Bootstrap :
|
|
|
+ <a href="https://getbootstrap.com/docs/4.2/examples/starter-template/">Starter Template by Bootstrap</a>.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h3>
|
|
|
+ <img src="https://img.icons8.com/color/48/000000/raspberry-pi.png" alt="raspberry pi logo flat icon">
|
|
|
+ Raspberry Pi : un petit ordinateur
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ C'est bien de coder son site. Mais pour qu'il soit visible par tous les utilsateurs d'Internet, il faut un
|
|
|
+ serveur web ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Basiquement, un serveur web est un ordinateur tout à fait classique, connecté à Internet, qui distribue les
|
|
|
+ pages Internet aux clients qui les demandent. Le client, c'est vous. Et la page Internet, c'est l'ensemble du
|
|
|
+ code source qui décrit cette page, comme je l'ai expliqué dans la section précédente. Le préfixe
|
|
|
+ <code>http</code> dans l'URL définit le protocole qu'utilise votre navigateur (par exemple Firefox, Edge ou
|
|
|
+ Safari) pour discuter avec mon ordinateur.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Alors oui, je dis "mon ordinateur", car le serveur qui vient de vous donner cette page web est en fait un micro
|
|
|
+ ordinateur branché à ma box Internet dans ma cuisine. C'est un Raspberry Pi 3, que j'ai gagné lors d'un concours
|
|
|
+ de programmation fin 2017.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Pour ceux qui se demandent à quoi peut ressembler une telle machine, je vous laisse visiter
|
|
|
+ <a href="https://www.raspberrypi.org/products/raspberry-pi-3-model-b/"> le site du vendeur officiel</a>.
|
|
|
+ En fait, c'est tout simplement une unité centrale, comme celle que vous pouvez avoir dans votre bureau, mais en
|
|
|
+ plus petit. Beaucoup plus petit. Mais tout autant fonctionnel (il marche bien mon site, non ?).
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Après, il a fallu configurer l'appareil. Le système d'exploitation est Debian, une distribution de Linux. Pour
|
|
|
+ les néophites, un système d'exploitation est le programme principal qui vous permet d'utiliser votre ordinateur
|
|
|
+ personnel. Debian est à Linux ce que Windows 10 est à Microsoft Windows (en gros).
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Enfin, il suffit d'installer un serveur HTTP (le programme qui répondra à votre navigateur). Ici j'ai utilisé
|
|
|
+ <a href="https://httpd.apache.org/">Apache 2</a>, un programme libre très fonctionnel.
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>
|
|
|
- <img src="https://img.icons8.com/color/48/000000/dns.png" alt="V">
|
|
|
- OVH : mon nom de domaine
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- Alors, récapitulons.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- J'ai un code source réalisé (entre autres) avec Bootstrap.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- J'ai un serveur capable de répondre aux clients pour distribuer les pages web.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Mais l'histoire n'est pas finie. Je pense que vous le savez, Internet est un réseau mondial. Il est donc très
|
|
|
- vaste. Il y aurait plus de 200 millions de serveurs comme celui que je viens de vous présenter qui y sont
|
|
|
- connectés. (Selon
|
|
|
- <a href="https://fr.wikipedia.org/wiki/Internet_dans_le_monde#Nombre_de_serveurs">Wikipedia</a>).
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Mais alors, comment votre navigateur fait-il pour retrouver mon site dans cette immense toile ?
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Alors je ne vais pas vous faire un cours sur le protocole <em>TCP/IP</em>, là n'est pas le propos. Dites vous
|
|
|
- simplement qu'avec une adresse IP (comme <code>109.9.177.75</code> par exemple) votre navigateur web est capable
|
|
|
- de retrouver mon serveur. Voyez ça comme une adresse postale pour une maison.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Alors toutes les box, y compris celle qui est chez vous (si vous en avez une), possèdent une adresse IP. Mais
|
|
|
- imaginez, taper <code>http://109.9.177.75/cv.html</code> à la place de
|
|
|
- <code>http://jovian-hersemeule.eu/cv.html</code> dans votre barre d'adresse serait beaucoup moins attrayant.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- J'ai donc, pour votre confort, acheté le nom de domaine <code>jovian-hersemeule.eu</code> (pour quelques euros)
|
|
|
- sur
|
|
|
- <a href="https://www.ovh.co.uk/domains/">le site OVH</a>.
|
|
|
- En plus de raisons esthétiques, un nom de domaine est utilisé pour des raisons pratiques. En effet, l'adresse IP
|
|
|
- de mon serveur peut être ammenée à changer (si la box est redémarrée, ou si je déménage par exemple). Je peux
|
|
|
- configurer à ma guise l'adresse IP cible de mon nom de domaine. Ce genre de détails techniques est donc rendu
|
|
|
- transparent pour l'utilisateur. Pas besoin de connaître par coeur toutes les adresses IP de vos sites préférés
|
|
|
- ...
|
|
|
- </p>
|
|
|
+ <h3>
|
|
|
+ <img src="https://img.icons8.com/color/48/000000/dns.png" alt="dns flat icon">
|
|
|
+ OVH : mon nom de domaine
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ Alors, récapitulons.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ J'ai un code source réalisé (entre autres) avec Bootstrap.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ J'ai un serveur capable de répondre aux clients pour distribuer les pages web.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Mais l'histoire n'est pas finie. Je pense que vous le savez, Internet est un réseau mondial. Il est donc très
|
|
|
+ vaste. Il y aurait plus de 200 millions de serveurs comme celui que je viens de vous présenter qui y sont
|
|
|
+ connectés. (Selon
|
|
|
+ <a href="https://fr.wikipedia.org/wiki/Internet_dans_le_monde#Nombre_de_serveurs">Wikipedia</a>).
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Mais alors, comment votre navigateur fait-il pour retrouver mon site dans cette immense toile ?
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Alors je ne vais pas vous faire un cours sur le protocole <em>TCP/IP</em>, là n'est pas le propos. Dites vous
|
|
|
+ simplement qu'avec une adresse IP (comme <code>109.9.177.75</code> par exemple) votre navigateur web est capable
|
|
|
+ de retrouver mon serveur. Voyez ça comme une adresse postale pour une maison.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Alors toutes les box, y compris celle qui est chez vous (si vous en avez une), possèdent une adresse IP. Mais
|
|
|
+ imaginez, taper <code>http://109.9.177.75/cv.html</code> à la place de
|
|
|
+ <code>http://jovian-hersemeule.eu/cv.html</code> dans votre barre d'adresse serait beaucoup moins attrayant.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ J'ai donc, pour votre confort, acheté le nom de domaine <code>jovian-hersemeule.eu</code> (pour quelques euros)
|
|
|
+ sur
|
|
|
+ <a href="https://www.ovh.co.uk/domains/">le site OVH</a>.
|
|
|
+ En plus de raisons esthétiques, un nom de domaine est utilisé pour des raisons pratiques. En effet, l'adresse IP
|
|
|
+ de mon serveur peut être ammenée à changer (si la box est redémarrée, ou si je déménage par exemple). Je peux
|
|
|
+ configurer à ma guise l'adresse IP cible de mon nom de domaine. Ce genre de détails techniques est donc rendu
|
|
|
+ transparent pour l'utilisateur. Pas besoin de connaître par coeur toutes les adresses IP de vos sites préférés
|
|
|
+ ...
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>
|
|
|
- <img src="https://img.icons8.com/officel/48/000000/icons8-new-logo.png" alt="V">
|
|
|
- ICONS8 : des icônes colorées
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- Vous avez sans doute déjà remarqué que j'utilise de nombreuses icônes sur mon site. Les plus observateurs auront
|
|
|
- de plus remarqué une liste de liens en bas de certaines pages (comme celle-ci), et les plus techniques et
|
|
|
- curieux d'entres vous auront peut-être remarqué que ces icônes ne sont pas hébergées sur mon serveur.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- En fait j'utilise un site web appelé
|
|
|
- <a href="https://icons8.com/">Icons8</a>
|
|
|
- qui regorge d'icônes en tous genres. C'est très pratique.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- J'utilise pour l'instant ce service gratuitement. Cela limite son utilisation à de petites résolutions et ne
|
|
|
- permet pas d'avoir des images vectorielles. Peut-être aurai-je recours à la solution premium plus tard, afin
|
|
|
- d'améliorer le contenu proposé sur ce site et pour soutenir les développeurs d'Icons8.
|
|
|
- </p>
|
|
|
+ <h3>
|
|
|
+ <img src="https://img.icons8.com/officel/48/000000/icons8-new-logo.png" alt="Icons8 logo flat icon">
|
|
|
+ ICONS8 : des icônes colorées
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ Vous avez sans doute déjà remarqué que j'utilise de nombreuses icônes sur mon site. Les plus observateurs auront
|
|
|
+ de plus remarqué une liste de liens en bas de certaines pages (comme celle-ci), et les plus techniques et
|
|
|
+ curieux d'entres vous auront peut-être remarqué que ces icônes ne sont pas hébergées sur mon serveur.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ En fait j'utilise un site web appelé
|
|
|
+ <a href="https://icons8.com/">Icons8</a>
|
|
|
+ qui regorge d'icônes en tous genres. C'est très pratique.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ J'utilise pour l'instant ce service gratuitement. Cela limite son utilisation à de petites résolutions et ne
|
|
|
+ permet pas d'avoir des images vectorielles. Peut-être aurai-je recours à la solution premium plus tard, afin
|
|
|
+ d'améliorer le contenu proposé sur ce site et pour soutenir les développeurs d'Icons8.
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>
|
|
|
- Conclusion
|
|
|
- </h3>
|
|
|
- <p>
|
|
|
- Voilà, la petite description de ce site Internet touche à sa fin. J'espère que cela a éclairci ce qui se cache
|
|
|
- derrière les lignes que vous êtes en train de lire. Peut-être cela vous a même aidé dans votre compréhension du
|
|
|
- web ...
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Si vous aussi, vous êtes tentés par le développement de votre site, et que vous vous y connaissez très peu dans
|
|
|
- le domaine, je vous mets en référence ce tutoriel OpenClassrooms : <a
|
|
|
- href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">Apprenez
|
|
|
- à créer votre site web avec HTML5 et CSS3</a>. Je l'ai moi-même consulté pour réapprendre les bases.
|
|
|
- <a href="https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap">Un cours sur Bootstrap</a> y
|
|
|
- est aussi disponible.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Merci d'avoir lu cet article jusqu'au bout, et n'hésitez pas à jeter un oeil sur les autres projets ou autres
|
|
|
- pages du site.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Bonne visite !
|
|
|
- </p>
|
|
|
+ <h3>
|
|
|
+ Conclusion
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ Voilà, la petite description de ce site Internet touche à sa fin. J'espère que cela a éclairci ce qui se cache
|
|
|
+ derrière les lignes que vous êtes en train de lire. Peut-être cela vous a même aidé dans votre compréhension du
|
|
|
+ web ...
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Si vous aussi, vous êtes tentés par le développement de votre site, et que vous vous y connaissez très peu dans
|
|
|
+ le domaine, je vous mets en référence ce tutoriel OpenClassrooms : <a
|
|
|
+ href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">Apprenez
|
|
|
+ à créer votre site web avec HTML5 et CSS3</a>. Je l'ai moi-même consulté pour réapprendre les bases.
|
|
|
+ <a href="https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap">Un cours sur Bootstrap</a> y
|
|
|
+ est aussi disponible.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Merci d'avoir lu cet article jusqu'au bout, et n'hésitez pas à jeter un oeil sur les autres projets ou autres
|
|
|
+ pages du site.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Bonne visite !
|
|
|
+ </p>
|
|
|
|
|
|
- <!-- Pagination -->
|
|
|
- <ul class="pagination pagination-lg justify-content-center">
|
|
|
- <li class="page-item">
|
|
|
- <a class="page-link arrow" title="Page précédente" href="../projets.php">«</a>
|
|
|
- </li>
|
|
|
- <li class="page-item active">
|
|
|
- <div class="page-link" title="Site web de Jovian">1</div>
|
|
|
- </li>
|
|
|
- <li class="page-item">
|
|
|
- <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
|
|
|
- </li>
|
|
|
- <li class="page-item">
|
|
|
- <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
|
|
|
- </li>
|
|
|
- <li class="page-item">
|
|
|
- <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
|
|
|
- </li>
|
|
|
- <li class="page-item">
|
|
|
- <a class="page-link arrow" title="Page suivante" href="pro_ascii_space.php">»</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
-</main>
|
|
|
+ <!-- Pagination -->
|
|
|
+ <ul class="pagination pagination-lg justify-content-center">
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link arrow" title="Page précédente" href="../projets.php">«</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item active">
|
|
|
+ <div class="page-link" title="Site web de Jovian">1</div>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" title="ASCII Space destroyer" href="pro_ascii_space.php">2</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link arrow" title="Page suivante" href="pro_ascii_space.php">»</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </main>
|
|
|
|
|
|
-<!-- Footer -->
|
|
|
-<footer class="footer bg-dark mt-5">
|
|
|
- <div class="container">
|
|
|
- <span class="text-muted">Images sources : ICON8</span>
|
|
|
- <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/104084/city">City icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/19293/code">Code icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/20909/html-5">Html 5 icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/31748/term">Term icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/84710/bootstrap">Bootstrap icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/13443/raspberry-pi">Raspberry Pi icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/63267/dns">DNS icon by Icons8</a>
|
|
|
- <a href="https://icons8.com/icon/20825/icons8">Icons8 icon by Icons8</a>
|
|
|
- </div>
|
|
|
-</footer>
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="footer bg-dark mt-5">
|
|
|
+ <div class="container">
|
|
|
+ <span class="text-muted">Images sources : ICON8</span>
|
|
|
+ <a href="https://icons8.com/icon/104082/cv">CV icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/104084/city">City icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/19293/code">Code icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/20909/html-5">Html 5 icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/31748/term">Term icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/84710/bootstrap">Bootstrap icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/13443/raspberry-pi">Raspberry Pi icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/63267/dns">DNS icon by Icons8</a>
|
|
|
+ <a href="https://icons8.com/icon/20825/icons8">Icons8 icon by Icons8</a>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
|
|
|
-<!-- Scripts -->
|
|
|
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|
|
- integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|
|
- crossorigin="anonymous"></script>
|
|
|
-<script src="../js/bootstrap.js"></script>
|
|
|
+ <!-- Scripts -->
|
|
|
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|
|
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="../js/bootstrap.js"></script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
DricomDragon