| 1 | # Currywurst |
|---|
| 2 | |
|---|
| 3 | Un nouveau jeu de templates par défaut pour Dotclear (versions ≥ 2.7) |
|---|
| 4 | |
|---|
| 5 | ## Motivations |
|---|
| 6 | |
|---|
| 7 | Le jeu de templates Currywurst répond à divers objectifs : |
|---|
| 8 | |
|---|
| 9 | - Proposer un jeu de templates en HTML 5. |
|---|
| 10 | - Pouvoir ainsi y introduire des balises [http://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications](ARIA) pour une meilleure accessibilité. |
|---|
| 11 | - Améliorer la sémantique des tags html (par exemple ne plus présenter les commentaires dans une liste de définition). |
|---|
| 12 | - Factoriser les éléments récurrents dès que c'est possible sans pâtir à la compréhension. |
|---|
| 13 | - Préparer le passage à la syntaxe [http://twig.sensiolabs.org/](twig). |
|---|
| 14 | - Adopter une nomenclature inspirée de [http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/](BEM) – sans en faire une religion dogmatique toutefois. Voir aussi [http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/](OOCSS). |
|---|
| 15 | - Faire en sorte de réduire l'obligation de recourir aux sélecteurs enfants (`#top h1 {}` par exemple) ou aux ID dans les CSS. |
|---|
| 16 | |
|---|
| 17 | ## Revue fichier par fichier |
|---|
| 18 | |
|---|
| 19 | Ne sont pas listées les modifications systématiques : ajout de classes sur tous les éléments « probablement stylés » ou ne possédant qu'un id ; syntaxe html5. |
|---|
| 20 | |
|---|
| 21 | Les modifications nécessitant des explications sont listées de la façon suivante : |
|---|
| 22 | |
|---|
| 23 | <Description courte> : <motivation>. <Explication>. |
|---|
| 24 | |
|---|
| 25 | Les motivations sont abrégées en : |
|---|
| 26 | - a11y : amélioration accessibilité |
|---|
| 27 | - sém. : amélioration ou correction sémantique (html) |
|---|
| 28 | - cont. : amélioration du contenu |
|---|
| 29 | - ergo : amélioration ergonomique |
|---|
| 30 | |
|---|
| 31 | Par convention l'ordre des attributs dans les balises html est *class, id, autres attributs*. |
|---|
| 32 | |
|---|
| 33 | Toutes les listes (ul ou ol) comportent le terme "list" dans leur nom de class. |
|---|
| 34 | |
|---|
| 35 | ### _top.html |
|---|
| 36 | |
|---|
| 37 | Déplacement des liens d'accès rapides au-dessus du titre du blog : **a11y**, **ergo**. *Le titre de fenêtre étant lu avant tout par les aides techniques, l'internaute sait déjà où il se trouve. L'accès est également plus rapide au clavier. Côté design, la plupart des créateurs de thèmes ont pris l'habitude de déplacer ce bloc en haut de la page ; ils n'auront plus besoin de passer par des position absolute pour ce faire.* |
|---|
| 38 | |
|---|
| 39 | ### _simple-entry.html |
|---|
| 40 | |
|---|
| 41 | (aka contexte du billet seul entier avec commentaires etc.) |
|---|
| 42 | |
|---|
| 43 | Formulaire de dépôt de commentaire : |
|---|
| 44 | - remplacement des inputs par des buttons |
|---|
| 45 | - typage des champs |
|---|
| 46 | - ajout des attributs required quand nécessaire |
|---|
| 47 | |
|---|
| 48 | Découpage en deux grandes div : post et post-feedback. |
|---|
| 49 | - post |
|---|
| 50 | - post-title : titre |
|---|
| 51 | - post-meta |
|---|
| 52 | - post-info |
|---|
| 53 | - post-tags-list |
|---|
| 54 | - post-excerpt |
|---|
| 55 | - post-content |
|---|
| 56 | - post-attachments |
|---|
| 57 | - post-attachments-title |
|---|
| 58 | - post-attachments-list |
|---|
| 59 | - post-feedback |
|---|
| 60 | - feedback__comments |
|---|
| 61 | - comments-feed |
|---|
| 62 | - comments-list |
|---|
| 63 | - comment-form |
|---|
| 64 | - send-trackback |
|---|
| 65 | |
|---|
| 66 | ### __layout.html |
|---|
| 67 | |
|---|
| 68 | Reprend l'intégralité du home.html et définit les blocs permettant l'héritage et extension |
|---|
| 69 | |
|---|
| 70 | La liste des noms utilisés pour les blocs sont les suivants (les noms sont composés de deux termes, le nom du parent direct du bloc et le nom du bloc en question, sachant que le nom 'attr' est réservé aux attributs des balises, comme par exemple 'body-attr', et 'tag' pour encadrer une balise ouvrante seule) : |
|---|
| 71 | |
|---|
| 72 | - html-head : contenu de la balise head |
|---|
| 73 | - head-title : contenu de la balise title |
|---|
| 74 | - head-meta : liste des balises meta du head |
|---|
| 75 | - head-dc : liste des balises dublin core du head |
|---|
| 76 | - head-linkrel : liste des balises link rel du head |
|---|
| 77 | - body-tag : balise body (sans contenu ni balise fermante) |
|---|
| 78 | - html-body : contenu de la balise body |
|---|
| 79 | - body-page : contenu de la div #page |
|---|
| 80 | - page-top : contenu d'entête de la div #page (en général inclusion du _top.html) |
|---|
| 81 | - page-wrapper : contenu principal de la div #page, soit le contenu de la div #wrapper |
|---|
| 82 | - wrapper-main : contenu principal de la div #wrapper, soit le contenu de la div #main |
|---|
| 83 | - main-content : contenu de la div #content |
|---|
| 84 | - wrapper-sidebar : contenu annexe de la div #wrapper (en général inclusion de _sidebar.html) |
|---|
| 85 | - page-footer : contenu de pied de page de la div #page (en général inclusion du _footer.html) |
|---|
| 86 | |
|---|
| 87 | Pour rappel, la hiérarchie des blocs html est la suivante : |
|---|
| 88 | |
|---|
| 89 | - html |
|---|
| 90 | - head |
|---|
| 91 | - body |
|---|
| 92 | - #page |
|---|
| 93 | - .header |
|---|
| 94 | - #wrapper |
|---|
| 95 | - #main |
|---|
| 96 | - #content |
|---|
| 97 | - #sidebar/.sidebar |
|---|
| 98 | - #footer/.footer |
|---|
| 99 | |
|---|
| 100 | |
|---|
| 101 | *** |
|---|
| 102 | |
|---|
| 103 | A réfléchir : inclusion par défaut de liens "sociaux" ? |
|---|
| 104 | |
|---|
| 105 | *** |
|---|
