Banner HTML5- isang banner na nagpapakita ng arbitrary na nilalamang HTML o isang imahe. Ang HTML code ay maaaring isang regular na HTML page na may mga istilo at script. Ito ay inilagay sa isang iframe at may limitadong access sa nilalaman ng site.

Gamit ang template na "Banner HTML5," maaaring magdagdag ng banner sa dalawang paraan:
1. Inihanda lamang ang imahe. Ang pagkakaroon ng link na pupuntahan sa mga parameter ng banner ay kinokontrol ang clickability ng larawan.
2. Ang pagkakaroon ng paghahanda ng HTML creative sa editor ayon sa mga tagubilin: o.
Kung ang parehong HTML code at isang imahe ay idinagdag sa banner, ang HTML code ay ipapakita.

Nako-configure ang mga parameter kapag idinagdag sa ADFOX:
- Lapad, taas ng banner.
- Sariling mga istilo ng css para sa lalagyan ng banner.

Pag-unlad ng malikhaing HTML

1. Pamilyar ang iyong sarili mga kinakailangan para sa HTML code

• Ang maximum na pinapayagang laki ng HTML file ay 65,000 bytes.
• Mas mainam na ilagay ang JavaScript at CSS sa loob ng banner HTML code. Kung ang resultang HTML code ay lumampas sa maximum na pinapayagang laki, kailangan mong bawasan ang code sa pamamagitan ng paglipat ng JavaScript at CSS sa magkahiwalay na mga file:
  - i-save ang js at css code sa magkahiwalay na mga file na may extension na .js o .css;
  - ang mga file ay hindi dapat lumampas sa 300Kb sa timbang;
  - i-upload ang mga file sa tab na "Mga File" ng kampanya sa advertising at isama ang mga resultang link sa mga file sa HTML code.

  Halimbawa ng pagkonekta ng mga js at css file:

  Hindi pinapayagan ng HTML code ang paggamit ng mga relatibong path ng file.

• Ang isang proyekto ay maaari lamang maglaman ng isang file na may extension na .html.
• Ang maximum na pinapayagang bilang ng mga file sa isang proyekto ay 50;
• Mga pinapayagang uri ng file sa proyekto: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Pinakamataas na laki ng bawat file (nalalapat din sa mga file sa loob ng archive):
  - 300Kb;
  - 1MB para sa mga video file.
• Ang mga pangalan ng file ay dapat na naglalaman lamang ng mga numero o titik ng alpabetong Ingles, at ang karakter na may salungguhit. Hindi pinapayagan na gumamit ng mga letrang Ruso, mga puwang, mga panipi at mga espesyal na character sa pangalan ng file;
• Hindi ka maaaring gumamit ng mga letrang Ruso sa mga pangalan ng mga variable at bagay.
  Ang tanging pagbubukod ay ang teksto sa banner.
• Format ng natapos na proyekto - zip archive.

Mga kinakailangan sa larawan

Gumamit ng mga larawang may mataas na resolution, mapapabuti nito nang husto ang kalidad ng banner sa isang mobile device, bagama't babawasan nito ang bilis ng paglo-load ng banner.

Maaari kang gumamit ng mga larawang SVG. Ang mga ito ay vector, na nangangahulugang magiging mas maganda ang hitsura nila sa lahat ng device - mobile at desktop. Mayroon din silang maliit na laki ng file at maaaring i-animate.

Mga katanggap-tanggap na format ng larawan: png, gif, jpg, svg.
Pinakamataas na bigat ng isang file: 300Kb.

2. Piliin ang editor kung saan mo bubuuin ang iyong HTML creative at mag-click sa naaangkop na link. Maghanda ng archive na may HTML creative ayon sa mga tagubilin:

Adobe Animate CC Editor - Isang Banner na Pindutan

Adobe Animate CC Editor - Banner na may Maramihang Pindutan

1. Mag-download ng template para sa isang banner na may ilang mga button

2. Gumawa ng HTML5 Canvas na proyekto sa Adobe Animate (o magbukas ng umiiral na)

3. Kapag nagdaragdag ng mga button o movie clip na naka-embed sa isang eksena, mahalagang ibigay ang mga ito pangalan ng halimbawa, upang maaari kang magdagdag ng isang pag-click sa nais na mga pindutan. Inirerekomenda namin ang paggamit ng mga pangalan buton1 - buton9.

Tingnan din ang:

Mga tagubilin para sa pagdaragdag ng isang button at pagtatalaga ng pangalan ng instance

Pindutan sa pangunahing yugto

1. Lumikha ng ilang bagay sa eksena, halimbawa, gamit ang Rectangle Tool.
Pagkatapos ay piliin ito at piliin ang "I-convert sa Simbolo..." mula sa menu ng konteksto

2. Sa lalabas na dialog box, piliin ang Uri: Button, Maaaring iwanang hindi nagbabago ang pangalan, i-click ang Ok.

3. Magtalaga ng Pangalan ng Instance sa button na ito para gumana ang pag-click.

4. Isulat ang code para sa button na ito sa Actions:

Window.buttons.push(//Isulat ang mga path ng mga button na pinaghihiwalay ng mga kuwit, idagdag ito sa simula this.button1 //End of the space for the buttons);

Nested na button

1. Sabihin nating nasa loob ng isa pang simbolo ang button, halimbawa sa loob ng Movie Clip.
Sa halimbawang ito, ang Movie Clip na ito ay binibigyan ng Instance Name na "pangalan"

2. Sa pamamagitan ng pag-double click, pumunta sa loob ng pangalan, magkakaroon ng nested button.

3. Kapag tinukoy ang path sa naturang button sa Actions, kakailanganin mong idagdag ang Instance Name ng object pagkatapos nito kung saan ito naka-nest:

Window.buttons.push(//Isulat ang mga path ng mga button na pinaghihiwalay ng mga kuwit, idagdag ito sa simula this.name.button1 //End of the space for the buttons);

Mga tagubilin para sa paglikha ng mga transparent na pindutan

1. Piliin ang elementong gusto mo at i-convert ito sa isang simbolo

2. Maglagay ng pangalan at piliin ang Uri: Button

3. Mag-double click sa isang simbolo upang pumunta dito:

4. Ipasok ang keyframe sa hit frame

5. Alisin ang mga nilalaman ng up, over, down na mga frame

6. Ang transparent na pindutan ay handa na:

4. Magdagdag ng layer ng Actions sa proyekto (magdaragdag kami ng code para sa mga button dito)

5. Magbukas ng window para magsulat ng code

Window.buttons.push(//Isulat ang mga landas ng mga pindutan na pinaghihiwalay ng mga kuwit, idagdag ito sa simula //End ng espasyo para sa mga button); setAdfox();

Kung ang button ay nasa pangunahing eksena, pagkatapos ay isulat ang pangalan ng instance nito kaagad pagkatapos nito, halimbawa

Ito.button1

Kung ang button ay nasa loob ng isang nested na eksena, pagkatapos nito isulat muna ang pangalan ng instance ng eksena, at pagkatapos ay ang pangalan ng instance ng button:

This.scene_instance_name.button2

Halimbawa ng huling code sa layer ng Actions:

Window.buttons.push(//Isulat ang mga path ng mga button na pinaghihiwalay ng mga kuwit, idagdag ito sa simula this.button1, this.scene_instance_name.button2 //End of the space for the buttons); setAdfox();

7. Ang unang button sa linya ng code ay tatawag sa unang link mula sa ADFOX, ang pangalawa ay tatawag sa pangalawa, at iba pa.

Kasama ng HTML creative, bigyan ang manager na magdadagdag ng banner sa ADFOX ng impormasyon tungkol sa pagsusulatan ng mga button at numero ng link.

8. Buksan ang mga opsyon sa pag-publish at ikonekta ang template mula sa unang punto at i-publish ang proyekto sa pamamagitan ng pagpili sa nais na direktoryo.

9. Pagkatapos i-publish ang iyong proyekto, i-archive ito sa .zip na format. Handa nang i-upload ang iyong creative sa ADFOX banner.

Editor ng Google Web Designer

Maaaring gamitin ang code ng banner na ito bilang batayan kapag gumagawa ng mga creative sa editor.

Ang template ay naglalaman ng script adfox_HTML5.js at isang hanay ng mga parameter para sa tamang pagpapatakbo ng mga transition at pagbibilang ng kaganapan:
%reference%, %user1%, %eventN%, kung saan ang N ay ang event number mula 1 hanggang 30.

2. Pagproseso ng pag-click.

Ang lahat ng mga kaganapan ay itinalaga sa mga partikular na elemento ng animation sa pamamagitan ng tab na Mga Kaganapan.

Ang bahagi ng Interactive Area ay ginagamit upang mag-invoke ng mga aksyon.
Idagdag ito at pumili ng kaganapan Interactive na lugar → I-tap/i-click(o "Tap Area > Touch/Click" sa English na bersyon).

Sa tab na "Custom Code", tukuyin ang isang tawag sa function ng pag-click.

2.1 Kung gumagamit ng isang jump button:

CallClick();

2.2 Kung mayroong ilang mga pindutan ng paglipat:

CallClick(n);

saan n

2.3 Kung kailangan mong mag-trigger ng kaganapan mula sa isang animation na walang transition, gamitin ang sumusunod na code:

CallEvent(n);

saan n- numero ng kaganapan na dapat tawagan.

Tampok ng pagpapatupad ng isang lumalawak (goma) na banner.

Upang ang banner ay umaabot sa lapad ng lalagyan kung saan ito matatagpuan sa site, sa panel Mga Katangian Para sa posisyon at mga sukat, tukuyin ang mga porsyento sa halip na mga pixel.

Gamitin din ang mga pagpipilian "I-align sa Container" At "Layout ng goma" sa itaas na toolbar.
Kung pinagana mo ang Fluid Layout bago gumamit ng anumang mga tool sa pag-align, kapag binago mo ang laki ng parent na lalagyan, ang lahat ng elemento ay ihahanay sa isa't isa at sa mga sukat ng container.
Sa kasong ito, maaari mong sabay na gamitin ang parehong mga kamag-anak na laki ng mga elemento sa mga porsyento at ganap na laki sa mga pixel.

4. Paglalathala ng proyekto.

Kapag nagdaragdag ng banner sa ADFOX, kakailanganing malaman ng manager ang mga sulat ng mga button at numero ng kaganapan. Para sa bawat kaganapan, magsusulat ang manager ng sarili nitong link upang mag-navigate, na ipapasa sa banner code gamit ang isang variable.

Pagkatapos i-publish ang proyekto, i-archive ito sa format .zip. Handa nang i-upload ang iyong creative sa ADFOX banner.

Iba pang mga editor

1. Nagbibilang ng mga pag-click sa isang banner

Upang makalkula ng ADFOX ang mga istatistika sa mga pag-click para sa isang banner, kailangan mong magsulat ng variable sa HTML code sa tag at para sa attribute na href:

%banner.reference_user1%

Para din sa mga link, gamitin ang target na attribute na may variable na %banner.target% sa value ng attribute.
Kung nawawala ang attribute, magbubukas ang link sa loob ng iframe, ibig sabihin, magbubukas ang na-advertise na site sa banner space.

Halimbawa ng HTML code para sa pagbibilang ng mga pag-click sa banner:

Website ng advertiser

Sa HTML code ng mga banner na ilalagay sa mga mobile application, gamitin ang macro upang mabilang ang mga pag-click: %reference%@%banner.user1%

2. Nagbibilang ng mga pag-click mula sa maraming link sa isang banner

Sabihin nating ang isang banner ay may ilang mga link na susundan, na humahantong sa iba't ibang mga pahina ng ina-advertise na site, at para sa bawat isa sa kanila kailangan mong makuha ang bilang ng mga pag-click.

Unang link Pangalawang link

Palitan ang mga halaga ng katangian ng href ng mga variable %request.reference%@%banner.eventN%, kung saan sa halip na N dapat mayroong numero ng kaganapan mula 1 hanggang 28.
Halimbawa:

Unang link Pangalawang link

Ang pagsusulatan ng mga link at variable ay dapat iulat sa manager na nagdaragdag ng banner sa ADFOX. Dahil kapag nagdaragdag ng banner, kakailanganin mong tukuyin ang unang link para sa Event 1, at ang pangalawang link para sa Event 2.

Pagdaragdag ng banner sa ADFOX

Upang magdagdag ng banner sa ADFOX, piliin ang gustong uri at template ng banner "Banner HTML5".

Tukuyin ang mga parameter ng banner:

I-archive gamit ang HTML5 creative- mag-upload ng .zip archive kasama ang proyekto, field "HTML5 creative code" dapat manatiling walang laman (ito ay mapupuno ng mga nilalaman ng .html file ng iyong proyekto pagkatapos idagdag ang banner).

HTML5 creative code- Mag-download ng zip archive na may proyektong inihanda sa mga HTML editor o i-paste ang HTML code.

Kung mayroong ilang mga link sa banner, idagdag ang mga ito sa tab Mga kaganapan malapit sa banner, sa mga field ng transition URL.
Mangyaring suriin sa mga HTML creative developer para sa pagsusulatan ng mga numero ng link at kaganapan.

Link sa pagsukat ng pixel- Ang ADFOX pixel ay ginagamit bilang default //banners.adfox.ru/transparent.gif, kung kailangan mong subaybayan ang mga impression sa isang third-party na system, tanggalin ang ADFOX pixel at tumukoy ng ibang link.

Lapad ng creative (px o %)- tukuyin ang lapad ng banner.

Taas ng creative (px o %)- tukuyin ang taas ng banner.

Imahe- mag-upload ng larawan.
Mga kundisyon para sa pagpapakita ng mga creative:
- HTML code at imahe na idinagdag - HTML code ay ipapakita.
- Idinagdag ang larawan - ipapakita ang larawan.
- Idinagdag ang HTML code - Ipapakita ang HTML code.

Pangalan ng attribute ng klase ng lalagyan ng banner- tukuyin ang isang pangalan (o ilang mga pangalan na pinaghihiwalay ng isang puwang) para sa katangian ng klase ng lalagyan ng banner.

Gamitin ang SafeFrame (oo|hindi)- Ang safeFrame ay isang teknolohiya na bumabalot sa advertising sa isang espesyal na iframe na may mahigpit na API. Pinipigilan ng SafeFrame ang mga ad na nai-render sa loob nito mula sa pagkolekta ng data at pakikipag-ugnayan sa natitirang bahagi ng pahina sa labas ng safeFrame.
oo - paganahin ang paggamit ng safeFrame at tanggihan ang pag-access sa web page;
hindi - huwag paganahin ang safeFrame. Ang banner code ay may access sa web page.

Mga istilo ng banner block- mga custom na istilo para sa lalagyan ng banner sa isang linya. Bukod sa istilo: display. Halimbawa, "border: 1px solid red;". Ang mga di-wastong halaga ay itatapon ng browser.

Mga kaibigan, kumusta sa lahat. Ngayon ay patuloy kaming gagawa ng mga banner sa Google Web Designer sa HTML5 na format, na may 3D effect.

At ito ay maliwanag, ang mga banner na ginawa sa html5 at css3 ay ipinapakita sa anumang screen, parehong sa mga computer, telebisyon, at mga mobile device. Ang parehong ay hindi masasabi tungkol sa mga flash banner.

Bilang karagdagan, ang mga banner na ito ay maaaring gamitin lamang at ang banner ay magiging maganda sa anumang screen.

At dahil sa katotohanan na ang mga mobile device ay lalong ginagamit upang tingnan ang mga mapagkukunan ng Internet, ito ay napakahalaga.

Inilarawan ko na ang pangunahing isa at ang pagkakalagay nito sa site sa nakaraang artikulo. Kaya ngayon, bibigyan ko ng pansin ang paggawa ng 3D effect at cyclic (repeat) na mga setting. Titingnan din natin ang ilang mga setting para sa "mga kaganapan".

Medyo mahirap ilarawan ang buong prosesong ito nang detalyado, kaya nag-aalok ako sa iyo ng isang video tutorial. Ito ay magiging mas madali upang makabisado ang materyal. Gayundin, i-download ang archive gamit ang aking proyekto sa banner bilang isang visual na halimbawa.

Naghahanda na gumawa ng banner na may 3D effect.

Ang huling hitsura ng banner sa huli ay nakasalalay sa paghahanda. Binibigyang-daan ka ng editor ng Google Web Designer na lumikha ng makatotohanang mga 3D effect at ang lahat ng ito ay isusulat sa html code, kailangan mo lang i-assemble ang lahat nang tama sa visual editor.

Upang lumikha ng isang mataas na kalidad na 3D effect, kailangan mo munang i-cut ang mga blangko sa Photoshop, na sa ibang pagkakataon ay kailangang isama sa Google Web Designer.

Bilang halimbawa, inihanda ko ang mga sumusunod na blangko:

Ginawa ko ang mga blangko na ito sa Photoshop, ngunit maraming mga katulad na larawan sa Internet. Hindi mo kailangang pilitin ang iyong sarili, ngunit kumuha ng mga handa na pagpipilian.

Tandaan: Kung interesado ka sa proseso ng paglikha ng mga naturang blangko, isulat ang tungkol dito sa mga komento.

Mahalaga ring isipin ang kabuuang komposisyon ng banner at ang script. Tinutukoy nito kung paano makikita ang banner sa kabuuan.

Paglikha ng 3D object sa Google Web Designer.

Kaya, sa pamamagitan ng pagkakatulad sa nakaraang artikulo, ilunsad ang editor at lumikha ng isang bagong proyekto.

Ang 3D effect ay nagpapahiwatig ng isang pinagsama-samang imahe, iyon ay, isang imahe na binubuo ng ilang piraso na matatagpuan sa nais na projection.

Ang maraming larawang ito ay kailangang pagsama-samahin alinman sa isang grupo o ilagay sa isang DIV block. At gayon at gayon ay magiging tama. Ngunit, mas maginhawa para sa akin na magtrabaho kasama ang bahagi ng DIV.

Hakbang 1: Gumawa ng DIV block.

Kaya, upang lumikha ng DIV block, sa kaliwang panel piliin "Tagging Tool (D)".

Tiyaking magtalaga ng ID. At ayusin ang mga sukat gamit ang seksyon "Properties" sa kanang panel.

Ngayon ay kailangan mong piliin ang bloke. Upang gawin ito, piliin ang kaliwang panel "tool sa pagpili (V)" at i-double click ang kaliwang pindutan ng mouse sa frame ng DIV block. Magbabago ito ng kulay sa pula.

Hakbang 2. Pag-aayos ng mga larawan.

At ngayon magsisimula na ang pinakamasakit na proseso. Kailangan mong ilantad ang lahat ng mga elemento ng isang solong larawan.

Mayroon akong mga sumusunod na item sa aking pagtatapon:

- Itaas na bahagi.

— Gilid (binubuo ng tatlong magkakahiwalay na bahagi).

Una, ilagay ang reverse (likod) na bahagi ng imahe at ihanay ito sa gitna at tuktok na gilid ng banner.

Idagdag ang front side sa parehong paraan. I-align at ilipat sa kahabaan ng Z axis.

Dahil ang lapad ng gilid ay 4px (pixels), inilipat ko ang harap at likod na gilid kasama ang Z axis ng 2px at -2px. Magbibigay ito ng agwat sa pagitan ng mga larawan.

Tandaan: tingnan ang mga screenshot para sa eksaktong mga numero ng displacement.

Susunod, idagdag ang gilid, ang lahat ng mga bahagi nang hiwalay. Para sa kadalian ng pagkakalagay, gamitin ang mga tool "3D pag-ikot ng lugar ng trabaho" At "Scale". Tutulungan ka nilang tumpak na ayusin ang lahat ng mga detalye.

Upang magsimula, iminumungkahi kong ihanay mo ang lahat ng mga imahe sa isang gilid, at pagkatapos ay kopyahin ang mga ito at ilagay ang mga ito sa isang mirror projection sa kabilang panig.

Ang susunod na hakbang ay ang linya sa itaas na kaliwang sulok.

Ngayon ang gitnang bahagi ng gilid.

At ang ibabang sulok sa kaliwang bahagi.

Tiyaking ihanay ang lahat ng elemento sa gilid sa 90 0 kasama ang Y axis.

Ngayon ay kailangan mong kopyahin ang nais na layer at i-paste ito muli, palitan ang pangalan nito at baguhin ang mga parameter ng lokasyon, upang makuha namin ang mga elemento para sa kanang bahagi.

Upang gawin ito, pumili ng isang imahe sa ilalim na panel - pindutin ang key na kumbinasyon CTRL + C (kopya) at i-paste ang duplicate na CTRL + V.

Magsimula tayo sa parehong paraan tulad ng bahagi ng field mula sa itaas hanggang sa ibaba, ngunit para lamang sa tama.

kanang itaas na takip.

Hindi ko ginawa ang mas mababang bahagi, dahil hindi ito nakikita sa imahe.

Tapos na ang pinakamahirap na trabaho. Ngayon ay maaari mong simulan ang pag-set up ng animation. Bilang isang visual na pagpapakita, paikutin natin ang larawan.

Paggawa ng rotation effect sa Google Web Designer.

Ang unang hakbang ay ang lumabas sa DIV block, na naglalaman ng lahat ng elemento ng imahe. Iyon ay, nagtrabaho kami sa loob ng isang bloke na may mga partikular na larawan, at ngayon ay kakailanganin naming gumana sa lahat ng mga larawan nang sabay-sabay, sa pamamahala ng DIV block.

Upang magsimula, mag-click sa DIV button sa ibabang panel.

Kaya, sa chalet ng oras, sa pamamagitan ng pag-click sa kanang pindutan ng mouse, lumikha ka ng dalawang key frame. Dapat itong magmukhang ganito:

Ang lokasyon ng orihinal na frame sa Y scale ay nakatakda sa -90 0 .

Itinakda namin ang unang key frame (ang pangalawa) sa Y scale sa 0 0 .

Itakda ang pangalawang key frame (pangatlo sa isang hilera) sa 90 0 sa Y scale.

Maaari mong suriin ang mga resulta. Upang gawin ito, mag-click sa pindutan Maglaro.

Totoo, ang ating imahe ay gagawa lamang ng isang rebolusyon. Upang ang imahe ay patuloy na umiikot o gumawa ng ilang mga rebolusyon, kailangan mong i-configure ang mga parameter ng pagbibisikleta.

Pagse-set up ng pagbibisikleta sa Google Web Designer.

Pinapayagan ka ng programa na i-configure ang ilang mga pagpipilian sa cyclicity (pag-uulit). Sa ganitong paraan maaari kang mag-set up ng pag-uulit para sa lahat ng elemento ng banner o para sa bawat elemento nang hiwalay.

Gayundin, ang cyclicity ay maaaring limitahan ng bilang ng mga pag-uulit o ginawang walang katapusan.

Sa ilalim na panel, sa tabi ng bawat elemento ay may mga simbolo "Castle", "Eye", "Reverse Arrow".

Kaya, upang i-configure ang cyclicity kailangan mong mag-click sa simbolo "Baliktad na arrow". At pumili ng alinman sa isang limitadong bilang ng mga pag-uulit o isang walang katapusang opsyon.

Pinili kong ulitin ang animation nang walang katapusan. Dahil sa hinaharap gusto kong i-configure "Mga kaganapan" para huminto ang pag-ikot kapag na-hover ang mouse at magpapatuloy pagkatapos maalis ang cursor.

Ihihinto ang pag-ikot kapag ini-hover mo ang mouse sa banner.

Una sa lahat, nagtakda kami ng isang shortcut sa unang key frame (ang pangalawa sa isang hilera). Upang gawin ito, mag-right-click sa itaas ng frame at piliin ang item sa menu "Magdagdag ng shortcut". Ipasok ang pangalan ng shortcut at pindutin ang Enter key.

At sa susunod na hakbang ay pipili ka bilang isang tatanggap « Page1". Walang ibang mga pagpipilian doon.

At ang huling hakbang, piliin ang shortcut na ginawa mo sa unang yugto.

I-save ang mga kaganapan at suriin. Hihinto ang pag-ikot ng banner kapag ini-hover mo ang mouse sa frame kung saan ginawa ang shortcut.

Pagpapatuloy ng pag-ikot pagkatapos ilipat ang cursor ng mouse palayo.

Upang matiyak na magpapatuloy ang pag-ikot pagkatapos ilipat ang cursor sa gilid, mag-set up ng isa pang kaganapan.

Ito ay na-configure nang katulad sa nauna, na may dalawang pagkakaiba lamang.

Napili ang kaganapan "Dalaga"— « mouseout".

Kaganapan - pagbawi ng mouse

At bilang isang aksyon "Timeline" — « togglePlay".

Aksyon - Magpatuloy

Ngayon ang aming banner na may 3D effect ay handa na. At maaari kang makabuo ng maraming iba't ibang epekto hangga't gusto mo.

Basta huwag kalimutang magtakda ng kaganapan para sa pag-click ng mouse at pagbubukas ng link. Ang banner ay hindi ginawa para sa kagandahan, tama?

Sa una, ang prosesong ito ay maaaring mukhang kumplikado, ngunit pagkatapos ng ilang mga banner, hindi mo na iisipin ito.

Iyon lang para sa akin ngayon, mga kaibigan. Nais ko sa iyo ang lahat ng tagumpay, inaasahan ko ang iyong mga komento at makita ka sa mga bagong artikulo at video tutorial.

Pinakamahusay na pagbati, Maxim Zaitsev.

Ang Internet ay puno ng advertising. Sa maraming site ito ay kapansin-pansing advertising para sa mga slimming brush, sa iba naman ay Yandex.Direct o Google AdSense. At sa ilan lamang ay makakakita ka ng magagandang banner na hindi nakakairita sa mga gumagamit sa pamamagitan lamang ng kanilang hitsura. Mula sa aking pagsusuri matututunan mo kung paano gumawa ng magandang HTML5 banner sa iyong sarili nang walang anumang mga paunang kasanayan.

Ang bannersnack ay isang online na serbisyo para sa paglikha ng HTML5 at Flash na mga banner ng iba't ibang mga format, na hindi nangangailangan ng kaalaman sa code o mga kasanayan sa pagtatrabaho sa mga editor ng imahe.

Nag-aalok ang serbisyo na lumikha ng dalawang uri ng mga banner: isang regular na banner o isang random na banner kapag nag-load ang pahina. Maaari mo ring ilunsad ang iyong kampanya sa advertising sa Google o Facebook gamit ang banersnack. Ngunit una sa lahat.

gumagawa ng banner

Sa seksyong ito maaari kang lumikha ng iyong unang banner. Nag-aalok ang serbisyo ng mga banner sa HTML5 o Flash na format. Dahil sinusubukan ng lahat na patayin ang Flash, ilalarawan ko ang HTML5 editor.

Kapag inilunsad mo ang wizard, maraming mga yari na template ang agad na inaalok:

Siyempre, hindi mawawala ang pagkakataong gumawa ng banner mula sa simula. Sa tuktok ng wizard ang laki ng hinaharap na banner ay ipinahiwatig:

Kapag pumipili ng laki, magbabago din ang mga pattern. Pinakamainam na bigyan ng kagustuhan ang isang paunang natukoy na laki sa halip na tukuyin ang iyong sarili, dahil ang bannersnack ay maaaring sa huli ay tumanggi na bumuo ng ganoong banner.

Kapag ginawa mo ang iyong banner, bubukas ang sumusunod na editor:

Sa kaliwa ay isang listahan ng lahat ng mga banner slide, bawat isa ay magkakaroon ng sarili nitong larawan at teksto. Sa itaas ay ang mga tool para sa paggawa ng banner, at sa kanan ay ang mga katangian ng layer.

Maaari mong idagdag ang iyong sariling larawan, teksto, pindutan, hugis o video bilang isang banner. Nagdagdag ako ng larawan at isang button:

Kapag pumili ka ng anumang elemento, maraming mga template ang iaalok, ngunit, gaya ng nakasanayan, ang huling say ay sa iyo:

May tatlong property tab ang bawat layer. Posisyon sa pahina, kulay, hugis, atbp.:

Pagkilos sa pamamagitan ng pag-click sa isang layer:

Maaari mong tukuyin ang isang paglipat sa susunod na slide o isang link.

Mga katangian ng animation kapag nagpapalit ng slide:

Kapag natapos mo nang i-edit ang iyong banner, i-click lang ang I-save at pumili ng pangalan para sa iyong banner:

Pagkatapos ay magbubukas ang isang listahan ng lahat ng iyong mga banner na may mga code para sa pagpasok sa site:

Mahalagang tandaan na kapag nagpalit ka ng banner sa bannersnack site, mag-a-update din ito sa iyong site. Hindi na kailangang kopyahin muli ang embed code.

pampaikot ng banner

Dito, nilikha ang mga static na banner na random na naglo-load kapag nag-load ang page.

Nag-aalok ang wizard na pumili mula sa mga nagawa nang banner o lumikha ng bago:

Kapag nagdadagdag ng sarili mong larawan, maaari mo lamang tukuyin ang transition URL:

Pagkatapos ang natitira na lang ay makuha muli ang naka-embed na code sa site:

Ito ay kung paano, sa tulong ng bannersnack, kahit na ang isang walang karanasan na gumagamit ay maaaring lumikha ng kanilang sariling magandang cross-browser banner.

Mga banner ng HTML5

mula sa RUB 2,299

RUB

Umorder

Sa kasalukuyan, ang mga HTML5 na banner ay ang tanging kasalukuyang format para sa ganap na animated na banner advertising. Pinalitan ng unibersal na cross-platform na format na ito ang mga Flash banner, na may ilang limitasyon at disadvantage.

Ang mga pangunahing dahilan para sa pagtanggi na ito ay ang mga sumusunod:

• Naipon ang mga claim laban sa teknolohiya ng Flash sa larangan ng seguridad ng computer at tumaas na pagkonsumo ng power ng processor sa mga mobile device;
• ang ilang mga browser ay nagsimulang harangan ang Flash bilang default;
• sa mga iOS mobile device (iPhone, iPad), hindi ibinigay ng tagagawa ang Flash display;
• katanyagan ng Flash banner ad blocking programs;
• pagtanggi ng karagdagang suporta at pagpapaunlad ng teknolohiya ng Flash ng may-ari nito, ang Adobe.

Maaaring ipakita ang mga animated na HTML5 banner nang walang mga paghihigpit sa anumang browser, sa screen ng anumang device, kabilang ang mga smartphone, tablet at media TV. Ito ang kanilang cross-platform at versatility.

Para sa customer, ang paggamit ng HTML5 na mga banner ay nangangahulugan, una sa lahat, pagpapalawak ng saklaw ng audience nang walang pagkawala.

Ano ang magagawa ng HTML5 banner?

marami. Pagkatapos ng lahat, ito ang pinaka-advanced na format na umaakit sa atensyon ng gumagamit at kahit na nakikipag-ugnayan sa kanya (isang interactive na banner).

Sa mga tuntunin ng animation, ang naturang banner ay maaaring magpakita ng vector animation (nang walang scaling loss), animation ng mga character, larawan, logo, graph at diagram, text at kahit 3D animation. Mula sa isang interactive na pananaw, ang isang HTML5 banner ay maaaring tumugon sa mga aksyon ng user at mag-alok ng karagdagang nilalaman at mga tampok. Mula sa isang media point of view, ang isang HTML5 banner ay maaaring mag-play ng video, mga slide at audio recording. Sa mga tuntunin ng kakayahang tumugon, ang isang HTML5 banner ay maaaring lumawak sa buong lapad ng pahina, palawakin ang mga karagdagang panel, o palawakin upang punan ang buong screen.

Tingnan natin ang mga pangunahing uri ng HTML5 na mga banner.

Animated HTML5 banner ng isang nakapirming laki.
Ang pinakasikat na format sa karamihan ng mga network ng advertising. Ang lapad at taas ng mga kinakailangang banner ay pinili mula sa listahan ng mga tinanggap para sa pagkakalagay. Palagi kaming magmumungkahi ng mga pinakakaraniwang laki.

Nag-stretching ng HTML5 banner (tumutugon, goma).
Ito ay isang banner na maaaring mag-abot upang sakupin ang buong lapad (minsan taas) ng screen. (Higit pang mga detalye ay matatagpuan sa artikulong ito)

Fullscreen na HTML5 na banner.
Banner na bubukas sa buong screen. Bilang panuntunan, naglalaman ito ng isang display timer at isang "Isara" na button. Lalo na sikat para sa pagpapakita sa mga mobile device.

Kadalasan ang naturang banner ay dapat na adaptive, na isinasaalang-alang ang iba't ibang mga oryentasyon at mga resolusyon ng mobile device.

Napapalawak na HTML5 banner (napapalawak).
Sa una, tanging ang panimulang panel ng naturang banner (teaser) ang nasa screen. Kapag ang isang ibinigay na algorithm ay naisakatuparan (mouse hover o pag-click, timer o iba pang mga kaganapan sa pahina), ang pangalawang bahagi ng banner ay bubukas na may karagdagang pinalawak na impormasyon.

HTML5 Video banner.

Depende sa mga setting at kinakailangan ng platform ng advertising, maaari itong magpakita ng video sa alinman sa autostart o pagkatapos ng pagpindot sa button na "I-play". Maaaring naglalaman ng mga control at mute na button. Ang video file ay karaniwang matatagpuan sa isang panlabas na pagho-host at dina-download kapag ipinakita.

Mga interactive na banner ng gaming.
Mga banner na naghihikayat sa user na sumali sa laro sa pamamagitan ng pagsasagawa ng mga simpleng aksyon.

Ang ganitong mga banner ay nakakaakit ng pansin ng target na madla, pumukaw ng matinding interes, ngunit sa parehong oras ay may ilang mga limitasyon (halimbawa, ang kawalan ng kaganapan ng mouseover sa mga mobile device o mga paghihigpit sa paggamit ng mga karagdagang script). Palagi naming sasabihin sa iyo ang tungkol sa mga tampok na ito kung nagpaplano kang lumikha ng isang banner na HTML5 sa paglalaro.

Mga banner na "Smart" HTML5 (mga calculator).
Ginagamit ang mga ito upang kasangkot at makipag-ugnayan sa gumagamit, na nag-aalok sa kanya ng isang agarang pagkalkula ayon sa kinakailangang mga parameter at isang formula na tinukoy ng isang panloob na algorithm (halimbawa, pagkalkula ng isang pautang, mortgage, pagkonsumo ng mga materyales sa gusali at iba pang mga simpleng operasyon).

Nae-edit na HTML5 Banner– sa ilang mga kaso, ang customer ay kailangang mabilis na gumawa ng mga pagbabago sa mga banner nang hindi gumagamit ng tulong ng developer (halimbawa, madalas na pagbabago ng mga presyo, porsyento o quote). Maaari naming makayanan ang gawaing ito at i-output ang mga kinakailangang parameter nang direkta sa HTML code ng banner, kung saan ang customer ay maaaring nakapag-iisa na gumawa ng mga pagbabago. Maaari kang mag-alok ng isa pang solusyon na maginhawa para sa iyo na i-output ang data na ginamit ng banner sa mga panlabas na file.

Mga HTML5 na banner na gumagana sa pag-load ng external na data at API.
Sa ngayon, maraming mga network ng advertising ang nagbabawal sa mga banner na maabot ang mga panlabas na mapagkukunan. Gayunpaman, kung ang banner ay inilagay sa isang site na nagbibigay ng ganoong pagkakataon, ang HTML5 banner ay maaaring humiling ng kinakailangang impormasyon (teksto, mga numero, mga quote) sa pamamagitan ng API ng site at, nang maproseso ang mga ito ayon sa isang ibinigay na algorithm, ipakita ito sa gumagamit.

Mga banner na 3D HTML5.
Ang ganitong mga banner ay nakakaakit ng pansin ng gumagamit sa pamamagitan ng paglikha ng mga three-dimensional na mga modelo ng imahe sa pahina.

Maaaring ipatupad ang isang HTML5 3D banner bilang umiikot na bagay na ang mga gilid ay naglalaman ng mga banner frame, bilang isang drop-down na libro, o gamit ang iba pang mga 3D effect.

Tandaan na ang isang HTML5 banner ay maaaring magsama ng ilan sa mga inilarawang feature nang sabay-sabay. Halimbawa, maaaring lumawak ang isang video banner sa buong lapad ng page, at maaaring lumawak ang isang 3D animation sa page depende sa mga aksyon ng user.

Kung gusto mong mag-order ng HTML5 banner sa aming website, at ang iyong malikhaing ideya ay nangangailangan ng pagsasama-sama ng iba't ibang mga format, palaging magagawa ito ng aming mga espesyalista.

HTML5 banner - ano ito sa teknikal?

Pinakamainam na isipin ang isang HTML5 banner bilang isang mini website. Walang pagmamalabis.

Ang HTML5, na nagbibigay sa format ng banner na ito ng pangalan nito, ay isang markup language ng web page, o, sa madaling salita, layout language. At ito ay inilatag ayon sa parehong mga batas tulad ng anumang modernong website. Maaari itong maglaman ng mga lalagyan ng div, mga plug-in na font, mga istilo ng css at mga js script. Ang pangunahing elemento ay ang lalagyan ng canvas animation. Ang animation mismo ay ipinatupad gamit ang isang java script, kadalasang gumagamit ng mga library ng js na espesyal na idinisenyo para sa animation.

Ano ang nasa loob? Bakit nasa archive? Bakit ang daming files?

Tama iyon, dahil sanay na kami sa katotohanan na ang isang banner ay isang JPG image file o isang "gif" o isang "flash drive". Ngunit tandaan, tulad ng isinulat namin sa itaas, ang HTML5 banner ay mahalagang isang mini-site. Naglalaman ito ng maraming file at ibinibigay sa platform ng advertising sa isang zip archive. Sa loob ng archive mayroong pangunahing HTML file, java script file, library, style sheet at ginamit na mga imahe.

Tandaan. Sa ilang mga kaso, maaaring hilingin sa iyo ng isang platform ng advertising na ibigay ang buong banner sa isang file, kasama ang lahat ng ginamit na script at mga larawan sa base-64 na format. Hindi ito problema para sa isang may karanasang developer. Gayunpaman, pinapataas ng naturang kinakailangan ang oras na kinakailangan upang makagawa ng isang banner at gumawa ng mga pagbabago dito. Sa kabutihang palad, ang gayong pangangailangan ay bihira.

Paano ko matitingnan ang ipinadalang HTML5 banner sa aking computer?

Napakasimple. I-unpack ang zip archive at buksan ang HTML file sa loob ng iyong browser.

Paano ko malalaman kung natanggap ko ang tamang HTML5 banner?

Kung ang isang banner ay ginawa para sa mga serbisyo sa advertising ng Google, kung gayon ang isang mahusay na tool para sa pagsuri sa kalidad ng gawa ng taga-disenyo ay nasa iyong serbisyo - ang on-line na HTML5 validator ng Google. Madaling gamitin: i-upload ang iyong zip archive na may banner at tingnan kung pumasa ito sa checklist. Ang mga error ay mamarkahan ng mga pulang icon. Kung wala sila roon, walang kabuluhan ang trabaho ng iyong developer at handa na ang banner para sa pagkakalagay sa Google adWords o Double Click.

Sa mga network ng advertising na Yandex, Mail.ru, Rambler, adFox, adRiver at iba pa, sinusuri din ang banner para sa pagsunod sa mga teknikal na kinakailangan pagkatapos itong ma-upload sa website ng system. Sa kaso ng mga problema, maaari kang makatanggap ng komento mula sa isang moderator na naglalarawan sa error. Ang ilang mga site ay nagbibigay sa customer ng advertising ng pagkakataon na i-preview ang banner sa isang test page.

Gayunpaman, ang pinakamahusay na garantiya ng tamang paggawa ng HTML5 banner ay ang karanasan ng developer, ang kanyang kaalaman sa mga teknikal na kinakailangan ng mga platform sa pag-advertise at ang kanyang pagpayag na agad na iwasto ang mga error.

Iba ba ang isang banner na may animation sa Java Script?

Huwag malito. “Java Script banner”, “Canvas banner” - eksaktong pinag-uusapan natin ang karaniwang tinatawag na “HTML5 banner”. Depende sa tool ng developer, maaaring magbago ang mga js library o mga panuntunan sa layout, ngunit ang scheme ng pangkalahatang pagpupulong ay nananatiling pareho.

Paano gumawa ng HTML5 banner?

Ang pinakasikat na editor sa mga designer para sa paglikha ng HTML5 animation ay ang Adobe Animate program.

Nag-aalok ang Google ng sarili nitong tool sa pag-develop - Google Web Designer. Kabilang sa mga pakinabang nito ay ang pagkakaroon ng maraming built-in na template at ang kakayahang mag-publish ng banner nang direkta para sa mga serbisyo sa advertising ng Google: adWords at Double Click. Kabilang sa mga disadvantage ay limitado ang mga kakayahan sa animation.

Ang ilang mga taga-disenyo, kadalasang Amerikano, ay gumagamit ng editor at mga aklatan ng Green Sock Animation Platform. Gayunpaman, hindi sila nakatanggap ng makabuluhang pamamahagi sa ating bansa.

Isinasaalang-alang na ang lahat ng kinakailangang bahagi ay open source, ang isang mahusay na espesyalista ay maaaring gumawa ng HTML5 banner kahit na sa isang simpleng text editor. Gayunpaman, ang pamamaraang ito ay hindi epektibo kumpara sa paggamit ng mga propesyonal na programa ng animation.

Mga teknikal na kinakailangan para sa mga HTML5 na banner.

Ang mga kinakailangan ay nauugnay sa:

• kabuuang bigat ng HTML5 banner sa kb.;
• istraktura ng zip archive, bilang ng mga folder at file;
• listahan ng mga pinapayagang format ng file;
• isang paraan upang paganahin ang mga link ng URL sa pamamagitan ng pag-click sa isang banner (banner firmware);
• listahan ng mga pinapayagang js library sa external hosting;
• pamamaraan at mga paghihigpit para sa pagkonekta ng mga video at audio file;
• mga kinakailangan para sa disenyo ng frame, mga disclaimer, dalas at bilang ng mga cycle ng animation, na naglo-load sa processor ng device.

At hindi ito kumpletong listahan ng mga kinakailangan na dapat isaalang-alang ng aming mga developer upang mabigyan ang customer ng HTML5 na banner na handa na para sa paglalagay at pagsisimula ng isang kampanya sa advertising nang walang pagkaantala.

Ano ang dapat kong gawin sa aking mga dati nang ginawang Flash banner?

Tingnan para sa iyong sarili - ang pinakamalaking network ng advertising ay hindi na tumatanggap ng mga Flash na banner para sa pagkakalagay, ang mga bahagi ng Flash ay naka-block sa mga browser at sa mga iOS device, ang Swiffy (ang tanging sapat na on-line na converter ng mga Flash na banner sa HTML5) ay tumigil sa paggana.

Ang awtomatikong pag-convert ng Flash na format sa HTML5 ay halos imposible - sa katunayan, nangangailangan ito ng kumpletong manu-manong muling pagbuo sa isang HTML5 editor. Sa ganoong sitwasyon, ang tamang desisyon ay ang mag-order ng paglikha ng bagong set ng mga animated na banner sa moderno at unibersal na HTML5 na format.

Paano ang tungkol sa "gif"?

Kailangan mong maunawaan na ang anumang GIF animation ay isang sunud-sunod na hanay ng mga frame na larawan, tulad ng sa mga video file. Ang GIF file ay maaaring maglaman ng impormasyon tungkol sa bilis ng pag-playback ng frame at ang bilang ng mga pag-uulit. Nililimitahan nito ang kanyang mga kakayahan.

Ang GIF banner ay hindi maaaring gumana sa mga vector graphics, lumikha ng animation sa programmatically, umangkop sa nais na laki, at marami pang iba, na madaling mahawakan ng isang animated na HTML5 banner.

Ano ang ibig sabihin nito para sa advertiser?

Ang problema ng labis na timbang. Oo, kahit na ang mga banner ay madaling kapitan dito. Ang lahat ng mga pangunahing platform ng advertising ay nagtatakda ng mahigpit na mga paghihigpit sa timbang ng banner sa kilobytes.

Ang GIF banner ay mainam para sa pagpapakita ng ilang static na frame, marahil ay may kaunting animation ng text, isang button, o pagbabago ng mga larawan. Sa kasong ito, ang kabuuang bigat ng GIF banner ay hindi lalampas sa mga kinakailangan ng mga platform ng advertising.

Kung ang animation ay nagsasangkot ng pagbabago ng ilang daang mga frame, ang bigat ng GIF banner ay tumataas, tulad ng sinasabi nila sa Ingles, "kapansin-pansing," iyon ay, kapansin-pansing. Ang isang 20-segundong GIF na tumitimbang ng ilang megabytes ay karaniwan. At ito ay labis na hindi nagustuhan ng mga network ng advertising, na wastong nag-aalala tungkol sa kung gaano karaming trapiko ang kailangang i-download ng user upang matingnan ang banner.

Kaya, kung kailangan mo ng banner na may maraming animation effect, character animation, interactive, adaptive o video banner, ang pagpili ay ginawa pabor sa pag-order ng HTML5 banner.