kumquats labs Veille technique et R&D sur les technologies HTML5 et Symfony - page 5

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

 

Sprite ou icon fonts : avantages et inconvénients

Sprite ou icon fonts : avantages et inconvénients

A l’heure du mobile, les performances de nos sites web est une priorité. Alors, comment organiser nos images et nos icônes pour accélérer leur chargement ?

Deux solutions sortent du lot : les sprites d’images ou les polices d’icônes.

Voici un article intéressant sur les avantages et les inconvénients de ces deux techniques. En résumé, les polices d’icônes permettent d’améliorer les performances du site car elles donnent accès à un grand nombre de caractères depuis un seul fichier, appelé par l’instruction « @font-face ». En revanche, elles sont un peu moins personnalisables qu’un sprite CSS puisqu’une icône ne peut être que d’une seule couleur.

Vous trouverez sur le blog du web design une liste de 10 fonts ou générateur de fonts prêtes à l’emploi. A retenir : IcoMoon où on peut importer nos propres icônes au format SVG.

SVG empilés, successeurs du sprite ?

SVG empilés, successeurs du sprite ?

Le temps des sprites en CSS est révolu ! Ou tout du moins, il le sera peut-être prochainement grâce au SVG. Outre les avantages propres au format vectoriel qu’offrent SVG, ils ont aussi la particularité d’être empilables. Cela signifie qu’il peut posséder plusieurs couches contenant chacune une image pouvant être utilisée de manière totalement indépendante.

Comment cela fonctionne-t-il en pratique ? Chaque couche possède un identifiant qu’il faut renseigner lors de l’insertion de l’image, comme suit:

ou en CSS:

Comment empile-t-on des SVG ? Deux manières possibles:
– Avec Illustrator comme l’explique cet article: http://hofmannsven.com/2013/laboratory/svg-stacking/
– Avec SVG Stacker (https://github.com/preciousforever/SVG-Stacker) un projet open source permettant d’empiler des SVG provenant de différentes sources.

Turbulenz, encore un moteur de jeu ? Oui, mais…

Turbulenz, encore un moteur de jeu ? Oui, mais…

Turbulenz a décidé de rendre public et open source son moteur de jeu.

Il ne s’agit pas du premier et certainement pas du dernier moteur de ce genre. C’est cependant l’un des rares créé par une société professionnelle et qui, vu les fonctionnalités qu’il propose, pourrait se hisser aisément au sommet des moteurs de jeu HTML5.

Au menu:
– de la 3D et de la 2D ( avec ou sans WebGL )
– de la physique
– du son ( son 3D, effet echo, reverb, etc. )
– du réseau ( websocket ou fallback )
– le support de différents controller ( manette, souris, clavier, volant, écran tactile… )

Plus d’infos sur leur GitHub. A noter que le projet dispose, en plus de tout ça, d’une excellente documentation !

Tour d’horizon : Backbone et les autres

Tour d’horizon : Backbone et les autres

Pour bien commencer la semaine, rien de vaut une lecture saine et en anglais sur l’un de nos frameworks JS de prédilection : Backbone.

Vous connaissez sans doute déjà le projet de démonstration TodoMVC, qui aide les développeurs à choisir le framework JavaScript le plus adapté à leurs besoins. Dans cet article, Sebastian Porto partage son retour d’expérience sur quatre frameworks et nous propose un comparatif argumenté autour de plusieurs critères.

 

Cet article nous donne un aperçu des possibilités offertes par Marionette (à ne pas confondre avec Puppet, nous y reviendrons sans doute d’ici quelques articles). On y apprend que Marionette est une compilation de composants et de bonnes pratiques : gestion des vues facilitée et meilleure structure de l’application, entre autres. Comme dans Backbone, vous n’utilisez que les composants dont vous avez besoin.

Marionette JS

On trinque, on est ami !

On trinque, on est ami !

Budweiser a lancé un gobelet qui ajoute des amis sur Facebook en trinquant !
Le paramétrage est très simple : il suffit de flasher le QR Code sous le gobelet pour lier son compte Facebook à la puce RFID. Ces puces s’activent dès qu’elles sont proches l’une de l’autre et votre liste d’amis s’allongera automatiquement au fur et à mesure de vos rencontres. 

Buddy-Cup-01

Source : http://golem13.fr/budweiser-buddy-cup/

L’Epitech délivre une application Android d’alerte au cambriolage

L’Epitech délivre une application Android d’alerte au cambriolage

Les étudiants d’Epitech Monpellier viennent de publier une application alertant les autorités les plus proches en cas de cambriolage. L’application, déjà disponible sur Google Play, simplifie aussi la transmission du formulaire OTV (Opération Tranquillité Vacances), signalant votre absence à la gendarmerie qui assurera des patrouilles pendant votre absence.

 

[fun] jeu HTML5 : sparklin wars

[fun] jeu HTML5 : sparklin wars

Découvrir ce jeu HTML5 un vendredi soir c’est dommage : on tombe dedans puis on se retrouve 1 heure plus tard à se dire pour la 50e fois « allez encore une, je vais l’avoir ce satané machin rouge ».
Réalisé avec three.js, NodeJS et websockets (Socket.io), tout simple graphiquement c’est hyper adictif pour qui aime les jeux de panpan :
lien : http://wars.sparklinlabs.com/
 

« kumquatslol » planqué derrière un mur

Les controles sont ZQSD pour se déplacer et le clic gauche de la souris pour tirer.
Au début, ne faites pas l’erreur de tirer sur les joueurs de la même couleur que vous, il s’agit de votre équipe :)
A l’heure actuelle c’est assez serré puisque les rouges ont 6935 points et les bleus 6995…

 

Chart.js : les beaux graphiques

Chart.js : les beaux graphiques

Dans la catégorie visualisation de données, voici Chart.js, une librairie js qui permet de créer des graphiques presque aussi simplement que ça :


site : http://www.chartjs.org/
docs : http://www.chartjs.org/docs/

Page 5 of 7 ← First ... 3 4 5 6 7