Archive for html5

Developers Tools Google Chrome

Developers Tools Google Chrome

Ce matin je souhaite partager avec vous un article d’Addy Osmani (excellent, forcément) qui présente les Developers Tools Google Chrome aux utilisateurs de Sublime Text (càd NOUS !).

DevTools Tips For Sublime Text Users liste ainsi quelques raccourcis similaire à ceux de Sublime Text. Comme pare exemple le « Goto Anything » Ctrl/Cmd + P permettant de naviguer dans un fichier en fonction des méthodes, ou règles CSS. On se sent vite comme à la maison, avec même la possibilité d’avoir du multi-caret !

La liste complète des raccourcis se trouve ici : https://developer.chrome.com/devtools/docs/shortcuts.

Deuxième fonctionnalité intéressante : la possibilité d’éditer ses fichiers directement avec les DevTools. Cela se fait en ajoutant des Workspaces afin de pouvoir persister les modifications faites sur nos fichiers. Utile pour ne pas avoir à repasser dans Sublime Text pour modifier le nom d’une variable ou une condition avant de tester notre nouveau code.

Enfin comme dans Sublime Text il est possible d’installer des thèmes, comme par exemple pour avoir une interface sombre pour reposer nos yeux. C’est encore expérimental mais on a tout de même testé ZeroDarkMatrix.

Bonne lecture et amusez-vous bien avec ces nouveaux raccourcis !

L’article complet : DevTools Tips For Sublime Text Users : https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8#.7dxwgvg54

Les nouveautés de Cordova 5.0.0

Les nouveautés de Cordova 5.0.0

Le 21 avril est sortie la version 5.0.0 de Apache Cordova, et cette nouvelle version majeure apporte un nombre important de nouveautés et de changements dans l’écosystème.

Tout d’abord les plugins ont été renommés, les identifiants du type org.apache.cordova.* sont devenus cordova-plugin-*. Ce changement résulte du fait que les plugins sont désormais publiés sur npmjs.org.

Pour trouver de nouveau plugins il suffit d’utiliser la commande suivante qui liste tous les plugins cordova disponibles :

La classique commande cordova :

évolue aussi pour prendre en compte ce nouveau repository. D’ailleurs l’ancienne adresse http://plugins.cordova.io a vocation à fermer dans les prochains mois, le temps que la transition se fasse vers npm.

Concernant les plugins, autre changement : il est désormais nécessaire d’installer le plugin cordova-plugin-splashscreen pour Android si l’on souhaite ajouter un écran de chargement à notre application (qui n’est donc plus une fonction disponible par défaut).
De même le plugin cordova-plugin-whitelist est obligatoire pour Android afin d’autoriser le chargement de ressources externes.

Cordova 5.0.0 s’accompagne également de la version 4.0.0 de Cordova Android avec elle aussi son lot de nouveautés.
La plus importante (pour ne pas dire révolutionnaire) est qu’il est désormais possible d’utiliser d’autres WebViews que celle fournies de base par Android 4.* et 5.*
Grace au projet Android Crosswalk (développé par Intel) on peut maintenant s’assurer d’utiliser une WebView récente, identique sur tous les terminaux android, avec les dernières API JavaScript, le support de syntaxes et de propriétés CSS supplémentaires, et bien évidemment des outils de débogage avancés comme le remote debugging réservé jusqu’ici de base aux terminaux avec Android kitkat minimum.

Les autres plateformes Cordova ont elles aussi été mises à jour, les version actuelles sont les suivantes :
Cordova Amazon-FireOS: 3.6.3
Cordova Android: 4.0.0
Cordova BlackBerry10: 3.7.0
Cordova Browser: 3.6.0
Cordova FirefoxOS: 3.6.3
Cordova iOS: 3.8.0
Cordova Ubuntu: 4.0.0
Cordova Windows: 3.8.1
Cordova WP8: 3.8.0

Vous trouverez tous les détails sur les autres changements dans les articles officiels de Cordova :

Podcast web

Podcast web

Les technologies du web évoluent constamment. Chaque jour, des nouveaux outils, des nouveaux frameworks, des nouvelles tendances font leur apparition si bien que, chez Kumquats, on fait de la veille tous les jours pour se tenir informé.Et quand on n’a pas le temps de lire ce qu’écrivent les blogueurs sur le développement web, on peut aussi les écouter. Voici une petite sélection de podcast francophone à écouter en faisant la vaisselle (quoi, vous avez un lave-vaisselle ?). 

La première émission se nomme la DebugRoom et nous parle de développement Web et mobile. Ce jeune podcast (4 épisodes pour l’instant) aborde des sujets aussi diversifiés que la sécurité sur WordPress, Phonegap ou le cloud pour les développeurs. Il se divise en 4 parties :
La section Veille avec les dernières infos du web
Le dossier où ils abordent le sujet principal avec régulièrement des invités experts.
La Zone 404pour la détente avec des liens rigolos
La Toolbox qui présente des outils à tester dans nos développements
Un lundi sur deux / DebugRoom

Autre podcast orienté développement : NipDev. Une équipe de passionné se réunit toutes les 2 semaines pour nous parler de web à travers différents sujets comme par exemple les API REST, les « single page application », les tests unitaires ou encore le développement pour les mobiles.
Un mercredi sur deux / NipDev

Pour les férus de design, retrouvez chaque mois les zombies de the Walking Web pour suivre l’actualité du web design et de l’actualité numérique. Au programme : des objets connectés, de l’expérience utilisateur ou comment rendre son site plaisant et facile à utiliser, du design mobile, des conférences, de l’inspiration et pleins d’autres choses encore. Animés par 6 chroniqueurs travaillant tous dans le design, le podcast se déroule comme suit:
Previously on TWW : le résumé de l’épisode précédent
Je like / Je like pas : les avis de chacun sur les dernières nouveautés
Les lectures de Francis : la présentation d’un livre
Le GROS sujet : le sujet principal de l’émission
The Web Quizz : un quizz entre les membres de l’équipe posant des questions techniques, pratiques, artistiques…
Le WTF : pour finir l’émission sur une note d’humour
Chaque mois / The Walking Web 

Et pour terminer, je vous propose de suivre les soirées *di*/zaïn qui se déroulent à la Gaité Lyrique à Paris. Le concept : réunir 10 designers qui ont 10 minutes pour présenter leurs projets, le tout autour d’un thème global (le dernier était « Enchantements » avec des projets pleins de poésie). On aborde ici le design au sens large, aussi bien design interactif, design industriel ou encore l’architecture. On peut suivre les soirées en direct et réagir via twitter.
Chaque mois / les soirées *di*/zaïn

Ouvrez grand vos oreilles pour rester informé !

 

 

Uniformiser le rendu des typos web

Uniformiser le rendu des typos web

Vous êtes-vous déjà rendu compte que les typos web n’étaient pas affichées de la même manière suivant les navigateurs ?

 

Avec Type Rendering Mix, une librairie javascript, vous pouvez jouer avec les rendus des typos pour obtenir un affichage identique (ou pas loin) sur les différents navigateurs ou OS.

Cet outil est à réserver aux adeptes du pixel perfect car tout se gère manuellement !

 

 

Changer de visage grâce à JS et une webcam !

Changer de visage grâce à JS et une webcam !

Envie de rajeunir, de vous voir en Justin Bieber ou Walter White ? C’est maintenant possible en JavaScript et la démo est assez impressionnante, comme en atteste la photo de notre Terminator & développeur JS.

Face substitution utilise la librairie javascript clmtrackr, qui permet d’ajuster des modèles de visage à des vidéos et des images. Gardez votre visage immobile le temps que le modèle de visage s’ajuste à vous et essayez différents masques depuis la liste déroulante. Cela marche mieux avec un bon éclairage et le support de WebGL dans votre navigateur, à votre Google Chrome ou Firefox donc !

Un petit bout de code intéressant; dans leur exemple, ils utilisent l’API navigator.getUserMedia() pour capter le flux de la webcam :

Le lien vers la démo : http://auduno.github.io/clmtrackr/examples/facesubstitution.html

Un exemple par étapes : http://auduno.github.io/clmtrackr/example.html

Le GitHub du projet : https://github.com/auduno/clmtrackr

A vos expérimentations, merci JS !

Bootstrap 3 est disponible

Bootstrap 3 est disponible

Nous attendions avec une certaine impatience l’arrivée de Bootstrap 3 et il est maintenant disponible.
En quelques mots, voici quelques uns des changements de cette version :
– le framework est mobile first; les périphériques mobiles sont gérés en premier
– toujours responsive
– nouveau système de grille
– des couleurs d’interface dans les tons pastels et des icônes façon « flat design »
Pour plus d’information, il faut visiter getbootstrap.com qui propose, entre autres, un guide de migration de Bootstrap 2 vers Bootstrap 3.
 

 

J’ai testé pour vous CocoonJS !

J’ai testé pour vous CocoonJS !

Comme nous avons pu le constater au travers de notre R&D, l’utilisation de l’API canvas apportée par le HTML5 au sein d’un application mobile donne des résultat plutôt mitigés en terme de performance.

Après quelques recherches sur la toile, il s’agit effectivement d’un problème général sur la majorité des terminaux mobile dont la puissance moyenne ne suffit toujours pas à faire tourner des applications canvas un minimum complexes.

