Saturday, June 30, 2012

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.

Thursday, June 28, 2012

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.