Pracovní postup při vytváření prototypů

Kombinací panelu Stránky s ostatními funkcemi aplikace Fireworks můžete rychle vytvořit interaktivní prototypy webu a softwaru. Dokončený prototyp můžete převést na funkční web prostým exportem do aplikace Adobe Flash®, Adobe Flex®, Adobe AIR™ nebo Adobe Dreamweaver®.

Prostudujte si následující články s obecnými tipy pro pracovní proces vytváření prototypů na stránkách Fireworks Developer Center:

Video s výukovým kurzem představujícím rozhraní aplikace pro vytváření prototypů naleznete na adrese www.adobe.com/go/lrvid4034_fw_cz.

Vytváření stránek

Na panelu Stránky vytvořte požadovaný počet stránek nebo obrazovek pro úvodní návrh. Během práce na návrhu můžete stránky podle potřeby přidat nebo odebrat.

Rozvržení společných prvků návrhu

Na plátně zadejte rozvržení prvků návrhu, které chcete použít na více stránkách, například navigační pruhy a obrázky na pozadí. K zarovnání prvků použijte automatická vodítka. Za účelem zajištění maximální flexibility vytvořte strukturu rozvržení pomocí stylů CSS. (Viz Inteligentní vodítka a Tvorba rozvržení s využitím stylů CSS.).

Sdílení společných prvků na více stránkách

V případě sdílení společných prvků dojde po provedení jedné změny k automatické aktualizaci všech příslušných stránek. Ke sdílení všech prvků na stránce můžete použít vzorovou stránku nebo můžete pomocí sdílení vrstev kopírovat dílčí sady prvků. (Viz Použití vzorové stránky a Sdílení vrstev.)

Přidání jedinečných prvků na jednotlivé stránky

Na jednotlivých stránkách můžete přidat jedinečné prvky návrhu, navigace nebo formulářů. Panel Společná knihovna obsahuje různá tlačítka, textová pole a rozbalovací nabídky, které urychlují proces návrhu. Symboly prvků ve složkách Flex Components, Mac, Mac, Win, Web & Application a Menu Bars obsahují vlastnosti, které můžete přizpůsobit pro jednotlivé instance symbolů. (Viz Vytvoření a použití symbolů komponent.)

Simulace navigace pomocí odkazů

Pomocí webových objektů, například řezů, aktivních oblastí nebo navigačních tlačítek, je možné vytvořit odkazy mezi různými stránkami prototypu. (Viz Odkaz na stránky v dokumentu aplikace Fireworks.)

Export dokončeného interaktivního prototypu

Aplikace Fireworks nabízí několik výstupních formátů pro váš prototyp. Všechny formáty zachovají hypertextové odkazy pro navigaci mezi stránkami. Viz tyto články:

Tvorba rozvržení s využitím stylů CSS

Rozvržení s využitím stylů CSS můžete vytvořit v dokumentu aplikace Fireworks a poté ho převést na stránky HTML s pravidly CSS, které replikují rozvržení. Rozvržení s využitím stylů CSS nabízí standardizovaný přístup s kódem čitelným různými prohlížeči.

Video s výukovým kurzem představujícím tvorbu rozvržení s využitím stylů CSS naleznete na adrese www.adobe.com/go/lrvid4035_fw_cz. Také si přečtěte následující zdroje:

O rozvržení stránek na základě stylů CSS

Aplikace Fireworks umožňuje navrhovat stránky a okamžitě je exportovat na stránky HTML s pravidly CSS díky exportnímu modulu, který analyzuje rozmístění objektů. Navíc můžete nastavit zarovnání stránky a určit opakující se obraz na pozadí.

Můžete použít prvky HTML dostupné ve složce HTML ve Společné knihovně. Složka HTML obsahuje prvky HTML jako tlačítko, rozvírací seznamy a textová pole. Vlastnosti těchto prvků můžete upravovat pomocí panelu Vlastnosti symbolu. Když přetáhnete do stránky jakékoli prvky formuláře, vloží exportní modul při exportu rozvržení s využitím stylů CSS do stránky tagy <form>.

Veškerý text, na který jste umístili řez, bude v exportovaném HTML zobrazen jako obrázky. Pokud chcete, aby byl tento text zobrazen jako text, použijte součásti HTML ze Společné knihovny. Součásti HTML zahrnují nadpisy úrovně 1-6 a prvky odkazů.

Pravidla pro rozvržení s využitím stylů CSS

Všimněte si několika pravidel pro tvorbu rozvržení s využitím stylů CSS, abyste dosáhli očekávaných výsledků.

Pravidlo 1: Pro export textu použijte obdélníky a pro export obrázků použijte řezy

Exportní modul exportuje text v obdélnících. Pouze obrazy zakryté obdélníkovými řezy jsou exportovány a proto umístěte řezy na obrazy, které chcete exportovat. Tyto řezy „říkají“ exportnímu modulu, kde jsou obrázky.

Pravidlo 2: Vyhněte se překrývání objektů

Exportní modul vnímá text, obrázky a obdélníky jako obdélníkové bloky. Zjistí velikost a polohu těchto objektů, aby mohl vytvořit logické řady a sloupce, do kterých objekty umístí. Objekty umísťujte opatrně, aby jejich okraje nepřesahovaly.

Pravidlo 3: Naplánujte si rozvržení řad a sloupců

Exportní modul hledá logické úseky, kde mohou být umístěny nepřerušované záměrné přímky mezi objekty a skupinami objektů. Uspořádejte rozvržení sloupců do obdélníků, aby exportní modul nevkládal logické řádky, které naruší rozvržení sloupců.

Pravidlo 4: Pracujte s dokumentem jako s dvourozměrným

Při návrhu stránky použijte obdélníky, do kterých vložte objekty, které se budou chovat jako potomci obdélníku. Exportní modul dokáže tyto vztahy rodič-potomek rozpoznat. Exportní modul rozpoznává u prvků potomků logické řady a sloupce podobně jako v Pravidle 3.

Kromě těchto pravidel si všimněte následujících informací:

  • Exportní modul exportuje pouze základní obdélníky. Chcete-li exportovat zaoblené rohy obdélníků, umístěte na ně řezy.

  • Chcete-li exportovat tahy obdélníků, umístěte na tyto obdélníky obdélníkové řezy.

  • Chcete-li exportovat symboly, umístěte na ně obdélníkový řez.

  • Chcete-li exportovat filtry, které jste aplikovali na text nebo obdélníky, umístěte na ně obdélníkové řezy.

Export rozvržení CSS

Fireworks umožňuje exportovat rozvržení vytvořená na základě CSS. Tyto soubory vytvořené na základě CSS poté můžete otevřít a upravit v aplikaci Dreamweaver nebo jiném webovém editoru schopném pracovat s CSS.

  1. Zvolte Soubor > Exportovat.

  2. V rozbalovací nabídce Export vyberte možnost CSS a obrazy.

  3. Klepnutím na položku Volby nastavíte vlastnosti stránky HTML.

  4. Klepněte na možnost Procházet, chcete-li zadat obraz pozadí a nastavit jeho dlaždicové opakování:

    • Výběrem možnosti Neopakovat zobrazíte obraz pouze jedenkrát.

    • Pokud vyberete volbu Opakovat, obraz se bude dlaždicově opakovat ve vodorovném i svislém směru.

    • V případě, že vyberete volbu Opakovat-x, obraz se bude dlaždicově opakovat ve vodorovném směru.

    • Pokud vyberete volbu Opakovat-y, obraz se bude dlaždicově opakovat ve svislém směru.

  5. Vyberte zarovnání stránky v prohlížeči z možností vlevo, na střed a vpravo.

  6. Nastavte posouvání přílohy na nepohyblivé nebo posun.

  7. Klepněte na OK a pak klepněte na Uložit.

Vytvoření ukázky dokumentu

K dokumentu, na kterém právě pracujete, můžete vytvořit i jeho ukázku. Ukázka se otevře v prohlížeči a předvede jeho funkce, přičemž je možné přecházet mezi jednotlivými stránkami.

  1. Vyberte Příkazy > Ukázka aktuálního dokumentu.

  2. Vyberte stránky, pro které chcete vytvořit ukázku a klepněte na tlačítko Vytvořit ukázku.

  3. Vyberte složku a klepněte na Otevřít.

Vytváření prototypů aplikací Flex

proces vytváření prototypů pro Flex se podobá postupu při návrhu webových stran a softwarového rozhraní. (Viz Pracovní postup při vytváření prototypů.) V aplikaci Fireworks lze komponenty Flex přetahovat do pláten, nastavovat jejich vlastnosti a exportovat výsledné uživatelské rozhraní do formátu MXML. Uživatelské rozhraní lze pak dále zpřesnit v aplikaci Flex Builder.

Vytvoření uživatelského rozhraní Flex

Pomocí panelu Stránky vytvořte požadovaný počet obrazovek rozhraní pro úvodní návrh.

Vložení návrhových komponent Flex do rozvržení

Do pláten vložte komponenty Flex ze složky Flex v panelu Společná knihovna. Tyto symboly komponent při kombinaci s exportem do MXML zajistí, že výsledek bude odpovídat očekávání. Když dokument exportujete do formátu MXML, jsou všechny tyto symboly převedeny na odpovídající tagy MXML. Objekty nerozpoznané jako komponenty Flex jsou však exportovány jako bitmapy, propojené do dokumentu MXML pomocí značky <mx:Image>. (Viz Vytvoření a použití symbolů komponent.

Poznámka:

Při úpravě návrhové komponenty Flex v aplikaci Fireworks můžete upravený kód XML kopírovat do projektu Flex. Tak si ušetříte čas při replikaci chování změněné komponenty v projektu.

Symboly Kurzor, Posuvník, Záložka a ToolTip jsou ve výstupu MXML ignorovány, protože tyto komponenty nelze přímo převést z aplikace Fireworks do MXML. Například symbol Posuvník se automaticky objeví v instancích kontejneru Flex, pokud lze obsah kontejneru posouvat. V aplikaci Fireworks tyto symboly slouží jako indikátory funkce součástí návrhu rozhraní.

Poznámka:

Řezy obrazů, přechody a aktivní oblasti jsou aplikovány jen na prototypy vycházející z HTML. Při vytváření prototypů Flex se těmto webovým objektům vyhněte.

Sdílení společných komponent Flex na více stránkách

Jestliže sdílíte jeden prvek Flex mezi více stránkami, bude jeho změna automaticky promítnuta do všech stránek (nebo obrazovek). Ke sdílení všech komponent Flex na stránce můžete použít vzorovou stránku nebo můžete pomocí sdílení vrstev kopírovat dílčí sady komponent. (Viz Použití vzorové stránky a Sdílení vrstev.)

Zadání vlastností komponent Flex

V panelu Vlastnosti symbolu (Okno > Vlastnosti symbolu) zadejte vlastnosti a události pro všechny komponenty Flex vložené na kreslicí plátna.

Export rozvržení Flex do MXML

Exportujte rozvržení uživatelského rozhraní Flex a výsledný soubor MXML otevřete v aplikaci Flex. Fireworks exportuje nezbytný kód MXML se všemi informacemi o stylech a absolutním pozicování. Vývojáři v jazyce Flex mohou toto rozhraní použít, aniž by museli znovu vytvářet rozvržení ve Flexu.

Úprava vlastností prvků Flex

Vlastnosti a události komponent Flex lze upravit v panelu Vlastnosti symbolu.

  1. Vyberte komponentu Flex na kreslicím plátně.

  2. Otevřete panel Vlastnosti symbolu (Okno > Vlastnosti symbolu).

  3. Nastavte vlastnosti a události komponent Flex v panelu Vlastnosti symbolu.

Export dokumentu aplikace Fireworks do formátu MXML

Aplikace Fireworks vám pomůže vytvořit rozvržení internetových RIA aplikací, protože povoluje export položek Společné knihovny ve formě použitelné v aplikaci Adobe Flex Builder. Fireworks exportuje nezbytný kód Flex (MXML) se všemi informacemi o stylech a absolutním pozicování.

Po dokončení exportujte prototyp aplikace Flex do formátu MXML pro další úpravy v aplikaci Flex Builder. V zobrazení návrhu vypadá prototyp jako jeho obdoba Fireworks, s výjimkou komponent typu kurzor nebo posuvník, které nejsou exportovány.

  1. Zvolte Soubor > Exportovat.

  2. V místní nabídce Export vyberte možnost MXML a obrazy.

  3. Vyberte volbu Uložit obrazy do podsložky, chcete-li obrazy uložit do jiné složky než kód MXML.

  4. Chcete-li exportovat pouze aktuální stránku, vyberte možnost Pouze aktuální stránka.

  5. Export dokončete klepnutím na Uložit.

    Všechny obrázky přidružené prototypu budou exportovány do složky images. Společně s dalšími obrazy jsou vytvořeny také obrazy celých stránek MXML. Stránky MXML však tyto náhledy nevyžadují a lze je proto odstranit.

Vytvoření a export vzhledů Flex

Ke komponentám Flex můžete přidávat vzhledy přímo v aplikaci Fireworks a poté je exportovat pro následné použití při tvorbě webových stránek a rozhraní aplikací založených na Flexu

Přidávání vzhledů k prvkům aplikace Flex

Můžete vytvářet vzhledy pro mnoho různých prvků aplikace Flex na základě šablon vzhledů Flex a upravovat je v aplikaci Fireworks.

  1. Vyberte možnost Příkazy > Změna vzhledů aplikace Flex > Nový vzhled aplikace Flex.

  2. Proveďte jednu z následujících akcí:

    • Chcete-li vytvořit vzhledy Flex pro všechny dostupné prvky, vyberte možnost Více prvků.

      Aplikace Fireworks vytvoří jeden dokument se všemi dostupnými prvky Flex.

    • Chcete-li určit prvky, pro které chcete vytvořit vzhledy, vyberte možnost Konkrétní prvky.

      Vyberte jen prvky s připojeným konkrétním stylem nebo všechny instance prvku.

  3. Klepněte na tlačítko OK.

Export vzhledů Flex

  1. Vyberte možnost Příkazy > Změna vzhledů aplikace Flex > Exportovat vzhled aplikace Flex.

  2. Vyberte složku, do které chcete exportovat dokument aplikace Fireworks, a klepněte na tlačítko Otevřít.

Omezení exportu MXML

Než použijete nástroj pro export do formátu Flex MXML, je třeba znát jeho schopnosti a omezení:

Při exportu do MXML nejsou přidány vzhledy komponent

Při exportu do MXML nejsou vytvářeny vzhledy komponent Flex, a to ani při jejich úpravě v aplikaci Fireworks. Při exportu do MXML jsou pouze vytvořeny dokumenty MXML, které lze použít v prostředí Flex. Tyto dokumenty mohou obsahovat také odkazované obrazy pro objekty Fireworks, které nelze převést na tagy MXML. Tyto obrázky jsou do dokumentu MXML přidány prostřednictvím tagů <mx:Image>.

Při exportu do MXML jsou ignorovány řezy

Vzhledem k tomu, že při exportu do MXML jsou vytvářeny dokumenty složené z tagů pro Flex, nejsou řezy při vytváření obrázků a buněk tabulek brány do úvahy. Když jsou při exportu do MXML vytvářeny obrazy, je použito nastavení optimalizace dokumentu, ze kterého je zjištěn formát obrazu a metoda komprese.

Vlastnosti MXML jsou omezeny na vlastnosti bohatých symbolů

Funkce exportu do MXML vytváří vlastnosti tagů MXML na základě komponent Flex ve Fireworks. Fireworks nabízí podmnožinu komponent Flex s omezeným počtem vlastností.

Styly jsou vložené

Vlastnosti rozeznané jako styly jsou odděleny od vytvořených tagů MXML, ale jsou uchovány ve stejném dokumentu MXML uvnitř značky <mx:Style>. Fireworks neumí definovat styly v externím souboru CSS.

Snímky nejsou podporovány

Vytváříte-li návrhy a rozvržení pro výstup do MXML, nepoužívejte snímky. Pokud chcete mít v rámci jednoho dokumentu rozdílné návrhy, použijte stránky.

Vytváření prototypů aplikací Adobe AIR

Adobe® AIR™ for Fireworks umožňuje přetvořit prototyp Fireworks do desktopové aplikace. Například některé stránky prototypu spolu komunikují kvůli zobrazení dat. Pomocí Adobe AIR lze vložit takovou sadu stránek do malé aplikace, kterou nainstalujete na počítač uživatele. Když uživatel aplikaci spustí na své pracovní ploše, aplikace načte a zobrazí prototyp ve svém vlastním aplikačním okně, nezávisle na prohlížeči. Uživatelé poté mohou prototypem procházet přímo na počítači, aniž by potřebovali připojení k Internetu.

Viz článek, který publikoval Ethan Eismann o aplikaci Adobe AIR a zkušenostech s touto značkou: http://www.adobe.com/go/learn_fw_airexperiencebrand_cz.

Přidat události myši Adobe AIR

Objektům v dokumentu můžete přidat předdefinované události myši Adobe AIR. Aplikace Fireworks nabízí čtyři předdefinované události myši: zavřít okno, přetáhnout okno, maximalizovat okno a minimalizovat okno.

  1. Vyberte objekty na plátně, kterým chcete přiřadit chování události myši.

  2. Vyberte Příkazy > Události myši AIR a zvolte událost.

Náhled aplikace Adobe AIR

Můžete zobrazit náhled aplikace Adobe AIR bez nastavení jakýchkoli parametrů aplikace Adobe AIR.

  1. Vyberte Příkazy > Vytvořit balíček AIR a klepněte na volbu Náhled.

Vytvoření aplikace v prostředí Adobe AIR

  1. Vyberte Příkazy > Vytvořit balíček AIR a nastavte následující volby:

    Název aplikace

    Určete název, který se objeví na instalační obrazovce během instalace. Rozšíření určuje výchozí název webu Fireworks.

    ID aplikace

    Zadejte pro svou aplikaci jedinečné ID. V identifikátoru nepoužívejte mezery ani speciální znaky. Platnými znaky jsou jen 0-9, a-z, A-Z, . (tečka) a - (pomlčka). Tato volba je povinná.

    Verze

    Určete číslo verze vaší aplikace. Tato volba je povinná.

    Složka Program Menu

    Určete složku v nabídce Start systému Windows, ve které má být vytvořen zástupce aplikace. (Není k dispozici na Mac OS)

    Popis

    Můžete přidat popis aplikace, který se zobrazí, když uživatel aplikaci nainstaluje.

    Copyright

    Stanoví autorské údaje, které se zobrazí v dialogovém okně O aplikaci u aplikací Adobe AIR na systému Mac OS. U aplikací pro systém Windows není tento údaj použit.

    Obsah balíčku

    Vyberte Aktuální dokument a tak automaticky nastavte složku, jejíž soubory budou součástí aplikace.

    Kořenový obsah

    Tlačítkem Procházet vyberte stránku, která bude ukázána jako kořenový obsah. Pokud jste nastavili aktuální dokument, kořenový obsah je nastaven automaticky.

    Zahrnuté soubory

    Určete, které soubory nebo složky mají být součástí aplikace. Přidat můžete soubory HTML a CSS, soubory obrázků a knihovny skriptů JavaScript. Po klepnutí na tlačítko Plus (+) lze přidat soubory, po klepnutí na ikonu složky lze přidat celé složky. Chcete-li soubor nebo složku ze seznamu odstranit, vyberte ho (ji) a klepněte na tlačítko Minus (-). Soubory a složky, které nastavíte jako součást balíčku Adobe AIR, musí patřit do adresáře kořenového obsahu.

    Systémový chrome a Průhledné

    Určete styl okna (nebo chrome) použitý při spouštění aplikací na počítačích. Systémový chrome dává aplikaci standardní ovládání oken operačního systému. Volba Průhledný chrome eliminuje standardní systémový chrome a umožňuje vytvořit vlastní chrome pro aplikaci. Průhlednost umožňuje vytvořit okna aplikace s jiným než obdélníkovým tvarem.

    Šířka a Výška

    Určete rozměry okna aplikace po otevření v pixelech.

    Vybrat obrázky ikon

    Klepnutím vyberte vlastní obrázky pro ikony aplikace. Určete složku pro každou velikost ikony a vyberte soubor obrázku, který chcete použít. Jako obrázky ikon aplikace lze použít pouze soubory PNG.

    Poznámka:

    Zvolené vlastní obrázky musí být uloženy ve webovém místě aplikace a jejich cesty musí být vůči kořenu webového místa zadány relativně.

    Digitální podpis

    Po klepnutí na tlačítko Nastavit bude aplikace doplněna o digitální podpis. Tato volba je povinná. Další informace najdete v následující sekci.

    Soubor balíčku

    Určete adresář, kam bude uložen nový instalační program aplikace (soubor AIR). Výchozím umístěním je kořen webového sídla. Po klepnutí na tlačítko Procházet vyberte jiné umístění. Výchozí název souboru je složen z názvu webového místa a přípony .air. Tato volba je povinná.

Podepsání aplikace Adobe AIR digitálním certifikátem

Digitální podpis je zárukou toho, že kód aplikace nebyl od doby jejího vytvoření autorem softwaru nijak změněn ani poškozen. Digitální podpis vyžadují všechny aplikace Adobe AIR, bez tohoto podpisu je není možné nainstalovat.

  1. V dialogovém okně Vytvořit balíček AIR klepněte na tlačítko Nastavit vedle volby Digitální podpis.

  2. V dialogovém okně Digitální podpis proveďte jeden z následujících úkonů:

    • Chcete-li podepsat aplikaci zakoupeným digitálním certifikátem, klepněte na tlačítko Procházet, vyberte certifikát, zadejte odpovídající heslo a klepněte na tlačítko OK.

    • Chcete-li vytvořit vlastní digitální certifikát, který si podepíšete sám, klepněte na tlačítko Vytvořit a zadejte údaje v dialogovém okně. Volba Typ klíče vyjadřuje úroveň zabezpečení certifikátu: 1024-RSA používá 1024bitový klíč (méně bezpečný), 2048-RSA používá 2048bitový klíč (lepší zabezpečení). Až skončíte, klepněte na tlačítko Vytvořit. Poté zadejte v dialogovém okně Digitální podpis odpovídající heslo a klepněte na tlačítko OK.

      Poznámka: Na počítači musíte mít nainstalované prostředí Java® Runtime Environment (JRE).

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online