Transformer son gabarit pour passer en HTML5

Transformer son gabarit pour passer en HTML5 - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Formations (https://forum.cmsmadesimple.fr/forum-13.html)
+--- Sujet : Transformer son gabarit pour passer en HTML5 (/thread-1748.html)

Transformer son gabarit pour passer en HTML5 - bess - 03/02/2012

Salut les filles,

juste pour faire un ultra-rapide tuto sur comment rendre un gabarit classique valide HTML5, surtout parce que je test moi même la transformation sur un site.

Je n'ai pas encore finit mais à ce stade, les navigateurs comprennent qu'ils ont affaire à une page en HTML5, à moi ensuite d'aller redéfinir toutes les nouvelles balises (exemple : <vidéo><footer>...)

Si vous avez également des suggestions sur les étapes à ne pas oublier je suis preneur ! Wink

[h]1 - changer le doctype + entête de votre gabarit[/h]

avant :

Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">

<head>

après :

Code :
{process_pagedata}<!DOCTYPE html>

<html lang="fr">

<head>

[h]2 - changer l'appel des Javascripts[/h]

avant :

Code :
<script language="Javascript" type="text/javascript">

après

Code :
<script type="text/javascript">

A ce niveau mon gabarit était déjà valide. Il me faut maintenant modifier certaines balises

[h]3 - Renommer certaines balises[/h]

De nouvelles balises font leur apparition. les utiliser est donc très intéressant.

<header> <footer> <nav> pour encadrer votre menu et <article> pour les articles de blog (par exemple)

ça tombe bien j'ai juste eu à remplacer l'habituel code :

Citation :<div id='header'></div>
<div id='footer'></div>
<div id='menu'></div>
<div class='entry'></div>

par le nouveau :

Citation :<header></header>
<footer></footer>
<nav></nav>
<article></article>

et ne pas oublier de remplacer les occurrences dans le css :

Citation :#header p{
}

devient tout simplement

Citation :header p{
}

Transformer son gabarit pour passer en HTML5 - Jean le Chauve - 03/02/2012

Bonne idée, Bess.
Ne serait-ce pas mieux de le déplacer dans "Formations" ?

Transformer son gabarit pour passer en HTML5 - bess - 03/02/2012

done Smile

Je profite également pour ajouter quelques points supplémentaire au tuto dans le premier post

Transformer son gabarit pour passer en HTML5 - jissey - 03/02/2012

c'est dans le wiki?

Transformer son gabarit pour passer en HTML5 - bess - 03/02/2012

je le mettrais Wink

pour l'instant il me faut plus de retour

Transformer son gabarit pour passer en HTML5 - jce76350 - 04/02/2012

Pour information et pour tester simplement et rapidement
- j'ai pris le gabarit existant de CMScms Left simple navigation + 1 column
(les modifications du gabarit seront appliqué à la page Comment fonctionne CMS made simple)
- et l'ai transformé en Left simple navigation + 1 column_html5

Code :
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

remplacer par

Code :
{process_pagedata}<!DOCTYPE html>

<html lang="fr">

{* modif pour html5  remplacer le DOCTYPE html PUBLIC ... *}

ensuite On remplace pour éviter de modifier les autre gabarits

Code :
{metadata}

par

Code :
{*metadata  -> On remplace pour éviter de modifier les autre gabarits*}

    <meta charset="utf-8">

    <meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-12 Ted Kulp. All rights reserved." />

    <meta name="Author" content="Moi">

    <meta name="Description" content="c'est mon site">

    <meta name="Keywords" content="cmsms">

    <meta name="ROBOTS" content="index, follow">

    <link rel="shortcut icon" href="favicon.ico" >

c'est tout

bien sur cela ne profite pas des avancées HTML5 mais c'est simple Wink

Transformer son gabarit pour passer en HTML5 - wanajo38 - 17/03/2012

Bonjour et merci pour ce tutoriel.

Je souhaiterais passer le cap et me mettre au HTML5 (car quitte à me former, autant le faire sur les dernières versions). Ma question : est ce que cette manipulation aura d'autres conséquences que celle de modifier le gabarit ? Il faudra aussi mes feuilles de style ? et est-ce que par exemple, les modules installés auront été impactés par ce changement ?

C'est pas que je sois un ramier, loin de là, mais comme je viens juste de finir mon premier site, ce serait dommage de tout perdre... Je n'ai pour le moment qu'un gabarit pour toutes mes pages auquel sont attachées 7 feuilles de style et un type de menu utilisé.

