nav line

Základy přípravy HTML5 bannerů

Jak jednoduše a bez hlubších znalostí jazyka HTML5 vytvořit dynamický banner pro svou společnost?

Bezstarostná léta, kdy kreativní oddělení digitálních a mediálních agentur, grafických studií a specializovaných oddělení klientů využívala pro tvorbu dynamických webových bannerů a reklam technologii Adobe Flash, jsou nenávratně pryč a soumrak nad touto technologií již značně pokročil. Můžeme se dohadovat a diskutovat o tom, čím byl samotný úpadek této progresivní technologie způsoben (možnými důvody jsou např. nárůst mobilních zařízení nepodporujících tuto technologii, bezpečnostní rizika, atd.), ale jedno je jisté, je a bude potřeba najít adekvátní náhradu. V současné době je žhavým kandidátem a potenciálně silným nastupujícím řešením na poli bannerové reklamy technologie HTML5, byť i ona se potýká s řadou počátečních problému. Nicméně potenciál, který nám technologie HTML5 nabízí, je velký.

HTML5 představuje kombinaci již dříve známých jazyků HTML, CSS a JS s vylepšenými vlastnostmi, které přináší zásadní novinky a změny. Můžeme se spolehnout i na poměrně velkou podporu v nejpoužívanějších webových prohlížečích (Internet Explorer, Chrome, Firefox, Safari), a proto nám nic nebrání v současné době technologii HTML5 s drobnými pravidly a omezeními začít používat.

Ve výčtu všemožných nových nástrojů – ať už jsou to svébytné desktopové programy, nebo webové aplikace, pomocí kterých lze vytvářet HTML5 bannery, jsme se rozhodli vybrat nejžhavějšího kandidáta Google Web Designer (GWD), jehož beta verzi nabízí Google ke stažení zdarma. Google nabízí i celou řadu podkladů a návodů k tomuto nástroji. Jelikož sám Google provozuje jeden z největších reklamních systémů, každý bude právem očekávat, že program bude odladěn tak, aby byly výstupy co možná nejkompatibilnější s reklamním systémem Google AdWords. Jak bylo řečeno, program je ale zatím ve své beta verzi, to znamená, že má také své mouchy. Na ty přijdete během práce nebo je vyčtete z příspěvků na fórech, kde se vývojáři často snaží zoufalým designérům pomoci vyřešit jejich případné problémy. K dispozici je tedy i tato omezená forma podpory.  

V GWD lze vytvářet nejen jednoduché bannery a animace, program nabízí i možnost práce se sofistikovanými responzivními funkcemi, které si jednoduše zvolíte během nastavování vytvářeného banneru. K výběru jsou tyto typy reklam: banner (obyčejný, případně animovaný banner), expandable (banner, který se při najetí myší zvětší) a interstitial (banner zobrazující se v mobilních aplikacích a hrách). Kromě toho lze v GWD teoreticky tvořit i jednoduché webové stránky, ale k tomu se program zatím moc nehodí. Další věc, kterou má designér možnost navolit a která napovídá o použitelnosti a univerzálnosti programu, je možnost volby prostředí, ve kterém se bude s bannerem pracovat (Doubleclick, AdMob, AdWords a univerzální non-Google ad). 

Možnosti práce s animacemi jsou poměrně omezené, což může vyhovovat začátečníkům. Zkušený animátor bude možná trochu zklamaný, je ale nutno podotknout, že funkcionalita byla přizpůsobena tomu, co HTML5 technologie stabilně nabízí a umí. 

Uživatele potěší předdefinované typy „easingů“ (nájezdů a dojezdů animací). Za zmínku určitě stojí i skutečnost, že program umí pracovat i s 3D objekty a nabízí i plno zajímavých komponent, které jednoduše stylem „drag and drop“ umístíte do svého banneru (tlačítka, gestures, swipable gallery, gallery navigation, carousel gallery, mapy, kalendář, streetview, atd.). 

Program jsme vyzkoušeli a došli k závěru, že je v tuto chvíli tím nejlepším, po čem může i docela nezkušený designér, animátor, webový frontendnář nebo třeba správce webu sáhnout. Alternativou by mohl být Adobe Edge Animate (AEA), který je součástí rodiny Creative Cloud. Program je poměrně sofistikovaný, více zaměřený na práci s animacemi než konkurenční nástroje. Výstup ovšem není tak uhlazený a kompaktní (kód HTML), jak by mohl být – GWD je v tomto případě efektivnější a úspornější. Navíc je oproti AEA k dispozici zdarma.

Ohodnoťte článek

Základy přípravy HTML5 bannerů

Diskuse

Jako základní přehled dobré, ale určitě by to chtělo napsat ještě pokračování s konkrétními tipy a triky pro tvorbu HTML5 bannerů. Těchto informací je na českém internetu jako šafránu.

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících