Archive for html5 - page 2

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 !

[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/

Flat UI pour votre prochain projet ?

Flat UI pour votre prochain projet ?

Nous avons l’habitude de travailler avec des kits css et autres frameworks. Aujourd’hui, nous vous proposons de découvrir un petit nouveau : Flat UI, basé sur Twitter Bootstrap. Il offre des éléments d’interface lissés et dans l’air du temps, il y a pas mal de JavaScript : un peu de jQuery UI par ici, de Video.js par là ; et le tout est open-source et facilement adaptable :)

http://designmodo.com/demo/flat-ui/

Page 2 of 2 1 2