AMIGA REVIEW online
  Uvodná stránka     Software     Hry     Obaly     Download     Amiga na PC     Amiga Forever  

Webdesign na Amize - #1

LUBOŠ NĚMEC

Následující seriál pojednává především o webdesignu na Amize jako celku, mezi něž patří zpracování grafiky, animace, použití HTML editorů i webových prohlížečů (nejen těch amigovských), prostě takový mix o všem, co s webem a Amigou nějak souvisí. Místy zabrousím i do situace panující kolem nové i stávající platformy Amiga, protože i to nutně souvisí se současným a budoucím software pro naše milé počítače. Kritika bude občas určitě tvrdá, ale pokud mám objektivně uvést opravdu všechno, co lze v oblasti webdesignu na Amize vytvořit, musím si vzít pro srovnání programy z PC či Maca. Tento miniseriál o webdesignu si rozhodně neklade za cíl naučit vás čtenáře základy jazyka HTML (na to si můžete koupit spoustu knih), ale spíš zamyslet se nad celou filozofií webu jako informačního média, prozkoumat, co je možné na Amize vytvořit a co ne, jaký program eventuálně použít a také se budeme zabývat podrobněji některými obecnými zásadami při tvorbě WWW stránek.

Pár slov na úvod...
Díky existenci mnoha kvalitních publikací ať už na internetu (referenční příručky jazyka HTML) nebo v tištěné formě si každý začínající i pokročilý zájemce o tvorbu WWW stránek může rozšířit své obzory, popřípadě se naučit alespoň základy jazyka HTML. Na Amize je to v podstatě nutnost, neboť WYSIWYG editorů umožňujících tvorbu webu relativně stejně snadno jako například pracovat v DTP programu je žalostně málo a vlastně jediný plně "nativní" editor MetaIWEB nesplňuje téměř žádné nároky kladené na použitelný WYSIWYG HTML editor. Řešením z nouze jsou Netscape Composer nebo FrontPage Express obsažené v balících webových prohlížečů Netscape Navigator/Communicator a MS Internet Explorer v 68K verzích provozovaných pod emulátorem Macintoshe. Nehodlám se zde zabývat faktem, do jaké míry je pohodlí práce v těchto emulovaných programech vyhovující, nehledě k nutně vzniklým problémům s kódováním češtiny, raději na uvedený postup zapomeňte. Pro Amigu existuje několik slušných ASCII HTML editorů, které sice nepracují v módu WYSIWYG a pro práci s nimi budete nutně potřebovat znát alespoň základy jazyka HTML a nejpoužívanějších tagů, s těmito editory (a vlastně i s jakýmkoliv textovým editorem) však docílíte při dodržení syntaxí a některých dalších obecných zásad slušných výsledků.

Téma první - HTML kód, čeho se vyvarovat a několik tipů
Bez dlouhých okolků se vrhneme rovnou do prostředí jazyka HTML. Na výpisu několika částí ideálního studijního materiálu - zkušebního čísla Internetového magazínu od P.Štěpána (původní zdroj: www.omegaplus.cz/stepan1/webmagazin/) se nyní pokusím vysvětlit, jak by HTML kód stránky vypadat neměl a doufám, že vám popsané chyby pomohou při tvorbě webových stránek. Většina chyb vznikla zřejmě kombinací WYSIWYG editoru a následnou manuální editací HTML kódu, budiž tedy ponaučením jedno z pravidel webdesignu - pokud už píšete kód ručně, určitě byste měli znát správnou syntaxi nejpoužívanějších tagů nebo se nesnažit do kódu zasahovat a ponechat vše na použitém WYSIWYG editoru. Není to vždy ideální, ale určitě lepší než kombinace obojího při neznalosti HTML jazyka. Všechna označená místa v ukázkách jsou syntakticky špatně nebo nemají valný smysl, některé věci jsou dokonce zcela nesmyslné. Ke kódu pouze poznámka - až na označení chyb, očíslování řádek a pro lepší přehlednost zformátování několika řádek není samozřejmě výpis nijak redakčně upravován! (HTML kód v rámečku nahoře)

Ukázka první

01. <html>
02. <head>
03. <meta http-equiv="Content-Type" content="textlhtml; charset=windows-1250">
04. <title>Menu knihy - Internetový magazín</title>
05. <BODY BACKGROUND="" BGCOLOR="bisque">
06. </head>
07. <body>
O8. <center><img src="../images/menu.gif" alt="menu" border="0"></center></br>
09. <a href="dabel.htm" target="main"><ul><font face="tímes new roman,times,serif" size="3"> Dějiny ďábla</a><br><p>
10. <a href="monty.htm" target="main"><font face="times new roman,times,serif" size="3">
11. Monty</a><hr><p>
12. <center>
13. <a href="frame_kultura.htm" target=_top><img src="../buttons/kultura_small.gif" alt="button kultura"
14. border="0"></li></center></a><br><p>
15. </body>
16. </html>

Začneme hned řádkem 05 na kterém najdeme tag <BODY> pro určení pozadí stránky a hned pod ním se nám skví ukončení hlavičky stránky </HEAD>. Tag <BODY> nemá v hlavičce co pohledávat, naopak má být uveden vždy až po hlavičce. Řádek 07 obsahuje pouze jeden tag, je to poněkud zmatené opět <BODY>, tentokrát už správně za hlavičkou. Přítomnost těchto dvou shodných tagů je samozřejmě nesmysl, ale pokračujme dál. Čeština specifikovaná v řádku 03 metatagem "contenttype" je vzhledem k použitému kódování v pořádku, v amigovské verzi shodné stránky (bez ukázky) ale autor zkonvertoval WindowsEE (CP1250) do K8 a E2 kódování, avšak metatag "content-type" v této verzi stránek stále udává kódování CP1250. Co se stane při prohlížení v jiném než amigovském browseru, který si stránku podle informací v metatagu bude snažit eventuálně překódovat, to jistě není nutné popisovat. V řádku 08 přichází na řadu pravá perla jednoznačně dokládající nutnost pečlivě po sobě HTML kód kontrolovat a nepsat bludy - ukončení tagu </BR> je pochopitelně nesmysl a nic takového v HTML jazyku neexistuje. Dále můžeme pokračovat v řádku 09, kde začíná tag <UL>, který ale nikde nekončí, zato paradoxně je na řádku 14 ukončení tagu </LI>, což jednak není zapotřebí a jednak tento tag v kontrastu s <UL> pro změnu nikde nezačíná! V řádku 09 najdeme ještě zajímavý způsob odřádkování a definování nového odstavce, který v této kombinaci nemá valný smysl, totéž se opakuje ještě několikrát. Řádek 13 obsahuje z hlediska syntaxe pouze jednu chybu, a to chybějící uvozovky v určení cílového rámce, stejná chyba se vyskytuje ještě mnohokrát ve druhé ukázce. Nakonec jsem si nechal definování fontů. Po každém názvu fontu a čárce by měla být mezera, také určení pevné velikostí písma size="3" není příliš obvyklé a místo fixní hodnoty je lepší použít hodnotu relativní. Nastavení fontů lze samozřejmě provést několika způsoby, pokud se jedná o HTML dokument s češtinou, neměly by chybět u fontů i jejich jazykové specifikace. U amigovských webových browserů zatím vůbec nezáleží na tom, jaký font je v HTML kódu specifikován (browsery ho stejně neumí rozpoznat, ale například v IBrowse 2 x už lze nastavit korektní přemapování fontů dle jejich názvů), ale je logické předpokládat, že si webové stránky budou prohlížet i uživatelé PC či Maca. Proto je lepší se držet doporučených definic fontů, pro bezpatkový a patkový font je jedna ze správných a nejuniverzálnějších definic pro bezproblémovou funkčnost stylu písma v PC i MacOS browserech následující:

<FONT FACE="Arial CE, Helvetica CE, Arial, Helvetica, sans-serif" >
<FONT FACE="Times New Roman CE, Times CE, Times New Roman, Times, serif">

Pomocí CSS stylů by to pak bylo:

{ font-family: Arial CE, Helvetica CE, Arial, Helvetica, sans-serif; }
{ font-family: Times New Roman CE, Times CE, Times New Roman, Times, serif; }

Další část stránky ze stejného zdroje je už o něco složitější a bohužel ještě méně přehledná. Je snad jasné, že "lepení" všech tagů na sebe bez jakékoliv řádu určitě nevede k přehlednosti stránky a pochybuji, že se v ní pak vyzná i sám autor (vlastní smutná zkušenost...), z hlediska funkčnosti stránky to ale není žádná chyba a záleží jen na vás, jak si HTML kód v editoru uzpůsobíte a zformátujete. Přitom je třeba dbát na některé výstřelky jednotlivých browserů, některé z nich nemají rády například mezery mezi tagem <A> a <TD> v tabulkách, to samé platí při ukončování tagu </FONT> apod. Žádná příručka nic podobného bohužel neuvádí (nikdo totiž nezná ani současně nepoužívá všechny existující webové browsery), takže výsledek poznáte až na zobrazení v daném browseru a není tedy nijak těžké tu odklepnout ENTER, tu zase smazat mezeru, prostě ladit a ladit, o tom celý web je.

Ukázka druhá

01. <font face="arial,helvetica,sans" size="+1">
02. <b>Rubrika pra všechny zájemce o informace z kulturní oblasti</b></font><br><p>
03. <font face="times new roman,rimes,serif" size="+l">
04. Bližší informace o obsahu této rubriky nalezte v jednotliých podrubrikách.<br><p>
05. Ve zkušebním čísle funguji části:</font><center><table><tr>
06. <font face="times new roman,rimes,serif" size="+1"><td><a href="frame_film.htm" target=_top></a>
07. <ul><b><a href="frame_film.htm" target=_top>
08. <li><font face="times new roman, times,serif">Film</font></li></a></b></ul></td></font>
09. <td><a href="frame_hudba.htm" target=_top>
10. <ui><li><font face="times new roman, times serif" size="3"><b>Hudba</b></font></li></ul></a></td>
11. <td><a href="frame_knihy.htm" target=_top><font facetimes new romanserif" size="3"></font></a>
12. <ul><b><font facetimes new romanserif" size="3">
13. <a href="frame_knihy.htm" targer=_top><li>Knihy</li></a></font></b></ul></td>
14. <td><a href="frame_radio.htm" target=_top></a><ul><font face="times new roman,times,serif" size="3">
15. <a href="frame_radio.htm" target=_top><li><b>Rozhlas</b></li></a></font></ul></td>
16. </table></center>
17. <hr><p>
18. <center><table>
19. <tr><td><a href="authors.htm"><img scr="../butons/authors_small.gif" alt="button autori" border="0"></a></td>
20. <td><a href=menu_magazin.htm" target=_top>
21. <img src="../buttons/menu_magazin.gif" alt="button menu magazínu" border="0"></a></td>
22. <td><a href="uvod.htm" target=_top><img scr="../buttons/uvod_small.gif" alt="button uvod" border="0"></a></td>
23. </table></center>

Definice fontů na prvním řádku ukázky tentokrát pro bezpatkové písmo jsou chybné, opět zde najdeme typickou kombinaci tagů <BR> <P>. Na druhém řádku stejně jako na několika dalších jsou názvy fontů nesmyslné, na řádku 11 a 12 je určení typu písma opět zcela špatně, je vlastně zázrak, že browser po tak zoufalé definici tagu <FONT> vůbec něco zobrazí. Chaotické používání tagů <UL> a <LI> pro odrážky způsobí, že se celá struktura stránky bude zobrazovat v řadě prohlížečů odlišně, chybné ukončení tagu </FONT> až za políčkem tabulky v řádku 08 může též některým prohlížečům způsobit těžkosti a v krajním případě dokonce rozhodit celou strukturu všech dalších zobrazovaných písem. Proč se opakují vícekrát některé části menu (definice rámců v řádcích 11, 13, 14 a 15) opět zcela nesmyslně formou prázdných a neaktivních odkazů, to už bohužel rozumně vysvětlit nedokážu. V parametru ALT u tagu <IMG> definujícího textovou popisku obrázku se nemusíte bát používat češtinu i mezery, pokud je nějak vyřešeno překódování českých znaků už na serveru nebo přímo ve webovém prohlížeči (to druhé není zatím případ žádného z browserů pro Amigu), uvidíte češtinu správně. Určitě je dobré se při psaní textových popisek zamyslet nad jejich významem, v ukázce najdete například u obrázku buttonu (tlačítka) představujícího odkaz na sekci autoři, textový popis "button autoři", což asi není příliš inteligentní - že to je button, to snad každý vidí. Chyb je v této druhé ukázce opět jako máku, přesto jsem si to nejlepší nebo spíš nejhorší nechal nakonec. Nenápadný tag <TR> v řádcích 05 a 19 začínající první řádek tabulky už není nikde ukončen, což je chyba velmi závažná. Proč? Inu u jednoduchých tabulek to zpravidla nevadí, protože když ukončíte celou tabulku, ukončí se logicky i celý řádek. Pokud ale bude tabulka v další tabulce, a to je v mnoha případech prakticky vždy, nastane chaos. Právě opomínání ukončit některé políčko či řádek tabulky působí při ručním psaní nebo dodatečném ladění HTML kódu a složitější struktuře tabulek obrovský zmatek, který je chápán každým browserem ne mírně odlišné, ale naprosto odlišně - a tak třeba u Netscape či AWebu, což jsou prohlížeče vyžadující striktní dodržování pravidel a syntaxí jazyka HTML, se snadno může stát, že na stránce místo tabulky neuvidíte vůbec nic.
Ještě jedna důležitá poznámka k obrázkům, která také přímo souvisí s ručně psaným HTM kódem. Dávejte si pozor na koncovky .gif/.GIF a .jpg/.jpeg/.JPG/.JPEG i samotné názvy obrázků. Nejhorší možná varianta je použít v názvu obrázku kombinaci malých či velkých písmen, při psaní většinou napíšete nebo pomocí requesteru (podle korektnosti HTML editoru) vložíte do stránky obrázek komplet s malými písmenky a na Amize či Windows 95/98 uvidíte stránky na lokálním disku správně, po umístění na UNIXový či WinNT server však takové obrázky rázem zmizí, protože UNIX i WinNT rozlišují mezi velkými a malými písmenky. Totéž samozřejmě platí i o názvech všech souborů, jednotlivých WWW stránek. Nejlepším řešením je mít názvy všech obrázků pouze malými písmenky, pak prakticky nelze uvést název obrázku špatně. Také k rámcům (frames) mám jeden tip. Některé browsery se nechovají korektně při rozdělení rámců s přesností na pixely, dokonce ani sám Netscape Navigator, díky němuž vlastně rámce vznikly a začaly se používat. Problém spočívá v nesprávném rozdělení rámců zhruba s odchylkou 2 až 10 pixelů. Proto když navrhuje design stránky s rámci, měli byste s něčím takovým počítat a například v horizontálním menu přes celou šířku použité zobrazovací plochy si nechat cca 10 pixelů rezervu na přesné napojení grafiky a grafických struktur. Pokud používáte pouze vertikální navigaci umístěnou v levém rámci, je řešení mnohem snazší, prostě nechte opět cca 10 bodů rezervu v pravé části navigačního rámce, v případě menu v pravém rámci pak stejnou rezervu v příslušném rámci nalevo od menu Po vyzkoušení rychle zjistíte,jak to vlastně funguje a tak další detailní popis je zbytečný Něco podobného se dá teoreticky zajistit i specifikováním dostatečně velkých okrajů rámců, jedná se o parametry MARGINWIDTH a MARGINHEIGHT - máto ale třeba v případě menu jeden háček, protože okraje jsou pochopitelně ze všech stran, což u navigačního menu nemusí být vždy vhodné.

