{"id":3760,"date":"2020-12-16T21:36:35","date_gmt":"2020-12-16T20:36:35","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=3760"},"modified":"2024-09-25T18:34:49","modified_gmt":"2024-09-25T16:34:49","slug":"personnaliser-un-gabarit-de-portfolio-html","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/","title":{"rendered":"Personnaliser un gabarit de portfolio HTML"},"content":{"rendered":"\n<p>Vous avez commenc\u00e9 \u00e0 produire des photomontages int\u00e9ressants sur le th\u00e8me de la pand\u00e9mie \u00e0 laquelle le monde actuel est confront\u00e9. Vous avez utilis\u00e9 l&rsquo;outil Photo Creator pour r\u00e9aliser ces images. <strong>Vous avez sauvegard\u00e9 vos productions<\/strong> sur votre poste de travail ou sur un support amovible pour pouvoir travailler chez vous.<\/p>\n\n\n\n<p><em>Si vous ne l&rsquo;avez pas fait, vous pourrez quand m\u00eame r\u00e9aliser cette activit\u00e9 en t\u00e9l\u00e9chargeant une s\u00e9lection de photomontages mis \u00e0 votre disposition.<\/em><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Il s&rsquo;agit maintenant de <strong>publier <strong>sur un document HTML<\/strong> (un site) une s\u00e9lection des photomontages r\u00e9alis\u00e9s en classe. <\/strong> Pour cela vous allez utiliser un gabarit de portfolio pr\u00e9-param\u00e9tr\u00e9. Consultez le sommaire ci-dessous pour avoir une vision claire de toutes les \u00e9tapes \u00e0 suivre.<\/p>\n\n\n\n<p>Vous allez  <strong>int\u00e9grer 9 images dans une galerie de photos<\/strong>, dans la page d&rsquo;accueil d&rsquo;un site. Vous aurez \u00e9galement \u00e0 <strong>pr\u00e9senter l&rsquo;outil Photo Creator<\/strong> <strong>ainsi que votre s\u00e9lection d&rsquo;images<\/strong>. Des textes seront mis \u00e0 votre disposition pour compl\u00e9ter en partie le gabarit du portfolio.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Observer_le_gabarit_de_portfolio\" >Observer le gabarit de portfolio<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Un_site_%E2%80%9Conepage%E2%80%9D\" >Un site \u201conepage\u201d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Une_grille_dimages\" >Une grille d&rsquo;images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Un_bouton_dappel_a_laction\" >Un bouton d&rsquo;appel \u00e0 l&rsquo;action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Des_barres_devaluation\" >Des barres d&rsquo;\u00e9valuation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Un_pied_de_page_ou_%E2%80%9Cfooter%E2%80%9D\" >Un pied de page ou \u201cfooter\u201d<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Personnaliser_le_portfolio\" >Personnaliser le portfolio<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Recuperer_les_images_a_integrer\" >R\u00e9cup\u00e9rer les images \u00e0 int\u00e9grer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Alleger_les_images_a_integrer\" >All\u00e9ger les images \u00e0 int\u00e9grer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Ajouter_une_balise_title\" >Ajouter une balise title<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Integrer_les_images_allegees_et_les_legender\" >Int\u00e9grer les images all\u00e9g\u00e9es et les l\u00e9gender<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Remplacer_le_texte_de_maquettage\" >Remplacer le texte de maquettage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Personnaliser_le_bouton_CTA\" >Personnaliser le bouton CTA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Personnaliser_les_barres_devaluation\" >Personnaliser les barres d&rsquo;\u00e9valuation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Expliquer_ses_choix\" >Expliquer ses choix<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Completer_le_pied_de_site_footer\" >Compl\u00e9ter le pied de site (footer)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Transmettre_le_dossier_du_site\" >Transmettre le dossier du site<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Utiliser_une_cle_USB\" >Utiliser une cl\u00e9 USB<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Utiliser_WeTransfer_option_facultative\" >Utiliser WeTransfer (option facultative)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/graphizm.fr\/greta\/fcil\/personnaliser-un-gabarit-de-portfolio-html\/#Quels_sont_les_usages_possibles_dun_site_du_type_portfolio\" >Quels sont les usages possibles d&rsquo;un site du type portfolio&nbsp;?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Observer_le_gabarit_de_portfolio\"><\/span>Observer le gabarit de portfolio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>En cliquant sur le bouton ci-dessous vous acc\u00e9der au mod\u00e8le du portfolio \u00e0 personnaliser. <strong>Prenez le temps d&rsquo;examiner comment se pr\u00e9sente<\/strong> <strong>ce type de site<\/strong>. Observez, par exemple, comment les zones des images r\u00e9agissent au clic sur l&rsquo;une d&rsquo;elle.<\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/graphizm.fr\/fcil\/portfolio-photomontages\/index-3cols.html\" style=\"border-radius:9px\" target=\"_blank\" rel=\"noreferrer noopener\">Voir le gabarit du portfolio<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/portfolio-photomontages-index.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"1024\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/portfolio-photomontages-index-501x1024.png\" alt=\"\" class=\"wp-image-3775\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/portfolio-photomontages-index-501x1024.png 501w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/portfolio-photomontages-index-294x600.png 294w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/portfolio-photomontages-index.png 734w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_site_%E2%80%9Conepage%E2%80%9D\"><\/span>Un site \u201conepage\u201d<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ce gabarit de site HTML-CSS pr\u00e9sente tous les contenus (images et textes) sur <strong>une seule page Web. Cette page est d\u00e9coup\u00e9e en sections<\/strong> auxquelles il est possible d&rsquo;acc\u00e9der de deux mani\u00e8res&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>en \u201cscrollant\u201d verticalement avec la molette de la souris (ou le doigt)<\/li><li>en utilisant le menu accessible en cliquant sur le petit \u201chamburger\u201d (en haut \u00e0 droite de la page)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Une_grille_dimages\"><\/span>Une grille d&rsquo;images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Fonctionnement de la grille d&rsquo;images<\/h4>\n\n\n\n<p>Les images sont pr\u00e9sent\u00e9es sur <strong>une grille de 3 colonnes de 3 images chacune<\/strong>. <\/p>\n\n\n\n<p>En cliquant sur chaque image, celle-ci s&rsquo;ouvre dans ce qui est nomm\u00e9 <strong>une image modale<\/strong>. Cette image modale se referme en cliquant n&rsquo;importe o\u00f9 dans la fen\u00eatre (et pas seulement sur la petite croix situ\u00e9e en haut \u00e0 droite de la fen\u00eatre).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Une l\u00e9gende s&rsquo;affiche sous chaque image dans la fen\u00eatre modale.<\/strong> Nous verrons qu&rsquo;il s&rsquo;agit en fait du texte alternatif de l&rsquo;image.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Modifications envisageables ult\u00e9rieurement pour la grille d&rsquo;images<\/h4>\n\n\n\n<p>Lors d&rsquo;autres utilisation de ce gabarit, vous n&rsquo;aurez peut-\u00eatre pas neuf photos \u00e0 pr\u00e9senter. Cela a \u00e9t\u00e9 pr\u00e9vu.<\/p>\n\n\n\n<p>\u279c En supprimant 1 image dans chaque colonne, il est envisageable de pr\u00e9senter seulement 6 images (3 colonnes de 2 images).<\/p>\n\n\n\n<p>Une <a rel=\"noreferrer noopener\" href=\"https:\/\/graphizm.fr\/fcil\/portfolio-photomontages\/index-2cols.html\" target=\"_blank\">pr\u00e9sentation en 2 colonnes<\/a> est mise \u00e0 votre disposition dans le dossier du portfolio. Cette maquette pr\u00e9sente les images sur <strong>une grille de 6 images sur 2 colonnes<\/strong>. En supprimant 1 image dans chaque colonne, il sera donc possible de pr\u00e9senter seulement 4 images (2 colonnes de 2 images).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_bouton_dappel_a_laction\"><\/span>Un bouton d&rsquo;appel \u00e0 l&rsquo;action<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La deuxi\u00e8me section du portfolio, intitul\u00e9e \u201cPhoto Creator\u201d, comporte un bouton d&rsquo;appel \u00e0 l&rsquo;action (nomm\u00e9 bouton CTA pour <em>Call To Action<\/em>, en anglais). <strong>Il s&rsquo;agit d&rsquo;un lien stylis\u00e9 permettant d&rsquo;acc\u00e9der \u00e0 une autre page<\/strong>. Vous aurez \u00e0 le param\u00e9trer pour qu&rsquo;il fonctionne correctement car pour le moment ce bouton renvoie en haut de la page du portfolio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Des_barres_devaluation\"><\/span>Des barres d&rsquo;\u00e9valuation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ce portfolio \u201conepage\u201d pr\u00e9sente dans sa deuxi\u00e8me section 3 barres d&rsquo;\u00e9valuation. Elles permettent d&rsquo;afficher un pourcentage de mani\u00e8re visuelle et elles serviront \u00e0 \u00e9valuer l&rsquo;outil Photo Creator selon trois crit\u00e8res.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_pied_de_page_ou_%E2%80%9Cfooter%E2%80%9D\"><\/span>Un pied de page ou \u201cfooter\u201d<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le bas de la page de ce site mentionne les acteurs de sa structuration et l&rsquo;outil utilis\u00e9 pour sa stylisation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_le_portfolio\"><\/span>Personnaliser le portfolio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Pour pouvoir personnaliser ce gabarit de portfolio, je vous invite \u00e0 effectuer les op\u00e9rations suivantes&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>t\u00e9l\u00e9charger le dossier du site (bouton ci-dessous)<\/li><li>d\u00e9compresser le dossier .zip (\u00e0 l&rsquo;aide de WinRar)<\/li><li>supprimer dans le dossier et ses sous-dossiers tous les fichiers .ds_store (visibles sur PC)<\/li><li>placer le dossier du site (t\u00e9l\u00e9charg\u00e9 et nettoy\u00e9) sur le bureau de votre poste de travail<\/li><li>ouvrir le dossier avec Brackets<\/li><\/ul>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/graphizm.fr\/fcil\/portfolio-photomontages.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger le dossier du site<\/a><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages-1024x444.jpg\" alt=\"\" class=\"wp-image-3780\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages-1024x444.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages-600x260.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages-768x333.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages-1200x520.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/dossier-porfolio-photomontages.jpg 1406w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c <strong>Vous devez voir s&rsquo;afficher dans la colonne de gauche de Brakets les \u00e9l\u00e9ments encadr\u00e9s<\/strong> sur la capture d&rsquo;\u00e9cran ci-dessus.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>En pr\u00e9sentiel<\/strong>, le dossier du site sera mis \u00e0 votre disposition dans le volume \u201cressources\u201d.<\/p>\n\n\n\n<p>Le fichier intitul\u00e9 \u201ctexte-rubriques.md\u201d vous permet d&rsquo;acc\u00e9der aux textes fournis pour les int\u00e9gration dans l&rsquo;index.html que vous choisirez.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">\u279c En fonction du nombre d&rsquo;images mises \u00e0 votre disposition, <strong>choisissez le fichier index pr\u00e9sentant une grille de 2 ou 3 colonnes<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recuperer_les_images_a_integrer\"><\/span>R\u00e9cup\u00e9rer les images \u00e0 int\u00e9grer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les images \u00e0 int\u00e9grer sont une s\u00e9lection des meilleures images produites par chacune et chacun d&rsquo;entre vous. J&rsquo;en ai rassembl\u00e9 12 dans un dossier que je vous invite \u00e0 t\u00e9l\u00e9charger. <strong>Vous choisirez parmi ces 12 images les 9 images que vous souhaitez int\u00e9grer dans le portfolio.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link\" href=\"https:\/\/graphizm.fr\/fcil\/photomontages-confinement.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les photomontages<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">En pr\u00e9sentiel, les images sont <strong>mises \u00e0 votre disposition dans l&rsquo;espace \u201cRessources\u201d<\/strong>, sur le serveur du lyc\u00e9e.<\/p>\n\n\n\n<p>\u279c Plusieurs images ont \u00e9t\u00e9 recadr\u00e9es ou redimensionn\u00e9es pour qu&rsquo;elles aient toutes les dimensions pr\u00e9vues dans le gabarit propos\u00e9. <strong>Toutes les images doivent \u00eatre all\u00e9g\u00e9es avant d&rsquo;\u00eatre int\u00e9gr\u00e9es<\/strong> (voir ci dessous)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alleger_les_images_a_integrer\"><\/span>All\u00e9ger les images \u00e0 int\u00e9grer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Pour pouvoir int\u00e9grer vos photomontages dans le porfolio, il va d&rsquo;abord falloir n\u00e9cessairement les all\u00e9ger.<\/p>\n\n\n\n<p>Si, dans Brakets, vous cliquez sur l&rsquo;image d&rsquo;exemple nomm\u00e9e img-1.png, vous constaterez qu&rsquo;elle fait plus de 1,10 MB. Si vous int\u00e9grez 10 images dans votre page Web, cela repr\u00e9sentera 10 MB \u00e0 afficher. C&rsquo;est beaucoup trop lourd pour des connexions de petit d\u00e9bit. Les images s&rsquo;afficheraient beaucoup trop lentement&nbsp;!<\/p>\n\n\n\n<p>\u279c Ceux qui savent comment proc\u00e9der avec Photoshop peuvent le faire avec cet outil professionnel. <strong>Sinon il existe <a rel=\"noreferrer noopener\" href=\"https:\/\/imagetojpgcyborg.com\/\" target=\"_blank\">un petit utilitaire en ligne tr\u00e8s pratique<\/a> pour convertir une image png en image jpg plus l\u00e9g\u00e8re<\/strong>. Vous pouvez convertir toutes vos images \u00e0 la fois.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg-1024x575.jpg\" alt=\"\" class=\"wp-image-3786\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg-1024x575.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg-600x337.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg-768x431.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/12\/convert_image_to_JPG_Cyborg.jpg 1174w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c Le test r\u00e9alis\u00e9 avec le photomontage d&rsquo;exemple \u00e0 ramen\u00e9 de poids de l&rsquo;image \u00e0 environ 160 KB. 10 photos de 160 KB p\u00e8seront 1,6 MB (&#8230; un peu plus que le poids d&rsquo;une seule image png ).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2-1024x435.jpg\" alt=\"\" class=\"wp-image-4358\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2-1024x435.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2-600x255.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2-768x326.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2-1200x510.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/Convert_image_to_JPG_Cyborg_2.jpg 1275w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Quand plusieurs images sont converties simultan\u00e9ment, elles sont t\u00e9l\u00e9charg\u00e9es en un seul fichier zip.<\/strong> Il est alors n\u00e9cessaire de les extraire de l&rsquo;archive pour les placer dans le dossier \u00ab\u00a0images\u00a0\u00bb du portfolio.<\/p>\n\n\n\n<p><strong>Les images compress\u00e9es sont toutes pr\u00e9c\u00e9d\u00e9es d&rsquo;un num\u00e9ro entre crochets.<\/strong> Vous pouvez supprimer cette mention si cela vous g\u00eane.<\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\"><strong>Attention de ne pas utiliser de lettres accentu\u00e9es et d&rsquo;espaces dans le nom de vos images.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ajouter_une_balise_title\"><\/span>Ajouter une balise title<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le gabarit fourni ne dispose pas d&rsquo;une balise <code>&lt;title&gt;&lt;\/title&gt;<\/code>, de telle sorte qu&rsquo;aucun message clair n&rsquo;appara\u00eet dans l&rsquo;onglet du navigateur. Cr\u00e9ez une ligne suppl\u00e9mentaire dans le <code>&lt;head&gt;<\/code> pour mentionner vos pr\u00e9noms (voir la capture d&rsquo;\u00e9cran ci-dessous).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title-1024x507.jpg\" alt=\"\" class=\"wp-image-3939\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title-1024x507.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title-600x297.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title-768x380.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-title.jpg 1026w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integrer_les_images_allegees_et_les_legender\"><\/span>Int\u00e9grer les images all\u00e9g\u00e9es et les l\u00e9gender<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>En examinant comment a \u00e9t\u00e9 int\u00e9gr\u00e9e l&rsquo;image d&rsquo;exemple, vous allez pouvoir <strong>int\u00e9grer vos propres photomontages<\/strong>, en rempla\u00e7ant chaque lien <code>src=\"https:\/\/...\"<\/code> pointant vers le site placeholder.com par un lien pointant vers le dossier \u201cimages\u201d du portfolio, vers l&rsquo;image de votre choix (<code>src=\"images\/img-1.jpg\"<\/code>).<\/p>\n\n\n\n<p class=\"has-text-align-center has-accent-background-color has-background\">Vous devez <strong>mentionner<\/strong> dans le texte alternatif de chaque image (propri\u00e9t\u00e9 de l&rsquo;attribut alt) <strong>le titre de l&rsquo;image et les pr\u00e9noms de leurs cr\u00e9ateurs-trices<\/strong> (voir la capture d&rsquo;\u00e9cran ci-dessous)<\/p>\n\n\n\n<p>\u279c Le contenu entre guillemet propos\u00e9 dans le gabarit apr\u00e8s l&rsquo;attribut alt de chaque image doit donc \u00eatre personnalis\u00e9 par vos soins. <strong>Ce texte est affich\u00e9 en l\u00e9gende de chaque photo quand on clique sur une image et qu&rsquo;elle s&rsquo;affiche dans une fen\u00eatre modale.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-images-1024x611.jpg\" alt=\"\" class=\"wp-image-3941\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-images-1024x611.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-images-600x358.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-images-768x458.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-images.jpg 1029w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c Vous noterez que <strong>le code source de ce gabarit liste les images par colonne et non par rang\u00e9e<\/strong>. Vous le constaterez d\u00e8s l&rsquo;insertion de la deuxi\u00e8me image \ud83d\ude09 <\/p>\n\n\n\n<p class=\"has-text-align-center has-accent-background-color has-background\"><strong>L&rsquo;image d&rsquo;exemple doit \u00eatre imp\u00e9rativement remplac\u00e9e par l&rsquo;un des photomontages produits.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Remplacer_le_texte_de_maquettage\"><\/span>Remplacer le texte de maquettage<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Comme nous l&rsquo;avons vu plus haut, <strong>vous disposez d&rsquo;un fichier .md dans lequel le texte \u00e0 int\u00e9grer est \u00e0 r\u00e9cup\u00e9rer<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Ouvrez le fichier Markdown (fichier <code>texte-rubriques.md<\/code>) directement dans Brackets pour en r\u00e9cup\u00e9rer le contenu (s\u00e9lectionner et copier dans le presse-papier) puis int\u00e9grez le texte copi\u00e9 aux endroits appropri\u00e9s dans le corps du portfolio (fichier <code>index.html<\/code> ).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"690\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques-1024x690.jpg\" alt=\"\" class=\"wp-image-4394\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques-1024x690.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques-600x404.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques-768x517.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/fichier-textes-rubriques.jpg 1030w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Le fichier textes-rubriques.md ouvert dans Brackets<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u279c Les textes plac\u00e9s entre ast\u00e9risques dans le fichier <code>textes-rubriques.md<\/code> ne sont pas \u00e0 int\u00e9grer dans le code source du portfolio. Ils apportent juste quelques pr\u00e9cisions.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"705\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages-1024x705.jpg\" alt=\"\" class=\"wp-image-4392\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages-1024x705.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages-600x413.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages-768x529.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/mise-a-jour-texte-portfolio-photomontages.jpg 1028w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Premi\u00e8res int\u00e9grations du texte \u00e0 ins\u00e9rer dans le code source du portfolio<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>Le format Markdown (.md) remplace progressivement le format Texte (.txt)<\/strong>, utilis\u00e9 pour \u00e9diter des documents lisibles sur toutes les plateformes (en particulier les fichiers \u00ab\u00a0lisez-moi\u00a0\u00bb \u2014 \u00ab\u00a0read-me\u00a0\u00bb \u2014 et les notices d&rsquo;utilisation des logiciels).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_le_bouton_CTA\"><\/span>Personnaliser le bouton CTA<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u00c0 la fin de la premi\u00e8re rubrique consacr\u00e9e \u00e0 Photo Creator, un bouton d&rsquo;appel \u00e0 l&rsquo;action (<em>Call To Action<\/em> ou <em>CTA<\/em>, en anglais) doit permettre de se rendre directement sur le site de la plateforme de photomontage.<\/p>\n\n\n\n<p>Modifiez les param\u00e8tres du bouton CTA selon les indications donn\u00e9es.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modification-CTA.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"948\" height=\"520\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modification-CTA.jpg\" alt=\"\" class=\"wp-image-4399\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modification-CTA.jpg 948w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modification-CTA-600x329.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modification-CTA-768x421.jpg 768w\" sizes=\"auto, (max-width: 948px) 100vw, 948px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_les_barres_devaluation\"><\/span>Personnaliser les barres d&rsquo;\u00e9valuation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Je vous propose d&rsquo;\u00e9valuer l&rsquo;outil Photo Creator en fonction des trois crit\u00e8res suivants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Facilit\u00e9 de prise en main<\/li><li>Possibilit\u00e9s cr\u00e9atives<\/li><li>Qualit\u00e9 de l&rsquo;exportation<\/li><\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Observez comment sont cod\u00e9es les 3 barres d&rsquo;\u00e9valuation et <strong>modifiez les donn\u00e9es du gabarit pour que l&rsquo;affichage corresponde \u00e0 votre propre \u00e9valuation<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation-1024x500.jpg\" alt=\"\" class=\"wp-image-3963\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation-1024x500.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation-600x293.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation-768x375.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation-1200x586.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/codage-barres-evaluation.jpg 1380w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Vous pouvez rajouter d&rsquo;autres crit\u00e8res et placer chaque barre d&rsquo;\u00e9valuation \u00e0 la position voulue.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modifications-curseurs.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"501\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modifications-curseurs.jpg\" alt=\"\" class=\"wp-image-4402\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modifications-curseurs.jpg 956w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modifications-curseurs-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/02\/modifications-curseurs-768x402.jpg 768w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Expliquer_ses_choix\"><\/span>Expliquer ses choix<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>La derni\u00e8re section vous oblige \u00e0 r\u00e9diger vous m\u00eame un texte compos\u00e9 de paragraphes courts.<\/strong> Vous commenterez vos choix concernant les photomontages s\u00e9lectionn\u00e9s. Vous apporterez d&rsquo;\u00e9ventuelles pr\u00e9cisions sur tel ou tel photomontage pr\u00e9sent\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"393\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-texte.jpg\" alt=\"\" class=\"wp-image-3943\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-texte.jpg 1022w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-texte-600x231.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/insertion-texte-768x295.jpg 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/figure>\n\n\n\n<p>\u279c N&rsquo;oubliez pas d&rsquo;int\u00e9grer votre texte dans les balises HTML qui conviennent&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Completer_le_pied_de_site_footer\"><\/span>Compl\u00e9ter le pied de site (footer)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour terminer, vous devez signer votre travail en indiquant vos pr\u00e9nom(s) et nom(s), dans la zone affich\u00e9e en gris clair, en bas du portfolio. Mentionnez \u00e9galement la date \u00e0 laquelle vous avez termin\u00e9 votre travail.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/signature-date-1024x501.jpg\" alt=\"\" class=\"wp-image-4084\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/signature-date-1024x501.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/signature-date-600x294.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/signature-date-768x376.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/signature-date.jpg 1071w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Transmettre_le_dossier_du_site\"><\/span>Transmettre le dossier du site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_une_cle_USB\"><\/span>Utiliser une cl\u00e9 USB<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Il sera n\u00e9cessaire de <strong>me transmettre tout le dossier du site<\/strong>, pour que je puisse \u00e9valuer la qualit\u00e9 de votre travail<strong>.<\/strong> Si nous nous voyons en pr\u00e9sentiel, <strong>n&rsquo;oubliez pas de placer tout le dossier du portfolio sur une cl\u00e9 USB<\/strong> pour le transf\u00e9rer en classe sur le serveur du lyc\u00e9e.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/mettre-dossier-sur-clef-USB.png\" alt=\"\" class=\"wp-image-3969\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/mettre-dossier-sur-clef-USB.png 900w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/mettre-dossier-sur-clef-USB-600x400.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2021\/01\/mettre-dossier-sur-clef-USB-768x512.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_WeTransfer_option_facultative\"><\/span>Utiliser WeTransfer (option facultative)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vous pouvez passer par <a rel=\"noreferrer noopener\" href=\"https:\/\/wetransfer.com\/\" target=\"_blank\">WeTransfer<\/a> et mon adresse mail acad\u00e9mique (yves.goguely(arobase)ac-clermont.fr) pour me transmettre vos dossiers. Vous \u00eates oblig\u00e9s de compresser le dossier pour utiliser WeTransfer (id\u00e9alement, compressez-le au format zip). Voir la page <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcil\/consignes-generales-fcil\/\" target=\"_blank\">Consignes g\u00e9n\u00e9rales<\/a> pour plus de pr\u00e9cisions.<\/p>\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-be729e7 ugb-divider--v2 ugb-divider--design-basic ugb-main-block\">\n<style>.ugb-be729e7 hr.ugb-divider__hr{margin-left:auto !important;margin-right:auto !important}<\/style>\n<div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Quels_sont_les_usages_possibles_dun_site_du_type_portfolio\"><\/span>Quels sont les usages possibles d&rsquo;un site du type portfolio&nbsp;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vous venez de personnaliser un gabarit de portfolio permettant de montrer des images l\u00e9gend\u00e9es et de communiquer plusieurs informations \u00e0 leur sujet. Vous avez cr\u00e9\u00e9 un site qui pourrait \u00eatre mis en ligne. <strong>R\u00e9fl\u00e9chissez aux usages que vous pourriez faire de ce type de communication si vous aviez la possibilit\u00e9 de mettre vous-m\u00eame un tel site en ligne<\/strong>. Nous en parlerons bient\u00f4t.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vous avez commenc\u00e9 \u00e0 produire des photomontages int\u00e9ressants sur le th\u00e8me de la pand\u00e9mie \u00e0 laquelle le monde actuel est confront\u00e9. Vous avez utilis\u00e9 l&rsquo;outil Photo Creator pour r\u00e9aliser ces images. Vous avez sauvegard\u00e9 vos productions sur votre poste de travail ou sur un support amovible pour pouvoir travailler chez vous. Si vous ne l&rsquo;avez [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,24],"tags":[],"class_list":["post-3760","post","type-post","status-publish","format-standard","hentry","category-fcil","category-fcil-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Vous avez commenc\u00e9 \u00e0 produire des photomontages int\u00e9ressants sur le th\u00e8me de la pand\u00e9mie \u00e0 laquelle le monde actuel est confront\u00e9. Vous avez utilis\u00e9 l&rsquo;outil Photo Creator pour r\u00e9aliser ces images. Vous avez sauvegard\u00e9 vos productions sur votre poste de travail ou sur un support amovible pour pouvoir travailler chez vous. Si vous ne l&rsquo;avez pas fait, vous pourrez quand m\u00eame r\u00e9aliser cette activit\u00e9 en t\u00e9l\u00e9chargeant une s\u00e9lection de photomontages mis \u00e0 votre disposition. Il s&rsquo;agit maintenant de publier sur un document HTML (un site) une s\u00e9lection des photomontages r\u00e9alis\u00e9s en classe. Pour cela vous allez utiliser un gabarit de\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcil\/\" rel=\"category tag\">FCIL<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcil\/fcil-cours\/\" rel=\"category tag\">FCIL-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=3760"}],"version-history":[{"count":93,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3760\/revisions"}],"predecessor-version":[{"id":4404,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3760\/revisions\/4404"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=3760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=3760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=3760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}