Design Article

Créer un backend simplement avec Bootstrap

Créer un backend simplement avec Bootstrap

16 Mai , 2013 3 commentaires

Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très rapidement. Pour preuve du sérieux, le framework est développé et maintenu par Twitter! Je vais vous présenter rapidement dans cet article les différentes composantes du framework.

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

  • Utilisation de HTML5
  • Un « reset » CSS très simple basé sur Normalize.css
  • Un système de grille css (grid system)
  • Un système simple de « layout »
  • Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

  • Un système de typographique
  • Gestion des styles et « helper » pour les tableau HTML
  • Gestion des éléments de formulaire
  • Des boutons personnalisables (très chics)
  • « helper » pour les images
  • Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

  • Groupes de boutons
  • « Labels » et badges
  • Fils d’ariane (breadcrumbs)
  • « Alerts box » : Info, succès, échec, attention
  • Barres de progression
  • « Thumbnails »
  • …

Framework Javascript

  • « Modal box » très bien faites et facile à modifier
  • Gestion des transitions
  • Système de « tabs »
  • Système de « tooltips »
  • Alert javascript amélioré
  • Autocompletion pour formulaire
  • Système de « Popover » très bien fait
  • …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

Aller sur la page de l'article
Tutoriel : Introduction à la librarie javascript d3.js

Tutoriel : Introduction à la librarie javascript d3.js

01 Avr , 2013 7 commentaires

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai fait sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

Aller sur la page de l'article

Concours photos 2012 du magasine Smithsonian

06 Mar , 2013 Aucun commentaire

Encore un concours de photo avec des photos pour le moins impressionnantes. Je partage car c’est vraiment du bonheur pour les yeux !

Voir la suite du concours sur le site theatlantic.com

Aller sur la page de l'article
Déboguer en 3D votre HTML et CSS avec Tilt de Firefox

Déboguer en 3D votre HTML et CSS avec Tilt de Firefox

18 Fév , 2013 Aucun commentaire

Tous le monde connaît plus ou moins les outils web pour déboguer le HTML et le CSS. En général une bonne console web fait la job ! On clique sur un élément HTML et on voit le CSS associé. On peut même modifier en temps réel le CSS. Tout ça est clairement bien utile mais depuis un moment firefox intègre nativement TILT qui permet d’obtenir une visualisation 3D de votre page. TILT est très pratique pour déboguer le HTML et le CSS puisque le moteur 3D vous permet de voir plein de chose qu’on ne voit pas d’habitude. Il est ainsi facile déboguer les div non fermé, les couches z-index ou encore les positions absolue CSS.

Comment lancer le débogueur 3D de Firefox

Rien de plus facile! Ouvrez votre firefox et aller sur votre site préféré : Undisconnected.com par exemple 😉 Ensuite « cliquez droit » sur un élément de la page que vous aimeriez inspecter et choisissez l’option contextuelle « Examiner l’élément ». Ceci a pour effet de lancer la console web et de vous afficher l’élément sélectionné dans l’arbre du DOM (Document Object Model) et de vous afficher le CSS relié à cet élément. Jusque là rien de bien nouveau!

Diriger vous ensuite en bas à droite de la fenêtre de firefox, vous devriez voir un bouton 3D apparaître. Cliquer sur ce bouton … et ô magie, une vue 3D de la page apparaît. Il est possible de sélectionner des éléments de la page et d’en voir le CSS ainsi que leur place dans le DOM. 

Vidéo de la vue 3d dans Firefox : TILT en action 

Pour mieux voir à quoi cela ressemble rien de tel qu’une petite vidéo. 

[youtube]http://www.youtube.com/watch?v=lu_h6ko-ugk[/youtube]

Conclusion 

Soulignons l’effort de la fondation Mozilla pour amener aux développeurs une nouvelle génération d’outils puissants pour le débogage. J’espère que cet article vous aidera à gagner du temps et aussi à perdre moins de cheveux 😉 Si vous avez des questions ou que vous souhaitez partager votre expérience de l’outil laissez un commentaire.

Aller sur la page de l'article
Un bon service d’impression pour Instagram : Prinstagram

Un bon service d’impression pour Instagram : Prinstagram

04 Fév , 2013 Aucun commentaire

J’ai récemment commandé des photos imprimés provenant de mon compte Instagram sur le site : http://printstagr.am/. Le service offert est de très bon rapport qualité / prix.

Ce que j’ai commandé sur Prinstagram

J’ai commandé 48 photos de 2.5 X 2.5 pouces ainsi que 24 photos de 4 X 4 pouces. Cette commande m’a coûté 36$ (frais de livraison inclus). La livraison a mis un peu plus d’ne semaine et est arrivé via DHL en très bon état. La livraison peut-être faites à l’international, donc en France comme au Canada pour 12$.

Le site de Prinstragram

Le site est vraiment facile a utiliser. Il suffit de connecter son compte Instagram et de sélectionner les photos souhaités. Une fois ceci fait, on ajoute au panier, on paye … et c’est partis !

D’autres services sympa existent comme la possibilité de faire un backup physique (Memory Box) de toutes vos photos Instagram, faire un calendrier basé sur 365 de vos photos, faire un poster avec plusieurs de vos photos.

Conclusion 

Si vous aimez Instagram et sa facilité ! Vous adorerez Prinstagram, c’est toujours cool d’avoir ses photos imprimés pour afficher à la maison ou simplement donner à des amis ou à la famille.

Portez-vous bien ! 

Aller sur la page de l'article