A l’occasion du recyclage d’un vieux PC, j’ai eu l’occasion de rejouer une installation complète de RVM, dont je note ici les différentes étapes. Notez bien que cette installation n’est valable que pour l’utilisateur courant.

• Ouvrez le Terminal d’Ubuntu
• Optionnel : installez curl et git s’ils ne sont pas encore installés

sudo apt-get install curl git

• Placez vous dans votre répertoire home

cd ~

• Installez la dernière version de RVM

bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )

• RVM s’installe dans  ~/.rvm/  ; à la fin de l’installation, ajoutez le chargement de RVM dans votre shell

echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile

• Fermez votre Terminal, puis rouvrez le.
• Tapez rvm list known : rvm doit vous donner la liste de toutes les version de Ruby disponibles
• Installez également les paquets suivants qui sont requis par RVM

apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion

• Pour installer la version 1.9.2 de Ruby, tapez :

rvm install 1.9.2

• L’installation de Ruby commence. Lorsqu’elle est terminée tapez :

rvm --default ruby-1.9.2

• Rvm doit vous indiquer avoir sélectionné la version 1.9.2 de Ruby, qui sera utilisée par défaut lorsque vous ouvrirez un terminal. Pour vérifier, tapez :

ruby -v

• Ruby doit alors vous indiquer son numéro de version. Tout fonctionne ! Pour changer de version de Ruby, installez-en une autre puis utilisez la commande suivante :

rvm use <no_version>

• Par exemple

rvm use 1.8.7

• Pour installer Rails, tapez la commande suivante (en rajoutant -v=x.x.x si vous voulez installer une version précise) :

gem install rails

• Optionnel : si comme moi, vous avez un message d’erreur en installant rails indiquant l’absence de zlib, vous pouvez essayer les commandes suivantes :

rvm pkg install zlib
rvm remove 1.9.2
rvm install 1.9.2

• Relancez ensuite l’installation de Rails

Pour démarrer

Pour démarrer le développement sous iOS, il vous faut :

• Un Macintosh Intel sous MacOS X 10.6 (Snow Leopard) ou MacOSX 10.7 (Lion)
• Un compte développeur Apple, pour pouvoir télécharger le SDK (Software Development Kit). Il existe deux niveaux d’accès en tant que développeur : le premier est gratuit, mais ne permet pas d’exécuter les applications développées autrement que dans le simulateur (sur votre Mac, et pas sur un appareil iOS) ; le second est payant ($99 par an), mais permet d’exécuter vos applications sur un iPhone ou un iPad, ainsi que de publier vos applications sur l’AppStore. Enfin, cet abonnement permet de télécharger la version Snow Leopard d’XCode 4, la dernière version de l’environnement de développement d’Apple. Une version payante pour Lion est disponible dans l’AppStore Mac OS X, ainsi qu’une version gratuite de la version 3 d’XCode (mais je ne vous la recommande pas, elle commence à dater).
• Un iDevice pour pouvoir tester en vraie grandeur vos applications. la solution la moins onéreuse, c’est l’iPod Touch qu’on trouve maintenant à partir de 199€ ; mais si vous voulez utiliser des fonctions spécifiques à l’iPhone ou à l’iPad (téléphone, géolocalisation, etc.), il vous faudra acquérir ou vous faire prêter le matériel adéquat.

Créer son projet

Une fois XCode installé, vous pouvez le lancer pour commencer notre projet. Vous arrivez sur la fenêtre suivante :
Cliquez sur Create a new XCode Project. Comme c’est un projet d’apprentissage, nous allons choisir comme modèle Empty Application.
Choisissez ensuite :

• Un nom à votre projet : c’est celui qui sera par défaut affiché comme nom d’application.
• Votre identifiant de société : peut être l’adresse de votre site web en commençant le Top Level Domain (com, fr, org, etc)
• La variable Class Prefix est également importante puisqu’on la retrouvera devant les objets créés automatiquement par XCode.
• L’appareil cible : iPad, iPhone ou Universal pour les applications qui tourneront sur les deux types d’iDevice.
• Trois cases à cocher sont ensuite disponibles : nous allons cocher Use Core Data afin qu’XCode initialise un peu de code pour gérer la persistance de vos contacts (c-a-d leur stockage dans une base de données). Les deux autres permettent de gérer automatiquement la mémoire de votre application, et d’inclure l’architecture des tests unitaires qui si vous les écrivez, vous permettront de vérifier que les modifications dans votre code ne cassent pas votre application. Nous les laisserons de coté pour ce premier exemple.

Cliquons ensuite sur le bouton Next. La boite de dialogue suivante permet de choisir l’emplacement de votre projet sur votre disque ; cochez également la case Create git repository for this project, afin de pouvoir gérer vos modifications de code facilement avec Git.
Cliquez sur le bouton Create : Votre projet est créé, nous allons pouvoir commencer à rentrer dans le vif du sujet…
La suite au prochain épisode !

Layout => Vue => Partial

Nous avons vu dans l’article précédent l’architecture du Layout, et une partie de la vue elle-même,dont le code complet est donné ci-dessous :

<% content_for :back do %><%= link_to t(:"general.back"),  params[:category] ? categories_path : root_path, :'data-direction'=>"reverse", :'data-icon'=>"arrow-l"  %><% end %>
<% content_for :title do %><%= params[:category] ? Category.find(params[:category]).name : t(:"contact.all") %><% end %>
<% content_for :button do %> <%= link_to t(:"contact.add"), new_contact_path, :'data-icon'=>"add", :rel => "external" %> <% end %>
<%= render "contacts_list" %>

Dans jQM, l'architecture d'une liste est la suivante :

<ul data-role="listview">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

L’adjonction du data-role « listview » à une combinaison classique ul/li permet de générer une liste dont le rendu est similaire à celui trouvé sur les applications mobiles.

Le code source du Partial est le suivant :

<ul id="contactslist" data-role="listview"  data-filter="true" data-filter-placeholder="Filtrer la liste..." data-inset="true" class="separator">
  <% @contacts.each do |contact| %>
      <li class="contact"><%= link_to  contact.listname, contact %></li>
    <% end %>
</ul>

Les paramètres passés dans le tag <ul> sont les suivants :

• data-role : doit être égal à « listview » pour être reconnu par jQM comme une liste.
• data-filter : si positionné à TRUE, permet d’afficher un champ de filtre au-dessus de la liste ; ne filtre que les données existant dans la liste, alors attention à la pagination !
•  data-filter-placeholder : permet de modifier le texte par défaut  affiché dans le champ de filtre.
• data-inset : si positionné à TRUE, permet d’avoir une liste qui ne s’étend pas d’un bord à l’autre de la fenêtre, mais qui laisse un espace sur les bords de la liste ; la première et la dernière cellule voient de plus leurs bords s’arrondir.

Dans le prochain article, nous verrons la création de formulaires avec jQM. D’ici là, n’hésitez pas à laisser vos commentaires !

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 !

La nouvelle nous a tous pris de court ce matin, Steve Jobs nous a quitté. Il y a peu d’entrepreneurs qui auront suscité ce sentiment d’intimité avec ce qu’il faut bien appeler ses fans ; car plus qu’un visionnaire / inventeur / génie marketing, Steve Jobs était la seule rock star de la Silicon Valley.

Un mélange de Brian Wilson pour l’obsession du détail, de John Lennon pour la vision, de Mick Jagger pour l’aptitude à faire le show…

En apprenant sa mort, je me suis remémoré ma première rencontre avec Macintosh. C’était à l’Ecole Technique Supérieure des Municipalités, à Addis Abeba, Ethiopie, où je faisais mon service civil. Après avoir tapé mon mémoire de fin d’études sur un PC avec Word, en utilisant toutes les ressources du clavier et mon imprimante Epson pour faire varier la typographie, je me retrouvais dans un environnement full Mac, du Mac 512k à disquettes jusqu’au Mac Plus avec 1 Mo de mémoire et un disque dur ! A moi les polices de caractères avec Adobe Type Manager, l’affichage tel qu’imprimé, le finder et la souris !

En rentrant en France, j’ai continué à travailler sur Mac : Mac II ci tout d’abord, puis PowerMac 6100. Et même si j’ai depuis abandonné (contraint et forcé !) la marque à la pomme pour mon activité professionnelle, Apple s’est invité dans ma vie digitale avec l’iPod et l’iPad.

Merci Steve.

Il semblerait donc que l’iPad et les tablettes Android soient déjà dépassées par Windows 8 pour tablettes. La « vox sociali » a parlé, l’oracle a livré son verdict, Google et Apple peuvent d’ores et déjà abandonner la partie !

On avait déjà les sondages, qui prédisaient le destin des marques et des hommes politiques, nous avons maintenant « l’analyse » (avec quels outils ?) de la grande caisse de résonance du web ; l’analyse du commentaire sur le buzz fait lui même le buzz. On nage en pleine pataphysique !

Je suis sûr que Tim Cook et Larry Page pleurent dans leurs bureaux respectifs :) J’espère surtout que Steve Ballmer va continuer à améliorer Windows 8 pour que son rêve du « one size fits all », un seul OS pour tous les supports ne finisse pas en eau de boudin…

PS : en consacrant un article à cette news, je participe au buzz ! La boucle est bouclée, pas moyen d’en réchapper !!

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.

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>

<% content_for :back do %><%= link_to "Retour", nil, :'data-rel'=>"back",:'data-icon'=>"arrow-l" %><% end %>
<% content_for :title do %><%= "Catégories" %><% end %>

Daté, mais inspiré comme d’habitude.

1ère partie

2e partie

L’habitat éco-responsable

Le site original pour lequel j’ai traduit arthemia.

Lien : www.habitat-eco-responsable.fr

Association Ada France

Lien :  www.ada-france.org

Un tour du monde et puis revient

Lien : www.fabonroad.fr

Plateau Télé

Lien : plateautele.francetv.fr

Délégation socialiste française au Parlement européen

Lien : www.d-s-f.net

Thème astral

Lien : www.guide-astro.fr

Ca fait toujours plaisir de voir que votre travail a pu servir la communauté. Si vous aussi vous utilisez Arthemia-fr, n’hésitez pas à laisser un commentaire pour me donner l’adresse de votre site !

Top 5

Garageband

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

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

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

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

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.