Adobe Dreamweaver CS5 HTML5 Pack: bezplatné rozšíření webového editoru - Grafika.cz - vše o počítačové grafice

31. května 2010, 00.00 | Finální specifikace HTML 5 jsou sice stále v nedohlednu, už nyní je však zajímavé sledovat, což všechno vlastně v budoucnu HTML 5 nabídne. Obecně nejvíce zmiňovanou vlastností HTML 5 je podpora multimediálních značek v souvislosti s technologiemi obsaženými už delší dobu v Adobe Flashi. Společnost Adobe případnou konkurencí HTML 5 versus Flash zatím příliš neřeší, přičemž na webu Adobe Labs je už nyní k dispozici doplněk rozšiřující Adobe Dreamweaver CS5 o podporu některých z budoucích vlastností HTML 5.

HTML 5 je a vlastně není. Přesně tak by mohl v současné době začínat každý článek o nových specifikacích a vlastnostech HTML 5, jehož koncepčním úkolem je mimo jiné zjednodušit používání multimediálních prvků na webu a také přinést uživatelům nové možnosti v oblasti funkčnosti offline aplikací ve webových prohlížečích a strukturování obsahu webových stránek. HTML 5 ovšem přináší i řadu jiných (z jistého hlediska možná trochu kontroverzních) značek a funkcí, které však jsou a ještě hodně dlouho budou pouze ve stádiu návrhů, prověřování, připomínkování a finálních specifikací HTML 5 se tak (pokud se něco dramaticky nezmění) zjevně dočkáme až za mnoho let.

S HTML 5 si (podotýkám hlavně v budoucnu) užijeme i trochu legrace, neboť mimo nových HTML značek definujících strukturu stránky, speciálních úložišť formou polí, relačních databází a zmíněné podpory offline aplikací (ukládajících si pomocí cache manifest seznamů data do lokálního úložiště) se v poslední době asi nejvíce diskutuje o podpoře multimédií v rámci nových značek <video> a <audio>, které mohou v určitých aspektech nahradit stávající technologie Flash či Silverlight.

Zatímco Microsoft ohlásil podporu HTML 5 v příštích verzích Internet Exploreru a Safari, Chrome či Opera HTML 5 se s různými úspěchy snaží HTML 5 podporovat již nyní, Adobe v pozici fyzického vlastníka a vývojářského guru platformy Flash by zatím mohl HTML 5 ignorovat. Nic takového se ale nekoná a majitelé Adobe Dreamweaveru CS5 si u Adobe Labs mohou stáhnout doplněk Adobe Dreamweaver CS5 HTML5 Pack, který rozšiřuje editor především o podporu značek a vlastností HTML 5. Z výše uvedených faktů vyplývá, že se zatím jedná pouze o technologické preview, kterým extenze HTML5 Pack pravděpodobně zůstane ještě hodně dlouho, nicméně její obsah můžeme prozkoumat už nyní.

Adobe Dreamweaver CS5 HTML5 Pack - doplněk rozšíří především knihovnu HTML tagů o příslušné nové značky HTML 5

Adobe Dreamweaver CS5 HTML5 Pack - mezi automatizovanými převodními funkcemi editoru najdeme nově podporu HTML 5

Nové značky HTML 5 a code hinting v Adobe Dreamweaveru

Strukturu HTML 5 dokumentů si nově můžete v Adobe Dreamweaveru CS5 s pomocí extenze HTML5 Pack zjednodušit či spíše rozvrhnout prostřednictvím nových značek section, article, aside, header, footer a nav, které se starají o sémantickou charakteristiku obsahu stránky. Pokud uvedené značky použijete správně, mělo by být jasné, co přesně je například hlavička a patičku dokumentu, kde jde v těle dokumentu článek, kde jsou navigační prvky či postranní bloky apod. Velký význam budou mít (v budoucnu) tyto nové HTML 5 tagy pro vyhledávače či aplikace manipulujících s obsahem webových stránek pro různé účely.

Součástí extenze HTML5 Pack pro Adobe Dreamweaver CS5 jsou také dvě jednoduché HTML 5 šablony s novou úvodní specifikací typu dokumentu bez zápisů o verzi a DTD specifikacích a s několika dalšími novými „ukázkovými“ HTML značkami pro HTML 5. Šablony se integrují do stávajících předvoleb Dreamweaveru, ve kterém najdeme i (zatím nepříliš funkční) konverzi obsahu HTML dokumentů do HTML 5.

Adobe Dreamweaver CS5 HTML5 Pack - samozřejmostí je také doplnění barevně odlišení syntaxe pro tagy/prvky HTML 5

Adobe Dreamweaver CS5 HTML5 Pack - výběr HTML 5 značky pro její vložení do zdrojového kódu webové stránky

Adobe Dreamweaver CS5 HTML5 Pack - součástí extenze jsou i dvě šablony částečně optimalizované pro HTML 5 a nová volba výchozího typu HTML dokumentu

HTML5 Pack přidá do Adobe Dreamweaveru CS5 také patřičné zvýraznění syntaxe HTML 5 tagů včetně tzv. code hintingu (i pro všechny nové vlastnosti stávajících HTML značek)a také průvodní podporu CSS3, kterou doplňuje ještě nezbytné rozšíření WebKitu pro WYSIWYG editor Design View a živý náhled obsahu webové stránky Live View zohledňující nyní některé z podporovaných vlastností CSS3. Code hinting nově funguje i u kaskádových stylů v rámci návrhů specifikací CSS3, konkrétně například u 2D/3D transformací, pozadí, animací a nastavení vlastností okrajů objektů, dále u textů, přechodových efektů, vícesloupcového layoutu, media queries aj.

Další novinkou obsaženou v doplňku HTML5 Pack je nový panel Multiscreen Preview, který umí zobrazovat tři náhledy shodné webové stránky v různých rozlišeních s podporou Media Query. Pro každý z reálných náhledů webové stránky si tedy můžete zvolit požadovanou skupinu kaskádových stylů a jednoduše si tak otestovat vzhled stránky například pro různá cílová média či zařízení. Propojení s Adobe Device Central zatím Multiscreen Preview nenabízí.

Adobe Dreamweaver CS5 HTML5 Pack - Multiscreen preview pro jednoduchý náhled webové stránky ve více rozlišeních a nezávislá konfigurace jejich zdrojových kaskádových stylů

Časem bude lépe…

Zatím od HTML 5 mnoho nečekejme. Od smysluplného využití HTML 5 nás dělí především zdlouhavá finální specifikace značek v HTML 5, s nimi spojených kaskádových stylů skupiny CSS3 a pochopitelně také podpora HTML 5 ve webových prohlížečích. Adobe se s Flashem může zatím hezky bavit, neboť animační „prvky“ související s HTML 5 jsou spíše k smíchu a podpora videa v HTML 5 naráží například na nejednotnost využívaných kodeků (Ogg Theora vs. H.264). Přesto všechno vidím funkce HTML 5 jako vcelku nadějné rozšíření současných schopností a celkových možností jazyka HTML, které bude v budoucnu možné využívat i v Adobe Dreamweaveru.