TP E-PorteFolio

📢 Bonjour à tous et à toutes ❗

Résumé du cahier des charges d'un E-portfolio : Le contexte :

Le portfolio est un témoin et un instrument de développement des compétences de l’élève, c’est « une collection des travaux d’un élève qui fait foi de ses compétences en conservant des traces pertinentes de ses réalisations ».
Il nous servira donc tout au long de la formation de mise en pratique des apprentissages vus en cours et travaillés lors des TD (c’est à l’élève, en autonomie, de le construire au fur et à mesure).
Il permet à un futur employeur de prendre connaissance du parcours scolaire et professionnel de l’étudiant tout en prenant connaissance des réalisations de l’étudiant (via le site ou via les Screenshots ou liens git/github laissés sur le site).
Il est un moyen de communication et de diffusion de l’actualité de l’étudiant/stagiaire et de son CV, c’est sa carte de visite digitale.
Il peut avoir une partie publique et une partie privée.
Une partie librement personnelle (dont l’accès peut être privé) est à fournir en plus des minimas (mandatory = obligatoire) requis.

Un style épuré (twitter ) vaux mieux qu’un patchwork de styles type Picasso

(Attention il y a un piège il faut regarder juste le style et pas le nom de l’extension ou ce qui est en focus 😇)

Voilà un exemple de diagramme de cas d’utilisation du site hébergeant votre E-Portefolio dont vous pouvez vous inspirer pour votre réalisation : diagramme cas utilisation

Vous pouvez créer votre propre arborescence des pages de votre site en utilisant https://mockflow.com/ :

L’arborescence d’un site web permet d’avoir une vision globale du site et des parcours de navigation avant de réaliser les maquettes des pages principales.
– lafabriquedunet

Mandatory :

Home
Inscription/Authentification
Mes réalisations
Contact/Envoi CV
Mailing List / Inscription Désinscription
Votre touche perso
Vos ajouts persos

Faire via une One Page ou des pages avec
Gabarit et un footer identique

TODO 🎢:

1. Commencer a `Brainstormer` afin de définir le périmètre du projet :

Quel est l’objectif du développement (et oui c’est bien de partir sur de bonnes bases)
Que rajouter d’original ?
Comment rendre joli ou regardable le site ?
Comment le mettre en ligne ?
Comment ne pas se faire prendre par le temps et pouvoir le rendre dans les temps ?

2. On va commencer à chercher un hébergeur (gratuit pour débuter) afin d'y envoyer nos pages Webs :

Rappel : dans un dossier web ce sont les fichiers index.html index.php qui sont propulsés par défaut par le serveur web et donc lus par défaut par nos navigateurs.
Donc créez toujours un fichier racine index.html qui sera le point d'entrée de votre site internet.

On va voir avec Github page (ça tombe bien on est déjà sur le site ) uniquement pour des sites statiques (HTML CSS Javascript) qui hébergera les pages dans un repository (un dossier).
- Créez-vous un compte sur le site ->Ici<- (Tous les fichiers hébergés sur votre compte GitHub gratuit sont publics, à moins de souscrire à un compte privé payant)
- Cliquez sur (New) en haut à droite afin de créer un repository (New)->
- Puis (Créer) le repo avec un nom que vous choisissez (create a repository)
- Félicitations votre repo est créé, maintenant on va y ajouter nos pages
- Cliquez soit sur (creating a new file) ou upload an existing file afin de rajouter soit du code html soit une page que vous avez déjà faite (un index.html 😄)
- ou alors vous pouvez pusher si vous avez suivi la formation Git ->Ici<-
- On va créer un nouveau fichier index.html dont on (copie colle)ra le code suivant :
  
  (creating a new file) ↓
  (copie colle)
```
    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first git page</title>
</head>
<body>
    <h1>Ma première page sur Git</h1>
    <hr>
    Let's Code : 
</body>
</html>
```
- Ou alors on importera le fichier index.html ->Ici<-
- Puis on clique sur Commit new file et on obtiendra le résultat suivant :
- Maintenant affichons le résultat via notre navigateur , pour cela on clique sur → Settings puis → Pages et enfin on va selectionner main (qui est notre branche par défaut) puis on clique sur Save :
- Si vous cliquez sur le lien la page est accessible et visible depuis l’extérieur (parfois avec un peu de latence) https://francis-panzani.github.io/eportefolio/ (pour moi sur cet example)

Maintenant comment faire pour qu’on accède à votre site directement avec juste le nom de votre compte Github comme pour moi : https://francis-panzani.github.io/ ?
- Il y a une petite astuce, il faut renommer votre repo en mettant exactement le même nom que celui de votre compte Github et en y accolant .github.io pour ce faire cliquer sur Options tout en haut dans les Settings
Bon mon nom est déjà pris mais pour vous ça devrait être bon, sinon il faudra en choisir un autre.

Il existe d’autres solutions gratuites, à vous de voir :
- Vous avez Netlifly qui se link avec votre compte GitHub https://www.netlify.com/
- Vous avez Heroku https://www.heroku.com/
- Et les indéboulonnables pages persos Free depuis plus de 20 ans : https://subscribe.free.fr/accesgratuit/index.html

On utilisera pour la suite des cours les pages persos de (merci à eux) car on peut utiliser gratuitement du (5.6 Max atm) ainsi qu'un espace de stockage conséquent, une bdd Mysql et un logiciel Ftp pour uploader les pages.

Débuter le TP :

🎓 —> Afin de débuter le TP EporteFolio ensemble, vous aurez besoin de suivre les instructions du support suivant : 📚 (Logins & Passswords 🔐 donnés par le formateur) 💊 <—.

Panzani Francis