Tworzenie serwisow internetowych

(1)

(2)

Plan zajęć

24h

4 dni po 6h

(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

(4)

• 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).

(5)

• 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

(6)

• Mój własny serwis WWW - etap III. Testowanie, poprawianie i

prezentowanie

• Tworzenie dokumentacji projektu - etap trzeci: prezentacja działania,

wyniki testów, wnioski

(7)

(8)

Plan wykładu

• Wprowadzenie

• Strona w Internecie

• Tworzenie strony internetowej • Dynamiczna strona internetowa • Podsumowanie

(9)

Wprowadzenie

• Internet, czyli właściwie co? • Historia i przyszłość

• Co można znaleźć w Internecie

(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

(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

(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

(13)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej • Dynamiczna strona internetowa • Podsumowanie

(14)

Strona w Internecie • Podstawowe pojęcia – strona internetowa – język HTML – serwer – przeglądarka – adres URL

• Zasada działania strony internetowej

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

(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

<TITLE> Prosta strona WWW </TITLE> </HEAD>

<BODY>

<H1> Informatyka + </H1>

Witajcie na zajęciach Wszechnicy Popołudniowej!

</CENTER> </BODY> </HTML>

(17)

• Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (np. obrazkami)

(18)

• 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

(19)

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

(20)

Zasada działania strony internetowej

(21)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej

• Dynamiczna strona internetowa • Podsumowanie

(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

(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

(24)

Dlaczego warto umieć

utworzyć stronę internetową

• Przyjemność • Codzienność • Oszczędność • Frajda http://www.educationworld.com/a_books/images/first_internet.gif informatyka + 24

(25)

Co można umieścić

– elementy stron internetowych

• Tekst • Obrazy – grafika – zdjęcia • Formularze • Multimedia • Elementy dynamiczne

– kalendarz , zegar, horoskop, pogoda …

(26)

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

(27)

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

informatyka + 27

• Przyciąga uwagę • Możliwość

powiększania zdjęć • Szybkość wyświetlania

(28)

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

(29)

Elementy stron internetowych – multimedia (audio, video)

informatyka + 29

• Najbardziej atrakcyjne

(30)

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

(31)

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

(32)

„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

(33)

• 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

(34)

• Plan na papierze:

Piotr Kopciał

(35)

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

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

(37)

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

(38)

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

(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

(40)

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

(41)

Język HTML – drugie spojrzenie struktura dokumentu HTML

<BODY>

Witajcie na zajęciach Wszechnicy popołudniowej!

</CENTER> </BODY> </HTML>

(42)

Hiperłącza

• Nawigacja pomiędzy stronami • Dwa typy łączy

– odsyłacze do innych stron naszej witryny – odsyłacze do innych stron w Internecie

(43)

Hiperłącza – przykład 1#2

<HTML>

<HEAD>

<BODY>

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>

(44)

Hiperłącza – przykład 2#2

Piotr Kopciał

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

(45)

Narzędzia do tworzenia stron

• Notatnik Windows

Piotr Kopciał

• _{Edytor HTML}

(46)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej

• Dynamiczna strona internetowa

• Podsumowanie

(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

(48)

Zasada działania strony dynamicznej

• Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia

(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

(50)

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

(51)

Tworzenie stron dynamicznych - języki skryptowe

<BODY>

Witaj na zajęciach Wszechnicy Popołudniowej w dniu: <?php echo date("Y-m-d"); ?> </BODY> </HTML> informatyka + 51

(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

(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

(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

(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

(56)

Przykłady serwisów interaktywnych 3#4

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

(58)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej • Dynamiczna strona internetowa

• Podsumowanie

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

(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

(61)