Les chartes graphiques sont la clé de la réussite des sites web (2/2).

Cet article est la suite de la première partie. Il présente un choix de charte graphique.

La Partie Animation

Pour la partie animation, j’utilise la librairie Javascript, JQuery. C’est une très bonne librairie, open source, reconnue, adaptable et fortement utilisée. J’ai pris une valeur sûre d’internet. Il existe d’autres librairies, de qualité équivalente, qui fonctionnent sur le même modèle (Prototype, Dojo).

Vous trouverez ci-joint un comparatif sur les librairies JavaScript (en En). Un petit dessin pour mieux vous convaincre. Cette librairie propose de nombreuses extensions, pour construire des tableaux dynamiques, des menus, et autres.

Comparatif sur les frameworks javascript.

La partie charte graphique.

Cet article se concentre sur les chartes graphiques présentes sur Internet. Sur les avantages à utiliser des chartes graphiques toutes prêtes (un modèle standard, un framework CSS) dans la construction d’un site web. J’ai procédé par itérations, par recherches successives. Je vais vous présenter des liens sur internet, des informations qui me semblent pertinentes.

J’ai trouvé un grand nombre de site internet qui présente des listes de framework CSS. A partir des listes, des comparatifs, j ai retenu 2 chartes graphiques et des sites de comment construire une charte graphique. Je vous invite à lire un article sur la conception d’un framework CSS sur le site de developpez.com.  Je n’ai pas trouvé de produit miracle.  Je vais faire un certain nombre de remarques.

La magie d’internet, c’est de faire évoluer les connaissances et les perceptions en temps réel.  Chaque framework propose des choix et des bonnes pratiques CSS. Il est difficile de trouver une charte graphique qui cumule tous les avantages, de dresser une méthode universelle pour construire des sites web.

NouveauAjout du 28/06/2012 : Le framework twitter bootstrap vient de passer en version 2.1, elle corrige et améliore diverses fonctions.

Les listes des chartes graphiques.

J’ai regardé et découvert divers frameworks (Foundation, Inuit.css, BluePrint, 960 css), la documentation, le ressenti, j’ai retenu 2 chartes graphiques.

1 – NotJustAGrid

Page principale de Not Just a Grid

NotJustAGrid est l’un des premiers framework, libre de droit, que j’ai utilisé, à répondre à mes besoins. Il n’est pas très connu, il est simple d’utilisation. La documentation et les exemples sont corrects.

2 – Bootstrap, from Twitter.

Bootstrap est un framework CSS élégant, avec un documentation propre en anglais. La documentation est très bien réalisée, elle est conviviale, agréable à regarder (à lire). Ce framework se marie bien avec Jquery du côté animation.

Ce framework dispose de nombreux avantages :

  • un rendu sympathique, agréable à voir et professionnel,
  • une documentation claire,
  • une feuille de style de bonne qualité (sauf pour la partie formulaire),
  • l’intégration avec Jquery et de nombreux frameworks javascript pour les animations,
  • la possibilité de créer sa propre librairie CSS,
  • de nombreux sites d’astuces, de comment faire,
  • une communauté très active.

Les inconvénients :

  • La partie formulaire est agréable à regarder. Je suis choqué sur la partie Fieldset, sur la partie on surcharge les éléments formulaire HTML de base. Le site du  framework bootstrap propose une partie « Customize and download« , qui permet de choisir les options, les couleurs de son framework CSS.  Je décoche « Forms » dans la partie « Base CSS« . Rien ne vous empêche, d’ajouter ensuite à la main, la partie formulaire.
  • Il manque une partie sur les polices, les tailles de caractère.  Dans la réalisation d’un site web, il est utile de pouvoir changer, modifier la taille des polices. Vous trouverez un article sur ce point.

Les bonus.

Ci joint une liste de sites liés à bootstrap. Il y en a beaucoup, voici une petite collection.

NouveauAjout du 28/06/2012 : Je suis tombé sur une astuce pour modifier l’aspect des champs « input file » : le lien.

Comme vous pouvez le voir, ce framework est très riche, d’un point de vue fonctionnalité. Il est utilisé sur de nombreux sites web. De nombreux utilisateurs proposent des extensions et des guides d’intégration avec les divers langages de programmation.

Conclusion

Mon choix c’est arrêté sur ces 2 frameworks.  Je fais évoluer les chartes graphiques en fonction de mes besoins. Mon travail consiste maintenant, dans l’intégration et la conception des pages web. Je me concentre sur le design et sur la partie animation. Cette partie prend du temps, par contre c’est la plus intéressante d’un point de vue conception – réalisation. Le site web n’est rien sans la magie des traitements et les interactions.

Je vous invite à me laisser vos impressions et vos ressentis sur ces framework CSS.

@ Bientôt.

A propos Duarte TERENCIO

Chef de projet et Architecte J2EE - Portail d'entreprise - Cloud computing Vous trouverez plus d'information sur la page "Me contacter"
Cet article, publié dans Programmation, Tutoriel, est tagué , , , , , . Ajoutez ce permalien à vos favoris.

Un commentaire pour Les chartes graphiques sont la clé de la réussite des sites web (2/2).

  1. Ping : Les chartes graphiques sont la clé de la réussite des sites web (1/2). | Un regard sur le cloud

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s