Witryna w Internecie zasady tworzenia i funkcjonowania

(1)

(2)

Plan wykładu

• Wprowadzenie

• Działanie strony internetowej

– statycznej – dynamicznej

• Tworzenie stron internetowych

– technologie i narzędzia

• Projektowanie witryny

– wskazówki

• Podsumowanie

(3)

Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+

(4)

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

(5)

Plan wykładu

• Wprowadzenie

– wskazówki

• Podsumowanie

(6)

Podstawowe pojęcia 1#3

• Strona internetowa

– wynik interpretacji dokumentu HTML • Strona a witryna, serwis, portal

• Przeglądarka

– „tłumaczy” kod HTML na postać oglądaną na ekranie

informatyka + 6

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

<BODY>

<H1> Informatyka + </H1>

Witajcie na zajęciach Wszechnicy popołudniowej!

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

(7)

• Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (grafika, pliki do pobrania)

(8)

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

• Struktura adresu URL

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)

(9)

Zasada działania strony internetowej

informatyka + 9

(10)

Zasada działania strony dynamicznej

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

(11)

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

(12)

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

(13)

Tworzenie stron dynamicznych - języki skryptowe

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

(14)

Plan wykładu

• Wprowadzenie

• Działanie stron internetowych

– statycznych – dynamicznych

– wskazówki

• Podsumowanie

(15)

Od czego zacząć?.. -> HTML Piotr Kopciał informatyka + 15 • Kurs HTML w Internecie – _{http://www.kurshtml.boo.pl/} • Edytor – Notepad++

(16)

Następny krok.. -> CSS

Cascading Style Sheets – kaskadowe arkusze stylów

Piotr Kopciał informatyka + 16 • Przykłady • Kurs CSS w Internecie – _{http://www.kurshtml.boo.pl/css/}

(17)

Witryna na skróty – szablony w Internecie

Piotr Kopciał

informatyka + 17

http://www.opendesigns.org/

(18)

PHP & MySQL

Piotr Kopciał

informatyka + 18

• PHP – ang. Hypertext Preprocessor – skryptowy język

programowania po stronie serwera używany do tworzenia dynamicznych stron internetowych

• MySQL - system relacyjnych baz danych, wspierający działanie dynamicznych stron internetowych

• Przykład

• Kurs PHP w Internecie

– _{http://phpkurs.pl/}

(19)

• ASP.NET – platforma firmy Microsoft, służąca do tworzenia

dynamicznych stron internetowych, aplikacji oraz usług sieciowych

• Microsoft Visual Web Developer 2008 Express Edition

– _{http://www.microsoft.com/express/vwd/}

• ASP.NET w Internecie

– _{http://www.asp.net/learn/}

ASP.NET & MS SQL Serwer

Piotr Kopciał

(20)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej

– Technologie i narzędzia

– wskazówki

• Podsumowanie

(21)

„Nie można kopać dołu na fundamenty, nie mając gotowego projektu domu”

• co chcę umieścić na stronie?

• do kogo strona jest adresowana?

• w jaki sposób chcę zaprezentować siebie (swoje hobby, firmę) innym?

Projektowanie witryny 1#3

(22)

• 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

(23)

• Plan na papierze:

Piotr Kopciał

(24)

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

(25)

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

• Nie wszyscy odbiorcy strony są podobni do nas • O swojej witrynie wiemy więcej niż inni

• O odbiorcy wiemy mniej, niż nam się wydaje • 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ę

(26)

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

– kalendarz , zegar, horoskop, pogoda …

(27)

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

(28)

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

informatyka + 28

• Przyciąga uwagę

• Możliwość

powiększania zdjęć

(29)

Elementy stron internetowych – formularze Piotr Kopciał informatyka + 29 • Zbieranie informacji od użytkowników – rejestracja – ankieta – zamówienia – transakcje

(30)

Elementy stron internetowych – multimedia (audio, video)

informatyka + 30

• Najbardziej atrakcyjne

(31)

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

(32)

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

(33)

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

(34)

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

(35)

Plan wykładu

• Wprowadzenie

• Tworzenie strony internetowej

– Technologie i narzędzia

– wskazówki

• Podsumowanie

(36)

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/

(37)