Portfolio

1. Présentation

Je suis Web Designer, Web Developper et DJ professionnel depuis plus de 25 ans. La charité bien ordonnée commençant par soi-même, je décide en 2013 de créer mon propre site Web dreadlitoko.com, afin de présenter mes travaux réalisés en deejaying et surtout de mettre à profit mes nombreuses compétences développées en informatique.

2. Graphisme de ce site Web

Concernant les principaux éléments visuels de ce site, le logo "Dread Litoko - Volcano Mix" et l'avatar "dL" ont été créés et exportés au format SVG avec Adobe Illustrator, tandis que la maquette du site a été réalisée avec Adobe Photoshop.

Quant aux pochettes d'albums et aux couvertures de mixes, les premières ont été retouchées et les secondes créées à l'aide de Photoshop, avant d'être exportées aux formats JPG et WebP.

3. Développement de ce site Web

3.1. Enregistrements de mixes

Hébergé chez OVH, ce site Web présente les sessions de mixes produites de 2013 à nos jours. De 2013 à 2022, ces mixes ont été enregistrés en direct sous forme audio avec le logiciel Virtual DJ ; et sous forme vidéo à partir de 2022 à l'aide du logiciel OBS. Les montages vidéos ont ensuite été réalisés avec Adobe Première.

3.2. Base de données

Toutes les informations relatives à ces enregistrements (audio et vidéo) sont stockées dans une base de données MySQL hébergée également chez OVH et composée principalement de 5 tables :

• mixes [id_mix, titre, mixGenres, mixDay, mixDuration, etc.]
• artistes [id_artist, artistName]
• albums [id_album, id_artist, albumTitle, albumYear]
• tunes [id_tune, id_album, tuneTitle, explicit, etc.]
• playlists [id_playlist, id_mix, trackNumber, id_tune, start, etc.]

PHP et SQL sont les deux langages utilisés pour extraire toutes ces informations et les afficher sur le site. Les pages Web contenant les codes de ces deux langages de programmation ont été créées from scratch avec le programme Adobe Dreamweaver, en ayant recours au langage HTML pour la structure graphique ; au framework Bootstrap pour le responsive design ; et à des fichiers CSS personnalisés pour la mise en forme.

3.3. Page d'acceuil

Intitulée Volcano Mix, la page d'accueil du site affiche la liste des années d'enregistrements de tous les mixes réalisés à partir de 2019 ; les années précédentes (2013-2015) étant regroupées dans l'onglet Archives.

Sur la même page d'accueil, juste en dessous de la liste des années, apparaissent également les titres de tous les mixes enregistrés durant la dernière année d'activité (ici 2026). Ces titres sont affichés en ordre chronologique décroissant. Par ailleurs, en cliquant sur l'une ou l'autre année, vous obtenez la liste de tous les mixes réalisés durant cette période.

4. Lecteur audio ou vidéo

4.1. Lecteur HTML5

À partir de la page d'accueil, lorsque l'on clique sur n'importe quel bouton Play audio ou vidéo , une nouvelle fenêtre s'ouvre détaillant tous les morceaux de musique qui ont été mixés. Toutes les informations contenues dans cette fenêtre sont extraites des tables de données :

• playlists [ordre de lecture + temps de départ des morceaux]
• albums [pochette + année]
• tunes [titre + année des morceaux]
• artistes [nom]

L'emplacement du lecteur HTML5 contenu dans cette nouvelle fenêtre varie selon le type d'enregistrement du mix : audio ou vidéo. En effet, lorsqu'il s'agit d'un fichier audio, le lecteur s'affiche en bas de la fenêtre (en mode fixe flottant) ; tandis que s'il s'agit d'un fichier vidéo, le lecteur apparaît normalement en haut de la page.

4.2. Bouton Play

À noter qu'à côté du titre de chaque morceau, un autre bouton Play audio ou vidéo est affiché, permettant d'accéder directement à la séquence où débute le mix du morceau. Cette information cruciale est stockée dans le champ start de la table playlists.

4.3. Début et fin du mix d'un morceau

Pour chaque morceau mixé, deux temps (au format [00:]00:00) sont indiqués au-dessus et en dessous du bouton Play audio ou vidéo correspondant. Au-dessus est indiqué le temps où le morceau débute durant la session du mix ; et en dessous, soit le temps où il finit (vidéo), soit la durée du morceau (audio).

Étant donné que tous les morceaux sont parfaitement mixés, voire fusionnés, l'auditeur ou le téléspectateur se retrouve naturellement incapable de les distinguer les uns des autres. Pour en savoir plus sur les "effets secondaires" de Volcano Mix, lisez ce qu'en dit Hanane El Ouakhchachi.

4.4. Affichage et partage d'un morceau

À côté de la pochette de chaque album sont verticalement affichés : le titre du morceau + le nom de l'artiste + l'année de parution de l'album. Juste à côté de cette dernière apparaît une flèche cliquable qui permet d'afficher et de partager une nouvelle page dans laquelle le lecteur audio ou vidéo est directement joué à partir de la séquence où commence le morceau choisi.

Exemple : cliquez d'abord ici et ensuite sur l'une ou l'autre flèche .

4.5. Couvertures de mixes

Au cas où le mix affiché dans la nouvelle fenêtre est une vidéo, on retrouve (en dessous de la liste de morceaux mixés) deux couvertures de mixes cliquables : elles sont au format WebP et correspondent aux vidéos enregistrées avant et après celle en cours.

5. Formats des fichiers audio et vidéo

Si les fichiers audio sont tous convertis à l'aide d'Adobe Audition au même format mp3, les vidéos sont par contre exportées avec Adobe Media Encoder sous deux formats : mp4 et WebM. Pour chaque format, il existe quatre différentes résolutions : 1920x1080, 1280x720, 854x480 et 640x360, correspondant chacune au seuil de largeur de divers écrans.

Concrètement, lorsqu'un visiteur arrive pour la première fois sur le site, un code écrit en Javascript et en PHP permet de stocker les dimensions de son écran dans un cookie afin de sélectionner la résolution de la vidéo correspondant à la largeur et à la hauteur de son écran.