Attention les informations suivantes ne sont plus à jour, veuillez contacter Laurence Bourque pour plus de détails. |
---|
Table des matières |
---|
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.
<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
<script>window.appHost = 'http://ici.radio-canada.ca';</script>
doit se retrouver avant les inclusions de scripts.
Vous devez modifier votre gabarit
Le gabarit est composé de la façon suivante :
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.
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.
Notre gabarit propose :
Pour toutes ces fonctions, plus de détails sont disponibles sur demande. Veuillez vous référer à votre contact principal à Radio-Canada.
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;}
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 :
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.
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/
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ètre | Description | Valeur |
---|---|---|
type section | identifie le type de navigation à afficher | tele | jeunesse | webfiction |
include less | indique si oui ou non on importe les fichiers de style | true | false |
<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>
<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>
<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>