Les articles de la catégorie « Tutoriel »

J’ai deux enfants de deux et quatre ans. Et il y a quelques temps, mon grand avait reçu en cadeau une Lunii, la « fabrique à histoires ». C’est un boîtier non connecté, avec un écran minimaliste et une interface facile à prendre en main pour des enfants (un bouton à tourner sur le côté pour allumer et régler le volume, un gros bouton à tourner à gauche pour faire ses choix et un gros bouton à appuyer à droite pour valider).

J’étais un peu rétiscent avant d’en avoir une parce que j’avais l’impression que le côté « fabrique » d’histoires n’était qu’un bête remplacement de nom automatisé. Mais ce sont en fait de vraies histoires à embranchement à la manière des histoires dont vous êtes le héro. Le hic, c’est que pour avoir ces histoires, il faut passer par le Luniistore (une application/boutique à installer sur son ordinateur) et on est limité au catalogue proposé.

C’est d’autant plus dommage que le monde regorge de podcasts pour enfants gratuits. Et aussi que les enfants ont une imagination débordante et que ce serait bien rigolo de les enregistrer pour qu’ensuite ils puissent s’écouter sur la Lunii.

Il y a quelques mois, j’ai donc demandé sur Twitter si quelqu’un savait comment « hacker » une Lunii pour y mettre ses propres histoires. (Mes maigres recherches n’avaient rien donné.) Et c’est ainsi qu’on m’a dirigé vers STUdio (pour « Story Teller Unleashed »), une application Java disponible sur GitHub créée par Marian Muller. STUdio permet de créer ses propres packs d’histoires et de les charger sur sa Lunii.

Lire la suite

Dans iOS6, Safari intègre une nouvelle fonctionnalité assez discrète : les smart banners. Une smart banner (ou « bannière intelligente », en opposition à toutes ces bannières stupides), c’est une bannière qui vient s’ajouter en haut de votre site dans Safari pour mettre en avant votre application iOS.

Pour ce faire, il vous suffit d’ajouter la balise meta suivante avec l’identifiant de votre application, n’importe où dans votre code HTML. Pour obtenir l’identifiant de votre application, vous pouvez utiliser l’iTunes Link Maker d’Apple.
<meta name="apple-itunes-app" content="app-id=562772514" />

La bannière affiche alors l’icône, le nom, le développeur, la note et le prix de l’application, ainsi qu’un lien pour y accéder depuis l’App Store et une croix pour faire disparaître définitivement la bannière. Voici le rendu final sur une page web (avec ici l’excellentissime Devil’s Attorney).

Si vous faites parti du programme d’affiliation d’Apple, vous pouvez également ajouter votre identifiant d’affilié comme suit :

<meta name="apple-itunes-app" content="app-id=562772514, affiliate-data=partnerId=42&siteID=darkmaul" />

Sur son blog, David Smith détaille également l’existence d’un paramètre supplémentaire permettant de passer une URL à votre application dès son premier lancement, pour afficher par exemple un contenu spécifique.

Je ne suis en général pas friand de ce genre de gadget purement marketing, mais c’est clairement beaucoup moins intrusif que des alertes JavaScript ou des lightbox maison. Et ça vous évite un peu de tomber dans les pratiques mobiles du Mal.

L’année dernière, j’ai découvert une ligne de commande Unix bien pratique : ln -s. Cette commande permet de créer un lien symbolique vers un fichier ou un dossier. Un lien symbolique, c’est une référence à un fichier ou dossier qui correspond fonctionnellement au fichier ou dossier original. Grossièrement, ça permet de retrouver un même dossier à plusieurs endroits sur son ordinateur sans avoir à le dupliquer.

Ça peut paraître tordu de vouloir retrouver un même dossier à plusieurs endroits, mais ça correspond pile poile à mon organisation. Je travaille souvent sur des petits projets d’intégration (des newsletters, des pages d’opérations commerciales, etc.) qui ne nécessitent pas de contrôleur de sources. En général, je vais me retrouver avec l’organisation suivante :

• Un dossier « ~/Boulot/Client/Nom_du_projet/ » avec à l’intérieur un dossier « Elements » (avec les fichiers envoyés par le client), un dossier « PSD » (avec les maquettes) et un dossier « HTML » (avec mon intégration).
• Un dossier sur mon serveur local dans « /Applications/MAMP/htdocs/Nom_du_projet », pour pouvoir tester la page dans de bonnes conditions.
• Eventuellement une sauvegarde dans mon dossier « ~/Dropbox », par précaution, et au cas où j’aurais besoin d’accéder à mes fichiers sur une machine différente chez moi.

Grâce à la commande ln -s, je peux retrouver mes fichiers dans ces 3 dossiers sans avoir à les dupliquer. Ainsi, il me suffit de taper dans le Terminal les deux commandes suivantes :

ln -s ~/Boulot/Client/Nom_du_projet/ /Applications/MAMP/htdocs/Nom_du_projet
ln -s ~/Boulot/Client/Nom_du_projet/ ~/Dropbox/Nom_du_projet

Et le tour est joué ! A noter que sous Windows, la commande mklink permet d’obtenir un résultat similaire.

This week, I encountered a nice brain teaser in front end development. After 2 hours of brainstorming, I finally found a solution that pleased me. I posted the problem on Twitter, then on my blog. To my surprise, I had a lot of answers, and some of them were actually pretty ingenious. So I decided to translate it in english so you english folks can enjoy it too.

So here it is :

It’s a pretty common visual effect, especially in print magazines. However, I found out that it was not that intuitive to reproduce this effect simply in CSS.

Here are the rules :

1. The text must not be divided by any tags (so no span for each lines, no br)
2. You can use as many tags as you want around the text
3. No JavaScript, only HTML and CSS
4. The white background must follow around the text
5. There is a margin inside the white background around the text of 20px on the left and right, and about 10px on top and bottom
6. The text is dynamic, so we must be able to easily change it and still have the visual effect
7. The solution must work on modern browsers (IE9, Firefox 13, Chrome 19, …)

To help you get started, I created a sample code on jsFiddle. You’re free to edit the HTML and CSS, as long as you respect the rules above.

I invite you to share your realisations on the comments below. I’ll publish the solution I came up with later this week. Have fun, and good luck to all !