v8.0.x - Instructions de migration
Version 8.0
- Date de lancement :
- Compile avec: WET-BOEW v4.0.36
En-tête - Changements majeurs
Le code ci-dessous inclus les changements pour l'en-tête allégé, AINSI QUE les changements du texte de marque du GC pour l'accessibilité.
L'en-tête a été découpé en plusieurs morceaux afin de mieux présenter où se situent les changements.
Le code avant/après complet ce situe au bas de cette page.
1. Sélection de langue
Avant
<header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<ul class="list-inline margin-bottom-none">
<li><a lang="en" hreflang="fr" href="home-en.html">English</a></li>
</ul>
</section>
<div class="row">
Après
<header>
<div id="wb-bnr" class="container">
<div class="row">
<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<ul class="list-inline mrgn-bttm-0">
<li>
<a lang="en" hreflang="en" href="home-en.html">
<span class="hidden-xs">English</span>
<abbr title="English" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">en</abbr>
</a>
</li>
</ul>
</section>
Note : N'oubliez pas d'ajuster le "href" de la balise "<a>" pour convenir votre implémentartion.
2. Texte de marque du Gouvernement du Canada (FIP)
Avant
<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/fr.html" property="URL">
<img src="./GCWeb/assets/sig-blk-fr.svg" alt="" property="logo">
<span class="wb-inv" property="name"> Gouvernement du Canada /
<span lang="en">Government of Canada</span>
</span>
</a>
<meta property="areaServed" typeof="Country" content="Canada">
<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>
Après
<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/fr.html" property="URL">
<img src="./GCWeb/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo">
<span class="wb-inv"> /
<span lang="en">Government of Canada</span>
</span></a>
<meta property="name" content="Gouvernement du Canada">
<meta property="areaServed" typeof="Country" content="Canada">
<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>
Note : N'oubliez pas d'ajuster le "src" de la balise "<img>" pour convenir votre implémentartion.
3. Section de recherche
Avant
<section id="wb-srch" class="col-lg-8 text-right">
<h2>Recherche</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<datalist id="wb-srch-q-ac"></datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
<span class="glyphicon-search glyphicon"></span>
<span class="wb-inv">Recherche</span>
</button>
</div>
</form>
</section>
Après
<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
<h2>Recherche</h2>
<form action="#" method="post" name="cse-search-box" role="search">
<div class="form-group wb-srch-qry">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<datalist id="wb-srch-q-ac"></datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
<span class="glyphicon-search glyphicon"></span>
<span class="wb-inv">Recherche</span></button>
</div>
</form>
</section>
Note : N'oubliez pas d'ajuster le "action" de la balise "<form>" pour convenir votre implémentartion.
4. Code complet
Avant
<header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<ul class="list-inline margin-bottom-none">
<li><a lang="en" hreflang="fr" href="home-en.html">English</a></li>
</ul>
</section>
<div class="row">
<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/fr.html" property="URL">
<img src="./GCWeb/assets/sig-blk-fr.svg" alt="" property="logo">
<span class="wb-inv" property="name"> Gouvernement du Canada /
<span lang="en">Government of Canada</span>
</span>
</a>
<meta property="areaServed" typeof="Country" content="Canada">
<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>
<section id="wb-srch" class="col-lg-8 text-right">
<h2>Recherche</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<datalist id="wb-srch-q-ac"></datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
<span class="glyphicon-search glyphicon"></span>
<span class="wb-inv">Recherche</span>
</button>
</div>
</form>
</section>
</div>
</div>
[...]
</header>
Après
<header>
<div id="wb-bnr" class="container">
<div class="row">
<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<ul class="list-inline mrgn-bttm-0">
<li>
<a lang="en" hreflang="en" href="home-en.html">
<span class="hidden-xs">English</span>
<abbr title="English" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">en</abbr>
</a>
</li>
</ul>
</section>
<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
<a href="https://www.canada.ca/fr.html" property="URL">
<img src="./GCWeb/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo">
<span class="wb-inv"> /
<span lang="en">Government of Canada</span>
</span></a>
<meta property="name" content="Gouvernement du Canada">
<meta property="areaServed" typeof="Country" content="Canada">
<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>
<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
<h2>Recherche</h2>
<form action="#" method="post" name="cse-search-box" role="search">
<div class="form-group wb-srch-qry">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<datalist id="wb-srch-q-ac"></datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
<span class="glyphicon-search glyphicon"></span>
<span class="wb-inv">Recherche</span></button>
</div>
</form>
</section>
</div>
</div>
[...]
</header>
Note : "[...]" indique que le reste demeure inchangé.
Signaler un problème sur cette page
- Date de modification :