Web design pro děti: Vítejte v městečku Tuts+!

Všichni tady milují web design! V tomto seriálu se naučíme o navrhování a tvorbě webu. S vaší pomocí vytvoříme společnou webovou stránku.

Tyto lekce (nebo tutoriály) vám pomůžou krok po kroku přívést webovou stránku k životu. Všechny příkladové soubory budou ke stažení na konci každé lekce, takže si můžete průběžně kontrolovat svoji práci.

Tak vstupte prosím, udělejte si pohodlí a vytvořte něco pro lidi v městěčku Tuts+!

Jak web funguje?

Udělejme krok zpět a zamysleme se nad tím jak web funguje.

Když se dva počítače připojí k Internetu (který je zobrazen jako žlutá čára na obrázku níže) můžou spolu komunikovat.

Server (modrá krabice) je speciální počítač, který obsahuje soubory webových stránek. Váš domácí nebo školní počítač nejsou server, protože nejsou připojeny přímo k Internetu. Přípojujeme se k Internetu skrze nějakého Internetového poskytovatel (ISP).

Obsah webu (všechno to o čem webové stránky hovoří) je organizován pomocí speciálního soubor pravidel, kterému počítače rozumí; něco jako mluvení v tajemném, kódovaném jazyce, ale brzy budeme součástí tohoto malého tajemství!

Na tomto obrázku prohlížeč chce zobrazit www.tutsplus.com a požaduje soubory od serveru, na kterém jsou uloženy. Server je posílá zpět, prohlížeč je přeloží a zobrazí stránku na obrazovce. A tohle se stane velmi rychle!

Všechno je to o komunikaci a sdílení informací.

Díky tomu všemu, stránka, kterou jste vytvořili na svém počítači, může být zobrazena někým jiným na jiném počítači od chvíle, kdy její soubory umístíte na server. Podrobněji si o tom povíme později.

Práce webdesignéra

Jeho práce je velmi důležitá. Všechno co se děje na obrázku výše má jediný důvod: zobrazení stránky. Práce webdesignéra spočívá v rozhodnutí, jak stránka bude vypadat, fungovat a také zajistit použitelnost stránek pro postižené návštěvníky (a také pro vás návštěvníky Tuts+).

Náš projekt

V tomto seriálu budeme tvořit stránku pro městečko Tuts+. Městečko potřebuje místo, kde turisti mohou získat užitečné informace o městečku, dřív než přijedou.

Tady je náhled stránky:

Tato stránka bude obsahovat všechny prvky webdesignu, o kterých se budeme učit. Bude to opravdu pěkný první webdesignový projekt!

Návrh a tvorba

Teď si povězme, co k tomu bude potřeba.

První si nakreslíme naši stránku a potom vložíme vše, co chceme na stránce, do speciálního souboru. Pro návštěvníky přidáme také odkazy na jiná místa, jako třeba na stránky s obchodem.

Stylování

Po nakreslení a sepsání speciálního souboru, musíme naši stránku udělat hezkou na pohled. Toto je sekce, ve které všechny ty barvy a vzhledové představy (rozhodnutí, kam na obrazovku všechny ty věci umístíme) přijdou k životu.

Jak udělat naši stránku jednoduše použitelnou? Jaký pocit mají naše barvy evokovat? Kde se má všechno zobrazit na obrazovce chytrého telefonu? A kde na velké obrazovce počítače? Jaký druh písma bude vypadat nejlépe? Nad tím vším se musíte zamyslet, ale žádný strach, je to zábavný proces a tyto otázky se stanou přirozenějšími, jakmile navrhnete více stránek.

Schéma tvorby stránky

Níže je kompletní schéma naší cesty při tvorbě webu. Každý blok má svůj úvod do tématu a je pak rozdělen na menší kousky.

Úvod

Vidíte růžovou hvězdičku u bloku Intro, tam se právě teď nacházíme. Momentálně máme základní představu o tom, jak web bude fungovat, o práci webdesignéra a jsme na vrcholu projektu, který spolu navrhneme a vytvoříme.

Tvorba webové stránky [Build a Site]

V další části si srovnáme představy a začneme kreslit. Kreslení je opravdu zábavný způsob, jak urovnat myšlenky před samotným programováním. Ušetří spoustu času a udrží nás na správné cestě.

Pak si promluvíme o souborech a nástrojích, které budeme potřebovat k programování stránky.

HTML

HyperText Markup Language (hypertextový značkovací jazyk) HTML je ten tajemný (ale ne na dlouho!) jazyk používaný k organizaci našeho textového souboru, o kterém jsme se zmínili dříve. Tento jazyk pomáhá našemu prohlížeči pochopit a zobrazit soubory webových stránek.

Všechno na naší stránce a všech ostatních, ožije díky HTML elementům. Elementy jsou drobné části tohoto jazyka, které mají význam a pomáhají popsat všechno, co umístíme na naši stránku.

Nezalekněte se toho, že nevíte co tento kód znamená, ale vězte, že každá stránka je tvořena takovýmto textovým dokumentem. 

CSS

Cascading Stylesheets (kaskádové styly), CSS nám umožní nastavit styly (barvy, druh písma, celkový vzhled) pro naši stránku, vytvořit ji tak atraktivní a jednoduše použitelnou pro návštěvníky, jak jen to je možné.

CSS vzhled [CSS Layout]

CSS nám také pomůže rozmístit všechny části na stránce. 

Obrázky [Images]

V této části naší cesty si v rychlosti povíme o typech obrázků, které budou na naší stránce a jak je upravit. Stránka bude obsahovat 4 krásné obrázky, co na ně říkáte?

Základy designu [Design Basics]

V této části se zaměřime na "tvorbu bloků" webdesignu. Chceme se ujistit, že tvoříme něco co lidé budou používat bezproblémů a bude to hezky vypadat.

Typografie (grafická úprava) [Typography]

Typografie je umění aranžérského typu, skvělé pokračování naší designové lekce a může značně přidat nebo taky odebrat na úspěchu naší webové stránky.

První příklad typografie naší stránky můžete vidět na samém vrcholu:

Barva [Colors]

Barva je velmi důležitá a velmi zábavná. Barva může stránku zkrášlit, nebo jí dát význam, o kterém se pobavíme v této lekci.

Konec seriálu

Na konci seriálu se naučíme, jak dostat naši stránku na jeden z těch speciálních počítačů, na server, tak aby ji každý z vašich přátel a rodiny mohl vidět na Internetu. Taky si promluvíme o místech, kde můžete uplatnit své studium a svůj nový titul "Webdesignér pro městečko Tuts+".

Ale to vás teď nemusí trápit, tak daleko jsme se zatím nedostali!

Brzy naviděnou!

V další lekci se rovnou naučíme, jak se připravit na tvorbu stránky pomocí HTML. Nemůžu se dočkat, nashledanou v městečku!