SlapAndThink

Le blog au ralenti

Ben — Fri, 02 Dec 2011 14:54:30 +0000

Comme vous l’avez sûrement remarqué, le blog est vraiment au ralenti. Manque de temps, et d’envie de bloguer en ce moment, mais surtout besoin de remettre certaines choses à plat.
Je ne dis pas que j’arrête, loin de moi, trop passionné pour arrêter, mais disons que je vais réorganiser le blog et vous proposer plus. Peut être des tutos, des ressources, mais surtout une meilleure organisation de l’ensemble du projet, et des articles plus pertinents.
Pour le moment pas de date, car cela est encore trop tôt et les fêtes approchant, je n’aurais pas le temps de me plonger dans toute cette réorganisation.

Je vous dis donc, à bientôt avec de nombreux changements. Si vous avez des remarques, des suggestions ou tout autres considérations, les commentaires sont là pour ça !

@ Bientôt

ScriptSrc.net : Gagner du temps sur l’import de ses scripts

Ben — Mon, 17 Oct 2011 08:18:28 +0000

Aujourd’hui, nous allons parler gain de temps et importation de scripts. J’ai découvert un nouveau service pour vous permettre d’économiser de précieuses minutes de votre temps et surtout vous permettre de ne pas retenir les lignes d’importation de script.

Plus exactement, sur ScriptSrc.net, vous trouverez les codes d’importations des scripts déjà écrit, plus qu’a cliquer sur « copy » est c’est dans le presse-papiers, un coup de « coller » est c’est fini !

Tout y est, des scripts les plus utilisés aux scripts plus plus élitiste, l’intérêt et de ne pas perdre de temps, un clic suffit. Mis à jour régulièrement, ScriptSrc.net permet d’avoir toujours la dernière version de sa librairie favorite.

Les scripts disponibles pour le moment sont :

jQuery
jQuery UI
Chrome Frame
mootools
Ext JS
YUI
prototype
scriptaculous
dojo

Voici un exemple de ce que ça donne :

Pour profiter de ce petit gain de temps direction : ScriptSrc.net

8 inspirations + tutoriaux pour vos webdesign

Ben — Tue, 20 Sep 2011 10:47:31 +0000

Sur le web on trouve des tonnes et des tonnes de tutoriaux et ça c’est plutôt pas mal. Très utile pour apprendre à réaliser des choses toujours plus compliquées et précises, ils le sont nettement moins quand on ne parviens pas à les incorporer dans nos créations (ou à la faire incorporer par d’autres …).

Et oui, parce que je suis sûre que lors de votre navigation, vous remarquez des sites web sur lesquels se trouve un effet et un design que vous voulez absolument reproduire.

Nous voici donc sur ce billet où sont réunis plusieurs tutoriaux qui sont utilisés par de vrais sites internet. Et par « vrais sites » j’entends bien sure des sites qui ont réussis une intégrations parfaite de ces différentes méthodes que nous galérons parfois à incorporer à notre design.

Le point commun de tout ces sites est donc de se construire autour d’un effet, en le subliment et en l’utilisant pleinement.

1 L’effet de parallax

Effet de parallax

Cet effet de parallaxe est vraiment sympa. En effet, il permet d’enchaîner différents backgrounds dans la même page, ainsi, lorsque le visiteur scroll dans la page, il peut voir ces images en fond, superposées les unes par rapport aux autres. Un effet toujours unique malgré le fait que de plus en plus de site l’utilisent.

Le site | Le tutoriel

2 Mouse Drag

Mouse Drag

Le site | Le tutoriel

Cet effet de glissade vous permettra de réaliser, comme sur le site ci-dessus, un bel effet de transition pour la création d’un slide ou toute autre idée que vous auriez.

3 Panneau coulissant

Panneau coulissant

Le site | Le tutoriel

Un effet vraiment sympa pour les formulaires de connexion ou de contact.

4 Effet de survol

Effet de survol

