Wtryna w Internecie
Download
Report
Transcript Wtryna w Internecie
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
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
– 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
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 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
•
•
•
•
•
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
– 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
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>
<H1> Informatyka + </H1>
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, 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 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
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
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
• 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
• 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ęć
• Szybkość
wyświetlania
informatyka +
27
Elementy stron internetowych – formularze
• Zbieranie
informacji od
użytkowników
– rejestracja
– ankieta
• Zamówienia
• Transakcje
internetowe
Piotr Kopciał
informatyka
+
28
Elementy stron internetowych
– multimedia (audio, video)
• Najbardziej
atrakcyjne
informatyka +
29
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
Piotr Kopciał
informatyka
+
31
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
– 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:
Piotr Kopciał
informatyka
+
34
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 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
oglądania
strony
– 1,2,3
informatyka +
37
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
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
•
•
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 </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
<a href="http://informatykaplus.edu.pl/">stronie projektu</a>
Piotr Kopciał
informatyka
+
44
Narzędzia do tworzenia stron
• Notatnik Windows
•
Piotr Kopciał
informatyka
+
Edytor HTML
45
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
• 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
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>
<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
Piotr Kopciał
informatyka
+
54
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 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
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, 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