Autorski program zajec pozalekcyjnych w klasach IV VI szkoly podstawowej Tworzenie stron internetowych i grafiki na potrzeby WWW autor Zofia Kwasnik nauczycielka matematyki i informatyki w Szkole Podstawowej nr 114 im. Jedrzeja Cierniaka w Warszawie
1. WSTEP Program jest skierowany do uczniów klas IV VI szczególnie zainteresowanych informatyka, a w szczególnosci tworzeniem stron WWW. Tworzenie stron internetowych jest modne wsród wielu mlodych ludzi. Zagadnienie to wymaga od dziecka umiejetnosci nie tylko informatycznych, ale równiez plastycznych i organizacyjnych. Wazna jest umiejetnosc poslugiwania sie jezykiem ojczystym. Równiez znajomosc jezyka angielskiego znacznie ulatwia rozumienie kodu HTML. 2. CELE OGÓLNE Celem zajec jest wszechstronne rozwijanie zdolnosci informatycznych, plastycznych, ksztaltowanie aktywnosci poznawczej i twórczej ucznia. Szczególowe cele ksztalcenia: Wyksztalcenie u ucznia kompetencji pozwalajacych na: 1. tworzenie stron WWW w jezyku HTML; 2. publikowanie witryn na serwerze WWW; 3. tworzenie wlasnej grafiki: bitmapowej wektorowej ruchomych obrazów; 4. korzystanie z multimedialnych zródel informacji i zasobów sieciowych, w tym sieci Internet; 5. dobieranie narzedzi informatycznych stosownie do realizowanego zadania, Cele wychowania: 1. Poszanowanie cudzej wlasnosci intelektualnej. 2. Poznanie praw obowiazujacych przy korzystaniu z oprogramowania komputerowego. 3. Wyrobienie nawyku estetycznego wykonywania prac. 4. Rozbudzanie checi do dalszej nauki. 3. METODY I FORMY REALIZACJI CELÓW Zalozone cele realizowane beda poprzez zadania dla ucznia. Zadania maja przede wszystkim charakter praktyczny. Celem zadan jest stworzenie dokumentów i zapisanie ich na dysku, a w przypadku dokumentów HTML umieszczenie ich na szkolnym serwerze WWW. Dokumenty te powinny dotyczyc bliskiej uczniowi rzeczywistosci szkolnej i domowej. Uczen powinien tworzyc dokumenty wedlug wlasnych pomyslów. 4. WARUNKI REALIZACJI PROGRAMU Zajecia beda odbywac sie w pracowni komputerowe wyposazonej w 16 komputerowych (15 stacji uczniowskich z systemem Windows 98 i 1 komputer nauczycielski z systemem Windows 2003 Serwer) polaczonych w siec z podlaczeniem do Internetu. Dla stanowisk uczniowskich udostepniona jest drukarka sieciowa. W pracowni znajduje sie równiez skaner umozliwiajacy skanowanie zdjec. Prace uczniów beda publikowane na szkolnym serwerze WWW. Oprogramowanie potrzebne do realizacji zajec: 1. Notatnik 2. Paint 3. Edytor grafiki rastrowej Gimp (program darmowy) 2
4. Edytor grafiki wektorowej Designer 4.05 PL (licencja darmowa dla szkól) 5. Edytor postaci Logomocji 6. Anfy Team (program darmowy) 7. Unfreez (program darmowy) 8. Przegladarka internetowa - Internet Explorer 9. MS Foto Editor 10. IrfanView przegladarka grafiki (program darmowy) Realizacja programu wymaga 70 godzin ksztalcenia 3
5. TRESCI PROGRAMOWE I UMIEJETNOSCI UCZNIA Tworzenie stron WWW wykorzystanie jezyka HTML Tresc Przeznaczenie i budowa strony WWW. Projektowanie wlasnej strony. Znaczniki jezyka HTML. Struktura dokumentu HTML. Wielkosc i kolor czcionki. Akapity. Linie poziome. Kolor tla. Ruchomy tekst w markizach Ozywianie stron grafika. Umiejetnosci Uczen potrafi Rozpoznac rodzaj strony ze wzgledu na przeznaczenie np.: strona osoby prywatnej, klasy, szkoly, firmy, miasta, organizacji, portal internetowy, Wskazuje elementy znajdujace sie na stronie: tekst, grafika (zdjecia, animacje, rysunki), dzwiek, hiperlacza Napisac w Notatniku podstawowa strukture dokumentu HTML i zapisac go z odpowiednim rozszerzeniem na dysku. Ustalic wielkosc i kolor czcionki Ustalic kolor tla strony. Dzielic tekst na akapity Wstawiac linie poziome. Stosowac znacznik <MARQUEE> i jego atrybuty. Stosowac znacznik <IMG>. Wyrównac obrazek na stronie. <ALIGN= Ustalic wielkosc grafiki na stronie Wstawic tekst zastepczy. Uwagi o realizacji Uczniowie przegladaja rózne strony ze zwróceniem uwagi na tresci znajdujace sie na nich oraz sposób przedstawienia informacji. Zadaniem uczniów jest opracowanie strony (z kilkoma podstronami) o sobie i swoich zainteresowaniach. Uczniowie wspólnie tworza projekt strony startowej. Kolejne podstrony projektuja samodzielnie. Nauczyciel omawia znaczniki jezyka HTML i ich atrybuty. Uczniowie odkrywaja znaczenie parametrów w praktycznym dzialaniu. np. <hr> <hr width=70% size=6> Uczniowie tworza strone startowa wedlug opracowanego projektu. Zwrócic uwage, iz nie wszystkie przegladarki w taki sam sposób interpretuja znaczniki jezyka HTML. Nalezy zwrócic uwage na rózne typy grafiki, oraz jej zródla (skanowane ilustracje, wlasne rysunki, darmowa grafika z Internetu) oraz podkreslic, iz grafika w Internecie moze byc chroniona prawami autorskimi. 4
Tworzenie stron WWW wykorzystanie jezyka HTML Tworzenie polaczen miedzy dokumentami HTML Organizowanie informacji w tabelach. Podstawowe formatowanie tabel Wprowadzenie do arkuszy stylów. Sródliniowe arkusze stylów. Style naglówkowe Zewnetrzne arkusze stylów. Stosowac znacznik kotwicy <A... Tworzyc wskazniki do innych stron: <A HREF= http://www..., Tworzyc odsylacze do innych informacji: <A HREF= mailto:sp114... Tworzyc odsylacze do innych dokumentów w obrebie tej samej witryny <A HREF= xxx.html >... Definiowac kotwice wewnetrzne i tworzyc odsylacze wewnetrzne. Definiowac tekst oraz obrazek jako odnosnik Tworzyc obwódke wokól grafiki, gdy sluzy jako hiperlacze. Stosowac znacznik <TABLE> Ustalac atrybuty tabeli: szerokosc tabeli, odstepy miedzy komórkami, grubosc krawedzi, kolor komórek Wyrównywac tekst w komórkach tabeli. Stosowac znacznik <P> z atrybutem TYPE=text/css Definiowac wlasnosci tekstu: kolor, rozmiar czcionki, grubosc kroju, odleglosc miedzy liniami pisma, odleglosc od prawego i lewego brzegu strony, ustawia justowanie. Stosowac znacznik <STYLE TYPE text/css > dla okreslenia stylów naglówkowych. Uczniowie musza miec utworzone co najmniej dwa dokumenty HTML, aby tworzyc odsylacze do innych dokumentów. Aby sprawdzic dzialanie odsylaczy zewnetrznych ustanowione musi byc polaczenie z Internetem. Uczniowie podaja np. wielkosc czcionki - w tym momencie nalezy zwrócic uwage na jednostki miary i ich oznaczenia: px piksele, in cale, cm centymetry, mm milimetry, pc procent. Ze wzgledu na fakt, iz arkusze stylów sa dla uczniów zagadnieniem trudnym i malo potrzebnym nalezy zastosowac je do zmiany rozmiaru i koloru czcionki w laczach oraz do zmiany wygladu przegladarki (pasek przewijania). Uczniom podobaja sie te efekty. 5
Skanowanie zdjec Tworzenie grafiki bitmapowej na potrzeby WWW - Gimp Elementy dodatkowe i ozdobne na stronie wykorzystanie skryptów Java. Skanowanie zdjec i ilustracji. Dokonywanie wstepnej obróbki zdjec Artystyczna obróbka zdjec. Retusz zdjec Wyszukiwac w Internecie gotowe skrypty, skopiowac odpowiedni kod i wkleic go do swojego dokumentu. Dokonywac prostych modyfikacji kodu skryptu. Obslugiwac skaner i oprogramowanie skanera. Skalowac i kadrowac obrazki. Zmieniac jasnosc i kontrast obrazu. Wybierac i stosowac odpowiednie filtry np. znieksztalcenia, efekty swietlne, artystyczne. Wybierac i stosowac Script- Fu. Usuwac ze zdjec zbedne elementy Usuwac efekt czerwonych oczu. Mozna uczniom podac adresy stron, na których znajduja sie kursy jezyka HTML oraz darmowe skrypty np. www.webpomocnik.net. Uczniowie bardzo chetnie korzystaja ze stron: www.madzia.olp.pl., www.swmarek.qs.pl. Skrypty do wykorzystania to np. zegar na stronie, cien kursora (skrypt cien kursora uczniowie moga modyfikowac poprzez zmiane pliku graficznego) Nalezy zwrócic uwage na rozmiar pliku graficznego i podkreslic,iz grafika umieszczona na stronach WWW powinna miec niezbyt duza pojemnosc. Do obróbki zdjec mozna wykorzystac oprogramowanie dolaczone do skanera Edytor obrazów HP, MS Photo Editor lub IrfanView Uczniowie korzystaja z programu Gimp. Jest to ich pierwszy kontakt z nietypowym interfejsem programu, dlatego uczniowie musza sie z nim oswioc przed wykonywaniem trudniejszych zadan (wlasnorecznym rysowaniem). Przy zapisywaniu dokumentów nalezy zwrócic uwage na rozszerzenie plików. 6
Tworzenie wlasnych rysunków Wykorzystywac selekcje do rysowania figur (prostokaty, elipsy zaznaczenie odreczne) Wypelniac zaznaczenie kolorem. Wypelniac zaznaczenie gradientem. Tworzyc kompozycje wykorzystujac: zwiekszanie, zmniejszanie oraz wygladzanie zaznaczenia. Korzystac z narzedzi malarskich: pedzel, olówek, pióro. Wykorzystac warstwy do tworzenia bardziej zlozonych rysunków. Podczas wykonywania cwiczen dotyczacych wypelniania kolorem zwrócic uwage na model barwy RGB, w Gimpie jest on zapisany w postaci szesnastkowej. Nalezy porównac go ze sposobem opisania barwy w programie Paint. Mozna uczniom pokazac sposób przeliczania liczb zapisanych w systemie dziesiatkowym na system szesnastkowy (bez wnikania w obliczenia matematyczne) za pomoca Kalkulatora. Przypomniec sposób okreslania koloru czcionki lub tekstu w HTML-u. Tworzenie animowanych obrazków Tworzenie elementów ozdobnych na potrzeby WWW Technika tworzenia ruchomych obrazków. Tworzenie animacji w programie Edytor postaci Logomocji Rysowanie poszczególnych sekwencji w programie Paint i laczenie ich w animowany gif za pomoca programu Unfreez. Wykorzystac Script-Fu do tworzenia logo, deseni, przycisków Ustalic atrybuty obrazu. Korzystac z narzedzi do rysowania. Kopiowac i wklejac klatki animacji. Ustalic szybkosc zmiany klatek. Zapisac utworzony dokument w formacje gif. Tworzyc dokumenty w Paint i zapisywac je w formacie gif. Nalezy zwrócic uwage na przezroczystosc. Zaznaczyc, ze tylko format gif obsluguje przezroczystosc obrazu. Program Unfreez laczy dokumenty zapisane jedynie w formacie gif. 7
Tworzenie grafiki wektorowej Desinger 4.05 PL Efekty specjalne na stronie. Wybieranie symbolów rysunkowych. Rysowanie obiektów liniowych Praca z obiektami. Praca z tekstem. Stosowanie wypelnien. Rysowanie figur trójwymiarowych. Praca z obrazami Praca z programem Anfy Team Rysowac kola, prostokaty, wieloboki, gwiazdy Rysowac odcinki, proste, luki Skalowac, obracac pochylac, kopiowac, grupowac obiekty Przeobrazac obiekt w inny obiekt. Wstawiac tekst zwykly i akapitowy. Wstawiac tekst do wnetrza obiektu. Dopasowac tekst do ksztaltu sciezki. Stosowac wypelnienia irysowe Wypelniac obiekty obrazem. Wypelniac obiekt innym obiektem. Maskowac obiekty Zmieniac kolory cieniowania obiektów. Zmieniac oswietlenie obiektów. Skalowac i obracac obiekty Importowac obrazy bitmapowe. Wektoryzowac obraz bitmapowy. Wykorzystac aplety z biblioteki programu Modyfikowac aplety poprzez wprowadzanie wlasnych zdjec lub rysunków. Zapisywac utworzone dokumenty w postaci plików HTML. Program Desiner 4.05 Pl jest programem nieco przestarzalym. Zawarte tu tresci mozna realizowac w Programie Corel Draw Kolejne cwiczenia wykonywane przez uczniów powinny realizowac konkretne zadania, wynikiem koncowym moze byc: logo szkoly, klasy, baner, kartka okazjonalna, element ozdobny. Uczniowie powinni tworzyc dokumenty wedlug wlasnych pomyslów i dla potrzeb swojej strony WWW. Dokumenty HTML utworzone za pomoca Anfy Team ze wzgledu na duza pojemnosc raczej nie nadaja sie do umieszczania na serwerze, ale moga byc z powodzeniem umieszczone na dysku lokalnym. 6. EWALUACJA A) Informacje zwrotne od uczniów. B) Wystawa prac graficznych uczniów. C) Ewaluacja beda równiez opublikowane w Internecie prace uczniów. 8