kurs_projektowania_

7/25/2019 kurs_projektowania_www.pdf

1/29

PPrroojjeekkttoowwaanniiee

aarrcchhiitteekkttuurryyiinnffoorrmmaaccjjii

ssttrroonnWWWWWW

Materiay do zaj:

1. Projektowanie systemw informacyjnych2.Zarzdzanie informacjw bibliotecznych

serwisach internetowych

OpracowaStanisaw SkrkaInstytut Informacji Naukowej i Bibliotekoznawstwa

Uniwersytet Pedagogiczny w Krakowie

Rok akad. 2012/13

Spis treci

I. Wstp........................................................................................... 7

II. Warsztat webmastera ................................................................. 7

III. Szablon strony WWW ................................................................ 8

IV. Wybrane znaczniki ..................................................................... 9

V. Odsyacze (linki).......................................................................... 9

VI. Wstawianie grafiki i ta............................................................ 10

VII. Tabele ..................................................................................... 11

VIII. Kaskadowe arkusze stylw(CSS - Cascading Style Sheets) ... 15

IX. Ramki........................................................................................ 17

X. Architektura informacji stron WWW ........................................ 20

DODATEK .......................................................................... ............. 25


2/29

Projektowanie stron WWW. Materiay do wicze.IINiB UP w Krakowie

2

Tylko do wasnego uytku w ramach zaj na specjalizacji

Metody pracy w bibliotece: informacja naukowa.

Instytut Informacji Naukowej i BibliotekoznawstwaAkademia Pedagogiczna w Krakowie

Materiay edukacyjne. Egzemplarz nie jest przeznaczony na sprzeda

Zebra i opracowa Stanisaw Skrka

Krakw padziernik2012

Niniejszy skrypt jest pomoc do zaj m.in. ze specjalizacji z informacjinaukowej oraz projektowania systemw informacyjnych. Powsta w oparciu ozbir liczne publikacje z tego zagadnienia oraz na bazie dowiadcze autora,ktry od kilkunastu lat zajmuje si tworzeniem stron WWW. Oprcz tegowykorzystane zostay take pozycje ksikowe wymienione w bibliografii.

Zagadnienia ujte w niniejszych materiaach nie wyczerpuj caoci problematyki

zwizanej z tworzeniem stron internetowych, zostay opracowane pod ktemwicze z projektowania stron o charakterze informacyjnym i edukacyjnym.

Praca skada si z rozdziaw powiconych poszczeglnym problemomprojektowania stron internetowych. Na pocztku zamieszczony zosta programzaj dla studentw, wraz z wyszczeglnieniem celw i umiejtnoci, jakie bdoni nabywa oraz form realizacji zaj. Na kocu tej czci znalaza si wybranaliteratura oraz odnoniki do miejsc w Internecie, gdzie znajduj si wiadomocina temat projektowania.

W poszczeglnych rozdziaach znalazy si wskazwki dotyczce oglnychwiadomoci o szkielecie dokumentu html, odnonikach, wstawianiu grafiki, tabel,ramek, arkuszy stylw. Opisano take strategi planowania architekturyinformacji serwisw internetowych.

Autor ma nadziej, i zebrane tu materiay pomog studentom w zrozumieniuzasad tworzenia funkcjonalnych stron internetowych, jak rwnie oka sipomocne w zajciach i w samodzielnej pracy.

Materiay uzupenione s o przykady tabel i stylw. Zawarto bdziemodyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii

projektowania serwisw WWW.

Wszelkie komentarze i uwagi prosz wysya na adres:[email protected]

Stanisaw Skrka
mailto:[email protected]:[email protected]:[email protected]:[email protected]


3/29


3

Metody pracy w bibliotece: informacja naukowa

Projektowanie stron WWWSyllabus

Planowany program zaj

1. Opis celw.1.1. Posugiwanie si Internetem w dziaalnoci informacyjnej i

edukacyjnej.

1.2. Zastosowanie architektury informacji w planowaniu i projektowaniu

stron i serwisw internetowych.

1.3. Poznanie jzyka HTML (HyperText Markup Language), XHTML,

CSS znajomo podstawowych poj (hipertekst, hipermedia, WWW,

DHTML, JavaScript, Script, przegldarka, edytor HTML, gif, jpeg,

odsyacz, znacznik, znaki specjalne, itp.)

1.4. Gromadzenie, opracowywanie i udostpnianie (prezentacja) informacji

w Internecie.1.5. Umiejtno tworzenia stron WWW (World Wide Web), wedug

aktualnych wymaga i standardw (tabele, ramki, style, kolorystyka).

1.6. Posugiwanie si programami komputerowymi jak np.: edytor HTML,

klient FTP, edytor tekstu i in., do projektowania strony WWW.

1.7. Wykorzystywanie grafiki z Internetu

1.8. Znajomo zasad budowy funkcjonalnych i efektywnych w uyciu

serwisw WWW

1.9. Wykonanie samodzielnie serwisu internetowego biblioteki

2. Opis treci

2.1. Wprowadzenie do programowania. Cechy jzyka HTML, XHML

zasady tworzenia dokumentu hipertekstowego. Podstawowe polecenia

(znaczniki, ang. tags).

2.1.1. charakterystyka jzyka HTML 4.01 i jego wersji, rola W3C w

rozwoju jzyka.

2.1.2. podstawowe elementy strony WWW (html, head, title, body,

meta)

2.1.3. sposb kodowania polskich znakw, opis zawartoci treciowej strony

(sowa kluczoweKeywords, opisDescription)

2.1.4. etykieta webmastera, czyli zasady, jakimipowinien si kierowa

projektant stron WWW.

2.1.5. zaprojektowanie prostej strony w oparciu o kED 2.X edytor stron

WWW

2.1.6. porwnanie sposobu prezentacji tego samego dokumentu wprzegldarkach Mozilla, Opera i Internet Explorer

2.2. Projektowanie strony. Uycie odsyaczy (odnonikw, hiperczy - ang. links).

Wykazy (listy numerowane i nienumerowane). Obsuga edytora stron WWW

kED.

rola odsyaczy w dokumencie hipertekstowym,

rodzaje odnonikw: etykieta (kotwica), odsyacz

konstrukcja odnonikw:

;

posta odnonika (tekst, ilustracja, animacja).

stosowanie wykazw (list uporzdkowanych i nieuporzdkowanych),

Zadania:

1. Wykonanie strony na wybrany temat

2. Przygotowanie projektu pracy zaliczeniowej

2.3. Elementy Kaskadowych arkuszy stylw, wykorzystanie skryptw jzykaJavaScript na stronie WWW.

2.3.1. rodzaje stylw: a\ doczone do zewntrznego arkusza (plik.css)b\ zagniedone

c\ importowane

d\ lokalne

e\ klasy i identyfikatory

class=klasa; ID=identyfikator)

f\ rozciganie stylu, bloki

;


4/29


4

przykady skryptw i ich rola w dokumencie hipertekstowym

2.4. Wykorzystanie grafiki na stronie WWW. Programy graficzne i

podstawy ich obsugi. Formaty plikw graficznych: .gif, .jpg.

wady i zalety stosowania grafiki w dokumencie HTML,

wstawianie grafiki do dokumentu:

poznawanie programw graficznych, Paint Shop Pro,Micrografx, podstawowe operacje przy obrbce ilustracji dla

strony hipertekstowej,

sposb prezentowania grafiki w sieci, formaty plikw i rnice

pomidzy nimi: gif (256 kolorw), jpeg (16 mln kolorw)

to w dokumencie, kolor i grafika jako to.

Zadanie:

Projektowanie strony biblioteki/orodka informacji(praca zaliczeniowa)

Forma realizacji: praca indywidualna studentw

3. Materiay wytworzone przez uczestnikw zaj.

Podstawowym materiaem wykonanym na wiczeniach bdzie samodzielnie

opracowany i zaprojektowany zbir stron skadajcy si z kilku dokumentw

WWW poczonego hipertekstowo z zastosowaniem wyej wymienionych

elementw jzyka HTML. Praca ta zostanie przygotowana na dyskietce lub na

komputerze w pracowni, a nastpnie oddana do zaliczenia

Ocena serwisu wykonanego przez studenta bdzie redni z trzech ocen wedug

kryteriw zaliczanych do architektury informacji: ocena za system organizacji

treci, za system nawigacji i za szat graficzn (layout)

Zaprojektowane strony mog by powizane wedug czterech sposobw: sekwencyjnie:

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

Eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeee

Oooooooooosss

ssssssssssooooo

ooooos,lmncfjdjd

jdjdjdjdjdididkcici

c i i i i i i i i

icidisixkxkxixicic

ickc

hierarchicznie:

jjjjjjjjjjjjjjjjddddddddddddddjhhhhhhhhhhhhhhhheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeIiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

hhhhhhhhhhhhhhhhhhhhhhhhhh

hhhhhhhhhhhhh

hhh

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeeeeeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeee

seryjnie:

yyyyyyyyyyyyy

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Ggggggggggggg

ggggggggggggggggggggggg

hhhhhhhhhhhhh

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

hhhhhhh

Lllllllllllllllllllll

llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll

llllllllllllllllllllllgggggggggggggggggggggggggggggg

ggggggggg

sssssssssssssssssssssssssdddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddd

wirtualnie:

Ffffffffffffffffff

fffff333eeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeeeeeeeeeeeeeeee

eeeeeeefffffffff

ffffffffffff333

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeefffffffffff

ffffffffffffffffffffffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

ffffffffffffff

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhfffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffff

uuuuuuuuuuuuu

uuuuuuuuuuuuu

uuuuuuFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFYYYYY

YYYYYYYY

Y

Wykonane strony bd dotyczy konkretnej dziedziny lub zjawiska zwizanego z prac

dydaktyczn i informacyjn biblioteki.

4. Umiejtnoci nabyte podczas zaj.

Do podstawowych umiejtnoci, jakie student powinien opanowa naley:

1/ Projektowanie dokumentw hipertekstowych zgodnie z aktualn specyfikacj jzyka

HTML.

2/ Planowanie projektu stron oraz przebiegu pracy

3/ Wykorzystywanie elementw multimedialnych (ilustracja, dwik, film i animacja) do

wzbogacenia treci strony.

4/ Odnajdywanie informacji w Internecie.

5/ Znajomo podstaw architektury informacji dla stron WWW

6/ ciganie i wysyanie plikw za pomoc klienta FTP.


5/29


5

7/ Posugiwanie si witryn WWW w zakresie gromadzenia, przec howywania i

prezentowania informacji, oraz wykorzystywanie Internetu w dziaalnoci

dydaktycznej i informacyjnej biblioteki lub orodka informacji.

5. Ocena kursu

51-60 pkt.ocena dst

61-70 pkt.ocena + dst71-80 pkt.ocena db

81-90 pkt.ocena + db

91-100 pkt.ocena bdb

6. Prace studentw- opracowanie planu serwisu internetowego (10)

- przygotowanie projektu organizacji serwisu (15)

- przygotowanie projektu nawigacji serwisu (15)

- zaprojektowanie ukadu elementw na stronach (layout) (15)

- wykonanie serwisu internetowego (min. 5 stron) (30)

Na ostateczn liczb punktw wpywa rwnie poziom przygotowania studentana zajciach oraz frekwencja.

7.Literatura zalecana

Ksiki:

1. S. Krug: Nie ka mi myle. O yciowym podejciu do funkcjonalnoci

stron internetowych. Gliwice 2006. Wyd. 2.

2. E. Meyer, CSS wg Ericha Meyera. Gliwice 2005

3. J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarzdzanie.

Gliwice 2004.

4. J. Nielsen: Projektowanie funkcjonalnych serwisw internetowych.Gliwice 2003.

5. L. Rosenfeld, P. Morville: Architektura informacji w serwisach

internetowych. Gliwice 2003. Wyd. 2.

6. R. Williams,Jak skada tekst? Komputer nie jest maszyn do pisania.

Gliwice 2003. Wyd. 2

7. M. Pearrow:Funkcjonalno stron internetowych. Gliwice 2002.

8. B. Danowski,Kaskadowe arkusze stylw. wiczenia praktyczne. Gliwice 2001

9. Z. Poski,Komputer, Internet. Szkolny sownik. Wrocaw 2001

10. R. Patek, Z. Oko,Pajczek najlepszy polski edytor stron WWW. Gliwice 2000.

11. B. Danowski,,HTML 4. wiczenia praktyczne. Gliwice 2000

12. M. Sok, Tworzenie stron WWW. wiczenia praktyczne. Gliwice 2000

13. D. Siegel: Tworzenie stron WWW. Bielsko-Biaa 1998

14. J. Szaniawski:Duy sownik informatyczny. Warszawa 199715. P. Wimmer:HTML stare i nowe. Warszawa1997

16. M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Uyteczno w

praktyce. Gliwice 2008.

Kada ksika opisujca metodyk tworzenia stron WWW w jzyku HTML 4.0,

XHTML i CSS

Czasopisma:

1. HTML i Java. Chip Special.1997 nr 3 (kwiecie).

2. M. Pawlak:HTML po raz czwarty //W: Chip 1998 nr 2,s. 128-137

3. M. Pawlak:Internetowe DTP //W:Chip 1998 nr 3, s. 152-156.

4. Kurs jzyka HTML w odcinkach w miesiczniku CHIP, numery: 5/98, 6/98,

7/98, 8/98, 10/98 (5 odc.)

5. K. Grzenkowicz: Grafika dla webmastera.. W:Magazyn Internet, nr 6-12/98 i

1/99 (8 odc.)

6. Strony WWW bez tajemnic. CHIP Specialnr 13 (36), grudzie 1999.

7. J. Rafa, Poradnik praktyczny. Cz 5. Tworzenie stron WWW. Magazyn

Internetnr 6/2002

8. Mj serwis WWW. CHIP2004 nr 2, s. 22-46

Strony WWW (Netgrafia):

