Windows

Html5 баннерлер мысалдары. Жарнамалық материалдарға қойылатын талаптар

Жіберілген деректердің пішімі ZIP мұрағаты болып табылады.
Мұрағаттың көлемі 150 килобайттан аспауы керек.
Мұрағатта бір HTML файлы және JS, JSON, CSS, JPG, GIF, PNG, SVG пішіміндегі бірнеше файлдар болуы мүмкін.
Мұрағаттар __MACOSX қалтасының және .DS_Store файлдарының мазмұнын елемейді. Олар платформаларда мұрағаттау кезінде жасалады Apple Mac OS X және жарнамалық материалдар қажет емес.
Файлдар мен каталогтардың атаулары үшін тек келесі таңбалар жиынын пайдалануға рұқсат етіледі:
-._~ , сандар және латын әліпбиі.
Жарнамалық материалдардағы барлық сілтемелер ZIP мұрағатындағы салыстырмалы жолдар болуы керек. Жарнамалық материалдарды өңдеу кезінде сыртқы желілік қоңыраулар болмауы керек. Қажет болған жағдайда, барлық көмекші JS кітапханалары жарнамалық материалдармен бірге қамтамасыз етілуі керек.
Мұрағаттағы файлдардың санын азайту керек. Суреттер спрайт парағына біріктірілген. Қажет болса, сіз барлық JS / CSS / Image құжаттарын біріктіріп, оларды HTML файлына қоса аласыз. Файлдардың максималды саны - 50.
Жарнамалық материалдар дұрыс жұмыс істеуі керек Интернет браузерлері Explorer 9 және одан жоғары, Firefox 14 және одан жоғары, Safari 5 және одан жоғары, Chrome 14 және одан жоғары, Opera 14 және одан жоғары, Yandex Browser 14 және одан жоғары, Microsoft Edge. Қажет болса, файл оның жұмысына қажетті шолғыштың функционалдығын ескеруі керек.
Жарнамаланған сайт жаңа терезеде баннердегі пайдаланушының тінтуірдің сол жақ түймешігін басу арқылы ғана ашылуы керек.
Баннердегі ауысулар бірінші басу үшін yandexHTML5BannerApi.getClickURLNum(1), екінші рет басу үшін yandexHTML5BannerApi.getClickURLNum(2) және т.б. қоңырау шалу арқылы жарнама берушінің сайтына өту мекенжайын алуы керек.

// " " тегтерін жариялағаннан кейін
// олар үшін келесідей басу өңдеушілерін тағайындаңыз:

Баннердегі ауысулар URL мекенжайының get параметрлерінен HTML құжатына дейін linkN параметрінің мәнін төмендегідей пайдалануы керек: бірінші басу үшін link1, екіншісі үшін сілтеме2 және т.б. Сіз бұл кодты пайдалана аласыз:
Баннер файлының өлшемі тегте келесідей көрсетілген:
Тегтен кейін бірден Яндекстің жарнамалық кітапханасын қосу керек:
Жарнамалық материалдарда рұқсат етілген сыртқы сілтемелер HTML5 әзірлеу құралдарына енгізілген кейбір негізгі кітапханаларға: Adobe Edge Animate CC , Adobe Flash CC HTML5 Canvas , CreateJS , GreenSock , Swiffy және т.б.
Сыртқы сілтемелер баннерде жарамды болуы үшін олар тек кітапхана өндірушісінің веб-сайтына апаруы керек.
Мұрағатқа толтырғыш кескіні мен ALT мәтіні (100 таңбаға дейін) бөлек тіркелуі керек. Сурет өлшемін қоса алғанда, бөлек модерациядан өтеді. Кескін мен мәтін 7-параграфтағы қолдау көрсетілетіндер тізіміне кірмейтін браузерлерде көрсету үшін пайдаланылады.
Сценарийлердің тітіркендіргіш зиянды әрекеттерін қолдануға тыйым салынады: мысалы, қалқымалы терезені өздігінен ашуға, бет мекенжайын өзгертуге және т.б. Браузер кеңейтімдерін (flash/java және т.б.) пайдалануға тыйым салынады.
жарнамалық баннерталдауды күрделендіретін формаға дейін төмендетпеу керек (түсініксіз).
Баннер барлық орталарда, барлық платформаларда, барлық пайдаланушыларға арналған барлық ашылулар үшін, науқанның бүкіл ұзақтығы үшін бірдей, біркелкі әрекет етуі керек деп болжанады.
Баннерлік жарнама процессорды пайдалану талаптарына сай болуы керек.
Жарнамалық материалдар құжаттың «», тармақтарында белгіленген талаптарға сәйкес келуі керек. 3-10.
Баннерлік анимация қолданушыға кедергі келтірмеуі және сайт бетінің негізгі мазмұнын қабылдауды қиындатпауы керек (дизайнда кенет қозғалатын және жыпылықтайтын графикалық элементтерді, жыпылықтайтын фонды және т.б. пайдалануға тыйым салынады).
Баннерді дайындау кезінде сапасыз графикалық элементтерді пайдалануға жол берілмейді, оның ішінде:
- салдарынан деформацияланған кескіндер мен шу (артефактілер) бар кескіндер файлды қысу,
- ажыратымдылығы төмен кескіндер (суретте пиксельдер көрінеді), графикалық ажыратымдылығы төмен кескіндер.
Жарнамалық материалдардан басқа, MP4 бейнелері (өнімде рұқсат етілсе) жүктелуі мүмкін. Максимум рұқсат етілген өлшембейне файл - 2 мегабайт.
Сілтеме бейнелері 1-ден басталатын URL JS қоңырауы болуы керек. Мысалы, 1-бейне үшін
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);
Ойнату пайдаланушының тікелей бастамасы болуы керек. Кез келген уақытта ойнатуды тоқтату және жалғастыру мүмкіндігі болуы керек. Бейне файлының өлшемі көрсетілуі керек. Аудионы бейнеден бөлек ойнатуға рұқсат етілмейді. Қауіпсіздік мақсатында және жүктеп алуды жылдамдату үшін бейне файл Яндекс серверлерінде орналастырылады.
Жарнама беруші бейнені қараудың басталу санын жасай алады, ол үшін бейнені ойнату түймесі басылғанда, келесі JavaScript қоңырауын өңдеу керек:
1-бейне үшін: yandexHTML5BannerApi.reportVideoStart(1);
2-бейне үшін: yandexHTML5BannerApi.reportVideoStart(2);

Мұндай тестілеу кезінде баннер «Өнімділік» қойындысындағы деректерге сәйкес процессор ресурстарының 50%-дан астамын тұтынбауы керек. тапсырмалар менеджері(Жаңарту жылдамдығы жоғары деп орнатылған).
Егер процессордың 50%-дан астамы белгілі бір уақыт ішінде (бөлшек/секунд бірлігі) пайдаланылса немесе процессорды ең жоғары пайдалану 70%-дан асса, баннер тым ресурсты қажет ететін болып саналады.
Пайдалануды оңтайландыру жедел жадыорындалмайды, іске қосу кезінде қосымша утилиталар немесе резиденттік бағдарламалар жүктелмейді. Жүйеге кіргеннен кейін жад көлемі әртүрлі жүйелік процестер, Тапсырмалар реттеушісі бойынша шамамен 62-63 МБ құрайды.

Достар, бәріңе сәлем. Бүгін біз Google Web Designer бағдарламасында HTML5 пішімінде 3D әсері бар баннерлер жасауды жалғастырамыз.

Бұл түсінікті, html5 және css3-те жасалған баннерлер компьютерде де, теледидарда да, мобильді құрылғыларда да кез келген экрандарда көрсетіледі. Флеш-баннерлер туралы не айтуға болмайды.

Сонымен қатар, бұл баннерлер жеткілікті түрде пайдаланылуы мүмкін және баннер кез келген экранда керемет көрінеді.

Мобильді құрылғылардың интернет-ресурстарды көру үшін жиі қолданылатынын ескерсек, бұл өте маңызды.

Негізгі және оның сайтта орналасуы, мен соңғы мақалада айттым. Сондықтан бүгін мен 3D әсерін жасауға және циклді (қайта ойнату) параметрлеріне назар аударамын. Сондай-ақ «оқиғалар» үшін бірнеше параметрлерді қарастырыңыз.

Бұл процесті егжей-тегжейлі сипаттау өте қиын, сондықтан мен сіздердің назарларыңызға бейне оқулықты ұсынамын. Сондықтан материалды меңгеру әлдеқайда жеңіл болады. Сондай-ақ жақсы мысал ретінде менің баннерімнің жобасы бар мұрағатты жүктеп алыңыз.

3D эффектісі бар баннер жасауға дайындық.

Аяқталған пішіндегі баннер түрі, сайып келгенде, дайындыққа байланысты. Google Web Designer редакторы шынайы 3D әсерлерін жасауға мүмкіндік береді және мұның бәрі html кодында жазылады, сізге барлығын визуалды редакторда дұрыс жинау керек.

Жоғары сапалы 3D әсерін жасау үшін алдымен Photoshop бағдарламасында бос орындарды кесу керек, кейінірек олар Google Web Designer бағдарламасына қосылуы керек.

Мысал ретінде мен келесі бланкілерді дайындадым:

Мен бұл бланкілерді Photoshop бағдарламасында жасадым, бірақ Интернетте ұқсас суреттер көп. Сіз штамм жасай алмайсыз, бірақ дайын опцияларды қабылдаңыз.

Ескерту: Егер сізді осындай бос орындарды жасау процесі қызықтырса, бұл туралы түсініктемелерде жазыңыз.

Сондай-ақ баннер мен сценарийдің жалпы құрамын ойластыру маңызды. Бұл баннердің жалпы қалай қабылданатынына байланысты.

Google Web Designer бағдарламасында 3D нысанын жасау.

Сонымен, соңғы мақалаға ұқсастық бойынша редакторды іске қосыңыз, жаңа жоба жасаңыз.

3D эффекті құрама кескінді, яғни қажетті проекцияда орналасқан бірнеше бөліктерден тұратын кескінді білдіреді.

Бұл бірнеше кескіндерді топқа біріктіру немесе DIV блогында орналастыру керек. Және бұл дұрыс болады. Бірақ, маған DIV жағымен жұмыс істеу ыңғайлырақ.

1-қадам: DIV блогын жасаңыз.

Сонымен, DIV блогын жасау үшін сол жақ панельде таңдаңыз «Тег құралы (D)".

Идентификатор тағайындауды ұмытпаңыз. Және өлшемдерді қимамен реттеңіз «Сипаттар»оң жақ панельде.

Енді біз блокты таңдауымыз керек. Мұны істеу үшін сол жақ панельде таңдаңыз "таңдау құралы (V)"және DIV блогының жақтауында тінтуірдің сол жақ батырмасын екі рет басыңыз. Түсі қызылға өзгереді.

2-қадам Суреттерді ретке келтіріңіз.

Енді ең қиын процесс басталады. Бір суреттің барлық элементтерін көрсету керек.

Менің қолымда келесі заттар бар:

- Жоғарғы жағы.

- бүйір жағы (үш бөлек бөліктен тұрады).

Алдымен суреттің кері (артқы) жағын орналастырып, оны баннердің ортасына және жоғарғы жиегіне туралаңыз.

Дәл осылай алдыңғы жағын қосыңыз. Z осінің бойымен туралаңыз және ығысыңыз.

Бүйір жағының ені 4px (пиксель) болғандықтан, алдыңғы және кері жағыМен z осін 2 пиксель және -2 пиксельге ауыстырдым. Бұл кескіндер арасындағы алшақтықты қамтамасыз етеді.

Ескертпе: нақты офсеттік сандар үшін скриншоттарды қараңыз.

Әрі қарай, жағын, барлық бөліктерін бөлек қосыңыз. Орналастыруға ыңғайлы болу үшін құралдарды пайдаланыңыз «3D жұмыс кеңістігін айналдыру»және «масштаб». Олар сізге барлық бөлшектерді дәл келтіруге көмектеседі.

Алдымен мен барлық кескіндерді бір жағынан құрастыруды ұсынамын, содан кейін оларды көшіріп, екінші жағынан айна проекциясына орналастыруды ұсынамын.

Келесі қадам жоғарғы сол жақ бұрышты салу болып табылады.

Қазір орталық бөлігібүйір жағы.

Ал төменгі бұрыш сол жағында.

Бүйірдің барлық элементтерін Y осі бойымен 90 0 теңестіруді ұмытпаңыз.

Енді біз қалаған қабатты көшіріп, оны қайтадан қоюымыз керек, атын өзгертіп, орналасу параметрлерін өзгертеміз, осылайша біз оң жаққа арналған элементтерді аламыз.

Мұны істеу үшін төменгі панельдегі суретті таңдаңыз - CTRL + C пернелер тіркесімін басыңыз (көшіру) және қайталанатын CTRL + V пернелерін қойыңыз.

Жоғарыдан төменге қарай өріс жағы сияқты бастайық, бірақ тек оң жақ үшін.

Жоғарғы оң жақ қақпақ.

Мен төменгі бөлігін жасамадым, себебі ол суретте көрінбейді.

Ең ауыр жұмыс аяқталды. Енді анимацияны орнатуды бастай аламыз. Көрнекі демонстрация ретінде суретті айналдырайық.

Google Web Designer бағдарламасында айналдыру әсерін жасау.

Бірінші қадам - кескіннің барлық элементтерін қамтитын DIV блогынан шығу. Яғни, біз блоктың ішінде нақты суреттермен жұмыс жасадық, енді DIV блогын басқара отырып, барлық кескіндермен бір уақытта жұмыс істеу керек болады.

Бастау үшін төменгі жолақтағы DIV түймесін басыңыз.

Сонымен, басу арқылы уақыт шалесінде оң жақ түйметінтуірдің көмегімен екі негізгі кадрды жасаңыз. Ол келесідей болуы керек:

Y шкаласындағы бастапқы кадрдың орны -90 0 мәніне орнатылған.

Бірінші негізгі кадр (қатарынан екіншісі) Y шкаласында 0 0 мәніне орнатылады.

Екінші негізгі кадр (үшінші) Y шкаласында 90 0 мәніне орнатылған.

Нәтижені тексеруге болады. Мұны істеу үшін түймені басыңыз ойнау.

Рас, біздің имиджіміз бір ғана революция жасайды. Кескін үнемі айналуы немесе бірнеше айналым жасауы үшін цикл параметрлерін реттеу керек.

Google Web Designer бағдарламасында велосипед тебуді орнату.

Бағдарламада сіз велосипедпен жүрудің бірнеше опцияларын конфигурациялай аласыз (қайталаулар). Сонымен, қайталауды баннердің барлық элементтері үшін немесе әрбір элемент үшін бөлек орнатуға болады.

Сондай-ақ, циклділік қайталанулар санымен шектелуі немесе шексіз болуы мүмкін.

Төменгі панельде әрбір элементтің жанында таңбалар бар «Құлып», «Көз», «кері көрсеткі».

Сонымен, циклды орнату үшін таңбаны басу керек «Кері көрсеткі».Қайталаудың шектеулі санын немесе шексіз опцияны таңдаңыз.

Мен шексіз цикл анимациясын таңдадым. Мен орнатқым келгендіктен «Оқиғалар»тінтуір курсорын апарған кезде айналу тоқтатылатын және курсор жойылғаннан кейін жалғасатындай етіп.

Тінтуірді баннердің үстіне апарған кезде айналуды тоқтатыңыз.

Ең алдымен біріншіден негізгі жақтау(қатарынан екінші) төте жолды орнатыңыз. Мұны істеу үшін жақтаудың үстінде тінтуірдің оң жақ түймешігін басып, мәзір элементін таңдаңыз «Жапсырма қосу». Белгі атауын енгізіп, Enter пернесін басыңыз.

Ал келесі қадамда қабылдағыш ретінде таңдаңыз « 1-бет. Басқа нұсқалар болмайды.

Ал соңғы қадам, бастапқы кезеңде жасаған белгіні таңдаңыз.

Оқиғаларды сақтаңыз және тексеріңіз. Тінтуір курсорын белгі жасалған жақтаудың үстіне жылжытқанда баннердің айналуы тоқтайды.

Тінтуір курсорын жылжытқаннан кейін айналуды жалғастыру.

Курсорды бүйірге жылжытқаннан кейін айналдыруды жалғастыру үшін басқа оқиғаны орнатыңыз.

Ол алдыңғыға ұқсас конфигурацияланған, тек екі айырмашылығы бар.

Оқиға таңдалды «Тышқан»— « тышқан».

Оқиға – тінтуірді жылжыту

Бірақ әрекет ретінде «Уақыт шкаласы» — « ауыстырып ойнату».

Әрекет - Жалғастыру

Сонымен, 3D эффектісі бар баннеріміз дайын. Ал сіз қалағаныңызша әртүрлі эффектілер жасай аласыз.

Тек тінтуірді басу және сілтемені ашу кезінде оқиға жасауды ұмытпаңыз. Ту сұлулық үшін жасалмаған ғой, әйтеуір.

Бастапқыда бұл процесс күрделі болып көрінуі мүмкін, бірақ бірнеше баннерлер жасағаннан кейін олай көрінбейді.

Бүгінгі күн осымен бітті, достар. Барлығыңызға сәттілік тілеймін, пікірлеріңізді күтемін және жаңа мақалалар мен бейне оқулықтарда көремін.

Құрметпен, Максим Зайцев.

HTML5 баннерлер

2 299 руб.

руб

Тапсырыс беру

Қазіргі уақытта HTML5 баннерлері толыққанды анимациялық баннер жарнамаларының жалғыз нақты пішімі болып табылады. Бұл әмбебап кросс-платформалық формат бірқатар шектеулер мен кемшіліктері бар Flash-баннерлерді ауыстырды.

Бұл бас тартудың негізгі себептері мыналар:

өрісте Flash технологиясына қатысты шағымдар жиналды компьютерлік қауіпсіздікжәне мобильді құрылғылардың процессор қуатын тұтынудың артуы;
кейбір браузерлер әдепкі бойынша Flash-ті блоктай бастады;
iOS мобильді құрылғыларында (iPhone, iPad) Flash-ті өндіруші қамтамасыз етпеген;
Flash баннерлік жарнама блокаторларының танымалдығы;
оның иесі Adobe-тің Flash технологиясын одан әрі қолдаудан және дамытудан бас тартуы.

HTML5 анимациялық баннерлер кез келген браузерде, смартфондар, планшеттер және медиа теледидарды қоса, кез келген құрылғының экранында шектеусіз көрсетілуі мүмкін. Бұл олардың кросс-платформасы және әмбебаптығы.

Тұтынушы үшін HTML5 баннерлерін пайдалану, ең алдымен, аудиторияны жоғалтпай кеңейту дегенді білдіреді.

HTML5 баннері не істей алады?

Көп. Өйткені, бұл пайдаланушының назарын аударатын және тіпті онымен өзара әрекеттесетін ең жетілдірілген формат (интерактивті баннер).

Анимация тұрғысынан мұндай баннер векторлық анимацияны (масштабты жоғалтусыз), кейіпкерлердің анимациясын, фотосуреттерді, логотиптерді, графиктер мен диаграммаларды, мәтінді және тіпті 3D анимациясын көрсете алады. Интерактивті көзқарас тұрғысынан HTML5 баннері пайдаланушы әрекеттеріне жауап бере алады және қосымша мазмұн мен мүмкіндіктерді ұсына алады. Медиа тұрғысынан HTML5 баннері бейнелерді, слайдтарды және аудио жазбаларды ойната алады. Бейімделу тұрғысынан HTML5 баннері беттің толық еніне дейін созылуы мүмкін қосымша панельдернемесе толық экранға дейін кеңейтіңіз.

HTML5 баннерлерінің негізгі түрлерін қарастырыңыз.

Тұрақты өлшемді анимациялық HTML5 баннері.
Көптеген жарнамалық желілердегі ең танымал пішім. Қажетті баннерлердің ені мен биіктігі орналастыруға қабылданған баннерлер тізімінен таңдалады. Біз әрқашан ең көп таралған өлшемдерді ұсынамыз.

Созылу HTML5 баннері (жауап беретін, резеңке).
Бұл экранның бүкіл енін (кейде биіктігін) толтыру үшін созылатын баннер. (Толығырақ ақпаратты осы мақаладан табуға болады)

Толық экран HTML5 баннері.
Толық экранда ашылатын баннер. Әдетте, ол дисплей таймерін және «Жабу» түймесін қамтиды. Әсіресе мобильді құрылғыларда көрсету үшін танымал.

Көбінесе мұндай баннер мобильді құрылғының әртүрлі бағдарлары мен рұқсаттарын орналастыру үшін бейімді болуы керек.

Кеңейтілген HTML5 баннері (кеңейту).
Бастапқыда экранда мұндай баннердің (тизер) бастау панелі ғана болады. Көрсетілген алгоритм орындалғанда (тінтуірді меңзеу немесе басу, таймер немесе беттегі басқа оқиғалар) баннердің екінші бөлігі қосымша кеңейтілген ақпаратпен ашылады.

HTML5 бейне баннері.

Жарнамалық платформаның параметрлері мен талаптарына байланысты ол бейнені автостартпен де, «Ойнату» түймесін басқаннан кейін де көрсете алады. Басқару және дыбысты өшіру түймелері болуы мүмкін. Бейне файл әдетте сыртқы хостта орналасады және көрсетілген кезде жүктеледі.

Ойынның интерактивті баннерлері.
Қарапайым әрекеттерді орындау арқылы пайдаланушыны ойынға қосылуға шақыратын баннерлер.

Мұндай баннерлер назар аударады мақсатты аудитория, үлкен қызығушылық тудырады, бірақ сонымен бірге бірқатар шектеулер бар (мысалы, мобильді құрылғыларда тінтуірді жылжыту оқиғасының болмауы немесе қосымша сценарийлерді пайдалануға шектеулер). Егер сіз ойын HTML5 баннерін жасауды ойласаңыз, біз сізге әрқашан осы мүмкіндіктер туралы айтып береміз.

«Ақылды» HTML5 баннерлер (калькуляторлар).
Олар пайдаланушымен араласу және өзара әрекеттесу үшін пайдаланылады, оған қажетті параметрлер мен ішкі алгоритмде көрсетілген формула бойынша дереу есептеуді ұсынады (мысалы, несиені, ипотеканы, құрылыс материалдарын тұтынуды және басқа да қарапайым операцияларды есептеу).

Өңделетін HTML5 баннерлер– кейбір жағдайларда тұтынушы әзірлеушінің көмегіне жүгінбей-ақ баннерлерге дереу өзгертулер енгізуі керек (мысалы, бағаларды, пайыздарды немесе тырнақшаларды жиі өзгерту). Біз бұл тапсырманы орындай аламыз және қажетті параметрлерді тікелей баннердің HTML кодында көрсете аламыз, мұнда тұтынушы өз бетінше өзгерістер енгізе алады. Баннер пайдаланатын деректерді сыртқы файлдарға шығаруға ыңғайлы басқа шешім ұсына аласыз.

Сыртқы деректерді жүктеу және API интерфейсімен жұмыс істейтін HTML5 баннерлер.
Үстінде осы сәткөптеген жарнама желілері баннерге сыртқы көздерден кіруге тыйым салады. Алайда, егер баннер осындай мүмкіндік беретін сайтта орналастырылса, HTML5 баннері сайттың API арқылы қажетті ақпаратты (мәтін, сандар, тырнақшалар) сұрай алады және оларды берілген алгоритм бойынша өңдегеннен кейін пайдаланушыға көрсете алады.

3D HTML5 баннерлер.
Мұндай баннерлер беттегі кескіндердің үш өлшемді үлгілерін жасау арқылы пайдаланушының назарын аударады.

HTML5 3D баннері жиектерінде баннер жақтаулары бар айналмалы нысан ретінде, қалқымалы кітап ретінде немесе басқа 3D әсерлерін пайдалану арқылы жүзеге асырылуы мүмкін.

HTML5 баннері бірден бірнеше сипатталған мүмкіндіктерді қамтуы мүмкін екенін ескеріңіз. Мысалы, бейне баннер беттің толық еніне созылуы мүмкін, бірақ 3D анимацияпайдаланушы әрекеттеріне байланысты бетте кеңейтіңіз.

Біздің веб-сайтта HTML5 баннеріне тапсырыс бергіңіз келсе және шығармашылық идеяәртүрлі форматтардың үйлесімін талап етеді - бұл әрқашан біздің мамандардың құзырында.

HTML5 баннері - бұл техникалық тұрғыдан не?

HTML5 баннерін шағын веб-сайт ретінде қарастырған дұрыс. Асыра айтпай-ақ.

Бұл баннер пішіміне атау берген HTML5 веб-беттерді белгілеу тілі, басқаша айтқанда макет. Және ол кез келген заманауи сайт сияқты заңдарға сәйкес жасалған. Оның құрамында div-контейнерлер, қаріптер, css стильдеріжәне js сценарийлері. Негізгі элемент - кенеп анимацияларына арналған контейнер. Анимацияның өзі java сценарийі арқылы жүзеге асырылады, көбінесе анимация үшін арнайы жасалған JS кітапханалары қолданылады.

Ішінде не бар? Неліктен мұрағат? Неліктен файлдар көп?

Бұл дұрыс, өйткені біз баннер бір JPG кескін файлы немесе «gif» немесе «флэш-диск» екеніне үйреніп қалдық. Бірақ есіңізде болсын, жоғарыда жазғанымыздай, HTML5 баннері шын мәнінде мини-сайт. Ол көптеген файлдарды қамтиды және zip мұрағатындағы жарнамалық платформаға жеткізіледі. Мұрағаттың ішінде негізгі HTML файлы, java сценарий файлдары, кітапханалар, стиль кестелері және пайдаланылатын кескіндер бар.

Ескерту. Кейбір жағдайларда жарнама платформасы сізден барлық пайдаланылған сценарийлер мен суреттерді база-64 пішімінде қоса алғанда, бір файлда бүкіл баннерді ұсынуды талап етуі мүмкін. Бұл тәжірибелі әзірлеушіге қиындық тудырмайды. Дегенмен, мұндай талап баннер жасауға және оған өзгерістер енгізуге кететін уақытты арттырады. Бақытымызға орай, бұл талап сирек кездеседі.

Жіберілген HTML5 баннерін компьютерімде қалай көруге болады?

Өте оңай. Zip мұрағатын орауыштан шығарып, браузеріңіздің ішіндегі HTML файлын ашыңыз.

Маған дұрыс HTML5 баннері жасалғанын қалай тексеруге болады?

Егер баннер жарнама үшін жасалса Google қызметтері, содан кейін сіздің қызметіңізде дизайнер жұмысының сапасын тексеруге арналған тамаша құрал - Google-дан on-line HTML5 валидаторы. Оны пайдалану оңай: баннер zip файлын жүктеп салыңыз және оның тексеру парағынан өтуін тексеріңіз. Қателер қызыл белгішелермен белгіленеді. Егер олар жоқ болса, әзірлеушіңіз бекер жұмыс істемеді және баннер Google adWords немесе Double Click арқылы орналастыруға дайын.

Yandex, Mail.ru, Rambler, adFox, adRiver және т.б. жарнамалық желілерде баннер жүйенің веб-сайтына жүктелгеннен кейін техникалық талаптарға сәйкестігі де тексеріледі. Мәселелер туындаған жағдайда, сіз модератордан қатені сипаттайтын түсініктеме ала аласыз. Кейбір сайттар жарнама тұтынушысына сынақ бетіндегі баннерді алдын ала қарау мүмкіндігін береді.

Дегенмен, HTML5 баннерін дұрыс жасаудың ең жақсы кепілі - әзірлеушінің тәжірибесі, оның білімі техникалық талаптаржарнамалық платформалар және қателерді тез арада түзетуге дайын болу.

Java Script анимациялық баннері басқаша ма?

Өзіңізді шатастыруға жол бермеңіз. «Java Script баннері», «Кенвас баннері» – біз әдетте «HTML5 баннері» деп аталатын нәрсе туралы айтып отырмыз. Әзірлеуші құралына байланысты js кітапханалары немесе орналасу ережелері өзгеруі мүмкін, бірақ жалпы құрастыру схемасы өзгеріссіз қалады.

HTML5 баннерін қалай жасауға болады?

HTML5 анимацияларын жасау үшін дизайнерлер арасында ең танымал редактор болып табылады Adobe бағдарламасыАнимациялау.

Google өзінің әзірлеу құралын ұсынады - Google Web Designer. Оның артықшылықтарының арасында көптеген кірістірілген үлгілердің болуы және Google жарнамалық қызметтері үшін баннерді тікелей жариялау мүмкіндігі бар: adWords және Double Click. Минустардың арасында анимацияның шектеулі мүмкіндіктері бар.

Кейбір дизайнерлер, негізінен американдықтар, Green Sock Animation Platform редакторы мен кітапханаларын пайдаланады. Алайда, олар біздің елде айтарлықтай тараған жоқ.

Барлығын ескере отырып қажетті компоненттербілдіреді ашық дереккөз, жақсы маман HTML5 баннерін қарапайым түрде де жасай алады мәтіндік редактор. Дегенмен, бұл әдіс кәсіби анимациялық бағдарламаларды пайдаланумен салыстырғанда тиімді емес.

HTML5 баннерлеріне қойылатын техникалық талаптар.

Талаптар мыналарға қолданылады:

HTML5 баннерінің жалпы салмағы кб;
zip мұрағат құрылымдары, қалталар мен файлдар саны;
рұқсат етілген файл пішімдерінің тізімі;
баннерді басу арқылы URL-сілтемелерін қосу тәсілі (баннер микробағдарламасы);
сыртқы хостингтерде рұқсат етілген js-кітапханаларының тізімі;
бейне және аудио файлдарды қосу тәртібі мен шектеулері;
кадрдың дизайнына қойылатын талаптар, ескертулер, анимация циклдерінің жиілігі мен саны, құрылғының процессорына жүктеме.

Және бұл алыс толық тізімтапсырыс берушіге орналастыруға дайын HTML5 баннерін ұсыну және жарнамалық науқанды кешіктірмей бастау үшін әзірлеушілеріміз ескеруі тиіс талаптар.

Бұрын жасалған Flash баннерлерімен не істеуім керек?

Өзіңіз қараңыз – ірі жарнамалық желілер енді орналастыру үшін Flash баннерлерін қабылдамайды, Flash компоненттері браузерлерде және iOS құрылғыларында бұғатталған, Swiffy (Flash баннерлерінің HTML5-ке бірден-бір барабар онлайн түрлендіргіші) жұмысын тоқтатты.

Flash форматын HTML5-ке автоматты түрде түрлендіру іс жүзінде мүмкін емес - бұл шын мәнінде HTML5 редакторында толық қолмен қайта жинауды талап етеді. Мұндай жағдайда заманауи және жаңа анимациялық баннерлер жиынтығын жасауға тапсырыс беру дұрыс шешім болар еді. әмбебап формат HTML5.

Бірақ «gif» туралы не деуге болады?

