Tipy a rady pro tvorbu webu

Tipy a rady

Písma (fonty)

Patková x bezpatková

Patková

konce znaků jsou zakončeny patkami

patky pomáhají vést oči po řádku => hodí se pro delší texty (pro texty článků, apod.), zejména při tiskovém výstupu

příklad: Times, Times New Roman, Courier, Courier New

v definici font-family nezapomeňte na obecnou rodinu písem serif!

Bezpatková

konce znaků nejsou zakončeny patkami

hodí se pro krátká sdělení velkým písmem, „uprostřed prostoru” mimo řádek – nadpisy a loga, příp. obecně pro zobrazení na monitoru

příklad: Arial, Arial CE, Verdana

v definici font-family nezapomeňte na obecnou rodinu písem sans-serif!

Pro strukturovaná sdělení, jako seznamy, tabulky nebo text členěný pomocí častých nadpisů lze v podstatě použít jak patkové, tak i bezpatkové písmo.

Proporciální x neproporciální

Proporciální

jednotlivé znaky mají různé proporce – znak „M” je širší než znak „I”

hodí se pro většinu příležitostí

mohou to být bezpatková i patková písma

příklad: Arial, Arial CE, Verdana, Times, Times New Roman

Neproporciální

všechny znaky mají stejné proporce – znak „M” je stejně široký jako znak „I”

hodí se pro výpis zdrojového kódu, či pro jiné případy, kdy potřebujeme části textu zarovnat pod sebe – v těchto případech lze k zarovnání patřičných znaků pod sebe využít i několik tvrdých mezer („ ”) vedle sebe – mezera je u neproporciálního písma široká stejně, jako každý jiný znak

příklad: Courier, Courier New

Definice font-family v CSS

Na závěr každé definice font-family je nutné uvést patřičnou obecnou rodinu písem (patřičnou = tu, která tam patří). V jedné definici font-family nemíchejte patková a bezpatková písma!
Vy, jako autoři webu, rozhodnete, zda se daný element za daných okolností má zobrazit patkovým nebo bezpatkovým písmem, a počítači dáte na výběr postupně několik fontů (stačí i jeden), zakončených uvedením jejich obecné rodiny. Proto by bylo naprosto neúčelné v jedné definici namísit patkové fonty s bezpatkovými.
Více informací naleznete na webu jakpsatweb.cz.

Psaní znaků „<” a „>” na české klávesnici

• vždy musí fungovat alt+60, resp. alt+62, podle desítkových ASCII hodnot znaků
• obvykle funguje pravý alt + patřičná klávesa „<”, resp. „>” jako kdyby byla zvolena klávesnice IBM
• pro psaní znaku „$” (např. v php) můžete použít pravý alt a „ů”

Ladění a validace stránky

Při problémech s validací stránky použijte u validátoru funkci „Direct input” nebo „File upload”, abyste měli jistotu, že validátor nenačítá starý kód z cache.

Přípony souborů

Pokud trváte na správě souborů pomocí „Tento počítač” a opravdu nechcete využívat Total Commander (nebo třeba Salamander), tak si v Tomto počítači alespoň vypněte skrývání přípony u známých typů souborů.
Protože odkaz na soubor ani vložení obrázku *.jpeg opravdu nebude fungovat, pakliže ve skutečnosti jde o soubor *.jpg (a naopak).

Chybné zobrazení zdrojového kódu ve FF3

V Mozille Firefox (min. ve verzi 3.0.3) po použití volby „Zobrazit zdrojový kód výběru” (z kontextového submenu shift+F10) v zobrazení zdrojového kódu stránky chybí lomítka na konci nepárových tagů (img, input, …)! Při stisku Ctrl+U a zobrazení celého kódu se lomítka zobrazují správně. Dejte si na to pozor při kopírování kódu přes schránku!

Práce v Macromedia Homesite nebo v PSPad

• Zkontrolujte si zaškrtnutí volby syntaxe XHTML
• Zapněte si zobrazení čísel řádků
  (u statického webu využijete pro hledání chyb podle zpráv validátoru)
• Tučné písmo, kurzívu a tvrdou mezeru lze vložit jako ve Wordu
  (Ctrl+B, Ctrl+I a Ctrl+Shift+mezera)
• Odřádkování lze vložit Ctrl+Enter
• Některé časté elementy lze vložit stiskem Ctrl+Shift+první_písmeno_označení_elementu
  – např. Ctrl+Shift+P pro vložení odstavce

• Jenom pro PSPad

  • Po stisku Ctrl+mezera se zobrazí seznam elementů, který je možné dále filtrovat postupným zadáním označení elementu
    (někdy je po zvolení elementu k dispozici i malý průvodce pro zadání atributů)
  • Zkratka Ctrl+W zapíná a vypíná zalomení řádků

• Výhoda Homesitu oproti PSpadu

  • obsahuje přehledné panely nástrojů pro vložení elementů a úpravu jejich atributů
    (oceníte hlavně zpočátku)

• Výhody PSPadu oproti Homesitu

  • zvýrazňuje začáteční a koncové značky párových tagů, pokud jsou v různých řádcích
    (oceníte hlavně u složitějšího/delšího kódu)
  • je zdarma
  • je připraven pro editaci kódu v různých dalších jazycích –nejen v (X)HTML
  • je český výrobek, má české menu

Znaková sada – kódování češtiny

Pro kódování češtiny připadá v úvahu středoevropská sada Windows-1250 nebo mezinárodní sada UTF-8. Je vhodné zvolit si jednu sadu a tu držet na celém webu stejnou (resp. alespoň v celé jedné jazykové verzi webu).

Výhody Windows-1250 oproti UTF-8

• menší datová náročnost (tentýž text ve Win-1250 zabere méně KiB, než v UTF-8)
• používanější znaková sada, lze ji očekávat u textů z různých zdrojů – které tedy nebudete muset převádět do UTF-8
• je běžnější, umí ji více editorů (např. MM Homesite nemusí umět UTF-8)
• pokud máte dynamický web a chcete si prohlížečem prohlédnout vkládanou „stránku” bez záhlaví, může být při použití UTF-8 zobrazena nesmyslně (resp. bude nutné ručně zvolit znakovou sadu v menu prohlížeče)

Výhody UTF-8 oproti Windows-1250

• naprosto univerzální kódování – zvládá přímo a snadno všechny běžné abecedy, bez složitého kódování můžete běžným způsobem vložit znaky nejen v latince s nejrůznější diakritikou, ale i v cyrilici apod.
• některé databázové systémy ho mohou natvrdo vyžadovat – zkrátka nemusí jinou znakovou sadu vůbec podporovat
• můžete ho použít pro celý web bez rozdílu jazykových verzí (při použití Win-1250 je vhodné pro ruskou verzi použít Win-1251 – z toho plynou i komplikace při použití ruských slov v českém textu a naopak)

Tak kterou?

To si rozhodněte sami. Hlavně ale zvolenou znakovou sadu (ve které textový editor fyzicky uloží soubor) uveďte správně v hlavičce dokumentu.