Evolution du thème par défaut

JosJos Member
Bonjour à tous,

Actuellement je vise à optimiser le thème par défaut, sans changer le design. Pour cela, j’essaie de construire une sorte de "reset css" qui supprimerai le reset css actuel (gourmand en ressource). Je tente également d'améliorer le Responsive Design.

Pour le moment, mes tests sont encourageant en terme d'optimisation et de simplicité de modification. Mais je n'ai pas encore finit ;)...

Y a t'il des points (hors le design) que vous souhaiteriez voir améliorer au niveau de la sémantique des pages ou de la feuille de style? J'essayerai de faire au mieux en fonction de mes compétences.
«1

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Salut

    au niveau des articles, je verrais plus une sématique dans ce style
    <article role="article" id="post-1">
    
    	<header>
    		<h1></h1>
    		<p></p>
    	</header>
    
    	<section>
    	</section>
    			
    	<footer>
    		<p></p>
    	</footer>
    			
    			
    </article>
    

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • JosJos Member
    mai 2013 modifié
    Salut Stéphane,

    Un header, section, footer dans un article...? C'est très étrange, et je ne crois pas que sémantiquement se soit une bonne idée, d'autant plus que ces balises sont déjà utilisé. Ou alors 'ai mal compris ;). Si tu as un exemple de site sous cette forme, peut-tu me mettre un lien.

    Là j'ai dans l'objectif de simplifier et d'optimiser le thème (sans changer le design). Si tu souhaite faire autre chose dessus, je suis ouvert à tout, même à tout changer si tu veux ;). Si c'était pour moi, je modifiai aussi le design et la police (histoire que ce thème est une plus "belle gueule").

    Ayant une bonne base de travail avec le thème 5.1.7, plus un "reset css" maison que je développe depuis quelques temps déjà et qui est presque finit, çà ne devrait pas prendre trop de temps.
  • StéphaneStéphane Member, Former PluXml Project Manager

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • JosJos Member
    mai 2013 modifié
    Non c'est pas une faute ;), c'est juste étrange (j'ai vu çà sur le thème Wordpress par défaut). Si tu veux que je fasse comme çà, pas de soucis, c'est fesable.

    Ou alors çà :
    [== HTML ==]
    <header>
        <h1></h1>
        <p></p>
    </header>
    
    <section>
    
        <article>
    
            <div class="article-header">
                <h1></h1>
                <p></p>
            </div>
    
            <div class="article-content">
                <p></p>
            </div>
    
            <div class="article-footer">
                <p></p>
            </div>
    	
        </article>
    
        <aside>
    
            <div class="aside-title">
                <p></p>
            </div>
    
            <div class="aside-content">
                <p></p>
            </div>
            
        </aside>
    
    </section>
    
    <footer>
        <p></p>
    </footer>
    
  • Jerry WhamJerry Wham Member
    mai 2013 modifié
    En faisant ça, tu perds une grande partie de l'intérêt du html5...

    Il ne faut plus raisonner en terme de page, mais de blocs, chaque bloc ayant son indépendance en quelque sorte. C'est surtout pensé, je crois, pour que les design soient "responsives".
  • JosJos Member
    mai 2013 modifié
    @Jerry : cà c'est sure tu as raison, disons que je propose cela pour rester "soft" ;). Mais en effet, on pourrait évoluer sur quelque chose de plus "HTML5". Dans ce cas, on pourrait partir dans le système que suggère Stéphane et s'inspirer de ceci (voir les 4 pages) :

    http://www.alsacreations.com/tuto/lire/1129-html5-aria-semantique-wordpress.html
  • cpalocpalo Member
    Bonjour,

    Je passe au html5.; et effectivement même si j'ai compris cette démarche du html5 , c'est un peu déconcertant.
    Bon courage.

    Cordialement
  • @Jos : oui, en effet, ça serait pas mal.
  • JosJos Member
    Vu qu'on semble tous vouloir partir sous cette sémantique, je vais partir sur çà. J'y incorporerai également mon "reset" pour virer le reset css que j'avais mis en place (histoire d'améliorer les performances), ce qui permettra d'harmoniser l'affichage sur tous les navigateurs.

    Parcontre, est ce que je modernise un peu le design?
  • à mon avis un thème par défaut doit avant tout être bien structuré, agrémenté de class et id logique.
    Tout ce qui concerne la couleur doit-être regroupé de la sorte et placé en fin de feuille de style :
    .article, .footer{border-color:red}
    .article, .section{background-color: blue}
    
    Il suffit de cette manière de changer à un seul endroit la couleur pour obtenir une modif' générale.

    Moderniser le design ? je ne pense pas que ça soit la peine.
    Le template par défaut doit-être une bonne base bien saine pour celles et ceux qui souhaitent le modifier.

    Cordialement,
  • Jerry WhamJerry Wham Member
    mai 2013 modifié
    Je suis de l'avis de danielsan. Le template doit rester une base qui doit pouvoir être modifiée.
    Déjà, la prise en compte de la sémantique sera une modernisation puisqu'elle prendra en compte les bénéfice du html5.
  • DenDen Member
    Bonjour à tous,

    Je suis de l'avis de danielsan et Jerry, garder le thème par défaut sans changer le design.
    Mais pourquoi ne pas ajouter un thème (en exemple avec un très beau design) dans Ressources et le garder en évidence (en première présentation en haut). Car nos ressources en thèmes manquent énormément... :8

    Merci! Den
  • chrisschriss Member
    mai 2013 modifié
    bonjour,
    Den a écrit:
    Bonjour à tous,

    ........... Car nos ressources en thèmes manquent énormément... :8

    Merci! Den

    cela va peut-être changer..... je fini le site d'une Chorale voir ici (pour l'instant sur un site de tests); mais après, j'ai l'intention de créer plusieurs thèmes.
  • JosJos Member
    Merci pour vos remontées, je vais partir ainsi sans toucher au design. Je ferai de mon mieux pour contenter tout le monde ;)
  • chriss a écrit:
    bonjour,
    Den a écrit:
    Bonjour à tous,

    ........... Car nos ressources en thèmes manquent énormément... :8

    Merci! Den

    cela va peut-être changer..... je fini le site d'une Chorale voir ici (pour l'instant sur un site de tests); mais après, j'ai l'intention de créer plusieurs thèmes.

    C'est quoi ce site ? Il est bloqué par block.si comme étant un site malicieux...
  • chrisschriss Member
    bonjour,
    Jerry Wham a écrit:

    C'est quoi ce site ? Il est bloqué par block.si comme étant un site malicieux...

    bizarre, pas bloqué de mon côté.... mais comme je disais c,est un serveur gratuit, fait par 2 personnes du Nouveau-Brunswick.
  • HarukaHaruka PluXml Project Manager
    danielsan a écrit:
    à mon avis un thème par défaut doit avant tout être bien structuré, agrémenté de class et id logique.
    Tout ce qui concerne la couleur doit-être regroupé de la sorte et placé en fin de feuille de style :
    .article, .footer{border-color:red}
    .article, .section{background-color: blue}
    
    Il suffit de cette manière de changer à un seul endroit la couleur pour obtenir une modif' générale.

    Je trouve que c'est une bonne idée, ça permettrais à un débutant de modifier facilement les couleurs de son thème, et de créer des feuilles de styles annexes qui reprendraient ces lignes CSS. On pourrait ainsi imaginer une feuille de style "bleu", une autre "vert", etc... Et qu'il suffit ensuite de rajouter une ligne dans le header pour avoir la couleur qu'on souhaite.
  • P3ter a écrit:
    danielsan a écrit:
    à mon avis un thème par défaut doit avant tout être bien structuré, agrémenté de class et id logique.
    Tout ce qui concerne la couleur doit-être regroupé de la sorte et placé en fin de feuille de style :
    .article, .footer{border-color:red}
    .article, .section{background-color: blue}
    
    Il suffit de cette manière de changer à un seul endroit la couleur pour obtenir une modif' générale.

    Je trouve que c'est une bonne idée, ça permettrais à un débutant de modifier facilement les couleurs de son thème, et de créer des feuilles de styles annexes qui reprendraient ces lignes CSS. On pourrait ainsi imaginer une feuille de style "bleu", une autre "vert", etc... Et qu'il suffit ensuite de rajouter une ligne dans le header pour avoir la couleur qu'on souhaite.

    C'est pas forcément une très bonne pratique d'ajouter des feuilles de style en veux-tu, en voilà. Il vaut mieux à la rigueur mettre des lignes en commentaires en fin de page, comme le préconise danielsan.
  • JosJos Member
    mai 2013 modifié
    Voila où j'en suis (globalement) :
    [== Indéfini ==]
    	<header id="header" role="banner">
    		<div class="content">
    			<h1>Titre du site</h1>
    			<h2>Sous-titre du site</h2>
    		</div>
    	</header>
    
    	<nav id="nav" role="navigation">
    		<div class="content">
    			<ul>
    				<li>Menu</li>
    				<li>Menu</li>
    				<li>Menu</li>
    			</ul>
    		</div>
    	</nav>
    
    <section id="section">
    
    	<div class="content">
    	
    		<div id="article-width-sidebar">
    		
    			<article class="article" role="article">
    			
    				<header>
    					<h1>Titre du site</hi>
    					<p>Auteur - Date - Nombre de commentaire</p>
    				</header>
    
    				<p>Contenu de l'article</p>
    
    				<footer>
    					<p>Catégorie de l'article - Tag de l'article</p>
    				</footer>
    				
    				<h2>Liste commentaires</h2>
    				
    				<h2>Formulaire commentaire</h2>
    
    			</article>
    		
    			<div id="pagination">
    				<span>Pagination</span>
    			</div>
    			
    			<div class="rss">
    				Lien RSS		
    			</div>
    			
    		</div>
    	
    		<aside id="aside" role="complementary">
    
    			<h3>Titre</h3>
    			<ul>
    				<li>Item</li>
    				<li>Item</li>
    				<li>Item</li>
    			</ul>
    				
    			<h3>Titre</h3>
    			<ul>
    				<li>Item</li>
    				<li>Item</li>
    				<li>Item</li>
    			</ul>
    
    			<p>Fil des articles</p>
    			<p>Fil des commentaires</p>
    		
    		</aside>
    
    	</div>
    
    </section>
    
    
    <footer id="footer" role="contentinfo">
    
    	<div class="content">
    		<p>Contenu du footer</p>
    	</div>
    
    </footer>
    
    

    Au niveau du css j'ai mis mon "reset" harmonisant l'affichage selon les navigateurs (balises de base, balises html5, tableaux, formulaires, et box-sizing). De plus, au lieu de contrôles aux balises <header>, <article>, je leurs aies attribué un id ou une classe (çà évite de se mélanger vu que par exemple <header> et <footer> sont utilisés plusieurs fois). J'ai également amélioré le Responsive Design, supprimé le reset css mauvais pour les performances, et alléger le poid du css (pourvu que çà dure). Voila pour le début.
  • danielsandanielsan Member
    mai 2013 modifié
    je ne pense pas que ça soit la peine de mettre une id à une balise générale, même si cette dernière est utilisée plusieurs fois.
    Dans CSS (Cascading Style Sheets) il y a "cascade" ...
    [== CSS ==]
    body > header {color:red}
    
    est différent de
    [== CSS ==]
    article header{color:blue}
    
    c'est le gros avantage de la CSS,
    en dupliquant les DIV, en rajoutant des class et id, on perd le principe même de la CSS ...

    Je ne comprends pas pourquoi chaque bloc est entouré d'un autre avec une class "content" ?
    Pourquoi
    [== HTML ==]
    <nav role="navigation">
    <div class="content">
    	<ul>
    		<li>Menu</li>
    		<li>Menu</li>
    		<li>Menu</li>
    	</ul>
    </div>
    </nav>
    
    alors que
    [== HTML ==]
    <nav role="navigation">
    <ul class="content">
    	<li>Menu</li>
    	<li>Menu</li>
    	<li>Menu</li>
    </ul>
    </nav>
    
    suffit ?
    voir simplement
    [== HTML ==]
    <nav role="navigation">
    <ul>
    	<li>Menu</li>
    	<li>Menu</li>
    	<li>Menu</li>
    </ul>
    </div>
    
    puisqu'on peut l'atteindre avec
    [== CSS ==]
    header+nav ul li{color:red}
    
  • JosJos Member
    mai 2013 modifié
    Pour le premier point, on peu faire ainsi, mais je ne l'ai pas fait parce que çà me semble plus dure à comprendre pour les débutants. J’essaye de faire simple... Si la majorité préfère cette méthode, je partirai là dessus.

    Pour le second point, si tu supprime ces div, ton site sera en pleine largeur. http://forum.pluxml.org/viewtopic.php?id=3983. Utilise Firebug et survole ces div et tu comprendra assez facilement.
  • danielsan a raison, sauf qu'il est plus rapide de mettre un id que de parser tout le DOM pour atteindre le bloc désiré par cascade.
  • JosJos Member
    mai 2013 modifié
    En gros, pour le premier point, on a le choix entre l’optimisation pur et dure, la facilité de compréhension pour les débutants. A vous de décider, vous avez le pouvoir ;)
  • Pour moi, plus le HTML est épuré, plus il est simple et pédagogique.
    On comprend bien la répartition des blocs en HTML et le principe de la cascade pour la CSS ...
    Sinon on peut mettre les styles dans la balise, ça marche aussi sans se prendre la tête ! ]:D {) 8o
    Je préfère apprendre aux gens à chasser que de leur filer de la barbac' (c'est la tendance des générations actuelles de vouloir tout cuit dans l'bec ...) :D

    Pour les ID, je ne parle que pour ceux des blocs généraux (nav, header, footer, etc ... ).
  • aruhunoaruhuno Member
    mai 2013 modifié
    Bonsoir,

    Pour mon nouveau site j'ai bricolé le design de la 5.1.7.
    Ce qu'il manque, à mon avis, c'est un peu de relief au thème.

    Par exemple, ajouter de l'ombre sur le header et le footer, un peu comme ça :
    1369163442.png

    Petite requête aussi : full compatible W3C s'il vous plaît ! ^^

    Bon courage et merci d'être ouvert aux suggestions (si t'as besoins de mon css, n'hésite pas à me MP).

    PS : Je m'excuse pour le flou, mais j'aime pas que l'on voit le contenu avant que ce soit totalement fini (site en développement)
  • Bonsoir,

    je pense pas que le rôle du thème par défaut soit d'être utilisé tel quel, brut de dezippage.

    Cordialement,
  • cpalocpalo Member
    Bonjour,

    Je pense aussi que le thème doit rester simple et compréhensible par les débutants afin de permettre à chacun de s'en inspirer facilement pour créer son propre thème.

    Petite question en passant: un H1 dans le header du site et un H1 dans le header d'un article auront-ils la même taille de police si on ne crée pas une classe du genre article.H1 ?
    D'où effectivement le fait que j'étais parti aussi à vouloir utiliser <section div="">

    Cordialement
    Bon courage
  • arg,
    [== CSS ==]
    article h1{color:red}
    
    [== HTML ==]
    <section id="monid"></section>
    

    si tu ne dis pas à l'un et/ou à l'autre quel style avoir, ils seront identiques.
    (perso, je ne suis pas favorable à mettre des H1 de partout, mais bon il parait que c'est Google-friendly alors bon ... )
  • cpalocpalo Member
    Surtout que jusqu'à maintenant dans le css on définissait les tailles des six balises H1 à H6, ce qui perd un peu de son intéret si on doit redefinir ensuite des class specifiques
  • JosJos Member
    mai 2013 modifié
    En tout cas le débat est intéressant, et fait évoluer les choses. Voici la suite :
    [== HTML ==]
    <header role="banner">
    	<div class="content">
    		<h1>Titre du site</h1>
    		<h2>Sous-titre du site</h2>
    	</div>
    </header>
    
    <nav role="navigation">
    	<div class="content">
    		<ul>
    			<li>Menu</li>
    			<li>Menu</li>
    			<li>Menu</li>
    		</ul>
    	</div>
    </nav>
    
    <section>
    
    	<div class="content">
    	
    		<div id="article-width-sidebar">
    		
    			<article role="article">
    			
    				<header>
    					<h1>Titre du site</hi>
    					<p>Auteur - Date - Nombre de commentaire</p>
    				</header>
    
    				<p>Contenu de l'article</p>
    
    				<footer>
    					<p>Catégorie de l'article - Tag de l'article</p>
    				</footer>
    				
    				<h2>Liste commentaires</h2>
    				
    				<h2>Formulaire commentaire</h2>
    
    			</article>
    		
    			<div id="pagination">
    				<span>Pagination</span>
    			</div>
    			
    			<div class="rss">
    				Lien RSS		
    			</div>
    			
    		</div>
    	
    		<aside role="complementary">
    
    			<h3>Titre</h3>
    			<ul>
    				<li>Item</li>
    				<li>Item</li>
    				<li>Item</li>
    			</ul>
    				
    			<h3>Titre</h3>
    			<ul>
    				<li>Item</li>
    				<li>Item</li>
    				<li>Item</li>
    			</ul>
    
    			<p>Fil des articles</p>
    			<p>Fil des commentaires</p>
    		
    		</aside>
    
    	</div>
    
    </section>
    
    
    <footer role="contentinfo">
    
    	<div class="content">
    		<p>Contenu du footer</p>
    	</div>
    
    </footer>
    

    J'avais mis des id et class dans les éléments principaux pour tenter de simplifier les choses pour les débutants, mais je les aies enlevé. J'utiliserai les sélecteurs enfant suggéré par @Danielsan. Au moins, çà ne changera pas trop avec le thème actuel.

    @aruhuno : oui, les thèmes de PluXml sont respectueux des normes W3C. D’ailleurs, le thème 5.1.7 était valide jusqu'à que le W3C changent un rôle du jour au lendemain sur la balise <section>. Pour le design, Stéphane ne veut pas le modifier.

    Je pense aussi qu'un thème se doit d'être simple et pratique. Mais en même temps, il faut aussi qu'il soit un minimum "sexy" pour attirer le regard, moderniser PluXml, et permettre aux débutants d'avoir un "beau petit site" sans trop se prendre la tête. Quoique qu'il en soit, le design n'est pas prévu à ce jour. La communauté pourra toujours faire des thèmes basé sur celu là.

    @cpalo : tout comme le thème actuel, les h1 auront une taille de 2em, et le titre du site une taille de 2.2em. Parcontre, au niveau du css, pas mal de choses vont évoluer pour que se soit mieux optimisé, et moins lourd.

    Merci à vous.
Connectez-vous ou Inscrivez-vous pour répondre.