Communautés iWeb: Blog

Le nouveau téléphone mobile de Google a été lancé aux États-Unis cette semaine, disponible sur l’opérateur T-Mobile, et presenté comme un compétiteur direct à l’iPhone 3G de Apple.

Même si la couverture média a été succincte comparée au lancement du iPhone, le G1 et spécalement la plateforme Android amène des innovations uniques, avec une plus grande liberté et une meilleure plateforme pour les applications mobiles tierces. La compagnie achetée par Google il y a quelques années de cela apporte un logiciel “open source” avec un ensemble d’outils complets qui vont amener sur le marché beaucoup de téléphones et gadgets utilisant Android. Par exemple, Locale est une application qui peut changer le comportement du téléphone selon la situation et la localisation géographique, comme par exemple alerter l’usager s’il arrive proche d’une boutique, ou changer automatiquement la sonnerie du téléphone si on est en réunion, une fonctionnalité impossible techniquement sur le iPhone. Et ça a été developpé par une petite équipe d’étudiants. Imaginez ce qui peut arriver dans les prochains mois et années.

C’est un modèle complètement à l’opposé du système fermé d’Apple. Même si le iPhone 3G est aujourd’hui un appareil meilleur en matière logiciel et matériel comparé au G1, Android va générer dans le futur des applications plus diverses et avec plus de fonctionnalités, plus d’appareils provenant de plusieurs constructeurs, avec un choix de prix, de styles, et aussi disponibles sur plus d’opérateurs télécoms.

Maintenant, si vous voulez développez des applications pour Android, ce n’est pas évident. Même s’il a une bonne documentation, Android utilise Java, plus un tout nouveau “framework”; et sauf si vous avez déjà l’expérience, on est dans le domaine d’applications desktop que des applications web, ce qui requiert plus de temps et d’argent.

Si tous les blogues et médias ont couvert les applications mobiles natives, il ne faut pas oublier l’essentiel: le navigateur web d’Android est basé sur WebKit, l’engin utilisé sur le iPhone, Safari 3 (disponible sur Windows et Mac), le navigateur Google Chrome, Adobe AIR, et bien d’autres téléphones mobiles comme les séries N60 et E de Nokia.

Pour moi, le téléphone de Google célèbre la suprémacie de WebKit, et signifie maintenant que tout projet web doit l’intégrer.

Bien sûr, il y a toujours Opera et Internet Explorer mobile, mais si vous les comparez, il n’y quasiment pas de compétition:

• WebKit est le plus rapide, en terme d’affichage du CSS et javascript
• WebKit est meilleure pour la compatibilité matérielle, avec des exigences minimales en terme de mémoire et de CPU
• c’est un candidat de choix pour d’autres futurs navigateurs: le code est plus petit et plus facile à implémenter.
• plus de fonctionnalité, avec les améliorations progressives, masques, gradients and transformations CSS, contours aroundis, etc.

La conclusion est que si vous optez pour le développement mobile, alors choisissez de faire un site web optimisé pour WebKit. Si vous avez déjà un site web existant, qui s’affiche déjà très bien sur Safari, alors le site devrait s’afficher très bien aussi sur Android.

Voici quelques conseils pour optimiser votre site pour des appareils mobiles utilisant WebKit:

• comme le iPhone, le G1 a un écran limité à 320 px en largeur, et 480 pixels de haut
• differences dans l’usage: vous devez assumer que l’usager est mobile, et que la tâche et le contenu doivent être orienté au scénario spécifique. Les usagers ne cherchent pas normalement à lire de longs textes et articles … à moins qu’ils sont bloqués dans un train ou dans un bus.
• au lieu de faire des animations javascripts avec des librairies comme jQuery ou scriptaculous, utilisez à la place des animations et transformations CSS
• Limites pour fichiers et plugins: comme pour le iPhone, Android a des limites sur la taille des fichiers et ne supporte pas non plus Adobe Flash
• N’oubliez pas tester les pages sur Safari. Ce que j’ai fait est d’avoir un lien dans la barre d’outils qui change la taille du navigateur à 320×480

Voici une ligne pour avoir une mise en page CSS spécifique pour Android:


<!--[if !IE]>–> <link media="only screen and (max-device-width: 480px)" href="android.css" type="text/css" rel="stylesheet" /> <!–<![endif]–>

À partir de là, vous pouvez introduire des lignes spécifiques dans le fichier android.css:


#sweeping_div {
-webkit-transition-property: left;
-webkit-transition-duration: 500ms;
-webkit-transition: background-color .25s linear;
}


Une alternative est d’utiliser la librairie “native skin” de Joe Hewitt, qui vous donne instantanément des animations, boutons et comportements optimisés pour la navigation mobile. Ils étaient développés pour le iPhone, mais comme les 2 utilisent WebKit, le javascript et le CSS devraient marcher sans fautes.

Bon courage pour le développement web mobile, et n’hésitez pas à rajouter vos commentaires en bas.