Tutoriel Backbone.js : personnaliser l'interface

Alex Young

Traducteur

vermine

Cet article est la traduction de Backbone.js Tutorial: Customising the UI publié sur DailyJS.

Commentez ♪

- Titre : Tutoriel Backbone.js : personnaliser l'interface

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 7 mai 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Préparation

- II. Personnaliser Bootstrap

- III. Les couleurs

- IV. La texture

- V. Les polices personnalisées et les icônes

- VI. En avant pour la personnalisation

- VII. Remerciements

I - Préparation

- Partie 1 : environnement de développement

- Partie 2 : les API Google et RequireJS

- Partie 3 : authentification avec OAuth2

- Partie 4 : Backbone.sync

- Partie 5 : affichage des listes

- Partie 6 : créer des listes

- Partie 7 : modifier des listes

- Partie 8 : supprimer des listes

- Partie 9 : les tâches

- Partie 10 : oh non, pas plus de tâches

- Partie 11 : Spies, Stubs et Mocks

- Partie 12 : tester avec Mocks

- Partie 13 : routage

- Partie 14 : personnaliser l'interface

- Partie 15 : mettre à jour, purger

- Partie 16 : plugin jQuery et déplacement des tâches

Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit :

- alexyoung/dailyjs-backbone-tutorial en version 85c358 ;

- la clé de l'API de la partie 2 ;

- l'ID client de la partie 2 ;

- la mise à jour de app/js/config.js avec vos clés.

Pour consulter la source, exécutez les commandes suivantes (ou utilisez un outil approprié pour Git GUI) :

git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
cd dailyjs-backbone-tutorial
git reset --hard 85c358

II - Personnaliser Bootstrap

Jusqu'à présent, notre application Backbone a eu une interface rudimentaire. Elle est basée sur Bootstrap qui est un choix populaire pour les développeurs qui veulent une interface utilisable sans dépenser trop de temps à travailler sur le design de l'application. Cependant, Bootstrap est victime de sa propre popularité et la plupart d'entre nous commencent à se lasser de le voir partout.

Ce tutoriel porte sur les techniques pour personnaliser les projets générés avec Backbone et Bootstrap. Il existe trois approches principales auxquelles je me permets d'ajouter une originalité à mes projets Bootstrap :

1. Couleurs : obtenir le projet configuré avec un marquage approprié ;

2. Texture : une utilisation judicieuse des images pour ajouter une dimension supplémentaire à l'arrière-plan, des panneaux et boutons ;

3. Polices personnalisées et icônes : des polices personnalisées soigneusement appliquées et des icônes peuvent créer un look plus visuel.

III - Les couleurs

Bootstrap a une page de personnalisation qui permet de changer les couleurs et les éléments typographiques. C'est explicite, donc je ne vais pas passer trop de temps là-dessus. Bootstrap est bâtie sur LESS CSS. Il est facile de créer vos propres versions de Bootstrap avec des couleurs personnalisées.

IV - La texture

Pour gagner du temps lorsque je travaille sur des projets clients, je parcours souvent des sites de photos pour trouver des illustrations et textures utiles. Ce projet, cependant, nécessite juste quelque chose pour ajouter une texture à la navigation du côté gauche pour qu'elle soit visuellement distincte. Une excellente ressource pour les textures est Subtle Patterns. Un répertoire organisé de textures en mosaïque adaptées aux projets Web et mobiles. Pour des informations juridiques destinées à des projets commerciaux, voir ici.

J'ai ajouté deux images en mosaïque au projet : une pour la barre de navigation et une autre pour le fond du body. L'image utilisée sur le body est blanche, tandis que la barre de navigation est gris foncé. Les éléments de la barre de navigation utilisent un mélange alpha pour rendre la texture sous-jacente plus légère (rgba (255, 255, 255,.25)).

Il est facile d'ajouter des textures à un projet pour autant que les images Subtle Patterns incluent une bonne résolution. Je trouve que c'est un second plaisir que de personnaliser Bootstrap, car il est facile d'échanger rapidement des textures pour expérimenter.

V - Les polices personnalisées et les icônes

La première chose que je voulais changer était la police du logo. Plutôt que d'utiliser une image, j'ai trouvé une police appropriée sur Google Web Fonts et j'ai appliqué quelques ombres CSS. Cette police a été ajoutée au projet en mettant à jour le fichier index.html pour charger la police et en mettant à jour la CSS pour y faire référence par son nom :

<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>

Puis, dans la CSS, la police est sélectionnée avec font-family: playball, sans-serif.

J'ai également modifié la police du body principal en PT Sans, ce qui ne semble pas radicalement différent de la valeur par défaut mais ça différencie encore le look de celui de Bootstrap.

Il existe aussi les Font Awesome rapide à utiliser.

VI - En avant pour la personnalisation

Ajouter des polices personnalisées, des textures et des icônes sont juste quelques moyens faciles pour distinguer un projet Bootstrap. Vous n'avez aucune excuse si vous créez des applications d'aspect repoussant !

Le code source de ce tutoriel se trouve ici : alexyoung / dailyjs-backbone-tutorial en version 711c9f6.

VII - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: Customising the UI du site DailyJS.

Je remercie également zoom61 pour sa relecture attentive et assidue.