Zkratka na hlavní stranu: Alt + Shift + horní 2(ě)
Linkedin FB e-mail Google Plus Twitter

Hledat na tomto webu

 
 

Tipy a rady pro tvorbu webu

 

Motto pro studium

Škola nikomu nic nedá sama. Je jako velký švédský stůl – vezmete si z ní jen to, pro co sami natáhnete ruku.

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)
    • Editor PSPad 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.

Komentáře návštěvníků

Poskytovatelé diskusních služeb (Facebook, Disqus) si do cookies ve vašem prohlížeči ukládají různé údaje, čímž mohou narušit vaše soukromí. Načtením diskusí na vaši žádost s tím souhlasíte.
Na drtivé většině webů se plug-iny Facebooku, Googlu, Disqusu a jiných třetích stran načítají automaticky; a že u mě se to děje až na vaše výslovné přání (tedy většinou neděje), je moje specialitka pro ochranu vašeho soukromí.
Discussion plugins from 3rd parties (Facebook, Disqus) provide information about you to theirs providers, saving some information into cookies in your browser. If you will load discussion on your request, it means you agree with it.

Pokud máte účet na Facebooku

(nebo jiném z několika podporovaných serverů)

Chovejte se tady jako doma, ať vidíme, jak to u vás vypadá.
[nápis v linkovém autobusu]

A priori upřímně doufám, že mě obsah a forma příspěvků nedonutí k žádným moderátorským zásahům,
ale právo zásahu si vyhrazuji, protože tyto komentáře jsou přístupné komukoliv, kdo se zaregistroval na FB, a já netuším, co se tu může objevit.

V souvislosti s vkládáním odkazů na Vaše weby do komentářů nejsem hysterický. Odkaz na nekomerční web s relevantním obsahem, který může pomoci ostatním návštěvníkům, uvítám.

 
Načíst sem facebookové komentáře
pro čtení (aktuální počet: 0)
nebo přidání vlastního

(vyžadován javascript)
 
Komentáře se záměrně nenačítají samy, aby až do jejich načtení:
Facebook nevěděl, že jste tady právě vy,
nezkazila se přizpůsobivost webu a kvalita kódu
a nezvyšoval se datový tok.
 
Facebook ví, že tuto stránku teď někdo navštívil, ale na rozdíl od řešení obvyklého na drtivé většině jiných webů s FB pluginy tady díky mému způsobu realizace nepoznal, že jste to byli právě vy.

 

Pokud nemáte účet na Facebooku

Komentářový plugin Facebooku umožňuje vkládat komentáře i prostřednictvím účtů na několika dalších serverech (i když u nás nejsou moc používané).

Pokud nemáte žádný účet, prostřednictvím kterého byste sem mohli napsat komentář, neberte to jako diskriminaci. Zkrátka jsou tu komentáře alespoň pro uživatele FB a pár dalších serverů, což je lepší, než kdyby tu nebyly vůbec.

Kromě zjevné nevýhody má toto řešení i své výhody:

  • Při použití své FB identity by se většina uživatelů mohla zamyslet, co vypouští z prstů.
  • Odkaz na komentovanou stránku se může šířít Facebookem.
  • Ve výchozím nastavení se přednostně zobrazují komentáře zanechané návštěvníkovými facebookovými známými, což v důsledku podporuje obě předchozí výhody.

Navíc většina neuživatelů FB zůstává mimo FB ze svého vlastního rozhodnutí, takže jim neužívání Facebooku přináší různé pro ně důležité výhody (soukromí, čas), které snad vykompenzují nemožnost sem něco napsat.
Případně je možné jako náhradní možnost použít návštěvní knihu společnou pro celý web.
Časem třeba napíšu nebo nasadím nějaký jiný komentářový systém, který bude mít menší omezení pro komentátory, ale teď je tu alespoň toto.

Ale i tak si můžete alespoň přečíst komentáře od ostatních.

Strukturovaný opis komentářů

Pro:

  • paranoidní jedince, kteří nechtějí, aby FB věděl, že právě oni navštívili tuto stránku,
  • programátory, kterým se ta struktura vnořených polí bude líbit,
  • uživatele mobilních zařízení, kteří nechtějí, aby FB pokazil přizpůsobivost webu,
  • případný prohlížeč bez javascriptu
  • webový archiv, který si je takto uloží jako statický text dostupný v budoucnu i bez spolupráce Facebooku.
Array
(
    [error] => Array
        (
            [message] => (#4) Application request limit reached
            [type] => OAuthException
            [is_transient] => 1
            [code] => 4
            [fbtrace_id] => EFXw80VDk+O
        )

)

Komentáře Disqus

Sem se javascriptem vkládají komentáře Disqus, teď Vám ale asi javascript nefunguje.
System for comments Disqus doesn't work without javascript.

Skok nahoru na: Navigační menu (klávesová zkratka „5”)

Zaujala Vás tato stránka?

  • Přidat do záložek (Ctrl+D)
  • Sdílet odkaz (vysílačka)Skok nahoru na:
  • Vytisknout (Ctrl+P)
  • Citovat podle ČSN ISO 690

    Tuto stránku

    ADÁMEK, Martin. Tipy a rady pro tvorbu webu. Martin Adámek [online]. Náchod [cit. 2017-10-24]. Dostupné z: http://www.adamek.cz/fim/tvorba-webu/tipy-rady

    Celý web

    ADÁMEK, Martin. Martin Adámek [online]. Náchod [cit. 2017-10-24]. Dostupné z: http://www.adamek.cz

 

 
 

Národní kulturní dědictví

Stránky archivovány Národní knihovnou ČR Tyto stránky jsou pravidelně archivovány Národní knihovnou ČR pro svou kulturní, vzdělávací, vědeckou, výzkumnou nebo jinou informační hodnotu za účelem dokumentace autentického vzorku českého webu. Jsou součástí kolekce českých webových stránek, které NK ČR hodlá dlouhodobě uchovávat a zpřístupňovat pro budoucí generace. Jejich záznam je součástí České národní bibliografie a katalogu NK ČR.  

 

 
 

Pro rozptýlení

Matematik, fyzik a inženýr dostali všichni stejný gumový míček s úkolem zjistit jeho objem. Dostali k dispozici vše, co potřebovali k měření, a neomezený čas na vyřešení úkolu. Matematik použil metr, změřil obvod míčku, vydělil dvěma Pi, získal poloměr, umocnil na druhou, vynásobil Pi a vynásobil 3/4, čímž spočítal objem. Fyzik si vzal kbelík, nalil do něho 10,000 litrů vody, hodil do kbelíku míček a změřil objem vytlačené vody s přesností na pět platných číslic.
A inženýr? Ten si zapsal sériové číslo míčku a jeho objem si vyhledal.

 

Pro zamyšlení

Napsat slovo vědomě chybně a dát ho do uvozovek, aniž by šlo o citaci,
je stejné jako zaparkovat auto v zákazu zastavení a ještě k tomu zapnout všechny blinkry.
Pachatel usiluje o to, aby bylo vidět, že si je svého přestupku vědom.

[Vlastní konstatování autora tohoto webu, 2014.]