000W – Analyser l'un des grands problèmes de notre temps selon une ou plusieurs approches propres aux sciences humaines.
Analyser les besoins et les capacités de l'utilisateur pour créer du contenu web adapté.
Créer du contenu web adapté aux besoins et aux capacités de l'utilisateur.
Ce cours vous a permis d'apprendre à créer et à structurer du contenu à l'aide d'HTML et à le présenter à l'aide CSS. Vous avez appris à publier des pages web statiques sur un serveur et à publier des pages et articles à l'aide du gestionnaire de contenu WordPress.
Afin de démontrer l'acquisition et l'intégration de vos connaissances, vous devrez rédiger des articles et pages d'une longueur de 750 mots maximum (au total) et les publier en ligne dans des pages statiques en utilisant le gestionnaire de fichiers de votre hébergement web, ainsi qu'à l'aide du gestionnaire de contenu WordPress. Voici comment le nombre de mots rédigés peut être réparti :
Le sujet de votre contenu est libre. Assurez-vous que les titres et sous-titres soient pertinents à une thématique claire que vous pouvez diviser en trois catégories bien claires (voir semaine 8).
1- voir votre feedback pour le devoir 4 et tenir compte des recommandations et points à corriger;
2- un répertoire « portfolio » doit être créé à la racine de votre site (public_html, voir semaine 9, à 47:01 dans le sommaire;
3- assurez-vous que votre répertoire portfolio contient tous les répertoires appropriés : - devoirs - exercices - tests - examens (revoir l'utilisation du Gestionnaire de fichiers et la création de répertoires à la semaine 1 au besoin, à 51:04)
4- Créer un site web en HTML « à la main » (créé tout au long de la session) qui inclura le contenu suivant : le répertoire portfolio et chaque répertoire ci-dessus contiennent un fichier index.html incluant les composantes suivantes : - une mise en page conforme (doctype, html, head, body) pour un fichier HTML (semaine 3, à partir de 16:15)
5- Les pages HTML doivent inclure au moins les éléments suivants :
6- la partie <head> de chaque page a un lien relatif connectant la page au fichier /portfolio/css/styles.css avec l'élément : <link rel="stylesheet" href="css/styles.css"> (attention, la position de la page déterminer le lien relarif href).
Facultatif : Pour l'examen 1, un deuxième <link>, sous le premier, peut mener vers un fichier examen1.css avec href="../css/examen1.css". Ce deuxième fichier CSS contiendra seulement les deux modifications demandées aux h2 de l'examen. Cette façon de procéder fait en sorte que vos h2 peuvent avoir une mise en forme quelconque dans tout votre site, et différente seulement dans votre fichier examen1.html;
7- l'élément p de chaque page index.html est suivi d'une liste à puces ul incluant les titres de chaque élément li :
page portfolio/index.html (les href entre parenthèses ne font pas partie du titre, ils indiquent vers quoi lier)
page portfolio/devoirs/index.html (les href entre parenthèses ne font pas partie du titre, ils indiquent vers quoi lier)
Note : dans cette liste, les numéros de devoirs seuls sont en liens hypertextes, pas les titres.
Question : Je n'ai pas fait d'exercices durant la session, que dois-je faire?
Réponse : Faites-en deux ou trois de votre choix à partir de la liste ci-dessus, qui seront utiles au reste de votre PFI.
Question : J'ai fait quelques exercices, mais pas dans l'ordre, comment dois-je les numéroter?
Réponse : Gardez la numérotation proposée, ce n'est pas grave si vous sautez des numéros.
Question : Je n'ai pas fait de tests durant la session, que dois-je faire?
Réponse : Faites-en deux ou trois de votre choix à partir des livres, de MDN ou de YouTube, qui seront utiles au reste de votre PFI.
8- toutes les pages index.html (sauf portfolio) se terminent par un paragraphe contenant un lien hypertexte menant à l'accueil du site HTML à la main : Retour à l'accueil (href="../"). L'élément <footer> de toutes les pages individuelles des devoirs, exercices, tests et examens HTML ont deux liens de retour séparés par une barre droite : Retour aux devoirs | Retour à l'accueil (href="../devoirs" et href="../", même chose pour exercices, tests, examens)
9- Certaines pages, dont votre page d'accueil /portfolio/index.html, devraient avoir d'autres éléments HTML, et des images au besoin pour agrémenter les pages et les rendre plus attrayantes. Soyez créatifs, imaginatifs, spontanés, cherchez des idées attrayantes et intéressantes sur le Web, sur MDN, sur W3Schools, sur CodePed.io ou sur YouTube pour vous inspirer mais n'y passez pas des heures non plus!
Attention : Aucune page de votre site à la main ne doit être un « cul-de-sac » (aucun lien de retour vers les pages index.html ou une autre page du site).
Le fichier CSS des pages à la main doit inclure les règles requises pour changer au moins les éléments suivants :
1- voir votre feedback pour le devoir 5 et éviter l'utilisation d'un framework pour vos pages HTML;
2- la largeur de l'élément body doit être spécifiée entre 60% et 90% selon votre préférence;
3- les marges gauche et droite de votre élément body doivent être réparties également de manière automatique;
4- votre élément body doit avoir une couleur d'arrière-plan autre que blanc et une couleur de caractères contrastante avec l'arrière plan, autre que noir. L'élément body a une police de caractère Bookman Old Style, sinon Times New Roman, sinon serif;
Truc utile : utilisez l'outil Contrast Checker de WebAIM en vous assurant que les trois lignes WCAG AAA pour Normal Text, Large Text et Graphical Objects ont la mention PASS. Votre site offrira alors un contraste suffisant aux personnes ayant des difficultés à lire à l'écran. Cela ne prend que quelques minutes et amélior l'accessibilité de votre site.
5- l'élément h1 de chaque page utilise une police Google Fonts originale/attrayante mais bien lisible (voir semaine 8 412-BEY à partir de 1:02:05 dans le sommaire);
6- La couleur de l'élément h1 doit être changée en utilisant le mode de couleur RGB, HSL ou hexadécimal;
7- les liens hypertextes dans leurs trois formes principales : a:link, a:hover et a:visited offrent un niveau de contraste suffisant pour être facilement lisibles (revoir l'outil Contrast Checker de WebAIM au besoin). Le a:hover rend évident, au survol, qu'il s'agit d'un lien hypertexte;
8- les figures ont une largeur de 80% et sont centrées dans la page. Les images se trouvant dans des figures ont une largeur de 100% de leur conteneur figure. Les images qui ne sont pas dans une figure ont une largeur de 600px. Les figures et images peuvent avoir des bordures et d'autres mises en forme de votre choix, en fonction de vos apprentissages.
9- vous pouvez explorer d'autres mises en formes CSS pour rendre vos pages plus jolies, plus attrayantes, mais n'y passez pas des heures (à moins de tomber en amour avec le CSS). Vous devez seulement démontrer que vous comprenez bien les bases du CSS et leur application;
10- Défi facultatif : pour la page /portfolio/index.html, la liste à puces pourrait être transformée en menu horizontal (voir exercices ci-dessus). Il existe d'autres méthodes plus simples, sans utiliser l'élément <nav> et sans flexbox, vous permettant de créer un menu horizontal. Il sera seulement moins « adaptatif » selon la largueur de votre écran. Amusez-vous si ça vous tente!
Important : Les plus avancés d'entre-vous intéressés à expérimenter avec des frameworks CSS tels que Bootstrap, Foundation, Materialize, Pure CSS, Semantic UI, Skeleton ou autre, peuvent le faire sur une/des page(s) HTML spécifique(s) à chaque framework que vous essayez, dans le répertoire « tests » (ex.: Test 6 – Essais avec Bootstrap, Test 7 – Essais avec Materialize). Les autres pages HTML (index.html, devoirs, exercices, etc.) doivent être mises en forme avec du CSS pur afin de démontrer l'acquisition de la compétence de manière uniforme pour tous et toutes.
Plus facile que les frameworks : si vous avez envie de faire des tests plus faciles et très intéressants pour enjoliver votre site, lisez un peu sur les no-class ou classless frameworks (voir l'article No-Class CSS Frameworks du site CSS-Tricks pour une liste d'exemples). Ils se basent seulement sur les éléments HTML purs, sans faire appel à plusieurs classes comme Bootstrap, Foundation et les autres. Plus facile à apprendre et à utiliser. Ils sont idéal pour de petits sites à la main avec des fonctionnalités limitées!
Vos pages et articles devraient contenir de vrais titres et de vrais sous-titres. Le contenu des paragraphes peut être du Lorem Ipsum. Le contenu des listes à puces et listes numérotées doit être du vrai contenu. Les images utilisées dans le site devraient être libres de droits. Au moins un ou deux de vos articles doivent comporter du vrai contenu rédigé par vous (maximum 600 mots total, donc un article de 600 mots ou deux de 300) sur un ou des sujets de votre choix.
Important : Les deux articles avec du vrai contenu doivents absolument porter le mot clé (étiquette) vrai-contenu afin que je puisse les localiser rapidement au moment de la correction.
| Critères d'évaluation | Pondération |
|---|---|
| Pages HTML à la main | 10 % |
| Fichier et règles CSS | 5 % |
| Site WordPress et images | 25 % |