All Posts By

Imazine

Music

I want a break Thru'

Tu as vu comment il utilise sa pédale Wah Wah ?
I want a break Thru’ par The Hykkers

[audio:https://www.imazine.fr/music/i-want-a-break-thru.mp3]

the hykkers

Blog, Design, E-commerce, Interfaces, Multicanal, Services, User experience, Video

Archiduchesse, king of the chaussette, on air

Archiduchesse - chaussettes colorées made in France

Patrice vient de lancer Archiduchesse, yay ! Je m’y suis collé trop tard, moi qui voulait du orange et du vert pomme.. Pfff, 5 heures après le lancement, déjà dévalisé sur ces 2 tons, success. Pas grave, plein de couleurs de chaussettes façon Panton, 30 au total pour le lancement dans un coton égyptien quali teinté-tissé en France. Bon démarrage à toi Patrice ! Et félicitations pour le site, j’aime beaucoup la home, claire, explicite et immédiate. Efficace, simple et funky, c’est bon.

Archiduchesse - chaussettes colorées made in France
Archiduchesse - chaussettes colorées made in France
Archiduchesse - chaussettes colorées made in France
Archiduchesse - chaussettes colorées made in France

Design, Video

Wood des Dead Pirates par McBess

McBess frappe encore une fois et c’est la classe intégrale pour cette video réalisée pour son groupe les dead pirates, video du titre Wood, réalisée en collaboration avec Simon. La musique passe pas mal mais surtout j’adore son univers graphique, c’est noir, c’est peuplé de vampires des bois à frange et culotte, de persos aux visages allongés et regard vide, aux tatouages typographiés à outrance. Par contre, au niveau scenar, c’est un peu la misère, mais on s’en fout, le graphisme porte tout.
mcbess-dead-pirates

Via Nice Fucking Graphics

Blog

Installer son blog WordPress en local sous Mac avec Mamp

Pas très e-commerce comme post mais j’ai fait la manip il n’y a pas longtemps et j’avais envie de la partager avec vous. Je voulais travailler un thème WordPress localement hors connexion, le tout sous Mac. J’ai donc installé un petit serveur local en quelques secondes grâce à Mamp. Ci-dessous la façon de procéder pour arriver à ses fins.

Installation de Mamp
Première étape, l’install de Mamp que vous pouvez télécharger ici.
L’installation est classique Mac, l’activation se fait par le lancement du fichier Mamp.app dans le répertoire Mamp dans applications. Cette action démarre les serveurs MySql et Apache. Sélectionnez PHP4 dans les préférences (pour assurer la compatibilité des plugins notamment), voilààà.

Mamp - serveur local mac - wordpress

Transférez vos fichiers WordPress en local
Ensuite, transférez l’intégralité de vos fichiers Wordpess par Ftp sur votre machine dans le répertoire htdocs (dans le répertoire Mamp) en créant un répertoire pour le blog.

Créez la base de données
Pour se faire allez à l’adresse suivante : http://localhost:8888/MAMP/?language=French
Cliquez ensuite, sur PHPMyadmin, saisissez un nom pour votre base dans le champ prévu à cet effet, cliquez sur créer. Ca, c’est fait.

Préparation de l’install wordpress
Supprimez le fichier wp-config à la racine de votre blog (en local hein).
Allez ensuite dans votre navigateur et tapez l’url suivante : http://localhost:8888/repertoiredublog/.

L’installation
WordPress prépare alors automatiquement l’install et vous propose de créer un fichier de config, cliquez pour continuer.
Vient ensuite la création de la base de données :
– nom de la base : la base que vous avez créé
– Identifiant : root
– Mot de passe : root
– Hôte de la base de données : localhost
– Préfixe table : wp_

Viennent ensuite le nommage du blog et la saisie de votre adresse e-mail et c’est fini. WordPress vous donne votre login et votre mot de passe. Notez les bien, pas possible de les récupérer par mail ensuite.

Mamp - serveur local mac - wordpress

Transfert de votre contenu online vers votre blog local.
Très simple : allez dans votre admin wordpress en ligne, dans outils (tools), choisissez exporter et exportez le XML
Dans votre admin locale, au même endroit, choisissez importer et importez.

Mamp - serveur local mac - wordpress

Reste à activer les plugins que vous utilisez dans votre admin locale. Ils sont tous désactivés par défaut.
Votre blog est prêt et fonctionne localement à l’adresse : http://localhost:8888/repertoiredublog/
Si cependant vous avez des liens en dur dans vos posts, il faut également les changer pour que les images ou fichiers soient toujours accessibles en mode offline.

Changer les URLs dans la base de données locale
Ouvrez votre PhpMyadmin local et exécutez les requêtes suivantes :

Remplacer les Urls dans la table option :
UPDATE wp_options SET option_value = replace(option_value, ‘http://www.votreblogenligne.com’, ‘http://localhost:8888/repertoiredublog/’) WHERE option_name = ‘home’ OR option_name = ‘siteurl’;

Remplacer l’Url relative des posts :
UPDATE wp_posts SET guid = replace(guid, ‘http://www.votreblogenligne.com’,’http://localhost:8888/repertoiredublog/’);

Remplacer les Urls dans les posts :
UPDATE wp_posts SET post_content = replace(post_content, ‘http://www.votreblogenligne.com’, ‘http://localhost:8888/repertoiredublog/’);

C’est quand même 1000 fois plus simple de trifouiller du css en local.
Je vais donc pouvoir changer le thème d’Imazine qui me sort par les yeux.

Buzz, E-commerce, Ergonomie, Interfaces, User experience

Uniqklo intro

Uniqlo interface

introduction : une très belle interface événementielle pour Uniqlo, site Tokyoïte qui n’en est pas à son coup d’essai (cf post du capitaine sur le sujet). Les valeurs clefs de la marque défilent en scrolling vertical, les produits apparaissent en tournoyant, un par un dans un enchainement rythmé et en musique. Belle démonstration. Le tout est interactif, on peu cliquer chaque produit et aller l’acheter sur le shop. Ca c’est du web.

Uniqlo interface

Ci-dessous une capture du site Uniqlo, le vrai. Belle dispo produit en enchainement vertical, à la japonaise. Donne le sentiment d’une offre très riche sur ses 5 colonnes à la une, on va au produit directement, intéressant. La segmentation, elle, se révèle une fois dans le site. J’aime l’idée de se lâcher en page d’accueil et de rester minimaliste au niveau de la navigation, seulement l’essentiel.

Uniqlo interface

Design, E-commerce, User experience

36 boutons d'action en PSD for you for free

Le Call to action, des boutons clefs sur les sites marchands (ou pas) qui peuvent rapporter des ronds s’ils incitent convenablement au clic . Je me suis amusé à en faire quelques uns que je mets à dispo dans leur version PSD : une partie inspirée des boutons de sites reconnus pour leur ergonomie et une autre partie plus personnelle. Si cela vous intéresse, le PSD des ces boutons d’action (Ajouter au panier, inscription, etc…)  est dispo librement en cliquant sur l’illustration ci-dessous ou ici.

boutons d'action PSD - téléchager gratuitement

Les boutons sont dispos en version PSD, en vectoriel, avec des typos courantes pour la plupart. Si cela vous intéresse, vous pouvez donc les personnaliser en dimension, texte et couleurs.

Design, Iphone

Huge type

huge type
huge type
Huge type est un concept expérimental assez cool bien qu’il ne serve absolument à rien. Un pool sous flickr est à votre dispo pour y uploader des photos de Typos volées au détour d’un clic. Vous vous connectez ensuite avec votre iphone sur hugetype.com, vous saisissez une lettre et visualisez les photos du pool correspondant à cette lettre. Pour ceux qui aiment les typos sous toutes leurs formes. Sympa.

Via MatiasJajaja

Blog, User experience

Tumblr – Smart blogging

tumblr
Ca fait un moment que j’ai envie de faire un petit post sur Tumblr, une plate-forme de micro-blogging dont je suis vraiment fan. Abouti depuis peu à sa version 5, Tumblr a atteint une maturité au top, très intuitif, rapide et orienté sur le partage, la découverte et l’interaction. J’avais testé rapidement ce service à sa sortie mais je n’avais pas perçu la puissance de l’outil ni l’attrait de la communauté qui l’utilise. J’ai fouillé depuis et adhéré complet.

A mi-chemin entre WordPress et Twitter, Tumblr est un outil de “speed blogging” qui permet de poster rapidement des photos, citations, textes,…, depuis sa machine ou depuis sont mobile et ce de nombreuses façons. Ce service est promis à un très bel avenir et je le trouve plus intéressant, plus complet qu’un Twitter.  Bloguer sous WordPress, ça prend du temps et du temps, on n’en a pas beaucoup, nous allons vers des systèmes de blogging où l’on va s’affranchir au max des interfaces et autres admin, bloguer depuis le contenu directement, mieux interagir avec lui et gagner du temps.

tumblr

Qu’est-ce que ça permet de faire ?

  • Depuis son dashboard de Tumblr, on peut poster rapidement texte, citation, image, video, chat, link et MP3, classique.
  • Un bookmarlet permet de poster depuis tout site (lors d’un surf), une image, extraire une citation, une video, etc.  Fonctionnalité qu’a intégré WordPress depuis peu au regard de la pertinence de cette fonction.
  • Possible d’intégrer automatiquement vos services préférés dont les flux deviendront des posts automatiquement (Flickr,un flx RSS, Flickr, Twitter…).  J’en fait l’inventaire plus bas.
  • Votre Tumblr a l’allure d’un blog minimaliste dont on peut customiser le CSS de façon simple ou tout simplement choisir le thème qui va bien.
  • En résumé, l’outil permet de bloguer vite et bien.
  • On a un sous domaine de tumblr par défaut mais on peut aussi y affecter un nom de domaine de son choix.

tumblr

Un des attraits essentiels de Tumblr est son dashboard et la possibilité d’y suivre les autres tumblr et d’interagir avec vos découvertes.

  • Le dashboard liste vos posts mais aussi ceux des tumblr que vous suivez
  • Chaque tumblr a une icone follow en haut à droite, cliquez dessus et vous le suivez. très ergo, un RSS sans douleur pour les nuls.
  • Vous pouvez indiquer que vous appréciez un post et le rebloguer d’un clic
  • Vous suivez également l‘interaction que vos followers ont avec vos posts (notes ou rebloging)
  • Votre dashboard est donc votre admin et votre lecteur de flux

tumblr

Vous avez la possibilité de customiser votre blog et aussi de le connecter avec vos services préférés :

  • Paramétrer vos infos, inclure des morceaux de codes pour ajouter des fonctions
  • Créer votre propre thème ou en choisir un parmi les existants proposés par la communauté
  • Customiser le CSS de ce thème, super simple et également placer les fonctionnalités que vous souhaitez, le code de Tumblr se positionne en appels à des fonctions.
  • Paramétrer l’apparence de façon simple avec une interface pour changer couleurs, typos, etc…
  • Ajouter des feeds de services tiers pour relayer automatiquement votre activité in situ : Delicious, Twitter, Flickr, WordPress, Vox, Vimeo, etc… Tout cela s’importe automatiquement en image, video ou liens. Mais vous pouvez également importer les flux RSS qui vous intéressent. Avec un Yahoo Pipes en amont, on peut faire ce que l’on veut, au top.

tumblr

Ce qui fait la force de tumblr, c’est l’utilisation que l’on peut en faire en dehors même de son admin Tumblr.
C’est le cas d’applis iphone, en voici 3 que j’utilise :

  • Iview : c’est une appli gratuite qui permet de surfer en image des flux de photos. Par défaut, il y a ffffound ou visualiseus, mais vous pouvez ajouter tout flux qui vous intéresse. On surfe d’image en image et on peut poster d’un geste une image.
  • Tumblrette : c’est un dashboard Tumblr complet et bien pensé déporté sur votre iphone.
  • Tumble Pro : un peu moins bien que tumblrette avec les mêmes fonctions mais il en existe une version gratuite.

tumblr

Les 3rd parties, il y en a beaucoup, c’est ce qui rend l’outil intéressant, en voici quelques une :

  • un widget pour poster depuis son Dashboard Mac, classique
  • Skitch, excellent outil de capture et de mise en ligne de ces captures. En un clic, j’ai l’url de l’image que je peux poster sous Tumblr. (édité) attention, ne fonctionne que sous Mac, merci Samy pour la précision(/édité)
  • Zootool, un notebook online qui permet de grabber en un clic images, textes et visuels. Même principe dans le fond que Tumblr mais assez complémentaire
  • Feedly, un agrégateur boosté, propose une interaction contextuelle avec les flux que vous suivez pour le pousser direct dans votre tumblr. Sioux et utile.
  • A découvrir, une liste de ces outils tiers par ici
  • A noter également les API mises à dispo pour ceux qui savent s’en servir.

Je trouve du reste la communauté des Tumblr très intéressante à suivre, moi qui suis fan d’interface, de design, de photos, il y a là du beau monde et de l’intérêt coloré indéniablement. Ce type de service est promis à un bel avenir et, je pense, viendra manger de belles parts de marché à des outils comme WordPress. WordPress ne manquera pas de s’en inspirer d’ailleurs, c’est certain. Plus innovant et plus interactif, Tumblr est un outil qui incite plus à la découverte et au partage. Quand on considère le succès actuel de twitter, il est certain que le micro blogging a un avenir énorme et va prendre une grande ampleur.

tumblr

Minimazine, c’est donc mon tumblr, mon ScrapMacBooking quotidien. Je n’arrête pas Imazine, loin de là, mais la version Mini aura un rythme de mise à jour plus intensif.

Ergonomie, Interfaces

RIA patterns

rich internet applications patterns
Les interfaces utilisateurs évoluent sans cesse, le web prend le look des applications dans le cas des RIA et les applications prennent un orientation web, les deux se retrouvant à mi chemin dans ce phénomène de convergence.

Designing web interfaces nous propose un post très intéressant, une synthèse illustrée des typologies de pages, de fonctions : recherche, browse, dashboard, … Le post est illustré d’une 100aine d’exemples d’écrans pour transposer ces templates sur des sites existants. Les grandes lignes des principes de zoning en synthèse pour se remettre les idées au clair, top. C’est par la. Ils nous proposent également le post dans une version PDF.
rich internet applications patterns

Via BenjaminF

Iphone

Quadcamera, jouez là creatif sous Iphone

Quad Camera iphone
Voilà un joli jouet que nous propose Takayuki Fukatsu de Artmobile : Quad Camera est une Appli Iphone qui permet de jouer avec l’image et de composer des visuels en groupant des photos prises en rafale. Composez en 4, 8, changez les couleurs, en ligne, en colonne, etc… Nombreux paramètres dispos. Très intéressant cette appli qui redonne du sens à cette fonction photo de l’iphone qui n’est vraiment pas sexy en standard au vu de la qualité du capteur. Le lien de l’appli dans l’apple store est par la, 1,59€. Adopté :)
Quad Camera iphone

Via The DailyLog

Blog, Rss, Services

Pourquoi je suis passé sous Feedly

feedly
J’ai découvert Feedly grâce à certains d’entre vous qui l’utilisent, repéré dans les affluents de imazine. Ca fait quelques semaines depuis que j’ai adopté l’outil et qu’il a remplacé Netvibes que j’utilisais maintenant depuis son lancement. Je trouve que Feedly apporte une réelle valeur ajoutée par rapport à tous les agrégateurs que j’ai pu tester ou encore “innovations” de Netvibes depuis son lancement auxquelles je n’ai pas forcément trouvé un intérêt.

Pour résumer en quelques mots, Feedly est une extension Firefox qui booste l’expérience de l’agrégateur en ligne qu’il propose par ailleurs. L’extension permet une gestion puissante des flux et une grande simplicité de lecture + gestion des abonnements. C’est en outre un système ouvert qui facilite simplement la découverte de nouveau blog et de ne pas évoluer dans un cercle fermé.

feedly

Ce que j’apprécie chez Feedly

  • Importation des OPML de Netvibes et de IGoogle. Possible donc d’avoir un Feedly opérationnel en 2 minutes.
  • Plusieurs types de mise en page possibles (Magazine, Lignes, billets ouverts, etc..). Pour ma part, je reste en mode magazine qui permet d’avoir un coup d’oeil rapide à l’ensemble des posts.
  • Présence des commentaires des blogs dans le flux
  • Organisation de l’ordre des flux en fonction des sources les plus consultées
  • Présence de visuels des posts (vignettes) qui facilitent la nav
  • Navigation, ouverture, fermeture des billets, actions très ergonomiques, très bien vu
  • Fonction découverte : Feedly se veut social et propose de voter et de promouvoir un article auprès de ses contacts. Intéressant puisque l’on peut aussi visualiser ceux qui ont promu un article (en dehors de ses propres contacts), aller sur leur profil et décourir ainsi de nouvelles sources
  • Fonctions à valeur ajoutée : Annoter un post, lire plus tard, partager sous Twitter ou sur son Tumblr, prévisualiser l’article au sein de Feedly dans un div, copier le lien dans le presse papier, etc… C’est focalisé sur l’essentiel sans perturber la navigation.
  • Rapide
  • L’équipe travaille sur un SDK qui permettra d’intégrer sa propre publicité dans l’agrégateur du visiteur, bien vu.
  • Des API permettent de personnaliser l’expérience de l’utilisateur directement dans son feedly.
  • Possibilité d’appliquer la couche sémantique d’information d’open Calais et ainsi étendre l’intérêt d’un article

Les moins de Feedly

  • Ne permet pas une vision d’ensemble des posts et nouveaux posts comme Netvibes d’un coup d’oeil. Il faut s’habituer à un autre mode de nav, mais il faut se remettre en question ;)
  • La fonction Tumblr est mal foutue, on ne peut que poser un lien.
  • Pas de possibilité de changer le nom des onglets (la loose)
  • Ca déconne encore un peu de temps en temps au niveau chargement des flux.

feedly
Vraiment différenciant, amène un vrai plus au niveau utilisateur et autre avantage, les nouvelles fonctionnalités viennent compléter l’expérience régulièrement. Je vois notamment la possibilité pour le blogueur de mieux maitriser son flux, l’affichage de son contenu et ce qu’il veut y faire figurer en complément.

art, Design

L'amour et la violence

Mcbess
Un genre de purgatoire Manga pour tatoué russe, sex, drug & rock’n roll, Yay ! Beaucoup de cultures mélangées pour un dessin dont je suis complètement fan, je me demande si je ne vais pas commander une épreuve.
J’aime beaucoup cette vision trash du jugement dernier.
Par MacBess aka Matthieu Bessudo, Londonien, 23 ans et plein de talent. Par ici
Via Minimazine

Mac, Softs

Things – un task manager au top pour Mac

things Mac todolist
Voilà un gestionnaire de tâche pas mal du tout. Things va a l’essentiel, une interface simple, un système de tags et quelques répertoires pour un classement intuitif. J’aime beaucoup l’interface simple et élégante et les tests que j’ai pu faire m’ont donné envie d’adopter l’engin.
things Mac todolist
L’autre attrait et pas des moindres, c’est l’appli iphone qui fait le pendant de la version desktop et peut se synchroniser en Wifi. L’appli iphone de things est à 7,99€, la desktop à 49,95 USD.
things Mac todolist

Blog, Imazine

New Look

new look imazine
4 années d’existence pour imazine, l’occasion de lui donner un nouveau look & feel. Dispo minimaliste pour aller à l’essentiel, plus valorisant pour le contenu et les créas éventuelles. Pas changé grand chose, juste les visuels et couleurs mais ça change tout.
wordpress 2.7
Egalement passé WordPress sous sa version 2.7, plutôt sympa le changement d’admin, efficace et beaucoup plus sexy.