Changer thème par défaut pour la prochaine version de PluXML

Stéphane · novembre 2012

Den a écrit:

Salut Jos,

J'ai testé le thème béta 8. Dans sidebar les mots clés s'affichent, à l'horizontale, c'est, normal?
Pour le reste, tout fonctionne.

Merci! Den

Je confirme, quand il y a plusieurs tags, ils sont tous alignés sur une ligne dans la sidebar

Jos · novembre 2012

Oui je confirme, car vu que sur la prochaine version de PluXML il y a aura plusieurs tailles de tag, j'ai pensé que çà ressemblerai plus à un nuage de tag lorsqu'ils sont en ligne.

http://www.framablog.org/tee-shirt/tee-shirt_tag-cloud.png

Parcontre, si tu veux Stéphane, je peut le remodifie avec des <li> si tu préfère.

@bdube30 : Merci. J'espère il sera pleinement fonctionnel sur la prochaine version de PluXML.

Stéphane · novembre 2012

@Jos, il faudrait qu'un retour à la ligne se fasse automatique dès que la ligne sort de la sidebar.

Jos · novembre 2012

@Stéphane : je viens de revérifier, chez moi, sur plusieurs navigateurs, j'ai un retour à la ligne automatique dés lors que la liste des mots clés dépasse la largeur de la sidebar (sur la 5.1.7), du moins si j'ai bien compris

Jerry Wham · novembre 2012

Pas mal. Beau travail.
Et la css est vraiment très propre et lisible.

Bravo

Den · novembre 2012

Bravos Jos, excellent travail!

GROS MERCI!

Jos · novembre 2012

PluXML se refera une beauté

ti_pierre · novembre 2012

Salut Jos

comme j'ai expliqué à stéph je n'ai pas eu une minute à moi le week dernier, je me donne du temps pour regarder ce week, vous avez super bien bosser, je t'envoi un thème avec mes modifs ASAP et tu pourra ainsi juger, on en parle plus tard

Jos · novembre 2012

Pas de soucis

Mounik · décembre 2012

Testé sous firefox, opéra, chrome et IE tout semble fonctionner comme il faut.
Bon boulot

Jos · décembre 2012

Je te remercie d'avoir testé

Jos · décembre 2012

La version beta 12 corrige quelques bug signalé par Stéphane et améliore certains points. Si vous trouvez d'autres blugs, n'hésitez pas à m'en faire part.

danielsan · décembre 2012

hello,

manque un style sur les clicks des submit/reset

input[type=submit]:active, 
input[type=reset]:active {
	text-decoration: none;
	color: #fff;
	background-color: #222;
}

danielsan · décembre 2012

sinon ce qui me gène avec ce thème comme l'ancien est le fait de ne pas entourer physiquement chaque article dans la boucle. Le fait des les encadrer permet un affichage sur plusieurs colonne, faire des effets sur chaque bloc, etc ...

au lieu d'avoir (exemple avec categorie.php):

			<article role="article">

				<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>

					<h1>
						<?php $plxShow->artTitle('link'); ?>
					</h1>

					<div class="article-info">
						<p>
							<?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
						</p>
					</div>

					<div class="article-content">
						<?php $plxShow->artChapo(); ?>
					</div>

					<div class="article-info">
						<p>
							<?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> - 
							<?php $plxShow->artNbCom(); ?>
						</p>
					</div>
					<div class="article-info">
						<p>
							<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
						</p>
						<p>
							<?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags(); ?>
						</p>
					</div>

					<div class="clear">
					</div>

				<?php endwhile; ?>

				<p id="pagination">
					<?php $plxShow->pagination(); ?>
				</p>

				<p class="rss">
					<?php $plxShow->artFeed('rss',$plxShow->catId()); ?>
				</p>

			</article>

