Webdesign na Amize - #1LUBOŠ 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
Pozn.: články boli naskenované ako text a preto obsahujú aj zopár chýb. Taktiež neručíme za zdrojové kódy (Asm, C, Arexx, AmigaGuide, Html) a odkazy na web. Dúfame, že napriek tomu vám táto databáza dobre poslúži.
Žiadna časť nesmie byť reprodukovaná alebo inak šírená bez písomného povolenia vydavatela © ATLANTIDA Publishing
none
|