Adobe Muse: projekt nového vizuálního editoru webových stránek - Grafika.cz - vše o počítačové grafice

19. srpna 2011, 00.00 | Pod kódovým názvem Adobe Muse se až doposud ukrýval projekt nového vizuálního editoru webových stránek, ve kterém vytváříte stránky podobně jako publikace v DTP aplikacích či jako objektovou grafiku v grafickém editoru. Adobe Muse kombinuje editační schopnosti Adobe InDesignu s některými funkcemi Fireworks/Dreamweaveru, ke kterým přidává mimo jiné třeba knihovnu interaktivních widgetů například pro obrazové galerie, slideshow, navigační menu či přehledy novinek.

Adobe Muse je kódový název projekt vizuálního editoru webových stránek, který umožňuje správu, tvorbu a editaci jednotlivých stránek v nadefinovaném websitu, vše přitom výhradně objektovou cestou v plném WYSIWYG režimu. Z hlediska grafického rozhraní aplikace a principům práce s objekty umísťovanými pochopitelně s přesností na jeden obrazový bod je Muse asi nejpříbuznější Adobe InDesign, Illustrator a částečně i třeba Fireworks a Dreamweaver.

O technologickou stránku Adobe Muse se v rámci platformy Adobe Flash stará prostředí Adobe AIR, pod kterým může Muse běžet na lokálním disku či (třeba v budoucnu) jako online cloudová služba. Jak je tedy zřejmé, je Muse vlastně Adobe AIR aplikace kombinující HTML, JavaScript a možnosti Flex/Flashe – k dispozici jsou zatím verze editoru pro Windows a Mac OS X.

Tvorba webových stránek stylem tvorby layoutu webů jako v DTP editorech není nijak nová myšlenka, ostatně v InDesignu a částečně i v Illustratoru už můžete jednoduchý web vytvořit. Adobe Muse má před sebou rozhodně ještě dlouhou a obtížnou cestu k reálnému využití, programu je však nutné přiznat, že přes svou relativní jednoduchost přinejmenším poskytuje hrubý nástin funkcí finální verze „DTP like“ webového editoru.

Vytvoření struktury websitu

Obsah webového serveru respektive jeho jednotlivých podstránek si v Muse jednoduše plánujete. Plánování sitemapy webu je stejně jako práce s celým editorem čistě vizuální a v podstatě spočívá ve vytvoření struktury stánek a jejich vzájemném propojení v editoru Plan, kde pracujete se stromovými diagramy stránek.

Samotné plánování stránek je přitom logicky založeno na vzorech stránek, opět je zde tedy příbuznost s InDesignem. Vzorů můžete mít několik – například pro obsah hlavní stránky, hlavičku, patičku, menu apod., přičemž každá na vzoru založená webová podstránka může mít samozřejmě svůj vlastní unikátní obsah a nadefinované oblasti ve vzoru se automaticky sdílí napříč celým webem.

Adobe Muse - plánování a propojování jednotlivých stránek v aktuálním websitu

Každá stránka má nastavitelné rozlišení s eventuálním zadáním počtu sloupců (a jejich rozestupů) pro text, nastavit lze také okraje stránky, favikonu a zapnout sdílené navigační prvky. Zadat můžete také metadata pro popis stránky, klíčová slova, titulek stránky apod. Mezi další společné nastavovací prvky pro celý web patří v Muse třeba základní barvy layoutu webu, odkazů, centrování prvků aj.

Publikování hotových websitů je možné na Adobe hostingu, nebo v běžném formátu HTML, který lze z Muse exportovat (momentálně tato funkce moc dobře nefunguje). Výstup z Muse je dle technické dokumentace optimalizovaný pro Internet Explorer 7/8/9, Firefox 4/5, Safari 5 a Chrome, o Opeře absolutně žádná zmínka – otázkou ovšem je, co si pod pojmem optimalizace vývojáři Muse vůbec představují.

Adobe Muse - vlastnosti stránky a websitu

Adobe Muse - export webu do HTML dokumentu

Adobe Muse - detaily některých z pracovních palet, knihovna interaktivních widgetů a ovládací menu programu

Práce s objekty, textem a widgety

V Adobe Muse pracujete s layoutem webových stránek podobně jako v InDesignu s layoutem publikací – využíváte tedy především rámečky, do kterých lze známou funkcí Place umístit grafický objekt, fotku či text. Okrajům a pozadí rámečků můžete nastavit libovolnou barvu, přechod, tloušťku čáry a také tři efekty – vržený stín, plastické okraje a efekt záření.

Grafické objekty lze z Muse odeslat k editaci do Adobe Photoshopu nebo Fireworks, layout webu se pak automaticky přizpůsobí provedeným úpravám. Při navrhování ozdobných či efektových nadpisů umí Muse převést písmo na obrázek s alternativním popiskem obrázku v HTML kódu.

Adobe Muse - prostředí editoru s minimalizovaným toolboxem

Adobe Muse - snadné úpravy textů ve WYSIWYG editoru

Adobe Muse - efektové funkce umí přidat objektům stín, plastický okraj nebo záření

Adobe Muse - náhled editovaného webu

Adobe Muse - natáčení, ořez a změny velikosti objektů fungují podobně jako v InDesignu

Adobe Muse - výběr barev a natočení importovaného bitmapového objektu

Usazení objektových prvků je možné přes vodicí mřížku, vodicí linky nebo zarovnávání objektů. Na poměry editorů webových stránek má Adobe Muse poměrně dobře navržené nástroje pro práci s texty včetně stylů pro znaky a odstavce s běžným formátováním. Opět je zde poměrně jasná analogie stylu práce s layoutem a styly publikací v InDesignu, a to včetně systému obtékání obrázků textem – samozřejmě pouze pro adekvátní funkce realizovatelné v kaskádových stylech.

Navigační prvky a tlačítka můžete v Muse vkládat do webu několik způsoby. Tím nejméně pohodlným je možnost přímého vložení HTML kódu do vytvořeného objektu, což se současně hodí k celé řadě jiných věcí. Tlačítka lze do stránek v Muse vložit dále jako PSD dokument s volitelnými vlastnostmi rollover efektů, tzn. lze vytvářet vícestavová tlačítka.

Posledním druhem navigačních prvků jsou předdefinované widgety pro několik typů menu, které lze interaktivně ovládat přímo v ploše stránky či ve vzorových stránkách. Widgetů nabízí aktuální preview Adope Muse ještě několik – jedná se především o různé druhy obrázkových galérií, slideshow a multifunkčních přepínatelných záložkových panelů, do kterých opět můžete přímo psát texty a vkládat další grafické objekty.

Adobe Muse - některé z editorem nabízených komponent webových stránek s jejich nastavitelnými vlastnostmi

Adobe Muse - vkládání HTML kódu do webové stránky

Adobe Muse - vestavěný jednoduchý asset manager

Adobe Muse - vkládání navigačních tlačítek importem PSD dokumentu

Kdy, jak za kolik?

První finální verze Adobe Muse by dle oficiálně dostupných informací Adobe Systems měla spatřit světlo světa (pravděpodobně pod jiným názvem) začátkem příštího roku. Aktuální betaverze editoru je zatím pouze v angličtině, po uvedení verze 1.0 postupně by se postupně měly objevit další jazykové lokalizace.

K hostingu a publikování webů vytvořených v Muse bude primárně sloužit služba Adobe Business Catalyst, v případě HTML exportu ale pochopitelně můžete použít i vlastní hosting. Je třeba dodat, že Adobe Muse nenabízí žádnou integraci s redakčními systémy, společnost Adobe ale výslovně nevylučuje, že další verze editoru budou nějaký CMS podporovat a může se prý (což je celkem logické) objevit i verze pro tablety a mobilní zařízení.

Editor Muse (radši ještě jednou znovu podotýkám, že finální produkt se může jmenovat úplně jinak) podle společnosti Adobe pravděpodobně nebude v prodeji jako samostatná aplikace, nýbrž bude uživatelům pronajímán jako služba na stanovené období – pochopitelně bez jakékoliv závislosti na dalších v článku zmíněných aplikacích jako je Photoshop, Fireworks či jiné aplikace z balíku Adobe Creative Suite.

Ve zveřejněných cenách najdeme například (opět evidentně pouze předpokládané) předplatné na jeden rok za 180 USD (tzn. 15 USD měsíčně) používání editoru, nebo jako klasické měsíční předplatné za 20 USD/měsíc. K uvedeným cenám si ještě musíte připočítat náklady na hosting, které jsou 9 USD měsíčně v případě služby balíčku Adobe Business Catalyst.