on aurait :

			<article role="article">

				<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
					<div class="item">
					<h1>
						<?php $plxShow->artTitle('link'); ?>
					</h1>

					<div class="article-info">
						<p>
							<?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
						</p>
					</div>

					<div class="article-content">
						<?php $plxShow->artChapo(); ?>
					</div>

					<div class="article-info">
						<p>
							<?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> - 
							<?php $plxShow->artNbCom(); ?>
						</p>
					</div>
					<div class="article-info">
						<p>
							<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
						</p>
						<p>
							<?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags(); ?>
						</p>
					</div>
					</div><!-- .item -->

				<?php endwhile; ?>

				<p id="pagination">
					<?php $plxShow->pagination(); ?>
				</p>

				<p class="rss">
					<?php $plxShow->artFeed('rss',$plxShow->catId()); ?>
				</p>

			</article>

de cette manière tu n'as pas besoin d'avoir un bloc avec la class "clear" après chaque article, mais un bloc .item avec comme style

.item{
	clear:both;
	margin-bottom: 45px
}

en sortant aussi du flux (méthode du clearfix ?) les blocs .rss et #pagination car ils n'ont rien à faire dans celui de la liste des articles ...

voilà.
Celui qui veut afficher ses articles sur 2 colonnes, il n'a qu'à changer le style item

Qu'en pensez-vous ?

danielsan · décembre 2012

concernant la hiérarchie des titres, je vois plutôt (dites-moi si je me trompe) :

en H1 : le titre du site

<h1><?php $plxShow->mainTitle('link'); ?></h1>

en H2 :

*/ le titre de la catégorie (dans categorie.php)

<h2><?php $plxShow->catName(); ?></h2>

*/ le titre des tags (dans tags.php)

<h2><?php echo $plxShow->plxMotor->cible; ?></h2>

où l'on pourrait compléter à sa guise par (ou utiliser une variable de langue )

<h2>Liste des articles ayant pour mot-clef "<?php echo $plxShow->plxMotor->cible; ?>"</h2>

*/ le titre des archives (dans archives.php)

<h2><?php $plxShow->artDate('#month #num_year(4)'); ?></h2>

où l'on pourrait compléter à sa guise par (ou utiliser une variable de langue )

<h2>Liste des articles publi&eacute;s en <?php $plxShow->artDate('#month #num_year(4)'); ?></h2>

*/ le titre des statics (dans static.php)

<h2><?php $plxShow->staticTitle(); ?></h2>

