Techniqueries

Techniqueries pour le web mobile

qrcode

La présente page a pour but de présenter où en est le service national du RÉCIT MST dans son projet de recherche et développement en lien avec les technologies mobiles dans leur domaine. Vous trouverez les divers éléments techniques utilisés jusqu'à présent pour rendre accessible le contenu publié par le service aux appareils mobiles.




Ce que ça fait


En visitant le site du RÉCIT MST avec un mobile, des liens sont ajoutés dans la colonne de droite pour signaler la version mobile du site et un lien vers d'autres ressources pour les mobiles.

Le SPIP du RÉCIT MST
handout

Même chose si le visiteur entre directement dans un article:

Article du RÉCIT MST
handout

Si on clique sur le lien de la version mobile, le plugin SPIPMobileMST entre en action.

Le SPIPmobile RÉCIT 'ST
handout


Le WikiniMST (thème mobile) a également un thème pour les mobiles. Ici le site http://imager.recitmst.qc.ca vue par un mobile:

Imager en MST pour mobiles
handout

et le site http://m.recitmst.qc.ca (site de base pour les ressources mobiles du MST):

m.RECITMST.qc.ca
handout

Comment ça le fait?


Le but est de détecter que le visiteur navigue avec un appareil mobile. Puis, soit de lui offrir un lien (mis en évidence) vers la version mobile du site, soit de le rediriger automatiquement vers cette version mobile.


Pour détecter: Mobile_detect


Il existe plusieurs façons de détecter si le visiteur de votre site navigue avec un appareil mobile. Nous choisissons la classe php-mobile-detect pour sa souplesse et le nombre d'appareils détectés.

Cette classe peut détecter un iPad ou une tablette Android, donc permet d'ajuster le contenu selon la taille de l'écran.

CSS et JS pour mobile


Après la détection, on doit passer à l'action (adapter le contenu aux petits écrans). Pour ce faire, nous avons utilisé ce «framework» http://jquerymobile.com/ pour le WikiNiMST. Il contient des fichiers «javascripts» qui animent quelque peu les pages et des feuilles de styles qui «formatent» l'esthétique des pages.


Plugin SPIPMobileMST


Afin de rendre ses sites sous SPIP accessibles via des appareils mobiles, le RÉCIT MST a créé ce plugin: http://recitmst.qc.ca/spip/Plugins-spipmobilemst

Le plugin SPIPMobileMST donne une version accessible aux mobiles à une adresse différente que celle du SPIP de base. On doit donc avertir le visiteur de l'existence de la version mobile et lui offrir un lien vers celle-ci. Pour ce faire, dans le squelette SPIP, j'ai ajouté dans la page sommaire.html (page d'accueil de SPIP) ces codes:


Dans le sommaire.html

<?php //on inclus la classe mobile-detect.php
include_once("#CHEMIN{Mobile_Detect.php}");
$detect = new Mobile_Detect();
?>

//si un mobile est détecté, on affiche un lien vers la vers mobile du SPIP à l'endroit désiré dans la page (en haut de la colonne de droite de notre site).

<?php if ($detect->isMobile()) {
// tous les mobiles

echo "<a href=\"http://recitmst.qc.ca/spip.php?page=m\">Version mobile du présent site</a>";

} ?>


Les codes QR


Pour partager de l'information avec un appareil mobile, les codes QR peuvent être utilisés. Ces codes contiennent de l'information (URL, texte, contacts, etc) sous forme d'un code à 2 dimensions (contrairement au code à barre).

Voici trois outils en lien avec la génération et le décodage de code QR:


On peut se servir ce des code QR de diverses façons. On peut les placer sur une version papier d'un document qui mène vers la version numérique, sur une affiche qui mène à un site Web, sur une page Web qui mène vers elle même ou les documents joints (plus rapide de saisir ce code QR avec un mobile que d'entrer l'URL à la main), etc.


Les vidéos


Un des moyens de partager des vidéos à tous les types d'appareils (portable, mobiles, tablettes...) est de les publier sur Youtube (ou autres services du genre). Mais si on veut s'héberger (pour garder le contrôle sur son contenu), il y a un moyen.

Nous utilisons le lecteur Flowplayer associé à du code html5 pour permettre aux utilisateurs de visionner les vidéos sur leur appareil. Nous encodons le vidéo en 2 formats, soit le .mp4 et le .ogv.

Le code ci-dessous est un exemple qui démontre comment, selon l'appareil utilisé, le vidéo sera affiché. Soit directement en HTML5 si le navigateur le supporte ou avec un lecteur Flash.
<!-- Begin VideoJS -->
		<div class="video-js-box">
		<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
			<video id="example_video_1" class="video-js" width="800" height="600" controls="controls" preload="auto" poster="css/video.png">
				<source src="deplacement_animation.mp4">
				<source src="deplacement_animation.ogv" type='video/ogg; codecs="theora, vorbis"' />
					<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
						<object id="flash_fallback_1" class="vjs-flash-fallback" width="800" height="600" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.8.swf">
						<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.8.swf" />
						<param name="allowfullscreen" value="true" />
						<param name="flashvars" value='config={"playlist":["http://recitmst.qc.ca/videos_scratch_jeux/css/video.png", {"url": "http://recitmst.qc.ca/videos_scratch_jeux/deplacement_animation.mp4","autoPlay":false,"autoBuffering":true}]}' />
	                                  <!-- Image Fallback. Typically the same as the poster image. -->
			                 <img src="http://recitmst.qc.ca/videos_scratch_jeux/css/video.png"  width="800" height="600"  alt="Poster Image" title="No video playback capabilities." />
			                   </object>
		</video>
		</div>
<!-- End VideoJS -->


Le code ci-dessous est une boucle SPIP, associée à php-mobile-detect, qui permet de publier du vidéo en HTML5 dans un SPIP. Nous avons créé un modèle pour gérer le tout.
<BOUCLE_doc (DOCUMENTS types_documents) {id_document=#ID}{mode=document} {tout}>
<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[ style='float:(#ENV{align}|match{left|right});']>

	<div class="video-js-box">

	<?php if ($detect->isMobile() AND !$detect->isAndroidtablet() AND !$detect->isIpad()) { echo "<video  class=\"video-js\" width=\"300\" height=\"150\" controls=\"controls\" preload=\"auto\" poster=\"#URL_SITE_SPIP/squelettes/modeles/video.png\">";} 
	else { echo "<video  class=\"video-js\" width=\"620\" height=\"415\" controls=\"controls\" preload=\"auto\" poster=\"#URL_SITE_SPIP/squelettes/modeles/video.png\">";} 
	?> 
		
			
		<source src="#URL_SITE_SPIP/#URL_DOCUMENT" />
			<BOUCLE_alt (DOCUMENTS types_documents) {id_document=#ENV{alt}}{mode=document} {tout}>
				<source src="#URL_SITE_SPIP/#URL_DOCUMENT" type="#MIME_TYPE" />
			</BOUCLE_alt>

			<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE --> 
			<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
			<object id="flash_fallback_1" class="vjs-flash-fallback" width="620" height="425" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.8.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.8.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"playlist":["#URL_SITE_SPIP/squelettes/modeles/video.png", {"url": "#URL_SITE_SPIP/#URL_DOCUMENT","autoPlay":false,"autoBuffering":true}]}' />
			</object>

		</video>
	</div><!-- End VideoJS -->
</span>
</BOUCLE_doc>

Contrat Creative Commons Le contenu du présent site du RÉCIT MST est mis à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 4.0 International.