Dydaktyka Informatyki-internet i podstawy języka HTML

Transkrypt

1 Dydaktyka Informatyki-internet i podstawy języka HTML Instytut Matematyki Uniwersytet Gdański

2 HTML-wprowadzenie HTML to język hipertekstowego znakowania, który jest ustanowiona przez konsorcjum World Wide Web Consortium (W3C) specyfikacja, określajac a postać dokumentów prezentowanych w Internecie. Skrót HTML powstał od nazwy HyperText Markput Language. Hyper oznacza, że HTML nie jest językiem liniowym. Języki programowania maja zazwyczaj strukturę liniowa, innymi słowy struktura programu określa kolejność jego wykonywania. W przypadku stron WWW użytkownik ma możliwość skorzystania z dowolnej opcji strony w dowolnym czasie.

3 HTML-wprowadzenie Drugi człon nazwy, Text, to narzędzie, którym się posługujemy a jest to zwykły (no, może nie całkiem zwykły) tekst. Niezwykłość tekstu bierze się stad, że jest on umieszczony w specjalnych znacznikach <>, </> i one sa właśnie odpowiedzialne za kolejny człon nazwy: Markput. Dzięki znacznikom przegladarka wie, że ma do czynienia z kodem strony WWW a nie ze zwykłym tekstem. Znaczniki instruuja przegladarkę, jak interpretować wyglad tekstu. Ostatnia litera w skrócie HTML pochodzi od słowa Language, czyli język. HTML jest bowiem językiem publikowania w sieci WWW.

4 HTML-wprowadzenie Aby zaczać pisać w języku HTML należy posiadać przegladarkę internetowa (nie trzeba mieć dostępu do sieci) oraz dowolny Edytor plików tekstowych. Może to być np. zwykły Notatnik, czy Word, poleca się jednak bezpłatnie specjalne edytory do pisania kodu HTML np. Web Edit. Dokument HTML powinnień mieć rozszerzenie.html. Należy o tym pamiętać, gdy używamy Notatnika, czy też Worda do pisania stron WWW. Aby zobaczyć jak wyglada napisania przez Ciebie strona WWW należy zapisany dokument otworzyć za pomoca przegladarki internetowej.

5 HTML-podstawy Oto przykład podstawowego dokumentu HTML: <html> <head> <meta http-equiv= content-type content= text/html; charset=iso > <title>tytul strony</title> </head> <body> Treść strony </body> </html> Zadanie Utwórz swoja pierwsza stronę korzystajac z powyższego kodu. Nadaj jej tytuł i kilka zdań treści.

6 HTML-podstawy Znaczniki sa stosowanie zazwyczaj w parach <znacznik otwierajacy>... </znacznik zamykajacy> np. <html> </html>. Choć od tej reguły jest kilka wyjatków np. <br> znacznik nowego wiersza; <hr> znacznik umożliwiajacy dodanie linii poziomej. Atrybuty znacznika dostarczaja dodatkowych informacji o elementach strony np. <body bgcolor= green >. Atrybut definiowany jest za pomoca pary atrybut= wartość i zawsze umieszczany jest w znaczniku otwierajacym danego elementu HTML.

7 HTML-podstawy <html> </html> informuję przegladarkę, że to co jest pomiędzy stanowi kod HTML <head> </head> wyznacza obszar nagłówka strony. <body> </body> wyznacza obszar treści strony. Aby umożliwić kodowanie polskich znaków wpisujemy w nagłówku: <meta http-equiv= content-type content= text/html; charset=iso >

8 HTML-podstawy Do przekształcania tekstu w nagłówek służa znaczniki od <h1> do <h6> (nie zapomnij o znacznikach zamykajacych </h1> do </h6>). Znaczniki nagłówka powiększaja i pogrubiaja tekst. Aby wycentrować tekst używamy znacznika <center> np. <center><h2>mój nagłówek</h2></center> <p> nowy akapit. <br> nowa linia (bez znacznika zamykajacego) <b> pogrubienie <i> kursywa <u> podkreślenie <tt> czcionka maszynowa <big> czcionka większa od reszty tekstu <small> czcionka mniejsza od reszty tekstu

9 HTML-podstawy <sub> indeks dolny <sup> indeks górny <hr> umieszcza w tekście linie pozioma. Zadanie Napisz stronę internetowa, która będzie wygladała identycznie jak podana na kolejnym slajdzie

10 HTML-podstawy Rysunek : strona do zadania 2

11 HTML-podstawy Atrybuty znacznika <hr>: size= piksele określa grubość linii (najmniejsza 2) width= piksele wartość% określa długość linii w poziomie (w pikselach lub procentach) align= left right center definicja wyrównania lenni. Np. <hr width= 50% size= 3 align= center > Zadanie Zmodyfikuj stronę, aby wygladała tak jak na kolejnym slajdzie.

13 Sieci komputerowe Serwer główny komputer w sieci, wykonujcy określone usługi na rzecz innych komputerów. Sieć komputerowa jest zespołem co najmniej dwóch komputerów i innych urzadzeń przetwarzania danych, które działajac samodzienie, maja możliwość wymiany informacji oraz innych zasobów. Dane przesyłane przez sieć dzielone sa na części zwane pakietami i w takiej postaci trafiaja do komputera adresata. Komputer adresata, posiadajacy funkcję łaczenia otrzymanych pakietów w całość, przekazuje je odpowiedniej aplikacji w postaci pliku. Każdy pakiet składa się z nagłówka, w którym mieszcza się najczęściej informacje na temat adresatu nadawcy i odbiorcy pakietu, danych i końcówki, gdzie zwykle zawarta jest suma kontrolna służaca do sprawdzeniu poprawności pakietu.

14 Sieci komputerowe Rysunek : Serwer klient Rysunek : Topologia sieci

15 Sieci komputerowe Elementy sprzętowe sieci: urzadzenia transmisji używane do transportu sygnałów przesyłanych przez sieć np. kable miedziane i światłowodowe, urzadzenia dostępu odpowiedzialne za formatowanie danych tak, aby nadawały się do przesyłania w sieci, umieszczania w sieci i ich odbierania. W sieci lokalnej urzadzeniami dostępu sa karty sieciowe, w sieciach rozległych modemy, urzadzenia wzmacnania przesyłanych sygnałów służa do odbierania przesyłanych sygnałów, wzmacnania ich i wysyłania z powrotem do sieci. W sieciach lokanych rolę tę sprawuje koncentrator (hub), który umożliwia ponadto przyłaczenie do sieci wielu urzadzeń.

16 Sieci komputerowe Rysunek : Karta sieciowa Rysunek : Modem

17 Sieci komputerowe Rysunek : Hub

18 Sieci komputerowe Składniki programowe sieci: protokoły określaja sposoby komunikowania się urzadzeń, np. TCP/IP, sterowniki urzadzeń programy umożliwiajace i wspomagajace działanie urzadzeń w systemach operacyjnych, oprogramowanie komunikacyjne korzystajace z protokołów i sterowników do wymiany danych, np. komunikatory internetowe, przegladarki internetowe. Podział sieci ze względu na sposoby komunikowania: sieci typu każdy z każdym (peer-to-peer), sieci typu klient-serwer (client-serwer).

19 Sieci komputerowe Podział sieci ze względu na ich złożoność: sieć lokalna LAN łaczy użytkowników na niedużym obszarze np. w jednym budynku (sieć szkolna), sieć miejska MAN łaczy niewielki obszar geograficzny. Daje możliwość połaczenia między sieciami lokalnymi uczelni, organów administracji, centrów przemysłowych, sieć rozległa, globalna WAN to zazwyczaj kombinacje sieci lokalnych i dodatkowych połaczeń między nimi. Zasięg sieci globalnych przekracza granice miast, państw i kontynentów. Składaja się z tzw. węzłów i łacz acych je łaczy transmisyjnych (linie telofoniczne, radiowe itp.). Przykładem takich sieci jest internet i intranet sieć łacz aca oddziały dużych firm.

