Plan zajęć

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 serwisów WWW

• Tworzenie dokumentacji projektu – etap pierwszy: scenariusz

informatyka + 3


• 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


• 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


• 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 internetowa• Podsumowanie

informatyka + 8

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

• 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– 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

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


informatyka + 13

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

• Strona a witryna– liczba stron (podstron)– elementy dodatkowe

(portal)

informatyka + 15


• 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


• Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami

składowymi (np. obrazkami)

informatyka + 17


• 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


• Adres URL – adres, pod którym jest dostępna konkretna strona internetowa

http://www.informatykaplus.edu.pl/upload/dokumenty/regulamin.pdf

http://

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

Zasada działania strony internetowej

informatyka + 20

Plan wykładu


informatyka + 21

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 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.educationworld.com/a_books/images/first_internet.gif

informatyka + 24

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

informatyka + 26

• Duża wartość informacyjna

• Szybkość wyświetlania

• Mało atrakcyjny

Elementy stron internetowych – obrazy (grafika, zdjęcia)

informatyka + 27

• Przyciąga uwagę

• Możliwość powiększania zdjęć

• Szybkość wyświetlania

Elementy stron internetowych – formularze

Piotr Kopciałinformatyka + 28

• Zbieranie informacji od użytkowników– rejestracja– ankieta

• Zamówienia

• Transakcje internetowe

Elementy stron internetowych – multimedia (audio, video)

informatyka + 29

• Najbardziej atrakcyjne

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

„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

• 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

• Plan na papierze:

Piotr Kopciał


informatyka + 34

Nie jesteśmy odbiorcami swojej witryny

http://merlin.pl/Smerf-przy-komputerze-figurka_Schleich,images_big,6,SLH-40249.jpg

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

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

informatyka + 37

• Internauci są niecierpliwi– 15 sekund

• Schemat oglądania strony– 1,2,3

Jak ludzie nawigują po Internecie

http://nwn.blogs.com/photos/uncategorized/2007/06/07/avairexp05.jpg

• 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

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• 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ówinformatyka + 40

Język HTML – drugie spojrzeniestruktura 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

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> <H1> Informatyka + </H1> 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

Piotr Kopciał

<a href="http://informatykaplus.edu.pl/">stronie projektu</a>

informatyka + 44

Narzędzia do tworzenia stron

• Notatnik Windows

Piotr Kopciał

• Edytor HTML

informatyka + 45

Plan wykładu


informatyka + 46

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, kiedy użytkownik zażąda jej wyświetlenia

informatyka + 48

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 Zalety

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

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

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• 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– interaktywna pomoc– system płatności– komentarze



• Google Suggest– największa

wyszukiwarka na świecie– ponad 8 mld stron– suggest znaczy sugestie – aktualizacja

z każdym klawiszem

informatyka + 55


informatyka + 56


• Google Maps– połączenie

wyszukiwarkiz przeglądarką map

– przesuwanie– powiększanie bez odrywania

wzroku– okna pop-up– trasa– satelita, teren, mapa


Plan wykładu


informatyka + 58

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 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

Plan zajęć

Documents

Transcript of Plan zajęć