Poradnik SVG na JetPunk

+5

Na dobry początek

Zawartość tego akapitu dotyczy:

- tego, jak pobrać Inkscape (program do grafiki wektorowej)

- konfiguracji tego programu pod JetPunk

- robienia pierwszych grafik przeznaczonych na JetPunk

Czym jest grafika wektorowa?

Grafikę możemy podzielić na dwa rodzaje - rastrową i wektorową. Grafika rastrowa składa się z maleńkich kwadracików zwanymi pikselami i właśnie w taki sposób jest kodowana zawartość obrazu. W grafice wektorowej, obraz wizualizowany jest za pomocą połączonych ze sobą kształtów. Grafikę wektorową możemy zapisać również w postaci pliku tekstowego, co pozwala ją otworzyć chociażby w Notatniku czy Notepadzie.

Zaletą grafiki wektorowej jest fakt, że podczas przybliżania obrazu nie tracimy jakości (w przeciwieństwie do grafiki rastrowej). Specjalną odmianą grafiki wektorowej jest SVG (z języka angielskiego: Scalable Vector Graphics). Jest ona używana na JetPunku do map czy schematów.

Edycja grafiki wektorowej

Do edycji grafiki wektorowej zostało stworzonych wiele programów, jednak w tym poradniku skupimy się na jednym z najpopularniejszych - Inkscape. W dalszej części bloga dokładnie omówimy konfigurację tego programu.

Konfiguracja Inkscape'a

Po kliknięciu w link, zostaniesz przekierowany na stronę pobierania Inkscape.

Tutaj, w zależności od platformy jakiej używasz, musisz wybrać jedną z opcji. Po pobraniu pliku instalacyjnego, stosuj się do poleceń instalatora. 

Co mam zrobić po pobraniu? Dużo tutaj tych opcji!

Po otwarciu Inkscape po raz pierwszy, najprawdopodobniej zobaczysz biały program w języku twojego systemu operacyjnego (Jeśli jesteś Polakiem, to w 99% przypadków masz ustawiony polski). Pokieruję Cię teraz do zmiany wyglądu i języka (opcjonalnie). Zarówno youtubeplayer jak i Saturn używamy Inkscape w języku angielskim, w razie problemu łatwiej znaleźć pomoc w internecie, lecz na potrzeby poradnika zmieniłem wszelkie ustawienia na domyślne.  

Zapewne masz po otwarciu białą kartkę papieru zamiast ciemnoszarej. Za chwilkę to zmienimy  Po kliknięciu "Edytuj" (Edit) pojawi ci się menu złożone z wielu opcji. Kliknij "Ustawienia" (Preferences), aby zmienić wszelkie opcje.

Możesz zmienić język na angielski lub inny język, lecz nie jest to konieczne. Pamiętaj, że aby zmiana języku zadziałała, musisz wyjść z programu i wejść jeszcze raz. Aby orientować się w dalszej części, kliknij Interfejs --> Motyw i zaznacz opcję "Użyj ciemnego motywu". Nie jest to niezbędne, ale unika to odmienności pomiędzy tym co widzisz, a tym co jest pokazane na zdjęciach. 

No dobra, zrobiłem to wszystko (lub nie). Co zrobić dalej?

Jeśli już zajęliśmy się samym wyglądem, czas przejść do właściwości. Musisz kliknąć Plik ---> Właściwości dokumentu i ustawić wszelkie ustawienia dokładnie tak jak na obrazku poniżej. To bardzo ważne i nie możesz pominąć tego kroku! 830 px na 600 px to maksymalny rozmiar SVG, jaki JetPunk jest w stanie pomieścić!

Jeśli już wszystko ustawiłeś, musisz to teraz zapisać. Kliknij Plik ---> Zapisz Szablon

Dodaj nazwę swojemu szablonowi a następnie go zapisz i ustaw jako domyślny (nie będziesz musiał ustawiać tego samego za każdym razem)

Tworzenie twojej pierwszej mapy

Zaczniemy od pokazania podstawowych opcji tworzenia ścieżek

1 - Wskaźnik - służy do zaznaczania i odznaczania obiektów, najczęściej używana opcja (czasami nieświadomie)

2 - Edycja węzłów - służy do zmiany punktów ścieżek, więcej o tym znajdziesz poniżej

3 - Prostokąt - tworzy prostokąt o wybranych kolorach wypełnienia i konturu, można zmienić to na ścieżkę: Zaznacz prostokąt ---> Ścieżka ---> Obiekt w ścieżkę 

