Tvornica Bannera

Kada se Adobe zbog Flash Playera našao u problemima, njegovi developeri su se požurili pokazati nam svog konja za utrku i predstavili su nam Adobe Edge – računalni program za izradu animacija pomoću HTML, CSS i JavaScripta, trenutno dostupan samo u testnoj verziji. Zbog prirode posla ovaj alat nam je vrlo zanimljiv pa smo se njime i pozabavili te odlučili podijeliti s vama par informacija koje bi vam mogle biti od koristi.

Anatomija Edge animacije

Kada animaciju privedete kraju i kliknete na Save, Edge će generirati sve potrebne fajlove kako bi je sa par klikova objavili na Internetu. Ako zavirite u generirani HTML primjetit ćete da se skripte i CSS pozivaju u head elementu te da postoji prazan div element sa specifičnim id i class atributima koji čeka na učitavanje skripti.

Generirani fajlovi:

HTML

• banner.html

CSS

• banner_edge.css

Skripte

• jquery-1.6.2.min.js
• edge.0.1.3.min.js
• edge.symbol.0.1.3.min.js
• jquery.easing.1.3.js
• banner_edge.js
• banner_edgeActions.js

Slike

Ako pretpostavimo da klijent bannere distribuira preko nekog ad management softvera (npr. OpenX-a) nemoguće je u ovakvom obliku isporučiti banner napravljen u Edge-u. Postoji nekoliko varijanti kako to možete učiniti:

1. prebaciti script elemente u div i izbaciti CSS
2. spojiti sve skripte u jednu
3. iframe
4. dinamički učitati sve potrebne elemente

Hostanje bannera

Za koje god rješenje se odlučili jedno je sigurno: HTML, CSS, skripte i grafiku morate postaviti na neki server. Preporučujemo da na serveru rezervirate jedan folder za javascript biblioteke te ih sa te lokacije pozivate u sve bannere koje budete radili. Tim ćete si olakšati održavanje animacija kako budu dolazile nove verzije jQuery-a i Edge biblioteka.

1
2
3
4
5
6

server
 + inc
   - jquery-1.6.2.min.js
   - edge.0.1.3.min.js
   - edge.symbol.0.1.3.min.js
   - jquery.easing.1.3.js

Skripte koje su jedinstvene za svaku animaciju, HTML, CSS i grafiku smjestite u posebne foldere. Mislimo da je najbolje rješenje za svakog klijenta kreirati folder, a u njemu foldere za pojedine kampanje i bannere.

1
2
3
4
5
6
7
8

server
 + inc
 + klijent
   + banner
     - banner.html
     - banner_edge.js
     - banner_edgeActions.js
     - image

Sada kada smo postavili sve fajlove na server idemo se pozabaviti isporukom.

Bye, bye CSS

U prvoj varijanti isporuke krećemo i sa prvim modifikacijama generiranog koda. Za početak otvorimo HTML stranicu i prebacimo sve script elemente iz head-a u div. Preostaje nam još problem CSS-a koji prema W3 specifikaciji mora biti u head-u. Primjetili smo da sa novom verzijom Edge-a generirani CSS ostaje prazan. Svi potrebni stilovi se generiraju javascriptom tako da se ovog problema možemo jednostavno riješiti brisanjem link elementa kojim se poziva CSS. Ako vam je iz nekog razloga CSS ipak potreban možete dodati još jednu skriptu u div koja će učitati CSS.

To je bio piece of cake! Prvo rješenje je spremno za isporuku! Klijentu šaljete div tag sa svim potrebnim skriptama, a to bi izgledalo ovako nekako:

1
2
3
4
5
6
7
8

<div id="stage" class="EDGE-7985673">
 <script type="text/javascript" src="http://www.tvornicabanner.com/edge_includes/jquery-1.6.2.min.js"></script>
 <script type="text/javascript" src="http://www.tvornicabanner.com/edge_includes/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="http://www.tvornicabanner.com/edge_includes/edge.0.1.3.min.js"></script>
 <script type="text/javascript" src="http://www.tvornicabanner.com/edge_includes/edge.symbol.0.1.3.min.js"></script>
 <script type="text/javascript" src="http://www.tvornicabanner.com/tb_banner_edge.js"></script>
 <script type="text/javascript" src="http://www.tvornicabanner.com/tb_banner_edgeActions.js"></script>
</div>

One < script > to rule them all

Drugo rješenje kojeg smo se dosjetili je spajanje svih skripti u jednu. Rješenje je sažeto i klijentu ćete isporučiti nešto manje linija koda. Tu nema nikakve filozofije. Ako ste za malo ručnog rada otvorite sve skripte i kopirate ih u jedan fajl. File zatim postavite na server, a klijentu isporučite div sa jednim script elementom koji će učitat spojenu skriptu sa vašeg servera. Ako vam se ne da sve to ručno spajati možete se poslužiti nekim od programa ili web servisa koji će to napraviti za vas i usput minimizarti skriptu. Web stranicama na kojima će se prikazivati vaš banner učinit ćete uslugu: 1 request, 1 download.

1
2
3
4

<div id="stage" class="EDGE-7985673">
 <script type="text/javascript"
 src="http://www.tvornicabannera.com/banner_merged.js"></script>
</div>

iFrame

iframe je elegantno rješenje jer klijentu dostavljate tek jednu liniju HTML koda, a priprema za isporuku je jednostavna.

Kao što znate iframe je prozor na drugu web stranicu. Web stanica na koju će iframe gledati je upravo HTML stranica koji je generirao Edge, a koju smo postavili na server u početku ovog tutorijala. Budući da internet preglednici imaju različite postavke za margin i padding, a Edge po tom pitanju ne radi ništa morat ćemo malo zaviriti u CSS i napraviti sitne izmjene. Potrebno je na body element postaviti navedene atribute na nulu. U CSS upišite:

1

body { margin:0; padding:0 }

Tim smo riješili moguće probleme sa naše strane. Sada treba uzeti u obzir web stranice na kojima će se banner prikazivati te u skladu s tim pripremiti iframe. Kako bi izbjegli nepoželjne pojave sa CSS-om domaćina u iframe tag pored src atributa koji vodi na naš banner upisujemo vrijednosti za visinu, širinu te jedan inline stil kako bi pregazili defaultni CSS internet preglednika koji oko iframa-e iscrtava rub.

1
2
3
4
5
6
7
8
9
10

<iframe
 name="TvornicaBannera"
 src="http://www.tvornicabannera.com/klijent/banner/banner.html"
 scrolling="no"
 frameborder="0"
 style="border:none; overflow:hidden;"
 width="728"
 height="90"
 allowTransparency="true">
</iframe>

name atribut nije neophodan, ali ga upisujemo tek toliko da se zna tko je radio banner ;) I to je to, banner je spreman za isporuku.

Sa iframe-om možete imati problema na web stranicama pisanim u XHTML Strict standardu jer on ne podržava iframe. Za takve web stranice banner možte pripremiti sa object elementom umjesto iframe-a.

Ubaciti malo dinamike

Posljednja opcija koju imate na repertoaru isporuke je dinamčko učitavanje skripti. Da bi u HTML dinamički učitali bilo što, pa tako i skriptu morate napisati – skriptu! Zamijeniti skriptu sa skriptom ne bi imalo nekog smisla kada od nove skripte ne bi imali neke koristi.

Ideja pisanja ove skripte je imati univerzalno rješenje, nešto poput template-a koji samo proslijedimo klijentu. Isporučena skripta mijenja DOM na stranici na kojoj se banner prikazuje i prema zadanim varijablama učitava sve potrebno za njegovo prikazivanje. Skripta sadrži anonimnu funkciju kojoj proslijeđujemo varijable klijent i banner i prilikom isporuke u pozivu funkcije upišemo dvije riječi ovisno o kojem je klijentu i banneru riječ.

Rješenje još nije savršeno, ali radimo na njemu :) Primjetili smo da povremeno imamo problema sa Internet Explorerom. Naime, Internet Explorer nešto drugačije barata eventima pri učitavanju stranice i moguće je da se animacija, koja ovisi o load eventu, ne pokrene. Problem se javlja kada se skripta još uvijek procesuira, a Internet Explorer javlja event da je sve loadano. Pretpostavljamo da bi za rješenje ovog problema trebalo zasukati rukave i zaviriti u javascript bibliotke Adobe Edge-a.

Rješenje bi izgledalo ovako:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="EDGE-7985673">
(function(klijent, banner) {
 var s = ['http://www.tvornicabannera.com/inc/jquery-1.6.2.min.js','http://www.tvornicabannera.com/inc/jquery.easing.1.3.js','http://www.tvornicabannera.com/inc/edge.0.1.3.min.js','http://www.tvornicabannera.cominc/edge.symbol.0.1.3.min.js','http://www.tvornicabannera.com/’+klijent+’/’+banner+’/’+banner+’_edge.js','http://www.tvornicabannera.com/’+klijent+’/’+banner+’/’+banner+’_edgeActions.js'];
 var out = document.createDocumentFragment();
  for (var i = 0; i &lt; 5; i++) {
   o = document.createElement('script');
   o.type = 'text/javascript'; o.charset = 'utf-8'; o.src = s[i];
   out.appendChild(o);
  }
  var c = document.getElementsByTagName('head')[0];
  c.appendChild(out);
})(‘klijent’, ‘banner’);
</div>

I za kraj, jedan naš (iFrame) primjer: