21  novembre

Commencer avec Djehouti – 6/ Créer un projet pour iPad

 

Comme vous le savez, les projets réalisés avec Djehouti sont en HTML5, et donc, sont compatibles avec les tablettes tactiles et notamment avec l’iPad d’Apple.

Cependant quand on desire réaliser un projet spécialement pour ce support, quelques règles sont à connaitre.

 

1- Le format

On distingue aujourd’hui trois générations d’iPad.

Il est important de comprendre qu’un projet réalisé avec Djehouti se regarde en ligne, c’est à dire au sein d’un navigateur web. Sur iPad le plus utilisé est Safari, mais on peut aussi utiliser Chrome.

 

 

On distingue donc deux solutions :

• Le site plein écran (c’est à dire sans scroller pour voir la suite du contenu) :

Dans ce cas, il faut prendre en compte la barre de navigation du navigateur.

Le format du projet devra donc être homothétique ou égal à 1024px par 665px.

• Le site scrollable (c’est à dire qu’il faut scroller pour voir la suite du contenu) :

Dans ce cas, il faut juste prendre en compte seulement la largeur de l’IPad.

Le format du projet devra donc être homothétique ou égal à 1024px de large, la hauteur quand à elle est libre.

 

2- Ce qu’il faut prévoir avant de commencer sa maquette

Techniquement parlant, la navigation tactile ne fonctionne pas de la même façon que la navigation sur ordinateur.

• La taille des boutons :

Sur tablette, la navigation tactile est moins précise que sur un ordinateur.

Il faut prendre en consideration qu’un doigt ne peut pas être aussi fin qu’un curseur de souris.

Du coup il faut prévoir d’espacer plus les boutons et de les mettre plus gros afin de faciliter le clic, ou de ne pas cliquer sur plusieurs boutons en même temps.

• L’état de Survol ou Roll-Over :

De par son caractère tactile, l’état de Survol sur un tablette est inexistant. Dans un projet réalisé avec Djehouti, les actions de Survol ne se déclencheront que par Clic.

Cela aura pour effet de jouer très rapidement l’animation définie par l’état Survol, et enchainera directement sur la lecture de l’animation ou action défini par l’état Clic.

Dans le cas où aucune action de Clic ne serait définie, l’action de Survol (toujours sur tablette) se déclenchera au clic et il faudra recliquer pour la faire disparaitre (si la case Retour a été cochée dans les actions).

 

3- Ce qu’il faut savoir quand on commence l’intégration dans Djehouti

Comme tous les supports, les tablettes tactiles et notamment l’iPad comportent un certain nombre de contraintes.

• L’auto-play :

Afin de marquer la difference avec les applications disponibles sur l’Apple Store, l’auto-play (lecture automatique) du son et de la vidéo ne marche pas.

Il est donc indispensable de créer, dans Djehouti, des boutons qui permettront de lancer les sons, musiques, et les vidéos.

En revanche même si cela ne marche pas sur iPad, sur iPhone les sons peuvent se lancer automatiquement.

• La vidéo :

Sur tablette tactile, comme sur smartphone, la gestion de la vidéo est toujours un peu délicate.

– Sur smartphone et notamment l’iPhone, la vidéo se lance toujours dans un player spécifique.

Elle se mettra toujours en pleine écran. il ne faut donc pas compter sur la possibilité de regarder la vidéo au sein de la page web.

– Sur IPad, nous n’avons pas ce problème. mais il faut noter une autre spécificité.

Qu’elle soit masquée, qu’elle soit en bas de la pile de calques, ou qu’elle soit en opacité à 0%, l’iPad fait toujours passer la vidéo en premier plan, ce qui empêche souvent accès aux autres éléments et surtout aux autres boutons.

Pour remédier à cela il faut mettre la vidéo hors de la zones de la scène, et créer une action qui la fait rentrer dans la scène au moment voulu.

 

 

Si on désire que la vidéo apparaisse en opacité et qu’on ne veut pas voir la vidéo arriver depuis l’exterieur, il sera necessaire de jouer avec le paramètre Délai.