Connaissez-vous la propriété CSS text-align: centaur; ? Cette formidable invention technique permet désormais d’aligner centauriquement du texte ! Cela fait des années que toute la communauté web demandait cette propriété ! Designers, imaginez les nouvelles possibilités qui s’offrent à vous pour le chartage de vos maquettes !

Cliquez sur l’image pour plus d’informations sur l’implémentation centaurique CSS.

Nous avions déjà vu précédemment comment forcer le mode de compatibilité IE7 d’IE8 afin que l’affichage soit conforme au rendu IE7, je vous propose cette fois-ci de voir l’opération inverse.

L’intervention réside toujours sur l’utilisation de la balise meta X-UA-Compatible mais avec un content différent. En effet, la valeur de l’attribut content étant automatiquement convertie en vecteur de version par Internet Explorer 8, il suffit d’indiquer une valeur supérieure ou égale à 7 pour forcer un mode de compatibilité supérieur à IE7.

Cela signifie que pour interdire le mode de compatibilité IE7 sous IE8, il suffit d’indiquer la balise meta ci-dessous :

<meta http-equiv="X-UA-Compatible" content="IE=8" >

Ainsi, les utilisateur d’Internet Explorer ne pourront plus visualiser vos pages web avec un mode de compatibilité inférieur à IE8.

Forcer le mode de compatibilité à la dernière version d’Internet Explorer

Cette astuce permet de forcer le mode de compatibilité au plus haut niveau connu par le navigateur et ainsi anticiper la sortie des prochaines versions d’Internet Explorer (si tant est qu’elles existeront !).

<meta http-equiv="X-UA-Compatible" content="IE=100" >

Présentation de Flattr

Flattr est un nouveau système de « digg-like social » permettant de valoriser et de monétiser la création de contenu sur le web. Le service offre en outre un moyen simple et innovant de rémunérer les auteurs tels que les blogueurs. Veuillez toutefois noter qu’à l’heure ou j’écris ce billet, Flattr est toujours en beta privée.

Si vous lisez ce tutoriel, j’imagine donc que vous disposez déjà d’un compte Flattr et que vous avez en votre possession votre User ID (affiché sur votre Dashboard Flattr).

Intégration d’un bouton Flattr à votre thème WordPress

Premièrement, il vas falloir installer le plugin Flattr pour WordPress disponible ici. L’installation est classique et ne nécessite aucune procédure particulière, utilisez simplement le gestionnaire de plugins de WordPress.

Une fois le plugin installé, un nouvel onglet nommé Flattr est apparu dans le menu Réglages de WordPress. C’est à partir de ce module que vous devez configurer le plugin et en particulier renseigner votre Flattr user ID.

Etant donné que nous allons voir comment ajouter manuellement le bouton Flattr à votre blog, laissez décochée la case « Insert Flattr button automagically« .

Modification des fichiers de votre thème

Désormais le plugin Flattr est correctement installé et configuré sur votre blog. L’étape suivante consiste à modifier les fichiers de votre thème afin d’ajouter l’appel au bouton Flattr et d’ajouter les styles CSS qui afficherons le bouton en haut à droite de chaque article.

1 : Édition du fichier CSS : cherchez et ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/style.css et ajoutez en fin de fichier le code ci-dessous :

.flattr-container { float: right; margin-left: 15px; }

2 : Édition des templates : nous allons devoir rajouter l’appel au bouton Flattr dans chaque fichier de votre thème servant à afficher un billet. Ainsi, nous allons pouvoir décider d’afficher ou non le bouton sur chaque page de votre blog.

Pour commencer, ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/index.php et cherchez l’appel à la fonction the_content().

Afin d’afficher le bouton, il suffit de rajouter avant l’appel de cette fonction le code ci-dessous :

<div class="flattr-container">
	<?php the_flattr_permalink() ?>
</div>

Pour afficher le bouton sur la page affichant un billet, vous devez répéter l’opération sur le fichier single.php puis sur les fichiers archive.php, category.php et tag.php s’ils existent pour votre thème. Ainsi, le bouton devrait être affiché sur toutes les pages de votre blog.

Notez que dans ces derniers fichiers, l’appel à la fonction the_content() a pu être remplacé par l’appel à la fonction the_excerpt() qui affiche un résumé de l’article. De la même manière ajoutez simplement le code avant l’appel à cette fonction

En résumé, cette méthode permet de contrôler l’affichage du bouton sur chaque type de page de votre blog et permet également d’appliquer des styles CSS personnalisés si vous désirez un affichage différent de l’affichage par défaut proposé par le plugin Flattr.

A lire également : Flattr : Retour d’expérience après 2 mois d’utilisation….

Savez-vous qu’il est très simplement possible de faire pivoter un site web selon un angle précis via du CSS et la propriété -moz-transform ?

La page web subiera une rotation dans sans totalité et le rendu sera fonctionnel au minimum sous le navigateur Firefox.

Voici le code permettant cette rotation, notez que vous devez adapter la valeur de la propriété width en fonction de la taille de votre page web.

body {
	-moz-transform:rotate(-30deg);
	height:auto;
	margin:10px auto;
	position:relative;
	width:1300px;
	z-index:1;
}

Démonstration

Cliquez-ici pour accéder à l’espace de démonstration de la rotation.

Voici un aperçu très original proposé par rickyh.co.uk du mariage entre MooTools et CSS3 et des nouvelles possibilités qu’offrent ces deux technologies en termes d’effets visuels pour le web. Inutile de préciser qu’il est préférable de disposer d’un navigateur récent

Glissez par ici…

Un ami m’ayant demandé de lui réaliser un thème basique et sobre pour le script de livre d’or AlexGuestbook, j’ai décidé de rendre Open Source le thème et d’en faire profiter la communauté de ce logiciel. Le skin nommé Blue_Clean adopte une présentation plus classique avec un menu horizontal qui peut être modifié ainsi qu’une ambiance plus sobre. J’ai également rajouté quelques effets de survol sur les différents tableaux afin de faciliter la lecture des différents messages. Enfin, le skin est compatible avec le multilingue et à été testé sous la version 5.0.2 de AlexGuestbook.

Capture d’écran du skin Blue_Clean

Téléchargement du skin :

Cliquez-ici pour télécharger le thème Blue_Clean pour Alex Guestbook.

En espérant que ce thème vous plaise

Typekit est une nouvelle technologie permettant d’utiliser n’importe qu’elle typographie présente dans le catalogue du service sur votre site Internet indépendamment des plateformes et des navigateurs web !

Cela fait quelques temps que de nouveaux services naissent autour de cette problématique (afin d’afficher une police sur un site, celle-ci doit obligatoirement être présente sur la machine de l’internaute) et ce notamment avec l’arrivée de CSS3. Le problème majeur étant que les navigateurs anciens (pour ne pas citer ceux de Microsoft) ne supportent évidemment pas CSS3, typekit fournit une technologie permettant d’afficher une police distante sur n’importe quel navigateur.

De plus, typekit propose un catalogue de polices ayant une licence d’utilisation adaptée à une diffusion sur le web, les typographes sont donc rémunérés sur leur création.

Démonstration de typekit

A noter tout de même que typekit est à l’heure où j’écris ce post en version beta fermée et que le service proposera à terme plusieurs plan payants offrant des fonctionnalités et un catalogue plus ou moins riche.

Si il y a bien une boutique qui fait parler d’elle en ce moment, c’est bien nolimit.fr. Bâtie sous Magento, elle illustre parfaitement le potentiel et la puissance que Magento peut apporter à un site e-commerce. D’ailleurs, vous vous doutez bien que si j’en parle, c’est précisément parce qu’elle est propulsée par Magento.

Nolimit.fr est une boutique entièrement dédiée au matériel de sport de glisse et propose des articles de grandes marques.

La première chose qui frappe est une charte graphique d’une harmonie et d’une originalité peu courante à mon sens. Le genre est revisité tout en conservant les conventions liées à la vente en ligne. Un résultat qui en jettes tant au niveau graphique que technique.

On remarquera également l’utilisation massive de Flash pour les zones phares de promotion ou du pied de page. Certains pourraient penser que c’est à contre courant vu les temps qui courent ou un certain Javascript tend à détrôner le méchant Flash.

Pour ma part je suis plutôt d’avis qu’il est trop tôt pour déléguer ce genre de tâches à JS, non pas à cause du langage, mais disons plutôt à cause de son interprétation encore trop bancale sur les différentes plate-formes de navigation.

Bon et Magento dans tout ça ? À première vue pas de grosse explosion de fonctionnalités comme chez mes coupaings de discounteo, les fonctionnalités natives de Magento semblent avoir été exploitées dans leur ensemble. A noter tout de même un super menu à base de toggle vertical (si, il faut cliquer sur TOUT NoLimit EN 1 CLIC pour l’ouvrir) mais pas vraiment visible ! J’ai même failli passer à côté ! Notez le mix de min et de majs, bah ouais ça fait djeuns !

Quoi qu’il en soit, je trouve le résultat final très réussi et je pense que cette boutique peu venir s’ajouter à la petite liste de boutiques Magento françaises d’exception !

Ceci était mon humble avis avec ma petite expérience de Magento et je tenez à partager ce lien, et vous les codeurs Magento, qu’en pensez-vous ?

Glisser vers la boutique nolimit.fr

Les réseaux sociaux tels que Twitter ou Facebook peuvent se révéler être de formidables outils de promotion pour vos blogs. En effet, ils permettent de partager en un clic une information à l’ensemble de son réseau de contact. C’est pourquoi mettre en avant ces nouveaux moyens de communication sur votre blog ou sur votre site internet peut être important.

Afin de vous aider dans cette tâche, il existe des packs d’icônes gratuits représentant la plupart des grand réseaux sociaux ou moyen de communication du web.

En voici une collection non exhaustive :

• Social Network Icon Pack par Komodo Media (52 icônes)

• Social Bookmark Iconset par vikiworks (Set 1)
  

• Social Bookmark Iconset par vikiworks (Set 2)

• Heart: Free Social Icon Set par The Design Superhero

• Free Vector Social Bookmark Icons par snap2objects

• Social Media Icon (Freebies) par Arbenting

• Social Web Buttons par webfruits (Set 1)
  

• Social Web Buttons par webfruits (Set 2)

• WebDev Social Bookmark by ~IconTexto

• Socials PNG icons by giZ by ~GiZZiStar

• My works sur UtomBox

Bien entendu, gratuit ne signifie pas libre de droits, alors attention toute fois à regarder les licences accompagnant les différents packs.

LESS est un environnement de programmation héritant de CSS écrit pour Ruby permettant d’ajouter un grand nombre de fonctionnalités au CSS (variables, opérations, utilisation de classes au sein du CSS, règles en cascade…).

En développant avec LESS, nous n’écrivons plus directement de CSS mais du LESS qui sera compilé en un fichier CSS prêt à fonctionner.

Lessphp rend tout ceci possible dans un environnement PHP grâce à une classe à inclure dans vos scripts afin de compiler du LESS.

Lessphp est en cours de développement et ne supporte pas l’ensemble des fonctionnalités offertes par LESS pour le moment, cependant un certain nombre d’entre-elles sont opérationnelles.

Quelques exemples

• Inclusion de lessphp et compilation

require 'lessc.inc.php';
 
try {
    lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
    exit('lessc fatal error:<br />'.$ex->getMessage());
}

• Utilisation des variables et des opérations :

/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
  border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; } /** CSS obtenu après la compilation **/

• Utilisation des « mixins » (classes au sein du fichier CSS)

/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
.mixin {
color: red;
.myClass;  /** Utilisation de la classe .myClass au sein de la classe .mixin **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; }
.mixin {
  color:red;
  border:4px solid red;
}

Nous voyons bien de cette manière que nous pourrions grandement améliorer notre code CSS et factoriser énormément de code ! De plus, la compilation s’effectuant côté serveur, il est tout à fait possible de générer dynamiquement le CSS via un appel ajax en fonction d’évènements homme-machine par exemple.

Il est à noter que lessphp est disponible sur la plateforme github et qu’il vous ait donc possible de signaler les éventuels bugs que vous rencontrez ou encore récupérer les toutes dernières versions de la librairie.

Alors, pensez-vous que lessphp pourrait améliorer votre code CSS ?

Pour plus d’informations

• Site officiel de lessphp
• Site officiel de LESS (Ruby)
• Documentation de LESS
• Plugin lessphp pour Symphony