En tant que développeur web aujourd’hui, on ne peut ignorer les média mobiles : smartphones & tablettes font partie du quotidien.

Et comme de normal, il n’existe pas qu’un seul système, et il faut donc pouvoir débogguer ses productions sur un maximum de devices. Il existe bien sûr des émulateurs, mais c’est toujours mieux d’avoir une machine physique pour tester.

Depuis peu, il existe ce qu’on appelle des Open Device Labs, mais malheureusement, il n’y en pas près de chez moi.

Avec le temps, j’ai réussi à réunir deux mobiles sur iOS, une tablette sur iOS, un mobile sur Android 2.3, un autre mobile sur Android 4 et enfin une tablette sur Android 4 (et j’aimerais bien dans un futur plus ou moins proche ajouter un mobile sous Firefox OS, et éventuellement un mobile sous Windows Phone, mais ils sont encore relativement chers).
Et sur le bureau, avec les câbles et tout le reste, ça commence à devenir assez chaotique, sans compter qu’ils sont tous à plat, on voit rien, bref, c’est chiant.
J’ai donc cherché après un présentoir, pour avoir mes devices à portée de vue et branchés, mais les solutions existantes sont souvent chères ou pas pratiques.

Lors de mes recherches, je suis tombé sur le blog du responsable d’un Open Device Lab, qui présentait dans un article leur système de présentoir.
Ça avait l’air assez simple, alors je me suis dit que j’allais faire le mien.

Voici comment je m’y suis pris.

Plans

Tout d’abord, il me fallait déterminer les dimensions de mon présentoir.
Je ne voulais pas faire un présentoir aussi encombrant que le leur, je le voulais de taille à tenir sur mon bureau. Je me suis donc fixé sur un présentoir de 19cm de haut (le chiffre est un peu bizarre mais ça permet au présentoir de tenir sur mon bureau en passant sous une étagère qui y est aussi posée), 48cm de large et 20cm de profondeur. La face avant sera inclinée à 18° vers l’arrière, et il y aura 4 trous pour brancher 4 devices (quitte à en fabriquer un second plus tard).

J’ai ensuite dessiné les plans à échelle 1:1 dans Illustrator, afin de déterminer quelle quantité de bois il me faudrait. Ces plans sont disponibles en pdf ici.

Il me faut donc une plaque de bois de 48cm sur 79cm.

Matériel

J’ai donc besoin, pour mon présentoir :

• une plaque de bois de 48cm sur 79cm, de 4 à 5mm d’épaisseur
• des clous et des vis
• de la colle à bois
• du tissu matelassé, de la feutrine, ou de la mousse fine, pour recouvrir les zones en bois où vont reposer les devices, histoire de pas les abimer
• de l’autocollant double-face
• un hub usb alimenté, afin de laisser les device charger sur leur présentoir tout en ayant besoin que d’une seule prise vers la machine de test
• des outils :
  • marteau
  • visseuse ou tournevis
  • des mèches (ou cloches) à bois pour percer des trous de 20mm et 32mm
  • scie-sauteuse ou scie
  • lime

Montage

Je ne suis à la base pas un grand bricoleur (j’suis plutôt ce qu’on appelle par chez moi un “bricoleux“), donc j’aurais bien du mal à vous expliquer étape par étape ce qu’il faut faire avec des phrases de chef, mais bon… les photos sont relativement explicites.
Note: les photos n’ont pas été prises au même moment de la journée, ce qui explique les différences de luminosité.

Étape 1 : découpe

Je me suis fait un peu aider sur ce point : en effet, armé de mes plans, je suis allé dans un magasin de bricolage où l’on a réalisé la plupart des découpes pour moi (à part les angles des côtés et les trous pour passer les câbles, que j’ai fait de mon côté, respectivement à la scie sauteuse et des cloches).
Note: au magasin de bricolage, ils n’avaient que des panneaux de MDF. Pressé et emporté par mon enthousiasme, j’ai fait le choix du MDF que je regrette : trop épais, pas facile à découper, un peu fragile… à refaire, je prendrais du bon vrai bois.

Étape 2 : assemblage

L’assemblage est relativement simple : on colle les éléments à la colle à bois, et une fois sec, on rajoute des vis pour solidifier le tout.
Notez le trou à l’arrière pour laisser passer les câbles du hub usb

N’oubliez pas de pré-percer avant de mettre les vis, pour éviter les éclatements, surtout sur des planches aussi fines.

Ajustement du rebord

Alors que je prévoyais de mettre le rebord au même niveau que les trous d’entrée de câble, j’ai eu la lumineuse idée de tester, à plat, si mes devices et leurs câbles allaient se positionner convenablement.
Et j’ai bien fait d’être curieux, puisque finalement, après tests, le rebord était bien mieux en étant fixé 1,5cm au-dessus des trous.
Bref, testez de votre côté avant de fixer.

Étape 3 : finitions

Pour terminer, j’ai fixé avec du double face de la feutrine sur la face et le rebord, avec des petits clous sur les rebords (et j’ai fait ça comme un barbare), et c’était terminé.
J’ai aussi rajouté des petits patins antidérapants sous le présentoir, mais ça, c’est vous qui voyez.

Les câbles partent des devices pour se brancher dans un petit hub usb alimenté 4 prises, de sorte qu’il ne sorte que deux câbles du présentoir : le câble d’alimentation, ainsi que le câble usb pour brancher tous les devices d’un coup à un ordinateur.

Coût des opérations

Au final, ce présentoir m’aura coûté :

• ±10€ de bois, découpe comprise
• ±4€ de feutrine
• ±5€ de visserie et clous (mais il en reste)
• ±8€ de colle à bois et autocollant double-face (mais il en reste)
• ±10€ de hub usb
• ±1€ de patins antidérapants

Soit un peu moins de 40€, sachant que j’ai dû tout acheter puisque je n’avais aucun matériel, à part mes outils et la scie sauteuse gracieusement prêtée par mon brave papa.

Et maintenant ?

Ben maintenant, on se remet au boulot, et on profite de ce beau présentoir pour développer des chouettes appli et sites web mobiles.

Un dernier petit truc pour la route, mais j’en ferai sûrement un article dédié un jour, l’outil Edge Inspect de la suite Adobe CC est vraiment pratique pour le développement et le débug de sites web mobiles, et donne tout son sens à mon splendide présentoir. :)