Browse Source

Pages de demo du HTML genere par les squelettes de l'espace prive :

- barre d'onglet
 - icones
 - formulaires
 - boites
 La page typo est presente, mais a faire car il s'agit toujours d'un contenu statique
svn/root/tags/plugins/dev/0.1.0 v0.1.0
cedric@yterium.com 12 years ago
parent
commit
9a8c1939d1
  1. 15
      .gitattributes
  2. 160
      formulaires/charter.html
  3. 51
      formulaires/charter.php
  4. 22
      lang/charter_fr.php
  5. 211
      modeles/typo.html
  6. 34
      plugin.xml
  7. 14
      prive/squelettes/contenu/charte.html
  8. 137
      prive/squelettes/contenu/charte_boites.html
  9. 3
      prive/squelettes/contenu/charte_forms.html
  10. 39
      prive/squelettes/contenu/charte_icones.html
  11. 12
      prive/squelettes/contenu/charte_typo.html
  12. 1
      prive/squelettes/top/charte.html
  13. 1
      prive/squelettes/top/charte_boites.html
  14. 1
      prive/squelettes/top/charte_forms.html
  15. 1
      prive/squelettes/top/charte_icones.html
  16. 1
      prive/squelettes/top/charte_typo.html

15
.gitattributes vendored

@ -1 +1,16 @@
* text=auto !eol
formulaires/charter.html -text
formulaires/charter.php -text
lang/charter_fr.php -text
modeles/typo.html -text
/plugin.xml -text
prive/squelettes/contenu/charte.html -text
prive/squelettes/contenu/charte_boites.html -text
prive/squelettes/contenu/charte_forms.html -text
prive/squelettes/contenu/charte_icones.html -text
prive/squelettes/contenu/charte_typo.html -text
prive/squelettes/top/charte.html -text
prive/squelettes/top/charte_boites.html -text
prive/squelettes/top/charte_forms.html -text
prive/squelettes/top/charte_icones.html -text
prive/squelettes/top/charte_typo.html -text

160
formulaires/charter.html

