HTML5 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.

Bug width 100% dans webkit mobile

Voici un article qui va être assez court mais qui je l’espère vous aidera à résoudre un bug un peu spécial sous Safari mobile (Ipad, Pod Touch et Iphone) et plus généralement webkit mobile. Dans un des contrats web que j’ai fais récemment j’ai été confronté à un problème de CSS apparemment référencé sous Safari IOS. Safari IOS est basé sur le moteur de rendu de pages Web open source Webkit. Webkit est utilisé par de nombreux navigateur web mobile comme Android, Nokia, Blackberry, Iphone, Ipad … 

Explication du bug CSS

Dans le header de ce site j’ai un css qui permet à une div avec un width de 100% d’avoir un background  positionné à 50% sur l’axe des x comme suit : 

Dans tous les navigateurs (Testé dans Chrome, Firefox, Safari, IE 8,9) ce CSS fonctionne parfaitement et permet d’avoir une image en background qui s’affichera toujours à 100% de la taille du navigateur. Il faut bien évidemment une image assez grande (1600px minimum) pour que l’effet soit réussit. MAIS sous Safari mobile, seule une partie du background s’affiche. Cela provient du viewport (partie affiché à l’écran) qui est différent sur IOS. Voici un lien à lire pour comprendre le viewport.

Résolution du bug en utilisant viewport

J’ai donc réussit à résoudre ce bug en ajoutant une meta qui permet de fixer la largeur du viewport désiré dans webkit mobile. En fait pour simplifier j’ai utiliser la largeur maximale du content de mon site. Cela donne dans le head de votre HTML : 

Ce paramètre va permettre à Webkit de savoir la partie que vous souhaitez afficher à l’écran et va donc exécuter un « zoom » sur la largeur (width) que vous avez définie.

Conclusion 

Je pense que je vais intégrer cela dans tous mes développements car cela permet de toute façon de fixer la façon dont vous souhaitez que Webkit affiche vos pages sur un navigateur basé sur webkit (la plupart maintenant) en plus de résoudre certains bug CSS.