Maurice Svay

You can now fork the class from here:

https://github.com/mauricesvay/php-facedetection

Paris Web 2010 Highlights from Maurice Svay on Vimeo.

Le site Utilise.ca regroupe des “mini-entrevues avec des geeks francophones qui nous partagent les outils qu’ils utilisent au quotidien pour accomplir leur travail”. Le concept est similaire à The Setup qui compte déjà des dizaines d'interviews.

La semaine dernière, Rémi Prévost, qui édite le site, m'a demandé de me plier à l'exercice. Vous pouvez lire mes réponses aux traditionnelles quatre questions là: mauricesvay.utilise.ca.

Merci Rémi!

Éric Daspet organise une soirée sur le sujet des Performances Web le 21 juillet 2010. Sponsorisée par le cabinet de conseil Octo, la soirée aura lieu dans ses locaux à partir de 19h. Stoyan Stefanov, qui fait partie de l'équipe Exceptional Performance de Yahoo! fera une présentation de plusieurs techniques avancées pour améliorer la performance des vos sites Web. La présentation sera suivie d'une séance de questions/réponses plus libre. L'inscription est gratuite, faites passer le mot!

Si vous êtes intéressé par cet événement, tous les détails sont disponibles sur cette page : Webperf User Group France, 21 juillet 2010 Paris

Version française à la fin de l'article.

Safari 5 has just been released with an API for writing extensions. Writing extensions is fairly easy, as long as you know javascript. I gave it a shot and wrote my first extension: PageSaver. This extension saves a screenshot of the visible part of the page to an image in your download folder. Right now, it's still rough (images have filenames that make no sense) but it was nice to be able to write it within an hour.

Get the extension here: PageSaver.safariextz 1.1

En français: Safari 5 vient juste de sortir, avec une API pour développer des extensions. Ces extensions sont plutôt faciles à développer, dans la mesure où il suffit de savoir programmer en javascript. J'ai essayé et j'ai pu créer ma première extension: PageSaver. Cette extension fait une capture de la partie visible de la page et la sauvegarde en tant qu'image dans votre dossier de téléchargement. Pour le moment, c'est encore assez brut (les images ont des noms qui ne ressemblent à rien) mais c'est assez sympa de pouvoir écrire une extension en une heure à peine.

Chunk Five is a great font from The League of Moveable Type. It's a nice slab serif that works perfectly for headlines. I recently wanted to use it for a project but there was a major deal breaker: the font has no accent and is missing a lot of characters. Very disappointing. But the cool thing, is that this font is open source: not only it can copied or embed as a webfont, but it can also be modified!

Because I love open source and I love this font, I spent the week-end adding the missing glyphs to Chunk. My version of the font has now twice more glyphs than the original (from 85 to 170). However, it's still missing many glyphs and it might be buggy.

If you want to give it a try, just download Chunk Five with accents.

Il y'a quelques mois, j'avais essayé de faire un effet de spot lumineux avec SVG. Pour expérimenter, j'ai voulu réaliser le même effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l'explication, je vous donne le lien pour tester avec un Webkit récent (Safari4 ou Chrome) ou Firefox:

Démo CSS3 Spotlight

Donc, pour réaliser cette démo, j'ai mélangé les ingrédients suivants:

• des CSS gradients, pour générer le spot;
• des web fonts, pour avoir une jolie typographie;
• des CSS transforms, pour incliner le texte;
• des couleurs RGBA, pour avoir de la transparence;
• la propriété pointer-events, pour pouvoir cliquer sous le spot
• et un peu de Javascript, pour rendre ça interactif.

La raison pour laquelle cette démo ne fonctionne qu'avec Webkit, c'est que je n'ai pas trouvé comment réaliser le même dégradé radial avec Firefox. Je sais que Firefox les supporte, mais la syntaxe est différente et ne permet pas de définir la taille du dégradé manuellement.

J'ai dit une connerie, ça marche très bien sous Firefox grâce à Florent Verschelde.

Je pense qu'il doit y avoir encore plein d'autres manières de créer cet effet (avec du <canvas> par exemple). Vous feriez ça comment vous?

À moins de vivre dans une cave (ou d'être inscrit au flux Engadget sans news Apple), vous savez que l'iPad est enfin sorti. Avec lui arrivent les premières applications natives dédiées, rendues possibles par le SDK 3.2 disponible depuis quelques semaines déjà. Mais ce qui m'intéresse, c'est plutôt de voir comment on peut offrir une expérience adaptée avec des technologies Web. Avec Javascript, HTML5 et CSS3, on peut faire des miracles. C'est d'ailleurs ce qu'a fait Google en lançant la version iPad de GMail. Cette version spécifique à la tablette (testable en changeant son User Agent) implémente une des grandes nouveautés de l'iPad: les Split Views.

Les Split Views

Avant de passer au code, voyons ce qu'est une Split View. Si on se réfère aux iPad Human Interface Guidelines: "A split view is a full-screen view that consists of two side-by-side panes". C'est donc simplement une vue coupée en deux, avec deux panneaux indépendants. Dans l'image qui suit, vous pouvez voir l'application Mail en mode SplitView lorsque l'iPad est à l'horizontal.

Si on y pense, ça ressemble beaucoup à des frames ou des pseudo-frames. Mais ce n'est pas si simple, car l'iPad a un interface tactile. Le doigt sert à manipuler l'intégralité de la page. Les frames/pseudo-frames ne sont habituellement manipulable qu'avec des gestures à deux doigts. Pas pratique, et certainement impossible à deviner pour l'utilisateur.

Implémenter des Split Views en Javascript

Comme ce n'est pas possible en HTML, ni en CSS, il faut se tourner vers Javascript. Safari sur l'iPad (et l'iPhone) répond aux événements déclenchés au toucher. Il suffit de brancher des fonctions pour faire scroller les deux panneaux et le tour est joué. C'est d'ailleurs la solution qu'a retenu Google pour son application GMail. Donc pour créer des Split Views avec une web app, il suffit de faire de même.

Pour cela, nous n'allons pas repiquer le code de Google (qui est bien obfusqué d'ailleurs), mais utiliser une bibliothèque prête à l'emploi: iScroll disponible sous licence MIT. Et plutôt que d'expliquer en long et en large, je vous propose de jeter un œil directement sur cet exemple:

svay.com/experiences/iPad_web_app/

Cela fonctionne avec l'iPhone et l'iPad. Voilà à quoi ça ressemble sur l'iPad Simulator:

Si vous souhaitez en savoir plus sur les paradigmes d'interface de l'iPad, je vous conseille de lire les iPad Human Interface Guidelines. C'est sûrement le meilleur endroit pour se rendre compte des nouveautés introduites par l'iPad en termes d'utilisabilité. Il ne vous reste plus qu'à créer vos propres Web Apps pour l'iPad maintenant.