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

É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 pertinent à une thématique claire que vous pouvez diviser en trois catégories bien claires.

Consignes à suivre

Mini site HTML à la main

  • Créer un mini site web d'au moins trois pages, écrites en HTML « à la main »;
  • Les trois pages doivent pointer vers le même fichier CSS avec la balise link;
  • Les pages statiques 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;
    • une liste à puces avec liens hypertextes servant de navigation vers les deux autres pages;
    • au moins trois h2 avec des sous-titres clairs et pertinents au sujet de chaque page;
    • au moins un paragraphe de texte associé à chaque sous-titre h2;
    • au moins une image de 800px de largeur par 450px de hauteur sur chacune des trois 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 liste à puces ou une liste numérotée sur une de vos pages;
    • au moins une vidéo YouTube de votre choix insérée grâce au code d'intégration de YouTube (effacez la largeur et la hauteur du code iframe s'il y en a);
    • un élément div avec une classe "video" soit envelopper le iframe de la vidéo YouTube;
    • un commentaire incluant le nombre de mots de la page (utilisez Word pour compter);
    • un footer incluant un paragraphe, qui lui-même inclut une entité HTML copy, espace l'année, espace votre nom complet, espace un ndash, espace le code du cours 412-Z21-LG;

Fichier CSS des trois pages à la main

Le fichier CSS des trois pages à la main doit inclure les règles requises pour changer au moins les éléments suivants :

  • le corps de la page fait 60% de large et il est centré;
  • couleur d'arrière-plan de la page en utilisant le code de couleur RGB ou HSL;
  • couleur de l'élément h1 en utilisant le code de couleur RGB ou HSL;
  • police de caractère Bookman Old Style, sinon Times New Roman, sinon serif pour la page au complet;
  • police de caractères Google Fonts de votre choix pour les titres h1 à h6, avec alternatives Arial et sans-serif dans votre code, au cas où ça ne fonctionnerait pas;
  • l'élément figure a une largeur de 80%, il est centré dans la page, une bordure noire pleine de 1px d'épaisseur, une couleur d'arrière-plan blanc en hexadécimal et une marge interne de 10px;
  • l'élément img à l'intérieur de l'élément figure a une largeur de 100% de son conteneur;
  • la classe video (qui cible l'élément div) doit avoir une largeur de 80% ainsi que des marges de 20px au-dessus et en-dessous et être centré dans la page;
  • l'élément iframe doit avoir une largeur de 100% de son conteneur.

Vos trois pages web en HTML à la main, ainsi que votre feuille de styles CSS doivent être téléversés sur votre serveur web sous un dossier nommé « pfi ». Au moins une des trois images doit être nommée index.html (votre page d'accueil). Les deux autres seront accessibles par les hyperliens sur vos pages.

Contenu publié avec WordPress

  • 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 au moins trois hyperliens vers les pages HTML;
  • 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.
  • 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 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 le thème GeneratePress 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 (maximum 600 mots total, donc un article de 600 mots ou deux de 300) sur un sujet de votre choix.

Grille d'évaluation

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

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