Articles

Premières impressions sur iOS 5

/0 Commentaires/dans /par

J’ai pu sans trop de soucis mettre à jour mon iPad 2 avec la nouvelle version du système d’exploitation mobile d’Apple, iOS5. Dans l’ensemble, cette mise à jour est plutôt bien pensée, même si certains choix de iDevice cible  sont parfois difficilement compréhensibles.

Passons tout de suite sur l’absence de Siri pour l’iPad 2, alors qu’à priori les caractéristiques de l’iPhone 4s sont similaires à celles de l’iPad 2. C’est de bonne guerre que cette fonction phare d’iOS 5 soit (pour le moment espérons-le) réservée au lancement du nouveau vaisseau amiral des smartphones à la pomme.

L’objet principal de cette nouvelle mouture, c’est vraiment de couper le lien avec le PC/Mac, et de permettre une utilisation complètement autonome, de l’activation jusqu’à la sauvegarde en passant par la synchronisation avec votre bibliothèque iTunes.

Ce que j’ai aimé :

– Le nouveau centre de notifications, qui s’affichent enfin de manière non intrusives sur l’écran. iOS rattrape enfin la concurrence sur un aspect du design du système qui me paraissait très en dessous des standards Apple. Tout se règle dans l’application Réglages > Notifications. Vous avez deux tableaux l’un en dessous de l’autre (Dans ou hors du centre de notifications), mais vous pouvez faire passer les applications de l’une vers l’autre. C’est ainsi que sur mon iPad, la messagerie n’était pas par défaut dans le centre de notifications.

– Le clavier qui se  sépare en deux pour permettre une édition plus facile sur l’écran large de l’iPad. Au début, ce n’est pas facile à utiliser, on a tellement l’habitude de taper de manière non rationnelle avec les deux mains sans vraiment distinguer les deux parties du clavier !

– Quelques modifications cosmétiques dans l’application Musique (ex iPod), mais également la possibilité de supprimer des morceaux de musique directement sur votre appareil sans vous connecter à iTunes.

– Les améliorations dans Safari Mobile : rapidité accrue, gestion des onglets, listes de lecture pour pouvoir lire des pages web plus tard (à l’instar de Read It Later par exemple), et surtout lecteur pour éliminer tout ce qui est autour des articles pour se concentrer sur le contenu.

– L’intégration de Twitter au système. : cela permet de créer des tweets sur tous les éléments des applications système (Safari, Photos, Youtube, etc), un peu comme on pouvait déjà le faire avec le mail. En plus, on peut gérer plusieurs comptes Twitter !

Ce que j’ai moins apprécié

– L’application Rappels, qui permet (enfin !) de gérer nativement les tâches dans iOS, c’est plutôt une bonne chose ; mais pourquoi réserver les notifications géographiques aux seuls iPhones 4 et 4s ?

– L’application Kiosque qu’on ne peut pas classer dans un dossier ! Elle est obligatoirement sur l’une des pages de l’interface de l’iPad. Pour une application que je n’utiliserai jamais !

Développer pour les plateformes mobiles avec jQuery Mobile 1ère partie

/0 Commentaires/dans /par

Je me suis remis à Rails voici quelque temps en développant un projet de carnet d’adresses. La version « classique » fonctionnait relativement bien, mais j’avais envie de proposer également un rendu spécifique pour les plateformes mobiles. Utilisant déjà jQuery dans mon application, je suis allé voir ce qu’ils proposaient pour « mobilifier » une application Web.

Dans un premier temps, alléché par le screencast de Ryan Bates sur le sujet, je me suis tourné vers jQTouch, qui ciblait les appareils iOS. Mis à part quelques petits soucis au niveau des boutons « Back », ce plugin remplissait correctement son rôle.

Mais voici quelques semaines, je suis tombé sur jQuery Mobile, le plugin « officiel » qui remplissait la même fonction tout en étant plus complet en ce qui concerne les plateformes supportées. Cela se fait au détriment d’une apparence moins centrée sur l’iPhone/iPad, mais le jeu en vaut la chandelle.

Structure d’une page

Je ne reviens pas sur la mise en place d’une application mobile, consultez le screencast de Ryan Bates pour plus d’information. La mise en place de jQuery Mobile est assez similaire à celle de jQTouch ; on modifie le markup des fichiers  mobile.erb, en commençant par le layout principal :

<!DOCTYPE html>
<html>
<head>
  <title><%= t(:"general.title") %></title>

  <%= stylesheet_link_tag "/jquery.mobile/jquery.mobile-1.0b2.min.css" %>
  <%= javascript_include_tag 'jquery-1.6.2.min.js' , :charset => "utf-8" %>
  <%= javascript_include_tag '/jquery.mobile/jquery.mobile-1.0b2.min.js' , :charset => "utf-8" %>
  <%= javascript_include_tag 'jquery.scrollExtend.min' %> 	

  <%= csrf_meta_tag %>
  <%= yield(:head) %>
</head>
 <body>
  <div data-role="page"  >
    <div data-role="header" data-theme="b" >
      <%= yield :back %>
      <h1><%= yield :title %></h1>
      <%= yield :button %>
    </div>
    <div data-role="content">
      <% unless flash.empty? %>
        <div>
          <%- flash.each do |name, msg| -%>
            <%= content_tag :div, msg, :id => "flash_#{name}" %>
          <%- end -%>
        </div>
      <% end %>
      <%= yield %>
    </div>
<div style="text-align:center;font-size:12px;color:grey;" ><%= t(:"general.title") %> <%= "v"+APPLICATION_VERSION %> - <%= raw t(:"general.copyright") %></div>
  </div>
 </body>
</html>

J’ai choisi pour des raisons de commodité de développement d’insérer les fichiers .js de jQuery Mobile directement dans mon projet, mais vous pouvez bien sûr les laisser pointer vers les adresses officielles.

La structure d’une page jQM est relativement simple :

<div data-role="page"  >
  <div data-role="header" data-theme="b" >
  </div>
  <div data-role="content">
  </div>
  <div data-role="footer">
  </div>
</div>

Une « page » contient un en-tête (header), du contenu (content) et un pied de page (footer). Je ne me suis servi que du header et du content pour ce projet, comme vous le constatez dans mon code. Il est également possible d’avoir plusieurs pages dans le même fichier, en leur donnant des ids différents, mais celà ne cadre pas avec la philosophie de Rails.

Un en-tête variable pour vos pages avec yield

Sur la plupart des plateformes mobiles, l’en-tête de la page est réservée à la navigation et aux actions de l’application. Cette partie est hautement variable, puisqu’elle va dépendre de l’action que l’utilisateur est en train de réaliser.

Choix du filtrePar catégories

Comme vous le voyez ci-dessus, sur la page de choix du filtre , le bouton déconnexion est affiché ; sur la page suivante, c’est le bouton Retour.

Le problème, c’est que pour des raisons de simplicité et de maintenabilité, nous avons inséré la structure de la page jQM dans le layout principal, et non dans chaque vue  de l’application Rails. Heureusement, notre framework favori nous offre une solution élégante grâce à la fonction yield.

Vous avez forcément déjà utilisé yield pour passer au layout principal le code html de votre vue ; mais cette fonction permet de passer plusieurs élément de la vue vers un layout en nommant chaque yield. Si nous revenons sur le code de l’en-tête :

<div data-role="header" data-theme="b" >
  <%= yield :back %>
  <h1><%= yield :title %></h1>
  <%= yield :button %>
</div>
Nous allons pouvoir passer au layout trois éléments distincts :
  • Le bouton « back » ou autre élément sur la gauche de la barre d’en-tête
  • Le titre de la page
  • Un bouton « button » affiché à droite de la barre d’en-tête
Pour insérer notre titre et le bouton retour tel que vu sur la page d’affichage des catégories, il suffit d’insérer en haut de votre fichier de vue les codes suivants :
<% content_for :back do %><%= link_to "Retour", nil, :'data-rel'=>"back",:'data-icon'=>"arrow-l" %><% end %>
<% content_for :title do %><%= "Catégories" %><% end %>
La première ligne va afficher le bouton Back, avec une icône prédéfinie de  jQM (arrow left). La seconde va renvoyer un texte qui sera affiché comme titre de la fenêtre.
Dans le prochain article, nous parlerons des listes et de leur gestion avec Rails et JQuery Mobile.

Mes applications préférées pour l’iPad

/0 Commentaires/dans /par

L’un des avantages de l’ipad sur la concurrence Android reste – pour l’instant – le foisonnement d’applications disponibles sur l’AppStore. Mais quelles sont les applications réellement indispensables au nouveau possesseur de la tablette d’Apple ? Laissez-moi partager avec vous ma sélection personnelle.

Top 5

Garageband

20110406-224622.jpg
Un groupe rock dans votre iPad ? C’est possible ! J’avais déjà essayé Garageband sur Mac sans être convaincu, car entrer de la musique en cliquant sur un clavier virtuel ne m’avait pas paru pratique. Là, au contraire, vous manipulez directement les instruments sur l’écran : basse, batterie, guitare, claviers – et très certainement d’autres instruments qui viendront les compléter plus tard, moyennant un léger supplément.

Chaque instrument est décliné en version normale et en « SmartInstrument » qui permet très simplement de jouer une ligne de basse ou des arpèges a la guitare en effleurant la note de base. Vous disposez de huit pistes pour mélanger vos morceaux, ce qui est largement suffisant vu la cible de l’application.

Bref, fun, beau, efficace que demander de plus ? Un peu plus de stabilité, Garageband ayant déjà planté deux trois fois en utilisant la guitare ou la basse.

Flipboard

20110406-224939.jpg
Je cherchais un aggrégateur de flux qui soit une alternative (ou un complément) à Netvibes que j’utilise régulièrement. Et je suis tombé au fil de mes lectures sur Flipboard, qui est une de ces applications « magiques » pour l’ipad : vous transformez vos flux en un véritable magazine en ligne.

Des canaux en anglais sont disponibles, ainsi que de quoi ajouter votre compte Facebook ou Twitter. Vous pouvez également créer votre propre chaine en ajoutant votre compte Google Reader (qui permet d’agréger plusieurs flux) ou des flux RSS unitaires.

Dropbox

20110406-22807.jpg
Une des premières interrogations lors de la prise en main de l’ipad, c’est de trouver comment transférer ses fichiers de son ordinateur vers l’iPad ; tant que vous restez dans l’écosystème Apple, pas de problème. Par contre, comment transférer des fichiers vers l’iPad hors iTunes ?

C’est là qu’intervient Dropbox, qui permet de synchroniser une arborescence de fichiers présents sur votre PC ou Mac vers l’iPad. Lorsque vous sélectionnez un fichier dans l’interface de Dropbox pour iOS, il vous propose soit de le visualiser directement dans l’interface de Dropbox, soit de l’ouvrir dans une des applications installées sur votre iPad.

IBooks

20110406-222235.jpg
iBooks est proposé au téléchargement lors de l’activation de votre iPad. Ne vous en privez surtout pas, c’est vraiment un régal à l’utilisation ! D’autant que de très nombreux ouvrages classiques sont disponibles au téléchargement, en particulier sur le site du projet Gutenberg, où, contrairement à ce qui indiqué sur le site, le téléchargement direct des livres permet bien de les récupérer directement dans iBooks.

AVPlayerHD

20110406-224304.jpg
Enfin, un des principaux reproches fait à l’iPad par les fans d’Android : pas de support des formats vidéos type divx sur l’iPad. Et en effet, en standard, l’application Video ne supporte que les vidéos issues de iTunes. Mais nombre de lecteurs multimédias ont fait leur apparition sur le store pour remplir le vide laissé.

J’ai fixé mon choix sur AVPlayerHD, qui supporte la plupart des formats vidéos, gère les sous-titrées (bien penser à passer en encodage UTF-8), et intègre plusieurs moyens de transférer vos vidéos : directement à partir d’ITunes, ou en utilisant le transfert par Wifi. Cette dernière possibilité est rendue possible par l’intégration d’un mini serveur dans AVPlayerHD, auquel vous pouvez vous connecter en tapant dans le navigateur de votre PC l’adresse qui vous est indiquée ; n’oubliez pas le numéro de port si celui-ci est différent du port 80, port standard pour les serveur web.

Je continuerai cette exploration des applications pour l’iPad dans un prochain billet, pour vous faire découvrir mes choix concernant les applications de productivité (eh oui, on ne fait pas que consommer avec l’IPad !), les jeux, etc.