1. CSS Templates [http://www.ssi-developer.net/main/templates/]

2. Dynamic Drive CSS Library: [http://www.dynamicdrive.com/style/]

3. Eric Meyer on CSS [http://www.ericmeyeroncss.com/dloads/]

4. Kurs jzyka HTML P. Wimmer: [webmaster.helion.pl]

5. WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm]


6/29


6

6. BRAMA - informacje na temat projektowania stron WWW P.

Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml]

7. WEBMASTERczasopismo online dla profesjonalnych twrcw

stron WWW: [webmaster.pckurier.pl]

8. WebReporter: [web.reporter.pl/html]

9. Test dziaania skadni HTML: web.reporter.pl/html/testy/10.Designing Web Navigation:

[www.webreference.com/dlab/9705/index.html]

11. Artyku:Architektura informacji. Nowy kierunek rozwoju

informacji naukowej. [ebib.oss.wroc.pl/2002/40/skorka.php]

Opracowa dr Stanisaw Skrka

Notatki
http://web.reporter.pl/htmlhttp://web.reporter.pl/htmlhttp://web.reporter.pl/html/testy/http://web.reporter.pl/html/testy/http://www.webreference.com/dlab/9705/index.htmlhttp://www.webreference.com/dlab/9705/index.htmlhttp://www.webreference.com/dlab/9705/index.htmlhttp://www.webreference.com/dlab/9705/index.htmlhttp://web.reporter.pl/html/testy/http://web.reporter.pl/html


7/29


7

I. WstpStrona WWW jest plikiem tekstowym zapisanym najczciej w formacie html(ale moe to by take php,shtml, i inne) aby zaprojektowa stron wystarczyzwyky Notatnik z Windows, by mc oglda jej zawarto potrzebna jestprzegldarka stron WWW (Internet Explorer, Mozilla, Netscape).Sie zoona ze stron WWW wzajemnie poczonych za pomoc odsyaczyhipertekstowych (linkw) nazywana jest World Wide Web (globaln pajczyn)

Skrt html oznacza jzyk projektowania: Hypertext Markup Language (jzykhipertekstowego znakowania dokumentw), aby strona bya widoczna wprzegldarce trzeba j zapisa jako plik .html, np.: index.html, default.html,itp.

Aby przygotowa wasn stron (witryn) przede wszystkim naley zaplanowaprzebieg pracy, mona to zrobi opierajc si na nastpujcych fazach:

1. Faza analityczno-projektowa analiza wymaga ustalenie zasad pracy plan realizacji projekt podziau treci i szaty graficznej projekt nawigacji i rozmieszczenia elementw na stronie

(layout)2. Realizacja projektu3. Testowanie i wdroenie4. Promocja5. Zarzdzanie i aktualizacja

Wicej na ten temat w rozdziale X. Architektura informacji

Projektowanie w jzyku HTML polega na formatowaniu tekstu za pomocznacznikw (tags), s dwa rodzaje znacznikw: blokowe (wystpuj parami,np.:
), oraz elementowe (pojedyncze, np.:
). Dziaanieznacznika blokowego obejmuje tekst, ktry jest nim ujty, np.:
to jest tekst pogrubionyZnaczniki oznaczaj pogrubienie tekstu, ktry znajdzie si pomidzy nimi.

Znacznik elementowe dziaaj w jednym miejscu w dokumencie, np.:

to jest tekst pogrubiony,
a to jest kursywa

-przejcie do nastpnej linii. Znacznik formatuj tekst na postakursywy

W obrbie znacznikw, zarwno blokowych, jaki elementowych znajdowa si mogatrybuty dokadniej charakteryzujce dany element, np. ilustracj

Atrybuty:

src- nazwa pliku graficznego, np.: logo.gifwidthszeroko obrazka,heightwysoko obrazkabordergrubo ramki wok obrazkaalttekst zastpczy

Wicej na ten temat w rozdziale IV. Wybrane znaczniki

Wicej na ten temat w rozdziale VI. Wstawianie grafiki i ta

Atrybuty s przydatnym narzdziem dla webmastera ze wzgldu na moliwosprecyzowania wygldu danego elementu na ekranie, przy jednoczesnym uniemoliwieniuwstawiania wartoci domylnych przez przegldark. Uywanie atrybutw skraca czasadowania si strony w oknie przegldarki. Najwicej moliwoci formatowania dajjednak kaskadowe arkusze stylw.

Wicej na ten temat w rozdziale VIII. Kaskadowe arkusze stylw

II. Warsztat webmastera

Do projektowania stron internetowychpotrzebne s programy, z ktrych dua cze jestdostpna za darmo, niestety czasem nie idzie to w parze z j akoci.

1. Edytor stron WWW, np.: kED, EzHTML (darmowy), Pajczek, WebPager, Xpress(darmowy), lub edytor tekstu (Notatnik Windows),

2. Przegldarki WWW, co najmniej dwie: Mozilla Firefox, NetscapeNavigator/Communicator 6.x (pol. wersja Mozilla 1.x) i MS Internet Explorer PL 6.x

3. Program do obrbki grafiki rastrowej: Paint Shop Pro, , Adobe Photoshop, GIMP(freeware), PaintNET (freeware)


8/29


8

4. Jeeli edytor stron WWW nie ma takiej opcji, to naley jeszcze zaopatrzysi w konwerterz Win-1250 (Latin 1) na stron kodow ISO 8859-2 (Latin2)Ogonki 97

Dodatkowo:

5. Program do tworzenia gifw animownych: Jasc Animated Shop 2.02, GifDispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63

6. Galeri clipartwzbir adresw do grafik, ilustracji, tekstur i innychprzydatnych na stronach WWW obrazkw, dostpnych w Internecie podadresem:

http://webmaster.helion.pl/kurshtml/zasoby/grafika.html

http://www.kathais.px.pl/AGWWW/AGWWW.html

III. Szablon strony WWW

Podstawowy szablon dokumentu HTML przedstawia Rys. nr 1. Jest to tylkoosnowa, aby dokument zawiera tre lub grafik na ekranie, naley wstawi

odpowiednie znaczniki w sekcji .

Strona WWW zaczyna si i koczy znacznikiem , wewntrz znajdujsi dwie oddzielne sekcje , czyli gowa i -ciaodokumentu.

W sekcji HEAD umieszcza si tzw. metainformacj(informacj o informacji)o stronie, znaczniki , ich zadaniem jest przechowywanie informacji otreci strony:Description, Keywords, autorze strony Author, stronie kodowejContent-type, jzyku treci strony Content-language. Informacje te sprzydatne midzy innymi dla zindeksowania strony przez tzw. robotywyszukiwarek, co pozwala na ich odnalezienie za pomoc wyszukiwarek

internetowych (Google, Szukacz, itp.)

Rys. 1 Szablon dokumentu html

Strona WWW

Tytu strony

Znacznik akapitu

Rys. 2: Budowa hierarchiczna dokumentu HTML
http://webmaster.helion.pl/kurshtml/zasoby/grafika.htmlhttp://webmaster.helion.pl/kurshtml/zasoby/grafika.htmlhttp://www.kathais.px.pl/AGWWW/AGWWW.htmlhttp://www.kathais.px.pl/AGWWW/AGWWW.htmlhttp://www.kathais.px.pl/AGWWW/AGWWW.htmlhttp://webmaster.helion.pl/kurshtml/zasoby/grafika.html


9/29


9

Hierarchia dokumentu html zawiera:

Drzewo dokumentu (document tree) - hierarchiczny ukad elementwHTML zakodowanych w dokumencie; kady element ma dokadniejednego rodzica, oprcz elementu najwyszego w hierarchii.

Dziecko (child) - element bdcy o jeden szczebel niej w drzewie wstosunku do danego elementu.

Potomek (descendant) - element bdcy o jeden lub wicej szczebli

niej w drzewie w stosunku do danego elementu. Rodzic (parent) - element o jeden szczebel wyej w drzewie w

stosunku do danego elementu.

Przodek (ancestor) - element bdcy o jeden lub wicej szczebli wyejw drzewie w stosunku do danego elementu.

Brat (sibling) - element majcy tego samego rodzica co inny element;jeli znajduje si obok niego, to jest to brat przylegajcy (adjacentsibling).

IV. Wybrane znaczniki

Znaczniki blokowe

pozycja 1 lista numerowana

pozycja 2

wypunktowanie

Znaczniki elementowe

V. Odsyacze (linki)

Odsyacze s podstawowym narzdziem nawigacji, dziki ktremu moliwe jest poruszaniesi pomidzy stronami. Istnieje wiele podziaw hiperczy, w jednym z nich wyrnia siodsyacze semantyczne (OS) i organizacyjne (OO). OS kieruj do tekstu lub dokumentu opodobnej tematyce, OO umoliwiaj poruszanie si po poziomach i rozdziaach w danejhiperprzestrzeni. Z punktu widzenia webmastera odsyacze mona podzieli wg kryteriumzastosowania. I tak, wyrnia si odsyacze kierujce do:

a) stron WWW (zewntrzne)b) usug sieciowych (e-mail, ftp, CHAT)

c) etykiet (tekstu w obrbie dokumentu - wewntrzne)d) innych dokumentw, np.: txt, PDF, doc, itp.

Ad. a)hipercze do stron(y) WWW moe mie dwojak posta:

- wzgldn

etykieta odsyacza


10/29


10

- bezwzgldn

szablon strony www

HREFskrt od hypertext reference

TITLEopis odsyacza, informacja, dokdkieruje

Ad. b)odsyacz uruchamiajcy klienta poczty elektronicznej

[email protected]

- uruchamiajcy sesj FTP:

serwer ftp

Ad. c) Skada si z dwch czonw:

- odsyajcego (np.: jako fragment spisu treci):rozdzia 1

- etykietyumieszczonej gdzie na stronierozdzia 1

Najpopularniejsze zastosowanie to spisy treci i powrt na pocztek strony:

pocztek strony

W przegldarce MSI E od Wer. 6.x nie j est konieczne zastosowanie etykiety

Ad. d) kieruje do dokumentu nie bdcego stron WWW, takich jak: txt, docczy pdf , np.:

referat w wersji

on-line

Adresy stron WWW powinny by pisane maymi literami bez polskich znakw,

podobnie nazwy plikw html.

VI. Wstawianie grafiki i taPliki graficzne mog by udostpniane na stronie WWW w formacie GIF (do 256 kolorw)i JPG (16 mln kolorw). Format GIF nadaje si do napisw, poniewa potrafi zachowaprzezroczyste to, ale ma ma liczb kolorw. Format JPG jest najlepszy do kolorowejfotografii i obrazw.

1.Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma nastpujc posta: IMG - skrt od sowa image (ilustracja),SRC - skrt od sowa source (rdo)

2.Warianty wywietlania ilustracji:* wielko modyfikujemy atrybutami:width(szerokoc) i height(wysoko),

jednostk miary s piksele

Np.

- atrybuty te przyspieszaj adowanie si obrazka .

obramowanie: parametr BORDER=xpozwala wywietli wok obrazkaramk o gruboci rwnej x pikseli:

Np.- gdy ilustracja jest odsyaczem parametr BORDER: 0pxspowoduje, e nie pojawi siramka wok ilustracji.

* odstpy od tekstu:parametryVSPACE(vertical space) i HSPACE(horizontalspace) pozwalaj ustali odlego obrazka, w pikselach, od oblewajcego go tekstu:

Np.

- ten obrazek jest oddalony 50 pikseli od tekstu w poziomie

pozycjonowanie obrazka (CSS):specjalny zesp parametrw,text-align:left/rightlub float: left/rightsteruje pozycj obrazka w stosunkudo oblewajcego go akapitu. Konstrukcja ma posta


11/29


11

Np. lub oblewanie tekstu zprawej strony

Jeli obrazek ma by na rodku strony to naley uj go pomidzy znaczniki :

Due ilustracje mona pokroi na okrelon liczb kawakw, a nastpniewstawi jedo tabeli, pozwoli to na szybsze adowanie si caego obrazka.

Wicej na ten temat w rozdziale VII. Tabela pkt. 3.

Aby przyspieszy adowanie si grafiki mona na stronie poprzedzajcejwstawi znacznik ilustracji z atrybutami szerokoci i wysokoci rwnymi 1,np..:

3. To na stronie WWW.Definiujc moemy wstawi parametr, ktry zadecyduje o graficznejpostaci strony.

albo kolor

Np.


12/29


12

Aby tabela zawieraa obramowanie, wystarczy rozszerzy definicj o atrybutBORDER=n, gdzie n -liczba pixeli.

Niekiedy wycza si obramowania, gdy dodatkowe linie wpywaj ujemniena jej czytelno. Zamiast obramowania najlepiej jest wyrni tekst wkomrkach: pogrubieniem, kursyw lub inn czcionk itd.. Efekt bezobramowa osiga si poleceniem: BORDER=0

2. Odstpy wewntrz tabeli. Wyrwnanie danych w komrkach

Kolejnym atrybutem pozwalajcym modyfikowa wygld tabeli jestCELLSPACING- odlego midzy komrkami, czyli gruboobramowania, jelijest ono widoczne.Mona go uy wwczas, gdykomrki (nie tabela) maj zawiera inneobramowanie ni domylne. Innym atrybutem znacznika TABLEjestCELLPADDING- odstp zawartoci komrki od obramowania. Obydwaatrybuty dziaaj na wszystkich czterech cianach komrki. Np.:

Zarwno ca tabel, jaki i zawarto w jej komrkach (celach) mona ustawiaw poziomie i pionie. Pierwszy sposb zapewnia atrybutALIGN, uycie gorazem ze znacznikiem TABLEpowoduje wyrwnanie caej tabeli, wiersza,komrki. W pionie ustawiamy zawarto poprzez atrybut VALIGN

Np.:

Ta tabela bdzie znajdowaa si przy prawym marginesie (zob. poniej), innepolecenia:left(lewy)icenter (rodek)

wiersz 1

wiersz 2

Dane w tej komrce przesun si do lewego marginesu, to samo mona zaprojektowa dlakolumny w obrbie wiersza.Np.

Oprcz wyrwnania poziomego dane w kolumnach moemy wyrwnywa pionowo zapomocparametru VALIGN, ktry moe przybiera nastpujce wartoci: top (gra).middle (rodek), bottom (d).

3. Szeroko i wysoko tabeli

Aby okreli szeroko tabeli w obrbie znacznika TABLEumieszcza si atrybut WIDTH.Warto tego parametru mona wyrazi w procentach (wielko wzgldna) lub pikselach(wielko bezwzgldna)Np.

lub

Wysoko tabeli oznacza si atrybutem HEIGHT

Wielkoci bezwzgldne najlepiej jest stosowa, gdy w komrkach tabeli znajduj sielementy obrazka, w przeciwnym wypadku pojawi si przerwy pomidzy kawakamiobrazka.

gra

rodek

d


13/29


13

Rys. nr 3

Wielkoci wzgldne dopasowuj si do okna i rozdzielczoci monitora, najlepiejje stosowa, gdy w tabeli znajduje si tylko tekst.

4. Atrybuty COLSPANi ROWSPAN

COLSPAN - liczba kolumn, na ktre rozciga si komrka(przykad nr 1)ROWSPAN - liczba wierszy, na ktre rozciga si komrka(przykad nr 2)

Przykad nr 1kolumny poczonekolumna lewa

kolumna prawa

Widok:

Kolumny poczone

Kolumna lewa Kolumna prawa

Przykad nr 2:

wiersze poczonekomrka grna

komrka dolna

Widok:

Wiersze

poczoneKomrka grna

Komrka dolna

5. Tabele i arkusze stylwTabel mona zaprojektowa take za pomoc stylw, co pozwala na precyzyjniejsze jejdostosowanie do wasnych celw.Kademu elementowi tabeli (komrce, ramce) mona nada inn posta.Poniej zamieszczono cechy oraz ich wartoci przydatne przy projektowaniu tabel.

border-bottom-style- styl okrela wygld dolnej ramkiborder-left-style- styl okrela wygld lewej ramkiborder-right-style- styl okrela wygld prawej ramkiborder-top-style- styl okrela wygld grnej ramki

Wartoci stylu:

none- nie ma ramki, warto domylnahidden- linia ukrytadotted- linia skadajca si z kropekdashed- linia skadajca si z kreseksolid- linia tradycyjnagroove- linia wklsa przestrzennaridge- linia wypuka przestrzennainset- linia wklsaoutset- linia wypukadouble- linia podwjnainherit- przejcie wartoci "rodzica",

border-left-width- styl okrela szeroko lewej ramki-right-width-bottom-width-top-width

border-bottom-color- styl okrela kolor dolnej ramki-left-color- styl okrela kolor lewej ramki-right-color- styl okrela kolor prawej ramki

-top-color- styl okrela kolor grnej ramki
http://web.reporter.pl/html/?id=3014http://web.reporter.pl/html/?id=3014http://web.reporter.pl/html/?id=3019http://web.reporter.pl/html/?id=3019http://web.reporter.pl/html/?id=3023http://web.reporter.pl/html/?id=3023http://web.reporter.pl/html/?id=3028http://web.reporter.pl/html/?id=3028http://web.reporter.pl/html/?id=3020http://web.reporter.pl/html/?id=3020http://web.reporter.pl/html/?id=3013http://web.reporter.pl/html/?id=3013http://web.reporter.pl/html/?id=3018http://web.reporter.pl/html/?id=3018http://web.reporter.pl/html/?id=3022http://web.reporter.pl/html/?id=3022http://web.reporter.pl/html/?id=3027http://web.reporter.pl/html/?id=3027http://web.reporter.pl/html/?id=3027http://web.reporter.pl/html/?id=3022http://web.reporter.pl/html/?id=3018http://web.reporter.pl/html/?id=3013http://web.reporter.pl/html/?id=3020http://web.reporter.pl/html/?id=3028http://web.reporter.pl/html/?id=3023http://web.reporter.pl/html/?id=3019http://web.reporter.pl/html/?id=3014


14/29


14

Przykad1. Tabela z zastosowaniem stylw

komrka lewa

komrka prawa

Przykad 2

Pojedyncza komrka

Tabel mona konstruowa take za pomoc znacznika DIV:

Komrka tabeli

NOTATKI

Wicej na ten temat w rozdziale VIII. Kaskadowe arkusze stylw


15/29


15

VIII. Kaskadowe arkusze stylw

(CSS - Cascading Style Sheets)

Oglne polecenie stylu ma posta: selektor { cecha: warto} lub bardziejrozbudowan: selektor { cecha1: warto1; cecha2: warto2}.Gdzie selektorem jest po prostu polecenie jzyka, np. P, LI, TD, BODYitd.Cech jest pewna wasno danego znacznika, np. wielko i styl czcionki dlaakapitu. Warto konkretyzuje cech, np. 12ptczy bolddla czcionki.

Przykad nr 1P {font-family: Trebuchet MS }

Selektorem jest P, cech - rodzina czcionek, wartoci - Trebuchet MS.

Style mog by umieszczane w dokumencie na kilka sposobw:

1. Kody formatujce s umieszczane na pocztku strony i oddziauj na caydokument.NP.: Fragment nagwka dokumentu z definicjznacznikw BODY i P

2. Kody formatujce s umieszczane w rodku tekstu (in-line style) i dotyczwybranego znacznika dokumentu (styl lokalny).NP.: Waciwoci ujte w cudzysw dotycz tylko czci dokumentu objtej

znacznikami

Tre akapitu

3. Klasy, obejmuj dowolny fragment dokumentu i nie s zwizane z wybranymiznacznikami.

NP.: Daj duo moliwoci webmasterowi, pozwalaj dowolnie manipulowa akapitamina stronie WWW. U dou klasy dla znacznika

, rozpoczynaj si od kropki.

p.normalny {font-family: helvetica; font-size: 10pt}

.przypisy {font-family: helvetica; font-size: 8pt}

.uwagi {font-family: helvetica; font-size: 10pt; font-

weight: bold}.istotne {font-family: georgia, serif; font-size: 12pt;color: red}

.ustaw {position: absolute; left: 2px; top: 3px; right:10px; bottom: 10%}

Jaki tekst

W gwnej czci dokumentu klasa zostaje wstawiona w obrbie nawiasw

4. Kody formatujce s umieszczane na wzorcowych stronach na serwerze, aw dokumentach wstawiamy odpowiednie odwoania do tych stron, copowoduje automatyczne zmiany sposobu formatowania. S to odwoania dotzw. stylw zewntrznych.

NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane rne elementy, takie jak:body, p., a, h1-h3, td, li

Zagniedanie arkusza stylw

