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é 😀 →

Montage Vidéo

Se former à Adobe Première Pro

Un logiciel de montage vidéo comme Première Pro permet de mettre bout à bout des prises de vues (rushs) pour en faire des séquences, des clips, des courts-métrages ou des films. Enfin, à condition d’avoir assimilé les différentes techniques de montage issues d’une longue tradition allant du cinéma muet de la fin du XIXe aux séries TV du XXIe ! Dans cet article, j’ai décidé de garder une trace des méthodes, des techniques et des sources qui ont retenu mon attention dans le cadre de mon apprentissage du montage vidéo en général et du logiciels Adobe Première Pro en particulier. →

Montage Vidéo

Montage vidéo et raccords

Le montage d’une séquence est l’action de mettre les plans filmés dans un certain ordre, selon l’intention du récit. La manière dont un plan laisse la place à un autre crée une liaison ou marque une rupture, selon le type de raccord utilisé. Bien évidemment, chaque type de raccord peut faire l’objet d’un détournement en fonction des choix narratifs ou esthétiques. On a pu voir dans les raccords l’équivalent de la ponctuation. Toutefois, les raccords « marqués » (fondu enchaîné, fondu au noir, effet de volet, etc.) sont beaucoup moins utilisés dans le cinéma moderne qu’à ces débuts. →