[412-Z21] Production finale d'intégration
Création de contenu pour le Web Automne 2020

Échéancier | Plan de cours

Rappel de la compétence du cours

000W – Analyser l'un des grands problèmes de notre temps selon une ou plusieurs approches propres aux sciences humaines.

Rappel de l'objectif intégrateur du cours

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.

Contexte de réalisation de la production finale

  • Individuellement;
  • À l'occasion d'un exposé écrit d'environ 750 mots portant sur un sujet relatif à l'être humain;
  • À partir de données documentaires provenant d'une ou de plusieurs disciplines des sciences humaines.

Description de la production finale

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 :

  • 150 mots pour les pages et articles avec du faux contenu (lorem ipsum) pour les titres, items de listes et légendes d'images, etc.;
  • 300 mots pour deux articles sur WordPress;
  • OU 600 mots pour un article sur WordPress.

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).

Consignes à suivre

Pages HTML (10 %)

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)

  • les éléments <title> (dans le <head>) et le h1 (au début du <body> de chaque page doivent inclure :
  • portfolio : Bienvenue sur le site HTML à la main de Prénom Nom
  • devoirs : Les devoirs de Prénom Nom
  • exercices : Les exercices de Prénom Nom
  • tests : Les tests de Prénom Nom
  • examens : Les examens de Prénom Nom (vous n'avez pas créé le index.html de examens lors de l'examen 1)

5- Les pages HTML doivent inclure au moins les éléments suivants :

  • un titre approprié au contenu de chaque page (élément title dans l'entête);
  • un h1 incluant le sujet principal de votre page (même que l'élément title);
  • des éléments h2 avec des sous-titres clairs et pertinents au sujet des pages dont le contenu doit être divisé;
  • au moins un court paragraphe de texte décrivant la page et un associé à chaque sous-titre h2 lorsqu'il y en a;
  • au moins une image (fixe, pas générée au hasard) de 800px de largeur par 450px de hauteur sur trois des pages, insérée dans un élément figure avec une légende décrivant le contenu de l'image (figcaption);
  • au moins une de vos images doit être produite dans PowerPoint en utilisant une disposition vide et en changeant les dimensions de la présentation à 21,167cm de largeur par 11,906cm de hauteur (800 x 450 pixels,. Vous devrez remettre votre fichier.);
  • au moins une vidéo YouTube de votre choix insérée grâce au code d'intégration de YouTube (sur UNE des pages, et la vidéo est pertinente à celle-ci);
  • un élément footer incluant deux paragraphes p, le premier inclut un lien de retour vers la page précédente, le second inclut une entité HTML copy, une espace et l'année, une espace et votre nom complet, une espace une entité ndash, une espace le code du cours 412-Z21-LG ex.: © 2020 Marc Gagnon – 412-Z21-LG;

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)

    • Mes devoirs (href="devoirs") (il n'y a pas de .html car on veut lier vers les répertoires respectifs)
    • Mes exercices (href="exercices")
    • Mes tests personnels (href="tests")
    • Mes examens (href="examens")
  • page portfolio/devoirs/index.html (les href entre parenthèses ne font pas partie du titre, ils indiquent vers quoi lier)

    • Devoir 1 – Mon serveur web et ma première page web (href="devoir.html")
    • Devoir 2 – Annulé (aucun lien hypertexte, cet item de liste n'as pas de lien)
    • Devoir 3 – Créer l'arborescence de mon site web à la main (href="../")
    • Devoir 4 – Insérer la structure d'une page web aux quatre pages index.html (href="../")
    • Devoir 5 – Mise en forme d'un site avec une feuille CSS (href="../")
    • Devoir 6 – Installer WordPress avec Softaculous (href="devoir6") (pas de .html car on vise un répertoire)
    • Devoir 7 – Dessin vectoriel (href="devoir7.html, consignes ci-dessous pour cette page)
    • Devoir 8 – Planifier le thème, les catégories et les sujets de ma PFI (href="devoir8.html, consignes ci-dessous pour cette page)
    • Devoir 9 – Installer WordPress manuellement sur une même base de données (href="devoir9") (pas de .html)
    • Devoir 10 – Installer le thème Astra avec un modèle de site web (href="devoir10") (pas de .html)

Note : dans cette liste, les numéros de devoirs seuls sont en liens hypertextes, pas les titres.

  • page portfolio/exercices/index.html (les href entre parenthèses ne font pas partie du titre, ils indiquent vers quoi lier) Note : pour chaque page HTML d'exercice que vous avez choisi de faire, le nom sera ex1.html, ex2.html, etc. et les href des liens hypertextes vers ceux-ci seront href="ex1.html", href="ex2.html", etc.
    • Exercice 1 – Introduction à CSS dans CodePen.io
    • Exercice 2 – Créer des photos Polaroid avec légendes écrites à la main (Google Fonts)
    • Exercice 3 – Explorer les éléments sémantiques comme abbr, blockquote, br, cite, dfn, h1-h6, hr, mark, p, q, strong, sub, sup. etc.
    • Exercice 4 – Explorer les éléments sémantiques de structure de la page comme header, nav, main, article, section, aside, et footer
    • Exercice 5 – Créer un menu de navigation horizontale avec float ou avec Flexbox (voir Ex. 5 sur CodePen.io)
    • Exercice 6 – Ajouter des articles et changer les dates de publication dans le devoir 6
    • Exercice 7 – Dessiner avec les formes vectorielles (exercice précédent le devoir 7)
    • Exercice 8 – Créer une liste d'articles à publier avec Brouillon rapide dans mon devoir 6
    • Exercice 9 – Changer le thème de mon site Devoir 9
    • Exercice 10 – Modifier quelques éléments de contenu du modèle de site Astra du devoir 10

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.

  • page portfolio/tests/index.html (les href entre parenthèses ne font pas partie du titre, ils indiquent vers quoi lier)
    • Test 1 – Courte description de votre test personnel 1 (href="test1.html")
    • Test 2 – Courte description de votre test personnel 2 (href="test2.html")
    • Test 3 – Courte description de votre test personnel 3 (href="test3.html")

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).

Fichier /portfolio/css/styles.css (5 %)

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!

Contenu publié avec WordPress (CETTE SECTION N'EST PAS ENCORE À JOUR POUR L'AUTOMNE 2020)

  • Créer un site web avec des articles de blogue à l'aide du gestionnaire de contenu WordPress en vous assurant de répondre aux critères suivants :
  • votre site doit contenir au moins trois pages statiques (dont la page d'accueil);
  • la page d'accueil du site WordPress doit inclure un item de menu menant vers les pages HTML avec Portfolio comme item principal et « devoirs », « exercices », « tests » et « examens » en sous-menu sous Portfolio (Liens personnalisés dans les menus WordPress);
  • votre site doit contenir au moins 10 articles :
    • répartis à raison de deux articles par mois, du mois d'août au mois de décembre;
    • répartis parmi trois catégories (3,3,4), ayant un lien entre elles;
    • chaque articles doit avoir deux à cinq mots clés (étiquettes).
  • les articles doivent contenir au minimum les éléments suivants :
    • un titre accrocheur et descriptif du contenu;
    • une image mise en avant (ou à la Une) (créez-vous un modèle dans PowerPoint aux dimensions de 50,8cm X 13,229cm. Vous devrez remettre votre fichier PowerPoint.);
    • au moins deux sous-titres h2;
    • au moins deux courts paragraphes par sous-titre h2;
    • au moins une liste à puces ou une liste numérotée;
    • au moins une image insérée par la galerie d'images;
    • quelques blocs de l'éditeur de bloc que vous explorez.
  • votre site doit avoir un menu principal :
    • contenant les liens vers vos pages WordPress
    • contenant un lien vers vos trois catégories d'articles;
    • contenant une section nommée PFI qui mène vers vos trois pages HTML à la main.
  • votre site doit avoir un des thèmes suivants : Astra, GeneratePress, Kadence ou OceanWP activé;
  • utilisez l'outil Personnaliser pour changer l'apparence de votre site (couleurs, polices, etc.)

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.

Grille d'évaluation

Critères d'évaluation Pondération
Pages HTML à la main 10 %
Fichier et règles CSS 5 %
Site WordPress et images 25 %

Exemples de sujets

Techniques de bureautique

Gestion

  • Utiliser le blogue comme outil de service à la clientèle
  • Le contenu doit-il forcément servir à promouvoir la consommation?
  • Travailleurs autonomes : apprenez à créer du contenu!

Technologie

  • Les particularités des navigateurs les plus populaires
  • HTML et CSS « à la main » ou avec un gestionnaire de contenu?
  • « Tout le monde devrait apprendre à coder », projet de société ou lubie inutile?
  • Outils essentiels à la création de contenu
  • Outils pratiques pour mieux gérer les médias sociaux

Communication

  • Comment créer du contenu « evergreen »
  • Qu'est-ce qu'une bonne stratégie de contenu?
  • Comment créer un calendrier de publication efficace?
  • Entrevue avec un(e) créateur de contenu (ou autre acteur du Web)

Sciences humaines et sociales

Anthropologie

  • Méthodes d'observation du comportement de l'utilisateur dans son milieu (in the wild)
  • Méthodes de recherche utiles à l'analyse de tâches

Économie

  • Les influenceurs font-ils la promotion de la surconsommation?
  • Comment les médias traditionnels peuvent-ils survivre aux médias sociaux?

Histoire

  • L'histoire d'Internet et du Web
  • L'évolution d'HTML et de CSS et perspectives futures
  • L'histoire du média social de votre choix (Facebook, Instagram, LinkedIn, Pinterest, Reddit, SnapChat, Twitter, YouTube)

Psychologie

  • Comment rendre un site web persuasif
  • La cyberdépendance : fléau du 21e siècle?
  • Bloguer et créer du contenu pour stimuler la lecture
  • Méthodes d'analyse des besoins du visiteur (ou du lecteur)
  • Comment prévenir ou guérir le FOMO (Fear Of Missing Out)

Sciences politiques

  • Le Web 2.0 a-t-il servi à promouvoir la démocratie?
  • Médias sociaux et « alernative facts » : à chacun ses faits?

Sociologie

  • La cyberintimidation peut-elle être contrée ou est-elle une fatalité?
  • L'accessibilité du Web est-elle une option ou une obligation morale?
Report abuse