Macromedia Studio 8 – nová verze profesionálních nástrojů pro tvorbu webu

Macromedia Studio 8 – nová verze profesionálních nástrojů pro tvorbu webu Macromedia Studio je jeden z nejlepších (osobně si myslím, že přímo nejlepší) vývojových prostředků pro tvorbu webových stránek. Na profesionální úrovni v něm připravíte grafiku pro web (Fireworks), vytvoříte stránky (Dreamweaver), doplníte je o flashové animace či aplikace (Flash) a poté je můžete i snadno aktualizovat (Contribute). Od půlky srpna je v prodeji jeho nová – již osmá – verze, které se v následující recenzi podíváme na zoubek.

Už při zběžném pohledu na krabici nového studia zaregistrujete první novinku: místo Freehandu je zde Contribute 3 (program na snadnou aktualizaci obsahu webových stránek) a Flash Paper 2 (slouží k vytváření swf a pdf souborů z libovolných dokumentů).

Instalace celého studia mě překvapila svými nároky na místo na disku C (300 MB jí bylo málo), musel jsem místo kompletní instalace celého balíku postupně nainstalovat jednotlivé jeho programy sám.

Fireworks

Popis novinek začneme polehoučku u grafického programu Fireworks, což je program pro tvorbu webové grafiky – obsahuje nástroje pro výrobu animovaných GIFů, optimalizaci obrázků, jejich rozřezání a složení pomocí HTML. Ovšem jeho možnosti nekončí u obrázků – snadno si přímo v něm nakreslíte a vyklikáte použitelné komponenty pro vaše stránky – rozbalovací menu, tlačítka a další. JavaScriptový kód těchto dynamických komponent doznal patřičných změn – výsledkem jsou kvalitnější, kompatibilnější a přístupnější skripty.

Pracovní plocha Fireworks 8 – dole je vidět nabídka filtrů a módů překrytí

Pracovní plocha Fireworks 8 – dole je vidět nabídka filtrů a módů překrytí

Nevím, zda za další novinkou stojí sloučení Macromedie s firmou Adobe, ale každopádně od verze 8 je konečně k dispozici 26 vykreslovacích módů (multiply, screen, overlay,…)

Samozřejmostí je také těsnější spolupráce s Dreamweaverem a Flashem, podpora nových souborových formátů, drobné změny v prostředí (přidání nových paletek pro práci s obrázky, zapisování speciálních znaků), dávkové zpracování souborů obsahuje nové funkce (například výběry, rotaci, zostření, rozostření,…) a další.

DreamWeaver

Další součást Studia je Dreamweaver – profesionální editor HTML stránek který disponuje dvěmi základními módy editace: klasický způsob přímého editování HTML kódu a WYSIWYG editor, kdy vidíte, jak stránka skutečně vypadá. Přičemž tyto dva módy jsou plně propojené a můžete mezi nimi libovolně přepínat.

Pracovní plocha Dreamveawru 8 – právě jsou zapnuty opa editační módy – kód je nahoře, WYSIWYG mód je vidět pod ním. Vpravo nahoře panel s CSS vlastnostmi.

Pracovní plocha Dreamveawru 8 – právě jsou zapnuty opa editační módy – kód je nahoře, WYSIWYG mód je vidět pod ním. Vpravo nahoře panel s CSS vlastnostmi

Kaskádové styly

Mezi očekávané novinky osmičkové verze bezesporu patří větší podpora kaskádových stylů. Můžu vám prozradit, že očekávání bylo 100% splněno a vlastně i překonáno. Na překonání mají zásluhu zejména nastavitelné vodící linky a lupa ke zvětšování – 6400% zvětšení bude snad dostačující (škoda jen, že klávesové zkratky jsou opět jiné, než je zvykem třeba u AdobePhotoshop, ale naštěstí se všechny dají změnit a přenastavit). Nová verze je také konečně schopná správně zobrazit výsledný vzhled i u velmi složitých konstrukcí kaskádových stylů (i když i tady se nějaké drobné nedostatky najdou).

Zpátky ke stylům. Kliknete-li myší na hranici jakékoliv elementu, vyznačí se barevně jeho obrys a šrafováním se označí jeho vnitřní výplň – padding. Navíc ponecháte-li nad ním ukazatel, zobrazí se v nápovědném okénku (v hintu) některé vlastnosti jeho stylu (ID, třída, název značky, rozměry, pozice, plavání a další).

Stejný dokument, jen jiný způsob zobrazování - barevné vybarvení pozadí jednotlivých elementů a zvýraznění okrajů - dále je vidět nápovědné okénko zobrazující CSS vlastnosti zvoleného prvku.

Stejný dokument, jen jiný způsob zobrazování (barevné vybarvení pozadí jednotlivých elementů a zvýraznění okrajů), dále je vidět nápovědné okénko zobrazující CSS vlastnosti zvoleného prvku

Všechna pravidla stylů se nachází v jednom jediném panelu – CSS. Zde je možné zobrazovat buď úplně všechny definice, nebo jen definice vázané k aktuálně vybranému elementu – a to včetně zděděných vlastností, u kterých je napsáno, v jakém souboru a konkrétním pravidle byly definovány! Myslím, že tato možnost značně ulehčí webdesignérům život při hledání různých chybiček v layoutu. V dalším módu je možné zobrazit celou kaskádu stylů vázaných k jednotlivým rodičovským elementům zvoleného prvku stránky. A pokud už nevíte, jak do sebe jednotlivé prvky (povětšinou DIVy) zapadají, není nic jednoduššího, než si zapnout jejich barevné vybarvování – každý prvek pak bude vybarven náhodnou barvou.

Dalším příjemným a zároveň užitečným zpestřením je emulace média (view/style rendering v hlavní nabídce), nebo chcete-li cílového zařízení, ve kterém se stránky u uživatele zobrazují – můžete se tak snadno v prostředí Dreamweavru „přepnout na tiskárnu“ a ladit vzhled stránky pro tisk (obdobně pro handheld, tv, screen,…) nebo úplně styly vypnout.

Editace kódu

V okně se zdrojovým kódem stránky (což je druhý možný mód editace – viz úvodní odstavec) se v levé části objevila lišta s nástroji. Mezi nejlepší novinky asi patří možnost „balení“ a „rozbalování“ sbaleného kódu – stačí označit jakoukoliv část textu a jedním tlačítkem ji zabalíte do jediného graficky zvýrazněného řádku (pokud na něj najedete myší, zobrazí se celý jeho obsah v nápovědném okýnku u kurzoru), k rozbalení slouží jiná ikonka, případně postačí poklepání na tento řádek. Stav zabalení si program pamatuje i po ukončení aplikace.

Mód editace zdrojového kódu se zabalenými částmi - obsah jedné zabalené části ze zobrazuje po najetí myši ve žlutém okénku.

Mód editace zdrojového kódu se zabalenými částmi (obsah jedné zabalené části ze zobrazuje po najetí myši ve žlutém okénku)

Většina dalších funkcí v uvedeném novém panelu již byla i v dřívějších verzích Dreamweaveru, nyní jsou tyto funkce pouze vytaženy na snadno dostupné místo (indentace, hledání párové závorky, označování rodičovského prvku, komentáře, formátování zdrojového kódu, atd.).

Spolupráce s Microsoftem

Opět se vylepšil import dat z aplikací Microsoft Office. Nyní můžete nastavit, co vše se z původního textu má přenášet a aplikovat: pouze text, text se strukturou (odstavce, tabulky, výčty,…), text se strukturou a základním formátováním (tučné písmo, italika) nebo plné formátování (styly).

Možnosti importu dat z MS Office formátů.

Možnosti importu dat z MS Office formátů

XML a XSLT

Dreamweaver 8 umožňuje vizuálně pracovat s datovými XML zdroji. K tomu slouží XSLT šablony, které lze v prostředí snadno naklikat – vytvoříte si normální stránku (nebo chcete-li XSLT šablonu) a připravíte si v ní místa, kde se budou zobrazovat data z XML souboru, poté ji jen propojíte s XML zdrojem a do připravených míst metodou táhni a pusť přetáhnete jednotlivé uzly ze struktury XML, případně ještě přidáte oblasti opakování a podmínky. Velmi snadno tak na své stránky dostanete data z XML souborů – například novinky z RSS kanálů.

Přístupnost

V poslední době se čím dál více mluví o přístupnosti webových stránek (a to je jen dobře). Dreamweaver samozřejmě nezůstává pozadu a snaží se, aby byl jeho výstup co nejvíce přístupný. Slouží k tomu třeba dialog, který se automaticky objeví při vkládání obrázku do stránky a vybízí uživatele k zadání atributů ALT a LONGDESC, ale mnohem více k tomu přispívá možnost validace stránek proti směrnicím WCAG/W3C priority 2 s popisem nalezených chyb a propojením s nápovědou o přístupnosti (od UsableNet Inc.).

Pracovní plocha

Při tvorbě webu je občas výhodnější pracovat ve WYSIWYG módu a jindy je zase lepší mít co největší editační okno se zdrojovým kódem a otevřenou nápovědou. Vývojáři si to konečně uvědomili a nabídli možnost ukládání a vytváření uživatelských profilů obsahujících rozložení panelů a oken pracovní plochy, mezi nimiž lze snadno přepínat.

