A bannersnack áttekintése. Hogyan készítsünk gyönyörű HTML5 bannert. HTML5 szalaghirdetések Forgatási effektus létrehozása a Google Web Designerben

HTML5 bannerek

2299 RUB-tól

DÖRZSÖLÉS

Rendelés

Jelenleg a HTML5 bannerek jelentik az egyetlen jelenlegi formátumot a teljes értékű animált bannerhirdetéshez. Ez az univerzális többplatformos formátum felváltotta a Flash bannereket, amelyeknek számos korlátja és hátránya volt.

Ennek az elutasításnak a fő okai a következők:

• A Flash technológiával szembeni követelések halmozódtak fel a számítógépes biztonság és a mobileszközök processzorteljesítményének növekedése terén;
• egyes böngészők alapértelmezés szerint blokkolják a Flash-t;
• iOS mobileszközökön (iPhone, iPad) a Flash kijelzőt nem biztosította a gyártó;
• a Flash banner hirdetést blokkoló programok népszerűsége;
• a Flash technológia további támogatásának és fejlesztésének elutasítása tulajdonosa, az Adobe részéről.

Az animált HTML5 bannerek korlátozás nélkül megjeleníthetők bármely böngészőben, bármilyen eszköz képernyőjén, beleértve az okostelefonokat, táblagépeket és a médiatévéket. Ez a platformfüggetlenségük és sokoldalúságuk.

A vásárló számára a HTML5 bannerek használata elsősorban a közönséglefedettség veszteség nélküli bővítését jelenti.

Mire képes egy HTML5 banner?

Sokkal. Végül is ez a legfejlettebb formátum, amely felkelti a felhasználó figyelmét, és még kölcsönhatásba is lép vele (interaktív banner).

Ami az animációt illeti, egy ilyen banner megjeleníthet vektoros animációt (méretezési veszteség nélkül), karakterek animációját, fényképeket, logókat, grafikonokat és diagramokat, szöveget és akár 3D animációt is. Interaktív szemszögből nézve a HTML5 szalaghirdetés reagálhat a felhasználói műveletekre, és további tartalmat és szolgáltatásokat kínálhat. A média szempontjából egy HTML5 szalaghirdetés képes lejátszani videókat, diákat és hangfelvételeket. Ami a reagálást illeti, a HTML5 szalaghirdetés az oldal teljes szélességében kiterjedhet, további paneleket bonthat ki, vagy kiterjesztheti a teljes képernyőt.

Nézzük meg a HTML5 bannerek főbb típusait.

Fix méretű animált HTML5 banner.
A legnépszerűbb formátum a legtöbb hirdetési hálózatban. A szükséges bannerek szélességét és magasságát az elhelyezésre elfogadottak listájából választjuk ki. Mindig ajánljuk a leggyakoribb méreteket.

Nyújtó HTML5 banner (reszponzív, gumi).
Ez egy szalaghirdetés, amely megnyúlhat, és elfoglalja a képernyő teljes szélességét (néha magasságát). (További részletek ebben a cikkben találhatók)

Teljes képernyős HTML5 banner.
Teljes képernyőn megnyíló szalaghirdetés. Általában tartalmaz egy kijelző időzítőt és egy „Bezárás” gombot. Különösen népszerű a mobileszközökön való megjelenítésnél.

Gyakran egy ilyen szalaghirdetésnek adaptívnak kell lennie, figyelembe véve a mobileszköz különböző tájolásait és felbontásait.

Bővíthető HTML5 banner (bővíthető).
Egy ilyen bannernek (teasernek) eleinte csak a kezdőpanelje látható a képernyőn. Amikor egy adott algoritmus végrehajtódik (egér lebegtetése vagy kattintás, időzítő vagy egyéb események az oldalon), a szalaghirdetés második része megnyílik további kibontott információkkal.

HTML5 videó banner.

A hirdetési platform beállításaitól és követelményeitől függően akár automatikus indítással, akár a „Play” gomb megnyomása után tud videót megjeleníteni. Vezérlő és némító gombokat tartalmazhat. A videofájl általában külső tárhelyen található, és a megjelenítéskor letöltődik.

Játék interaktív bannerek.
Bannerek, amelyek arra ösztönzik a felhasználót, hogy egyszerű műveletekkel csatlakozzon a játékhoz.

Az ilyen bannerek felkeltik a célközönség figyelmét, élénk érdeklődést keltenek, ugyanakkor számos korlátjuk van (például az egérmutató-esemény hiánya a mobileszközökön vagy a további szkriptek használatának korlátozása). Mindig tájékoztatjuk Önt ezekről a funkciókról, ha játékhoz készült HTML5 bannert tervez.

„Intelligens” HTML5 bannerek (számítógépek).
A felhasználó bevonására és interakciójára szolgálnak, azonnali számítást kínálnak neki a szükséges paraméterek és egy belső algoritmus által meghatározott képlet alapján (például hitel, jelzálog, építőanyag-fogyasztás és egyéb egyszerű műveletek kiszámítása).

Szerkeszthető HTML5 bannerek – bizonyos esetekben az ügyfélnek gyorsan módosítania kell a bannereken, anélkül, hogy fejlesztő segítségét kellene igénybe vennie (például gyakran változó árak, százalékok vagy árajánlatok). Ezzel a feladattal megbirkózhatunk, és a szükséges paramétereket közvetlenül a banner HTML kódjába írhatjuk ki, ahol az ügyfél önállóan módosíthatja. A banner által használt adatok külső fájlokba való kiírására egy másik, kényelmes megoldást is kínálhat.

HTML5 bannerek, amelyek külső adatok és API betöltésével működnek.
Jelenleg sok hirdetési hálózat tiltja a bannerek külső forrásokhoz való eljutását. Ha azonban a banner egy ilyen lehetőséget biztosító oldalon kerül elhelyezésre, akkor a HTML5 banner az oldal API-ján keresztül lekérheti a szükséges információkat (szöveg, számok, idézetek), és adott algoritmus szerint feldolgozva megmutathatja felhasználó.

3D HTML5 bannerek.
Az ilyen bannerek felkeltik a felhasználó figyelmét azáltal, hogy háromdimenziós képmodelleket hoznak létre az oldalon.

A HTML5 3D szalaghirdetés megvalósítható forgó objektumként, amelynek élei bannerkereteket tartalmaznak, legördülő könyvként vagy más 3D effektusok segítségével.

Vegye figyelembe, hogy egy HTML5 szalaghirdetés egyszerre több leírt funkciót is tartalmazhat. Például egy videó szalaghirdetés az oldal teljes szélességében, a 3D animáció pedig a felhasználói műveletek függvényében bővülhet az oldalon.

Ha HTML5 bannert szeretne rendelni weboldalunkon, és kreatív ötlete különböző formátumok kombinálását igényli, szakembereink ezt bármikor megtehetik.

HTML5 banner – mi ez technikailag?

A legjobb, ha egy HTML5 bannert mini webhelyként képzel el. Nem túlzás.

A HTML5, amely ennek a szalaghirdetés-formátumnak a nevét adja, egy weboldal jelölőnyelve, vagy más szóval elrendezési nyelv. És ugyanazok a törvények szerint vannak kialakítva, mint bármely modern webhely. Tartalmazhat div tárolókat, beépülő betűtípusokat, css stílusokat és js szkripteket. A fő elem a vászonanimációs tároló. Maga az animáció egy java szkript segítségével valósul meg, gyakran kifejezetten animációhoz tervezett js-könyvtárak használatával.

Mi van benne? Miért az archívumban? Miért van olyan sok fájl?

Ez így van, mert megszoktuk, hogy a banner egy JPG képfájl vagy egy „gif” vagy egy „flash drive”. De ne feledje, ahogy fentebb írtuk, a HTML5 banner lényegében egy mini-webhely. Sok fájlt tartalmaz, és egy zip-archívumban kerül a hirdetési platformhoz. Az archívumban található egy fő HTML fájl, java script fájlok, könyvtárak, stíluslapok és használt képek.

Jegyzet. Egyes esetekben egy hirdetési platform megkövetelheti, hogy a teljes szalaghirdetést egy fájlban adja meg, beleértve az összes használt szkriptet és képet base-64 formátumban. Ez nem jelent problémát egy tapasztalt fejlesztőnek. Egy ilyen követelmény azonban megnöveli a szalaghirdetés elkészítéséhez és módosításához szükséges időt. Szerencsére ritka az ilyen igény.

Hogyan nézhetem meg a számítógépemen az elküldött HTML5 szalaghirdetést?

Nagyon egyszerű. Csomagolja ki a zip-archívumot, és nyissa meg a benne lévő HTML-fájlt a böngészőben.

Hogyan ellenőrizhetem, hogy a megfelelő HTML5 szalaghirdetést kaptam-e?

Ha a Google hirdetési szolgáltatásaihoz bannert készítenek, akkor a tervezői munkák minőségének ellenőrzésére kiváló eszköz áll az Ön rendelkezésére - a Google online HTML5 érvényesítője. Használata egyszerű: töltse fel zip archívumát egy szalaghirdetéssel, és nézze meg, hogy megfelel-e az ellenőrző listán. A hibákat piros ikonok jelzik. Ha nincsenek ott, akkor a fejlesztő munkája nem volt hiábavaló, és a szalaghirdetés készen áll a Google AdWords vagy a Double Click elhelyezésére.

A Yandex, Mail.ru, Rambler, adFox, adRiver és mások hirdetési hálózataiban a szalaghirdetést a műszaki követelményeknek való megfelelés szempontjából is ellenőrzik, miután feltöltötték a rendszer webhelyére. Probléma esetén a moderátortól kaphat megjegyzést, amelyben leírja a hibát. Egyes webhelyek lehetőséget biztosítanak a hirdető ügyfeleknek, hogy megtekintsék a szalaghirdetés előnézetét egy tesztoldalon.

Mégis, a HTML5 banner helyes elkészítésére a legjobb garancia a fejlesztő tapasztalata, a hirdetési platformok műszaki követelményeinek ismerete és a hibák azonnali kijavítására való hajlandósága.

Más a banner, amely animációt tartalmaz Java Scriptben?

Ne légy összezavarodva. „Java Script banner”, „Canvas banner” – pontosan arról beszélünk, amit általában „HTML5 bannernek” neveznek. A fejlesztői eszköztől függően a js-könyvtárak vagy az elrendezési szabályok változhatnak, de az általános összeállítási séma változatlan marad.

Hogyan készítsünk HTML5 bannert?

A HTML5-animációk készítésére szolgáló tervezők körében a legnépszerűbb szerkesztő az Adobe Animate.

A Google saját fejlesztőeszközt kínál, a Google Web Designert. Előnyei közé tartozik a számos beépített sablon jelenléte, valamint a szalaghirdetések közvetlen közzététele a Google hirdetési szolgáltatásaihoz: az AdWords és a Double Click. A hátrányok közé tartozik a korlátozott animációs képességek.

Egyes, gyakran amerikai tervezők a Green Sock Animation Platform szerkesztőjét és könyvtárait használják. Hazánkban azonban nem kaptak számottevő forgalmazást.

Tekintettel arra, hogy minden szükséges összetevő nyílt forráskódú, egy jó szakember akár egyszerű szövegszerkesztőben is tud HTML5 bannert készíteni. Ez a módszer azonban nem hatékony a professzionális animációs programok használatához képest.

A HTML5 bannerek műszaki követelményei.

A követelmények a következőkre vonatkoznak:

• a HTML5 szalaghirdetés teljes tömege kb-ban;
• zip archívum szerkezete, mappák és fájlok száma;
• az engedélyezett fájlformátumok listája;
• az URL-hivatkozások engedélyezésének módja egy szalaghirdetésre kattintva (szalaghirdetés firmware);
• a külső tárhelyen engedélyezett js-könyvtárak listája;
• a video- és audiofájlok csatlakoztatásának eljárása és korlátozásai;
• a keret kialakítására vonatkozó követelmények, a felelősségkizárások, az animációs ciklusok gyakorisága és száma, az eszköz processzorának terhelése.

Ez pedig nem egy teljes lista azokról a követelményekről, amelyeket fejlesztőinknek figyelembe kell venniük ahhoz, hogy az ügyfélnek egy olyan HTML5 bannert biztosítsanak, amely készen áll az elhelyezésre és a reklámkampány megkezdésére.

Mit tegyek a korábban létrehozott Flash bannereimmel?

Győződjön meg Ön is – a legnagyobb hirdetési hálózatok már nem fogadják el a Flash-szalaghirdetéseket elhelyezésre, a Flash-összetevők le vannak tiltva a böngészőkben és az iOS-eszközökön, a Swiffy (az egyetlen megfelelő, a Flash-bannerek HTML5-té konvertálója) leállt.

A Flash formátum automatikus konvertálása HTML5 formátumba szinte lehetetlen – valójában egy teljes kézi újraépítést igényel egy HTML5 szerkesztőben. Ilyen helyzetben a helyes döntés egy új animált banner-készlet létrehozásának elrendelése lenne, modern és univerzális HTML5 formátumban.

Mi a helyzet a "gifekkel"?

Meg kell értenie, hogy minden GIF-animáció keretképek szekvenciális halmaza, akárcsak a videofájlokban. A GIF fájl információkat tartalmazhat a képkocka lejátszási sebességéről és az ismétlések számáról. Ez korlátozza a képességeit.

A GIF banner nem tud vektorgrafikával együttműködni, animációt programozottan létrehozni, a kívánt mérethez igazítani és még sok minden mást, amit egy animált HTML5 banner könnyen kezel.

Mit jelent ez a hirdető számára?

