Verschlimmbesserungsvorschlag für SVG-Tutorial

[Matthias Scharwies]

Guten Morgen!

Moin moin,

Vielleicht sollte ich meinen Benutzernamen in Mecker-Fritze ändern?

Nein, in "Proof-Reader"!!

Danke für Deinen Input. Das ist unser größtes Problem - jemand (ich) schreibt ein Tutorial - die anderen denken sich, dass das dann schon irgendwie passen würde und schauen maximal auf Rechtschreibfehler, wenn überhaupt.

Hier hatten wir mal einen „Test-User“, der sich dann ein 20 Jahre altes Buch kaufte und dann dieses genau so auseinandernahm: SVG: Tutorial? Murks!

weiß nicht warum Matthias da eine Adminsperre draufgelegt hat. Vandalismus gab's zu der Zeit keinen erkennbaren. Edit-War auch nicht. Aber ich will das nicht an ihm vorbei aufheben und hab einfach die 5 in den Text gesetzt.

just because I'm paranoid doesn't mean they're not out to get me!

Mir geht es darum, dass die SELFHTML-Einsteiger-Tutorials auch im Unterricht verwendet werden können. Das funktioniert nicht, wenn sich ein Script-Kiddie anmeldet, die von der Klasse zu bearbeitende Seite durch "Gehackt von Captain Anonymous" ersetzt und eine aufgelöste IT-Lehrerin dann nicht weiß, wie man das reverted. So eine Mail hatten wir. Das läuft bei der großen Wikipedia mit den gesichteten Versionen besser.

Bevor ich jetzt x-Seiten ändere, dreh ich an einer anderen Stellschraube - @JimKnopf du dürftest jetzt an die geschützen Seiten und auch an die Beispiele ran!

Verschlimmbesserungsvorschlag für SVG-Tutorial

Grad eben hatte ich nach dem Lesen des ersten Posts gesagt: „Mach doch einfach!“

Rolfs Vorschlag, das erst im eigenen Benutzernamensraum zu tun ist besser. Da müssen wir nur schauen, dass die Verbesserungen auch wirklich ankommen. Sowohl Rolf als auch ich haben unzählige Entwürfe, die besser als das Vorhandene irgendwo versteckt rumliegen. Im schlimmsten Fall ändert man eine Seite ein Jahr später und entdeckt anschließend, dass es da schon etwas gab.

SVG-Einstieg

Prämisse: Es soll sich wirklich um einen Einstieg drehen.

Wir führen einfache Elemente ein, besprechen wenige Attribute, bzw. Eigenschaften und kommen dann vom Einfachen zum Schwierigen.

Dabei kann man etwas weglassen, es sollte aber nichts falsch sein.

Anstelle der Farbnamen bleu-blanc-rouge habe ich die komplizierteren HEX-Werte verwendet, das ist auch ok so.^[1]

Anfangs hatten wir hier den Begriff Pixel verwendet, jetzt gibt es die dimensionslosen Größen, die später genauer erklärt werden.

Grundlage von SVG ist ein Koordinatensystem, dessen Ursprung auf die linke obere Ecke der Zeichenfläche festgelegt ist. Die x-Achse weist folglich wie gewohnt nach rechts, die y-Achse weist dagegen zwangsläufig nach unten.“ (Stimmt doch hoffentlich?)

Um nicht mit negativen Koordinaten-Werten arbeiten zu müssen, weist die x-Achse wie gewohnt nach rechts, die y-Achse dagegen zwangsläufig nach unten.

Da gefällt mir die erste Version besser. Evtl.. mit Hinweis auf CSS:

Grundlage von SVG ist ein Koordinatensystem, dessen Ursprung auf die linke obere Ecke der Zeichenfläche festgelegt ist. Die x-Achse weist folglich wie gewohnt nach rechts, die y-Achse weist dagegen wie bei CSS nach unten.

Das man den Ursprung verschieben kann, muss später kommen!

ViewBox

in SVG viewBox heißt es am Anfang: Die viewBox [...] kann "schwenken" und "zoomen". Ich würde das Verb "schwenken" in diesem Zusammenhang als unglückliche Wahl bezeichnen, weil es außer einer reinen Verschiebung/Verlagerung auch eine Richtungsänderung (hier eher Drehung) bedeuten kann. Eine Drehung des Koordinatensystems ist aber nicht gemeint. Im gesamten Abschnitt "schwenken" konsequent durch "verschieben" zu ersetzen, würde den Text eindeutiger machen.

Unter SVG/Attribut/viewBox lautet der erste Satz schließlich auch: Das viewBox-Attribut legt ein neues Koordinatensystem fest, das innerhalb des verfügbaren Viewports beliebig skaliert, verschoben und beschnitten werden kann.

Akzeptiert! Änder das gleich im Text!

Allgemein

Bis vor Kurzem konnte man Beispiele nur mit einem Code-Snippet und einem Link auf "Ausprobieren" einbinden. Für einen Screenshot musste ich extra eine Grafik erstellen und diese hochladen.

Mittlerweile können wir die Beispiele direkt mit der {{Vorlage:LiveBeispiel}} anzeigen:^[2]

• SVG/Tutorials/Pfade Schließen_von_Formen

Überleg' Dir mal, welche Beispiele man so anzeigen kann, damit der Leser/Anfänger gleich sieht, was erreicht werden soll.

Herzliche Grüße

Matthias Scharwies

--

---

1. Im Pfade Tutorial habe ich die Hex-Werte der SELF-Farben wieder durch Farbnamen red, blue, gold ersetzt, um Anfängern eine Schwierigkeit zu nehmen. Als XML-Attribute sind sie auch „direkter“ am Element, als über eine Klasse oder id. ↩︎

2. Dann muss man evtl. aber auch das Beispiel ändern und die vom Beispiel-Layout prominent formatierte h1 entfernen. @Rolf B Im Ubongo-Beispiel war der viewport-Emulator drin, hätt ich nicht gedacht, dass der doch mal verwendet wurde! 😉 ↩︎