4 - Okrąg - tworzy okręgi (konkretnie elipsy) o wybranych kolorach wypełnienia i konturu, można zmienić to na ścieżkę: Zaznacz okrąg ---> Ścieżka ---> Obiekt w ścieżkę. Podczas ustawiania koła, trzymając klawisz ctrl na klawiaturze, narysujesz koło (przydatna opcja!)

5 - Gwiazda - podobnie jak prostokąt

6 - Obiekt 3D - tworzy obiekty 3D, reszta podobnie jak prostokąt

7 - Spirala - tworzy spiralę, reszta podobnie jak prostokąt

8 - Pióro - najbardziej przydatna opcja podczas tworzenia ścieżek a następnie map. Kliknij punkt aby zacząć rysować, łącząc punkty rysujesz kontur twojej ścieżki

Czas na pierwszą mapę... Wybierz pióro aby rozpocząć rysowanie. Kliknij dowolny punkt aby rozpocząć 

Powinieneś zobaczyć takie coś, jak na rysunku powyżej (obok końca odcinka powinien być widoczny znaczek, jednak podczas robienia screenshota został ucięty)

Teraz widzisz taki obiekt, jaki narysowałeś. Możemy teraz zmienić kolor wypełnienia oraz kolor konturu. Kliknij Ctrl+Shift+F, aby otworzyć menu zmiany. Teraz możesz ustawić kolor jakikolwiek tylko chcesz. Ponadto, możesz zmienić także przejrzystość twojego obiektu, a nawet grubość i styl konturu. Pełna dowolność, baw się jak tylko chcesz!

Dodawanie i sprawdzanie ścieżek mapy

Nie bój się, nie musisz znać programowania aby przejść dalej! Kliknij Ctrl+Shift+X aby kontynuować

<path d="___" id="my-path" class="class1 class2 class3"/>

Objaśnijmy sobie teraz znaczenie poszczególnych elementów.

< - otwarcie kodu

path - pokazanie naszemu programowi, że chodzi o ustawianie ścieżki (z ang: path)

d="___" - jest to atrybut, czyli poniekąd właściwości naszej ścieżki. Może tu znajdować się wszystko, od koloru wypełnienia, przez jego przejrzystość, aż do kształtu. Ten element nie jest ci niezbędny do zrozumienia jak działają SVG

id="my-path" - jedyne i niepowtarzalne ID dla naszej ścieżki. Każde ID musi być różne, więc zadbaj o kreatywność! W cudzysłowie wpisz wybrane przez siebie ID bez polskich znaków

class="class1 class2 class3 - podobnie jak z ID, możesz nadać swojej ścieżce klasy. W przeciwieństwie do ID, możesz nadawać tyle klas ile chcesz, każde w cudzysłowie ze spacją jako odstępem od kolejnych klas

/> - zamknięcie kodu

Tutaj możesz zmienić ID w łatwiejszy sposób. Po dodaniu mapy do quizu na JetPunk, w odpowiedziach, w pierwszej kolumnie z lewej strony wpisz właśnie to ID. Voilà! Gotowe!

SVG na JetPunku

Zawartość tego akapitu dotyczy:

- dodawania SVG do istniejącego quizu
- wpisywania ID ścieżek do quizu (pierwsza kolumna z lewej strony)

- ID ścieżek i kolory używane na JetPunku

- quizów typu "Click Map"

Dodawanie SVG do quizu

Dodawania mapy (bądź schematu) w formacie SVG jest bardzo proste. Wystarczy kliknąć "Step 4" w swoim quizie, a następnie kliknięcie przycisku "SVG Options"

Otworzy to interfejs. Aby dodać oficjalną mapę JetPunka, po prostu kliknij przycisk "Select JetPunk SVG". Jeżeli chcesz opublikować swoją własną pracę, kliknij "Upload SVG". Po dodaniu mapy możesz ją w każdej chwili usunąć ("Remove SVG") lub ją pobrać na swoje urządzenie ("Download SVG").

Pamiętaj! Twoja mapa SVG nie może być większa niż 600 KB! W przeciwnym razie jej dodanie będzie niemożliwe, a ty uzyskasz komunikat o przekroczeniu maksymalnego rozmiaru mapy!

Wpisywanie ścieżek/klas do quizu

Krok 1 - wejdź w Inkscape

Musisz wejść do programu graficznego (Inkscape) i otworzyć swój projekt (o ile nie jest on ciągle otwarty)

Widzimy tutaj moje arcydzieło :D

