Discussion :

[Gordon Fowler]

Firefox 11 affiche la structure des pages web en 3D
Et les changements dans les feuilles de style CSS en temps réel


Firefox 11 vient d’intégrer un ensemble d’améliorations qui risquent de ne pas laisser les développeurs web indifférents.

La première nouveauté est un outil qui permet de visualiser la structure (CSS, etc.) d’une page en 3D. Page Inspector 3D View, surnommé Tilt, repose sur WebGL.

« Cet outil permet à tout utilisateur de comprendre immédiatement le lien entre le code et la page finale », explique Mozilla. « Alors que les outils pour développeurs, tels que « view source », ont toujours été utiles pour apprendre à développer une page, l’affichage en 3D offre une vue plus limpide de la structure des différentes parties d’un site Web ».


Le site de CNN passé à la moulinette de Page Inspector 3D View, alias Tilt

Après avoir sélectionné « 3D View » dans Page Inspector, il suffit de déplacer la souris sur les différents éléments pour que Firefox 11 donne davantage d’informations sur la partie sélectionnée.

Deuxième nouveauté, l’outil Éditeur de style permet d’éditer les feuilles de style CSS, à l’instar d’un éditeur de texte, et de voir instantanément les modifications, sans quitter le navigateur.

« C’est une façon simple et rapide d’itérer et de tester les conceptions d’un site Internet », explique la fondation. Lorsque des modifications sont apportées, l’Éditeur de style permet de sauvegarder le fichier sur un ordinateur.

Enfin, Firefox 11 synchronise à présent les modules complémentaires entre différents ordinateurs. Les utilisateurs peuvent activer cette option depuis la fenêtre « Options » dans l’onglet Sync.

Télécharger Firefox 11

Plus d’informations sur "Tilt"

Source : Mozilla

Et vous ?

Impressioné(e) par Page Inspector 3D View ? Ou simple gadget ?

[amezghal]

Je viens juste de tester l'inspection 3D et c'est vraiment un truc de ouf.
l'avantage c'est qu'on voit bien le z-index des layers

[rambc]

Pas mal pour voir la complexité de certains sites... A voir si cela est utile en situation réelle.

[Khleo]

Vraiment impressionnante l'inspection 3D

[FERDIKAM]

trop cool l'extension

[Aiekick]

Effectivement bravo mozilla !!

pour la visu 3D c'est sympa pour voir la complexité d'un site, c'est un peu fun, mais je pense pas que ça soit d'un grand intérêt pour le dev.

par contre les outils d'examen en live d'un site ça c'est top et je vais m'en servir.

D'ailleurs si vous voulez vous rendre compte de la complexité d'un site vous pouvez afficher une adresse d'un site sous forme de graphe a cette adresse :
http://www.aharef.info/static/htmlgraph/
C'est 2D mais c'est assez efficace aussi

[stailer]

Enorme !

Je sais pas si ça va m'être utile mais techniquement, c'est vraiment top.

[_ash_]

Pour voir à quelle point cette extension peut être pratique, il suffit de l'utiliser sur cette page : http://www.cedricrey.fr/atelierWeb/tour_eiffel_3D.html

[pastel.pro]

C'est vraiment excellent, et perso je trouve pas ça gadget, ça permet de comprendre une page beaucoup plus vite

[Tillo]

Et voilà... tous les développeurs web de la terre vont pouvoir découvrir la structure de mes pages web et se moquer de moi parce que j'utilise mal les div.

Plus sérieusement, je doute de l'utilité réelle d'une telle fonction.

[Anomaly]

J'ai essayé sur le forum et j'ai

Par contre après j'ai essayé sur Gmail et j'ai

[Jacquou]

Mais la page d'accueil personnalisée d'Orange est incompatible avec FF 11

[Benjamin Delespierre]

C'est super, j'adore ce genre de gadgets . ça facilite grandement la compréhension de la structure global de la page en un coup d'oeil.

Un exemple avec DVP

[SurferIX]

Et voilà... tous les développeurs web de la terre vont pouvoir découvrir la structure de mes pages web et se moquer de moi parce que j'utilise mal les div.

Plus sérieusement, je doute de l'utilité réelle d'une telle fonction.

http://www.boitasite.com/

Woof tu as raison (je me moque gentiment )

C'est vrai que pour voir la complexité des sites c'est très efficace !

[Matthieu Vergne]

Carrément que c'est utile la vue 3D en dév : quand tu fais un site généré dynamiquement, tu es obligé de regarder le code généré pour voir si tes divs sont bien imbriqués, si t'as pas des trucs qui te servent à rien et que tu peux enlever, ... mais pour ça tu dois visualiser le code de la page, copier, coller dans un éditeur et appliquer une indentation automatique, ce qui ne marche pas toujours si tu as des scripts au milieu, et qui n'est pas toujours adapté aux balises HTML (indenter tous les <b>, <i> et autres trucs du genre est rarement souhaité). Et même si on a tout ça, c'est pas toujours évident de voir le niveau de profondeur des éléments, faut compter les niveaux d'indentation.

Avec la vue 3D au moins ça apparaît directement, pas besoin de faire tout ça. Mais bien sûr c'est pour ceux qui cherchent à coder proprement {^_°}.