Feuilleter un livre avec l'API Canvas - partie 3

Dans le premier article de cette série, nous avons mis en place le plus gros de la structure HTML et CSS nécessaire à la création de l'effet. Dans le second article, nous avons vu sur une petite démo comment créer cet effet à l'aide d'un canevas. Dans ce troisième et dernier article, nous allons fusionner tout cela dans un premier temps, puis modifier la façon dont l'utilisateur interagit avec le livre.

Effacer un canevas: trick ou pas trick ?

Je constate en lisant des articles ou des réponses sur les forums de questions que le flou subsiste sur la meilleure façon d'effacer un canevas.

Il existe en fait deux méthodes pour effacer complètement un canevas:

  1. context.clearRect(x,y,width, height): c'est la méthode "officielle" pour effacer tout ou partie d'un canevas
  2. canvas.width = canvas.width : le fameux trick qui efface complètement le canevas.

Quand on cherche sur le net, on trouve (comme souvent) tout et son contraire. Par exemple sur StackOverflow... Et puis il faut dire que si ce hack a la vie dure, c'est aussi parce qu'on le trouve sur des sites de référence, comme celui du WHATWG ou bien sur w3schools. Je vous propose de faire un petit point sur ce problème afin de vous permettre de faire un choix en toute connaissance de cause.

Feuilleter un livre avec l'API Canvas - partie 2

Dans l'article précédent, nous avons mis en place la plupart des éléments qui vont nous permettre de créer l'effet désiré. Dans cette seconde partie, nous allons nous concentrer sur la réalisation de l'effet proprement dit.

Feuilleter un livre avec l'API Canvas - partie 1

Il y a souvent un événement déclencheur qui me pousse à vouloir m'approprier une certaine technologie. En ce qui concerne HTML5, cela a été la découverte du site 20 things I learned about browsers and the web qui m'a littéralement mis la tête à l'envers. J'avais pourtant vu un certain nombre d'effets sympathiques sur différents sites, mais il y avait là une alchimie vraiment unique entre un contenu intéressant, des fonctionnalités d'avant-garde et une mise en scène électrisante.

Ma journée MIX-IT 2012

Comme en 2011, j'étais présent à Mix-IT cette année et je me suis dit que ce serait sympa de faire un petit compte-rendu à chaud. Cela donnera peut-être envie à ceux qui n'ont pas suivi les mêmes sessions que moi (ou qui n'ont pas pu y assister pour d'obscures raisons de tirage au sort par exemple) de consulter les slides des présentations quand ils seront disponibles. Allez c'est parti, dans l'ordre chronologique:

Soyez user-friendly avec l'API History

Dans le premier article, nous avons constaté que le fait de charger des portions de page avec Ajax posait un sérieux problème au niveau de l'historique du navigateur (entre autres). Dans le second article, nous avons résolu ce problème au moyen de la manipulation du hash de l'URL et grâce à l'événement hashchange. Mais nous avons constaté certaines limites de cette technique et avons conclu qu'une API plus propre et plus robuste serait sympathique. Voyons comment l'API History de HTML5 s'en sort.

The Hashbang Theory

Dans l'article précédent, nous avons réalisé que pour arriver à construire l'historique de l'application tout en utilisant des requêtes Ajax, il fallait trouver un moyen de manipuler l'URL sans pour autant que le navigateur n'émette de requête HTTP.

La solution

Des petits génies qui devaient un peu ressembler à Sheldon (un des héros de Big Bang Theory. Vous ne connaissez pas ? Hum...) se sont fait cette réflexion : « Hé, mais ça existe depuis longtemps ! Pourquoi ne pas utiliser les hashes ?»

HTML5 History API: réconcilier Ajax et historique de navigation

Parmi toutes les nouvelles APIs apportées par HTML5, l'API History est probablement une des plus sous-estimées, et pourtant elle est certainement déjà une des plus utilisées car elle permet de résoudre un problème très épineux.

Dans cet série d'articles, je vous propose de suivre la démarche suivante en nous basant sur un exemple simple:

  1. Démontrer le problème sur un exemple
  2. Regarder les différentes solutions qui ont été apportées
  3. Et surtout, comprendre pourquoi vous allez utiliser l'API History!

MixIT 2012: un Lyon dans votre moteur !

Comme l'année dernière, il y aura une grande conférence à Lyon. Je parle bien sûr de Mix-IT, qui a la particularité d'être intéressante à la fois:

  • pour les développeurs et les managers
  • pour les fans d'agilité et les inconditionnels d' UP
  • pour les gourous de Java et les maitres de C#
  • pour ceux qui aiment un travail qui présente bien et ceux qui aiment bien travailler

Formation HTML5 en partenariat avec Les Ateliers Nomades

J'ai été heureux d'entamer récemment une nouvelle collaboration en intégrant l'équipe de formateurs de nomades.advanced_technology pour la formation "Mobile Web".

J'ai passé 6 jours à Genève, que j'ai passé à innoculer aux étudiants le virus du HTML5.