Zastosowanie języka SVG w szkole średniej technicznej

Transkrypt

1 Wojciech Sala 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 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

2 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

3 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

4 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

5 Warto rozwijać dotychczasowe zastosowania SVG, jak również rozszerzać o kolejne przedmioty. Literatura Adobe SVG Viewer download area. [dostęp ] Pohlmann R., aptico GmbH: Tutorial SVG. Ostatnie zmiany [dostęp ] Sala W.: Szkoła wspomagana na odległość. [W:] Komputer w edukacji. Pod red. naukową J. Morbitzera. Wydaw. Naukowe AP, Kraków 2005, s Scalable Vector Graphics (SVG) 1.1 Specification. W3C Recommendation. 14 January 2003, edited in place 30 April [dostęp ] SVG Tutorial. [dostęp ] W3 Schools. [dostęp ] 15