Vlastní nastavení pracovní plochy

Vlastní nastavení pracovní plochy

Další drobnosti

Pracujete-li na rozsáhlejších stránkách, oceníte možnost přenosu souborů na pozadí. O výsledku –úspěšného/ne­úspěšného přenesení jednotlivých souborů – se dozvíte z logu. Pro synchronizaci je možné použít produkty třetích stran (například výborné Araxis Merge, P4Merge, WinMerge). Taktéž je vylepšena podpora týmové práce (rozšířené funkce check-in / check-out zabraňující přepisování souborů, pokud na projektu pracuje více lidí). Referenční příručka (Help/Reference) obsahuje nyní více jazyků (XML, XSLT), jiné byly aktualizovány (ASP, JSP). Taktéž se podporují nové technologie (ColdFusion MX 7, PHP 5, Flash Video).

Flash

Kdo by neznal animované flashové bannery, multimediální flashové stránky či celé aplikace a multimediální cd-romy. Všechny uvedené produkty se vytváří ve vývojovém nástroji firmy Macromedia. Flash v sobě snadno spojuje programování, grafiku, animace a interakci s uživatelem.

Flash se stejně jako v minulé verzi distribuuje ve dvou verzích: Basic a Professional. Ořezaná verze Basic slouží k vytváření jednodušších animací, verze Professional nabízí navíc efekty, módy překrytí, ovládání rychlosti přehrávání animace, datové komponenty, podporu vývoje pro mobilní zařízení, větší podpora videa a další.

Pracovní plocha Flashe 8, v dolní části je dialog pro přidávání a nastavování efektů.

Pracovní plocha Flashe 8, v dolní části je dialog pro přidávání a nastavování efektů

Při letmém pohledu na pracovní plochu Flashe 8 nejde vidět žádná změna. Snad jen nové tlačítko pro nastavení zařízení pro který je generovaný výsledný .swf soubor (k tomu se ještě později vrátím) a záložek „Parameters“ a „Filters“ na panelu vlastností. Obecně záložky představují novou vychytávku, která vám pomůže uspořádat si lépe pracovní prostor aplikace – každý panel můžete pomocí záložek spojit s libovolným jiným panelem. A samozřejmě stejně jako v Dreamweavrovi si můžete uložit tyto své rozložení plochy a později načíst nebo mezi nimi rychle přepínat.

Filtry a vykreslovací módy

Již dříve zmíněná záložka „Filters“ obsahuje 7 efektů, které lze aplikovat na text, movie klip (včetně videa!) nebo tlačítko: vržení stínu, rozmazání, záře, úkos, záře s gradientem, úkos s gradientem a úprava barev (světlost, kontrast, saturace, odstín). A obdobně jako ve Fireworks 8 jsou i zde nové vykreslovací módy – tedy způsoby jak jsou kombinovány překrývající se obrázky (darken, lighten, multiplay, overlay, hard light, invert,…). Tyto módy lze použít pouze na movie klipy.

Průběh animace pod kontrolou

Flash 8 dovoluje lépe ovládat tween animace – v předchozí verzi jste mohli ovlivnit zrychlení zpomalené tween animace pouze jedním parametrem (jeho hodnota byla +100 až –100), nyní již přímo definujete křivku podle které se bude rychlost animace řídit. Přičemž pro každý typ transformace (pozice, rotace, velikost, barva, filtry) můžete nadefinovat vlastní – nezávislou křivku.

Dialog pro ovládání průběhu tween animace.

Dialog pro ovládání průběhu tween animace

Flash video

Jednou z největších novinek osmé verze je nový video kodek a video encoder, díky nímž lze vytvářet (a to i dávkově pomocí samostatné aplikce – Macromedia Flash 8 Viedo Encoder) z běžných video formátů FLV video (Flash video). Postup je velmi jednoduchý: vybere se zdrojový soubor s videem, určí se zda se bude výsledné video streemovat ze serveru, nebo zda jej bude nutné nejdříve stáhnout na lokální disk, vybere se kodek, který se použije a velikost komprese (kvalita výsledného videa) a to buď nový On2 VP6 kodek určený pouze pro nový přehrávač Flash Player 8 a nebo starší a méně kvalitní Sorenson Spark, který lze použít i ve starším přehrávači Flash Player 7. Při převodu lze video oříznout jen na určitý výsek obrazu a nebo i zkrátit (useknout kus začátku, konce). Výhodou nového kodeku je podstatně vyšší kvalita a komprese výsledku a také podpora alfakanálu – průhlednosti (skze video lze vidět pozadí).

Importování videa – překonvertování + základní stříhačské úpravy.

Importování videa – překonvertování + základní stříhačské úpravy

Mobily

Stejně jako u Dremweavru došlo k posílení podpory mobilních zařízení – Flash umožňuje vývoj aplikací a animací pro přehrávač Flash Lite, který je v mobilech a jiných malých zařízeních. Pomocí Flash Lite emulátoru můžete testovat jednotlivá zařízení pro která vyvíjíte – ty si snadno vyberete z bohatého seznamu (a další lze stahovat z internetu).

Výběr zařízení pro které se bude vyvíjet.

Výběr zařízení pro které se bude vyvíjet

Action Script

Méně odborné uživatele skriptování ve Flashi určitě potěší zpráva, že se vrátil jednodušší způsob zápisu skriptů (dříve tzv. „normal mode“), kdy si kód vyklikáte myší ze stromové struktury objektů a funkcí – nyní se jmenuje Script Assist. Jinak je samozřejmě k dispozici mnoho nových objektů, vlastností a metod (to souvisí i s novými funkcemi a možnostmi programu, jako jsou filtry, způsoby vykreslování, cachování bitmap) a i nápověda obsahuje mnohem více informací, ukázek, je propracovanější a použitelnější, než tomu bylo dříve.

Další novinky

Jako každá verze i tato s sebou přináší několik drobnějších ale rozhodně ne nedůležitých změn a novinek: Zvětšená plocha kolem scény (konečně!), což je přínosné pro odkládání objektů a hlavně pro animace velkých objektů, které se tam dříve nevešly – například dlouhé texty projíždějící scénou. Kešování bitmap, které lze zapnout pro movie clip – změní se při přehrávání z vektorového objektu na bitmapový, čímž značně sníží nároky na výkon. Nový mód kreslení, kdy nedochází k interakci mezi dvěmi objekty. Zlepšení čitelnosti textů ve flashi – je možné nastavovat jeho vykreslovací parametry (ostrost a tloušťky) a nebo použít jeden z přednastavených režimů.

Flash Player 8

Flash 8 díky novinkám, jako jsou filtry, efekty a módy překrytí nabízí mnoho nových možností pro tvorbu zcela originálních a vskutku efektních animací. Jedinou drobnou nevýhodu vidím v tom, že tyto efekty nezobrazíte ve starším přehrávači, ale jen v novém Flash Playeru8, který není v současné době moc rozšířen, ale to se časem určitě poddá.

Shrnutí

Celkově mezi hlavní novinky patří aplikování způsobů překrytí, vyšší podpora přístupnosti, orientace na mobilní zařízení a větší propojení jednotlivých aplikací studia. Připadá mi, že aplikace z nového balíku Macromedie jsou svižnější než tomu bylo v předchozí verzi a že prostředí se konečně chová a zobrazuje tak jak by mělo (mám na mysli zejména Dreamweaver a jeho rendering CSS).

Hodnocení

Pro: Podpora stylů, nové efekty, filtry, flash video
Proti: Zatím malé rozšíření Flash Playeru 8
Závěr: Poměrně hodně vylepšený balík profesionálních nástrojů pro tvorbu webu

Poměr ceny a výkonu: 3/5
Technologický přínos: 4/5
Uživatelská přívětivost: 5/5

Cena: 30 470 Kč bez DPH
Kontakt: http://macrome­dia.com/, http://www.di­gitalmedia.cz/ma­cromedia/

Požadavky na systém

Windows:

Počítač: 800 MHz Intel Pentium III
Paměť: 256 MB RAM
Místo na disku: 1.8 GB
Operační systém: Windows 2000/XP

Macintosh:

Počítač: 600 MHz PowerPC G3
Paměť: 256 MB RAM
Místo na disku: 1.2 GB
Operační systém: Mac OS X 10.3/10.4

Komentáře

1
31 leden 2006, 11:34

Tolik hezkých programů a tak málo peněz..

 
2
31 leden 2006, 13:37

Tak nevím jestli zrovna cca 30000,– Kč je málo. Zvláště filozofové to měli vždycky s penězi těžké, tak by mě zajímalo, jakto že dnes mají na takový software :)

Já se zatím spokojím s PSPad, ale kdyby náhodou někdo mi chtěl poskytnout to potěšení pracovat s Macromedia Studio 8, nejspíše se bránit nebudu.

 
3
31 leden 2006, 15:13

[2] Osobně také v poslední době používám spíše rkEdit, takže bez Dreamweavru se snadno obejdu, ale v čem chcete vytvářet Flash?

 
4
kk
28 červen 2006, 17:34

heh na flash je programu dost a dost…

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce