css Article

Créer un backend simplement avec Bootstrap

Créer un backend simplement avec Bootstrap

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

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

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

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.

Fini les problèmes de cache navigateur avec filemtime

Marre d’avoir des problèmes de cache lors de vos développements ? Marre de recevoir des appels de vos clients mécontents car ils ne voient pas les changements que vous venez de mettre en place ? Vous souhaitez maîtriser le cache du navigateur pour les fichiers de style (css), javascript, images (png, jpg …) ?

Le problème

Les navigateurs (tous confondus) utilisent un système de cache local qui permet d’afficher plus rapidement une page une fois que celle-ci a déjà été affichée. Le problème c’est que si vous poussez une mise à jour d’un fichier javascript ou un fichier de style, les visiteurs qui auront déjà ce fichier en cache ne verront aucun changement sur le site car leur navigateur sortira le fichier en cache.

La solution

Pour éviter ce problème très frustrant à la longue, il existe une pratique qui utilise une fonction PHP pour permettre de dater le fichier. Cette fonction s’appelle filemtime et va renvoyer la date de dernière modification du fichier au format timestamp.

Voici comment l’utiliser :

il suffit donc de mettre un paramètre GET (ici « date ») avec comme valeur le timestamp de la date de dernière modification de votre fichier (donné par la fonction filemtime) pour que le navigateur pense qu’il s’agit d’un nouveau fichier et aille le chercher sur le serveur.

Procédez comme cela pour chaque fichier javascript et css mais aussi pour les images si besoin.

Attention au chemin (path) que vous allez utiliser pour filemtime. Un chemin peut être relatif ou absolue. Si vous avez une erreur PHP contenant le terme « stat failed« , ceci veut dire que PHP n’a pas réussit à récupérer les infos du fichier, ce qui le plus probablement sera une erreur de chemin. Alors relatif ? ou absolue ? Ceci va dépendre de votre configuration PHP, mais le plus souvent le chemin relatif fonctionnera.

Conclusion

J’espère que ce petit tutoriel vous aura aidé à comprendre une méthode simple pour vous éviter bien des problèmes de cache. J’utilise maintenant cette méthode dans tous les projets que j’entreprends, c’est vraiment une « best practice » comme on dit dans le métier.