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

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 :

navigator.getUserMedia( videoSelector, function( stream )
{
    if ( vid.mozCaptureStream )
    {
        vid.mozSrcObject = stream;
    }
    else
    {
        vid.src = ( window.URL && window.URL.createObjectURL( stream ) ) || stream;
    }
    vid.play();
});

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 :

<meta name="viewport" content="width=device-width, initial-scale=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 :

@viewport {
    width: device-width;
}

 



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

@-ms-viewport {
    width: device-width;
}

 

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

Magnific Popup : lightbox responsive

Magnific Popup : lightbox responsive

Les lightbox sont très pratiques mais il arrive souvent que le rendu sur mobile ne soit pas à la hauteur du rendu sur bureau.

Pour cette raison, un développeur et designer d’interface a créé une lightbox responsive dont vous trouverez les caractéristiques ici: http://dimsemenov.com/plugins/magnific-popup/

Pour les plus curieux, il explique également comment il s’y est pris dans cet article, en trois grandes parties :

performances : pré-chargement des images, utilisation des CSS pour le redimensionnement d’image, support des écrans rétina

accessibilité : affichage conditionnel de la lightbox, navigation au clavier

interface utilisateur : boutons et navigation

 

Page 1 of 2 1 2