Archives

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

tota11y : visualisez l’accessibilité de votre site web

tota11y vérifie l'accessibilité de votre page web

Il est parfois difficile de s’assurer que son site se comporte correctement vis-à-vis des technologies d’assistance dont peuvent se servir les visiteurs en situation de handicap pour parcourir le web. Ces technologies peuvent revêtir diverses formes : aides logicielles (lecteurs d’écran, loupes) ou matérielles (souris, claviers, micros, trackballs, plage Braille, etc.).  Pour faciliter la tâche de l’intégrateur front-end, l’équipe de développement de la Khan Academy a décidé de lancer tota11y.

WordPress : faire un lien depuis home.php vers un autre template

Cet article répond à la question existentielle suivante : comment faire un lien depuis le template home.php qui affiche ma page d’accueil personnalisée vers une autre « rubrique » du site chargée d’afficher les articles dans l’ordre antéchronologique. En gros, l’idée est de créer une section qui fera office d’archive pour le site ou encore d’afficher les articles comme s’il s’agissait d’un blog, quoi.

Allégez votre base de données WordPress avec WP-Optimize

WP Optimize

Optimiser les performances web front-end, c’est bien, mais il est temps de passer à la partie back-end. Et oui, c’est peut-être le moment de penser à alléger votre base de données des informations inutiles et/ou obsolètes qui s’accumulent avec le temps. Pour cela, il existe des extensions WordPress qui rendent de nombreux services en faisant l’impasse sur le lancement de phpMyAdmin pour faire le ménage. En effet, nombre d’optimisations nécessitent généralement l’envoi de requêtes SQL (comme on peut en trouver sur sql.sh) pour modifier la base de données. Voyons ce que WP-Optimize peut faire pour nous.

C’est quoi ce « binz » avec les courbes de Bézier régulières dans Illustrator ? (theagsc.com)

Les courbes de Bézier

L’outil Plume est certainement un des outils emblématiques d’Illustrator. Ce n’est pas le plus simple à maîtriser, mais avec un peu d’habitude, d’astuce et d’espièglerie on parvient généralement à s’en sortir. Une fois qu’on a pris le coup de main, les courbes de Bézier sont un vrai plaisir. Toutefois, s’il y a une chose sur laquelle on peut hésiter même après des années de pratique, c’est bien le placement des points d’ancrage. Dans la suite de cet article, nous allons voir la méthode de travail du studio The AGSC qui va nous aider à choisir l’emplacement optimal des points d’ancrage dans Illustrator.

Optimiser les images dans WordPress avec EWWW Image Optimizer

EWWW Image Optimizer

Les images sont aux performances web ce qu’un match de foot au stade de Gerland est à la circulation : un goulot d’étranglement. Avec Javascript, les images sont en effet un tue-l’amour pour la bande passante. En attendant de servir des tailles d’images adaptées aux périphériques, on peut commencer par optimiser le poids des Jpeg, Gif et autres PNG grâce à EWWW Image Optimizer. 

9 ans d’articles et de chartes graphiques pour (css)4design

4design depuis 2006

Le 20 juin 2006, j’enregistrais le nom de domaine css4design.com avec l’envie d’écrire des articles sur les différentes manières de faire des mises en page web avec les feuilles de style CSS tout en mettant l’accent sur les problèmes de compatibilités entre navigateurs. Le temps a passé et ce qui était encore nouveau à l’époque est aujourd’hui une évidence, tandis que les problèmes de compatibilité — même s’ils n’ont pas totalement disparus — semblent moins critiques. Au fil des années, j’ai enlevé le « css » de css4design pour élargir le propos du blog au design en général et pour éviter de créer une rupture entre mes expériences professionnelles Print et Web. Comme l’a dit Ashley Havinden : « Le graphiste est celui qui est capable de résoudre les problèmes de communication, quel que soit le médium imposé ».

Pastacode : la coloration syntaxique de Prism.js dans WordPress

Pastacode coloration syntaxique de prism pour wordpress

Suite à une requête de @GizMecano concernant le manque de coloration syntaxique sur les bouts de code présents dans mes articles, j’ai installé le script Prism.js dont le thème Coy colle particulièrement avec ma charte graphique. Prism, c’est cool à condition d’avoir envie d’ajouter à la main le type de langage utilisé sur chaque balise <code> à colorer ! C’est pourquoi, je me suis tourné vers l’extension Pastacode de @BoiteAWeb et @willybahuaud qui reprend Prism tout en permettant d’ajouter du code directement depuis la barre d’outils de WordPress.

Le web, c’est comme une boîte de chocolat, on ne sait jamais sur quoi on va tomber

Le petit journal du web

Pour ce nouveau numéro du petit journal du web, je vous ai préparé une brassée de liens en provenance de ma veille dont vous pouvez suivre la progression sur mon compte Diigo. Des générateurs visuels pour HTML5 et CSS3 ou les Microdatas ; des outils pour vous aider dans votre travail d’intégrateur front-end ; des conseils pour mieux gérer les alignements dans vos créas ; des méthodes pour centrer un bloc ; ajout d’une miniature pour les catégories WordPress ; une police de caractère tout en CSS  et du jQuery pour un scrolling intelligent.

Quels sont les facteurs qui influent sur le temps de chargement de votre site ? 

J’ai abordé il y a peu la notion de performance web sous l’angle du poids des pages et temps de chargement des différentes ressources (images, scripts, CSS, etc.). Si vous souhaitez allez plus loin dans l’analyse de la qualité de votre site, les solutions ne manquent pas. Vous utilisez probablement des outils intégrés à votre navigateur comme Firebug ou YSlow, mais laissez-moi vous présenter le service en ligne DareBoost qui analysera la qualité et les performances de votre site web en moins de 15 s.

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.