Application Web HTML5

•• Formulation du besoin

Nous souhaitons développer une application (moteur) Web HTML5 de type Lecteur Karaoké pour l’apprentissage de la lecture.
Ce moteur servira à produire, décliner, des ressources Karaoké (Chanson, lecture…)

• Contraintes ergonomiques / graphiques

- Simplicité d’utilisation, intuitif
- Graphisme sobre et esthétique décliné à partir d’une charte existante
- Soin apporté aux détails

• Contraintes Techniques

- Format HTML5
- Code propre, respect des normes W3C
- Adapté aux principaux navigateurs (Chrome, Firefox, IE, Safari, Opéra, Edge…)
- Responsive et multi-supports Web (PC/MAC, tablettes & smartphone : IOS, Androïd, Windows)
- Optimiser la taille (poids) des fichiers, jamais au détriment de la qualité
- Convenir aussi bien aux connexions Hauts débits que bas débits
- Permettre de rectifier/corriger facilement une erreur dans le contenu
- Un fichier index.html situé à la racine de chaque ressource déclinée permettra de lancer le karaoké. Chaque ressource sera déployée sur un serveur
- Les karaokés seront également réunis sur une page sommaire HTML zippé pour être téléchargée et exécutée en local [donc hors serveur]
- Recetter correctement les gabarits

• 1. Détails du MOTEUR KARAOKE CHANSONS

- Synchronisation parfaite de l’audio et du texte
- Défilement du texte
- Remplissage ou graissage simultané
- Boutons pour passer d’une version vocale à une version instrumentale (basculement possible de l’une à l’autre sans repartir à zéro ? )
- Curseur de la barre d’avancement repositionnable
- prévoir la possibilité de rejouer la chanson à la fin
- Les boutons du curseur - en particulier le « play »- doivent être très visibles…
- Typographie adaptée aux écrans, s’affichant correctement sur tous les appareils, taille facilitant la lecture
- Interlignage suffisant pour permettre la lecture des dys.

• 2. Détails du MOTEUR KARAOKE LECTURE (à deviser en option)
Même principe que le précédent avec ajouts de :
- Texte interactif : un clic sur un mot repositionne l’audio et le curseur du lecteur. Relance de la lecture à partir de la sélection.
- Intégration possible d’un visuel d’illustration

• 3. Détails du MOTEUR KAROKE "ATELIER"
[Le principe de cette ressource est de présenter sur un même écran une vidéo et un lecteur karaoké].

Partie Vidéo
- Visionnage de la vidéo
- Intégration de la vidéo déposée sur une plateforme de type Vimeo en mode privé
[! : la version archive .zip à télécharger, destinée à être exécutée en local devra intégrer les vidéos aux formats mp4 ( et webm ?).]
- Lecteur classique avec curseur de la barre d’avancement repositionnable
- Possibilité d’afficher ou de masquer les sous-titres de la vidéo. [via fichier .srt ? ]

Partie Karaoké
- Typographie adaptée aux écrans, s’affichant correctement sur tous les appareils, taille facilitant la lecture
- Interlignage permettant la lecture des dys.
- Gras, couleur sur certains mots
- Synchronisation parfaite de l’audio et du texte, remplissage ou graissage simultané
- Passage à la phrase suivante par clic.
- Possibilité de réécouter la réplique
- Affichage visuel du nombre de phrases à écouter.
- Possibilité de repositionner le curseur sur la barre de progression
- Un clic sur la partie Karaoké doit automatiquement arrêter la vidéo
- Possibilité d’afficher ou de masquer sous le « karaoké », l’intégralité des phrases

• Travail à réaliser

- Réalisation des 3 moteurs Karaoké Chansons, Lecture (en option), Atelier
- Adaptation graphique des gabarits, déclinaison à partir d’une charte déjà constituée
- Production de ressources à partir des moteurs (9 Karaoké Chansons ; 7 Karaoké Atelier )

Nous fournissons le contenu : texte (.doc stylé), audio (fichiers découpés ou non au format WAV ou MP3), vidéos. Les éléments graphiques seront transmis aux formats InDesign et PDF et/ou Photoshop / Illustrator.

Le prestataire livrera le moteur et les ressources déclinées ainsi que des archives .zip regroupant toutes les ressources par catégories (Chansons, Lecture, Atelier) destinées à être téléchargées et lancées en local.

• Documents attendus
- une présentation de la solution technique envisagée avec le détail de la prestation
- Livrables (sources, ressources...)
- l’offre tarifaire en séparant le développement, l’adaptation graphique et la production pour les trois gabarits.
- le planning

• Planning indicatif
- Développement des gabarits et du graphisme entre décembre et le 15 janvier 2017
- Production des ressources : entre le 15 janvier et le 15 février 2017 pour les Karaokés Chansons et les Karaokés Lecture. Entre le 15 février et le 30/03 pour les ateliers