nicht angemeldet
SVG: Tutorial? Murks!
Matthias Scharwies
Rolf B
Camping_RIDERHi(gh)!
Bis jetzt war es bei relativ steiler Lernkurve noch nachvollziehbar... aber im Kapitel "Vorlagen definieren" bin ich ausgestiegen. Da wird also innerhalb des <defs>-Tags ein Farbverlauf definiert, mit harten Farbgrenzen (ich kenne das von den color_maps in POV-Ray, da funktioniert es im Prinzip genauso), aber...
...neben der reinen Methodik der Definition und anschließenden Verwendung von Vorlagen werden etliche neue Features eingeführt - die aber im Text nirgendwo erklärt werden! Was etwa die vier X- und Y-Koordinaten im linearGradien bedeuten sollen - niemand verrät es einem. Ebensowenig die Bedeutung der neu eingeführten A-Komponente im Seerosen-Pfadobjekt...
...und der endgültige didaktische Totalausfall sind dann die kewlerweise mit .... "abgekürzten" Definitionen! Sorry, aber so geht das nicht! Und, nein, "trial & error" ist keine ernstzunehmende Lernstrategie!
Tut mir leid, aber ich bin wieder mal in meinem Vorurteil bestätigt worden, dass Online-Tutorials im Regelfall didaktisch eine Katastrophe sind!
Da werde ich mir wohl doch noch ein drittes, halbwegs aktuelles (und entsprechend teures) SVG-Lehrbuch in der "Elektrobucht" schießen müssen... wenn ich eine Chance haben will, irgendwann SVG zusammen mit CSS und (heutigem!) Javascript anwenden zu können!
Bis bald im Khyberspace!
Yadgar
-
Servus!
Hi(gh)!
Bis jetzt war es bei relativ steiler Lernkurve noch nachvollziehbar... aber im Kapitel "Vorlagen definieren" bin ich ausgestiegen. Da wird also innerhalb des <defs>-Tags ein Farbverlauf definiert, mit harten Farbgrenzen (ich kenne das von den color_maps in POV-Ray, da funktioniert es im Prinzip genauso), aber...
Na, also! Oben steht, dass CSS-Grundkenntnisse wünschenswert wären. Auch dort kennt man Gradienten.
...neben der reinen Methodik der Definition und anschließenden Verwendung von Vorlagen werden etliche neue Features eingeführt - die aber im Text nirgendwo erklärt werden! Was etwa die vier X- und Y-Koordinaten im linearGradien bedeuten sollen - niemand verrät es einem. Ebensowenig die Bedeutung der neu eingeführten A-Komponente im Seerosen-Pfadobjekt...
Der blau-weiß gestreifte Hintergrund wird nicht durch mehrere eigene Elemente, sondern mit einem Farbverlauf dargestellt.
Dafür wird im Definitionsabschnitt ein linearGradient-Element definiert. Dieses enthält mehrere stop-Elemente. Durch einen jeweils gleichen offset-Wert für zwei stops erzielen Sie harte Übergänge. Durch die vier Werte x1, x2, y1, y2 können Sie die Richtung des Farbverlaufsvektors steuern. Die Seerosen werden mit einem path-Element mit elliptischen Bögen festgelegt.
Ist Dir schon einmal die Idee gekommen, dass man aus Gründen der didaktischen Reduktion manchmal etwas zeigt und es noch nicht ausführlich erklärt, weil es noch nicht so wichtig ist / bzw. zu komplex ist?
An Grundformen kennst Du jetzt rect, line, circle und eben path. Wenn jetzt ellipse kommt, müsstest du selbst merken, dass die Syntax ähnlich zum bekannten ist.
Ähnlich ist es beim a-Befehl für elliptische Bögen, der ja verlinkt ist. Die nächsten Beispiele arbeiten ja wieder mit Sternen, deren Pfade einfacher sind.
Würde es helfen, wenn man erst die Stern-Flaggen behandelte und dieses Beispiel dann als Ausblick nähme?
Dann könnte man auf folgende Folge-Tutorials verweisen:
...und der endgültige didaktische Totalausfall sind dann die kewlerweise mit .... "abgekürzten" Definitionen! Sorry, aber so geht das nicht! Und, nein, "trial & error" ist keine ernstzunehmende Lernstrategie!
Jetzt kann ich Dir nicht folgen - was sind abgekürzte Definitionen?
Tut mir leid, aber ich bin wieder mal in meinem Vorurteil bestätigt worden, dass Online-Tutorials im Regelfall didaktisch eine Katastrophe sind!
Danke für Dein sachliches Urteil!
Über Resilienz und Frustrationstoleranz muss ich jetzt nicht anfangen, oder?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“ -
Lieber Yadgar,
ich freue mich, dass Du unser Wiki aktiv zum Lernen ausprobierst. Damit hast Du eine Perspektive, die SELFHTML helfen kann, die Artikel noch besser für unsere Zielgruppe anzupassen.
...und der endgültige didaktische Totalausfall sind dann die kewlerweise mit .... "abgekürzten" Definitionen! Sorry, aber so geht das nicht! Und, nein, "trial & error" ist keine ernstzunehmende Lernstrategie!
Tut mir leid, aber ich bin wieder mal in meinem Vorurteil bestätigt worden, dass Online-Tutorials im Regelfall didaktisch eine Katastrophe sind!
Wenn Du jetzt Deine bestimmt berechtigte Kritik so formulierst, dass man nachvollziehen kann, wie und wo etwas nachgebessert werden muss, damit Dir das Lernen leichter gefallen wäre, dann hätte Deine Kritik noch mehr Wert, weil sie konstruktiv wäre. Aber gut, ich nehme, was ich kriegen kann. Lass mal sehen, ob ich Deine Argumentation richtig verstanden habe:
- steile Lernkurve
- zu wenig Erklärung für in Beispielen neu eingeführte Features
- Abkürzungen in Definitionen stören das Verständnis bei "blutigen Laien"
Habe ich das so weit richtig herausgelesen? Wenn nein, dann bin ich schrecklich neugierig, was ich überlesen habe.
Verbesserungen:
- Neue Themen bringen je nach Vorwissen der Lernenden steilere oder weniger steile Lernkurven mit sich. Das ist eine individuelle Sache, die sich nicht für alle Lernenden garantiert bessern lässt. Um das ein bisschen abzufedern haben wir für so etwas Angaben zu "benötigtem Vorwissen", die transparent machen, dass wenn man dieses nicht hat, dass dann die Lernkurve sehr oder gar zu steil sein könnte. Dein persönliches Vorwissen kann ich nicht sinnvoll einschätzen, weshalb ich Dir da jetzt nicht wirklich weiterhelfen kann.
- Vielleicht helfen ja sinnvolle Verlinkungen innerhalb der Lerntexte oder der Erläuterungen schon weiter? Das macht das Recherchieren bestimmt effektiver. Hätte eine intensivere Verlinkung Dir persönlich schon geholfen?
- Wenn ich mehr Zeit hätte, würde ich in den SVG-Artikel hineinschauen, auf den Du Dich da konkret beziehst, um nachvollziehen zu können, wo für Dich abgekürzte Inhalte das Verstehen erschwert haben sollen. Wenn wir etwas abkürzen, dann eigentlich dort, wo es zuvor im Tutorial ausführlicher schon aufgeführt worden war, sodass eine Abkürzung als Verweis auf bereits Ausgeführtes genügen müsste. Natürlich kann man jetzt darüber nachdenken, ob man diese abgekürzten Inhalte technisch so realisiert, dass ein Lernender sie bei Bedarf vollständig anzeigen lassen kann (z.B. durch Aufklappen o.ä.) - jedoch ist das in meinen Augen eher eine nette Spielerei, als ein für Lernende wirklich wesentliches Feature, wenn im Text zuvor diese verkürzten Teile ausführlich besprochen worden waren.
Im Übrigen bin ich mit Kritiken an jemandes Didaktik extrem vorsichtig, weil ich zu oft erlebt habe, dass die Kritiker selbst von Didaktik noch weniger Ahnung hatten, als die Kritisierten. Ein "didaktischer Totalausfall" ist einfach nur Pöbelei, die man nicht ernst nehmen kann, weil sie nur eine Befindlichkeit transportiert, nicht jedoch einen handwerklichen Makel oder Mangel konkret benennt. Wolltest Du nur herumpöbeln, weil Dir das Lernen schwer fällt, oder wolltest Du uns transparent machen, wo wir für Deine Lernerfahrung wie Dinge hätten besser gestalten können?
Liebe Grüße
Felix Riesterer
-
Hi(gh)!
Lieber Yadgar,
Verbesserungen:
- Neue Themen bringen je nach Vorwissen der Lernenden steilere oder weniger steile Lernkurven mit sich. Das ist eine individuelle Sache, die sich nicht für alle Lernenden garantiert bessern lässt. Um das ein bisschen abzufedern haben wir für so etwas Angaben zu "benötigtem Vorwissen", die transparent machen, dass wenn man dieses nicht hat, dass dann die Lernkurve sehr oder gar zu steil sein könnte. Dein persönliches Vorwissen kann ich nicht sinnvoll einschätzen, weshalb ich Dir da jetzt nicht wirklich weiterhelfen kann.
- Vielleicht helfen ja sinnvolle Verlinkungen innerhalb der Lerntexte oder der Erläuterungen schon weiter? Das macht das Recherchieren bestimmt effektiver. Hätte eine intensivere Verlinkung Dir persönlich schon geholfen?
- Wenn ich mehr Zeit hätte, würde ich in den SVG-Artikel hineinschauen, auf den Du Dich da konkret beziehst, um nachvollziehen zu können, wo für Dich abgekürzte Inhalte das Verstehen erschwert haben sollen. Wenn wir etwas abkürzen, dann eigentlich dort, wo es zuvor im Tutorial ausführlicher schon aufgeführt worden war, sodass eine Abkürzung als Verweis auf bereits Ausgeführtes genügen müsste. Natürlich kann man jetzt darüber nachdenken, ob man diese abgekürzten Inhalte technisch so realisiert, dass ein Lernender sie bei Bedarf vollständig anzeigen lassen kann (z.B. durch Aufklappen o.ä.) - jedoch ist das in meinen Augen eher eine nette Spielerei, als ein für Lernende wirklich wesentliches Feature, wenn im Text zuvor diese verkürzten Teile ausführlich besprochen worden waren.
Konkret in diesem Beispiel:
- Es wird nicht erklärt, was die vier Koordinaten im einleitenden Tag von linearGradien bedeuten ("SVG - Das Praxisbuch" von 2001 erklärt es!)
- Es wird nicht erklärt, was "A" in einem Pfadstring bedeutet.
- Sowohl der Farbverlauf als auch der Pfadstring für die "Seerosen" sind unvollständig.
Gerade beim Lernen von Programmiersprachen, so jedenfalls meine Erfahrung, ist es mit bloßem Lesen von Lehrbuchtext nicht getan, man muss die Programmbeispiele auch aktiv am Rechner nachvollziehen können. Das geht aber mit unvollständigem Code schlecht oder sogar überhaupt nicht! Von daher finde ich dieses Beispiel mit der Friesenflagge didaktisch misslungen. Und wenn ich ein Online-Tutorial nur dann erfolgreich durcharbeiten kann, wenn mir zusätzlich noch ein gedrucktes Lehrbuch zur Verfügung steht, hat das Tutorial seinen Sinn verfehlt bzw. ist dringend ergänzungsbedürftig.
Bis bald im Khyberspace!
Yadgar
-
Hallo Yadgar,
die verwendeten SVG-Elemente path und linearGradient sind verlinkt. Du hättest diesen Links folgen können, wenn Du mehr erfahren möchtest.
Es ging an dieser Stelle um <defs> und <use>, der Rest war Deko. Ich gebe zu, man könnte klarer darstellen, was Thema und was Deko ist. Aber Matthias will über's Wochenende da sowieso nochmal ran. Die Idee des linearGradient für die blauen Streifen versuche ich ihm übrigens auszureden, die NL-Wikipedia hat eine Friesland-Flagge, in der das viel schicker und nachvollziehbarer gemacht wird und wo die Umsetzung besser zum Thema "Vorlagen" passt.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Die Idee des linearGradient für die blauen Streifen versuche ich ihm übrigens auszureden, die NL-Wikipedia hat eine Friesland-Flagge, in der das viel schicker und nachvollziehbarer gemacht wird und wo die Umsetzung besser zum Thema "Vorlagen" passt.
NL-Wikipedia???
Wenn ich euch Ripuariern da nachgebe, was kommt als nächstes?
ein Redesign des Wiki in Oranje?
Herzliche Grüße
Matthias Scharwies
PS: Keine Sorge - Überarbeitung ist in Arbeit!
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
NL-Wikipedia???
Bin ich böse, wenn ich recherchiere? Bei den Oranjes gips immerhin einen Artikel zur friesischen Seerosenflagge. Das SVG ist neutral bei Commons beheimatet.
Ripuarier
Ich bin doch nur ein verirrter Immi, meine Mama ist bergisch und mein Papa ist pommersch...
Rolf
--
sumpsi - posui - obstruxi
-
-
-
Aloha ;)
Und wenn ich ein Online-Tutorial nur dann erfolgreich durcharbeiten kann, wenn mir zusätzlich noch ein gedrucktes Lehrbuch zur Verfügung steht, hat das Tutorial seinen Sinn verfehlt bzw. ist dringend ergänzungsbedürftig.
Nun, immerhin kann man ein Online-Tutorial ergänzen. Ein Buch nicht. Und unser Online-Tutorial bekommst du sogar, ohne zuerst mit Vorschussvertrauen Geld in die Hand nehmen zu müssen.
Insofern: Danke für den sachlichen Teil der Kritik, er wird eingearbeitet werden.
Und was den unsachlichen Teil angeht: wenigstens haben wir ja hier eine niederschwellige Plattform, bei der man sich den Frust von der Seele schreiben kann. Ein Buch, das dich frustriert, könntest du höchstens in die Ecke werfen, hier hört (liest) dir sogar jemand zu, wenn du deinen Frust los wirst und Dinge können dadurch besser werden.
Und jetzt das beste: je mehr du von der Frust-Ebene auf die sachliche Ebene verlagerst, umso geneigter ist man auch, deine Kritik wirklich sachlich zu nehmen und die angesprochenen Dinge anzupacken. Man betreibt sozusagen Frust-Prophylaxe, wenn man den eigenen Frust bei solchen Beiträgen ein wenig zügelt.
Grüße,
RIDER
-
Servus!
Das Flaggen-Tutorial als erstes Kapitel im SVG-Einstieg ist jetzt überarbeitet:
Ich habe als Bsp Nr.5 Kuba eingefügt. Dort wird an einem Stern erklärt, wie man Sterne zeichnet und anhand des Dreiecks der Unterschied absoluter und relativer Pfad-Befehle wiederholt.
Dann kommt Panama, mit einem use für einen Stern, bevor der Union Jack und das Kreuz des Südens das ausbauen.
Ich konnte mir nicht verkneifen, zum Schluss noch zwei schwierigere Flaggen zu zeigen. Es gibt aber einen Warnhinweis, der auf SVG/Tutorials/Pfade verlinkt, aber das nächste Kapitel empfiehlt:
SVG/Tutorials/Einstieg/SVG mit CSS stylen
Ich habe da schon mal Beispiele angepasst und such noch was, um Klassen zu demonstieren, wsl so was wie die Pril-Blumen.
Habt ihr evtl eine Idee? (Grundformen, CSS, Klassen, aber (noch) keine Animation).
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“