CMS WordPress

Classes CSS générées par WordPress pour les images

Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Plusieurs options sont disponibles depuis l’interface des médias, chacune ajoutant une classe CSS dans les éléments HTML `img` ou `div` (si une légende est spécifiée). Cet article propose un rapide aperçu des classes CSS permettant d’aligner les images avec les styles CSS associés, de gérer les formats d’images ainsi que les légendes. Nous verrons aussi comment, à partir des classes générées automatiquement par WordPress, utiliser les classes multiples — comme .classe1.classe2 { … } sans espace entre .classe1 et .classe2 — pour faire face à tous les cas de figure concernant les formats, les alignements ou la présence ou non de légendes. →

Frameworks Javascript

Popcorn.js is — Framework Javascript vidéo & audio HTML5

Popcorn.js is est un framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Popcorn normalise les propriétés, les méthodes et les événements natifs des éléments média audio et video HTML5 sous la forme d’une API extensible via des plugins. En gros, il s’agit du jQuery de la vidéo. C’est dire l’ambition des concepteurs qui espèrent révolutionner le monde de la vidéo en l’adaptant au web via l’utilisation des ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux. →

Intégration web

Notes de lecture : « Responsive Web Design »

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed». →

Le petit journal du web

Notes de lecture à propos de « Stratégie de contenu web »

Après HTML5 pour les web designers et CSS3 pour les web designers, le troisième opus de la collection A Book Apart Stratégie de contenu web écrit par Erin Kissane et préfacé par Muriel Vandermeulen est consacré à la nouvelle redécouverte du web : le contenu. Le pitch ? La création de contenu pour le web ne devrait pas s’effectuer sans une réflexion en amont sur 1) le profil du lectorat et 2) les compétences et la disponibilité de ses producteurs. Sans oublier que tout travail mérite salaire… En gros, il faut que les producteurs aient les moyens de s’adresser correctement aux consommateurs. Autrement dit : si on dit n’importe quoi à n’importe qui à n’importe quel prix, le résultat ne sera pas pas très efficace ! →

Plugin jQuery

Blueberry : un diaporama « responsive »

Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage. →

HTML & CSS

Quelques liens sur les Media Queries en CSS3

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage ! →

Le petit journal du web

Le Petit Journal du Web — 09/2011

Le dernier Petit journal du web paru sur CSS & Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j’ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc. →

Humeur

Les pseudos sur le web saymal ?

Je voudrais ajouter mon grain de sel à l’article de +Christophe Lefevre concernant l’anonymat et le fait que les pseudos ne seraient plus adaptés à l’ère du Personal branding. Une bonne et saine gestion de sa réputation sur le web passerait forcément par l’utilisation de son patronyme dès lors qu’on devient adulte, exceptions faites des cas de force majeure : ne pas impliquer son entreprise et ne pas s’afficher ouvertement comme utilisateur de préservatifs Small Size dans les commentaires laissés chez Dur3x 😉 →

Plugin jQuery

Elastislide : un carousel jQuery réactif (Responsive Webdesign)

Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier. →

Tutoriel

Apprendre jQuery

La série Decoding jQuery proposée par Shi Chuan (créateur de Mobile Boilerplate et faisant partie de l’équipe de HTML5 Boilerplate) nous propose une immersion (en anglais) dans le code source de jQuery. Après 4 parties consacrée aux bases du framework et aux subtilités de la programmation objet dans jQuery, l’auteur attaque les fonctions et les méthodes principales qui font le charme de jQuery ( extend(), isWindow(), parseXML(), globalEval() et toArray() ) pour le moment. →