načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha: Moderní web - Peter Gasston

Moderní web
-14%
sleva

Kniha: Moderní web
Autor:

Tvoříte weby a chcete zaujmout co nejširší publikum? Je pro vás dostupnost webu z co nejvíce zařízení klíčová? Připravte svůj web pro široké publikum přistupující na něj ... (celý popis)
Titul doručujeme za 4 pracovní dny
Vaše cena s DPH:  399 Kč 343
+
-
rozbalKdy zboží dostanu
11,4
bo za nákup
rozbalVýhodné poštovné: 39Kč
rozbalOsobní odběr zdarma

hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7% 100%   celkové hodnocení
1 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Médium / forma: Tištěná kniha
Rok vydání: 2015-01-21
Počet stran: 240
Rozměr: 167 x 225 mm
Úprava: 240 stran : ilustrace
Vydání: 1. vydání
Spolupracovali: překlad Ondřej Baše
Vazba: brožovaná lepená
Doporučená novinka pro týden: 2015-05
ISBN: 9788025143452
EAN: 9788025143452
Ukázka: » zobrazit ukázku
Popis

Tvoříte weby a chcete zaujmout co nejširší publikum? Je pro vás dostupnost webu z co nejvíce zařízení klíčová? Připravte svůj web pro široké publikum přistupující na něj z nejrůznějších prohlížečů a zařízení. V jedenácti kapitolách se seznámíte s technikami a nástroji, jak navrhovat webové stránky tak, aby fungovali na mnoha různých zařízeních, nebo aby se naopak danému přístroji přizpůsobily a nabídly maximální uživatelský komfort a zážitek. Vaši webovou prezentaci připravíte pro návštěvníky tak, že poskytne hledané informace bez ohledu na to, zda se na ni dívají v prohlížeči na počítači, mobilu, tabletu nebo třeba chytré televizi. V závěru každé kapitoly pak najdete odkazy na další zdroje s hodnotnými informacemi o tvorbě webů. Publikace vás mimo jiné naučí: - Správně rozvrhnout stránku pomocí CSS - Zvolit vhodné API pro příslušné zařízení - Zařadit do webové prezentace vektorové i bitmapové obrázky - Naplno využít potenciál formulářů - Oživit stránky nasazením multimédií - Přetavit webové stránky v nativní aplikaci - Web průběžně testovat a ladit Čtenáři si mohou na adrese http://knihy.cpress.cz/K2185 pod odkazem Soubory ke stažení stáhnout soubory se zdrojovými kódy použitými v knize. O autorovi: Peter Gasston se věnuje tvorbě webů přes 12 let. Je autorem dvou knih, řady příspěvků v odborných časopisech a potkat ho můžete i v roli řečníka na vývojářských konferencích. Jeho blog najdete na adrese www.broken-links.com.

Předmětná hesla
Kniha je zařazena v kategoriích
Peter Gasston - další tituly autora:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

77

KAPITOLA 4

Nové přístupy

k rozvrhování jazykem CSS

Jakmile napíšete kód jazyka HTML a zvážíte, jak budete optimalizovat své webové stránky nebo

aplikaci pro různá zařízení, můžete začít vytvářet rozvržení. Ve specifi kaci CSS 2.1 bylymožnosti rozvrhování značně omezené. Třebaže chytří návrháři a vývojáři vyždímali z vlastnosti

fl oat a pozicování maximum, většina webových stránek obsahuje nějakou variantutřísloupcové mřížky. Tento vzor vznikl zejména kvůli omezením dostupných technologií a ne kvůli

tomu, že by to vyžadoval obsah.

Jazyk CSS3 nabízí nové vlastnosti pro tvorbu fl exibilních rozvržení, přičemž využíváznalostí z mnoha století psaných a tištěných materiálů, ale také zohledňuje schopnosti obrazovek.

S jejich pomocí můžou návrháři lépe zobrazovat obsah a uživatelská rozhraní aplikací můžou

lépe reagovat na cílová zařízení.

Upozornění: Třebaže prohlížeče již implementují spoustu nových funkcí, měli byste je považovat

za experimentální a uvědomit si, že se můžou měnit, dokud konsorcium W3C nedokončístandardizační proces. Podrobné informace o podpoře v aktuálních informacích najdete v příloze A, jejíž

aktualizovaná verze bude k dispozici na adrese http://modernwebbook.com/. Více sloupců Jelikož webové stránky mají své kořeny ve vědeckých dokumentech, používají velmijednoduchý vzor rozvržení textu – vše se nachází v jediném nepřerušovaném sloupci, podobnějako text v textovém procesoru nebo editoru. Je tomu tak zejména proto, že web je dynamický, velikosti písma se značně liší a do hry vstupuje řada dalších odlišností, takže je velmi obtížné umístit obsah přesně. Při tisku pracujete s  pevnými velikostmi písmen a  známým počtem znaků, a proto můžete rozvrhovat text na stránce fl exibilněji. Vezměte si libovolný tištěný časopis nebo noviny a určitě narazíte na text rozdělenýdo několika sloupců – obvykle do dvou, někdy do tří nebo více. Sloupcové rozvržení umožňuje umístit na stránku více textu, aniž byste museli obětovat čitelnost.

V této kapitole:

 Více sloupců

 Flexbox

 Grid Layout

 Vzdálenější budoucnost

Upozornění: Třebaže prohlížeče již implementují spoustu nových funkcí, měli byste je považovat

za experimentální a uvědomit si, že se můžou měnit, dokud konsorcium W3C nedokončístandardizační proces. Podrobné informace o podpoře v aktuálních informacích najdete v příloze A, jejíž

aktualizovaná verze bude k dispozici na adresehttp://modernwebbook.com/.//


78

KAPITOLA 4 Nové přístupy k rozvrhování jazykem CSS

Až donedávna nebylo možné napodobit tento styl na webu bez použití jazyka JavaScript, ale modul

pro rozvržení do více sloupců (Multi-column Layout Module) řeší tyto nedostatky. Buďme upřímní

– tento styl se pravděpodobně hodí více pro tisk než pro obrazovku, na níž může být nepříjemné

posouvat obsah nahoru a dolů. V některých situacích může být ale použití více sloupců přínosné.

Vlastnosti pro více sloupců usnadňují rozdělování vloženého obsahu do  sloupců. Na  daný

element jednoduše aplikujeme vlastnost column-count, které předáme celé číslo označující

počet sloupců. Například pomocí níže uvedeného kódu bychom rozdělili obsah do tří sloupců:

E { column-count: 3; }

Obsah je nyní rozdělený do tří sloupců, mezi nimiž je malá mezera. Kdybyste chtěli defi novat

sloupce přesněji, mohli byste nastavit jejich šířku prostřednictvím vlastnosti column-width:

E { column-width: 120px; }

Předchozím kódem vytváříme co nejvíce sloupců o šířce 120 pixelů s mezerami mezi nimi, a to

tak, aby se vešly do svého rodičovského elementu. Předpokládejme kupříkladu, že rodičovskýele

ment má šířku 600 pixelů – prohlížeč vytvoří 4 sloupce o šířce 120 pixelů, mezi nimiž bude mezera

o velikosti přibližně 3 em, a navíc zbyde nějaké volné místo. Prohlížeč toto volné místo rovnoměrně

rozdělí mezi jednotlivé sloupce tak, aby vyplnil celou šířku rodičovského elementu. Tozname

ná, že hodnota vlastnosti column-width není absolutní, ale vyjadřuje spíše minimální hodnotu.

Obrázek 4.1 srovnává tyto dva přístupy. V  horním příkladu vytváříme tři sloupce pomocí

vlastnosti column-count, zatímco ve spodním příkladu nastavujeme vlastnosti column-width

hodnotu 120 px, ale skutečná šířka sloupců se mírně liší, aby lépe vyplnily rodičovský element.

Obrázek 4.1 Porovnání sloupců rozvržených pomocí vlastnosti column-count (horní)

a column-width (spodní)


Více sloupců

79

Vlastnosti column-width a column-count je možné aplikovat na  stejný element. Pokud to

uděláte, z  vlastnosti column-count se stane maximální možný počet sloupců. V  takovém

případě prohlížeči sdělujete: „Udělej sloupce o šířce 120 pixelů až do maximálního počtu tří

sloupců a přitom změň jejich velikost tak, aby vyplnily rodičovský element.“ Případně byste

mohli použít zkrácenou vlastnost columns, které předáváte dvě hodnoty reprezentujícívlast

nosti column-width a column-count:

E { columns: 120px 3; }

Jestliže rozdělíte obsah do sloupců bez pevné výšky, prohlížeč automaticky distribuuje řádky

v jednotlivých sloupcích takovým způsobem, aby potenciálně zůstalo prázdné místo vespod

rodičovského elementu. V případě, že element bude mít defi novanou výšku, můžete si vybrat

styl toku textu pomocí vlastnosti column-fi ll.

Její výchozí hodnotou je balance, s níž prohlížeč distribuuje řádky rovnoměrně. Alternativní

chování spočívá ve vyplňování sloupců sekvenčně do jejich maximální výšky. Poslední sloupec

bude mít pravděpodobně méně řádků a spoustu nevyužitého místa. Pokud vám to vyhovuje,

můžete použít klíčové slovo auto.

Mezery a linky

Už víte, že mezi jednotlivými sloupci jsou mezery. Velikost těchto mezer můžete měnitpro

střednictvím vlastnosti column-gap. Ta přijímá délkovou hodnotu a upravuje mezeru mezi

sloupci na požadovanou délku. Zde je příklad:

E { column-gap: 2em; }

Mezi sloupce můžete také vkládat linky pomocí vlastnosti column-rule. Výsledný efekt vypadá

podobně jako u vlastnosti border z jazyka CSS 2.1. Vyžaduje rovněž stejné tři hodnoty – pro

šířku, styl a barvu. Toto nastavení ale platí jen pro svislou linku, ne pro všechny čtyři strany.

Šedou linku o šířce 2 pixely vložíte mezi sloupce následujícím způsobem:

E { column-rule: 2px dotted gray; }

Jakmile spojíte tuto vlastnost s vlastností column-gap, prohlížeč rozdělí mezeru na oboustra

nách linky rovnoměrně. V tomto případě byste získali mezeru o velikosti 2 em, takže na každé

straně linky o šířce 2 pixely by se nacházela mezera široká 1 em, jak lze vidět na obrázku 4.2.

Obrázek 4.2 Nastavení mezer a linek mezi sloupci


80

KAPITOLA 4 Nové přístupy k rozvrhování jazykem CSS

Obalování a zalamování

Sloupce jsou užitečné, pokud pracujete s textem nebo jiným řádkovým obsahem, ale určitěbu

dete chtít také používat objekty a blokové elementy, které lze jen obtížně umísťovat do sloupců.

V těchto případech vám pomůže dvojice souvisejících vlastností.

První z nich je column-span, jenž se skvěle hodí, pokud chcete přerušit tok sloupců novým

elementem, který je bude obalovat všechny. Přípustnou hodnotou je klíčové slovo all nebo

none – to znamená, že nový element obaluje buď všechny sloupce, nebo žádný.

F { column-span: all; }

Jakmile použijete hodnotu all, tok textu se přeruší před elementem, na  nějž ji aplikujete,

a pokračuje za ním, jak lze vidět na obrázku 4.3.

Jestliže máte elementy uspořádané do mřížky, můžete narazit na situaci, že konec sloupcezpů

sobí zalomení uprostřed daného elementu.

To není příliš ideální, pokud máte například podnadpis, jenž by se mohl rozdělit do  dvou

sloupců. Této situaci lze zabránit prostřednictvím skupiny vlastností pro určování místaza

lamování. Všechny tyto vlastnosti – break-after, break-before a break-inside – fungují

na podobném principu.

Obrázek 4.3 Druhý podnadpis obaluje všechny sloupce a přerušuje tok obsahu

Pro následující příklad zvolíme vlastnost break-before. Jejími hodnotami sdělujemeprohlí

žeči, zda chceme zalamovat sloupec před elementem. Hodnota column zalamuje obsah před

elementem (je-li to nutné). Hodnota avoid-column (nebo jen avoid) zakazuje prohlížečiza

lomit obsah, pokud to není nevyhnutelné. Výchozí hodnota auto nechává na prohlížeči, aby

určil nejlepší způsob rozvržení sloupců.

Pokud vám není jasné, jak tato vlastnost funguje, prohlédněte si ukázkový souborzalamovani

-sloupcu.html. Zde je krátký příklad:

h2 { break-before: column; }

Výsledky můžete vidět na obrázku 4.4. Horní část používá hodnotu auto, a proto jsoupod

nadpisy vložené uprostřed sloupců. V dolní části s hodnotou column je vždy zalomení před

elementy h2.


Flexbox

81

Obrázek 4.4 Vliv hodnoty column u vlastnosti break-before lze vidět na spodním výstupu

Vlastnosti break-after a break-middle fungují podobně, ale zalamují obsah na jinýchmís

tech (názvy těchto vlastností mluví samy za sebe).

Flexbox

Pokud vytváříte spíše webovou aplikaci než obsahově bohaté webové stránky, a to zejména

tehdy, když má spoustu tlačítek a jiných prvků uživatelského rozhraní nebo spoustu formulářů

a interaktivních oblastí, určitě oceníte nový modul Flexbox (Flexible Box).

Jádrem modulu Flexbox je XUL – jazyk používaný k tvorbě rozvržení prohlížeče Firefox. To

znamená, že se zaměřuje na uživatelská rozhraní. Flexbox umožňuje fl exibilní změnu velikosti

elementů, aby se lépe vešly do vyhrazeného prostoru. Navíc je možné elementypřeuspořá

dávat a otáčet.

Syntaxe Flexboxu prodělala spoustu změn v uplynulých letech, ale konečně je stabilní a má

rozsáhlou podporu, proto se o ní můžeme bez obav pobavit.

Použití modelu Flexbox

Abyste mohli použít model Flexbox, vytvořte si fl ex-obal. Jedná se rodičovský element, který

bude obsahovat všechny fl exoložky. Flex-obal defi nujete pomocí nové hodnoty provlast

nost display:

E { display: fl ex; }

Teď už máte fl ex-obal, ale ptáte se, k čemu je dobrý? To zjistíte, až do něho přidáte dceřiné

elementy. V ukázkovém souboru fl exbox.html najdete dvě dceřiné položky uvnitřobalují

cího elementu.

<div id=“obal“>

<div id=“potomek1“>...

<div id=“potomek2“>...

</div>


82

KAPITOLA 4 Nové přístupy k rozvrhování jazykem CSS

Na obrázku 4.5 si všimněte, že oba dceřiné elementy jsou umístěné vedle sebe a mají stejnou

šířku, přestože jste nepoužili vlastnost fl oat ani pozicování. To je výchozí chování flexoložek

(dceřiných elementů fl ex-obalu) – jsou umístěné do řádku uvnitř obalujícího elementu.Na

víc jsou uspořádané ve směru zápisu jazyka pro daný dokument, takže pro jazyky čtené zleva

doprava (čeština, angličtina atd.) směřuje řádek také zleva doprava.

Obrázek 4.5 Dceřiné položky fl ex-obalu jsou automaticky rozmístěny vodorovně

Tento směr můžete změnit prostřednictvím vlastnosti fl ex-direction na obalujícímelemen

tu. Její výchozí hodnotou je row a ta zaručuje výše popsané standardní chování, zatímcohod

notou column byste umístili položky svisle – tj. do sloupce. K dispozici je rovněž řada dalších

hodnot, jak ostatně uvidíte za okamžik.

E {

display: fl ex;

fl ex-direction: column;

}

S tímto kódem budou vaše flexoložky vypadat podobně jako při běžném rozvržení, alebu

dou pod sebou.

Změna uspořádání obsahu

Další skvělou funkcí modelu Flexbox je, že umí rychle měnit uspořádání zobrazených položek,

a to bez ohledu na jejich fyzické umístění v kódu dokumentu. Například v předchozímpří

kladu jsme měli dvě položky v řádku, ale co kdybychom chtěli, aby element s identifi kátorem

potomek2 předcházel elementu s identifi kátorem potomek1?

Můžete to udělat prostřednictvím vlastnosti fl ex-direction a hodnoty row-reverse. Taob

rací uspořádání flexoložek, jak můžete vidět na obrázku 4.6.

E { fl ex-direction: row-reverse; }

Hodnota column-reverse dělá to samé, ale pro fl exoložky zobrazené ve  sloupcích –

obrací jejich pořadí, ale ve svislém směru. Zkuste experimentovat s hodnotami vlastnosti

fl ex-direction ve výše uvedeném ukázkovém souboru, abyste si vyzkoušeli, jak funguje.


Flexbox

83

Obrázek 4.6 Hodnota row-reverse převrací uspořádání flexoložek

Pomocí vlastnosti fl ex-order můžete jít za hranice pouhého obráceného uspořádání –mů

žete vytvořit zcela nové vzory uspořádání. Tuto vlastnost lze aplikovat na flexoložky, ale ne

na  fl ex-obal. Její hodnotou je číslo, jež reprezentuje řadovou skupinu. To znamená, že po

ložky se stejnou hodnotou jsou seskupené dohromady. Kromě toho jsou uspořádané podle

své řadové skupiny – všechny položky s nejmenší řadovou skupinou budou první, následují

položky s druhou nejmenší řadovou skupinou atd. Všechny položky bez explicitně uvedené

hodnoty budou zobrazené jako první, protože výchozí hodnotou je 0.

Položky se stejným číslem řadové skupiny jsou dodatečně řazené na základě jejich uspořádání

v kódu dokumentu. Uspořádání podle řadových skupin se může zdát na první pohledzmate

né, proto následuje příklad se čtyřmi flexoložkami:

<div id=“obal“>

<div id=“potomek1“>...

<div id=“potomek2“>...

<div id=“potomek3“>...

<div id=“potomek4“>...

</div>

Bez jakéhokoliv nastavení se dceřiné elementy zobrazí přesně tak, jak jsme je zapsalido do

kumentu – element #potomek1, #potomek2, #potomek3 a #potomek4. Nyní je přeuspořádáme

pomocí různých hodnot vlastnosti fl ex-order:

#potomek1 { fl ex-order: 2; }

#potomek2, #potomek4 { fl ex-order: 3; }

#potomek3 { fl ex-order: 1; }

S těmito pravidly stylů budou položky umístěné v následujícím pořadí – #potomek3, #potomek1,

#potomek2 a #potomek4. Položka #potomek3 bude první, jelikož má nejnižší řadovou skupinu,

za ní bude následovat položka #potomek1 s další vyšší skupinou a nakonec položky #potomek2

a #potomek4, které mají řadovou skupinu 3. Položka #potomek4 je poslední, protože je také

poslední v dokumentu.




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.