[JavaScript] L’API Géolocalisation de HTML 5

L’API de géolocalisation introduite par HTML 5 peut permettre à un site Web de localiser géographiquement ses visiteurs. Pour cela, deux conditions doivent être remplies. Premièrement, le visiteur doit accepter que le site Web utilise son emplacement géographique (le plus souvent, c’est le navigateur Web qui affiche une popup d’alerte demandant à l’utilisateur de valider). Deuxièmement, le navigateur doit être à même de géolocaliser l’utilisateur pour pouvoir donner cette information.

L’API de géolocalisation HTML 5 a donc pour vocation de permettre d’accéder simplement aux données géographiques d’un utilisateur, en faisant abstraction de la méthode pour récupérer cette information. Ainsi, cette API permet de récupérer la latitude, la longitude, l'altitude et le delta de précision de la mesure.

Lire la suite...

Test du Canvas HTML 5 : Création d'une petite application style paint

Voici un petit bout de code HTML 5 + Javascript pour tester les fonctionnalités des Canvas. J'essaye ici de faire un p'tit editeur d'image en ligne style photoshop en beaucoup beaucoup plus simple.
Cet exemple utilise le système de dessin de chemins (context.beginPath) pour dessiner des pixels de couleurs sur le canvas. Cet exemple aborde aussi l'export d'un canvas vers un format bitmap (html5 canvas to png). Enfin, cet exemple fonctionne comme un plugin jQuery, et présente un peu le système d'événements qu’il convient d’adopter pour ce type de projet.

  • Black
  • Red
  • Blue
  • White
  • Green
  • Orange

Lire la suite...

jDocumentary.com

jdocumentary.jpg

jdocumentary.com

J'ai réalisé ce site web en 2011 pour promouvoir et héberger mon projet jDocumentary, une librairie Javascript permettant de réaliser des Web-Documentaires. Pour plus de détais, voyez la page du projet.

Technologies: PHP, Apache, URL Rewritting, support multi-langues, Javascript & jQuery, Twitter API

Un accent particulier a été mis sur le côté SEO (Search Engine Optimization) ce qui a donné de très bons résultats en très peu de temps.

jdocumentary-google.jpg

Intelligent & Responsive UI - Une interface pensée pour l'utilisateur

old_chimi.jpg Il y a peu de temps, on m’a demandé au boulot de réaliser une interface graphique entièrement nouvelle pour un outil de suivi interne. Le délai était très court – il s’agissait d’un projet interne non-rémunéré – mais l’interface devait néanmoins s’adapter à l’affichage sur iPhone.

Parti du constat qu’un site Web beau et simple est plus attrayant qu’une interface moche et basique, et faisant partie des futurs utilisateurs, j’ai voulu faire en sorte que le design et les interactions soient le plus possible optimisés pour une utilisation agréable et rapide. A force de glaner des idées à droite à gauche, notamment sur les réseaux sociaux ou chez Google, je me suis rendu compte qu’une véritable interface graphique optimisée RIA (Rich Internet Application) pouvait intégralement changer son utilisation.

Voici donc une collection de « bonnes pratiques » pour réaliser des interfaces graphiques intelligentes et intuitives, agréables à utiliser et surtout … humaines.

Lire la suite...

jDocumentary

jDocumentary est un plugin pour jQuery qui permet de réaliser simplement des WebDocumentaires sans la technologie Flash.

jDocumentary : faire des webdocumentaires sans se soucier de l'aspect technique

Le principe du projet est extrêmement simple : un scénario est composé de plusieurs pages. Dans les pages ont peut afficher un peu de tout : du texte, une vidéo Youtube, une image, une carte, etc.… Pour lier les pages entres elles, on ajoute des boutons. Et voilà !

L’idée initiale était pouvoir réaliser des sites multimédias aussi avancés que le récit de voyage au Japon des Carnets de Traverse et Voyage au bout du charbon sans avoir à passer par le format Flash, et en proposant une solution réutilisable qui puisse s’appliquer à toute sorte de projet. Me basant sur mon expérience avec jQuery, j’en suis arrivé à la conclusion que l’édition du scénario devait être la plus simple possible, la plus accessible possible aux programmeurs débutants. Ainsi, le code pour réaliser des effets compliqués doit être le plus simple possible.

Mais rien ne parle d'avantage qu'une petite démonstration, alors, let me introduce... American Urbex.

L'utilisation de jDocumentary est très simple : il suffit de configurer un fichier de scénario au format JSON pour que le documentaire prenne vie! Ensuite, laissez vous guider par la documentation et le guide API.

Au programme :

  • Affichage en fullscreen des photos
  • Visionnage de vidéo depuis Youtube
  • Lecture de musique ou d'effets sonors
  • Effets : apparitions en fondu, texte tapé à la machine, opacité
  • Skin modifiable directement en CSS
  • Affichage optimisé pour les mobiles
  • Et ce n'est pas fini...

jDocumentary est distribué dans la stricte limite du copyleft.

Site du projet

page 1 de 2