documentation_site_shulea_raphael
no way to compare when less than two revisions
Différences
Ci-dessous, les différences entre deux révisions de la page.
— | documentation_site_shulea_raphael [2021/06/18 16:54] (Version actuelle) – added boxes explanation Bismuth | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ======Documentation Unborn Raphaël====== | ||
+ | Au cours de mon stage de 16 semaines chez la Labomedia, j'ai travaillé pour aider à la création d'un site web net-art. | ||
+ | |||
+ | |||
+ | =====Création des boites===== | ||
+ | |||
+ | Dans le cadre du projet, il était envisagé des boites pouvant être ouvertes, fermées et déplacées. La structure entière du site devant être basée là-dessus, c'est la première chose que j'ai fait. | ||
+ | |||
+ | Pour faire cela, j'ai utilisé css et jquery. Commençons par observer les règles de CSS: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | J'ai commencé en créant une mixin générale pouvant être réutilisée pour la plupart des boites. En effet, étant donné que chaque boites cliquées doivent faire quelque chose de différent (positionnement différent, taille différente, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Comme on peut le voir, on a maintenant 4 boites qui sont prêtes à être ouvertes. | ||
+ | |||
+ | Maintenant, il faut pouvoir trouver un moyen de les ouvrir. Pour cela, on va utiliser une fonction de jquery pour changer son css: | ||
+ | |||
+ | ===Ouvrir une boite=== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Étudions la fonction ligne par ligne: | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | '' | ||
+ | { | ||
+ | state=true; | ||
+ | }'' | ||
+ | | ||
+ | Enfin, pour conclure cette partie, voici à quoi ressemble la box-1 lorsqu' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | On a donc du texte, une image et un croix pour fermer. De plus, on a barre permettant de scroll jusqu' | ||
+ | |||
+ | A présent, il serait intéressant de regarder comment fermer une boite | ||
+ | |||
+ | ===Fermer une boite=== | ||
+ | |||
+ | On a vu que pour fermer une boite, on utilise une balise ''< | ||
+ | |||
+ | ==CSS== | ||
+ | |||
+ | Commençons par regarder son css: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Le CSS est simple, il permet simplement de créer une croix qui change d' | ||
+ | |||
+ | ==JQuery== | ||
+ | |||
+ | Afin de créer la fermeture la fermeture d'une boite, j'ai choisi d' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Comme pour la fonction d' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | '' |
documentation_site_shulea_raphael.txt · Dernière modification : 2021/06/18 16:54 de Bismuth