Internet Mobile - Septembre 2012

Audience de l'internet Mobile en France - Sept 2012

L'institut Médiamétrie a publié hier ses statistiques concernant l'internet mobile. On y apprend qu'au 3 ème trimestre 2012, 41,2% des individus vivant en France se sont connectés à l'internet mobile par un site ou une application, 46,6% des Français sont équipés d'un smartphone.

Au niveau des systèmes d'exploitation, Android est en forte augmentation par rapport au même trimestre 2011.

En terme de répartition entre les accès via site ou application est stable : 92.1% des mobinautes ont visités un site sur mobile et 72.1% ont visités au moins une application sur smartphone.

Source :  L'audience de l'internet mobile en France en septembre 2012 - Médiamétrie

Fusion Tables & Google Map FusionTablesLayer

Présentation Fusion Tables

Je viens de découvrir une fonctionnalité de Google bien sympa c'est : Fusion Table. On peut le voir comme un type particulier de document dans Google Drive.

Dans ce document, on peut ajouter de l'information comme dans une table. On y retrouve les types Geometry et Location. On peut donc y stocker de l'information géographique. Comme des coordonnées géographiques ou encore du KML.

Il est aussi possible de géocoder une colonne contenant des adresses(numéro, rue code postal ville). Le géocodage va permettre de retrouver les coordonnées géographiques en fonction de l'adresse.

NB : Pour pouvoir accéder à une map via l'API Google Map, ne pas oublier de régler les accès en partageant le document.

Affichage sur Google Map : FusionTablesLayer

Maintenant avec l'API Google Map, on peut requêter cette table pour en afficher les éléments sur une carte. Le langage pour sélectionner les informations est le SQL.

1.       var layer = new google.maps.FusionTablesLayer({
2.              query: {
3.                       select: 'Adresse',
4.                       from: '1_8f7R92thvehMtNzFxtiWhz1JtFqZwJsaJ2yMVw',                                                                    where: "Arrondissement = '75013'"
5.                         },
                styles: [{
6.                  markerOptions: {
7.                          iconName: "small_green"
8.                 }
9.            }]
10.           });
11.           layer.setMap(map);

Il est aussi possible d'insérer, d'updater des données dans une table via l'API Fusion Tables. Mais cette partie sera développer dans un futur article sur cette API.

On peut rendre l'affichage différent en fonction d'une valeur avec le mot clé where :

1.      styles: [{
2.           where : "Arrondissement in ('75013', '75014')",
3.           markerOptions: {
4.           iconName: "small_yellow"
5.           }
6.      }]

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

Facebook abandonne HTML5 pour son app iOS

L’application Facebook pour IPhone est lente, très lente même.

Sur l'App-store, sur les 38 000 personnes l’ayant noté, plus de 21 000 personnes n’ont accordé qu’une seule étoile,tous la décrivant comme lente, toujours en chargement, ou crashs répétitifs.

En faite il se dit que l'application Facebook est la plus lente des 500 000apps disponible sur IPhone.

Cette fois Facebook va utiliser directement le code natif : Objective-C.
Car dans la version actuel c'est une web-application html5 wrapper dans une web view afin de mutualiser le code entre Windows Phone, Android et IOS.

Concrètement, les fonctionnalités de l’application resteront les mêmes, ainsi que le design, mais elle sera plus optimisée, rapide, réactive et pourra tirer parti du hardware.

De quoi remettre en cause la rapidité du HTML5 sur mobile ? Qu'en pensez-vous?

Source : New York Times

HTML5 - Cartographie sur mobile - Partie 1

WebApp Html5 Localisation & Google Map

Dans cette article, je vais vous présenter quelques fonctionnalités de l'API Google Map que je trouve intéressante pour la mobilité. Aujourd'hui la mobilité a amené de nouveaux usages, comme par exemple trouver une information en fonction de sa position.(le boulanger le plus prés de moi). Mais on peux imaginer à une multitude d'autres utilisations...

API Geoloalisation

   Dans un premiers temps, il faut vérifier si le navigateur gère bien l'API.

1. if (navigator.geolocation){
2. }

    L'API de géolocalisation est disponible sur :

• Safari Mobile (depuis iOS 3.0)
• Android (depuis la verison 1.6)

De plus tous les grands navigateurs de bureau gère églament l'API :

• (Firefox (>= 3.5)
• Safari (>= 5.0)
• Google Chrome
• Opera(>= 10.60)
• Internet Explorer (>= IE 9))

Pour obtenir la position géographique :

1. navigator.geolocation.getCurrentPosition(function(position){
2.   var latitude = position.coords.latitude;
3.   var longitude = position.coords.longitude;
4.         alert('Latitude :' + latitude + ' Longitude : ' + longitude);
5.    },function(error){
6.            alert(error.Message);
7.    });

Le prototype de la méthode getCurrentPosition() est le suivant :

1. void getCurrentPosition(PositionCallback successCallback,
2.            optional PositionErrorCallback errorCallback,
3.            optional PositionOptions options);

API Google Map

Maintenant que l'on a obtenu notre localisation en coordonnée géographique, il peut être intéressant de l'afficher sur une map. Pour cela nous allons utiliser l'API Google Map.

Tout d'abord il faut intégrer l'API Google Map à la page.

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>

Ensuite dans votre code HTML placez la balise suivante :

1. < div id="map" />

Cette section va permettre l'affiche de Map. Maintenant en javascript, nous allons instancier un élément google.maps.Map(mapDiv:Node, opts?:MapOptions) qui sera intégré à la balise div.

1. var element = document.getElementById("map");
2. map = new google.maps.Map(element, {
3.   center: new google.maps.LatLng(latitude, longitude),
4.   zoom:  15,
5.   mapTypeId: google.maps.MapTypeId.ROADMAP
6. });

L'option mapTypeId permet d'afficher les différents layers Google Map, comme satellite, plan

• HYBRID
• ROADMAP
• SATELLITE
• TERRAIN

Il est possible de passer d'autres paramètres comme un style,la possibilité ou non de zoomer...

Afficher une position

Pour afficher notre position, on utilise l'objet Marker(opts?:MarkerOptions). On lui affecte alors la position en type LatLng(latitude, longitude). Et on affecte notre map à la propriété du même nom.

1. var latlng = new google.maps.LatLng(latitude, longitude);
2. var marker = new google.maps.Marker({
3.                 position: latlng,
4.                 map: map
5.            });

Maintenant on va afficher une petite fenêtre dans laquelle on peut ajouter du code html.

