Catégories
FCIL FCIL-cours

Personnaliser un dessin vectoriel

Dans ce cours, vous allez apprendre à utiliser des outils en ligne vous permettant de modifier un dessin vectoriel. Vous pourrez ainsi envisager de créer des animations simple image par image.

Cette animation a été réalisée par Wilfried, un élève de la classe passerelle du lycée La Fayette.

Utiliser Vecta pour personnaliser un dessin

Dans le tuto ci-dessous, vous allez apprendre à utiliser Vecta, un éditeur vectoriel en ligne pour retoucher le dessin d’un avatar très simple.

Voici le personnage tel qu’il sera, une fois les retouches terminées :

Avant

Après

Le tutoriel complet

Un tutoriel en ligne vous permet, pas à pas, de prendre en main l’application Vecta.

Quand votre personnage sera prêt, vous pourrez créer des animations simples, ajouter des textes et plein d’autres effets. Nous verrons comment faire dans un prochain cours.

Catégories
FCIL FCIL-cours

Personnaliser un gabarit de portfolio HTML

Vous avez commencé à produire des photomontages intéressants sur le thème de la pandémie à laquelle le monde actuel est confronté. Vous avez utilisé l’outil Photo Creator pour réaliser ces images. Vous avez sauvegardé vos productions sur votre poste de travail ou sur un support amovible pour pouvoir travailler chez vous.

Si vous ne l’avez pas fait, vous pourrez quand même réaliser cette activité en téléchargeant une sélection de photomontages mis à votre disposition.

Il s’agit maintenant de publier sur un document HTML (un site) une sélection des photomontages réalisés en classe. Pour cela vous allez utiliser un gabarit de portfolio pré-paramétré. Consultez le sommaire ci-dessous pour avoir une vision claire de toutes les étapes à suivre.

Vous allez intégrer 9 images dans une galerie de photos, dans la page d’accueil d’un site. Vous aurez également à présenter l’outil Photo Creator ainsi que votre sélection d’images. Des textes seront mis à votre disposition pour compléter en partie le gabarit du portfolio.

Observer le gabarit de portfolio

En cliquant sur le bouton ci-dessous vous accéder au modèle du portfolio à personnaliser. Prenez le temps d’examiner comment se présente ce type de site. Observez, par exemple, comment les zones des images réagissent au clic sur l’une d’elle.

Un site “onepage”

Ce gabarit de site HTML-CSS présente tous les contenus (images et textes) sur une seule page Web. Cette page est découpée en sections auxquelles il est possible d’accéder de deux manières :

  • en “scrollant” verticalement avec la molette de la souris (ou le doigt)
  • en utilisant le menu accessible en cliquant sur le petit “hamburger” (en haut à droite de la page)

Une grille d’images

Fonctionnement de la grille d’images

Les images sont présentées sur une grille de 3 colonnes de 3 images chacune.

En cliquant sur chaque image, celle-ci s’ouvre dans ce qui est nommé une image modale. Cette image modale se referme en cliquant n’importe où dans la fenêtre (et pas seulement sur la petite croix située en haut à droite de la fenêtre).

Une légende s’affiche sous chaque image dans la fenêtre modale. Nous verrons qu’il s’agit en fait du texte alternatif de l’image.

Modifications envisageables ultérieurement pour la grille d’images

Lors d’autres utilisation de ce gabarit, vous n’aurez peut-être pas neuf photos à présenter. Cela a été prévu.

➜ En supprimant 1 image dans chaque colonne, il est envisageable de présenter seulement 6 images (3 colonnes de 2 images).

Une présentation en 2 colonnes est mise à votre disposition dans le dossier du portfolio. Cette maquette présente les images sur une grille de 6 images sur 2 colonnes. En supprimant 1 image dans chaque colonne, il sera donc possible de présenter seulement 4 images (2 colonnes de 2 images).

Un bouton d’appel à l’action

La deuxième section du portfolio, intitulée “Photo Creator”, comporte un bouton d’appel à l’action (nommé bouton CTA pour Call To Action, en anglais). Il s’agit d’un lien stylisé permettant d’accéder à une autre page. Vous aurez à le paramétrer pour qu’il fonctionne correctement car pour le moment ce bouton renvoie en haut de la page du portfolio.

Des barres d’évaluation

Ce portfolio “onepage” présente dans sa deuxième section 3 barres d’évaluation. Elles permettent d’afficher un pourcentage de manière visuelle et elles serviront à évaluer l’outil Photo Creator selon trois critères.

Un pied de page ou “footer”

Le bas de la page de ce site mentionne les acteurs de sa structuration et l’outil utilisé pour sa stylisation.

Personnaliser le portfolio

Pour pouvoir personnaliser ce gabarit de portfolio, je vous invite à effectuer les opérations suivantes :

  • télécharger le dossier du site (bouton ci-dessous)
  • décompresser le dossier .zip (à l’aide de WinRar)
  • supprimer dans le dossier et ses sous-dossiers tous les fichiers .ds_store (visibles sur PC)
  • placer le dossier du site (téléchargé et nettoyé) sur le bureau de votre poste de travail
  • ouvrir le dossier avec Brackets

Vous devez voir s’afficher dans la colonne de gauche de Brakets les éléments encadrés sur la capture d’écran ci-dessus.

En présentiel, le dossier du site sera mis à votre disposition dans le volume “ressources”.

Le fichier intitulé “texte-rubriques.md” vous permet d’accéder aux textes fournis pour les intégration dans l’index.html que vous choisirez.

➜ En fonction du nombre d’images mises à votre disposition, choisissez le fichier index présentant une grille de 2 ou 3 colonnes.

Récupérer les images à intégrer

Les images à intégrer sont une sélection des meilleures images produites par chacune et chacun d’entre vous. J’en ai rassemblé 12 dans un dossier que je vous invite à télécharger. Vous choisirez parmi ces 12 images les 9 images que vous souhaitez intégrer dans le portfolio.

En présentiel, les images sont mises à votre disposition dans l’espace “Ressources”, sur le serveur du lycée.

➜ Plusieurs images ont été recadrées ou redimensionnées pour qu’elles aient toutes les dimensions prévues dans le gabarit proposé. Toutes les images doivent être allégées avant d’être intégrées (voir ci dessous)

Alléger les images à intégrer

Pour pouvoir intégrer vos photomontages dans le porfolio, il va d’abord falloir nécessairement les alléger.

Si, dans Brakets, vous cliquez sur l’image d’exemple nommée img-1.png, vous constaterez qu’elle fait plus de 1,10 MB. Si vous intégrez 10 images dans votre page Web, cela représentera 10 MB à afficher. C’est beaucoup trop lourd pour des connexions de petit débit. Les images s’afficheraient beaucoup trop lentement !

➜ Ceux qui savent comment procéder avec Photoshop peuvent le faire avec cet outil professionnel. Sinon il existe un petit utilitaire en ligne très pratique pour convertir une image png en image jpg plus légère. Vous pouvez convertir toutes vos images à la fois.

➜ Le test réalisé avec le photomontage d’exemple à ramené de poids de l’image à environ 160 KB. 10 photos de 160 KB pèseront 1,6 MB (… un peu plus que le poids d’une seule image png ).

Quand plusieurs images sont converties simultanément, elles sont téléchargées en un seul fichier zip. Il est alors nécessaire de les extraire de l’archive pour les placer dans le dossier « images » du portfolio.

Les images compressées sont toutes précédées d’un numéro entre crochets. Vous pouvez supprimer cette mention si cela vous gêne.

Attention de ne pas utiliser de lettres accentuées et d’espaces dans le nom de vos images.

Ajouter une balise title

Le gabarit fourni ne dispose pas d’une balise <title></title>, de telle sorte qu’aucun message clair n’apparaît dans l’onglet du navigateur. Créez une ligne supplémentaire dans le <head> pour mentionner vos prénoms (voir la capture d’écran ci-dessous).

Intégrer les images allégées et les légender

En examinant comment a été intégrée l’image d’exemple, vous allez pouvoir intégrer vos propres photomontages, en remplaçant chaque lien src="https://..." pointant vers le site placeholder.com par un lien pointant vers le dossier “images” du portfolio, vers l’image de votre choix (src="images/img-1.jpg").

Vous devez mentionner dans le texte alternatif de chaque image (propriété de l’attribut alt) le titre de l’image et les prénoms de leurs créateurs-trices (voir la capture d’écran ci-dessous)

➜ Le contenu entre guillemet proposé dans le gabarit après l’attribut alt de chaque image doit donc être personnalisé par vos soins. Ce texte est affiché en légende de chaque photo quand on clique sur une image et qu’elle s’affiche dans une fenêtre modale.

➜ Vous noterez que le code source de ce gabarit liste les images par colonne et non par rangée. Vous le constaterez dès l’insertion de la deuxième image 😉

L’image d’exemple doit être impérativement remplacée par l’un des photomontages produits.

Remplacer le texte de maquettage

Comme nous l’avons vu plus haut, vous disposez d’un fichier .md dans lequel le texte à intégrer est à récupérer.

➜ Ouvrez le fichier Markdown (fichier texte-rubriques.md) directement dans Brackets pour en récupérer le contenu (sélectionner et copier dans le presse-papier) puis intégrez le texte copié aux endroits appropriés dans le corps du portfolio (fichier index.html ).

Le fichier textes-rubriques.md ouvert dans Brackets

➜ Les textes placés entre astérisques dans le fichier textes-rubriques.md ne sont pas à intégrer dans le code source du portfolio. Ils apportent juste quelques précisions.

Premières intégrations du texte à insérer dans le code source du portfolio

Le format Markdown (.md) remplace progressivement le format Texte (.txt), utilisé pour éditer des documents lisibles sur toutes les plateformes (en particulier les fichiers « lisez-moi » — « read-me » — et les notices d’utilisation des logiciels).

Personnaliser le bouton CTA

À la fin de la première rubrique consacrée à Photo Creator, un bouton d’appel à l’action (Call To Action ou CTA, en anglais) doit permettre de se rendre directement sur le site de la plateforme de photomontage.

Modifiez les paramètres du bouton CTA selon les indications données.

Personnaliser les barres d’évaluation

Je vous propose d’évaluer l’outil Photo Creator en fonction des trois critères suivants :

  • Facilité de prise en main
  • Possibilités créatives
  • Qualité de l’exportation

➜ Observez comment sont codées les 3 barres d’évaluation et modifiez les données du gabarit pour que l’affichage corresponde à votre propre évaluation.

Vous pouvez rajouter d’autres critères et placer chaque barre d’évaluation à la position voulue.

Expliquer ses choix

La dernière section vous oblige à rédiger vous même un texte composé de paragraphes courts. Vous commenterez vos choix concernant les photomontages sélectionnés. Vous apporterez d’éventuelles précisions sur tel ou tel photomontage présenté.

➜ N’oubliez pas d’intégrer votre texte dans les balises HTML qui conviennent !

Compléter le pied de site (footer)

Pour terminer, vous devez signer votre travail en indiquant vos prénom(s) et nom(s), dans la zone affichée en gris clair, en bas du portfolio. Mentionnez également la date à laquelle vous avez terminé votre travail.

Transmettre le dossier du site

Utiliser une clé USB

Il sera nécessaire de me transmettre tout le dossier du site, pour que je puisse évaluer la qualité de votre travail. Si nous nous voyons en présentiel, n’oubliez pas de placer tout le dossier du portfolio sur une clé USB pour le transférer en classe sur le serveur du lycée.

Utiliser WeTransfer (option facultative)

Vous pouvez passer par WeTransfer et mon adresse mail académique (yves.goguely(arobase)ac-clermont.fr) pour me transmettre vos dossiers. Vous êtes obligés de compresser le dossier pour utiliser WeTransfer (idéalement, compressez-le au format zip). Voir la page Consignes générales pour plus de précisions.


Quels sont les usages possibles d’un site du type portfolio ?

Vous venez de personnaliser un gabarit de portfolio permettant de montrer des images légendées et de communiquer plusieurs informations à leur sujet. Vous avez créé un site qui pourrait être mis en ligne. Réfléchissez aux usages que vous pourriez faire de ce type de communication si vous aviez la possibilité de mettre vous-même un tel site en ligne. Nous en parlerons bientôt.

Catégories
FCIL FCIL-cours

Utiliser Photo Creator

Dans ce cours, nous allons voir comment utiliser un outil en ligne conçu pour réaliser des photomontages réalistes : Photo Creator.

Photo Creator permet de composer soi-même des photos en choisissant l’arrière-plan (le décor), les personnages , les animaux et les objets présents dans le cadre de l’image. Tout est positionnable, redimensionnable, superposable, orientable comme on le souhaite.

Une fois la composition de la photo terminée, Photo Creator permet d’exporter les photos en haute résolution pour une publication sur papier ou sur écran.

Illustration de billets d’humeur ou d’actualité, image humoristique ou parodique, photomontage réaliste ou composition fantaisiste : tout est réalisable sans difficulté avec Photo Creator.

Réaliser un premier montage

La vidéo de présentation donne une idée du principe. La prise en main est très intuitive. Il suffit juste de savoir où se trouvent les images et comment régler les détails techniques (taille du plan de travail, format d’exportation, etc.).

Au lancement de Photo Créator, vous allez arriver sur un écran comme celui-ci :

Pour votre premier essai vous pouvez partir d’un modèle proposé par l’application ou créer une nouvelle photo. Partons du modèle avec l’infirmière aux gants bleus.

Vérifiez que les dimensions de l’image sont bien 1280 x 720 pixels (format Wide 16:9).

Composez une image, à partir de celle-ci, en essayant de faire passer un message, une idée, uniquement par la mise en scène du ou des personnages et la disposition des objets dans le décor sélectionné.

Pour conserver l’image sur votre poste de travail, cliquer sur le bouton export et téléchagez l’image à la taille S. Enregistrez-la au format png proposé par défaut.

Pour me montrer l’image que vous avez créée, copiez le lien de l’image et transmettez le moi via Slack. En cliquant dessus, j’accèderai à votre image.

Réaliser une série d’images fortes

En vue de réaliser un diaporama numérique pour montrer votre travail, je vous propose de créer chacun(e) une série d’images (4 à 9 photomontages) sur les difficultés engendrées par le virus SARS-CoV-2. Les thèmes a traiter sont : le confinement, le travail à distance, le couvre-feu, les limitations concernant les fêtes de fin d’année, l’isolement des personnes fragiles, la fermeture des petits commerces, des restaurants et des bars, l’annulation des spectacles, les décès survenus à cause de la pandémie, les positions divergentes des uns et des autres, la surcharge de travail pour le personnel hospitalier, etc.

ATTENTION : n’insérez pas de texte dans vos images !

➜ Transmettez-moi sur Slack les liens vers les images que vous aurez produites, en les accompagnant éventuellement de quelques explications.

Catégories
FCIL FCIL-cours

Intégrer images et dialogues dans un diaporama HTML

Après avoir complété des fiches de renseignement, vous êtes désormais familiarisés avec le code source d’une page HTML. Pour vous familiariser davantage avec ce code, vous allez, au cours de cette activité, manipuler un diaporama HTML.

Construire un scénario de BD

La première étape du travail à produire consiste à rédiger le scénario d’une courte bande dessinée. Pour cela, vous disposez d’un document PDF à compléter sur lequel figurent les personnages de la BD.

Les personnages appartiennent à 3 séries, correspondant chacune à une colorisation particulière du personnage.

➜ Vous pouvez voir les différences en les 3 types de personnages disponibles sur ce diaporama de présentation

Comment utiliser la fiche de scénario

En face de chaque personnage se trouve une zone de dialogue (la bulle) à compléter. Pour chaque personnage, précisez son numéro de série, le numéro de la case dans laquelle il intervient et bien sûr ce qu’il dit.

En distanciel, vous pouvez imprimer chez vous la fiche et la compléter à la main. Cependant, il vous faudra compléter la fiche pdf pour me la transmettre numériquement quand vous aurez terminé.

L’ordre d’apparition des personnages ne doit pas être nécessairement celui dans lequel ils apparaissent sur la fiche de scénario (storyboard).

C’est la raison pour laquelle une case est réservée au numéro d’ordre de la future diapositive.

➜ Pour plus de facilité, je vous invite à découper les personnages présentés en vignettes sur un document supplémentaire à télécharger . Vous pourrez ainsi placer les personnages dans l’ordre qui convient à votre histoire.

La fiche de scénario vous permet d’utiliser 14 cases. Chaque attitude de personnage est utilisable 2 fois (pas nécessairement avec un personnage de la même série…)

Quelle histoire mettre en scène ?

Pour vous aider à trouver un scénario, j’ai réalisé un diaporama exemple. Il s’agit de la version dessinée d’un tutoriel un peu décalé. Vous pouvez, à votre tour, inventer un autre tutoriel. Dans le cas d’un tuto, un seul personnage entre en scène et dialogue avec les lecteurs-spectateurs.

Si vous êtes inspirés, vous pouvez mettre en scène un dialogue entre plusieurs personnages. Faites en sorte qu’on ne se perde pas dans le dialogue et alternez les prises de parole.

La seconde option n’est pas forcément meilleure que la première, elle est juste différente.

Intégrer les personnages et les dialogues dans le diaporama

Une fois votre scénario mis au point, vous allez insérer les personnages choisies dans les diapositives et intégrer les paroles qu’ils prononcent dans le code source du diaporama.

➜ Vous allez travailler sur l’exemple que que vous ai préparé et en adapter le codage à votre scénario. Pour cela il vous faut :

  1. télécharger le diaporama proposé en exemple
  2. décompresser l’archive en .zip sur votre poste de travail (sur PC, utilisez l’application WinRar)
  3. accéder au code source en ouvrant le fichier index.html avec Brackets

Vérifications

Pour travailler efficacement, vous devez avoir placé sur le bureau de votre poste de travail, le dossier intitulé “bd-tuto-exemple”. Vérifiez que dans ce dossier se trouvent bien les éléments suivants :

  • un dossier “css
  • un dossier “img
  • un fichier “index.html
  • un dossier “js
  • un dossier “lib

➜ Vérifiez que tous les personnages disponibles se trouvent bien dans le dossier “img”.

➜ Vérifiez que les dossiers “css”, “js” et “lib” contiennent bien des fichiers

Vérifiez qu’en cliquant 2 fois sur le fichier index, vous pouvez visualiser la bd dans votre navigateur.

Codage

De la même manière que nous avons personnalisé les fiches individuelle lors de l’activité précédente, vous allez pouvoir modifier les liens d’appel des images et insérer les textes dans la bulle de chaque case-diapositive.

Sur la capture d’écran ci-dessus, les flèches oranges indiquent où sont placés les liens d’appels des images. Les flèches bleues indiquent où sont placés les textes à modifier.

Attention de ne pas modifier la balise d’image servant à appeler le trait de bulle (elle est placée juste au dessus de l’autre appel d’image).

Dans la balise image du personnage, vous avez juste à changer le nom du personnage. Choisissez le nom du fichier correspondant au personnage que vous avez sélectionné dans votre scénario (pour la diapositive que vous modifiez).

Astuce : effacez le nom du personnage initial en effaçant aussi le slash qui suit img dans src= »img/nom-personnage.png »… Saisissez un nouveau slash. Brackets vous propose alors toutes les images disponibles dans le dossier img. Choisissez celle qui convient.

Attention, je ne veux pas que vous vous contentiez de changer les dialogues et que vous laissiez les personnages du diaporama d’exemple dans leur ordre initial.

Si vous avez besoin d’ajouter des diapositives, il vous suffit de rajouter à le suite des diapos initiales, par simple copier-coller, une portion de code placée entre <section> et </section>.

Rappel sur les chemins d’accès

J’ai constaté que la notion de chemin d’accès à un fichier dans une arborescence de dossiers n’est encore un concept familier pour tous. Je renvoie donc ceux et celles qui ont besoin de clarifier ce concept vers un cours en ligne pour débutants. Cliquez sur le bouton ci-dessous et lisez attentivement le cours.

Les chemins d’accès dans le code source

Vous trouverez des chemins d’accès à des fichiers dans de nombreux endroits du code source d’une page Web. En premier lieu, vous en trouverez dans le head (l’entête du code source). Examinez le code source du diaporama que je vous demande de personnaliser, et repérez la ligne de code suivante (dans le head) :

<link rel="stylesheet" href="css/style.css">

css/style.css est un chemin d’accès, placé ici entre guillemets, dans une instruction CSS. Il s’agit, en clair (traduction en langage courant), de l’indication suivante : fichier “style.css” situé dans le dossier “css”.

Dans la ligne de code suivante :

<link rel="stylesheet" href="css/theme/white.css">

css/theme/white.css est un chemin d’accès, placé ici entre guillemets, dans une instruction CSS. Il s’agit, en clair (traduction en langage courant), de l’indication suivante : fichier “white.css” situé dans le dossier “theme”, situé dans le dossier “css”.

Dans la ligne de code suivante :

<img src="img/unsubscribed-3.png" alt="">

img/unsubscribed-3.png est un chemin d’accès, placé ici entre guillemets, dans un élément HTML. Il s’agit, en clair, de l’indication suivante : fichier “unsubscribed-3.png” situé dans le dossier “img”.

Remarques sur le scénario et le codage

Scénario

➜ Une petite touche humoristique est la bienvenue. Cela n’empêche pas de traiter des sujets intéressants, des questions de société ou d’actualité. Ce type de publication peut faire passer des messages profonds. Faites donc preuve d’originalité !

Je vous invite à bien contrôler (ou faire contrôler) votre orthographe.

Codage

➜ Pour une présentation du texte plus agréable à lire et plus professionnelle, n’hésitez pas à utiliser la balise <br> (break) qui permet de forcer le retour à la ligne dans un même paragraphe.

En effet, le fait de sauter des lignes dans Brackets (dans le code source) n’a pas d’incidence sur la présentation du texte. Vous pouvez voir des exemples dans le code source diaporama “Le tuto qui tue”.

➜ Utilisez aussi le code &nbsp;qui correspond à un espace insécable. On place ce code le plus souvent entre un signe de ponctuation double ( : ; ? ! ) et le mot qui précède.

Il est vrai que je n’ai pas utilisé ce code dans le diaporama que vous devez personnaliser ! J’en ai donc rajouté deux, pour vous montrer comment faire, sur la capture d’écran ci-dessous.

La façon dont vous aurez utilisé ces astuces sera prise en compte lors de l’évaluation.

Rendu des diaporamas modifiés

Pour me faire parvenir votre diaporama finalisé, vous allez utiliser Slack et me transférer en pièce jointe le seul fichier index.html modifié.

Je n’ai besoin que de l’index pour évaluer votre travail. Je le placerai dans un dossier semblable au votre et pourrai voir s’afficher votre travail sur mon navigateur.

Catégories
FCIL FCIL-cours

Consignes générales FCIL

Le cours d’ETN peut se dérouler occasionnellement en distanciel, principalement sur la plateforme Slack. Vous trouverez ici les consignes générales concernant le déroulement des séances.

Se connecter à la plateforme Slack

J’utilise la plateforme Slack pour communiquer à distance avec la classe en demi-groupe. Le groupe 1 de la classe FCIL 2020-21 acccède à l’espace de partage à cette adresse :

https://app.slack.com/client/T019CN775JT/C019LNTTMT8

Il est nécessaire d’avoir reçu une invitation pour pouvoir se connecter à Slack. Si vous n’en avez pas reçue, contactez-moi par mail, à mon adresse académique (yves.goguely(arobase)ac-clermont.fr).

Prendre connaissance des cours

Trouver un cours

Mes cours d’ETN sont disponibles en ligne sur ce site. Consultez l’index du site et/ou directement l’index FCIL et cliquez sur le lien correspondant au cours que vous cherchez.

Trouver une consigne particulière

Sur tous les cours publiés vous trouverez un sommaire interactif permettant d’accéder à tous les chapitres et à toutes les sections du cours. Consultez le sommaire et cliquez sur le chapitre ou la section qui vous intéresse.

Un bouton noir et rond, avec une flèche vers le haut, placé en bas à droite des pages du cours permet de revenir en haut de page (là où se trouve le sommaire).

Utiliser l’éditeur de code Brackets

Pour effectuer le travail demandé, vous avez besoin d’utiliser un navigateur (Firefox) et un éditeur de code (Brakets).

➜ Je vous invite à installer Brackets sur vos postes personnels (PC, Mac ou Linux).

L’utilisation et la personnalisation de Brackets sont présentées sur plusieurs cours disponibles sur ce site.

Utiliser et personnaliser Brackets

Utiliser les extensions de Brackets

Ces cours sont dispensés dans le cadre de la formation Fondamentaux de la Création de Site (FCS).

Récupérer les fichiers des exercices

Le cours en ligne vous permet de télécharger tous les fichiers dont vous avez besoin pour travailler. Ces fichiers sont compressés en .zip et doivent donc être décompressés sur vos postes de travail avant de pouvoir être utilisés.

Installez et utilisez les aplications WinRar ou WinZip (en version d’évaluation gratuite) pour décompresser facilement les archives .zip

➜ Quand le cours se déroule en présentiel, au lycée La Fayette, les fichiers nécessaires sont mis à votre disposition dans l’espace “ressources”, accessible depuis votre session de travail.

Rendre les exercices terminés

En distanciel, lisez bien les consignes transmises. Vous utiliserez principalement 2 canaux :

  • La plateforme Slack (sur laquelle se déroulent les cours) pour les fichiers légers
  • La plateforme WeTransfer pour les fichiers lourds, en utilisant mon adresse académique (prenom.nom@ac-clermont.fr)

En présentiel, les rendus se font dans l’espace “commun”, dans les dossiers prévus pour cela.

Catégories
FCIL FCIL-cours

Repérer la structure HTML et manipuler le code source

Dans ce cours, au fil des activités proposées, vous aller vous familiariser avec le code source d’une page HTML. En personnalisant des fiches individuelles, vous allez progressivement vous repérer dans la structure HTML d’une page Web. Enfin, pour donner à l’ensemble un look plus sympathique, vous aller insérer une image réalisée par vos soin dans chaque fiche à personnaliser.

Pour effectuer le travail demandé, vous allez avoir besoin d’utiliser un navigateur (Firefox) et un éditeur de code (Brakets). Ces deux logiciels sont installés sur les postes de la salle 17 du lycée La Fayette.

➜ je vous recommande d’installer Brackets sur vos postes personnels (PC, Mac ou Linux) pour pouvoir réaliser les exercices demandés si nous travaillons en distanciel.

Personnaliser une page HTML

Le contenu principal de ce cours se trouve à l’adresse suivante : http://graphizm.fr/fcil/identifier-structure-page-HTML/. Ce cours se prolonge par la production d’un travail à rendre. (voir plus bas)

Un autre document est mentionné dans le cours. Il s’agit d’un complément d’information sur la structure élémentaire d’une page HTML. En voici l’adresse : http://graphizm.fr/fcil/schematisations-structure-html/

Compléter une fiche de renseignement

Vous trouverez à la fin du cours intitulé Identifier la structure d’une page HTML toutes les instructions à suivre pour effectuer le travail de personnalisation des fiches individuelles pré-codées.

En présentiel, le travail s’effectue en groupe de 2 ou 3 élèves. Les équipiers veillent à la qualité du travail réalisé par chaque membre de l’équipe.

En distanciel, le travail s’effectue individuellement

Voir les consignes générales pour plus de précisions.

Ce travail sera noté. Une correction de l’ensemble des fiches aura lieu et une adresse URL vous sera communiquée pour consulter le fichier finalisé.

Catégories
FCIL FCIL-cours FCS FCS1-cours

Contenu d’un dossier de page Web

Dans ce cours vous allez repérer quels sont les composantes numériques d’un site Web statique, en examinant le contenu d’un dossier de site.

Identifier le fichier index.html

Tous les sites Web ont une page d’accueil. Cette page est généralement nommée index.html. On désigne généralement un fichier enregistré au format HTML sous le nom de page HTML ou page Web.

Une page Web est donc un document enregistré au format HTML dans lequel des informations de plusieurs types sont codées. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants :

  • la ou les feuille(s) de style associées
  • la ou les images insérée(s)
  • le ou les script(s) utilisé(s)

La ou Les feuilles de style se rapportent au codage de l’apparence d’un site. Le ou les scripts se rapportent au codage de l’animation des composants d’un site.

Chacun de ces fichier n’est pas obligatoirement associé à une page Web mais la plupart des pages publiées en intègrent un ou plusieurs (notamment les 2 premiers).

Repérer le contenu d’un dossier de site

Pour organiser l’édition et la publication des pages Web, on place de préférence ces fichiers dans des dossiers nommés de façon explicite. On utilise le plus souvent les dossiers suivants :

  • un dossier nommé css (ou styles) pour y placer les feuilles de style au format .css
  • un dossier nommé img (ou images) pour y placer les images aux formats .jpg, .png ou .gif
  • un dossier nommé js (ou scripts) pour y placer les scripts au format .js

Tous ces dossiers sont ensuite placés dans un dossier qu’on nomme communément dossier du site (pour le désigner entre designers et développeurs). Ce dossier porte toutefois un nom (informatiquement) et ce nom est utilisé dans l’URL du site en question.

Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.

Par exemple, le documents que vous allez ouvrir dans un instant est accessible à cette adresse : http://graphizm.fr/contenu-dossier-page-web/

  • Quel est le nom du dossier dans lequel ce document se trouve placé ?
  • Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document ?

➜ Manipulez le document ci-dessous pour découvrir plus de détails au sujet du contenu d’un site Web.

Si d’autres ressources doivent être associées à une page Web, il est possible de créer d’autres dossiers pour les classer convenablement. Il est ainsi possible d’utiliser un dossier fonts ou fontes pour y placer des polices de caractères.

Affichez le code source du document ci-dessus et répondez aux questions suivantes :

  • Quel est le nom du dossier dans lequel se trouve le fichier intitulé style.css ?
  • Quel est le numéro de la ligne où se trouve l’indication de la réponse à la question précédente ?
  • Quel est le nom du dossier dans lequel se trouve le fichier intitulé index.js ?
  • Quel est le numéro de la ligne où se trouve l’indication de la réponse à la question précédente ?

Le type de page Web dont il est question ici est nommée page Web “statique” et le site qu’elle présente est nommé ”site statique”.

Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s’agit d’une page HTML dont le contenu ne varie pas en fonction de la demande de l’utilisateur. On oppose les pages statiques aux pages dynamiques.

Faites une recherche sur le Web en utilisant la requête suivante : page web statique vs page web dynamique. Cela vous amènera très probablement à éclaircir plusieurs autres concepts en rapport avec la publication Web.


Manipuler le code source

Cette manipulation est optionnelle. Dans les modules au cours desquels seul l’aspect théorique est abordé, cette activité est proposée en autonomie à ceux qui souhaitent aller plus loin dans la pratique.

Pour examiner le contenu d’un dossier de site Web, téléchargez le fichier pangrammes.zip, décompressez-le et placez-le sur le bureau de votre poste de travail. Le site correspondant (fcs/pangrammes/) est consultable en ligne.

➜ Pour continuer, vous aurez besoin d’utiliser l’éditeur de code Brackets ou Visual Studio Code.

Des précisions vous sont apportées pour la suite de la manipulation dans le cours accessible à l’adresse suivante : graphizm.fr/fcs/manipulation-code-source

Activité “Site en boîte”

Lors des cours en présentiel, une activité permet d’approfondir la question du contenu détaillé d’un dossier de site Web. Elles est proposée (ou non) en fonction des prérequis des participants.

Pour faire le lien entre les découvertes effectuées en présentiel et la réalité virtuelle à laquelles elles correspondent, les participants sont invités à télécharger le dossier site-en-boite. Le site correspondant (fcs/site-en-boite/) est consultable en ligne

En savoir plus

  • Gérer les fichiers d’un site Web sur developer.mozilla.org
  • Comment organiser ses fichiers sur apprendre-html-et-css.com . Les nombreuses fautes d’orthographe présentes sur les pages de ce site nous montrent l’importance d’une relecture des textes avant publication…