Design WWW-strßnek

Ji°φ Kosek ml.

V p°edchozφch dφlech jsme se d∙kladn∞ seznßmili s jazykem HTML. To vÜak bohu₧el jeÜt∞ neznamenß, ₧e mßme vÜechny p°edpoklady pro vytvo°enφ perfektnφch WWW-strßnek. HTML je jen prost°edkem k zp°φstupn∞nφ informacφ. D∙le₧itΘ je mφt zajφmavΘ informace a um∞t je uspo°ßdat tak, aby byly pro Φtenß°e atraktivnφ a snadno p°φstupnΘ. Dnes si ukß₧eme n∞kterΘ recepty, kterΘ naÜe strßnky mohou vylepÜit. Nejde vÜak v ₧ßdnΘm p°φpad∞ o p°esn² nßvod, kter² lze pou₧φt v₧dy. JednotlivΘ myÜlenky je pot°eba p°izp∙sobit konkrΘtnφ situaci a po₧adavk∙m.

Organizace informacφ

V₧dy, kdy₧ zp°φstup≥ujeme n∞jakΘ informace stojφme p°ed zßkladnφ otßzkou, jak tyto informace logicky uspo°ßdat do jednotliv²ch strßnek a jak majφ b²t tyto strßnky velkΘ.

Struktura strßnek

Hypertext nßm umo₧≥uje informace uspo°ßdat do tΘm∞° libovolnΘ struktury. M∞li bychom se vÜak dr₧et na zemi a nevytvß°et d₧ungli informacφ zamotanou lißnami odkaz∙ tak, ₧e se z nφ u₧ nikdo nikdy nevyhrabe. LidΘ jsou na n∞kterΘ zp∙soby strukturovßnφ informacφ zvyklφ. Nejb∞₧n∞jÜφ strukturou je hierarchie -- znßme ji z v∞tÜiny knφ₧ek. Kniha se sklßdß z kapitol. Kapitola se zase sklßdß z jednotliv²ch sekcφ atd.

Dr₧et se tohoto Φlen∞nφ i v naÜich strßnkßch se v∞tÜinou jevφ jako dobr² nßpad. U₧ivatelΘ jsou na tento druh Φlen∞nφ informacφ zvyklφ. Vytvo°φme tedy jednu strßnku s obsahem, z kterΘ povedou odkazy na jednotlivΘ kapitoly a sekce. Ka₧dß kapitola a sekce by pak m∞la obsahovat odkazy na p°edchßzejφcφ a nßsledujφcφ kapitolu a sekci a odkaz na obsah.

V²Üe uvedenΘ Φlen∞nφ informacφ p°ivφtajφ zejmΘna u₧ivatelΘ, kte°φ prezentovanΘ informace studujφ systematicky. Pro u₧ivatele, kte°φ pouze obΦas vy₧adujφ p°φstup k n∞jakΘ konkrΘtnφ informaci, m∙₧eme nap°φklad vytvo°it rejst°φk, kter² bude obsahovat odkazy na jednotlivΘ sekce podle jejich obsahu -- n∞co jako referenΦnφ p°φruΦku.

U₧ivateli orientaci rovn∞₧ usnadnφ, pokud vÜechny spolu souvisejφcφ strßnky majφ stejn² grafick² design.

DΘlka strßnek

DΘlka strßnek by m∞la v prvnφ °ad∞ vychßzet ze struktury poskytovan²ch informacφ. Jedna strßnka by m∞la obsahovat logicky souvisejφcφ informace. Musφme vÜak dßt pozor na to, aby takovßto strßnka nebyla p°φliÜ dlouhß. Jednak se pak dlouho p°enßÜφ po sφti (musφme zapoΦφtat i dobu pot°ebnou na p°enesenφ grafiky). Druhak je orientace v dlouhΘm textu pro Φtenß°e obtφ₧nß. V t∞chto p°φpadech se pokusφme jednu strßnku rozd∞lit do n∞kolika menÜφch.

ObecnΘ pravidlo, kterΘ by rozliÜovalo mezi dlouh²m a krßtk²m dokumentem neexistuje. P°esto -- strßnka s odkazy na dalÜφ strßnky by se m∞la vejφt celß na obrazovku, aby u₧ivatel pohromad∞ vid∞l vÜechny mo₧nosti dalÜφho putovßnφ za informacemi. Dokumenty, je₧ obsahujφ text, by nem∞ly b²t delÜφ ne₧ n∞kolik obrazovek.

Na tomto mφst∞ si neodpustφm jeÜt∞ poznßmku. Ka₧d² autor chce, aby jeho strßnky byly atraktivnφ. P°idß na strßnku r∙znou grafiku, a pozd∞ji i animace. Animace bychom vÜak m∞li pou₧φvat velmi opatrn∞ a to zejmΘna na strßnkßch, kterΘ obsahujφ ji₧ n∞jakΘ delÜφ ·seky textu. P°i Φtenφ textu r∙znß skotaΦφcφ loga a rotujφcφ nesmysly rozptylujφ Φtenß°e a prodlou₧φ Φas pot°ebn² k absorbovßnφ informacφ.

Odkazy

