GABARIT ET WIDGETS

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
5 min read
Attention les informations suivantes ne sont plus à jour, veuillez contacter Laurence Bourque pour plus de détails.
Table des matières

  


Site Complet

Gabarit (Header/footer)

Le gabarit est le squelette des fichiers html. Ce document en explique la structure pour construire des sites web selon les chartes graphiques et techniques de Radio-Canada.


Notes de version

Voici les changements importants apportés au gabarit. Lorsque les changements impliquent une modification du gabarit, la mention "vous devez modifier votre gabarit" s'affichera.


  • 2016-07-06
  • Changement de l’appel des navigations desktop et mobile. Utilisation d’une seule composante nommée DynamicMenu 
    Vous devez modifier votre gabarit
  • 2016-03-10
  • Ajout des attributs lang="fr" et dir="ltr" sur la balise <body>
  • 2015-07-16
  • Changement dans le gabarit. L’insertion du script suivant

<script src='http://s.radio-canada.ca/omniture/omni_stats_base.js?version=XXXX'></script>
         doit se retrouver après l’inclusion “body”.

Vous devez modifier votre gabarit


  • 2015-06-01
  • Changement dans le gabarit. L’insertion du script suivant

<script>window.appHost = 'http://ici.radio-canada.ca';</script>
         doit se retrouver avant les inclusions de scripts.

Vous devez modifier votre gabarit

  • 2019-06-04
  • Mise à jour


Structure du gabarit

Le gabarit est composé de la façon suivante :

  • L’entête de Radio-Canada
  • Le corps du site sur deux colonnes
  • Le pied de page de Radio-Canada


Le site contient un espace publicitaire obligatoire.

Les publicités* sont natives au gabarit et ne doivent pas être supprimées. Les identifiants 
(les classes et id des divisions) indiqués dans le corps du gabarit ne doivent pas être changés lorsque vous le personnalisez pour votre page.


*Référez-vous à la section des normes graphiques, blocs C4 et G pour les détails concernant les publicités.


Code du gabarit

Voici le gabarit : http://ici.radio-canada.ca/content/src-template.html

Récupérer le code source à partir de l’hyperlien ci-dessus.

Référez-vous aux normes graphiques pour les dimensions et différents blocs.

Fonctions disponibles

Notre gabarit propose :

  • Outils de statistiques, recueillant des informations sur les contenus web consommés, que vous devez garder dans le gabarit.
  • Récolte d’informations sur la géolocalisation (et donc, possibilité d’inclure des fonctions de régionalisation), que vous devez garder dans le gabarit.
  • Système de gestion des publicités, que vous devez garder dans le gabarit.
  • Console audio-vidéo.
  • Barre sociale (« partager ») : 652 px x 53 px
    barrePartage.jpg 
  • Possibilité de recueillir les commentaires des internautes en utilisant le service ViaFoura (anciennement Pluck). Les scripts nécessaires sont brièvement commentés dans le gabarit.


Pour toutes ces fonctions, plus de détails sont disponibles sur demande. Veuillez vous référer à votre contact principal à Radio-Canada.


Personnalisation du gabarit

Pour créer une page pour votre site, vous n’avez qu’à prendre le gabarit HTML comme modèle et à le personnaliser selon les besoins. Les feuilles de styles et les scripts javascript initialement indiqués dans le gabarit n’ont pas besoin d’être copiés sur votre site. Ils sont appelés sur le serveur de Radio-Canada.

Les classes et/ou id contenant  « src- » ne doivent pas être changés.

Prenez note que s’il y a une campagne de pub plein écran (i.e. en haut de page et de chaque côté de la division à 990px), elle écrasera l’image de fond. Donc, ne pas mettre tout le design de l’entête de votre site dans le body ou dans « src-milieu-page ».

Adapter le découpage du site afin d’afficher le design du centre (logo de l’émission, entête du site) même s’il y a une pub pleine page.

Notez également que si un background doit être aligné avec le corps du site, on doit le mettre dans « src-milieu-page ».

Des balises HTML métatags (Les métadonnées donnent l’information nécessaire à la « consommation » d’une page web, et sont utilisées par les engins de recherche, par nos outils de statistiques et de publicité) doivent être insérées dans chaque page web, leurs valeurs étant propres à votre site. Chaque page doit pouvoir être ciblée pour y insérer une valeur spécifique pour une balise donnée.

Un exemple d’application : un partenaire s’associe à une section du site où il faut afficher uniquement ses publicités; pour ce faire, la section devra contenir une méta-donnée qui la distingue des autres pages du site.

Notez également la présence de métatags destinés aux réseaux sociaux qui suivent les normes d’Open Graph. Des indications en commentaire dans le gabarit web vous aident à remplir ces balises HTML correctement, mais les valeurs pour remplir les métatags relatives aux statistiques et aux publicités vous seront fournies par votre contact principal à Radio-Canada.

Pour tout le bloc des métas dont les noms (name) sont  de type "rc.xxx" : il est essentiel de ne mettre QUE les valeurs reçues (sinon, vous les laissez vides). Si vous ajoutez une page à votre site, vous devez faire une demande à votre contact pour recevoir ce bloc méta, qui sera personnalisé à la nouvelle page.

Nous utilisons actuellement deux outils, Omniture et Webtrends pour compiler les statistiques d’achalandage. Notez que ces deux systèmes resteront intégrés aux pages pour une certaine période. Vous serez informés s’il faut y faire des modifications. 

Pour que les données Omniture soient compilées correctement, gardez l’include javascript « omniture » (qui est dans le gabarit HTML) tout de suite après l'ouverture du tag <body> de vos pages web.

Pour désactiver la barre de thème, il faut insérer dans son « stylesheet » dans la balise <style></style> le code suivant:

#src-nav-theme {display:none;}


Framework javascript

Le gabarit utilise le framework jQuery version 1.7.2. La variable qui fait référence au jQuery est jQuery.

Le framework est chargé dans les balises <head></head>.


Les plugins suivants sont chargés par défaut :

  1. jQuery.cookie
  2. jQuery.colorbox
  3. jQuery.pinable
  4. jQuery.hotkeys
  5. jQuery.qtip


Favicon (Icone des favoris)

FavIcon-molecule (1).ico


Navigation Simplifié

La navigation simplifiée a été faite pour être incorporée sur les sites externes de Radio-Canada. Elle a été conçu pour que le visuel soit “responsive”. Si des modifications sont apportées sur cette barre de navigation, elle sera automatiquement mise à jour sur les sites externes. Le code et style de la navigation simplifié sont importés par des scripts JavaScript qui doivent être inclus dans la page externe désirée.

Pré requis

Pour que la navigation simplifiée fonctionne il faut que la librairie jQuery [1.7.2] soit présente sur la page. Si elle n’y est pas, vous devez la télécharger.

Lien: http://jquery.com/download/ 


Script Radio-Canada

Deux scripts de Radio-Canada doivent être inclus.


Un script doit être aussi sur la page pour permettre l’initialisation de variable et pour le chargement de la composante.


window.appHost = "http://ici.radio-canada.ca";

component.load([Nom de la composante], { [Paramètres] }, [Conteneur HTML]));


Nom de la composante

Le nom de la composante pour la navigation simplifiée est: NavigationSimplified


Liste des paramètres Valeur

Nom du paramètre mètreNom paramètreDescriptionValeur
type sectionidentifie le type de navigation à affichertele | jeunesse | webfiction
include lessindique si oui ou non on importe les fichiers de styletrue | false


Exemple télé


<head>

<script>window.appHost = "http://ici.radio-canada.ca";</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src='http://ici.radio-canada.ca/content/bunker.minimal.min.js'></script>

<script src='http://ici.radio-canada.ca/app/main.js'></script>


<script type="text/javascript">

    require(["jquery", "services/componentsService"], function (jq, component) {

              jq(document).ready(function() {

                  component.load("NavigationSimplified", { typeSection: "tele", includeLess: true }, jq("#containerNav"));

              });

     });

</script>

</head>


<body>

    <div id="containerNav"></div>

</body>


Exemple webfiction


<head>

<script>window.appHost = "http://ici.radio-canada.ca";</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src='http://ici.radio-canada.ca/content/bunker.minimal.min.js'></script>

<script src='http://ici.radio-canada.ca/app/main.js'></script>


<script type="text/javascript">

    require(["jquery", "services/componentsService"], function (jq, component) {

              jq(document).ready(function() {

                  component.load("NavigationSimplified", { typeSection: "webfictions", includeLess: true }, jq("#containerNav"));

              });

     });

</script>

</head>


<body>

    <div id="containerNav"></div>

</body>


Exemple jeunesse


<head>

<script>window.appHost = "http://ici.radio-canada.ca";</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src='http://ici.radio-canada.ca/content/bunker.minimal.min.js'></script>

<script src='http://ici.radio-canada.ca/app/main.js'></script>


<script type="text/javascript">

    require(["jquery", "services/componentsService"], function (jq, component) {

              jq(document).ready(function() {

                  component.load("NavigationSimplified", { typeSection: "jeunesse", includeLess: true }, jq("#containerNav"));

              });

     });

</script>

</head>


<body>

    <div id="containerNav"></div>

</body>