Plan wykładu

Plan wykładu

• Wprowadzenie• Działanie strony internetowej

– statycznej– dynamicznej

• Tworzenie stron internetowych– technologie i narzędzia

• Projektowanie witryny– wskazówki

• Podsumowanie

informatyka + 2

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

informatyka + 3

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

Plan wykładu





• Podsumowanie

informatyka + 5

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

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


• Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami

składowymi (grafika, pliki do pobrania)

informatyka + 7


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

informatyka + 8

Zasada działania strony internetowej

informatyka + 9

• Architektura klient – serwer

Zasada działania strony dynamicznej

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

informatyka + 10

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

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

informatyka + 12

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

Plan wykładu

• Wprowadzenie• Działanie stron internetowych

– statycznych– dynamicznych



• Podsumowanie

informatyka + 14

Od czego zacząć?.. -> HTML

Piotr Kopciałinformatyka + 15

• Kurs HTML w Internecie– http://www.kurshtml.boo.pl/

• Edytor– Notepad++

http://www.kurshtml.boo.pl/

Następny krok.. -> CSS

Cascading Style Sheets – kaskadowe arkusze stylów


• Przykłady

• Kurs CSS w Internecie– http://www.kurshtml.boo.pl/css/

http://www.kurshtml.boo.pl/css/

Witryna na skróty – szablony w Internecie


http://www.opendesigns.org/

http://www.opendesigns.org/

PHP & MySQL


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

http://phpkurs.pl/

• 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


http://www.microsoft.com/express/vwd/

http://www.asp.net/learn/

Plan wykładu



• Tworzenie strony internetowej– Technologie i narzędzia


• Podsumowanie

informatyka + 20

„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

informatyka + 21

• 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 + 22

• Plan na papierze:

Piotr Kopciał


informatyka + 23

Jak ludzie widzą witryny internetowe

informatyka + 24

• Internauci są niecierpliwi– 15 sekund

• Schemat oglądania strony– 1,2,3

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ę

informatyka + 25

Elementy stron internetowych

• Tekst• Obrazy

– grafika– zdjęcia

• Formularze• Multimedia• Elementy dynamiczne

– kalendarz , zegar, horoskop, pogoda …

informatyka + 26

Elementy stron internetowych – tekst

informatyka + 27

• Duża wartość informacyjna

• Szybkość wyświetlania

• Mało atrakcyjny

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

informatyka + 28

• Przyciąga uwagę

• Możliwość powiększania zdjęć

• Szybkość wyświetlania

Elementy stron internetowych – formularze


• Zbieranie informacji od użytkowników– rejestracja– ankieta– zamówienia– transakcje

Elementy stron internetowych – multimedia (audio, video)

informatyka + 30

• Najbardziej atrakcyjne

Elementy dynamiczne

• Kalendarz• Zegar• Pogoda • Horoskop• Waluty• Giełda• Położenie• …

informatyka + 31

Kompozycja strony – obramowanie


• Grupowanie informacji

• Utrzymanie porządku

• Komponowanie zawartości

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

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

informatyka + 34

Plan wykładu



• Tworzenie strony internetowej– Technologie i narzędzia


• Podsumowanie

informatyka + 35

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

Documents

Plan wykładu