Site Mobile Avec Website X5 V9
Author: Nicolas C.
Visited 3146,
Followers 2,
Shared 44
Est ce que personne a tenté de creer son site en version mobile grace a website X5 V9? J'ai fait des recherches et je pense qu'avec l'option de redimensionnement des pages de la version V9 il ya des possibilités mais je coince, il faut creer une feuille de style specifiant la prise en charge d'un appareil mobile, mais la est le probleme c'est que tout reste tres vague sur le sujet, j'ai deja essayé de conformer mon site aux attentes du w3c mobile mais il reste faire detecter le site en question par opera mini et autre comme un site mobile et c'est pas evident.
Merci a tous
Posted on the
Author
En parcourant le web et en lisant les recommandation du w3c j'ai trouvé pas mal d'infos:
Source la minute du geek:
Un exemple de site mobile :
Pour l’exemple, j’ai développé le site mobile du groupe Concorde. Ce site comprend un lien pour écouter leur dernier single et un lien vers leur dernier clip vidéo. Vous pouvez devenir fan de leur page Facebook ou les suivre sur leur compte Twitter. Enfin vous pouvez partager le site de Concorde sur votre page Facebook ou en parler sur votre compte Twitter. Vous pouvez aussi “faire passer” le site à vos “vrais” amis en affichant un QRCode qu’ils peuvent flasher avec leur smartphone et qui renvoie vers le site mobile.
Pour tester le site, flashez ce QRCode :
Vous pouvez télécharger les sources de ce site ici :
Télécharger les sources
Développer son propre site mobile :
Il existe sur le web des tonnes de tutoriels très bien écrits sur jQuery Mobile. Je vais donc parler ici uniquement des astuces utiles pour les artistes.
Installer jQuery Mobile :
Développer un site pour mobile contient quelques contraintes techniques, comme la gestion des différentes tailles d’écran et sa rotation. Pour ne pas avoir à gérer ces contraintes, il est plus simple d’utiliser un Framework, c’est à dire un squelette en HTML+Javascript+CSS qui vous permet de construire votre site plus rapidement. Le plus populaire est sûrementjQuery Mobile. Si vous n’avez pas peur que votre site ressemble à tous les autres sites, c’est une excellente solution.
Pour cela, il suffit de créer un document HTML et de copier/coller le code suivant :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <!-- Copiez/collez l'exemple ici --> </body> </html>
Pour installer la dernière version de jQuery Mobile, copiez/collez le “snippet” sur cette page.
Customiser votre site avec une image :
Pour customiser votre site simplement, vous pouvez ajouter une image en fond d’écran. Un peu de CSS et le tour est joué. Copiez/collez ce code dans le <head> :
<style> body { background: #000 url(img/background.jpg) no-repeat center top; } .ui-page { padding-top: 80px; background: transparent; } </style>Jouer un son :
En théorie les players audio HTML5 avec un “fallback” en flash, comme jPlayerou SoundManager 2, devraient être une bonne solution pour jouer un MP3 sur un smartphone. Dans la pratique, les navigateurs sont tellement buggés (voir régle n°6) que cette solution est un vrai casse tête. En attendant que les navigateurs supportent (vraiment) le HTML5, je vous conseille de créer un lien directement vers votre MP3. Dans ce cas, le smartphone utilisera le lecteur multimedia du système pour lire le son.
Pensez à encoder votre MP3 en 64kb/s ou maximum 128Kb/s (voir régle n°7).
Exemple :
<div data-role="page" id="sound"> <div data-role="content"> <a href="sound/candy-boy.mp3" rel="external" data-role="button" data-icon="arrow-r" data-iconpos="right">Listen to Candy Boy</a> </div> </div>Afficher une vidéo :
Pour les mêmes raisons que le son, oubliez les lecteurs vidéo en HTML5. Avec une contrainte supplémentaire : chaque fabriquant essaye d’imposer son propre encodagepour les vidéos compatibles HTML5. Sauf si vous voulez vous lancer dans l’encodage de votre vidéo en FLV, OGG, H.264 et WebM… laissez tomber.
Par contre, Youtube qui ambitionne d’être le plus compatible possible sur les smartphones, s’occupera de la portabilité de votre vidéo. Donc postez la sur Youtube et ajoutez un lien vers la page de votre vidéo. Pour avoir la version mobile de cette page, remplacez www.youtube.com par m.youtube.com.
Exemple :
<div data-role="page" id="video"> <div data-role="content"> <a href="http://m.youtube.com/watch?v=8OgpNs636X4" rel="external" data-role="button" data-icon="arrow-r" data-iconpos="right">Watch Candy Boy Video</a> </div> </div>Créer un lien vers votre page Facebook et Twitter :
Comme Youtube, Facebook et Twitter possèdent une version mobile de leur site. Pour y accéder, modifiez votre URL et remplacez www.facebook.com par m.facebook.com et twitter.com par mobile.twitter.com.
Sur ces pages, l’utilisateur pourra “liker” votre page Facebook ou suivre votre compte Twitter.
Exemple :
<div data-role="page" id="follow"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Follow Concorde</li> <li><a href="http://m.facebook.com/withconcorde" rel="external">Facebook</a></li> <li><a href="http://mobile.twitter.com/withconcorde" rel="external">Twitter</a></li> </ul> </div> </div>Partager votre site sur Facebook et Twitter :
Evidemment, vous n’allez pas partager un site mobile sur votre mur Facebook, ou vos amis sur leur ordinateur risquent d’avoir une mauvaise surprise. Mais la possibilité de partager votre site web via un smartphone peut être une fonctionnalité intéressante (maintenant que vous l’avez optimisé pour Facebook grace àla minute geek).
Pour Facebook, l’url pour partager du contenu sur un smartphone est :
http://m.facebook.com/sharer.php?u=http//www.votre-site.com/
Pour Twitter, pas d’url prévu pour le mobile, mais l’outil de partage est suffisamment clair pour s’afficher sur un petit écran. :
http://twitter.com/share?text=Votre texte&url=http//www.votre-site.com/
Pour encoder vos variables dans vos urls, utilisez ce site : URL Decoder/Encoder
Exemple :
<div data-role="page" id="sound"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Share This</li> <li><a href="http://m.facebook.com/sharer.php?u=http://bj.mu/concorde/" rel="external">Facebook</a></li> <li><a href="http://twitter.com/share?text=Découvrez Concorde&url=http://bj.mu/concorde/" rel="external">Twitter</a></li> </ul> </div> </div>Créer un QRCode :
Dans notre exemple, nous avons utilisébit.lypour générer un QRCode. De cette façon nous obtiendrons les statistiques sur le nombre de codes flashés. Pour afficher le QRCode associé à votre lien bit.ly, rajoutez .qrcode à la fin de votre lien.
Exemple :
<div data-role="page" id="qrcode"> <div data-role="content"> <center><img src="http://bit.ly/mDeB2P.qrcode" width="300"></center> </div> </div>Diffuser votre site mobile :
Pour diffuser votre site mobile, imprimez le QRCode sur vos affiches, vos flyer ou vos places de concert. N’hésitez pas à ajouter un petit texte explicatif sous le QRCode, beaucoup de gens ne savent pas encore ce que cela représente.
Pensez à ajouter votre QRCode dans vos dossiers de presse, les journalistes papier seront ravis d’ajouter un peu d’interactivité dans leur article.
Pour finir, voici une superbe utilisation du QRCode pour la sortie du dernier album de Saul Williams (même si il ne respecte pas la règle 8) :
<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/4MtFfR778L0?rel=0″ frameborder=”0″ allowfullscreen></iframe>
Cela reste quand pas tres clair pour adapter avec website X5 v9, et vous qu'en pensez vous?
Je ne me suis pas intéressé à la question, mais le manuel indique ceci :
" En fonction des choix effectués et des paramètres définis, WebSite X5 engendre automatiquement le code des pages HTML5 + CSS 2.1 ou 3 en garantissant ainsi la pleine compatibilité avec tous les navigateurs et les dispositifs mobiles, ainsi qu'une indexation correcte de la part des moteurs de recherche. "
Donc reste à savoir ce que sont les choix effectués et les paramètres définis ?
Les techniciens d'Incomedia mettront bientôt des tutoriels sur le forum. Nous essaierons d'en savoir plus sur ce sujet qui te tient à coeur. @+ J.P.