Jak vytvořit web s aplikací Adobe Project Rome
Společnost Adobe nedávno zahájila projekt nazvaný Řím, který má být jakousi platformou pro publikování obsahu typu vše v jednom. Pomocí této inovativní aplikace můžete vytvářet webové stránky, tisknout projekty, interaktivní soubory PDF a další.
Dnes vám představím super základní začátečník úvod do Říma, abyste viděli, co to je, jak jej používat a zda je pro vás to pravé nebo ne.
Řím
Podle vlastních slov společnosti Adobe je Project Rome „Jednoduchým, výkonným vytvářením a publikováním obsahu typu„ vše v jednom “prakticky pro kohokoli.“ Pokud si myslíte, že je to trochu vágní, máte pravdu. Ale znovu je celý projekt trochu záhadný. Je Řím budoucností Photoshopu? Je to soutěž o Dreamweaver nebo InDesign?
Odpověď zní „nic z výše uvedeného“. Poté, co si s tím trochu zahrajete, je zřejmé, že se Adobe pokouší zacílit na jiný trh než s Creative Suite. Zatímco CS je neuvěřitelně drahá sada výkonných profesionálních aplikací, které mohou trvat roky (desetiletí?), Než se dokonale naučí, Řím je zamýšlen jako uživatelsky přívětivý způsob pro téměř každého, kdo vytváří bohatý obsah.
Než začneme, budete se chtít zastavit u webového serveru v Římě a buď stáhnout aplikaci pro stolní počítač nebo spustit webovou aplikaci (budu používat verzi pro stolní počítače).
Kolik to bude stát?
Řím je v současné době k dispozici zdarma. Společnost Adobe zřejmě ještě nerozhodla o své cenové strategii a chce vidět, jak uživatelé reagují před pokračováním. Nyní si můžete kopii stáhnout, ale stačí vědět, že jednoho dne ji pravděpodobně deaktivuje a donutí vás zakoupit jednorázovou licenci nebo snad i předplatné.
Začínáme
Po stažení aplikace by se po spuštění měla na ploše objevit svislý pruh tlačítek.
Odtud můžete procházet výchozí šablony nebo dokonce pěknou galerii uživatelsky zadaných šablon, ale ty už mají hodně práce, takže je lepší pro účely učení začít od nuly.
Kliknutím na tlačítko „Vytvořit nový“ otevřete poměrně velkou galerii možných velikostí dokumentů. Odtud přejděte na „Blank for Screen“ a vyberte něco ve složce „Browser Sizes“. Vybral jsem 960 × 550.
Seznamte se s Římem: Rozhraní
Když se poprvé podíváte na rozhraní Říma, vypadá to jako velmi zjednodušená verze Photoshopu. Spíše než nekonečné moře palet je tu jen pár. Ve skutečnosti by se mohlo zdát příliš málo. Důvodem je, že se zdá, že Adobe experimentuje s některými novými nápady, které vám ukážou pouze to, co musíte vidět, když to potřebujete vidět, místo aby vám dávaly celou enchiladu najednou.
Výše uvedený obrázek ukazuje, jak je holá obrazovka porovnávána s tím, na co jsme zvyklí v sadě Creative Suite. Když se ponoříme do našeho jednoduchého projektu, podrobněji se podíváme na každou část níže.
Povlečení na postel
Web, který budeme stavět, bude mít několik stránek. Řím na ně odkazuje jako na „Tabulky“ a zobrazuje je vlevo nahoře s náhledy miniatur.
První věcí, kterou chceme udělat, je vytvořit „hlavní list“. To nám umožní nastavit několik základních položek, které se zobrazí na každé stránce. Spíše než ruční vkládání položek na každý list, budou položky v hlavním listu automaticky přeneseny na vaše ostatní listy. Zpočátku to může být matoucí, protože na listu často uvidíte prvek, který podle všeho nemůžete upravovat. Důvodem je, že ačkoli se položka může na tomto listu objevit, je to hlavní prvek, a proto je před úpravou nutné vybrat hlavní list.
Chcete-li vytvořit hlavní list, klikněte na „Zobrazit hlavní listy“ v nabídce „Zobrazit“. To by mělo rozdělit nabídku listů do dvou částí: Listy a Hlavní listy. Kliknutím na tlačítko plus plus přidáte několik pravidelných listů navíc. Vedle miniatury listu je malá ikona Říma, uvidíte tyto roztroušené po celém rozhraní, což znamená, že je zde skryté kontextové menu.
Pomocí této malé rozbalovací nabídky můžete pojmenovat své listy Domovská stránka, O aplikaci, Portfolio a Kontakt.
Navigační nabídka
Protože to udržujeme jako jednoduchý úvod do aplikace, můžeme předvádět mnoho základních funkcí vytvořením navigačního menu. Chcete-li začít, uchopte textový nástroj a nakreslete pole. Poté zadejte „Home“ a pomocí níže zobrazené nabídky vyberte požadované písmo.
Tady opravdu vidíte tu magii menu v akci. Je tu spousta možností nabídky, každá se sadou podnabídek. To, co získáte, je spousta funkcí bez všech nepořádků. Určitě to trvá trochu zvyknout si a může to být časově náročné, ale jakmile zjistíte, že to není tak špatné. Moc se mi líbí malé posuvníky, které lze použít k úpravě různých vlastností, jako je velikost písma.
Jakmile zjistíte velikost a písmo, přejděte dolů do nabídky „Odkaz“ a nastavte odkaz na list „Domů“.
Tím se automaticky změní vzhled odkazu na modrou s podtržením. Protože ani jedno z nich nechceme, musíme to opravit. Změna barvy zpět na černou je dostatečně snadná, ale podtržení bylo obtížnější najít. Tato možnost se nachází v níže uvedené nabídce „Další možnosti znaků“.
Hoverův efekt
Dále chceme změnit vzhled odkazu, když se na něj kurzor pohybuje kurzorem. To není úplně intuitivní proces a trvalo mi několik minut, než jsem na to přišel.
S vybraným textovým polem přejděte v nabídce „Upřesnit“ na „Nastavení události“ a aktivujte „Standardní události“.
Nyní byste měli mít v hlavní nabídce možnost „Události“. Odtud přejděte na „Vstup myši“ a „Nastavit vlastnost“. Dále vyberte textový objekt a nastavte vlastnost na Krytí. Nakonec nastavte hodnotu na 50%.
Tím se ztlumí text na 50% původní neprůhlednosti, když se nad ním někdo vznáší. Chtěl bych jednoduše nastavit barvu, ale tato možnost se nezdá být v nabídce událostí.
Problém, na který nyní narazíme, je, že text změní barvu na Mouse Enter, ale zůstane tak trvale. Abychom to vyřešili, musíme přidat další událost na Mouse Exit, která nastaví krytí zpět na 100%. Viz obrázek níže pro informaci.
Duplikování odkazu na domovskou stránku
Nyní, když máme náš první odkaz nastaven přesně tak, jak chceme, zkopírujte ho a vložte třikrát, abyste vytvořili odkazy About, Portfolio and Contact. Nezapomeňte, že budete muset vybrat text pro každý z nich, pak jít a změnit odkazy tak, aby odkazovaly na příslušné listy.
Budete také chtít objekty distribuovat svisle, abyste se ujistili, že jsou rozloženy rovnoměrně. Chcete-li to provést, vyberte všechna textová pole a přejděte do nabídky Zarovnat.
Náhled vaší práce
Chcete-li zjistit, zda vaše navigační nabídka funguje správně, klikněte na malé tlačítko monitoru s tlačítkem přehrávání v horní části obrazovky. To by vám mělo poskytnout živý náhled na váš web v akci.
Umístěte ukazatel myši na odkazy, abyste se ujistili, že fungují, a kliknutím na ikonu zkontrolujte, zda se list mění.
Paleta Objects
Nyní, když máte na stránce několik prvků, pojďme se podívat na paletu Objects. Je to ekvivalent k paletě Vrstvy, na kterou jste zvyklí v jiných aplikacích, a je to v podstatě pouze interaktivní seznam všech prvků na stránce.
Všimněte si, že je to mnohem jednodušší než paleta vrstev Photoshopu. Neexistuje maskování, efekty vrstvy atd.
Dokončení hlavního listu
Protože každé dobré minimalistické místo má logo klišé kruhu, naše jednoduše nemůže zůstat bez jednoho. Zesměšnění jednoho vám rychle poskytne nástroj pro tvarování. Všimněte si, že tvary lze zcela změnit, aniž by došlo k degradaci obrazu. Řím je dokonale vhodný pro práci s vektorovými i rastrovými objekty.
A tím jsme skončili s naším Master listem. Tyto prvky se objeví na každé stránce bez dalšího úsilí.
Dokončení webu a export
Jak jsem již zmínil, navigace nám umožnila pokrýt většinu funkcí, které jsem chtěl předvést. Nastavili jsme odkazy, umístili a distribuovali objekty a vytvořili efekty přechodu.
Odtud byste si měli hrát sami a dokončit další stránky. Zkuste vložit obrázek, pracovat s odstavci textu a možná dokonce vytvořit mřížku. Před přidáním obsahu nezapomeňte vybrat příslušný list, abyste jej nepřidávali do hlavního listu.
Až web dokončíte, máte dvě základní možnosti jeho exportu. První je jako místo v Římě. Tím se váš web nahraje na server hostovaný společností Adobe pomocí vašeho Adobe ID (prozatím zdarma). Tímto způsobem však s tím nemůžete nic dělat, takže raději exportuji do souboru SWF a vyberu možnost vytvoření souboru HTML.
Tím získáte živě fungující webovou stránku, kterou jste vytvořili sami, bez kódu.
Moje myšlenky na Řím
Nyní přichází část, o kterou vás opravdu zajímá, můžete použít Řím pro skutečné projekty? Abychom mohli odpovědět na tuto otázku, podívejme se na výhody a nevýhody.
Nejprve se podívejme na pozitivní stránku. Řím je inovativní WYSIWYG, který není v žádném případě dokonalý, ale cítí se docela leštěný a silný. Křivka učení je mnohem menší než aplikace CS a určitě by měla oslovit kohokoli zastrašeného touto sadou. Dále dosahuje stále iluzivního cíle, kterým je umožnit osobám, které nejsou vývojáři, aby skutečně vytvořily fungující webovou stránku bez jediného řádku kódu.
Navzdory těmto výhodám však nevidím, že někdy používám Řím v profesionálním kontextu pro webové projekty. Největší překážkou pro mě je to, že je tak závislá na Flashi. Nebudu se pustit do Flash-bashing chvástání, ale je to prostě nepraktické použití technologie, ať už ji milujete nebo nenávidíte. Stránky, které jsme právě vytvořili, obsahovaly pouze několik odkazů a obrázků. Neexistuje absolutně žádný důvod, proč by výsledné soubory měly být pouze čisté HTML a CSS. Dokážu pochopit, že Adobe chce zabudovat podporu Flash, ale netvrdím, že mohu pomocí tohoto nástroje vytvářet webové stránky, pokud nemáte ani možnost pro základní webový výstup.
Mějte na paměti, že tento článek se díval na Řím pouze z webového hlediska. Může to být stále skvělé pro vývoj tiskových materiálů a interaktivních PDF. Ve skutečnosti je to vlastně opravdu skvělý nástroj.
Závěr
Abychom to shrnuli, pokud jste zcela cizí vývojáři webu a potřebujete si vytvořit rychlý web sami, aniž byste si najali někoho nebo si přečetli 15 knih, podívejte se na Řím. Je docela snadné vyzvednout a spustit bez ohledu na to, jaká je vaše úroveň odbornosti.
Pokud jste však na trhu pro robustní a uživatelsky přívětivý WYSIWYG, který ve skutečnosti vytváří webové stránky na profesionální úrovni, podívejte se do našeho tutoriálu na Flux 3. Pokud rozumíte CSS, Flux je zabijácká aplikace a nenašel jsem žádného hodného soupeře.
Zanechte komentář níže a dejte nám vědět, co si myslíte o projektu Rome. Co udělal Adobe v tomto experimentu? Co udělali špatně? Chceme od tebe slyšet!
