The pinger will ask the given URL every ‘interval’ minutes if it detects
some activity by listening to the events listed in ‘listen’ parameter.

Have a look to the ‘defaults’ variable below for further details about available parameters and default values.

The code bellow is a starting point, it’s clearly inspired from the jQuery Doc . Just search/replace pluginName with your plugin name and go ahead with your own code.

Links Summary:

• jquery.plugin_name.coffee source code
• CoffeeScript
• jQuery Doc: Plugins/Authoring

Pour changer un peu des précédent articles dédiés au développement iPhone, je vais aujourd’hui présenter un petit outil Javascript, utilisant le Framework jQuery. Rien de révolutionnaire, c’est simplement un plugin jQuery permettant de dérouler un bandeau HTML au dessous d’un autre. J’ai appelé ce plugin ‘helpBox’ car ce widget est particulièrement adapté pour afficher une aide contextuelle.

Voici les liens vers le code source et la démo.

Rien de bien compliqué ici si l’on connais déjà la structure d’un plugin jQuery.
On commence par définir quelques paramètres…

var defaults = {
    helpContent:'<p>help content</p>',  // jQuery Selector or plain text HTML.
    contentCls:'help-content',          // CSS Class applied to the help box.
    buttonCls:'help-button',            // CSS Class applied to the help button.
    buttonText:'Help'                   // Help Button text
}

Ensuite, le plugin ‘helpBox’ se contente de recherche le code HTML du contenu de l’aide pour l’ajouter au document avec le bouton associé.

return this.each( function() {
 
    var o = options
 
    // Gets help content
    var content = ( $(o.helpContent).size() > 0 ) ? $(o.helpContent).html() : o.helpContent;
 
    // Appends help box and help button
    $(this).append("<div class='"+o.contentCls+"'>" + content + "</div>")
        .append("<div class='"+o.buttonCls+"'><a href='javascript:void(0)'>"+o.buttonText+"</a></div>");
 
    $(this).find('.'+o.contentCls).hide();
 
    // [...]
})

Ensuite, il ajoute deux gestionnaires d’événement au bouton: un ‘mouseover’ pour ouvrir le dialogue d’aide et un ‘click’ pour fermer ce dernier.

// Open the box on button mouseover, close it on click
$(this).find('.'+o.buttonCls+' a').mouseover( function() {
 
    $(this).parent().prev('.'+o.contentCls+':hidden').slideDown();
}).click( function() {
 
    $(this).parent().prev('.'+o.contentCls+':visible').slideUp();
});

Voilà tout. Facile non?

• Le code complet est ici: jquery.helpbox.js
• La démo est là: jQuery helpbox demo

Quelques ressources utiles pour finir:

• jQuery Plugin Authoring
• Les bases du développement de plugin jQuery sur learningjquery.com

Enjoy!

Decode me if you can

Pour les plus pressés, ça se passe ici:

ZBar: How to add a barcode reader to an iPhone app

Pour les autres, voilà un peu plus de détails:

Les QR Codes sont de plus en plus répandus dans les applications mobiles. Au détour d’un projet iPhone, vous pourriez être amenés, tout comme moi, à devoir décoder ces carrés « magiques ».

Si tel est votre cas, sachez que la tâche sera des plus simples grâce à l’excellent projet ZBar bar code reader. L’intégration du wrapper Objective-C de cette librairie m’a pris en tout en pour tout 10 minutes. De plus, le scan des codes est effectué à la volée (comprenez sans que l’utilisateur ait besoin de presser le bouton de l’appareil photo, dès que le code est dans le cadre). La documentation limpide fournie sur le wiki du projet transformera votre application en un lecteur de codes à rendre jaloux le caissier de l’hyper en bas de chez vous.

La doc est là: ZBar: How to add a barcode reader to an iPhone app. Dépêchez-vous, plus que 9’30…

Décoder des codes QR:

• L’application ZBar sur l’AppStore
• ZXing (prononcer « 

Générer des QR Codes en ligne:

• Générateur de QR Code
• QR Code Generator

UIScrollView dans un ImageViewer

Après le grand ménage sur le blog, plein d’enthousiasme, j’ai entrepris de rédiger un tutoriel détaillé à propos du développement d’un ImageViewer pour iPhone, avec une interface la plus proche possible de l’application Photos. Au cours de l’écriture de ce billet, j’ai constaté 2 choses:

• Tout d’abord, ça fait un billet sacrément long, à l’écriture comme à la lecture.
• Ensuite et surtout, j’ai constaté que l’intérêt était assez limité car l’exercice s’est révélé relativement simple.

En revanche, lors du développement de mon ImageViewer, il y a un aspect qui a attiré mon attention: l’extension d’un protocole. Ce point précis peut présenter une certaine difficulté pour peu qu’on n’y ai jamais été confronté et il m’a été assez difficile de trouver des exemples clair sur le web.

J’ai donc décidé de rédiger un billet plus court, qui détaille la façon de dériver la classe UIScrollView tout en étendant le protocole UIScrollViewDelegate associé.

Si vous souhaitez, comme moi, reproduire l’interface de l’application Photos de votre iPhone, vous allez sans doute créer un UIScrollView afin de permettre à l’utilisateur de naviguer d’une image à l’autre. Pour ce faire, le projet "Scrolling" fourni en exemple dans la documentation d’Apple constitue un bon point de départ. La logique du scroll est contenue dans les méthodes viewDidLoad et layoutScrollImages du fichier MyViewController.m mais il vous faudra l’adapter un peu à votre cas d’utilisation.

En revanche, j’ai constaté que les événements de Touch n’étaient pas transmis par la UIScrollView. Gênant lorsque l’on veut ajouter des interactions en plus du scroll.

Pour capturer ces événements, qui ne sont pas transmis par la UIScrollView, la logique voudrait que l’on créé une classe qui étends la scrollView.
En surchargeant la méthode qui transmet les événements, on obtient ce qui suit:

// TapScrollView.h
@interface TapScrollView : UIScrollView {
}
@end
 
// TapScrollView.m
#import "TapScrollView.h"
 
@implementation TapScrollView
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 
	[self.delegate tap];
	[super touchesBegan:touches withEvent:event];
}
@end

À ce stade, il faut ajouter la méthode tap au protocole qui défini le delegate de notre TapScrollView. On procède en ajoutant la définition d’un nouveau protocole dans le fichier TapScrollView.h.

Ce protocole va étendre UIScrollViewDelegate afin que l’on puisse encore recevoir les événements de touch, comme suit:

// TapScrollView.h
@protocol TapScrollViewDelegate <UIScrollViewDelegate>
 
- (void) tap;
 
@end
 
@interface TapScrollView : UIScrollView {
}
@end

Si on en reste là, la propriété delegate reste celle défini par UIScrollView car nous ne l’avons pas surchargée.

On peut donc supposer que celle-ci répond au protocole UIScrollViewDelegate, et non pas TapScrollViewDelegate comme on l’aurai souhaité. Dans ce cas, il suffit de surcharger la propriété delegate dans TapScrollView.
Voilà le code obtenu:

// TapScrollView.h
@protocol TapScrollViewDelegate <UIScrollViewDelegate>
 
- (void) tap;
 
@end
 
@interface TapScrollView : UIScrollView {
	id<TapScrollViewDelegate> delegate;
}
@property (nonatomic, assign) id<TapScrollViewDelegate> delegate;
@end

Ok, on approche du but. TapScrollView réponds bien au protocole et la méthode tap sera correctement appelée elle-aussi. En revanche, les méthodes du protocole UIScrollViewDelegate ne sont plus appelés…
On tourne en rond.

J’ai mis pas mal de temps à trouver la solution. L’astuce consiste à surcharger aussi les accès à la propriété delegate, de façon à transmettre les appels dans les deux sens (UIScrollView vers TapScrollView et vice-versa).
Voilà le code final:

// TapScrollView.m
#import "TapScrollView.h"
 
@implementation TapScrollView
 
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
	[self.delegate tap];
	[super touchesBegan:touches withEvent:event];
}
 
- (id<TapScrollViewDelegate>) delegate {
	return (id<TapScrollViewDelegate>)super.delegate;
} 
 
- (void) setDelegate :(id<TapScrollViewDelegate>) aDelegate {
	super.delegate = aDelegate;
}
@end

Vous voilà donc avec une ScrollView qui, en plus de capturer les événements relatifs au scroll, va transmettre les actions de votre choix. Ici, un simple tap, mais le principe reste valable pour des actions plus complexes.

Quelques liens utilies pour finir:

• Scrolling: un sample project de la documentation Apple
• UIScrollViewDelegate Protocol Reference : tout ce que fait le protocole associé aux UIScrollView (et ce qu’il ne fait pas)
• Protocols : la documentation iPhone sur les protocoles

1. Spotify your Life ! – Présentation générale
2. Spotify your Radio ! – La radio dans Spotify
3. Spotify your Search! – Recherches « avancées »

Les liens dans Spotify

J’ai déjà abordé le sujet dans les articles précédent, mais un petit rappel semble nécessaire: dans Spotify tout est lien. Je m’explique. Sur la majorité des écrans, la plupart des textes affichés sont des liens qui vous permettent de naviguer dans l’application; comme vous le feriez sur un site Web. C’est valable pour les titres des morceaux, les titres des albums, mais aussi les artistes, les genres musicaux, etc. Pratique… D’autant plus que deux boutons (« Précédent » et « Suivant ») en haut à gauche de la fenêtre permettent de parcourir l’historique de navigation à la manière d’un navigateur Web.

Mais ces liens ne sont pas simplement là pour faciliter la navigation au sein de l’application, ils permettent aussi, et c’est là toute l’ingéniosité du système, d’envoyer de la musique a d’autres utilisateurs de Spotify. Ainsi, lorsque vous souhaitez partager l’une de vos découvertes (morceau, album, artiste ou encore une playlist ou une recherche), il suffit de copier le lien pour aller le coller ou vous le souhaitez: votre blog, un client MSN/GTalk, etc; ou encore de ‘envoyer directement vers l’un des réseaux sociaux supportés (Twitter, Delicious ou Facebook). Le principe est même valable pour vos playlists, et comme toutes ces données sont stockées sur les serveurs de Spotify, chaque modification dans l’une de vos playlists sera reçue immédiatement par ceux à qui sont en train d’écouter vos morceaux.

Les playlists collaboratives

Résumons un peu. Parmi tous les morceaux que vous écoutez, vous en sélectionnez quelques-uns et les réunissez dans une playlists. Vous pouvez envoyer cette playlist à vos amis pour qu’ils découvrent vos goûts musicaux et profitent de votre sélection, et cela aussi simplement que si vous leur envoyiez un lien vers une page web. C’est déjà bien plus que ce vous auriez pu faire avec votre collection de mp3 et votre ancien player…

Mais Spotify va encore plus loin en ajoutant la notion de playlist collaborative. Le principe est simple: après avoir créé une liste de lecture, vous pouvez décider de la rendre « collaborative ». Ainsi, lorsque vous enverrez cette playlist a vos amis, ceux-ci pourront y ajouter ou supprimer des morceaux, de la même façon que pour leurs propres listes. En pratique, lorsque vous écoutez un morceau que vous souhaiteriez faire écouter à un ami, il suffit de l’ajouter à l’une des playlists collaboratives de ce dernier.

À l’utilisation, cet aspect collaboratif est vraiment un sacré plus qui m’a fait redécouvrir le partage de musique entre amis. Avoir régulièrement de nouveaux morceaux dans ses listes, et découvrir de nouveaux artistes de cette façon est un réel plaisir.

Pour finir, et afin de mettre cet article en pratique, voilà deux de mes playlists, dont une « collaborative ». N’hésitez pas à y ajouter des morceaux ou à m’envoyer vos propres listes de lecture.

• On The Go
• Dhar Collaborative Bookmarks (Public)

Enjoy !

1. Présentation générale: Spotify your Life !
2. La radio dans Spotify: Spotify your Radio !

Au programme d’aujourd’hui, une petite explication concernant l’outil de recherche de Spotify: un outil assez complet, très utile mais qui restera réservé aux utilisateurs avancés et autres geeks tant qu’il restera privé d’une vraie interface graphique.

Les recherches avancés

Comme je l’ai dis plus haut, Spotify permet à ses utilisateurs d’effectuer de nombreuses recherches dans la multitude de titres disponibles.  En effet, vu la quantité impressionnante de morceaux disponibles à l’écoute, un outil de recherche efficace semble le pré-requis  indispensable au succès de l’application.

Et sur ce point, on sent tout de suite que l’idée est là, qu’il y a du potentiel, mais qu’il reste encore pas mal de boulot. En effet, alors que certains auraient pu se contenter d’une simple recherche par mot-clés (Je recherche Coldplay, je trouve tout ce qui s’y rapporte…) l’outil de recherche propose un tas d’options permettant d’effectuer des recherches très précises, mais il faut saisir sa recherche « à la main », dans le champ de recherche de l’application.

Voilà comment cela se présente. Plusieurs mots-clefs sont à votre disposition pour affiner votre recherche:

• genre: pour une recherche par style musical,
• year: Recherche par année,
• artist: Rechercher un artiste,
• album:pour chercher un album en particulier,
• track: Si vous ne connaissez que le titre du morceau,
• label:.Depuis la dernière mise à jour, il est possible de chercher d’après le label éditeur d’un artiste/album

Et il est évidement possible de les combiner entre eux pour trouver le morceau des ses rêves.

Par exemple,en tapant la recherche suivante…

genre:"Heavy Metal" label:"Atlantic" year:2004-2009 -artist:"P.O.D."

…vous allez trouver tous les titres correspondants au genre « Heavy Metal« , édités par le label « Atlantic » (pour ne pas dire « Altantic Records« ) au cours des 5 dernières années, mais dont l’artiste n’est pas « P.O.D.« .

Puissant n’est-ce pas? Sans doute, mais ça demande quand même un peu de pratique pour trouver ce que l’on cherche… D’autant plus que le champ de recherche est assez petit et qu’on ne voit pas tout ce que l’on tape, de plus il est vraiment facile d’oublier un gillemet, de mal taper le nom d’un label ou encore de cherche un genre qui ne correspond à rien dans Spotify. Il est évident que ce genre de fonctionnalité est réservée aux plus « informaticiens » d’entre-nous et autres fans de la ligne de commande… Dommage aussi qu’il manque certains mots-clefs qui auraient pu être bien utiles, comme une recherche par pays, ou par type d’ablum (singles, compilations, etc. ).

Voilà, c’est à peu près tout pour les recherches. Mon prochain (et dernier) article sur Spotify présentera le système de liens ainsi que les playlists collaboratives.

Quelques liens utiles:

• La liste des « genres » fournie par Spotify
• Un outil en ligne pour faciliter les recherches: Spotify Super Search

Enjoy!

Réunir des chanteurs et musiciens du monde entier et reprendre quelques uns des plus grands classiques de la chanson, dans la but de montrer que la musique est un langage universel, voilà la mission que se sont donnés les membres du mouvement Playing for Change. Transmettre la paix grâce à la musique, voilà une idée bien utopique, mais quoi qu’il en soit, cette vidéo aura au moins le pouvoir de vous donner le sourire pour une bonne partie de la journée…

Quelques liens vers le site:

• The Journey: Comment tout a débuté
• One love: un classique de Bob Marley
• Le blog Playing For Change

Enjoy!

En terminant cet article, j’ai promis de détailler un peu mieux quelques-unes des fonctionnalités de l’application qui apportent un réel confort d’utilisation. En effet, que l’on parle de Spotify ou de ces concurrents,  l’intérêt principal du streaming audio est sans aucun doute la quantité des morceaux (mais à quoi ça sert si on ne trouve que ce qu’on connais déjà…)

La Radio dans Spotify

C’est par la radio que j’ai commencé à utiliser Spotify, et c’est donc cette fonctionnalité qui m’a d’abord convaincu d’utiliser l’application pour quelques temps. Voilà comment ça se présente:

L’intérêt principal, ce petit détail qui a fait que j’ai tout de suite accroché, c’est la possibilité d’écouter, en quelques clics, un flux musical personnalisé, adapté à ses propres goûts ou envies du moment. En effet, dans la partie haute, au centre, l’utilisateur à la possibilité de choisir à la fois les genres musicaux mais aussi les époques des morceaux qu’il souhaite écouter. Ainsi, on peut très facilement se construire une radio très sélective (Reggae des années 80 par exemple) ou bien opter pour des genres variés (Blues, Funk, Hard Rock, Hip-hop, Jazz, Punk, Rock des années 70 à nos jours).

Les résultats sont dans l’ensemble assez pertinents, même si l’on tombe de temps à autre sur un morceau inattendu. Par ailleurs, s’il arrive que le morceau en cours vous plaise particulièrement, il suffit d’un instant pour le sauvegarder dans ses favoris  grâce au menu contextuel, ou encore pour naviguer vers une section dédié à l’artiste concerné, présentant l’ensemble des albums disponibles, une biographie, etc.

Voilà pour la radio. Je pensais expliquer d’autres fonctionnalités dans cet article, mais comme je commence à traîner en longueur, je vais garder tout ça pour plus tard. Prochains articles: les recherches avancées, la navigation par liens et les playlists collaboratives.

Enjoy!

Enjoy!