@ -0,0 +1,160 @@
<div class="ajax formulaire_spip formulaire_configurer formulaire_#FORM formulaire_#FORM-#ENV{id,nouveau}">
<h3 class="titrem">Titre du formulaire</h3>
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
[(#ENV{editable})
<form method='post' action='#ENV{action}' enctype='multipart/form-data'><div>
[(#REM) declarer les hidden qui declencheront le service du formulaire
parametre : url d'action ]
#ACTION_FORMULAIRE{#ENV{action}}
#SET{fl,charter}
<p class="explication">Des explications preliminaires, en debut de formulaire</p>
<fieldset>
<legend><:charter:legend:></legend>
<p class="explication">Des explications dans un fieldset</p>
<ul>
#SET{name,text}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
#SET{name,select}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<select class="select" name="#GET{name}" id="#GET{name}">
#SET{val,oui}
<option value="#GET{val}"[(#ENV{#GET{name}}|=={#GET{val}}|oui)selected="selected"]>[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</option>
#SET{val,non}
<option value="#GET{val}"[(#ENV{#GET{name}}|=={#GET{val}}|oui)selected="selected"]>[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</option>
</select>
</li>
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
</ul>
</fieldset>
<fieldset>
<legend><:charter:legend:></legend>
<ul>
#SET{name,text}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
<p class="explication">Des explications au dessus d'un champ de saisie</p>
<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
<p class="explication">Des explications apres un champ de saisie</p>
</li>
#SET{name,textarea}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea class="textarea" name="#GET{name}">
#ENV*{#GET{name}}</textarea>
</li>
#SET{name,textarea_pleine_largeur}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea class="textarea" name="#GET{name}">
#ENV*{#GET{name}}</textarea>
</li>
#SET{name,text_long_label}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
#SET{name,radio}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label>[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
<p class="explication">Des explications au dessus d'un choix</p>
#SET{val,oui}
<div class="choix">
<input type="radio" class="radio" name="#GET{name}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#ENV{#GET{name}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
#SET{val,non}
<div class="choix">
<input type="radio" class="radio" name="#GET{name}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#ENV{#GET{name}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
</li>
#SET{name,checkbox}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label>[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
#SET{val,1}
<div class="choix">
<input type="checkbox" class="checkbox" name="#GET{name}#EVAL{chr(91)}#EVAL{chr(93)}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
#SET{val,2}
<div class="choix">
<input type="checkbox" class="checkbox" name="#GET{name}#EVAL{chr(91)}#EVAL{chr(93)}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
</li>
#SET{name,checkbox_long_label}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label>[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
#SET{val,1}
<div class="choix">
<input type="checkbox" class="checkbox" name="#GET{name}#EVAL{chr(91)}#EVAL{chr(93)}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
#SET{val,2}
<div class="choix">
<input type="checkbox" class="checkbox" name="#GET{name}#EVAL{chr(91)}#EVAL{chr(93)}" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
</li>
<li class="fieldset">
<fieldset>
<legend><:charter:legend:></legend>
<ul>
#SET{name,text}#SET{obli,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<li class="editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" class="text" name="#GET{name}" value="#ENV*{#GET{name}}" id="#GET{name}"/>
</li>
</ul>
</fieldset>
</li>
</ul>
</fieldset>
[(#REM) ajouter les saisies supplementaires : extra et autre, a cet endroit ]
<!--extra-->
<p class='boutons'><span class='image_loading'>&nbsp;</span>
<input type='submit' class='submit' name="cancel" value='<:bouton_annuler:>' />
<input type='submit' class='submit' value='<:bouton_enregistrer:>' /></p>
</div></form>
]
[(#ENV{editable}|non)
<p class='boutons'><span class='image_loading'>&nbsp;</span>
<input type='submit' class='submit' name="cancel" value='<:bouton_fermer:>' onclick="$.modalboxclose();return false;" />
]
</div>

51
formulaires/charter.php

@ -0,0 +1,51 @@
<?php
/**
* Chargement des valeurs
* @return array
*/
function formulaires_charter_charger_dist(){
$valeurs = array(
'text'=>'',
'text_obli'=>'',
'textarea'=>'',
'textarea_pleine_largeur'=>'',
'text_long_label'=>'',
'radio'=>'non',
'checkbox'=>array(1),
'checkbox_long_label'=>array(1,2),
);
return $valeurs;
}
/**
* Verifier la saisie
* on simule des erreurs si on a clique sur annuler
* @return array
*/
function formulaires_charter_verifier_dist(){
$erreurs = array();
if (_request('cancel')){
$erreurs['message_erreur'] = _L('Un long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur...');
$erreurs['text'] = _L('Erreur');
$erreurs['text_obli'] = _L('Erreur');
$erreurs['textarea'] = _L('Un long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur...');
$erreurs['textarea_pleine_largeur'] = _L('Erreur');
$erreurs['text_long_label'] = _L('Erreur');
$erreurs['radio'] = _L('Erreur');
$erreurs['checkbox'] = _L('Erreur');
$erreurs['checkbox_long_label'] = _L('Erreur');
}
return $erreurs;
}
/**
* Traitement de la saisie
*/
function formulaires_charter_traiter_dist(){
return array('message_ok'=>_L('Bravo, c\'est une reussite !'));
}
?>

22
lang/charter_fr.php

@ -0,0 +1,22 @@
<?php
// This is a SPIP language file -- Ceci est un fichier langue de SPIP
$GLOBALS[$GLOBALS['idx_lang']] = array(
'legend' => 'Legende d\'un fieldset, pour un groupe de saisie',
'label_text' => 'Une saisie en text',
'label_select' => 'Une saisie sous forme de select',
'label_select_oui' => 'C\'est cela, OUI',
'label_select_non' => 'Non merci, pas du tout',
'label_text_obli' => 'Une saisie obligatoire',
'label_textarea' => 'Une saisie en bloc',
'label_textarea_pleine_largeur' => 'Une saisie en bloc en <tt>.pleine_largeur</tt>',
'label_text_long_label' => 'Une saisie avec un tres tres long label qui utilise une class <tt>.long_label</tt>',
'label_radio' => 'Un choix unique',
'label_checkbox' => 'Un choix multiple',
'label_checkbox_long_label' => 'Un choix multiple avec un tres tres long label qui utilise une class <tt>.long_label</tt>',
);
?>

211
modeles/typo.html

@ -0,0 +1,211 @@
<a name="ancre" href="#ancre"></a>
<h1>Typographie</h1>
<h2>Paragraphes</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
<br />Ici, retour à la ligne (avec br).</p>
<p>Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.</p>
<hr />
<p>Troisième paragraphe, précédé d’une ligne horizontale de séparation. Praesent egestas leo in pede. Praesent blandit odio eu enim.
Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae&nbsp;;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
<h2>Titre de niveau h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum lorem leo. Integer tempus turpis sed risus molestie vulputate. Fusce elementum mattis orci, id pretium massa porttitor id.</p>
<h3>Titre de niveau h3</h3>
<p>Vivamus non orci quis tellus fermentum congue ut eu purus. Praesent et eleifend tellus. Quisque vitae sapien at massa mollis interdum vel id justo. Nulla fermentum diam eget ipsum tristique vestibulum auctor tellus consectetur. Proin laoreet eros ut erat luctus faucibus.</p>
<h4>Titre de niveau h4</h4>
<p>Morbi a est sem, eu vestibulum est. Integer gravida bibendum ante, quis euismod odio faucibus vel. Donec aliquam blandit est vitae fringilla. Quisque arcu tortor, mattis nec bibendum nec, sagittis eget justo.</p>
<h5>Titre de niveau h5</h5>
<p>Vivamus tincidunt dapibus sapien, sed molestie est volutpat tempus. Integer posuere consequat sollicitudin. Aenean sit amet sapien ligula, in pulvinar orci. Duis lacus justo, rutrum nec blandit sollicitudin, vulputate vitae nulla.</p>
<h6>Titre de niveau h6</h6>
<p>Nulla facilisi. Donec vitae dui sed lectus venenatis dignissim. Quisque ut ultricies eros. Integer tempus sapien id odio scelerisque vulputate. Etiam pellentesque, ipsum at luctus laoreet, orci eros aliquet velit, vitae porttitor elit purus et arcu. Suspendisse potenti. Nunc hendrerit quam id eros commodo vel adipiscing ligula pellentesque. Praesent ipsum lorem, rutrum feugiat iaculis at, dapibus vel sapien. Sed eget velit purus, sit amet elementum risus. Aliquam porttitor tortor eu felis laoreet rutrum. Etiam tristique leo at nisl adipiscing varius. Nullam varius metus nec lacus eleifend sit amet semper enim aliquet. Integer quis massa eget neque imperdiet porttitor vitae rhoncus elit. Etiam pharetra lacus ut lacus pretium at tincidunt diam convallis.</p>
<h2>Citations</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <q>Ceci est une citation au fil du texte (avec q)</q>.</p>
<blockquote>
<p>Ceci est une citation ordinaire (avec blockquote). Cras eleifend tristique quam. Fusce gravida lectus vel enim convallis tempor.</p>
<p>Second paragraphe. Maecenas laoreet interdum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tristique wisi ut lacus.</p>
</blockquote>
<p>Quelques vers du <cite>Phèdre</cite> de Racine&nbsp;:</p>
<blockquote>
<p>Je le vis, je rougis, je pâlis à sa vue
<br />Un trouble s’éleva dans mon âme éperdue
<br />Mes yeux ne voyaient plus, je ne pouvais parler
<br />Je sentis tout mon corps et transir et brûler.</p>
</blockquote>
<address>Voici mon adresse (avec address) : 92 rue Saint Maur, 75 011 Paris.</address>
<h3>Code</h3>
<pre>&lt;?php
&nbsp; &nbsp; // ceci est du langage php
&nbsp; &nbsp; echo "bonjour";
?&gt;</pre>
<p>Voici un <kbd>raccourci-clavier</kbd> (avec <code>&lt;kbd&gt;</code>), un <samp>extait de script</samp> (avec <code>&lt;samp&gt;</code>) et une <var>variable</var> (avec <code>&lt;var&gt;</code>).</p>
<h2>Listes</h2>
<p>Exemple de liste non ordonnée (avec ul)&nbsp;:</p>
<ul class="spip">
<li>Élément de liste non numérotée</li>
<li>Élément de liste non numérotée</li>
<li>Élément de liste non numérotée
<ul class="spip">
<li>Plantes
<ul class="spip">
<li>Ficus</li>
<li>Olivier</li>
</ul>
</li>
<li>Animaux de compagnie
<ul class="spip">
<li>Chat</li>
<li>Chien</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Et une liste numérotée (avec ol)&nbsp;:</p>
<ol class="spip">
<li>Voici ma main&nbsp;: elle a cinq doigts. En voici deux, en voici trois. Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.</li>
<li>L’index qui montre le chemin, Est le second doigt de la main.</li>
<li>Entre l’index et l’annulaire, Le majeur paraît un grand frère.</li>
<li>L’annulaire porte l’anneau, Avec sa bague, il fait le beau.</li>
<li>Le tout petit auriculaire Marche à côté de l’annulaire.</li>
</ol>
<p>Regardez mes doigts travailler. Chacun fait son petit métier.</p>
<p>N&#8217;oublions pas les listes de définition (avec dl, dd et dt)&nbsp;:</p>
<dl>
<dt>Le kiwi</dt>
<dd>C&#8217;est un fruit mais aussi un petit animal</dd>
<dt>Le litchi</dt>
<dd>Un excellent fruit exotique</dd>
</dl>
<h2>Tableaux</h2>
<table summary="summary">
<caption>Titre du tableau (caption)</caption>
<thead>
<tr class="first">
<th scope="col">entête</th>
<th scope="col">entête</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr class="odd">
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr class="even">
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
</tbody>
</table>
<table summary="summary">
<caption>Exemple de tableau complet, avec thead, tfoot et tbody</caption>
<thead>
<tr>
<th>entête</th>
<th>entête</th>
<th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Pied du tableau (avec tfoot)</td>
</tr>
</tfoot>
<tbody>
<tr class="even">
<td>cellule 1</td>
<td>cellule 2</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</td>
</tr>
<tr class="odd">
<td>cellule 1</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</td>
<td>cellule 3</td>
</tr>
</tbody>
<tbody>
<tr class="even">
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</td>
<td>cellule 2</td>
<td>cellule 3</td>
</tr>
<tr class="odd">
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
</tr>
</tbody>
</table>
<h2>Enrichissements typographiques</h2>
<p>em : <em>exemple de em</em></p>
<p>strong : <strong>exemple de strong</strong></p>
<p>del : <del>exemple del</del></p>
<p>ins : <ins>exemple de ins</ins></p>
<p>abbr : <abbr title="exemple de title">exemple de abbr</abbr></p>
<p>acronym : <acronym title="exemple de title">exemple de acronym</acronym></p>
<p>cite : <cite>exemple de cite</cite></p>
<p>dfn : <dfn>exemple de dfn</dfn></p>
<p>sup : <sup>exemple de sup</sup></p>
<p>sub : <sub>exemple de sub</sub></p>
<p>code : <code>exemple de code</code></p>
<p>kbd : <kbd>exemple de kbd</kbd></p>
<p>samp : <samp>exemple de samp</samp></p>
<p>var : <var>exemple de var</var></p>
<p>bdo en ltr : <bdo dir="ltr">exemple de bdo</bdo></p>
<p>bdo en rtl : <bdo dir="rtl">exemple de bdo</bdo></p>
<h3>À éviter</h3>
<p>Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML 1.0 Strict&nbsp;:
<br />basefont : <basefont>exemple de basefont</basefont>
<br />font : <font>exemple de font</font>
<br />u : <u>exemple de u</u>
<br />s : <s>exemple de s</s>
<br />strike : <strike>exemple de strike</strike>
<br />etc.
</p>
<p>Celles-ci sont déconseillées&nbsp;:
<br />i : <i>exemple de i</i>
<br />b : <b>exemple de b</b>
<br />big : <big>exemple de big</big>
<br />small : <small>exemple de small</small>
<br />tt : <tt>exemple de tt</tt>.</p>
<h2>Hyperliens</h2>
<p>Exemple de <a href="#" title="example">lien interne</a>
<br />Exemple de <a href="http://fr.opquast.com/bonnes-pratiques/fiche/50" rel="external" title="bonne pratique Opquast N°50">lien externe</a>
<br />Exemple de <a href="http://en.opquast.com/bonnes-pratiques/fiche/50" rel="external" title="bonne pratique Opquast N°50" hreflang="en">lien externe</a> avec hreflang
<br />Exemple de <a href="mailto:adresse@courriel.fr">adresse@courriel.fr</a>
<br />Exemple de <a href="#ancre">#ancre</a></p>

34
plugin.xml

@ -0,0 +1,34 @@
<plugin>
<nom>Developpement</nom>
<auteur>Collectif SPIP</auteur>
<version>0.1.0</version>
<etat>dev</etat>
<description>Outils de developpement</description>
<prefix>dev</prefix>
<necessite id="SPIP" version="[2.3.0-dev;)" />
<onglet id='charte' parent='charte'>
<titre>Charte</titre>
<url>charte</url>
</onglet>
<onglet id='charte_icones' parent='charte'>
<titre>Icones</titre>
<url>charte_icones</url>
</onglet>
<onglet id='charte_typo' parent='charte'>
<titre>Typo</titre>
<url>charte_typo</url>
</onglet>
<onglet id='charte_boites' parent='charte'>
<titre>Boites</titre>
<url>charte_boites</url>
</onglet>
<onglet id='charte_forms' parent='charte'>
<titre>Formulaires</titre>
<url>charte_forms</url>
</onglet>
</plugin>

14
prive/squelettes/contenu/charte.html

@ -0,0 +1,14 @@
[(#REM)
Squelette
(c) 2009 xxx
Distribue sous licence GPL
]
<h1>Charte</h1>
<p>
Ces pages donnent des exemples de structure HTML utilisées par les squelettes de l'espace privé
</p>
<p>Le menu a onglet est généré par le code <tt>[(&#35;VAL{nomdelabarreonglet}|barre_onglets{pagecourante})]</tt></p>

137
prive/squelettes/contenu/charte_boites.html

@ -0,0 +1,137 @@
[(#REM)
Squelette
(c) 2009 xxx
Distribue sous licence GPL
]
<h1>Boîtes</h1>
#BOITE_OUVRIR
<p>"box" est le conteneur de <b>base</b> des boites.
Tous les autres conteneurs sont herites de celui la.</p>
<h3><tt>&#35;BOITE_OUVRIR</tt></h3>
<p><tt>&#35;BOITE_OUVRIR</tt> ouvre une boite HTML et accepte 3 arguments optionnels :</p>
<ul>
<li>le contenu du header en premier argument, en général un titre.
Si il ne contient pas de balise &lt;hn> il est automatiquement wrappé par un &lt;h3></li>
<li>les classes de la boite, qui peuvent etre des classes d'habillages ou de fond, décrites ci-dessous</li>
<li>les classes du header</li>
</ul>
<h3><tt>&#35;BOITE_PIED</tt></h3>
<p><tt>&#35;BOITE_PIED</tt> ferme le corps de la boite HTML et ouvre son pied</p>
<h3><tt>&#35;BOITE_FERMER</tt></h3>
<p><tt>&#35;BOITE_FERMER</tt> ferme la boite HTML. Elle ne prend pas d'argument</p>
#BOITE_FERMER
<h2>Habillage des boites</h2>
<h3>Contour</h3>
#BOITE_OUVRIR{'Boîte simple','simple'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte simple','simple'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte info','info'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte info','info'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte note','note'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte note','note'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte raccourcis','raccourcis'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte raccourcis','raccourcis'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte important','important'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte important','important'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
<h3>Fonds</h3>
<p>Combiner la classe basic avec une classe de fond</p>
#BOITE_OUVRIR{'Boîte basic highlight','basic highlight'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte basic highlight','basic highlight'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte basic inverse','basic inverse'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte basic inverse','basic inverse'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
<h3>Erreurs, succes, avertissement</h3>
#BOITE_OUVRIR{'Message de succès','success'}
<p><tt>&#35;BOITE_OUVRIR{'Message de succès','success'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'','success'}
<p><tt>&#35;BOITE_OUVRIR{'','success'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Message d&#39;avertissement','notice'}
<p><tt>&#35;BOITE_OUVRIR{'Message d&#39;avertissement','notice'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'','notice'}
<p><tt>&#35;BOITE_OUVRIR{'','notice'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Message d&#39;erreur','error'}
<p><tt>&#35;BOITE_OUVRIR{'Message d&#39;erreur','error'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'','error'}
<p><tt>&#35;BOITE_OUVRIR{'','error'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
<h2>Header de boite</h2>
<p>Les headers disposent de variantes</p>
#BOITE_OUVRIR{#CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{Boîte simple&titrem avec icone},'simple','titrem'}
<p><tt>&#35;BOITE_OUVRIR{&#35;CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{Boîte simple&titrem avec icone},'simple','titrem'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'<h2>Boîte simple&titrem, en h2</h2>','simple','titrem'}
<p><tt>&#35;BOITE_OUVRIR{&lt;h2>Boîte simple&titrem, en h2&lt;/h2>,'simple','titrem'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{#CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{Boîte simple&section avec icone},'simple','section'}
<p><tt>&#35;BOITE_OUVRIR{&#35;CHEMIN_IMAGE{article-24.png}|balise_img{'',cadre-icone}|concat{Boîte simple&section avec icone},'simple','section'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte simple&section','simple','section'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte simple&section','simple','section'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte simple&bam','simple','bam'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte simple&bam','simple','bam'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
#BOITE_OUVRIR{'Boîte basic inverse&topper','basic inverse','topper'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte basic inverse&topper','basic inverse','topper'}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_FERMER
<h2>Pied de boite</h2>
<p>Le pied de boite est utilise pour des boutons d'action</p>
#BOITE_OUVRIR{'Boîte simple&titrem','simple','titrem'}
<p><tt>&#35;BOITE_OUVRIR{'Boîte simple&titrem','simple','titrem'}</tt></p>
<p><tt>&#35;BOITE_PIED</tt></p>
<p><tt>&#35;BOUTON_ACTION{demo,&#35;SELF}</tt></p>
<p><tt>&#35;BOITE_FERMER</tt></p>
#BOITE_PIED
#BOUTON_ACTION{demo,#SELF}
#BOITE_FERMER

3
prive/squelettes/contenu/charte_forms.html

@ -0,0 +1,3 @@
<h1>Formulaires</h1>
#FORMULAIRE_CHARTER

39
prive/squelettes/contenu/charte_icones.html

@ -0,0 +1,39 @@
[(#REM)
Squelette
(c) 2009 xxx
Distribue sous licence GPL
]
<h1>Icones</h1>
#BOITE_OUVRIR{'|icone_verticale','info'}
<tt>[(&#35;URL_ECRIRE{accueil}
|icone_verticale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
[(#URL_ECRIRE{accueil}|icone_verticale{<:icone_modifier_article:>,article,new})]
<hr style="clear:both;" />
[(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,left})]
<hr style="clear:both;" />
[(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,right})]
<hr style="clear:both;" />
[(#SELF|icone_verticale{<:icone_modifier_article:>,article,new,center})]
<hr style="clear:both;" />
[(#SELF|icone_verticale{<:icone_modifier_article:>,article,del,right})]
#BOITE_FERMER
#BOITE_OUVRIR{'|icone_horizontale','info'}
<tt>[(&#35;SELF|icone_horizontale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
<table><tr>
<td>[(#SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]</td>
<td>[(#SELF|icone_horizontale{texte sur plusieurs<br />lignes pour voir si l'icone<br /> se centre bien <br />verticalement,rubrique,edit})]</td>
<td>[(#SELF|icone_horizontale{'deux<br />lignes',site,del})]</td>
<td>[(#SELF|icone_horizontale{'short',mot})]</td>
</tr></table>
#BOITE_FERMER
#BOITE_OUVRIR{'|icone_horizontale','info'}
<tt>[(&#35;SELF|icone_horizontale{<:</tt><tt>icone_modifier_article:>,article,new})]</tt>
[(#SELF|icone_horizontale{<:icone_modifier_article:>,article,new})]
[(#SELF|icone_horizontale{texte sur plusieurs<br />lignes pour voir si l'icone<br /> se centre bien <br />verticalement,rubrique,edit})]
[(#SELF|icone_horizontale{'deux<br />lignes',site,del})]
[(#SELF|icone_horizontale{'short',mot})]
#BOITE_FERMER

12
prive/squelettes/contenu/charte_typo.html

@ -0,0 +1,12 @@
[(#REM)
Squelette
(c) 2009 xxx
Distribue sous licence GPL
]
<h1>Typo</h1>
<tt>//TODO</tt>
#MODELE{typo}

1
prive/squelettes/top/charte.html

@ -0,0 +1 @@
[(#VAL{charte}|barre_onglets{charte})]

1
prive/squelettes/top/charte_boites.html

@ -0,0 +1 @@
[(#VAL{charte}|barre_onglets{charte_boites})]

1
prive/squelettes/top/charte_forms.html

@ -0,0 +1 @@
[(#VAL{charte}|barre_onglets{charte_forms})]

1
prive/squelettes/top/charte_icones.html

@ -0,0 +1 @@
[(#VAL{charte}|barre_onglets{charte_icones})]

1
prive/squelettes/top/charte_typo.html

@ -0,0 +1 @@
[(#VAL{charte}|barre_onglets{charte_typo})]
Loading…
Cancel
Save