★ iPheeds.org, une version iPhone pour votre blog

Tags associés : , , posté le 23 july 2008


Je m'intéresse au web mobile depuis un moment et hier soir j'ai enfin pris le temps de regarder la conférence de Dominique Hazaël‑Massieux : Bonnes pratiques du Web mobile donnée lors de Paris Web l'année dernière. J'avais prévu de faire une version iPhone de ce site mais ça allait à l'encontre du One Web, j'ai donc réfléchi un moment et je suis arrivé à la conclusion qu'il ne m'était pas nécessaire d'avoir un site entier dédié à l'iPhone mais qu'une représentation des derniers billets serait suffisante.

Service

De là est née l'idée de créer un site qui permette juste d'afficher un flux de syndication (RSS ou Atom). Il y a des montagnes d'agrégateurs mais je n'ai trouvé aucun site proposant ce service tout simple.

J'ai sorti ma boîte à outils et j'ai commencé à mettre les mains dans le cambouis, et plus j'avançais, plus j'étais persuadé qu'un tel service devait exister mais impossible de mettre la main dessus. Au final je suis arrivé à une solution assez élégante qui permet à ce blog de rediriger les utilisateurs munis d'un iPhone (qui arrivent sur l'accueil ou sur le journal) s'ils le souhaitent.

Mais la bonne nouvelle pour vous c'est que n'importe quel blog peut maintenant avoir la même représentation de son contenu « compatible iPhone » !

Utilisation

Le site d'iPheeds est tout simple : un champ URL permettant de soumettre le flux pour créer votre URL iPhone qui va permettre d'afficher les derniers billets de votre site.

Ce qui donne par exemple pour ce blog :

Mais l'avantage c'est que vous pouvez iPhoniser n'importe quel flux, allant de votre service préféré aux torrents de vos séries TV (pas de lien mais vous aurez compris le principe).

Promotion

Une fois en possession de cette URL, vous avez plusieurs moyens d'en faire la promotion pour vos visiteurs, plus ou moins intrusives.

Simple lien avec détection

C'est la méthode la plus douce, elle permet d'afficher un message sur vos pages lorsqu'un iPhone est détecté, laissant le choix à l'utilisateur de suivre ou non le lien proposé. Si vous souhaitez la mettre en place sur votre site, il faut suivre les étapes suivantes :

Déclarer un container prêt à accueillir votre bannière spéciale :

<div id="icontainer"></div>

Ajouter un bout de JavaScript qui vérifie s'il s'agit d'un iPhone ou pas :

<script type="text/javascript">
if(/iPhone|iPod/i.test(navigator.userAgent)){
    document.addEventListener("DOMContentLoaded", function() { 
        document.getElementById('icontainer').innerHTML="message + lien iPheeds";
    }, true)
}
</script>

À vous d'adapter pour que ça soit visible, c'est souvent fait dans un h1 ou en tout cas bien visible et en haut de page.

Popup iPhone

Cette méthode consiste à afficher une popup iPhone à l'utilisateur, c'est la méthode que j'ai retenu ici car elle est intermédiaire et même si elle est relativement intrusive je trouve normal de poser explicitement la question à l'utilisateur.

Cette fois plus besoin de préparer un container mais il faut tout de même un bout de JavaScript :

<script type="text/javascript">
(function () {
    if(/iPhone|iPod/i.test(navigator.userAgent)){
        var question = confirm("Voulez-vous consulter la version iPhone de ce site ?")
        if (question){
            window.location = "http://ipheeds.org/?ipheed=http://www.biologeek.com/data/atom/";
        }
    }
}());
</script>

Vous devriez alors avoir une popup de cet ordre là :

Biologeek iPhonized

Qui vous redirige vers iPheeds si vous acceptez.

Redirection directe

Je déconseille vivement cette méthode qui ne permet pas d'interagir avec le site original ce qui serait problématique dans le cas d'iPheeds vu le manque d'interactions possibles dans la version actuelle. Tiens pour la peine je la donne pas.

Outils

Je ne sais pas encore si je vais ouvrir le code mais je ne peux pas terminer sans parler de plusieurs outils que j'ai utilisé. Tout d'abord iUI qui est la bibliothèque à ne pas manquer lorsqu'on veut faire une interface web pour l'iPhone qui respecte les standards Apple.

Au niveau du backend, c'est propulsé avec Django mais shove et feedcache font tout le travail, et le font bien. Bon après ça dépend bien sûr de la popularité du service, si le serveur ça commence à trop chauffer j'aviserais.

Enfin j'ai découvert deux « astuces » iPhone ce soir (après 6 mois d'utilisation quand même...), la première grâce à Rik consiste à rester appuyé sur la touche .com pour afficher d'autres extensions. La seconde, je l'ai trouvé en fouillant les paramètres, il s'agit de double taper sur la barre d'espace pour afficher ". " (point suivi d'un espace), ce qui s'avère très pratique pour tout ce qui est mails et sms.

Bon avec tout ça j'ai pas terminé d'intégrer le super design que j'ai dans les cartons... je crois que je suis de moins en moins fan des CSS :-(.

En tout cas, j'espère que vous apprécierez le service, les suggestions sont les bienvenues comme toujours.

[edit du 25] : le flux est maintenant auto-détecté si vous soumettez directement l'URL de votre site.

[edit du 5 août] : nouvelle version, plus stable, j'ai finalement mis une base de données derrière.


Billets contextuels



★ Mieux que gratuit : le business model réinventé

Image associée au billet

Voici une traduction d'un texte pointé par Karl intitulé Better than free et écrit par Kevin Kelly. Je trouve la réflexion très intéressante et arrivant à point nommé dans ma réflexion sur le financement des applications web libres. Je ...

12 règles d'ergonomie web par Amélie Boucher

Image associée au billet

Notes de lectures quasi-brutes issues de la conférence d'Amélie Boucher lors de Paris Web qui était fort intéressante. Je suis impatient de pouvoir lire son livre qui semble aller beaucoup plus loin. En attendant de faire un bilan plus ...

★ L'importance du rythme vertical en design CSS

Image associée au billet

Franchement déçu par la qualité des sites participant au Concours Cascading Style Summer Refresh, je trouve qu'il y a un problème récurrent chez les participants : il manque la notion de rythme vertical donc je n'avais pas parlé lors ...




Commentaires

#1 Kévin , le 23 July 2008 à 09h  :

Vraiment intéressant le site, merci.

#2 Nath , le 23 July 2008 à 09h  :

Bien joué !

Par contre, j'ai relevé une petite coquille : dans la partie "Lisez", le lien de retour vers la liste s'appelle "choisisse". :/

#3 michel v , le 23 July 2008 à 09h  :

Sympa l'idée de détecter le navigateur, mais voilà une idée supplémentaire assez triviale à implémenter : fournir un bookmarklet qui, pour n'importe quelle page qui a un flux détectable, lancerait la page dans iPheeds.

Comme ça, tout pourrait être lu par ce biais, pas juste les pages de ceux qui en parlent à leurs visiteurs. :)

#4 David, biologeek , le 23 July 2008 à 09h  :

@Nath : Oui c'est la css de iUI qui tronque, ça le fait à d'autres endroits aussi. Je suis pas sûr de la bonne solution à adopter à ce sujet (la version anglaise passe mieux ;p)

#5 David, biologeek , le 23 July 2008 à 09h  :

@michel v : excellente idée, il faudrait que je m'occupe de la détection automatique du flux en fonction du domaine aussi.

#6 Thomas , le 23 July 2008 à 10h  :

"consulter la version iPhone de ce site" est un peu "faciel" sachant qu'on peut juste voir ce qui est disponible sous forme de flux RSS, c'est à dire les news seulement en général et que les dernières !

"Bon avec tout ça j'ai pas terminé d'intégrer le super design que j'ai dans les cartons... je crois que je suis de moins en moins fan des CSS :-(."

Un design pourquoi ? Biologeek ? :) Pourquoi moins fan des CSS, qu'elle serait l'alternative ?

Oui, je suis curieux.

#7 Neovov , le 23 July 2008 à 10h  :

Pas mal du tout ! Bravo !

Bon pas terrible le nom de domaine par contre mais bon :P

PS : Une petite astuce iPhone (pour le firmware 2.0) : taper deux fois sur la barre de statut (en haut de l'écran) pour scroller tout en haut d'une page.

#8 NiKo , le 23 July 2008 à 10h  :

Simple. Rapide. Efficace. J'adore.

Seul reproche a priori, l'absence de version anglophone (i18n enabled) du site ?

#9 David, biologeek , le 23 July 2008 à 10h  :

@Thomas : c'est en effet une version allégée du site mais en même temps je lis rarement des pages et des pages sur un iPhone alors ça me semble un bon compromis. Peut-être reformuler la phrase en effet.

Sinon concernant les CSS j'ai pas trouvé mieux mais je suis davantage attiré par le code en ce moment.

@Neoveov : c'est assez difficile d'avoir un bon .com maintenant... si tu as mieux je suis preneur. Il me fallait .fr et .org (même si finalement je n'ai gardé que le .org, je voulais faire un switch de langage entre les deux mais c'est probablement plus logique de se baser sur la langue de l'iPhone directement).

Et pour l'astuce en effet, c'était même là avant non ?

@xave (oui j'ai jeté un œil aux logs) : tu as soumis un flux erroné apparemment, ça passe bien en local sur ton flux atom.

@Guillaume Bizet (idem) : il faut donner l'adresse de son flux directement, pas de sa home, il n'y a pas encore de détection automatique.

#10 David, biologeek , le 23 July 2008 à 10h  :

@NiKo : essaye de changer la locale de ton téléphone ;-)

#11 Jean-Sébastien Mansart , le 23 July 2008 à 10h  :

Merci David, je viens de le mettre en place, Frédéric m'a servi de testeur et tout marche correctement.

Je ferais un billet pour en parler prochainement.

#12 David, biologeek , le 23 July 2008 à 10h  :

@Jean-Sébastien Mansart : je confirme ça marche nickel.

#13 Shen , le 23 July 2008 à 10h  :

Pourquoi limiter cela aux iPhone et ne pas l'étendre à tous les mobiles ? Et même plus généralement à tous les écrans réduits, en regardant la résolution par exemple, puisque le problème ne vient pas du fait que ce soit un iPhone mais bien du fait que l'écran soit trop petit pour consulter le site "normal".
On parle partout de l'iPhone alors que c'est juste un téléphone parmi tant d'autres, se restreindre à celui là c'est comme si une ville faisait une piste cyclable accessible uniquement avec une marque de vélo et pas avec les autres, alors que tout le monde pourrait en profiter...

#14 David, biologeek , le 23 July 2008 à 10h  :

@Shen : la question allait forcément être posée et j'aurais dû en parler dans le billet. Ce projet était essentiellement un entrainement pour voir ce qu'il était possible de faire avec une version uniquement iPhone (d'où le choix d'iUI).

Après je suis d'accord qu'il ne faut pas retomber dans les travers netscape vs. ie qu'on a connu il y a quelques années et c'est pour ça que je me suis attelé à un « bonus » et non à un site complet (qui est par ailleurs parfaitement navigable avec un iPhone).

#15 Kevin , le 23 July 2008 à 11h  :

Ha ! Merci beaucoup ! Le plug-in iPhone pour Wordpress fonctionne justement très mal sur mon blog !

#16 Jean-Sébastien Mansart , le 23 July 2008 à 12h  :

@Shen : complètement d'accord avec toi.
C'est une très bonne idée, mais il ne faut pas limiter à un seul terminal mobile.

Peut être que David implémentera bientôt une version pour d'autres mobiles ;)

Sinon xFruits propose un outil pour faire la même chose. A partir d'un flux RSS, il créé une page en XHTML 1.0 pour mobile...

#17 Jean-Sébastien Mansart , le 23 July 2008 à 12h  :

Pour voir ce que cela donne : http://xfruits.com/jihaisse/?id=37229

Je ne sais pas ce que ça donne sur iPhone par contre ou autre smartphone...

#18 David, biologeek , le 23 July 2008 à 18h  :

C'est bien sympa tous vos tests, je pars en vacances la semaine prochaine et je ne vais pas avoir besoin d'un agrégateur mobile, /all/ suffira, merci :-)

#19 pickupjojo , le 1 August 2008 à 04h  :

Super pratique, j'aime beaucoup, bravo ! :)

#20 Simon , le 3 August 2008 à 07h  :

Ah, je me suis pris une petite 500 tiens!

#21 David, biologeek , le 4 August 2008 à 08h  :

@pickupjojo : merci !

@Simon : je suis curieux de savoir de quelle page il s'agit.

#22 Audiofeeline , le 12 August 2008 à 19h  :

Un service prometteur.

Ajouter un commentaire

© 2004-2008 David Larlet - Licence (presque) libre - Site enfin propulsé par Django et hébergé par Typhon.