====== Bevezető ======
:!: **Figyelem!**
**Az útmutatók ezen dokumentáció publikálásával egy időben aktuális programverziókhoz készültek. Mivel ezek az eszközök is fejlődnek, egy új verzió megjelenésével az útmutatók elavulhatnak. Amennyiben a leírtak nem hoznák a várt eredményt, kérjük ezt jelezze a emailben kollégáinknak a** [[support@adverticum.com]]** címen.**
Jelen útmutató az easyHTML Banner sablon követelményeinek való megfelelésben nyújt segítséget. Ezeket teljes terjedelmükben itt lelhetőek fel: [[http://dev.adverticum.com/creatives:ehtml]]
Alább a gyakrabban használt szerkesztő és konvertáló eszközök által előállított bannerek kódjainak átalakításában kívánunk segítséget nyújtani, software specifikus lépéseken keresztül.
===== Adobe Animate CC-vel készült bannerek átalakítása és felvétele =====
=== 1.) Nyissuk meg a .html file-t egy szövegszerkesztőben (pl.: Notepad++) ===
=== 2.) A goa-helper.js hozzáadása ===
A goa-helper.js beüzemeléséhez csak illesszük az alábbi sort a banner tagjába. Minden funkció, mely ezekre a funkciókra és változókra hivatkozik ez után kell, hogy kerüljön.
=== 3.) Kattintások kezelésének kialakítása ===
Kattintások kezeléséhez a goa.clickTAG változót kell kiolvasnunk, és az alábbi módon felhasználnunk.
Az tag azt a felületet teszi kattinthatóvá, mely a nyitó és a záró része között található. Ha azt szeretnénk, hogy a teljes kreatívunk kattintható legyen, a nyitó () taget a kreatívot tartalmazó wrapper elején, a záró taget () pedig a végén kell meghívnunk.
Például:
===== A banner felvétele az AdServerbe =====
Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]]
----
====== Adobe Edge kódok átalakítása és felvétele ======
Az Adobe Edge a Flash helyettesítésére szánt HTML5 képes szerkesztő szoftver, bővebb információ az alábbi linken érhető el:
[[https://creative.adobe.com/products/animate]]
A kódon kell kisebb változtatásokat eszközölni, hogy minden referencia és a kattintás is megfelelő legyen az easyHTML Bannerként való futtatáshoz. Ennek menetéről és az átalakított kód felvételéről alább. Az easyHTML bannerek megkötéseiről általánosságban az alábbi linken írunk:
[[http://dev.adverticum.com/creatives:ehtml]]
===== A banner átalakítása =====
**1.** Az Edge-el előállított kreatív mappákba rendezi a hivatkozott állományokat. Első lépésként mozgassunk ki minden ilyen állományt, hogy a ''.html'' file-al egy mappában legyenek közvetlenül.
**2.** Nyissuk meg a ''.html'' file-t, egy szövegszerkesztőben (pl.: Nodepad++).
**3.** Keressük meg az '''' kifejezést a banner '''' tag elején, és illesszük be az alábbi sort ez elé:
Ez után valahogy így kell kinéznie az idevágó résznek:
Untitled
**4.** Nyissuk meg a bannerhez tartozó ''.js'' állományt egy szövegszerkesztőben (pl.: Nodepad++).
:!: **Figyelem!**
* A különböző verziójú Edge-el készült bannerek esetén eléképzelhető,hogy több .js állomány is érkezik a bannerhez.
* 5.x.x esetén például a **3.** lépést az bannerNeve_edge.js-ben kell elvégezni, még a **4.**-et a bannerNeve_edgeActions.js-ben.
* Ezzel szemben 6.x.x esetén minden módosítást a bannerNeve_edge.js-ben kell kivitelezni.
**5.** Keressünk rá az alábbi kifejezésre:
''images/''
Itt egymás után találjuk a következő mappa hivatkozásokat (a kódból csak a fontos részt emeltük ki):
/*...*/ ;var im='images/',aud='media/',vid='media/',js='js/',fonts= /*...*/
Ezeket üres ''string''-re kell cserélnünk, hogy a kód ezután így nézzen ki, ezzel elérve, hogy a banner maga mellett keresse a képeket, és ne a mappákban, ahol korábban:
/*...*/ ;var im='',aud='',vid='',js='',fonts= /*...*/
**6.** A kattintások kezeléséhez, az alábbi kifejezésre keressünk:
''window.open''
Ekkor a következő kódrészlethez hasonló kódot kell keresnünk (ismét, csak a lényeges részt emeltük ki):
/*...*/ "click",function(sym,e){
window.open("http://adverticum.com","_blank");
});
Ahhoz, hogy ne kelljen beégetni a cél URL-t a kódba, az alábbi kódsort illesszük a meglévő link helyére:
goa.clickTAG
Az átalakítás után, pedig így kell kinéznie a kódnak:
/*...*/ "click",function(sym,e){
window.open(goa.clickTAG,"_blank");
});
:!: Itt fontos odafigyelni, hogy az URL mögött ''"_blank"'' szerepeljen, mert különben nem új ablakban nyílik majd meg a cél URL.
**7.** Ha a banner záró és/vagy nyitó függvényeket alkalmaz, akkor az alábbi leírásban foglalt példakódokat alkalmazzuk a nyitó/záró/eltűntető gombokon:
[[http://dev.adverticum.com/creatives:ehtml#funkciok_hasznalata]]
===== A banner felvétele az AdServerbe =====
Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]]
----
====== Google Web Designerrel készült bannerek átalakítása és felvétele ======
A Google Web Designer [röviden: GWD] egy HTML szerkesztő program, mely ingyenesen elérhető az alábbi linken:
[[https://www.google.com/webdesigner/]]
A GWD-vel készült bannerek könnyen átalakíthatóak Adverticum kompatibilis easyHTML Bannerré. Ennek menetéről és az átalakított kód felvételéről alább. Az easyHTML bannerek megkötéseiről általánosságban az alábbi linken írunk:
[[http://dev.adverticum.com/creatives:ehtml]]
===== A banner átalakítása =====
**1.** Navigáljunk a publikált banner mappájába.
**2.** Nyissuk meg az említett ''.html'' file-t egy szövegszerkesztő programmal (pl.: Nodepad++).
**3.** Keressük meg a '' '' lezáró elemet, és ez elé illesszük be az alábbi sort: