background preloader

Géolocalisation en HTML5

Géolocalisation en HTML5
Tutoriel issu de ma présentation à la KiwiParty 2011. La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques : Plans/cartes, calculs de position et d'itinéraires Renseignements locaux en mobilité (points d'intérêts proches) Résultats contextualisés sur les moteurs de recherche Méta-informations jointes aux photos/vidéos De quelles informations a-t-on besoin pour se géolocaliser ? Dans l'espace, trois coordonnées sont nécessaires : Une quatrième coordonnée peut être prise en compte pour les puristes : le temps. L'API donne aussi accès lorsqu'il y a déplacement à la vitesse et à la direction (en ° par rapport au nord géographique). De quels moyens dispose un navigateur pour se géolocaliser ? Disponibilité de l'API ? L'API repose sur l'objet geolocation membre de navigator. Confidentialité <! Related:  JSGéoCREPSLa géolocalisation

Getting started Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. jQuery required Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported. Precompiled Bootstrap Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 Bootstrap source code

C'est quoi la Réalité Augmentée ? Définir la réalité augmentée (RA) n’est pas si simple ! En effet, c’est un domaine transverse qui utilise de nombreuses technologies différentes. Le terme même de « réalité augmentée », qui est apparu en référence à celui de « réalité virtuelle », peut être trompeur. C’est assez compréhensible puisque ce n’est pas la « réalité » qui est augmentée mais bien notre propre perception. Nous allons donc ici vous proposer notre propre vision de cette technologie et notre propre définition basée sur celle de Ronald Azuma. Si vous voulez compléter description, n’hésitez pas à le faire ! Notions de base La réalité augmentée peut être considérée comme une interface entre des données numériques, que l’on qualifiera abusivement de « virtuelles », et le monde réel. Ces trois points sont plus ou moins respectés par les applications qui sont qualifiées de « réalité augmentée ». Les scènes réelles sont capturées par un système et interprétées par une unité de calcul (ordinateur, smartphone).

Géolocalisation : ce qui est désormais autorisé – presque tout La géolocalisation d’un suspect, c’est-à-dire la possibilité de savoir en temps réel où il est, d’où il vient et où il va, est désormais parfaitement encadrée par la loi. Elle ne remplace pas les bonnes vieilles filatures, mais démultiplie les moyens des policiers, qui en font grand usage. Personne ne sait exactement jusqu’à quel point : on peut mesurer précisément les demandes de géolocalisation des magistrats, principalement sur les téléphones, pas les pratiques : la géolocalisation par balise, dans la plupart des cas un mouchard placé sous une voiture, « n’apparaît qu’exceptionnellement en procédure », reconnaît la chancellerie. Les demandes de réquisition des magistrats, quelques milliers en 2009, ont un certain succès : 19 650 de janvier à octobre 2013, pour un coût de 10 millions, soit 30% de plus qu’en 2012 – elles avaient déjà augmenté de 30% en 2011. Être suivi en temps réel On peut en effet géolocaliser presque tout. La balise ou le cercueil Il faut pour cela poser une balise.

Stockage des données locales : Web Storage Nous connaissions les cookies. Maintenant nous disposons de Web Storage (ou DOM Storage) pour stocker des données locales. Faisons un tour du propriétaire ! Stockage des données dans le navigateur Web Storage est une solution adaptée aux besoins actuels de stockage de données variées, dans le navigateur. C'est aussi une technique plus puissante que les cookies, qui sont limités en taille (quelques Ko contre plusieurs Mo pour Web Storage) et qui engendrent un trafic HTTP supplémentaire pour chaque requête (que ce soit pour demander la page web, une image, une feuille de styles, un fichier javascript, etc). Web Storage met à disposition deux interfaces nommées sessionStorage et localStorage dont la seule différence concerne la persistance des données. Stockage de session sessionStorage L'interface sessionStorage mémorise les données sur la durée d'une session de navigation, et sa portée est limitée à la fenêtre ou l'onglet actif. Stockage local localStorage Usages et précautions Stockage

Augmented Reality iOS Tutorial: Location Based - Ray Wenderlich Learn how to make a location based augmented reality app that displays points of interest over video! Augmented reality is a cool and popular technique where you view the world through a device (like your iPhone camera, or Google Glass), and the device overlays extra information on top of the real-world view. I’m sure you’ve seen marker tracking iOS apps where you point the camera at a marker and a 3D image pops out. In this augmented reality iOS tutorial, you will write an app that takes the user’s current position and identifies nearby points of interest (we’ll call these POIs). To find the POIs, you’ll use Google’s Places API, and you’ll use the AR Toolkit to show the POIs on the camera view and calculate the distance from the user’s current position. This tutorial assumes you have some basic familiarity with MapKit. Getting Started First download the starter project. Before you can do anything else, you need to obtain the user’s current location. Adding Google Places Pardon my french!

