Opinions Libres - Le Blog d'Olivier Ezratty

Visite guidée

Post de Olivier Ezratty du 29 mars 2010 - Tags : | 2 Comments

Un blog est un véritable logiciel ! Quand on en prend soin, on l’enrichit régulièrement de nouvelles fonctionnalités. C’est mon cas et avec beaucoup de fait-maison. Appréciant la maîtrise de l’ensemble des composantes de mon blog, je fais en sorte d’y intégrer un maximum de nouveautés. Cela comprend l’ajout de plug-ins mais aussi du développement ou de la modification de certains d’entre eux. Ayant un passé de développeur, je ne peux m’empêcher de m’impliquer dans cette partie de la création du blog. L’architecture du blog est d’ailleurs largement documentée dans une autre page.

Le design du blog “Opinions Libres” a régulièrement évolué depuis sa création au printemps 2006. L’actuel date dans son look de mars 2010 après l’abandon des couleurs chaudes qui ont tenu quatre ans. Il utilise un style bleu/gris plus classique et d’actualité. Ce design assez dépouillé a plusieurs sources d’inspiration : les codes couleur du site d’Apple, la simplicité de l’interface utilisateur de Windows Phone 7, et l’interactivité du moteur de recherche de Google.

Depuis juillet 2014, ce blog utilise le plugin Photo-Folders que j’ai développé moi-même pour héberger toutes mes photos. Il est intégré avec son interface graphique pour naviguer dans les photos ainsi qu’avec des widgets d’intégration des photos dans les articles et de la liste des derniers albums dans la sidebar du blog. Le tout fonctionne avec le support du tactile sur smartphones et tablettes iOS et Android.

pf-navig-01-FR

Mais derrière ce design assez dépouillé et stable se cachent de nombreuses fonctionnalités qui évoluent régulièrement et que voici donc :

  • Blog de largeur variable

Le contenu s’adapte à la largeur de votre navigateur et il s’affiche correctement sur les écrans de toute résolution et en particulier sur les netbooks dotés d’écrans de 1024×600 pixels. Depuis avril 2010, le blog est passé de trois à deux colonnes, rendant la lecture plus agréable. La page d’accueil présente les posts les plus récents avec leur première illustration et quelques lignes de texte (sans hyperliens).

blog-largeur-variable

  • Page d’accueil en “infinite scroll”

J’ai introduit cette nouveauté qui s’inspire du fonctionnement de Google Image et de Pinterest : afficher indéfiniment la liste des posts présentés dans la page d’accueil du blog au fur et à mesure de la navigation (scroll) dans votre browser. Cela permet de remonter dans le temps dans les archives sans passer par le module d’archives, qui vaut aussi le détour comme vous le constaterez plus loin.

  • Export PDF et impression des articles

Les articles peuvent être exportés au format PDF et bien mis en page, y compris avec les illustrations. J’ai du supprimer ces dernières quelque temps en 2011 car la mémoire de mon hébergeur 1&1 ne permettait pas leur exécution. En février 2012, un changement de formule d’hébergement m’a permis d’augmenter cette mémoire (sans changement de tarif…) et j’ai pu réintégrer les images dans les PDF générés.

Les articles peuvent aussi être affichés dans un format “printer friendly” avec l’icone adaptée, à droite de l’icone PDF. Un bouton dans l’écran généré permet de déclencher immédiatement l’impression. Vous pouvez alors bénéficier des fonctions de prévisualisation d’impression de votre navigateur.

  • De nombreux contenus téléchargeables

Ce blog vous propose de nombreux contenus téléchargeables et en Creative Commons. Les Rapports de Visite du Consumer Electronics Show publiés en janvier chaque année depuis 2006, le Guide des Startups High-Tech en France régulièrement mis à jour aussi depuis 2006 et bien d’autres encore. Je publie également un certain nombre de supports de présentation ou de cours. Les contenus comprennent aussi une petite  revue de presse.

  • Recherche dynamique

La recherche de texte dans les articles à partir de la barre de menus donne un résultat qui s’affiche dynamiquement dans une colonne bleue dans la colonne de droite du blog. Les 12 premiers résultats sont affichés. Un lien est fourni pour lister la totalité des résultats, notamment au cas où il y en aurait plus que 12, et à concurrence de 60. Pour les anciennes versions d’Internet Explorer (avant la 5.5), le bouton rechercher avec la loupe fonctionne comme d’habitude et lance une page avec le début des articles correspondant au résultat de la recherche.

blog-recherche

  • Archives multicritères

Les archives de ce blog sont facilement consultables avec la fonction “Articles” du menu “Archives”, avec un classement par année et par mois des articles et une indication pour chacun d’entre eux du nombre de commentaires et de pages vues. C’est une des originalités “open data” de ce blog. Différents modes de consultation sont proposés avec un tri par popularité (par nombre de pages vues), par nombre de commentaires ainsi que par longueur des posts et par taille d’article (indiqué en nombre de signes et de mots). Vous pouvez même identifier les articles sans commentaires !

blog-archives

Enfin, les archives peuvent être formatées avec la liste des articles, la liste avec les premières lignes, les articles au complet pour lire l’intégrale d’une année de ce blog et enfin, juste les images des articles sélectionnés si la photo vous intéresse.

  • Commentaires imbriqués

Les commentaires des articles sont présentés de manière imbriquée, permettant de bien suivre les conversations. Pensez à utiliser la fonction “Répondre” en dessous de chaque commentaire. Les commentaires de l’auteur sont mis en évidence par une couleur de fond différente du reste des commentaires.

Blog Olivier Ezratty Commentaires Imbriqués

Et petit plus au passage, lorsque vous répondez à un commentaire, la réponse s’effectue juste dessous ce commentaire. Comme cela, vous n’êtes plus perdus et vous savez à qui vous répondez et dans quel contexte.

J’ai aussi ajouté un mécanisme d’importation dans les commentaires des Tweets reliés aux articles. Il fonctionne avec modération côté administrateur et je ne retiens que les Tweets “à valeur” ajoutée qui commentent les articles, pas les retweets (RT) simples. Un commentaire provenant de Tweeter est présenté dans un cadre bleu et l’indication Tweeter permet d’ouvrir la page Tweeter de la personne concernée. Les Tweets de l’auteur de l’article sont en gris comme pour les commentaires.

Enfin, vous pouvez vous abonner aux commentaires d’un article en cliquant un simple bouton après avoir soumis votre propre commentaire.

  • Prévisualisation des commentaires

Vos commentaires mis en page sont visualisés dynamiquement en dessous de la zone de captcha et au fur et à mesure de leur saisie, ce qui est particulièrement pratique si vous y intégrez des balises HTML (références avec <a> ou mise en forme avec <strong>).

Blog Olivier Ezratty - Previsualisation commentaires

  • Navigation dans les commentaires

Dans les derniers commentaires affichés dans la colonne droite du blog comme dans les commentaires à la suite des articles, il est possible de naviguer sans perdre le contexte des conversations.

Ainsi, pour les derniers commentaires, l’icone à gauche permet de répondre directement au commentaire, le lien sur le pseudo permet d’afficher tous les commentaires saisis sous ce pseudo depuis la création du blog et le lien sur l’article permet d’afficher le commentaire dans son contexte.

Enfin, en février 2012, après l’intégration des commentaires provenant de Twitter, j’ai indiqué la provenance de ces commentaires avec “dans Twitter” sachant que le mot Twitter contient un lien sur la page web du compte Twitter de la personne ayant fait ce commentaire.

  • Contributeurs de commentaires

Cette page accessible à partir du menu “Archives” et la fonction “Commentaires” liste les contributeurs par ordre décroissant du nombre de commentaires dans ce blog. En cliquant sur leur nom, le texte intégral de leur commentaire s’affiche en dessous de la liste. Comme partout ailleurs dans le site, vous pouvez répondre à ce commentaire en cliquant

Blog Olivier Ezratty Contributeurs Actifs

De plus, vous pouvez cliquer sur chaque nom de contributeur autant dans les articles que dans la liste des derniers commentaires à droite du blog pour accéder aux autres commentaires de ce contributeur. Si le contributeur a généré plus de 4 commentaires, son nom est alors mis en évidence dans la liste des contributeurs qui s’affiche au dessus des commentaires.

Les commentaires étant ouverts sans inscription ou identification unique, plusieurs contributeurs différents peuvent se cacher derrière le même pseudo ou prénom. Dans ce cas, il est précisé le nombre d’emails différents correspondants à ce pseudo, sans les révéler pour autant pour préserver la confidentialité. Oui, il faudrait que je les trie par email sans afficher l’email. Plus tard… !

  • Abonnement email

Vous pouvez vous abonner à l’envoi d’emails vous avertissant de la publication d’un nouvel article. Vous recevrez alors un email vous avertissant de leur publication avec un lien sur l’article. L’email ne contient pas les articles en entier.

Blog Olivier Ezratty - Abonnement email

  • Réseaux sociaux

Ils sont tous sous la main dans le menu du site : ma page Facebook, mon profil LinkedIn, mon compte Twitter, mes albums photos sur Photo-Folders, le plugin photo WordPress que j’ai développé moi-même, quelques vidéos sur YouTube et pour terminer le flux RSS du site à intégrer dans votre agrégateur d’information préféré. Vous en trouverez un inventaire que j’ai pu réaliser il y a quelques temps sur ce post. Vous avez notamment le choix entre agrégateurs fonctionnant en mode web comme Google Reader, ou bien des solutions fonctionnant en mode “client riche” comme Feedreader, que j’utilise depuis 2007.

blog-social-networks

Les articles comprennent un bouton Tweet et Like de Facebook depuis décembre 2010, un bouton LinkedIn et un bouton Google+ depuis juillet 2011. Ce dernier est désactivé si vous naviguez sur ce site à partir d’un smartphone ou d’une tablette, Google ne le supportant pas dans le web mobile.

A noter de plus que depuis mars 2013, le blog supporte les Twitter Cards qui permettent d’afficher une image et un petit descriptif textuel des articles dans les flux Twitter lorsque un article est cité.

Twitter cards

 

  • Flux RSS

La liste des catégories permet de s’abonner aux flux RSS pour chacune d’entre elles, manière de suivre sélectivement le contenu de ce blog en fonction de vos centres d’intérêt.

Blog Olivier Ezratty Categories

Au passage, une catégorie est réservée aux articles écrits en anglais. Mais ceux-ci sont rares au vu du lectorat francophone du blog.

  • Alertes Twitter et Facebook

En suivant @olivez ou sur mon profil Facebook.

Le flux de mes Tweets ainsi que des Tweets citant @olivez est par ailleurs dans un widget Twitter intégré dans la colonne droite du blog.

Blog Olivier Ezratty Opinions Libres Derniers Tweets.jpg

  • Version mobile du blog

Ce blog est disponible en version web mobile, opérationnelle sur les smartphones du marché disposant d’un navigateur Internet. Cela concerne notamment les iPhone, les smartphones sous Android et Windows Mobile.

Les fonctions supportées sont l’affichage des titres des derniers posts, l’affichage des posts, et l’ajout de commentaires en ligne avec support du captcha. En bas de la page de cette version mobile se trouve un bouton permettant de désactiver cette vue et de basculer vers la vue normale du site. Le plugin photo-folders fonctionne lui aussi en version smartphone avec une interface simplifiée.

Opinions Libres sur smartphones

Voilà pour la visite ! Enjoy !

Vous pouvez bien entendu me faire d’autres propositions permettant d’améliorer le confort d’usage et de lecture de ce blog. Je ferai tout mon possible pour les satisfaire !


Lien du blog Opinions Libres : https://www.oezratty.net/wordpress

Lien de l'article : https://www.oezratty.net/wordpress/blog/visite-guidee/

(cc) Olivier Ezratty - http://www.oezratty.net