18041 sujets

Questions générales et questions de débutants

Logiciel ou site pour extraire la structure DIV d'une page web

Bonjour à tous,
Je me suis enfin décidé à écrire sur ce forum.

Comment feriez-vous pour extraire tous les div d'une page web et en faire un genre de plan comme sur la pièce jointe?

J'en ai assez de faire ça à la main.

Il n'est pas question de faire la mise en page. Seulement de savoir quel DIV est inclus dans quel DIV dans le code HTML de la page.

Il existe sûrement un logiciel ou un site web dans lequel j'entre un fichier html et on me sort un beau petit pdf... Mais où?

Merci à vous






upload/50387-fp09091-st.jpg
Modifié par Flooder (19 Jun 2013 - 01:17)
Administrateur
Bonjour,

les 3 possibilités qui me viennent à l'esprit :
- intégrée à Firefox via "Examiner l'élément la vue 3D en WebGL : clic droit Examiner l'élément et ensuite en haut à droite cliquer sur le cube en 3D... à la souris faire tourner l'objet 3D qu'est devenue ta page,
- l'extension Firefox View source chat
- avec la Web Developer Toolbar, ajouter Infos / Afficher les détails des Id & class (combinable avec la vue 3D)

Tu peux faire la même chose via la console JS en fait ou une simple CSS utilisateur (ajoutable via Firebug), dans le genre :


body:before,
main:before,
section:before,
article:before,
aside:before,
header:before,
footer:before {
  content: attr(class) " / id=" attr(id) " ";
  display: inline-block;
  color: white !important;
  background: darkred !important;
  padding: 2px 4px;
  border-radius: 4px;
}

Modifié par Felipe (21 Jun 2013 - 12:06)
Felipe a écrit :

body:before,
main:before,
section:before,
article:before,
aside:before,
header:before,
footer:before, {
  content: attr(class) " / id=" attr(id) " ";
  display: inline-block;
  color: white !important;
  background: darkred !important;
  padding: 2px 4px;
  border-radius: 4px;
}

Mais ch'est bien ch'a! Allez hop code css de maintenance adopté! Bien sûr nous avons les inspecteurs des navigateurs, mais ça peut servir... Attention à ne pas laisser de virgule entre "footer before" et l'accolade.

Édit : décidément ce code s'avère bien plus utile qu'il n'y parait. Une petite adaptation perso :
body:before,
main:before,
section:before,
article:before,
div:before,
aside:before,
header:before,
footer:before,
img:before,
figure:before,
form:before,
h1:before,
h2:before {
    content: "class="attr(class)" / id=" attr(id) !important;
    display: inline-block !important;
    position: absolute !important;
    z-index: 1000 !important;
    padding: 2px 4px !important;
    font: 300 1.4rem/2rem "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: #fff !important;
    background: #333 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    -webkit-transform: rotate(0deg) !important;
       -moz-transform: rotate(0deg) !important;
            transform: rotate(0deg) !important;
}

Modifié par Olivier C (19 Jun 2013 - 23:28)
Administrateur
Merci pour la remarque, j'ai corrigé Smiley smile

Tu as une petite collection de sélecteurs sur https://github.com/karlgroves/diagnostic.css (et https://github.com/PhilippeVay/diagnostic.css Smiley cligne ). Orienté accessibilité mais adaptable à d'autres usages.
Notamment pour afficher des infos présentes sur l'élément html ou dans l'élément head.
Dans la lignée de http://meyerweb.com/eric/tools/css/diagnostics/ ou http://debug.yaml.de/
Modifié par Felipe (21 Jun 2013 - 12:12)
Sujet clos
Aller à