diff --git a/configurations-conception-communes/nouveautes.md b/configurations-conception-communes/nouveautes.md index bd4b1f47..de431a8a 100644 --- a/configurations-conception-communes/nouveautes.md +++ b/configurations-conception-communes/nouveautes.md @@ -1,312 +1,129 @@ --- altLangPage: https://design.canada.ca/common-design-patterns/latest-news.html -date: null -dateModified: '2019-11-28' -description: null -title: "Nouveautés - Configuration de conception de Canada.ca" +date: "2019-11-28" +dateModified: "2024-04-03" +description: "Orientation sur l’utilisation de la configuration de conception des dernières nouvelles sur Canada.ca." +title: "Dernières nouvelles" --- - - - +

Dernière mise à jour : {{ page.dateModified }}

+

Les dernières nouvelles sont une configuration de conception visant à afficher les éléments les plus récents de la salle de presse du gouvernement du Canada qui sont directement associés au contenu de la page.

+
-

- Le modèle « Nouveautés » comprend les éléments de nouvelles les plus récents affichés par l’institution, l’organisation ou l’entité. -

+

Sur cette page

+
- -
-

- Sur cette page -

- +
+

Quand l’utiliser

+

Utilisez la configuration de conception des dernières nouvelles pour offrir des éléments de nouvelles qui sont directement liés au contenu de votre page ou votre organisation.

- -
-

- Quand l'utiliser -

-

- Utilisez ce modèle dans les gabarits suivants : -

- +
+

Quoi éviter

+

N’utilisez pas cette configuration de conception si votre organisation ne publie pas régulièrement de nouvelles.

+

N’utilisez pas cette configuration de conception pour afficher des nouvelles d’une autre organisation ou pour du contenu non lié.

+

N’utilisez pas cette configuration de conception pour afficher des promotions, qui sont un type de produit promotionnel et non des nouvelles.

+

N’utilisez pas cette configuration de conception sur les pages de navigation.

+

N’utilisez pas cette configuration de conception lorsque vous souhaitez que les gens restent sur la page et accomplissent leur tâche.

- -

- Quoi éviter -

- -

- Assurez-vous que ce modèle n'interfère pas avec le contenu de la tâche principale. -

- -
-

- Comment mettre en œuvre -

-
-

- Vous pouvez utiliser soit la version - - bêta - - ou la version - - stable - - de ce modèle. -

-

- Nouveautés bêta -

-

- La version bêta est utilisée à la page d'accueil institutionnelle. Le code est toujours en révision. Il se peut que des modifications mineures y soient apportées. -

-

- La version bêta remplacera à terme la version stable. -

-
-
-
-
-

- Nouvelles -

