Wojciech Sala wsala@pro.onet.pl Zespół Szkół Techniczno-Usługowych Trzebinia Zastosowanie języka SVG w szkole średniej technicznej Wstęp Artykuł dotyczy wykorzystania języka dwuwymiarowej grafiki wektorowej SVG w nauczaniu w szkole średniej technicznej. Projekt był realizowanych w latach 2005-2009 i jest kontynuacją wcześniejszych prac autora, dotyczących szkoły wspomaganej na odległość [Sala, 2005]. Ważniejsze cechy standardu SVG SVG (ang. Scalable Vector Graphics) to język do opisu dwuwymiarowej grafiki wektorowej w XML. Język uwzględnia trzy typy obiektów graficznych: figury w grafice wektorowej, rysunki i teksty. Figury to zamknięte figury geometryczne oraz ścieżki zawierające odcinki linii prostych i krzywych. Obiekty graficzne mogą być grupowane, objęte stylem, przekształcane i komponowane z uprzednio utworzonych obiektów. Zestaw instrukcji uwzględnia transformacje zagnieżdżone, odcinki torów, maski, filtry i szablony. Rysunki SVG mogą być interaktywne i dynamiczne. Animacje można tworzyć przez wbudowane elementy animacji SVG oraz poprzez skrypt. Standard jest dostępny na stronach W3C [Scalable Vector Graphics, 2009]. SVG jest oficjalnym standardem W3C. Konsorcjum W3 jest jedną z najważniejszych organizacji zajmujących się standardami w Internecie. Zapoznanie młodzieży z pracami Konsorcjum W3 u źródeł poprzez standard SVG to jeden z ważnych elementów nowoczesnego nauczania w szkole wspomaganej na odległość. Grafiki SVG powstają z kodu ASCII i można je tworzyć w dowolnym edytorze tekstowym. Pisanie kodu w prostym edytorze tekstowym wspomaga praktyczne uczenie się geometrii analitycznej. Możliwość obserwacji zmian grafiki natychmiast po zmianie linii kodu w pliku svg daje sprzężenie zwrotne wzmacniające efekt nauczania. Grafiki SVG jako grafiki wektorowe są skalowalne bez utraty jakości. Ta cecha została wykorzystana w planie warsztatu elektronicznego wykonanym w jednym dokumencie SVG. Z dokumentu tego można było wyświetlać (i drukować) wybrane fragmenty z dowolną szczegółowością. Język pozwala na użycie języków stylów (np. CSS) i języków skryptowych. Prace nad specyfikacją nie podlegają żadnym prawom patentowym. Ta cecha języka jest dość istotna w warunkach szkolnych, gdyż pozwala na obniżanie kosztów nauczania przy zachowaniu wysokiego jego poziomu, ponieważ programy graficzne są na ogół kosztowne. 11
Rysunek w szkole średniej technicznej Rysunek jest stosowany w nauczaniu w szerokim zakresie jako ilustracja materiałów dydaktycznych niemal we wszystkich przedmiotach. Uczy się rysunku technicznego i zawodowego, tworzenia grafiki komputerowej, posługiwania się rysunkiem warsztatowym. Wykorzystuje się maski obwodów drukowanych w procesie technologicznym na zajęciach praktycznych. Autor stosował SVG w siedmiu przedmiotach, wykorzystując różne aspekty języka. W podstawach techniki informacyjnej i metodologii programowania chodziło o pokazanie możliwości standardu SVG jako środowiska do tworzenia grafiki. Uczniowie poznawali język i tworzyli własne rysunki. Dla potrzeb przedmiotów rysunek techniczny i rysunek zawodowy wykonano serię rysunków indywidualnych oraz ujętych w albumy interaktywne i animowane. Aby można wykorzystać opracowane rysunki w klasach bez komputerów, używano je w postaci wydrukowanej. Przykładowy album interaktywny przedstawia rys. 1. Kliknięcie myszą na wybrany czerwony prostokąt (rząd górny) powoduje wyświetlenie rysunku danej tulei; kliknięcie na prostokąt zielony wyłączenie wyświetlania. Rys.1. Album interaktywny Tuleje Dla przedmiotów urządzenia techniki komputerowej i podstawy elektroniki opracowano schematy statyczne urządzeń elektronicznych oraz schematy animowane. Do zajęć praktycznych w warsztacie elektronicznym wykonano schematy ideowe, rysunki montażowe. W ramach pracy z uczniem zdolnym uczniowie zostali włączeni do tworzenia pomocy dydaktycznych w SVG. W procesie technologicznym obwodów drukowanych wykorzystywano rysunki masek, które po wydrukowaniu na folii były przenoszone na warstwę miedzi laminatu 12
metodą termotransferową. Tak przygotowany laminat poddano wytrawianiu osłonięte maską nie wytrawione obszary miedzi tworzyły układ pól lutowniczych ścieżek przewodzących. Rysunki masek były wykonywane estetycznie i ergonomicznie dzięki wykorzystaniu możliwości SVG, w tym również krzywych Béziera. Przykładowe maski przedstawione są na rys. 2. Podczas próbnego egzaminu zawodowego użyto rysunków instalacyjnych w SVG. Rys. 2. Maski do obwodów drukowanych Przy współpracy z autorem Marta Sala, studentka malarstwa ASP w Krakowie wykorzystała SVG do studium ruchu mechanizmu podręcznika artystycznego Praca (rys. 3). Pomoce do nauki SVG dostępne w sieci W nauce SVG można skorzystać z publikacji W3C [Scalable Vector Graphics, 2009]. W3C prowadzi na swoich stronach szkołę W3C Schools, w ramach której jest rozdział poświęcony SVG [W3CSchools, 2009]. Dostępny jest również tutorial w formacie pdf. Autor korzystał również z opracowania Ralfa Pohlmanna. Tutorial zawiera systematyczny wykład języka SVG ilustrowany kodami źródłowymi i wynikowymi obiektami graficznymi [Pohlmann, 2007]. 13
Rys. 3. Studium ruchu mechanizmu rysunek animowany; podręcznik artystyczny Praca Wybrane aspekty techniczne Jeśli przeglądarka internetowa nie obsługuje bezpośrednio formatu svg, można skorzystać z nakładki dostępnej na stronach Adobe [Adobe SVG Viewer, 2009]. Jest możliwość bezpośredniego wydruku z pliku w formacie svg. Można również posłużyć się zrzutem ekranu do edytora grafiki i zapisu grafiki w formacie jpg. Standard SVG nie obsługuje bezpośrednio znaków diakrytycznych. Umieszczenie w kodzie takiego znaku wywołuje błąd, w wyniku którego obraz nie jest wyświetlany. Radą na to jest stosowanie kodów w następujący sposób: &#kod; gdzie kody poszczególnych liter to: Ą 260, Ę 280, Ł 321, Ń -323, Ś 346, Ó 211, Ź 377, Ż 379, ą 261, ę 281, ł 322, ń 342, ś 347, ó 243, ź 378, ż 380. Wnioski Praca z SVG w szkole średniej technicznej pokazała ciekawe perspektywy użycia tego języka do opracowywania materiałów dydaktycznych w wielu przedmiotach. Szczególnie owocne okazało się użycie SVG w rysunku technicznym i zawodowym oraz w procesie produkcyjnym (maski). Praca z SVG wymaga wiele czasu, szczególnie na początku. W miarę stosowania powstają biblioteki własnych wzorców, zawierające linie kodu kolejno opracowywanych obiektów graficznych. 14
Warto rozwijać dotychczasowe zastosowania SVG, jak również rozszerzać o kolejne przedmioty. Literatura Adobe SVG Viewer download area. http://www.adobe.com/svg/viewer/install/mainframed.html [dostęp 08.06.2009] Pohlmann R., aptico GmbH: Tutorial SVG. http://svg.tutorial.aptico.de/ Ostatnie zmiany 20.07.2007 [dostęp 08.06.2009] Sala W.: Szkoła wspomagana na odległość. [W:] Komputer w edukacji. Pod red. naukową J. Morbitzera. Wydaw. Naukowe AP, Kraków 2005, s. 242-245 Scalable Vector Graphics (SVG) 1.1 Specification. W3C Recommendation. 14 January 2003, edited in place 30 April 2009. http://www.w3.org/tr/svg [dostęp 08.06.2009] SVG Tutorial. http://www.w3.org/2002/talks/www2002-svgtut-ih/hwtut.pdf [dostęp 08.06.2009] W3 Schools. http://www.w3schools.com/svg/ [dostęp 08.06.2009] 15