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.

Ce bookmarklet innovant et extrêmement geek est capable d’injecter une petite fusée armée jusqu’aux dents dans n’importe quel site web. Une fois activée, il ne vous restera plus qu’à la contrôler à l’aide de votre clavier afin de pulvériser toutes ces balises HTML qui vous narguent depuis tant d’années.

A mon avis, le deuxième bookmarklet le plus utile après celui de jQuery UI !

Merci à erkie pour cette excellente signapplet !

Performable Love propose un générateur de bouton de conversion en ligne personnalisable et très style web 2.0 qui permet d’obtenir un joli bouton en quelques clics !

Voici quelques exemples obtenus avec le générateur :

Accéder aux générateur.

Je vous avais déjà présenté succinctement Flattr dans ce tutoriel pour WordPress, je vais désormais vous faire part de mon ressenti après un peu plus de deux mois d’utilisation de la nouvelle plateforme de rémunération de la création sur Internet.

Commençons par cela, « plateforme de rémunération de la création sur Internet » ça sonne plutôt pas mal mais en réalité il faut comprendre que Flattr n’est ni plus ni moins qu’un digg-like couplé à un système de micro-paiement, ça fait déjà moins révolutionnaire non ? Bien évidemment, le concept de Flattr ne réside pas dans l’outil mis à disposition, mais plutôt dans l’idée. C’est vrai après-tout, c’est une super idée de donner la possibilité aux internautes de rémunérer les auteurs du contenu multimédia qu’ils consomment quotidiennement. Et c’est ici que le premier problème se pose, pour le moment, en dehors de quelques fanatiques anti-hadopi, la plateforme est surtout peuplée de créateurs de contenu. On se retrouve donc dans un schéma bien connu des digg-like, énormément de liens disponibles et peu de contribution de la part des utilisateurs classiques. En d’autres termes, l’outil n’offre pour le moment pas une bonne visibilité aux créateurs de contenu.

En revanche, n’importe quel blogueur, webmaster ou podcaster n’hésitera pas à payer deux euros pour éventuellement s’assurer un revenu complémentaire aux outils de monétisations classiques.

D’autant plus que pour contribuer, il faut être membre et que pour être membre, il faut au minimum verser deux euros (pour un mois d’utilisation). Exit donc toute une partie du lectorat de la génération du tout gratuit sur Internet. De plus, pour qu’un internaute utilise Flattr en tant que lecteur, celui-ci doit vraiment faire preuve d’une volonté altruiste puisqu’avant même qu’il puisse découvrir l’outil, il devra payer. Il me semble qu’une grande partie de la population française a oubliée ce concept puisqu’elle ne paye même plus la musique qu’elle écoute, les films qu’elle regarde ou encore les logiciels qu’elle utilise au quotidien. Nous commençons donc à bien réduire la proportion du lectorat potentiel sur Flattr.

Un second point négatif que j’ai pu relever se situe au niveau du trafic généré par l’outil. Pour ma part je suis face à une situation inédite dans laquelle le nombre de personnes m’ayant Flattr (flatté ? flatteré ?) est trois fois supérieur aux visiteurs unique qu’à généré l’outil ! Autant dire que le chiffre est ridicule. En gros, certaines personnes ont délibérément choisi de m’attribuer une partie des deux euros versés à leur inscription pour un contenu qu’ils n’ont même pas lu ? Aussi, pour ma part et pour le moment, Flattr ne se démarque pas des digg-likes classiques en terme de trafic généré, il n’égale pas un scoopéo ou un fuzz, c’est dire.

Enfin, le troisième petit soucis que je rencontre va bientôt faire face, il se peut que la balance de mon compte passe en négatif d’ici une paire de mois (étant donné que Flattr prélève deux euros minimum par mois). Si je souhaite continuer à utiliser l’outil il faudra que je ré-alimente mon compte balayant ainsi le fruit du travail des mois précédent. En fait, cela me fait penser à un casino, à moins d’enchaîner les scoops et de décrocher le jackpot, on finit quoi qu’il arrive perdant. Bien-sûr on peut toujours afficher fièrement nos compteurs Flattr sur notre blog, et ça, ça n’a pas de prix.

En conclusion, je dirais que Flattr est un bon outil, même avec tous ces défauts. En revanche, je pense que Flattr manque encore de maturité et d’une communauté française suffisamment développée pour faire tourner le système. Je vais continuer à utiliser Flattr et même à le recommander, mais en espérant fortement que le service s’améliore dans les mois qui suivent, sans quoi le service ne pourra pas décoller en France. D’ailleurs, la plateforme n’est clairement pas tournée à l’international pour le moment, l’interface n’est disponible qu’en anglais et des articles de toutes les langues s’affichent par défaut sur la timeline, de quoi dérouter un internaute au premier abord !

WebDesignerWall propose un tutoriel que je vous invite à découvrir permettant de créer rapidement des coins arrondis sur des images grâce à jQuery à la manière de CSS3 (rounded corners).

Cette solution permet de contourner les problèmes de compatibilités rencontrés avec certains navigateur comme Firefox.

Le code jQuery ajoute automatiquement le code HTML réalisant les coins arrondis aux images portant une certaines classe, de plus, il gère automatiquement l’ombre et masque l’image originale afin d’en empêcher la copie !

Un script que je vous recommande car très léger et très pratique !

En savoir plus…

1stwebdesigner propose un tutoriel permettant de créer une ombre portée dynamique à base de CSS / Spriting / jQuery sur les éléments d’une page web en fonction d’une source lumineuse placée sur la page.

Ce n’est pas clair ? Je vous invite tout d’abord à jet un œil à cette page de démonstration exceptionnelle (n’oubliez de faire glisser l’ampoule après l’avoir allumée !).

Comme vous avez pu le constater, le script adapte l’angle ainsi que la profondeur de l’ombre portée en fonction de la position de la source lumineuse sur la page !

Tout simplement awesome ! Pour ceux qui désirent comprendre pas-à-pas comment réaliser ce type d’effet, je vous invite à consulter le tutoriel !

jScratchcard est un plugin pour le framework JavaScript jQuery permettant de créer des zones grattables à la manière des jeux de grattages que l’on retrouve chez nos buralistes. Il devient alors possible d’imaginer la création de toutes sortes de jeux de grattages directement en HTML / CSS / jQuery (rappelons que ce type de jeux existe déjà sur le web en Flash).

Très simple d’utilisation, le plugin jScratchcard propose également une personnalisation des effets de grattage assez poussée. De quoi ravir les webmasters spécialisés dans le domaine !

En tout cas, félicitation à Senamion.com pour le plugin !

Voir la page de démonstration du plugin jScratchcard.

Tout simplement… impressionnant !

A l’occasion des 30 ans de PAC-MAN Google à mis en ligne un nouveau logo interactif qui se transforme en jeux video lorsqu’on clique dessus ! Il est alors possible de jouer à PAC-MAN à l’intérieur du logo lui-même !

Petite astuce, cliquez sur le bouton « Insérer Pièces(s) » qui à remplacé le bouton « J’ai de la chance » pour ajouter Miss PAC-MAN à la partie et jouer à deux !

Pour information, vous pouvez retrouver le logo Pacman sur ce permalien

Dans notre série sur les jeux vidéos basés sur des technologies web, cet exemple est de loin le plus impressionnant ! Il s’agit d’un Tetris en 3D nommé Torus réalisé en HTML 5 à l’aide de l’élément canvas !

Cette fois-ci, ce jeux créé par Ben Joffe dispose d’un rendu d’une fluidité exceptionnelle et d’un gameplay n’ayant rien à envier au mythique Flash.

Une nouvelle fois, cet exemple donne une vision de plus en plus précise de ce que nous réserve le web dans un avenir proche !

A découvrir de toute urgence !

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.