Le bureau de Mac OS X Leopard

À en croire la plupart des écrits que l’on peut trouver sur Internet, depuis son article sur Wikipédia jusqu’aux argumentaires de vente d’Apple, Mac OS X est un système d’exploitation simple, ergonomique, qui propose à l’utilisateur une expérience sans égale.

Mais qu’en est-il réellement ?

Jusqu’en Janvier dernier, je travaillais chez LunaWeb sous un environnement Linux, plus précisément une distribution Kubuntu que j’utilise encore à titre personnel.

L’équipe s’agrandissant et les nouveaux arrivants choisissant tous de travailler sur des machines Apple, je suis resté seul à ne pas pouvoir utiliser pleinement certains outils qui se mettaient progressivement en place. Afin de ne pas rester en marge, j’ai décidé de migrer moi aussi vers Mac OS X et de troquer mon ancien poste contre un Mac mini fonctionnant sous Mac OS X Léopard.

Après plusieurs mois d’utilisation, j’aimerais faire aujourd’hui un comparatif des deux systèmes et vérifier avec vous si ce que l’on dit de Mac OS X est bien vrai. Car si il est effectivement assez simple à prendre en main et graphiquement très abouti, qu’en est-il de l’ergonomie ?

Qu’est-ce que l’ergonomie ?

Le poste de travail ergonomique - © 01Net

Il est très difficile de donner une définition précise de l’ergonomie. Selon le wicktionnaire, l’ergonomie est une discipline qui vise l’adaptation d’un système à son utilisateur, afin que ce dernier puisse mener ses activités avec un maximum d’efficacité, de satisfaction et de bien-être, avec une phase d’adaptation réduite.

En terme d’efficacité, cela signifie présenter aux utilisateurs les informations dont ils ont besoin au moment opportun de la façon la plus claire possible et mettre à leur disposition les opérations appropriées de manière clairement identifiable. Une interface qui répond à ces critères pourra rapidement être prise en main par tout nouvel utilisateur. Pour les cas les plus complexes, comme les applications métiers, cela supposera bien souvent une compréhension préalable du vocabulaire utilisé.

Même si la satisfaction et le bien-être sont des notions beaucoup plus subjectives, pour ne pas dire culturelles, on distingue cependant plusieurs bonnes pratiques :

• Réduire au maximum les opérations répétitives,
• Fournir les chemins les plus courts pour réaliser les opérations,
• Fournir des comportements commun à l’ensemble afin que l’utilisateur puisse rapidement prédire ce que seront les prochaines étapes,
• Fournir des messages de retour explicites, aussi bien en cas d’erreur que de succès,
• Fournir des messages d’aide explicites lorsque cela est nécessaire,
• Ne pas bloquer le cheminement de l’utilisateur par des interventions intrusives,
• Permettre à l’utilisateur de se situer rapidement et d’identifier ce qu’il est en train de faire.

En se basant sur ces critères, lequel d’OS X ou de KDE est le plus ergonomique ?

La gestion des fenêtres

Le desktop de KDE sous Linux

La première distinction visible entre les deux systèmes, et certainement la plus déroutante lorsqu’il s’agit de passer de l’un à l’autre, est l’environnement de bureau lui-même.

Côtoyant des utilisateurs de Mac OS X depuis plusieurs années, j’avais déjà eu un aperçu des comportements des fenêtres et je savais par avance que ceux-ci me poseraient problèmes. Je suis de ceux qui estiment qu’il n’y a jamais assez de pixels sur un écran pour travailler, aussi ai-je pour habitude d’utiliser la plupart des applications en plein écran et même de travailler avec plusieurs écrans. La philosophie d’OS X de n’agrandir les fenêtre qu’à la taille suffisante pour consulter un document présageait donc quelques contrariétés.

La réalité est plus complexe que cela. D’une application à l’autre, le bouton vert d’agrandissement des fenêtres OS X aura un comportement aléatoire. Une fenêtre Safari s’agrandira jusqu’à prendre la largeur maximum du site web qu’elle affiche dans l’onglet courant, sans se soucier de la taille nécessaire dans les autres onglets. Une fenêtre Mail ou iCal s’étendra pour prendre tout l’écran. Si le résultat ne vous plait pas et à condition que l’application vous y autorise - certaines imposant une taille fixe -, il vous reste certes la possibilité de redimensionner la fenêtre manuellement, mais uniquement par le coin inférieur droit. Ce qui n’est pas très pratique quand ce coin de la fenêtre se trouve déjà sur un des bords de l’écran.

L'utilisation des fenêtres sous KDE - © Linux Bidouille

A l’inverse, sous KDE, le comportement des fenêtres est beaucoup plus cohérent. Hormis les quelques boites de dialogue dont la taille est fixe, elles peuvent être étirées depuis n’importe quel côté ou coin. Le fonctionnement du bouton de maximisation est quant à lui plus souple que sous Windows puisqu’il permet de maximiser une fenêtre sur tout l’écran ou bien uniquement en largeur ou en hauteur, suivant le bouton de la souris qui est utilisé.

Autre comportement relatif aux fenêtres, bien que la métaphore du bureau reste la même d’un système à l’autre, son application est cependant très différente. Héritage des temps où les interfaces munies d’onglets n’existaient pas et des anciens systèmes Mac OS où chaque document s’ouvrait systématiquement dans une nouvelle fenêtre, les applications sous OS X ont une forte tendance à multiplier celles-ci sans restrictions.

Ce ne serait pas forcement un problème si l’environnement proposait un moyen d’accéder rapidement à l’une ou l’autre d’entre elles.

Sous KDE, la barre des tâches assure cette fonction efficacement, groupant les fenêtres par applications si nécessaire mais permettant toujours d’en sélectionner une avec un minimum de clics et de déplacements. Le sélecteur de fenêtre activé par le raccourci clavier Alt + Tab affiche quant à lui la liste complète des fenêtres. Pour les plus utiles d’entre elles, il est possible de les forcer à rester au dessus des autres, et inversement.

L'utilisation des fenêtres sous OS X - ©TuxGeek

Sous OS X, le niveau de focus choisi est l’application. Le dock joue à la fois le rôle de lanceur d’application et de barre des tâches, mais n’affiche toujours qu’une seule icône par programme, quel que soit le nombre de fenêtres correspondant. Le raccourci clavier Cmd + Tab n’apporte pas plus de solution en ne proposant que la liste des applications ouvertes. Reste toujours le problème de trouver la bonne fenêtre au sein d’une application.

Il existe cependant des solutions pour la retrouver. Un clic droit sur l’icône de l’application dans le dock ouvrira un menu contextuel donnant accès à une série de commandes sur l’application chapeauté d’une liste de ses fenêtres. Vous pouvez lui préférer la fonction Exposé mais, même s’il est possible de la restreindre sur l’application courante, il peut devenir difficile de distinguer la fenêtre recherchée parmi toutes ses sœurs, a fortiori quand il s’agit de fenêtre de code comme c’est souvent mon cas.

Certains diront qu’il me suffirait d’adopter la philosophie Mac et d’abandonner le plein écran pour naviguer plus facilement à travers les fenêtres, mais même dans ce cas le système fait défaut. La gestion du focus de la souris oblige à faire revenir par un clic une fenêtre au premier plan avant de pouvoir interagir avec son contenu. Encore une fois, KDE fait mieux en conservant actifs tous les contrôles d’une fenêtre, même lorsqu’elle n’est plus la fenêtre active, évitant ainsi un nombre important de clics inutiles.

En résumé, peu importe la façon dont vous vous y prenez, aucune des méthodes proposées par Léopard pour gérer vos fenêtres n’est aussi efficace ni agréable que celles proposées par KDE. Ce manque d’accessibilité directe des applications peut sembler anodin, mais sur l’ensemble d’une journée il engendre une somme de temps perdu et de frustration conséquente. Le gestionnaire de fenêtres est censé être l’outil du système pour organiser les fenêtres à votre place et vous faire oublier les contraintes de cette tâche. C’est exactement ce qu’OS X ne fait pas…

Le système Spaces d'Apple - © Macinjay

Heureusement pour moi, je n’ai découvert Mac OS X qu’avec Léopard. Cette version apporte un utilitaire incontournable dans la gestion des fenêtres : Spaces. Le principe des bureaux virtuels n’a rien de révolutionnaire en soit. Il est même fréquemment exploité par les utilisateurs de Linux depuis plusieurs années déjà dans la plupart des environnements de bureau libres. Mais autant sous KDE je me satisfais très bien de 2, autant je n’imagine pas une journée sous Mac sans les 4 bureaux que j’ai actuellement paramétrés.

Leur implémentation est encore imparfaite cependant. Il n’est ainsi pas possible de déplacer une fenêtre vers un autre bureau sans devoir s’y rendre soit même, ni de faire afficher une fenêtre sur tous les bureaux. De plus, un bureau virtuel sous OS X ne garde pas la mémoire de la dernière application à avoir reçu le focus, une occasion de plus de partir à la chasse aux fenêtres…

L’explorateur de fichiers

Autre pierre angulaire d’un système d’exploitation, l’explorateur de fichier est sûrement l’application la plus utilisée. Au même titre que la gestion des fenêtres, celle des fichiers se doit d’être simple, susceptible de se faire oublier.

Dolphin - KDE.org

Sous KDE4, c’est Dolphin qui est proposé par défaut pour tenir ce rôle. Associé au KIO-slaves qui rendent transparent le support d’un grand nombre de protocole réseau, il permet une gestion efficace des fichiers, aussi bien sur votre ordinateur qu’en dehors. A l’inverse, le Finder ne supporte qu’un très petit nombre de protocoles, parfois uniquement en lecture seule alors que les capacités du système lui permettrait d’en avoir un support complet, comme c’est le cas pour FTP.

Les modes d’affichage sont sensiblement identiques dans les deux explorateurs, à ceci prêt que vous pouvez choisir quelles colonnes afficher dans la vue détaillée sous Dolphin. Apple est peut-être allé chercher quelques bonnes idées du côté du monde du libre, car le Finder se dote sous Snow Léopard du même sélecteur pour la taille des miniatures que son homologue dans la vue correspondante. Autre point positif pour KDE, la zone d’affichage des détails d’un fichier est disponible dans toutes les vues, là où dans le Finder elle n’existe que dans la vue par colonne.

Dolphin gère également les onglets et permet de scinder une vue verticalement, chaque vue pouvait adopter son propre mode d’affichage. Cette souplesse est particulièrement utile pour comparer ou synchroniser le contenu de répertoires. Chaque vue est munie d’une barre d’adresse très pratique, vous permettant en un clic de revenir vers l’un des dossiers parent de celui que vous consultez. Vous pouvez également dérouler à chaque niveau la liste des dossiers contenus dans un répertoire pour vous déplacer rapidement d’un point à l’autre de l’arborescence. Et si cela ne vous suffit pas, vous pouvez également cliquer sur un espace vide de la barre d’adresse pour la transformer en un champ de saisie où vous profiterez de l’auto-complétion.

De son côté, le Finder ne supporte pas les onglets et sa barre d’adresse est particulièrement pénible à exploiter, obligeant à l’usage combiné du clavier et de la souris pour naviguer vers les dossiers parents.

Dans Dolphin, la plupart des commandes sur les fichiers sont directement accessibles via le menu contextuel du clic droit. Ce même menu peut être étendu à volonté par l’installation de services menu. On peut espérer voir arriver la même variété dans Mac OS X avec l’incitation d’Apple à utiliser les services dans Snow Léopard, toutefois le fait de devoir aller les chercher dans la barre d’outil restera peu pratique. En attendant, le Finder est une fois de plus à ce niveau très limité. La création d’un nouveau dossier ne peut se faire qu’au niveau le plus haut dans la vue arborescente et il est impossible de créer un nouveau fichier vide.

Je vous le concède, cette dernière option n’est véritablement utile que pour les gens qui manipulent beaucoup de fichiers texte. Mais il m’a été pénible au début de devoir rechercher à nouveau l’emplacement où je souhaitais enregistrer le fichier dans la boite de dialogue « Enregistrer sous » alors que je m’y trouvais au préalable via le Finder.

Le Finder sous OS X

Autre comportement perturbant, le Finder ne dispose pas d’une option explicite pour déplacer des fichiers. Les fichiers sont déplacés par défaut, sauf quand ils sont déplacés d’un disque à un autre où cette fois sans prévenir ils seront dupliqués. Le comportement des copies est lui-même frustrant : si vous déplacer un fichier vers un répertoire en comportant déjà un du même nom, vous n’aurez le choix qu’entre écraser le fichier ou annuler la copie toute entière. La façon de procéder de KDE dans des cas similaire est à mon sens bien meilleure, puisqu’il propose via une boite de dialogue de donner un autre nom au fichier copié, d’écraser l’ancien ou simplement de l’ignorer.

Dernier point en faveur de Dolphin, même s’il est discutable : vous pouvez choisir d’ouvrir vos fichiers et vos répertoires dans l’explorateur sur un simple clic plutôt qu’un double. Cela peut paraitre dérisoire, mais le nombre de clics économisés à la fin de la journée monte très vite et votre souris comme votre poignet vous en remercieront à long terme. Cela offre en outre une fluidité très agréable dans la navigation.

Les autres applications

Il serait vain de vouloir comparer une à une toutes les applications disponibles pour KDE et OS X, d’une part parce que leur nombre est bien trop important, et d’autre part parce qu’il existe pour chacun des environnements d’excellentes applications.

Il est toutefois un point général à reprocher aux applications sous OS X, c’est le manque de retour utilisateur. La plupart du temps, elle partent du principe que « Ça marche et c’est tout », et ne prennent pas la peine d’informer l’utilisateur du résultat de son action, qu’il soit bon ou mauvais. À l’inverse, les applications KDE font en général un usage intelligent de leur barre d’état pour leurs notifications.

De façon plus globale, là où la politique sous KDE est de proposer quantité d’options de configuration - tendant parfois à l’excès -, l’utilisateur sous OS X se heurte bien vite aux limites imposées à l’application par ses développeurs. Même si l’objectif de base de faire les applications les plus simples d’utilisation possibles est louable, il est dommage d’être strictement cantonné à ce mode de fonctionnement quand, une fois la phase d’apprentissage passée, il serait plus productif de fournir un mode avancé.

Pire, certaines applications se mettent volontairement en travers du chemin de l’utilisateur ou exécutent des actions sans qu’il le leur ai été demandé. C’est le cas par exemple d’Adium qui « corrige » les smileys, ou du Finder lors de certaines copies de fichier.

Enfin, bien que ce soit là un point de vue très personnel, les applications sous OS X font un usage parfois trop intensif des animations. Certes il est agréable d’avoir un système visuellement évolué, mais il ne faut pas que cela aille à l’encontre de l’utilisation par une gêne ou des pertes de temps qui, cumulées, finissent par devenir lassantes. Certaines ouvertures automatiques de fenêtre du Finder lors des glisser-déposer par exemple sont particulièrement déroutante pour les yeux. Et une fois l’opération terminé, on est jamais bien sûr de ne pas avoir à partir en chasse d’une fenêtre fantôme pour la fermer.

Conclusion

De tous les points d’ergonomie cités en introduction de cet article, presque tous sont régulièrement enfreints dés la base du système. Même si au premier abord ces défauts peuvent sembler anodins, ils deviennent rapidement gênant au cours d’une utilisation prolongée, rendant l’ensemble frustrant - c’est encore plus vrai une fois qu’on a connu mieux -. Sur ce plan, Apple aurait beaucoup à apprendre des solutions libres comme KDE, grand vainqueur de ce comparatif.

Personnellement, après plusieurs mois d’utilisation, il est clair que l’on ne me ferra jamais acheter un Mac pour mon usage personnel. Outre les défauts du système en lui-même, le caractère fermé et égocentrique de l’univers Apple a réussi à me dégouter du moindre produit à la Pomme.

Et vous ? Qu’est-ce qui vous fait rester sous Mac ?

Alors que nous vous exposions très récemment tout l’intérêt de la déclinaison iPhone d’un site Web, revenons sur les initiatives du Crédit Mutuel dans ce domaine.

C’est en effet depuis la fin juillet que la banque – à qui parler – à mise en place une version mobile de son site (en démo sur http://iphone.cmut.fr) qui si elle ne brille pas par l’esthétique de son design d’interface (réalisable facilement à partir de ce type de kit iPhone PSD Vector Kit) se montre très complète et naturellement ergonomique.

Consultation de ses comptes, virements, suivi d’opérations boursières, numéros utiles en cas de pertes ou de vol de sa carte, sont autant d’utilisations pratiques qui sont dorénavant accessibles aux fans de la mobilité technologique.

Il semblerait tout de même que le fonctionnement régional des banques comme le Crédit Mutuel n’aide pas à l’universalité de ce type d’initiatives, comme peuvent en témoigner nombre de retours d’utilisateurs mécontents, par exemple les utilisateurs dépendant d’une caisse régionale et souhaitant se connecter à l’interface nationale avec ses identifiants.

* * *

C’est peut-être pour pallier à ce manque que fin Août, le Crédit Mutuel Arkéa a dévoilé cette fois une application mobile, disponible sur l’Appstore et gratuite pour les clients des Crédit Mutuel de Bretagne, du Sud-Ouest et du Massif Central.

Localisation de son agence via GPS, consultation de son compte, virements et bientôt un numéro de paiement virtuel pour ses achats en ligne, le tout servi par un design qui fait cette fois honneur au mobile d’apple. Bref du tout bon !

* * *

Pour résumer, et même si les tests utilisateurs ne sont pas toujours concluant, la démocratisation des smartphones, et plus encore celle de l’iPhone, permet de voir fleurir de tous nouveaux services, qui vont très certainement révolutionner le rapport que nous entretenons avec ses services virtuels et hautement pratiques.

À quand donc la réalité augmenté pour repérer le distributeur ou l’agence la plus proche !

Et vous quelle utilisation pratique faites-vous de votre smartphone ?

Avant propos

Version iPhone du site Internet de LunaWeb

Découvrez sans plus attendre les différentes pages de la version mobile du site LunaWeb en vous rendant sur notre page référence !

Le site LunaWeb en version Mobile »

* * * Bonne lecture ! * * *

Un téléphone qui tombe à point nommé !

Le smartphone d’Apple est à la mode depuis bientôt deux ans, ça tombe bien il a permis de révolutionner la consommation d’Internet, et de faire entrer de plein pied l’accès Internet nomade dans le monde personnel comme professionnel.

Le développement d’applications iPhone suit des guidelines mises à disposition par Apple, d’un point de vue technique mais également ergonomique et fonctionnel. Dans le grand nombre d’applications disponibles sur l’AppStore, de nombreuses applications mettent par exemple en place une navigation qui se base sur le composant adéquat mis à disposition dans le SDK. Pour l’utilisateur, c’est l’assurance d’une appréhension plus simple et plus intuitive de l’interface.
[Source : Ergonomic Garden - iPhone & Android ou la prise en compte des guidelines - http://is.gd/1Ktf6]

Dans le même esprit, l’accès rendu facile et nomade à Internet permet aux utilisateurs d’iPhone de multiplier leurs séances de navigation dans un contexte pratique et/ou ludique. De récentes études démontrent en effet que les possesseurs du téléphone d’Apple surfent plus sur Internet, qu’ils consultent plus les emailings commerciaux, qu’ils micro-blogguent plus, et qu’ils matérialisent les signaux commerciaux extérieurs (enseigne de magasin, logo sur un camion, slogan à la TV) par un report sur leur navigateur mobile.

Bien entendu, ces usages concernent plus largement les smartphones, à la nuance près que l’iPhone propose une ergonomie et un confort de navigation qui conduit à un plébiscite du surf chez ses utilisateurs. Tout ceci nous amène directement à la question qui tue : comment offrir une navigation optimisée pour un utilisateur nomade, zappeur et accédant à l’information via un écran de 320×480 pixels ?

Faire d’un utilisateur nomade un internaute efficace

Récemment confrontés à une refonte de notre site Internet, nous avons eu à analyser de près comment il était possible de « servir » du lunaweb.fr aux utilisateurs équipés de ce téléphone bigrement pratique.
Bien entendu, cette démarche s’inscrit dans un cadre plus large de réflexion sur les usages de notre site Internet.

Une première consultation de nos statistiques nous a renseigné sur le taux de consultation du site depuis un terminal mobile : relativement faible !

À bien y regarder, les chiffres d’audience nous indiquaient cependant deux choses intéressantes, qui nous motivaient à quand même « y aller » :

• le peu de terminaux mobiles qui y accédaient sont majoritairement des iPhones (merci les copains;-))
• les visites « mobiles » étaient souvent très courtes, trop courtes, et ne reflétaient pas le parcours « normal » d’un utilisateur « normal ».

Fort de ces observations, il nous a paru logique de penser qu’il nous faudrait penser en premier lieu au fond du site, plutôt qu’à sa forme. En effet, puisque l’on avait la chance d’attirer quelques curieux sur iPhone, pourquoi ne pas leur proposer une expérience de navigation vraiment utile et agréable ?

La genèse d'une application iPhone à succès - Things, de CulturedCode (©)

Possesseur de ce bout de bakélite signé de la pomme californienne, je suis moi-même très souvent confronté à la frustration de voir surfer sur un site « normal » depuis ce téléphone et de rencontrer les freins suivants :

• lisibilité des caractères, puisque toute la page est affichée, mais sur un écran représentant à peine le tiers des petits écran de PC !
• poids de la page, supposant une temps de chargement prohibitif, surtout quand on n’est pas en zone 3G (c’est-à-dire hors des villes
• présence d’espaces blancs non renseignés quand il s’agit d’encarts flash (ou pire, des textes que personne ne voit jamais « normalement »…)
• navigation pensée pour une souris, et pas pour un gros doigts glisseur (je hais les petits liens textes pas annoncés en tant que tels, je préfère de loin un gros bouton marquant le passage d’une page à l’autre)

Face à cela, et compte tenu de la période très courte pendant laquelle il est possible de capter l’attention d’un visiteur surfant sur votre espace Web depuis son siège de TGV, dans le métro ou le canapé ; il convient donc de constituer un mini-cahier des charges du site pour iPhone.

La mise en scène ergonomique du parcours utilisateur sur Iphone - © CulturedCode

Ce dernier sera très rapidement établi puisqu’il s’agit de :

• déterminer à quel(s) public(s) va s’adresser la version iPhone de votre site (quel public, quels type de navigants, quelle attente),
• sélectionner les contenus absolument essentiels qui doivent être communiqués, compte tenu de l’attente de vos visiteurs
• ré-écrire ces contenus pour plus de concision et de clarté (on taille à la serpe, si si !)
• réaliser un rapide wireframing reprenant la taille de l’écran iPhone afin de visualiser le rendu des textes
• prévoir une charte graphique allégée de votre site mobile
• réaliser des visuels clairs et adaptés à la taille de l’écran
• mettre en place un environnement de navigation propre à l’iPhone, en se basant sur un kit Web spécialement étudié pour cette interface (voir plus bas),
• concevoir un site « allégé », c’est-à-dire conçu pour un usage nomade et restreint.

La navigateur iPhone à la loupe

Vidéo du maniement du navigateur Safari

Développé par Apple, il est doté du navigateur internet Safari Mobile, une version light du navigateur grand frère, possédant le même moteur de rendu HTML.

Il réagit donc exactement de la même façon que la version Mac. Dans la mesure où vous maîtrisez les langages de base de l’Internet, comme le HTML, CSS ou encore Javascript ; la création d’un site pour iPhone se déroule de façon quasi identique à un site ordinaire.

Le principal avantage est qu’ici, l’iPhone n’acceptant qu’un seul navigateur (en tout cas pour l’instant), le souci principal d’un webmestre est alors écarté : pas de tests de rendus sur une multitude de navigateurs. Ce qui permet de gagner un temps considérable (pas de phase de débuggage à prévoir).

La contrainte du téléphone portable

Première contrainte lorsqu’on veut réaliser une version mobile de son site Internet : la taille de l’écran. Si l’on part désormais du principe que tout site « correct » doit respecter la résolution basique de 1024 pixels de large, pour 768 de haut (dimensions disponibles sur tout ordinateur normalement constitué, hors mini PC), on doit en revanche se contenter des tailles suivantes pour l’iPhone :

• 320×480 pixels lorsqu’il est utilisé verticalement,
• 480×320pixels lorsqu’il est utilisé horizontalement.

Ce qui est, il faut bien l’avouer, extrêmement limité. L’iPhone permet donc la lecture d’un site Web ordinaire (comprendre, une version non-mobile du site), mais son affichage sera tronqué et la lecture s’en verra affectée.

Convert, application pour iPhone, © Taptaptap.com

L’autre contrainte est le curseur, c’est à dire le pointeur avec lequel nous allons cliquer et ainsi naviguer dans le site. Pour un ordinateur, pas de souci : le pointeur est petit et précis, il permet de cliquer ET de survoler. Mais sur un iPhone, le pointeur se matérialise par votre doigt, qui est plus gros et donc moins précis.
Afin de rendre la navigation possible du bout des doigts, il convient donc de réfléchir aux tailles des boutons et autres liens pour que ceux-ci puisse être facilement cliqués (ou devrai-je dire « tapés »).

Enfin, l’appareil est portable et donc utilisé dans divers environs pas forcément propices à la lecture, provoquant des reflets lumineux qui affaiblissent la vue de l’écran. Il faut donc penser à l’utilisation de contrastes élevés entre les différentes zones matérialisant les espaces de navigation et ceux dévolus à la lecture.
Dans le même esprit, les liens seront facilement repérables et bien espacés, afin d’éviter aux gros doigts de saisir à la volée deux boutons ou deux liens hypertextes.

Construire un site iPhone, le détail technique

Il existe sur le Web une multitude d’outils permettant d’accélérer le travail inhérent aux basiques (frameworks, librairies Javascript et autres subterfuges CSS).

À l’instar du web « traditionnel », il vous est également possible de créer votre site pour iPhone en partant d’une page blanche ; mais certains outils ont été pensés spécialement à cet usage. Dans cet article, j’en citerai deux (pour les avoir testés) :

• Le premier est iUI développé par Joe Hewitt, par ailleurs développeur d’application pour Firefox (et notamment le créateur du plugin Firebug, tant aimé des webmestres). Très simple d’utilisation, ce framework est un package composé d’une feuille de style CSS, d’un gabarit HTML et d’un dossier/images/ permettant de développer des applications web pour iPhone. Très simple d’utilisation, il est en revanche à noter que cette ressource pêche par son manque d’actualisation, la faute à l’emploi du temps très chargé de son concepteur.
• Le second est WebApps : C’est notre préféré, nous l’avons utilisé pour réaliser la version iPhone du site de LunaWeb. Lui aussi très simple à mettre en œuvre, ce framework se propose de partir du look & feel d’une application native d’iPhone.

Il suffit alors de personnaliser le fichier CSS et d’entrer vos contenus en HTML afin de commencer à construire votre site mobile.

Le code est ouvert (sous licence open source), bien commenté et lui aussi constitué de 3 éléments principaux :

• un fichier index.html qui contient l’intégralité de vos pages,
• un fichier Javascript qui gère la navigation
• et un fichier CSS qui permet le design de votre site.

Code HTML de la version iPhone du site LunaWeb.fr

Rien de plus simple !

Tester son site iPhone sur PC ou Mac

Puisque vous savez comment construire la version spéciale iPhone de votre site, il convient désormais de tester le rendu de ce dernier dans un navigateur approprié. Le tester avec Internet Explorer, Mozilla Firefox ou même Safari « non mobile » reviendrait en effet à ne pas tester grand chose, puisqu’il est entendu que cette déclinaison mobile n’est « regardable » que sur le téléphone d’Apple.

La meilleure façon étant bien entendu d’avoir un iPhone sous la main, pour autant tout le monde n’en dispose pas sous la mais. Pour cela, la solution passe obligatoirement par l’utilisation de simulateurs iPhone.

iPhoney, simulateur d'iPhone pour Mac

Ces simulateurs, certains fidèles, d’autres moins, sont simplement des applications dotées de Safari mobile. Ils permettent de visualiser le rendu de son site à la manière d’un iPhone. Après en avoir essayé plusieurs, j’en ai retenu un seul : iPhoney.
Durant nos tests, ce petit soft s’est montré parfaitement fidèle au rendu vérifié par la suite sur le « vrai » téléphone, presque plus pratique à utiliser en phase de développement que l’objet communiquant Apple. Revers de la médaille, cette application n’est uniquement disponible pour Mac.

La détection iPhone sur mon site Internet

Votre site est donc prêt à être publié, et vous vous posez alors la question du où ? et du comment ? le mettre en scène. Puisqu’il est établi depuis le début de cet article qu’il s’agit bien de réaliser une version spéciale Iphone de votre site Internet, vous ne pouvez pas prétrendre installer ce domaine sur un nom de domaine en .mobi, qui priverait potentiellement tous les possesseurs d’appareils mobiles d’une version adaptée de votre site pour ces autres terminaux nomades.

Vous pouvez, en revanche, décider de mettre en place votre site iPhone sur une extension, une page ou un sous-domaine spécifique de votre site (du genre iphone.votredomaine.com ou bien votredomaine.com/iphone). Il faudra alors prévenir vos utilisateurs qu’une version spéciale de votre site existe à cette adresse.

Le chat se mord alors un peu la queue, car si vous choisissez cette solution, vous devrez « planquer » un lien « iPhone » tout au début de votre page d’accueil du site, afin que les utilisateurs provenant du mobile Apple. Le Web étant ce qu’il est, vous ferez alors subir un long temps de chargement à quelqu’un qui vous proposez une version allégée plus rapide après ce tunnel d’entrée un peu inutile.

Pour pallier à cela, vous pouvez opter pour une autre solution : détecter le type de navigateur accédant à votre nom de domaine principal, et servir la version appropriée de ce dernier selon la situation rencontrée :

• site « normal » pour les internautes sur Mac, PC ou Linux
• site « allégé » pour les mobilnautes (téléphones, PDA)
• site « iPhone » pour les gens équipés du célèbre téléphone

Chaque navigateur possède en effet ce qu’on appelle un «USER AGENT», une signalisation effectué par le navigateur lorsqu’il demande à accéder à une page. C’est cet agent qui va nous permettre de discriminer les différentes versions du site Internet duquel vous proposez une déclinaison mobile. Par le truchement du bout de code qui suit, que vous collerez dans votre fichier .htaccess à al racine de votre site, la version iPhone de votre site sera donc servie aux internautes équipés :

# Reecriture specifique pour appareils mobiles iPhone
RewriteCond %{HTTP_USER_AGENT} ^(.*)iPhone(.*)
RewriteRule ^(.*/)?$ mobile.php [L,QSA]

Ce script permet donc de jeter un œil sur le type de navigateur qui s’annonce et de re-diriger vers la page de votre site mobile (ici, en l’occurrence, mobile.php). Vous devez donc modifier la dernière ligne et renseigner le chemin vers votre site mobile.

Si vous désirez essayer ce script depuis votre ordinateur (il faut bien tester…), vous pouvez utiliser le plugin FireFox User Agent Switcher qui permettra de mentir sur la carte d’identité du navigateur « normal » pour le faire passer pour un « mobile ».

Votre site pour iPhone est alors en ligne, vous pouvez alors communiquer en direct avec les possesseurs du téléphone en leur délivrant un fond et une forme exclusive.
Il est totalement possible, par exemple dans le cas d’une petite pizzéria de quartier, de décider que la déclinaison iPhone du site ne comportera qu’une seule page constituée :

• d’un logo,
• un numéro de téléphone (cliquable pour appeler d’un seul « tap »)
• un lien de localisation GPS pour l’itinéraire (puisque l’iPhone embarque Google Maps),
• et mêmes d’un message exclusif type « coupon -20% pour les possesseurs d’iPhone ».

La détection iPhone sur le site de LunaWeb

Nous aussi nous nous sommes prêtés au jeu, nous avons lancé un chantier de création d’une version mobile de notre site, et nous en avons même fait un récit intitulé LunaWeb Mobile.

Enfin, n’hésitez pas à nous consulter afin de vous faire accompagner dans cette démarche.

À lire sur le même sujet :

Application iPhone ou site mobile iPhone ?
Coder le Web pour les mobiles
Créer l’icône de son site Web pour Iphone/Ipod Touch

Une manifestation exceptionnelle

Dans le cadre de Nantes Estuaire 2009, et en partenariat avec SFR, une application iPhone spécialement dédiée au parcours culturel et artistique d’Estuaire. Rappelons que cette manifestation culturelle organisée par les Pays de la Loire se déroule du 5 juin au 16 août et a pour théâtre l’estuaire de la Loire de Nantes à Saint Nazaire.

Celle-ci permet très simplement de pouvoir bénéficier au creux de la main de l’information détaillée sur les œuvres exposées, le tout commenté par Jean Loisy (le conseiller artistique de cette manisfestation).

Infos culturelles donc, mais également toutes les infos pratiques :

• détail du programme Estuaire 2009,
• descriptif des œuvres,
• commentaires audio,
• œuvres en images (des illustrations de Quentin Faucompré),
• localisation géographique des œuvres.

Le tout en français ET en anglais !

Une application iPhone gratuite

Pour pouvoir en bénéficier gratuitement, il suffit de suivre le lien suivant, ou d’aller sur l’Apple Store, de taper Estuaire 2009, de cliquer sur l’icône puis sur « télécharger ».

Un petit clic pour ouvrir l’application et toutes les oeuvres du parcours apparaissent. Quand on en choisit une, un résumé s’affiche, accompagné d’un commentaire audio d’environ 3 minutes. « Chacune des oeuvres, Jean de Loisy (critique d’art) la décrit comme s’il était devant et qu’il s’adressait à un public », assure Jean Blaise, directeur d’Estuaire. Il est aussi possible de géolocaliser les œuvres sur une carte (via un module Google Maps très bien intégré).

Marier les technologies

Une très belle initiative donc, qui démontre combien les usages induits de l’iPhone sont innombrables et peuvent servir des objectifs très variés. Il convient de noter que cette application réussit à marier idéalement plusieurs technologies offertes par l’iPhone :

• la cartographie Google Maps couplée au GPS du téléphone,
• le baladeur audio permettant la lecture des commentaires,
• le navigateur web qui donne à lire les informations propres à chaque œuvre.

En savoir plus

• le site officiel Estuaire 2009,
• la page d’aide sur le site officiel Estuaire 2009 concernant l’installation de l’apllication,
• le site SFR jeunes Talents Développeurs,
• l’article sur les 1000 de l’Ouest.

Et ça continue…

Dans la même veine, et toujours autour de Nantes (décidément), saluons l’initiative de la Communauté de communes et l’Office de tourisme de la Vallée de Clisson, qui lancent Mobil’iti, guide touristique multimedia accessible depuis un iPhone, réalisé par Latitude-Gallimard et Sedona, en partenariat avec Orange.

Depuis le 4 juillet, des iPhone sont loués à l’office de tourisme de la Vallée de Clisson et l’application est, pour ceux qui en possèdent déjà un, accessible depuis l’Apple Store..

Cet outil propose six parcours de visite, avec commentaires, ambiances sonores et témoignages audiovisuels, de vidéos et d’animations, avec des infos historiques, patrimoniales, culturelles ou pratiques, plus de 200 sites sont présentés, un plan interactif, deux versions : français/anglais.
Infos sur www.mobiliti-valleedeclisson.fr, (source : Des actus pour tous).

Et vous, avez-vous connaissance de ce genre d’applicatifs touristico-ludiques ?

J’ai souvent besoin de faire des captures d’écran à la volée (retours de briefs, détails d’intégration xHTML, démos…), et je trouve ça très handicapant d’avoir à retourner sur le bureau, retrouver ma capture puis la glisser vers un programme, sachant qu’ensuite il faudra faire le ménage car de nombreuses captures peuvent vite s’y s’entasser !

Je suis parvenu à une solution facile à mettre en place, qui convient parfaitement à une utilisation quotidienne intensive, et surtout, gratuite…

1. J’ai changé mon dossier de réception des captures (via le prefpane Secrets http://secrets.blacktree.com )
2. Mes screenshots atterrissent dans Bureau/Captures (au lieu du bureau lui-même)
3. J’ai fait une pile dans le dock avec ce dossier (trier par date de création ou d’ajout)
4. Chaque nouveau screenshot apparaît en premier dans le dock (cf capture)
5. Il ne reste plus qu’à glisser-déposer la capture vers l’icône mail ou la fenêtre iChat et envoyer

Non LunaBlog n’est pas mort ! Il renaît de ses cendres et vous souhaite une année 2009 tonitruante !!!

Apple Remote Desktop 3 (ARD), le logiciel permettant de prendre le contrôle à distance d’une machine sous Mac OS X, nécessite que les ports 3283 et 5900 en UDP et TCP soient ouverts.

Pour cela, il suffit de vous connecter à l’administration de votre routeur ou de votre box (Freebox par exemple) et d’aller dans l’administration des services de routage afin d’ajouter 4 plages d’ouverture de ces 2 ports (sur 2 protocoles, TCP et UDP). Il suffit alors d’ajouter vers quelle IP de l’ordinateur de votre réseau local renvoyer le flux concernant ARD (= la machine que vous souhaitez contrôler).

Voici par exemple l'interface Freebox permettant d'autoriser Apple Remote Desktop à dialoguer avec un ordinateur à distance

Récemment, Apple a sorti une nouvelle mouture du logiciel pilotant les iPhone et les iPod Touch. Au menu des nouvelles foncitonnalités, la possibilité de créer une icône raccourci dans le tableau de bord de l’appareil. Un raccourci vers quoi ?

Vers un site favori pardi ! Voici donc l’astuce permettant de créer sur votre site Web un icône spécial iPhone/iPod Touch, car par défaut l’appareil génère un aperçu de la première page pour créer l’icône, ce qui ne donne pas forcément un résultat des plus esthétiques.

Alors comment créer ces WebClip Bookmarks, comme les appelle si bien Apple ? Eh bien il faut commencer par créer sur votre logiciel d’édition graphique favori un icône de 57×57px que vous nommerez

apple-touch-icon.png

Ensuite, on apprend à la lumière de la documentation fournie par Apple qu’il existe plusieurs moyens d’intégrer votre image au navigateur Mobile Safari utilisé par votre téléphone ou baladeur favori.

Parmi les méthodes, la plus simple et logique consiste à faire usage de la balise LINK à l’intérieur de l’entête HEAD de votre page, par l’intermédiaire d’une ligne similaire à celle-ci :

link rel="apple-touch-icon" href="images/apple-touch-icon.png"

Safari retraitera automatiquement votre image pour lui ajouter l’effet glossy des autres icônes, et ainsi faire de votre raccourci un élément à part entière du Springboard (le tableau de bord de l’appareil).

Quoi de plus classieux qu’un bon vieux « baaaaw » au démarrage de votre Mac alors même que vous aviez décidé de vous la jouer discret à cette conférence sacrément silencieuse ?

Voici un plugin pour désactiver le son des Mac au démarrage, totalement indépendant de votre système de gestion du son habituel, et qui n’intervient donc que lors du lancement du système d’exploitation pour désactiver le joli son système qui vous fait tant rougir à certaines occasions…

Installer Internet Explorer 5 à 7 version PC afin de tester directement sur Mac OS X ses sites, sans avoir à installer Parallels ou BootCamp ?

C’est possible !! Grâce à ies4osx et quelques ajouts supplémentaires (Darwine et X11), tester le rendu d’un site en cours de production est réalisable d’un simple clic dans son dock. Il était en effet sacrément fastidieux de devoir lancer une machine virtuelle rien que pour un navigateur, quand il ne fallait pas tout simplement redémarrer le Mac pour le faire booter sur Windows !

Cette application, sous licence logicielle libre évidemment, requiert cependant quelques pré-requis :

• que vous ayez une machine à processeur Intel,
• que vous ayez installé X11 depuis votre DVD d’installation de Tiger
• que vous n’utilisiez pas de proxy pour vous connecter à Internet

Cet outil va vite devenir un must-have parmi la communauté des web développeurs officiant sous Mac, tant elle est simple d’utilisation et d’une utilité cruciale pour els tests utilisateurs et de rendu.

Une fois n’est pas coutume, il s’agit de se laisser griser par une attitude consumériste, que je raille souvent, mais que j’ai eu la faiblesse d’imiter ces derniers jours. Alors oui, j’ai acheté un iPhone, et oui, j’ai acheté des accessoires pour le protéger, le personnaliser et étendre ses fonctions.

Cela me faire quand même sérieusement penser à la formidable manne commerciale qu’apportent tous ces petits joujoux hyper-technologiques aux sociétés éditrices. Des objets vites caduques, donc à renouveler fréquemment. C’est fou ce qu’il est possible de mettre comme argent dans des accessoires de mauvaise facture, édités en masse et vite convertis en must-have non seulement chez les d’jeunes (gros consommateurs de marketing mobile), mais aussi et surtout chez les 25-50 ans qui se sont vite remis dans le coups grâce aux écouteurs blancs siglés la Pomme…

Enfin, moi aussi je suis tombé dedans donc no comment…

» Télécharger le guide d’achat des accessoires iPod et iPhone