20 Sieci komputerowe Urzadzenia seciowe: Karta sieciowa urzadzenie pełniace rolę iterfejsu pomiędzy komputerem a siecia komputerowa. Głównym jej zadaniem jest wysyłanie i odbieranie informacji w sieci. Służy do przekształcania pakietów danych na sygnały, które sa przesyłane w sieci. Modem służy do połaczenia komputera z internetem przy użyciu stacjonarnej linii telefonicznej. Przy wysyłaniu danych modem zamienia cyfrowe dane z komputera na sygnały analogowe. Przy odbieraniu sygnałów następuje proces odwrotny. Koncentrator, rozgałęzniak (hub) łaczy wiele urzadzeń sieciowych w sieci komputerowej. Urzadzenie posiada wiele portów służacych do przyłaczania stacji roboczych lub innych urzadzeń. Rozsyła sygnał z jednego portu do pozostałych i wzmacna sygnał.

21 Sieci komputerowe Przełacznik (switch) pełni taka sama rolę co koncentrator, dzielac dodatkowo sieć na segmenty. Router umożliwia połaczenie ze soba różnych sieci LAN lub sieci LAN z siecia WAN. Punkt dostępowy urzadzenie majace za zadanie zapewnienie stacjom bezprzewodowym wgladu do zasobów sieci. Łaczność bezprzewodowa łaczność wykorzystujaca do emisji danych fale elektromagnetyczne: fale elektromagnetyczne w zakresie podczerwieni IR zasięg i prędkość transmisji sa niewielkie, fale radiowe zapewniajace różne transmisje danych (najpopularnejsze sieci korzystaja z częstotliwości 2,4 GHz).

22 HTML-listy <ul> definiuje listę wypunktowana <ol> definiuje listę numerowaniom <li> definiuje elementy listy Przykład <ul> <li>pierwszy podpunkt</li> <li>drugi podpunkt</li> </ul> Zadanie Zrób stronę taka jak na kolejnym slajdzie.

24 HTML-wstawianie obrazu Wstawienie obrazków umożliwia znacznik <img />. Znacznik ten nie ma znacznika zamykajacego. Przykład <img src= nazwa.jpg alt= tekst alternatywny /> Przy nazwie obrazu zapisujemy też rozszerzenie.jpg lub.gif. Tekst alternatywny pokaże się, gdy obrazek nie będzie mógł być wyświetlony. Niektóre atrybuty znacznika <img /> align= left right obrazek jest wyświetlony przy lewym prawym marginiesie vspace= piksele odległość obrazka od tekstu w pionie hspace= piksele odległość obrazka od tekstu w poziomie

25 HTML-wstawianie obrazu height= piksele wartość% określa wysokość obrazu w pikselach w procentach w stosunku do oryginału. widght= piksele wartość% określa szerokość obrazu w pikselach w procentach w stosunku do oryginał. Przykład <img src= tablica.jpg height= 50% widht= 50% alt= obrazek align= right /> Zadanie Wykonaj stronę taka sama jak przykładowa (dowolny tekst i obrazek skopiuj z internetu, ważne jest tylko rozmieszczenie tekstów i obrazków).

26 HTML-podstawy

27 HTML-tworzenie połaczeń Znacznik HTML, za pomoca którego tworzone jest połaczenie, nosi nazwę znacznika zakotwiczenia i ma następujac a postać: <a href= nazwa.html >Tekst połaczenia</a> Przykład <a href= dydaktyka_inf.html >Dydaktyka informatyki</a> <a href= 01 dyd info.pdf > Wprowadzenie</a> Zadanie Zrobić stronie internetowa na której będa m.in. 2-3 obrazy, lista, 2-3 odnośniki do innych stron. Wykorzystaj informacje poznane na zajęciach jak i na stronie (na razie nie trzeba robić tabel i ramek, zagadnienia te zostana omówione w dalszej części zajęć).

28 Sieci komputerowe Protokoły sieciowe Protokół to język używany przez komputery do komunikowania się między soba, który jest niezależny od platformy sprzętowej i systemu operacyjnego. Każde urzadzenie musi przestrzegać norm i zasad nazywanych protokołami komunikacyjnymi. Najbardziej znanym protokołem komunikacyjnym współczesnych sieci jest TCP/IP, będacy zespołem protokołów: TCP protokół kontroli transmisji i IP-protokół internetowy. Innymi przykładami sa między innymi protokoły: HTTP do przesyłania stron www, FTP do transmisji plików w sieci, POP3 do odbierania poczty elektronicznej, czy IRC prowadzenie rozmów za pomoca kontroli tekstowej.

