Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

article.md 6.5KB

4 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. title: ★ iPheeds.org, une version iPhone pour votre blog
  2. slug: ipheedsorg-une-version-iphone-pour-votre-blog
  3. date: 2008-07-23 06:58:44
  4. type: post
  5. vignette: images/logos/ipheeds.png
  6. contextual_title1: Son propre TinyURL en Python et HTML5 avec webpy
  7. contextual_url1: 20090221-son-propre-tinyurl-en-python-et-html5-avec-webpy
  8. contextual_title2: Enfin un design pour biologeek !
  9. contextual_url2: 20080829-enfin-un-design-pour-biologeek
  10. contextual_title3: ★ Mieux que gratuit : le business model réinventé
  11. contextual_url3: 20080227-mieux-que-gratuit-le-business-model-reinvente
  12. 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](http://2007.paris-web.fr/Presentations-des-intervenants) 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](http://www.w3.org/2007/02/mwbp_flip_cards#design_for_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.
  13. ## Service
  14. 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.
  15. 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.
  16. 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 »** !
  17. ## Utilisation
  18. 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.
  19. Ce qui donne par exemple pour ce blog :
  20. * http://ipheeds.org/?ipheed=http://www.biologeek.com/data/atom/
  21. 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).
  22. ## Promotion
  23. Une fois en possession de cette URL, vous avez plusieurs moyens d'en faire la promotion pour vos visiteurs, plus ou moins intrusives.
  24. ### Simple lien avec détection
  25. 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 :
  26. Déclarer un container prêt à accueillir votre bannière spéciale :
  27. <div id="icontainer"></div>
  28. Ajouter un bout de JavaScript qui vérifie s'il s'agit d'un iPhone ou pas :
  29. <script type="text/javascript">
  30. if(/iPhone|iPod/i.test(navigator.userAgent)){
  31. document.addEventListener("DOMContentLoaded", function() {
  32. document.getElementById('icontainer').innerHTML="message + lien iPheeds";
  33. }, true)
  34. }
  35. </script>
  36. À 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.
  37. ### Popup iPhone
  38. 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.
  39. Cette fois plus besoin de préparer un container mais il faut tout de même un bout de JavaScript :
  40. <script type="text/javascript">
  41. (function () {
  42. if(/iPhone|iPod/i.test(navigator.userAgent)){
  43. var question = confirm("Voulez-vous consulter la version iPhone de ce site ?")
  44. if (question){
  45. window.location = "http://ipheeds.org/?ipheed=http://www.biologeek.com/data/atom/";
  46. }
  47. }
  48. }());
  49. </script>
  50. Vous devriez alors avoir une popup de cet ordre là :
  51. <p>
  52. <img
  53. src="/static/david/biologeek/images/biologeek_iphone.jpg"
  54. alt="Biologeek iPhonized"
  55. style="margin: 0pt auto; display: block;"/>
  56. </p>
  57. Qui vous redirige vers iPheeds si vous acceptez.
  58. ### Redirection directe
  59. 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.
  60. ## Outils
  61. 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](http://code.google.com/p/iui/) qui est la bibliothèque à ne pas manquer lorsqu'on veut faire une interface web pour l'iPhone qui respecte les standards Apple.
  62. Au niveau du backend, c'est propulsé avec Django mais [shove](http://pypi.python.org/pypi/shove) et [feedcache](http://www.doughellmann.com/projects/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.
  63. 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](http://hanblog.info/blog/) 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.
  64. 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 :-(.
  65. En tout cas, j'espère que vous apprécierez le service, les suggestions sont les bienvenues comme toujours.
  66. **[edit du 25]** : le flux est maintenant [auto-détecté](http://diveintomark.org/archives/2002/05/31/rss_autodiscovery_in_python) si vous soumettez directement l'URL de votre site.
  67. **[edit du 5 août]** : nouvelle version, plus stable, j'ai finalement mis une base de données derrière.