A túlsúly problémája. Igen, még a bannerek is érzékenyek rá. Minden nagyobb hirdetési platform szigorú korlátozásokat ír elő a szalaghirdetések kilobájtban kifejezett súlyára vonatkozóan.

A GIF szalaghirdetés néhány statikus képkocka megjelenítésére alkalmas, esetleg egy kis szöveganimációval, gombbal vagy fényképek cseréjével. Ebben az esetben a GIF banner teljes súlya nem haladja meg a hirdetési platformok követelményeit.

Ha az animáció több száz képkocka cseréjével jár, akkor a GIF banner súlya, ahogy angolul mondják, „drámaian”, azaz drámaian megnő. Gyakori a 20 másodperces, több megabájt súlyú GIF. Ez pedig rendkívül ellenszenves a reklámhálózatoknak, akik joggal aggódnak amiatt, hogy mekkora forgalmat kell letöltenie a felhasználónak a banner megtekintéséhez.

Tehát, ha sok animációs effektust tartalmazó bannerre, karakteranimációra, interaktív, adaptív vagy videó bannerre van szüksége, akkor a HTML5 banner rendelése mellett dönt.

Barátaim, üdv mindenkinek. Ma is folytatjuk a bannerek készítését a Google Web Designerben HTML5 formátumban, 3D effektussal.

És ez érthető is, a html5-ben és css3-ban készített bannerek bármelyik képernyőn megjelennek, számítógépen, televízión és mobileszközön egyaránt. Ugyanez nem mondható el a flash bannerekről.

Ezenkívül ezek a szalaghirdetések egyszerűen használhatók, és a szalaghirdetés bármilyen képernyőn jól mutat.

És tekintettel arra, hogy a mobileszközöket egyre gyakrabban használják az internetes források megtekintésére, ez nagyon fontos.

A főt és az oldalon való elhelyezését már az előző cikkben leírtam. Tehát ma a 3D effektus és a ciklikus (ismétlési) beállítások létrehozására fogok figyelni. Az „események” több beállítását is megvizsgáljuk.

Elég nehéz ezt az egész folyamatot részletesen leírni, ezért ajánlok egy oktatóvideót. Így sokkal könnyebb lesz elsajátítani az anyagot. Ezenkívül vizuális példaként töltse le az archívumot a szalaghirdetés-projektemmel.

3D hatású banner készítésének előkészítése.

A transzparens végső megjelenése végső soron az előkészítéstől függ. A Google Web Designer szerkesztője lehetővé teszi valósághű 3D effektusok létrehozását, és mindez html kódban lesz megírva, csak mindent helyesen kell összeállítani a vizuális szerkesztőben.

Kiváló minőségű 3D hatás létrehozásához először ki kell vágnia az üres részeket a Photoshopban, amelyeket később össze kell kapcsolni a Google Web Designerben.

Példaként elkészítettem a következő üres lapokat:

Ezeket az üreseket Photoshopban készítettem, de sok hasonló kép található az interneten. Nem kell megerőltetnie magát, hanem kész lehetőségeket kell választania.

Megjegyzés: Ha érdekli az ilyen üres lapok létrehozásának folyamata, írjon róla a megjegyzésekben.

Fontos átgondolni a szalaghirdetés és a forgatókönyv általános összetételét is. Ez határozza meg, hogy a szalaghirdetés egészében hogyan fog megjelenni.

3D objektum létrehozása a Google Web Designerben.

Tehát az előző cikkhez hasonlóan indítsa el a szerkesztőt, és hozzon létre egy új projektet.

A 3D effektus egy összetett képet jelent, azaz több darabból álló képet, amelyek a kívánt vetítésben helyezkednek el.

Ezeket a több képet egy csoportba kell egyesíteni, vagy egy DIV blokkban kell elhelyezni. És így és így lesz helyes. De kényelmesebb számomra a DIV oldallal dolgozni.

1. lépés: Hozzon létre egy DIV blokkot.

Tehát egy DIV blokk létrehozásához a bal oldali panelen válassza a lehetőséget "Címkéző eszköz (D)".

Ügyeljen arra, hogy azonosítót rendeljen hozzá. És állítsa be a méreteket a szakasz segítségével "Tulajdonságok" a jobb oldali panelen.

Most ki kell választania a blokkot. Ehhez válassza ki a bal oldali panelen "kiválasztó eszköz (V)"és kattintson duplán a bal egérgombbal a DIV blokk keretére. A színe vörösre változik.

2. lépés: Képek elrendezése.

És most kezdődik a leggondosabb folyamat. Egyetlen kép összes elemét ki kell fednie.

A következő tárgyak állnak rendelkezésemre:

- Felső oldal.

— Oldal (három különálló részből áll).

Először helyezze el a kép hátsó (hátsó) oldalát, és igazítsa a szalaghirdetés közepéhez és felső széléhez.

Adja hozzá az elülső oldalt ugyanígy. Igazítsa és tolja el a Z tengely mentén.

Mivel az oldalszélesség 4 képpont (pixel), az elülső és a hátsó oldalt eltoltam a Z tengely mentén 2 képponttal és -2 képponttal. Ez rést biztosít a képek között.

Megjegyzés: lásd a képernyőképeket a pontos elmozdulási számokért.

Ezután adjuk hozzá az oldalt, az összes részt külön-külön. Az elhelyezés megkönnyítése érdekében használja az eszközöket "3D munkaterület elforgatása"És "Skála". Segítenek az összes részlet pontos beállításában.

Kezdésként azt javaslom, hogy az összes képet az egyik oldalon helyezze sorba, majd másolja át őket, és helyezze tükörvetítésbe a másik oldalra.

A következő lépés a bal felső sarok sorba állítása.

Most az oldal központi része.

És az alsó sarok a bal oldalon.

Ügyeljen arra, hogy az összes oldalelemet 90 0 pontra igazítsa az Y tengely mentén.

Most át kell másolni a kívánt réteget, és újra be kell illeszteni, át kell nevezni és megváltoztatni a hely paramétereit, így megkapjuk a jobb oldali elemeket.

Ehhez válasszon ki egy képet az alsó panelen - nyomja meg a CTRL + C (másolás) billentyűkombinációt, és illessze be a CTRL + V másolatát.

Kezdjük ugyanúgy, mint a pályaoldalt fentről lefelé, de csak a megfelelőnél.

Jobb felső borító.

Az alsó részt nem csináltam, mert nem látszik a képen.

A legnehezebb munka véget ért. Most elkezdheti az animáció beállítását. Vizuális bemutatóként forgassuk el a képet.

Forgatási effektus létrehozása a Google Web Designerben.

Első lépésként ki kell lépni az összes képelemet tartalmazó DIV blokkból. Vagyis egy blokkon belül dolgoztunk meghatározott képekkel, és most az összes képpel egyszerre kell dolgoznunk, a DIV blokkot kezelve.

A kezdéshez kattintson a DIV gombra az alsó panelen.

Tehát az idő faházban a jobb egérgombbal kattintva két kulcskeretet hoz létre. Így kell kinéznie:

Az eredeti keret helye az Y skálán -90 0-ra van állítva.

Az első kulcskockát (a másodikat) az Y skálán 0 0-ra állítottuk.

Állítsa a második kulcskeretet (a sorban a harmadikat) 90 0-ra az Y skálán.

Ellenőrizheti az eredményeket. Ehhez kattintson a gombra Játék.

Igaz, a mi képünk csak egy forradalmat fog tenni. Annak érdekében, hogy a kép folyamatosan forogjon, vagy több fordulatot hajtson végre, konfigurálnia kell a ciklus paramétereit.

A kerékpározás beállítása a Google Web Designerben.

A program lehetővé teszi több ciklikusság (ismétlés) beállítását. Így beállíthatja az ismétlést az összes szalaghirdetés elemhez vagy minden elemhez külön-külön.

A ciklikusságot az ismétlések számára is korlátozhatja, vagy végtelenné teheti.

Az alsó panelen minden elem mellett szimbólumok találhatók "Castle", "Eye", "Reverse Arrow".

Tehát a ciklikusság konfigurálásához kattintson a szimbólumra "Fordított nyíl".És válasszon vagy korlátozott számú ismétlést, vagy egy végtelen lehetőséget.

Úgy döntöttem, hogy a végtelenségig megismétlem az animációt. Mert a jövőben szeretnék konfigurálni "események"így a forgatás leáll, amikor az egeret lebegteti, és a kurzor eltávolítása után is folytatódik.

Állítsa le a forgatást, amikor az egeret a szalaghirdetés fölé viszi.

Először is beállítunk egy parancsikont az első kulcskockán (a sorban a másodikon). Ehhez kattintson a jobb gombbal a keret fölé, és válassza ki a menüpontot "Parancsikon hozzáadása". Írja be a parancsikon nevét, és nyomja meg az Enter billentyűt.

És a következő lépésben válassza ki a vevőt « 1 oldal". Ott nem lesz más lehetőség.

És az utolsó lépés, válassza ki a parancsikont, amelyet a kezdeti szakaszban hozott létre.

Mentse el az eseményeket és ellenőrizze. A szalaghirdetések forgatása leáll, ha az egeret arra a keretre viszi, ahol a parancsikont létrehozta.

A forgatás folytatása az egérkurzor elmozdítása után.

Annak biztosítására, hogy a forgatás folytatódjon a kurzor oldalra mozgatása után, állítson be egy másik eseményt.

Az előzőhöz hasonlóan van beállítva, csak két eltéréssel.

Az esemény kiválasztva "Egér"— « egér ki".

Esemény - egérbehúzás

És akcióként "Idővonal" — « togglePlay".

Művelet – Folytatás

Elkészült a 3D hatású bannerünk. És tetszőleges számú különböző effektust találhat ki.

Csak ne felejtsen el beállítani egy eseményt az egérkattintáshoz és a hivatkozás megnyitásához. A transzparenst nem a szépség kedvéért hozták létre, igaz?

Kezdetben ez a folyamat bonyolultnak tűnhet, de néhány banner után már nem tűnik annak.

Nekem mára ennyi, barátaim. Sok sikert kívánok, várom észrevételeiket, és találkozunk az új cikkekben és videós oktatóanyagokban.

Üdvözlettel, Maxim Zaitsev.

A mindenki számára elérhető reklámterjesztés egyik lehetősége a HTML5 bannerek - teljes értékű, animált és interaktív elemekkel ellátott oldalak. A látogatók vonzásának más módszereivel ellentétben ez egyszerűen hibátlanul működik. Ma ez a lehetőség a legnépszerűbb internetes hirdetési formátumnak számít. Ennek pedig számos objektív oka van, amelyeket az előnyök jelentős listája határoz meg, és a Html5 banner rendelése előtt javasoljuk, hogy tájékozódjon erről a formátumról.

Előnyök Létrehozási folyamat

A HTML5 bannerek létrehozásához régóta tanulmányozott módszereket használnak. Külsőleg nem különböznek a Flash-től, és az egyetlen különbség azokban a technológiákban rejlik, amelyeken ezek a formátumok alapulnak. Egy ilyen banner egy adaptív HTML5 oldal formájában készül, majd tele van képekkel, linkekkel, szövegekkel és díszítik. A legelterjedtebb módszerek közé tartozik a grafikus szerkesztők, speciális programok, kész eszközök stb. használata. Fő jellemzőjüknek – az alkalmazkodóképességüknek köszönhetően – ezek a bannerek értékek egész sorát teszik lehetővé feldolgozásuk során. Teremtés.

1. Banner kártya

Leírás:

banner beépített grafikával, HTML űrlapokkal, számos hivatkozással.

Kód típusa:

keret, poszter, Ajax, bővítmény.

További részletek:

A HTML bannerek grafikus objektumokat és interaktív mechanizmusokat valósítanak meg a felhasználókkal való interakcióhoz. Egy HTML banner több objektumból is állhat. Ezek lehetnek képek (egyszerű képek), Flash animációk, HTML kódrészletek. Például egy banner több linket is tartalmazhat, attól függően, hogy a látogató hová kattint, az oldal különböző oldalaira kerül.

Megjegyzés: Ha egy szalaghirdetést kell megjelenítenie, amikor egy szalaghirdetés helyére görget, használhatja a plakátkódot vagy egy speciális kódot. Ellenkező esetben használjon szabványos Ajax vagy Extension kódokat.

2. Banner készítés

Készítse elő a szalaghirdetés HTML kódját. Ez lehet bármilyen HTML-kód, beleértve a HTML 5-öt is, amely egy szalaghirdetés HTML-elrendezése CSS-stílusokkal és JavaScript-kóddal. Célszerű a JavaScriptet és a CSS-t a szalaghirdetés HTML-kódjában elhelyezni, nem pedig külön fájlként. Szükség esetén azonban külön fájlok használata is megengedett. Használhat abszolút hivatkozásokat a szalaghirdetésbe betöltött fájlokhoz (különböző képek és Flash-fájlok), valamint relatív hivatkozásokat.

Fontos: A fájlok relatív elérési útjainak használatakor szükséges, hogy az összes szalaghirdetés ugyanabban a mappában legyen, mint az előkészítés alatt álló HTML-fájl. Azok. Nem lehetnek további mappák képek, js-fájlok vagy médiafájlok számára. Az összes szalaghirdetés nevének meg kell egyeznie.

Megjegyzés: Az IFrame kódon (dimenziós) alapuló bannereknél a szalaghirdetés HTML fájljának index.html névvel kell rendelkeznie.

Megjegyzés: Ha a szalaghirdetés további szkripteket használ, a nevüknek különböznie kell a script.js nevétől. A script.js név a szalaghirdetés-vezérlő szkript számára van fenntartva.

3. A szalaghirdetésen leadott kattintások elszámolása

