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.
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.
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
-
\skins
-
\css (les fichiers css et les polices pour les controles du player (font@face))
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
Par Johan Puisais - Xtendo : création de site internet Poitiers
Pour continuer votre lecture sur la thématique Scripts gratuits
- Outils SEO gratuits : sémantique, référencement naturel, scripts
- Ajouter un flux RSS à Google Plus
- Youtube Playlist PHP : Nouvelle version API V3
- Knacss : un concentré de savoir et de bonnes pratiques CSS
Tags : Scripts gratuits, Création de site web, Développement web Poitiers,
Commenter et noter cet article
Les commentaires pour cet article
Teddy Lambec - Calais France
Super, merci! J'ai fait ça: http://lambec.pagesperso-orange.fr/index.html
Ecrit le : 01/02/2013 à 23h00