Evolution du thème par défaut

Jos

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.

Stéphane

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>

Jos

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éphane

Il n'y a aucune faute sémantique pour du html5

http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

Jos

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 Wham

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

Jos

@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

cpalo

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

Jerry Wham

@Jos : oui, en effet, ça serait pas mal.

Jos

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?

danielsan

à 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 Wham

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.

Den

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

chriss

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.

Jos

Merci pour vos remontées, je vais partir ainsi sans toucher au design. Je ferai de mon mieux pour contenter tout le monde

Jerry Wham

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

chriss

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.

Haruka

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.

Jerry Wham

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.

Jos

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.

danielsan

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}

Jos

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.

Jerry Wham

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.

Jos

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

danielsan

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

Pour les ID, je ne parle que pour ceux des blocs généraux (nav, header, footer, etc ... ).

aruhuno

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 :


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)

danielsan

Bonsoir,

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

Cordialement,

cpalo

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

danielsan

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

cpalo

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

Jos

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.