Załóżmy, że już dodałem moją mapę do quizu i teraz chcę przypisać odpowiednie ścieżki do odpowiedzi.

Nazwa pierwszej kolumny z lewej strony nie ma znaczenia, lecz ja zazwyczaj w tego typu quizach nazywam ją "Path" lub "Hint" (domyślna nazwa), bo i tak nie będzie ona widoczna w naszym quizie.

Krok 2 - przypisanie odpowiednich pathów do odpowiedzi. 

W Inkscape kliknij na wybraną ścieżkę (najlepiej zaczynać w kolejności aby się nie pogubić). W związku z tym kliknąłem na ścieżkę czerwoną. Następnie klikam kombinację przycisków Ctrl+Shift+X i otwieram Edytor XML. Widzimy, że nasza ścieżka nazywa się "path13". Kopiujemy jej nazwę i wklejamy w kolumnę najbardziej wysuniętą w lewą stronę w naszym quizie

Czynność powtarzamy dla każdej ścieżki. Dla większych quizów może to trochę zająć, lecz efekt na pewno będzie wspaniały!

ID używane w mapach JetPunka

pl - dwuliterowy kod ISO jest zawsze ID w quizach z państwami, podany kod odnosi się do Polski

pl-c - dwuliterowy kod ISO danego państwa z myślnikiem i literą c zawsze oznacza stolicę danego państwa (w tym przypadku Warszawę)

mc-d - dwuliterowy kod ISO danego państwa z myślnikiem i literą d zawsze oznacza tę pomarańczową kropkę używaną dla mikropaństw/państw-miast takich jak Watykan, Liechtenstein, itp. (w tym przypadku Monako)

fj-w - dwuliterowy kod ISO danego państwa z myślnikiem oraz literą w oznacza wodę dookoła państwa, która się podświetla po odgadnięciu prawidłowej odpowiedzi (państwa, których kontur jest niewidoczny + państwa wyspiarskie) (w tym przypadku Fidżi)

NY - kod stanowy danego stanu - w quizie "Stany USA" kod ten jest oficjalnym skrótowcem każdego stanu (w tym przypadku Nowego Jorku)

Kolory używane w mapach JetPunka

#64BEFF - kolor oceanów na JetPunku

#FFFF80 - kolor państw na JetPunku

#BEEDFF - kolor oznaczania państw wyspiarskich

#BBBBBB - kolor otaczających państw (np. Algieria w państwach Europy)

#888888 - kolor terytoriów spornych

#707070 - kolor granic państw

#FF9900 - kolor miast/mikropaństw/państw-miast (zazwyczaj z 70% przejrzystości)

#66FF66 - .svg-correct (kolor oznaczania prawidłowych odpowiedzi w quizach

#FF6666 - .svg-incorrect (kolor oznaczania nieprawidłowych odpowiedzi w quizach tekstowych)

#000000 - .random-svg-highlight (kolor zaznaczania losowych państw w quizach tekstowych)

#33FF33 - .map-correct (kolor oznaczania prawidłowych odpowiedzi w quizach "Click Map")

#FF3333 - .map-incorrect (kolor oznaczania nieprawidłowych odpowiedzi w quizach "Click Map")
#0000FF - .map-highlight (kolor oznaczania aktualnie zaznaczonych odpowiedzi w quizach "Click Map")

#7B3294 - .svg-incorrect oraz .map-incorrect (kolor oznaczania nieprawidłowych odpowiedzi w quizach tekstowych oraz "Click Map" z włączonym trybem dla daltonistów)

Zmiana koloru zaznaczania odpowiedzi

Aby zmienić kolor zaznaczania poszczególnych odpowiedzi musisz do opisu swojego quizu wkleić poniższy kod: 
Dla quizów tekstowych:

<style>.svg-holder #nazwaścieżki.parametr { fill: #wartość koloru w HEX !important; }</style>
#nazwaścieżki - to już znasz, jest to po prostu ID

.parametr - nic innego jak powyższe wartości (np. .svg-correct)

#wartość koloru w HEX - wartości sześciocyfrowe/literowe (przykłady powyżej)

Dla quizów "Click Map":

style>.map-holder #nazwaścieżki.parametr { fill: #wartość koloru w HEX !important; }</style>
#nazwaścieżki - to już znasz, jest to po prostu ID

.parametr - nic innego jak powyższe wartości (np. .svg-correct)

#wartość koloru w HEX - wartości sześciocyfrowe/literowe (przykłady powyżej)

Zaawansowany Inkscape

Zawartość tego akapitu dotyczy:

- konwertowania prostokątów i innych elementów do ścieżek
- łączenia kilku ścieżek w jedną/rozłączania ścieżek

- nadawania kształtu mapie

- używania JetPunk Dot Placer

Zmiana obiektów w ścieżkę

Aby zmienić obiekt w ścieżkę (w tym przypadku kwadrat), należy zaznaczyć wybrany obiekt, a następnie kliknąć zakładkę Ścieżka ---> Obiekt w ścieżkę. Tak, to takie proste!

Łączenie ścieżek przy użyciu opcji Suma lub Połącz

Musimy zaznaczyć dwie ścieżki (trzymając klawisz Shift) a następnie wejść w Ścieżka ---> Suma, albo Ścieżka ---> Połącz. Jaka jest różnica? Spójrzmy...

Widzimy, że przy użyciu opcji Suma, nasze ścieżki połączyły się w jedną jednorodną ścieżkę

Dzięki Połącz, nasze ścieżki stały się jedną, lecz ich kontury są ciągle takie same.

Rozłączenie ścieżek

Aby rozłączyć ścieżki (rozdzielić jedną na dwie) musimy użyć opcji Podział (Ścieżka ---> Podział). Najpierw rysujemy przy pomocy ołówka/pióra linię, a następnie przytrzymując Shift klikamy narysowaną linię oraz naszą ścieżkę.

Po kliknięciu nasza ścieżka powinna się rozdzielić na dwie według linii cięcia. 

JetPunk Dot Placer

Jeśli znasz chociaż troszkę angielski, to na pewno wiesz co to oznacza. Jest to nic innego niż wbudowany program do nanoszenia kropek (kół) na mapę JetPunka. Możesz wybrać dowolny szablon z kilku dostępnych, a następnie nanieść odpowiednie kropki. Teraz przedstawię Ci jego działanie

Kolumna 1 = Nazwa miejsca (zostanie od niej utworzone ID)

Kolumna 2 = Szerokość geograficzna wyrażona w stopniach (system dziesiętny), np. 51.509

Kolumna 3 = Długość geograficzna wyrażona w stopniach (system dziesiętny), np.  -0.126

Kolumna 4 (opcjonalna) = Promień powstałego koła (np. 4 px)

Zwróć uwagę, że chociaż na lekcjach geografii w szkole uczyliście się inaczej, tutaj dane przedstawiane są w inny sposób. Zamiast oznaczeń N/S oraz W/E mamy wartości dodatnie (dla N oraz E) oraz ujemne dla S oraz W. Kolejną różnicą są wartości w systemie dziesiętnym (po kropce) zamiast minut i sekund kątowych. Takie wartości możesz znaleźć na stronie geodatos.net.
Gdy wprowadzisz dane do systemu, możesz zmienić kolor kropek czy grubość konturu. Następnie kliknij "Draw Dots" i pobierz mapę. Gotowe! Później dane wprowadzasz tak jak dla zwykłych ścieżek, tylko tym razem masz kółka/okręgi!

Podsumowanie i ewentualności

Jeśli macie jakieś pytania, możecie zadawać w komentarzu. Postaram się na nie odpowiedzieć w przeciągu 24h od zadania pytania, wraz z odpowiednim wyjaśnieniem. Jestem autorem wszystkich przedstawionych screenshotów, podobnie jak tekstu. Mam nadzieję, że poradnik Wam się spodobał. Koniecznie spróbuj wykonać jakiś quiz, pobaw się tym programem. Kto wie, może ten poradnik czyta przyszły mistrz SVG na JetPunku?

Ewentualne błędy, literówki, przejęzyczenia zgłaszajcie w komentarzach.

Oryginalna, angielska wersja poradnika dostępna jest pod adresem podanym poniżej.

Przydatne linki

+1
Poziom 41
22 sty, 2022
Quiz wykonany na podstawie opisu z poradnika dostępny tutaj
+3
Poziom 2
28 gru, 2021
Yeah, I should do Portuguese translation only for follow the trend, as no one will read that, and Portuguese section is ruined.
+1
Poziom 3
28 gru, 2021
You can translate your blogs in Portuguese, right?
+1
Poziom 2
29 gru, 2021
Wdym? I can
+4
Poziom 3
28 gru, 2021
Dobry. Nie znam polskiego.
+1
Poziom 33
22 lut, 2022
Dzięki za ten poradnik
+2
Poziom 40
6 mar, 2022
Dzień Dobry, Chcę dowiedzieć się gdziem mam kliknąć i w jakim kroku to zrobić aby dodać strzałkę.