Web Avancé EPU 2013-2014

Introduction

Dans ce cours vous allez voir différents aspects de la programmation web :

• JavaScript un peu plus compliqué que d'habitude, utilisation de frameworks MVC, etc.
• Web services
• Micro serveur
• Accès au web de données
• Autres ?

Le sujet tournera autours du développement d'un logiciel d'écoute de chansons multipiste à l'aide de l'API HTML5 Web Audio. D'autres APIs HTML5 seront mises à contribution comme l'API du canvas pour le dessin et l'animation, la persistence, XhR pour le download/upload de fichiers, etc.

Voici une image préliminaire d'un prototype (ne faites pas attention à l'interface graphique) fonctionnel:

 Le but n'est pas que vous réalisiez exactement ce prototype, le but est que l'on vous aide à développer votre propre version, en ajoutént de nombreuses améliorations:

• Ergonomie meilleure, interface plus belle,
• Monitorer le download et le décodage des pistes dans une barre de progression,
• Modèle de donné plus complet (titres des chansons complet, biographie de l'artiste, histoire de la chanson, nom des musiciens, etc),
• Possibilité d'uploader de nouvelles chansons,
• Possibilité de règler par piste le volume individuel, la stéréo, de pouvoir mettre une piste en solo (muter toutes les autres)
• Possibilité d'intégrer des effets audio (reverbération, echo, égaliseur, etc.)
• Zoom avant/arrière sur les échantillons (donc il faudra dessiner les échantillons et non pas juste afficher une image prédéfinie, on trouve des exemples de code sur le net)
• Synchroniser des animations sur la musique (utilisation d'un analyseur de fréquence, il y en a un en standard dans HTML5/WebAudio)
• Etc....

Je sais qu'un des élèves est malentendant, il pourra se concentrer sur les aspects "non audio" de l'application. Par exemple regarder comment faire la partie "dessin des pistes", "download/upload", "animation", "web de données" etc.

Nous allons découper le travail que vous allez faire en séances de TP et à chaque fois nous vous fourniront des éléments pour avancer. Les dernières séances seront consacrées à la finalisation de votre travail et à la présentation de vos résultats.

TP1 : bases de l'API Web Audio, serveur minimal

• Prise en main de Web Audio, nodeJS⁶ 

TP2 : Ajout de nouvelles fonctionnalités, refactoring

• TP2 nouvelles fonctionnalites et refactoring⁷ 

TP3 : angularJS, nouvelles fonctionnalités

• TP3 : frameworks, nouvelles fonctionnalités⁸

TP4 : un peu de métadonnées / réseaux sociaux ?

• TP4 : un peu de réseaux sociaux ?⁹