Projektowanie architektury informacji stron WWW Materiały do zajęć Projektowanie systemów informacyjnych Spis treści I. Wstęp... 6 II. Warsztat webmastera... 6 III. Szablon strony WWW... 7 IV. Wybrane znaczniki... 8 V. Odsyłacze (linki)... 8 VI. Wstawianie grafiki i tła... 9 VII. Tabele... 10 VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets)... 14 IX. Ramki... 16 X. Architektura informacji stron WWW... 19 DODATEK... 24 Opracował Stanisław Skórka Instytut Informacji Naukowej i Bibliotekoznawstwa Uniwersytet Pedagogiczny w Krakowie Rok akad. 2010/11
Niniejszy skrypt jest pomocą do zajęć m.in. ze specjalizacji z informacji naukowej oraz projektowania systemów informacyjnych. Powstał w oparciu o zbiór liczne publikacje z tego zagadnienia oraz na bazie doświadczeń autora, który od kilkunastu lat zajmuje się tworzeniem stron WWW. Oprócz tego wykorzystane zostały także pozycje książkowe wymienione w bibliografii. Tylko do własnego użytku w ramach zajęć na specjalizacji Metody pracy w bibliotece: informacja naukowa. Instytut Informacji Naukowej i Bibliotekoznawstwa Akademia Pedagogiczna w Krakowie Materiały edukacyjne. Egzemplarz nie jest przeznaczony do sprzedaży Zebrał i opracował Stanisław Skórka Kraków październik 2010 Zagadnienia ujęte w niniejszych materiałach nie wyczerpują całości problematyki związanej z tworzeniem stron internetowych, zostały opracowane pod kątem ćwiczeń z projektowania stron o charakterze informacyjnym i edukacyjnym. Praca składa się z rozdziałów poświęconych poszczególnym problemom projektowania stron internetowych. Na początku zamieszczony został program zajęć dla studentów, wraz z wyszczególnieniem celów i umiejętności, jakie będą oni nabywać oraz form realizacji zajęć. Na końcu tej części znalazła się wybrana literatura oraz odnośniki do miejsc w Internecie, gdzie znajdują się wiadomości na temat projektowania. W rozdziałach znalazły się wskazówki dotyczące ogólnych wiadomości o szkielecie dokumentu html, odnośnikach, wstawianiu grafiki, tabel, ramek, arkuszy stylów. Opisano także strategię planowania architektury informacji serwisów internetowych. Autor ma nadzieję, iż zebrane tu materiały pomogą studentom w zrozumieniu zasad tworzenia funkcjonalnych stron internetowych, jak również okażą się pomocne w zajęciach i w samodzielnej pracy. Materiały uzupełnione są o przykłady tabel i stylów. Zawartość będzie modyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii projektowania serwisów WWW. Wszelkie komentarze i uwagi proszę wysyłać na adres: skorka@up.krakow.pl Stanisław Skórka 2
Planowany program zajęć 1. Opis celów. Metody pracy w bibliotece: informacja naukowa Projektowanie stron WWW Syllabus 1.1. Posługiwanie się Internetem w działalności informacyjnej i edukacyjnej. 1.2. Zastosowanie metod architektury informacji w planowaniu i projektowaniu stron i serwisów internetowych. 1.3. Poznanie języka HTML (HyperText Markup Language), XHTML, CSS, znajomość podstawowych pojęć (hipertekst, hipermedia, WWW, DHTML, JavaScript, Script, przeglądarka, edytor HTML, gif, jpeg, odsyłacz, znacznik, znaki specjalne, itp.) 1.4. Gromadzenie, opracowywanie i udostępnianie (prezentacja) informacji w Internecie. 1.5. Umiejętność tworzenia stron WWW (World Wide Web), według aktualnych wymagań i standardów (tabele, ramki, style, kolorystyka). 1.6. Posługiwanie 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 użyciu serwisów WWW 1.9. Samodzielnie wykonanie projektu serwisu internetowego 2. Opis treści 2.1. Wprowadzenie do programowania. Cechy języka HTML, XHML zasady tworzenia dokumentu hipertekstowego. Podstawowe polecenia (znaczniki, ang. tags). 2.1.1. charakterystyka języka xhtml i jego wersji, rola W3C w rozwoju języka. 2.1.2. podstawowe elementy strony WWW (html, head, title, body, meta) 2.1.3. sposób kodowania polskich znaków, opis zawartości treściowej strony (słowa kluczowe Keywords, opis Description) 2.1.4. etykieta webmastera, czyli zasady, jakimi powinien się kierować projektant stron WWW. 2.1.5. zaprojektowanie prostej strony w oparciu o ked 2.X edytor stron WWW 2.1.6. porównanie sposobu prezentacji tego samego dokumentu w przeglądarkach Mozilla, Opera i Internet Explorer 2.2. Projektowanie strony. Użycie odsyłaczy (odnośników, hiperłączy - ang. links). Wykazy (listy numerowane i nienumerowane). Obsługa edytora stron WWW ked. Zadania: rola odsyłaczy w dokumencie hipertekstowym, rodzaje odnośników: etykieta (kotwica), odsyłacz konstrukcja odnośników: <a name= etykieta ></a>; <a href= adres_strony ></a> postać odnośnika (tekst, ilustracja, animacja). stosowanie wykazów (list uporządkowanych i nieuporządkowanych), 1. Wykonanie strony na wybrany temat 2. Przygotowanie projektu pracy zaliczeniowej 2.3. Elementy Kaskadowych arkuszy stylów, wykorzystanie skryptów języka JavaScript na stronie WWW. 2.3.1. rodzaje stylów: a\ dołączone do zewnętrznego arkusza (plik.css) b\ zagnieżdżone <style type= text/css ></style> c\ importowane d\ lokalne e\ klasy i identyfikatory class= klasa ; ID= identyfikator ) f\ rozciąganie stylu, bloki <span></span>; <div></div> 3
przykłady skryptów i ich rola w dokumencie hipertekstowym 2.4. Wykorzystanie grafiki na stronie WWW. Programy graficzne i Zadanie: podstawy ich obsługi. Formaty plików graficznych:.gif,.jpg. wady i zalety stosowania grafiki w dokumencie HTML, wstawianie grafiki do dokumentu: <img src= nazwa_pliku > poznawanie programów graficznych, Paint Shop Pro, Micrografx, podstawowe operacje przy obróbce ilustracji dla strony hipertekstowej, sposób prezentowania grafiki w sieci, formaty plików i różnice pomiędzy nimi: gif (256 kolorów), jpeg (16 mln kolorów) tło w doku mencie, kolor i grafika jako tło. Projektowanie strony biblioteki/ośrodka informacji (praca zaliczeniowa) Forma realizacji: praca indywidualna studentów 3. Materiały wytworzone przez uczestników zajęć. Podstawowym materiałem wykonanym na ćwiczeniach będzie samodzielnie opracowany i zaprojektowany zbiór stron składający się z kilku dokumentów WWW połączonego hipertekstowo z zastosowaniem wyżej wymienionych elementów języka HTML. Praca ta zostanie przygotowana na dyskietce lub na komputerze w pracowni, a następnie oddana do zaliczenia Ocena serwisu wykonanego przez studenta będzie średnią z trzech ocen według kryteriów zaliczanych do architektury informacji: ocena za system organizacji treści, za system nawigacji i za szatę graficzną (layout) Zaprojektowane strony mogą być powiązane według czterech sposobów: hierarchicznie: Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii hhhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhhhh hhh jjjjjjjjjjjjjjjjddd dddddddddddjh hhhhhhhhhhhhhh heeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee e eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeee yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyy Lllllllllllllllllllll lllllllllllllllllllllllllll lllllllllllllllllllllllllll lllllllllllllllllllllllllll lllllggggggggggg ggggggggggggg ggggggggggggg gg seryjnie: Ggggggggggggg ggggggggggggg gggggggggg hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh ssssssssssssssss sssssssssddddd dddddddddddd dddddddddddd dddddddddddd dddddddddddd ddddddddd : Ffffffffffffffffff fffff333eeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeefffffffff ffffffffffff333 uuuuuuuuuuuuu uuuuuuuuuuuuu uuuuuuffffff FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFF wirtualnie hhhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhfffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffff eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeefffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff ffffffffffffff FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFYYYYY YYYYYYYY Y sekwencyjnie: Wykonane strony będą dotyczyć konkretnej dziedziny lub zjawiska związanego z pracą dydaktyczną i informacyjną biblioteki. 4. Umiejętności nabyte podczas zajęć. Do podstawowych umiejętności, jakie student powinien opanować należy: 1/ Projektowanie dokumentów hipertekstowych zgodnie z aktualną specyfikacją języka HTML. 2/ Planowanie projektu stron oraz przebiegu pracy 3/ Wykorzystywanie elementów multimedialnych (ilustracja, dźwięk, film i animacja) do wzbogacenia treści strony. 4/ Odnajdywanie informacji w Internecie. 5/ Znajomość podstaw architektury informacji dla stron WWW 6/ Ściąganie i wysyłanie plików za pomocą klienta FTP. 7/ Posługiwanie się witryną WWW w zakresie gromadzenia, przechowywania i prezentowania informacji, oraz wykorzystywanie Internetu w działalności dydaktycznej i informacyjnej biblioteki lub ośrodka informacji. 5. Ocena kursu 51-60 pkt. ocena dst 61-70 pkt. ocena + dst 71-80 pkt. ocena db 81-90 pkt. ocena + db 91-100 pkt. ocena bdb wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww www Eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeee eeeeeeeeee Ooooooooooss sssssssssssoooo oooooos,lmncfj djdjdjdjdjdjdidi dkcicic i i i i ii i i icidisixkxkxixic icickc 4
6. Prace studentów - opracowanie planu serwisu internetowego (10) - przygotowanie projektu organizacji serwisu (15) - przygotowanie projektu nawigacji serwisu (15) - zaprojektowanie układu elementów na stronach (layout) (15) - wykonanie serwisu internetowego (min. 5 stron) (30) Na ostateczną liczbę punktów wpływa również poziom przygotowania studenta na zajęciach oraz frekwencja. 7. Literatura zalecana Książki: 1. S. Krug: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności stron internetowych. Gliwice 2006. Wyd. 2. 2. E. Meyer, CSS wg Ericha Meyera. Gliwice 2005 3. J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarządzanie. Gliwice 2004. 4. J. Nielsen: Projektowanie funkcjonalnych serwisów internetowych. Gliwice 2003. 5. L. Rosenfeld, P. Morville: Architektura informacji w serwisach internetowych. Gliwice 2003. Wyd. 2. 6. R. Williams, Jak składać tekst? Komputer nie jest maszyną do pisania. Gliwice 2003. Wyd. 2 7. M. Pearrow: Funkcjonalność stron internetowych. Gliwice 2002. 8. B. Danowski, Kaskadowe arkusze stylów. Ćwiczenia praktyczne. Gliwice 2001 9. Z. Płoski, Komputer, Internet. Szkolny słownik. Wrocław 2001 10. R. Płatek, Z. Okoń, Pajączek 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. J. Szaniawski: Duży słownik informatyczny. Warszawa 1997 14. P. Wimmer: HTML stare i nowe. Warszawa 1997 15. M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Użyteczność w praktyce. Gliwice 2008. 16. J. Wrycza-Bekier, Webwriting. Profesjonalne tworzenie tekstów dla Internetu. Gliwice 2010. Czasopisma: 1. K. Grzenkowicz: Grafika dla webmastera.. W: Magazyn Internet, nr 6-12/98 i 1/99 (8 odc.) 2. Strony WWW bez tajemnic. CHIP Special nr 13 (36), grudzień 1999. 3. J. Rafa, Poradnik praktyczny. Część 5. Tworzenie stron WWW. Magazyn Internet nr 6/2002 4. Mój serwis WWW. CHIP 2004 nr 2, s. 22-46 5. S. Skórka, Architekt informacji w bibliotece. Biblioteka w Szkole 2008 nr 1 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 języka HTML P. Wimmer: [webmaster.helion.pl] 5. WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm] 6. BRAMA - informacje na temat projektowania stron WWW P. Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml] 7. WEBMASTER czasopismo online dla profesjonalnych twórców stron WWW: [webmaster.pckurier.pl ] 8. WebReporter: [web.reporter.pl/html] 9. Test działania składni 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 Stanisław Skórka 5
I. Wstęp Strona WWW jest plikiem tekstowym zapisanym najczęściej w formacie html (ale może to być także php, shtml, i inne) aby zaprojektować stronę wystarczy zwykły Notatnik z Windows, by móc oglądać jej zawartość potrzebna jest przeglądarka stron WWW (Internet Explorer, Mozilla, Netscape). Sieć złożona ze stron WWW wzajemnie połączonych za pomocą odsyłaczy hipertekstowych (linków) nazywana jest World Wide Web (globalną pajęczyną) Skrót html oznacza język projektowania: Hypertext Markup Language (język hipertekstowego znakowania dokumentów), aby strona była widoczna w przeglądarce trzeba ją zapisać jako plik.html, np.: index.html, default.html, itp. Aby przygotować własną stronę (witrynę) przede wszystkim należy zaplanować przebieg pracy, można to zrobić opierając się na następujących fazach: 1. Faza analityczno-projektowa analiza wymagań ustalenie zasad pracy plan realizacji projekt podziału treści i szaty graficznej projekt nawigacji i rozmieszczenia elementów na stronie (layout) 2. Realizacja projektu 3. Testowanie i wdrożenie 4. Promocja 5. Zarządzanie i aktualizacja Więcej na ten temat w rozdziale X. Architektura informacji Projektowanie w języku HTML polega na formatowaniu tekstu za pomocą znaczników (tags), są dwa rodzaje znaczników: blokowe (występują parami, np.: <P></P>), oraz elementowe (pojedyncze, np.: <BR>). Działanie znacznika blokowego obejmuje tekst, który jest nim ujęty, np.: <strong>to jest tekst pogrubiony</strong> Znaczniki <B> oznaczają pogrubienie tekstu, który znajdzie się pomiędzy nimi. Znacznik elementowe działają w jednym miejscu w dokumencie, np.: <strong>to jest tekst pogrubiony</strong >,<br> <em>a to jest kursywa</em> <BR> - przejście do następnej linii. Znacznik <EM></EM> formatują tekst na postać kursywy W obrębie znaczników, zarówno blokowych, jak i elementowych znajdować się mogą atrybuty dokładniej charakteryzujące dany element, np. ilustrację <img src="imagi2/bmiecznik.jpg" width="239" height="265" border="0" alt="rozmiar: 31682 bajtów"> Atrybuty: src- nazwa pliku graficznego, np.: logo.gif width szerokość obrazka, height wysokość obrazka border grubość ramki wokół obrazka alt tekst zastępczy Więcej na ten temat w rozdziale IV. Wybrane znaczniki Więcej na ten temat w rozdziale VI. Wstawianie grafiki i tła Atrybuty są przydatnym narzędziem dla webmastera ze względu na możliwość sprecyzowania wyglądu danego elementu na ekranie, przy jednoczesnym uniemożliwieniu wstawiania wartości domyślnych przez przeglądarkę. Używanie atrybutów skraca czas ładowania się strony w oknie przeglądarki. Najwięcej możliwości formatowania dają jednak kaskadowe arkusze stylów. Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów II. Warsztat webmastera Do projektowania stron internetowych potrzebne są programy, z których duża cześć jest dostępna za darmo, niestety czasem nie idzie to w parze z jakością. 1. Edytor stron WWW, np.: EzHTML (darmowy), Pajączek, Tiger 98, WebPager, Xpress (darmowy), lub edytor tekstu (Notatnik Windows), 2. Przeglądarki WWW, co najmniej dwie: Netscape Navigator/Communicator 6.x (pol. wersja Mozilla 1.x) i MS Internet Explorer PL 6.x 3. Program do obróbki grafiki rastrowej: Paint Shop Pro 6.x X,, Adobe Photoshop, GIMP (freeware), PaintNET (freeware) 6
4. Jeżeli edytor stron WWW nie ma takiej opcji, to należy 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 gifów animownych: Jasc Animated Shop 2.02, Gif Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63 6. Galerię clipartów zbiór adresów do grafik, ilustracji, tekstur i innych przydatnych na stronach WWW obrazków, dostępnych w Internecie pod adresem: 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 tylko osnowa, aby dokument zawierał treść lub grafikę na ekranie, należy wstawić odpowiednie znaczniki w sekcji <body> </body>. Rys. 1 Szablon dokumentu html <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="creation-date" content="2004-02-26t21:29:01z" /> <meta http-equiv="content-language" content="pl" /> <meta name="description" content="strona na temat..." /> <meta name="author" content="imię nazwisko" /> <title>strona WWW</title> </head> <body> <h1>tytuł strony</h1> </body> </html> Rys. 2: Budowa hierarchiczna dokumentu HTML Strona WWW zaczyna się i kończy znacznikiem <HTML>, wewnątrz znajdują się dwie oddzielne sekcje <HEAD>, czyli głowa i <BODY> - ciało dokumentu. W sekcji HEAD umieszcza się tzw. metainformację (informację o informacji) o stronie, znaczniki <META>, ich zadaniem jest przechowywanie informacji o treści strony: Description, Keywords, autorze strony Author, stronie kodowej Content-type, języku treści strony Content-language. Informacje te są przydatne między innymi dla zindeksowania strony przez tzw. roboty wyszukiwarek, co pozwala na ich odnalezienie za pomocą wyszukiwarek internetowych (Google, Szukacz, itp.) Hierarchia dokumentu html zawiera: 7
Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii. Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu. Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu. Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu. Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu. Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling). IV. Wybrane znaczniki Znaczniki blokowe <a href=""></a> <a name=""></a> <body></body> <div></div> <em></em> <h1></h1> <h2></h2> <h6></h6> <strong></strong> <ol> <li> </li> <li> </li> </ol> lista numerowana <p></p> <span></span> <sup></sup> <title></title> <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> Znaczniki elementowe <br> <hr> <meta name="" content=""> <img src=""> V. Odsyłacze (linki) wypunktowanie Odsyłacze są podstawowym narzędziem nawigacji, dzięki któremu możliwe jest poruszanie się pomiędzy stronami. Istnieje wiele podziałów hiperłączy, w jednym z nich wyróżnia się odsyłacze semantyczne (OS) i organizacyjne (OO). OS kierują do tekstu lub dokumentu o podobnej tematyce, OO umożliwiają poruszanie się po poziomach i rozdziałach w danej hiperprzestrzeni. Z punktu widzenia webmastera odsyłacze można podzielić wg kryterium zastosowania. I tak, wyróżnia się odsyłacze kierujące do: a) stron WWW (zewnętrzne) b) usług sieciowych (e-mail, ftp, CHAT) c) etykiet (tekstu w obrębie dokumentu - wewnętrzne) d) innych dokumentów, np.: txt, PDF, doc, itp. Ad. a) hiperłącze do stron(y) WWW może mieć dwojaką postać: - względną <a href="strona.html" title="to jest treść dymka">etykieta odsyłacza</a> - bezwzględną 8
<a href="http://www.ap.krakow.pl/kbin/html/szablon.html" title="to jest treść dymka">szablon strony www</a> HREF skrót od hypertext reference TITLE opis odsyłacza, informacja, dokąd kieruje Ad. b) odsyłacz uruchamiający klienta poczty elektronicznej <a href="mailto:skorkas@poczta.fm" title="mój e- mail">skorkas@poczta.fm</a> - uruchamiający sesję FTP: <a href="ftp://sunsite.icm.edu.pl" title="ftp">serwer ftp</a> Ad. c) Składa się z dwóch członów: - odsyłającego (np.: jako fragment spisu treści): <a href="#01">rozdział 1</a> - etykiety umieszczonej gdzieś na stronie <a name="01">rozdział 1</a> Najpopularniejsze zastosowanie to spisy treści i powrót na początek strony: <a href="#top">początek strony</a> W przeglądarce MSIE 6.x nie jest konieczne zastosowanie etykiety <a name= top ></a> Ad. d) kieruje do dokumentu nie będącego stroną WWW, takich jak: txt, doc czy pdf, np.: <a href="teksty/referat.pdf" title="tekst referatu">referat w wersji on-line</a> Adresy stron WWW powinny być pisane małymi literami bez polskich znaków, podobnie nazwy plików html. VI. Wstawianie grafiki i tła Pliki graficzne mogą być udostępniane na stronie WWW w formacie GIF (do 256 kolorów) i JPG (16 mln kolorów). Format GIF nadaje się do napisów, ponieważ potrafi zachować przezroczyste tło, ale ma małą liczbę kolorów. Format JPG jest najlepszy do kolorowej fotografii i obrazów. 1. Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> IMG - skrót od słowa image (ilustracja), SRC - skrót od słowa source (źródło) 2. Warianty wyświetlania ilustracji: * wielkość modyfikujemy atrybutami: width (szerokośc) i height (wysokość), jednostką miary są piksele Np. <img src="krajobraz.gif" width= 200 height= 50 alt= Krajobraz górski > - atrybuty te przyspieszają ładowanie się obrazka. obramowanie: parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli: Np. <img src="krajobraz.gif" width=120 height=160 alt= Tekst zamienny style= border: 5px solid black > - gdy ilustracja jest odsyłaczem parametr BORDER: 0px spowoduje, że nie pojawi się ramka wokół ilustracji. * odstępy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego 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ół parametrów, text-align: left/right lub float: left/right steruje pozycją obrazka w stosunku do oblewającego go akapitu. Konstrukcja ma postać Np. <IMG SRC="obrazek" style= text-align: right; > lub <IMG SRC="obrazek" style= float: right > oblewanie tekstu z prawej strony 9
Jeśli obrazek ma być na środku strony to należy ująć go pomiędzy znaczniki : <div style= text-align: center > <img src= > </div> Duże ilustracje można pokroić na określoną liczbę kawałków, a następnie wstawić je do tabeli, pozwoli to na szybsze ładowanie się całego obrazka. Więcej na ten temat w rozdziale VII. Tabela pkt. 3. Aby przyspieszyć ładowanie się grafiki można na stronie poprzedzającej wstawić znacznik ilustracji z atrybutami szerokości i wysokości równymi 1, np..: <img src="obrazek.gif" width= 1 height= 1 hspace=0 vspace= 0 > 3. Tło na stronie WWW. Definiując <BODY> możemy wstawić parametr, który zadecyduje o graficznej postaci strony. <body style= background: url(adres_obrazka) > albo kolor Np. <body style= background: #fff"> - wywołanie pliku.jpg z folderu images dodatkowy parametr: bgproperties= fixed spowoduje, że w przeglądarce IE 4.x tło będzie stało w miejscu, a tekst przesuwał. Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów VII. Tabele 1. Podstawy projektowania tabel. Adaptując tabele dla potrzeb WWW kierowano się głównie potrzebą prezentacji danych tabelarycznych w postaci takiej, jaką widzimy w książkach czy prezentacjach multimedialnych. O ile w edytorach tekstów służą one głównie do tego właśnie celu, to w przypadku projektowania dokumentów hipertekstowych pole do zastosowania tabel jest znacznie szersze. Ale zacznijmy od podstaw. Aby zobaczyć jakąkolwiek tabelkę w oknie przeglądarki trzeba wpisać jej ogólne ramy bez atrybutów. <table border= 1 > <tr> <td> zawartość komórki 1</td><td> zawartość komórki 2</td> </tr> <tr> <td> zawartość komórki 3</td><td> zawartość komórki 4</td> </tr> </table> Otrzymamy: Zawartość komórki 1 Zawartość komórki 2 Zawartość komórki 3 Zawartość komórki 4 Definicja tabeli musi być umieszczona między tymi dwoma znacznikami <TABLE>, które stanowią jej ograniczniki. W ich ramach są umieszczane definicje rzędów <TR>, definicje komórek w rzędach <TD>, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn <TH>. Tabela w HTML samodzielnie rozkłada kolumny na stronie, dostosowuje ich szerokość i wysokość a także zawartość. Ćwiczenie: Zaprojektuj tabelkę z trzema kolumnami i pięcioma wierszami (zob. poniżej). 1 2 3 4 5 Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję o atrybut BORDER= n, gdzie n - liczba pixeli. Niekiedy wyłącza się obramowania, gdyż dodatkowe linie wpływają ujemnie na jej czytelność. Zamiast obramowania najlepiej jest wyróżnić tekst w komórkach: 10
pogrubieniem, kursywą lub inną czcionką itd.. Efekt bez obramowań osiąga się poleceniem: BORDER= 0 2. Odstępy wewnątrz tabeli. Wyrównanie danych w komórkach Kolejnym atrybutem pozwalającym modyfikować wygląd tabeli jest CELLSPACING - odległość między komórkami, czyli grubość obramowania, jeśli jest ono widoczne. Można go użyć wówczas, gdy komórki (nie tabela) mają zawierać inne obramowanie niż domyślne. Innym atrybutem znacznika TABLE jest CELLPADDING - odstęp zawartości komórki od obramowania. Obydwa atrybuty działają na wszystkich czterech ścianach komórki. Np.: <table border= 5 cellpadding= 8 cellspacing= 15 > <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> Zarówno całą tabelę, jaki i zawartość w jej komórkach (celach) można ustawiać w poziomie i pionie. Pierwszy sposób zapewnia atrybut ALIGN, użycie go razem ze znacznikiem TABLE powoduje wyrównanie całej tabeli, wiersza, komórki. W pionie ustawiamy zawartość poprzez atrybut VALIGN Np.: <table border= 5 cellpadding= 8 cellspacing= 15 align= right > Ta tabela będzie znajdowała się przy prawym marginesie (zob. poniżej), inne polecenia: left (lewy) i center (środek) wiersz 1 <tr><td align= left ></td></tr> Dane w tej komórce przesuną się do lewego marginesu, to samo można zaprojektować dla kolumny w obrębie wiersza. Np. <td align= center ></td> Oprócz wyrównania poziomego dane w kolumnach możemy wyrównywać pionowo za pomocą parametru VALIGN, który może przybierać następujące wartości: top (góra). middle (środek), bottom (dół). <td valign= top ></td> <td valign= middle ></td> <td valign= bottom ></td> 3. Szerokość i wysokość tabeli Aby określić szerokość tabeli w obrębie znacznika TABLE umieszcza się atrybut WIDTH. Wartość tego parametru można wyrazić w procentach (wielkość względna) lub pikselach (wielkość bezwzględna) Np. <table border width= 60% > </table> lub <table border width= 600 > </table> Wysokość tabeli oznacza się atrybutem HEIGHT góra środek Wielkości bezwzględne najlepiej jest stosować, gdy w komórkach tabeli znajdują się elementy obrazka, w przeciwnym wypadku pojawią się przerwy pomiędzy kawałkami obrazka. dół wiersz 2 11
<td>komórka dolna</td> </tr> Widok: Wiersze połączone Komórka górna Komórka dolna Rys. nr 3 Wielkości względne dopasowują się do okna i rozdzielczości monitora, najlepiej je stosować, gdy w tabeli znajduje się tylko tekst. 4. Atrybuty COLSPAN i ROWSPAN COLSPAN - liczba kolumn, na które rozciąga się komórka (przykład nr 1) ROWSPAN - liczba wierszy, na które rozciąga się komórka (przykład nr 2) Przykład nr 1 <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="2">kolumny połączone</td> </tr> <tr> <td width="20%">kolumna lewa</td> <td width="80%">kolumna prawa</td> </tr> </table> Widok: Kolumny połączone Kolumna lewa Przykład nr 2: Kolumna prawa <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="20%" rowspan="2">wiersze połączone</td> <td width="80%">komórka górna</td> </tr> <tr> 5. Tabele i arkusze stylów Tabelę można zaprojektować także za pomocą stylów, co pozwala na precyzyjniejsze jej dostosowanie do własnych celów. Każdemu elementowi tabeli (komórce, ramce) można nadać inną postać. Poniżej zamieszczono cechy oraz ich wartości przydatne przy projektowaniu tabel. border-bottom-style - styl określa wygląd dolnej ramki border-left-style - styl określa wygląd lewej ramki border-right-style - styl określa wygląd prawej ramki border-top-style - styl określa wygląd górnej ramki Wartości stylu: none - nie ma ramki, wartość domyślna hidden - linia ukryta dotted - linia składająca się z kropek dashed - linia składająca się z kresek solid - linia tradycyjna groove - linia wklęsła przestrzenna ridge - linia wypukła przestrzenna inset - linia wklęsła outset - linia wypukła double - linia podwójna inherit - przejęcie wartości "rodzica", border-left-width - styl określa szerokość lewej ramki -right-width -bottom-width -top-width border-bottom-color - styl określa kolor dolnej ramki -left-color - styl określa kolor lewej ramki -right-color - styl określa kolor prawej ramki -top-color - styl określa kolor górnej ramki 12
Przykład 1. Tabela z zastosowaniem stylów <table style="border-style: dotted; border-width: thin; border-color: #86708f; padding: 0px; width: 730; text-align: center; vertical-align: top"> <tr> <td> <p>komórka lewa</p> </td> <td> <p>komórka prawa</p> </td> </tr> </table> Przykład 2 <table style="border-top-style: dotted; background-color: #eeeeee ; width: 70%; height: 20%"> <tr><td> <p>pojedyncza komórka</p> </td></tr></table> Tabelę można konstruować także za pomocą znacznika DIV: <div style="position: absolute; left: 400px; top: 195px; height: 160px; width: 270px; background-color: #E2DDE8; border : 1px black solid; border-color: #000033; padding-right: 1px; padding-left : 2px;"> </div> <p>komórka tabeli</p> Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów NOTATKI 13
VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) Ogólne polecenie stylu ma postać: selektor { cecha: wartość } lub bardziej rozbudowaną: selektor { cecha1: wartość1; cecha2: wartość2 }. Gdzie selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Przykład nr 1 P {font-family: Trebuchet MS } Selektorem jest P, cechą - rodzina czcionek, wartością - Trebuchet MS. Style mogą być umieszczane w dokumencie na kilka sposobów: 1. Kody formatujące są umieszczane na początku strony i oddziałują na cały dokument. NP.: Fragment nagłówka dokumentu z definicją znaczników BODY i P <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>zagnieżdżanie arkusza stylów</title > <meta name="description" content="style"> <style type="text/css"> 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: arial, helvetica; font-weight: normal} </style> </head> 2. Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą wybranego znacznika dokumentu (styl lokalny). NP.: Właściwości ujęte w cudzysłów dotyczą tylko części dokumentu objętej znacznikami <P></P> <P style="font-size: 12pt; font-weight: bold; font-family: Helvetica">Treść akapitu</p> 3. Klasy, obejmują dowolny fragment dokumentu i nie są związane z wybranymi znacznikami. NP.: Dają dużo możliwości webmasterowi, pozwalają dowolnie manipulować akapitami na stronie WWW. U dołu klasy dla znacznika <P>, rozpoczynają się od kropki. <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> W głównej części dokumentu klasa zostaje wstawiona w obrębie nawiasów <> 4. Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych. NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane różne elementy, takie jak: body, p., a, h1-h3, td, li 14
body {background: url(folder/plik.jpg); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed; marginleft: 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: bold 16pt verdana, arial, helvetica; color: #000000} h1 span {font-size: 14pt; color: navy} h2 {font-size: 14pt; font-family: arial, helvetica; fontweight: 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; fontweight: normal} #center {text-align: center}.maly {font-size: 8pt}.italic {font-style: italic} Dokument ten znajduje się na serwerze pod podaną wyżej nazwą, korzystają z niego wszystkie te strony, które w nagłówku <HEAD> mają następujący zapis: <link rel=stylesheet href="mojstyl.css" type="text/css"> 5. Kody formatujące są importowane z innej strony za pomocą polecenia @import. Np.: Podany jest adres bezwzględny do arkusza stylów mojstyl.css <style> @import url("http://www.polbox.com.pl/style/mojstyl.css"); </style> Przyklad interaktywnego menu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>1</title> <meta http-equiv="content-language" content="pl"> <meta name="author" content="jacek"> <style type="text/css"> #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; borderbottom: 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} </style> </head> <body style="margin: 0 0 0 0"> <div id="menu"> <ul> <li><a href="" title="">okładka</a></li> <li><a href="" title="">karty tytułowe</a></li> <li><a href="" title="">materiały wprowadzające</a></li> <li><a href="" title="">tekst główny</a></li> <li><a href="" title="">materiały uzupełniające tekst główny</a></li> <li><a href="" title="">materiały informacyjno-pomocnicze</a> </li> </ul> </div> <p><a href="05.html" title="">«poprzednia</a> <a href="01.html" title="">następna »</a></p> </body> </html> 15
IX. RAMKI 1. Wstęp Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML, pozwalają na przeglądanie wielu dokumentów równocześnie (tzw. format metadokumentowy). Aby użyć tej nowej formy prezentacji dokumentów WWW trzeba utworzyć zbiór ramek na stronie podstawowej *.html, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia odsyłacza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi. Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nieinterpretujące ramki. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES. 2. Ramki w postaci kolumn Każdy z wydzielonych w pliku głównym obszarów jest zajmowany przez określoną stronę. U dołu przykład strony podstawowej, objętej znacznikami FRAMESET zamiast BODY, zawierającej podział na dwie kolumny -parametr COLS dzieli ekran kolumny - pierwsza od lewej o szerokości 25% ekranu, druga o rozmiarach dalszych (75%). Znacznik FRAME i parametr SRC przypisuje określonym częściom ekranu zawartość (czyli strony WWW), atrybut SCROLLING steruje wyświetlaniem pasków przewijania i może zawierać wartość: auto, yes, no. NAME oznacza nazwę dla określonej części 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 przykład strony z lewej nadając mu nazwę okno.htm W miejsce nazw strona.htm i strona2.htm wpisz nazwy dwóch stron utworzonych na poprzednich zajęciach. Zobacz w przeglądarce jak wygląda strona okno.htm. Powinny być widoczne dwie poprzednio wprowadzone strony 3. Ramki w postaci wierszy Podobny schemat z wyjątkiem polecenia COLS możemy zastosować dla innego podziału ekranu. Parametr ROWS dzieli ekran na wiersze. Ćwiczenie 2: Przepisz poniższy przykład strony podstawowej dla ramek i nadaj jej nazwę okno2.htm. Dalej postępuj tak jak w ćwiczeniu nr. <HTML> <HEAD> <TITLE>Ramki z wierszami</title> </HEAD> <FRAMESET ROWS="30%,*"> <FRAME SCROLLING="auto" NAME="góra" SRC="strona1.htm"> <FRAME SCROLLING="auto" NAME="dół" SRC="strona2.htm"> </FRAMESET> </HTML> 4. Ramki wielodokumentowe Objaśnienie (do listingu poniżej) W pierwszej linii otwieramy dokument. Konstrukcję ramek rozpoczęto od zadeklarowania w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi. 16
</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> W czwartej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc drugi wiersz na trzy kolumny. W piątej, szóstej i siódmej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony. W ósmej linii musimy zakończyć tę "lokalną" definicję FRAMESET. W dziewiątej linii tworzymy definicję ramki dla trzeciego wiersza, przypisując jej odpowiednią stronę. W dziesiątej linii kończymy "globalną" definicję FRAMESET. W jedenastej cały dokument. Ćwiczenie 3: Przepisz powyższy kod dla ramki wielodokumentowej. Zamiast nazw stronan.htm (N - numer) wpisz nazwy stron, które zostały zaprojektowane, zmodyfikuj wygląd tych stron, tak aby były prawidłowo wyświetlane w ramce (formatowanie tekstu, zmniejszenie czcionki itd.) 5. Odsyłacze Co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce? Jest to podstawowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom. Powróćmy do przykładu przedstawionego wyżej w ćwiczeniu nr 1. Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lewa_część, natomiast prawej prawa_część. Należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie lewa_część. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - strona.htm. Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie prawa_część. Można to uczynić za pomocą następującej konstrukcji: <a href="egipt.html" target="prawa_część">egipt</a> itd. Analizując poszczególne człony powyższego zapisu: HREF="nazwa_ładowanej_strony" - dotyczy nazwy pliku, w którym jest zapisana dana strona, TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widać tutaj rolę, jaką pełnią nazwy ramek. Istnieją cztery zastrzeżone nazwy w przypadku atrybutu TARGET: TARGET="_blank" - otwiera się nowe, czyste okno przeglądarki, które pojawia się przed poprzednim TARGET="_self" - odsyłacz ładuje się w swoim własnym okienku TARGET="_parent - odsyłacz ładuje się w pełnym wymiarze okienka, nawet gdy oglądamy je w innej ramce TARGET="_top" - likwiduje wszystkie ramki i przenosi Cię pod wskazany adres URL w czystym okienku przeglądarki, Ćwiczenie 4: Zmodyfikuj plik, który zastąpił w ćwiczeniu 1 plik strona.htm, wpisując odsyłacze kierujące strony do ramki prawej nazwanej prawa_część, a następnie wprowadź jeden odsyłacz kierujący wywołaną stronę do czystego okna przeglądarki. 6. Inne parametry dla ramek Do innych atrybutów przydatnych dla ramek i stosowanych dla znacznika FRAME należą: FRAMEBORDER - wyłączanie/włączanie obramowania trójwymiarowego, np. FRAMEBORDER= 0 (wyłączanie), 17
MARGINHEIGHT - odstęp między górną i dolną krawędzią ramki a jej zawartością, MARGINWIDTH - odstęp między prawą i lewą krawędzią a zawartością ramki, NORESIZE - uniemożliwienie zmiany rozmiaru ramki (normalnie można to robić) Niektóre atrybuty w obrębie znacznika FRAMESET: BORDER - dodatkowy odstęp pomiędzy ramkami w pikselach, BORDERCOLOR - kolor obramowania, COLS - podział okna w poziomie (na kolumny), ROWS - podział okna w pionie (na wiersze) NOTATKI 18
X. Architektura informacji stron WWW Projektując stronę z myślą o publikowaniu w Internecie, niezależnie od jej przeznaczenia, należy pamiętać o tym, że będą z niej korzystać użytkownicy o różnych umiejętnościach i wiedzy, dlatego na początku projektowania należy wziąć pod uwagę rozmaite kryteria wpływające na jej funkcjonalność. Zespół kryteriów uwzględnianych podczas tworzenia stron internetowych określa się mianem architektury informacji (AI) stron WWW. AI jest procesem organizowania, oznaczania, projektowania nawigacji i systemów wyszukiwawczych, które pomagają użytkownikom w znajdowaniu i zarządzaniu informacją. W Polsce ten termin nie jest jeszcze zbyt popularny, ale w Stanach Zjednoczonych posiada już sporą literaturę i nadal się rozwija. Przykładowy plan tworzenia architektury informacji Projektowanie AI obejmuje cztery główne obszary wymienione w definicji powyżej: 1. Organizowanie informacji 2. Projektowanie systemów nawigacji 3. System oznaczeń 4. System wyszukiwawczy 1. Organizowanie informacji Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie treści, polegające na podzieleniu całości informacji na mniejsze fragmenty, które będą ze sobą powiązane. Jest to szczególnie ważne przy rozbudowanych serwisach tematycznych. Podstawą organizacji treści może być przedmiot, zadanie, użytkownicy, geografia, chronologia czy porządek alfabetyczny. Najczęstszym schematem organizowania jest hierarchia (Rys. nr 4). 1. Wyznaczenie celów 2. Użytkownicy 2.1. określenie odbiorców 2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze użytkowników) Rys. nr 4 3. Zawartość treściowa serwisu 3.1. grupowanie informacji 3.2. organizowanie i oznaczanie treści 4. Struktura serwisu 4.1. zaprojektowanie budowy serwisu 4.2. wykonanie szkicu serwisu 4.3. zaprojektowanie systemów nawigacji globalnej i lokalnej 5. Projektowanie szaty graficznej 5.1. rozmieszczenie elementów na stronach 5.2. szkice projektowe 5.3. wykonanie serwisu na bazie projektów Kryteriami, które powinien uwzględnić architekt informacji podczas tworzenia struktury hierarchicznej dla zbioru stron, są szerokość i głębokość. Szerokość odnosi się do liczby opcji, z których może wybierać użytkownik na danym poziomie w hierarchii, głębokość do liczby tych poziomów w serwisie. Wybór hierarchii powinien być uzależniony m.in. od ilości informacji, przeznaczenia serwisu i preferencji użytkowników. Źle zaprojektowana hierarchia sprawia, że informacje są niedostępne dla użytkowników. Zbyt wąska i głęboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentów podczas poszukiwań, co może stać się przyczyną zjawiska zagubienia w hiperprzestrzeni. Z kolei zbyt szeroka i wąska stawia użytkownika przed wyborem jednej z bardzo wielu opcji, zjawisko takie nazwano przeładowaniem poznawczym. Dla hierarchii wąsko-głębokiej optymalnym rozwiązaniem jest podział do najwyżej pięciu poziomów. Strona główna (powitalna) dla serwisu opartego na hierarchii szeroko-płytkiej powinna udostępniać wybór opcji (odnośników) w liczbie ok. 7-9, nie więcej niż 10. 19
Przekroczenie tej granicy powoduje wspomniane już zjawisko przeładowania poznawczego. Rys. nr 7 Rys. nr 7 System hipertekstowy Rys. nr 5 Serwisy, w których planowane jest powiększanie zasobów powinny być projektowane z zastosowaniem raczej hierarchii szeroko-płytkiej oraz jednoznacznych oznakowań, tak, aby zminimalizować zabłądzenie w systemie. Rys. nr 6 2. Projektowanie systemów nawigacji System nawigacji jest podstawowym narzędziem przemieszczania się, zarówno po niewielkich zbiorach dokumentów, jak i obszernych serwisach i katalogach stron WWW. Jennifer Fleming scharakteryzowała potrzeby użytkownika nawigującego, które warto wziąć pod uwagę w trakcie projektu. 1. Gdzie jestem? 2. Dokąd mogę iść (przemieścić się)? 3. Jak się tam dostać? 4. Jak wrócę do miejsca gdzie teraz jestem? W zależności od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiają się szczegółowe potrzeby, takie jak: Skąd powinienem zacząć? Czy potrzebna jest mi specjalna wiedza lub narzędzie? Jak otrzymać odpowiednią dla mnie informację? Co zrobić, jeśli pojawią się pytania? To tylko niektóre z potrzeb szczegółowych. Ta sama autorka podała zasady funkcjonalnego systemu nawigacyjnego: 1. Łatwy do nauczenia 2. Konsekwentny 3. Zgodny z treścią strony (kontekstem) 4. Dostarcza informacji (interaktywny) 5. Oferuje wybór opcji 6. Używa jasnych i zrozumiałych oznaczeń 7. Zgodny z przeznaczeniem serwisu 8. Pomaga w dotarciu do celu Oprócz hierarchicznych schematów organizacyjnych występuje także system hipertekstowym, umożliwiający dowolne przeglądanie zasobów 20
Wskazówki projektowania nawigacji dla webmasterów: Rozmieszczaj informacje starannie, tak, aby użytkownik zawsze wiedział w którym miejscu systemu się znajduje Nie zmuszaj użytkownika do przerwania jego pracy przez podawanie odsyłaczy do innych stron, aplikacji lub miejsc Umieszczaj kontrolę nawigacji w systemie Zabezpiecz główny kontekst poszukiwań (interakcji), aby użytkownik nie musiał go sobie odtwarzać Minimalizuj opóźnienia sieci poprzez czytelną i jasną nawigację i zredukuj czas ładowania się Ad. c/ lokalny s.n. stosowany w rozbudowanych serwisach WWW, uzupełnia globalny s.n., wykorzystywany do połączenia podstron w serwisie. Ad. d/ kontekstowy s.n. oparty na odsyłaczach znajdujących się w tekście, widocznych jako wyróżniony tekst. Typy systemów nawigacji a. hierarchiczny b. globalny c. lokalny d. kontekstowy Ad. a/ hierarchiczny s. n. podstawowy s.n. oparty na zasadzie nadrzędności i podrzędności, ze strony nadrzędnej odsyłacze kierują do stron podrzędnych (Rys. nr 8). Więcej w rozdziale 1. Organizowanie informacji Inne podziały systemu nawigacji - poprzeczna (pozioma) obejmuje strony z tego samego poziomu, pozwala przejrzeć treść na określonym poziomie serwisu - pionowa (głęboka) kieruje w głąb hierarchii, zgodna z przedmiotem poszukiwań Rys. nr 8 Ad. b/ globalny s.n. najczęściej uzupełnia hierarchiczną organizację informacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u dołu każdej strony serwisu, na podstronach mogą znajdować się dodatkowo odsyłacze powrotne kierujące do strony głównej. Narzędzia nawigacji - paski nawigacyjne - ramki - menu ściągane (pull-down) - mapy odsyłaczy - indeksy stron - okruchy chleba zaznaczanie trasy nawigowania poprzez zmianę koloru odsyłaczy kierujących do odwiedzonych stron 21