J'ai commencé à faire l'image de fond de mon header, ce sera l'image principal, et suite à ça, je peux faire ma gamme de couleur. Vu que mon header est imposant, il est évident que je fasse une en tête qui contienne toute la navigation ainsi que le logo. J'ai décidé aussi que les éléments importants soient dans une bulle, ça permet de ressortir le texte. Ensuite, j'ai pensé que divisé le contenu du portfolio en année d'étude (ici 3 ans) était plus pertinant pour éviter d'avoir une page très longue.

Ces 3 années sont chacune divisées en 2 semestres, répertoriant les différentes SAEs. Toutes les pages sont structurées dans le même style, c’est-à-dire que les parties importantes sont dans des bulles et les mots clefs des descriptifs des SAEs qui seront d’une autre couleur pour faciliter la lecture.

J’ai aussi rajouté quelques détails très simples, tel que le logo qui remonte en haut de la page ou encore la sélection du texte à la souris qui est d’une différente couleur. Ces détails permettent de rendre mon site plus ressemblant à mon image.

Il faut donc commencer par faire en sorte que l’url soit modifié en cliquant sur les SAEs et les nommer avec des numéros par exemple. Tout cela sur JavaScript, on crée ensuite notre base de données avec les noms de notre choix pour pouvoir écrire le contenu que l’on souhaite.

Enfin avec les littéraux de gabarits on affiche la base de données sur le site web.

Le filtre ainsi que le menu ouvrir/fermé ont pratiquement le même fonctionnement. Le but est de créer des classes correspondant à l’interaction souhaitée (ex : une classe avec l’élément et une classe sans l’élément). Ensuite on passe au Javascript qui va nous permettre de switcher entre les deux classes et donc de choisir la classe sans ou avec l’élément.

Ce sont des interactions simples mais qui permettent à l’utilisateur du site à retrouver plus facilement l’information souhaitée (le filtre). Cela sert aussi de gagner de la place en fonction de l’agencement du site (menu ouvrir/fermé). Enfin la base de données va être utile dans de nombreux sites contenant des logins et connexions. Il est bien plus simple de gérer les informations via un formulaire et une base de données regroupant le nécessaire.

Mais la nuance se fait sur la base de données que j’ai créé et rempli sur PHPmyAdmin. En effet j’ai exporté ma BDD puis je l’ai importé sur le PHPmyAdmin du réseau de l’IUT. Cette action permet à ma BDD d’être accessible en dehors de mon localHost.

Sur mon site Web, je n’ai plus qu’à changer les logins pour ma connexion à ma base de données car il n’est pas le même en localHost. Ce changement se fait sur le fichier PHP me permettant de me connecter à ma BDD grâce à un PDO.

Voila, maintenant mon site Web n’est plus seulement sur mon localHost mais sur le réseau de l’IUT, et donc il peut être vu par toutes les personnes présentent sur ce réseau.