máme banner a z něj se čtou kliknutí. U jiných bannerů, jiných technických požadavků a tam se proklik čte jinak, teď se díváme na konkrétní příklad.

Kontejner s transparentem

V dalších lekcích vám řeknu, jak vytvořit banner na 100% šířku obrazovky s animací a jak vytvořit a připravit layout pro rozložení webu podle všech pravidel.

Soubory lekcí:

1. Hotové bannery na celou obrazovku: klikněte

Přátelé, zdravím všechny. Dnes budeme pokračovat ve vytváření bannerů v programu Web Google Návrhář ve formátu HTML5 s 3D efektem.

A to je pochopitelné, bannery vytvořené na html5 a css3 se zobrazují na všech obrazovkách, jak na počítači, televizi, tak na mobilní zařízení. Co se nedá říci o flash-bannerech.

Tyto bannery se navíc dají dostatečně využít a banner bude vypadat skvěle na každé obrazovce.

A vzhledem k tomu, že se k prohlížení internetových zdrojů stále častěji používají mobilní zařízení, je to velmi důležité.

To hlavní a jeho umístění na webu jsem již řekl v minulém článku. Dnes se tedy budu věnovat vytváření 3D efektu a nastavení cyklování (přehrávání). A také zvažte pár nastavení pro „události“.

Je poměrně obtížné celý tento proces podrobně popsat, proto vám dávám do pozornosti videonávod. Takže bude mnohem snazší zvládnout materiál. A také si stáhněte archiv s projektem mého banneru, jako dobrý příklad.

Příprava na vytvoření banneru s 3D efektem.

Typ banneru v hotové podobě nakonec závisí na přípravě. Editor Google Web Designer umožňuje vytvářet realistické 3D efekty a to vše bude zapsáno html kód, stačí vše správně sestavit ve vizuálním editoru.

Chcete-li vytvořit vysoce kvalitní 3D efekt, musíte nejprve ve Photoshopu vyříznout polotovary, které bude později nutné spojit v aplikaci Google Web Designer.

Jako příklad jsem připravil následující polotovary:

Tyto polotovary jsem udělal ve Photoshopu, ale na internetu je mnoho podobných obrázků. Nemůžete napínat, ale vzít hotové možnosti.

Poznámka: Pokud máte zájem o proces vytváření takových polotovarů, napište o tom do komentářů.

Důležité je také promyslet celkovou kompozici banneru a scénáře. Záleží na tom, jak bude banner obecně vnímán.

Vytvoření 3D objektu v aplikaci Google Web Designer.

Takže analogicky s posledním článkem spusťte editor, vytvořte nový projekt.

3D efekt znamená složený obraz, tj. obraz skládající se z několika kusů umístěných v požadované projekci.

Tyto vícenásobné obrázky je třeba spojit buď do skupiny, nebo umístit do bloku DIV. A tak to bude správně. Ale je pro mě pohodlnější pracovat se stranou DIV.

Krok 1: Vytvořte blok DIV.

Chcete-li tedy vytvořit blok DIV, v levém panelu vyberte "Nástroj značek (D)".

Nezapomeňte přiřadit ID. A pomocí sekce upravte rozměry "Vlastnosti" v pravém panelu.

Nyní musíme vybrat blok. Chcete-li to provést, v levém panelu vyberte "nástroj pro výběr (PROTI)" a dvakrát klikněte levým tlačítkem myši na rámeček bloku DIV. Změní barvu na červenou.

Krok 2 Zarovnejte obrázky.

A nyní začíná ten nejnáročnější proces. Musíte vystavit všechny prvky jednoho jediného obrázku.

K dispozici mám následující položky:

- Horní strana.

- Boční strana (skládá se ze tří samostatných částí).

Nejprve umístěte rubovou (zadní) stranu obrázku a zarovnejte ji na střed a horní okraj banneru.

Stejným způsobem přidejte přední stranu. Zarovnejte a odsaďte podél osy Z.

Protože šířka strany je 4px (pixel), posunul jsem přední a zadní stranu podél osy Z o 2px a -2px. Tím se vytvoří mezera mezi obrázky.

Poznámka: Přesná čísla offsetů naleznete na snímcích obrazovky.

Dále přidejte bok, všechny díly zvlášť. Pro snadné umístění použijte nástroje "3D rotace pracovního prostoru" A "Měřítko". Pomohou vám přesně doladit všechny detaily.

Pro začátek navrhuji postavit všechny obrázky na jedné straně a poté je zkopírovat a umístit do zrcadlové projekce na druhé straně.

Dalším krokem je vytvoření levého horního rohu.

Nyní centrální část strany.

A spodní roh na levé straně.

Nezapomeňte zarovnat všechny prvky strany podél osy Y o 90 0.

Nyní musíme zkopírovat požadovanou vrstvu a znovu ji vložit, přejmenovat a změnit parametry umístění, abychom získali prvky pro pravou stranu.

Chcete-li to provést, vyberte obrázek ve spodním panelu - stiskněte kombinaci kláves CTRL + C (kopírovat) a vložte duplikát CTRL + V.

Začneme stejným způsobem jako strana pole shora dolů, ale pouze pro pravou.

Horní pravý kryt.

Spodní část jsem nedělal, protože na obrázku není vidět.

Nejtěžší práce skončila. Nyní můžeme začít s nastavením animace. Pro názornou ukázku otočme obrázek.

Vytvoření efektu rotace v aplikaci Google Web Designer.

Prvním krokem je opuštění bloku DIV, který obsahuje všechny prvky obrázku. To znamená, že jsme pracovali uvnitř bloku s konkrétními obrázky a nyní budeme muset pracovat se všemi obrázky současně a ovládat blok DIV.

Začněte kliknutím na tlačítko DIV ve spodní liště.

Na časové škále tedy kliknutím pravým tlačítkem myši vytvoříte dva klíčové snímky. Mělo by to dopadnout takto:

Umístění zdrojového snímku na stupnici Y je nastaveno na -90 0 .

První klíčový snímek (druhý v řadě) je na stupnici Y nastaven na 0 0 .

Druhý klíčový snímek (třetí) je nastaven na stupnici Y na 90 0 .

Můžete zkontrolovat výsledek. Chcete-li to provést, klepněte na tlačítko hrát si.

Pravda, náš obraz udělá jen jednu revoluci. Aby se obraz neustále točil nebo dělal několik otáček, musíte upravit parametry cyklování.

Nastavení cyklistiky v aplikaci Google Web Designer.

V programu můžete nakonfigurovat několik možností pro jízdu na kole (opakování). Můžete tedy nastavit opakování pro všechny prvky banneru nebo pro každý prvek zvlášť.

Také cykličnost může být omezena počtem opakování nebo může být nekonečná.

Na spodním panelu jsou vedle každého prvku symboly "Zámek", "Oko", "Šipka zpět".

Chcete-li tedy nastavit cyklus, musíte kliknout na symbol "Šipka zpět". A zvolte buď omezený počet opakování, nebo nekonečnou možnost.

Zvolil jsem animaci nekonečné smyčky. Protože chci nastavit "Vývoj" takovým způsobem, že rotace bude zastavena při najetí kurzorem myši a bude pokračovat po odstranění kurzoru.

Zastavte otáčení při najetí myší na banner.

Nejprve na první klíčový snímek (druhý v řadě) nastavíme popisek. Chcete-li to provést, stiskněte pravé tlačítko myši nad rámečkem a vyberte položku nabídky "Přidat štítek". Zadejte název štítku a stiskněte klávesu Enter.

A v dalším kroku zvolte jako příjemce « Strana 1". Jiné možnosti nebudou.

A posledním krokem je výběr štítku, který jste vytvořili v počáteční fázi.

Uložte události a zkontrolujte. Otáčení banneru se zastaví, když najedete kurzorem myši na rámeček, kde byl štítek vytvořen.

Obnovení rotace po přesunutí kurzoru myši.

Aby rotace po přesunutí kurzoru do strany pokračovala, nastavte další událost.

Je nakonfigurován podobně jako předchozí, pouze se dvěma rozdíly.

Událost je vybrána "Myš"— « myš out".

Událost - pohyb myši

Ale jako akce "Časová osa" — « toggleplay".

Akce – Pokračovat

Náš banner s 3D efektem je tedy připraven. A můžete vymyslet tolik různých efektů, kolik chcete.

Jen nezapomeňte udělat událost při kliknutí myší a otevření odkazu. Transparent nakonec nevznikl pro krásu.

Zpočátku se tento proces může zdát složitý, ale po vyrobení pár bannerů už to tak vypadat nebude.

To je pro dnešek vše, přátelé. Přeji vám všem úspěch, těším se na vaše komentáře a na viděnou u nových článků a videonávodů.

S pozdravem Maxim Zaitsev.

Banner HTML5- banner, který zobrazuje libovolný obsah HTML nebo obrázek. HTML kód může být jednoduchý HTML stránku se styly a skripty. Je umístěn v prvku iframe a má omezený přístup k obsahu webu.

Pomocí šablony „Banner HTML5“ můžete přidat banner dvěma způsoby:
1. přípravou pouze obrazu. Přítomnost odkazu pro přechod v parametrech banneru řídí klikatelnost obrázku.
2. Po přípravě HTML kreativy v editoru podle pokynů: nebo .
Pokud je do banneru přidán HTML kód i obrázek, pak se HTML kód zobrazí.

Parametry nakonfigurované při přidávání do ADFOX:
- Šířka, výška banneru.
- Vlastní styly css pro bannerový kontejner.

Vývoj kreativ HTML

1. Seznamte se s Požadavky na HTML kód

• Maximální povolená velikost souboru HTML je 65 000 bajtů.
• JavaScript a CSS by měly být pokud možno umístěny v HTML kódu banneru. Pokud výsledný kód HTML překročí maximální povolenou velikost, musíte kód zmenšit přesunem JavaScriptu a CSS jednotlivé soubory:
  - uložit js a css kód do samostatných souborů s příponou .js nebo .css;
  - soubory podle hmotnosti by neměly přesáhnout 300 kB;
  - nahrát soubory na kartu "Soubory". reklamní kampaň a spojte výsledné odkazy se soubory v kódu HTML.

  Příklad připojení souborů js a css:

  V kódu HTML nejsou povoleny relativní cesty k souborům.

• Každý projekt může mít pouze jeden soubor .html.
• Maximální povolený počet souborů v projektu je 50;
• Povolené typy souborů v projektu: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Maximální velikost každého souboru (platí i pro soubory v archivu):
  - 300 kb;
  - 1 Mb pro video soubory.
• Názvy souborů musí obsahovat pouze čísla nebo písmena anglické abecedy, podtržítka. V názvu souboru není povoleno používat ruská písmena, mezery, uvozovky a speciální znaky;
• Ruská písmena nelze použít v názvech proměnných a objektů.
  Jedinou výjimkou je text na banneru.
• Formát hotový projekt - zip archiv.

Požadavky na obrázek

Použijte Obrázky vysoké rozlišení, výrazně se tím zlepší kvalita banneru na mobilním zařízení, i když se zpomalí rychlost stahování banneru.

Můžete použít obrázky SVG. Jsou vektorové, což znamená, že budou vypadat lépe na všech zařízeních – mobilních i desktopových. Mají také malou velikost souboru a lze je animovat.

Přijatelné formáty obrázků: png, gif, jpg, svg.
Maximální váha jednoho souboru: 300 Kb.

2. Vyberte editor, ve kterém budete HTML kreativu vyvíjet, a klikněte na příslušný odkaz. Připravte archiv s HTML kreativou podle pokynů:

Adobe Animate CC Editor – banner s jedním tlačítkem

Adobe Animate CC Editor – banner s více tlačítky

1. Stáhněte si šablonu banneru s více tlačítky

2. Vytvořte projekt HTML5 Canvas v Adobe Animate (nebo otevřete existující)

3. Při přidávání tlačítek (tlačítek) nebo vnořených klipů (filmových klipů) do scény je důležité je nastavit název instance abyste mohli později přidat kliknutí na požadovaná tlačítka. Doporučujeme používat jména tlačítko1 - tlačítko9.

Viz také:

Pokyny pro přidání tlačítka a přiřazení názvu instance

Tlačítko na hlavním pódiu

1. Vytvořte nějaký objekt na scéně, například pomocí nástroje Obdélník.
Poté jej vyberte a kontextová nabídka vyberte "Převést na symbol..."

2. V dialogovém okně, které se objeví, vyberte Typ: Tlačítko, Název lze ponechat beze změny, klikněte na OK.

3. Dejte tomuto tlačítku název instance, aby kliknutí fungovalo.

4. Napište následující kód do Akce pro toto tlačítko:

Window.buttons.push(//Cesty pro tlačítka oddělené čárkami, přidání tohoto.button1 //Konec prostoru pro tlačítka);

vnořené tlačítko

1. Řekněme, že tlačítko je uvnitř jiného symbolu, například uvnitř filmového klipu.
V tomto příkladu má tento filmový klip název instance „name“

2. Podle dvojklik jít dovnitř jména, bude tam vnořené tlačítko.

3. Při zadávání cesty k takovému tlačítku v Actions budete muset za toto přidat název instance objektu, do kterého je vnořeno:

Window.buttons.push(//Cesty pro tlačítka oddělené čárkami, přidání tohoto.jméno.button1 //Konec prostoru pro tlačítka);

Návod na vytvoření průhledných tlačítek

1. Vyberte požadovaný prvek a převeďte jej na symbol

2. Zadejte název a vyberte Typ: Tlačítko

3. Dvojitým kliknutím na symbol na něj přejdete:

4. Proveďte vložení klíčového snímku do záběru

5. Odstraňte obsah snímků nahoru, přes, dolů

6. Průhledné tlačítko je připraveno:

4. Přidejte do projektu vrstvu Actions (přidáme do ní kód pro tlačítka)

5. Otevřete okno kódování

Window.buttons.push(//Cesty oddělené čárkami pro tlačítka s přidáním této první //Konec mezery pro tlačítka); setAdfox();

Pokud je tlačítko v hlavní scéně, napište jeho název instance například hned za toto

Toto.tlačítko1

Pokud je tlačítko uvnitř vnořené scény, pak zapište nejprve název instance scény a poté název instance tlačítka:

This.scene_instance_name.button2

Příklad výsledného kódu ve vrstvě Actions:

Window.buttons.push(//Čárkami oddělené cesty k tlačítkům, přidání tohoto.button1, této.název_instance_scény.button2 //Konec prostoru pro tlačítka); setAdfox();

7. První tlačítko na řádku kódu zavolá první odkaz z ADFOX, druhé tlačítko zavolá druhý atd.

Spolu s HTML kreativou předejte informaci o shodě mezi tlačítky a čísly odkazů správci, který přidá banner do ADFOXu.

8. Otevřete možnosti publikování a připojte šablonu z prvního odstavce a publikujte projekt výběrem požadovaného adresáře.

9. Po publikování projektu jej zazipujte ve formátu .zip. Vaše kreativa je připravena k nahrání na banner ADFOX.

Google Web Designer Editor

Kód tohoto banneru lze použít jako základ pro tvorbu kreativ v editoru.

Šablona obsahuje skript adfox_HTML5.js a sadu parametrů pro správné fungování přechodů a počítání událostí:
%reference%, %user1%, %eventN%, kde N je číslo události od 1 do 30.

2. Manipulace s kliknutím.

Všechny události jsou přiřazeny ke konkrétním prvkům animace prostřednictvím karty Události.

K vyvolání akcí použijte komponentu "Click Area".
Přidejte jej a vyberte událost Hotspot → Klepněte/Klikněte(nebo "Tap Area > Touch/Click" v anglické verzi).

Na kartě " Vlastní kód" specifikovat volání funkce kliknutí.

2.1 Pokud je použito jedno tlačítko skoku:

callclick();

2.2 Pokud existuje více navigačních tlačítek:

callclick(n);

kde n

2.3 Pokud potřebujete spustit událost z animace bez přechodu, použijte následující kód:

CallEvent(n);

kde n- číslo události, která má být volána.

Funkce implementace natahovacího (gumového) banneru.

Aby se banner natáhl přes šířku kontejneru, ve kterém bude umístěn na webu, na panelu Vlastnosti pro polohu a rozměry určete procenta místo pixelů.

Použijte také možnosti "Zarovnat do kontejneru" A "Gumové rozložení" na horní panel nástroje.
Pokud povolíte Fluid Layout před použitím některého z nástrojů pro zarovnání, pak se při změně velikosti nadřazeného kontejneru všechny prvky zarovnají mezi sebou as rozměry kontejneru.
V tomto případě můžete současně používat jak relativní velikosti prvků v procentech, tak absolutní velikosti - v pixelech.

4. Publikace projektu.

Při přidávání banneru do ADFOX bude manažer potřebovat znát shodu mezi tlačítky a čísly událostí. Pro každou událost si manažer předepíše vlastní přechodový odkaz, který se pak pomocí proměnné předá do kódu banneru.

Po publikování projektu jej zazipujte ve formátu .zip. Vaše kreativa je připravena k nahrání na banner ADFOX.

Ostatní redaktoři

1. Počet kliknutí na banner

Aby ADFOX mohl vypočítat statistiku kliknutí pro banner, musíte nastavit proměnnou v HTML kódu v tagu pro atribut href:

%banner.reference_user1%

Také pro použití odkazů cílový atribut s proměnnou %banner.target% v hodnotě atributu.
Pokud atribut chybí, odkaz se otevře uvnitř iframe, to znamená, že se inzerovaná stránka otevře v prostoru banneru.

Příklad HTML kódu pro počítání kliknutí na banner:

Web inzerenta

V HTML kódu bannerů, které budou umístěny v mobilních aplikacích, použijte k zohlednění kliknutí následující makro: %reference%@%banner.user1%

2. Počítání kliknutí z více odkazů v banneru

Řekněme, že banner má několik odkazů, na které lze kliknout různé stránky inzerovaný web a pro každý z nich musíte získat počet přechodů.

První odkaz Druhý odkaz

Nahraďte hodnoty atributu href proměnnými %request.reference%@%banner.eventN%, kde by místo N mělo být číslo události od 1 do 28.
Například:

První odkaz Druhý odkaz

Korespondence odkazů a proměnných musí být oznámena manažerovi, který přidává banner do ADFOX. Protože při přidávání banneru budete muset zadat první odkaz pro událost 1 na kartě „Události“ a druhý odkaz pro událost 2.

Přidání banneru do ADFOX

Chcete-li přidat banner do ADFOX, vyberte požadovaný typ banneru a šablonu "HTML5 banner".

Zadejte parametry banneru:

Archivujte pomocí kreativy HTML5- stáhněte si archiv .zip s projektem, polem „Kód kreativy HTML5“ musí zůstat prázdný (po přidání banneru bude vyplněn obsahem .html souboru vašeho projektu).

Kód kreativy HTML5- stáhněte si zip archiv s projektem, připravený v HTML editory nebo vložte HTML kód.

Pokud je v banneru několik odkazů, přidejte je na kartu Vývoj na banneru v polích URL přechodu.
Ověřte si u vývojářů kreativy HTML shodu mezi počty odkazů a událostmi.

Odkaz na měřicí pixel- Ve výchozím nastavení se používá pixel ADFOX //banners.adfox.ru/transparent.gif, v případě potřeby sledujte zobrazení v systém třetích stran, odstraňte pixel ADFOX a poskytněte jiný odkaz.

Šířka kreativy (px nebo %)- Určete šířku banneru.

Výška kreativy (px nebo %)- Určete výšku banneru.

obraz- nahrát obrázek.
Podmínky pro zobrazování reklam:
- HTML kód a obrázek přidán - HTML kód se zobrazí.
- přidán obrázek - obrázek se zobrazí.
- HTML kód přidán - HTML kód se zobrazí.

Název atributu třídy kontejneru banneru- zadejte název (nebo několik názvů oddělených mezerou) pro atribut class kontejneru s bannerem.

Použít SafeFrame (ano|ne)- safeFrame je technologie, která zabaluje reklamy do speciálního prvku iframe, který má přísné rozhraní API. SafeFrame zabraňuje reklamám, které vykresluje, shromažďovat data a interagovat se zbytkem stránky mimo safeFrame.
ano - povolit použití safeFrame a odepřít přístup na webovou stránku;
ne – nezahrnujte safeFrame. Bannerový kód má přístup na webovou stránku.

Styly pro bannerový blok- vlastní styly pro bannerový kontejner v jednom řádku. Kromě stylu: displej. Například „ohraničení: 1px plná červená;“. Neplatné hodnoty budou prohlížečem zahozeny.

Banner (anglicky banner - flag, banner) - grafický obrázek reklamního charakteru, podobný reklamnímu modulu v tisku. Může to být buď statický obrázek nebo i text, nebo obsahovat animované prvky (až po video a interaktivní objekty). Zpravidla může obsahovat hypertextový odkaz na webovou stránku inzerenta nebo stránku s dodatečné informace. Úkoly banneru jsou následující. Nejprve prodejte produkt. A to znamená - přitahovat pozornost návštěvníka zájem potenciálního klienta s inzerovaným produktem nebo službou, přimět je, aby přešli na web a přimět k akci(Výzva k akci). CTA je konečným cílem reklamy. A za druhé, úkolem banneru je image nebo reklama značky, jejímž účelem je zvýšit povědomí o značce a vybudovat pozitivní image značky.

Oblíbené typy reklam na webu:

• Grafický- jednoduchý typ banneru pro reklamu na internetu. Skládá se z obrázku určité velikosti a obsahuje odkaz na reklamní zdroj.
• Flash banner- má velké možnosti pro animaci, umožňuje lépe zprostředkovat informace pomocí kombinace vektorové a rastrové grafiky.
• HTML5 banner- kombinace prvků HTML s animacemi a dobrým vizuálním designem, přizpůsobená jakémukoli zařízení a prohlížeči.

Hlavní rozdíly mezi HTML a ostatními typy bannerů
Ve srovnání s jinými metodami vytváření bannerů poskytují technologie HTML5 řadu výhod pro přilákání publika ke zdroji:

• Reklamy v tomto formátu se budou zobrazovat stejně na všech zařízeních bez dalších rozšíření prohlížeče.
  HTML5 poskytuje více možností pro integraci do vašeho reklamy formuláře, tlačítka sociální sítě, kalendáře, mapy a další aplikace.
• Nízká hmotnost a použití menšího množství zdrojů neovlivňuje rychlost načítání stránky v prohlížeči. Flash technologie neumožňují dosáhnout takového výsledku.
• Pro vyhodnocení efektivity HTML5 bannerů si můžete prohlédnout statistiky v Google Analytics. Poskytuje různé informace o hostech a kliknutích.

Významnou nevýhodou flashových technologií bylo jejich postupné opouštění velkými společnostmi jako Apple, Mozilla a Amazon. Hlavním impulsem pro zmizení Flashe byl Google. Nejprve zakázali Flash animaci Google Chrome a poté ve svých reklamních službách ve vyhledávání opustili reklamy ve formátu Flash ve prospěch HTML5.

Způsoby, jak vytvořit HTML bannery
Vývoj banneru začíná vytvořením samostatné stránky a je vložen na web prostřednictvím „iframe“. Existuje několik metod vývoje reklamní bannery na webu zvážíme nejoblíbenější.

1. Vytvořte rámec pomocí CSS3 a JavaScriptu
Rám umožňuje načíst libovolné nezávislé dokumenty do oblasti dané velikosti. Může to být jiný HTML kód využívající styly a skripty pro styling. Prostřednictvím oblasti „canvas“ je také možné implementovat banner, ve kterém jsou pomocí JavaScriptu vyvíjeny animace, kresby, grafika a dokonce i hry. Pro urychlení vývoje můžete použít knihovny třetích stran, jako je CreateJS .

Výhody:

• Funkčnost není omezena žádnými programy, můžete implementovat cokoli.

nevýhody:

• Tento proces je poměrně složitý a vyžaduje speciální dovednosti v oblasti rozvržení.
• Velké mzdové náklady v čase ve srovnání s jinými metodami.

2. Adobe Edge Animate
Pro ty, kteří znají Adobe po efektech, rozhraní Adobe Edge Animate vám bude velmi povědomé. Adobe Edge Animate má omezenější funkcionalitu zaměřenou na vývoj jednoduchého animovaného obsahu pomocí HTML5, JavaScriptu a CSS3. Program podporuje import formátů jako .svg, .png, .jpeg, .gif, HTML; podpora video a audio formátů.

Existuje více než 30 vestavěných efektů, což několikrát zjednodušuje čas vytváření vysoce kvalitní animace:

Výhody:

• Spousta dostupných videonávodů na webu, jak program používat.
• Jednoduchá funkčnost, většina procesů je automatizována.
• Program nevyžaduje znalost HTML5, JavaScriptu a CSS3.
• Po dokončení práce obdržíme všechny potřebné dokumenty pro umístění banneru na stránky. Obrázky - složka s grafickými prvky banneru, několik soubory JavaScript, html a An format file - pro následnou editaci souboru v programu.
• Ready banner podporuje každý moderní prohlížeče A mobilní aplikace, splňuje všechny technické požadavky reklamních kampaní v Yandex a Google.

nevýhody:

• Rozhraní je pouze v angličtině.
• Od roku 2015 společnost Adobe zastavila vývoj projektu Adobe Edge Animate, program od té doby nebyl aktualizován a dosáhl svého limitu ve vývoji. Edge Animate je stále k dispozici ke stažení v archivech Creative Cloud.

3. Adobe Animate CC
Animate CC je přeznačený produkt Adobe Flash profesionální. Technologie Flash v poslední době ztratila důvěru uživatelů, program potřeboval změnu názvu a několik vylepšení. V podstatě je to totéž Flash program Profesionální, ale ve kterém jsou soubory navíc uloženy v HTML5 a JavaScriptu.

Rozhraní je velmi podobné Flash Professional, ale možnosti programů se liší.

Výhody:

• Schopnost vytvářet trojrozměrnou grafiku. Existuje nástroj „kamera“, který umožňuje zachytit hloubku snímku pro skutečnou animaci.
• Na rozdíl od Edge Animate má Animate CC velký výběr vektorové štětce a schopnost pracovat s rastrovou grafikou.
• Program je relativně nový, takže Adobe projekt aktivně vyvíjí, vydává aktualizace a vylepšuje Animate CC.
• Existuje ruská verze.
• Rozšířené možnosti pro export souboru do formátů: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Stisknutím jednoho tlačítka se prvky banneru uloží do sprajtů, čímž se zkrátí doba načítání banneru.

nevýhody:

• K nedostatkům se připisuje i novost programu. V Animate CC není tolik výukových programů animace jako v Adobe Edge Animate. Obsluhu některých funkcí je proto potřeba studovat samostatně, což není jednoduché. Program je dostatečně obtížný samostudium ale můžeš na to přijít.
• Některé funkce nejsou automatizované, jako v Edge Animate, což také prodlužuje dobu vytvoření banneru.

4. Google Web Designer
Google nám udělal radost bezplatný editor, speciálně vytvořený pro implementaci html-bannerů. Google Web Designer je zcela zaměřen na implementaci reklamy, jejíž hlavní směr je zaměřen na AdWords.

Pokud se podíváme do okna pro vytvoření nového souboru, všimneme si, že velikosti šablon reklam jsou již zabudovány v programu.

Výhody:

• Jednoduché rozhraní.
• Dostupnost šablon pro reklamu na google.
• Zcela bezplatný program.
• Přítomnost ruské verze.
• Položeno adaptivní design bannery, html banner bude vypadat skvěle v jakémkoli rozlišení obrazovky.

nevýhody:

• Funkce aplikace Google Web Designer je dostatečně úzká, aby mohla vytvářet mistrovská animační díla. Program je silně omezen šablonami.
• Nedostatek vzdělávacích programů. Na plnohodnotné zaškolení funkčnosti nápověda Google nestačí.

Všechny výše uvedené metody nejsou nové, ale jsou osvědčené. To znamená, že je zaručeno, že vytvořené html bannery budou moderovány na většině reklamních platforem, protože jejich technické požadavky odpovídají obecným standardům.

HTML5 bannery

od 2 299 rublů.

TŘÍT

Objednat

V současné době jsou HTML5 bannery jediným skutečným formátem pro plnohodnotné animované bannerové reklamy. Tento univerzální multiplatformní formát nahradil Flash-bannery, které měly řadu omezení a nevýhod.

Hlavní důvody tohoto odmítnutí jsou následující:

• Nashromáždily se nároky na technologii Flash v oblasti počítačové bezpečnosti a zvýšené spotřeby procesorového výkonu mobilních zařízení;
• některé prohlížeče začaly Flash blokovat ve výchozím nastavení;
• na mobilních zařízeních iOS (iPhone, iPad) nebyl Flash výrobcem poskytnut;
• popularita blokátorů reklamních bannerů Flash;
• odmítnutí další podpory a vývoje technologie Flash jejím vlastníkem, společností Adobe.

Animované bannery HTML5 lze bez omezení zobrazovat v jakémkoli prohlížeči, na obrazovce jakéhokoli zařízení, včetně chytrých telefonů, tabletů a mediálních televizorů. To je jejich multiplatformní a univerzálnost.

Pro zákazníka znamená použití HTML5 bannerů především rozšíření dosahu publika beze ztrát.

Co umí banner HTML5?

Hodně. Koneckonců jde o nejpokročilejší formát, který přitahuje pozornost uživatele a dokonce s ním interaguje (interaktivní banner).

Pokud jde o animaci, takový banner může zobrazovat vektorovou animaci (bez ztráty měřítka), animaci postav, fotografie, loga, grafy a tabulky, text a dokonce i 3D animaci. Z interaktivního hlediska může banner HTML5 reagovat na akce uživatele a nabízet další obsah a funkce. Pokud jde o média, banner HTML5 může přehrávat videa, snímky a zvukové záznamy. Pokud jde o přizpůsobivost, banner HTML5 se může roztáhnout na celou šířku stránky, odhalit další panely nebo se roztáhnout na celou obrazovku.

Zvažte hlavní typy bannerů HTML5.

Animovaný banner HTML5 s pevnou velikostí.
Nejoblíbenější formát ve většině reklamních sítí. Šířka a výška požadovaných bannerů se vybírá ze seznamu bannerů přijatých k umístění. Vždy navrhneme nejběžnější velikosti.

Natahovací HTML5 banner (responzivní, gumový).
Toto je banner, který se může roztáhnout tak, aby zaplnil celou šířku (někdy i výšku) obrazovky. (Více podrobností naleznete v tomto článku)

Celoobrazovkový banner HTML5.
Banner, který se otevře na celou obrazovku. Zpravidla obsahuje časovač zobrazení a tlačítko „Zavřít“. Obzvláště oblíbené pro zobrazení na mobilních zařízeních.

Často musí být takový banner adaptivní, aby vyhovoval různým orientacím a rozlišením mobilního zařízení.

Rozbalitelný banner HTML5 (rozbalit).
Nejprve je na obrazovce přítomen pouze úvodní panel takového banneru (teaser). Po provedení daného algoritmu (ukázání nebo kliknutí myší, časovač nebo jiné události na stránce) se otevře druhá část banneru s dalšími rozšířenými informacemi.

HTML5 Video banner.

V závislosti na nastavení a požadavcích reklamní platformy může zobrazit video jak s automatickým spuštěním, tak po stisknutí tlačítka „Play“. Může obsahovat tlačítka ovládání a ztlumení. Video soubor je obvykle umístěn na externím hostiteli a je načten při zobrazení.

Herní interaktivní bannery.
Bannery, které vybízejí uživatele, aby se připojil ke hře prováděním jednoduchých akcí.

Takové bannery přitahují pozornost cílového publika, vzbuzují velký zájem, ale zároveň mají řadu omezení (například absence události mouseover na mobilních zařízeních nebo omezení používání dalších skriptů). O těchto funkcích vám vždy řekneme v případě, že uvažujete o vytvoření herního HTML5 banneru.

„Inteligentní“ bannery HTML5 (kalkulačky).
Používá se k zapojení a interakci s uživatelem a nabízí mu okamžitou platbu za správné parametry a vzorec určený interním algoritmem (například výpočet úvěru, hypotéky, spotřeby stavebního materiálu a další jednoduché operace).

Upravitelné bannery HTML5– v některých případech musí zákazník rychle provést změny na bannerech, aniž by se uchýlil k pomoci vývojáře (například často se měnící ceny, procenta nebo nabídky). Dokážeme si s tímto úkolem poradit a zobrazit potřebné parametry přímo v HTML kódu banneru, kde může zákazník samostatně provádět změny. Můžete nabídnout další vhodné řešení pro výstup dat používaných bannerem do externích souborů.

HTML5 bannery, které pracují s externím načítáním dat a API.
Na tento moment mnoho reklamních sítí zakazuje přístup k banneru externí zdroje. Pokud je však banner umístěn na webu, který takovou možnost poskytuje, může si HTML5 banner vyžádat potřebné informace (text, čísla, uvozovky) prostřednictvím rozhraní API webu a po jejich zpracování podle daného algoritmu je zobrazit uživatel.

3D bannery HTML5.
Takové bannery přitahují pozornost uživatele vytvářením trojrozměrných modelů obrázků na stránce.

3D banner HTML5 lze implementovat jako rotující objekt, jehož okraje obsahují rámečky banneru, jako vyskakovací knihu nebo pomocí jiných 3D efektů.

Upozorňujeme, že banner HTML5 může obsahovat několik popsaných funkcí najednou. Například banner videa se může roztáhnout přes celou šířku stránky a 3D animace se může na stránce roztáhnout na základě interakce uživatele.

Pokud si chcete objednat HTML5 banner na našem webu a kreativní nápad vyžaduje kombinaci různých formátů, naši specialisté to vždy zvládnou.

HTML5 banner – co to technicky je?

Nejlepší je představit si banner HTML5 jako mini web. Bez nadsázky.

HTML5, který dal název tomuto formátu banneru, je značkovací jazyk pro webové stránky, jinými slovy rozložení. A je vytvořen podle stejných zákonů jako jakýkoli moderní web. Může obsahovat kontejnery div, zahrnutá písma, css styly a js skripty. Hlavním prvkem je kontejner pro animace plátna. Samotná animace je realizována pomocí java skriptu, častěji pomocí js knihoven speciálně určených pro animaci.

Co je uvnitř? Proč archivovat? Proč tolik souborů?

Je to tak, protože jsme zvyklí na to, že banner je jeden obrázkový soubor JPG nebo „gif“ nebo „flash disk“. Pamatujte ale, jak jsme psali výše, banner HTML5 je ve skutečnosti mini-stránka. Obsahuje mnoho souborů a je dodáván na reklamní platformu v archivu zip. Uvnitř archivu je hlavní soubor HTML, soubory java skriptů, knihovny, šablony stylů a použité obrázky.

Poznámka. V některých případech může reklamní platforma vyžadovat, abyste poskytli celý banner v jednom souboru, včetně všech použitých skriptů a obrázků ve formátu base-64. Pro zkušeného vývojáře to není problém. Takový požadavek však prodlužuje dobu potřebnou k vytvoření banneru a provedení změn v něm. Naštěstí je tento požadavek vzácný.

Jak si mohu zobrazit odeslaný banner HTML5 na svém počítači?

Velmi jednoduché. Rozbalte zip archiv a otevřete soubor HTML uvnitř v prohlížeči.

Jak mohu zkontrolovat, zda mi byl vytvořen správný banner HTML5?

Pokud je banner vytvořen pro reklamu služby Google, pak je k vašim službám vynikající nástroj pro kontrolu kvality práce designéra – on-line HTML5 validátor od Google. Použití je jednoduché: nahrajte soubor zip banneru a zjistěte, zda prošel kontrolním seznamem. Chyby budou označeny červenými ikonami. Pokud tam nejsou, váš vývojář nepracoval nadarmo a banner je připraven k umístění Google AdWords nebo dvakrát klikněte.

V reklamních sítích Yandex, Mail.ru, Rambler, adFox, adRiver a dalších je banner po nahrání na web systému také zkontrolován, zda splňuje technické požadavky. V případě problémů můžete získat komentář od moderátora s popisem chyby. Některé platformy poskytují reklamnímu zákazníkovi příležitost náhled banner na testovací stránce.

Nejlepší zárukou pro správnou výrobu HTML5 banneru jsou přesto zkušenosti vývojáře, jeho znalost technických požadavků reklamních platforem a připravenost rychle opravovat chyby.

Liší se banner animace Java Script?

Nenechte se zmást. „Java Script banner“, „Canvas banner“ – mluvíme o tom, co se obvykle nazývá „HTML5 banner“. V závislosti na vývojářském nástroji se knihovny js nebo pravidla rozvržení mohou změnit, ale obecné schéma sestavení zůstává stejné.

Jak vytvořit HTML5 banner?

Nejoblíbenějším editorem mezi designéry pro tvorbu HTML5 animací je program Adobe Animovat.

Google nabízí svůj vlastní vývojový nástroj – Google Web Designer. Mezi jeho výhody patří přítomnost mnoha vestavěných šablon a možnost publikovat banner přímo pro reklamní služby Google: adWords a Double Click. Mezi mínusy patří omezené možnosti animace.

Někteří návrháři, většinou američtí, používají editor a knihovny Green Sock Animation Platform. U nás se však významnějšího rozšíření nedočkaly.

Vzhledem k tomu, že všechny potřebné komponenty jsou open source, dokáže dobrý specialista vytvořit HTML5 banner i v tom nejjednodušším textový editor. Tato metoda však není efektivní ve srovnání s používáním profesionálních animačních programů.

Technické požadavky na bannery HTML5.

Požadavky se vztahují na:

• celková váha HTML5 banneru v kb;
• struktury archivů zip, počet složek a souborů;
• seznam povolených formátů souborů;
• způsob, jak povolit URL-linky kliknutím na banner (banner firmware);
• seznam povolených js-knihoven na externích hostingech;
• postup a omezení pro připojení video a audio souborů;
• požadavky na design rámečku, vyloučení odpovědnosti, četnost a počet animačních cyklů, zátěž procesoru zařízení.

A to není úplný výčet požadavků, které musí naši vývojáři zohlednit, aby zákazníkovi poskytli HTML5 banner připravený k umístění a bez prodlení zahájili reklamní kampaň.

Co mám dělat se svými dříve vytvořenými bannery Flash?

Přesvědčte se sami – největší reklamní sítě již nepřijímají Flash bannery pro umístění, Flash komponenty jsou blokovány v prohlížečích a na iOs zařízeních, přestal fungovat Swiffy (jediný adekvátní online konvertor Flash bannerů do HTML5).

Automatická konverze formátu Flash do HTML5 je prakticky nemožná – vyžaduje ve skutečnosti kompletní ruční opětovné sestavení v HTML5 editoru. V takové situaci by bylo správným rozhodnutím objednat vytvoření nové sady animovaných bannerů v moderním a univerzálním formátu HTML5.

Ale co "gify"?

Musíte pochopit, že jakákoli animace GIF je sekvenční sada rámečků obrázků, stejně jako v souborech videa. Soubor GIF může obsahovat informace o snímkové frekvenci a počtu opakování. To omezuje jeho možnosti.

S bannerem GIF nelze pracovat vektorová grafika, vytvářet animace programově, přizpůsobovat se požadované velikosti a mnoho dalšího, co animovaný HTML5 banner hravě zvládne.

Co to znamená pro inzerenta?

Problém nadváhy. Ano, i bannery tomu podléhají. Všechny hlavní reklamní platformy stanovují přísné limity na váhu banneru v kilobajtech.

Banner GIF je dobrý pro zobrazení několika statických snímků, možná s malou animací textu, tlačítkem nebo změnou fotografie. Celková váha GIF banneru v tomto případě nepřesahuje požadavky reklamních platforem.

Pokud animace ovlivní změnu několika stovek snímků, pak se váha gif-banneru zvýší, jak se anglicky říká, „dramatically“, tedy dramaticky. 20sekundový GIF vážící několik megabajtů je běžná věc. A to se mi opravdu nelíbí reklamní sítě, kteří se oprávněně zajímají o to, jakou návštěvnost bude muset uživatel stáhnout, aby si banner mohl prohlédnout.

Pokud tedy potřebujete banner se spoustou animačních efektů, animace postav, interaktivní, adaptivní nebo video banner, je volba učiněna ve prospěch objednávky HTML5 banneru.