Archive for veille technique - page 4

Juin102013
0 Comments
5 APIs HTML5 JavaScript

5 APIs HTML5 JavaScript

  • Posted by kmteam

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

Juin062013
0 Comments
Magnific Popup : lightbox responsive

Magnific Popup : lightbox responsive

  • Posted by kmteam

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

 

Juin032013
0 Comments
Sprite ou icon fonts : avantages et inconvénients

Sprite ou icon fonts : avantages et inconvénients

  • Posted by kmteam

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.

Mai172013
0 Comments
SVG empilés, successeurs du sprite ?

SVG empilés, successeurs du sprite ?

  • Posted by kmteam

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:

<img alt="" src="images/sprite.svg#identifiant-de-l-image" />

ou en CSS:

.icon.share {
background: url( 'images/sprite.svg#identifiant-de-l-image' );
}

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.

Mai032013
0 Comments
Turbulenz, encore un moteur de jeu ? Oui, mais…

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

  • Posted by kmteam

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 !

Avr262013
0 Comments
On trinque, on est ami !

On trinque, on est ami !

  • Posted by kmteam
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/

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

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

  • Posted by kmteam
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.

 

Mar252013
0 Comments
Chart.js : les beaux graphiques

Chart.js : les beaux graphiques

  • Posted by kmteam

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 :

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);


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

Mar212013
0 Comments
Backbone.js 1.0

Backbone.js 1.0

  • Posted by kmteam

Depuis hier soir, Backbone.js est passé en version 1.0, après un an sur
la branche 0.9, voici quelques fonctionnalités :

– nouvelle méthode collection.set() pour mettre à jour le contenu d’une
collection avec une nouvelle liste de modèles
– ajout de la fonction listenTo dans le mixin Events, pour facilement
détacher les évènements quand les vues sont supprimées
– support des requêtes HTTP PATCH, envoyant seulement la différence
d’état du modèle au serveur plutôt que la représentation complète de
celui-ci
– ajout de nouvelles méthodes d’inspection des données et de filtrage,
comme par exemple where, pick et omit
– la mise à jour du code commenté : http://backbonejs.org/docs/backbone.html

 

Fév262013
0 Comments
La propriété « zoom » et IE

La propriété « zoom » et IE

  • Posted by ifttt

La relation entre la propriété « zoom » et Internet Explorer :

http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm

Page 4 of 4 ← 1 2 3 4