Transcript Tworzenie serwisów internetowych
Slide 1
Slide 2
Plan zajęć
24h
4 dni po 6h
informatyka +
2
Slide 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
Slide 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
Slide 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
Slide 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
Slide 7
Slide 8
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
8
Slide 9
Wprowadzenie
• Internet, czyli właściwie co?
• Historia i przyszłość
• Co można znaleźć w Internecie
informatyka +
9
Slide 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
Slide 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
Slide 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
Slide 13
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
13
Slide 14
Strona w Internecie
• Podstawowe pojęcia
– strona internetowa
– język HTML
– serwer
– przeglądarka
– adres URL
• Zasada działania strony internetowej
informatyka +
14
Slide 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
Slide 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
Witajcie na zajęciach Wszechnicy
Popołudniowej!
informatyka +
16
Slide 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
Slide 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
Slide 19
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
Slide 20
Zasada działania strony internetowej
informatyka +
20
Slide 21
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
21
Slide 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
Slide 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
Slide 24
Dlaczego warto umieć
utworzyć stronę internetową
•
•
•
•
Przyjemność
Codzienność
Oszczędność
Frajda
http://www.educationworld.com/a_books/images/first_internet.gif
informatyka +
24
Slide 25
Co można umieścić
– elementy stron internetowych
• Tekst
• Obrazy
– grafika
– zdjęcia
• Formularze
• Multimedia
• Elementy dynamiczne
– kalendarz , zegar, horoskop, pogoda …
informatyka +
25
Slide 26
Elementy stron internetowych – tekst
• Duża wartość
informacyjna
• Szybkość
wyświetlania
• Mało
atrakcyjny
informatyka +
26
Slide 27
Elementy stron internetowych
– obrazy (grafika, zdjęcia)
• Przyciąga
uwagę
• Możliwość
powiększania
zdjęć
• Szybkość
wyświetlania
informatyka +
27
Slide 28
Elementy stron internetowych – formularze
• Zbieranie
informacji od
użytkowników
– rejestracja
– ankieta
• Zamówienia
• Transakcje
internetowe
Piotr Kopciał
informatyka
+
28
Slide 29
Elementy stron internetowych
– multimedia (audio, video)
• Najbardziej
atrakcyjne
informatyka +
29
Slide 30
Elementy dynamiczne
•
•
•
•
•
•
•
•
Kalendarz
Zegar
Pogoda
Horoskop
Waluty
Giełda
Położenie
…
informatyka +
30
Slide 31
Kompozycja strony – obramowanie
• Grupowanie
informacji
• Utrzymanie
porządku
• Komponowanie
zawartości
Piotr Kopciał
informatyka
+
31
Slide 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
Slide 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
Slide 34
Projektowanie witryny 3#3
• Plan na papierze:
Piotr Kopciał
informatyka
+
34
Slide 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
http://merlin.pl/Smerf-przy-komputerze-figurka_Schleich,images_big,6,SLH-40249.jpg
informatyka +
35
Slide 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
Slide 37
Jak ludzie widzą witryny internetowe
• Internauci są
niecierpliwi
– 15 sekund
• Schemat
oglądania
strony
– 1,2,3
informatyka +
37
Slide 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
http://nwn.blogs.com/photos/uncategorized/2007/06/07/avairexp05.jpg
informatyka +
38
Slide 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
Slide 40
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
Slide 41
Język HTML – drugie spojrzenie
struktura dokumentu HTML
Prosta strona WWW
Witajcie na zajęciach Wszechnicy
popołudniowej!
informatyka +
41
Slide 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
Slide 43
Hiperłącza – przykład 1#2
Prosta strona WWW
Witaj na zajęciach Wszechnicy popołudniowej!
Więcej na temat programu Informatyka+ znajdziesz na
stronie projektu
informatyka +
43
Slide 44
Hiperłącza – przykład 2#2
stronie projektu
Piotr Kopciał
informatyka
+
44
Slide 45
Narzędzia do tworzenia stron
• Notatnik Windows
•
Piotr Kopciał
informatyka
+
Edytor HTML
45
Slide 46
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
46
Slide 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
Slide 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
Slide 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
Slide 50
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
Slide 51
Tworzenie stron dynamicznych
- języki skryptowe
Prosta strona WWW
Witaj na zajęciach Wszechnicy
Popołudniowej w dniu:
echo date("Y-m-d");
?>
informatyka +
51
Slide 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
Slide 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
Slide 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
Slide 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
Slide 56
Przykłady serwisów interaktywnych 3#4
informatyka +
56
Slide 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
Slide 58
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
58
Slide 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
– http://html.projektowanie-stron.edl.pl/
informatyka +
59
Slide 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
Slide 61
Slide 2
Plan zajęć
24h
4 dni po 6h
informatyka +
2
Slide 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
Slide 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
Slide 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
Slide 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
Slide 7
Slide 8
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
8
Slide 9
Wprowadzenie
• Internet, czyli właściwie co?
• Historia i przyszłość
• Co można znaleźć w Internecie
informatyka +
9
Slide 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
Slide 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
Slide 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
Slide 13
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
13
Slide 14
Strona w Internecie
• Podstawowe pojęcia
– strona internetowa
– język HTML
– serwer
– przeglądarka
– adres URL
• Zasada działania strony internetowej
informatyka +
14
Slide 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
Slide 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
Informatyka +
Witajcie na zajęciach Wszechnicy
Popołudniowej!
informatyka +
16
Slide 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
Slide 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
Slide 19
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
Slide 20
Zasada działania strony internetowej
informatyka +
20
Slide 21
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
21
Slide 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
Slide 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
Slide 24
Dlaczego warto umieć
utworzyć stronę internetową
•
•
•
•
Przyjemność
Codzienność
Oszczędność
Frajda
http://www.educationworld.com/a_books/images/first_internet.gif
informatyka +
24
Slide 25
Co można umieścić
– elementy stron internetowych
• Tekst
• Obrazy
– grafika
– zdjęcia
• Formularze
• Multimedia
• Elementy dynamiczne
– kalendarz , zegar, horoskop, pogoda …
informatyka +
25
Slide 26
Elementy stron internetowych – tekst
• Duża wartość
informacyjna
• Szybkość
wyświetlania
• Mało
atrakcyjny
informatyka +
26
Slide 27
Elementy stron internetowych
– obrazy (grafika, zdjęcia)
• Przyciąga
uwagę
• Możliwość
powiększania
zdjęć
• Szybkość
wyświetlania
informatyka +
27
Slide 28
Elementy stron internetowych – formularze
• Zbieranie
informacji od
użytkowników
– rejestracja
– ankieta
• Zamówienia
• Transakcje
internetowe
Piotr Kopciał
informatyka
+
28
Slide 29
Elementy stron internetowych
– multimedia (audio, video)
• Najbardziej
atrakcyjne
informatyka +
29
Slide 30
Elementy dynamiczne
•
•
•
•
•
•
•
•
Kalendarz
Zegar
Pogoda
Horoskop
Waluty
Giełda
Położenie
…
informatyka +
30
Slide 31
Kompozycja strony – obramowanie
• Grupowanie
informacji
• Utrzymanie
porządku
• Komponowanie
zawartości
Piotr Kopciał
informatyka
+
31
Slide 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
Slide 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
Slide 34
Projektowanie witryny 3#3
• Plan na papierze:
Piotr Kopciał
informatyka
+
34
Slide 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
http://merlin.pl/Smerf-przy-komputerze-figurka_Schleich,images_big,6,SLH-40249.jpg
informatyka +
35
Slide 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
Slide 37
Jak ludzie widzą witryny internetowe
• Internauci są
niecierpliwi
– 15 sekund
• Schemat
oglądania
strony
– 1,2,3
informatyka +
37
Slide 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
http://nwn.blogs.com/photos/uncategorized/2007/06/07/avairexp05.jpg
informatyka +
38
Slide 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
Slide 40
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
Slide 41
Język HTML – drugie spojrzenie
struktura dokumentu HTML
Informatyka +
Witajcie na zajęciach Wszechnicy
popołudniowej!
informatyka +
41
Slide 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
Slide 43
Hiperłącza – przykład 1#2
Informatyka +
Witaj na zajęciach Wszechnicy popołudniowej!
Więcej na temat programu Informatyka+ znajdziesz na
stronie projektu
informatyka +
43
Slide 44
Hiperłącza – przykład 2#2
stronie projektu
Piotr Kopciał
informatyka
+
44
Slide 45
Narzędzia do tworzenia stron
• Notatnik Windows
•
Piotr Kopciał
informatyka
+
Edytor HTML
45
Slide 46
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
46
Slide 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
Slide 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
Slide 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
Slide 50
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
Slide 51
Tworzenie stron dynamicznych
- języki skryptowe
Informatyka +
Witaj na zajęciach Wszechnicy
Popołudniowej w dniu:
echo date("Y-m-d");
?>
informatyka +
51
Slide 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
Slide 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
Slide 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
Slide 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
Slide 56
Przykłady serwisów interaktywnych 3#4
informatyka +
56
Slide 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
Slide 58
Plan wykładu
•
•
•
•
•
Wprowadzenie
Strona w Internecie
Tworzenie strony internetowej
Dynamiczna strona internetowa
Podsumowanie
informatyka +
58
Slide 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
– http://html.projektowanie-stron.edl.pl/
informatyka +
59
Slide 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
Slide 61