Webmaster's secrets | |
SODERZHANIE |
Soderzhanie | Vpered | Nazad |
ORGANIZACIYA SAJTA |
Soderzhanie | Vpered | Nazad |
Ne ispol'zujte na svoih sajtah strelki "vpered" i "nazad", osobenno, esli Vash sajt imeet ierarhicheskuyu strukturu (sm. http://info.med.yale.edu/caim/StyleManual_Top.HTML). CHto vy lichno podrazumevaete pod strelkami? K kakomu dokumentu hotite zabrosit' svoego posetitelya? Vy uvereny, chto on hochet popast' imenno tuda?. Strelki voobshche ne samoe udachnoe sredstvo dlya navigacii na sajte, sushche stvuyut i bolee udachnye sposoby (o nih — nizhe). Poka zhe — izbegajte strelok.
Ris. 1. Strelki na Yale's Web Style Manual
Preduprezhdajte posetitelya vashego sajta o stranicah, razmer teksta na kotoryh prevyshaet 20 kilobajt. Pust' dlya nego ne stanet neozhidannost'yu dlitel'naya zagruzka kakogo-nibud' "kratkogo soderzhaniya" na 100 kilobajt.
Esli vdrug vash sajt pereehal, to ostav'te na starom meste odnu stranichku s nadpis'yu: "My pereehali! Nash novyj URL — www.newurl.ru. Odnu minutochku..." i vstav'te v "golovu" stranicy stroku:
<meta http-equiv="refresh" content="0; url=http://www.NEWURL.ru">
|ta stroka zastavit brauzer perejti k stranice po novomu adresu. Ee takzhe mozhno ispol'zovat', esli u vas est' videokamera, kotoraya peredaet izobrazheniya ili esli informaciya na vashej stranice chasto menyaetsya (naprimer, kotirovki akcij ili esli eto prostoj chat - (http://chat.radio-msu.net)).
Odna iz samyh rasprostranennyh oshibok web-masterov — eto propusk nomera kodovoj stranicy ili voobshche ukazanie nepravil'noj. Esli vy ne nastroili sootvetstvuyushchim obrazom Microsoft FrontPage97, to vas zhdut takie zhe problemy. Kodovuyu stranicu pomogaet ukazat' tot zhe teg meta:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
ili
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
I prover'te svoj FrontPage: v menyu Page Properties v ramke HTML Encoding v oboih srokah dolzhno stoyat' "Cyrillic".
Indeksery nekotoryh poiskovyh mashin (naprimer, AltaVista Search) proveryayut u stranic teg meta takzhe na predmet nalichiya opisaniya soderzhimogo stranicy, a takzhe na predmet klyuchevyh slov. YA rekomenduyu vam vstavlyat' takie tegi v kazhduyu vazhnuyu stranicu:
<meta name="description" content="Zdes' mozhno privesti dovol'no prostrannoe opisanie vashej stranicy">
<meta name="keywords" content="fraktaly szhatie arhivirovanie grafika">
Kogda vstavlyaete v tekst ssylku, vydelyajte tol'ko odno-dva klyuchevyh slova, nesushchih osnovnuyu smyslovuyu nagruzku. Ni v koem sluchae ne pripisyvajte "kliknite zdes'" (v lesu, chto-li?). V krajnem sluchae, pripishite nazvanie ili adres str anicy i vydelite ego. Vot neskol'ko primerov pravil'nogo vydeleniya slov dlya ssylki:
Pri ispol'zovanii bol'shih risunkov s kartami chetko vydelyajte ssylki (psevdo-knopkami, granicami, vydelyayushchimisya nadpisyami - sm. naprimer http://www.usatoday.com) i pishite malen'koe primechanie: "SHCHelknite mysh'yu na interesuyushchej Vas teme". Izbegajte "adventure page", zastavlyayushchih lyudej izlazit' kursorom myshi vsyu stranicu, chtoby najti hot' kakuyu-to ssylku. I ne zabyvajte pro kratkij tekstovyj variant karty.
Regulyarno proveryajte vse svyazi na svoem sajte. Vpolne vozmozhno, chto nekotorye uzly uzhe ne sushchestvuyut ili nahodyatsya na rekonstrukcii, poetomu imeet smysl udalyat' takie ssylki. Ne ssylajtes' na uzly "under construction" - mozhet so zdat'sya vpechatlenie, chto vy ne znaete drugih ne menee interesnyh, no uzhe zakochennyh sajtov.
Ni v koem sluchae ne izmenyajte cveta ssylok na stranice, no esli eto vse-taki neobhodimo po soobrazheniyam dizajna, ispol'zujte raznye cveta dlya novyh ssylok (yarkie) i uzhe poseshchennyh (bleklye).
Mozhno opisat' ssylku na stranicu v stroke statusa okna brauzera - eto pozvolyaet razmestit' gorazda bol'she informacii, chem obychno:
Pri etom OnMouseOut (sobytie proishodit togda, kogda kursor myshi uhodit za predely teksta ssylki) budet rabotat' tol'ko na Netscape Navigator, a v drugih nadpis' ostanetsya v stroke statusa. Obratnaya storona etoj medali v tom, chto pol'zovateli, kotorye lyubyat smotret' adresa stranic v stroke statusa okna brauzera, ih ne uvidyat, chto, chest no govorya, ne ochen' i raduet. Reshajte sami, chto luchshe dlya vashih posetitelej.
Dlya navigacii na linejnom sajte (kotoryj ya vse-taki kategoricheski ne rekomenduyu sozdavat') pomeshchajte vverhu i vnizu kazhdoj stranicy ssylki sootvetstvenno "nachalo" i "prodolzhenie".
|
(nachalo) **************************************************************** ***************************************************************** *************************************************************** ***************************************************************** ******************************************************** **************************************************************** ***************************************************************** *************************************************************** ***************************************************************** ******************************************************** (prodolzhenie) |
Obyazatel'no dobavlyajte (vnizu stranicy) ssylki na oglavlenie, na pechatnuyu versiyu, na rezyume stat'i (esli hotite) i na sootnosyashchiesya s soderzhaniem stranicy.
Odin iz priemov navigacii na ierarhicheskih - eto "direktorii", kak naprimer takoj:
/ Glavnaya stranica / Programmnoe obespechenie / Redaktory
Sm. takzhe horoshij primer na http://www.yahoo.com
Odin iz samyh zamechatel'nyh sposobov navigacii v gipertekste, kotoryj ya kogda-libo videl, voploshchen v Delphi On-Line Help.
Perechislyu vse osnovnye preimushchestva takoj organizacii giperteksta:
Zamechu, chto princip organizacii menyu v otdel'nom frejme sejchas chrezvychajno shiroko ispol'zuetsya, no uroven' dinamizma stranic eshche ne dostig urovnya Windows Help.
STRUKTURA SAJTA |
Soderzhanie | Vpered | Nazad |
Kak eto ni stranno, no nekotorye lyudi predpochitayut chitat' tekst na bumage, a ne na ekrane monitora. Bud'te ekonomny v razmeshchenii informacii na stranice, starajtes' otdat' soderzhaniyu kak mozhno bol'she. Posmotrite na stranicu M_I_5.HTML rukovodstva po stilyu iz Jelya (ris. 1): pri raspechatke etoj stranicy dve treti lista budut prosto pustymi, eshche chetvert' zajmut risunki i raznaya povtoryayushchayasya informaciya (F. I. O. avtora, nazvanie centra, nazvanie dokumenta, avtorskie prava i t.d., hotya vse mozhno bylo by razmestit' v odnu stroku) i tol'ko na ostavshejsya chasti mozhno budet najti kakoj-to poleznyj tekst (eta chast' vydelena zelenym cvetom). Mozhno, konechno, skachat' TRETXYU chast' etogo sajta, chtoby zatem raspechatat' odnu konkretnuyu stranicu (ostroumno, pravda?) Nikogda tak ne delajte, ina
che vryad li kto-nibud
' budet chitat' vashi stranicy vo vtoroj raz.
Dalee, Patrik Linch, avtor etogo Web Style Manual, ispol'zoval tablicu, v kotoruyu i pomestil ves' tekst (!). V rezul'tate sprava ostaetsya prosto gigantskoe pole (pri vysokom razreshenii), a pri uzkom okne u brauzera naoborot - poyavlyaetsya gorizontal'naya polosa prokrutki (vernyj priznak plohogo dizajna). Opyat' zhe, zdorovennye "knopki" dlya navigacii. Obshchaya ocenka sajtam podobnogo tipa — "2 s minusom".
Kak zhe izbezhat' stol' neeffektivnogo ispol'zovaniya mesta?
1) Vo-pervyh, nikogda ne ogranichivajte shirinu teksta. Pri ispol'zovanii tablic ukazyvajte ih shirinu tol'ko v procentah (i nikogda - v pikselah).
2) Vstavlyajte bol'she illyustracij k tekstu. Luchshe vsego GIFy s nebol'shim kolichestovm cvetov (8-16). Malen'kie risunki mozhno uvelichit' v dva raza (znacheniya atributov height i width tega img bol'she fakticheskoj vysoty i shiriny v dva raza).
3) Ispol'zujte mnogokolonochnyj tekst. NO: nachalo i konec kolonok dolzhny razmeshchat'sya v predelah odnogo ekrana, chtoby chitatelyu ne prishlos' skrollirovat' tekst vverh/vniz. Vot primer takogo teksta:
****************************************************************
*****************************************************************
***************************************************************
*****************************************************************
********************************************************
**************************** *****************************
******************************* ******************************
***************************** *********************************
****************************** *******************************
******************************* ********************************
****************************** ********************************
************************** *******************************
*****************************************************************
**************************************************************
**************************** *****************************
******************************* ******************************
***************************** *********************************
****************************** *******************************
******************************* ********************************
****************************** ********************************
************************** *******************************
***************************************************************
*****************************************************************
*****************************************************************
4) Dobav'te pobol'she zagolovkov razmerom ¹ 3 i 4.
Pri proektirovanii uzla v pervuyu ochered' razberites' s informaciej, kotoruyu vy sobiraetes' pomestit' - ona dolzhna byt' samoj svezhej i interesnoj. Vo vtoruyu ochered' obratite vnimanie na strukturu sajta - ona dolzhna byt' ponyatnoj, stranicy dolzhny byt' prostymi dlya ispol'zovaniya, navigaciya dolzhna byt' effektivnoj i intuitivno ponyatnoj, a ssylki dolzhny byt' otlazheny i byt' v bol'shom kolichestve. I tol'ko v poslednyuyu ochered' mozhno prinyat'sya za ukrashatel'stvo stranic.
Nepremennyj atribut kazhdogo sajta - dazhe sostoyashchego iz desyatka stranic - polnoe oglavlenie s kratkim informativnym opisaniem kazhdogo punkta. Ne zabyvajte, chto oglavlenie - eto "poslednyaya solominka" dlya poteryavshegosya na vashem sajte posetitelya i imenno ono pozvolyaet bystro najti nuzhnuyu informaciyu. Velikolepno v etom sluchae budet smotret'sya outline na Java ili chto-nibud' podobnoe.
Vse govoryat, chto kazhdyj sajt dolzhen imet' svoj edinyj stil'. CHto vhodit v eto ponyatie? Vo-pervyh, odin i tot zhe fon dlya vseh stranic. Vo-vtoryh, odini i te zhe stili zagolovkov (garnitura, razmer, nachertanie). V-tret'ih, edinaya cvetovaya palitra dlya oformleniya sajta. V-chetvertyh, odni i te zhe menyu, adresa i ssylki. I tak dalee.
Schitaetsya horoshim tonom predlagat' posetitelyam ves' material sajta v vide edinogo fajla, chto ves'ma udobno dlya pechati (ne zabud'te tol'ko ego szhat'!). I idite dal'she - sozdajte arhivnyj fajl s kopiej vsego sajta - chtoby ego mozhno bylo by legko prosmatrivat' v off-line. Vo-pervyh, sozdat' takoj fajl ochen' legko, vo-vtoryh, pol'zovateli v off-line garantirovanno dozhdutsya zagruzki vsej stranicy so vsemi risunkami i zvukami, a v-tret'ih, eto podnimaet vash rejting!
Samaya bol'shaya problema dlya russkih sajtov — eto raznye kodirovki russkogo yazyka. Esli vy ne znaete, v kakoj kodirovke napisat' svoyu glavnuyu stranicu, postupite tak: napishite russkie slova v kodovoj stranice 1251, a chut' nizhe napishite anglijskie ili russkie v drugoj kodirovke:
Dobro pozhalovat' na moyu glavnuyu stranicu!
Welcome to my homepage!
I tak dalee. Poskol'ku na glavnoj stranice obychno ne ochen' mnogo teksta, to takoj priem budet vyglyadet' vpolne normal'no. A dalee prosto produblirujte kazhduyu ssylku i ryadom ukazhite, na stranicu v kakoj kodirovke kazhdaya iz nih ssylaetsya:
Fotogallereya (CP1251)
Fotogallereya (KOI8R)
Photo Gallery (English)
Drugoj podhod: sdelajte neskol'ko malen'kih risunkov s russkim tekstom i pomestite ih na glavnuyu stranicu. |to vyglyadit zhutko, gruzitsya nevoobrazimo dolgo, no zato vsegda rabotaet.
Samyj poslednij sposob: pust' vash server avtomaticheski opredelyaet kodirovku klienta. Dlya etogo mozhno ispol'zovat' mehanizm SSI (Server Side Includes) ili ASP (Active Server Pages), blagodarya kotoromu mozhno uznat' mnogo informacii o kliente (odnako ne vse, chto hotelos' by). Pri zaprose stranicy v peremennuyu HTTP_USER_AGENT zanositsya stroka, kotoraya soderzhit:
Vot primery:
Microsoft Internet Explorer for Windows 95
Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)
Netscape Navigator 3.0 for Windows 95
Mozilla/3.0 (Win95; I)
Netscape Navigator 3.0 for Macintosh (on PowerPC)
Mozilla/3.01 [ja] (Macintosh; I; PPC)
A vot primer dokumenta index.shtml, kotoryj budet otvechat' za opredelenie kodirovki i zagruzki sootvetstvuyushche zakodirovannyh stranic:
<!--#if "&&HTTP_USER_AGENT&&" contains "Win" goto IncludeCp1251 -->
<!--#if "&&HTTP_USER_AGENT&&" contains "OS/2" goto IncludeCp866 -->
<!--#if "&&HTTP_USER_AGENT&&" contains "X11" goto IncludeKoi8r -->
... drugie kodirovki ...
<!--#label IncludeCp1251--><!--#include "cp1251.html"--><!--#break-->
<!--#label IncludeCp866--> <!--#include "cp866.html"--> <!--#break-->
<!--#label IncludeKoi8r--> <!--#include "koi8r.html"--> <!--#break-->
Obyazatel'noe trebovanie dlya kazhdoj stranicy (ne boyus' povtoritsya, potomu chto eto cherezvychajno aktual'no): obyazatel'no vklyuchajte v kazhduyu stranicu svoe imya (web-Mastera, a ne dizajnera), svoj e-mail, a dlya korporativnyh stranic - telefon i adres firmy, i - nepremenno - polnyj URL tekushchej stranicy. Starajtes' razmestit' etu informaciyu tak, chtoby ona ne zanimala mnogo mesta - vsun'te vse v odin paragraf, naklonnym shriftom razmerom ¹1-2.
Na kazhdom uvazhayushchem sebya uzle est' stranicy "CHto novogo", "CHto krutogo", "Voprosy i otvety" (FAQ), "Nashi ssylki", "Nashi anonsy" (Coming On Next Week). Za vremya sushchestvovaniya Internet uzhe vyrabotalis' nekotorye standarty na oformlenie uzla (kak standart IBM CUA na interfejs programm) i eti stranicy - odna iz chastej nepisannogo standarta.
Priderzhivajtes' pravila: chtoby dojti ot odnoj stranicy vashego sajta do lyuboj drugoj, nuzhno sdelat' 3-5 shchelchkov myshi. |to ochen' vazhno: nesoblyudenie etoj harakteristiki pozvolyaet vashemu posetitelyu legko poteryat'sya na sajte dazhe ochen' malen'kogo razmera.
Naskol'ko dlinnoj dolzhna byt' odna stranica? Nel'zya dat' universal'nogo otveta na vse sluchai zhizni. Naprimer, na glavnoj stranice teksta dolzhno byt' nemnogo, a luchshe - pobol'she (10-20) ssylok na raznye, otlichayushchiesya drug ot druga temy (a Dzhejms Sabo, redaktor NetGuide, sovetuet na glavnoj stranice razmeshchat' ne bolee 4-h ssylok). Na periferii upirajte na informaciyu i razmeshchajte ves' ee ob®em celik om na odnoj stranice. Vo-pervyh, odnu bol'shuyu stranicu mozhno zagruzit' bystree, chem mnozhestvo melkih, vo-vtoryh, ee mozhno budet bystro chitat' po mere zagruzki, a v-tret'ih bol'shie stranicy legko raspechatat'.
Tri primera na etu temu: dva plohih — rezul'taty poiska na http://altavista.digital.com (vsego desyat' ssylok za odin prohod) i http://info.med.yale.edu/caim/stylemanual/M_I_3.HTML (pervaya chast' bez vsyakih ssylok na prodolzhenie i proch.) i odin horoshij — knigi http://www.betabooks.mcgraw-hill.com (hotya 300KB na stranicu — eto, konechno, mnogovato).
Glavnaya stranica ne dolzhna prevyshat' odin ekran. V krajnem sluchae - poltora.
Testirujte svoi stranicy v raznom razreshenii i pri raznom kolichestve cvetov. Dlya etogo nezamenimym pomoshchnikom yavlyaetsya programma QuickRes iz Microsoft PowerToys, kotoraya pozvolyaet menyat' razreshenie "na letu".
Est' horoshij test na soderzhatel'nost' stranicy: raspechatajte ee. Pri etom ne menee 3/4 ee dolzhno byt' zanyato informativnym tekstom. (|to ne otnositsya k glavnoj stranice).
Nichto ne pridast vashemu sajtu stol'ko privlekatel'nosti, kak prostaya "Fenya Dnya". |to mozhet byt' kakoj-to anekdot, risunok, foto lyubimoj devushki (kazhdyj den' — novoj...) ili chto-nibud' eshche. Mozhno pojti dal'she i menyat' soderzhimoe stranicy pri kazhdom zahode posetitelya na stranicu...
|kran komp'yutera dolzhen byt' ravnomerno zapolnen vashej stranicej nezavisimo ot razresheniya! Kolichestvo informacii, sposobnoe umestit'sya pri razreshenii 640h480 i 1027h768 ochen' raznoe. I stranicy, sdelannye dlya 640h480 pri posledenem razreshenii vyglyadyat ochen' ploho. V effektivnom razmeshchenii materiala na stranice vam pomogut tablicy (width="100%", height="100%") i frejmy.
Razmeshchajte svoi sajty v Internet tol'ko posle vseh dodelok ili — po krajnej mere — ne ispol'zujte znachok — prosto besit.
RISUNKI |
Soderzhanie | Vpered | Nazad |
Esli vy (1) ispol'zuete kartinku kak ssylku na druguyu stranicu, (2) kartinka ne vyglyadit kak prostaya knopka ili strelka, to (1) postav'te u kartinke atribut border v "2" ili bol'she, (2) napishite v atribute alt o ssylke.
Bolee togo, u vseh risunkov (i voobshche - u vseh ob®ektov) pishite atributy height i width — togda brauzer ne budet vo vremya zagruzki stranicy postoyanno pereformatirovat' tekst (eti atributy avtomaticheski prostavlyaet Microsoft FrontPage).
VSEGDA ukazyvajte razmer zagruzhaemoj grafiki v atribute alt tega img (alt="symphony.jpeg; (100KB)") ili v tekste ssylki, dazhe esli risunok men'she 10 kilobajt. A kartinki bol'she 20KB starajtes' voobshche ne ispol'zovat'.
TABLICY |
Soderzhanie | Vpered | Nazad |
Prostoj sposob sdelat' raznocvetnye pul'ki (bullets): risuete GIF-fajl s kakoj-nibud' kartinkoj (skazhem, belyj kruzhok na chernom fone), a zatem prosto prisvaivaete kruzhku prozrachnyj cvet. V tekste dokumenta risunok vstavlyaete risunok v tablicu s takim cvetom fona, kakim by vy hoteli videt' pul'ku. Zamet'te, chto cvet fona u risunka pul'ki dolzhen sovpadat' s cvetom fona osnovnogo dokumenta - inache budut vidny kvadratnye granicy. Bolee podrobno etot vopros rassmotren po adresu http://www.microsoft.com/workshop/author/other/mytips-f.htm.
Vverhu — tablica s risunkom v kazhdoj yachejke, vnizu — ta zhe tablica, no bez risunkov.
Ochen' krasivo budet smotret'sya na stranice bol'shaya bukvica. Ee mozhno oformit' tremya raznymi sposobami:
Priem ¹1. Prostoe vydelenie pervoj bukvy.
|
Priem ¹2. Vstavka v tablicu, otzhatuyu vlevo:
|
Priem ¹3. Vstavka v tablicu s drugim fonom:
|
Priem ¹4. Bukvica s otstupom ot osnovnogo teksta:
|
Priem ¹5. Bukvica po seredine:
|
Dlya togo, chtoby vyrovnyat' kakuyu-libo kartinku ili tekst po vertikali, pomestite ih v tablicu, u kotoroj ukazana vysota kak samoj tablicy, tak i ee yachejki. K sozhaleniyu, Internet Explorer i Netscape Navigator po raznomu ponimayut atribut height="100%": pervyj dumaet o polnoj vysote svoego okna (eto dazhe bol'she, chem vidimaya chast'), a vtoroj — o vysote tablicy. Est' dva sposoba razresheniya etogo konflikta.
Sposob ¹1, prostoj.
Napishite prosto:
|
|to budet dovol'no rovno centrirovat' kartinku "1.jpg" v MSIE i budet prakticheski po centru v NN.
Sposob ¹2, ne namnogo slozhnee.
Mozhno primenit' JavaScript:
|
Dalee pishete tekst dlya centrirovaniya ili vstavlyaete kartinku. V konce pripisyvaete:
|
Tablicy — eto dejstvitel'no ochen' moshchnoe sredstvo v HTML. Ispol'zujte ih chashche i vashi stranicy staut vyglyadet' bolee pravil'no i standartno. Naposledok ya privedu nekotorye netradicionnye primery primeneniya tablic.
|
|
|
RAZNYE SOVETY |
Soderzhanie | Vpered | Nazad |
V poslednee vremya ochen' chasto stali primenyat'sya frejmy. CHtoby ubrat' razdelyayushchuyu frejmy polosu, napishite frameborder="0",a chtoby ubrat' rasstoyanie mezhdu frejmami - napishite border="0" dlya Netscape Navigator i framspacing="0" dlya Internet Explorer (mozhno napisat' ih oba - togda oba brauzera budut pokazyvat' frejmy korrektno).
Pomeshchajte vse kartinki i frejmy odnoj stranicy v tu zhe direktoriyu, chto i samu stranicu. Vam budet legche orientirovat'sya na svoem sajte, a vashim posetitelyam budet proshche skopirovat' vashu stranicu so vsemi kartinkami k sebe. No chasto ispol'zuemye (bolee 1 raza) kartinki pomestite v otdel'nuyu direktoriyu /images/, pozvolyaya brauzeru chitat' ih iz kesha.
Sushchestvuet dostatochno interesnyj sposob netradicionnogo promeneniya frejmov (ya prochital o nem v Windows Tech Journal). Delo v tom, chto kogda vy opisyvaete razmery kazhdogo frejma v tege frameset, mozhno sdelat' tak, chtoby nekotorye frejmy byli libo za granicami ekrana libo imeli nulevuyu shirinu ili vysotu:
|
Ispol'zovat' nevidimye frejmy mozhno samymi raznymi sposobami (ved' ih soderzhanie nel'zya uvidet') — dlya fonovoj zagruzki kartinok; dlya hraneniya vazhnyh dannyh — peremennyh, nastroek; dlya sozdaniya bibliotek skriptov i tak dalee. (Zamechu v skobkah, chto dlya poslednego luchshe vsego ispol'zovat' sam roditel'skij fajl s tegom frameset — i fajlov men'she i vyzov koroche).
Kak sdelat' krasnuyu stroku? Nuzhno vstavit' pyat' – desyat' neperenosimyh probelov:
Simvoly "defis" i "tire": simvol "defis" (en-dash) vstavlyaetsya po kodu –, a "tire" (em-dash) — po kodu —. K sozhaleniyu, eto rabotaet ne na vseh platformah (tol'ko na Windows i Macintosh).