van egy bannerünk és ebből kiolvasnak kattintások. Más bannereknél, egyéb technikai szálaknál, és ott a kattintás másképp olvasható, most egy konkrét példán gondolkodunk.

Konténer bannerrel

A többi leckében elmondom, hogyan készítsünk 100%-os képernyőszélességű bannert animációval, és hogyan készítsünk el és készítsünk el egy elrendezést a weboldal elrendezéséhez az összes szabály szerint.

Fájlok a leckéből:

1. Kész FullScreen bannerek: kattints

Barátaim, üdv mindenkinek. Ma folytatjuk a bannerek készítését a programban Google web Tervező HTML5 formátumban, 3D hatással.

És ez érthető is, a html5-ben és css3-ban készített bannerek minden képernyőn megjelennek, számítógépen, tévén és mobil eszközök... Ugyanez nem mondható el a flash bannerekről.

Ezen túlmenően, ezek a bannerek lehet, csak használja, és a banner jól fog kinézni bármilyen képernyőn.

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

A főt és az oldalon való elhelyezését az utolsó cikkben már leírtam. Tehát ma a 3D effektus létrehozására és a hurok beállítására fogok koncentrálni (újramegjelenítés). És fontoljon meg néhány beállítást az "eseményekhez".

Meglehetősen nehéz ezt az egész folyamatot részletesen leírni, ezért figyelmébe ajánlok egy oktatóvideót. Így sokkal könnyebben elsajátítható lesz az anyag. Illusztrációként töltse le az archívumot a bannerem projektjével.

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

A transzparens végső formája 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 bele lesz írva html kódot, csak mindent helyesen kell összerakni 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 részeket:

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

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

Fontos átgondolni a szalaghirdetés általános összetételét és forgatókönyvét is. Ettől függ, hogy a bannert egészként miként fogják fel.

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

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

A 3D effektus egy összetett képet, azaz több darabból álló képet jelent, 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 a DIV blokk létrehozásához a bal oldali panelen válassza a lehetőséget "Eszköz a címkékkel való munkához (D)".

Ügyeljen arra, hogy azonosítót rendeljen hozzá. És méretezze át a szakasz segítségével "Tulajdonságok" a jobb oldali ablaktáblában.

Most ki kell választanunk a blokkot. Ehhez a bal oldali ablaktáblában válassza a lehetőséget "Kiválasztó eszköz (V) "és a bal egérgombbal duplán kattintsunk a DIV blokk keretére. Ugyanakkor a színe vörösre változik.

2. lépés. Rendezd el a képeket.

És most kezdődik a leggondosabb folyamat. Egyetlen kép minden elemét exponálni kell.

A következő elemek á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.

Ugyanígy adja hozzá az elülső oldalt. Igazítás és eltolás a Z tengely mentén.

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

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

Ezután adjuk hozzá az oldalát, az összes darabot külön-külön. Az elhelyezés megkönnyítése érdekében használjon szerszámokat "3D a munkaterület elforgatása "és "Skála"... Segítenek az összes részlet pontos illeszkedésében.

Kezdetben azt javaslom, hogy az összes képet az egyik oldalon sorakoztassuk fel, majd másoljuk le és helyezzük el a másik oldalon tükörvetítésben.

A következő lépés a bal felső sarok felépítése.

Most az oldal középső része.

Az alsó sarok pedig a bal oldalon van.

Ügyeljen arra, hogy az oldal minden elemét az Y tengellyel 90 0-ra igazítsa.

Most át kell másolni a kívánt réteget, majd újra beilleszteni, átnevezni és módosítani 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ályaoldalnál fentről lefelé, de csak a jobb oldalon.

Jobb felső sapka.

Az alsó részt nem én készítettem, mert a képen nem látszik.

A legnehezebb munkának vége. Most elkezdheti az animáció testreszabá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. Ez azt jelenti, hogy a blokkon belül konkrét képekkel dolgoztunk, és most egyszerre kell dolgoznunk az összes képpel, vezérelve a DIV blokkot.

Először kattintson a DIV gombra az alsó panelen.

Tehát az idő faházán a jobb egérgomb megnyomásával két kulcskockát hoz létre. Így kell kinéznie:

Állítsa be a forrás keret helyét az Y skálán -90 0 értékre.

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

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

Minden ellenőrizhető az eredmény. Ehhez kattintson a gombra Játék.

Igaz, a képünk csak egy fordulatot fog végrehajtani. Annak érdekében, hogy a kép folyamatosan forogjon, vagy több fordulatot hajtson végre, be kell állítania a ciklikus paramétereket.

Loop beállítása a Google Web Designerben.

A programban több lehetőséget is beállíthat a ciklikussághoz (ismétlések). Így beállíthatja az ismétlést a szalaghirdetés összes eleméhez vagy minden elemhez külön-külön.

Ezenkívül a ciklikusság korlátozható az ismétlések számával, vagy végtelenné tehető.

Az alsó panelen minden elem mellett szimbólumok találhatók "Kastély", "Szem", "Vissza nyíl".

Tehát a ciklus beállítá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.

Az animáció végtelen hurkolását választottam. Mivel a jövőben szeretnék konfigurálni "események" oly módon, hogy a forgatás leáll, amikor rámutat az egérmutatóra, és folytatódik a kurzor eltávolítása után.

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

Először is állítson be egy parancsikont az első kulcskockán (a sorban a másodikon). Ehhez nyomja meg a jobb egérgombot a keret felett, é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és forgása leáll, amikor az egérkurzor azon a kereten áll, ahol a parancsikont létrehozták.

A forgatás folytatása az egérkurzor mozgatása után.

A forgatás folytatásához a kurzor oldalra mozgatása után állítson be még egy 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érkimenet".

Esemény - egérrablás

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

Művelet – Folytatás

Elkészült tehát a 3D hatású bannerünk. És számtalan ilyen különböző hatásra gondolhat.

Csak ne felejtsen el eseményt létrehozni egy egérkattintással és a link megnyitásával. A transzparenst végül is nem a szépség kedvéért hozták létre.

Kezdetben ez a folyamat bonyolultnak tűnhet, de néhány banner elkészítése után már nem fog úgy tűnni.

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.

Banner HTML5- tetszőleges HTML-tartalmat vagy képet megjelenítő szalaghirdetés. A HTML kód lehet normál HTML oldal stílusokkal és forgatókönyvekkel. Belefér egy iframe-be és van korlátozott hozzáférés az oldal tartalmához.

A Banner HTML5 sablon használatával kétféleképpen adhat hozzá szalaghirdetést:
1.Csak a kép elkészítése. A link megléte a szalaghirdetés paramétereiben beállítja a kép kattinthatóságát.
2. HTML kreatív elkészítése a szerkesztőben az utasítások szerint: vagy.
Ha a HTML kódot és a képet is hozzáadja a szalaghirdetéshez, akkor a HTML kód jelenik meg.

Az ADFOX-hoz hozzáadva konfigurálható paraméterek:
- Banner szélessége, magassága.
- Egyedi css-stílusok a bannerrel ellátott tárolóhoz.

HTML kreatív fejlesztés

1. Ismerkedjen meg HTML kód követelményei

• A HTML-fájlok maximális megengedett mérete 65 000 bájt.
• Javasoljuk, hogy a JavaScriptet és a CSS-t a szalaghirdetés HTML-kódjában helyezze el. Ha az eredményül kapott HTML kód meghaladja a maximális méretet, akkor a kódot csökkenteni kell JavaScript és CSS elhelyezésével. külön fájlokat:
  - mentse el a js-t és css kódot külön fájlokban .js vagy .css kiterjesztéssel;
  - a fájlok tömege nem haladhatja meg a 300 Kb-ot;
  - Fájlok feltöltése a "Fájlok" fülre reklámkampányés a kapott fájlokra mutató hivatkozásokat bele kell foglalni a HTML-kódba.

  Példa a js és css fájlok összekapcsolására:

  A relatív fájl elérési útja nem engedélyezett a HTML-kódban.

• Egy projektben csak egy .html fájl lehet.
• A fájlok maximális száma egy projektben 50;
• A projektben engedélyezett fájltípusok: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Az egyes fájlok maximális mérete (az archívumban lévő fájlokra is érvényes):
  - 300 Kb;
  - 1 MB videofájlokhoz.
• A fájlnevek csak az angol ábécé számait vagy betűit, az aláhúzás karaktert tartalmazhatják. Nem megengedett orosz betűk, szóközök, idézőjelek és speciális karakterek használata a fájlnévben;
• Az orosz betűk nem használhatók változók és objektumok nevében.
  Az egyetlen kivétel a szalaghirdetésen található szöveg.
• Formátum kész projekt - postai irányítószám archívum.

Képkövetelmények

Használj képeket nagy felbontású, ez radikálisan javítja a szalaghirdetés minőségét mobileszközön, bár csökkenti a szalaghirdetések betöltési sebességét.

Használhat SVG képeket. Vektor alapúak, ami azt jelenti, hogy minden eszközön jobban fognak kinézni – mobilokon és asztali számítógépeken. Kis fájlmérettel is rendelkeznek, és animálhatók.

Elfogadott képformátumok: png, gif, jpg, svg.
Egy fájl maximális mérete: 300 Kb.

2. Válassza ki azt a szerkesztőt, amelyben HTML kreatívot kíván fejleszteni, és kattintson a megfelelő hivatkozásra. Készítsen archívumot HTML-creative segítségével az utasítások szerint:

Adobe Animate CC Editor – egygombos szalaghirdetés

Adobe Animate CC Editor – többgombos szalaghirdetés

1. Töltsön le egy sablont több gombos szalaghirdetéshez

2. Hozzon létre egy HTML5 Canvas projektet az Adobe Animate programban (vagy nyisson meg egy meglévőt)

3. Gombok vagy egymásba ágyazott filmklipek hozzáadásakor fontos ezek beállítása példány neve hogy ezután egy kattintást adhasson a kívánt gombokhoz. Javasoljuk a címek használatát gomb1 - gomb9.

Lásd még:

Útmutató a gomb hozzáadásához és a példánynév hozzárendeléséhez

Nagyszínpad gomb

1. Hozzon létre egy objektumot a színpadon, például a Téglalap eszközzel.
Ezután jelölje ki, és lépjen be helyi menü válassza a "Konvertálás szimbólummá ..." lehetőséget

2. A megjelenő párbeszédpanelen válassza ki a Típus: Gomb, Név változatlanul hagyható, kattintson az OK gombra.

3. Adjon ennek a gombnak egy példánynevet, hogy a kattintás működjön.

4. Adja hozzá a következő kódot a gomb műveleteihez:

Window.buttons.push (// A gombok vesszővel elválasztott elérési útjai, először ezt adjuk hozzá this.button1 // A gombköz vége);

Beágyazott gomb

1. Tegyük fel, hogy a gomb egy másik szimbólumban található, például egy film klipén belül.
Ebben a példában ez a filmklip a Példánynév "név" értékre van állítva

2. Által dupla kattintás menj be a névbe, ott lesz egy beágyazott gomb.

3. Ha az Actions-ben megadja egy ilyen gomb elérési útját, akkor ezt követően hozzá kell adnia annak az objektumnak a példánynevét, amelybe be van ágyazva:

Window.buttons.push (// Vesszővel válassza el a gomb elérési útját, először ezt adja hozzá a this.name.button1 // A gombterület vége);

Útmutató az átlátszó gombok létrehozásához

1. Válassza ki a kívánt elemet, és alakítsa át szimbólummá

2. Adjon meg egy nevet, és válassza a Típus: Gomb lehetőséget

3. Kattintson duplán a szimbólumra a navigáláshoz:

4. Kulcskeret beszúrása a találati keretbe

5. Törölje a keretek tartalmát felfelé, fölé, lefelé

6. Az átlátszó gomb készen áll:

4. Adja hozzá a Műveletek réteget a projekthez (hozzáadjuk a gombok kódját)

5. Nyisson meg egy ablakot a kód írásához

Window.buttons.push (// Vesszővel válassza el a gomb elérési útját, először ezt adja hozzá // A gombterület vége); setAdfox ();

Ha a gomb a fő jelenetben van, akkor például közvetlenül ez után írja be a példány nevét

Ez.gomb1

Ha a gomb egy beágyazott jeleneten belül van, akkor ezután először írja be a jelenet példánynevét, majd a gomb példánynevét:

This.scene_példány_neve.button2

Példa az eredményül kapott kódra a Műveletek rétegben:

Window.buttons.push (// A gombok vesszővel elválasztott elérési útjai, először ezt adjuk hozzá this.button1, this.scene_instance_name.button2 // A gombterület vége); setAdfox ();

7. A kódsorban lévő első gomb az első hivatkozást hívja meg az ADFOX-tól, a második a másodikat, és így tovább.

A HTML-kreatív mellett adjon tájékoztatást a menedzsernek, aki hozzáadja a szalaghirdetést az ADFOX-hoz, a gombok és a hivatkozások számainak megfelelőségéről.

8. Nyissa meg a közzétételi beállításokat, csatlakoztassa a sablont az első bekezdésből, és tegye közzé a projektet a kívánt könyvtár kiválasztásával.

9. A projekt közzététele után tömörítse .zip formátumban. A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.

Google Web Designer szerkesztő

A szalaghirdetés kódja alapul szolgálhat kreatívok létrehozásához a szerkesztőben.

A sablon szkriptet tartalmaz adfox_HTML5.jsés egy sor paraméterkészlet az átmenetek és események számlálása helyes működéséhez:
% referencia%,% felhasználó1%,% eseményN%, ahol N az eseményszám 1 és 30 között.

2. Kattintson a kezelésre.

Minden esemény adott animációs elemekhez van rendelve az Események lapon.

A Tap Area komponens műveletek meghívására szolgál.
Adja hozzá, és válasszon eseményt Érintse meg a területet -> Tap / Click(vagy "Tap Area> Touch / Click" az angol verzióban).

Ban,-ben " Saját kód"adja meg a kattintás funkció hívását.

2.1 Ha egyetlen ugrásgombot használ:

CallClick ();

2.2 Ha több navigációs gomb van:

CallClick (n);

ahol n

2.3 Ha animációból kell eseményt meghívnia átmenet nélkül, használja a következő kódot:

CallEvent (n);

ahol n- a kiváltani kívánt esemény száma.

A nyújtó (gumi) banner megvalósításának sajátossága.

Annak érdekében, hogy a szalaghirdetés végignyúljon a tároló szélességében, amelyben elhelyezni fogja, a webhelyen, a panelen Tulajdonságok a pozícióhoz és a mérethez adjon meg százalékot a képpontok helyett.

Használjon opciókat is "Igazítás a tárolóhoz"és "Gumi elrendezés" a felső panel eszközöket.
Ha az igazítási eszközök bármelyikének használata előtt engedélyezi a Fluid Layout funkciót, akkor a szülőtároló átméretezésekor az összes elem egymáshoz és a tároló méreteihez viszonyítva lesz igazítva.
Ebben az esetben egyszerre használhatja az elemek relatív méretét százalékban és abszolút - pixelben.

4. A projekt közzététele.

Amikor bannert ad hozzá az ADFOX-hoz, a menedzsernek ismernie kell a gombok és az eseményszámok megfelelését. A menedzser minden eseményhez saját linket ír elő a navigációhoz, amelyet aztán egy változó segítségével továbbít a szalaghirdetés kódjához.

A projekt közzététele után csomagolja be a formátumba .postai irányítószám... A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.

Más szerkesztők

1. Kattintások számolása egy szalaghirdetésben

A szalaghirdetés ADFOX-ban történő kattintásainak statisztikájának kiszámításához be kell állítania egy változót a HTML-kódban a címkében és a href attribútumban:

% banner.reference_user1%

Linkhasználathoz is cél attribútum a% banner.target% változóval az attribútum értékében.
Ha az attribútum hiányzik, akkor a link megnyílik az iframe-en belül, vagyis a hirdetett oldal a bannertérben nyílik meg.

Példa HTML-kódra a szalaghirdetésekre leadott kattintások számlálásához:

Hirdető honlapja

A mobilalkalmazásokban elhelyezett szalaghirdetések HTML-kódjában használja a makrót a kattintások nyomon követésére: %reference%@%banner.user1%

2. Egy szalaghirdetésben található több linkről származó kattintások számlálása

Tegyük fel, hogy a szalaghirdetésen több link is található, amelyekre navigálni lehet különböző oldalak hirdetett webhelyet, és mindegyikre meg kell szereznie a kattintások számát.

Első link Második link

Cserélje le a href attribútum értékeit változókra %request.reference%@%banner.eventN%, ahol N helyett egy eseményszámnak kell lennie 1-től 28-ig.
Például:

Első link Második link

A hivatkozások és a változók egyezését jelenteni kell a bannert az ADFOX-hoz hozzáadó menedzsernek. Mivel szalaghirdetés hozzáadásakor meg kell adnia az 1. esemény első hivatkozását az „Események” lapon, és a második hivatkozást a 2. eseményhez.

Banner hozzáadása az ADFOX-hoz

Ha szalaghirdetést szeretne hozzáadni az ADFOX-hoz, válassza ki a kívánt szalaghirdetés típust és sablont "HTML5 szalaghirdetés".

Adja meg a szalaghirdetés paramétereit:

Archiválás HTML5 kreatív segítségével- töltse le a .zip archívumot a projekttel, mezővel "HTML5 kreatív kód"üresnek kell maradnia (a szalaghirdetés hozzáadása után a projekt .html fájljának tartalmával lesz kitöltve).

HTML5 kreatív kód- töltse le a zip-archívumot a projekttel, elkészítve HTML szerkesztők vagy illessze be a HTML kódot.

Ha több link is van a szalaghirdetésben, adja hozzá őket a laphoz Események a szalaghirdetésnél, az átmenet URL mezőiben.
A link- és eseményszámok egyezéséről érdeklődjön a HTML-kreatív fejlesztőinél.

Hivatkozás a referenciapixelre- Alapértelmezés szerint az ADFOX pixel van használatban //banners.adfox.ru/transparent.gif, ha szükséges, kövesse nyomon a benyomásokat harmadik féltől származó rendszer, távolítsa el a pixel ADFOX-ot, és adjon meg egy másik hivatkozást.

Hirdetés szélessége (px vagy%)- adja meg a banner szélességét.

Hirdetés magassága (px vagy%)- adja meg a banner magasságát.

Kép- képet feltölteni.
A hirdetések megjelenítésének feltételei:
- hozzáadott HTML kód és kép - HTML kód jelenik meg.
- kép hozzáadva - a kép megjelenik.
- hozzáadott HTML kód - HTML kód jelenik meg.

A szalaghirdetés-tároló osztályattribútumának neve- adjon meg egy nevet (vagy több nevet szóközzel elválasztva) a szalaghirdetéssel ellátott tároló osztály attribútuma számára.

SafeFrame használata (igen | nem)- A safeFrame egy olyan technológia, amely a hirdetéseket egy speciális iframe-be csomagolja, amelynek szigorú API-ja van. A SafeFrame nem engedélyezi, hogy a benne megjelenített hirdetések adatokat gyűjtsenek és interakcióba lépjenek az oldal többi részével a safeFrame kereten kívül.
igen - engedélyezze a safeFrame használatát, és tiltsa le a hozzáférést a weboldalhoz;
nem – ne engedélyezze a safeFrame-et. A banner kódja hozzáfér a weboldalhoz.

Banner blokk stílusok- tetszőleges stílusok a szalaghirdetés-tárolóhoz egy sorban. A stíluson kívül: kijelző. Például: "szegély: 1 képpont folyamatos piros;". Az érvénytelen értékeket a böngésző elveti.

Banner (angol banner - zászló, banner) - reklám jellegű grafikai kép, hasonló a sajtó reklámmoduljához. Ez lehet statikus kép vagy akár szöveg, vagy tartalmazhat animált elemeket (legfeljebb videót és interaktív objektumokat). Általában tartalmazhat egy hiperhivatkozást a hirdető webhelyére vagy egy olyan oldalra, amelyen szerepel további információ... A banner feladatai a következők. Először is adja el a terméket. Így - vonz a látogató figyelme, érdeklődés potenciális ügyfél meghirdetett terméket vagy szolgáltatást, nyomja meg, hogy menjen az oldalra és cselekvésre késztet(Cselekvésre ösztönzés). A CTA a reklám végső célja. Másodsorban pedig a banner feladata az imázs- vagy márkareklám, melynek célja növelje a márka ismertségétés pozitív márkaimázst építeni.

Népszerű hirdetéstípusok az oldalon:

• Grafikus- egy egyszerű banner az interneten történő reklámozáshoz. Egy bizonyos méretű képből áll, és egy hirdetési forrásra mutató hivatkozást tartalmaz.
• Flash banner- nagyszerű animációs lehetőségeket kínál, lehetővé teszi az információk jobb közvetítését vektoros és raszteres grafika kombinációjával.
• HTML5 banner- HTML elemek kombinációja animációkkal és jó vizuális dizájnnal, bármilyen eszközhöz és böngészőhöz igazítva.

A fő különbségek a HTML és más típusú bannerek között
A szalaghirdetések készítésének más módszereihez képest a HTML5-technológiák számos előnnyel rendelkeznek a közönség vonzására egy erőforráshoz:

• Az ilyen formátumú hirdetések minden eszközön ugyanúgy jelennek meg, további böngészőbővítmények nélkül.
  A HTML5 további lehetőségeket kínál a beépítéshez hirdetéseket nyomtatványok, gombok közösségi hálózatok, naptárak, térképek és egyéb alkalmazások.
• A kis súly és a kevesebb erőforrás használata nem befolyásolja az oldalak böngészőben való betöltésének sebességét. A flash technológiák nem teszik lehetővé ennek az eredménynek az elérését.
• A HTML5 szalaghirdetések hatékonyságának felméréséhez megtekintheti a statisztikákat a következő helyen: A Google Analytics... Itt különféle információkat találhat a vendégekről, és kattintson a linkekre.

A flash technológia jelentős hátulütője az olyan nagyvállalatok fokozatos elhagyása volt, mint az Apple, a Mozilla és az Amazon. A Google volt a fő hajtóerő a Flash eltűnésében. Először kikapcsolták a Flash-animációt Google Chrome majd elhagyták a Flash-hirdetéseket a keresési hirdetési szolgáltatásaikban a HTML5 javára.

HTML bannerek készítésének módjai
A banner fejlesztése egy külön oldal létrehozásával kezdődik, és egy "iframe"-en keresztül beágyazódik az oldalba. Számos fejlesztési módszer létezik reklám bannerek az oldalra, a legnépszerűbbet fogjuk figyelembe venni.

1. Hozzon létre egy keretet CSS3-mal és JavaScripttel
A keret lehetővé teszi, hogy bármilyen független dokumentumot betölthessen egy meghatározott méretű területre. Ez lehet egy másik HTML-kód, amely stílusokat és szkripteket használ dekorációként. Lehetőség van egy banner megvalósítására a "vászon" területen keresztül is, amelyben animációk, rajzok, grafikák, sőt játékok is készülnek JavaScript segítségével. A fejlesztés felgyorsítása érdekében megengedett a harmadik féltől származó könyvtárak, például a CreateJS használata.

Előnyök:

• A funkcionalitást semmilyen program nem korlátozza, bármit megvalósíthat.

Hibák:

• Ez a folyamat meglehetősen bonyolult, és különleges elrendezési készségeket igényel.
• Időben jelentős munkaerőköltségek más módszerekhez képest.

2. Adobe Edge Animate
Az Adobe ismerőinek Utóhatás, az Adobe Edge Animate felület nagyon ismerős lesz. Az Adobe Edge Animate korlátozottabb funkciókkal rendelkezik, amelyek célja egyszerű animált tartalom fejlesztése HTML5, JavaScript és CSS3 használatával. A program támogatja az olyan formátumok importálását, mint.svg, .png, .jpeg, .gif, HTML; videó és audio formátumok támogatása.

Több mint 30 beépített effektus van, amelyek többszörösen leegyszerűsítik a kiváló minőségű animáció elkészítésének idejét:

Előnyök:

• Az interneten számos oktatóvideó található a program használatáról.
• Egyszerű funkcionalitás, a folyamatok többsége automatizált.
• A program nem igényel HTML5, JavaScript és CSS3 ismereteket.
• A munka végeztével megkapjuk az összes szükséges dokumentumot a banner elhelyezéséhez az oldalon. Képek - mappa banner grafikai elemekkel, több JavaScript fájlok, html és An formátumú fájl - a fájl későbbi szerkesztéséhez a programban.
• A Ready bannert mindenki támogatja modern böngészőkés mobil alkalmazások, megfelel a Yandex és a Google hirdetési kampányaira vonatkozó összes műszaki követelménynek.

Hibák:

• A felület csak angol nyelvű.
• 2015 óta az Adobe leállította az Adobe Edge Animate projekt fejlesztését, a program azóta nem frissült, és elérte a fejlesztési határt. Az Edge Animate továbbra is letölthető a Creative Cloud archívumából.

3. Adobe Animate CC
Az Animate CC egy átnevezett termék Adobe Flash Szakmai. Az utóbbi időben a Flash technológia elvesztette a felhasználók bizalmát, a program névváltoztatásra és számos fejlesztésre szorult. Lényegében ugyanaz Flash program Professzionális, de a fájlok ezenkívül HTML5-ben és JavaScriptben vannak mentve.

A felület nagyon hasonlít a Flash Professional-hoz, de a programok képességei eltérnek.

Előnyök:

• Háromdimenziós grafika létrehozásának képessége. Van egy kameraeszköz, amely lehetővé teszi a kép mélységének rögzítését valódi animációhoz.
• Az Edge Animate-tel ellentétben az Animate CC rendelkezik nagy választék vektor ecsetek és a raszteres grafikával való munka képessége.
• A program viszonylag új, ezért az Adobe aktívan fejleszti a projektet, frissítéseket ad ki és fejleszti az Animate CC-t.
• Van orosz nyelvű változata.
• Bővített lehetőségek a fájlok formátumokba történő exportálására: JavaScript / Html, jpeg, png, oam, svg, mov, gif. Egy gombnyomással a banner elemei a sprite-okba kerülnek, ezzel csökkentve a banner betöltési idejét.

Hibák:

• Hátrány a program újszerűsége is. Nincs annyi oktatóanyag az animációk létrehozásához az Animate CC-ben, mint az Adobe Edge Animate-ben. Ezért egyes funkciók munkáját önállóan kell tanulmányozni, ami nem könnyű. A program elég összetett ahhoz az önálló tanulás, de kitalálhatod.
• Egyes funkciók nem automatizáltak, mint az Edge Animate esetében, ami szintén megnöveli a szalaghirdetések létrehozásának idejét.

4. Google Web Designer
A Google boldoggá tett minket ingyenes szerkesztő kifejezetten a html-bannerek megvalósításához készült. A Google Web Designer teljes mértékben a hirdetések megvalósítására irányul, amelynek fő elfogultsága az AdWords felé irányul.

Ha megnézzük az új fájl létrehozására szolgáló ablakot, észrevesszük, hogy a program már beépített hirdetéssablon-méretekkel rendelkezik.

Előnyök:

• Egyszerű felület.
• Sablonok elérhetősége a Google-on való hirdetéshez.
• Teljesen ingyenes program.
• Az orosz nyelvű verzió elérhetősége.
• Lefektetett adaptív kialakítás bannerek, a html-banner bármilyen képernyőfelbontásban jól fog kinézni.

Hibák:

• A Google Web Designer funkcionalitása elég szűk ahhoz, hogy animációs remekműveket hozzon létre. A programot erősen korlátozzák a sablonok.
• Képzési programok hiánya. A Google Súgó nem elegendő a funkciók teljes körű betanításához.

A fent bemutatott módszerek mindegyike nem új, de bevált. Ez azt jelenti, hogy garantált, hogy a létrehozott html-bannerek moderálásra kerülnek a legtöbb hirdetési platformon, mivel műszaki követelményeik megfelelnek az általános szabványoknak.

HTML5 bannerek

2299 dörzsöléstől.

DÖRZSÖLÉS

Rendelni

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

Az ilyen elutasítás fő okai a következők:

• követelések halmozódtak fel a Flash technológiával szemben a számítógépes biztonság és a mobileszközök megnövekedett feldolgozási teljesítményének területé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 reklámblokkolók 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 mindenekelőtt a közönség elérésének 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 magára vonja a felhasználó figyelmét, és még interakcióba is lép vele (interaktív banner).

Ami az animációt illeti, egy ilyen banner megjeleníthet vektoros animációt (veszteségmentes méretezés), karakterek animációját, fényképeket, logókat, grafikonokat és diagramokat, szöveget, sőt 3D animációt is. Interaktív szempontból 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ére kiterjedhet, további paneleket tárhat fel, vagy teljes képernyőre bővülhet.

Vessünk egy pillantást a HTML5 bannerek főbb típusaira.

Fix méretű animált HTML5 banner.
A legtöbb hirdetési hálózaton a legnépszerűbb formátum. A szükséges bannerek szélessége és magassága az elhelyezésre elfogadott bannerek listájából kerül kiválasztásra. Mindig megmutatjuk a leggyakoribb méreteket.

Nyújtó HTML5 szalaghirdetés (reszponzív, gördülékeny).
Ez egy szalaghirdetés, amely a képernyő teljes szélességét (néha magasságát) kitölti. (További részletek ebben a cikkben találhatók)

Teljes képernyős HTML5 banner.
Teljes képernyős banner. Á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.

Egy ilyen szalaghirdetésnek gyakran érzékenynek kell lennie ahhoz, hogy megfeleljen a mobileszköz különböző tájolásának és felbontásának.

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

HTML5 videó banner.

A hirdetési platform beállításaitól és követelményeitől függően videót is tud megjeleníteni, mind automatikus indítással, mind a „Play” gomb megnyomása után. Vezérlőgombokat és némítógombokat tartalmazhat. A videofájlt általában külső tárhelyen tárolják, és megjelenítéskor feltöltik.

Játék interaktív bannerek.
Bannerek, amelyek arra ösztönzik a felhasználót, hogy egyszerű műveletek végrehajtásával 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ékoztatni fogjuk Önt ezekről a funkciókról, ha egy játék HTML5 szalaghirdetésén gondolkodik.

Intelligens HTML5 bannerek (számítógépek).
Arra használják, hogy kapcsolatba lépjenek a felhasználóval, és azonnali megoldást kínáljanak neki a szükséges paramétereketés egy belső algoritmus által meghatározott képlet (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 azonnal módosítania kell a bannereken a fejlesztő segítségének igénybevétele nélkül (például gyakran változó árak, százalékok vagy árajánlatok). Egy ilyen feladattal meg tudunk birkózni, és a szükséges paramétereket közvetlenül a banner HTML-kódjába tudjuk kiadni, ahol az ügyfél önállóan módosíthatja. Egy másik kényelmes megoldást kínálhat a banner által használt adatok külső fájlokba történő kiadására.

HTML5 bannerek, amelyek külső adatokkal és API-betöltéssel működnek.
A Ebben a pillanatban sok hirdetési hálózat tiltja a szalaghirdetés elérését külső források... Ha azonban egy ilyen lehetőséget biztosító oldalon banner kerül elhelyezésre, akkor egy HTML5 banner az oldal API-ján keresztül lekérheti a szükséges információkat (szöveg, számok, idézőjelek), és ezek adott algoritmus szerinti feldolgozása után megmutathatja a felhasználó.

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

A HTML5 3D banner megvalósítható forgó objektumként, melynek szélei banner kereteket tartalmaznak, legördülő könyvként, vagy egyéb 3D effektusok felhasználásával.

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 kifeszíthető, és a felhasználói műveletek alapján háromdimenziós animáció bontakozhat ki az oldalon.

Ha HTML5 bannert szeretne rendelni weboldalunkon, és egy kreatív ötlethez különböző formátumok kombinálása szükséges, szakembereink ezt bármikor megtehetik.

HTML5 banner – mi ez technikailag?

A legjobb, ha egy HTML5 bannert mini weboldalnak tekintünk. Nem túlzás.

A HTML5, amely ennek a szalaghirdetésnek a nevét adta, a weboldalak jelölőnyelve, más szóval az elrendezés. És ugyanazok a törvények szerint vannak szedve, mint bármely modern webhely. Tartalmazhat div konténereket, csatlakoztatható betűtípusokat, css stílusokés js szkriptek. A fő elem a vászonanimációs tároló. Maga az animáció java szkript segítségével valósul meg, gyakrabban 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 "flash drive". De ne feledje, ahogy fentebb írtuk, a HTML5 banner valójában egy mini-webhely. Sok fájlt tartalmaz, és egy zip-archívumban érkezik a hirdetési webhelyről. Az archívumban található a fő HTML-fájl, a java szkriptfájlok, a könyvtárak, a stíluslapok és a 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. Ez a követelmény azonban meghosszabbítja a szalaghirdetés elkészítésének és módosításának idejét. Szerencsére ez a követelmény nem általános.

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és lett-e megjelenítve számomra?

Ha egy banner reklám céljára készül Google szolgáltatások, akkor az Ön szolgálatában áll egy kiváló eszköz a tervezők munkájának minőségének ellenőrzésére – a Google on-line HTML5 validátora. Könnyen használható: töltse le a zip-archívumot egy szalaghirdetéssel, és nézze meg, hogy megfelelt-e az ellenőrzőlistán. A hibákat piros ikonok jelzik. Ha nincsenek ott, akkor a fejlesztő nem dolgozott hiába, és a banner készen áll a behelyezésre Google AdWords vagy Dupla kattintás.

A Yandex, Mail.ru, Rambler, adFox, adRiver és mások hirdetési hálózataiban a bannert is ellenőrzik, hogy megfelel-e a műszaki követelményeknek, miután feltöltötték a rendszer webhelyére. Probléma esetén a moderátor megjegyzést kaphat a hibáról. Egyes oldalak lehetőséget biztosítanak a hirdető ügyfeleknek előnézet banner a tesztoldalon.

Mindazonáltal a HTML5 bannerek helyes elkészítésének legjobb garanciája a fejlesztő tapasztalata, a hirdetési platformok műszaki követelményeinek ismerete és a gyors hibajavítási készség.

Különböző egy Java Script animációt tartalmazó szalaghirdetés?

Ne légy összezavarodva. „Java Script banner”, „Canvas banner” – pontosan ezeket szokták „HTML5-szalaghirdetésnek” nevezni. A fejlesztő eszközétő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 legnépszerűbb HTML5 animációs szerkesztő a tervezők körében - Adobe programÉlő.

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: AdWords és Double Click. A hátrányok közé tartozik a korlátozott animációs képességek.

Egyes tervezők, gyakrabban amerikaiak, 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 a legegyszerűbb módon is tud HTML5 bannert készíteni szöveg szerkesztő... 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;
• engedélyezett fájlformátumok listája;
• az URL-hivatkozások engedélyezése a szalaghirdetésre kattintva (banner 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.

És ez 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 a kihelyezésre és a reklámkampány azonnali elindítására.

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ő online Flash-szalaghirdetés HTML5-re konvertáló) pedig leállt.

A Flash-formátum automatikus konvertálása HTML5-re szinte lehetetlen – ez tulajdonképpen egy teljes kézi újraépítést igényel a 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.

De mi a helyzet a "gifekkel"?

Meg kell értenie, hogy minden GIF-animáció keretképek egymás utáni halmaza, akárcsak a videofájlokban. A GIF fájl információkat tartalmazhat a képkockasebességről és az ismétlések számáról. Ez korlátozza a lehetőségeit.

A GIF szalaghirdetés nem használható vektoros grafika, animációt készítsen programozottan, alkalmazkodjon a kívánt mérethez é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 bannerekre is vonatkozik. Minden nagyobb hirdetőoldal szigorú korlátozásokat ír elő a banner kilobájtban kifejezett súlyára vonatkozóan.

Egy GIF szalaghirdetés alkalmas több statikus keret megjelenítésére, esetleg egy kis szöveg-animációval, gombokkal vagy fényképek módosításával. Ebben az esetben a GIF banner összsú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ámai”, azaz drámaian megnő. Gyakori a 20 másodperces, több megabájt súlyú GIF. És nagyon nem szeretem hirdetési hálózatok akik joggal aggódnak amiatt, hogy mekkora forgalmat kell letöltenie a felhasználónak a banner megtekintéséhez.

Tehát, ha különféle animációs effektusokat tartalmazó bannerre, karakteranimációra, interaktív, reszponzív vagy videós bannerre van szüksége, akkor a HTML5 banner rendelése mellett dönt.