Template responsive design gratuit à télécharger

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.

Pour la création de sites web responsives à poitiers faites appel à Xtendo.

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)

Télécharger

Par Johan Puisais - Xtendo : création de site internet Poitiers

Pour continuer votre lecture sur la thématique Scripts gratuits

Partager l'article sur :

Tags : Scripts gratuits, Création de site web, Développement web Poitiers,

Commenter et noter cet article

Les commentaires pour cet article

- Calais France

Super, merci! J'ai fait ça: http://lambec.pagesperso-orange.fr/index.html

Ecrit le : 01/02/2013 à 23h00