Odkazy jsou nejv∞tÜφm rozdφlem publikovßnφ na Webu oproti b∞₧n²m postup∙m na papφr. Mnoho zaΦßteΦnφk∙ s nimi takΘ mß problΘmy. My si ukß₧eme ty nejΦast∞jÜφ chyby a omyly p°i jejich pou₧φvanφ. Samoz°ejm∞ nevynechßme ani p°φklady sprßvnΘho pou₧itφ.

Klikn∞te zde

Na mnoha strßnkßch se setkßme s odkazy typu:

Pro informace o novΘ verzi naÜeho programu klikn∞t∞ zde.

Od takov²chto slovnφch h°φΦek bychom se m∞li oprostit. T°eba proto, ₧e n∞kdo pou₧φvß znakov² prohlφ₧eΦ Lynx a t∞₧ko v n∞m bude n∞kde klikat myÜφ. Nebo kdy₧ si takovou strßnku vytiskneme na papφr, u₧ si taky ani neklikneme. LepÜφ je pou₧φt n∞co jako:

Od Φervna je dostupnß novß verze programu.

V∙bec bychom se na strßnkßch m∞li oprostit od pou₧φvßnφ termφn∙, kterΘ souvisejφ s technologiemi Webu a Internetu. B∞₧nΘho u₧ivatele Webu nezajφmß, co je to odkaz, WWW-server nebo FTP-archiv.

Relativnφ vs. absolutnφ odkazy

P°i vytvß°enφ odkazu stojφme p°ed problΘmem, zda jej vytvo°it jako relativnφ nebo absolutnφ. NaÜt∞stφ na to existuje velice jednoduchΘ pravidlo. Mezi vlastnφmi souvisejφcφmi strßnkami bychom m∞li pou₧φvat relativnφ odkazy. Nebude pak problΘm celou skupinu strßnek p°enΘst na jin² server. Oproti tomu odkazy na cizφ zdroje a strßnky by m∞ly b²t absolutnφ, aby fungovaly i po p°φpadnΘm p°esunu naÜich strßnek na jin² server.

Odkazy nebo kopie

ObΦas na naÜich strßnkßch mßme informaci, ke kterΘ existujφ dalÜφ podrobnosti n∞kde jinde. Mßme tedy dv∞ mo₧nosti: (1) vytvo°it na tuto informaci odkaz; (2) zkopφrovat cizφ strßnku s informacφ k naÜim a vytvo°it odkaz pouze na tuto kopii.

Pokud vytvo°φme kopii p°id∞lßme si tφm spoustu prßce, proto₧e musφme neustßle kontrolovat, zda se originßl nezm∞nil. N∞kdy m∙₧eme kopii vytvo°it v dobrΘ vφ°e, ₧e z naÜeho serveru bude rychleji p°φstupnß. Musφme si vÜak uv∞domit, ₧e Internet je celosv∞tovß sφ¥ a ₧e n∞kdo jin² mß k danΘmu zdroji t°eba mnohem rychlejÜφ p°φstup ne₧ my.

Samoz°ejm∞, ₧e existujφ situace, kdy se po°izovßnφ kopiφ vyplatφ. Je to v p°φpadech, kdy se odkazujeme na doΦasnΘ informace (nap°. novinovΘ Φlßnky nebo dokument, kter² se vyvφjφ, ale nearchivujφ se jeho starÜφ verze).

Dokument

Nynφ si shrneme to, na co bychom u ₧ßdnΘho dokumentu nem∞li zapomenout.

V prvnφ °ad∞ bychom m∞li ka₧d² dokument podepsat, aby bylo z°ejmΘ, kdo je autorem prezentovan²ch informacφ. ┌pln∞ postaΦφ, kdy₧ na konec dokumentu p°ipojφme naÜe inicißly, kterΘ budou odkazem na naÜi domovskou strßnku, kde p°φpadn² zßjemce nalezne naÜi adresu a e-mail.

U ka₧dΘho dokumentu by rovn∞₧ m∞la b²t informace o tom, zda je ·pln², kdy byl naposledy modifikovßn a dokdy platφ. N∞kterΘ z t∞chto informacφ lze do strßnky nechat vlo₧it serverem automaticky pomocφ SSI (Server Side Includes).

Ka₧d² dokument by m∞l obsahovat odkaz na jemu nad°azen² dokument, aby i nßhodn² nßvÜt∞vnφk dokßzal strßnku za°adit do sprßvnΘho kontextu.

Znakem kvalitnφ strßnky je i dob°e zvolen² nßzev. Pokud chceme naÜi strßnku lΘpe p°ipravit pro vyhledßvacφ stroje, m∞li bychom ji doplnit i o struΦn² popis a o klφΦovß slova. Vyu₧φvß se k tomu element META, kter² se smφ pou₧φt v zßhlavφ strßnky pro p°ipojenφ libovolnΘ metainformace. Pomocφ atributu NAME urΦφme jmΘno metainformace a atributem CONTENT pak samotn² obsah metainformace:

<HEAD>
<TITLE>Elektromix, a.s. </TITLE>
<META NAME="description"
      CONTENT="Elektromix je firma zab²vajφcφ
               se prodejem domßcφch spot°ebiΦ∙
               na splßtky">
<META NAME="keywords"
      CONTENT="Elektromix, prodej, elektrickΘ
               spot°ebiΦe, leasing">
</HEAD>