Transformer son gabarit pour passer en HTML5

bess · 03/02/2012 11:56:06

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 !

1 - changer le doctype + entête de votre gabarit

avant :

{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 :

{process_pagedata}<!DOCTYPE html>
<html lang="fr">
<head>

2 - changer l'appel des Javascripts

avant :

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

après

<script type="text/javascript">

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

3 - Renommer certaines balises

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 :

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

par le nouveau :

<header></header>
<footer></footer>
<nav></nav>
<article></article>

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

#header p{
}

devient tout simplement

header p{
}

Jean le Chauve · 03/02/2012 13:41:08

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

bess · 03/02/2012 15:08:55

done

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

jissey · 03/02/2012 17:23:23

c'est dans le wiki?

bess · 03/02/2012 17:33:30

je le mettrais

pour l'instant il me faut plus de retour

jce76350 · 04/02/2012 15:22:17

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

{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

{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

 {metadata}

par

 {*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

wanajo38 · 17/03/2012 15:24:44

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

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

Jean le Chauve · 18/03/2012 21:50:46

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

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

wanajo38 · 18/03/2012 22:35:05

Trop bon Jean le Chauve, j'en suis justement à cette histoire de compatibilité ! 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

Dernière modification par wanajo38 (13/04/2012 18:23:52)

Rams51 · 25/03/2012 13:12:55

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

Philipppe · 02/05/2012 17:58:45

Bonjour ...,

jce76350 a écrit :

... ensuite On remplace pour éviter de modifier les autre gabarits

 {metadata}

par

 {*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 ...

jce76350 · 02/05/2012 21:04:58

j'avais écris

"ensuite On remplace {metadata} pour éviter de modifier les autre gabarits"
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"

Philipppe · 02/05/2012 22:21:29

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

Ouik · 10/05/2012 23:23:54

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.

bess · 11/05/2012 09:08:38

chouette, hâte de voir cela

Philipppe · 11/05/2012 10:14:07

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é !

jce76350 · 11/05/2012 10:58:53

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/

Ouik · 11/05/2012 16:45:59

merci JCE.

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

Ouik · 25/05/2012 23:39:26

Si si, ça va venir...

Informations Générales

Informations Système

Une fois votre problème solutionné

CMS Made Simple France

Annonce

#1 03/02/2012 11:56:06