Transformer son gabarit pour passer en HTML5

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
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{
}
Répondre
#1
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{
}
Répondre
#2
Bonne idée, Bess.
Ne serait-ce pas mieux de le déplacer dans "Formations" ?
Répondre
#2
Bonne idée, Bess.
Ne serait-ce pas mieux de le déplacer dans "Formations" ?
Répondre
#3
done Smile

Je profite également pour ajouter quelques points supplémentaire au tuto dans le premier post
Répondre
#3
done Smile

Je profite également pour ajouter quelques points supplémentaire au tuto dans le premier post
Répondre
#4
c'est dans le wiki?
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
Répondre
#4
c'est dans le wiki?
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
Répondre
#5
je le mettrais Wink

pour l'instant il me faut plus de retour
Répondre
#5
je le mettrais Wink

pour l'instant il me faut plus de retour
Répondre
#6
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
J-C Etiemble v 2.2.xx
Répondre
#6
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
J-C Etiemble v 2.2.xx
Répondre
#7
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.
Répondre
#7
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.
Répondre
#8
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]-->
Répondre
#8
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]-->
Répondre
#9
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
Répondre
#9
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
Répondre
#10
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
Répondre
#10
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
Répondre
#11
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 ...
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#11
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 ...
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#12
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" :|
J-C Etiemble v 2.2.xx
Répondre
#12
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" :|
J-C Etiemble v 2.2.xx
Répondre
#13
Ok merci jce.
Je souhaitais être certain d'avoir bien compris !
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#13
Ok merci jce.
Je souhaitais être certain d'avoir bien compris !
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#14
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.
Ouik - communication . outils numériques . design graphique
Répondre
#14
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.
Ouik - communication . outils numériques . design graphique
Répondre
#15
chouette, hâte de voir cela Smile
Répondre
#15
chouette, hâte de voir cela Smile
Répondre
#16
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é !
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#16
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é !
Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur Free.fr, Gandi.net (GandiAI et SimpleHosting)
Répondre
#17
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/
J-C Etiemble v 2.2.xx
Répondre
#17
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/
J-C Etiemble v 2.2.xx
Répondre
#18
merci JCE.

Intéressant l'utilisation de smarty dans la css pour les images, les chemins et la suppression de blanc, notamment.
Ouik - communication . outils numériques . design graphique
Répondre
#18
merci JCE.

Intéressant l'utilisation de smarty dans la css pour les images, les chemins et la suppression de blanc, notamment.
Ouik - communication . outils numériques . design graphique
Répondre
#19
Si si, ça va venir... Smile
Ouik - communication . outils numériques . design graphique
Répondre
#19
Si si, ça va venir... Smile
Ouik - communication . outils numériques . design graphique
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)