2017/2019 Rapport portfolio - Étudiant : GIROT Loïc Tuteur : REMY Alain - PortFolio Loïc GIROT
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
2017/2019
Rapport portfolio
Étudiant : GIROT Loïc
Tuteur : REMY Alain
Gestionnaire en Maintenance et
Support Informatique (GMSI AP L12)
Date de rendu 22 mai 2019
Loïc GIROT
GMSI AP L12
Contexte vu par le CESI
« L’objectif de nos formations est de conduire vers l’emploi nos alternants (75% à 6 mois
suivant le Suivi Mensuel Personnalisé). Pour qu’ils puissent réussir leurs entretiens
d’embauches, leurs poursuites d’études ou plus simplement transformer leur CDD en CDI, il
faut les accompagner aussi bien sur la méthode que sur la forme. Via cesi est un outil puissant
qui va nous aider mais il faut formaliser les compétences, les parcours pour qu’il soit efficace.
Dans le même temps, les outils de demain d’un technicien informatique seront des outils « en
ligne », ils doivent donc développer de bonne connaissance sur les modifications de site web,
voir même savoir en créer. »
Cahier des charges
Chaque alternant doit choisir une offre d’emploi (presse, site web, poursuite en CP…) au
début du projet. Il devra réaliser un CV, une lettre de motivation et surtout savoir formuler
les compétences qu’il a acquises pour y répondre.
Il devra ensuite créer un site web qui mettra en avant ses compétences, son parcours, ses
projets, ses activités…bref tout ce qui lui permettra de décrocher un emploi !
Dans ce document, je vais développer sur cette deuxième partie qui est la création d’un site
web en ligne.
Mon site est disponible à l’adresse suivante : https://www.loicgirot.eu
P a g e 1 | 18
Loïc GIROT
GMSI AP L12
Sommaire
I. Un site web, c’est quoi ? ................................................................................................................. 3
1. HTML5 ......................................................................................................................................... 3
2. CSS3 ............................................................................................................................................. 6
3. PHP .............................................................................................................................................. 7
4. Javascript ..................................................................................................................................... 8
II. Construire mon portfolio................................................................................................................. 9
1. Objectif du projet ........................................................................................................................ 9
2. Outils ........................................................................................................................................... 9
a. Éditeur de texte ....................................................................................................................... 9
b. Navigateur web ....................................................................................................................... 9
c. Serveur web............................................................................................................................. 9
d. Maquette du site ................................................................................................................... 10
3. Charte graphique ....................................................................................................................... 10
a. Logo ....................................................................................................................................... 10
b. Police d’écriture .................................................................................................................... 11
c. Couleurs................................................................................................................................. 11
d. Icones .................................................................................................................................... 11
e. Images, vidéos ....................................................................................................................... 12
III. Mise en ligne sur internet ......................................................................................................... 13
1. Hébergement ............................................................................................................................ 13
2. Nom de domaine ....................................................................................................................... 13
3. Sécurité...................................................................................................................................... 14
a. Chiffrement du protocole...................................................................................................... 14
b. ReCAPTCHA v3....................................................................................................................... 15
4. Obligations légales .................................................................................................................... 15
a. Utilisations des cookies ......................................................................................................... 15
b. Mentions légales ................................................................................................................... 16
IV. Conclusion ................................................................................................................................. 18
P a g e 2 | 18Loïc GIROT
GMSI AP L12
I. Un site web, c’est quoi ?
Un site web permet de partager à travers des pages web connectées entre elles par des
hyperliens, des informations, du texte, du son, des vidéos et bien plus encore. Il est hébergé
sur un serveur web accessible via le réseau internet. C’est l’ensemble de ces pages web qui
constitue le World Wide Web (www).
Il y a énormément de catégories de sites internet. On peut en créer de toutes sortes.
Pour une enseigne, pour un restaurant, pour une boutique en ligne, un blog, pour un journal,
une agence, une personnalité, une association, un portfolio etc...
Il existe différents types de création de sites :
• Le site le plus fréquent construit via des logiciels/Content Management System
permettant la création avec différents modules à disposition ;
• Les sites construits par des agences web ;
• Les sites construits à partir de 0, si on a les compétences nécessaires en codage.
Il nous est imposé d’utiliser ce troisième type, le construire à partir de zéro avec du langage de
développement.
Pour ce faire, je vais utiliser différents langages pour concevoir mon portfolio et ainsi, le mettre
en ligne sur internet.
1. HTML5
HTML (HyperText Markup Language) est un langage descriptif utilisé pour structurer le
contenu d'une page (ses textes, ses images, ses liens, etc.).
Un document HTML est un fichier texte qui contient des balises. Ces balises doivent être
utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises
indiquent au navigateur comment afficher le document, certaines balises permettent
d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de
la page.
Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web,
son navigateur analyse le document et l'interprète afin d'afficher la page web correctement.
Par exemple, si le document contient une balise , le navigateur chargera l'image associée
et affichera l'image à la place de la balise HTML.
Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et
la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise
ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre
le chevron initial et le nom de la balise. Ainsi, si est une balise ouvrante, sera la balise
fermante correspondante.
HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens
d'un élément, son interprétation ou son affichage. Les balises permettent de fournir des
métadonnées pour le document HTML, de mettre en avant certaines phrases, d'ajouter des
fichiers multimédias ou de gérer des formulaires en ligne.
La première ligne du fichier doit contenir « . Cela permet d’identifier que le
document est rédigé en HTML 5.
P a g e 3 | 18Loïc GIROT
GMSI AP L12
Voici quelques-unes des balises les plus fréquemment utilisées :
Cet élément définit la racine du document. Chaque document HTML ne contient qu'une
racine. Tous les autres éléments doivent être placés dans cet élément.
Cet élément définit la tête du document. Le navigateur n'affichera pas cet élément qui ne
contient que des métadonnées, dont le titre et des informations descriptives. Les navigateurs
pourront utiliser ces métadonnées pour améliorer l'ergonomie de la page (nous le verrons
par la suite).
Cet élément définit le titre d'un document. Le titre est le seul élément HTML obligatoire et il
est placé dans la tête. En effet, le titre est une des métadonnées utilisées par le navigateur (il
est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur
de recherche).
Les balises servent à placer des métadonnées dans une page HTML. Elles sont utilisées
par les navigateurs web et les moteurs de recherche principalement. C’est grâce à ces balises
que le référencement naturel d’un site s’effectue, si les bonnes balises sont utilisées
correctement.
Cet élément définit le corps du document. Il n'y a qu'un seul élément body dans un
document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est
placé dans cet élément.
, , , , ,
Ces balises permettent de définir des titres de différents niveaux : h1 pour les grands titres et
h6 pour les titres des sections très spécifiques.
La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement
(automatiquement) séparés par des sauts de ligne.
Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page
web, un e-mail, une image, une autre section du document, etc. Les balises contiennent le
texte qui sera utilisé pour le lien, l'attribut href de cet élément est utilisé pour définir l'URL
cible : du texte qui sera lu par l'utilisateur.
Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple
d'utilisation :
P a g e 4 | 18Loïc GIROT
GMSI AP L12
et
Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des
sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme
et le script.
, et
Ces balises sont utilisées pour créer des listes. permet de définir une liste non-ordonnée
et de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise qui
permettra de définir un élément de la liste.
Il en existe plein d’autres. Le site qui m’a particulièrement bien aidé dans la construction de
ma page html est celui de W3school « https://www.w3schools.com/ ». Voici une copie du
head de mon site :
P a g e 5 | 18Loïc GIROT
GMSI AP L12
2. CSS3
CSS (Cascading Style Sheets) est un langage déclaratif utilisé pour décrire la présentation de
pages web dans le navigateur. Le navigateur applique les déclarations de style CSS aux
éléments concernés pour les mettre en forme. Une déclaration de style contient des propriétés
et leurs valeurs et détermine l'apparence d'un ou plusieurs éléments de la page.
CSS est l'une des trois technologies qui constituent le noyau du web, avec HTML et JavaScript.
Ce langage est principalement utilisé pour appliquer un style aux éléments HTML, mais peut
aussi être utilisé avec d'autres langages de balisage tels que SVG ou encore XML.
Une règle CSS est un ensemble de propriétés associé à un sélecteur. Le principe de « cascade
» fait référence aux règles de préséance dans l'application des divers sélecteurs pointant le
même élément de la page. C'est une fonctionnalité particulièrement importante dans la
mesure où un site web complexe peut contenir des milliers de règles CSS.
Également, le site de W3school « https://www.w3schools.com/ » m’a aidé à comprendre et à
utiliser correctement le CSS3. Voici une partie du fichier .css de mon site :
P a g e 6 | 18Loïc GIROT
GMSI AP L12
3. PHP
PHP (Hypertext Preprocessor) est un langage de scripts généraliste et Open Source,
spécialement conçu pour le développement d'applications web. Il peut être intégré facilement
au HTML.
Au lieu d'utiliser des tonnes de commandes afin d'afficher du HTML (comme en C ou en Perl),
les pages PHP contiennent des fragments HTML dont du code qui fait "quelque chose" (par
exemple, il va afficher "Bonjour, je suis un script PHP !"). Le code PHP est inclus entre une
balise de début qui permettent au serveur web de passer en
mode PHP.
Ce qui distingue PHP des langages de script comme le Javascript, est que le code est exécuté
sur le serveur, générant ainsi le HTML, qui sera ensuite envoyé au client. Le client ne reçoit que
le résultat du script, sans aucun moyen d'avoir accès au code qui a produit ce résultat. Vous
pouvez configurer votre serveur web afin qu'il analyse tous vos fichiers HTML comme des
fichiers PHP. Ainsi, il n'y a aucun moyen de distinguer les pages qui sont produites
dynamiquement des pages statiques.
Je vais proposer une page contact sur mon site qui permettra à n’importe quelle personne de
pouvoir me contacter. Une bonne partie de cette étape peut être réalisé avec HTML5, mais,
php va me permettre de contrôler les éléments renseignés par les visiteurs pour éviter les
répétitions d’envoi de mail et autres tentatives de piratage. Voici mon fichier .php pour l’envoi
de mail :
Les sites « https://www.w3schools.com/ » ainsi que « https://php.net/ » m’ont permis de
mettre en place ce système d’envoi de mail avec un contrôle supplémentaire avec php.
P a g e 7 | 18Loïc GIROT
GMSI AP L12
4. Javascript
JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet,
principalement connu comme le langage de script des pages web. Mais il est aussi utilisé dans
de nombreux environnements extérieurs aux navigateurs web tels que Node.js, Apache
CouchDB voire Adobe Acrobat. Le code JavaScript est interprété ou compilé à la volée (JIT).
C'est un langage à objets utilisant le concept de prototype, disposant d'un typage faible et
dynamique qui permet de programmer suivant plusieurs paradigmes de programmation :
fonctionnelle, impérative et orientée objet.
JavaScript ne doit pas être confondu avec le langage de programmation Java. Java est une
marque déposée par Oracle dans de nombreux pays.
Pour apporter un peu de dynamisme à mon site, j’ai ajouté des fonctions permettant de
descendre automatiquement la page quand on clique sur un lien interne à la page ou sur ma
barre de menu.
P a g e 8 | 18Loïc GIROT
GMSI AP L12
II. Construire mon portfolio
Je vais détailler les étapes de la construction de mon site en commençant par la planification
puis en passant à la réalisation.
1. Objectif du projet
Pour être efficace dans la conception de mon portfolio disponible en ligne sur internet, j’utilise
la méthode du QQOQCCP (Quoi, Qui, Où, Quand, Comment, Combien, Pourquoi) pour cadrer
mon axe de travail :
• Je dois réaliser un portfolio, en mettant en avant mes compétences et mes
expériences ;
• Il est à destination des potentiels recruteurs et autres personnes intéressés par moi ou
mon profil professionnel ;
• Il doit être consultable par tous, sur internet, avec n’importe quel périphérique
(ordinateur, téléphone, tablette) ;
• En l’hébergeant sur un serveur web continuellement connecté à internet ;
• Il doit être consultable en ligne pendant la soutenance orale ;
• Pour trouver facilement les informations importantes me concernant sur internet et
obtenir des propositions d’entretiens pour avoir du travail.
2. Outils
Pour concevoir et tester mon site en local sur mon poste, j’ai besoin de quelques logiciels pour
observer le rendu de mon site avant de le mettre en ligne sur internet.
a. Éditeur de texte
Pour éditer les différents fichiers nécessaires à mon site, il existe de nombreux éditeurs de
texte possédant plus ou moins des fonctionnalités intéressantes comme l’auto-complétions
des balise, etc…
J’ai choisi Notepad ++ pour éditer mes fichiers html, css, php et javascript. Il utilise une
colorisation syntaxique pour repérer facilement les balises des variables et bien d’autres
éléments. Libre d’utilisation en respectant son contrat de licence sur son site
« https://notepad-plus-plus.org/fr/ », il est le plus connu et le plus utilisé des éditeurs dans la
programmation. Il existe d’autres éditeurs de texte comme Brackets ou Sublime Text. Cela
dépend des goûts de chacun.
b. Navigateur web
Les fichiers .html, .css et .js s’exécutent partie client. Pour exécuter mon fichier « index.html »
qui contient ma page de démarrage, on utilise un navigateur web. Il en existe plusieurs sous
différents systèmes d’exploitation.
Dans mon cas, je suis sous Windows 10 et j’utilise le navigateur Firefox. Le plus important, c’est
que le site soit consultable sur la majorité des navigateurs y compris les versions antérieures.
c. Serveur web
Les fichiers .php sont interprétés par un serveur web. Pour vérifier le bon fonctionnement de
ce fichier, il me faut un serveur web. Il peut être basé sous Windows avec un serveur WAMP
(Windows, Apache, MYSQL, PHP) ou sur linux avec un serveur LAMP (Linux, Apache, MYSQL,
PHP).
P a g e 9 | 18Loïc GIROT
GMSI AP L12
Pour tester mes fichiers, j’ai utilisé mon outil de supervision VMware Workstation obtenu
temporairement grâce au CESI Alternance pour faire un serveur Windows sur une machine
virtuelle. Je possède une machine virtuelle contenant un Windows serveur 2019 R2 avec un
serveur WAMP fonctionnel, issue de mon précédent projet.
d. Maquette du site
Pour avoir une idée du résultat final sans passer par de la programmation, j’utilise un outil de
dessin permettant d’avoir un rendu dans une fenêtre proche d’un navigateur avec des liens
entre plusieurs pages.
J’utilise le logiciel Adobe XD CC de chez Adobe. C’est un outil pour la conception et le
prototypage de l'expérience utilisateur pour les applications Web et mobiles. Il est disponible
en version libre sur le site d’adobe « https://www.adobe.com/fr/products/xd.html ».
3. Charte graphique
Une des parties les plus importantes dans la conception d’un site est la charte graphique. Un
site web doit respecter certaines règles car il en va de l'impact qu'il peut générer envers les
visiteurs en termes d'expérience utilisateur et d'engagement. Un travail sur sa cohérence est
important et doit être placé au centre de la réflexion.
Concevoir et mettre au point une charte graphique web impactante se base sur trois
éléments :
• Servir les intérêts du site
• Servir les intérêts des utilisateurs en termes de confort de navigation, de prise
d'informations
• S'assurer d'une cohérence avec d’autres sources d’informations comme le CV.
a. Logo
Le logo du site doit être parfaitement intégré au site web. Il s'agit de l'élément central de
l'identité visuelle, aussi la charte web doit-elle définir avec précision ses proportions, sa place
exacte sur le site ainsi que ses dimensions. Quand on clique sur le logo, cela ramène le visiteur
en haut de la page.
Le logo que j’ai créé en ligne grâce au site « https://fr.freelogodesign.org/ » contient mes
initiales « LG » pour Loïc GIROT. Le doigt qui clique fait un rappel sur mon métier
d’informaticien et la couleur bleu est l’une des couleurs correspondant à mon tempérament
(Le choix des couleurs est vu par la suite).
P a g e 10 | 18Loïc GIROT
GMSI AP L12
b. Police d’écriture
La police d'écriture du site web joue également un rôle majeur dans la communication visuelle
car une typographie Georgia par exemple n'aura pas la même signification qu'une typographie
Calibri ou Times New Roman. Dans mon choix de polices, j’ai sélectionné trois typographies
pour assurer une compatibilité sur la majorité des navigateurs et supports :
• Verdana (Exemple d’écriture sur mon site en Verdana) ;
• Arial (Exemple d’écriture sur mon site en Arial) ;
• Times new roman (Exemple d’écriture sur mon site en Times new roman).
c. Couleurs
Le choix des couleurs permet de transmettre des messages différents aux visiteurs du site, en
fonction du cœur de métier de l'entreprise, en fonction de son positionnement : dynamique,
tonique, technologique. Afin de maximiser l'impact des couleurs, leur nombre doit être limité
à 4 voire 5 maximum. Trois ou quatre couleurs pour un site sont ainsi préférables afin de
faciliter la mémorisation. Les couleurs sont renseignées en hexadécimal dans les fichiers html,
css, php et javascript.
En étudiant mes qualités et défauts, et en les faisant correspondre à des couleurs, j’ai une
dominance de vert et de bleu. Je suis de nature calme et réfléchie.
Mon site possède une dominance de bleu avec des codes couleurs spécifiques :
• #fond_accueil : background-image: url("../img/fond_accueil.png");
• #fond_bleu_claire : background: #C7ECEE;
• #fond_bleu_tres_claire : background: #DFF9FB;
• #fond_footer : background: black;
Pour la couleur du texte, j’ai choisi le gris foncé pour faciliter la lecture du visiteur. Cela permet
de faire ressortir certains éléments en noir :
• #titre_portfolio : color:white;
• h1, h2, h3 : color:#535C68;
• #text_mon_nom : color: #006A9C;
• #form_text_presentation : color: #535C68;
• #form_text_contacts : color: #535C68;
d. Icones
Ces petits éléments visuels donnent du dynamisme et de la fonctionnalité à un site. Toutes les
icônes dynamiques présentes sur mon portfolio sont générées grâce à du HTML et du CSS. Leur
aspect visuel améliore la compréhension du site.
P a g e 11 | 18Loïc GIROT
GMSI AP L12
e. Images, vidéos
Les photos, images et autres illustrations insérées sur un site mettent en valeur un produit,
valorisent le portfolio. Les choisir avec soin aura donc un impact positif pour sa
compréhension. Car une image peut dire beaucoup ! Header, footer, page produit, page
contact, page présentation entreprise, équipe... une charte graphique de site web réussie
prévoit une utilisation pertinente des images en fonction de ce que l’on souhaite
communiquer. J’ai récupéré les images et la vidéo sur le site « https://pixabay.com/fr/ » en
libre de droit.
La vidéo est présente pour captiver le visiteur. Elle propage une sensation de calme et de
sérénité.
P a g e 12 | 18Loïc GIROT
GMSI AP L12
III. Mise en ligne sur internet
Je fais fonctionner mon site en local. Il est temps de le mettre en ligne. Je vais utiliser différents
procédés pour y parvenir.
1. Hébergement
Mon portfolio doit être disponible sur internet, les fichiers nécessaires au fonctionnement de
mon site doivent être stockés sur un serveur web continuellement disponible. J’ai fait le choix
d’héberger mon site sur 000webhost à l’adresse « https://fr.000webhost.com ».
Je peux héberger mon site web grâce à leur formule gratuite permettant de profiter de certains
avantages comme :
• 1000 MB d’espace disque ;
• 10 MB/s de bande passante ;
• 2 bases de données MySQL ;
• 2 sites web ;
• 50 mails via messagerie journalier ;
• Hébergement de domaine.
Je dispose maintenant d’un hébergement pour mon site avec la possibilité d’envoyer des
messages électroniques sur la boite mail de mon choix.
2. Nom de domaine
Un nom de domaine est un identifiant de domaine internet. Actuellement mon nom de
domaine est « 000webhostapp.com ».
P a g e 13 | 18Loïc GIROT
GMSI AP L12
Le .com veut dire commercial, il existe d’autres noms qu’on appelle domaine de premier
niveau. Il existe .fr en France, .us au Etat-Unis ou .eu pour Europe.
La seconde partie « .000webhostapp » est un domaine de deuxième niveau.
Je veux être reconnu quand on fait une recherche sur mon portfolio et le nom « portfolio-loic-
girot.000webhostapp.com » n’est pas parlant.
Je peux acheter un nom de domaine personnalisé qui me représentera mieux.
On peut acheter un nom de domaine auprès d’entreprises possédant des enregistrements de
noms de domaine. Il en existe de nombreuses comme Gandi « https://www.gandi.net/fr » ou
OVH « https://www.ovh.com/fr/ ».
Je viens d’héberger mon site sur 000webhost, il me propose de posséder mon propre nom de
domaine par l’intermédiaire de Hostinger « https://www.hostinger.fr ». La documentation en
français/anglais m’a permis de faire correspondre mon nouveau nom de domaine avec mon
hébergeur. Mon site est consultable à l’adresse http://www.loicgirot.eu sur internet.
Ce nom de domaine « loicgirot.eu » est payant, je l’ai acheté 3 $ pour un an.
3. Sécurité
a. Chiffrement du protocole
Mon site est à présent hébergé avec un nom de domaine personnalisé, mais l’utilisation d’un
site avec seulement le protocole http est une faille de sécurité. Les informations ne sont pas
cryptées.
Grâce à Cloudflare « https://www.cloudflare.com/fr-fr/ » qui propose des services de sécurité
Internet et de redirection DNS, mon site est maintenant accessible avec l’adresse
« https://www.loicgirot.eu ».
Cloudflare me permet de sécuriser un site internet gratuitement sans publicités.
P a g e 14 | 18Loïc GIROT
GMSI AP L12
b. ReCAPTCHA v3
Il convient également empêcher des actions malveillantes à l’aide de robot sur l’envoi des
mails. ReCAPTCHA v3 permet de détecter grâce aux comportements du visiteur sur le site si
c’est une personne ou un robot qui envoie un mail.
Pour cette phase, j’ai rencontré des difficultés du coté php. J’ai ajouté le script dans le Head
de la page html, mais les actions que j’ai menées sur le fichier contact.php n’ont pas abouti.
Je suis toujours en train d’étudier cette fonctionnalité qui apportera une protection
supplémentaire à l’envoi de mail sur mon site.
4. Obligations légales
Pour mettre en place un site internet, des obligations légales doivent être respectées. On est
100% responsable de ce que l’on stocke sur internet. Les informations liées à ces obligations
légales sont disponibles sur le site du gouvernement « https://www.service-
public.fr/professionnels-entreprises/vosdroits/F31228 ».
a. Utilisations des cookies
Avant de déposer ou lire un cookie, les éditeurs de sites ou d'applications doivent :
• Informer les internautes de la finalité des cookies ;
• Obtenir leur consentement ;
• Fournir aux internautes un moyen de les refuser.
La durée de validité de ce consentement est de 13 mois maximum. Certains cookies sont
cependant dispensés du recueil de ce consentement.
Le manquement à l'une de ces obligations peut être sanctionné jusqu'à 1 an
d'emprisonnement, 75 000 € d'amende pour les personnes physiques et 375 000 € d'amende
pour les personnes morales.
Pour répondre à ce besoin, je suis allé sur « https://manage.cookiebot.com ». Ce site permet
de créer une bannière de prévention sur l’utilisation des cookies qui se paramètre via
cookiebot. En personnalisant mon bandeau, je peux récupérer un script que je place dans ma
balise . Ce script récupère mon bandeau personnalisé.
P a g e 15 | 18Loïc GIROT
GMSI AP L12
Ce service peut être utilisé gratuitement avec une personnalisation de base à l’aide d’une inscription
avec un compte sur le site.
b. Mentions légales
Le règlement général sur la protection des données (RGPD) ajoute des obligations liées à la
transparence de l'information, spécialement pour les fichiers et traitement informatiques. Les
données suivantes doivent être mentionnées :
• Coordonnées du délégué à la protection des données (DPO ou DPD) de l'organisme,
s'il a été désigné, ou d'un point de contact sur les questions de protection des données
personnelles ;
• Finalité poursuivie par le traitement auquel les données sont destinées ;
• Caractère obligatoire ou facultatif des réponses et conséquences éventuelles à l'égard
de l'internaute d'un défaut de réponse ;
• Destinataires ou catégories de destinataires des données ;
• Droits d'opposition, d'interrogation, d'accès et de rectification ;
• Le cas échéant, les transferts de données à caractère personnel envisagés à
destination d'un État n'appartenant pas à l'Union européenne.
• Base juridique du traitement de données (c'est-à-dire ce qui autorise légalement le
traitement : il peut s'agir du consentement des personnes concernées, du respect
d'une obligation prévue par un texte, de l'exécution d'un contrat notamment) ;
• Mention du droit d'introduire une réclamation (plainte) auprès de la CNIL.
L’absence d'une information obligatoire est punie par une amende de 1 500 €.
P a g e 16 | 18Loïc GIROT
GMSI AP L12
Tout traitement informatique non consenti est puni de 5 ans d'emprisonnement et de 300 000
€ d'amende.
Pour faire apparaître ces mentions légales, je suis passé par un générateur de mentions légales
disponible sur le site « https://www.subdelirium.com/generateur-de-mentions-legales/ ». Il
m’a permis de gagner du temps ainsi que de m’assurer que toutes les mentions soient
présentes.
P a g e 17 | 18Loïc GIROT
GMSI AP L12
IV. Conclusion
En apprenant que je devais réaliser un site internet alors que je n’avais aucune connaissance
dans le domaine, je n’étais pas rassuré sur le résultat final. J’avais en parallèle mon projet de
fin d’étude à traiter et un concours de la fonction publique à préparer et passer.
Les premières semaines de cours m’ont permis d’appréhender les différents langages
essentiels aux pages web. J’ai acheté deux livres en lien avec le projet pour m’aider :
• Le premier sur HTML5, CSS3 ;
• Le deuxième sur Javascript.
Si le deuxième ne m’a pas été d’une grande aide, le premier m’a été utile pour comprendre le
fonctionnement d’une page web.
Avec de l’organisation, j’ai travaillé régulièrement sur le projet. J’estimerais la durée allouée à
70 heures. On retrouve une certaine satisfaction après une journée de travail en constatant
ses résultats en ligne.
J’ai toujours du mal à exploiter le langage php et javascript, mais, je m’efforce de les
approprier. Ce projet m’a permis d’ouvrir mon panel de compétences.
Ce portfolio sera un atout pour mes futures démarches d’emplois et je compte le maintenir à
jour.
P a g e 18 | 18Vous pouvez aussi lire
