Document technique. intégration Head Pilot Online. dans un site internet. 11 Rue de Navarre Chicheboville. Préparé par.

Transcription

1 11 Rue de Navarre 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

2 Table des matières 1. Introduction Comment communiquer sur l'outil Head Pilot Online? Procédure d'installation Les éléments nécessaires sur chaque page du site Les éléments nécessaires pour lancer Head Pilot Online Cas particuliers des sites WordPress et Joomla! Les sites WordPress Les sites Joomla! Les sites Drupal... 6 Document de Référence [DR1] Répertoire des mises à jour Nom du fichier Document technique - intégration Head Pilot Online dans un site internet Historique 04/05/2015 Pierre BOUCHARD Création, first issue Modification /09/2015 Pierre Bouchard Version de HPO STARNAV : Archivage Diffusion 2

3 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. COMMENT COMMUNIQUER SUR L'OUTIL HEAD PILOT ONLINE? Vous pouvez insérer le bouton de démarrage de l'outil où vous le souhaitez sur votre site internet. Afin d'expliquer à l'internaute quelles possibilités apporte notre outil, il est préférable d'ajouter un lien vers le téléchargement de l'installeur de Head Pilot Online ainsi que vers la description de l'outil. Nous avons écrit un article sur notre site pour cela : 3. 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. 3

4 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 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, ce fichier vers nos fonctions javascript : <script type="text/javascript" src=" 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 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>" ou "<img>" 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=" width="100px" /><br/> <button class="btnlancementheadpilot">lancer Head Pilot Online</button><br/> <a href=" target="_blank">qu'est ce que Head Pilot Online?</a><br/> <a href=' Head Pilot Online</a> 4

5 Vous pouvez recopier le contenu de la page sur votre propre site web si vous le souhaitez. Dans ce cas, modifiez également le lien dans le code ci-dessus par le lien vers votre propre page 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 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 Il vous reste à présent à insérer où vous le souhaitez les lignes de code proposé en paragraphe 3.2. Insérez les par exemple dans un module texte en pied de page ou dans vos menus. Votre site intègre à présent Head Pilot Online! 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 5

6 Copiez/Collez ensuite le code proposé en paragraphe 3.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 Les sites Drupal L'utilisation des modules de structure "Blocs" sont suffisants pour l'intégration de notre outil. 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 3.1 et 3.2 Sélectionnez le format de texte "Full HTML" pour autoriser toutes les balises HTML Enfin, sélectionnez l'emplacement de votre bloc Head Pilot Online. Dans notre cas, nous avons choisi le pied de page 6

7 Copier ici tout le code des 3.1 et 3.2 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. 7

8 Figure 2 : Exemple de pied de page inséré sur un site Drupal 8