e-boo la mascotte Xtendo

Template responsive design gratuit à télécharger

Abonnez vous au flux RSSRetrouvez nous sur FacebookRetrouvez nous sur Twitter

Article du 18/07/2012 à 19h25 | Note : 4 en 1 votes

Cela faisait longtemps que je souhaitais mettre en ligne un exemple de thème responsive. Le temps passe vite mais le voici.
Pour illustrer cette démo j'ai choisi comme thème la musique.Capture responsive design

C'est donc un template qui conviendra à tous le monde mais particulièrement à un artiste ou à un groupe de musique souhaitant diffuser ses créations sur smartphones et tablettes IOS ou Android en offrant confort et ergonomie à ses visiteurs.

Certaines parties de code sont issuent de travaux préléminaire pour le cms Xtendo et certaines demandes d'utilisateurs.

Voir la démo.

Pour ce template responsive j'ai utilisé :

- HTML5
- CSS3 et les media queries
- Php et xslt pour la playlist dynamique alimentant le player audio.
- Xml pour la version avec playlist statique alimentant le player audio.
- Jquery avec les plugins suivants : html5shim et css3-mediaqueries pour Ie.
- Le player Flash et Html5 JwPlayer 5.7 pour lire les MP3. Ce player audio est alimenté par une playlist au format MRSS (media RSS : Media Real Simple Syndication) qui est soit statique soit dynamique via php/xslt selon votre serveur. Ce format assure une certaine compatibilité avec HTML5.

J'ai souhaité faire un template responsive simple afin de permettre facilement sa compréhension et sa modification.

Il est composé :

- D'un header comprenant le logo et le player html5/flash.
- D'un menu de navigation toolbar en dessous.
- D'une zone pour les contenus.
- D'une navigation secondaire située à droite.
- Et d'un footer.

Les fichiers constitutifs de cette démo :

  • \racine
    .htaccess (facultatif, il optimise la performance du site)
    crossdomain.xml (autorise flah à faire du crossdomain)
    index.html (le template responsive)
    mrss_playlist_produits_widget.php (fichier php pour la génération dynamique de la playlist)
    mrss_playlist_produits_widget.xsl (fichier xslt pour la génération dynamique de la playlist)
    • \css (les fichiers css et les polices pour les controles du player (font@face))
      guifx_v2_transports-webfont.eot
      guifx_v2_transports-webfont.svg
      guifx_v2_transports-webfont.ttf
      guifx_v2_transports-webfont.woff
      media-queries.css (css des règles media queries)
      style.css (styles généraux)
    • \data_xml
      mp3.xml (fichier xml pour la playlist dynamique)
      playlist_rss.xml (playlist MEDIA RSS version statique)
    • \files (dossier qui contient les MP3)
      desert_de_reverberes_01.mp3
      free_master_cm_09-2002.mp3
      le_sauveur_02.mp3
      missing-song.mp3
    • \images (dossier pour les images)
      body-bg-f.jpg
      deserts-de-reverberes.jpg
      exemple-image.jpg
      free.jpg
      le-sauveur.jpg
      logo.png
      missing-song.jpg
      nav-bar-bg.png
    • \mediaplayer_5_7_viral (dossier et sous dossier de jw mediaplayer)
      crossdomain.xml
      jwplayer.js
      license.txt
      player.swf
      preview.jpg
      swfobject.js
      • \skins
        add_igoogle.png
        mediator_rss.png
        xtendo_musique.png

Personnaliser cette démo :

- Le design : là je vous laisse modifier selon vos besoins et goûts les css et le html
- La playlist : l'intérêt est que vous puissiez mettre vos propres MP3 en lignes, donc il vous faut modifier :
- soit le fichier mp3.xml dans /data_xml (fichier xml pour la playlist dynamique)
- soit le fichier playlist_rss.xml dans /data_xml (playlist MEDIA RSS version statique)
Voir le code et les explications ici

Bon code et bonne diffusion :-)

Téléchargez les sources ci-dessous 

(Les mp3 ont été tronqués et la qualité abaissée afin de ne pas avoir un fichier zip trop lourd à télécharger)

Commenter et noter cet article



Vos commentaires


Par Teddy Lambec | Calais - France | Note : 4 sur 5

Super, merci! J'ai fait ça: http://lambec.pagesperso-orange.fr/index.html Le : 01/02/2013 à 23h00


Derniers articles sur le blog

Gérer librement ses favoris avec Shaarly
Knacss : un concentré de savoir et de bonnes pratiques CSS
Qwant : "Chercher français"
Convertir ses playlists en ligne avec Soundiiz
La refonte d'un site web

Qu'est-ce qu'un CMS

Qu'est ce qu'un CMSUn Cms est un logiciel en ligne qui permet de gérer la totalité des contenus (Textes, images, vidéos, sons, ...) d'un site internet sans connaissances techniques particulières.

Article du 12/09/2011 à 22h15
Suite de Qu'est-ce qu'un CMS