Après des mois de travail, je suis fier de vous présenter la nouvelle mouture de mon blog !

Avant-propos

Pour commencer, je n’ai pas fait exprès du tout mais je viens de me rendre compte que cet article est le 100ème que je publie ! Quoi de mieux alors que de présenter une nouvelle version du site pour fêter cela !

Dans cet article je vais vous présenter toutes les modifications apportées, les ajouts effectués dans ce nouveau thème WordPress que j’aime appeler « Ashes MMXIV ».

Des news tous azimut

Cela faisait un petit moment que je voulais présenter des news de manière rapide et efficace. Ecrire un article uniquement pour dire que la PlayStation 4 sortira à telle date me semble un peu exagéré. C’est pourquoi le système de « Breaking news » inséré dans l’entête a été mis en place. Il me permettra de partager des nouvelles rapidement sans trop me prendre la tête.

Ce système sera également utilisé lorsque je participerai à des événements relatifs aux jeux-vidéo ! Dans l’état actuel, seul les 10 dernières news dites « rapides » seront affichées.

L’effet Ken Burns

L’effet Ken Burns (ou Kenburns Effect) du nom de son inventeur, est le nom donné à un type de zoom utilisé dans une vidéo. Si vous souhaitez en savoir plus vous pouvez consulter la page dédiée sur Wikipédia : http://fr.wikipedia.org/wiki/Effet_Ken_Burns

J’étais tombé sur plusieurs sliders qui intégraient cet effet et je le trouvais plutôt réussi. Aussi je me suis mis à chercher un outil gratuit me permettant de le réaliser. Après quelques essais et recherches infructueux (plugins payants, watermarks insérés dans les images pouvant gêner la visibilité, etc.) j’ai trouvé celui-ci : http://www.toymakerlabs.com/kenburns/

Implémenté par Toy Maker Labs ce plugin correspondait à mes attentes… ou presque car j’ai du le modifier (c’est autorisé dans la licence) pour qu’il colle plus parfaitement à mes besoins.

Ils sont beaux mes icônes !

Si vous ne connaissiez pas Font Awesome c’est chose faite avec mon article. Cette librairie d’icônes a été spécialement conçu pour Bootstrap, le framework responsive de Twitter.

Ces icônes n’en sont pas au sens propre du terme mais sont intégrés dans une police de caractères. Vous pouvez donc modifier facilement leur taille, leur couleur et appliquer quelques effets sympas au survol.

Les plugins c’est bien, les faire soi même, c’est mieux

La base de plugin de WordPress est impressionnante. Vous trouverez tout ce dont vous avez besoin mais bien souvent ces plugins possèdent quelque chose en trop ou en moins qui font qu’ils ne correspondent pas à vos besoins.

Je me suis donc mis dans l’idée de créer moi même mes plugins ou plutôt de ne pas créer des plugins mais plutôt des snippets et des hacks WordPress me permettant d’intégrer ce dont j’avais envie. Je ne vais pas vous expliquer en détail ce que j’ai fait (je ne voudrais pas que vous ayez déjà mal à la tête) mais plutôt lister ce que j’ai fait :

  • Utilisation de l’API de Twitter pour afficher mes derniers Tweets.
  • Utilisation de l’API d’Instagram pour afficher mes derniers Instagram.
  • Hack WordPress me permettant d’afficher certaines dates à la manière de Twitter : « Il y a X temps ».
  • Implémentation d’un compteur de vues pour chaque article. Ce compteur est utilisé pour afficher les articles les plus populaires sur la droite.

Et le design dans tout ça ?

Comme vous avez pu le voir le design a changé, mais les principales couleurs du précédent site sont restées. J’en ai quand même ajouté de nouvelles et modifier légèrement le « rouge » principal.

La résolution du site est de base nettement plus grande et va parfaitement avec le pourcentage d’utilisateurs ayant cette résolution. Pour plus d’informations sur les différentes résolutions je vous conseille ce lien : http://www.w3schools.com/browsers/browsers_resolution_higher.asp

Et avec tout ça je vous ai ajouté une petite touche de Responsive Design qui permet au site de s’adapter sur tous les supports (mobiles, tablettes et PC). Comme ça vous n’aurez plus d’excuses pour ne pas visiter mon site.

Le suivi et l’utilisation des articles

Vous pourrez voir certaines fois sur les articles deux icônes :

  • Le premier sert à vous notifier que l’article a été mis à jour depuis sa dernière publication.
  • Le second précise que l’article est en cours de rédaction. Cette deuxième option sera souvent utilisée lors de la rédaction de guides de trophées.

De plus dans tous les guides de trophées un sommaire sera présent sur la droite pour vous aider à naviguer plus rapidement vers le trophée de votre choix. Cette fonctionnalité n’est cependant pas présente pour tablettes et mobiles (question de place et de présentation des données).

Ce qu’il reste à faire

Je suis en train de reprendre tous mes articles un par un (notamment les guides pour intégrer les icônes de trophées) afin de vérifier que ceux-ci s’adaptent bien au nouveau site. Je n’ai pas pu faire ce travail en amont aussi je vous notifierai rapidement quand cette tâche sera terminée.

Conclusion

Merci d’avoir pris le temps de me lire. J’espère que vous apprécierez cette nouvelle version autant que moi. Si vous avez la moindre remarque vous pouvez utiliser le formulaire ci-dessous ou la page de contact.

Bonne navigation !

Cet article vous a plu ? Soyez sympa et partagez-le :)
Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
5Share on Tumblr
Tumblr
0Email this to someone
email
Print this page
Print

9 commentaires approuvés sur cet article

  1. Vavache -

    Je vais la jouer avis sur We Are PlayStation : « rien à dire, c’est super ! » et je le pense, cette version est vraiment géniale : belle, sobre, bien présentée, avec des fonctionnalités sympa (affichage des tweets, des trophées, des guides etc).

    Les breaking news sont une très belle idée et éviteront comme tu le soulignes des articles dont l’intérêt est discutable.

    Vraiment un grand bravo car ça doit représenter un travail colossale, on est tellement habitué à voir des blogs qui partent d’un thème « de base », mais personnaliser son site de la sorte, c’est un sacré boulot. Je te rassure, ça se voit dans le résultat !
    J’espère que cela marquera un cap au niveau des fréquentations également, ne serait-ce que pour tes guides qui sont, comme cette version du site, conçu méthodiquement et dans le but de répondre aux besoins des lecteurs/joueurs.

    Et je suis vraiment, mais vraiment dégouté d’être englué avec Spip de mon côté car je ne pourrai pas développer tout ces éléments sympas.

    1. Rémi - Ash admin -

      Merci pour tes encouragements, c’est motivant. Effectivement ça représente une tonne de boulot. J’ai commencé en fait depuis l’article de départ en vacances en Bretagne. A l’origine cette version devait débouler fin Septembre, puis fin Décembre pour enfin débarquer hier.

      Je suis assez satisfait du résultat même si je vais encore devoir modifier deux trois choses et reprendre tous mes articles.

      Si jamais tu décides un jour de franchir le pas pour Wordpress, tu auras sans problème mon aide.

      1. Vavache -

        C’est surtout l’idée de devoir reuploader et mettre dans les articles plus de 2500 images qui me pose problème.
        Même le passage en version 3 de Spip ne fonctionne pas, je suis « coincé » avec ce CMS qui n’évolue pas aussi bien que Wordpress, je regrette d’avoir écouté mon prof pour mon choix…

  2. thibasm -

    Je n’ai qu’une chose à dire, WOAW ! J’adore ton nouveau site. Vraiment plus fluide, plus moderne.
    Félicitation pour ton travail, c’est très réussi.

  3. SayaK -

    Une bien belle (R)évolution que cette nouvelle version de Ashesheart.fr ;)

    Je rejoins Vavache pour son appréciation : ton blog (qui était déjà bien) est devenu plus beau, plus lisible, plus dynamique ET plus fonctionnel.

    L’accessibilité du site entier s’en retrouve encore plus aisée et rapide, à tout moment de la lecture, grâce au menu suiveur (et d’autres raccourcis bien sentis) 8)

    Si je devais justement faire une seule remarque : l’affichage permanent des (anciennes) rubriques principales (« Guide », « Test », »Collector » etc…) était un plus. Mais peut-être que ce regroupement est dû à l’adaptation aux différents supports? ;)
    A ce propos, sur Firefox, je n’ai aucun soucis d’affichage.

    En tout cas, tu nous gâtes encore à nous informer en temps réel… je sais définitivement où me tourner pour les prochaines nouvelles de KH ^^

    Du TRES beau boulot, Ash :)

    1. Rémi - Ash admin -

      Merci c’est vraiment motivant ce genre de commentaires. Pour l’affichage des rubriques, rien à voir avec l’adaptation sur différents supports, j’aurais pu faire différents affichages selon ceux-ci.

      J’avoue que j’aimais bien aussi avant, je suis en train de réfléchir pour voir ce que je peux faire. Merci pour ton commentaire ça m’aide vraiment à voir les attentes des visiteurs. Et merci pour ton retour pour Firefox, c’est plus pour les anciennes versions d’Internet Explorer qui peuvent poser souci.

      A bientôt (pour un prochain boost peut être ?)

      1. SayaK -

        Pour sûr ^^ Il faudrait voir quel coop tu voudrais attaquer ;)
        On en discutera sur le PSN ce week-end ou durant la prochaine semaine, si tu es dispo ces 2 prochains mois (à cause d’ un certain jeu? ^^) ou après.

        @+, le booster ;)

Laisser un commentaire sur cet article

Vous voyez ce message parce que vous n'êtes pas connecté(e). Si vous postez un commentaire, celui-ci sera en attente de modération et ne sera pas visible immédiatement.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.