Le Pixel

Hot Gloo – du wireframing collaboratif en ligne

Guilhem — Tue, 19 Jan 2010 08:27:57 +0000

Hot Gloo est un outil collaboratif en ligne de wireframing développé avec Flash. L’interface est extrêmement intuitive et ne requiert pas de connaissances techniques particulières, ce qui le rend réellement accessibles aux non initiés. Hot Gloo est idéal dans un contexte projet, ses options de partage offrent la possibilité à différents utilisateurs de commenter le projet. L’export en PNG ou PDF permet l’intégration facile dans des spécifications projets.

A noter, Hot Gloo est encore en Beta et l’inscription est gratuite.

Du dessin à la main avec javascript et les canvas

Guilhem — Sun, 17 Jan 2010 15:05:08 +0000

C’est le billet du week-end, un peu de détente et d’insolite pour le dimanche après-midi. Voici donc un projet pour le moins original qui vous permettra de créer un dessin à la main avec javascript.

Le script exploite les canvas et se manipule à la souris et offres es options activables avec des raccourcis clavier.

Pour tester le projet, c’est ici.

source : Steve Hanov’s blog

Créer une lightbox avec jQuery

Guilhem — Sun, 10 Jan 2010 21:52:19 +0000

Je vous propose de voir comment créer un lightbox simple avec jQuery pour mettre en valeur vos images.
Dans ce tutoriel, nous allons créer une mini galerie et définir une fonction qui s’activera au clic sur une miniature.

Vous pouvez voir la démo ici et télécharger les fichiers de la démo ici.

Préparatifs

Avant de commencer, téléchargez la dernière version de la librairie jQuery (la version 1.3.2 pour ce tutoriel).

HTML

Dans votre fichier html entre les balises et insérez :

Créez ensuite une liste de liens images dans le body :

On insère ensuite le div qui nous servira de lightbox :


     Fermer

Javascript

Pour masquer la lightbox dès l’ouverture de la page, insérez entre les balises et :

Notre lightbox aura un bouton de fermeture, nous définissons donc la fonction qui permettra de masquer correctement la lightbox :

$("#bouton_fermer").css({cursor:"pointer"})
     .click(function(){
         $("#lightbox").hide();
     })

Et enfin à chaque lien de la liste, nous attribuons une lightbox :

$("ul a").each(function(){

     //On récupère ici l'URL de chaque lien
     var imageURL = $(this).attr("href");

     //Lorsque l'on clique sur un lien, on affiche
     //la lightbox
     $(this).click(function(){
         var monImage = new Image();

         //load() déclenche l'execution d'unefonction
         //à la fin du téléchargement. Elle est très
         //utile pour la réalisation d'un preloading
         $(monImage).load(function(){

         //Pour pouvoir centrer la lightbox, il
         //nous faut récupérer les dimensions de
         //l'image à afficher
         monImageW=this.width;
         monImageH=this.height;

         //On définit le css de la lightbox pour
         //la centrer dans la page
         $("#lightbox").css({
             position:"absolute",
             top:"50%",
             left:"50%",
             marginLeft:-monImageW/2,
             marginTop:-monImageH/2
         }).show();
         $("#lightbox_image").empty().append(this);

     })
     .attr("src",imageURL);
     return false;
     })
 });

Ow.ly et Bit.ly declarés meilleurs raccourcisseurs d’URL

Guilhem — Wed, 19 Aug 2009 22:32:28 +0000

Si vous êtes utilisateur d’un ou plusieurs service de réseau social comme Twitter ou Facebook vous avez très certainement déjà rencontré des URL raccourcies. Avec l’explosion du microblogging, les services de raccourcissement d’URL sont devenus incontournables.

Pingdom a publié sur son blog les résultats de son étude réalisée pendant 1 mois sur les principaux services (dont Bit.ly, TinyURL et Tr.im) en se focalisant sur deux critères :

Le temps de chargement supplémentaire due à la redirection.
La stabilité des URL compressées (si elles redirigent correctement l’internaute).

En termes de rapidité, ce sont Is.gd et Bit.ly qui sont les plus performants Is.gd redirigeant les internautes en moins d’un quart de seconde. SnipURL quant à lui, frôle la seconde de chargement supplémentaire.

Délai de redirection par Service

Pour la disponibilité des URL raccourcies, Pingdom n’a pu donner qu’une approximation sur une année (son étude se basant sur 30 jours) :

Disponibilité des URL raccourcies

Au final, l’étude fait ressortir la domination de Ow.ly et Bit.ly en tant que meilleurs raccourcisseurs d’URL. Etonnamment TinyURL, pourtant un des plus connus, se classe 5ème sur les 9 services évalués.

source : Pingdom

Google insight disponible en français

Guilhem — Tue, 18 Aug 2009 21:05:59 +0000

Google insight en Français

Google a annoncé aujourd’hui le lancement de la traduction française de son analyseur de mots-clés Google insight for search.

