Tworzenie serwisów internetowych

Download Report

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





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



Prosta strona WWW




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



Prosta strona WWW


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


Prosta strona WWW


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