Vorschlag neue Grafik für Browser Inspector

[Bertie]

Salü zusammen

Hier ein Vorschlag für eine SVG Grafik zum Seiteninspektor nach einer Idee von Matthias.

Anstelle des jetzigen Bildschirmfotos https://wiki.selfhtml.org/wiki/Datei:Kontrast-Checker-im-Seiteninspektor.png in der Seite https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F

Auf der Seite könnte es dann etwa so aussehen:

Gruss, Bertie

[Rolf B]

Hallo Bertie,

nice. Ist das selbst gezeichnet oder ist diese Gesichtskontur irgendwoher „zitiert“, so dass man Rechte überprüfen müsste?

Am liebsten wär's mir ja so:

(plusminus ein paar Pixel Feinjustierung), aber dafür müsste man der Card-Vorlage noch 2-3 Optionen bescheren…

Rolf

[Bertie]

Salü Rolf

Ist das selbst gezeichnet oder ist diese Gesichtskontur irgendwoher „zitiert“, so dass man Rechte überprüfen müsste?

Ist alles neu gezeichnet für SELFHTML, grob nach Inspiration durch vielen Ideen online und neu kombiniert. Also nichts direkt abgekupfert, somit ohne Rechte-Probleme.

Gruss, Bertie

[Matthias Scharwies]

Servus!

Hallo Bertie,

nice.

ja, das sieht sehr gut aus!

Würde imho als Icon gehen mit einer kurzen Texterklärung:

HTML und CSS untersuchen
Webseiten live debuggen (das muss besser formuliert werden)

Am liebsten wär's mir ja so:

Mir ist die Rastergrafik/Screenshot …

• zu kleinteilig
• zu firefoxig - Chrome sieht anders aus

(plusminus ein paar Pixel Feinjustierung), aber dafür müsste man der Card-Vorlage noch 2-3 Optionen bescheren…

Zusammen sieht's besser aus, aber dann mit dem Kopf im Bild für

{{Card/Bild|Kontrast-Checker-im-Seiteninspektor.svg}}

der Card-Vorlage noch 2-3 Optionen bescheren…

Bitte lass' die Vorlage so wie sie ist. Stand jetzt ist sie ohne JS nicht benutzbar.

Sobald wir eine Mediawiki-Plattform haben, die div und p in a erlaubt, können wir sie umbauen. Vorher haben wir andere Baustellen.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

Stand jetzt ist sie ohne JS nicht benutzbar.

Und wieder einmal muss ich mit einer zeitlosen Rückfrage antworten:

Hä?

Welches JS verwenden wir für Cards? Ich bin ja vergesslich, aber SO?

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Stand jetzt ist sie ohne JS nicht benutzbar.

Und wieder einmal muss ich mit einer zeitlosen Rückfrage antworten:

Hä?

Es war am 06.06. als Michael uns Salz in die Wunden streute:

Es wird peinlich!

Die Cards lösten sich in Listen auf, die Links waren verschwunden.

Und wenn's jetzt am fehlenden CSS lag - das Problem ist das gleiche:

Eine Webseite sollte ohne JS und CSS benutzbar sein. Siehe Naked CSS Day.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

wenn es ein Requirement ist, dass die Cards auch im nackigen Wiki brauchbar sind, dann muss da noch einiges passieren.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

wenn es ein Requirement ist, dass die Cards auch im nackigen Wiki brauchbar sind, dann muss da noch einiges passieren.

Ja, aber nicht jetzt! Wir haben andere Baustellen, die noch dringender sind.

Herzliche Grüße
Matthias Scharwies

[Jonathan Harker]

Hallo Bertie,

Im Disney Channel käme jetzt die Meldung:

„Achtung! Enthält Darstellungen von Tabakwaren!“

Aber das gefällt mir sehr!

Auf der Seite könnte es dann etwa so aussehen:

Ja!

Bis bald!
Jonathan

[Rolf B]

Hallo Jonathan Harker,

„Achtung! Enthält Darstellungen von Tabakwaren!“

🤣 - braucht der moderne Inspektor einen Vaporisierer? Oder einfach eine Trillerpfeife?

Rolf

[Der Martin]

Hallo,

echt cool! Jetzt noch eine dünne Rauchfahne, und es ist perfekt!

Einen schönen Tag noch
 Martin

[Bertie]

Salü Martin

Gefällt mir 👍

Gruss, Bertie

[Der Martin]

Hallo Bertie,

süüüper! 👍

Einen schönen Tag noch
 Martin

[Camping_RIDER]

Aloha ;)

Mir gefällt die Grafik visuell sehr gut - aber ich verknüpfe sie nicht intuitiv mit dem Seiteninspektor.

Ich verstehe, wie man von "Inspektor" auf "Sherlock Holmes" kommt, und ich finde diese Assoziation auch passend.

Allerdings möchte ich was zu bedenken geben: Sowohl im Chrome als auch im Firefox heißen die Werkzeuge nicht „Seiteninspektor“ - wenn man nach Seiteninspektor googelt, findet man dort vor allem den Selfhtml-Artikel.

In meinem Chrome und in meinem Firefox heißen die Werkzeuge im offiziellen Wording „Entwicklertools“, siehe z.B.:

bzw. für Firefox:

MDN: What are browser development tools Das Wording "Inspektor" findet sich nur im Firefox, und auch da nur für den Tab, der das HTML zeigt (der Artikel zum "Seiteninspektor" umfasst aber ja mehr als nur diese Funktionalität).

Insofern stellt sich für mich die Frage, ob die Benennung der DevTools als "Seiteninspektor" überhaupt noch sinnvoll und zeitgemäß ist, oder ob das nicht eher (wenn sich Chrome und Firefox schonmal einig sind) "Entwicklerwerkzeuge" heißen müsste.

