Evolution du thème par défaut

Den · mai 2013

Bonjour à tous,

Pour ma part, je suis revenu au XHTML 1.0 Strict!
J'ai eu les mêmes problèmes de validation du jour au lendemain en HTML5...
D'autres problèmes, les plugins, ne sont pas valides en HTML5 et même en XHTML 1.0 Strict! pour la plus parts...

Alors, il faut jongler avec tout ça... 8o

aruhuno · mai 2013

danielsan a écrit:

Bonsoir,

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

Cordialement,

Jos a écrit:

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

Je pense comme vous pour la simplicité, mais ce ne sont pas quelques dégradés qui compliquent le css. Enfin, comme l'idée n'est pas de refaire le design, je garde mes idées au chaud afin de pourquoi pas poster plus tard =]

Pour le W3C, je sais bien, pour le coup, ne serait-il pas utile de télécharger le thème lors de l'installation de PluXML ? (permettrait de le mettre à jour en continue et de façon transparente).

Bref, je dérive. En tout cas, bon courage, je repasse si j'ai des idées =]

Jos · mai 2013

La mise à jour en continu... Même si c'est hors sujet avec ce fil, pourquoi pas...

Mis à part çà, j'ai envoyé à Stéphane le thème avec la nouvelle sémantique décidé ici.

EDIT : après le retour de Stéphane, et mis à part quelques retouches mineures, le thèmes devrait être à peu près comme indiqué plus haut.

Jos · mai 2013

Stéphane à transféré le thème sur le Github de PluXml pour que vous puissiez faire des tests et dénicher d'éventuels bugs.

ti_pierre · mai 2013

Hello @Jos, je suis content de voir que la sémantique a subit un bon coup de balai et de jeune, c'est propre de ce que j'ai survolé, sincèrement, beau travail. Fidèle à mon habitude, j'ai toujours des remarques

:

- Citer les sources (je pense au reset utilisé dans la CSS)
- Envisager la balise main pour le contenu global (home.php - ligne 3 <main role="main">), quelques infos et détails ici : http://css.4design.tl/html5-main
- Ajout du rôle ARIA menuitem (header.php - ligne 43 <ul role="menuitem">)
- Ajout du rôle ARIA document (header.php - ligne 22 <body role="document" id="top">)

- Vérifier le CSS: ligne 317 la valeur "inherit" est utilisé sans besoin

Je ne vois pas de feuille CSS pour IE, est-ce volontaire ?

Du reste, du beau travail, je contribuerai avec ce que j'ai en cours de travaux concernant le responsive.

Jos · juin 2013

Salut ti_piere,

Le reset utilisé pour le thème est "fait maison". Je me suis simplement inspiré de plusieurs projets.

Pour les rôles ARIA, pourquoi pas, faudra que je vois çà.

J'ai mis trois valeurs inherit dans article footer car sinon, le navigateur pense reprendre le style de footer au niveau du background, de color, et de text-align. Il doit y avoir une meilleure solution, mais pour le moment çà fonctionne.

Je n'ai pas mis de feuille pour ie car aprioris il n'y en a pas besoin.

Merci de ta contribution.

cpalo · juin 2013

Bonjour

Je viens de regarder le thème sur guithub.
Je vois qu'on a mis aussi un role= banner à tous les header d'articles.
Ne serait-il pas plus judicieux de laisser ce role=banner uniquement au header du header du site?

k610i · juin 2013

Plop,

Pour le reset, je rajouterai ceci :

[== CSS ==]
textarea, table, td, th, code, pre, samp, div, p {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

Pour que ça coupe le mot si ça dépasse de l'espace prévu.

cpalo · juin 2013

Bonjour

petite question qui m'intrigue.... donc meme si ça fonctionne j'aimerai comprendre.
J'ai essayé de comprendre les chemins d'accès relatifs.
Ma structure:
site/
css
img
js
index.html

j'appelle ma feuille de style dans le header par:
img/favicon.png
css/styles.css
js/html5.js

et dans la feuille de style: background: #8B22F1 url(../img/bg-body.jpg)

Dans mon site, cela fonctionne.

Mais avec le theme de pluxml cela ne fonctionne pas.
Il faut que j'indique:
/img/favicon.png
/css/styles.css
/js/html5.js

mais le background: #8B22F1 url(../img/bg-body.jpg) lui fonctionne

Merci

cpalo · juin 2013

1):
Dans home.ph
il y a après <article> dans lequel on retrouve <header> <section> <footer>

Mais le role d'une section est de contenir en particulier des articles, alors je ne vois pas si c'est judicieux d'introduire une section dans un article.
De même, on a:
<section>

<div class="content">

<div class="width-sidebar">

Ne serait pas preferrable de mettre: <section class="width-sidebar">

2):
Je voulais supprimer les <div class="content">, puisque je voudrais avoir un thème "fixed".
Est-ce que cela influe sur le responsive design, car lorsque j'ai essayé le theme responsive fonctionnait mais plus maintenant.

Stéphane · juin 2013

Bonjour cpalo

Il faut que tu utilises

<?php $plxShow->template(); ?>/img/favicon.png
<?php $plxShow->template(); ?>/css/styles.css
<?php $plxShow->template(); ?>/js/html5.js

pour le background c'est normal que cela fonctionnne car les liens dans une feuille de style (exemple url(../img/bg-body.jpg)) sont relatifs par rapport au fichier .css

cpalo · juin 2013

C'est bien ce que j'ai
et effectivement cela doit être sans doute l'explication..
Lorsque je code un simple fichier html...je dois respecter la syntaxe des chemins relatifs..
Par contre j'avais "zappé" que dans pluxml on faisait d'abord appel à une fonction dans laquelle on renseignait un argument.

Jos · juin 2013

Avec le recul, je me demande si c'est réellement utile les roles pour les balises header, nav, ... Ça devient de plus en plus obscure cette histoire, d'autant plus que çà ne semble pas si utile que çà pour les synthèses vocales.

Et si on les supprimait toutes histoire que se soit plus simple?

Jerry Wham · juin 2013

Non, je ne pense pas. Je t'invite à lire, si tu ne l'as pas déjà fait, cet article sur alsacreations.

cpalo · juin 2013

Bonsoir,

Je pense qu'il faut les garder mais les utiliser à bon escient. (cf l'article d'Alsacreations mentionné ci-dessus ou encore les recommandations d'AccedeWeb).

Petite rectif ( par rapport à un de mes posts dans ce sujet) : les sections peuvent être utilisées pour contenir des articles, mais un article peut aussi éventuellement contenir des sections.

Personnellement je vais également utiliser la nouvelle balise "main".

Cordialement

Jos · juin 2013

Oui je l'avais déjà lu. N'ayant que des bases dans ce domaines, si quelqu'un se sent de creuser plus loin la question, qu'il n'hésite pas à améliorer tout çà sur le thème par défaut.

cpalo · juillet 2013

Bonjour,

J'ai installé le nouveau thème par défaut que j'ai récupéré sur ghuitub ( version du 27 juin).
Je commence à l'adapter, avec en particulier l'attribution de class ou d'id aux header ..

Mais petit souci:
dans le thème j'avais:

[== PHP ==]
<h1>
<?php $plxShow->mainTitle('link'); ?>
</h1>
<h2>
<?php $plxShow->subTitle(); ?>
</h2>

Que j'ai remplacé par:

[== PHP ==]
<h1 class="site-title">
	<?php $plxShow->mainTitle('link'); ?>
</h1>
<p id="site-description">
	<?php $plxShow->subTitle(); ?>
</p>

Mais le résultat n'est pas tout à fait celui attendu parce que le résultat est:

[== HTML ==]
<h1 class="site-title">
<a class="maintitle" href="http://www.cahue.net/" title="Cahue.Net">Cahue.Net</a></h1>
<p id="site-description">
Un site consacré à mes activités informatiques et web	</p>

En fait le code <?php $plxShow->mainTitle('link'); ?> crée un lien mais attribué d'une classe "mainTittle qu'on ne retrouve pas dans la feuille de style.

Cordialement

cpalo · juillet 2013

Il a donc suffit que je crée cette classe

[== Indéfini ==]
.mainTitle a {
	color: #444;
}

au lieu de mon .site-title a

Pour que le changement de couleur au survol de la souris fonctionne.

danielsan · juillet 2013

[== PHP ==]
<?php $plxShow->mainTitle(); ?>

donne quoi ?

cpalo · juillet 2013

[== Indéfini ==]
<h1 class="site-title">
	<a class="maintitle" href="http://www.cahue.net/" title="Cahue.Net">Cahue.Net</a></h1>
	<p id="site-description">
	Un site consacré à mes activités informatiques et web</p>

Le titre est devenu cliquable avec changement de couleur

cpalo · juillet 2013

Bonjour,
voilà j'ai fini mon adaptation du théme par défaut :ici.
les questions que je me suis posé:

les rôles aria :
Pour certains d'entre eux, il ne peut y en avoir qu'un seul dans une page:
role="banner" par exemple ne peut être que dans le header principal du site

les balises html5:
j'ai fait le choix de ne pas les utiliser dans les css , mais de créer systématiquement des class ou des identifiants.
<h1 class="main-title"> <h1 class="post-title">
<article class="static"> <header class="post-header">
Ainsi cela peut permettre une mise en forme différente.

Identification des id:
Code initial:

[== Indéfini ==]
<section>
<div class="content">
<div class="width-sidebar">

Ma proposition de code:

[== Indéfini ==]
<div id="main-wrapper">

		<div class="content">

			<div id="main-content" class="width-sidebar" role="main"><!-- sera remplacé par la balise main -->

L'un de mes questionnements reste l'utilité de maintenir encore une hiérarchie de titres de six nouveaux (H1 à H6) alors que maintenant avec plusieurs H1 dans une page, j'aurai encore plus de mal à dépasser le H3.

Cordialement
Patrice

Jos · juillet 2013

Salut cpalo, désolé de n'avoir pas pu répondre avant. Je ne pense pas trop modifier le thème mais je vais proposer à Stéphane une nouvelle version du thème supprimant simplement les rôles ARIA en trop dans <article> (une erreur de ma part).

Evolution du thème par défaut

Réponses