*/ le titre des articles (dans article.php)
(note: je ne pense pas qu'il faille mettre le titre de l'article sous forme de lien puisqu'on est sur sa propre page ... )

<h2><?php $plxShow->artTitle(); ?></h2>

en H3 : le titre de l'article/tags/archives (dans categorie.php, tags.php et archives.php, dans la boucle )

<h3><?php $plxShow->artTitle('link'); ?></h3>

Qu'en pensez-vous ?

Cordialement,
_____
D.San

Stéphane · décembre 2012

@danielsan: on est sur une sémantique html5. Si les experts en html5 pouvaient participer à la validation de la structure de ce thème... merci

Jos · décembre 2012

@danielsan :

Disons que c'est une manière différente de voir les choses, les deux sont bonnes. Concernant le structure des articles, je ne pense pas faire exactement comme tu le dis mais tu viens de me donner une idée pour améliorer la structure des articles. La modifs a effectuer est plutôt simple.

Concernant la structure des titres, pour faire simple, je dirai que niveau référencement il vaut mieux privilégier le titre de l'article, plutôt que le titre du site. Pour les h2, niveau référencement là aussi, il paraîtrait qu'il soient plus efficace lorsqu'ils sont utilisées dans un article. Disons que j'ai fais une structure simple, qui semble fonctionner.

danielsan · décembre 2012

ok je comprends.

Faisant (aussi) de l'édition papier, c'est vrai que j'ai tendance à faire le rapprochement ... titre du bouquin (h1), titre du chapitre (h2), titre du paragraphe (h3).
Il y a donc pour moi une hiérarchie des titres car une hiérarchie du contenu.

Admettons que j'enlève la feuille de style, je dois pouvoir comprendre l'ensemble de la structure du contenu.
Si je vois pleins de h1, sans titre de site ni de titre de page, je comprends rien

Pour moi, sur une page il ne peut y avoir qu'un seul H1. S'il y en a 2 cela veut dire qu'on liste quelque chose. Quoi ? Les articles de la catégorie "foutchebol". Cette page de catégorie a autant d'importance qu'un article de part son existence, elle mérite un titre, d'importance supérieure à celui des éléments qu'elle liste ...

Avec ce thème, je ne sais pas si je suis dans une catégorie/tags/archives/accueil qui liste des articles ou si je suis dans un article ... peut-être est-ce ma manie de faire un site en priorité pour le visiteur qui lui aura des attentes plus durable qu'un robot

:cool: :cool: :cool: f¤ck les robots :cool: :cool: :cool:

Jos · décembre 2012

@danielsan :

Il y a quelques temps, je construisait mes structures comme toi : le titre du site en h1, et les titre des pages/articles en h2, ce qui n'est pas une mauvaise méthode au contraire. C'était une structure très répandu car elle a fait ses preuves.

Maintenant j'ai opté pour une structure avec titre des articles/page en h1 car bien souvent, c'est le titre de la page ou de l'article qui est important, notamment pour un blog. Elle a plusieurs avantages : mise en avant du titre des pages et des articles, évite d'avoir le même h1 sur toutes les pages, ... De plus, si le titre de la page est une image, çà évite de répéter un h1 juste pour la sémantique.

C'est une méthode qui est souvent utilisé de nos jours, notamment sur d'autres CMS bien connu, car elle offre pas mal d’avantages. Ta méthode est très bonne car c'est ce que je faisais aussi. Si le css n'est pas chargé, le visiteur verrait en priorité les titres des pages/articles car ce sont les seuls en h1. C'est une optimisation pour les robots, qui n'a aucune incidence pour le visiteur car le css permet d'améliorer le visuel de n'importe quoi. Bref, je pense que c'est mieux, Stéphane décidera

Parcontre, je suis entrain de revoir le point concernant les articles : seul l'article sera "encapsulé" dans la balise <article>...</article> comme tu l'as exposé plus haut, histoire de le styliser plus facilement. Comme tu le disait, à juste titre, la pagination, les flux rss, ... n'ont rien à faire dans l'article. Disons que j'étais sur le principe du thème de base, mais ce point méritait d'être amélioré.

danielsan · décembre 2012

okayyyy.

En tout cas rien n'empêche de rajouter le titre de la page sur laquelle nous sommes (catégorie/tags/archives) sans l'encapsuler dans des hX ?
Le fondement de ma gêne après tout n'est pas l'importance de tel titre par rapport à l'autre mais le fait qu'il n'y ait pas de titre à une page !

Est-ce que la balise "article" définit la zone de l'ensemble des articles (donc la pagination et le flux rss) ou peut(doit?)-il être répété pour chaque article ?

Cordialement,

Jos · décembre 2012

Pour le premier point, oui c'est une bonne idée.

Pour le second point : voici mon code, dis moi ce que tu en pense. En gros, chaque article et dans une balise <article></article> et la pagination et le flux sont à part. J'ai donc supprimé les div clear, ar appliqué un margin-bottom sous chaque article. Est à çà dont tu pensais?

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>

				<article role="article">

					<h1>
						<?php $plxShow->artTitle('link'); ?>
					</h1>

					<div class="article-info">
						<p>
							<?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
						</p>
					</div>

					<div class="article-content">
						<?php $plxShow->artChapo(); ?>
					</div>

					<div class="article-info">
						<p>
							<?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> - 
							<?php $plxShow->artNbCom(); ?>
						</p>
					</div>

					<div class="article-info">
						<p>
							<?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
						</p>
						<p>
							<?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags(); ?>
						</p>
					</div>

				</article>

				<?php endwhile; ?>

				<div id="pagination">
					<?php $plxShow->pagination(); ?>
				</div>

				<div class="rss">
					<?php $plxShow->artFeed('rss',$plxShow->catId()); ?>
				</div>

danielsan · décembre 2012

c'est à ça que je pensais, à savoir si ça correspond au HTML5 ...

Jos · décembre 2012

Je vais partir sur cette structure alors

Den · décembre 2012

Bonjour à tous,

Le World Wide Web Consortium (W3C) vient d’annoncer officiellement la finalisation des spécifications HTML5 et Canvas2D, qui sont désormais disponibles
en « Candidate Recommendation ».

http://www.developpez.com/actu/50360/Le-HTML5-passe-en-Candidate-Recommendation-avec-Canvas2D-le-W3C-verrouille-les-fonctions-et-lance-le-HTML-5-1/

Bye! Den

danielsan · décembre 2012

cool ! vais pouvoir m'y pencher !

Den · décembre 2012

Modération : hors sujet et post en double dans un autre topic

Jos · décembre 2012

Oui j'ai lu çà aussi. Dés que j'aurais de refaire l'architecture je le posterai ici.

Jos · décembre 2012

Voici la version bêta 14 avec la nouvelle structure pour les articles. J'ai apporté quelques autres petites modifications mineures. J'ai également ajouté l'archive, la catégorie, et le tag en cours de consultation lorsque l'on clique sur un lien dans la sidebar (merci à Danielsan

)

zakar! · décembre 2012

Salut Jos et merci pour cette structure,

Personnellement j'enlèverai les div qui sont en trop pour avoir une structure épurée:

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>Premier article - PluXml</title>
	<meta name="author" content="autheur" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="icon" href="themes/pluxml/img/favicon.png" />
	<link rel="stylesheet" href="themes/defaut/style.css" media="screen"/>
	<link rel="alternate" type="application/rss+xml" title="Fil Rss des articles" href="feed.php?rss " />
	<link rel="alternate" type="application/rss+xml" title="Fil Rss des commentaires" href="feed.php?rss/commentaires " />
	<!--[if lt IE 9]>
		<script src="themes/defaut/js/html5ie.js"></script>
		<script src="themes/defaut/js/respond.min.js"></script>
	<![endif]-->
</head>
	
<body id="top">

	<header role="banner">
			<a class="maintitle" href="./" title="PluXml">PluXml</a>
			<span>Blog ou Cms à l&#039;Xml !</span>
	</header>

	<nav role="navigation">
			<ul>
				<li id="static-home"><a href="./" class="noactive" title="Accueil">Accueil</a></li>
                                <li id="static-1"><a href="index.php?static1/statique-1" class="noactive" title="Statique 1">Statique 1</a></li>
			</ul>
	</nav>

       <section role="main" id="blog">

			<article role="article">
                                 <header>
				         <h1>Premier article</h1>
                                         <p>Ceci est un article créé lors de l'installation de PluXml. Editez-le depuis la zone d'administration.</p>
                                 </header>
	

				<footer role="meta">R&eacute;dig&eacute; par Autheur - 
					21 novembre 2012 - 
					1 commentaire<br />
					Class&eacute; dans : <a class="noactive" href="ndex.php?categorie1/rubrique-1" title="Rubrique 1">Rubrique 1</a> - Mots cl&eacute;s : <a class="noactive" href="index.php?tag/pluxml" title="PluXml">PluXml</a>
				</footer>
			</article>

	               <aside role="complementary">
		             <h3>Cat&eacute;gories</h3>
		                <ul>
			             <li id="cat-1" class="active"><a href="index.php?categorie1/rubrique-1" title="Rubrique 1">Rubrique 1</a> (1)</li>
		                </ul>
		
		                <span>
                                     <a href="#" title="Fil Rss des commentaires">Fil des commentaires</a> -
                                     <a href="#" title="Fil Rss des articles">Fil des articles</a>
                                </span>

	               </aside>
       </section>

	<footer role="copyright">
		               <p>&copy; 2012 ....</p>
	</footer>

</body>
</html>

A noter toutes celles qui englobe les balises html5.
Dans ta feuille de style utilise la propriété "content" et les pseudos classes :before & :after pour ajouter espace et clear:both. Cette dernière modifie légèrement le rendus à partir d'ie8 mais reste correcte histoire de supporté ie

Jos · décembre 2012

@Zakar! : As tu la dernière version (bêta 14)? J'en suis pas sure.

Changer thème par défaut pour la prochaine version de PluXML

Réponses