docTworzenie stron WWW 1 Zajęcia zdalne. Dydaktyczne strony
download 
Reklamacja Transkrypt
Tworzenie stron WWW 1 Zajęcia zdalne. Dydaktyczne strony
Tworzenie stron WWW 1 Zajęcia zdalne. Dydaktyczne strony internetowe i ich projektowanie. Zadanie 1. (Pierwszy projekt ) Zaplanować witrynę WWW, którą chcielibyśmy w przyszłości stworzyć w ramach zajęć. Plan nie musi, a nawet nie powinien zawierać pełnej treści. W czym (lub jak) zapisać projekt przyszłej strony? W zasadzie jedynym ograniczeniem jest czytelność: można np. sporządzić odręczne notatki i je zeskanować. Oto trzy narzucające się sposoby: 1. Narysować wszystko w programie graficznym (Paintbrush, GIMP). Obrazek do wysłania najlepiej zapisać jako .png lub .jpg . 2. Napisać wszystko w edytorze tekstu (Word .rtf, Open Office Document .odt). Do organizacji materiału wykorzystać tabele. Jeśli potrzeba – wykonać w edytorze proste rysunki lub wkleić wcześniej przygotowaną grafikę. 3. Opisać wszystko w prostym edytorze tekstu (Notatnik .txt) – „esej o przyszłej witrynie”. Zadanie 2. (Moja wizytówka ) Utworzyć w Wordzie plik Wizytowka.doc i zaprojektować prostą wizytówkę podobną do poniższej 1. Imię i nazwisko: Krzysztof Leśniak 2. Hobby: literatura sf 3. Ulubione strony: • http://www.cut-the-knot.org • www.mat.uni.torun.pl/˜much 4. Materiały do pobrania: www.mat.uni.torun.pl/˜much/kursWWW/LaTeX-sklad.pdf (samouczek LaTeX-a) Linki powinny być aktywne (po kliknięciu myszą ma się uruchamiać strona o podanym adresie). Następnie przekonwertować Wizytowka.doc do postaci strony WWW Wizytowka.htm [Plik → Zapisz jako... → Strona sieci web] . Obejrzeć uzyskany efekt w przeglądarce. Zadanie 3. (Znalezione adresy ) Odszukać w internecie (dokładnie) 5 stron dydaktycznych i zapisać ich adresy w swojej przeglądarce w oddzielnym podfolderze dydaktyczna 5. IExplorer: [Ulubione → Dodaj do ulubionych... → Utwórz w... → → Nowy folder → Nazwa folderu: dydaktyczna 5 ] . Mozilla Firefox: [Zakładki → Dodaj do zakładek... → Nowy folder → Nazwa: dydaktyczna 5 ] . Wybrane hiperłącza powinny wskazywać na strony: 1. w języku polskim / obcym; 2. z bogatą szatą graficzną / bez grafiki (czysto tekstowe); 3. multimedialne (dźwięk i/lub wideo); multimedia bezpośrednio osadzone w stronie albo udostępnione w formie linków; 2 Tworzenie stron WWW 4. interaktywne (reagujące na działania gościa) np. puzzle online, instrument muzyczny, kalkulator (graficzny); 5. stanowiące kurs jednego z następujących języków: HTML, CSS, JavaScript lub PHP. Zadanie 4. (Śledzenie kodu ) Wybrać jakąkolwiek stronę w sieci, obejrzeć jej kod źródłowy [ Prawy przycisk mychy → Wybrać z roletki: "Pokaż źródło" ] oraz wypisać w pliku tekstowym (Notatnik, Word,...) wszystkie użyte na stronie znaczniki otwierające (bez atrybutów i ich wartości), np. <html>, <body>, <a> (pochodzące z <a href=... lub <a name=...), <b>, <div>. Ponadto w pliku tekstowym powinny być umieszczone: adres www (URL/URI) i nazwa analizowanej strony. Niezależnie od tego ile razy w źródle wystąpił dany znacznik wypisujemy go w naszym pliku tekstowym tylko raz. Zadanie 5. (Wikipedia ) Napisać dla Wikipedii krótki artykuł do jednego z nieopisanych dotychczas haseł. Umieszczając notkę w Wikipedii należy ją opatrzeć własnym imieniem i nazwiskiem. Aby móc podpisywać artykuły, należy utworzyć sobie w Wikipedii konto autora. UWAGI: A) Oczywiście strona powstała na koniec całego cyklu zajęć może odbiegać od ustaleń powziętych w projekcie z Zadania 1. B) W Zadaniu 2 zamiast Worda można użyć innego rozbudowanego edytora tekstu. Np. w programie OpenOffice Writer przygotowaną wizytówkę Wizytowka.odt zapisujemy jako stronę WWW następująco: [File → Save As... → HTML Document]. C) Zadania 1 i 2 są obowiązkowe. Ponadto należy wykonać jedno spośród zadań 3, 4, 5. Hierarchia zadań do wyboru wg użyteczności przy tworzeniu stron w HTML-u: 4, 3, 5. Wszystkie zadania będą traktowane na równi. D) Przypomnienie: aby „sfotografować” aktualny wygląd ekranu wciskamy klawisz [PrintScreen]. Następnie po otwarciu programu graficznego (Paint, IrfanView,...) dokonujemy zrzutu za pomocą [Ctrl V] (litera ”V” z wciśniętym ”Controlem”). I już można zapisywać jako... (typy plików do wyboru z roletki). E) Z racji na ograniczenia czasowe liczy się celność rozwiązania – niekoniecznie zaś jego rozwlekłość. Sugeruje się wybrać to zadanie, którego nigdy wcześniej nie było okazji/potrzeby wykonywać. Zadanie 1 2 3 4 5 Rozwiązanie zadania polega na przesłaniu na platformę moodle... ... pliku z projektem w dowolnie wybranym formacie ... pliku .doc /.rtf (lub podobnego jak .odt) oraz pliku .htm uzyskanego w drodze konwersji oryginału ... obrazka .jpg (lub .png) ze zrzutem ekranu, na którym widać linki w podfolderze dydaktyczna 5 , albo pliku tekstowego .doc (.odt, .txt) z listą adresów www ... pliku tekstowego .doc (.odt, .txt) z listą znaczników oraz pełnym adresem analizowanej strony ... hasła Wikipedii, którego opis tworzyło się od samego początku much, 17,26,30 vi, 2 vii 2007
