{"id":1497,"date":"2026-05-07T13:27:04","date_gmt":"2026-05-07T11:27:04","guid":{"rendered":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?p=1497"},"modified":"2026-06-08T12:19:03","modified_gmt":"2026-06-08T10:19:03","slug":"rap-stream","status":"publish","type":"post","link":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/?p=1497","title":{"rendered":"Rap Stream"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"> Emmanuel YAHO COMLAN | Promotion 2025-2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le projet consiste en la conception et la r\u00e9alisation d\u2019un site de streaming musical gratuit d\u00e9di\u00e9 \u00e0 l\u2019univers du rap. D\u00e9velopp\u00e9 dans le cadre de l\u2019unit\u00e9 de conception de site web entre le semestre 5 et le semestre 6, ce portail a \u00e9t\u00e9 pens\u00e9 comme une plateforme permettant d\u2019\u00e9couter de la musique sans publicit\u00e9 ni abonnement, \u00e0 travers une interface moderne, claire et accessible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019objectif principal du site \u00e9tait de proposer une alternative gratuite aux plateformes de streaming traditionnelles, tout en mettant en avant la d\u00e9couverte du rap francophone et international. Le portail regroupe ainsi un catalogue musical organis\u00e9 permettant aux utilisateurs d\u2019acc\u00e9der facilement aux diff\u00e9rents titres, artistes et albums disponibles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le site a \u00e9galement \u00e9t\u00e9 con\u00e7u dans une logique d\u2019exp\u00e9rience utilisateur, avec une navigation fluide, une interface responsive adapt\u00e9e aux supports mobiles et une organisation claire des contenus musicaux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le premier \u00e9l\u00e9ment cl\u00e9 du site est le lecteur audio int\u00e9gr\u00e9, qui constitue la fonctionnalit\u00e9 centrale du portail. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07-1024x555.png\" alt=\"\" class=\"wp-image-1498\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07-1024x555.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07-300x163.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07-768x417.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07-850x461.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.07.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 1 : Lecteur audio int\u00e9gr\u00e9<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Celui-ci permet \u00e0 l\u2019utilisateur d\u2019\u00e9couter les morceaux de mani\u00e8re fluide et continue directement depuis le site, sans interruption publicitaire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une attention particuli\u00e8re a \u00e9t\u00e9 port\u00e9e \u00e0 la simplicit\u00e9 d\u2019utilisation du lecteur afin de garantir une exp\u00e9rience agr\u00e9able et intuitive. L\u2019utilisateur peut naviguer facilement entre les diff\u00e9rents morceaux tout en conservant une lecture stable et rapide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette fonctionnalit\u00e9 joue un r\u00f4le essentiel dans l\u2019identit\u00e9 du projet puisqu\u2019elle rapproche le site du fonctionnement des v\u00e9ritables plateformes de streaming musical.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le deuxi\u00e8me \u00e9l\u00e9ment cl\u00e9 du site repose sur l\u2019organisation du catalogue musical. Les contenus ont \u00e9t\u00e9 structur\u00e9s afin de permettre une navigation claire entre les artistes, les albums et les genres musicaux.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40-1024x477.png\" alt=\"\" class=\"wp-image-1499\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40-1024x477.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40-300x140.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40-768x358.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40-850x396.png 850w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/Capture-decran-2026-05-07-a-13.09.40.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 2 : Catalogue musical<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque morceau est accompagn\u00e9 de plusieurs m\u00e9tadonn\u00e9es, comme le nom de l\u2019artiste, la pochette de l\u2019album ou encore les informations li\u00e9es au projet musical. Cette structuration permet d\u2019am\u00e9liorer l\u2019accessibilit\u00e9 des contenus et facilite la recherche des \u0153uvres par les utilisateurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le site int\u00e8gre \u00e9galement un syst\u00e8me de recherche permettant d\u2019acc\u00e9der rapidement \u00e0 un artiste, un album ou un titre pr\u00e9cis, renfor\u00e7ant ainsi l\u2019efficacit\u00e9 de la navigation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le troisi\u00e8me \u00e9l\u00e9ment cl\u00e9 du site concerne l\u2019interface utilisateur et le travail r\u00e9alis\u00e9 autour du design. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"941\" src=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14.png\" alt=\"\" class=\"wp-image-1692\" style=\"width:840px;height:auto\" srcset=\"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14.png 1672w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14-300x169.png 300w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14-1024x576.png 1024w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14-768x432.png 768w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14-1536x864.png 1536w, https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/wp-content\/uploads\/2026\/05\/ChatGPT-Image-8-juin-2026-12_16_14-850x478.png 850w\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" \/><figcaption class=\"wp-element-caption\"><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">Figure 3 : Interface utilisateur &amp; Design<\/mark><\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019identit\u00e9 visuelle a \u00e9t\u00e9 pens\u00e9e pour correspondre \u00e0 l\u2019univers du rap et du streaming musical, avec une interface moderne, \u00e9pur\u00e9e et dynamique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le site a \u00e9t\u00e9 d\u00e9velopp\u00e9 dans une logique responsive afin de garantir une exp\u00e9rience optimale sur ordinateur, tablette et mobile. Cette adaptation \u00e9tait particuli\u00e8rement importante puisque l\u2019\u00e9coute musicale se fait aujourd\u2019hui majoritairement sur smartphone. Les choix graphiques, les couleurs et l\u2019organisation des contenus ont \u00e9t\u00e9 con\u00e7us pour offrir une navigation fluide tout en mettant en valeur les albums et les artistes pr\u00e9sents sur le portail.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce projet a permis de mobiliser plusieurs comp\u00e9tences li\u00e9es \u00e0 la conception web, notamment en design d\u2019interface, en structuration de contenus et en int\u00e9gration front-end. Il a \u00e9galement repr\u00e9sent\u00e9 une exp\u00e9rience importante en mati\u00e8re d\u2019autonomie et d\u2019organisation de projet. La r\u00e9alisation du site a mis en \u00e9vidence les enjeux li\u00e9s \u00e0 l\u2019exp\u00e9rience utilisateur dans le domaine du streaming musical, en conciliant accessibilit\u00e9, fluidit\u00e9 de navigation et valorisation des contenus artistiques.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Emmanuel YAHO COMLAN | Promotion 2025-2026 Le projet consiste en la conception et la r\u00e9alisation d\u2019un site de streaming musical gratuit d\u00e9di\u00e9 \u00e0 l\u2019univers du rap. D\u00e9velopp\u00e9 dans le cadre de l\u2019unit\u00e9 de conception de site web entre le semestre 5 et le semestre 6, ce portail a \u00e9t\u00e9 pens\u00e9 comme une plateforme permettant d\u2019\u00e9couter&#8230;<\/p>\n","protected":false},"author":4,"featured_media":1694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[203],"tags":[287,37,281,286],"class_list":["post-1497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pop-culture","tag-lecteur-audio","tag-musique","tag-rap","tag-streaming"],"_links":{"self":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1497"}],"version-history":[{"count":3,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1497\/revisions"}],"predecessor-version":[{"id":1695,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/posts\/1497\/revisions\/1695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=\/wp\/v2\/media\/1694"}],"wp:attachment":[{"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/7465.peda.univ-lille.fr\/projetslicenceSID\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}