La musique du domaine public

Cet exercice aura pour but l’utilisation de quelques éléments visuels et sonores appartenants libre de droit. Le tout dans l’espace visible sans scroll d’une page web, appelé fold, avec du javascript et des médias queries pour aider à la réalisation.

Précédent | 2/2

Cours à distance

Cet exercice peut être réalisé en se basant sur les tutoriels écrits sur ce site qui font office de cours en ligne. Ils complètent les dizaines de milliers de pages et de vidéo sur les sujets impliqués dans cet exercice, sur html, css, la balise audio, javascript et jquery, etc.
Le temps du confinement peut être un moment de plongée dans ces techniques, qui s’acquièrent pas à pas.

Domaine public

La définition du domaine public (wikipedia) est :

En droit de la propriété intellectuelle le domaine public désigne l’ensemble des œuvres de l’esprit et des connaissances dont l’usage n’est pas ou n’est plus restreint par la loi.

Cela peut être par exemple :
- un savoir sur lequel aucun monopole n’est accordé, comme une formule mathématique ;
- une œuvre de l’esprit qui n’est pas protégée par le droit d’auteur, comme le discours d’un parlementaire ;
- une œuvre de l’esprit qui n’est plus protégée par le droit d’auteur, après expiration ;
- un brevet qui a expiré.

Dans les deux derniers cas, on dit alors que cette œuvre ou ce brevet est « tombé (ou entré ou élevé) dans le domaine public »

Dans notre cas, on ira chercher un morceau - ou des samples - et des images libres de droit sur le web (ou produit par vous, pourquoi pas) et une page web sera créée pour l’occasion.

Contenu du site

- Le site est structuré en une seule page
- Le titre du site est suivi d’une baseline : la description du site en quelques lignes.
- Un lecteur audio HTML5 permettant l’écoute des morceaux via la balise <audio>. Comme on le verra, le lecteur audio est spartiate mais il peut être personnalisé avec du javascript. Le lecteur devra donc être remplacé par des boutons Start/pause adaptés et un timer sous forme de chiffre et/ou de barre de défilement.
- Un chapitre de 1200 mots présente le contexte doit être caché et apparaitre grâce à un clic
- Une image de fond de page, elle même libre de droit, doit pouvoir être remplacée par d’autres images sur base d’un clic ou d’une action automatique liée à la lecture d’un son, ou tout autre système interactif.

Javascript

Puisqu’il faut afficher l’information sans qu’il soit nécessaire de scroller la page (sur un écran d’ordinateur ou une tablette), il faudra faire intervenir du javascript pour faire apparaitre/disparaitre les contenus textes et les images.
De même les sons sont joués grâce à des boutons ou autre type d’interaction (un hover par exemple).

Media queries

Comme nous avons survolé la matière des médias queries, il vous est demandé d’adapter la page aux tailles d’ordinateur, tablettes et smartphones, soit au minimum 600px et moins / 600px à 1024px /1200px et plus.

Penser la taille

Le site doit apparaitre dans le fold sur écran d’ordinateur. Vous devrez penser une largeur de colonne pour ce site. Si la mise en page sur smartphone utilise toute la largeur disponible, il faut cependant penser les autres tailles, sachant que les écrans de grande taille sont maintenant du côté du 1600px à 1920px. Il est donc important de penser les limites de l’agrandissement du wrapper, et de la manière dont l’espace libre se répartit.

Durée de l’exercice

3 semaines. Au terme de ces séances, le travail sera remis sur clé usb ou uploadé sur le site. Ces pages seront montrées aux portes ouvertes.

Sources possibles

Comme évoqué, le matériel audio ainsi que les images éventuelles doivent être libres de droit ou vous devez obtenir les droits de diffusion sur le site.
Vous pouvez commencer par des recherches sur le site archive.org ou sur freemusicarchive
freesound
samples de beat sur musicradar

La page doit être une expérience intéressante pour l’utilisateur quel que soit le mode envisagé.