Blog

Bienvenue sur le blog de Breek ! Retrouvez ici l'actualité de Breek, quelques échantillons de notre veille techno ou tout simplement la vie de Breek.

Gridpack : créez un template responsive en 2 clics

jeu, 01/03/2012 - 10:33 | par sbordage

Petit outil pratique pour prototyper vos sites en responsive.

Vous pouvez choisir :

• Nombre de colonnes
• Padding
• Largeur des goutières
• Break points (autant que vous voulez)

Vous obtenez 6 fichiers (ou plus selon le nombre de break points) :

• gridpack.less
• gridpack.scss
• gridpack.css
• gridpack.js
• autant de png que de break points

A essayer : gridpak.com

4 design d'application iPad à suivre et 3 UI kits pour créer la votre

dim, 12/02/2012 - 08:00 | par sbordage

AmpliTube

Bien connu des musiciens, cette app applique des effets sur tous types d'instruments (guitare, basse, voix, ect.).
Son design reprend volontairement une représentation très réaliste des pédales d'effet utilisées par les guitaristes et du célèbre ampli Marshall.
Un autre écran reproduit le mythique Tascam 8 pistes.
L'app iPad : ikmultimedia

Epicurious Recipes & Shopping List

Application incontournable des gourmands des temps modernes. Un très gros succès.
Le style reprend des codes classiques d'interface web et y ajoute quelques éléments comme des onglets.
L'app universelle : iTunes

iStudiez Pro

Même principe que pour AmpliTube : on reproduit la réalité avec une interface hyper réaliste. On sent la craie du tableau sous ses doigts, le cahier à spirales est plus vrai que nature...
L'app universelle : iTunes

Consume

Cette app de suivi de tout ce qu'on peut imaginer (bande passante, forfait téléphonique, colis UPS, etc.) mise sur une interface typée "iOS".
L'app universelle : iTunes

iPad Application Mockup (PSD) - Gratuit

Orman Clark de l'excellent Premium Pixels relaie le travail de Sebastien Gabriel, un talentueux et génréux UI designer français. Ce dernier offre sur son blog toute une série de freebies dont un super UI Kit iPAD lui même basé sur un autre UI Kit iPad gratuit et très complet iPad GUI PSD

BlackUI v1 (PSD) - Gratuit

Alex Patrascu offre sur dribbble.com un UI Kit pouvant être utilisé pour vos apps iOS et Android. Merci Alex !

Heads Up Display UI Kit (PSD) - Payant

En souscrivant au service medialoot.com pour 9$ / mois, vous pourrez télécharger 60 ressources par an, y compris l'excellent Heads Up Display UI Kit

Ergonomie : pourquoi un scroll vaut dix clics

sam, 04/02/2012 - 08:24 | par sbordage

Un billet intéressant sur uxmovement.com qui reste, hélas, toujours d'actualité : doit-on limiter la hauteur du site ou scroller. Ne rigolez pas. J'ai vu une maquette la semaine dernière qui ne faisait pas plus de 640 pixels de haut (et ce n'était pas du responsive-design-mobile-first !). A croire que tout les 5 ans, on recommance comme en 1999...

Bref, l'auteur dresse un rapide comparatif entre clic et scroll et en profite pour lister les avantages du scroll :

• Large développement des gestures grâce aux touchpads évolués (un éfleurement délicat suffit pour revenir 2 pages en arrière ou descendre en bas de page).
• Rapidité supérieur des gestures par rapport au clics. Ce qui n'est pas négligeable quand c'est répété des milliers de fois dans la même journée.
• Logic de lecture : avec le scroll on lit dans l'ordre de rédaction ce qui n'est pas forcément le cas avec des liens
• Scroller garde le lecteur dans une dynamique de lecture alors que le clic est disruptif
• Scroller évite d'attendre le chargement d'une nouvelle page.

Il arrive à la conclusion que le clic est la meilleure solution pour les marketers (suivi statistique plus fin, génération de trafic...) alors que le scroll est la meilleure solution pour l'internaute. Alors dans quel camps êtes vous ?

Source : http://uxmovement.com/navigation/why-scrolling-is-the-new-click/

Wordpress : 5 players à ne pas manquer

lun, 30/01/2012 - 11:11 | par sbordage

Zoom Video Gallery

Un vrai player permettant de mixer fichiers locaux et vidéos Youtube / Viméo.

• Simple à installer
• 3 skins différentes
• Cross-browser (IE6, IE7, IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome)
• Alternative HTML5 : fonctionne avec iPad, iPhone...
• Vidéos, images, sons hébergées sur Youtube, Viméo, Amazon S3 ou en local
• Panneau d'administration complet
• Appelable via un shorcode de type [] et une fonction PHP

Prix : 15 à 75 $
Démo : http://bit.ly/zUH1IC
Téléchargement : http://bit.ly/wR31Aq

uBillboard

Un plugin fournissant un puissant slider supportant la vidéo.

• Plusieurs sliders, y compris sur la même page
• Fonctionne avec YouTube et Vimeo
• Redimmensionnement auto des images
• 6 skins différentes
• Panneau d'administration complet
• Plus de 20 transitions (configurable slide par slide), lecture auto et aléatoire
• Editeur de contenu supportant le HTML
• Possibilité d'utiliser les posts en tant que slide !
• Live Preview
• Import / Export
• Appelable via un shorcode de type [] et une fonction PHP

Prix : 20 $
Démo : http://bit.ly/z6W0ju
Téléchargement : http://bit.ly/zNQiQV

Vimeo Video Player

Une gallerie vidéo puissante adaptée aux sites avec de nmbreuses vidéos mais limité à Vimeo.

• Plusieurs sliders, y compris sur la même page
• Playlist, recherche...
• 3 skins différentes
• Support de Google Analytics
• Editeur de contenu supportant le HTML
• Cross-browser (IE6, IE7, IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome)
• Appelable via un shorcode de type [] et une fonction PHP

Prix : 16 $
Démo : http://bit.ly/wR64sE
Téléchargement : http://bit.ly/wG3xCq

JW Player for WordPress

Développé par LongTail Video, le créateur de JW Player. Gratuit.

• Plusieurs sliders, y compris sur la même page
• Skins personnalisables
• Alternative HTML5 : fonctionne avec iPad, iPhone...
• Cross-browser
• Appelable via un shorcode de type [] et une fonction PHP
• Totalement intégré à Wordpress (librairie média, etc.)

et tout ce que sais faire JWP !

Prix : Gratuit
Téléchargement : http://bit.ly/ygg9al

MediaElement.js - HTML5 Video & Audio Player

Lecteur HTML5 avec Fallback Flash ou Silverlight. Tout en shortcode. Ultra efficace pour les geek / webmasters.

• 100% HTML5 avec fallback flash et Silverlight :-)
• Cross-browser
• Puissant système de shorcode de type [], appelable avec une fonction PHP
• Skin 100% personnalisables
• Supporte les formats MP4, OGG, WebM, WMV, MP3, WAV et WMA
• Supporte WebSRT (pour les sous-titres notamment)
• Totalement intégré à Wordpress (librairie média, etc.)