Ceci est sans compter sur CocoonJS (http://ludei.com/tech/cocoonjs), un service dans le cloud permettant de compiler une application HTML5 en application iOS/Android (et même « Pokki » dont je ne connaissais pas l’existence).

Je vous entends déjà vous interroger: « Mais on a pas déjà PhoneGap pour ça ?« . Tout à fait ! mais là où se démarque CocoonJS  c’est qu’il apporte une optimisation de l’API canvas pour la rendre plus performante. Le résultat est bel est bien au rendez-vous puisque après avoir porté une petite application de « Shooter » sur CocoonJS j’ai bel et bien pu remarquer une nette amélioration.

L’un des inconvénients est que la compilation se fait exclusivement en ligne, il ne semble pas y avoir d’outils pour compiler sur sa propre machine. Il existe bien une application iOS et Androïd appelée « CocoonJS Launcher » permettant de tester l’application en fournissant un zip des sources HTML et JS mais ça reste tout de même un peu léger.
Un autre inconvénient est que nous n’avons pas à disposition toute l’API que peut fournir PhoneGap mais, en contrepartie, CocoonJS fournit des extensions plutôt intéressantes tel que la capture du flux vidéo, la gestion des notifications locales, le support de la librairie physique Box2D en natif, etc…

En conclusion, CocoonJS est une alternative très intéressante à PhoneGap tant que l’on reste dans le domaine du jeu mobile et est donc à surveiller de très près !

 

N’oubliez pas la balise viewport

N’oubliez pas la balise viewport

Cette petite balise peut faire toute la différence ! Confortée par un article de Ian Yates paru hier sur Tuts+, voici un petit résumé des impacts de cette balise méta.

Tout d’abord, cette balise a été introduite par Apple, puis implémenté par les navigateurs de tout bord. De façon générale, on utilisera le code suivant pour que le contenu soit affiché lisiblement sur tous les périphériques et que le niveau de zoom par défaut soit bien égal 1 :

 

Cela dit, il faut savoir que cette balise n’est pas un standard et n’a jamais été reprise dans les spécifications du W3C. C’est Microsoft qui a pointé ce fait du doigt lors que la société a choisi d’ignorer ce metatag dans IE10 dans certains cas. A la place, ils ont opté pour l’utilisation de CSS Device Adaptation, solution préconisée par le W3C.
Cela consiste à utiliser la règle CSS @viewport :

 



Étant donné que ce travail est en développement, il faut utiliser la version préfixée pour qu’elle soit reconnue par IE10 :

 

L’utilisation de la balise méta viewport n’est donc pas pérenne et vous pouvez devriez déjà inclure la règle CSS @viewport dans vos feuilles de style en attendant qu’elle soit implémentée partout.

Source : http://hub.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972 (en anglais)

Design de boutons

Design de boutons

Creative Button Styles

Un peu de design aujourd’hui avec ce pack de boutons assez sympa qui intègre des animations au rollover ou au clic. Par exemple dans la partie verte, les animations correspondent à l’action du bouton, comme la poubelle qui se vide.
Les animations sont réalisées en CSS3 et donc compatibles avec tous les navigateurs modernes (oubliez IE7, IE8, IE9 ! )
kumquats-labs-creativebuttons 

Ladda button

Un autre pack de boutons de Hakim El Hattab, le créateur de slid.es, qui intègre des loaders directement dans les boutons d’action. Les animations sont aussi en CSS3 donc pas d’IE7/IE8.
kumquats-labs-ladda

5 APIs HTML5 JavaScript

5 APIs HTML5 JavaScript

Comme vous le savez, HTML5 introduit de nouvelles API. Nous vous proposons un point rapide sur les dernières APIs JavaScript grâce à cet article, dont voici notre résumé rapide :

Battery Status API

Pour permettre à une page web d’inspecter le niveau de la batterie du périphérique grâce à JavaScript. Il faut prévoir quelques lignes de code supplémentaires pour obtenir un résultat cross-browser.

Gamepad API

Permettra d’utiliser une manette de sa console de jeux préférée pour l’utiliser avec des jeux HTML5, directement dans le navigateur.

Device Orientation API

Si le périphérique dispose d’un gyroscope, cette API permet d’en détecter l’orientation et de récupérer des informations concernant son mouvement.

Geolocation API

Déjà largement supportée, cette API permet de partager sa position avec les sites web.

Page Visibility API

Permet de déterminer si la page est visible ou pas et donc de mettre automatiquement un jeu en pause lorsqu’on réduit la fenêtre. Cette API n’est pas encore implémentée partout mais son support commence à être plutôt bon : http://caniuse.com/pagevisibility

Page 1 of 2 1 2