Chaque année, Google organise le
« Chrome Summit » : Un évènement très attendu au cours duquel
les ingénieurs et développeurs du groupe viennent présenter leurs « innovations ».
Cette année, le Chrome Summit
s’est tenu du 12 au 13 Novembre à San Francisco. Ces deux jours se sont donc
composés de nombreuses conférences et de nouveautés. D’ailleurs si cet
évènement attise votre curiosité, je vous invite à visionner un extrait d’une
conférence animée par deux directeurs de Chrome : Ben Galbraith et Dion
Almaer
Au cœur de toutes ces créations,
l’une d’entre elles s’est particulièrement démarquée.
Il s’agit de Visbug, le nouvel
outil de Google qui va lui permettre d’apporter sa pierre à l’édifice dans le
domaine de la création web.
Concept
Visbug a été annoncée comme une
nouvelle extension de Chrome qui permet de modifier une page web grâce à une
simple interface WYSIWYG*.
Désormais, grâce à cet outil vous
pourrez, depuis ce navigateur, travailler sur une page web (déjà existante) par
l’intermédiaire de simples actions de « glisser-déposer ».
Comparaison avec Firebug
Cette annonce a poussé bon nombre
de personnes, et les ingénieurs de Google eux-mêmes, à comparer Visbug avec Firebug, l’outil de Firefox (aujourd’hui obsolète) qui permettait d’accéder au
code d’une page web et d’y apporter directement des modifications.
Malgré une utilité similaire,
Google a décidé de rendre son outil plus simple d’utilisation en évitant aux
développeurs de se plonger entièrement dans du code afin d’y apporter ne
serait-ce que quelques modifications.
Installation
Pour obtenir cette extension, il
vous suffit simplement d’accéder au Chrome Web Store, rechercher « Visbug »
et cliquer sur « Ajouter à Chrome ».
Une fois Visbug installée, son
logo apparaît dans la barre de Google Chrome.
Ensuite, il ne vous reste qu’à
vous rendre sur la page web que vous souhaitez modifier et de cliquer sur le
logo de l’extension.
Utilisation
A partir de cet instant, une barre dotée de plusieurs icônes
apparaît du côté gauche de votre page.
Au total, on y retrouve 14 fonctionnalités qui nous donnent
une certaine liberté pour modifier une page web.
On peut par exemple :
Obtenir le code CSS d’un
élément grâce à « Inspect »
Ici, j’ai sélectionné
le titre BOSE PROFESSIONNEL et je peux donc obtenir :
- La taille du texte (font-size) qui est de 48 px
- L’épaisseur du texte, qui ici est d’une valeur de 700, ce qui représente la variante « Bold »
- L’espacement des lettres (letter-spacing) qui est de -1px
- Le type d’alignement du texte (text-align) qui est ici centré (center)
Déplacer un élément
grâce à « Position » ou « Move » ou encore « Flexbox Align »
Ici, j’ai tout simplement centré le titre « Bose
recommande ».
Modifier le texte
grâce à « Edit Text »
Ici, j’ai modifié le titre « Bose
recommande » en « Victor recommande à tout le monde »
(oui oui je suis spécialiste chez Bose maintenant…).
Modifier le margin et
le padding d’un élément grâce à... « Margin »
et « Padding » (obvious oui…)
Ici, j’ai « recentré » le contenu du block en
modifiant le padding, au lieu de déplacer un élément à la fois.
Limites
Malgré cette liberté d’action,
l’extension possède tout de même certaines limites. Par exemple, après avoir
modifié une page web, nous ne pouvons pas directement exporter le nouveau code
de la page et donc conserver cette nouvelle mise en page (mais on peut tout de
même afficher le code source afin de récupérer le contenu grâce à un bon
copier-coller, mais la manipulation ne reste pas intuitive).
Bilan
Pour conclure, je décrirais cette extension comme un bon petit outil qui permet de forger sa créativité en matière de web design avec une méthode plus intéractive que sur un wireframe* par exemple, mais également de travailler plus facilement et rapidement sur une page web sans devoir se plonger directement dans du code.
J'espère tout de même que des améliorations seront apportées à cette extension comme par exemple : La possibilité d'enregistrer son code dans une application "développement" de son compte Google ou encore générer des animations... et peut-être qu'elle nous aidera dans notre future carrière de développeur !
Désormais il ne vous reste plus qu'à aller tester Visbug et vous faire votre propre avis !
Auteur : Victor Merlier
Lexique
WYSIWYG : Cet acronyme
signifie en anglais « What You See Is What You Get » que l’on peut
traduire littéralement par "ce
que vous voyez est ce que vous obtenez" en français. Ce terme désigne une application qui affiche
directement le résultat des actions que l’on effectue (modification du texte,
de la couleur…).
Wireframe (Maquette de fil de fer) : représentation visuelle de l’interface d’une page web (exemple : wireframe.cc)
Wireframe (Maquette de fil de fer) : représentation visuelle de l’interface d’une page web (exemple : wireframe.cc)
Commentaires
Enregistrer un commentaire