Je viens de pense qu'hier soir, je suivais quelques cours de HTML5 CSS3 et j'ai modifié à plusieurs endroits le code de mon gabarit. ça fonctionne mais peut-être que je n'aurais pas dû ?

Je reconnais que c'est un début un peu laborieux pour moi, mais en même temps, je pars de rien Big Grin

Merci d'avance pour vos conseils et à bientôt.

Transformer son gabarit pour passer en HTML5 - Jean le Chauve - 18/03/2012

Ne pas oublier l'appel du javascript pour la compatibilité IE inférieur à 9 :

Code :
<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Transformer son gabarit pour passer en HTML5 - wanajo38 - 18/03/2012

Trop bon Jean le Chauve, j'en suis justement à cette histoire de compatibilité ! Big Grin

dans ce cours génial du site du zéro.

Je peux même maintenant expliquer que ce petit bout de code est un commentaire uniquement visible par le navigateur internet explorer dans ses versions inférieures à 9 et qu'il sert à exécuter ce code javascript pour que les pages soient visibles (à cause des nouvelles balises introduites par le HTML5 et non encore reconnues par IE). avec ces navigateurs Big Grin

Transformer son gabarit pour passer en HTML5 - Rams51 - 25/03/2012

Bonjour

J'ai commencé hier mettre en html5 mes gabarit et au vue de ce que j'ai vue dans nombreux tuto.
La sémantique et le positionnement des nouvelles balises est intéressant et je vais rendre en allant mes gabarit compatible a tous cela Smile

Transformer son gabarit pour passer en HTML5 - Philipppe - 02/05/2012

Bonjour ...,

jce76350 a écrit :... ensuite On remplace pour éviter de modifier les autre gabarits

Code :
{metadata}
par

Code :
{*metadata -> On remplace pour éviter de modifier les autre gabarits*} <meta charset="utf-8"> <meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-12 Ted Kulp. All rights reserved." /> <meta name="Author" content="Moi"> <meta name="Description" content="c'est mon site"> <meta name="Keywords" content="cmsms"> <meta name="ROBOTS" content="index, follow"> <link rel="shortcut icon" href="favicon.ico" >

Je lis vos posts, avant de commencer à monter un site en V10.3, et je doute :
la modification des meta, tu la mets dans le gabarit ou dans la partie "Métadonnées globales" de l'onglet Paramètres généraux du panneau d'administration ?

Merci de ces tutos ...

Transformer son gabarit pour passer en HTML5 - jce76350 - 02/05/2012

j'avais écris

"ensuite On remplace {metadata} pour éviter de modifier les autre gabarits" Wink

parce que je modifais uniquement une page en HTML5

Donc si toutes les pages sont en HTML5
modification des meta -> dans la partie "Métadonnées globales" :|

Transformer son gabarit pour passer en HTML5 - Philipppe - 02/05/2012

Ok merci jce.
Je souhaitais être certain d'avoir bien compris !

Transformer son gabarit pour passer en HTML5 - Ouik - 10/05/2012

Hello,

je vais faire en sorte de mettre à dispo un gabarit html5 avec les balises nouvelles de structuration de contenu (footer, header, section, etc) histoire d'avoir une base. Je me suis moi-même basé sur html5boilerplate et de nombreux articles un peu partout sur le net traitant du sujet.
Je tâche de faire ça assez vite.

Transformer son gabarit pour passer en HTML5 - bess - 11/05/2012

chouette, hâte de voir cela Smile

Transformer son gabarit pour passer en HTML5 - Philipppe - 11/05/2012

Hummm chic, je crois que ça va avoir du succès !
J'avais commencé ... mais "trop" de retard dans mes mises à jour vers 1.10 ... : priorité !

Transformer son gabarit pour passer en HTML5 - jce76350 - 11/05/2012

pour info je mets sur http://dl.free.fr/
le gabarit et les CSS du nouveau thème Simplex HTML5 de la version alpha cms 1.11 (tout est dans le fichier Simplex.txt)

en détails dans un zip http://dl.free.fr/

les images de simplex dans le dossier \uploads\simplex http://dl.free.fr/

Transformer son gabarit pour passer en HTML5 - Ouik - 11/05/2012

merci JCE.

Intéressant l'utilisation de smarty dans la css pour les images, les chemins et la suppression de blanc, notamment.

Transformer son gabarit pour passer en HTML5 - Ouik - 25/05/2012

Si si, ça va venir... Smile