Différences

Ci-dessous, les différences entre deux révisions de la page.

--- formations:devweb_2_exos [08/10/2020 22:27] – créée rgrondin
+++ formations:devweb_2_exos [20/10/2020 14:19] (Version actuelle) – rgrondin
@@ Ligne 1: / Ligne 1: @@
+====== Exercices Devweb 102 ======
+Page d'exercices relative à la formation [[devweb_2]]
+===== Exo 2.1 : Prise en main de Bootstrap =====
+**Objectif : ** Voir le fonctionnement d'une framework comme bootstrap (widgets, grille) & commencer à gérer le responsive
+**Description :** Reprenez le CV que vous avez fait en exercice de la devweb1, et améliorez le avec Bootstrap ! Le but est juste de revoir la forme. Il faudra faire 2 colonnes avec la grille de bootstrap, et faire en sorte que ce soit responsive (2 colonnes sur ordi, une seule sur mobile). De plus vous devrez intégrer un bouton "Contactez-moi" (au style de bootstrap bien entendu) qui ouvre un modal avec vos informations de contact (avec un petit QR code).
+Vous pouvez remplacer le premier CV que vous avez fait par celui-ci, ou simplement changer le nom de la page pour avoir les deux (cv2.html par exemple).
+**Ressources :**
+Vous pouvez par exemple inclure les éléments suivants de bootstrap :
+  * https://getbootstrap.com/docs/4.3/components/badge/#contextual-variations (pour des compétences par ex)
+  * https://getbootstrap.com/docs/4.3/components/collapse/ (pour détailler une expérience)
+  * https://getbootstrap.com/docs/4.3/components/modal/ (pour le contact)
+  * https://getbootstrap.com/docs/4.3/components/tooltips/ (pour détailler une abréviation ou n'importe quoi)
+  * https://getbootstrap.com/docs/4.3/components/list-group/ (pour lister des choses)
+  * ... N'importe quoi dans la doc bootstrap !
+** Requis :**
+  * Utilisation de bootstrap 4.3.x (dernière version)
+  * Le modal de contact doit être présent
+  * Au moins deux des widgets dans les ressources
+  * 2 colonnes sur pc, avec responsivité
+  * Les fichiers de bootstrap doivent être hébergés sur votre site, pas de CDN
+  * Le style doit être dans un fichier CSS séparé
+===== Exo 2.2 : Un style un peu plus personnalisé =====
+**Objectif :** Utiliser un template tout fait et le personnaliser pour faire des merveilles
+**Description :** Pour cet exercice, il faudra tout d'abord choisir un thème (voir liste dans les ressources) pour ensuite l'appliquer sur votre site. Vous pouvez faire quelques pages (accueil, cv voir plus si vous le sentez). Vous DEVEZ personnaliser le thème pour ne plus laisser de "placeholders" (éléments graphiques pour montrer les possibilités d'un template tout fait).
+A l'issue de l'exercice, vous pouvez remplacer votre site perso par celui avec le template, ou le mettre dans un sous-dossier (comme par exemple ~/html/new/ ou ~/html/template/ pour ne pas effacer ce que vous avez fait avant).
+**Ressources :**
+//Les liens suivants sont donnés à titre indicatif, nous n'avons évidemment pas testé tous les éléments ci-dessous, il pourrait y avoir des thèmes qui fonctionnent mal ou pas adaptés à BS4.//
+  * https://themes.getbootstrap.com/
+  * https://startbootstrap.com/themes/portfolio-resume/
+  * https://colorlib.com/wp/free-bootstrap-4-website-templates/
+  * https://www.codeur.com/blog/templates-bootstrap-gratuits/
+  * recherche google avec des mots clés comme "bootstrap 4" "thème" "portfolio" "template"
+** Requis :**
+  * Vous devez utiliser un template utilisant bootstrap 4
+  * Le template doit être un minimum beau (laissé à l'appréciation de chacun)
+  * Vous devez faire au minimum la page d'accueil, au mieux la page avec le CV aussi
+  * Il ne doit plus rester de placeholders du template
+  * Le style doit être dans un fichier CSS séparé
+===== Exo 2.3 : Une galerie d'images  =====
+**Objectif :** Apprendre à utiliser une librairie tierce
+**Description :** L'objectif est maintenant de faire une petite galerie d'image avec des miniatures. Pour cela on va utiliser une librairie qui s'appelle **Lightbox**. La galerie doit se trouver sur une page à part de celles déjà existante, et vous devez mettre quelques photos sur celle-ci (photos de loutre acceptées).
+**Ressources :**
+  * https://lokeshdhakar.com/projects/lightbox2/#getting-started
+<note tip>Vous devez télécharger la librairie, la mettre dans votre site et inclure les fichiers (js & css) du dossier **dist**. (uniquement **lightbox.min.js** et **lightbox.min.css**)</note>
+** Requis :**
+  * Vous devez avoir au moins 3 images sur votre galerie
+  * La lightbox doit fonctionner (ouverture de la popup avec l'image lors du clic)
+  * Le style doit être dans un fichier CSS séparé