Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons :

Transcription

1 Préambule Le Html5 comporte de façon native de nombreuses interfaces de programmation (Application Programming Interface ou API). Citons : La géolocalisation, qui permet de localiser l utilisateur par ses coordonnées de longitude et latitude. Des super cookies, avec Web Storage qui permettra un stockage plus important de données dans le navigateur. L utilisation des applications Web hors connexion après la mise en cache des ressources nécessaires. Les Workers, qui peuvent exécuter des tâches de fond en parallèle du programme JavaScript principal dans un environnement totalement séparé de la page. Les Websockets, qui permettent d établir une communication bidirectionnelle asynchrone entre le navigateur et le serveur. Le glisser-déposer (drag/drop) en natif dans le navigateur. L attribut ContentEditable, qui permet l édition en ligne du contenu d un élément. Il fait apparaître un éditeur WYSIWYG basique qui permet donc d éditer directement le contenu dans la page. Toutes les modifications apportées par l utilisateur pourront être traitées à la fin de l édition. Etc. La plupart dépassent largement le cadre de cet ouvrage. Intéressons-nous néanmoins à la fonction de géolocalisation.

2 Le fonctionnement D où proviennent ces données qui permettent de vous localiser? Tout d abord, de l adresse IP de l utilisateur. C est une procédure simple de connaître l adresse IP de l utilisateur. Il suffit alors de consulter des registres d attribution pour connaître votre adresse physique. La précision de la géolocalisation est parfois sujette à surprise car, dans certains cas, c est l adresse de votre fournisseur d accès qui sera reprise. Ensuite, de votre réseau wifi. La géolocalisation de votre réseau wifi s obtient par triangulation par rapport à des points d accès ou bornes wifi aux alentours. Rappelez-vous qu en mai 2010, la société Google a révélé que ses véhicules chargés de prendre des photos pour son application Google Street View engrangeaient également des informations relatives aux réseaux wifi rencontrés. La géolocalisation ainsi obtenue est assez précise, surtout dans les zones urbaines. Et enfin, pour certains téléphones cellulaires de la dernière génération (iphone), par les coordonnées GPS. La précision de la géolocalisation est alors quasi absolue.

3 Les navigateurs La plupart des navigateurs reconnaissent cette fonctionnalité de géolocalisation en Html5. Citons Chrome5+, Firefox 3.6+, Opera10.6 et Safari 5+. Internet Explorer 8 et 9 ne reconnaissent pas la géolocalisation. Il faut cependant signaler que l état d avancement de l inclusion de cette API varie grandement d un navigateur à l autre.

4 Protection de la vie privée Cette géolocalisation peut se révéler assez indiscrète et tous les utilisateurs ne souhaiteront pas partager leurs données de géolocalisation. Le W3C émet des règles d utilisation très strictes. La géolocalisation doit être une démarche volontaire de l utilisateur. Avant toute procédure de géolocalisation de la part d un site, une fenêtre popup ou un bandeau doit apparaître dans le navigateur demandant l autorisation expresse de l utilisateur. Capture d écran de la demande de partage de la localisation dans Firefox 4 : La même fenêtre d autorisation dans Safari : Quand un navigateur procède à une géolocalisation, les informations échangées se réalisent par l intermédiaire d une connexion chiffrée. À aucun moment le nom et l adresse du site Web visité ne doivent être partagés. L identifiant client aléatoire attribué pour une procédure de géolocalisation doit expirer après un délai de deux semaines. Faisons le vœu que ces procédures soient scrupuleusement respectées par tous les intervenants de la toile