29 Sieci komputerowe Adresowanie IP Każdemu komputerowy w sieci zostaje przyporzadkowany unikatowy adres, zwany adresem IP. Lokalizacje każdego komputera w sieci określa 32- lub 128-bitowy adres IP, składajacy się z adresu sieci i adresu hosta. Identyfikator sieci (adres sieci) określa indywidualny segment sieci, który przynależy do sieci TCP/IP. Służy on do identyfikacji danej sieci. Identyfikator hosta (adres hosta) host to najczęściej komputer centralny lub komputer przyłaczony do sieci określa urzadzenie TCP/IP w sieci.

30 Sieci komputerowe Przykładem 32 bitowego adresu IP jest: W celu prostrzego rozszyfrowania adresu IP wprowadzono zapis kropkowo-cyfrowy. Cztery oktety zapisane w systemie dwójkowym zapisujemy w systemie dziesiastkowym. Powyższy adres w systemie kropkowo-cyfrowym ma postać: Zadanie (do domu) Zamień adres zapisany w postaci dwójkowej na adres zapisany w postaci kropkowo-cyfrowej (a) oraz na odwrót (b): a) , b)

31 Internet Poczatek internetu sięga lat 60 XX wieku i zwiazane sa z amerykańskimi planami obronnymi zapasowego systemu łaczności. Celem badań było skonstruowanie sieci komputerowej działajacej pomimo zniszczenia jej części w wyniku ataku atomowego. Efektem badań było powstanie sieci ARPANET, w której poszczególne dane zostały podzielone na tzw. pakiety (każdy przesyłany jest osobno a następnie wszystkie składane sa w całość). W roku 1983 wszystkie komputery działajace w sieci ARPANET przesły na stosowanie nowego protokołu przesyłania danych, zwanego TCP/IP. Każdemu komputerowi przypisano adres IP. Kolejnym wydarzeniem w historii internetu było powstanie pierwszej strony internetowej i przegladarki o nazwie World Wide Web (WWW). W kolejnych latach powstawały nowe przegladarki i programy do obsługi stron WWW.

32 Internet Domena to usługa zapewniajaca przekształcenie adresów internetowych na adresy możliwe do odczytania przez urzadzenia sieci komputerowych. Przykłady domen: com firmy i instytucje komercyjne, edu instytucje edukacyjne, gov instytucje rzadowe, int organizacje międzynarodowe, net administracja sieciowa, org oranizacje niekomercyjne, pl Polska, eu Unia Europejska. Usługi internetowe: WWW, poczta elektroniczna ( ), grupy dyskusyjne, komunikatory, FTP, IRC, P2P, Telnet, e-administracja, e-handel, e-learning. Usługa WWW, ze względu na jej wielka popularność jest czasem mylnie utożsamiana z internetem jako takim. W skład każdego adresu WWW wchodzi: protokół usługi, nazwa serwera, nazwa folderu i dokumentu, domena funkcjonalna i krajowa.

33 Internet Np. (http protokół, :// znak oddzielajacy nazwę protokołu od adresu strony, www subdomena usługi, informatyka domena należaca do użytkownika, a także nazwa serwisu oraz nazwa serwera, na którym serwis jest opublikowany, pl domena krajowa) Poczta elektroniczna jest najstarsza usługa internetowa. FTP protokół transferu plików, umożliwiajacy wymianę (pobieranie i umieszczanie) plików w sieci. IRC usługa internetowych rozmów online. P2P usługa służaca do wymiany plików bezpośrednio pomiędzy komputerami użytkowników.

34 HTML-kaskadowy arkusz stylów (CSS) Kaskadowy arkusz stylów CSS (Cascading Style Sheets) służy do bf definiowania sposobu wyświetlania elementów HTML. Z kaskadowymi arkuszami stylów wiaż a się dwa pojęcia: dziedziczenie stylów i ich kaskadowy charakter. Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. Definicja stylu może się pojawić w konkretnym elemencie HTML (styl wpisany), między znacznikami <head> </head> (styl osadzony) lub może zostać pobrany z pliku zewnętrznego (zewnętrzny lub łaczony arkusz stylów). Wszystkie typy arkusza CSS moga być stosowane jednocześnie. Łaczone arkusze stylów sa przechowywane w zewnętrznym pliku o rozszerzeniu.css

35 HTML-kaskadowy arkusz stylów (CSS) Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez styl zdefiniowany w nagłówku dokumentu, to zaś może być modyfikowane przez styl zdefiniowany bezpośrednio w treści dokumentu. Postać arkusza stylów zależy od typu arkusza. Styl wpisany a więc zdefiniowany w konkretnym znaczniku ma postać: <znacznik style= właściwość: wartość; > Styl wpisany powinień być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego elementu.

36 HTML-kaskadowy arkusz stylów (CSS) Przykład: <p style="font-size: 25pt» To jest akapit ze stylem</p> <p> To jest akapit bez stylu</p> <p style="font-size: 16pt» To jest akapit z nowym stylem</p> Zadanie Stwórz stronę z trzema zdaniami i do jednego z tych zdań zastosuj styl wpisany.

37 HTML-kaskadowy arkusz stylów (CSS) Styl osadzony umieszczony w nagłówku ma następujac a postać: <style type= text/css >  </style> Jeśli wartość ma postać wielowyrazowa to umieszczamy ja w cudzysłowie.

38 HTML-kaskadowy arkusz stylów (CSS) Przykład: <head> <title>nawigacja</title> <meta http-equiv= Content-Type content= text/html; charset=iso > <style type= text/css >  </style> </head> Zwróć uwagę w jaki sposób jednemu selektorowi przypisać kilka właściwości oraz kilku selektorom te same własności.

39 HTML-kaskadowy arkusz stylów (CSS) Pobierz Tabelę 1 z właściwościami stylu. Zadanie Stwórz stronę poświęcona pakietowi Ms Office (krótki opis każdego z programów ze zdjeciem jak wyglada ten program po uruchomieniu). Zdjęcia maja być wykonane samodzielnie za pomoca zrzutu ekranu (po otwarciu programu wykonać zrzut ekrazu, otworzyć obrazek w paincie, zmiejszyć rozmiar i zapisać jako JPEG). Na stronie powinnien być zdefiniowany styl osadzony w którym zostanie użyte co najmniej 7 własności z pobranej tabeli 1. Tekst powinien być wyjustowany.

40 HTML-kaskadowy arkusz stylów (CSS) Zewnętrzny (lub inaczej łaczony) arkusz stylów to doskonałe rozwiazanie dla witryn, czyli układu wielu stron. Wówczas te same style moga być stosowane do wszystkich stron witryny. Aby zmienić wyglad wszystkich witryn wystarczy zrobić korektę stylu tylko w jednym pliku. W kodzie każdej ze stron, korzystajacych z zewnętrznego arkusza stylów, musi zostać zdefiniowane połaczenie z plikiem zewnętrznym za pomoca atrybutu link. Umieścia się go w sekcji head. <head> <link rel= stylesheet type= text/css href= mojestyle.css > </head> Definicja stylu jest umieszczona w pliku mojestyle.css - nazwa może być dowolna, ale rozszerzenie musi być.css.

41 HTML-kaskadowy arkusz stylów (CSS) Plik.css można przygotować w dowolnym edytorze tekstu. Plik nie powinień zawierać znaczników HTML. Oto przykład zawartości. hr {color: sienna} p {margin-left: 20px; font-size: 14pt} body {bacground-image: url( images/obraz.gif )}

42 HTML-kaskadowy arkusz stylów (CSS) Zadanie Stwórz stronie poświęconiom programom graficznym (paint, Gimp). Stwórz mini witrynę. Ze strony domowej (stwórz ja) utwórz połaczenia do stron o programach pakieku Ms office i programów graficznych. Styl który był zastosowany do strony poświęconej programom Ms Office przenieś teraz do zewnętrznego pliku i stwórz z niego zewnętrzny arkusz stylów. Pamiętaj, aby na każdej ze stron witryny zdefiniować połaczenie z zewnętrznym arkuszem stylów.

43 HTML-tabele Tabela w HTML ma następujac a strukturę: <table> <caption> Tytuł tabeli </caption> <tr> </tr> <tr> </tr> <tr> <th>nagłówek 1</th> <td>wiersz 1 kol 1</td> <td>wiersz 2 kol 1</td> </tr> </table> <th>nagłówek 2</th> <td>wiersz 1 kol 2</td> <td>wiersz 2 kol 2</td>

44 HTML-tabele <table> - znacznik tabeli, <tr> - znacznikiem wiersza, <td> - znacznik pojedynczej komórki, <th> - znacznik nagłówka (automatycznie pogrubia tekst), <caption> - znacznik nazwy tabeli. Tabele w HTML pozwalaja na sterowanie układem m.in. danych, tekstu, obrazków, połaczeń, a także innych tabel. Zadanie Stwórz tabelkę wygladaj ac a dokładnie jak ta na kolejnym slajdzie.

45 HTML-tabele

46 HTML-tabele Atrybuty znacznika table: border= x - określa grubość ramki (x pikseli), cellpadding= x - określa szerokość marginesu w pikselach, cellspacing= x - szerokość odstępu między sasiednimi komórkami w pikselach, Przykład: <table border= 3 cellpadding= 10 cellspacing= 20 > Zadanie Zmodyfikuj poprzednia tabelkę w ten sposób, aby miała obramowanie grubości 2 pikseli i odległość tekstu od krawędzi komórki wynosiła 15 pikseli.

47 HTML-tabele Atrybutem caption umożliwiajacym zmiane położenia tytułu jest align= ustawienie, gdzie jako ustawienie należy podać: top - tytuł górny (domyślnie) bottom - tytuł dolny left - ustawienie przy lewej krawędzi tabeli right - przy prawej krawędzi center - na środku Przykład: <caption align= bottom >Tytuł</caption>

48 HTML-tabele Zmianę rozmiarów całej tabeli lub pojedynczej komórki umożliwiaja atrybuty: width= x x% - długość w pikselach lub procentach. height= y y% - wysokość w pikselach lub procentach. Zadanie Wykonaj stronę taka jak na kolejnym slajdzie. Zastosuj do tego tabelę bez obramowania. Tabelka powinna być rozciagnięta na cały ekran. Uwaga: Więcej o tworzeniu tabel można znaleźć na stronie

49 HTML-tabele

50 HTML-ramki Ramka to zdefiniowania przez jej twórcę część okna przegladarki, której przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można także zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML. <frame> - znacznik tworzacy ramkę. Atrybuty <frame> to: src= nazwa pliku.htm - przypisujemy ramcę dokument, scrolling= yes no auto - sposób przewijania ramki, name= nazwa ramki - nadaje nazwę ramce, frameborder= czy ma być wyświetlane obramowanie ramki, marginheight= x wymusza dodatkowy odstęp u góry i u dołu ramki (w pikselach), marginwidth= x - wymusza margines lewy i prawy (w pikselach).

51 HTML-ramki Przykład: <frame scrolling= auto name= nazwa ramki src= nazwa pliku.htm > Układ ramek jest definiowany w pliku HTML, w którym element body został zastapiony elementem frameset. Znacznik <frameset> przyjmuje dwa atrybuty cols i rows, które umożliwiaja określenie liczby kolumn i wierszy na które zostanie podzielone okno przegladarki. Oto w jaki sposób możemy podzielić okno przegladarki na kolumny o określonych rozmiarach: <frameset cols= szerokość kol1, szerokość kol2,... >

52 HTML-ramki Liczba kolumn określana jest liczba wartości atrybutu cols. Wartości te sa podawane kolejno z przecinkami. Szerokość kolumny można zdefiniować w pikselach, w procentach oraz za pomoca znaku (maksymalna możliwa szerokość). Przykład podziału okna przegladarki na 3 kolumny i wczytania do każdej z kolumn osobnego dokumentu HTML. <html> <head> <title>układ trzech ramek</title> </head> <frameset cols= 25%,50%,25%> <frame src= ramka1.html > <frame src= ramka2.html > <frame src= ramka3.html > </frameset> </html>

53 HTML-ramki Zadanie Stwórz stronę WWW poświęconia systemom operacyjnym. Strona powinna być złożona z 3 ramek. W środkowej ramce powinien znajdować się tekst. W dwóch pozostałych maja znajdować się obrazki oraz odnośniki do innych stron. W ramkach maja zostać ustawione marginesy. Należy dopuścić możliwość przewijania tylko w środkowej ramce. UWAGA: Na stronie powinny się znaleźć m.in. następujace informacje: czym jest i jakie sa zadania systemu operacyjnego, krótka informacja o systemach MS DOS, Microsoft Windows, Mac OS, Unix, Linux oraz Android.

54 Projekt Jedna z form pracy na lekcjach zajęć komputerowych jest przygotowanie projektu przez uczniów. Zagadnieniami, które m.in. do tego się nadaja sa zagadnienia dotyczace wybranych norm etycznych i prawnych, rozwoju informatyki i technologii informacyjno komunikacyjnych (TIK) oraz zwiazanych z tym rozwojem szans i zagrożeń, a także przestępczości komputerowej. Etapy pracy nad projektem 1) Określenie problemu. 2) Analiza problemu. 3) Ustalenie zadań szczegółowych. 4) Określenie szczegółowej formy poszczególnych dokumentów oraz dobór nazw plików. 5) Wybranie odpowiednich narzędzi programów komputerowych.

55 Projekt 6) Ustalenie założeń dotyczacych łaczenia dokumentów. 7) Przydzielenie zadań poszczególnym osobom. 8) Wykonanie zadań szczegółowych. 9) Połaczenie dokumentów 10) Ocena projektu sprawdzenie, czy zadania zostały wykonane według wcześniejszych założeń.

56 Projekt do przygotowania TEMAT: Przestępczość komputerowa Celem projektu jest omówienie zagadnienia przestępczości komputerowej, w tym piractwa komputerowego i nielegalnych transakcji w secii. Analizę projektu należy rozpoczać od określenia, czym jest przestępstwo komputerowe w rozumieniu przepisów prawa. Następnie należy zapoznać się z rodzajami takich przestępstw i wyszukać najnowsze informacje na temat przestępczości komputerowej. Należy też spróbować odszukać, jakie kary groża za wybrane przestępstwa. W tym celu można skorzystać z odpowiednich przepisów Kodeksu karnego lub informacji umieszczonych na fachowych stronach w Internecie.

57 Projekt do przygotowania Zadania szczegółowe 1) Przykłady przestępstw komputerowych, m.in.: piractwo komputerowe, hacking, podsłuch komputerowy, bezprawne niszczenie informacji, oszustwa komputerowe, sabotaż komputerowy, szpiegostwo komputerowe, podrzucenie wirusów i rozsyłanie innych szkodliwych programów. 2) Wybrane przepisy prawa, dotyczace kar za przestępstwa komputerowe, na przykład za piractwo komputerowe czy podrzucanie wirusów.

58 Projekt do przygotowania Uwagi dotyczace realizacji projektu 1) Projekt należy przygotować w postaci strony WWW i połaczyć (w miarę możliwości) opis danego przestępstwa z przewidywana kara za jego popełnienie. 2) Warto odnieść się do kilku rzeczywistych przykładów łamana prawa w zakresie przestępczości komputerowej. Konkretny przykład bardziej przemawiaja do słuchacza niż sama definicja. 3) Proponowana liczba osób w grupie: 3 4. Przed zajęciami należy podzielić się w grupy, ustalić plan działania i przydzielić zadania na osoby. W czasie zajęć będa realizowane szczegółowe zadania (w czasie ich wykonywania każda osoba będzie zapytania o swoje zadanie). Samo wykończenie projektu będzie można wykonać w domu, lecz szczegółowe zadania maja być wykonane na zajęciach.

59 Projekt w szkole Metoda projektu polega na zaplanowaniu samodzielnych działań uczniów. Uczniowie ucza się jak poszukiwać informacji, jak planować działania, jak szanować czas własny i innych, dziela się kompetencjami, własnym zdaniem, współpracuja, dochodza do różnych kompromisów, licza się ze zdaniem innych. Ważnym etapem metody projektu jest prezentacja. Może się ona odbywać w różny sposób. Najczęstsza metoda jest prezentacja na forum klasy lub szkoły w formie prelekcji, lub pokazu, ale może to być też np. audycja radiowa nadana przez radiowęzeł, przedstawienie teatralne, artykuł w gazetce szkolnej albo prasie lokalnej, album, prezentacja multimedialna i wiele innych.

60 Projekt w szkole Metoda projektu jak żadna inna nadaje się do integrowania wiedzy z różnych dziedzin. W projekt zaangażowani sa nauczyciele różnych przedmiotów. Wszystko jest uzależnione od samego pomysłu i sposobu jego realizacji. Etapy według których można realizować dowolny projekt z uczniami: - wybór tematu lub zagadnień nad którym uczniowie będa pracowali, - określenie celów ogólnych i szczegółowych, zadań, metod realizacji oraz terminarz zakończenia projektu, - zwrócenie uwagi na ścieżki międzyprzedmiotowe w projekcie, - podanie szczegółowych kryteriów oceny, najlepiej w formie pisemnej,

61 Projekt w szkole - przedstawienie tematu projektu nad którym uczniowie będa pracowali. Dobrze jest uczniów wprowadzić w temat na przykład dobrze przygotowana pogadanka albo spotkaniem z ciekawym człowiekiem, czasami warto również spróbować metody burzy mózgów i przy okazji zdiagnozować co sami uczniowie wiedza na dany temat i jak rozumieja zadanie. - można podać źródła, z których uczniowie moga korzystać, - odpowiednio dobrać grupy - liczy się różnorodność talentów, - można wybrać przywódcę, sekretarza grupy i tym samym stymulować do działań osoby nieśmiałe,

62 Projekt w szkole -można wywiesić w klasie lub na ogólnodostępnej tablicy spis zespołów i przydzielonych im zadań, - nauczyciel powinien ustalić dyżury w czasie których będzie dostępny dla uczniów jako konsultant, podać adres kontaktowy w postaci np.. poczty , - można wymagać przedstawienia np. planu prezentacji z podziałem zadań dla poszczególnych członków zespołów czy, pisemnych okresowych sprawozdań przy projektach kilku miesięcznych.

63 Projekt w szkole Ocenianie to najtrudniejszy element projektu. Należy w ocenie uwzględnić takie elementy jak : zrozumienie zagadnienia, korzystanie z różnych źródeł informacji i umiejętność powoływania się na nie, stopień rozwinięcia tematu, poprawność merytoryczna, organizacja pracy grupowej, sposób i forma prezentacji. Podajac wcześniej kryteria oceny możemy na przykład ustalić, że powołamy jury składajace się z nauczyciela, zaproszonych gości i członków wszystkich zespołów.

64 Projekt w szkole Projekt kończymy ewaluacja. Dobrze jest podsumować projekt dyskutujac z uczniami po zakończonej prezentacji: Co nam się udało?, Czego nowego się nauczyliśmy?, Jaka to ma wartość dla nas, dla innych?, Co można było zrobić lepiej?, Czy warto pracować ta metoda w przyszłości? Dobrze jest poprosić uczniów o wypełnienie ankiety ewaluacyjnej.

65 Projekt w szkole przykład Projekt na najciekawszy folder reklamowy szkoły. Świetna zabawa dla osób, które posiadaja zdolności graficzne, zmysł plastyczny, umiejętność radzenia sobie z programami graficznymi, takimi jak GIMP, PHOTOSHOP, CORREL. Projekt polega na skompletowaniu materiałów potrzebnych to stworzenia takiego folderu. Głównymi zadaniami ucznia będzie: - zrobienie sesji fotograficznej, - obróbka fotografii, - przygotowanie tekstów reklamujacych szkołę, - opracowanie logo szkoły, - wykorzystanie programu graficznego do przygotowania folderu, - przygotowanie folderu do druku. W grupie uczniów może znaleźć się dobry grafik, polonista, plastyk. Oceniany jest efekt końcowy, czyli wykonany przez ucznia folder.

66 Projekt w szkole