Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Plan zajęć 24h 4 dni po 6h informatyka + 2 Plan zajęć – dzień 1 Wykład "Witryna w Internecie – zasady tworzenia i funkcjonowania Prezentacja przykładowych.

Podobne prezentacje


Prezentacja na temat: "Plan zajęć 24h 4 dni po 6h informatyka + 2 Plan zajęć – dzień 1 Wykład "Witryna w Internecie – zasady tworzenia i funkcjonowania Prezentacja przykładowych."— Zapis prezentacji:

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 2.0 … 201x 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

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

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 Prosta strona WWW Informatyka + Witajcie na zajęciach Wszechnicy Popołudniowej! 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 https:// nazwa_serwera.pl/katalog/ plik.html plik.pdf nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki) 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

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

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 Co można umieścić – elementy stron internetowych Tekst Obrazy – grafika – zdjęcia Formularze Multimedia Elementy dynamiczne – kalendarz, zegar, horoskop, pogoda … informatyka + 25

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

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

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

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

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

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

32 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? Projektowanie witryny 1#3 informatyka + 32

33 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 Projektowanie witryny 2#3 informatyka + 33

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

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

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 informatyka + 37 Internauci są niecierpliwi – 15 sekund Schemat oglądania strony – 1,2,3

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 Prosta strona WWW Informatyka + Witajcie na zajęciach Wszechnicy popołudniowej! 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 Prosta strona WWW Informatyka + Witaj na zajęciach Wszechnicy popołudniowej! Więcej na temat programu Informatyka+ znajdziesz na stronie projektu informatyka + 43

44 Hiperłącza – przykład 2#2 Piotr Kopciał stronie projektu informatyka + 44

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

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

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 WadyZalety Strony statyczne - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - łatwo je utworzyć (kod HTML) Strony dynamiczne - trudniej je utworzyć (języki skryptowe są trudniejsze do opanowania niż HTML) - wymagają bazy danych na serwerze - łatwo i szybko można zmienić treść - umożliwiają interakcję z użytkownikiem informatyka + 50

51 Tworzenie stron dynamicznych - języki skryptowe Prosta strona WWW Informatyka + Witaj na zajęciach Wszechnicy Popołudniowej w dniu: 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

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

59 Nauka projektowania stron internetowych Literatura – 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


Pobierz ppt "Plan zajęć 24h 4 dni po 6h informatyka + 2 Plan zajęć – dzień 1 Wykład "Witryna w Internecie – zasady tworzenia i funkcjonowania Prezentacja przykładowych."

Podobne prezentacje


Reklamy Google