Tworzenie stron internetowych i grafiki na potrzeby WWW Zofia

Tworzenie stron internetowych i grafiki na potrzeby WWW Zofia

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.
2.
3.
4.
Poszanowanie cudzej wlasnosci intelektualnej.
Poznanie praw obowiazujacych przy korzystaniu z oprogramowania komputerowego.
Wyrobienie nawyku estetycznego wykonywania prac.
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
Tresc
Tworzenie stron WWW – wykorzystanie jezyka HTML
Przeznaczenie i
budowa strony
WWW.
Projektowanie
wlasnej strony.
Znaczniki jezyka
HTML. Struktura
dokumentu HTML.
Wielkosc i kolor
czcionki. Akapity.
Linie poziome.
Kolor tla.
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.
Ruchomy tekst w
markizach
Stosowac znacznik
<MARQUEE> i jego
atrybuty.
Ozywianie stron
grafika.
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
Stosowac znacznik kotwicy
miedzy dokumentami <A...
HTML
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.
Organizowanie
Stosowac znacznik
informacji w
<TABLE>
tabelach.
Ustalac atrybuty tabeli:
Podstawowe
szerokosc tabeli, odstepy
formatowanie tabel
miedzy komórkami, grubosc
krawedzi, kolor komórek
Wyrównywac tekst w
komórkach tabeli.
Wprowadzenie do
Stosowac znacznik <P> z
arkuszy stylów.
atrybutem TYPE=text/css
Sródliniowe arkusze Definiowac wlasnosci tekstu:
stylów.
kolor, rozmiar czcionki,
Style naglówkowe
grubosc kroju, odleglosc
Zewnetrzne arkusze
miedzy liniami pisma,
stylów.
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.
Wyszukiwac w Internecie
gotowe skrypty, skopiowac
odpowiedni kod i wkleic go
do swojego dokumentu.
Dokonywac prostych
modyfikacji kodu skryptu.
Skanowanie zdjec i
ilustracji.
Dokonywanie
wstepnej obróbki
zdjec
Obslugiwac skaner i
oprogramowanie skanera.
Skalowac i kadrowac
obrazki.
Zmieniac jasnosc i kontrast
obrazu.
Artystyczna obróbka
zdjec.
Retusz zdjec
Wybierac i stosowac
odpowiednie filtry np.
znieksztalcenia, efekty
swietlne, artystyczne.
Wybierac i stosowac ScriptFu.
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 animowanych obrazków
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.
Tworzenie
elementów
ozdobnych na
potrzeby WWW
Technika tworzenia
ruchomych
obrazków.
Tworzenie animacji
w programie Edytor
postaci Logomocji
Wykorzystac Script-Fu do
tworzenia logo, deseni,
przycisków
Rysowanie
poszczególnych
sekwencji w
programie Paint i
laczenie ich w
animowany gif za
pomoca programu
Unfreez.
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.
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.
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
Wybieranie
symbolów
rysunkowych.
Rysowanie obiektów
liniowych
Praca z obiektami.
Praca z tekstem.
Stosowanie
wypelnien.
Rysowanie figur
trójwymiarowych.
Efekty specjalne na
stronie.
Praca z obrazami
Praca z programem
Anfy Team
Rysowac kola, prostokaty,
wieloboki, gwiazdy
Rysowac odcinki, proste,
luki
Program Desiner 4.05 Pl jest
programem nieco
przestarzalym. Zawarte tu
tresci mozna realizowac w
Programie Corel Draw
Skalowac, obracac pochylac, Kolejne cwiczenia
kopiowac, grupowac obiekty wykonywane przez uczniów
Przeobrazac obiekt w inny
powinny realizowac
obiekt.
konkretne zadania, wynikiem
koncowym moze byc: logo
szkoly, klasy, baner, kartka
Wstawiac tekst zwykly i
akapitowy.
okazjonalna, element
ozdobny. Uczniowie powinni
Wstawiac tekst do wnetrza
tworzyc dokumenty wedlug
obiektu.
Dopasowac tekst do ksztaltu wlasnych pomyslów i dla
potrzeb swojej strony WWW.
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.
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