Und damit gibt es da natürlich für das Logo auch offene Fragen, denn zu Entwicklerwerkzeugen passt als Icon ein Werkzeugkasten o.ä. besser (Chrome verwendet als Icon die spitzen Klammern, hat aber für den Menüpunkt darüber namens „weitere Tools“ einen Werkzeugkasten).

Ich würde tatsächlich auch einen Werkzeugkasten oder Schraubenschlüssel o.ä. eher mit den DevTools assoziieren als Sherlock Holmes. Das mag persönliche Ansichtssache sein, aber ich wollte das auf jeden Fall mal mit einwerfen…

Grüße,

RIDER

[Matthias Scharwies]

Servus!

Insofern stellt sich für mich die Frage, ob die Benennung der DevTools als "Seiteninspektor" überhaupt noch sinnvoll und zeitgemäß ist, oder ob das nicht eher (wenn sich Chrome und Firefox schonmal einig sind) "Entwicklerwerkzeuge" heißen müsste.

Ja, das stimmt. Die erste Version zeigte den FireBug-Plugin, dann ging's alles um Firefox - in den developer tools von Chrome sieht's aber ganz anders aus. Da müsste man im Artikel zumindest drauf hinweisen.

Deshalb stört mich auch die vorhandene Rastergrafik. Einerseits zeigt sie die Möglichkeit, direkt den Kontrast von Schrift zu Hintergrund zu ermitteln - andererseits sorgt sie für keinen Wiedererkennung für Chrome- oder gar Safari-Nutzer.

Und damit gibt es da natürlich für das Logo auch offene Fragen, denn zu Entwicklerwerkzeugen passt als Icon ein Werkzeugkasten o.ä. besser (Chrome verwendet als Icon die spitzen Klammern, hat aber für den Menüpunkt darüber namens „weitere Tools“ einen Werkzeugkasten).

Ich würde tatsächlich auch einen Werkzeugkasten oder Schraubenschlüssel o.ä. eher mit den DevTools assoziieren als Sherlock Holmes. Das mag persönliche Ansichtssache sein, aber ich wollte das auf jeden Fall mal mit einwerfen…

Das ist auf jeden Fall diskussionswürdig.

Ich habe den Inspektor, die Dev Tools vor allem zum Spicken genutzt und war bass erstaunt als @Christian Kruse 2015 in Münster die gesamte Startseite in seinem Browser umbaute - ganz ohne Editor!

Ziel wäre in diesem Artikel eine Einführung für Anfänger zu geben, ob die schon „entwickeln“ oder eher „inspizieren“, müsste diskutiert werden. Hier ginge es dann weiter:

• Einstieg in JavaScript/Programmieren und Debuggen

Herzliche Grüße
Matthias Scharwies

[Auge]

Hallo

[Mich] stört […] auch die vorhandene Rastergrafik. Einerseits zeigt sie die Möglichkeit, direkt den Kontrast von Schrift zu Hintergrund zu ermitteln …

Ich gebe dir recht, dass das vorhandene (Symbol)-Bild nicht wirklich passt. Es ist meiner Meinung nach überladen und zeigt eine recht spezielle Funktion. Wenn man die Entwickler-Tools öffnet, bekommt man aber erst einmal den Reiter Elemente/Inspektor mit der Dokumentstruktur zu sehen.

Ob da stattdessen etwas anderes gezeigt werden sollte und wenn ja was, weiß ich aber auch nicht. Was könnte abseits von einem Symbol ein selbsterklärendes Beispielbild aus den Entwickler-Tools sein? Eines, das nicht so überladen ist, wie das Jetzige? Wenn ich so durch die Reiter der Entwickler-Tools von Chrome und Firefox durchschalte, finde ich nichts, was nicht zu fitzelig oder für den unwissenden nicht „Hä?“ ist. Vielleicht sollte man das einfach ganz weglassen und es auf der Card bei einem passenden Symbol belassen.

… andererseits sorgt sie für keinen Wiedererkennung für Chrome- oder gar Safari-Nutzer.

Dein wiederholtes Abstellen auf Chrome oder Safari-Nutzer finde ich allerdings diskussionswürdig. Der offensichtlich aus FireBug stammende Screenshot, der jetzt als Symbolbild herhält, ist heutzutage auch für Firefox-Nutzer nicht wiedererkennbar. Es gibt FireBug nicht einmal mehr im Firefox-Addon-Portal. So what?

Aktuell nutzen die allermeisten Nutzer Chromium-basierte Browser. Es ist also nachvollziehbar, die Anleitung auf deren Darstellung basieren zu wollen. Soll die aber, falls es noch jemals einen anderen Browser geben sollte, der die Marktführung übernimmt, dann auf dessen Nomenklatur angepasst werden? Das wäre dann nämlich die Konsequenz deiner Argumentation.

Eine eventuell unterschiedliche Benennung von Grund-Funktionen der Entwicklertools ^[1] zu erwähnen, halte ich für sinnvoll, wobei ich es für wichtig halte, sich dabei nicht bis in die letzten Ecken zu verfransen. Die meistverwendeten Funktionen sind aber doch so ähnlich, dass sich dafür Screenshots, mal aus dem einen und mal aus dem anderen Browser stammend, mischen lassen sollten, selbst wenn der Reiter nicht den beim Marktführer verwendeten Namen trägt. Das zu interpretieren, sollte man dem Publikum von SelfHTML schon noch abverlangen können.

Tschö, Auge

---

1. Aktuell betrifft das vermutlich nur Chromium- und Firefox-basierte Browser. Ich vermute, dass die Entwicklertools im Safari ähnlich aufgebaut sind, wie die im Chromium, teilen sie doch ihre Herkunft von KHTML. ↩︎