From 0a25a09b99361e3666a14e20169393b4a344da7c Mon Sep 17 00:00:00 2001 From: DocSystem <42613513+DocSystem@users.noreply.github.com> Date: Tue, 23 Apr 2024 23:05:39 +0200 Subject: [PATCH] first commit --- .github/workflows/docker-image.yml | 48 +++++++++++ .gitignore | 1 + Dockerfile | 5 ++ css/apropos.css | 23 +++++ css/master.css | 80 +++++++++++++++++ data/data-GreenITSiteWeb.txt | 45 ++++++++++ data/data-accueil.txt | 32 +++++++ html/CGU.html | 28 ++++++ html/GreenITSiteWeb.html | 134 +++++++++++++++++++++++++++++ html/QuizGreenIT.html | 69 +++++++++++++++ html/RGPD.html | 63 ++++++++++++++ html/accueil.html | 67 +++++++++++++++ html/apropos.html | 40 +++++++++ img/GreenIT.jpg | Bin 0 -> 165685 bytes js/force-cgu.js | 54 ++++++++++++ 15 files changed, 689 insertions(+) create mode 100644 .github/workflows/docker-image.yml create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 css/apropos.css create mode 100644 css/master.css create mode 100644 data/data-GreenITSiteWeb.txt create mode 100644 data/data-accueil.txt create mode 100644 html/CGU.html create mode 100644 html/GreenITSiteWeb.html create mode 100644 html/QuizGreenIT.html create mode 100644 html/RGPD.html create mode 100644 html/accueil.html create mode 100644 html/apropos.html create mode 100644 img/GreenIT.jpg create mode 100644 js/force-cgu.js diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml new file mode 100644 index 0000000..1392ee3 --- /dev/null +++ b/.github/workflows/docker-image.yml @@ -0,0 +1,48 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# GitHub recommends pinning actions to a commit SHA. +# To get a newer version, you will need to update the SHA. +# You can also reference a tag or branch, but the action may change without warning. + +name: Create and publish a Docker image + +on: [push, release] + +env: + REGISTRY: ghcr.io + IMAGE_NAME: ${{ github.repository }} + +jobs: + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Log in to the Container registry + uses: docker/login-action@v3 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v5 + with: + images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + + - name: Build and push Docker image + uses: docker/build-push-action@v5 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9f11b75 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..e5d9958 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,5 @@ +FROM nginx:latest +COPY css /usr/share/nginx/html/css +COPY html /usr/share/nginx/html/html +COPY img /usr/share/nginx/html/img +COPY js /usr/share/nginx/html/js diff --git a/css/apropos.css b/css/apropos.css new file mode 100644 index 0000000..595d417 --- /dev/null +++ b/css/apropos.css @@ -0,0 +1,23 @@ +@import url(master.css); + +.peoples { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.people-card { + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + width: 300px; + text-align: center; +} + +.people-card img { + width: 100px; + height: 100px; + border-radius: 50%; +} diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..a138c2f --- /dev/null +++ b/css/master.css @@ -0,0 +1,80 @@ +body { + font-family: sans-serif; + margin: 0; + padding-bottom: 110px; +} + +header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100vw; + background: #eee; + position: sticky; + top: 0; +} + +header img { + height: 70px; + width: auto; +} + +header nav { + display: flex; + align-items: flex-end; + margin-right: 10px; +} + +header nav a { + padding: 10px; + text-decoration: none; + color: #333; +} +header nav a:hover, +header nav a.active-link { + background: #ddd; +} + +section { + padding: 10px; +} + +footer { + background-color: #eee; + padding: 10px; + text-align: center; + display: flex; + flex-direction: column; + position: fixed; + bottom: 0; + left: 0; + width: 100%; +} + +footer p { + margin: 4px; +} + +.cgu-popup { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #fff; + z-index: 1000; +} + +.cgu-popup .cgu-popup-content { + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + max-width: 600px; + width: 100%; + margin: 20px; +} diff --git a/data/data-GreenITSiteWeb.txt b/data/data-GreenITSiteWeb.txt new file mode 100644 index 0000000..2926771 --- /dev/null +++ b/data/data-GreenITSiteWeb.txt @@ -0,0 +1,45 @@ +Pratiques de codage efficaces pour réduire la consommation d'énergie +« L'optimisation des performances web est une démarche globale qui englobe de multiples techniques visant à accélérer la vitesse de chargement, réduire la consommation d'énergie et minimiser l'empreinte carbone d'un site web. » + +Alléger votre site web + Compresser des éléments de contenus (images, icônes et vidéos) avec des outils tel que (suite Adobe , Gimp, ou Inkscape, la suite Affinity); + Réparation des liens brisés + Réduction du nombre de requêtes HTTP. +Faciliter le chargement de contenus de votre site + C’est le principe même de l’utilisation des caches. Car pourquoi recharger ce que l’on a déjà chargé ailleurs. + Les caches limitent les chargements multiples, et allègent donc les requêtes/la consommation énergétique de votre site. +Exploiter le Content Delivery Network (CDN) + Permet une meilleure vitesse de chargement des pages de votre site + Aide également à anticiper les plantages du site en cas d'affluence de visiteurs. +Optimisation du code + Réduire la taille du code, les fichiers JavaScript, CSS et autres... + Nettoyer les plugins en excès. +Optimisation du Serveur + Choisir un hébergement vert + Optimiser les paramètres du serveur + mettre en œuvre des technologies de serveur modernes comme HTTP/2 ou HTTP/3 qui permettent des transferts de données plus efficaces. + +Pratiques de codage efficaces + +Optimisation de l'algorithme : + Pratique : choisir des algorithmes à complexité réduite pour minimiser les opérations inutiles. + Exemple : au lieu d'utiliser une recherche linéaire pour trouver un élément dans une liste non triée, triez la liste une fois et utilisez ensuite une recherche binaire. +Minimisation des opérations CPU : + Pratique : évitez les boucles inutiles qui consomment des cycles CPU. + Exemple : au lieu d'utiliser une boucle pour attendre un événement, il est préférable d’utiliser une fonction d'attente asynchrone. +Optimisation de la mémoire : + Pratique : réduisez l'utilisation de la mémoire en évitant les allocations dynamiques excessives. + Exemple : utilisez des tableaux statiques au lieu de listes dynamiques pour stocker des données de taille fixe. +Gestion de l'énergie du processeur : + Pratique : utilisez des mécanismes de mise en veille pour réduire la consommation d'énergie du CPU lorsqu'il est inactif. + Exemple : dans une application mobile, configurez des temporisateurs pour mettre en veille le CPU lorsqu'il n'est pas utilisé. +Optimisation des E/S : + Pratique : réduire les E/S disque en mettant en cache les données fréquemment utilisées en mémoire. + Exemple : cachez les requêtes de bases de données fréquemment utilisées pour éviter des accès disque coûteux. +Utilisation de la mise en cache : + Pratique : minimisez les accès à la mémoire principale en tirant parti des caches du processeur. + Exemple : utilisez des algorithmes de recherche qui exploitent le principe de la localité pour maximiser l'utilisation du cache. + +Minimisation des requêtes réseau : + Pratique : réduisez le nombre de requêtes réseau en regroupant les opérations et en minimisant les transferts de données inutiles. + Exemple : utilisez des requêtes batch pour regrouper plusieurs opérations de lecture/écriture de données en une seule requête. diff --git a/data/data-accueil.txt b/data/data-accueil.txt new file mode 100644 index 0000000..4a743be --- /dev/null +++ b/data/data-accueil.txt @@ -0,0 +1,32 @@ +C'est quoi la Green IT ? +La sobriété numérique ou informatique verte ou informatique durable ou encore eco-IT est un concept relativement nouveau et une nouvelle façon de penser. + +Objectif principal de la Green IT : + +Minimiser la consommation d'énergie +Réduire les émissions de gaz à effet de serre + + +Que représente l'impact du numérique sur l'environnement ? + +Empreinte carbone ou le contenu carbone d'une activité humaine est une mesure des émissions de gaz à effet de serre d'origine anthropique, +c'est-à-dire qui peuvent lui être imputées. Elle dépend des facteurs d'émission des intrants liés à cette activité et en particulier des +facteurs d'émission associés aux sources d'énergies utilisées. Les facteurs d'émission associés aux sources d'énergie correspondent pour l'essentiel à des émissions de CO2. + +Impact énergétique sur le développement web +Pourquoi les sites web ont-ils une empreinte carbone ? + +Chaque site web a sa propre empreinte carbone, c'est-àdire la quantité d'émissions de gaz à effet de serre générée par le processus de création et de maintenance de ce site web. +L'empreinte carbone de votre site web correspond à la quantité d'émissions de CO2 qu'il créait au cours de sa durée de vie. +Plus l'empreinte carbone de votre site Web est importante, plus la quantité de gaz à effet de serre libérée dans l'atmosphère est élevée. + +Que représente l'empreinte carbone d'une page web ? + +Naviguer en ligne et visiter des sites internet demande de l'énergie électrique. Cette demande a un impact écologique important. +En moyenne, une page web consultée entraîne la production de 1,76 grammes de CO2, et 7 grammes pour une requête sur Google. +La conception et le nombre de visite du site web influencent en grande partie le poids de ses émissions carbone. + +©️2024 Maha Naceur. +Tous droits réservés. +En savoir plus ? + diff --git a/html/CGU.html b/html/CGU.html new file mode 100644 index 0000000..44864a2 --- /dev/null +++ b/html/CGU.html @@ -0,0 +1,28 @@ + + +
+ +« L'optimisation des performances web est une démarche globale qui englobe de multiples techniques visant à accélérer la vitesse de chargement, réduire la consommation d'énergie et minimiser l'empreinte carbone d'un site web. »
++ | Pratique | +Exemple | +
---|---|---|
Optimisation de l'algorithme | +Choisir des algorithmes à complexité réduite pour minimiser les opérations inutiles. | +Au lieu d'utiliser une recherche linéaire pour trouver un élément dans une liste non triée, triez la liste une fois et utilisez ensuite une recherche binaire. | +
Minimisation des opérations CPU | +Évitez les boucles inutiles qui consomment des cycles CPU. | +Au lieu d'utiliser une boucle pour attendre un événement, il est préférable d’utiliser une fonction d'attente asynchrone. | +
Optimisation de la mémoire | +Réduisez l'utilisation de la mémoire en évitant les allocations dynamiques excessives. | +Utilisez des tableaux statiques au lieu de listes dynamiques pour stocker des données de taille fixe. | +
Gestion de l'énergie du processeur | +Utilisez des mécanismes de mise en veille pour réduire la consommation d'énergie du CPU lorsqu'il est inactif. | +Dans une application mobile, configurez des temporisateurs pour mettre en veille le CPU lorsqu'il n'est pas utilisé. | +
Optimisation des E/S | +Réduire les E/S disque en mettant en cache les données fréquemment utilisées en mémoire. | +Cachez les requêtes de bases de données fréquemment utilisées pour éviter des accès disque coûteux | +
Utilisation de la mise en cache | +Minimisez les accès à la mémoire principale en tirant parti des caches du processeur. | +Utilisez des algorithmes de recherche qui exploitent le principe de la localité pour maximiser l'utilisation du cache. | +
Minimisation des requêtes réseau | +Réduisez le nombre de requêtes réseau en regroupant les opérations et en minimisant les transferts de données inutiles. | +Utilisez des requêtes batch pour regrouper plusieurs opérations de lecture/écriture de données en une seule requête | +
+ Dans le cadre de son activité, le site www.greenit.fr est amenée à collecter et à traiter des informations dont certaines sont qualifiées de "données personnelles". GreenIT attache une grande importance au respect de la vie privée, et n’utilise que des donnes de manière responsable et confidentielle et dans une finalité précise. +
+
+ Ces données sont celles que vous nous transmettez directement par contact direct par email.
+
+ Lors de vos visites, une fois votre consentement donné, nous pouvons recueillir des informations de type « web analytics » relatives à votre navigation, la durée de votre consultation, votre adresse IP, votre type et version de navigateur.
+ La technologie utilisée est le cookie.
+
Les données que vous nous transmettez directement sont utilisées dans le but de vous re-contacter et/ou dans le cadre de la demande que vous nous faites.
+ Ces données sont utilisées par GreenIT, responsable du traitement des données, et ne seront jamais cédées à un tiers ni utilisées à d’autres fins que celles détaillées ci-dessus.
Les données personnelles ne sont collectées qu’après consentement obligatoire de l’utilisateur. Ce consentement est valablement recueilli (boutons et cases à cocher), libre, clair et sans équivoque.
+ +Les données seront sauvegardées durant une durée maximale de 3 ans.
+ +Voici la liste des cookies utilisés et leur objectif :
+Vous avez le droit de consultation, demande de modification ou d’effacement sur l’ensemble de vos données personnelles. Vous pouvez également retirer votre consentement au traitement de vos données.
+ +Gaël Floquet - gael.floquet@efrei.net 06 95 70 51 27
++ La sobriété numérique ou informatique verte ou informatique durable ou encore + eco-IT est un concept relativement nouveau et une nouvelle façon de penser. +
++ Empreinte carbone ou le contenu carbone d'une activité humaine est une mesure + des émissions de gaz à effet de serre d'origine anthropique, c'est-à-dire qui peuvent + lui être imputées. Elle dépend des facteurs d'émission des intrants liés à cette activité + et en particulier des facteurs d'émission associés aux sources d'énergie utilisées. Les + facteurs d'émission associés aux sources d'énergie correspondent pour l'essentiel à + des émissions de CO2. +
+Etudiant en informatique à Efrei Paris
+Etudiant en informatique à Efrei Paris
+(irE%1rF
z{Ys4}sz_0Jm@W1Yq$xwR)5J8r!c5)qMqlK+`f1AUN;RUSvJ@&wXT+S6CGXM64s6H{
z$$~35CosIrg|}R`d|1Qdd7I= HrSwpV#qbOC)zmhsPq!KotwvlAq!Y>o4MLe??JtDpJ+ukk^RB^I
zkb>HGJ}=__aMVhTc)&+4jBl@mme+H-Fx*rO-=yS#8sQxtc9i{HRW|hsJ*ycq2<;*2
zYYQ0Rn{4Jt8x#&PJue;-gtmlS?yKg;8nl#oSL7kPKU8x_1pkCKx(E+|>5M}Hyt29z
z;tRgmZ022-Ij9k9MiWm%UkS2#_qn`O_$j0)ppTu5<^3|y3j67o!be1E1bg;DjDy5w
zIFH%ja>7Nztrt1?D>mMCTdqh?=gzlya!3CzkMJHOk5!GdZ;mJ% !5pvBhVcW
zr9zGPYo8+({%IY0Jd5%u0tv6%wMUKMNHi0FPDCw_2Wm$#6VQWCXd4zzLY+syFS^Ks
z!@>yRi{+F*oeUd1(8zpocoUk(^HQD))u6PuD>lX$uo7T9l@{FR XrJnX^%<|cCiLE6*! (O}hH>T*x&_wXoal%JFXnDPu>LWWA8HJx|kLaLl
z3iL-h^oQd|>U^#-`UJ`V9LI)2^SmBq=p1oA;e9Xqh$myV!oI=HdI<_&H7HAB55a}Q
z0qWz@9KizV&uv6c=DloHqr;BSE@nZWaT>nC7wksAtFjN3jsU~(;phyK?F>R(@d5F>
zbYmfja-__LA_|Ie%mpTk?f==*vap7_abkPL{q5b^@yaKh;82AsUJLb`0IuFQ3alzH
z%62ch-@c#!Enp~~0D(Zq(9Op7xybX=2?U7mFb+0cCi=1CFxkzu?Mnt!EU9gam|;J~
zwY0pc>%7WW#CbMO5HVNOAE4eKv4`AK%1XtpX(%;wLr$3=K`o`f79ceTY>lJbL+8k7
z7ttkngQ;SRhtf#xsvg;n+SeyT=?=MymtrmL(hQvKJkA{YcW~5YdD$|CkgHKH=QvdD
zivm)2oyvRLZSCHMQ%R@|>O*|>e^i$0b5g<}F5u4m6-X)?!Ji`;-0nXWzs40VmGLDG
zofp3paF^$5bozHyd~*0+WQ5kmaDzGFt$PYoT^d-yo6QG%!luK7?! OzHVTBInM_*4-{Ri2-BO?
zc8UYxRAp{=L9yydz8P}>*fE5*Al#Y`+dWYg%9+{v-aYKZ1-xuJ3?k|TDfmbI2fh9b
z>d5w9PmK&cE2`LCa*^s*A7i=}eVMqR-ZD}%^-{f3>O+nG=+&4@=yxF1ES+hs*{mag
zn-DzwJ`X*h&0CxV>$z&z
D-nja#G?V>={}t(2Tf~-(q1gj
UV-F6Vk3T!OxciB)zDLs<>5;Fm9}@ZW~Q&wLL-djY1fA$!;Ib
zl#sVji6;{jV2nal^;}MAiiSg%^v{4sD{P}4L)j%x*(-G?`|bjrGYFBy8XjB^ENaL8
zfXEFeYxkfAw9bL`#jofeI3?xiN8nl6DSMTg=-M8ME?$H7Vbc{!
38Y~l6Hs~H
zRFb>AOhUGoZyI70H;mPr90&y|Jbaw4;wpO$e!a3cn<(a=EH0kEFmD_y9~@QVhWWP(
zUL;UyohCHrbAl$pVA-vVEL&_!s2NGtRkdz3N)#A6!nSx{l?u-5q?M0-jW@;SKFrZ7
zUVC$DQ-r@n6;@DaG29e@(jgUeO3Ke6`<8?
z6J>|QCqft%Xrs7;cmp;e`!EkP?qDuDKRt`m#*;}(C8>~6`h|megY+2G$LcYB=ks|*
zS0ODZ;8iSt?vh$eAHE+Y_NY0h`bEOw_2wfJ|H^Pc%RI}W3%&de@(D|4ycp)XkF!)K
z;|93DE=-M;ekv9(I+UqnxLX@Ws((Jh8@@=*>vgTd1sbZ}1j1hRKn&I9@b`pa7t|nO
zLJ3AUT=3G~%lO{rZ~$YgiX6!%6EOkYj$P_m^&!~X=ZKgrYE(uTF;|wG)&+ygum~&Dxc_NuWUp*vu@EZ9JaasXptTN
z{*Wv!>sPs_;9)l66Sdd1H!^+C@cknq(FkOO{$3kma(3D`t2>>d>wEtgW|*lb2^Mw4GM!SV;TUj6hPF6!2Myt#cl5Qg(
sZ{f2TC`peTuV`@BV?a*E%uL6OKwXr+`u?TA