Mums ir reklāmkarogs un lasiet klikšķus. Citiem baneriem, citiem tehniskiem braucieniem un tur klikšķi tiek lasīts citādi, tagad mēs uzskatām konkrētu piemēru.

Konteiners ar reklāmkarogu

Citās mācībās es jums saku, kā izveidot reklāmkarogu 100% ekrāna platumā ar animāciju un kā izveidot un sagatavot vietnes izkārtojumu, lai vietā.

Faili no nodarbības:

1. Gatavie baneri Fullecscreen: noklikšķiniet uz

Draugi, hello visi. Šodien turpinās izveidot banerus programmā Google Web. Dizaineris HTML5 formātā, ar 3D efektu.

Un tas ir saprotams, baneri, kas izveidoti uz HTML5 un CSS3, tiek parādīti jebkurā ekrānā gan datorā, televizoros un tālāk mobilās ierīces. Ko jūs nevarat pateikt par Flash baneriem.

Turklāt šie baneri var būt pietiekami, lai izmantotu, un baneris izskatīsies lieliski jebkurā ekrānā.

Un, ņemot vērā faktu, ka mobilās ierīces arvien vairāk izmanto, lai apskatītu interneta resursus, tas ir ļoti svarīgi.

Es jau teicu galvenajam un izvietošanai vietnē pēdējā rakstā. Tāpēc šodien es pievērsīšu uzmanību 3D efekta un riteņbraukšanas iestatījumu izveidei (atkārtota šovs). Un arī apsveriet vairākus iestatījumus "notikumiem".

Sīkāk, lai gleznotu visu šo procesu diezgan sarežģītu, tāpēc es pievēršu jūsu uzmanību video pamācību. Tātad kapteinis materiāls būs daudz vieglāk. Un arī lejupielādējiet arhīvu ar savu reklāmkaroga projektu kā vizuālu piemēru.

Sagatavošanās reklāmkaroga izveidei ar 3D efektu.

Bannera veids gatavā formā ir atkarīgs no sagatavošanas sagatavošanas. Google Web dizaineru redaktors ļauj jums izveidot reālistisku 3D efektu, un tas viss tiks uzrakstīts html kodsJums tikai nepieciešams, lai savāktu visu vizuālo redaktoru.

Lai izveidotu augstas kvalitātes 3D efektu, jums ir nepieciešams iepriekš izgriezt Photoshop no sagataves, kas nākotnē jums būs nepieciešams doks pakalpojumā Google Web dizainers.

Piemēram, es sagatavojos šādas sagataves:

Es izgatavoju šos stieņus Photoshop, bet internetā ir daudz līdzīgu attēlu. Jūs nevarat celms, bet veikt gatavus opcijas.

Piezīme: Ja jūs interesē šādu sagataves izveides process, rakstiet par to komentāros.

Ir svarīgi arī apsvērt reklāmkaroga vispārējo sastāvu un skriptu. Tas ir atkarīgs no tā, kā baneris tiks uztverts kopumā.

3D objekta izveide pakalpojumā Google Web dizainers.

Tātad, pēc analoģijas ar pēdējo rakstu, jūs palaist redaktoru, izveidojiet jaunu projektu.

3D efekts nozīmē kompozīta attēlu, tas ir, attēlu, kas sastāv no vairākiem gabaliem, kas atrodas vēlamajā projekcijā.

Šie vairāki attēli ir jāapvieno gan grupā vai vietā div. Un tā būs taisnība. Bet man ir ērtāk strādāt ar sāniem.

1. solis. Izveidojot divu bloku.

Tātad, lai izveidotu laulības šķiršanu, izvēlieties kreisajā panelī "Tag rīks (D) ".

Noteikti piešķiriet identifikatoru. Un pon izmēri, izmantojot sadaļu "Properties" labajā rūtī.

Tagad jums ir nepieciešams izcelt bloku. Lai to izdarītu kreisajā rūtī "Atlases rīks (V) " Un divreiz noklikšķinot pa kreiso peles pogu uz DIV bloka rāmja. Tas aizstās sarkano krāsu.

2. solis. Attēlu bloķēšana.

Un tagad sākas visvairāk sāpīga process. Jums ir nepieciešams iestatīt visus vienas attēla elementus.

Manā rīcībā ir šādi elementi:

- augšējā puse.

- sānu (sastāv no trim atsevišķām daļām).

Lai sāktu ar, mēs novietojam tēla rotējošo (aizmugurējo) pusi un saskaņot to centrā un augšējā malā no banner.

Tādā pašā veidā pievienojiet priekšējo pusi. Izlīdzināt un novirzīt pa Z asi.

Kopš 4PX (pikseļu) malas platuma, tad es novirzīju priekšējo un otrādi pa Z asi līdz 2px un -2px. Kas nodrošinās plaisu starp attēliem.

Piezīme: precīzi pārvietojumi ir uz ekrānuzņēmumiem.

Tālāk pievienojiet sānu, visas daļas atsevišķi. Izmantojiet rīkus ērtībai "3.D darbvietas rotācija » un "Skala". Tie palīdzēs jums pārliecināties visu informāciju.

Lai sāktu ar, es iesaku, veido visus attēlus, no vienas puses, un pēc tam tos kopē un novietos tos spoguļa projekcijā otrā pusē.

Nākamais solis ir veidot augšējo kreiso stūri.

Tagad centrālā daļa pusē.

Un apakšējā stūrī kreisajā pusē.

Visiem elementiem no sāniem jābūt obligāti jāizlīdzina Y ass par 90 0.

Tagad jums ir nepieciešams kopēt vēlamo slāni un ielīmēt to vēlreiz, pārdēvējot un mainīt atrašanās vietas parametrus, tāpēc mēs iegūstam elementus labajā pusē.

Lai to izdarītu, izvēlieties attēlu apakšējā panelī - nospiežat Ctrl + C taustiņu kombināciju un ievietojiet Ctrl + V dublikātu.

Sāksim to pašu kā lauka pusi no augšas uz leju, bet tikai pa labi.

