Archives

Hi! this section is about displaying all the posts published on this site. Yes, like a blog!

Module CSS3 Flexbox : Flex for Fantasy

Flexbox We Can Do It

La mise en page des sites web en colonnes est passée par les affres de l’élément HTML <table> qui a laissé la place à la propriété CSS float, en passant très brièvement par display:table. Aujourd’hui, C’est au tour du module CSS Flexbox de faire parler de lui en permettant pratiquement tout ce que l’on peut imaginer en terme de mise en page fluide et flexible. Voici un florilège de ressources en français et en anglais pour découvrir ce module et apprendre à l’utiliser. Au menu, près de 30 liens pour se faire la main. 

Cookie Notice : l’extension WordPress qui informe vos visiteurs sur les Cookies

Extension Cookie Notice pour WordPress

Vous avez sans doute remarqué la prolifération des bandeaux informant l’utilisateur que le site qu’il visite utilise des Cookies. C’est le résultat de la simple application de la directive européenne dite « paquet télécom ». Elle précise que les éditeurs de sites web doivent informer les internautes (et que ces derniers doivent donner leur consentement) quant au dépôt de « traceurs » sur leur disque dur.  La solution prend souvent la forme d’un bloc situé en haut ou en bas de la page. Souvent jugé intrusif, voire hypocrite, je n’ai malgré tout pas résisté à l’envie d’ajouter ce bandeau à mon blog, ne serait-ce que pour rappeler aux visiteurs que même un modeste site comme le mien peut tracer ses visiteurs à l’insu de leur plein gré.

Le tour du web en 80 8 liens

Le petit journal du web

Vous trouverez dans cette nouvelle édition du petit journal du web des liens concernant : des vidéos en plein écran,  des stratégies pour faire des sites responsive, des backgrounds dans vos <tr>, un peu de gossip sur Dribbble, des formulaires sur mesure pour WordPress, les limites de la gratuité sur le net, le passage d’After Effects à CSS3 et le point médian pour finir.

a3 Lazy Load : chargement des images à volée pour WordPress

Extension a3 Lazy Load pour WordPress

Comme le rappelle l’article Des pages web de plus de 2 mo, à qui la faute ? les images représentent en moyenne 56 des requêtes et 62% du poids total d’une page web. Et ces chiffres sont en augmentation constante. Pour améliorer les performances de votre site, outre un système de cache et d’optimisation des fichiers HTML, CSS et Javascript, il est important de penser à différer l’affichage des images jusqu’à ce qu’elles sautent aux yeux de l’utilisateur.

Des pages web de plus de 2 Mo, à qui la faute ?

Graphique représentant le temps moyen de réponse par type de fichiers

On aurait pu croire que 2015 serait l’année de la performance web, mais on s’est trompé. Le poids moyen d’une page web a augmenté de 7,5% en 5 mois pour dépasser les 2 Mo. C’est en tout cas ce que nous rapporte Craig Buckler dans l’article 2Mb Web Pages: Who’s to Blame? qui cite le rapport publié dernièrement par http archive.  Ce dernier a rassemblé les chiffres de près de 500 000 pages, et les nouvelles ne sont pas très bonnes :

WP Super Cache et Autoptimize — Optimiser les performances de WordPress

La mise en cache et la minification des fichiers HTML, CSS et Javascript sont deux solutions permettant d’optimiser les performances de son site WordPress à moindre frais. Il suffit en effet d’installer deux extensions, d’effectuer quelques réglages, et l’affaire est dans le sac. Découvrez WP Super Cache et Autoptimize, les deux extensions que j’ai choisies pour transformer mon canasson préféré en cheval de course.

Admin Bar Tools — Le tableau de bord du développeur WordPress

Admin Bar Tools est une extension créée par Grégory Viguier. Elle est destinée aux développeurs WordPress à qui elle permettra de visualiser de nombreux paramètres depuis la barre d’administration, tant du côté « Admin » que « Visiteur ». Dans le premier cas, l’onglet affiche le nombre de requêtes, le temps qu’il a fallu pour générer la page et la mémoire consommée par PHP (sans oublier la liste des Hooks disponibles).

Selectize.js — donner du peps à vos éléments select avec jQuery

Selectize — Dans la lignée de ChosenSelect2, and Tags Input, Selectize est une surcouche Javascript  développée par @brianreavis avec jQuery pour moderniser l’élément HTML select dans l’optique d’améliorer l’expérience utilisateur dont cet élément a bien besoin. Selectize sera en tout cas bien pratique pour la gestion des tags, des listes de contacts, la sélection des pays, etc. Le tout pour un poids modique de 7kb (gzipped).

Flexible Math — Convertir des pixels en pourcentages

Le meilleur moyen pour rendre son site internet responsive consiste à utiliser des valeurs en pourcentage, tandis que le meilleur moyen de mettre en place une maquette, passe souvent par les pixels. Pour mettre tout le monde d’accord, il existe un mode de calcul aussi simple qu’efficace pour passer des pixels aux pourcentages : cible ÷ contexte = résultat. En d’autres termes, on prend la valeur de la cible en pixel, on la divise par le contexte (la valeur en pixel de l’élément parent) pour obtenir un ratio qu’il suffira de multiplier par 100 pour avoir les précieux pourcentages.

WordPress : visualisez la hiérarchie des templates

La hiérarchie des templates est une clé essentielle pour comprendre le fonctionnement de WordPress. Elle répond aux questions existentielles que se pose tout webdesigner : quel modèle de page créer pour afficher tel ou tel contenu, sachant qu’à la base on peut afficher tous les contenus avec le seul gabarit index.php (accompagné d’un fichier style.css) ? Ceci dit, dès que l’on avance dans la conception d’un thème, il arrive que l’on veuille faire une règle par ci, une exception par là…