Vytvárame webové stránky / 14. časť

Pokračujeme v kódovaní HTML5 a v tejto časti sa pozrieme na ďalšie možnosti tohto štandardu, ako aj na špecializované programy, ktoré využijete pri programovaní a návrhu rozhrania pre mobilné riešenia. Stránky postavené na XHTML alebo HTML5 sa bez problému zobrazia na vašich smartfónoch, ale často na internete vidieť, že nie sú vyslovene prispôsobené displejom s rôznou uhlopriečkou. Nejde v zásade o problém, ale o to, ukázať riešenie, pri ktorom by stránky ihneď po načítaní vyzerali lepšie.

Veľkosť obrazovky

Návrh webovej stránky pre počítače nevyžaduje zvláštnu špecifikáciu, no tak ako sme už v minulosti uvádzali, je tu možnosť definovania predvoleného zobrazenia stránok na rôznych zariadeniach. Štandardné zobrazenie pre počítače nevyžaduje zvláštne elementy, aby však stránka vyzerala dobre aj na mobilnom telefóne, je vhodné použiť samostatný súbor CSS alebo vnorenie príkazov CSS do stránky.

Tento zápis definuje zobrazenie obsahu na zariadení s maximálnou šírkou 480 pixelov, čo je hodnota drvivej väčšiny smartfónov na trhu. Samozrejme, zobrazenie možno prispôsobiť aj pre iné rozlíšenia. Tento spôsob je základný a na jeho správne využívanie je vhodné definovať viacero rozlíšení. V praxi zbytočná námaha, no mobilný prehliadač si s týmto zápisom poradí a bez problémov dokáže prispôsobiť zmenu mierky stránky. Tá je však už v jeho réžii a podľa nastavení prispôsobenia mierky, ktorú v prehliadačoch pre smartfóny nájdete. Typický zápis na definovanie zobrazenia je takýto:

Namiesto vlastnosti device-width môžete použiť konkrétnu hodnotu, v nadväznosti na náš príklad povedzme 480. Táto hodnota sa bude považovať za 100 % hodnotu aktuálnej mierky. V praxi ide o to, že je rozdiel, či HD rozlíšenie je na displeji s uhlopriečkou 3,7" alebo 4,7", pretože hodnota dpi je rozdielna. Aj tento fakt zapríčiňuje nerovnomerné rozloženie prvkov na stránke. Tí, ktorí majú v pláne použiť špecifický súbor CSS a nechcú pridávať takéto elementy na stránky jednotlivo, môžu použiť takýto zápis priamo do súboru CSS:

@-viewport {
width: 480px;
}

Na zjednodušenie pochopenia tohto príkladu uvádzame, že ak je obsah stránky širší ako 480 pixelov, bude jeho základná mierka zobrazenia prispôsobená na uvedenú šírku, rovnako to bude aj v prípade, keď je obsah stránky menší než uvedených 480 pixelov. Špecifikovanie veľkosti môžete prenechať „user-agentovi" nastavením parametra auto.

@media (max-width: 699px) and (min-width: 520px) {
@-viewport {
width: 640px;
min-zoom: 0.25;
max-zoom: 5;
orientation: portrait;
}
}

Tento zápis je komplexnejší a pravdepodobne ho budete využívať v rámci návrhu vzhľadu v tejto forme. Prvý riadok určuje zobrazenie vnorených médií na stránke, druhý je element na definovanie vlastnosti pôvodne applovského elementu Funguje však dobre na všetkých prehliadačoch, preto ho môžete smelo používať nielen na platforme Android, ale napríklad aj na tabletoch s Internet Explorerom 10. Tu však v modifikácii @-ms-viewport. Min a max zoom definuje stupeň zmeny mierky, orientácia potom určuje zobrazenie a správanie v definovanom rozložení. Portrait je štandardné zobrazenie na výšku, pri orientácii landscape je dlhšia strana zobrazená podobne ako pri štandardnom pohľade na počítači. Zápisom v CSS môžete teda definovať element viewport pre obe zobrazenia samostatne. To najmä v prípade, ak chcete meniť povedzme rozloženie menu na stránke alebo rozvrhnutie textu s grafickými prvkami.

Návrhové aplikácie

Pri tvorbe komplexnejších aplikácií vo forme natívnych stránok HTML5 je vhodné použiť niektorý z uvedených nástrojov na ich vývoj. Na internete nájdete aplikácie, ktoré sú zadarmo, ale aj platené. Známy je napríklad Embarcadero HTML5 Builder. Poskytuje rozhranie na návrh webových aplikácií s použitím jazykov PHP, JavaScript alebo CSS a umožňuje zahrnúť do svojej inštalácie kompilátor platformy Android. V predošlej časti sme ukázali návrh formulárových prvkov cez klasické rozhranie editora stránok HTML, tu je k dispozícii vizuálny editor.

Návrhové rozhranie na tvorbu mobilných aplikácií v HTML5 Builder

Vyberiete si šablónu podľa modelu prenosného zariadenia (sú tu tablety aj smartfóny) a priamo na displej zariadenia vkladáte prvky. Dvojklikom sa prepínate do časti s kódom podobne ako pri iných programoch tohto typu. Silná stránka je lepšia kontrola nad dizajnovaním stránky a aplikácie a aj možnosť napojenia na databázy a celkové definovanie vlastností prvkov. Rovnako odporúčame aj program DaVinci Suite, ktorý je zadarmo a pracuje na podobnom princípe. A výhoda takéto návrhu? Nepotrebujete rozhranie Eclipse ani vývojárske účty Apple a vytvoríte webovú aplikáciu kompatibilnú na viacerých mobilných platformách. Iste, stále treba dodržiavať koncept HTML5, no ten v súčasnosti poskytuje silnú podporu na tvorbu aplikačných rozhraní. Dobre poslúži aj pri vývoji aplikácií pre tablety s Windows 8, tu však odporúčame inštaláciu vývojárskej aplikácie Microsoft Visual Studio.

Fluid UI

Upozorňujeme aj na návrhové rozhranie FluidUI, ktoré je dostupné na adrese www.fluidui.com a v základnej verzii sa dá využívať zadarmo. Ide o vizuálne rozhranie na návrh programov pre mobilné platformy. Poskytuje grafické prvky platforiem Android, iPhone, iPad, Windows Phone a ďalšie vrátane vlastného uploadu grafických prvkov. Definovanie vlastností prebieha priamo pri návrhu a pri každej stránke (zobrazení na displeji) sa dá nastaviť orientácia displeja aj jeho veľkosť. Po vytvorení projektu možno exportovať na vyskúšanie priamo cez link do mobilného telefónu. Platené verzie umožňujú rozsiahlejšie možnosti exportu, no zadarmo si môžete navrhnúť aplikáciu, a keď bude hotová, niektorý z rozšírených účtov sa dá zaplatiť mesačne.

Vynikajúce rozhrnie na návrh vlastných HTML5 a platformových programov

Nabudúce

HTML5 môžete veľmi dobre využívať na tvorbu webových aplikácií, a to aj pre mobilné zariadenia. Ukážeme vám nástroje a to, ako využiť možnosti nového štandardu pri návrhu programov.