Кез келген GIF анимациясы бейне файлдардағы сияқты сурет жақтауларының дәйекті жиынтығы екенін түсінуіңіз керек. GIF файлында кадр жиілігі мен қайталану саны туралы ақпарат болуы мүмкін. Бұл оның мүмкіндіктерін шектейді.

GIF баннерімен жұмыс істеу мүмкін емес векторлық графика, анимацияларды бағдарламалы түрде жасаңыз, қажетті өлшемге бейімдеңіз және анимацияланған HTML5 баннері оңай өңдей алатын т.б..

Бұл жарнама беруші үшін нені білдіреді?

Артық салмақ мәселесі. Иә, тіпті баннерлер де оған бағынады. Барлық негізгі жарнамалық платформалар килобайттағы баннер салмағына қатаң шектеулер қояды.

GIF баннері мәтіннің кішкене анимациясымен, түймені немесе фотосуретті өзгерту арқылы бірнеше статикалық кадрларды көрсету үшін жақсы. Бұл жағдайда GIF баннерінің жалпы салмағы жарнамалық платформалардың талаптарынан аспайды.

Егер анимация бірнеше жүз кадрдың өзгеруіне әсер етсе, онда gif-баннердің салмағы ағылшын тілінде айтқандай, «күрделі», яғни күрт артады. Салмағы бірнеше мегабайт болатын 20 секундтық GIF - қарапайым нәрсе. Ал маған бұл шынымен ұнамайды жарнамалық желілер, пайдаланушы баннерді көру үшін қанша трафикті жүктеп алуы керек екеніне алаңдайтындар.

Сонымен, егер сізге көптеген анимациялық әсерлері бар баннер, кейіпкерлердің анимациясы, интерактивті, адаптивті немесе бейне баннер қажет болса, таңдау HTML5 баннеріне тапсырыс беру пайдасына жасалады.

HTML5 баннері- еркін HTML мазмұнын немесе кескінді көрсететін баннер. HTML коды қарапайым болуы мүмкін HTML бетістильдермен және сценарийлермен. Ол iframe-де орналастырылған және сайт мазмұнына қол жетімділігі шектеулі.

«Баннер HTML5» үлгісін пайдаланып, баннерді екі жолмен қосуға болады:
1. тек суретті дайындау арқылы. Баннер параметрлерінде өту сілтемесінің болуы кескіннің басылуын басқарады.
2. Нұсқауларға сәйкес редакторда HTML креативтілігін дайындап: немесе .
Баннерге HTML коды да, сурет те қосылса, HTML коды көрсетіледі.

ADFOX-ке қосу кезінде конфигурацияланған параметрлер:
- Баннердің ені, биіктігі.
- Баннер контейнеріне арналған меншікті CSS стильдері.

HTML шығармашылық дамуы

1. Танысыңыз HTML кодының талаптары

HTML файлы үшін рұқсат етілген ең үлкен өлшем - 65 000 байт.
JavaScript және CSS баннердің HTML кодының ішіне орналастырылған дұрыс. Егер алынған HTML коды рұқсат етілген максималды өлшемнен асып кетсе, JavaScript және CSS-ті жылжыту арқылы кодты азайту керек. жеке файлдар:
- js және сақтау css коды.js немесе .css кеңейтімі бар бөлек файлдарға;
- салмағы бойынша файлдар 300 Кб аспауы керек;
- файлдарды жарнамалық науқанның «Файлдар» қойындысына жүктеңіз және алынған сілтемелерді HTML кодындағы файлдарға қосыңыз.
Js және CSS файлдарын қосу мысалы:
HTML кодында рұқсат етілмейді салыстырмалы жолдарфайлдарға.
Әр жобада тек бір .html файлы болуы мүмкін.
Максимум рұқсат етілген сомажобадағы файлдар – 50;
Жобада рұқсат етілген файл түрлері: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
Әрбір файлдың максималды өлшемі (мұрағат ішіндегі файлдар үшін де жарамды):
- 300 Кб;
- Бейне файлдар үшін 1 Мб.
Файл атауларында тек сандар немесе ағылшын алфавитінің әріптері, астын сызулар болуы керек. Файл атауында орыс әріптерін, бос орындарды, тырнақшаларды және арнайы таңбаларды пайдалануға жол берілмейді;
Айнымалылар мен объектілер атауларында орыс әріптерін қолдануға болмайды.
Жалғыз ерекшелік - баннердегі мәтін.
Дайын жобаның форматы - ZIPмұрағат.

Суретке қойылатын талаптар

Ажыратымдылығы жоғары кескіндерді пайдаланыңыз, бұл баннердің сапасын күрт жақсартады мобильді құрылғы, дегенмен ол баннерді жүктеу жылдамдығын азайтады.

SVG кескіндерін пайдалануға болады. Олар вектор болып табылады, яғни олар барлық құрылғыларда - мобильді және жұмыс үстелінде жақсырақ көрінеді. Олар сондай-ақ шағын файл өлшеміне ие және анимациялануы мүмкін.

Рұқсат етілген кескін пішімдері: png, gif, jpg, svg.
Бір файлдың максималды салмағы: 300 Кб.

2. HTML креативтілігін әзірлейтін редакторды таңдап, сәйкес сілтемені басыңыз. Нұсқауларға сәйкес HTML креативтілігі бар мұрағатты дайындаңыз:

Adobe Animate CC редакторы - бір түймелі баннер

Adobe Animate CC редакторы - көп түймелі баннер

1. Бірнеше түймелері бар баннер үлгісін жүктеп алыңыз

2. Adobe Animate бағдарламасында HTML5 Canvas жобасын жасаңыз (немесе бұрыннан барын ашыңыз)

3. Сахнаға түймелерді (түймелерді) немесе кірістірілген клиптерді (фильм клиптерін) қосқанда, оларды орнату маңызды. дананың атыкейін қалаған түймелерге шертуді қосуға болады. Біз атауларды пайдалануды ұсынамыз түйме1 - түйме9.

Сондай-ақ қараңыз:

Түймені қосу және дана атын тағайындау бойынша нұсқаулар

Негізгі сахнадағы түйме

1. Сахнада кейбір нысанды жасаңыз, мысалы, Төртбұрыш құралын пайдаланып.
Содан кейін оны таңдаңыз және контекстік мәзір«Символға түрлендіру...» таңдаңыз.