Prix : Gratuit
Téléchargement : http://bit.ly/AoyteH & http://bit.ly/xgYTpA

Management : gérer ses réunions à la Larry Page

ven, 20/01/2012 - 10:20 | par sbordage

Je viens de lire une brève que beaucoup de managers de grandes entreprises devraient méditer :-)

Lors de son retour à la tête de Google, Larry Page a décidé d'optimiser le déroulement des réunions de ses 30000 collaborateurs.

L'occasion surout de rappeler des principes basics :

• Une réunion doit servir à décider. Cela implique la présence d'un décideur et d'une décision à prendre. Sans décision ou décideur, pas de réunion.
• Une réunion sert à discuter de vive voix. Donc pas plus de 10 participants. Sinon c'est la cohue :-)
• Tous les participants de la réunion doivent apporter des idées, sinon ils n'ont rien a y faire.
• Ne jamais attendre la date de la réunion pour décider. Si une décision doit être prise, provoquer une réunion. Tout de suite.

Beaucoup d'évidences et de bon sens en somme !

Source : http://www.businessinsider.com

drushmake.me : générer ses makefile drupal 7 ou 6 en 1 clic

mer, 18/01/2012 - 11:14 | par sbordage

Chez Breek, nous avons découvert Drush au Drupalcon de Wahington DC en 2009.
Depuis, et tous ceux qui connaissent l'outil seront d'accord, nous ne pouvons pas nous en passer !

Seulement voilà. De temps en temps, on se trouve dans une situation où nous n'avons pas nos makefile sous la main.

C'est là que drushmake.me vous sauve la vie.
L'outil génère des makefile pour drupal 6 et 7 avec la plupart des modules les plus utilisés (cck, views, panels, übercart...).

Le site : http://drushmake.me/
Notre tuto : Drush et Drush make en 5 minutes

Encore une licence WireframeSketcher à gagner sur http://uxmovement.com

mer, 11/01/2012 - 18:45 | par sbordage

Si vous voulez tester gratuitement cette solution utilisée par Disney, Siemens, eBay, Subaru... dépéchez vous !

Ca se passe ici http://uxmovement.com/giveaways/win-5-free-licenses-for-wireframesketche...

Premailer améliore la compatibilité de votre emailing en 1 clic

mer, 21/12/2011 - 09:12 | par sbordage

Pour être certains que sa newsletter ou son emailing s'affiche correctement dans tous les navigateurs, il est important de respecter certaines règles et notamment d'utiliser des styles inline et des chemins CSS absolus.
Du coup, on obtient vite une newsletter difficilement modifiable et maintenable.

Premailer règle le problème en :

• transformant les classes en styles inline
• supprimant les IDs inutilisés
• supprimant les commentaires

Le résultat est fourni avec en plus une version txt bien pensée et une checklist de compatibilité.

Simple et efficace.

Icon Finder, trouver ses icons en un tour de main

mer, 14/12/2011 - 19:10 | par sbordage

Pratique, rapide, de bonne qualité. Icon Finder est le genre de service à enterrer dans ses favoris "au cas où".

Le filtre sur les licences, la possibilité de filtrer (via la fiche de l'icon) sur un designer... font gagner beaucoup de temps.

iPlotz : wireframes faciles et collaboratives

mar, 06/12/2011 - 15:48 | par sbordage

iPlotz est un outil de création de wireframe / cinématique en ligne -un simple navigateur suffit- qui peut aussi être installé en local sur n'importe quel ordinateur (Linux, Windows, Mac).

Ca tombe bien. Chez nous, certains ont des Macs, d'autres des PCs, d'autres les deux... Difficile du coup de trouver un bon outil cross-plateforme qui puisse en plus exporter son travail dans un format lisible par nos clients (genre PDF).

iPlotz propose pas moins de 3 formats d'export :

• Image
• PDF
• HTML

et 2 solutions de partage :

• par URL
• avec un embed

Si ses librairies d'objets sont encore pauvres pour le prototyping iPad, iPhone et Android (enfin il y a déjà l'essentiel), il y a tout le nécessaire pour prototyper des sites et applications web.

L'outil fait même mieux que beaucoup de ses concurrents type App Sketcher.

Franchement, sa simplicité d'utilisation, sa richesse fonctionnelle et ses possibilités de collaboration (exports, annotations, travail en local puis en ligne...) sont bluffant.

Un test plus approfondi s'impose !