1. var infowindow = new google.maps.InfoWindow();
2. infowindow.setContent('
3.           +latitude +','+longitude
4.           +'); 
5. infowindow.open(map, marker);

Conclusion

Nous avons pu voir dans cette article, qu'il n'est pas très difficile de mettre en place un système de géolocalisation sur son site web. Et en plus, cette fonctionnalité est cross-plateforme (iphone, ipad, android).

Dans la prochaine partie de cette article, on rentrera un peu plus en détail sur les différentes possibilités pour dessiner et afficher de l'information sur une map.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

HTML5 Cache Manifest

Cache.Manifest

 Présentation

Le cache.Manifest est un fichier permettant de mettre nos pages dans le cache du navigateur souhaitées, de spécifier les pages qui ont nécessairement besoin d’un accès réseau mais aussi de spécifier une page d’erreur en cas d’erreur réseau.Sur les mobiles, le cache.Manifest est disponible 

depuis les vesions IOs 2.1 et Android 2.0

 Structure du fichier

La structure du fichier Manifest doit commencer par :

1. CACHE MANIFEST

Puis on ajoute les fichiers que l’on souhaite mettre en cache :

1. CACHE:
2. Index.htmll
3. http://monsite.com/Index2.html

On peut saisir le chemin des pages en absolue ou en relative. Après le chargement des pages  dans le cache local du navigateur, lors de la prochaine visite sur le site, le navigateur chargera la page directement depuis le cache local, il n’y aura donc pas d’accès au serveur.

Pour les pages qui ont besoin d’avoir un accès réseau :

1. NETWORK :
2. Upload.html

Enfin pour personnaliser un message d’erreur dans le cas où la fonctionnalité n’est pas disponible en mode déconnecté :

1. FALLBACK :
2. / /offline.html

Il est aussi possible de mettre un message d’erreur différente par fonctionnalité, de cette façon :

1. /fonctionnalite1.html /offline1.html
2. /fonctionnalite2.html /offline2.html

Enfin il est possible de versionner son fichier manifest :

1. CACHE MANIFEST
2. #V13.72
3. CACHE:

Ce versionning permet au navigateur de savoir quand il doit mettre à jour ou non son cache.

Quelques règles

Il est possible d’ajouter des commentaires grâce au caractère « # ».

Les lignes vides sont ignorées.

Le manifeste doit utiliser le type MIME : text/cache-manifest. Toutes les ressources utilisant le type MIME  text/cache-manifest doivent utiliser la syntaxe décrite ci-dessus.

 Intégration à la page HTML

 Après avoir créé son fichier cache.Manifest , il suffit d’ajouter à la balise html la propriété manifest comme ci-dessous :

1. <html manifest="./cache.Manifest">

Mise à jour du cache

     Maintenant que l’on a créé et ajouté notre fichier Manifest  à notre site.
     Lorsqu’un utilisateur visite une page ayant déclaré un manifeste, le navigateur va essayer de mettre à jour le cache.
     Il le fait en allant chercher une copie de manifeste et , si le manifeste à changer depuis la dernière visite alors il re-télécharge toutes les ressources du manifeste et les mets de nouveau en cache.

Application Cache API

Il existe via javascript une interface permettant de manipuler le cache : ApplicationCache 

Pour obtenir l’objet ApplicationCache dans une windows : 

1. var cache = window.applicationCache

Pour obtenir le statut courant du cache applicatif, il suffit d’appeler la propriété : cache.status
     Le statut peut être :

• UNCACHED = 0
• IDLE = 1
• CHECKING = 2
• DOWNLOADING = 3
• UPDATEREADY = 4
• OBSOLETE = 5

Méthodes

3 méthodes sont disponibles sur cette interface :

• void update()

Permet d’invoker le processus de mise à jour du cache de l’application.Appeler cette méthode n’est pas forcément nécessaire car le user agents aura généralement pris le soin de mettre à jour le cache de l’application automatiquement.

Il peut être intéressant d’appeler cette méthode lorsqu’une application à une durée de vie longue.  

Par exemple : Un WebMail ouvert  dans un navigateur depuis 1 semaine. L’application peut alors tester chaque jour s’il y a une mise à jour du manifest.

• void abort()

Permet d’annuler me processus de mise à jour du cache de l’application.

• void swapCache()

Evénements

• checking

Levé lorsque le user agent est en cours de contrôle ou attend le téléchargement du manifeste pour la première fois.

Toujours le premier événement de la séquence.

• error

Le manifeste était une page 404 ou 410, donc la tentative de mettre en cache a été abandonnée. 

Le manifeste n’avait pas changé, mais la page référençant le manifeste n’a pas pu être téléchargée correctement.

Une erreur fatale s’est produite lors de l’extraction des ressources énumérées dans le manifeste.Le manifeste a changé alors que la mise à jour a été exécutée.

• noupdate

Le manifeste n’avait pas changé.

• dowloading

Le user agent a trouvé une mise à jour et est allé la chercher ou en cours de téléchargement des ressources listées dans le manifeste.

• progress

Le user agent en cours de téléchargement des ressources listées dans le manifeste.

• updateready

Les ressources listées dans le manifeste ont été nouvellement re-téléchargées, et le script peut utiliser swapCache() pour utiliser le nouveau cache.

• cached

Les ressources listées dans le manifeste ont été téléchargées et l’application est maintenant en cache.

• obsolete

Le manifeste constate qu’il est devenu une page 404 ou 410, donc le cache de l’application est en cours de suppression.

Conclusion

     Grâce au manifeste, il est donc possible de naviguer sur un site internet en mode Offline.

     Cette approche est intéressante notamment pour un site à destination des Devices car en mobilité on peut avoir des pertes de réseaux.


     Plus tard nous verrons comment construire le fichier cache.Manifest dynamiquement dans une architecture HTML5 + MVC  ASP. NET.