Hvernig á að byggja upp gagnvirk HTML5 auglýsing í 10 mínútur
Með niðurfalli Flash var ábyrgð á gagnvirkum auglýsingum send til HTML5. Hér lærum við að byggja upp gagnvirkt HTML5 auglýsing á aðeins 10 mínútum.
Í dag viljum við sýna fram á hvernig á að byggja upp gagnvirka HTML5 borða auglýsingu.
Þetta var verkefni sem við gerðum fyrir Carlsberg stundum aftur, sem við teljum geta verið gagnlegt fyrir hönnuði og forritara sem hafa áhuga á framhaldshönnun.
Carlsberg er fjölbreytt alþjóðlegt bjórmerki sem starfar yfir 40.000 manns um allan heim. Auk hússins Carlsberg vörumerki, eiga þeir einnig aðrar tegundir eins og Tuborg, Somersby (cider), Kronenbourg og Dali Beer (ört vaxandi vörumerki í Asíu).
Hvað er gagnvirkt auglýsing?
Við skulum gera fljótleg uppskrift. Í gömlu dagana höfðum við textaauglýsingar, sem eru í grundvallaratriðum stutt textaskilaboð með tengil á síðu auglýsanda, vöru eða þjónustu.
Næstum komu staðbundnar auglýsingaborða. Þetta eru yfirleitt truflanir myndir. Þeir eru meira sannfærandi um þessi textaauglýsingar vegna þess að myndir eru þúsund orð. Helstu sniðin koma í 300 × 250 dílar (kassi), 728 × 90 (breiður) eða 90 × 728 (skýjakljúfur).
Þá, Flash tækni leikur meðfram á skjáborðið vafranum. Flash var byltingarkennd, því það virkaði bylgju hreyfimynda borðaauglýsingar, auk gagnvirkra þátta. Hreyfimyndir banna athygli notenda sem leiða til hærra smellihlutfalls (SHF). Leikmenn gætu jafnvel spilað örspilun svo að skjóta eitthvað, eða kasta bolta í holuna.
Árið 2010, Apple sannfærði heiminn um dyggðirnar að skipta yfir í HTML5, og með risa, þar á meðal Google í kjölfarið, hafnaði Flash tækni fljótt.
Auglýsingatæknifyrirtæki sjá mikla vaxtarmöguleika í farsíma, og því byrjaði að hrinda í framkvæmd HTML5 í nýjan auglýsingahluta á vettvangi. Þessi eining er kölluð HTML5 gagnvirka auglýsingin, studd af nýjum iðnaðarstaðla eins og MRAID, MRAID2 og svo.
Lang saga stutt, gagnvirkt HTML5 auglýsing, er auglýsing sem vinnur nú á snjallsímum, töflum og skjáborðum.
Svo hvað er þetta Carlsberg auglýsing um?
Hér er a tengdu við myndskeið , sem sýnir gagnvirka auglýsingu sem keyrir á iPhone:
Markmið þessa gagnvirka auglýsingu er að vekja athygli á World Rugby Sevens Tournament, árlegri rugby atburð sem gerist í Hong Kong. Besta af bestu liðum frá öllum heimshornum keppir árlega til að vinna toppverðlaunin. Carlsberg er einn af helstu styrktaraðilum.
Auglýsingin reynist einföld. Notendur sjá glóandi Carlsberg bjórflaska. Skilaboð eru að biðja notandann að smella á glóandi flöskuna.
Þegar hann tappar á það, spilar stutt hreyfimynd af rugby leikmaður sem er með köldu ísaða fötu af Carlsberg bjór.
Skemmtilegt vörumerki slagorð birtist: "Ertu búinn að vera bjór"?
Notendur geta síðan smellt á tengilinn 'Finndu okkur á Facebook' til að skoða síðuna auglýsanda fyrir frekari upplýsingar.
Til baka í reglubundna forritun okkar
Gagnvirk HTML5 auglýsing inniheldur 5 meginþætti:
- index.html (aðal inngangur)
- main.js (javascript sem inniheldur rökfræði)
- main.css (CSS styleheet)
- eignir (sjón eignir)
- útleið hlekkur (þar sem auglýsingin ætti að taka notendur til)
Byrjum að byggja upp auglýsinguna ...
Hluti 1: index.html
Vísitalan.html samanstendur af venjulegum HTML yfirlýsingum.
Sjá pennann Carlsberg Interactive Ad Demo - index.html eftir Ben Chong @marketjs ) á CodePen .
Það sem skiptir máli er meta viewportið og tengingin við main.css og main.js
Eins og þú sérð er það frekar einfalt. Ekkert óvenjulegt.
Part 2: main.js (kjötið og beinin)
The main.js er Javascript skrá sem rekur alla samskipti við auglýsinguna.
Sjá pennann Carlsberg Interactive Ad Demo - main.js eftir Ben Chong @marketjs ) á CodePen .
Í toppinum setjum við jQuery's fullgilt JS. Athugaðu að þú getur notað nýjustu útgáfuna af jQuery frá http://jquery.com/
jQuery mun vera gagnlegt fyrir flestar DOM handvirkni tækni sem við notum.
Næstum við búum til einfalt ímyndaða forstillingaraðgerð.
Við hleðum upp fullt af grafískum eignum sem tengjast auglýsingunni.
Nú á rökfræði. Þegar auglýsingin byrjar, munum við taka eftir því að við búum til 2 divs, sem kallast scene1 og scene2 .
vettvangur1 inniheldur div af glóandi flösku. Þegar það er smellt á breytist það á svæðið2, með gotoScene2 virkni
scene2 sjálft inniheldur tagline div, sem vísar til Facebook síðu Carlsberg, þegar tapped.
Það er í grundvallaratriðum það. Mjög einföld rökfræði er þörf.
Part 3: main.css (The Style Sheet)
Main.css skráin inniheldur allar CSS-tengdar stíll.
Sjá pennann Carlsberg Interactive Ad Demo - main.css eftir Ben Chong @marketjs ) á CodePen .
Í þessu dæmi gerðum við nokkrar af flottum fjörum sem þú sérð í gegnum CSS
Til dæmis notar glóandi bjórflaska blinker gildi frá -webkit-animation eigninni
Við bætum einnig við nokkrum venjulegum reikniritum sem notendur hafa tilhneigingu til að elska, svo sem hopp og hopp
Hluti 4: Sjónareignir
Gagnvirkir auglýsingar krefjast skemmtilegra mynda sem tengjast vörumerkjum. Þess vegna er ráðlegt að vinna með hönnuður á gagnvirkum HTML5 auglýsingum.
Í okkar tilviki notuðum við: The blank grænn bakgrunnur; Flaskan; Bakgrunnur með rugby maðurinn sem geymir kalt ís fötu af bjór; Kvikmyndin til aðgerða.
Part 5: Call to Action (CTA)
Þetta er mikilvægasti hlutinn í hvaða gagnvirka auglýsingu sem er. Hringja til aðgerða verður að vera hönnuð til góðs, að notendur vilja í raun að smella í gegnum til að finna út meira.
Það hlýtur að vera sannfærandi skilaboð sem bregðast við forvitni notandans.
Yfirlit
Við vonum að þessi grein sé gagnleg fyrir samfélagið. Eins og þú sérð er þetta gagnvirka auglýsingin mjög auðvelt að byggja og tekur ekki meira en 10 mínútur til að setja saman þig.
Ýttu hér til að hlaða niður verkefnisskrám og kóðanum.