11 Rue de Navarre 14370 Chicheboville Affaire suivie par : Pierre BOUCHARD pierre.bouchard@starnav.fr Document technique intégration Head Pilot Online dans un site internet Préparé par Pierre BOUCHARD Prepared by Vérifié par Georges LAMY AU ROUSSEAU Checked by
Table des matières 1. Introduction... 3 2. Procédure d'installation... 3 2.1. Les éléments nécessaires sur chaque page du site... 3 2.2. Les éléments nécessaires pour lancer Head Pilot Online... 4 2.3. Cas particuliers des sites WordPress et Joomla!... 4 2.3.1. Les sites WordPress... 4 2.3.2. Les sites Joomla!... 5 2.3.3. Les sites Drupal... 5 Document de Référence [DR1] Répertoire des mises à jour Nom du fichier 2015 20 Document technique - intégration Head Pilot Online dans un site internet Historique 04/05/2015 Pierre BOUCHARD Création, first issue Modification 1.01 04/09/2015 Pierre Bouchard Version 2.3.5 de HPO STARNAV : Archivage Diffusion 2
1. INTRODUCTION Head Pilot Online est un module logiciel qui permet de rendre un site Internet accessible aux personnes ne pouvant pas utiliser leurs membres supérieurs. Ces personnes peuvent être des personnes handicapées ou en phase de perte d autonomie, de façon plus ou moins importante (de la gêne articulaire au handicap lourd), permanente ou temporaire. Le logiciel analyse le flux vidéo d une webcam (qui peut être interne ou externe) pour positionner un curseur sur l écran de l ordinateur. L utilisateur peut ainsi bouger le curseur grâce à ses mouvements de tête et générer un clic après une temporisation lorsqu il cesse son mouvement. Head Pilot a été «encapsulé» sous la forme d un plugin qui s intègre à un site Internet de façon très simple. Ce document explique donc comment intégrer Head Pilot Online dans un site internet. 2. PROCÉDURE D'INSTALLATION Head Pilot Online ne nécessite que quelques lignes de code à ajouter dans les pages d'un site internet. Un accès à la partie administration du site est nécessaire. Dans la majorité des cas, l'accès aux serveurs via un ftp n'est pas nécessaire. Pour chaque site internet, la modification des headers, des menus ou des pieds de pages est différente, nous ne pouvons donc pas décrire la procédure pour votre site en particulier. Cependant, notre équipe se rendra disponible pour vous accompagner dans cette installation. 2.1. Les éléments nécessaires sur chaque page du site Sur chaque page du site internet, l'outil a besoin de ces lignes de code. Dans le header de chaque page : <script type="text/javascript" src="http://www.access-man.com/headpilot/ressources/headpilot-online.js"></script> La première ligne incluant jquery n'est nécessaire que si jquery n'est pas déjà inclus dans les pages du site internet. Jquery étant bien répandu, cette ligne n'est pas souvent nécessaire. 3
Dans le contenu de chaque page : <img style="display:none" src="" id="imagemessagehpol"> <img style="display:none" src="" id="imagemessagehpo"> Ces images ne sont pas affichées sur les pages. Elles n'impactent donc pas la présentation existante du site internet. 2.2. Les éléments nécessaires pour lancer Head Pilot Online Pour utiliser Head Pilot Online, il est nécessaire d'installer un outil sur l'ordinateur de l'internaute. Il faut donc lui donner un lien de téléchargement. Ensuite, pour lancer Head Pilot Online depuis le site internet, il est nécessaire d'inclure un ou plusieurs bouton. La balise "<button>" peut être remplacée par une balise lien "<a>" sans aucun problème. Il est cependant important de garder la classe "btnlancementheadpilot". Enfin, pour plus de visibilité de l'outil, nous avons inclus dans notre code exemple une image HEADPILOT.png pour accompagner le bouton et le lien de téléchargement. Cette image est facultative. <img src="http://www.access-man.com/headpilot/ressources/headpilot.png" width="100px" /><br/> <button class="btnlancementheadpilot">lancer Head Pilot Online</button><br/> <a href="http://www.access-man.com/headpilot/downloadhponline.php">installer Head Pilot Online</a> Chaque administrateur de site internet est libre d'adapter le design et le contenu de ce code qui n'est proposé qu'à titre d'exemple. 2.3. Cas particuliers des sites WordPress et Joomla! Pour les sites WordPress et Joomla!, nous avons développé des plugins qui facilitent encore plus l'inclusion de notre plugin dans les sites. Pour les sites en Drupal, il vous sera nécessaire d'utiliser la fonctionnalité de blocs HTML. 2.3.1. Les sites WordPress Nous fournissons une extension WordPress. Il vous suffira d'effectuer ces actions : Dans le menu Extensions, ajouter l'extension via le lien envoyer Une fois l'installation effectuée, Activer l'extension 4
Une fois l'extension activée, un nouveau menu Head Pilot Online apparait dans les Réglages Copiez-collez le code proposé en paragraphe 2.2 et insérez le dans un module texte en pied de page ou dans vos menus (par exemple) Votre site intègre à présent Head Pilot Online! 2.3.2. Les sites Joomla! Nous fournissons également une extension/module Joomla!. Il vous suffira d'effectuer ces actions : Dans le menu Extension/Gestion des extensions/archive à Envoyer, choisissez le fichier que nous fournissons et installez l'archive. Dans le menu Extension/Gestion des modules, recherchez "Head Pilot Online" et entrez dans le module Modifier la position pour le mettre dans le pied de page (footer) par exemple Passer le statut à "Publié" Dans la partie "Assignation des menus" activez sur toutes les pages. Enregistrez le module Copiez/Collez ensuite le code proposé en paragraphe 2.2 dans le module où vous le souhaitez sur le site. C'est ce code qui affiche le bouton de lancement et le lien de téléchargement de l'installateur. 2.3.3. Les sites Drupal Nous n'avons pas développé de module dédié aux sites Drupal. L'utilisation des modules de structure "Blocs" font le travail très efficacement. Voici la procédure à suivre. Dans le menu "Structure", cliquez sur la partie "Blocs" Ajoutez un "Ajouter un bloc" Renseignez le titre si vous le souhaitez Renseignez une description du bloc Dans la partie Corps du bloc, copiez-collez le code des paragraphes 2.1 et 2.2 Sélectionnez le format de texte "Full HTML" pour autoriser toutes les balises HTML 5
Enfin, sélectionnez l'emplacement de votre bloc Head Pilot Online. Dans notre cas, nous avons choisi le pied de page Figure 1 : Bloc Head Pilot Online sur un site Drupal Ça y est, votre pied de page affiche une nouvelle section. Si ce pied de page s'affiche sur l'ensemble de votre site, Head Pilot Online sera également actif sur l'ensemble votre site. 6
Figure 2 : Pied de page inséré sur un site Drupal 7