body {margin-top: 0px; background-color: #ffffff; color:

#000000; scrollbar-face-color: #d8c094;

scrollbar-highlight-color: #aab0bf;

scrollbar-3dlight-color: #271e0e;

scrollbar-darkshadow-color: #c0dcc4;

scrollbar-shadow-color: #271e0e;

scrollbar-arrow-color: #000000;

scrollbar-track-color: #425241;}

p {font-size: 10pt; font-family: Georgia, helvetica; font-weight:normal}


16/29


16

body {background-image: url(folder/plik.jpg);

background-repeat: no-repeat; background-position:center; background-attachment: fixed;; margin-left:

1cm; margin-right: 1cm; margin-top: 1cm}

p {font-family: "arial", verdana, helvetica; font-size: 10pt;

font-weight: normal; text-indent: 3 em}

a {text-decoration: none; font-weight: bold}a:link{color:#000000}

a:active{color:#660000}

a:visited{color:#666600}

a:hover{color:#0066ff}

h1 {font-size: 16pt; font-family: verdana, arial, helvetica;font-weight: bold; color: #000000}

h1 span {font-size: 14pt; color: navy}h2 {font-size: 14pt; font-family: arial, helvetica; font-

weight: bold; color: #181539}h3 {font-family: arial, helvetica; font-weight: bold; color:

#181539}

table, tr, td {font-family: arial, helvetica; font-size: 10pt;font-weight: normal}

li {font-family: "arial", helvetica; font-size: 10pt; font-

weight: normal}

#center{text-align: center}

.maly {font-size: 8pt}

.italic {font-style: italic}

Dokument ten znajduje si na serwerze pod podan wyej nazw, korzystaj zniego wszystkie te strony, ktre w nagwku maj nastpujcy zapis:

5. Kody formatujce s importowane z innej strony za pomoc polecenia@import.

Np.: Podany jest adres bezwzgldny do arkusza stylw mojstyl.css

@import url("http://www.polbox.com.pl/style/mojstyl.css");

Przyklad interaktywnego menu

1

#menu {margin: 0 0 0 0; width: 200px; border-right: 1px dotted; }

#menu ul {list-style-type: none; margin: 0; padding: 0}

#menu li a {padding: 3px 3px 3px 5px; display: block; background: #09C; border-

bottom: 1px solid #fff; height: 35px; font: 9pt 'Trebuchet MS',

'Lucida Grande', Arial, sans- serif; color: #fff; text-decoration: none;

border-right: 5px solid #42D0FF}

#menu li a:visited {color: #DBE3F7}

#menu li a:hover {background: #F60; color: #000; border-right: 5px solid #fff}

Okadka

Karty tytuowe

Materiay wprowadzajce

Tekst gwny

Materiay uzupeniajce tekst gwny

Materiay informacyjno-pomocnicze

poprzednianastpna &raquo


17/29


17

IX. RAMKI

1. Wstp

Ramki uatwiaj nawigowanie w wielostronicowych dokumentach HTML,pozwalaj na przegldanie wielu dokumentw rwnoczenie (tzw. formatmetadokumentowy). Aby uy tej nowej formy prezentacji dokumentw WWWtrzeba utworzy zbir ramek na stronie podstawowej *.html, na ktrej

definiujemy liczb, wielko i pozycj ramek oraz zachowanie si innychdokumentw w momencie uaktywnienia odsyacza hipertekstowego. Pozostaestrony, wchodzce w skad caego, wielostronicowego dokumentu, s stronamipodrzdnymi.

Na podstawowej stronie nie powinno by adnych znacznikw poza blokiemnagwkowym i definicj samych ramek. Dopiero znacznikiNOFRAMESpozwalaj umieci tre, ktra bdzie wywietlana przez przegldarkinieinterpretujce ramki. Znaczniki mog by umieszczanejedynie w obrbieNOFRAMES.

2. Ramki w postaci kolumnKady z wydzielonych w pliku gwnym obszarw jest zajmowany przezokrelon stron. U dou przykad strony podstawowej, objtej znacznikamiFRAMESET zamiast BODY, zawierajcej podzia na dwie kolumny -parametrCOLS dzieli ekran kolumny - pierwsza od lewej o szerokoci 25% ekranu,druga o rozmiarach dalszych (75%).

Znacznik FRAME i parametr SRC przypisuje okrelonym czciom ekranuzawarto (czyli strony WWW), atrybut SCROLLING steruje wywietlaniempaskw przewijania i moe zawiera warto: auto, yes, no.NAMEoznacza nazw dla okrelonej czci ekranu.

Ramki

wiczenie 1:Przepisz przykad strony zlewej nadajc mu nazwokno.htmW miejsce nazwstrona.htm i strona2.htm wpisz nazwy dwch stron utworzonych na poprzednichzajciach.Zobacz w przegldarce jak wyglda strona okno.htm. Powinny by widocznedwie poprzednio wprowadzone strony

3. Ramki w postaci wierszy

Podobny schemat z wyjtkiem polecenia COLS moemy zastosowa dla innego podziauekranu. Parametr ROWSdzieli ekran na wiersze.

wiczenie 2:Przepisz poniszy przykad strony podstawowej dla ramek i nadaj jej nazwokno2.htm.Dalej postpuj tak jak w wiczeniu nr .

Ramki z wierszami

4. Ramki wielodokumentowe

Objanienie (do listingu poniej)

W pierwszej linii otwieramy dokument. Konstrukcj ramek rozpoczto od zadeklarowaniaw drugiej linii liczby wierszy (trzy). W trzec iej linii od razu wstawilimy ramk zprzypisan jej stron, gdy wiersz nie ulega adnemu podziaowi.


18/29


18

W czwartej linii ponawiamy definicj FRAMESET(niszego rzdu), dzielcdrugi wiersz na trzy kolumny.

W pitej, szstej isidmej linii wstawiamy definicje konkretnych trzech ramek

dla drugiego wiersza, przypisujc im odpowiednie strony.

W smej linii musimy zakoczy t "lokaln" definicj FRAMESET.

W dziewitej linii tworzymy definicj ramki dla trzeciego wiersza, przypisujcjej odpowiedni stron.

W dziesitej linii koczymy "globaln" definicj FRAMESET. W jedenastej caydokument.

wiczenie 3:Przepisz powyszy kod dla ramki wielodokumentowej. Zamiast nazwstronaN.htm (N - numer) wpisz nazwy stron, ktre zostay zaprojektowane,

zmodyfikuj wygld tych stron, tak aby byy prawidowo wywietlane w ramce(formatowanie tekstu, zmniejszenie czcionki itd.)

5. OdsyaczeCo zrobi, aby kliknicie na odsyaczu w jednej ramce automatycznie adowaoodpowiedni stron w innej ramce? Jest to podstawowa sprawa, jeli chcemywykorzysta ramki w dokumentach. Zauwamy, e kliknicie na odsyaczu wspisie treci w lewej ramce powoduje zaadowanie dokumentu do prawej ramki,a nie do ramki ze spisem treci. W tym miejscu wykorzystujemy nazwy, ktrenadawalimy poszczeglnym ramkom.

Powrmy do przykadu przedstawionego wyej w wiczeniu nr 1. Strona ta skada si zdwch ramek. Lewa zawiera spis treci, natomiast do prawej s adowane odpowiedniestrony z opisami. Lewej nadalimy nazw lewa_cz, natomiast prawej prawa_cz.Naley dokona pewnych manipulacji na stronie, ktra jest stale widoczna w lewej ramce onazwie lewa_cz. Do ramki tej jest adowana strona zawarta w pliku o nazwie -strona.htm.

Lista tematw zawiera odsyacze do odpowiednich stron. Naley je tak skonstruowa, abykliknicie na odsyaczu przywoywao wskazan stron, ale zarazem adowao j do ramkio nazwie prawa_cz. Mona to uczyni za pomoc nastpujcej konstrukcji:

EGIPTitd.

Analizujc poszczeglne czony powyszego zapisu:

HREF="nazwa_adowanej_strony"- dotyczy nazwy pliku, w ktrym jest zapisanadana strona,

TARGET="nazwa_ramki"dotyczy docelowego miejsca, do ktrego ma by zaadowanastrona.

Wida tutaj rol, jak peni nazwy ramek.

Istniej cztery zastrzeone nazwy w przypadku atrybutu TARGET:

TARGET="_blank" - otwiera si nowe, czyste okno przegldarki, ktrepojawia si przed poprzednimTARGET="_self" - odsyacz aduje si w swoim wasnym okienkuTARGET="_parent - odsyacz aduje si w penym wymiarze okienka, nawetgdy ogldamy je w innej ramceTARGET="_top" - likwiduje wszystkie ramki i przenosi Ci pod wskazanyadres URL w czystym okienku przegldarki,

wiczenie 4:Zmodyfikuj plik, ktry zastpi w wiczeniu 1 plik strona.htm, wpisujc odsyacze kierujcestrony do ramki prawej nazwanej

prawa_cz,a nastpnie wprowad jeden odsyacz kierujcy wywoan stron do czystego oknaprzegldarki.

6. Inne parametry dla ramek

Do innych atrybutw przydatnych dla ramek i stosowanych dla znacznika FRAMEnale: FRAMEBORDER- wyczanie/wczanie obramowania

trjwymiarowego, np. FRAMEBORDER=0(wyczanie),


19/29


19

MARGINHEIGHT- odstp midzy grn i doln krawdziramki a jej zawartoci,

MARGINWIDTH - odstp midzy praw i lewkrawdzi a zawartoci ramki,

NORESIZE -uniemoliwienie zmiany rozmiaru ramki(normalnie mona to robi)

Niektre atrybuty w obrbie znacznika FRAMESET: BORDER - dodatkowy odstp pomidzy ramkami w

pikselach,

BORDERCOLOR- kolor obramowania,

COLS-podzia okna w poziomie (na kolumny), ROWS-podzia okna w pionie (na wiersze)

NOTATKI


20/29


20

X. Architektura informacji stron WWW

Projektujc stron z myl o publikowaniu w Internecie, niezalenie od jejprzeznaczenia, naley pamita o tym, e bd z niej korzysta uytkownicy ornych umiejtnociach i wiedzy, dlatego na pocztku projektowania naleywzi pod uwag rozmaite kryteria wpywajce na jej funkcjonalno. Zespkryteriw uwzgldnianych podczas tworzenia stron internetowych okrela simianem architektury informacji (AI) stron WWW.

AI jest procesem organizowania, oznaczania, projektowania nawigacji i

systemw wyszukiwawczych, ktre pomagaj uytkownikom w znajdowaniu izarzdzaniu informacj. W Polsce ten termin nie jest jeszcze zbyt popularny, alew Stanach Zjednoczonych posiada ju spor literatur i nadal si rozwija.

Przykadowy plan tworzenia architektury informacji

1. Wyznaczenie celw

2. Uytkownicy2.1. okrelenie odbiorcw2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze

uytkownikw)

3. Zawarto treciowa serwisu3.1. grupowanie informacji

3.2. organizowanie i oznaczanie treci

4. Struktura serwisu

4.1. zaprojektowanie budowy serwisu

4.2. wykonanie szkicu serwisu4.3. zaprojektowanie systemw nawigacji globalnej i lokalnej

5. Projektowanie szaty graficznej

5.1. rozmieszczenie elementw na stronach5.2. szkice projektowe5.3. wykonanie serwisu na bazie projektw

Projektowanie AI obejmuje cztery gwne obszary wymienione w definicji powyej:1. Organizowanie informacji2. Projektowanie systemw nawigacji3. System oznacze4. System wyszukiwawczy

1. Organizowanie informacji

Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie

treci, polegajce na podzieleniu caoci informacji na mniejsze fragmenty, ktre bd zesob powizane. Jest to szczeglnie wane przy rozbudowanych serwisach tematycznych.Podstaw organizacji treci moe by przedmiot, zadanie, uytkownicy, geografia,chronologia czy porzdek alfabetyczny. Najczstszym schematem organizowania jesthierarchia(Rys. nr 4).

Rys. nr 4

Kryteriami, ktre powinien uwzgldni architekt informacji podczas tworzenia strukturyhierarchicznej dla zbioru stron, s szerokoi gboko. Szeroko odnosi si do liczbyopcji, z ktrych moe wybiera uytkownik na danym poziomie w hierarchii, gboko doliczby tych poziomw w serwisie.Wybr hierarchii powinien by uzaleniony m.in. od iloci informacji, przeznaczeniaserwisu i preferencji uytkownikw.

le zaprojektowana hierarchia sprawia, e informacje s niedostpne dla uytkownikw.Zbyt wska i gboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentwpodczas poszukiwa, co moe sta si przyczyn zjawiska zagubienia w hiperprzestrzeni.Z kolei zbyt szeroka i wska stawia uytkownika przed wyborem jednej z bardzo wieluopcji, zjawisko takie nazwano przeadowaniem poznawczym.Dla hierarchii wsko-gbokiej optymalnym rozwizaniem jest podzia do najwyej piciupoziomw. Strona gwna (powitalna) dla serwisu opartego na hierarchii szeroko-pytkiejpowinna udostpnia wybr opcji (odnonikw) w liczbie ok. 7-9, nie wicej ni 10.


21/29


21

Przekroczenie tej granicy powoduje wspomniane ju zjawisko przeadowaniapoznawczego.

Rys. nr 5

Serwisy, w ktrych planowane jest powikszanie zasobw powinny byprojektowane z zastosowaniem raczej hierarchii szeroko-pytkiej orazjednoznacznych oznakowa, tak, aby zminimalizowa zabdzenie w systemie.

Rys. nr 6

Oprcz hierarchicznych schematw organizacyjnych wystpuje take systemhipertekstowym, umoliwiajcy dowolne przegldanie zasobw

Rys. nr 7

System hipertekstowy

2. Projektowanie systemw nawigacji

System nawigacji jest podstawowym narzdziem przemieszczania si, zarwno poniewielkich zbiorach dokumentw, jak i obszernych serwisach i katalogach stron WWW.Jennifer Fleming scharakteryzowaa potrzeby uytkownika nawigujcego, ktre wartowzi pod uwag w trakcie projektu.

1. Gdzie jestem?2. Dokd mog i (przemieci si)?

3. Jak si tam dosta?4. Jak wrc do miejsca gdzie teraz jestem?

W zalenoci od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiaj siszczegowe potrzeby, takie jak:

Skd powinienemzacz? Czy potrzebna jest mi specjalna wiedza lub narzdzie? Jak otrzyma odpowiedni dla mnie informacj? Co zrobi, jeli pojawi si pytania?

To tylko niektre z potrzeb szczegowych.

Ta sama autorka podaa zasady funkcjonalnego systemu nawigacyjnego:1. atwy do nauczenia2. Konsekwentny

3. Zgodny z treci strony (kontekstem)4. Dostarcza informacji (interaktywny)5. Oferuje wybr opcji6. Uywa jasnych i zrozumiaych oznacze7. Zgodny z przeznaczeniem serwisu8. Pomaga w dotarciu do celu


22/29


22

Wskazwki projektowania nawigacji dla webmasterw:

Rozmieszczaj informacje starannie, tak, aby uytkownik zawszewiedzia w ktrym miejscu systemu si znajduje

Nie zmuszaj uytkownika do przerwania jego pracy przez podawanieodsyaczy do innych stron, aplikacji lub miejsc

Umieszczaj kontrol nawigacji w systemie Zabezpiecz gwny kontekst poszukiwa (interakcji), aby uytkownik

nie musia go sobie odtwarza Minimalizuj opnienia sieci poprzez czyteln i jasn nawigacj i

zredukuj czas adowania si

Typy systemw nawigacjia. hierarchicznyb. globalny

c. lokalnyd. dorany

Ad. a/hierarchiczny s. n.podstawowy s.n. oparty na zasadzie nadrzdnoci i

podrzdnoci, ze strony nadrzdnej odsyacze kieruj do stron podrzdnych(Rys. nr 8).

Wicej w rozdziale 1. Organizowanie informacji

Rys. nr 8

Ad. b/globalny s.n.najczciej uzupenia hierarchiczn organizacjinformacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u doukadej strony serwisu, na podstronach mog znajdowa si dodatkowoodsyacze powrotne kierujce do strony gwnej.

Ad. c/ lokalny s.n.stosowany w rozbudowanych serwisach WWW, uzupenia globalnys.n., wykorzystywany do poczenia podstron w serwisie.

Ad. d/ dorany s.n. (ad hoc)oparty na odsyaczach znajdujcych si w tekcie,widocznych jako wyrniony tekst.

Inne podziay systemu nawigacji

- poprzeczna(pozioma)obejmuje strony z tego samego poziomu, pozwala przejrzetre na okrelonym poziomie serwisu

- pionowa (gboka) kieruje w gb hierarchii, zgodna z przedmiotem poszukiwa

Narzdzia nawigacji- paski nawigacyjne- ramki- menu cigane (pull-down)- mapy odsyaczy- indeksy stron- okruchy chlebazaznaczanie trasy nawigowania poprzez zmian koloru

odsyaczy kierujcych do odwiedzonych stron


23/29


23

- widok rybiego oka umieszczenie odsyaczy do stronznajdujcych si najbliej biecej.

3. System oznacze

Oznaczenia s to terminy, sowa i frazy uywane w serwisie do identyfikowaniajego treci.S dwa rodzaje systemw oznacze: tekstowy i obrazkowy (ikony). Uywane sjako:

- odsyacze do fragmentw informacji na innych stronach, jako terminindeksowy lub jako oznaczenie (etykieta) odsyacza.- nagwki suce do zidentyfikowania fragmentw informacji oraz dorozdzielenia informacji na mniejsze kawaki na tej samej stronie.

Typy systemw oznacze (s.o.)

a) Oznaczenia w systemie nawigacjib) Oznaczenia w postaci terminw indeksowychc) Oznaczenia odsyaczyd) S.o. w postaci ikon

Ad. a) Przyjto stosowanie oznacze dla czsto stosowanych znacznikw, np.:

Strona gwna, Home kieruj do stronypowitalnej, organizujcej dostp docaoci zasobw

Szukaj, Wyszukaj, Site Map, Indeks stron kieruj do narzdziawyszukiwawczego lub uruchamiaj akcj

Napisz do nas, Komunikaty, Webmasterinformacja o autorach, zespoleredakcyjnym serwisu

Help, FAQ, Pomocwsparcie dla odwiedzajcych serwis po raz pierwszy

Co nowego, News - informacja o ostatnich aktualizacjach, historiaaktualizacji

Przykad:oznaczenia zamieszczone u dou strony (www.gazeta.pl):

O nas | Reklama u nas | Ogoszenia | Ochrona prywatnoci | Kontakt | Mapaserwisu

Ad. b) Terminy indeksowePotrzebne do odnalezienia strony przez wyszukiwark, umieszcza si je w sekcji

moje hobby

Wicej na ten temat w rozdziale III. Szablon strony WWW

Ad. c) Oznacze i etykiet uywa si rwnie jako odsyaczy, maj due znaczenie, gdyich lokalizacja oraz zawarto mog decydowa o ruchach uytkownika nawigujcego lubposzukujcego informacji w serwisie. Odsyacze najczciej znajduj si poza gwnymtekstem (zewntrzne) oraz w tekcie, wyrniane kolorem, gruboci lub podkreleniem.

Ad. d)Odsyacz jako ikona powinien by stosowany w sytuacjach gdy jej znaczenie jestjednoznaczne. Zastpienie odsyacza tekstowego ikon moe sprawi, i uytkownik nieskorzysta z niego gdy nie bdzie rozumia jego znaczenia.

Przykady niektrych ikon w roli odsyaczy:

informacja e-mail strona gwna ksiga goci wstecz

przykad z portalu onet.pl
http://www.gazeta.pl/http://www.gazeta.pl/http://www.gazeta.pl/http://www.gazeta.pl/


24/29


24

4. Szkic strony

Projektowanie przebiega szybciej, jeeli wczeniej zostanie opracowany szkicstrony z rozmieszczonymi elemenatmi na ekranie. ( layout). Poniej podano dwaprzykady szkicw.

Szkic nr 2:Strona gwna czasopismaw Internecie

Szkic nr 3:Strona z tekstem artykuem,(element wikszej caoci)

Szkic nr 3Rozplanowaniezawartoci strony zprojektem kolorystyki

Szkic nr 4Rozplanowanie zawartocistrony


25/29


25

DODATEK

A. Sowniczek

Najwaniejsze definicje zwizane z projektowaniem stroninternetowych.

ActiveXObiektowa technologia rozszerzajca moliwoci jzyka HTMLopracowana przez Microsoft, umoliwia wspuytkowanie informacji przez

rne aplikacje oraz dostp do funkcji systemowych

Analiza konkurencji (competiti ve analysis)dokument wykazujcy rnicepomidzy stron nad ktr pracuje grupa a konkurencyjnymi stronami.Wykazane rnice i strony porwnawcze zale od celw analizy. Typdokumentacji strategicznej.

Apachebezpatny, udostpniany na zasadach Open Source,zestawoprogramowania dla serwerw HTTP. Apache powsta na bazie serwera NCSAhttpd 1.3. i pocztkowo przeznaczony by wycznie dla systemw UNIX-owych (Linux, Solaris, AIX). Obecnie, w wersji 2 dostpny jest take dlasystemw Windows 9x/NT/2000/XP, AmigaOS, BeOS.

Architektura informacjisztuka i nauka organizowania informacji pomocnejuytkownikom w zaspokojeniu ich potrzeb informacyjnych. AI obejmujebadanie, analiz, projektowanie i wdraanie.

Diagramy przepywu (flow charts)wizualzacja jakiegoprocesu, zazwyczajskupiajcego si na konkretnym zadaniu lub funkcji. Dla procesu opartych naserwisach internetowych diagram przepywu reprezentuje z reguy seriekranw gromadzcych i wywietlajcych informacje uytkownikom. Innenazwy: przepywy, przepywy uytkownika, diagramy przebiegu. Rodzajdokumentu projektowego

Dokumentacja dostarczana(deliverables)dokument (zbir dokumentw)

tworzony podczas opracowywania projektu serwisu WWW w celu uatwieniakomunikacji, ujcia decyzji i zachcania do innowacji. Nale tu: dokumentacjapotrzeb uytkownika (user needs documentation), dokumentacja strategiczna(strategy documentation), dokumentacja projektowa (design documentation).

Druciana ramka, model w postaci szkieletu (wireframe)uproszczony widok zawartocikadego ekranu, jaki pojawi si w produkcie finalnym, pozbawiony koloru, stylwtypograficznych i ilustracji. Inne nazwy: schemat, plan, prototyp, projekt. Rodzajdokumentu projektowego

Dziedziczeniepolega na tym, e elementy nisze w hierarchiidrzewa dokumentu (Rys. nr2) dziedzicz formatowanie elementw lecych wyej w hierarchii, chyba, e wyranienadamy im inne formatowanie. Przykadowo, jeli ustalimy, e tekst w jakiej tabeli ma by

przedstawiony za pomoc pogrubionej czcionkiArial, to wszystkie komrki tabeli bd wten sposb formatowane, gdy komrka ley niej w hierarchii (drzewie dokumentu)ni tabela . Jeli natomiast nadamy odrbne formatowanie wybranej komrce(utworzymy wyjtek), to oczywicie wygld czcionki w tej komrce zmieni si, gdybezporednie zdefiniowanie czcionki w wybranym miejscu ma pierwszestwo przedoglniejszym formatowaniem tabeli (na wyszym szczeblu). Jeli wyranie niezdefiniujemy formatowania dla jakiego elementu, dziedziczy on wasnoci po swoichprzodkach, czyli elementach wyszych w hierarchii.

CSS (Cascading style sheets)Kaskadowe arkusze stylw

Cache - specjalny katalog w przegldarce WWW, gromadzcy grafik wczytywan wtrakcie przegldania zasobw sieci. Gdy po raz kolejny sigamy do tej samej strony,

przegldarka wczytuje na ekran grafik z cache'a, a nie z Internetu, co znacznie przyspieszawczytanie caej strony i oszczdza czas. Im wikszy cache, tym wiksza moliwomagazynowania grafiki. Optymalna wielko powinna siga 10-15 megabajtw.

Cookie(ang. ciasteczko) mechanizm przechowywania stanu klienta przy kolejnych

zadaniach kierowanych do serwera. Pozwala zapamitywa informacje o uytkownikachkorzystajcych z usug internetowych.

DHTML (Dynamic HTML)termin okrelajcy jzyk HTML wraz z jegorozszerzeniami umoliwiajcymi tworzenie interaktywnych i animowanych stron WWW.

Flash - technologia firmy Macromedia (wprowadzona w 1997 r.) pozwalajca tworzyinteraktywne, multimedialne, bazujce na grafice wektorowej elementy stron WWW. Dotworzenia prezentacji flash suy program Flash. Wprowadza on wasny format plikw(.swf), do odczytania ktrego niezbdne jest wyposaenie przegldarki we wtyczk FlashPlayer (standardowo jest ona obecna w Internet Explorerze i Netscape Navigatorze w

wersjach 4.0 i wyszych).

Formularz - dokument internetowy, ktry pozwala czytelnikowi strony w interakcyjnysposb pobiera lub przesya informacje. Przykadem formularza moe by ankietaprowadzona przez autora strony, ktry zbiera od czytelnikw informacje pewnego typu (np.


26/29


26

wiek, pe, wykonywany zawd, posiadany sprzt itp.). Formularzem jest stronaAnkieta w niniejszym kursie, ktra zawiera pola wyboru i pola tekstowe.

Edytor HTML - program sucy do tworzenia dokumentw internetowych wstandardzie HTML. Chocia jest moliwe zbudowanie dokumentuinternetowego za pomoc kadego, nawet najprostszego edytora tekstw,edytory HTML s tworzone, aby przyspiesza i automatyzowa proceskonstruowania stron WWW, uwalniajc uytkownika od rcznego

wprowadzania polece HTML. Wikosz edytorw pracuje w trybie"tekstowym", wywietlajc wszystkie znaki sterujce (polecenia) HTML,niektre pozwalaj tworzy dokumenty w trybie "graficznym", masujc kodyjzyka, a stosowane s te edytory pozwalajce wprowadza poszczeglneelementy w sposb cakowicie zautomatyzowany, za pomoc zestawiania"klockw".

Element - kod, znacznikHTML

GIF(Graphic Interchange Format)format zapisu plikw posiadajcy dumoliwo kompresowania, maksymalna liczna kolorw 256, posiadawaciwo zachowywania koloru przezroczystego. Najczciejwykorzystywany w kolorowych napisach i banerach

HTMLHyperText Markup Languagejzyk hipertekstowego znakowaniadokumentu, obecnie stosowana wersja nosi numer 4.0

Heksadecymalnyoparty na systemie szesnastkowym; operujcy na 16wartociach: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Hipercze (odsyacz, odnonik, link) skadnik systemu hipertekstowego -element dokumentu elektronicznego kierujcy do innego fragmentu tego samegodokumentu lub do dokumentu znajdujcego si w zupenie innej lokalizacji

Hipermediasystem hipertekstowy zawierajcy elementy multimedialne(tekst, grafika, film, dwik)

Hipertekst (system hipertekstowym)rodzaj bazy danych posiadajcejaktywne odsyacze pozwalajce uytkownikowi skoczy do innych czci tejbazy. H. pozwala na niesekwencyjne przegldanie zasobw. Elementamiskadowymi h. s wzy (strony WWW) i odsyacze (hipercza). Wyrnia sidwa rodzaje s.h.: skupionyznajdujcysi w jednym miejscu (noniku) irozproszonywzy znajduj si na ronych, oddalonych od siebiekomputerach (WWW).

Hittrafienie, adres strony WWW wywietlony przez wyszukiwark w odpowiedzi nahaso wyszukiwawcze.

Internetsie komputerowa rozlega (WAN) o zasigu globalnym, oglnowiatowy zbirwzajemnie poczonych sieci komputerowych lokalnych (LAN) i rozlegych. Umozliwiapublikowanie informacji oraz komunikowanie si, najpopularniejsze usugi internetowe to:e-mail, World Wide Web, CHAT, FTP i Usenet

JPG, JPEG (joint Photographic Export Group)Format graficzny stosowany w Internecie, najlepszy do kolorowych fotografii I obrazw,zachowuje do 16 mln. Kolorw.

Javazorientowany obiektowo jzyk programowania niezaleny od platformy sprztoweji systemowej, opracowany przez Sun Microsystem

JavaScriptjzyk skryptowy interpretowany bezporednio przez przegldark WWW,uywany do tworzenia krtkich programw doczanych do kodu HTML.

Kaskadowo-polega na ustaleniu hierarchii rde stylw. Pierwszestwo maj stylezdefiniowane "bliej" konkretnego elementu. Przegldarka sprawdza, wic najpierw, czyistniej jakie arkusze zewntrzne i stosownie do ich definicji formatuje stron. Nastpnie

sprawdza, jakie s definicje stylw w nagwku strony i modyfikuje wygld zgodnie z ichustaleniami. Nastpnie sprawdza style w samym dokumencie i ponownie modyfikujefizyczn posta strony.

Mapa strony (site map)wizualna reprezentacja struktury serwisu WWW. Inne nazwy:model strukturalny, taksonomia, hierarchia, model nawigacji, struktura serwisu. Rodzaj

dokumentu projektowego.

Metainformacja(informacja o informacji) informacja o elementach ukaduinformacyjnego lub procesach informacyjnych

Model pojciowy (concept model)wykres prezentujcy zwizki pomidzy rnorodnymiabstrakcyjnymi pojciami. Mona stosowa technik modelowania pojciowego w rnych

sytuacjach (warunkach) do wyjanieni a odmiennych aspektw strony internetowej. Innenazwy: mapa poj, diagram podobiestw. Typ dokumentacji strategicznej

Nawigowaniemetoda poszukiwania informacji w hiperprzestrzeni polegajca naporuszaniu si pomidzy dokumentami za pomoc hiperczy

Nawigacjasystem architektury informacji serwisu internetowego zaprojektowany w celupoczenia ze sob poszczeglne dokumenty w hiperprzestrzeni


27/29


27

PHP - Hypertext Preprocesor. Jzyk skryptowy sucy do tworzeniaprogramw oraz interpreter wykonujcy je po stronie serwera (server-sidescripting). Bloki kodu PHP umieszczane s bezporednio w dokumencie HTML.Przed wysaniem do przegldarki serwer przekazuje dokument HTMLinterpreterowiPHP, ktry tumaczy komendy PHP oraz wykonujeodpowiadajce im operacje.

Persony (personas)Sumaryczna reprezentacja docelowych uytkownikw

systemu, czsto opisywani jako realni ludzie. W kadym projekcie mona miejedn lub wicej person, kada reprezentowa moe odmienny typ odbiorcwsystemu. Inne nazwy: profil uytkownika, definicje rl uytkownika, profileodbiorcw. Naley do dokumentacji potrzeb uytkownika

Plan testu uytecznoci (usability t est plan)opis celw, metod i podejcia dotestu uytecznoci. PTU obejmuje kilka rnych elementw, od profiliuczestnikw testw do zarysu dyskusji z uytkownikami. Moe skada si z:test obiektw, test logistyki, profile uytkownika i scenariusz. Typ dokumentacjipotrzeb uytkownika.

Podstrona(angielskiesubpage), strona WWW dostpna ze strony biecej zapomoc cznika hipertekstowego.

Portalrodzaj wielotematycznego serwisu internetowego poprzez, ktryuytkownicy siecimaj dostp do najnowszych informacji zrnych dziedzin.P. wyposaone s wmechanizm wyszukiwania plikw (stronWWW)wInternecieoraz katalog stron WWW. Za pomoc portalu mona otrzymanajnowsze informacje z rnych dziedzin. Najwiksze wiatowe portale toYahoo, Altavista czy Lycos, za wPolsce Onet i Wirtualna Polska.

Projekty ekranu (screen design s)zbir ilustracji w elektronicznym formaciegraficznym prezentujcych finalny wygld stron internetowych. Inne nazwy:kompleksowe ekrany, makieta, projekt strony, projekt wizualny, projekt

graficzny, projekt interfejsu, projekt koncepcji, adne obrazki. Rodzaj

dokumentu projektowego

Przegldarkawyspecjalizowany program komputerowy sucy dowyszukiwania i przegldania danych okrelonego typu, zw. udostpnianych wrozlegych sieciach komputerowych; np. przegldarki WWW. Najpopularniejszeobecnie p. to Microsoft Internet Explorer i Netscape Navigator.

Raport uytecznoci (usability report)naley do dokumentacji potrzebuytkownika. Wynik testu uytecznoci, z ktrego rezultaty daj si przeoyna dziaanie. Typ dokumentacji strategicznej

Serwis WWWzbir stron WWW na okrelony temat, z wyrnion stron gwn(powitaln) oraz podstronami (ang. web site).

Spis zawartoci (content inventory)lista wszystkich informacji zawartych na stronie

WWW, cznie z danymi opisujcymi informacje z wielu punktw widzenia, jak odbiorcydocelowi lub pooenie. Inne nazwy: analiza treci, audyt treci. Typ dokumentacjistrategicznej

Strona WWW, witryna(angielskieWWW page),dokument hipertekstowy (hipermedialny) opracowany w jzyku HTML, udostpniony nawidok publiczny w sieci Internet za pomoc usugi WWW w celach informacyjnych,handlowych, propagandowych itp.; sieciowa wizytwka firm i poszczeglnych osb (liczbastron WWW przekroczya ju miliard).

Strona prywatna(angielskie home page), dokumenty opracowane wjzyku HTML,bdce wizytwk osoby lub instytucji w sieci usug hipertekstowych WWW;

Strona startowastrona WWW, ktra pojawia si na ekranie wraz z uruchomieniemprzegldarki. W opcjach kadej przegladarki mona zmienia adres strony startowej

W3C (World Wide Web Consortium)Midzynarodowe forum firm i organizacjizajmujce si rozwojem i promocj sieci World Wide Web (rok. za. 1994), ksztatuje obrazSieci poprzez tworzenie nowych standardw internetowych, np.: j zyka HTML, CSS, XMLi protokou http. Dyrektorem jest Tim Berners-Lee - twrca WWW. Srona WWW:www.w3c.org

Webmaster osoba projektujca strony i serwisy internetowe.

Wortalrodzaj portalu powicony jednej brany (dziedzinie ycia), np.: Wirtualnahistoria ksiki i bibliotek

WYSIWYG(What You See Is What You Get), widzisz to, co otrzymasztryb pracyprogramu, w ktrym posta materiaw przygotowywanych zbliona jest do efektu, jakimona uzyska po ich wydrukowaniu.
http://wiem.onet.pl/wiem/00858f.htmlhttp://wiem.onet.pl/wiem/00858f.htmlhttp://wiem.onet.pl/wiem/00858f.htmlhttp://wiem.onet.pl/wiem/0028a0.htmlhttp://wiem.onet.pl/wiem/0028a0.htmlhttp://wiem.onet.pl/wiem/0028a0.htmlhttp://www.w3c.org/http://www.w3c.org/http://www.w3c.org/http://wiem.onet.pl/wiem/0028a0.htmlhttp://wiem.onet.pl/wiem/00858f.html


28/29


28

B. Kolory

Nazwy kolorw wraz z zapisem szesnastkowym(heksadecymalnym).

Kolor w zapisie szesnastkowym musi by poprzedzonyznakiem#,np.: color: #FFFFFF

antiquewhite FAEBD7agua 00FFFF

aquamarine 7FFFD4azure F0FFFF

beige F5F5DC

bisque FFE4DCblack 000000

blanchedalmond FFEBCDblue 0000FF

blueviolet 8A2BE2brown A52A2A

cornsilk FFF8DCcrimson DC143C

cyan 00FFFFdarkblue 00008B

darkcyan 008B8Bdarkgoldenrod B8860B

darkgreen 006400

floralwhite FFFAF0ghostwithe F8F8FF

gold FFD700honeydew F0FFF0

ivory FFFFF0khaki F0E68C

levender E6E6FA

levenderblush FFF0F5lightyellow FFFFE0

linen FAF0E6magenta FF00FF

maroon 800000

mediumblue 0000CD

mediumorchid BA55D3mediumvioletred CD1585

mistyrose FFE4E1moccasin FFE4B5

navy 000080

oldlace FDF5E6olive 808000

olivedrab 6B8E23orange FFA500

papayawhip FFEFD5peachpuff FFDAB9

purple 800080

red FF0000seagreen 2E8B57

seashell FFF5EEtomato FF6347

turquoise 40E0D0

violet EE82EE

wheat F5DEB3white FFFFFF

whitesmoke F5F5F5yellow FFFF00

yellowgreen 9ACD32


29/29


29

NOTATKI

Przeczytaj na pocztku:webmaster.helion.pl/index.php/html-dla-poczatkujacych/5/8-html-

dla-poczatkujacych

kurs_projektowania_

Documents

Transcript of kurs_projektowania_