Na závěr
Snad vám tyto dvě krátké ukázky pomohou vyvarovat se základních chyb při tvorbě WWW stránek, pro hlubší studium znovu doporučuji některou z řady učebnic a dalších publikací zabývajících se webdesignem a jazykem HTML. V dalším pokračování seriálu o webdesignu na Amize se obecně podíváme na design, grafiku a animace takže se s vámi těším na brzkou shledanou.

Vytlačiť článok


© ATLANTIDA Publishing Všechna práva vyhrazena.
Žádna část nesmí být reprodukována nebo jinak šířena bez písemného svolení vydavatele.



Amiga na Vašem PC rychle, snadno a zdarma!


none

AMIGA REVIEW

57 ( 11-12 / 2000 )
56 ( 9-10 / 2000 )
55 ( 7-8 / 2000 )
54 ( 5-6 / 2000 )
53 ( 3-4 / 2000 )
52 ( 1-2 / 2000 )
 
51 ( 12 / 1999 )
50 ( 11 / 1999 )
49 ( 10 / 1999 )
48 ( 9 / 1999 )
46-47 ( 7-8 / 1999 )
45 ( 6 / 1999 )
44 ( 5 / 1999 )
43 ( 4 / 1999 )
42 ( 3 / 1999 )
41 ( 2 / 1999 )
40 ( 1 / 1999 )
 
39 ( 12 / 1998 )
38 ( 11 / 1998 )
37 ( 10 / 1998 )
36 ( 9 / 1998 )
35 ( x / 1998 )
34 ( x / 1998 )
33 ( 1-2 / 1998 )
 
32 ( 11-12 / 1997 )
31 ( 9-10 / 1997 )
30 ( 7-8 / 1997 )
29 ( 6 / 1997 )
28 ( 5 / 1997 )
27 ( 4 / 1997 )
26 ( 3 / 1997 )
25 ( 2 / 1997 )
24 ( 1 / 1997 )
 
23 ( 12 / 1996 )
22 ( 11 / 1996 )
21 ( 10 / 1996 )
20 ( 9 / 1996 )
18-19 ( 7-8 / 1996 )
17 ( 6 / 1996 )
16 ( 5 / 1996 )
15 ( 4 / 1996 )
14 ( 3 / 1996 )
13 ( 2 / 1996 )
12 ( 1 / 1996 )
 
11 ( 12 / 1995 )
10 ( 11 / 1995 )
9 ( 10 / 1995 )
8 ( 9 / 1995 )
7 ( 7 / 1995 )
6 ( 5 / 1995 )

ATLANTIDA NEWS

5 ( 3 / 1995 )
4 ( 1 / 1995 )
 
3 ( 11 / 1994 )
2 ( 9 / 1994 )
1 ( 7 / 1994 )
0 ( 5 / 1994 )