-
-
-
- - Code - - 
<div class="row col-lg-12">
-	<section class="col-md-4 wb-feeds limit-3 gc-nws">
-	 <h2 class="h3">Nouvelles</h2>
-	<!-- demonstrate the look - use json feed where applicable -->
-	<ul class="feeds-cont list-unstyled lst-spcd feed-active">
-	 <li><a href="#">[Titre nouvelle]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
-	 <li><a href="#">[Titre nouvelle]]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
-	 <li><a href="#">[Titre nouvelle]]</a><br> <small class="feeds-date">AAAA-MM-JJ HH:MM</small></li>
-	</ul>
-	<!-- json feed for news example
-	<ul class="feeds-cont list-unstyled lst-spcd">
-	 <li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Salle de presse de l’ARC</a> </li>
-	 </ul>
-	-->
-	<p>En savoir plus : <a href="#" class="admin">Nouvelles de [Institution]</a></p>
-	</section>
-	<section class="col-md-8 gc-prtts">
-	 <h2 class="h3">En vedette</h2>
-	  <div class="row wb-eqht">
-	   <div class="col-md-6 mrgn-bttm-md">
-	    <a class="figcaption hght-inhrt" href="#">
-	     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-	      <figcaption class="h5">[Hyperlien de l'élément]</figcaption>
-	        <p>Brève description de l'élément en vedette.</p>
-	        </figure>
-	       </a>
-	      </div>
-	    <div class="col-md-6 mrgn-bttm-md">
-	     <a class="figcaption hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
-	     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-	      <figcaption class="h5">[Hyperlien de l'élément]</figcaption>
-	      <p>Brève description de l'élément en vedette.</p>
-	        </figure>
-	     </a>
-	     </div>
-	    </div>
-	  </section>
-	 </div>
-	</div>
-
-
-
-
-

- Nouveautés stable -

-

- La version bêta remplacera à terme la version stable. -

-
- - Directives de la version stable pour les nouveautés - -
    -
  • - Elle présente les éléments de nouvelles les plus récents affichés par l’entité. -
    • -
  • - L’étiquette de l’en-tête est « Nouveautés ». -
    • -
  • - Deux des éléments de nouvelles doivent comprendre une image, un titre assorti d’un hyperlien, des renseignements supplémentaires et un texte descriptif : -
      -
    • - Peut comprendre du contenu promotionnel, et être priorisé à la discrétion de l’institution -
      • -
    • - Le texte de la description doit être court et concis. -
      • -
    • -
  • - Les types de produits liés aux nouvelles affichés comme texte seulement se limitent à ceux affichés sur nouvelles.gc.ca : -
      -
    • - Avis aux médias -
      • -
    • - Documents d’information -
      • -
    • - Communiqués de presse -
      • -
    • - Discours -
      • -
    • - Déclarations -
      • -
    -
    • -
  • - Veuillez consulter la - - page GitHub sur Canada.ca - - pour obtenir des détails sur le redimensionnement d’image. -
    • -
-

- Exemple concret -

-
    -
  • - - Page de profil institutionnel - +
  • Mise en page : +
      +
    • Maximum de 3 éléments énumérés à la fois; utilisez le lien « En savoir plus » pour mener à d’autres nouvelles.
      • +
    • Le codage des nouvelles correspond à une liste sans style.
      • +
    • -
-
-
-

- Exemples -

-
-
-
-
-
- - Modèle des nouveautés avec deux images - -
- Capture d’écran illustrant le modèle des dernières nouvelles avec deux images dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image. -
-
+ +

Exemples visuels

+
+
+
Dernières nouvelles
+ Configuration de conception des dernières nouvelles. Version texte ci-dessous : +
+ Description de l’image : dernières nouvelles +

Un en-tête de section, Nouvelles, est suivi de trois liens. Chaque titre de lien est [Titre de la nouvelle]. Sous chaque lien, on trouve un espace réservé pour la date et l’heure, présenté comme AAAA-MM-JJ HH:MM. En dessous de la liste de liens et de dates, on trouve une ligne indiquant En savoir plus : Nouvelles de [Institution].

+
+
+
+
+
+

Comment procéder à la mise en œuvre

+

Trouvez des exemples pratiques et de code pour mettre en œuvre la configuration de conception des dernières nouvelles.

+

Référence pour la mise en œuvre du thème GCWeb (BOEW)

+ +

Mises en œuvre

+

Déterminez ce qui convient le mieux au type de page que vous créez.

+
+
+
+
+
+ GC-AEM +

Pour Adobe Experience Manager (AEM) du gouvernement du Canada (GC) :

+ +
+
+ SGDC +

Pour la Solution de gabarits à déploiement centralisé (SGDC) :

+ +
+
+ Drupal WxT +

Pour Drupal WxT :

+ +
+
+
-
-
-
+ +
+
+

Recherche et justification

+

La configuration de conception des dernières nouvelles est facultative pour les modèles obligatoires suivants :

+ +
+
+

Derniers changements

+
+
+ +
+
Mise à jour de l’orientation pour y inclure les spécifications de contenu et de conception, des exemples visuels et une orientation sur la mise en œuvre.
+
diff --git a/images/latest-news-fr.png b/images/latest-news-fr.png new file mode 100644 index 00000000..395e6a28 Binary files /dev/null and b/images/latest-news-fr.png differ