{"id":1902,"date":"2010-04-05T00:53:00","date_gmt":"2010-04-05T00:53:00","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=1902"},"modified":"2010-04-05T00:53:00","modified_gmt":"2010-04-05T00:53:00","slug":"creer-une-web-app-pour-l-ipad-avec-split-view","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/creer-une-web-app-pour-l-ipad-avec-split-view\/","title":{"rendered":"Cr\u00e9er une Web app pour l’iPad avec Split View"},"content":{"rendered":"

\u00c0 moins de vivre dans une cave (ou d’\u00eatre inscrit au flux Engadget sans news Apple<\/a>), vous savez que l’iPad est enfin sorti. Avec lui arrivent les premi\u00e8res applications natives d\u00e9di\u00e9es, rendues possibles par le SDK 3.2 disponible depuis quelques semaines d\u00e9j\u00e0. Mais ce qui m’int\u00e9resse, c’est plut\u00f4t de voir comment on peut offrir une exp\u00e9rience adapt\u00e9e avec des technologies Web<\/strong>. Avec Javascript, HTML5 et CSS3, on peut faire des miracles. C’est d’ailleurs ce qu’a fait Google en lan\u00e7ant la version iPad de GMail<\/a>. Cette version sp\u00e9cifique \u00e0 la tablette (testable en changeant son User Agent<\/a>) impl\u00e9mente une des grandes nouveaut\u00e9s de l’iPad: les Split Views<\/strong>.<\/p>\n

Les Split Views<\/h3>\n

Avant de passer au code, voyons ce qu’est une Split View. Si on se r\u00e9f\u00e8re aux iPad Human Interface Guidelines<\/em>: “A split view is a full-screen view that consists of two side-by-side panes”. C’est donc simplement une vue coup\u00e9e en deux, avec deux panneaux ind\u00e9pendants. Dans l’image qui suit, vous pouvez voir l’application Mail en mode SplitView lorsque l’iPad est \u00e0 l’horizontal. \"iPad<\/p>\n

Si on y pense, \u00e7a ressemble beaucoup \u00e0 des frames ou des pseudo-frames. Mais ce n’est pas si simple, car l’iPad a un interface tactile. Le doigt sert \u00e0 manipuler l’int\u00e9gralit\u00e9 de la page. Les frames\/pseudo-frames ne sont habituellement manipulable qu’avec des gestures<\/em> \u00e0 deux doigts<\/strong>. Pas pratique, et certainement impossible \u00e0 deviner pour l’utilisateur.<\/p>\n

Impl\u00e9menter des Split Views en Javascript<\/h3>\n

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\u00e9pond aux \u00e9v\u00e9nements d\u00e9clench\u00e9s au toucher. Il suffit de brancher des fonctions pour faire scroller les deux panneaux et le tour est jou\u00e9. C’est d’ailleurs la solution qu’a retenu Google pour son application GMail. Donc pour cr\u00e9er des Split Views avec une web app, il suffit de faire de m\u00eame.<\/p>\n

Pour cela, nous n’allons pas repiquer le code de Google (qui est bien obfusqu\u00e9 d’ailleurs), mais utiliser une biblioth\u00e8que pr\u00eate \u00e0 l’emploi: iScroll<\/a> disponible sous licence MIT. Et plut\u00f4t que d’expliquer en long et en large, je vous propose de jeter un \u0153il directement sur cet exemple:<\/p>\n

http:\/\/svay.com\/experiences\/iPad_web_app\/<\/a><\/p>\n

Cela fonctionne avec l’iPhone et l’iPad. Voil\u00e0 \u00e0 quoi \u00e7a ressemble sur l’iPad Simulator:<\/p>\n

<\/embed><\/object> <\/p>\n

Si vous souhaitez en savoir plus sur les paradigmes d’interface de l’iPad, je vous conseille de lire les iPad Human Interface Guidelines<\/a>. C’est s\u00fbrement le meilleur endroit pour se rendre compte des nouveaut\u00e9s introduites par l’iPad en termes d’utilisabilit\u00e9. Il ne vous reste plus qu’\u00e0 cr\u00e9er vos propres Web Apps pour l’iPad maintenant.<\/p>\n","protected":false},"excerpt":{"rendered":"

\u00c0 moins de vivre dans une cave (ou d’\u00eatre inscrit au flux Engadget sans news Apple), vous savez que l’iPad est enfin sorti. Avec lui arrivent les premi\u00e8res applications natives d\u00e9di\u00e9es, rendues possibles par le SDK 3.2 disponible depuis quelques semaines d\u00e9j\u00e0. Mais ce qui m’int\u00e9resse, c’est plut\u00f4t de voir comment on peut offrir une […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1902"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=1902"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1902\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=1902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=1902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=1902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}