Raum 1.1

SVG

Sessionleitung: Stefan Hanauska

Hier findet man alle möglichen Videos zum Thema

Quellen für Hintergrundbilder und Bilder:

https://www.hacker.org/

SVG ist ähnlich HTML mit Objekten aufgebaut

Kann direkt in den HTML-Quelltext

Moodle-Filter funktionieren auch!

z.B. Filter "Automatische Verlinkung zu Aktivitäten"

Wenn im SVG der Begriff "Aufsatz" vorkommt und eine Aktivität "Aufsatz" heißt, dann wird automatisch ein Link zur Aktivität eingebaut durch den Filter

Inkscape wird benötigt.

Incarnate (?) ist hilfreich für die Erstellung von Karten mit Texturen.

einfache Karte zum Ausprobieren:

Der Editor muss umgestellt werden von ATTO auf "unformatierter Text", da der Atto sonst unseren Code "kaputt" macht.

Grobes Vorgehen in Inkscape:

1. Bild importieren

Umbenennen in "Hintergrund"

Rechtsklick --> Ebene spetten

2. weitere zwei Ebenen Orte, Pfade anlegen

3. Ebene Ort auswählen und dann einen beispielhaften Ort, z.B. einen Kreis oder Stern anlegen

4. Ort anpassen, so wie er aussehen soll.

5. Kontur/Rahmen anpassen

6. Hintergrund anpassen

7. Orte müssen Namen bekommen "Objekteingenschaften" --> im Feld KEnnung eintragen

UNBEDINGT Enter-Taste zum bestätigen drücken

8. Im Moodle-Kurs den Link zu einer Aktivität kopieren (Linkadresse kopieren) und dann in Inkcape im obersten Feld Href:

einfügen (und enter drücken)

9. Verknüpfung ist ein "eigenes" Objekt in Inkskape

10.

11. Pfade erstellen (links in Inkscape Bezierkurve auswählen)

12. Ebene Pfade auswählen

13. zwischen den Orten die Wege/Pfade einzeichnen und bei Objekteigenschaften --> Kennung p1_2

Tipp: Immer die Kleinere Zahl nach vorne, dann weis

14. Pfad anwählen Erweiterung -> Formatvorlage --> Stile im css zusammenfügen

15. Rechtsklick --> Duplizieren --> Umbenennen!!!!! p2_3

Orte unsichbar machen

16. Ort anklicken

Objekt --> Selektoren und CSS ...

Dann oben bei Pfade auf das + und dann folgendes ergänzen

visibility hidden oder display none???

Pfade unsichtbar machen

17. analog wie bei Orten

18. SVG Speichern auf dem PC

19.

<image

xlink:href="hier muss man was ändern"

20. Das Hintergrundbild nach Moodle hochladen

21. In Moodle ein Textfeld hinzufügen (unformatierte Text!)

dort den SVG-Inhalt hineinkopieren

22. Jetzt Startort sichtbar machen.

<style>

#p1{

visibility:visible;

}

</style>

23. Dadurch wurde der Startpunkt sichtbar.

24. Wenn jemand die erste aufgaben erledigt aht, soll die Farbe geändert werden.

<style>

#p1{

fill:freen;

}

#p1,#p2{

visibility:visible;

}

</style>

25. Dieses Textfeld soll aber nur unter Voraussetzung "Aufgabe 1" ist abgeschlossen angezeigt werden