Plan zaj 24 h 4 dni po 6

  • Slides: 61
Download presentation

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

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

Plan zajęć – dzień 1 • Wykład "Witryna w Internecie – zasady tworzenia i

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

Plan zajęć – dzień 2 • Wykład „Sposób podejścia do dużego projektu” • Omówienie

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

Plan zajęć – dzień 3 • Mój własny serwis WWW - etap I –

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 My. SQL informatyka + 5

Plan zajęć – dzień 4 • Mój własny serwis WWW - etap III. Testowanie,

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

Plan wykładu • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona

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

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

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

Internet, czyli właściwie co? • Internet – największa sieć komputerowa o ogólnoświatowym zasięgu •

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

Historia i przyszłość • 1969 Pierwsza sieć ARPANet (50 lat temu!) – przeznaczenie militarne

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 … 201 x Web 3. 0 informatyka + 11

Co można znaleźć w Internecie • Materiały edukacyjne – platformy edukacyjne – otwarte zasoby

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

Plan wykładu • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona

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

Strona w Internecie • Podstawowe pojęcia – strona internetowa – język HTML – serwer

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

Podstawowe pojęcia 1#5 • Strona internetowa – wynik interpretacji dokumentu napisanego w języku HTML

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

Podstawowe pojęcia 2#5 • Język HTML – język programowania, który służy do tworzenia opisów

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> <H 1> Informatyka + </H 1> Witajcie na zajęciach Wszechnicy Popołudniowej! </CENTER> </BODY> </HTML> informatyka + 16

Podstawowe pojęcia 3#5 • Serwer – komputer, na którym znajduje się opis strony internetowej,

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

Podstawowe pojęcia 4#5 • Przeglądarka – program służący do pobierania opisu stron internetowych z

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

Podstawowe pojęcia 5#5 • Adres URL – adres, pod którym jest dostępna konkretna strona

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

Zasada działania strony internetowej informatyka + 20

Zasada działania strony internetowej informatyka + 20

Plan wykładu • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona

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

Tworzenie strony internetowej 1#2 • Dlaczego warto znać się na tworzeniu stron internetowych •

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

Tworzenie strony internetowej 2#2 • Jak ludzie nawigują po Internecie • 5 skutecznych sposobów

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

Dlaczego warto umieć utworzyć stronę internetową • • Przyjemność Codzienność Oszczędność Frajda http: //www.

Dlaczego warto umieć utworzyć stronę internetową • • Przyjemność Codzienność Oszczędność Frajda http: //www. educationworld. com/a_books/images/first_internet. gif informatyka + 24

Co można umieścić – elementy stron internetowych • Tekst • Obrazy – grafika –

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

Elementy stron internetowych – tekst • Duża wartość informacyjna • Szybkość wyświetlania • Mało

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

Elementy stron internetowych – obrazy (grafika, zdjęcia) • Przyciąga uwagę • Możliwość powiększania zdjęć

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

Elementy stron internetowych – formularze • Zbieranie informacji od użytkowników – rejestracja – ankieta

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

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

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

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

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

Kompozycja strony – obramowanie • Grupowanie informacji • Utrzymanie porządku • Komponowanie zawartości informatyka

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

Projektowanie witryny 1#3 „Nie można kopać dołu na fundamenty, nie mając gotowego projektu domu”

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

Projektowanie witryny 2#3 • Najczęściej umieszczamy: – informacje o sobie (hobby) lub swojej firmie

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

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

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

Nie jesteśmy odbiorcami swojej witryny • Nie wszyscy odbiorcy strony są podobni do nas

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 http: //merlin. pl/Smerf-przy-komputerze-figurka_Schleich, images_big, 6, SLH-40249. jpg informatyka + 35

Nie jesteśmy odbiorcami swojej witryny Nie projektujemy strony dla siebie - projektujemy ją dla

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

Jak ludzie widzą witryny internetowe • Internauci są niecierpliwi – 15 sekund • Schemat

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

Jak ludzie nawigują po Internecie • • Różne media – różne sposoby korzystania W

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 http: //nwn. blogs. com/photos/uncategorized/2007/06/07/avairexp 05. jpg informatyka + 38

5 skutecznych sposobów na odstraszenie użytkowników Wyłączenie serwera • • strona niedostępna dla użytkowników

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

5 sposobów poprawy witryny • Skoncentruj się najpierw na działaniu strony, potem na wyglądzie

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

Język HTML – drugie spojrzenie struktura dokumentu HTML <HTML> <HEAD> <TITLE> Prosta strona WWW

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

Hiperłącza • Nawigacja pomiędzy stronami • Dwa typy łączy – odsyłacze do innych stron

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

Hiperłącza – przykład 1#2 <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <H

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

Hiperłącza – przykład 2#2 <a href="http: //informatykaplus. edu. pl/">stronie projektu</a> informatyka + Piotr Kopciał

Hiperłącza – przykład 2#2 <a href="http: //informatykaplus. edu. pl/">stronie projektu</a> informatyka + Piotr Kopciał 44

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

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

Plan wykładu • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona

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

Dynamiczna strona internetowa • Zasada działania strony dynamicznej • Strony statyczne a strony dynamiczne

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

Zasada działania strony dynamicznej • Opis strony dynamicznej jest tworzony przez serwer w momencie,

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

Strony statyczne a strony dynamiczne 1#2 • Strony statyczne – ta sama treść –

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

Strony statyczne a strony dynamiczne 2#2 Wady Strony statyczne Strony dynamiczne Zalety - nie

Strony statyczne a strony dynamiczne 2#2 Wady Strony statyczne Strony dynamiczne Zalety - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - łatwo je utworzyć (kod HTML) - 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

Tworzenie stron dynamicznych - języki skryptowe <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD>

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

Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 1#2 • Strony interaktywne obsługują sesję użytkownika

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

Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 2#2 podświetlanie przycisków po najechaniu kursorem myszy

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

Przykłady serwisów interaktywnych 1#4 • Serwis aukcyjny – – – zróżnicowana oferta tworzenie aukcji

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

Przykłady serwisów interaktywnych 2#4 • Google Suggest – największa wyszukiwarka na świecie – ponad

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

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

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

Przykłady serwisów interaktywnych 4#4 • Google Maps – połączenie wyszukiwarki z przeglądarką map –

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 informatyka + Piotr Kopciał 57

Plan wykładu • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona

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

Nauka projektowania stron internetowych • Literatura – J. Cohen, Serwisy WWW. Projektowanie, tworzenie, zarządzanie,

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 – http: //html. projektowanie-stron. edl. pl/ informatyka + 59

Co dalej? Zajęcia Informatyka+ o podobnej tematyce • Techniki Internetu wykład 2 h +

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