top of page
Portefeuille de compétences de MADEC Salman-Ali
Stage à L'école Demain Le Printemps
En première année, j'ai réalisé un stage d'une durée de 6 semaines (17 mai au 25 juin).
Missions :
-
Héberger les différents sites de l'école sur Ionos et o2switch
-
Gestion des certificats SSL
-
Création d'un site vitrine de l'association de l'école
-
Conclusion du stage
​
​
​
1. Concernant cette tâche, je devais me familiariser avec les hébergeurs Ionos et o2switch. Je communiquais, échangeait et faisait le point avec le tuteur via Skype. Étant donné que les sites étaient construit par d'anciens stagiaires, ma première difficulté a été de savoir quel hébergeurs possédait les noms de domaines des sites.
Voici des captures de l'espace d'hébergement :
ionos_herbergeur
Espace d'hébergement sur IONOS
switch_herbergeur
Espace d'hébergement sur O2SWITCH
ionos_herbergeur
Espace d'hébergement sur IONOS
1/2
2.
Sur Ionos :
Comme le montre la capture d'écran ci-dessus, un seul site est sécurisé. Ceci est due au fait que Ionos offre un seul certificat SSL (certificat numérique que l'on attribut à un site afin d'établir avec certitude le lien entre le site internet et son propriétaire) selon l'offre choisie :
Il était donc préférable de l'attribuer au site principale de l'école, le site que que j'ai construit durant le stage de 2e année (voir page Stage 2e année).
Sur o2switch :
L'hébergeur o2switch est meilleur sur ce point, n'imposant aucune limite en terme de certificat SSL, ce qui à permis de sécuriser tous les sites hébergés dessus :
ssl_switch
ssl_switch
1/1
Compétence concernée :
- Gérer le patrimoine informatique (Mettre en place et vérifier les niveaux d’habilitation associés à un service)
3. Une fois cela enfin terminé, j'ai pu commencer le site web de l'association Demain Le Printemps. Le site devait être un site vitrine présentant l'association de l'école. Pour ce faire, le tuteur voulait que la page d'accueil soit originale, il a donc proposer de partir d'une image présentant un cercle avec plusieurs points qui représenteront les différents menu du site.
Il fallait donc procédé par étapes :​
-
Langages à utiliser : HTML, CSS, PHP et un peu de JavaScript
-
Création de la page d'accueil
-
Définition du menu et sous-menu
-
Création des différentes pages
rideau
Rideau qui s'ouvre lorsque vous passer le souris dessus (disponible uniquement sur PC)
Page d'accueil
Chaque point est relié à une ligne, qui renvoi vers le menu associé
CSS a href ex
Code permettant d'ajuster le point (couleur, position, etc...)
rideau
Rideau qui s'ouvre lorsque vous passer le souris dessus (disponible uniquement sur PC)
1/4
J'ai dû adapter la taille, l'inclinaison, la couleur ainsi que la position des points pour que chacun correspondent à l'emplacement.
Les point correspondent à des liens a href avec un id unique, puis gérer par le CSS
Étant donné que le rideau fonctionne avec une fonction de hover, il fallait donc régler un problème de responsivité, c'est-à-dire que le site n'était pas agréable à visionner sur téléphone. J'ai donc opter pour un petit code en JS permettant de renvoyer directement sur l'interface avec les menus :
fctJs
Code de la fonction
fctJs
Code de la fonction
1/1
Page exemple
Exemple d'une page (plus hover montrant le sous-menu)
HTML
Code HTML
CSS
Bout de code du CSS
Page exemple
Exemple d'une page (plus hover montrant le sous-menu)
1/3
Exemple d'une page (l'École de théâtre en Biélorussie) :
J''ai donc créer une page avec un header, un menu et un footer qui sont tous include. La structure du site est la même pour toutes les pages.
Compétence concernée :
- Mettre à disposition des utilisateurs un service informatique (Déployer un service)
- Organiser son développement professionnel (Mettre en place son environnement d’apprentissage personnel)
4. Ce que j'ai retenu de ce stage :
J'ai appris à me familiarisé avec les différents hébergeurs, ainsi que l'attribution des certificats SSL, appris de nouvelles connaissances en HTML, CSS via l'autodidacte et l'occasion d'utiliser du code JS.
bottom of page