Augšējā labā vāka.

Es nedarīju apakšējo daļu, jo tas nav redzams attēlā.

Vislielākais darbs ir pabeigts. Tagad jūs varat turpināt izveidot animāciju. Kā vizuāla demonstrācija, veiciet attēla rotāciju.

Rotācijas efekta izveide pakalpojumā Google Web dizainers.

Pirmkārt, jums ir nepieciešams iziet no DIV bloka, kurā ir visi attēla elementi. Tas ir, mēs strādājāmies blokā ar konkrētiem attēliem, un tagad jums būs jāstrādā ar visiem attēliem vienlaicīgi, braucot pa diviem.

Lai sāktu ar, nospiediet divpogu uz apakšējā paneļa.

Tātad, uz thalet laiku, noklikšķinot uz peles labās pogas, izveidojiet divus taustiņus. Tai vajadzētu strādāt šādi:

Atrašanās vieta avota rāmja uz Y skalā ir iestatīta uz -90 0.

Pirmais keyframe (otrais rezultāts) eksponē skalā y par 0 0.

Otrais galvenais rāmis (trešais konts) eksponē skalā ar 90 0.

Viss var pārbaudīt rezultātu. Lai to izdarītu, noklikšķiniet uz pogas Spēlēt..

Tiesa, mūsu attēls padarīs tikai vienu kārtu. Lai attēlu, lai pagrieztu nepārtraukti vai veiktu vairākus apgriezienus, jums ir jākonfigurē cikliskie parametri.

Iestatiet Cyclicity Google Web dizainerā.

Programmā varat konfigurēt vairākas cikliskuma iespējas (atkārtojumi). Tātad jūs varat konfigurēt atkārtojumu visiem reklāmkarogu elementiem vai katram elementam atsevišķi.

Arī cikliskumu var ierobežot ar atkārtotu skaitu vai padarīt to bezgalīgu.

Apakšējā panelī blakus katram elementam ir simboli "Pils", "Eye", "Reverse Arrow".

Tātad, lai izveidotu cikliskumu, jums ir nepieciešams noklikšķināt uz simbola "Apgrieztā bultiņa". Un izvēlieties ierobežotu atkārtojumu skaitu vai bezgalīgu iespēju.

Es izvēlējos bezgalīgu animāciju atkārtošanos. Kā es vēlos konfigurēt nākotnē "Notikumi" Tādējādi rotācija tiks pārtraukta, kad peles kursors svārstās un turpinās pēc kursora izņemšanas.

Stop rotācija, braucot peles kursoru uz reklāmkarogu.

Pirmkārt, pirmajā atslēgas rāmī (otrā no rezultāta), instalējiet īsceļu. Lai to izdarītu, pa rāmi, ar peles labo pogu noklikšķiniet uz peles pogas un izvēlieties Izvēlnes vienumu. "Pievienot etiķeti". Ievadiet īsceļa nosaukumu un noklikšķiniet uz taustiņa Enter.

Un nākamajā solī izvēlieties kā uztvērēju « Page1. Tur nebūs citu iespēju tur.

Un pēdējais solis, izvēlieties etiķeti, kas izveidots sākotnējā posmā.

Saglabājiet notikumus un pārbaudiet. Banner rotācija apstāsies, kad jūs virzīsieties uz peles kursoru uz rāmja, kur tika veikta etiķete.

Atjaunojot rotāciju pēc peles kursora vadiem.

Lai rotācijas turpinātu, pēc kursora skalas līdz sāniem konfigurēt citu notikumu.

Tas ir konfigurēts tādā pašā veidā kā iepriekšējais, tikai ar divām atšķirībām.

Kā notikums ir izvēlēts "Pele"— « mouseout ».

Notikums - peles sabrukums

Un kā prasība "Laika līnija" — « toggleeplay ».

Darbība - Turpināt

Šeit ir gatavs mūsu reklāmkarogam ar 3D efektu. Un jūs varat nākt klajā ar tādiem dažādiem efektiem, kā vēlaties.

Vienkārši neaizmirstiet veikt notikumu peles klikšķi un atveriet saiti. Reklāmkarogs nav radīts skaistuma labad, jo tā.

Sākotnēji šis process var šķist sarežģīts, bet padarot pāris banerus, jūs nešķiet tik.

Man ir viss šodien, draugi. Es novēlu jums visiem panākumiem, gaidot jūsu komentāru sanāksmēm jaunos rakstos un video konsultācijās.

Ar cieņu, Maxim Zaitsev.

Banner html5. - banner, kas parāda patvaļīgu HTML saturu vai attēlu. HTML kods var būt parasts HTML lapa ar stiliem un skriptiem. Tas ir ievietots IFRAME un ir ierobežota piekļuve uz vietnes saturu.

Izmantojot "Banner HTML5" veidni, reklāmkarogu var pievienot divos veidos:
1. Sagatavojiet tikai attēlu. Saites klātbūtne, lai dotos uz reklāmkarogu parametriem, pielāgo attēla klikšķu.
2. Sagatavojiet HTML radošo redaktoru, izmantojot norādījumus: Or.
Ja bannerā tiek pievienots HTML kods un attēls, tiks parādīts HTML kods.

Parametri regulējami, pievienojot Adfox:
- platums, reklāmkarogu augstums.
- Pašu CSS stili konteineram ar reklāmkarogu.

HTML radošā attīstība

1. Lasīt S. hTML koda prasības

• Maksimālais pieļaujamais HTML faila lielums ir 65 000 baitu.
• JavaScript un CSS ir vēlams novietot Banner HTML kodētāja iekšpusē. Ja galīgais HTML kods pārsniedz maksimāli pieļaujamo lielumu, tad ir nepieciešams samazināt kodu, veicot JavaScript un CSS atsevišķi faili:
  - saglabāt JS un cSS kods atsevišķos failos ar paplašinājumu.JS Or.CSS;
  - veidu faili nedrīkst pārsniegt 300KB;
  - Lejupielādējiet failus cilnē "Files" reklāmas kampaņa Un saņemtās saites uz failiem ir savienoti ar HTML kodu.

  JS un CSS failu savienošanas piemērs:

  HTML kods neļauj izmantot relatīvos ceļus uz failiem.

