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

Le , par Gordon Fowler, Expert éminent sénior
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de FERDIKAM FERDIKAM - Membre confirmé https://www.developpez.com
le 14/03/2012 à 18:05
trop cool l'extension
Avatar de Aiekick Aiekick - Membre expérimenté https://www.developpez.com
le 14/03/2012 à 21:08
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
Avatar de stailer stailer - Membre chevronné https://www.developpez.com
le 14/03/2012 à 21:25
Enorme !

Je sais pas si ça va m'être utile mais techniquement, c'est vraiment top.
Avatar de _ash_ _ash_ - Membre habitué https://www.developpez.com
le 15/03/2012 à 8:34
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
Avatar de pastel.pro pastel.pro - Membre actif https://www.developpez.com
le 15/03/2012 à 9:23
C'est vraiment excellent, et perso je trouve pas ça gadget, ça permet de comprendre une page beaucoup plus vite
Avatar de tabouet tabouet - Membre confirmé https://www.developpez.com
le 16/03/2012 à 10:22
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.
Avatar de Anomaly Anomaly - Responsable technique https://www.developpez.com
le 16/03/2012 à 14:28
J'ai essayé sur le forum et j'ai

Par contre après j'ai essayé sur Gmail et j'ai
Avatar de Jacquou Jacquou - Membre à l'essai https://www.developpez.com
le 17/03/2012 à 11:15
Mais la page d'accueil personnalisée d'Orange est incompatible avec FF 11
Avatar de Benjamin Delespierre Benjamin Delespierre - Expert éminent https://www.developpez.com
le 21/03/2012 à 13:34
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
Avatar de SurferIX SurferIX - Membre chevronné https://www.developpez.com
le 21/03/2012 à 13:41
Citation Envoyé par tabouet  Voir le message
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 !
Avatar de Matthieu Vergne Matthieu Vergne - Expert confirmé https://www.developpez.com
le 21/03/2012 à 13:56
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 {^_°}.
Offres d'emploi IT
Spécialiste systèmes informatiques qualité et référent procédure H/F
Safran - Ile de France - Colombes (92700)
Responsable transverse - engagement métiers H/F
Safran - Ile de France - Corbeil-Essonnes (91100)
Data scientist senior H/F
Safran - Ile de France - Magny-les-Hameaux (Saclay)

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil