Professional Documents
Culture Documents
architektury
informacji
stron WWW
Materiay do wicze
Opracowa
Stanisaw Skrka
Instytut Informacji Naukowej i Bibliotekoznawstwa
Uniwersytet Pedagogiczny w Krakowie
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.1.3.
2.1.4.
2.1.5.
PROGRAM ZAJ
1.
WWW
2.1.6. porwnanie
Opis celw.
1.1. Posugiwanie
si
Internetem
dziaalnoci
informacyjnej
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.
sposobu
prezentacji
tego
samego
dokumentu
2.
Zadania:
1. Wykonanie strony na wybrany temat
2. Przygotowanie projektu pracy zaliczeniowej
2.3. (15 godz.) Elementy Kaskadowego arkusza stylw, wykorzystanie skryptw
jzyka JavaScript na stronie WWW.
2.3.1. rodzaje stylw: a\ doczone do zewntrznego arkusza (plik.css)
b\ zagniedone
<style type=text/css></style>
c\ importowane
d\ lokalne
e\ klasy i identyfikatory
class=klasa; ID=identyfikator)
f\ rozciganie stylu, bloki
<span></span>; <div></div>
3
hierarchicznie:
Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhh
jjjjjjjjjjjjjjjjddd
dddddddddddjh
hhhhhhhhhhhhhh
heeeeeeeeeeeee
eeeeeeeeeeeeee
eeeeeeeeeeeeee
e
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeee
<img src=nazwa_pliku>
poznawanie programw graficznych, Paint Shop Pro,
Micrografx, podstawowe operacje przy obrbce ilustracji dla
strony hipertekstowej,
sposb prezentowania grafiki w sieci, formaty plikw i rnice
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
Ggggggggggggg
ggggggggggggg
gggggggggg
Lllllllllllllllllllll
ssssssssssssssss
sssssssssdddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
dddd
llllllllllllllllllllllllllllllll
llllllllllllllllllllllllllllllll
llllllllllllllllllllllgggg
ggggggggggggg
ggggggggggggg
ggggggggg
wirtualnie:
Ffffffffffffffffff
fffff333eeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeefffffffff
ffffffffffff333
Zadanie:
Projektowanie strony na wybrany temat (praca zaliczeniowa)
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeefffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
ffffffffffffff
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhfffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffff
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhh
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFYYYYY
YYYYYYYY
Y
4.
Ocena serwisu wykonanego przez studenta bdzie redni z trzech ocen wedug
kryteriw zaliczanych do architektury informacji: ocena za system organizacji
HTML.
sekwencyjnie:
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
w
Eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeee
Oooooooooosss
ssssssssssooooo
ooooos,lmncfjdjd
jdjdjdjdjdididkcici
c i i i i ii i i
icidisixkxkxixicic
ickc
8.
9.
10. R. Patek, Z. Oko, Pajczek najlepszy polski edytor stron WWW. Gliwice 2000.
11. B. Danowski,, HTML 4. wiczenia praktyczne. Gliwice 2000
5. Ocena kursu
51-60 pkt. ocena dst
Czasopisma:
1.
2.
3.
4.
7. Literatura zalecana
Ksiki:
1. S. Krug: Nie ka mi myle. O yciowym podejciu do funkcjonalnoci
stron internetowych. Gliwice 2006. Wyd. 2.
2.
3.
4.
Gliwice 2004.
J. Nielsen: Projektowanie funkcjonalnych serwisw internetowych.
5.
Gliwice 2003.
L. Rosenfeld, P. Morville: Architektura informacji w serwisach
internetowych. Gliwice 2003. Wyd. 2.
7.
6.
6.
7.
8.
2.
3.
4.
5.
6.
7.
8.
WebReporter: [web.reporter.pl/html]
9.
Notatki
I. Wstp
Strona WWW jest plikiem tekstowym zapisanym najczciej w formacie html
(ale moe to by take php, shtml, i inne) aby zaprojektowa stron wystarczy
zwyky Notatnik z Windows, by mc oglda jej zawarto potrzebna jest
przegldarka stron WWW (Internet Explorer, Mozilla, Netscape).
Sie zoona ze stron WWW wzajemnie poczonych za pomoc odsyaczy
hipertekstowych (linkw) nazywana jest World Wide Web (globaln pajczyn)
Skrt html oznacza jzyk projektowania: Hypertext Markup Language (jzyk
hipertekstowego znakowania dokumentw), aby strona bya widoczna w
przegldarce trzeba j zapisa jako plik .html, np.: index.html, default.html,
itp.
Aby przygotowa wasn stron (witryn) przede wszystkim naley zaplanowa
przebieg 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 projektu
3. Testowanie i wdroenie
4. Promocja
5. Zarzdzanie i aktualizacja
Edytor stron WWW, np.: EzHTML (darmowy), Pajczek, Tiger 98, WebPager,
Xpress (darmowy), lub edytor tekstu (Notatnik Windows),
2.
3.
Program do obrbki grafiki rastrowej: Paint Shop Pro 6.x X, , Adobe Photoshop,
GIMP (freeware), PaintNET (freeware)
7
4.
Jeeli edytor stron WWW nie ma takiej opcji, to naley jeszcze zaopatrzy
si w konwerter z Win-1250 (Latin 1) na stron kodow ISO 8859-2 (Latin
2) Ogonki 97
Dodatkowo:
5. Program do tworzenia gifw animownych: Jasc Animated Shop 2.02, Gif
Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63
6.
</ol>
<p></p>
<span></span>
<sup></sup>
<title></title>
<ul>
<li> </li>
<li> </li>
</ul>
wypunktowanie
Znaczniki elementowe
<br>
<hr>
<meta name="" content="">
Znaczniki blokowe
<img src="">
V. Odsyacze (linki)
<a href=""></a>
<a name=""></a>
<body></body>
<div></div>
<em></em>
<h1></h1>
a)
b)
c)
d)
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
- wzgldn
<strong></strong>
<ol>
<li> </li>
- bezwzgldn
<a href="http://www.ap.krakow.pl/kbin/html/szablon.html"
title="to jest tre dymka">szablon strony www</a>
Adresy stron WWW powinny by pisane maymi literami bez polskich znakw,
podobnie nazwy plikw html.
Pliki 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 zachowa
przezroczyste to, ale ma ma liczb kolorw. Format JPG jest najlepszy do kolorowej
fotografii i obrazw.
1. Wstawianie grafiki do dokumentu
Podstawowa konstrukcja ma nastpujc posta: <img src="plik_graficzny">
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. <img src="krajobraz.gif" width=200 height=50 alt=Krajobraz
grski>
- atrybuty te przyspieszaj adowanie si obrazka.
obramowanie: parametr BORDER=x pozwala wywietli wok obrazka
ramk o gruboci rwnej x pikseli:
Np. <img src="krajobraz.gif" width=120 height=160 alt=Tekst
zamienny style=border: 5px solid black>
- gdy ilustracja jest odsyaczem parametr BORDER: 0px spowoduje, e nie pojawi si
ramka wok ilustracji.
* odstpy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal
space) pozwalaj ustali odlego obrazka, w pikselach, od oblewajcego go tekstu:
Np. <img src="obrazek.gif" width=120 height=160 alt=tekst zamienny
hspace=50>
- ten obrazek jest oddalony 50 pikseli od tekstu w poziomie
pozycjonowanie obrazka (CSS): specjalny zesp parametrw,
text-align:left/right lub float: left/right steruje pozycj obrazka w stosunku
do oblewajcego go akapitu. Konstrukcja ma posta
10
Otrzymamy:
Zawarto komrki 1
Zawarto komrki 2
Zawarto komrki 3
Zawarto komrki 4
3. To na stronie WWW.
Definiujc <BODY> moemy wstawi parametr, ktry zadecyduje o graficznej
postaci strony.
Definicja tabeli musi by umieszczona midzy tymi dwoma znacznikami <TABLE>, ktre
stanowi jej ograniczniki. W ich ramach s umieszczane definicje rzdw <TR>, definicje
komrek w rzdach <TD>, konkretne dane w komrkach, tytu tabeli i nagwki wierszy i
kolumn <TH>.
VII. Tabele
1. Podstawy projektowania tabel.
Adaptujc tabele dla potrzeb WWW kierowano si gwnie potrzeb prezentacji
danych tabelarycznych w postaci takiej, jak widzimy w ksikach czy
prezentacjach multimedialnych. O ile w edytorach tekstw su one gwnie do
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie
11
wiersz 1
wiersz 2
<tr><td align=left></td></tr>
Dane w tej komrce przesun si do lewego marginesu, to samo mona zaprojektowa dla
kolumny w obrbie wiersza.
Np.
<td align=center></td>
Oprcz wyrwnania poziomego dane w kolumnach moemy wyrwnywa pionowo za
pomoc parametru VALIGN, ktry moe przybiera nastpujce wartoci: top (gra).
middle (rodek), bottom (d).
<td valign=top></td>
<td valign=middle></td>
gra
rodek
<td valign=bottom></td>
Aby okreli szeroko tabeli w obrbie znacznika TABLE umieszcza si atrybut WIDTH.
Warto tego parametru mona wyrazi w procentach (wielko wzgldna) lub pikselach
(wielko bezwzgldna)
Np.
<TABLE BORDER WIDTH=60%> </TABLE>
lub
Np.:
<table border=5 cellpadding=8 cellspacing=15
align=right>
12
<td>komrka dolna</td>
</tr>
Widok:
Wiersze
poczone
Komrka grna
Komrka dolna
Rys. nr 3
Przykad nr 1
<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0"
cellspacing="0" align="center">
<tr>
<td colspan="2">kolumny poczone</td>
</tr>
<tr>
<td width="20%">kolumna lewa</td>
<td width="80%">kolumna prawa</td>
</tr>
</table>
Widok:
Kolumny poczone
Kolumna lewa
Kolumna prawa
Przykad nr 2:
<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0"
cellspacing="0" align="center">
<tr>
<td width="20%" rowspan="2">wiersze poczone</td>
<td width="80%">komrka grna</td>
</tr>
<tr>
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie
13
Przykad 2
<table style="border-top-style: dotted; background-color: #eeeeee ; width:
70%; height: 20%">
<tr><td>
<p>Pojedyncza komrka</p>
</td></tr></table>
14
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<title>Zagniedanie arkusza stylw</title >
<meta name="description" content="style">
<style type="text/css">
3.
<head>
<style type="text/css">
p.normalny {font-family: helvetica; font-size: 10pt}
.przypisy {font-family: helvetica; font-size: 8pt}
.uwagi {font-family: helvetica; font-size: 10pt; fontweight: bold}
.istotne {font-family: georgia, serif; font-size: 12pt;
color: red}
.ustaw {position: absolute; left: 2px; top: 3px; right:
10px; bottom: 10%}
</style>
</head>
<body>
<p class=istotne>Jaki tekst</p>
</body>
15
16
IX. RAMKI
1. Wstp
Ramki uatwiaj nawigowanie w wielostronicowych dokumentach HTML,
pozwalaj na przegldanie wielu dokumentw rwnoczenie (tzw. format
metadokumentowy). Aby uy tej nowej formy prezentacji dokumentw WWW
trzeba utworzy zbir ramek na stronie podstawowej *.html, na ktrej
definiujemy liczb, wielko i pozycj ramek oraz zachowanie si innych
dokumentw w momencie uaktywnienia odsyacza hipertekstowego. Pozostae
strony, wchodzce w skad caego, wielostronicowego dokumentu, s stronami
podrzdnymi.
Na podstawowej stronie nie powinno by adnych znacznikw poza blokiem
nagwkowym i definicj samych ramek. Dopiero znaczniki NOFRAMES
pozwalaj umieci tre, ktra bdzie wywietlana przez przegldarki
nieinterpretujce ramki. Znaczniki <BODY></BODY> mog by umieszczane
jedynie w obrbie NOFRAMES.
2. Ramki w postaci kolumn
Kady z wydzielonych w pliku gwnym obszarw jest zajmowany przez
okrelon stron. U dou przykad strony podstawowej, objtej znacznikami
FRAMESET zamiast BODY, zawierajcej podzia na dwie kolumny -parametr
COLS dzieli ekran kolumny - pierwsza od lewej o szerokoci 25% ekranu,
druga o rozmiarach dalszych (75%).
Znacznik FRAME i parametr SRC przypisuje okrelonym czciom ekranu
zawarto (czyli strony WWW), atrybut SCROLLING steruje wywietlaniem
paskw przewijania i moe zawiera warto: auto, yes, no.
NAME oznacza nazw dla okrelonej czci ekranu.
<HTML>
<HEAD>
<TITLE>Ramki</TITLE>
</HEAD>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME="lewa_cz"
SRC="strona.htm">
<FRAME SCROLLING="yes" NAME="prawa_cz"
SRC="strona2.htm">
</FRAMESET>
</HTML>
wiczenie 1:
Przepisz przykad strony z lewej nadajc mu nazw okno.htm W miejsce nazw
strona.htm i strona2.htm wpisz nazwy dwch stron utworzonych na poprzednich
zajciach. Zobacz w przegldarce jak wyglda strona okno.htm. Powinny by widoczne
dwie poprzednio wprowadzone strony
4. Ramki wielodokumentowe
Objanienie (do listingu poniej)
W pierwszej linii otwieramy dokument. Konstrukcj ramek rozpoczto od zadeklarowania
w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawilimy ramk z
przypisan jej stron, gdy wiersz nie ulega adnemu podziaowi.
17
</HTML>
<FRAMESET ROWS=100,*,200>
<FRAME SRC=strona1.htm>
<FRAMESET COLS=35%,*,35%>
<FRAME SRC=strona2.htm>
<FRAME SRC=strona3.htm>
<FRAME SRC=strona4.htm>
</FRAMESET>
<FRAME SRC=strona5.htm>
</FRAMESET>
</FRAMESET>
</HTML>
itd.
Analizujc poszczeglne czony powyszego zapisu:
W czwartej linii ponawiamy definicj FRAMESET (niszego rzdu), dzielc
drugi wiersz na trzy kolumny.
W pitej, szstej i sidmej 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, przypisujc
jej odpowiedni stron.
W dziesitej linii koczymy "globaln" definicj FRAMESET. W jedenastej cay
dokument.
wiczenie 3:
Przepisz powyszy kod dla ramki wielodokumentowej. Zamiast nazw
stronaN.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. Odsyacze
Co zrobi, aby kliknicie na odsyaczu w jednej ramce automatycznie adowao
odpowiedni stron w innej ramce? Jest to podstawowa sprawa, jeli chcemy
wykorzysta ramki w dokumentach. Zauwamy, e kliknicie na odsyaczu w
spisie treci w lewej ramce powoduje zaadowanie dokumentu do prawej ramki,
a nie do ramki ze spisem treci. W tym miejscu wykorzystujemy nazwy, ktre
nadawalimy poszczeglnym ramkom.
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie
NOTATKI
19
1. Organizowanie informacji
Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie
treci, polegajce na podzieleniu caoci informacji na mniejsze fragmenty, ktre bd ze
sob 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 jest
hierarchia (Rys. nr 4).
1. Wyznaczenie celw
2. Uytkownicy
2.1. okrelenie odbiorcw
2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze
uytkownikw)
Rys. nr 4
Rys. nr 7
Rys. nr 5
Rys. nr 6
Rys. nr 7
System hipertekstowy
21
Wskazwki projektowania nawigacji dla webmasterw:
Rozmieszczaj informacje starannie, tak, aby uytkownik zawsze
wiedzia w ktrym miejscu systemu si znajduje
Nie zmuszaj uytkownika do przerwania jego pracy przez podawanie
odsyaczy 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
Rys. nr 8
Narzdzia nawigacji
- paski nawigacyjne
- ramki
- menu cigane (pull-down)
- mapy odsyaczy
- indeksy stron
- okruchy chleba zaznaczanie trasy nawigowania poprzez zmian koloru
odsyaczy kierujcych do odwiedzonych stron
22
3. System oznacze
a)
b)
c)
d)
Ad. c) Oznacze i etykiet uywa si rwnie jako odsyaczy, maj due znaczenie, gdy
ich lokalizacja oraz zawarto mog decydowa o ruchach uytkownika nawigujcego lub
poszukujcego informacji w serwisie. Odsyacze najczciej znajduj si poza gwnym
tekstem (zewntrzne) oraz w tekcie, wyrniane kolorem, gruboci lub podkreleniem.
Ad. d) Odsyacz jako ikona powinien by stosowany w sytuacjach gdy jej znaczenie jest
jednoznaczne. Zastpienie odsyacza tekstowego ikon moe sprawi, i uytkownik nie
skorzysta z niego gdy nie bdzie rozumia jego znaczenia.
Przykady niektrych ikon w roli odsyaczy:
informacja
strona gwna
ksiga goci
wstecz
Przykad:
oznaczenia zamieszczone u dou strony (www.gazeta.pl):
23
4. Szkic strony
Projektowanie przebiega szybciej, jeeli wczeniej zostanie opracowany szkic
strony z rozmieszczonymi elemenatmi na ekranie. (layout). Poniej podano dwa
przykady szkicw.
Szkic nr 3
Rozplanowanie
zawartoci strony z
projektem kolorystyki
Szkic nr 2:
Strona gwna czasopisma
w Internecie
Szkic nr 4
Rozplanowanie zawartoci
strony
Szkic nr 3:
Strona z tekstem artykuem,
(element wikszej caoci)
24
DODATEK
A. Sowniczek
Najwaniejsze definicje zwizane z projektowaniem stron
internetowych.
ActiveX Obiektowa technologia rozszerzajca moliwoci jzyka HTML
opracowana przez Microsoft, umoliwia wspuytkowanie informacji przez
rne aplikacje oraz dostp do funkcji systemowych
Analiza konkurencji (competitive analysis) dokument wykazujcy rnice
pomidzy stron nad ktr pracuje grupa a konkurencyjnymi stronami.
Wykazane rnice i strony porwnawcze zale od celw analizy. Typ
dokumentacji strategicznej.
Apache bezpatny, udostpniany na zasadach Open Source, zestaw
oprogramowania dla serwerw HTTP. Apache powsta na bazie serwera NCSA
httpd 1.3. i pocztkowo przeznaczony by wycznie dla systemw UNIXowych (Linux, Solaris, AIX). Obecnie, w wersji 2 dostpny jest take dla
systemw Windows 9x/NT/2000/XP, AmigaOS, BeOS.
Architektura informacji sztuka i nauka organizowania informacji pomocnej
uytkownikom w zaspokojeniu ich potrzeb informacyjnych. AI obejmuje
badanie, analiz, projektowanie i wdraanie.
Diagramy przepywu (flow charts) wizualzacja jakiego procesu, zazwyczaj
skupiajcego si na konkretnym zadaniu lub funkcji. Dla procesu opartych na
serwisach internetowych diagram przepywu reprezentuje z reguy seri
ekranw gromadzcych i wywietlajcych informacje uytkownikom. Inne
nazwy: przepywy, przepywy uytkownika, diagramy przebiegu. Rodzaj
dokumentu projektowego
Dokumentacja dostarczana (deliverables) dokument (zbir dokumentw)
tworzony podczas opracowywania projektu serwisu WWW w celu uatwienia
komunikacji, ujcia decyzji i zachcania do innowacji. Nale tu: dokumentacja
potrzeb uytkownika (user needs documentation), dokumentacja strategiczna
(strategy documentation), dokumentacja projektowa (design documentation).
25
wiek, pe, wykonywany zawd, posiadany sprzt itp.). Formularzem jest strona
Ankieta w niniejszym kursie, ktra zawiera pola wyboru i pola tekstowe.
26
Serwis WWW zbir 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 odbiorcy
docelowi lub pooenie. Inne nazwy: analiza treci, audyt treci. Typ dokumentacji
strategicznej
Strona WWW, witryna (angielskie WWW page),
dokument hipertekstowy (hipermedialny) opracowany w jzyku HTML, udostpniony na
widok publiczny w sieci Internet za pomoc usugi WWW w celach informacyjnych,
handlowych, propagandowych itp.; sieciowa wizytwka firm i poszczeglnych osb (liczba
stron WWW przekroczya ju miliard).
Strona prywatna (angielskie home page), dokumenty opracowane w jzyku HTML,
bdce wizytwk osoby lub instytucji w sieci usug hipertekstowych WWW;
Strona startowa strona WWW, ktra pojawia si na ekranie wraz z uruchomieniem
przegldarki. W opcjach kadej przegladarki mona zmienia adres strony startowej
W3C (World Wide Web Consortium) Midzynarodowe forum firm i organizacji
zajmujce si rozwojem i promocj sieci World Wide Web (rok. za. 1994), ksztatuje obraz
Sieci poprzez tworzenie nowych standardw internetowych, np.: jzyka HTML, CSS, XML
i protokou http. Dyrektorem jest Tim Berners-Lee - twrca WWW. Srona WWW:
www.w3c.org
Webmaster osoba projektujca strony i serwisy internetowe.
Wortal rodzaj portalu powicony jednej brany (dziedzinie ycia), np.: Wirtualna
historia ksiki i bibliotek
WYSIWYG (What You See Is What You Get), widzisz to, co otrzymasz tryb pracy
programu, w ktrym posta materiaw przygotowywanych zbliona jest do efektu, jaki
mona uzyska po ich wydrukowaniu.
27
B. Kolory
Nazwy kolorw wraz z zapisem szesnastkowym
(heksadecymalnym).
Kolor w zapisie szesnastkowym musi by poprzedzony
znakiem#,
np.: color: #FFFFFF
antiquewhite
FAEBD7
agua 00FFFF
aquamarine 7FFFD4
azure F0FFFF
beige F5F5DC
bisque FFE4DC
black 000000
blanchedalmond FFEBCD
blue 0000FF
blueviolet 8A2BE2
brown A52A2A
cornsilk FFF8DC
crimson DC143C
cyan 00FFFF
darkblue 00008B
darkcyan 008B8B
darkgoldenrod B8860B
darkgreen 006400
floralwhite FFFAF0
ghostwithe F8F8FF
gold FFD700
honeydew F0FFF0
ivory FFFFF0
khaki F0E68C
levender E6E6FA
levenderblush FFF0F5
lightyellow FFFFE0
linen FAF0E6
magenta FF00FF
maroon 800000
mediumblue 0000CD
mediumorchid BA55D3
mediumvioletred CD1585
mistyrose FFE4E1
moccasin FFE4B5
navy 000080
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie
oldlace FDF5E6
olive 808000
olivedrab 6B8E23
orange FFA500
papayawhip FFEFD5
peachpuff FFDAB9
purple 800080
red FF0000
seagreen 2E8B57
seashell FFF5EE
tomato FF6347
turquoise 40E0D0
violet EE82EE
wheat F5DEB3
white FFFFFF
whitesmoke F5F5F5
yellow FFFF00
yellowgreen 9ACD32
28
NOTATKI
29