• Projekts var saturēt tikai vienu failu ar paplašinājumu.html.
• Maksimālais atļautais failu skaits projektā ir 50;
• Atļauts failu tipi projektā: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WebM, AVI, SWF;
• Katra faila maksimālais izmērs (derīgs arī failiem arhīvā):
  - 300KB;
  - 1MB video failiem.
• Failu nosaukumos jābūt tikai angļu alfabēta numuriem vai burtiem, slēgšanas simbolu. Tas nav atļauts izmantot nosaukumu krievu burtu failu, atstarpes, citātus un speciālās rakstzīmes;
• Mainīgo lielumu un objektu nosaukumos nav iespējams izmantot krievu vēstules.
  Izņēmums ir tikai teksts par reklāmkarogu.
• Formāts gatavs projekts - zip. arhīvs.

Prasības attēliem

Izmantot attēlus augstas izšķirtspējasTas krasi uzlabos reklāmkaroga kvalitāti mobilajā ierīcē, lai gan tas samazinās reklāmkaroga lejupielādes ātrumu.

Jūs varat izmantot SVG attēlus. Tie ir vektors, un tāpēc viņi izskatīsies labākās uz visām ierīcēm - mobilo un Dexte. Viņiem ir arī neliels faila lielums un var būt ar animāciju.

Pieļaujamās attēlu formāti: PNG, GIF, JPG, SVG.
Viena faila maksimālais svars: 300KB.

2. Izvēlieties redaktoru, kurā jūs izstrādāt HTML radošu un noklikšķiniet uz atbilstošās saites. Sagatavojiet arhīvu ar HTML radošumu saskaņā ar instrukcijām:

Adobe Animate CC redaktors - viena pogas banner

Adobe Animate CC redaktors - dažas pogas banner

1. Lejupielādējiet veidni reklāmkarogam ar vairākām pogām

2. Izveidojiet HTML5 audekla projektu Adobe Animate (vai atveriet esošo)

3. Pievienojot pogas (pogas) vai ieguldītas sižetā, ir svarīgi tos noteikt piemēram, vārds.Lai jūs varētu pievienot klikšķi uz vēlamo pogām. Mēs iesakām izmantot vārdus poga1 - poga9..

Skatīt arī:

Norādījumi par pogas un piešķiršanas gadījumu nosaukuma pievienošanu

Poga uz galvenās skatuves

1. Izveidojiet kādu objektu uz skatuves, piemēram, izmantojot taisnstūra rīku.
Pēc tam izvēlieties to konteksta izvēlnē, izvēlieties "Konvertēt uz simbolu ..."

2. Dialoglodziņā parādās, izvēlieties Tips: pogu, vārdu var palikt nemainīgs, noklikšķiniet uz Labi.

3. Piešķirt šo pogas gadījuma vārdu uz darbu klikšķi.

4. Push kodu darbības šai pogai:

Logi.Buttons.Push (// izlietne pogas caur komatu, pievienojot to šo šo šo to.Button1 sākumā // beigām vietas pogām);

Ligzdots poga

1. Pieņemsim, ka poga ir iekšā citā simbolā, piemēram, iekšpusē filmu.
Šajā piemērā šis filmas klips ir norādīts, piemēram, vārds "nosaukums"

2. Ar dubultklikšķi Iet uz nosaukumu, būs ligzdots poga.

3. Nosakot darbībās, ceļš uz šādu pogu, pēc tam jums būs jāpievieno objekta nosaukums, kurā tas ir iestrādāts:

Logiem

Norādījumi caurspīdīgu pogu izveidei

1. Iezīmējiet vēlamo vienumu un pārvērst to uz simbolu.

2. Norādiet vārdu un karbonādes veidu: pogu

3. Izmantojot dubultklikšķi uz simbola, dodieties uz to:

4. Padariet ievietojiet taustiņu taustiņu hit rāmī

5. Noņemiet augšup, uz augšu, uz leju

6. Caurspīdīga poga ir gatava:

4. Pievienojiet pasākumus projektam projektam (mēs pievienosim kodu pogām uz to)

5. Atveriet koda kodu kodu

Logs.buttons.Push (// izlietne pogas caur komatu, pievienojot beigas pogas sākumā); Setadfox ();

Ja poga ir galvenajā skatījumā, pēc tam pēc tam ievietojiet savu instances vārdu tūlīt pēc tam, piemēram,

This.button1

Ja poga ir investētā sižeta iekšpusē, pēc tam pēc šī nepieredzējis pirmās instances nosaukuma sižeta un pēc tam vārda pogas:

This.scene_instance_name.button2.

Pēdējā koda piemērs darbības slānī:

Logiem Setadfox ();

7. Pirmā poga kodu rindā izsauks pirmo saiti no ADFOX, otrais - otrais un tā tālāk.

Kopā ar HTML radošumu nosūtiet vadītāju, lai pievienotu reklāmkarogu ADFOX, informāciju par pogām un atsauces numuriem.

8. Atveriet Publicēt iestatījumus un pievienojiet veidni no pirmā vienuma un publicējiet projektu, izvēloties vēlamo direktoriju.

9. Pēc projekta publicēšanas, arhivējiet to format.zip. Jūsu radošais ir gatavs lejupielādei Adfox Banner.

Google Web dizaineru redaktors

Šā bannera kodu var uzskatīt par pamatu, veidojot radošus redaktorā.

Veidne satur skriptu adfox_html5.js. un kopums parametru pareizai pārejas un skaitīšanas notikumu darbībai:
% Atsauces%,% user1%,% EVENTN%, kur n ir notikuma numurs no 1 līdz 30.

2. Noklikšķiniet uz apstrādes.

Visi notikumi tiek piešķirti konkrētiem animācijas elementiem, izmantojot cilni "Notikumi".

Lai izsauktu darbības, tiek izmantots interaktīvā zonas komponents.
Pievienojiet to un izvēlieties notikumu Interaktīvā zona → Pieskarieties / nospiežot (vai "Tap platība\u003e Pieskarieties / noklikšķiniet uz" angļu valodā).

Cilnē " Savs kods"Norādiet kliķes funkciju zvanu.

2.1 Ja tiek izmantota viena pārejas poga:

Callclick ();

2.2 Ja pārejas pogas ir vairākas:

Callclick (n);

kur n.

2.3 Ja jums ir nepieciešams izsaukt notikumu no animācijas bez pārejas, izmantojiet šādu kodu:

Klaļulis (n);

kur n. - Notikuma numurs, kas radīts.

Vilkšanas (gumijas) reklāmkaroga ieviešanas īpatnība.

Tā, ka baneris ir sastādīts platumā konteinera, kurā tas būs uz vietas, uz paneļa Īpašības Par pozīciju un izmēru, norādiet procentuālo vietu vietā pikseļu.

Izmantot arī iespējas "Izlīdzināt konteinerā" un "Gumijas izkārtojums" uz augšējā panelis Instrumenti.
Ja jūs iespējojat "gumijas izkārtojumu" pirms jebkuru izlīdzināšanas rīku izmantošanas, tad, mainot mātes konteinera lielumu, visi priekšmeti būs vienādi viens ar otru un salīdzinājumā ar tvertnes lielumu.
Šādā gadījumā jūs varat vienlaicīgi izmantot gan elementu relatīvos izmērus procentos un absolūtos - pikseļos.

4. Projekta publicēšana.

Pievienojot reklāmkarogu Adfox, vadītājam būs jāzina pogas un notikumu numuru atbilstība. Katrs pasākuma pārvaldnieks uzrakstīs savu saiti uz slēdzi, kas, izmantojot mainīgo, tiks pārsūtīts uz reklāmkaroga kodu.

Pēc projekta publicēšanas, arhivējiet to formātā .zip.. Jūsu radošais ir gatavs lejupielādei Adfox Banner.

Citi redaktori

1. Klikšķu skaitīšana reklāmkarogā

Lai uz reklāmkarogu ADFOX, statistika par klikšķiem ir nepieciešami HTML kodā tagā un par Href atribūtu, lai reģistrētu mainīgo:

% banner.reference_user1%

Arī attiecībā uz saitēm izmantojiet mērķa atribūtu no% banner.target mainīgo atribūta vērtībā.
Ja atribūts trūkst, saite atvērs IFRAME, tas ir, reklamētā vietne atvērsies uz reklāmkaroga vietu.

Piemērs HTML koda skaitīšanas klikšķiem uz banner:

Vietnes reklāmdevējs

HTML kodā baneri, kas tiks ievietoti mobilajās lietojumprogrammās, izmantojiet makro, lai ņemtu klikšķus:% - reeference%@%1banner.user1%

2. Klikšķu skaitīšana ar vairākām saitēm reklāmkarogā

Pieņemsim, ka banneram ir vairākas saites pārejai, kas ved uz dažādas lapas Reklāma vietne, un katram no tiem jums ir nepieciešams iegūt pāreju skaitu.

Pirmā saite otrā saite

Nomainiet href atribūtu vērtību mainīgajiem %Request.reference%@%banner.eventn%kur, nevis n, ir jābūt notikuma numuram no 1 līdz 28.
Piemēram:

Pirmā saite otrā saite

Atbilstība atsaucēm un mainīgajiem lielumiem jābūt informatoram vadītājam, pievienojot reklāmkarogu Adfox. Kopš pievienojot reklāmkarogu, jums būs jānorāda pirmā saite cilnē "Notikumi" notikumu, un notikumu 2 - otrā saite.

Pievienojot reklāmkarogu Adfox

Lai pievienotu reklāmkarogu ADFOX Izvēlieties vēlamo reklāmkaroga veidu un veidni "Banner HTML5".

Norādiet reklāmkarogu parametrus:

Arhīvs ar HTML5 radošu - Download.zip Arhīvs ar projektu, lauku "HTML5 Creative Code" Tam ir jābūt tukšam (tas tiks aizpildīts ar saturu. HTML failu faili pēc reklāmkaroga pievienošanas).

HTML5 Creative Code - Lejupielādējiet ZIP arhīvu ar projektu, kas sagatavots HTML redaktori Vai ievietojiet HTML kodu.

Ja reklāmkarogā ir vairākas saites, pievienojiet tos cilnē. Notikumi Banner, pārejas URL laukā.
Atbilstība atsauces numuriem un notikumiem, norādiet radošos HTML izstrādātājus.

Saite uz mazgāšanas pikseļu - noklusējuma pikseļu adfox //bannerers.adfox.ru/transparent.gif., ja nepieciešams, glabā ierakstus par izstādēm trešās puses sistēmaNoņemiet Adfox pikseļu un norādiet citu saiti.

Radošā platums (PX vai%) - Norādiet reklāmkaroga platumu.

Radošs augstums (px vai%) - Norādiet reklāmkaroga augstumu.

Bilde - Ievietojiet attēlu.
Creative Rādīt nosacījumus:
- Tiks parādīts HTML kods un attēls - HTML kods.
- Pievienots attēls - attēls tiks parādīts.
- HTML kods ir pievienots - tiks parādīts HTML kods.

Banner konteineru klases atribūta nosaukums - Norādiet nosaukumu (vai vairākus nosaukumus, izmantojot telpu) klases atribūta konteineram ar reklāmkarogu.

Izmantojiet SafeFrame (Jā | Nē) - SafeFrame ir tehnoloģija, kas iesaiņo reklāmu īpašā IFRAME, kam ir stingra API. SafeFrame netiek reklamēts, kas ir sastādīts tajā, vāc datus un mijiedarbojas ar pārējo lapu ārpus seifeframe.
jā, ļaujiet izmantot SafeFrame un atspējot piekļuvi tīmekļa lapai;
nē - neietver safuname. Reklāmkaroga kodam ir piekļuve tīmekļa lapai.

Banner bloka stili - patvaļīgi stili banner konteineram ar vienu rindu. Papildus stilam: displejs. Piemēram, "robeža: 1px ciets sarkans;". Nevainīgas vērtības tiks izmestas pārlūkprogrammā.

Banner (ENG. Banner - karogs, pārredzamība) - reklāmas rakstura grafiskais attēls, kas ir līdzīgs reklāmas modulim presē. Tas var būt gan statisks attēls vai pat teksts, un tajā ir animēti elementi (līdz video un interaktīviem objektiem). Kā likums, tas var saturēt hipersaiti uz vietni reklāmdevēja vai lapu ar lai iegūtu vairāk informācijas. No banner uzdevumi ir šādi. Pirmkārt, pārdod preces. Tā - piesaistīt Apmeklētāja uzmanība interese potenciālais klients, ko reklamē preces vai pakalpojums, pāreja uz vietni un izraisīt (Aicinājums rīkoties). Tas ir CTA un ir reklāmas galvenais mērķis. Un, otrkārt, bannera uzdevums ir attēla vai firmas reklāma, kuras mērķis uzlabot zīmola atpazīstamību Un veikt pozitīvu attēlu par zīmolu.

Populāras reklāmas vietnē:

• Grafisks - vienkāršs reklāmkarogs reklāmai internetā. Sastāv no konkrēta izmēra attēla un satur saiti uz reklāmas resursu.
• Flash banner - tai ir lieliskas iezīmes animācijai, tas ļauj jums labāk nodot informāciju, izmantojot vektora un rastra grafikas kombināciju.
• Html5 banner - HTML elementu kombinācija, izmantojot animācijas un labu vizuālo dizainu, kas pielāgots jebkurām ierīcēm un pārlūkiem.

Galvenās atšķirības HTML no cita veida baneriem
Salīdzinot ar citām baneru izveides metodēm, HTML5 tehnoloģija dod vairākas priekšrocības, lai piesaistītu auditoriju resursam:

• Paziņojumi šādā formātā tiks vienādi parādīti visās ierīcēs bez papildu pārlūkprogrammas paplašinājumiem.
  HTML5 nodrošina vairāk iespēju integrēties viņu reklāmas paziņojumi Veidlapas, pogas sociālie tīkli, kalendāri, kartes un citas lietojumprogrammas.
• Mazāku resursu mazais svars un lietošana neietekmē pārlūkprogrammā lapu lejupielādes ātrumu. Flash tehnoloģija neļauj sasniegt šādu rezultātu.
• Novērtēt baneru efektivitāti HTML5, jūs varat apskatīt statistiku Google Analytics.. Ir atšķirīga informācija par viesiem un pārejām uz saitēm.

Ievērojams trūkums Flash Technologies ir kļuvusi par pakāpenisku atteikumu lieliem uzņēmumiem, piemēram, Apple, Mozilla un Amazon. Galvenais stimuls zibspuldzes izzušanai bija Google. Pirmkārt, tie ir atspējoti Flash animācija Google Chrome.Un pēc tam atteicās Flash reklāmas meklēšanas reklāmas pakalpojumos, dodot priekšroku HTML5.

Veidi, kā izveidot HTML baneri
Bannera attīstība sākas ar atsevišķas lapas izveidi un iegultās vietnē, izmantojot "IFRAME". Ir vairākas metodes reklāmas baneru izstrādei vietnē, mēs apskatīsim populārākos.

1. Rāmja izveide, izmantojot CSS3 un JavaScript
Rāmis ļauj augšupielādēt visus neatkarīgus dokumentus norādīto izmēru jomā. Tas var būt atšķirīgs HTML kods, izmantojot stilus un skriptus dizainam. Banner ir iespējama arī caur "audekla" teritoriju, kurā tiek izstrādātas animācijas, zīmējumi, grafikas un pat spēles, izmantojot JavaScript. Lai paātrinātu attīstību, ir atļauts izmantot trešo pušu bibliotēkas, piemēram, CreateJs.

Ieguvumi:

• Funkcionalitāte neaprobežojas tikai ar jebkurām programmām, jūs varat saprast neko.

trūkumi:

• Šāds process ir diezgan sarežģīts un prasa īpašas izkārtojuma prasmes.
• Lielas darbaspēka izmaksas par citiem veidiem.

2. Adobe Edge Animate
Tie, kas zina Adobe Pēc iedarbības.Adobe Edge Animate programmas saskarne šķiet ļoti pazīstama. Adobe Edge Animate ir lielāka funkcionalitāte, kuras mērķis ir izstrādāt vienkāršu animētu saturu, izmantojot HTML5, JavaScript un CSS3. Programma atbalsta šādu formātu kā .svg, .png, .jpeg, GIF, HTML importu; Atbalstīt video un audio formātus.

Ir vairāk nekā 30 iegulto efektu, kas vienkāršo laiku, lai izveidotu augstas kvalitātes animāciju vairākas reizes:

Ieguvumi:

• Daudzas pieejamās video konsultācijas tīklā, lai izmantotu programmu.
• Vienkārša funkcionalitāte, lielākā daļa procesu ir automatizēti.
• Programmai nav nepieciešama zināšanas par HTML5, JavaScript un CSS3.
• Darba beigās mēs saņemam visus nepieciešamos dokumentus, lai uzņemtu reklāmkarogu vietnē. Attēli - mape ar grafisko elementu reklāmkarogi, vairāki javaScript faili, HTML un formāts - vēlākai rediģēšanai failu programmā.
• Gatavs reklāmkarogs, ko atbalsta visi mūsdienu pārlūkprogrammas un mobilās lietojumprogrammasAtbilst visām reklāmas kampaņu tehniskajām prasībām Yandex un Google.

trūkumi:

• Interfeiss tikai angļu valodā.
• Kopš 2015. gada Adobe ir pārtraukusi Adobe Edge Animācijas projekta izstrādi, programma kopš tā laika nav atjaunināta un sasniedzis savu limitu attīstībā. Edge Animate joprojām ir pieejams lejupielādei Creative Cloud arhīvos.

3. Adobe Animate CC
Animēt CC ir pārdēvēts par produktu. Adobe Flash. Profesionāli. Nesen Flash tehnoloģija ir zaudējusi lietotāju uzticību, programma, kas nepieciešama, lai mainītu nosaukumu un vairākas izmaiņas. Būtībā tas ir tāds pats flash programma Profesionāls, bet kādā faili tiek saglabāti HTML5 un JavaScript.

Interfeiss ir ļoti līdzīgs Flash Professional, bet programmas var atšķirties.

Ieguvumi:

• Spēja izveidot trīsdimensiju grafiku. Ir "kameras" rīks, kas ļauj noņemt šīs animācijas rāmja dziļumu.
• Atšķirībā no Edge Animate Animate CC programma ir liela izvēle Vector birstes un spēja strādāt ar rastra grafiku.
• Programma ir salīdzinoši jauna, tāpēc Adobe aktīvi attīsta projektu, atbrīvo atjauninājumus un uzlabo animācijas CC.
• Ir krievu valodas versija.
• Papildu failu eksporta iespējas formātos: JavaScript / HTML, JPEG, PNG, OAM, SVG, MOV, GIF. Nospiežot vienu pogu, reklāmkarogu elementi tiek saglabāti spritos, tādējādi samazinot bannera sāknēšanas laiku.

trūkumi:

• Programmas jaunums veiks arī trūkumus. Animācijas nodarbību izveide in Animate CC nav daudz kā Adobe Edge Animate. Tāpēc dažu funkciju darbs ir jāpārbauda neatkarīgi, kas nav viegli. Programma ir diezgan sarežģīta pašmācībai, bet jūs varat to izdomāt.
• Dažas funkcijas nav automatizētas, tāpat kā EDGE animate, kas arī palielina reklāmkaroga izveides laiku.

4. Google Web dizainers
Google mums patīk bezmaksas redaktorsSpeciāli izstrādāts, lai īstenotu HTML baneri. Google Web dizainers ir pilnībā asināts, lai īstenotu reklāmu, kuras galvenais slīpums ir vērsts uz AdWords.

Ja mēs skatāmies uz jauna faila izveides logu, mēs atzīmējam, ka reklāmas veidņu lielums jau ir iebūvēts programmā.

Ieguvumi:

• Vienkārša saskarne.
• Veidņu pieejamība Google reklāmai.
• Pilnībā bezmaksas programma.
• Krievu versijas klātbūtne.
• Noteikts adaptīvais dizains Baneri, HTML baneris izskatīsies lieliski jebkurā ekrāna izšķirtspējā.

trūkumi:

• Google Web dizaineru funkcionalitāte ir diezgan šaurs, lai izveidotu šedevrus animāciju. Programmu ļoti ierobežo veidnes.
• Mācību programmu trūkums. Google sertifikāti nav pietiekami, lai pilnībā izglītotu funkcionalitāti.

Visas iepriekš minētās metodes nav jaunas, bet tās ir pierādītas. Tātad, ir garantija, ka izveidotie HTML baneri tiks moderēti vairumā reklāmas vietās, jo to tehniskās prasības atbilst vispārējiem standartiem.

HTML5 baneri

no 2 299 rubļiem.

Berzēt.

Pasūtīt

Pašlaik HTML5-baneri ir vienīgais pašreizējais pilnvērtīgā animācijas reklāmkaroga formāts. Šis universālais pārrobežu platformas formāts ieradās, lai aizstātu Flash banerus, kuriem bija vairāki ierobežojumi un trūkumi.

Galvenie iemesli šādai atteikumam ir šādi:

• flash tehnoloģija Uzkrātās sūdzības par datoru drošību un palielinātu mobilo ierīču procesora jaudas patēriņu;
• dažas pārlūkprogrammas sāka bloķēt flash displeju pēc noklusējuma;
• uz iOS mobilajām ierīcēm (iPhone, iPad), ražotājs nesniedza zibspuldzi;
• reklāmkaroga flash reklāmas blokatoru popularitāte;
• atteikums turpināt atbalstīt un attīstīt Flash tehnoloģiju tās īpašniekam, Adobe.

Animācijas HTML5 baneri var tikt parādīti bez ierobežojumiem jebkurā pārlūkprogrammā, uz jebkuras ierīces ekrānā, ieskaitot viedtālruņus, tabletes un mediju TV. Tā ir viņu pārrobežu platforma un daudzpusība.

Klientam HTML5 baneru izmantošana nozīmē, pirmkārt, paplašinot auditorijas pārklājumu bez zaudējumiem.

Ko var html5-banner?

Daudz. Galu galā, tas ir vismodernākais formāts, kas piesaista lietotāja uzmanību un pat mijiedarbojoties ar to (interaktīvais baneris).

No animācijas viedokļa šāds baneris var parādīt Vector animāciju (bez zaudējumiem, kad mērogojot), rakstzīmju animācija, fotogrāfijas, logotipi, grafiki un diagrammas, teksts un pat 3D animācija. No interaktīva viedokļa HTML5 banner var reaģēt uz lietotāju darbībām un piedāvāt papildu saturu un iespējas. No mediju pārvadātāju viedokļa HTML5 banner var atskaņot video, slaidus un audio ierakstus. No adaptabilitātes viedokļa HTML5-Banner var izstiepties uz visu lapas platumu, atklāt papildu paneļus vai atklāt visu ekrānu.

Apsveriet galvenos HTML5 baneru veidus.

Animēts HTML5-Banner fiksētā izmēra.
Populārākais formāts lielākajā daļā reklāmas tīklu. Nepieciešamo baneru platums un augstums tiek izvēlēti no saraksta, kas pieņemts izvietošanai. Mēs vienmēr pateiksim man visbiežāk izmērus.

Vilkšana HTML5 banner (adaptīvs, gumija).
Tas ir baneris, kas var stiept, aizņem visu ekrāna platumu (dažreiz augstumu). (Vairāk var atrast šajā rakstā)

Fullecscreen HTML5 banner.
Banner, atverot visu ekrānu. Kā likums satur displeja taimeri un aizvērt pogu. Īpaši populārs displejā mobilajās ierīcēs.

Bieži šāds baneris ir jāpielāgo dažādām orientācijām un mobilo ierīču atļaujām.

HTML5-Banner (Raskulop) metēšana.
Pirmkārt, šāda reklāmkaroga (teaser) ir tikai sākuma panelis. Izpildot konkrētu algoritmu (peli vai nospiežot, taimeri vai citus notikumus lapā), otrā daļa no banner ar papildu uzlabotu informāciju atveras.

HTML5 video baneris.

Atkarībā no iestatījumiem un reklāmas platformas prasībām, tas var parādīt video, gan ar motora staciju, gan pēc pogas "Play" nospiešanas. Var saturēt vadības pogas un atvienot skaņu. Video fails parasti atrodas uz ārējā hostinga un bootable, kad tas tiek parādīts.

Spēle Interaktīvie baneri.
Baneri aicinot lietotājam iesaistīties spēlē, veicot vienkāršas darbības.

Šādi baneri piesaista mērķa auditorijas uzmanību, izraisa dzīves interesi, bet tajā pašā laikā ir vairāki ierobežojumi (piemēram, peles norādījuma trūkums mobilajās ierīcēs vai papildu skriptu izmantošanas ierobežojumi). Mēs vienmēr pastāstīsim jums par šīm funkcijām, ja esat izveidojis, lai izveidotu spēļu html5 reklāmkarogu.

Smart HTML5-baneri (kalkulatori).
Izmanto, lai iesaistītos un mijiedarboties ar lietotāju, piedāvājot viņam tūlītēju aprēķinu nepieciešamie parametri un konkrētu iekšējo algoritmu formulu (piemēram, aizdevuma aprēķins, hipotēku, būvmateriālu patēriņš un citas nekomplicētas darbības).

Rediģējami html5 baneri - Dažos gadījumos klientam ir pienākums nekavējoties veicināt baneru izmaiņas, neizmantojot attīstītāja palīdzību (piemēram, bieži mainīgas cenas, procentus vai citātus). Mēs varam tikt galā ar šādu uzdevumu un parādīt nepieciešamos parametrus tieši uz HTML kodu banner, kur klients var padarīt to pats. Jūs varat piedāvāt vēl vienu ērtu risinājumu reklāmkaroga, ārējo failu izmantoto datu izlaidei.

HTML5-baneri, kas darbojas ar ārējo datu ielādi un API.
Uz Šis brīdis Daudzi reklāmas tīkli aizliedz reklāmkaroga apriti Ārējie avoti. Tomēr, ja baneris ir publicēts tīmekļa vietnē, kas sniedz šādu iespēju, HTML5 baneris var pieprasīt nepieciešamo informāciju (tekstu, ciparus, citātus) un tos apstrādāt saskaņā ar norādīto algoritmu caur vietnes API.

3D HTML5 baneri.
Šādi baneri piesaista lietotāja uzmanību, izveidojot tilpuma attēlu modeļus lapā.

Html5 3D banner var īstenot kā rotējošu objektu, kura seja satur banner rāmjus nolaižamās grāmatas veidā vai izmantojot citus 3D efektus.

Ņemiet vērā, ka HTML5 banner var iekļaut vairākas aprakstītās funkcijas. Piemēram, video banner var novilkt uz visu lapas platumu, un trīsdimensiju animācija tiek atvērta lapā atkarībā no lietotāja darbības.

Ja jūs vēlaties pasūtīt HTML5 reklāmkarogu mūsu vietnē, un radošā ideja prasa dažādu formātu kombināciju - tas vienmēr ir mūsu speciālistu varā.

HTML5-Banner - ko viņš pārstāv tehniski?

Tas ir pareizāks, lai uztvertu HTML5 reklāmkarogu kā mini tīmekļa vietni. Bez pārspīlējuma.

HTML5, kurš sniedza šī bannera formāta nosaukumu, ir tīmekļa lapu marķēšanas valoda, vienkārši runājot, izkārtojumi. Un tas notiek saskaņā ar tiem pašiem likumiem kā jebkuru mūsdienu vietni. Tas var saturēt divus konteinerus, kas pievienoti fontiem, stili CSS. un JS skripti. Galvenais elements ir audekla animācijas konteiners. Pati animācija tiek īstenota, izmantojot Java skriptu, biežāk izmantojot JS bibliotēku, kas īpaši paredzēta animācijai.

Kas ir iekšā? Kāpēc arhīvā? Kāpēc ir tik daudz failu?

Tiesa, jo mēs esam pieraduši, ka baneris ir viens no JPG vai GiFka vai "Flash Drive" fails. Bet atcerieties, kā mēs iepriekš rakstījām, HTML5-baneris faktiski ir mini vietne. Tas satur dažādus failus un nāk ar reklāmas platformu ZIP arhīvā. Arhīvā ir galvenais HTML fails, Java skripti, bibliotēkas, stila lapas un attēli.

Piezīme. Dažos gadījumos reklāmas platforma var pieprasīt visu reklāmkarogu ar vienu failu, iekļaujot visus izmantotos skriptus un attēlus Bāzes-64 formātā. Tas nav problēma pieredzējušam attīstītājam. Tomēr šāda prasība palielina pilnvaru termiņu un izmaiņām tajā. Par laimi, šāda prasība reti sastopama.

Kā es varu redzēt HTML5 reklāmkarogu savā datorā?

Ļoti vienkārši. Izņemiet ZIP arhīvu un atveriet failu HTML failā pārlūkprogrammā.

Kā pārbaudīt to, ko es darīju pareizo HTML5-Banner?

Ja reklāmkarogs ir izveidots reklāmai google pakalpojumi, Jūsu pakalpojumā brīnišķīgs instruments, lai pārbaudītu dizainera kvalitāti - on-line html5 validators no Google. Mēs vienkārši izmantojam to: Lejupielādējiet savu ZIP arhīvu ar reklāmkarogu un skatiet, vai tā pārbauda čeku lapu. Kļūdas tiks atzīmētas ar sarkanām ikonām. Ja nav - jūsu izstrādātājs strādāja ne velti, un baneris ir gatavs izvietošanai Google AdWords. Vai dubultklikšķi.

Reklāmas tīklos Yandex, Mail.ru, Rambler, ADFOX, ADRIVER un citi tiek pārbaudīti arī atbilstību reklāmkarogu ar tehniskajām prasībām, pēc tās lejupielādes uz sistēmas vietni. Problēmu gadījumā jūs varat saņemt moderatora komentāru ar kļūdas aprakstu. Dažas vietnes nodrošina klientu reklāmas iespēju priekšskatījums Reklāmkarogs testa lapā.

Tomēr labākā garantija pareizai HTML5-Banner ražošanai ir attīstītāja pieredze, tās zināšanas par reklāmas vietu tehniskajām prasībām un vēlmi ātri labot kļūdas.

Banneris ar animāciju uz Java skriptu ir vēl viens?

Nejauciet sevi. "Java skriptu banner", "Canvas banner" - tas ir par to, ko sauc par "HTML5-Banner". Atkarībā no izstrādātāja rīka JS bibliotēkas vai izkārtojuma noteikumi var atšķirties, bet Ģenerālās asamblejas shēma paliek nemainīga.

Kā izveidot HTML5 Banner?

Populārākais dizaineru redaktors, lai izveidotu HTML5 animācijas - adobe programma Animēt.

Google piedāvā savu attīstības rīku - Google Web dizaineru. Starp tās priekšrocībām - klātbūtne daudzu iebūvētu veidņu un spēju publicēt reklāmkarogu tieši Google reklāmas pakalpojumiem: AdWords un dubultklikšķi. Starp mīnusēm ir ierobežotas animācijas pazīmes.

Daži dizaineri, vairāk nekā amerikāņu, izmanto redaktoru un bibliotēku Green Sock Animācijas platformu. Tomēr mēs nesaņēmām ievērojamu izplatīšanu.

Ņemot vērā, visi nepieciešamie komponenti ir atvērts kods, labs speciālists var izveidot HTML5 reklāmkarogu pat vienkāršākajā teksta redaktors. Tomēr šī metode nav efektīva, salīdzinot ar profesionālo animācijas programmu izmantošanu.

Tehniskās prasības HTML5 baneriem.

Prasības attiecas uz:

• kopējais svars HTML5 baneris KB;
• zIP arhīvu struktūras, mapju un failu skaits;
• atļauto failu formātu saraksts;
• veids, kā iespējot URL saites, lai noklikšķinātu uz reklāmkaroga (banner firmware);
• pieļaujamo JS bibliotēku saraksts ārējā hostē;
• video un audio failu pasūtījumi un ierobežojumi;
• prasības rāmja, atrunu, biežuma un skaita animācijas ciklu projektēšanai, ielādējiet ierīces procesoru.

Un tas nav pilns prasību saraksts, kas jums ir jāapsver mūsu izstrādātāji, lai nodrošinātu klientam HTML5 reklāmkarogu, kas ir gatavs bez kavēšanās uzņemties un sākt reklāmas kampaņu.

Kas man jādara ar manu Flash baneriem, kas izveidoti agrāk?

Skatiet sevi - lielākie reklāmas tīkli vairs nepieņem Flash baneri uz izmitināšanu, zibatmiņas komponenti ir bloķēti pārlūkprogrammās un iOS ierīcēs, pārtrauca savu darbu Swifify (vienīgais atbilstošs tiešsaistes Flash banner Converter HTML5).

Automātiska Flash formāta konversija HTML5 ir gandrīz neiespējama - nepieciešama, patiesībā, pilnīga manuāla sacelšanās HTML5 redaktorā. Šādā situācijā pareizais risinājums būs - izveidot jaunu animētu baneru komplektu, modernā un universālā HTML5 formātā.

Bet kā ar "gifs"?

Ir jāsaprot, ka jebkura GIF animācija ir sērijas komplekts rāmji, kā arī video failos. GIF failam var būt informācija par rāmju ātrumu un atkārtojumu skaitu. Tas attiecas tikai uz to.

Gif-banner nezina, kā strādāt ar vektorgrafiku, izveidojiet animāciju programmiski, pielāgoties vēlamajam izmēram un vēl daudz vairāk, ar kuru animācijas HTML5 baneris tiek galā ar.

Ko tas nozīmē reklāmdevējam?

Lieko svaru. Jā, pat baneri to pakļauti. Visām galvenajām reklāmas platformām piemīt grūti ierobežojumus attiecībā uz bannera svaru kilobaitos.

GIF-Banner ir labs, lai parādītu vairākus statiskus rāmjus, ir iespējams ar nelielu animāciju teksta, pogas vai foto maiņās. Šajā gadījumā GIF bannera kopējais svars nepārsniedz reklāmas vietņu prasības.

Ja animācija ietekmē vairāku simtu rāmju maiņu, GIF-banner svars palielinās, jo tie ir izteikti angļu valodā, "dramatiski", tas ir dramatisks. 20 sekundes GIF sver dažus megabaitus - parastā lieta. Un tas ir ļoti nepatīk reklāmas tīkliKas ir pamatoti norūpējies par to, cik daudz satiksmes būs lejupielādēt lietotājam, lai apskatītu reklāmkarogu.

Tātad, ja jums ir nepieciešama banner ar daudzām animācijas efektiem, karikatūra animācija, interaktīva, adaptīva vai video baneris - izvēle tiek veikta par labu HTML5 reklāmkaroga secībai.