Posté par al al le 7 mai 2012

meta smeuh

Derniers développements de MySmeuh

Voici un petit résumé des changements apparus dernièrement sur MySmeuh.

Module musique

Le module musique utilise maintenant le lecteur MediaElement.js pour permettre de jouer un maximum de formats audio (MP3, Ogg Vorbis, Flac et WAV) sur diverses plateformes. Lorsque le navigateur supporte le format, il joue le son directement, sinon il essaie de le jouer avec Flash. Si aucune de ces solutions ne fonctionne, il présente simplement un lien de téléchargement à la place du lecteur.

Le lecteur est mainteneant intégré dans les listes de morceaux et lorsque la lecture d'un morceau s'achève, le morceau suivant commence à jouer automatiquement. Ceci combiné avec les tags permet d'avoir des listes de lecture dynamiques, par exemple la liste des morceaux tagués « dub ».

Notez également qu'on peut lancer automatiquement la lecture d'un morceau en ajoutant ?autoplay=true à l'URL, par exemple https://my.smeuh.org/francois/music/track/extra-life?autoplay=true (pratique pour jouer des tours à ses collègues de bureau).

Enfin des boutons Précédent et Suivant ont été ajoutés en haut de chaque page présentant un morceau individuel, comme ce que nous avions déjà pour les photos.

Page d'accueil adaptive

La feuille de style de la page d'accueil utilise les media queries pour proposer une présentation différente en fonction de la taille de fenêtre du navigateur.

Voici à quoi la page d'accueil devrait ressembler sur un écran large:

http://al.smeuh.org/img/blog/article-dev-mysmeuh/mysmeuh-wide-screen.jpg

Voici la même page sur un écran moyen:

http://al.smeuh.org/img/blog/article-dev-mysmeuh/mysmeuh-medium-screen.jpg

Et enfin, vue sur un navigateur de téléphone mobile, la page d'accueil devrait ressembler plus ou moins à ceci:

http://al.smeuh.org/img/blog/article-dev-mysmeuh/mysmeuh-mobile-screen.jpg

Divers

Le code CSS et JavaScript est maintenant combiné, minifié et versionné à l'aide de Django Compressor de manière à minimiser le nombre de requêtes HTTP et à forcer les navigateurs à utiliser des styles et des scripts à jour.

Le site est passé en HTML5. Des angles arrondis et des dégradés ont été ajoutés à la barre de navigation à l'aide de propriétés CSS3. La compatibilié avec différents navigateurs est assez bonne, y compris avec des version récentes de IE. Une subitle texture bruitiste a été ajoutée en fond de page.

Enfin il y a maintenant un pied de page qui contient le sélecteur de langue (français ou anglais) ainsi qu'une paire de liens à propos du site.

Et la suite ?

Il faut améliorer la structure et la présentation des pages de profil des utilisateurs qui sont à l'heure actuelle assez bordéliques (les pages, pas les utilisateurs, quoique... ;) Lorsque ce sera fait, je pense qu'on poura déclarer que MySmeuh est officiellement passé en version 1.0.

Commentaires sur ce billet

Merci de vous authentifier (ou vous inscrire) pour laisser un commentaire

Voir le code source en reStructuredText