Tutoriel de géolocalisation en HTML5 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres

Lire un fichier XML avec jQuery Eh oui, encore une fois nous allons parler de jQuery, sans aucun doute une des meilleurs librairies JavaScript existantes. Bref, nous allons aujourd'hui nous attarder à la lecture d'un fichier ou d'une source XML à partir de jQuery. Alors qu'AJAX prend de plus en plus de place sur la toile voici comment vous aussi vous pouvez ajouter un petit plus à vos développements. Avant toute chose il faut construire notre page HTML et y inclure notre librairie afin que le tout fonctionne. Donnée de notre fichier XML Sélectionnez <sites><site id="0"><url> Kult</title><brief>Résumé</brief><long>Description longue</long></desc></site><site id="2"><title>Microsoft</title><url> longue</long></desc></site><site id="3"><title>Intel</title><url> longue</long></desc></site></sites> $(document).ready( function() { } ); inPartager

HTML5 for the Mobile Web - a guide to the Geolocation API In this second article in our series on HTML5 for mobile web (first part here), we cover the Geolocation API. For mobile users, location-based services are hugely compelling. Long the holy grail of mobile applications, and something of a missed opportunity for service providers, the addition of location-awareness to mobile apps has made for some very exciting use cases. Apps and services can take on a whole new dimension when location is added into the mix. Search results gain an extra relevance cue when a nearby option is added, as location information provides a very useful and intuitive filter. Figure 1: Web-based augmented reality proof of concept on mobile browser, by Dominique Hazael-Massieux In the following sections we take a look at HTML5 Geolocation from a mobile perspective. How Geolocation works There are a variety of techniques and sensor data that modern mobile devices can tap to figure out the location of a device with varying degrees of accuracy. Geolocation and privacy

Facebook se lance dans la géolocalisation sociale Le réseau social a inauguré jeudi une fonction qui permet à ses utilisateurs de repérer les amis qui se trouvent à proximité. Cet outil de géolocalisation est inspiré d'applications comme Tinder qui facilitent les rencontres entre inconnus grâce à leur smartphone. Sur la page d'accueil de Facebook, le réseau social nous invite à «rester en contact avec les personnes qui comptent dans votre vie». Cette devise n'a jamais été aussi bien méritée. Le site de Mark Zuckerberg a annoncé jeudi le lancement d'une nouvelle fonctionnalité de géolocalisation pour ses membres américains. Rencontrer ses amis pour aller au cinéma Cette nouvelle forme de géolocalisation est pour le moment optionnelle. En testant cette nouvelle fonctionnalité, Facebook répond à la tendance de géolocalisation sociale qui s'est emparée de nos appareils mobile. D'autres entreprises ont poussé le concept de géolocalisation sociale plus loin que le sage Glancee. Une technologie d'ultra-proximité

Custom preprocessing | Highcharts by Torstein Hønsi When implementing your own data sources, there may be cases where our built-in Data module doesn't work. This may be if a CSV file is formatted in a certain way that the data module isn't able to read, if you have data passed in a certain XML format, or your data source is something completely different. Below are some examples trying to shed light on the process of parsing custom data. Preprocess data using CSV Warning: As of Highcharts 4.0, this particular sample is much more easily implemented using the Data module. This example shows how to set up the basic chart options first, then do an Ajax call for the data, parse the data and add them in the proper format to the options. Create an external CSV file containing only the data. Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15 Define the initial, basic options. Put it all together. Preprocess data using XML Loading data from an XML file is similar to the CSV approach.

Comment faire de la Réalité Augmentée ? “Comment puis-je faire de la réalité augmentée ?” Voici peut être la question que nous entendons le plus sur ce blog et au cours de nos interventions. Pour répondre à cette question, nous vous proposons un tour d’horizon des différentes possibilités dans cet article. Attention cependant, il s’agit là d’une introduction pour vous permettre avancer dans votre réflexion. Pour aller plus loin, n’hésitez pas à prendre contact avec nous pour affiner votre besoin et entrer en contact avec des spécialistes Dans la suite, nous allons supposer que vous savez ce que vous voulez faire. Les “CMS” de réalité augmentée Il existe aujourd’hui des logiciels ou des services en ligne qui vous permettent de mettre en place très rapidement des projets simples de réalité augmentée. Une caractéristique intéressante de cette manière de faire de la réalité augmentée est le passage par un navigateur pseudo généraliste. Utiliser les SDK pour avoir une application en propre Photo credit: Foter.com / CC BY-SA

Related: