Aucun tutorial sur html5-tutorial.fr depuis 2 semaines et pour cause, j’étais bien occupé à travailler sur mon application « Clouder! ». Clouder est l’application que j’ai utilisé dans le fil rouge sur le développement HTML5 que vous avez peut-être suivi:
Clouder! pour Windows 8 : le tutorial fil rouge de html5-tutorial.fr
Bien sûr, l’application réalisée à l’issue du fil rouge était un peu basique, j’ai donc ajouté pas mal de contenu avant de tenter de la publier sur le Windows 8 Store. Mais c’est chose faite, si vous avez installé la version RTM de Windows 8, allez donc dans la catégorie « Music & Video » du store pour trouver l’application Clouder! finale:
Clouder sur le Windows 8 Store
Un mot sur les UX Guidelines
Avant de pouvoir soumettre son application sur le store, j’ai du récupérer un « token » développeur du côté de Microsoft. Pour cela, il fallait passer un « excellence lab » de 2h, soit sur place à Paris ou à distance.
A noter que le store est depuis le 12 Septembre ouvert à tous pour la soumission d’application. Pour les détenteurs de comptes MSDN, membres de DreamSpark ou de BizSpark, le compte est gratuit.
Pendant ces labs, vous êtes aidé par un expert MS qui va s’assurer que votre application respecte bien les règles du store. Les règles du store ont été rassemblées dans un document de 316 pages (oui, 316!) que vous pouvez trouver au format PDF ici:
Assez sympa puisque vous pouvez réservez un créneau gratuitement pour vous éviter d’attendre un verdict négatif du store.
Si vous me suivez sur Twitter (@fnicollet), vous m’avez entendu râler sur ces fameuses guidelines, qui sont à mon avis vraiment strictes. Mais quand on fouille le store, on trouve ensuite une bonne homogénéité au niveau des applications.
Quelques points par exemple que j’ai du modifier dans mon application, pour vous donner une idée:
- Pas de dégradés de couleur, préférer les aplats de couleur.
- Pas de coins arrondis, l’interface métro préfère les coins carrés
- Pas de boutons de navigation directement dans l’interface. Par exemple, ne pas avoir de bouton « Share » directement dans son application. Même si ce bouton ne fait qu’ouvrir l’interface de partage de Windows 8, ils veulent habituer l’utilisateur à utiliser l’interface native de W8. Idem pour la recherche même si des applications comme Allociné ont un bouton rechercher dans l’interface… Les boutons de navigation doivent éventuellement se trouver dans l’AppBar Windows 8
- Faire attention à la gestion du mode portrait. Mieux vaut désactiver le mode portrait (possible depuis le manifest) que de mal le gérer
- Utiliser une hiérarchie de taille de fonts. Si par exemple vous avez un titre de taille h1 en tête de page, à l’intérieur de la page vous devrez avoir au moins du h2. Idem pour les commentaires, il m’a fallu mettre le nom d’utilisateur en gras pour qu’il soit différent du corps du commentaire
- Limiter le nombre d’éléments à l’écran. Ne pas afficher une liste de 100 éléments qui serait trop longue à scroller
- S’il on a plusieurs listes / catégories, utiliser le Semantic Zoom de Windows 8
- Avoir des paddings cohérents dans les différents écrans
- Bien gérer la vue « snap » pour qu’elle soit un minimum utilisable. Elle ne doit pas forcement contenir tout ce qu’il y a dans la page pleine mais elle ne doit pas ressembler à n’importe quoi.
Publication sur le store
Pour vous aider à publier sur le store Windows 8, voici un tutorial qui détaille toutes les étapes et les éléments nécessaires:
Le processus est assez guidé et suffisamment clair. Comme d’habitude, vous devrez encore préparer pas mal d’images en plusieurs tailles mais vous avez l’habitude si vous développez pour iOS et Android :).
Ship fast they said. It will be fun they said
Pour éviter de passer trop de temps sur la première version, j’ai décidé de faire par « itération » en sortant une V1 uniquement en consultation puis de rajouter le reste par la suite.
Pas loupé, au bout de 2 jours, voici ma première review, 2* sur 5:
Pas très utile puisqu’on ne peut pas se connecter à son compte et voir son Dashboard, ni suivre ou commenter des morceaux, etc.
Toujours rageant quand on a passé pas mal de temps sur le développement d’une app de se prendre un 2* direct. Bref, après une dizaine d’heures de développement (dont 6 à pester après les iframes dans IE10 pour faire un OAuth correct), le développement de la version 1.1 était terminé.
Il est donc désormais possible de se connecter, de suivre des artistes, de « like » un morceau et de laisser des commentaires. En plus de cela, un petit dashboard perso avec ses favoris / followers / followings. En espérant que cet utilisateur n’ait pas encore désinstallé l’application :).
La suite
Une v1.2 est en préparation avec notamment :
- la gestion correcte du mode portrait
- Des « section pages » dans lesquelles ont peut consulter une données complète (ex. tous les followers d’un artiste) avec pagination et pas seulement un extrait de 50 comme actuellement.
Si vous passez par le Store Windows 8, n’hésitez pas à me laisser une petite review, cela fait toujours plaisir! :)
Bonjour, merci beaucoup pour ton tutoriel.
J’aimerais l’appliquer a mon site de musique en ligne mais je ne vois pas comment faire.
Par quoi dois-je remplacer ID utilisateur au début du tutoriel.
Merci d’avance
Salut et merci pour ton message :)
Tu parles de ce tuto?
http://html5-tutorial.fr/windows-metro-clouder-2-afficher-une-liste-de-titre-depuis-soundcloud/
Pour récupérer un clientID, tu dois créer un compte développeur sur SoundCloud, comme expliqué au début du tuto
Fab
Oui je parle bien de ce message . Mais en fait j’essaie de créer une application comme la tienne mais pour mon site qui requière une identification. Donc je voulais savoir que dois je mettre à la place de ça : WinJS.xhr({ url: « https://api.soundcloud.com/tracks.json?client_id=2e601fddcc4a07954c3da7077f81a1e1 » }).done(
pour que cela puisse s’appliquer à mon site.
Par votre site, vous voulez dire votre compte SoundCloud?
Si vous voulez faire des appels XHR vers votre site perso qui n’a rien à voir avec SoundCloud, c’est à vous de définir les URLs à appeler, impossible de vous dire, c’est vous qui connaissez votre site
Fabien
Je parle réellement de mon site url de la forme http://music.me.
Comment puis-je définir les URLs à appeler.
Mon site ne possède pas de système api. se serait ca le problème.
Oui, il faut que vous puissiez appeler votre site pour récupérer des informations (API) mais cela est complètement en dehors du spectre de ces articles
OK. merci pouvez-vous juste m’expliquer rapidement comment faire, ou me donner une lien qui explique car je ne trouve pas.
Bonjour,
Juste pour savoir, est-ce-que cous allez me donner un lien pour expliquer ou pas. Je vous remercie pour vos superbes TUTOs.
Bonjour,
En fait, je ne sais pas vraiment quoi vous donner ^^. Vous allez devoir apprendre à faire un service web qui va interroger votre base de données de votre site music.me. C’est comment dire, large comme sujet !
Fabien
OK. Merci quand même.
Salut, Pas moyen de trouver l’appli sur le Windows Store… dommage, me serait bien laissé tenter.
Salut,
Bizarre, si tu vas dans la catégorie Music & Vidéo, tu ne la vois pas? Quelle version de Windows 8 tu as installé (CP? RTM? Finale?) ? et en quelle langue?
J’ai une autre personne qui a le même problème, j’espère que les applications qui sont indiquées en langue anglaise apparaissent aussi sur les install FR
Fabien
C’est Windows 8 Entreprise 64 bits (donc finale, tout à fait officielle), en Français.
Si ça peut te rassurer, il y a PLEIN d’applis qui ne figurent pas dans mon Windows Store. Impossible pour moi de trouver LastPass et une bonne partie des applis que mentionne cet article :
http://www.clubic.com/telecharger/article-518573-5-apps-windows-8.html
Pour préciser un peu, (désolé pour le triple post, mais si ça peut t’aider à comprendre d’où vient le problème…) , lorsqu’on me donne le lien Windows Store de ton appli, j’arrive bien sur la page qui permet normalement de l’installer, mais il manque des éléments dans la page : il manque notamment le bouton « Installer » (plutôt gênant ;-)… Si tu veux une capture, je peux t’en faire une.
Je veux bien, oui :). Si tu peux m’envoyer des captures de ton store, genre une capture de la catégorie « Tools » ou » Music and Vidéos » (quand tu cliques sur le titre de catégorie, qui t’emmennes sur la page de listing de la catégorie)
mon mail : fnicollet gmail.com
Merci !
Fab
Ok, j’ai demandé à un mec de MS et on dirait que la version FR filtre les applications selon leur langue par défaut. Clouder comme LastPass n’ont que de l’anglais, du coup, elles n’apparaissent pas. Je corrige ça de suite !
Fab
Tu peux essayer ça:
http://www.ghacks.net/2012/06/19/how-to-change-the-windows-8-store-language/
?
Fabien
Ok, désolé pour l’attente, j’étais parti faire un footing. J’ai appliqué la méthode de ghacks.com, je reboote et je te tiens au courant.