2. Пайда болған диалогтық терезеде Түр: түймешігін таңдаңыз, Атын өзгертусіз қалдыруға болады, Ok түймесін басыңыз.

3. Жұмыс істеу үшін осы түймені басу үшін Дана атауын беріңіз.

4. Осы түйме үшін әрекеттерге келесі кодты жазыңыз:

Window.buttons.push(//Түймелердің үтірмен бөлінген жолдары, осы қосу. this.button1 //Түймелердің бос орнының соңы);

кірістірілген түйме

1. Түйме басқа таңбаның ішінде, мысалы, Фильм клипінің ішінде делік.
В бұл мысалбұл фильм клипіне «аты» данасы берілген

2. Атаудың ішіне екі рет басу арқылы кірістірілген түйме пайда болады.

3. Әрекеттер ішінде мұндай түймешікке жолды көрсеткенде, одан кейін ол кірістірілген нысанның даналық атауын қосу керек:

Window.buttons.push(//Түймелердің үтірмен бөлінген жолдары, осы қосу. this.name.button1 //Түймелердің бос орнының соңы);

Мөлдір түймелерді құру нұсқаулары

1. Қажетті элементті таңдап, оны таңбаға түрлендіру

2. Атты енгізіп, Түр: түймешігін таңдаңыз

3. Таңбаға өту үшін оны екі рет басыңыз:

4. Негізгі кадрды соққы кадрға кірістіріңіз

5. Жоғары, жоғары, төмен жақтаулардың мазмұнын жойыңыз

6. Мөлдір түйме дайын:

4. Жобаға Әрекеттер қабатын қосыңыз (біз оған түймелердің кодын қосамыз)

5. Кодтау терезесін ашыңыз

Window.buttons.push(//Түймелер үшін үтірмен бөлінген жолдар, осыны бірінші қосу //Түймелердің бос орнының соңы); setAdfox();

Түйме негізгі көріністе болса, мысалы, осыдан кейін бірден оның дананың атауын жазыңыз

this.button1

Егер түйме кірістірілген көріністің ішінде болса, одан кейін алдымен көріністің даналық атын, содан кейін түйменің даналық атауын жазыңыз:

this.scene_instance_name.button2

Әрекеттер қабатындағы нәтиже кодының мысалы:

Window.buttons.push(//Түймелердің үтірмен бөлінген жолдары, осы this.button1, this.scene_instance_name.button2 қосылып //Түймелердің бос орнының соңы); setAdfox();

7. Код жолындағы бірінші түйме ADFOX-тен бірінші сілтемені шақырады, екінші түйме екіншісін шақырады және т.б.

HTML креативтілігімен бірге түймелер мен сілтеме нөмірлерінің арасындағы сәйкестік туралы ақпаратты ADFOX-қа баннер қосатын менеджерге жіберіңіз.

8. Жариялау опцияларын ашыңыз және үлгіні бірінші абзацтан қосыңыз және қалаған каталогты таңдау арқылы жобаны жариялаңыз.

9. Жобаны жариялағаннан кейін оны .zip пішіміне көшіріңіз. Шығармашылық ADFOX баннеріне жүктеп салуға дайын.

Google Web Designer редакторы

Бұл баннердің кодын редакторда креативтер жасау үшін негіз ретінде пайдалануға болады.

Үлгіде сценарий бар adfox_HTML5.jsжәне ауысулардың дұрыс жұмыс істеуі және оқиғаларды санау үшін параметрлер жиынтығы:
%анықтама%, %пайдаланушы1%, %оқиғаN%, мұндағы N – 1-ден 30-ға дейінгі оқиға саны.

2. өңдеуді басыңыз.

Барлық оқиғалар Оқиғалар қойындысы арқылы арнайы анимация элементтеріне тағайындалады.

Әрекеттерді шақыру үшін «Басу аймағы» компонентін пайдаланыңыз.
Оны қосып, оқиғаны таңдаңыз Хотспот → Түрту/Басу(немесе ағылшын нұсқасында «Түрту аймағы > Түрту/Басу»).

«Пайдаланушы код» қойындысында басу функциясының шақыруын көрсетіңіз.

2.1 Бір секіру түймесі пайдаланылса:

callclick();

2.2 Бірнеше шарлау түймелері болса:

callclick(n);

қайда n

2.3 Оқиғаны өтусіз анимациядан бастау қажет болса, келесі кодты пайдаланыңыз:

CallEvent(n);

қайда n- шақырылатын оқиғаның нөмірі.

Созылатын (резеңке) баннерді жүзеге асыру ерекшелігі.

Баннерді сайтта, панельде орналасатын контейнердің ені бойынша созу үшін Қасиеттерорын мен өлшемдер үшін пикселдердің орнына пайыздарды көрсетіңіз.

Сондай-ақ опцияларды пайдаланыңыз «Контейнерге туралау»және «Резеңке макет»үстінде жоғарғы панельқұралдар.
Кез келген туралау құралдарын пайдаланбас бұрын Fluid Layout параметрін қоссаңыз, негізгі контейнер өлшемі өзгертілгенде, барлық элементтер бір-бірімен және контейнер өлшемдерімен тураланады.
Бұл жағдайда бір мезгілде элементтердің салыстырмалы өлшемдерін пайызбен де, абсолютті өлшемдерді де – пикселдерде пайдалануға болады.

4. Жобаның жариялануы.

ADFOX-ке баннер қосқан кезде менеджер түймелер мен оқиға нөмірлері арасындағы сәйкестікті білуі керек. Әрбір оқиға үшін менеджер өзінің ауысу сілтемесін белгілейді, содан кейін ол айнымалы мәнді пайдаланып баннер кодына жіберіледі.

Жобаны жариялағаннан кейін оны пішімге көшіріңіз .zip. Шығармашылық ADFOX баннеріне жүктеп салуға дайын.

Басқа редакторлар

1. Баннерді басу саны

ADFOX баннерге басу статистикасын есептеуі үшін href төлсипаты үшін a тегінде HTML кодында айнымалы мәнді орнатуыңыз қажет:

%banner.reference_user1%

Сондай-ақ сілтемелер үшін атрибут мәніндегі %banner.target% айнымалысы бар мақсатты төлсипатты пайдаланыңыз.
Егер атрибут жоқ болса, онда сілтеме iframe ішінде ашылады, яғни жарнамаланған сайт баннер кеңістігінде ашылады.

Баннердегі шертулерді санауға арналған HTML кодының мысалы:

Жарнама берушінің веб-сайты

Орналастырылатын баннерлер HTML кодында мобильді қосымшалар, басуларды есепке алу үшін макросты пайдаланыңыз: %reference%@%banner.user1%

2. Баннердегі бірнеше сілтемелерден басылғандарды санау

Баннерде бірнеше басылатын сілтемелер бар делік әртүрлі беттержарнамаланған сайт және олардың әрқайсысы үшін ауысулар санын алу керек.

Бірінші сілтеме Екінші сілтеме

href атрибут мәндерін айнымалылармен ауыстырыңыз %request.reference%@%banner.eventN%, мұнда N орнына 1-ден 28-ге дейінгі оқиға нөмірі болуы керек.
Мысалы:

Бірінші сілтеме Екінші сілтеме

Сілтемелер мен айнымалы мәндердің сәйкестігі ADFOX-қа баннер қосатын менеджерге хабарлануы керек. Баннерді қосқан кезде «Оқиғалар» қойындысында 1-ші оқиғаның бірінші сілтемесін, ал 2-ші оқиғаның екінші сілтемесін көрсету қажет.

ADFOX бағдарламасына баннер қосу

ADFOX бағдарламасына баннер қосу үшін таңдаңыз қалаған түрібаннер және шаблон «HTML5 баннері».

Баннер параметрлерін көрсетіңіз:

HTML5 креативтілігімен мұрағаттау- .zip мұрағатын жобамен, өріспен жүктеп алыңыз "HTML5 шығармашылық коды"бос қалуы керек (ол баннер қосылғаннан кейін жобаңыздың .html файлының мазмұнымен толтырылады).

HTML5 шығармашылық коды- жылы дайындалған жобамен zip-архивті жүктеп алыңыз HTML редакторларынемесе HTML кодын қойыңыз.

Баннерде бірнеше сілтемелер болса, оларды қойындыға қосыңыз Оқиғаларбаннерде, өтудің URL өрістерінде.
Сілтемелер мен оқиғалар саны арасындағы сәйкестікті HTML креативтілігін әзірлеушілермен тексеріңіз.

Өлшеу пикселіне сілтеме- ADFOX пикселі әдепкі бойынша пайдаланылады //banners.adfox.ru/transparent.gif, егер сізге үшінші тарап жүйесінде әсерлерді бақылау қажет болса, ADFOX пикселін жойып, басқа сілтемені беріңіз.

Шығармашылық ені (px немесе %)- Баннердің енін көрсетіңіз.

Шығармашылық биіктігі (px немесе %)- Баннердің биіктігін көрсетіңіз.

Сурет- суретті жүктеп салу.
Шығармашылықтарды көрсету шарттары:
- HTML коды және сурет қосылды - HTML коды көрсетіледі.
- сурет қосылды - сурет көрсетіледі.
- HTML коды қосылды - HTML коды көрсетіледі.

Аты класс атрибутыконтейнерлік баннер- баннері бар контейнердің класс атрибуты үшін атауды (немесе бос орынмен бөлінген бірнеше атауды) көрсетіңіз.

SafeFrame пайдалану (иә|жоқ)- safeFrame – қатаң API бар арнайы iframe ішіне жарнамаларды орап алатын технология. SafeFrame өзі көрсететін жарнамалардың деректерді жинауына және safeFrame қолданбасынан тыс беттің қалған бөлігімен әрекеттесуіне жол бермейді.
иә - safeFrame пайдалануды қосу және веб-бетке кіруге тыйым салу;
жоқ - safeFrame қоспаңыз. Баннерлік кодтың веб-бетке кіру мүмкіндігі бар.

Баннер блогына арналған стильдер- бір жолдағы баннер контейнеріне арналған теңшелетін стильдер. Стильден басқа: дисплей. Мысалы, "шекара: 1px тұтас қызыл;". Жарамсыз мәндерді браузер алып тастайды.

Интернет жарнамаларға толы. Көптеген сайттарда бұл салмақ жоғалтуға арналған щеткалардың көзге түсетін жарнамасы, басқаларында бұл Yandex.Direct немесе Google AdSense. Тек кейбіреулерінде тек сыртқы түрімен пайдаланушыларды ренжітпейтін әдемі баннерлер көруге болады. Менің шолуымда сіз ешқандай бастапқы дағдыларсыз әдемі HTML5 баннерін жасауды үйренесіз.

bannersnack — кодты білуді және кескін редакторларымен жұмыс істеу дағдыларын қажет етпейтін әртүрлі форматтағы HTML5 және Flash баннерлерін жасауға арналған онлайн қызметі.

Қызмет баннерлердің екі түрін жасауды ұсынады: бетті жүктеу кезінде әдеттегі немесе кездейсоқ баннер. Сондай-ақ, banersnack көмегімен сіз Google немесе Facebook-те жарнамалық науқаныңызды бастай аласыз. Бірақ бірінші нәрсе.

баннер жасаушы

Дәл осы бөлімде сіз өзіңіздің бірінші баннеріңізді жасай аласыз. Қызмет HTML5 немесе Flash пішіміндегі баннерлер ұсынады. Барлығы Flash-ті жоюға тырысатындықтан, мен HTML5 редакторын сипаттаймын.

Шеберді іске қосқан кезде бірден бірнеше дайын үлгілер ұсынылады:

Әрине, баннерді нөлден жасау мүмкіндігі еш жерде жоғалып кетпейді. Шебердің жоғарғы жағында болашақ баннердің өлшемі көрсетілген:

Өлшемді таңдаған кезде үлгілер де өзгереді. Өзіңіздің өлшеміңізді көрсетпей, алдын ала орнатылған өлшемді таңдаған дұрыс, өйткені bannersnack мұндай баннерді жасаудан бас тартуы мүмкін.

Баннер жасаған кезде келесі өңдегіш ашылады:

Сол жақта барлық баннер слайдтарының тізімі бар, олардың әрқайсысында өз суреті мен мәтіні болады. Жоғарғы жағында баннер жасауға арналған құралдар, ал оң жағында қабат сипаттары орналасқан.

Баннер ретінде суретті, мәтінді, түймені, пішінді немесе бейнені қосуға болады. Мен сурет пен түймені қостым:

Кез келген элементті таңдаған кезде бірнеше үлгілер ұсынылады, бірақ, әдеттегідей, соңғы сөз сіздікі: