Archives mensuelles :

mai 2015

Extension WordPress

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). →

Helper HTML

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

Selectize — Dans la lignée de Chosen, Select2, 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).

HTML & CSS

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 & Webdesign

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à… →

Illustrator

Modes de fusion Illustrator — et Photoshop

Les modes de fusion sont un incontournable d’une grande partie de la suite Adobe, qu’il s’agisse d’Illustrator, de Photoshop, d’InDesign, d’After Effects ou encore de Première Pro (avec quelques différences plus ou moins importantes selon les logiciels). Ces modes de fusion ont la particularité de permettre le mélange des pixels d’un calque auquel on applique le mode de fusion avec ceux du calque situés en-dessous. Notez qu’il est possible d’appliquer un mode de fusion identique ou différent à plusieurs calques situés les uns sous les autres. →

Mizukara (3615 MyLife)

Amélioration progressive et retour sur investissement

Dans un article documenté, Aaron Gustafson partage un retour d’expérience concernant la commande d’une application Google Chrome, pour démontrer à un sceptique les avantages de l’amélioration progressive. Suite à la demande du client, l’équipe chargé du projet se fait plaisir avec toutes les possibilités offertes par HTML5 et CSS3 pour donner à l’application une modernitude de bon aloi, quand le client revient un an après pour demander une compatibilité avec Firefox et IE9+… Là, Aaron lève les yeux au ciel et se maudit d’avoir conçu l’application uniquement pour Webkit à l’époque. →

Extension WordPress

WooCommerce + Automattic = Wootomattic ?

C’est officiel, si l’on en juge par l’annonce de Matt Mullenweg et du logo Automattic situé dans le footer de Woothemes, WooCommerce fait désormais partie de Automattic, la société qui édite la solution de blog WordPress. Beaucoup de chiffres dans l’annonce, mais peu d’informations stratégiques sur l’orientation des uns et des autres (n’hésitez pas à poser vos questions sur le blog de matt pour en savoir plus), mais nul doute que la synergie entre les deux ira dans le sens d’une facilité d’utilisation accrue pour les utilisateurs.
→

Extension WordPress

Extension WordPress « Header and Footer »

Développée par Stefano Lissa, Header and Footer est une extension WordPress qui vous permettra d’ajouter des éléments à des endroits-clés de votre site, pour ajouter, par exemple, les codes Google Analytics, Facebook, de vérification Google Webmaster Tools, ou tout type de contenus formatés en HTML dans vos articles. Cerises sur le gâteau : il est possible d’écrire du code PHP, de cibler les périphériques mobiles, ou encore d’activer des options pour optimiser votre SEO. →

Intégration web

Basehold.it — Afficher une ligne de base

Basehold.it permet d’afficher une ligne de base sur vos éléments html (balise html, body ou le container de votre contenu principal) pour faciliter le calage de votre grille verticale, la petite soeur de la grille horizontale, composée de colonnes. Pour l’utiliser, rien de plus simple : il suffit de faire un lien dans un appel de feuille de style, par exemple <link rel="stylesheet" href="http://basehold.it/24"> affichera une ligne de base d’une valeur de 24 pixels. →

Mizukara (3615 MyLife)

4design Reloaded!

Depuis le temps que je publie de manière sporadique, d’aucuns pourraient dire que ce blog est en friche. Je préfère penser qu’il est en jachère, c’est plus constructif ! Bon, on va pas se mentir, 4design est au ralenti depuis deux ans. Les plus anciens se rappelleront que j’ai commencé avec css4design.com en 2006, puis avec js4design.com et wp4design.com. J’ai ensuite migré tout ce petit monde sur des sous-domaines de 4design.tl (4design.xyz, js.4design.tl, etc.). Aujourd’hui, ce blog regroupe à nouveau la majeur partie des billets publiés précédemment sous un unique domaine : 4design.xyz ! Oui, après avoir expérimenté l’exotisme avec l’extension .tl, j’ai opté pour un nom de domaine de hipster, désolé 😀 →