Google tendances des recherches, offre à tout un chacun la possibilité de voir l’évolution de la volumétrie des requêtes sur des mots-clés. Plusieurs rubriques permettent de voir leur répartition dans le temps et géographiquement, ainsi que les tendances des requêtes similaires. Il est facile de visualiser l’impact de l’actualité sur les recherches des internautes.

Source : Vendeesign

Wordpress compresse ses URL avec WP.me

Guilhem — Mon, 17 Aug 2009 19:14:54 +0000

Get Shortlink

Vendredi dernier, Matt Mullenweg papa de Wordpress, a annoncé sur le blog de la plateforme le lancement de son propre raccourcisseur d’URL WP.me.

Dédié aux blog hébergés sur le site WordPress.com, cette nouvelle fonction vient en complément des permalinks. Chaque blog et billet du site dispose désormais d’une URL compressée WP.me accessible dans le grâce à la balise

Selon son créateur, les principaux avantages que retire Wordpress de se cantoner aux blogs qu’il héberge sur ses serveurs sont :

Une pérénité des URLs enregistrées (tant que wordpress.com fonctionnera).
Un filtre continu du spam.

Reste maintenant à voir si cette nouveauté est une simple adaptation au phénomène microblogging ou les premières briques d’une innovation…

source : Mashable

Spotify bientôt sur iPhone?

Guilhem — Mon, 27 Jul 2009 16:28:33 +0000

Spotify bientôt sur iPhone ?

Spotify, le service gratuit (et légal) de musique en ligne a annoncé ce matin une version pour iPhone en cours d’approbation par Apple. Cette application s’annonce très prometteuse, en témoigne la vidéo de présentation :

Là où Deezer dans sa version iPhone se limite à de la webradio, Spotify proposera aux utilisateurs d’accéder à leurs playlists enregistrées sur l’ordinateur. La synchronisation se fera par wi-fi et automatiquement. Un mode « Offline » offrira la possibilité d’écouter sa musique sans être connecté à Internet.

L’application est exclusivement réservée aux utilisateurs prenium, aucune information sur le prix de l’application n’a été communiquée. Concurrente directe de l’iTunes Store, Apple aura probablement quelques réticences à l’accepter dans son AppStore.

Google Latitude enfin sur iPhone

Guilhem — Mon, 27 Jul 2009 09:27:26 +0000

Déjà disponible sur les mobiles Android, Google Latitude est enfin disponible pour iPhone. Petit rappel, cette application Google vous permet partager avec vos amis votre position sur Google maps.

A son annonce, le service provoquait déjà quelques discussions autour de la protection de la vie privée. Comme prévu, Latitude propose de définir soi-même sa position.

Définissez vous-même votre position

Google proposait déjà de localiser les utilisateurs iPhone directement à partir du navigateur pour ressortir des résultats proches de lui. Il fallait donc s’y attendre, cette fonctionnalité est disponible via le navigateur Safari mobile.

Latitude vous localise via Safari

Je vous propose pour finir, cette vidéo de présentation du service :

Google planche sur la 3D dans YouTube!

Guilhem — Tue, 21 Jul 2009 18:29:40 +0000

La 3D s'invite dans YouTube

Un des développeurs de Google, travaille actuellement à l’intégration de la 3D dans Youtube. L’option déjà disponible, propose plusieurs modes basés essentiellement sur 2 techniques de la photo 3D.

L’anaglyphe, deux images avec une couleur dominante chacune (généralement rouge et cyan) superposées et visionnées avec des lunettes

Et la stéréoscopie, deux images une pour chaque oeil, sont disposées côte à côte. L’effet 3D apparaît avec des lunettes à cristaux ou simplement en louchant (gare aux maux de tête!).

Left4Dead en 3D dans Youtube

Pour vous donner une idée de ce à quoi cela peut ressembler, jetez un oeil à cette vidéo extraite du jeu left4dead.

Petite astuce : passez en mode « vision croisée », louchez et faites le point sur l’image du centre

source : Google Operating System

Résoudre une erreur 500 sur un blog WordPress 2.8

Guilhem — Mon, 20 Jul 2009 10:21:28 +0000

Pour franciser mon blog suite au changement de charte graphique (pour ceux qui auront remarqué ). J’ai décidé de faire une mise à jour de mon WordPress avec la version Fancophone. Ô grand malheur ! Depuis cette modification, certes tout le blog est en français mais il m’était impossible d’insérer des médias dans mes billets, ni même de me connecter avec le WordPress for iPhone d’Automattic.

Erreur 500 Wordpress lors de l'insertion d'une image

C’est en creusant un petit plus en profondeur que je suis tombé sur la solution. Grâce au Blog de Cyril Lopez qui affirme que le problème viendrait de la version php de l’hébergeur 1&1. Rien de plus simple pour corriger le problème il sufit simplement de rajouter dans votre .htaccess:

AddType x-mapp-php5 .php

Personnellement, j’ai choisi de placer cette ligne juste avant :

# BEGIN WordPress

Et maintenant, tout fonctionne correctement Merci encore à Cyril pour cette solution !

N.B.: La version 2.8.2 de wordPress est maintenant disponible et fortement recommandée!