Le site | Le tutoriel

Un effet de survol au passage de la souris peut permettre d’afficher plus d’informations relatives à l’image survolée. Utilisé principalement dans les galeries, ce petit effet est apprécié.

5 Chargement de la page

Chargement de la page

Le site | Le tutoriel

Un chargement de page est utile lorsque cette dernière doit afficher de lourdes images. Le chargement est donc là pour indiquer à l’utilisateur que le site est en train de se charger, et lui permet de patienter pour voir le résultat final.

6 Scrollbar

Scrollbar

Le site | Le tutoriel

Quoi de pire que d’avoir les scrollbars de votre site qui ne se fondent absolument pas dans le design générale de votre site web ?

Dans ce tutoriel vous allez pouvoir transformer les barres de scroll, en de véritable élément HTML pouvant être personnalisés grâce au CSS.

7 Mouse Wheel

Mouse wheel

Le site | Le tutoriel

Ce tutoriel vous permettra d’utiliser la molette de votre souris pour pourvoir naviguer de façon fluide dans une galerie ou dans un site web entier.

8 Slide Navigation

Slide navigation

Le site | Le tutoriel

Les menus en slides permettent une pointe d’originalité dans vos webdesigns. Attention, il s’agit de réaliser un effet en trouvant le juste milieu entre le nombre d’informations à afficher et la fluidité de l’ensemble.

CSS Compressor : Réduisez la taille de vos CSS

Ben — Tue, 06 Sep 2011 07:30:00 +0000

Toujours dans l’optique de gagner une poignée de secondes au chargement des pages de votre site, voici une petite application qui pourrait bien se révéler utile.
CSS Compressor vous permet donc de compresser votre code CSS pour réduire évidement son poids mais aussi pour que vos pages se chargent plus rapidement.

Une interface utile, épurée et simple. Il suffit juste de copier/coller son code, puis de cliquer sur « Compress ».

L’avantage avec cette application, c’est son ratio. En prenant un fichier CSS d’environ 13,56Kb, une fois compressé, sa taille est réduite à 10Kb soit un ratio de 23,4%. Et c’est déjà pas si mal.

Évidement, plus votre fichier CSS est volumineux, plus votre ratio devrait être élevé.

Les meilleurs blogs de design selon les fans Facebook et Twitter

Ben — Mon, 05 Sep 2011 08:50:08 +0000

Voici une petite infographie de TechKing, qui nous montre quels blog de design, code et marketing sont les plus suivi en fonction de leurs fans (Facebook) ou de leurs followers (Twitter).

Si vous ne les avez toujours pas bookmarker, voici la liste :

PHP & MySQL : Comment ne plus de casser la tête avec les fonctions date() et DATE_FORMAT

Ben — Mon, 05 Sep 2011 07:30:18 +0000

Bon, ça commence à faire longtemps que je n’ai pas fait d’article sur ce blog, désolé mais je suis vraiment surbooké en ce moment. Néanmoins je me suis pris 10 minutes pour vous parler de MySQL Format Date et de phpDate(). J’en ai déjà parlé sur la page fan, mais je voulais écrire un billet pour ceux qui ne sont pas encore « fans » (les vilains!) et aussi par ce que c’est un sujet que l’on peut qualifier d’important.

MySQL Format Date

On va commencer par le MySQL avec MySQL Format Date qui est une petite application web vraiment sympa pour ne plus aller voir dans la doc de Mysql pour savoir quel sont les arguments de FORMAT_DATE.
Très simple d’utilisation, vous créez le bout de code et paramétrez la fonction en moins de 30 secondes et c’est géniale, ça marche.

phpDate()

Toujours dans le même esprit que MySQL Format Date, mais pour la fonction date() de PHP. phpDate vous propose une interface largement plus accueillante et plus stylé que précédemment mais tout aussi efficace. Merci à Mike Fowler pour ce petit script bien utile.

Plusieurs avantages à bookmarker ces deux applications d’urgence:
1. Plus de prise de tête
2. Rapide et efficace

Si vous avez des applis dans le même genre, n’hésitez pas à les rajouter en commentaire.

Firefox 6 – Les nouveautés

Ben — Thu, 18 Aug 2011 15:45:36 +0000

Firefox 6 est maintenant disponible 2 mois après la version 5 … Plutôt rapide non ?
Mais alors, en 2 mois, les développeurs de Mozilla ont-ils vraiment créé de la valeur ajouté par rapport à la version 5 ?

La volonté qu’a Mozilla de rattraper son retard (par rapport à chrome) ou de conforter son avance (par rapport aux autres navigateurs) va t-elle voir ses fréquence de mise à jours de plus en plus rapide.

Attention, une fréquence de mise à jours plus rapide signifie, moins de temps à la communauté et aux développeurs pour rendre compatible les différents modules que nous adorons utiliser.

Normalement, à l’heure où j’écris ce billet, vous devez déjà avoir la nouvelle version, si ce n’est pas déjà le cas, elle est disponible via le site officiel de Mozilla.

Qu’est-ce qui change ?

Disons le tout de suite, cette mise à jour n’a rien de conséquente, et ne vas pas relooker votre Firefox. Mais aussi petite et discrète soit-elle, cette mise à jour apporte quand même sont lots d’améliorations :

20% plus rapide que FF5, c’est pas rien, allez voir sur votre Netvibes, ça change !
On se dirige vers un certain « Chrome like » pour la barre d’adresse où le nom de domaine est plus sombre que le reste de l’URL (FF7 prévoit de cacher complétement le « http:// »)

FF6 inclus pas mal d’outils pour développeur comme Scratchpad. C’est une fenêtre qui ressemble comme deux gouttes d’eau à un bloc-note. Dédié au JavaScript, elle permet l’écriture et l’exécution de votre code JS directement via Firefox. Pour l’utiliser : maj+F4.

La page « about:permissions » fait son apparition. Clairement la nouvelle fonctionnalité que je préfère dans cette mise à jour, cette page va vous permettre de contrôler l’ensemble des permissions allouées à chaque site.

La console web peut maintenant s’afficher en haut, en bas ou dans la fenêtre du navigateur.

Pour la release note complète, vous pouvez allez sur le site officiel.

Google Panda : Du changement dans l’air

Ben — Wed, 17 Aug 2011 07:19:16 +0000

C’est officiel, Google Panda est désormais lancé en Europe et donc en France. L’information est tombée sur le blog officiel français (ici). Nous avons et utiliserons à partir de maintenant le nouvel algorithme de recherche de Google : Google Panda.

Déjà furieusement connue avant même qu’une quelconque version soit effective, ce nouvel algorithme a déjà fait couler beaucoup d’encre et créé de nombreuses ampoules à des doigts angoissés.

Et justement, ceux qui angoissent, ceux qui ont peur, est-ce vraiment justifié ? Tout ce ram dam, des entreprises spécialisées dans le référencement qui ont criées à la catastrophe, ont-elles raison ?

L’objectif de ce billet est de répondre LE PLUS SIMPLEMENT à ces questions et surtout à celle qu’on me demande toujours : « Mais Google Panda, ça change quoi exactement ? »

Pourquoi Google Panda ?

Outre le fait que c’est un animal tout chou, en voie de disparition et dont certains vénèrent l’existence, c’est pas un nom qui fait plus trembler que ça.

Bref, celui qui nous intéresse c’est ce nouvel algorithme de Google. C’est plus qu’une mise à jour qui a (comme toutes les mises à jours) l’objectif d’améliorer le système et en l’occurrence les recherches et résultats de Google.

Une mise à jours pour combattre les « fermes de contenus », c’est à dire des auto-blogs ou autres sites dont le but unique est de générer du trafic pour avoir un revenu publicitaire. Ces fermes de contenus sont obligées d’avoir toujours plus de contenu et n’hésite pas à utiliser toutes sortes de scripts permettant d’en générer automatiquement, ou pire, en se servant sur les autres sites.

L’objectif principal est donc de lutter contre les sites de mauvaise qualité, des sites robots, qui ne présentent aucun intérêt pour les internautes (les textes sont souvent incompréhensibles). En gros Google veut faire du nettoyage !

De nouvelles règles !

Jusque-là, les mise à jours, n’avaient pas perturbé radicalement les règles de l’algorithme de Google. La différence de Panda vient du fait que ses conséquences vont avoir un effets directe sur nos sites et blogs.

Voici une petite liste des changements que j’ai pu établir en farfouillant de droite à gauche :

Panda prend maintenant en compte toutes les pages constituant un site pour déterminer son positionnement. Il va donc falloir faire la chasse aux pages « pauvres » et les mettre en NO INDEX (ou leur faire un update)
Une seule page du site, pauvre ou ne respectant pas la charte de Google et c’est votre site entier qui tombe.
Le ratio contenu publicité est pris en compte, plus vous mettez de publicités, plus vous serez déclassé.
Ralentissement de l’exploration des sites à faible contenu. Moins vous avez de contenu, plus la fréquence d’exploration des spiders sur votre site diminuera.
Les sites en flash qui présentent une version alternative en html pourront être désindexés.
Idem pour la réécriture d’URL (qui va faire très mal!), la catégorisation par dossiers devient donc obligatoire. Les dossiers dans les url doivent présenter à leur racine un contenu accessible.
Texte de masquage pour l’accessibilité, typiquement les « text-indent » ou « display:non », ou encore l’attribut « hidden » sont désormais passible de sanctions. Tout ça, juste parce que les spiders de Google, ne savent pas lire le JavaScript.
Les liens entre sites sont toujours vivement encouragé ! Google invite même à la réalisation de Link bait.
Les retweets sont pris en compte.
L’abus de no-follow est sanctionné

Voilà pour la petite liste qui est bien sure non exhaustive. Je vous recommande d’aller ici et là pour avoir plus de détails sur ces sujets.
Et enfin, vous aurez encore plus d’informations concernant les actus ici sur le site dédiés aux webmasters.

Pour quel impact ?

Maintenant que vous vous êtes rendus compte que votre site full flash ne sera visible que pas vous même (les gars d’M6 Replay sont sûrement aux anges…), quel impact ce Panda tout mignon à eu pour l’instant ?

Il y a bien sure des gagnants, et de grands perdants.

D’après Ranking Metrics, les sites comparateurs de prix, d’avis et sorte d’annuaires ont chuté de prés de la moitié de leur visibilité et donc en trafic.
On arrive même à du -55% pour wikio (ils doivent être super content), suivi par ciao.fr avec -51% et par shopwiki.fr avec -50%. Pour les grands « commerçants » perdants, on peut citer webmarchand.com (-48%), touslesprix.com (-33%) et acheter-moins-cher.com (-32%).

Si il y a des perdants, il a toujours et forcément des gagnants.

Toujours d’après la même étude, on apprend que priceminster.com, amazon.fr, cdiscount et rueducommerce.frsont en forte hausse avec respectivement +21%, +20%, +19%, +18%.

Pour conclure

Google Panda est l’algorithme qui touche principalement les sites de hight-tech et de portails d’informations qui reprennent les actus déjà existantes.
Vous l’avez bien compris, si votre site est full flash, mieux vaut prévoir quelques heures de travail pour le refaire.
Quoiqu’il en soit, certaines mesures sont bien plus facile à modifier que d’autres, à vous de placer la jauge de « satisfaction Google » à votre convenance et en adéquation avec votre objectif.
Google panda est toujours en bêta test, il est donc évident que de nouvelles choses bougent d’ici quelques jours ou semaines : Wait & See !
Sur ce, à vos update !

« If we don’t, remember me » : du vrai GIF de qualité

Ben — Mon, 08 Aug 2011 06:58:37 +0000

En farfouillant dans mes anciens marques pages, je suis tombé sur ce gentil blog qui propose des GIFs de très bonne qualité, en prenant des scènes de films cultes. Alors, juste pour qu’il soit bien répertorié et que je sois sûr que vous ne passiez pas à coté, je vous fait un petit billet dessus (et oui, je suis comme ça moi).

En générale, lorsque l’on parle de GIFs animés, on a tendance à penser smileys et petits poneys. Du contenu classé kikoo, du lolesque voir même du kikoulol…

Non aujourd’hui je ne vais pas faire un billet sur le top 5 des GIF animés de pokemons, ou de petits chatons. Je vais plutôt vous parler d’un site qui nous permet de nous rabibocher avec ce format d’images animées.

« If we don’t, remember me« , c’est le titre du tumblr qui nous dévoile toute une série de Gifs plus beaux et largement plus classes que ce que nous connaissons jusqu’à maintenant.

Si vous voulez faire vous même cette technique (qui s’appelle un cinémagraphe) et que vous cherchez de bons tutos, voici l’ami Nicolas Perrier qui vous explique le principe et vous donne quelques tutos sur son article ici.

Google s’attaque maintenant à Groupon

Ben — Fri, 05 Aug 2011 15:10:32 +0000

Après Facebook (Google+) et iTunes (Google Music), Google s’attaque maintenant à Groupon, ou alors j’ai du mal à suivre…

Une chose est sûr, c’est que Google a mis en place Google Offers qui permet de faire bénéficier à ses membres inscrits, des promotions et autres bas prix sur des produits ou offres de commerçants locaux. Ça ne vous rappel rien ?

J’avais déjà trouvé l’information il y a quelques temps, mais je n’y avais pas prêté plus d’attention que ça. Aujourd’hui, je suis retombé sur le lien que j’avais mis de coté et comme j’étais plus réveillé que la première fois, je me suis dit : « Oula, on dirait Groupon ».

Et bien oui, c’est vrai, ça y ressemble carrément, et pour sûre Google Offers et Groupon font la même chose, à savoir :
Chaque personne inscrite sur le site, se voit proposer des promotions spéciales (et uniquement valables sur le site) émises par des commerçants locaux.

On dirait que puisque Google n’a pu racheter Groupon, il a décider de faire le sien.

C’est tout frais !

Google Offers est pour le moment en bêta, donc pas mal de changements sont possibles avant une quelconque finale.
Pas beaucoup de villes sont disponibles pour le moment et seulement au US, il va falloir attendre pour nous, pauvres Français…
Pas beaucoup de produits non plus et c’est normale pour le moment, mais la partie business est déjà établie et accessible ici. En plus, ils ont fait une petite vidéo pour résumer l’affaire.
De ce que j’ai pu apprendre, Google a confirmé que la firme recrutait actuellement, et activement, des vendeurs pour constituer un catalogue de promotions. Ce qui veut dire qu’ils vont vraiment se lancer…

Google Offers :

Google Offers Business :

Encore un …

Un nouveau Groupon à la sauce Google, je ne dis pas mais là, je ne vois pas encore trop l’intérêt. Il est fort probable que Google mise sur un aspect encore plus social que Groupon, mais honnêtement, il faudra plus qu’un aspect social renforcé pour venir concurrencer Groupon. Peut être que cette deuxieme présence, va pouvoir casser les prix, mais les petits commerçants vont souffrirent…
Lorsque l’on voit le nombre de personnes qui achètent sur Groupon et qui, au final ne peuvent profiter de leurs achats puisque le produit ou service a été plus vendu que ce qu’il y a réellement en stock. Pas besoin d’un second prestataire à moins qu’il offre la garantit que ce que l’on achète, on l’aura.

Et vous ? Vous en pensez quoi ?