Alapértelmezés szerint a HTML-szalaghirdetésekre leadott kattintások nem számítanak bele. A kattintások számlálásához módosítania kell a szalaghirdetés HTML-fájlját az alábbi utasítások egyikének megfelelően:

• Click-to-click firmware HTML-hirdetésekhez
• Nyissa meg a HTML szalaghirdetés fájlt egy szövegszerkesztővel. Szerelje be a html.js fájlt:

  Ha a szalaghirdetés harmadik fél szerverén található, adja meg a html.js fájl teljes elérési útját:

  Megjegyzés: Nem kell letöltenie a html.js beépülő modult, és nem kell saját maga létrehoznia. Ez a bővítmény AdRiver szervereken található, és egyszerűen csatlakoztathatja az előkészített fájlban.

• A kattintások számlálásához és a rendszerben megadott hivatkozás követéséhez banner betöltésekor (Banner Link mező) használja az ar_callLink függvényt. A függvény bármely eseményre meghívható a szalaghirdetés bármely címkéjéhez, például: Ugrás a webhelyre

  Ugrás a weboldalra

  Lehetséges paraméterek:

  eseményobjektum (kattintás, lefelé mutató egér stb.). A paraméter átadásakor a kattintási koordináták az IFrame-en belül a bannerrel hozzáadódnak a kattintási linkhez

  Minden paraméter nem kötelező.

• a HTML szalaghirdetésben lévő linkekre leadott kattintások számlálásához az AdRiver kattintási hivatkozás segítségével

Használhatja az utasításokat is. Ebben az esetben azonban a kattintásokat a rendszer egy külön szalaghirdetésben számolja, és megjelenik a speciális szalaghirdetés-statisztikában, de nem jelenik meg a kampány- vagy szkriptstatisztikákban.

A feltöltött fájlok méretének meg kell egyeznie.

Megjegyzés: HTML-szalaghirdetésekhez kódokon, vezérlőszkripttel együtt. Olvass tovább.

4.2. HTML bannerek betöltése Extension / Poster / Ajax kódok használatával általános bannerként 4.2.1. HTML banner a poszteren/kiterjesztési kódon

Csomagolja ki.

Nyissa meg a script.js fájlt egy szövegszerkesztővel. Módosítsa a szkript felső részét, amely Szerkeszthető blokkként van megjelölve: var ar_width = "240"; var ar_height = "400"; var ar_gif_pixel = "";

Változók:

banner szélessége. Adja meg értékét

banner magassága. Adja meg értékét

harmadik fél ügyfélszolgálatának felhívása. Ha nem szükséges, hagyja üresen az értéket

Mentse el a script.js fájlt

Nyissa meg az index.html fájlt az archívumból egy szövegszerkesztővel. Másolja ki a szalaghirdetés HTML kódját, és illessze be az index.html fájlba a megadott helyre:

Ha a szalaghirdetés az orosz ábécé betűit használja, akkor

Az elküldött adatok formátuma ZIP archívum.

Az archívum mérete nem haladhatja meg a 150 kilobájtot.

Az archívum egy HTML fájlt és több JS, JSON, CSS, JPG, GIF, PNG, SVG formátumú fájlt tartalmazhat.

A __MACOSX mappa és a .DS_Store fájlok tartalmát a rendszer figyelmen kívül hagyja az archívumokban. Apple Mac OS X platformokon történő archiválás során jönnek létre, és nem szükségesek a reklámanyagok működéséhez.

A fájlok és könyvtárak neveihez csak a következő karakterkészlet használata megengedett:
-._~, számok és latin ábécé.

A promóciós anyagokban található összes hivatkozásnak relatív elérési útnak kell lennie egy ZIP-archívumban. A reklámanyagok fejlesztése során ne legyenek külső hálózati kérések. Ha szükséges, az összes támogató JS-könyvtárat a promóciós anyagokkal együtt biztosítani kell.

Az archívumban lévő fájlok számát minimálisra kell csökkenteni. Kombinálja a képeket egy sprite lapba. Ha szükséges, az összes JS/CSS/Image dokumentumot kombinálhatja és egy HTML-fájlba foglalhatja. A fájlok maximális száma 50.

A reklámanyagoknak megfelelően kell működniük az Internet Explorer 9 és újabb, Firefox 14 és újabb, Safari 5 és újabb, Chrome 14 és újabb, Opera 14 és újabb, Yandex Browser 14 és újabb, Microsoft Edge böngészőkben. Szükség esetén a fájlnak figyelembe kell vennie a böngésző működéséhez szükséges funkcionalitását.

A hirdetett oldal csak akkor nyíljon meg új ablakban, ha a felhasználó a bal egérgombbal rákattint a szalaghirdetésre.

A szalaghirdetésben szereplő átmeneteknek meg kell kapniuk a hirdető webhelyére mutató hivatkozást a yandexHTML5BannerApi.getClickURLNum(1) meghívásával az első kattintásnál, a yandexHTML5BannerApi.getClickURLNum(2) a második kattintásnál stb.

// a " " címkék deklarálása után
// kattintáskezelőket rendelj hozzájuk a következőképpen:

A szalaghirdetésben lévő átmeneteknél a linkN paraméter értékét kell használni az URL get paramétereiből a HTML-dokumentumba a következőképpen: link1 az első kattintáshoz, link2 a másodikhoz stb. Ezt a kódot használhatja:

A szalagcímfájl mérete a következőképpen van feltüntetve a címkében:

Közvetlenül a címke után szerepelnie kell a Yandex hirdetési könyvtárának:

A reklámanyagok külső hivatkozásokat tesznek lehetővé a HTML5 fejlesztői eszközeiben található néhány alapvető könyvtárra: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy és mások.
Ahhoz, hogy a külső hivatkozások érvényesek legyenek egy bannerben, csak a könyvtár gyártójának weboldalára kell vezetniük.

Egy helyőrző képet és ALT szöveget (maximum 100 karakter) külön kell csatolni az archívumhoz. A kép külön moderáláson esik át, beleértve a méretet is. A kép és a szöveg a 7. lépéstől kezdve olyan böngészőkben való megjelenítésre kerül felhasználásra, amelyek nem szerepelnek a támogatott böngészők listáján.

Tilos a szkriptek bosszantó, rosszindulatú viselkedése: például egy felugró ablak spontán megnyitására, az oldal címének megváltoztatására irányuló hívások stb. A böngészőbővítmények (flash/java stb.) használata tilos.

A reklámszalagot nem szabad az elemzést megnehezítő (zavaros) formában megjeleníteni.

Feltételezzük, hogy a bannernek ugyanúgy, egységesen kell viselkednie minden környezetben, minden platformon, minden felhasználó általi megnyitáskor, a kampány teljes időtartama alatt.

A reklámszalagnak meg kell felelnie a CPU terhelési követelményeinek.

A reklámanyagoknak meg kell felelniük a „”” dokumentumban foglalt követelményeknek. 3-10.

A banner-animáció ne zavarja a felhasználót, és ne nehezítse az oldal fő tartalmának észlelését (a kialakításban tilos élesen mozgó és villogó grafikai elemek, villogó hátterek stb. használata).

Banner készítésekor nem megengedett az alacsony minőségű grafikai elemek használata, beleértve:
— deformált képek és a fájltömörítés miatt zajos képek (termékek),
— alacsony felbontású képek (a képpontok láthatók a képen), alacsony grafikai tisztaságú képek.

A promóciós anyagokon kívül MP4 formátumú videók is feltölthetők (ha a termékben megengedettek). A videofájl maximális megengedett mérete 2 megabájt.

A videók hívásának 1-től kezdődő URL JS-hívásnak kell lennie. Például az 1. videó esetében
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);

A lejátszást kifejezetten a felhasználónak kell kezdeményeznie. Lehetővé kell tenni a lejátszás leállítását és folytatását bármikor. Meg kell adni a videofájl méretét. Nem engedélyezett a hang és a videó elkülönített lejátszása. Biztonsági okokból és a letöltés felgyorsítása érdekében a videofájl a Yandex szerverein lesz tárolva.

A hirdető meg tudja számolni a videomegtekintés kezdeteit, ha a videó lejátszása gombra kattint, a következő JavaScript-hívást kell feldolgozni:
1. videó esetén: yandexHTML5BannerApi.reportVideoStart(1);
2. videó esetén: yandexHTML5BannerApi.reportVideoStart(2);

Az ilyen tesztelés során a szalaghirdetés nem fogyaszthatja el a processzorerőforrások több mint 50%-át a Feladatkezelő Teljesítmény lapján található adatok szerint (az UpdateSpeed ​​High értékre van állítva).
Egy szalaghirdetés túl sok erőforrást fogyaszt, ha a CPU-erőforrások több mint 50%-át használja fel észrevehető ideig (töredék/másodperc egység), vagy a maximális CPU-terhelés a csúcson meghaladja a 70%-ot.
A RAM-használat nincs optimalizálva; a további segédprogramok vagy a rezidens programok nincsenek betöltve az indításkor. Bejelentkezés után a különböző rendszerfolyamatok által elfoglalt memória mennyisége a Feladatkezelő szerint körülbelül 62-63 MB.