Plan zajęć. 24h. 4 dni po 6h. informatyka + 2

Transkrypt

1

2 Plan zajęć 24h 4 dni po 6h informatyka + 2

3 Plan zajęć dzień 1 Wykład "Witryna w Internecie zasady tworzenia i funkcjonowania Prezentacja przykładowych serwisów WWW Tworzenie dokumentacji projektu etap pierwszy: scenariusz informatyka + 3

4 Plan zajęć dzień 2 Wykład Sposób podejścia do dużego projektu Omówienie przykładu serwisu interaktywnego: repozytorium materiałów Tworzenie dokumentacji projektu etap drugi: założenia i wymagania. Mój własny serwis WWW - etap I. - treść (język HTML), - wygląd (język CSS), - sposób działania (język PHP). informatyka + 4

5 Plan zajęć dzień 3 Mój własny serwis WWW - etap I ciąg dalszy Mój własny serwis WWW - etap II. Projektowanie i tworzenie bazy danych Dostęp do bazy danych z poziomu strony internetowej -współpraca PHP z MySQL informatyka + 5

6 Plan zajęć dzień 4 Mój własny serwis WWW - etap III. Testowanie, poprawianie i prezentowanie Tworzenie dokumentacji projektu - etap trzeci: prezentacja działania, wyniki testów, wnioski informatyka + 6

7

8 Plan wykładu Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 8

9 Wprowadzenie Internet, czyli właściwie co? Historia i przyszłość Co można znaleźć w Internecie informatyka + 9

10 Internet, czyli właściwie co? Internet największa sieć komputerowa o ogólnoświatowym zasięgu Dostęp dla każdego Internet a intranet zasięg liczba komputerów informatyka + 10

11 Historia i przyszłość 1969 Pierwsza sieć ARPANet (50 lat temu!) przeznaczenie militarne Paul Baran 1971/72 protokół poczty elektronicznej Ray Tomlinson 1983 Narodziny Internetu protokół TCP/IP Vinton Cerf, Robert Kahn 1991 Pierwsza strona internetowa Tim Berners-Lee 1991 Internet w Polsce 2009 Web x Web 3.0 informatyka + 11

12 Co można znaleźć w Internecie Materiały edukacyjne platformy edukacyjne otwarte zasoby edukacyjne multimedialne encyklopedie Wirtualne muzea Obserwacje życia (inne kultury, zwierzęta) transmisja na żywo obrazu z kamery Elektroniczne biblioteki informatyka + 12

14 Strona w Internecie Podstawowe pojęcia strona internetowa język HTML serwer przeglądarka adres URL Zasada działania strony internetowej informatyka + 14

15 Podstawowe pojęcia 1#5 Strona internetowa wynik interpretacji dokumentu napisanego w języku HTML Strona a witryna liczba stron (podstron) elementy dodatkowe (portal) informatyka + 15

16 Podstawowe pojęcia 2#5 Język HTML język programowania, który służy do tworzenia opisów stron internetowych zestaw znaczników <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy Popołudniowej! </CENTER> </BODY> </HTML> informatyka + 16

17 Podstawowe pojęcia 3#5 Serwer komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (np. obrazkami) informatyka + 17

18 Podstawowe pojęcia 4#5 Przeglądarka program służący do pobierania opisu stron internetowych z serwera i wyświetlania ich na ekranie monitora tłumaczy kod HTML na postać oglądaną na ekranie informatyka + 18

19 Podstawowe pojęcia 5#5 Adres URL adres, pod którym jest dostępna konkretna strona internetowa nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki) nazwa_serwera.pl/ katalog/ plik.html plik.pdf nazwa domenowa serwera, z którego zostanie pobrany dokument HTML (wyświetlony jako strona) nazwa folderu (katalogu) na serwerze nazwa pobieranego pliku (dokumentu HTML) znajdującego się w tym folderze (katalogu) informatyka + 19

20 Zasada działania strony internetowej informatyka + 20

22 Tworzenie strony internetowej 1#2 Dlaczego warto znać się na tworzeniu stron internetowych Co można umieścić elementy stron internetowych Planowanie strony Nie jesteśmy odbiorcami swojej witryny Jak ludzie widzą witryny internetowe informatyka + 22

23 Tworzenie strony internetowej 2#2 Jak ludzie nawigują po Internecie 5 skutecznych sposobów na odstraszenie użytkowników 5 sposobów poprawy witryny Język HTML drugie spojrzenie struktura dokumentu HTML Hiperłącza Narzędzia do tworzenia stron informatyka + 23

24 Dlaczego warto umieć utworzyć stronę internetową Przyjemność Codzienność Oszczędność Frajda informatyka + 24

25 Tekst Obrazy grafika zdjęcia Formularze Multimedia Co można umieścić elementy stron internetowych Elementy dynamiczne kalendarz, zegar, horoskop, pogoda informatyka + 25

26 Elementy stron internetowych tekst Duża wartość informacyjna Szybkość wyświetlania Mało atrakcyjny informatyka + 26

27 Elementy stron internetowych obrazy (grafika, zdjęcia) Przyciąga uwagę Możliwość powiększania zdjęć Szybkość wyświetlania informatyka + 27

28 Elementy stron internetowych formularze Zbieranie informacji od użytkowników rejestracja ankieta Zamówienia Transakcje internetowe Piotr Kopciał informatyka + 28

29 Elementy stron internetowych multimedia (audio, video) Najbardziej atrakcyjne informatyka + 29

30 Elementy dynamiczne Kalendarz Zegar Pogoda Horoskop Waluty Giełda Położenie informatyka + 30

31 Kompozycja strony obramowanie Grupowanie informacji Utrzymanie porządku Komponowanie zawartości Piotr Kopciał informatyka + 31

32 Projektowanie witryny 1#3 Nie można kopać dołu na fundamenty, nie mając gotowego projektu domu co chcę umieścić na stronie? co skłoniło mnie od utworzenia własnej strony? do kogo strona jest adresowana? w jaki sposób chcę zaprezentować siebie (swoje hobby, firmę) innym? informatyka + 32

33 Projektowanie witryny 2#3 Najczęściej umieszczamy: informacje o sobie (hobby) lub swojej firmie zdjęcia (prywatne lub oferowanych produktów) formularz (komentarze, księga gości) grafika (strona atrakcyjna wizualnie) Stosujemy obramowanie informatyka + 33

34 Plan na papierze: Projektowanie witryny 3#3 Piotr Kopciał informatyka + 34

35 Nie jesteśmy odbiorcami swojej witryny Nie wszyscy odbiorcy strony są podobni do nas O naszej witrynie wiemy więcej niż inni O odbiorcy wiemy mniej, niż nam się wydaje informatyka + 35

36 Nie jesteśmy odbiorcami swojej witryny Nie projektujemy strony dla siebie - projektujemy ją dla innych użytkowników, którzy będą naszą stronę odwiedzać. Najczęściej popełniane błędy: używanie żargonu (słowa niezrozumiałe dla innych) złe zaplanowanie układu strony niepogrupowanie informacji na dany temat elementy rozpraszające (zam. przyciągające) uwagę informatyka + 36

37 Jak ludzie widzą witryny internetowe Internauci są niecierpliwi 15 sekund Schemat oglądania strony 1,2,3 informatyka + 37

38 Jak ludzie nawigują po Internecie Różne media różne sposoby korzystania W Internecie nawigujemy jak w wirtualnej przestrzeni sygnały nawigacyjne gdzie przejść kursor - przedłużenie ręki Konwergencja mediów informatyka + 38

39 5 skutecznych sposobów na odstraszenie użytkowników Wyłączenie serwera strona niedostępna dla użytkowników Za dużo elementów multimedialnych spowolnienie wyświetlania strony rozproszenie uwagi użytkownika Zmiana rozmieszczenia elementów użytkownik się gubi Niedziałające łącza użytkownik się denerwuje Brak aktualizacji brak powodu do ponownych odwiedzin informatyka + 39

40 5 sposobów poprawy witryny Skoncentruj się najpierw na działaniu strony, potem na wyglądzie kompromis pomiędzy wyglądem a szybkością Myśl o użytkowniku wczuj się w jego rolę Projektuj zgodnie z konwencją sprawdzony schemat układu strony Zwróć uwagę na szczegóły błahe, ale kłopotliwe błędy Testuj i poprawiaj według uwag i sugestii użytkowników informatyka + 40

41 Język HTML drugie spojrzenie struktura dokumentu HTML <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy popołudniowej! </CENTER> </BODY> </HTML> informatyka + 41

42 Hiperłącza Nawigacja pomiędzy stronami Dwa typy łączy odsyłacze do innych stron naszej witryny odsyłacze do innych stron w Internecie informatyka + 42

43 Hiperłącza przykład 1#2 <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <H1> Informatyka + </H1> Witaj na zajęciach Wszechnicy popołudniowej! Więcej na temat programu Informatyka+ znajdziesz na <a href=" stronie projektu</a> </BODY> </HTML> informatyka + 43

44 Hiperłącza przykład 2#2 <a href=" projektu</a> Piotr Kopciał informatyka + 44

45 Narzędzia do tworzenia stron Notatnik Windows Edytor HTML Piotr Kopciał informatyka + 45

47 Dynamiczna strona internetowa Zasada działania strony dynamicznej Strony statyczne a strony dynamiczne Tworzenie stron dynamicznych - języki skryptowe Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych informatyka + 47

48 Zasada działania strony dynamicznej Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia informatyka + 48

49 Strony statyczne a strony dynamiczne 1#2 Strony statyczne ta sama treść wszyscy użytkownicy widzą to samo Strony dynamiczne - treść generowana na bieżąco - różni użytkownicy mogą widzieć inną treść - baza danych częstym uzupełnieniem informatyka + 49

50 Strony statyczne a strony dynamiczne 2#2 Wady Zalety Strony statyczne Strony dynamiczne - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - trudniej je utworzyć (języki skryptowe są trudniejsze do opanowania niż HTML) - wymagają bazy danych na serwerze - łatwo je utworzyć (kod HTML) - łatwo i szybko można zmienić treść - umożliwiają interakcję z użytkownikiem informatyka + 50

51 Tworzenie stron dynamicznych - języki skryptowe <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <H1> Informatyka + </H1> Witaj na zajęciach Wszechnicy Popołudniowej w dniu: <?php echo date("y-m-d");?> </BODY> </HTML> informatyka + 51

52 Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 1#2 Strony interaktywne obsługują sesję użytkownika sesja to system przechowywania informacji o użytkowniku (np. zawartość koszyka w e-sklepie) Treść strony może się zmieniać w zależności od: profilu użytkownika wprowadzonych danych przeglądarki czasu, pory dnia położenia geograficznego informatyka + 52

53 Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 2#2 podświetlanie przycisków po najechaniu kursorem myszy zmiana kształtu kursora myszy pojawianie się okien dialogowych mechanizm przeciągnij-i-upuść manipulowanie grafiką (np. przełączanie obrazków) uruchamianie wyskakujących okienek (np. pojawianie się okienka informacyjnego, gdy użytkownik umieści wskaźnik myszy na obrazku) przesuwanie mapy zwijanie i rozwijanie menu informatyka + 53

54 Przykłady serwisów interaktywnych 1#4 Serwis aukcyjny zróżnicowana oferta tworzenie aukcji interaktywna pomoc system płatności komentarze Piotr Kopciał informatyka + 54

55 Przykłady serwisów interaktywnych 2#4 Google Suggest największa wyszukiwarka na świecie ponad 8 mld stron suggest znaczy sugestie aktualizacja z każdym klawiszem informatyka + 55

56 Przykłady serwisów interaktywnych 3#4 informatyka + 56

57 Przykłady serwisów interaktywnych 4#4 Google Maps połączenie wyszukiwarki z przeglądarką map przesuwanie powiększanie bez odrywania wzroku okna pop-up trasa satelita, teren, mapa Piotr Kopciał informatyka + 57

59 Literatura Nauka projektowania stron internetowych J. Cohen, Serwisy WWW. Projektowanie, tworzenie, zarządzanie, Wyd. Helion, Gliwice 2004 J. Price, L. Price, Profesjonalny serwis WWW, Wyd. Helion, Gliwice 2002 L. Hobbs, Strony WWW. To proste, Wyd. RM, Warszawa 2002 Adres w Internecie informatyka + 59

60 Co dalej? Zajęcia Informatyka+ o podobnej tematyce Techniki Internetu wykład 2h + warsztat 3h, Wszechnica Poranna Wyszukiwanie treści multimedialnych wykład 2h, Wszechnica Popołudniowa Praktyka Internetu warsztaty 24h, Wszechnica na Kołach Tworzenie serwisów internetowych warsztaty 24h, Kuźnia Talentów informatyka + 60

61