Sepanduk HTML5- sepanduk yang memaparkan kandungan HTML atau imej sewenang-wenangnya. Kod HTML boleh menjadi halaman HTML biasa dengan gaya dan skrip. Ia diletakkan dalam iframe dan mempunyai akses terhad kepada kandungan tapak.

Menggunakan templat "Sepanduk HTML5", sepanduk boleh ditambah dalam dua cara:
1. Setelah menyediakan imej sahaja. Kehadiran pautan untuk pergi ke dalam parameter sepanduk mengawal kebolehklikan imej.
2. Setelah menyediakan kreatif HTML dalam editor mengikut arahan: atau.
Jika kedua-dua kod HTML dan imej ditambahkan pada sepanduk, kod HTML akan ditunjukkan.

Parameter boleh dikonfigurasikan apabila ditambahkan pada ADFOX:
- Lebar, tinggi sepanduk.
- Gaya css sendiri untuk bekas sepanduk.

Pembangunan kreatif HTML

1. Biasakan diri keperluan untuk kod HTML

• Saiz fail HTML maksimum yang dibenarkan ialah 65,000 bait.
• Adalah lebih baik untuk meletakkan JavaScript dan CSS di dalam kod HTML sepanduk. Jika kod HTML yang terhasil melebihi saiz maksimum yang dibenarkan, maka anda perlu mengurangkan kod dengan mengalihkan JavaScript dan CSS ke dalam fail berasingan:
  - simpan kod js dan css ke dalam fail berasingan dengan sambungan .js atau .css;
  - berat fail tidak boleh melebihi 300Kb;
  - muat naik fail ke tab "Fail" kempen pengiklanan dan masukkan pautan yang terhasil ke fail dalam kod HTML.

  Contoh menyambungkan fail js dan css:

  Kod HTML tidak membenarkan penggunaan laluan fail relatif.

• Projek hanya boleh mengandungi satu fail dengan sambungan .html.
• Bilangan maksimum fail yang dibenarkan dalam projek ialah 50;
• Jenis fail yang dibenarkan dalam projek: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Saiz maksimum setiap fail (juga digunakan untuk fail dalam arkib):
  - 300Kb;
  - 1MB untuk fail video.
• Nama fail mesti mengandungi hanya nombor atau huruf abjad Inggeris dan aksara garis bawah. Ia tidak dibenarkan menggunakan huruf Rusia, ruang, petikan dan aksara khas dalam nama fail;
• Anda tidak boleh menggunakan huruf Rusia dalam nama pembolehubah dan objek.
  Satu-satunya pengecualian ialah teks pada sepanduk.
• Format projek siap - zip arkib.

Keperluan imej

Gunakan imej resolusi tinggi, ini akan meningkatkan kualiti sepanduk secara mendadak pada peranti mudah alih, walaupun ia akan mengurangkan kelajuan memuatkan sepanduk.

Anda boleh menggunakan imej SVG. Ia adalah vektor, yang bermaksud ia akan kelihatan lebih baik pada semua peranti - mudah alih dan desktop. Mereka juga mempunyai saiz fail yang kecil dan boleh dianimasikan.

Format imej yang boleh diterima: png, gif, jpg, svg.
Berat maksimum satu fail: 300Kb.

2. Pilih editor di mana anda akan membangunkan kreatif HTML anda dan klik pada pautan yang sesuai. Sediakan arkib dengan kreatif HTML mengikut arahan:

Adobe Animate CC Editor - Sepanduk Butang Tunggal

Adobe Animate CC Editor - Sepanduk dengan Berbilang Butang

1. Muat turun templat untuk sepanduk dengan beberapa butang

2. Buat projek Kanvas HTML5 dalam Adobe Animate (atau buka projek sedia ada)

3. Apabila menambah butang atau klip filem yang dibenamkan dalam adegan, adalah penting untuk memberikannya nama contoh, supaya anda boleh menambah satu klik pada butang yang dikehendaki. Kami mengesyorkan menggunakan nama butang1 - butang9.

Lihat juga:

Arahan untuk menambah butang dan memberikan nama contoh

Butang di pentas utama

1. Cipta beberapa objek di tempat kejadian, contohnya, menggunakan Alat Rectangle.
Kemudian pilih dan pilih "Tukar kepada Simbol..." daripada menu konteks

2. Dalam kotak dialog yang muncul, pilih Jenis: Butang, Nama boleh dibiarkan tidak berubah, klik Ok.

3. Berikan Nama Contoh pada butang ini untuk klik berfungsi.

4. Tulis kod untuk butang ini dalam Tindakan:

Window.buttons.push(//Tulis laluan butang yang dipisahkan dengan koma, tambahkan ini pada permulaan this.button1 //Tamat ruang untuk butang);

Butang bersarang

1. Katakan butang itu berada di dalam simbol lain, contohnya di dalam Klip Filem.
Dalam contoh ini, Klip Filem ini diberi Nama Contoh "nama"

2. Dengan mengklik dua kali, masuk ke dalam nama, akan ada butang bersarang.

3. Apabila menentukan laluan ke butang sedemikian dalam Tindakan, anda perlu menambah Nama Contoh objek selepas ini di mana ia bersarang:

Window.buttons.push(//Tulis laluan butang yang dipisahkan dengan koma, tambahkan ini pada permulaan this.name.button1 //Tamat ruang untuk butang);

Arahan untuk membuat butang lutsinar

1. Pilih elemen yang anda mahu dan tukarkannya kepada simbol

2. Masukkan nama dan pilih Jenis: Butang

3. Klik dua kali pada simbol untuk pergi ke sana:

4. Sisipkan bingkai utama ke dalam bingkai tekan

5. Alih keluar kandungan bingkai atas, atas, bawah

6. Butang lutsinar sudah sedia:

4. Tambahkan lapisan Tindakan pada projek (kami akan menambah kod untuk butang padanya)

5. Buka tetingkap untuk menulis kod

Window.buttons.push(//Tulis laluan butang yang dipisahkan dengan koma, tambah ini pada permulaan //Tamat ruang untuk butang); setAdfox();

Jika butang berada dalam adegan utama, kemudian tulis nama contohnya sejurus selepas ini, sebagai contoh

ini.butang1

Jika butang terletak di dalam adegan bersarang, maka selepas ini tulis nama contoh adegan, dan kemudian nama contoh butang:

This.scene_instance_name.button2

Contoh kod akhir dalam lapisan Tindakan:

Window.buttons.push(//Tulis laluan butang yang dipisahkan dengan koma, tambahkan this.button1, this.scene_instance_name.button2 //Tamat ruang untuk butang pada permulaan); setAdfox();

7. Butang pertama pada baris kod akan memanggil pautan pertama dari ADFOX, yang kedua akan memanggil yang kedua, dan seterusnya.

Bersama-sama dengan kreatif HTML, berikan pengurus yang akan menambahkan sepanduk pada ADFOX dengan maklumat tentang surat-menyurat butang dan nombor pautan.

8. Buka pilihan penerbitan dan sambungkan templat dari titik pertama dan terbitkan projek dengan memilih direktori yang dikehendaki.

9. Selepas menerbitkan projek anda, arkibkannya dalam format .zip. Kreatif anda sedia untuk dimuat naik ke sepanduk ADFOX.

Editor Pereka Web Google

Kod sepanduk ini boleh digunakan sebagai asas semasa membuat kreatif dalam editor.

Templat mengandungi skrip adfox_HTML5.js dan satu set parameter untuk operasi peralihan dan pengiraan peristiwa yang betul:
%reference%, %user1%, %eventN%, dengan N ialah nombor acara dari 1 hingga 30.

2. Klik pemprosesan.

Semua acara diperuntukkan kepada elemen animasi tertentu melalui tab Acara.

Komponen Kawasan Interaktif digunakan untuk menggunakan tindakan.
Tambahnya dan pilih acara Kawasan interaktif → Ketik/klik(atau "Kawasan Ketik > Sentuh/Klik" dalam versi Bahasa Inggeris).

Dalam tab "Kod Tersuai", tentukan panggilan ke fungsi klik.

2.1 Jika menggunakan satu butang lompat:

CallClick();

2.2 Jika terdapat beberapa butang peralihan:

CallClick(n);

di mana n

2.3 Jika anda perlu mencetuskan acara daripada animasi tanpa peralihan, gunakan kod berikut:

CallEvent(n);

di mana n- nombor acara yang perlu dipanggil.

Ciri pelaksanaan sepanduk regangan (getah).

Supaya sepanduk merentangi lebar bekas di mana ia akan ditempatkan di tapak, pada panel Hartanah Untuk kedudukan dan dimensi, nyatakan peratusan dan bukannya piksel.

Juga gunakan pilihan "Sejajar dengan Bekas" Dan "Susun atur getah" pada bar alat atas.
Jika anda mendayakan Susun Atur Bendalir sebelum menggunakan sebarang alat penjajaran, maka apabila anda mengubah saiz bekas induk, semua elemen akan dijajarkan antara satu sama lain dan dengan dimensi bekas.
Dalam kes ini, anda boleh menggunakan kedua-dua saiz relatif unsur dalam peratusan dan saiz mutlak dalam piksel secara serentak.

4. Penerbitan projek.

Apabila menambahkan sepanduk pada ADFOX, pengurus perlu mengetahui korespondensi butang dan nombor acara. Untuk setiap acara, pengurus akan menulis pautannya sendiri untuk menavigasi ke, yang kemudiannya akan dihantar ke dalam kod sepanduk menggunakan pembolehubah.

Selepas menerbitkan projek, arkibkannya dalam format .zip. Kreatif anda sedia untuk dimuat naik ke sepanduk ADFOX.

Editor lain

1. Mengira klik pada sepanduk

Untuk membolehkan ADFOX mengira statistik pada klik untuk sepanduk, anda perlu menulis pembolehubah dalam kod HTML dalam teg dan untuk atribut href:

%banner.reference_user1%

Juga untuk pautan, gunakan atribut sasaran dengan pembolehubah %banner.target% dalam nilai atribut.
Jika atribut tiada, maka pautan akan dibuka di dalam iframe, iaitu tapak yang diiklankan akan dibuka di ruang sepanduk.

Contoh kod HTML untuk mengira klik sepanduk:

Laman web pengiklan

Dalam kod HTML sepanduk yang akan diletakkan dalam aplikasi mudah alih, gunakan makro untuk mengira klik: %reference%@%banner.user1%

2. Mengira klik daripada berbilang pautan dalam sepanduk

Katakan sepanduk mempunyai beberapa pautan untuk diikuti, yang membawa kepada halaman yang berbeza pada tapak yang diiklankan, dan untuk setiap satu daripadanya anda perlu mendapatkan bilangan klik.

Pautan pertama Pautan kedua

Gantikan nilai atribut href dengan pembolehubah %request.reference%@%banner.eventN%, di mana bukannya N harus ada nombor acara dari 1 hingga 28.
Sebagai contoh:

Pautan pertama Pautan kedua

Surat-menyurat pautan dan pembolehubah mesti dilaporkan kepada pengurus yang menambahkan sepanduk pada ADFOX. Memandangkan apabila menambah sepanduk, anda perlu menentukan pautan pertama untuk Acara 1 dan pautan kedua untuk Acara 2.

Menambah sepanduk dalam ADFOX

Untuk menambah sepanduk dalam ADFOX, pilih jenis dan templat sepanduk yang dikehendaki "Sepanduk HTML5".

Tentukan parameter sepanduk:

Arkibkan dengan kreatif HTML5- muat naik arkib .zip dengan projek, medan "Kod kreatif HTML5" hendaklah kekal kosong (ia akan diisi dengan kandungan fail .html projek anda selepas menambah sepanduk).

Kod kreatif HTML5- muat turun arkib zip dengan projek yang disediakan dalam editor HTML atau tampal kod HTML.

Jika terdapat beberapa pautan dalam sepanduk, tambahkannya dalam tab Peristiwa berhampiran sepanduk, dalam medan URL peralihan.
Sila semak dengan pembangun kreatif HTML untuk surat-menyurat nombor pautan dan acara.

Pautan kepada mengukur piksel- Piksel ADFOX digunakan secara lalai //banners.adfox.ru/transparent.gif, jika anda perlu menjejaki tera dalam sistem pihak ketiga, padamkan piksel ADFOX dan nyatakan pautan lain.

Lebar kreatif (px atau %)- nyatakan lebar sepanduk.

Ketinggian kreatif (px atau %)- nyatakan ketinggian sepanduk.

Gambar- muat naik imej.
Syarat untuk memaparkan kreatif:
- Kod HTML dan imej ditambah - Kod HTML akan ditunjukkan.
- imej ditambah - imej akan ditunjukkan.
- Kod HTML ditambah - Kod HTML akan ditunjukkan.

Nama atribut kelas kontena sepanduk- tentukan nama (atau beberapa nama yang dipisahkan oleh ruang) untuk atribut kelas bekas sepanduk.

Gunakan SafeFrame (ya|tidak)- safeFrame ialah teknologi yang membungkus pengiklanan dalam iframe khas yang mempunyai API yang ketat. SafeFrame menghalang iklan yang dipaparkan di dalamnya daripada mengumpul data dan berinteraksi dengan seluruh halaman di luar safeFrame.
ya - dayakan penggunaan safeFrame dan tolak akses ke halaman web;
tidak - jangan dayakan safeFrame. Kod sepanduk mempunyai akses ke halaman web.

Gaya blok sepanduk- gaya tersuai untuk bekas sepanduk dalam satu baris. Selain gaya: paparan. Contohnya, "sempadan: 1px merah pepejal;". Nilai yang tidak sah akan dibuang oleh penyemak imbas.

Kawan-kawan, hello semua. Hari ini kami akan terus membuat sepanduk dalam Google Web Designer dalam format HTML5, dengan kesan 3D.

Dan ini boleh difahami, sepanduk yang dibuat dalam html5 dan css3 dipaparkan pada mana-mana skrin, baik pada komputer, televisyen dan peranti mudah alih. Perkara yang sama tidak boleh dikatakan mengenai sepanduk kilat.

Di samping itu, sepanduk ini boleh digunakan dengan mudah dan sepanduk akan kelihatan hebat pada mana-mana skrin.

Dan memandangkan hakikat bahawa peranti mudah alih semakin digunakan untuk melihat sumber Internet, ini sangat penting.

Saya telah menerangkan yang utama dan penempatannya di laman web dalam artikel sebelumnya. Jadi hari ini saya akan memberi perhatian kepada mencipta tetapan kesan 3D dan kitaran (ulang). Kami juga akan melihat beberapa tetapan untuk "acara".

Agak sukar untuk menerangkan keseluruhan proses ini secara terperinci, jadi saya menawarkan tutorial video kepada anda. Ini akan menjadikannya lebih mudah untuk menguasai bahan. Juga, muat turun arkib dengan projek sepanduk saya sebagai contoh visual.

Bersedia untuk membuat sepanduk dengan kesan 3D.

Penampilan akhir sepanduk bergantung pada penyediaan. Editor Google Web Designer membolehkan anda mencipta kesan 3D yang realistik dan semua ini akan ditulis dalam kod html, anda hanya perlu memasang semuanya dengan betul dalam editor visual.

Untuk mencipta kesan 3D berkualiti tinggi, anda perlu memotong kosong dalam Photoshop dahulu, yang kemudiannya perlu disertakan dalam Google Web Designer.

Sebagai contoh, saya menyediakan tempat kosong berikut:

Saya membuat kosong ini dalam Photoshop, tetapi terdapat banyak imej yang serupa di Internet. Anda tidak perlu membebankan diri, tetapi ambil pilihan yang sudah siap.

Nota: Jika anda berminat dengan proses mencipta tempat kosong tersebut, tulis mengenainya dalam ulasan.

Ia juga penting untuk memikirkan komposisi keseluruhan sepanduk dan skrip. Ini menentukan cara sepanduk itu akan dilihat secara keseluruhan.

Mencipta objek 3D dalam Google Web Designer.

Jadi, dengan analogi dengan artikel sebelumnya, lancarkan editor dan buat projek baharu.

Kesan 3D membayangkan imej komposit, iaitu imej yang terdiri daripada beberapa keping yang terletak dalam unjuran yang dikehendaki.

Imej berbilang ini perlu digabungkan sama ada ke dalam kumpulan atau diletakkan dalam blok DIV. Dan begitu dan seterusnya akan betul. Tetapi, lebih mudah bagi saya untuk bekerja dengan pihak DIV.

Langkah 1: Buat blok DIV.

Jadi, untuk membuat blok DIV, di panel kiri pilih "Alat Penandaan (D)".

Pastikan anda memberikan ID. Dan laraskan saiz menggunakan bahagian "Hartanah" di panel kanan.

Sekarang anda perlu memilih blok. Untuk melakukan ini, di panel kiri pilih "alat pemilihan (V)" dan klik dua kali butang tetikus kiri pada bingkai blok DIV. Ia akan bertukar warna kepada merah.

Langkah 2. Menyusun imej.

Dan kini proses yang paling teliti bermula. Anda perlu mendedahkan semua elemen satu imej tunggal.

Saya mempunyai item berikut yang boleh saya gunakan:

- Bahagian atas.

— Sisi (terdiri daripada tiga bahagian berasingan).

Mula-mula, letakkan bahagian belakang (belakang) imej dan sejajarkannya ke tengah dan tepi atas sepanduk.

Tambah bahagian depan dengan cara yang sama. Jajar dan anjak sepanjang paksi Z.

Oleh kerana lebar sisi ialah 4px (piksel), saya mengalihkan bahagian hadapan dan belakang di sepanjang paksi Z sebanyak 2px dan -2px. Ini akan memberikan jurang antara imej.

Nota: lihat tangkapan skrin untuk nombor anjakan yang tepat.

Seterusnya, tambah sisi, semua bahagian secara berasingan. Untuk kemudahan penempatan, gunakan alatan "3D putaran kawasan kerja" Dan "Skala". Mereka akan membantu anda melaraskan semua butiran dengan tepat.

Sebagai permulaan, saya cadangkan anda menyusun semua imej di satu sisi, dan kemudian menyalinnya dan meletakkannya dalam unjuran cermin di sisi lain.

Langkah seterusnya ialah membariskan sudut kiri atas.

Sekarang bahagian tengah sisi.

Dan sudut bawah di sebelah kiri.

Pastikan anda menjajarkan semua elemen sisi pada 90 0 sepanjang paksi Y.

Kini anda perlu menyalin lapisan yang diingini dan menampalnya sekali lagi, menamakannya semula dan menukar parameter lokasi, jadi kami mendapat elemen untuk sebelah kanan.

Untuk melakukan ini, pilih imej di panel bawah - tekan kombinasi kekunci CTRL + C (salin) dan tampal pendua CTRL + V.

Mari kita mulakan dengan cara yang sama seperti bahagian medan dari atas ke bawah, tetapi hanya untuk yang betul.

Penutup kanan atas.

Saya tidak melakukan bahagian bawah, kerana ia tidak kelihatan dalam imej.

Kerja yang paling sukar telah berakhir. Sekarang anda boleh mula menyediakan animasi. Sebagai demonstrasi visual, mari kita putar imej.

Mencipta kesan putaran dalam Google Web Designer.

Langkah pertama ialah keluar dari blok DIV, yang mengandungi semua elemen imej. Iaitu, kami bekerja di dalam blok dengan imej tertentu, dan kini kami perlu bekerja dengan semua imej secara serentak, menguruskan blok DIV.

Untuk memulakan, klik pada butang DIV di panel bawah.

Jadi, pada chalet masa, dengan mengklik butang kanan tetikus, anda mencipta dua bingkai utama. Ia sepatutnya kelihatan seperti ini:

Lokasi bingkai asal pada skala Y ditetapkan kepada -90 0 .

Kami menetapkan bingkai kunci pertama (yang kedua) pada skala Y kepada 0 0 .

Tetapkan bingkai kunci kedua (ketiga berturut-turut) kepada 90 0 pada skala Y.

Anda boleh menyemak hasilnya. Untuk melakukan ini, klik pada butang Main.

Benar, imej kita hanya akan membuat satu revolusi. Untuk membolehkan imej berputar secara berterusan atau membuat beberapa pusingan, anda perlu mengkonfigurasi parameter berbasikal.

Menyediakan berbasikal dalam Google Web Designer.

Program ini membolehkan anda mengkonfigurasi beberapa pilihan kitaran (pengulangan). Dengan cara ini anda boleh menyediakan ulangan untuk semua elemen sepanduk atau untuk setiap elemen secara berasingan.

Juga, kitaran boleh dihadkan oleh bilangan ulangan atau dibuat tidak terhingga.

Di panel bawah, di sebelah setiap elemen terdapat simbol "Istana", "Mata", "Anak Panah Terbalik".

Jadi, untuk mengkonfigurasi kitaran anda perlu mengklik pada simbol "Anak panah terbalik". Dan pilih sama ada bilangan ulangan yang terhad atau pilihan yang tidak berkesudahan.

Saya memilih untuk mengulang animasi tanpa henti. Kerana pada masa akan datang saya ingin mengkonfigurasi "Acara" supaya putaran akan berhenti apabila tetikus dilegar dan akan diteruskan selepas kursor dialih keluar.

Menghentikan putaran apabila anda menuding tetikus pada sepanduk.

Pertama sekali, kami menetapkan pintasan pada bingkai kekunci pertama (yang kedua berturut-turut). Untuk melakukan ini, klik kanan di atas bingkai dan pilih item menu "Tambah Pintasan". Masukkan nama pintasan dan tekan kekunci Enter.

Dan dalam langkah seterusnya anda pilih sebagai penerima « Halaman 1". Tidak akan ada pilihan lain di sana.

Dan langkah terakhir, pilih pintasan yang anda buat pada peringkat awal.

Simpan acara dan semak. Putaran sepanduk akan berhenti apabila anda mengarahkan tetikus pada bingkai tempat pintasan dibuat.

Menyambung semula putaran selepas mengalihkan kursor tetikus.

Untuk memastikan putaran diteruskan selepas mengalihkan kursor ke sisi, sediakan acara lain.

Ia dikonfigurasikan sama dengan yang sebelumnya, dengan hanya dua perbezaan.

Acara dipilih "Tikus"— « keluar tetikus".

Acara - penarikan balik tetikus

Dan sebagai tindakan "Garis masa" — « togglePlay".

Tindakan - Teruskan

Kini sepanduk kami dengan kesan 3D sudah sedia. Dan anda boleh menghasilkan seberapa banyak kesan berbeza yang anda suka.

Cuma jangan lupa untuk menetapkan acara untuk klik tetikus dan membuka pautan. Lagipun, sepanduk itu tidak dicipta untuk kecantikan.

Pada mulanya, proses ini mungkin kelihatan rumit, tetapi selepas beberapa sepanduk, anda tidak akan berfikir begitu lagi.

Itu sahaja untuk saya hari ini, kawan-kawan. Saya doakan anda semua berjaya, saya menantikan komen anda dan jumpa anda dalam artikel dan tutorial video baharu.

Salam sejahtera, Maxim Zaitsev.

Internet dipenuhi dengan pengiklanan. Di banyak tapak ini adalah pengiklanan yang menarik perhatian untuk berus pelangsingan, pada yang lain ia adalah Yandex.Direct atau Google AdSense. Dan hanya pada sesetengah anda boleh melihat sepanduk yang cantik yang tidak mengganggu pengguna dengan penampilan semata-mata. Daripada ulasan saya, anda akan belajar cara membuat sepanduk HTML5 yang cantik sendiri tanpa sebarang kemahiran awal.

bannersnack ialah perkhidmatan dalam talian untuk mencipta HTML5 dan sepanduk Flash dalam pelbagai format, yang tidak memerlukan pengetahuan tentang kod atau kemahiran dalam bekerja dengan editor imej.

Perkhidmatan ini menawarkan untuk membuat dua jenis sepanduk: sepanduk biasa atau sepanduk rawak apabila halaman dimuatkan. Anda juga boleh melancarkan kempen pengiklanan anda di Google atau Facebook menggunakan banersnack. Tetapi perkara pertama dahulu.

pembuat sepanduk

Di bahagian ini anda boleh membuat sepanduk pertama anda. Perkhidmatan ini menawarkan sepanduk dalam format HTML5 atau Flash. Oleh kerana semua orang cuba membunuh Flash, saya akan menerangkan editor HTML5.

Apabila anda melancarkan wizard, beberapa templat siap sedia ditawarkan dengan serta-merta:

Sudah tentu, peluang untuk mencipta sepanduk dari awal tidak akan hilang. Di bahagian atas wizard saiz sepanduk masa hadapan ditunjukkan:

Apabila memilih saiz, corak juga akan berubah. Adalah lebih baik untuk memberi keutamaan kepada saiz yang telah ditetapkan dan bukannya menentukan saiz anda sendiri, kerana bannersnack akhirnya boleh menolak untuk menjana sepanduk sedemikian.

Apabila anda membuat sepanduk anda, editor berikut dibuka:

Di sebelah kiri ialah senarai semua slaid sepanduk, setiap satunya akan mempunyai gambar dan teksnya sendiri. Di bahagian atas ialah alat untuk membuat sepanduk, dan di sebelah kanan ialah sifat lapisan.

Anda boleh menambah gambar, teks, butang, bentuk atau video anda sendiri sebagai sepanduk. Saya menambah imej dan butang:

Apabila anda memilih mana-mana elemen, beberapa templat akan ditawarkan, tetapi, seperti biasa, keputusan akhir adalah milik anda:

Setiap lapisan mempunyai tiga tab sifat. Kedudukan pada halaman, warna, bentuk, dsb.:

Tindakan dengan mengklik pada lapisan:

Anda boleh menentukan peralihan ke slaid atau pautan seterusnya.

Sifat animasi apabila menukar slaid:

Apabila anda telah selesai mengedit sepanduk anda, cuma klik Simpan dan pilih nama untuk sepanduk anda:

Kemudian senarai semua sepanduk anda dengan kod untuk dimasukkan ke dalam tapak akan dibuka:

Adalah penting untuk ambil perhatian bahawa apabila anda menukar sepanduk di tapak banner snack, ia juga akan dikemas kini di tapak anda. Tidak perlu menyalin kod benam lagi.

pemutar sepanduk

Di sini, sepanduk statik dicipta yang dimuatkan secara rawak apabila halaman dimuatkan.

Wizard menawarkan untuk memilih daripada sepanduk yang telah dibuat atau mencipta yang baharu:

Apabila menambah imej anda sendiri, anda hanya boleh menentukan URL peralihan:

Kemudian yang tinggal hanyalah untuk mendapatkan kod benam pada tapak semula:

Beginilah caranya, dengan bantuan bannersnack, pengguna yang tidak berpengalaman pun boleh mencipta sepanduk silang penyemak imbas mereka sendiri yang cantik.

Sepanduk HTML5

daripada RUB 2,299

GOSOK

Pesanan

Pada masa ini, sepanduk HTML5 ialah satu-satunya format semasa untuk pengiklanan sepanduk animasi penuh. Format merentas platform universal ini menggantikan sepanduk Flash, yang mempunyai beberapa had dan keburukan.

Sebab utama penolakan ini adalah seperti berikut:

• Tuntutan telah terkumpul terhadap teknologi Flash dalam bidang keselamatan komputer dan peningkatan penggunaan kuasa pemproses peranti mudah alih;
• sesetengah pelayar telah mula menyekat Flash secara lalai;
• pada peranti mudah alih iOS (iPhone, iPad), paparan Flash tidak disediakan oleh pengilang;
• populariti program menyekat iklan sepanduk Flash;
• penolakan sokongan dan pembangunan teknologi Flash selanjutnya oleh pemiliknya, Adobe.

Sepanduk HTML5 animasi boleh dipaparkan tanpa sekatan dalam mana-mana penyemak imbas, pada skrin mana-mana peranti, termasuk telefon pintar, tablet dan TV media. Ini adalah platform silang dan serba boleh mereka.

Bagi pelanggan, penggunaan sepanduk HTML5 bermakna, pertama sekali, meluaskan liputan khalayak tanpa kerugian.

Apakah yang boleh dilakukan oleh sepanduk HTML5?

banyak. Lagipun, ini adalah format paling maju yang menarik perhatian pengguna dan juga berinteraksi dengannya (sepanduk interaktif).

Dari segi animasi, sepanduk sebegini boleh menunjukkan animasi vektor (tanpa kehilangan skala), animasi aksara, foto, logo, graf dan rajah, teks dan juga animasi 3D. Dari perspektif interaktif, sepanduk HTML5 boleh bertindak balas terhadap tindakan pengguna dan menawarkan kandungan dan ciri tambahan. Dari sudut pandangan media, sepanduk HTML5 boleh memainkan video, slaid dan rakaman audio. Dari segi responsif, sepanduk HTML5 boleh meregangkan seluruh lebar halaman, mengembangkan panel tambahan atau mengembangkan untuk memenuhi keseluruhan skrin.

Mari kita lihat jenis utama sepanduk HTML5.

Sepanduk HTML5 animasi dengan saiz tetap.
Format paling popular dalam kebanyakan rangkaian pengiklanan. Lebar dan tinggi sepanduk yang diperlukan dipilih daripada senarai yang diterima untuk penempatan. Kami akan sentiasa mencadangkan saiz yang paling biasa.

Meregangkan sepanduk HTML5 (responsif, getah).
Ini ialah sepanduk yang boleh meregangkan untuk menduduki keseluruhan lebar (kadang-kadang ketinggian) skrin. (Maklumat lanjut boleh didapati dalam artikel ini)

Sepanduk HTML5 skrin penuh.
Sepanduk yang membuka skrin penuh. Sebagai peraturan, ia mengandungi pemasa paparan dan butang "Tutup". Terutamanya popular untuk paparan pada peranti mudah alih.

Selalunya sepanduk sedemikian mesti menyesuaikan diri, dengan mengambil kira orientasi dan resolusi peranti mudah alih yang berbeza.

Sepanduk HTML5 boleh dikembangkan (boleh dikembangkan).
Pada mulanya, hanya panel permulaan sepanduk (penggoda) sedemikian hadir pada skrin. Apabila algoritma tertentu dilaksanakan (tuding tetikus atau klik, pemasa atau acara lain pada halaman), bahagian kedua sepanduk dibuka dengan maklumat lanjutan tambahan.

Sepanduk Video HTML5.

Bergantung pada tetapan dan keperluan platform pengiklanan, ia boleh menunjukkan video sama ada dengan autostart atau selepas menekan butang "Main". Mungkin mengandungi butang kawalan dan redam. Fail video biasanya terletak pada pengehosan luaran dan dimuat turun apabila ditunjukkan.

Sepanduk interaktif permainan.
Sepanduk yang menggalakkan pengguna menyertai permainan dengan melakukan tindakan mudah.

Sepanduk sedemikian menarik perhatian khalayak sasaran, menimbulkan minat yang mendalam, tetapi pada masa yang sama mempunyai beberapa batasan (contohnya, ketiadaan acara alih tetikus pada peranti mudah alih atau sekatan ke atas penggunaan skrip tambahan). Kami akan sentiasa memberitahu anda tentang ciri ini jika anda merancang untuk membuat sepanduk HTML5 permainan.

Sepanduk HTML5 "Pintar" (kalkulator).
Mereka digunakan untuk melibatkan dan berinteraksi dengan pengguna, menawarkan dia pengiraan segera mengikut parameter yang diperlukan dan formula yang ditentukan oleh algoritma dalaman (contohnya, mengira pinjaman, gadai janji, penggunaan bahan binaan dan operasi mudah lain).

Sepanduk HTML5 Boleh Diedit– dalam sesetengah kes, pelanggan perlu cepat membuat perubahan pada sepanduk tanpa menggunakan bantuan pembangun (contohnya, harga, peratusan atau sebut harga yang kerap berubah). Kami boleh mengatasi tugas ini dan mengeluarkan parameter yang diperlukan terus ke dalam kod HTML sepanduk, di mana pelanggan boleh membuat perubahan secara bebas. Anda boleh menawarkan penyelesaian lain yang sesuai untuk anda mengeluarkan data yang digunakan oleh sepanduk ke fail luaran.

Sepanduk HTML5 yang berfungsi dengan memuatkan data luaran dan API.
Pada masa ini, banyak rangkaian pengiklanan melarang sepanduk daripada mencapai sumber luar. Walau bagaimanapun, jika sepanduk diletakkan di tapak yang menyediakan peluang sedemikian, sepanduk HTML5 boleh meminta maklumat yang diperlukan (teks, nombor, petikan) melalui API tapak dan, setelah memprosesnya mengikut algoritma yang diberikan, tunjukkan kepada pengguna.

Sepanduk HTML5 3D.
Sepanduk sedemikian menarik perhatian pengguna dengan mencipta model imej tiga dimensi pada halaman.

Sepanduk 3D HTML5 boleh dilaksanakan sebagai objek berputar yang tepinya mengandungi bingkai sepanduk, sebagai buku lungsur turun atau menggunakan kesan 3D yang lain.

Ambil perhatian bahawa sepanduk HTML5 boleh memasukkan beberapa ciri yang diterangkan sekaligus. Sebagai contoh, sepanduk video boleh merentangi seluruh lebar halaman dan animasi 3D boleh berkembang pada halaman bergantung pada tindakan pengguna.

Jika anda ingin memesan sepanduk HTML5 di tapak web kami, dan idea kreatif anda memerlukan penggabungan format yang berbeza, pakar kami sentiasa boleh melakukannya.

Sepanduk HTML5 - apakah itu secara teknikal?

Adalah lebih baik untuk menganggap sepanduk HTML5 sebagai tapak web mini. Tidak keterlaluan.

HTML5, yang memberikan format sepanduk ini namanya, ialah bahasa penanda halaman web, atau, dengan kata lain, bahasa reka letak. Dan ia dibentangkan mengikut undang-undang yang sama seperti mana-mana laman web moden. Ia boleh mengandungi bekas div, fon pemalam, gaya css dan skrip js. Elemen utama ialah bekas animasi kanvas. Animasi itu sendiri dilaksanakan menggunakan skrip java, selalunya menggunakan perpustakaan js yang direka khas untuk animasi.

Apakah di dalamnya? Mengapa dalam arkib? Mengapa terdapat begitu banyak fail?

Betul, kerana kami sudah biasa dengan fakta bahawa sepanduk ialah satu fail imej JPG atau "gif" atau "pemacu kilat". Tetapi ingat, seperti yang kami tulis di atas, sepanduk HTML5 pada dasarnya adalah tapak mini. Ia mengandungi banyak fail dan dibekalkan kepada platform pengiklanan dalam arkib zip. Di dalam arkib terdapat fail HTML utama, fail skrip java, perpustakaan, helaian gaya dan imej terpakai.

Catatan. Dalam sesetengah kes, platform pengiklanan mungkin memerlukan anda menyediakan keseluruhan sepanduk dalam satu fail, termasuk semua skrip dan imej yang digunakan dalam format asas-64. Ini bukan masalah bagi pembangun yang berpengalaman. Walau bagaimanapun, keperluan sedemikian meningkatkan masa yang diperlukan untuk menghasilkan sepanduk dan membuat perubahan padanya. Nasib baik, keperluan ini jarang berlaku.

Bagaimanakah saya boleh melihat sepanduk HTML5 yang dihantar pada komputer saya?

Sangat ringkas. Buka pembungkusan arkib zip dan buka fail HTML di dalam penyemak imbas anda.

Bagaimanakah saya boleh menyemak sama ada saya telah menerima sepanduk HTML5 yang betul?

Jika sepanduk dibuat untuk perkhidmatan pengiklanan Google, maka alat yang sangat baik untuk menyemak kualiti kerja pereka bentuk adalah untuk perkhidmatan anda - pengesah HTML5 dalam talian Google. Ia mudah digunakan: muat naik arkib zip anda dengan sepanduk dan lihat jika ia melepasi senarai semak. Ralat akan ditandakan dengan ikon merah. Jika mereka tiada, kerja pembangun anda tidak sia-sia dan sepanduk sedia untuk diletakkan dalam Google adWords atau Klik Dua Kali.

Dalam rangkaian pengiklanan Yandex, Mail.ru, Rambler, adFox, adRiver dan lain-lain, sepanduk juga disemak untuk mematuhi keperluan teknikal selepas ia dimuat naik ke tapak web sistem. Sekiranya terdapat masalah, anda boleh menerima ulasan daripada moderator yang menerangkan ralat tersebut. Sesetengah tapak menyediakan pelanggan pengiklanan peluang untuk melihat sepanduk pada halaman ujian.

Namun, jaminan terbaik untuk penghasilan sepanduk HTML5 yang betul ialah pengalaman pembangun, pengetahuannya tentang keperluan teknikal platform pengiklanan dan kesediaannya untuk membetulkan ralat dengan segera.

Adakah sepanduk dengan animasi dalam Skrip Java berbeza?

Jangan keliru. "Sepanduk Skrip Java", "Sepanduk kanvas" - kita bercakap tentang apa yang biasa dipanggil "sepanduk HTML5". Bergantung pada alat pembangun, perpustakaan js atau peraturan susun atur mungkin berubah, tetapi skema perhimpunan umum tetap sama.

Bagaimana untuk membuat sepanduk HTML5?

Editor yang paling popular di kalangan pereka bentuk untuk mencipta animasi HTML5 ialah program Adobe Animate.

Google menawarkan alat pembangunannya sendiri - Google Web Designer. Antara kelebihannya ialah kehadiran banyak templat terbina dalam dan keupayaan untuk menerbitkan sepanduk terus untuk perkhidmatan pengiklanan Google: adWords dan Klik Dua Kali. Antara kelemahannya ialah keupayaan animasi yang terhad.

Sesetengah pereka, selalunya Amerika, menggunakan editor dan perpustakaan Green Sock Animation Platform. Walau bagaimanapun, mereka tidak menerima pengedaran yang ketara di negara kita.

Memandangkan semua komponen yang diperlukan adalah sumber terbuka, pakar yang baik boleh mencipta sepanduk HTML5 walaupun dalam editor teks yang ringkas. Walau bagaimanapun, kaedah ini tidak berkesan berbanding menggunakan program animasi profesional.

Keperluan teknikal untuk sepanduk HTML5.

Keperluan berkaitan dengan:

• jumlah berat sepanduk HTML5 dalam kb.;
• struktur arkib zip, bilangan folder dan fail;
• senarai format fail yang dibenarkan;
• cara untuk mendayakan pautan URL dengan mengklik pada sepanduk (perisian tegar sepanduk);
• senarai perpustakaan js yang dibenarkan pada pengehosan luaran;
• prosedur dan sekatan untuk menyambungkan fail video dan audio;
• keperluan untuk reka bentuk bingkai, penafian, kekerapan dan bilangan kitaran animasi, dimuatkan pada pemproses peranti.

Dan ini bukanlah senarai lengkap keperluan yang perlu diambil kira oleh pembangun kami untuk menyediakan sepanduk HTML5 kepada pelanggan yang sedia untuk penempatan dan permulaan kempen pengiklanan tanpa berlengah-lengah.

Apakah yang perlu saya lakukan dengan sepanduk Flash yang saya buat sebelum ini?

Lihat sendiri - rangkaian pengiklanan terbesar tidak lagi menerima sepanduk Flash untuk penempatan, komponen Flash disekat dalam penyemak imbas dan pada peranti iOS, Swiffy (satu-satunya penukar sepanduk Flash dalam talian yang mencukupi kepada HTML5) telah berhenti berfungsi.

Penukaran automatik format Flash kepada HTML5 adalah hampir mustahil - sebenarnya, ia memerlukan pembinaan semula manual yang lengkap dalam editor HTML5. Dalam keadaan sedemikian, keputusan yang tepat adalah untuk memerintahkan penciptaan set sepanduk animasi baharu dalam format HTML5 moden dan universal.

Bagaimana dengan "gif"?

Anda perlu memahami bahawa mana-mana animasi GIF ialah set imej bingkai berurutan, sama seperti dalam fail video. Fail GIF mungkin mengandungi maklumat tentang kelajuan main balik bingkai dan bilangan ulangan. Ini mengehadkan keupayaannya.

Sepanduk GIF tidak boleh berfungsi dengan grafik vektor, mencipta animasi secara pengaturcaraan, menyesuaikan diri dengan saiz yang dikehendaki dan banyak lagi, yang sepanduk HTML5 animasi boleh dikendalikan dengan mudah.

Apakah maksud ini untuk pengiklan?

Masalah berat badan berlebihan. Ya, sepanduk pun terdedah kepadanya. Semua platform pengiklanan utama menetapkan sekatan ketat pada berat sepanduk dalam kilobait.

Sepanduk GIF bagus untuk menunjukkan beberapa bingkai statik, mungkin dengan sedikit animasi teks, butang atau menukar foto. Dalam kes ini, jumlah berat sepanduk GIF tidak melebihi keperluan platform pengiklanan.

Jika animasi melibatkan perubahan beberapa ratus bingkai, maka berat sepanduk GIF meningkat, seperti yang mereka katakan dalam bahasa Inggeris, "secara dramatik," iaitu, secara mendadak. GIF 20 saat seberat beberapa megabait adalah perkara biasa. Dan ini amat tidak disukai oleh rangkaian pengiklanan, yang sememangnya mengambil berat tentang jumlah trafik yang perlu dimuat turun oleh pengguna untuk melihat sepanduk.

Jadi, jika anda memerlukan sepanduk dengan banyak kesan animasi, animasi watak, sepanduk interaktif, adaptif atau video, pilihan dibuat memihak kepada tempahan sepanduk HTML5.