20221-420427RK - Développement Web
Résumé de section
-
-
Notre premier cours !
Aujourd'hui, nous allons aborder la question du développement web. La présentation du plan de cours répondra à la plupart des questions concernant le contenu, mais pas seulement ! Posez vos questions, je suis là pour y répondre.
Déroulé du cours :Présentation personnelle : qui suis-je ? Et qui êtes-vous ?
Un petit Menti pour commencer ? Et un questionnaire par la suite
Le plan de cours, ce que vous en comprenez, ce que j'en comprends
À faire aujourd'hui
- Installer Laragon
- Créer un premier projet avec Bootstrap
- Créer la page d'accueil de notre projet
Concernant le point 3 :L'objet du cours n'est pas de travailler sur le "look", le CSS. Vous devez coder une page simple et fonctionnelleÀ faire pour le prochain cours
- Créer les différentes pages du projet
Le projet
Les outils
Laragon : serveur web local -> ici (choisissez la version "full")Bootstrap v5: framework HTML/CSS -> iciJQuery : librairie JS -> iciDans notre métier, la documentation la plus complète est souvent en anglais. Cependant, des ressources existent en françaisRéférences :
html, css, javascript : https://www.w3schools.comBootstrap : https://getbootstrap.com/docs/5.1Jquery : https://api.jquery.com/ -
Retour sur le HTML et les Mockups :
- Vous avez écrit les différentes pages qui composent votre projet :
- Voyons ce qui va bien, ce qu'il faudrait améliorer pour respecter les standards HTML et l'utilisation de Bootstrap
Page supplémentaire à créer :
Création d'une page de formulaire permettant l'ajout d'articles.
Un article a comme attributs :
- Un titre
- Un résumé ou descriptif
- Le nom de l'auteur
- Une image (optionnelle) principale
- Un texte (avec des images éventuellement)
- une date de rédaction
- Une date de publication
- Une date de fin de publication (optionnelle)
-
Aujourd'hui, on s'enfonce un plus dans le code, Javascript, en analysant un script qui va créer le menu de façon automatique !
-
Heure 1 : Évènements JS
Heure 2 : Manipulation des données
Heure 3 : Validation de formulaire
-
-
Remettez ici votre dossier zippé contenant les fichiers HTML, CSS et JS.
Vous avez créé un site AVEC Bootstrap de SIX pages telles que vues en cours :
- accueil
- item
- article
- utilisateur
- tarif
- menu
Le design respecte les mockups fournis, le choix des couleurs fait appel à votre goût mais doit respecter des règles de bon sens, d'ergonomie de base,...Si vous ajoutez du CSS, celui-ci doit être dans un fichier CSS à part, pas dans le code HTML. Seules de courtes instructions CSS peuvent se trouver dans la page HTML.Le menu permet de naviguer entre les pages.Le code HTML respecte les standards HTML et BootstrapLes balises (les plus importantes, celle qui feront l'objet d'une sélection JS) sont IDentifiées -
À partir de ces eux fichiers présentant la météo de Rimouski, nous allons constater les différences entre le JSON et le XML
-
-
-
À partir de la structure (cf plus bas), créer le menu.
- Créer un fichier XML et un fichier JSON reprenant la structure du fichier joint
- Créer les fonctions qui traitent le XML et le JSON pour l'afficher dans une page HTML (celle de la gestion du menu)
Menu:
Attributs :INT id, BOOL actif, STR nom, STR url, OBJECT image(STR url, STR alt), INT parent, INT ORDRE, ARRAY enfants[menu{}]
-
-
-
À partir du fichier html joint, créer la page accueil.html. Vous remettrez votre fichier html seul.
Dans la balise <script>, placer le code JS utile
1 - Créer le menu à partir de l'objet menu (cible = target !) dans menu-header (25%)
{menus:[
{nom:accueil,url:accueil.html,cible:0},
{nom:utilisateurs,url:users.html,cible:1},
{nom:faq,url:faq.html,cible:0},
]}
2 - Créer un formulaire d'adresse (25%) : nom de l'adresse, rue (2 inputs, la seconde est optionnelle), code postal, ville, choix de la province (liste déroulante) Québec, Nouvelle-Écosse, Ontario.
Une case à cocher permet de dire qu'elle est l'adresse principale.
Une case à cocher doit obligatoirement être cochée pour signifier l'acceptation de l'enregistrement de l'information
Un bouton de validation vérifie que toutes les infos sont renseignées. Les validations informent l'utilisateur de telle ou telle chose manquante : une alert, un texte en rouge, ... À vous de choisir.
Chaque input doit avoir une ID, un name, une value et un label. Vous pouvez vous inspirer des formulaires Bootstrap.
3 - Créer un tableau à partir des données suivantes (25%)
Prénom Nom Age Genre numéro ID Courriel Mia Gagnon 22 f MG01 Mia.Gagnon@courriel.qc.ca Eleanor Côté 32 f EC03 Eleanor.Côté@courriel.qc.ca Ava Bouchard 65 f AB04 Ava.Bouchard@courriel.qc.ca Theo Simard 54 m TS18 Theo.Simard@courriel.qc.ca Jack Boucher 18 m JB19 Jack.Boucher@courriel.qc.ca Aiden Tremblay 22 m AT20 Aiden.Tremblay@courriel.qc.ca Ryan Gagnon 16 m RG21 Ryan.Gagnon@courriel.qc.ca Ethan Roy 59 m ER22 Ethan.Roy@courriel.qc.ca Si son âge est inférieur à 18, son âge sera en bleu (css : blue), entre 18 et 60 inclus, bleu (css : blue), au-delà gris (css : gris)Les données du tableau sont intégrées à partir d'un objet JS (à créer) sous la forme :{users:[{nom:xxx,prenom:yyy,age:00,courriel:aaa@aaa.aa,genre:x},{nom:xxx,prenom:yyy,age:00,courriel:aaa@aaa.aa,genre:x},...]}10% sont accordés aux commentaires du code : utile, pertinent15% sont accordés à l'efficience du code : clarté, indentation, concision, réutilisation des fonctionsVous n'avez pas le droit de communiquer entre vous. Il n'est jamais interdit de poser une question mais je ne répondrai pas si vous devez connaître ou rechercher la réponse.
-
-
-
Remettez ici votre premier livrable concernant le projet ReactJS au format PDF (un seul fichier)
-
-
-
Déposez ici votre projet ReactJS dans un fichier compressé (zip ou gzip) contenant tous les documents (documentations, scripts,...)
-
-