5 Longitude et latitude Cette bibliothèque (API) de géolocalisation fait largement appel au JavaScript. Le JavaScript position.coords retourne les coordonnées mais aussi bien d autres valeurs : position.coords.longitude renvoie la longitude de la position. position.coords.latitude renvoie la latitude de la position. position.coords.altitude retourne l altitude de la position. position.coords.accuracy indique la précision des coordonnées. position.coords.altitudeaccuracy fournit la précision de l altitude. position.coords.heading donne la position en degré par rapport au nord. position.coords.speed qui correspond à la vitesse de l utilisateur par rapport à sa dernière position. Ces valeurs ne sont pas encore toutes présentes dans les navigateurs mais donnent une idée du potentiel de cette application. Élaborons un exemple qui retourne la longitude et la latitude : <!DOCTYPE html> <html lang="fr"> <head> <title>html5</title> <meta charset="iso "> <script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; document.getelementbyid("latitude").innerhtml = latitude; document.getelementbyid("longitude").innerhtml = longitude; ); else { alert("votre navigateur ne supporte pas la géolocalisation"); </script> </head> <body> <h1>html5 géolocalisation</h1> Latitude : <span id="latitude">loading...</span><br> Longitude : <span id="longitude">loading...</span> </body> </html>

6 Pour préserver les données privées de l auteur, les coordonnées de longitude et de latitude correspondent à celles de la tour Eiffel. Le script est disponible dans l espace de téléchargement réservé à cet ouvrage. Pour illustrer l aspect encore expérimental de cette API, le script fonctionne en local sous Firefox 3.6+ et Opera Pour Chrome, la page doit être en ligne et Safari (sous Windows) bloque sur l écran d accueil. Explications du script : <script type="text/javascript">... </script> Les balises qui introduisent un script JavaScript : if (navigator.geolocation){... Le script teste si la fonction de géolocalisation (geolocation) est prise en charge par le navigateur (navigator). var latitude = position.coords.latitude; var longitude = position.coords.longitude; Si c est bien le cas, la variable latitude est obtenue par position.coords.latitude et la variable longitude par position.coords.longitude. document.getelementbyid("latitude").innerhtml = latitude; document.getelementbyid("longitude").innerhtml = longitude; ); On reporte dans le Html (innerhtml) la variable latitude à l intérieur dans la balise <span> dotée de l identifiant Id id="latitude". On procède de même pour la longitude. Else { alert("votre navigateur ne supporte pas la géolocalisation"); Si le navigateur n accepte pas la géolocalisation, une fenêtre d alerte apparaît

7 - 3 -

8 Localisation sur une carte Une fois la longitude et la latitude connues, la tentation est grande de reporter cette position sur une carte en faisant appel à Google Maps. <!DOCTYPE html> <html lang="fr"> <head> <title>html5</title> <meta charset="iso "> <script src=" &key=abqiaaaa8jxb0ydva4otolnm95w50bsec_rwpfx9fqbnbmgmdh8bb4bvrtjxws14t5wlzf7tpxaaatk_sib-q" type="text/javascript"> </script> <script type="text/javascript"> var map; var geocoder; function init() { map = new Gmap2(document.getElementById("carte")); map.setcenter(new GLatLng(34, 0), 1); geocoder = new GclientGeocoder(); function sur_carte(response) { map.clearoverlays(); if (!response response.status.code!= 200) { alert("désolé, nous ne pouvons géolocaliser votre adresse."); else { place = response.placemark[0]; point = new GlatLng(place.Point.coordinates[1], place.point.coordinates[0]); marker = new Gmarker(point); map.setcenter(point, 13); map.addoverlay(marker); function geolocalisation() { var adresse = document.form.latitude.value + "," + document.form.longitude.value geocoder.getlocations(adresse, sur_carte); if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; document.form.longitude.value = longitude; document.form.latitude.value = latitude; geolocalisation(); ); else { alert("votre navigateur ne supporte pas la géolocalisation"); </script> </head> <body onload="init()"> <div style="text-align:center; width: 400px;"> <h1>html 5 Geolocalisation</h1> <form name="form" action=""> <p> Longitude : <input type="text" name="longitude" value="" size="20"><br> Latitude : <input type="text" name="latitude" value="" size="20"> </p> </form>

9 <div id="carte" style="width: 400px; height: 250px;"></div> </div> </body> </html> Pour préserver les données privées de l auteur, les coordonnées de longitude et de latitude correspondent à celles de la tour Eiffel. La page Html et le script sont disponibles dans l espace de téléchargement. Quelques explications : La géolocalisation s effectue comme au point précédent par le script suivant : if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; document.form.longitude.value = longitude; document.form.latitude.value = latitude; geolocalisation(); ); else { alert("votre navigateur ne supporte pas la géolocalisation"); Les coordonnées trouvées sont envoyées à la fonction geolocalisation. Cette dernière fait à son tour appel à la fonction sur_carte qui exploite la bibliothèque (API) Google Maps Api. Pour plus d informations sur l insertion d une carte Google maps dans un site, consultez l adresse

10 - 3 -