Forum CMS Made Simple Francophone

Aide francophone sur CMS Made Simple

Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

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

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Transformer son gabarit pour passer en HTML5

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

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

Hors ligne

#2 03/02/2012 13:41:08

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 687
Site Web

Re : Transformer son gabarit pour passer en HTML5

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

Hors ligne

#3 03/02/2012 15:08:55

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Transformer son gabarit pour passer en HTML5

done smile

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

Hors ligne

#4 03/02/2012 17:23:23

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 538
Site Web

Re : Transformer son gabarit pour passer en HTML5

c'est dans le wiki?


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)

Hors ligne

#5 03/02/2012 17:33:30

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Hors ligne

#6 04/02/2012 15:22:17

jce76350
Administrateur
Lieu : Rouen
Inscription : 23/09/2007
Messages : 6 086
Site Web

Re : Transformer son gabarit pour passer en HTML5

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 wink


J-C Etiemble Tutoriels v 2.2.x

Hors ligne

#7 17/03/2012 15:24:44

wanajo38
Membre
Inscription : 08/03/2012
Messages : 117

Re : Transformer son gabarit pour passer en HTML5

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_smile

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

Hors ligne

#8 18/03/2012 21:50:46

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 687
Site Web

Re : Transformer son gabarit pour passer en HTML5

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]-->

Hors ligne

#9 18/03/2012 22:35:05

wanajo38
Membre
Inscription : 08/03/2012
Messages : 117

Re : Transformer son gabarit pour passer en HTML5

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

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

Hors ligne

#10 25/03/2012 13:12:55

Rams51
Membre
Inscription : 04/03/2011
Messages : 50

Re : Transformer son gabarit pour passer en HTML5

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

Hors ligne

#11 02/05/2012 17:58:45

Philipppe
Membre
Lieu : Arradon
Inscription : 19/11/2007
Messages : 472

Re : Transformer son gabarit pour passer en HTML5

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


Philippe
CmsMs V1.6.11 Fr (merci jce) et V1.11.x Fr
Hébergeur  Free.fr, Gandi.net (GandiAI et SimpleHosting)

Hors ligne

#12 02/05/2012 21:04:58

jce76350
Administrateur
Lieu : Rouen
Inscription : 23/09/2007
Messages : 6 086
Site Web

Re : Transformer son gabarit pour passer en HTML5

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" neutral


J-C Etiemble Tutoriels v 2.2.x

Hors ligne

#13 02/05/2012 22:21:29

Philipppe
Membre
Lieu : Arradon
Inscription : 19/11/2007
Messages : 472

Re : Transformer son gabarit pour passer en HTML5

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)

Hors ligne

#14 10/05/2012 23:23:54

Ouik
Modérateur
Lieu : Bourgogne
Inscription : 08/01/2008
Messages : 1 062
Site Web

Re : Transformer son gabarit pour passer en HTML5

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.

Hors ligne

#15 11/05/2012 09:08:38

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Hors ligne

#16 11/05/2012 10:14:07

Philipppe
Membre
Lieu : Arradon
Inscription : 19/11/2007
Messages : 472

Re : Transformer son gabarit pour passer en HTML5

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)

Hors ligne

#17 11/05/2012 10:58:53

jce76350
Administrateur
Lieu : Rouen
Inscription : 23/09/2007
Messages : 6 086
Site Web

Re : Transformer son gabarit pour passer en HTML5

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 Tutoriels v 2.2.x

Hors ligne

#18 11/05/2012 16:45:59

Ouik
Modérateur
Lieu : Bourgogne
Inscription : 08/01/2008
Messages : 1 062
Site Web

Re : Transformer son gabarit pour passer en HTML5

merci JCE.

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

Hors ligne

#19 25/05/2012 23:39:26

Ouik
Modérateur
Lieu : Bourgogne
Inscription : 08/01/2008
Messages : 1 062
Site Web

Re : Transformer son gabarit pour passer en HTML5

Si si, ça va venir... smile

Hors ligne

Pied de page des forums