Swearch, superbe web app de recherche sur iPhone

Catégorie web  |  Tag , , ,   |  Pas de commentaires

Swearch, accessible sur http://swearch.me, est une web app conçue pour l’iPhone qui mérite le coup d’oeil. Une fois ajoutée à vos favoris, voir même à votre écran d’accueil comme indiqué sur la capture ci-dessous, elle permet de rechercher sur Google, Twitter, Wikipedia et Flickr. Pour cela, il suffit de faire glisser votre doigt sur l’écran à la manière des nombreuses applications natives disponibles sur l’App Store. sauf que là, on est bien dans Safari, sur une simple page web.

L’application, sous son air un peu simpliste, est en fait une véritable prouesse technique. Elle utilise HTML5, CSS et Javascript pour une magnifique expérience utilisateur. Le développeur a autant soigné la présentation que la rapidité d’éxecution, comme il l’explique lui même sur son blog dédié à l’application.

[…]a fantastic user experience, the number one priority when building this app. It runs at 60 frames per second on an iPhone 4, even with animating elements in the background […]. The end result: it feels more native than any iPhone web app I’ve ever used, and my testers have had similar acclaims.

Autre avantage de l’utilisation du HTML5, la fonction de cache offline qui permet de lancer l’application plus rapidement, même lorsque la réception est faible.

There are some more technical features that are in Swearch that you won’t really notice, but will make the application feel way better. The big example of this is the use of the HTML5 Offline Application Cache. The first time you load the app, it will download all of the code and graphics used to build the app and save them on your phone. The next time you launch the app, it will only take a second or two to reload the app, no matter how bad your cell signal is.

Je me prend à imaginer plein de déclinaisons de cette présentation et de ces animations pour d’autres web apps, et ça ne fait que relancer la guerre opposant applications web et natives, pour le plus grand bien des utilisateurs.

Biolab Disaster, un jeu en HTML5

J’ai déjà parlé de Dominic Szablewski plusieurs fois sur ce blog (ici et ). Ce développeur de talent nous a pondu un nouveau petit bijou avec Biolab Disaster, entièrement réalisé en HTML5 et Javascript, sans le moindre bout de Flash ou de plugin dedans.

Ambiance rétrogaming au programme comme le montre la capture ci-dessous, c’est un vrai bonheur de parcourir les différents niveaux qui composent ce jeu de plateforme.

Il fonctionne parfaitement sur tout navigateur digne de ce nom, malgré quelques problèmes de son. Dominic a d’ailleurs posté sur son blog une vidéo making-of et quelques tests de performance des différents navigateurs, c’est particulièrement instructif. Je n’ai toutefois pas réussi à le faire tourner sur mon iPhone 4 (alors que ça semble fonctionner sur 3GS).

A vous de jouer! Attention, time-killer…

Un App Store sans porn pour achever Flash ?

Catégorie web  |  Tag , , , , , ,   |  Pas de commentaires

C’est une thèse avancée sur Woork Up qui se tient, je trouve. Parce qu’Apple peut contrôler le contenu de l’App Store mais pas le web et son contenu HTML5, ce serait ne pas voir plus loin que le bout de son nez de penser que le porn n’existe pas sur iPhone et autre iPad…

If Apple can have a sort of censorship on downloadable applications within the Apple Store, it certainly cannot control everything that happens in the whole web galaxy. In fact, YouPorn, Tube8 and many other similar sites have already converted their videos from the Flash format to HTML5 thus making them perfectly usable on the Apple devices, among which you can of course find the iPad.

De là à imaginer qu’Apple empêche l’éclosion d’applications natives pour iPhone/iPad de la part des éditeurs de porn pour les obliger à publier leur contenu web en HTML5 au lieu de Flash, il n’y a qu’un pas que je franchis allègrement. La publication de vidéos porn représente certainement une très grande part de marché dans l’utilisation de Flash (ça a d’ailleurs fait l’objet de  vives polémiques à l’annonce de l’iPad, souvenez-vous), l’arrivée d’HTML5 pourrait changer la donne.

One thing is for sure: if the iPad does indeed win over the competition as a platform for the fruition of Internet content, it will be up to those who manage entertainment websites to choose whether to stay with Adobe Flash or to catch a growing business opportunity.

Needless to say they will probably go for the second one and we’ll see a mass migration to HTML 5.

Transitions, transformations et animations CSS3 par l’exemple

Catégorie web  |  Tag , , , ,   |  Pas de commentaires

Ca se passe sur css3.bradshawenterprises.com. Une série d’exemples de transitions et d’animations exclusivement réalisées en CSS3, sans faire appel au moindre bout de code javascript (à part pour gérer l’interactivité). Ca démontre bien la puissance du truc et comme le code source est fourni, vous verrez que c’est relativement simple.

Bien évidemment, tout ceci ne fonctionne que sur des navigateurs dignes de ce nom (oubliez IE, donc) avec un petit avantage pour Safari qui est le seul aujourd’hui à supporter les transformations 3D.

Et puis, quand vous aurez terminé de tout lire, vous aurez bien mérité un peu de détente, avec une petite session de retro-gaming sur cet Asteroids entièrement réalisé en HTML5.

MiniApps, des web apps en HTML5 pour mobiles

Regardez bien les captures ci-dessous, on dirait bien des applications natives pour iPhone, et pourtant ce ne sont que des web apps tournant directement dans Safari Mobile, et développées en HTML5. Disponibles sur MiniApps, ces créations d’Alex Gibson sont, certes, encore modestes dans leurs fonctionnalités mais laissent présager un avenir radieux pour le HTML5 dans l’univers des mobiles notamment (encore un coup dur pour Flash). Et avantage du HTML5, c’est cross-platform, donc fonctionne sur la plupart des mobiles (un peu évolués): iPhone, iPod Touch, iPad, Androïd, Palm Pre, Firefox Mobile, Nokia Maemo…

  • Checklist, pour créer rapidement todo-list et autres listes de courses
  • Geo Meter, qui fait appel au GPS de la machine pour vous localiser précisément

  • Card Flip, célèbre jeu de mémoire qu’on ne présente plus

Et pour les “installer”, pas besoin de passer par l’App Store, un simple ajout de signet sur votre iPhone suffit…

Tout savoir sur le HTML5

Catégorie web  |  Tag , ,   |  Pas de commentaires

Tout d’abord, une présentation très complète (via @MoxFolder) sur les fonctionnalités majeures apportées par le HTML5, entièrement réalisée en… HTML5 et donc consultable dans votre navigateur. Les bouts de code étant la plupart du temps accompagnés d’exemples concrets au sein de la présentation, il vous faudra un navigateur approprié pour les visualiser (en clair, oubliez IE6-7-8 et optez plutôt pour Google Chrome, sur ce coup là).

Et justement, puisqu’on parle de compatibilité avec les navigateurs, HTML5 & CSS3 Readiness donne une vision très rapide des fonctionnalités supportées par les différentes versions d’IE, Firefox, Safari, Opera et Chrome.

De l’Ambilight sur les videos en HTML5

Catégorie web  |  Tag , , , ,   |  Pas de commentaires

Vous connaissez certainement le concept d’Ambilight, inventé par Philips Electronics pour ses fameux téléviseurs éponymes, qui consiste à générer des effets de lumière autour de la télé correspondants au contenu vidéo pour une expérience plus immersive.

Le plugin Ambilight for <video> tag propose de reproduire cet effet sur les videos en HTML5. Vous pouvez le voir en action sur le lien suivant.

Plutôt joli, non ? Si vous voulez en savoir plus, et que vous parlez russe, c’est sur le blog du développeur (version google-traduite en français ici).