NightAngel.fr : Un thème en fonction de l’heure
Les personnes qui suivent mes articles par l’intermédiaire du flux RSS ne l’on probablement pas vu, mais le blog a récemment reçu plusieurs modifications. Le blog revêt désormais deux thèmes en fonction de l’heure. L’aspect “technique” de la chose sera détaillé dans la suite de l’article (la vérification se faisant à partir de l’heure de votre ordinateur). Pour l’instant il y a donc une version “de jour” (lumineuse/blanche) de 7H à 20H, et une version “nocturne” (sombre/noire) de 20H01 à 6H59. Bien que mon approche technique soit différente, et que je n’ai pas ses talents artistiques, je reconnais m’être grandement inspiré du site kulturbanause.de de Jonas Hellwig. Mais bon, ce n’est pas la seule modification : je n’allais pas écrire un billet juste pour ça ! :lol:
Le champ de recherche (en haut à gauche) a reçu sa dose d’Ajax, puisque cette dernière s’effectue désormais au fil de la frappe. L’intégration du bouton flux RSS (en haut à droite) a également été revue et les 3 onglets (sur la droite) ont, eux aussi, reçu leur petite dose d’Ajax. Un pied de page (footer pour les intimes) a fait son apparition, le système de pagination a lui aussi été “ajaxisé” et l’affichage des huit vignettes (sur la page d’accueil) a bien sûr été peaufiné. Toutes les pages listées en haut du blog ont reçu des modifications (plus particulièrement BLOGROLL et CONTACT). Voilà, j’ai certainement du en oublier, mais le principal est quand même là :W
Charger un thème en fonction de l’heure (ou de la date)…
Ici il n’y a rien de très compliqué, juste un peu de javascript et des CSS. Le javascript ne va faire que contrôler l’heure (ou la date) de l’ordinateur du visiteur et ainsi appeler telle ou telle CSS. Personnellement je conserve une CSS “globale” pour tous les éléments qui ne changeront pas en fonction de l’heure (ou de la date). Ensuite j’appelle mon petit fichier javascript…
Fichier qui va vérifier l’heure (dans le cas présent) et charger en conséquence le feuille de style CSS appropriée. Voici donc template-switcher.js…
HeureLocale = new Date();
if (HeureLocale.getHours() < 7 || HeureLocale.getHours() > 20)
{
document.write ("
")
}
else { document.write ("
")
}
Inutile d’en dire davantage, si l’heure est inférieure à 7 ou supérieure à 20H alors c’est la CSS night.css qui sera chargée, sinon ce sera la CSS day.css. Ici c’est la méthode (javascript) getHours() qui est utilisée mais rien ne vous empêche d’utiliser getDate() pour détecter la date à la place de l’heure. Avec un peu d’entrainement vous pourrez même combiner getDate() et getHours(). Pour des cas plus spécifiques, consultez toutes les méthodes de l’objet Date.
je trouvais ton blog déjà trèèès bien mais ce détail en plus, çà le rend encore mieux (je pensais pas que c’était faisable
)
Par contre je serais bien intéressé de savoir comment tu fais pour avoir une barre de recherche qui recherche au fil de la frappe ? :oops:
MErci :razz:
@FOx15 : Je crois qu’il n’y a pas grand chose de totalement infaisable en informatique… Merci beaucoup pour le compliment en tous cas ! :oops: Je pourrais te proposer d’intégrer nativement la fonction à WordPress en injectant du code dans tous les sens. Genre :
< ?php $max_result_number = 10; if ($_GET['s'] != '') { $_SERVER['REQUEST_URI'] = str_replace("wp-content/themes/.../search_results.php","", $_SERVER['REQUEST_URI']); $posts_per_page = $max_result_number + 1; global $table_prefix; require('../../../wp-blog-header.php'); if (count($posts) > 0) { echo ''; foreach (array_slice($posts, 0, $max_result_number) as $post) { the_post(); ?>- < ?php the_title(); ?>
< ?php
}
if (count($posts) > $max_result_number) {
echo'
- >> ' .
__('Voir tous les résultats...') . "
";
}
echo '
'; } else { echo ' ' . __("Aucun résultat.") . ' '; } } ?>Mais je préfère te proposer d’installer directement le plugin Live Search Popup qui est beaucoup plus accessible et simple d’installation. Si tu as d’autres questions :razz:
Pas mal ton explication mais pas top en terme d’accessibilité et de performances.
Pour éviter que l’utilisateur soit obligé d’avoir javascript faute de quoi il perd tout design, il faut un design par défaut. Ensuite, ta technique force à dupliquer des styles entre les 2 fichiers (taille de texte, layout, …)
Pour commencer, on a une seule feuille CSS qui définit les 2 styles mais les styles commenceront par :
body.night …
ou
body.day …
Du coup le code html donnerai
et le JS :
HeureLocale = new Date(); if (HeureLocale.getHours() > 20) document.getElementsByName("body")[0].className = "night"; }Au final, on a un seul fichier CSS (bonne perfs, pas de duoblons) et le JS pas obligatoire (accessibilité) et tout ça sans prendre plus de temps
J’avoue que c’est une idée excellente que j’essaierai d’intégrer à mon WP ! Je rejoinds l’avis de Fox15 : le site est excellent, soigné de partout, en étant clair et agréable à voir :nickel:
@NightAngel : je veux bien injecter le code si tu me dis où ? quand ? comment ? :razz:
sinon je me contenterai du plugin
Oh pinaise … ca roXXe du poney tout ça ! :eek2: :eek2: :eek2: :eek2:
Non sérieusement, j’adore la petite touche sur les vignettes, ainsi que la pagination en bas, la présentation du tout.
Bref très beau travail digne du NightAngel ^^
@Séverin : No soucy pour la “pollution” :?: Sinon je ne duplique pas les CSS, puisque comme je l’ai indiqué : “Personnellement je conserve une CSS “globale” pour tous les éléments qui ne changeront pas en fonction de l’heure (ou de la date)”. C’est après la CSS “globale” que je charge telle CSS spécifique en fonction de l’heure. J’ai donc une CSS “globale” relativement lourde et des CSS spécifiques assez légères étant donné que je ne change que 2 images, le background et quelques petits autres trucs :nickel:
Ceci dit je trouve ta méthode excellente bien que je ne suis jamais tombé sur des tests concrets (en terme de performances) qui démontrent qu’une grosse CSS soit préférable à plusieurs petites CSS.
Je suis en train de faire un test avec plusieurs CSS que j’appelle au moment “opportun”. Je charge par exemple la CSS commentaires.css qu’au début du fichier comments.php, etc… C’est un peu crade dans le sens où une CSS doit être appelée dans les balises %head% mais je pense optimiser un peu le temps de chargement de mes pages puisqu’il est inutile d’appeler cette CSS sur toutes les pages par exemple :razz:
@WoodyLo : Merci, merci, mais arrêtez un peu, j’vais vraiment rougir :oops: :oops: :oops:
@FOx15 : Pour l’heure je ne peux que te conseiller d’installer le plugin car ça me demande un certain temps de faire un p’tit tuto, même à-la-rache. Si tu ne t’en sors pas avec le plugin, tu me fais signe
@Jerome : Merci mon coupaing ! :roll:
Les perfs, tu les gagnes sur de la quantité, surtout avec les bon entêtes Expire.
Avec ta technique :
Un visiteur arrive le matin,il fait 2 requêtes, une pour le global et une pour le day. Il repasse le soir, il fait une 3eme requête pour le night.
Avec ma technique :
Un visiteur arrive le matin, il fait une seule requête pour la feuille unique. Il repasse le soir, il fait pas de requête puisque la feuille est unique.
Donc, 3 requête vs 1. Et même si le fichier est plus gros, les ressources de traitement de la file d’attente et les tests de sécurité sont évités. En gros, bande passante un brin plus utilisée mais serveur pas mal allégé.
En gros, c’est les mêmes gains/perte qu’avec du sliding door ou du css sprites
@NightAngel : j’ai testé le plugin mais çà fout le boxon sur mon blog donc viré :o
je patienterai pour un tuto même à l’arrache :razz:
@Séverin : Ah OK, au départ je pensais que tu voulais limiter le volume de données déplacé, mais en fait, avec ta méthode, le volume de données ne change pas, c’est le nombre de requêtes qui est diminué. Et quand tu dis “une seule requête” cela suppose, sauf erreur de ma part, que tu charges la CSS “globale” en cache, ce qui n’est pas mon cas LOOOL. Je reconnais sans conteste l’efficacité de ta méthode, qui permet finalement d’économiser quelques requêtes, mais je ne pense pas que ce gain soit probant pour mon utilisation et pour celle de la majorité des blogueurs qui ne reçoivent pas des milliers de visiteurs tous les jours sur des hébergements foireux (si, si!). Après sur un projet plus ambitieux, à plus grande échelle, ta méthode est clairement meilleure. Pour ma part je préfère séparer mes CSS pour des questions évidentes de “lisibilité personnelle” parce que je revois en permanence le code de mon blog. Merci pour ton commentaire en tous cas et j’apprécie vraiment ta méthode : PAS CON DU TOUT!
@FOx15 : Un jour il faudra vraiment que l’on parle de “tout ça” par MSN ou autre parce que je me demande vraiment qu’est ce que tu fais :lol:
avec mon blog je fais de la merde, en fait j’ai un thème trop chiant qui respecte rien
@Night : Sisi, le visiteur aussi y gagne. PAs énormément, mais quand même, si il fait du P2P en même temps par exemple, la différence, il la verra.
Et surtout, ton SEO a tout à y gagner. Plus une page est rapide à charger mieux elle sera référencée. Et oui, le JS et le CSS compte pour Google (test effectué).
@Fox15 : Tu peux me balancer ton adresse MSN sur mon mail : webmaster@nightangel.fr
@Séverin : Je ne pensais pas que les JS et les CSS comptaient pour Google : merci pour l’info, c’est bon à savoir ! Il est possible que j’utilise ta méthode, cependant je ne sais pas encore si je vais conserver ce système puisque c’est assez lourd d’entretenir plusieurs thèmes, pour un intérêt finalement assez limité. Au début je voulais faire un thème par saison ou ce genre de connerie mais ça demande vraiment trop de temps :mad:
Sinon, le truc sympa que tu peux faire c’est de faire ton design en double couche et tu fais varier l’opacity de night par dessus day en fonction de l’heure et comme ça, le design change en temps réel.
En jQuery parce que c’est plus vite écrit :P
var opacity = 0; if (HeureLocale.getHours() > 18 && HeureLocale.getHours() < 23) { opacity = 0.2 * (HeureLocale.getHours() - 18); } $('.night').opacity(opacity);Comme ça, de 18 à 23h, tu as 5 niveau de couleur différents. Mais c'est vrai que c'est valable que pour les images.
Hou la vache, je viens de voir tout ce que tu as en fichiers JS. C’est violent quand même.
Et au passage, GZip est plus efficace sur un seul gros fichier que plein de petits.
@Séverin : Les CSS et les JS, c’est ma grande passion en ce moment :lol: Il faudra que je fasse un peu le tri à l’occasion mais là je n’ai vraiment pas le temps. Il paraît qu’il y a une réunion WIA ce soir et comme j’ai quelques kilomètres pour y venir :razz: Etienne sera de la partie
jour
.
.
.
.
.
.
.
nuit
.
.
.
.
.
.
.
.
jour
.
.
.
.
.
.
.
.
whaou, ça marche :-)
Trève de plaisanterie, je rejoins Séverin et te propose même de tester Yslow, plugin pour firefox qui te permettra d’optimiser ton site aux petits oignons ;-) Je recommande la doc du plugin qui est une véritable mine de conseils. http://developer.yahoo.com/ysl[...]index.html