Banner HTML5- ixtiyari HTML məzmunu və ya şəkli göstərən banner. HTML kodu üslubları və skriptləri olan adi HTML səhifəsi ola bilər. O, iframe-də yerləşdirilib və saytın məzmununa məhdud çıxışı var.
"Banner HTML5" şablonundan istifadə edərək banner iki yolla əlavə edilə bilər:
1. Yalnız təsviri hazırlayaraq. Banner parametrlərində keçid üçün keçidin olması şəklin tıklanabilirliyini tənzimləyir.
2. HTML kreativini təlimatlara uyğun olaraq redaktorda hazırladıqdan sonra: və ya.
Bannerə həm HTML kodu, həm də şəkil əlavə olunarsa, HTML kodu göstəriləcək.
ADFOX-a əlavə edildikdə konfiqurasiya edilə bilən parametrlər:
- Bannerin eni, hündürlüyü.
- Banner konteyneri üçün öz css üslubları.
HTML yaradıcı inkişafı
1. Özünüzlə tanış olun HTML kodu üçün tələblər
- Maksimum icazə verilən HTML faylının ölçüsü 65.000 baytdır.
- Banner HTML kodunun içərisinə JavaScript və CSS yerləşdirmək daha məqsədəuyğundur. Yaranan HTML kodu icazə verilən maksimum ölçüsü keçərsə, JavaScript və CSS-ni ayrı-ayrı fayllara köçürməklə kodu azaltmalısınız:
- js və css kodunu .js və ya .css uzantılı ayrı-ayrı fayllarda saxlamaq;
- faylların çəkisi 300 Kb-dən çox olmamalıdır;
- faylları reklam kampaniyasının "Fayllar" sekmesine yükləyin və nəticədə fayllara olan keçidləri HTML koduna daxil edin.js və css fayllarını birləşdirməyə nümunə:
HTML kodu nisbi fayl yollarının istifadəsinə icazə vermir.
- Layihədə yalnız .html uzantılı bir fayl ola bilər.
- Layihədə icazə verilən maksimum fayl sayı 50-dir;
- Layihədə icazə verilən fayl növləri: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
- Hər bir faylın maksimum ölçüsü (arxiv daxilindəki fayllara da aiddir):
- 300 Kb;
- Video faylları üçün 1MB. - Fayl adlarında yalnız ingilis əlifbasının rəqəmləri və ya hərfləri və alt xətt işarəsi olmalıdır. Fayl adında rus hərflərindən, boşluqlardan, dırnaqlardan və xüsusi simvollardan istifadə edilməsinə icazə verilmir;
- Dəyişənlərin və obyektlərin adlarında rus hərflərindən istifadə edə bilməzsiniz.
Yeganə istisna bannerdəki mətndir. - Bitmiş layihənin formatı - zip arxiv.
Şəkil tələbləri
Yüksək keyfiyyətli şəkillərdən istifadə edin, bu, mobil cihazda bannerin keyfiyyətini əhəmiyyətli dərəcədə yaxşılaşdıracaq, baxmayaraq ki, bu, bannerin yükləmə sürətini azaldacaq.
SVG şəkillərindən istifadə edə bilərsiniz. Onlar vektordur, yəni bütün cihazlarda - mobil və masaüstü kompüterlərdə daha yaxşı görünəcəklər. Onlar həmçinin kiçik bir fayl ölçüsünə malikdir və animasiya edilə bilər.
Qəbul edilən şəkil formatları: png, gif, jpg, svg.
Bir faylın maksimum çəkisi: 300 Kb.
2. HTML kreativinizi inkişaf etdirəcəyiniz redaktoru seçin və müvafiq linki vurun. Təlimatlara uyğun olaraq HTML kreativi ilə arxiv hazırlayın:
Adobe Animate CC Editor - Tək Düyməli Banner
Adobe Animate CC Editor - Çox Düymələri olan Banner
1. Bir neçə düyməli banner üçün şablonu endirin
2. Adobe Animate-də HTML5 Canvas layihəsi yaradın (və ya mövcud olanı açın)
3. Səhnəyə daxil edilmiş düymələr və ya film klipləri əlavə edərkən onları vermək vacibdir misal adı, beləliklə, istədiyiniz düymələrə klik əlavə edə bilərsiniz. Adlardan istifadə etməyi tövsiyə edirik düymə1 - düymə9.
Həmçinin bax:
Düymə əlavə etmək və nümunə adını təyin etmək üçün təlimatlar
Əsas səhnədə düymə
1.
Səhnədə bəzi obyekt yaradın, məsələn, Düzbucaqlı Alətindən istifadə edərək.
Sonra onu seçin və kontekst menyusundan "Simvola çevir..." seçin
2. Görünən dialoq pəncərəsində Növ: Düyməni seçin, Ad dəyişməz qala bilər, Ok düyməsini basın.
3. İşləmək üçün klik üçün bu düyməyə Nümunə Adı verin.
4. Bu düymənin kodunu Actions-a yazın:
Window.buttons.push(//Düymələrin yollarını vergüllə ayıraraq yazın, bunu əvvəlinə this.button1 //Düymələr üçün yerin sonu);
Daxili düymə
1.
Tutaq ki, düymə başqa simvolun içərisindədir, məsələn, Film Klipinin içərisindədir.
Bu nümunədə bu Film Klipinə Nümunə Adı "ad" verilir
2. İki dəfə klikləməklə, adın içərisinə keçin, iç-içə düymə olacaq.
3. Fəaliyyətlərdə belə bir düyməyə gedən yolu göstərərkən, onun yerləşdiyi bundan sonra obyektin Nümunə Adını əlavə etməlisiniz:
Window.buttons.push(//Düymələrin yollarını vergüllə ayıraraq yazın, bunu əvvəlinə this.name.button1 //Düymələr üçün yerin sonu);
Şəffaf düymələr yaratmaq üçün təlimatlar
1. İstədiyiniz elementi seçin və onu simvola çevirin
2. Ad daxil edin və Növ: Düyməni seçin
3. Simvolun üzərinə getmək üçün üzərinə iki dəfə klikləyin:
4. Açar kadrı vurulan çərçivəyə daxil edin
5. Yuxarı, yuxarı, aşağı çərçivələrin məzmununu silin
6. Şəffaf düymə hazırdır:
4. Layihəyə Fəaliyyətlər qatı əlavə edin (biz ona düymələr üçün kod əlavə edəcəyik)
5. Kod yazmaq üçün pəncərə açın
Window.buttons.push(//Düymələrin yollarını vergüllə ayıraraq yazın, bunu əvvəlinə əlavə edin //Düymələr üçün yerin sonu); setAdfox();
Düymə əsas səhnədədirsə, məsələn, bundan dərhal sonra nümunə adını yazın
Bu.düymə1
Düymə daxili səhnənin içərisində yerləşirsə, bundan sonra əvvəlcə səhnənin nümunə adını, sonra isə düymənin nümunə adını yazın:
this.scene_instance_name.button2
Fəaliyyətlər təbəqəsindəki son kod nümunəsi:
Window.buttons.push(//Bunu this.button1, this.scene_instance_name.button2 əlavə edərək vergüllə ayrılmış düymələrin yollarını yazın //Başındakı düymələr üçün boşluq sonu); setAdfox();
7. Kod sətirindəki birinci düymə ADFOX-dan birinci linkə, ikincisi ikinciyə zəng edəcək və s.
HTML kreativi ilə yanaşı, banneri ADFOX-a əlavə edəcək menecerə düymələrin və keçid nömrələrinin uyğunluğu haqqında məlumat verin.
8. Nəşretmə seçimlərini açın və şablonu ilk nöqtədən birləşdirin və istədiyiniz kataloqu seçərək layihəni dərc edin.
9. Layihənizi dərc etdikdən sonra onu .zip formatında arxivləşdirin. Yaradıcılığınız ADFOX bannerinə yüklənməyə hazırdır.
Google Veb Dizayner Redaktoru
Bu bannerin kodu redaktorda kreativlər yaratarkən əsas kimi istifadə edilə bilər.
Şablonda skript var adfox_HTML5.js və keçidlərin düzgün işləməsi və hadisələrin hesablanması üçün bir sıra parametrlər:
%referans%, %user1%, %eventN%, burada N 1-dən 30-a qədər hadisə nömrəsidir.
2. Klikləyin emal.
Bütün hadisələr Hadisələr nişanı vasitəsilə xüsusi animasiya elementlərinə təyin edilir.
İnteraktiv Sahə komponenti hərəkətləri çağırmaq üçün istifadə olunur.
Onu əlavə edin və hadisə seçin İnteraktiv sahə → vurun/klikləyin(və ya İngilis versiyasında "Tap Area > Touch/Click"). 
"Xüsusi kod" sekmesinde, klik funksiyasına zəng göstərin.
2.1 Bir tullanma düyməsini istifadə edirsinizsə:
CallClick();
2.2 Bir neçə keçid düyməsi varsa:
CallClick(n);
Harada n
2.3 Keçidsiz bir animasiyadan hadisəni işə salmaq lazımdırsa, aşağıdakı kodu istifadə edin:
CallEvent(n);
Harada n- çağırılmalı olan tədbirin nömrəsi.
Uzanan (rezin) bannerin həyata keçirilməsi xüsusiyyəti.
Bannerin saytda, paneldə yerləşəcəyi konteynerin eni boyunca uzanması üçün Xüsusiyyətlər Mövqe və ölçülər üçün piksel əvəzinə faizləri göstərin.
Seçimlərdən də istifadə edin "Konteynerə uyğunlaşdırın" Və "Rezin düzümü" yuxarı alətlər panelində.
Hər hansı hizalama alətindən istifadə etməzdən əvvəl Fluid Layout-u aktiv etsəniz, əsas konteynerin ölçüsünü dəyişdirdiyiniz zaman bütün elementlər bir-birinə və konteynerin ölçülərinə uyğunlaşdırılacaq.
Bu halda, siz eyni vaxtda həm elementlərin nisbi ölçülərini faizlə, həm də piksellərdə mütləq ölçülərdən istifadə edə bilərsiniz.
4. Layihənin nəşri.
ADFOX-a banner əlavə edərkən menecer düymələrin və hadisə nömrələrinin yazışmalarını bilməlidir. Hər bir hadisə üçün menecer naviqasiya etmək üçün öz linkini yazacaq və bu daha sonra dəyişəndən istifadə edərək banner koduna ötürüləcək.
Layihəni dərc etdikdən sonra formatda arxivləşdirin .zip. Yaradıcılığınız ADFOX bannerinə yüklənməyə hazırdır.
Digər redaktorlar
1. Bannerdə kliklərin hesablanması
ADFOX-un banner üçün kliklərin statistikasını hesablaması üçün etiketdəki HTML koduna və href atributuna dəyişən yazmalısınız:
%banner.reference_user1%
Həmçinin linklər üçün atribut dəyərində %banner.target% dəyişəni ilə hədəf atributundan istifadə edin.
Əgər atribut yoxdursa, o zaman link iframe daxilində açılacaq, yəni reklam edilən sayt banner məkanında açılacaq.
Banner kliklərini hesablamaq üçün nümunə HTML kodu:
Reklamçının saytı
Mobil proqramlarda yerləşdiriləcək bannerlərin HTML kodunda klikləri saymaq üçün makrodan istifadə edin: %reference%@%banner.user1%
2. Bannerdəki çoxsaylı keçidlərdən kliklərin hesablanması
Tutaq ki, bir bannerin reklam edilən saytın müxtəlif səhifələrinə aparan bir neçə keçidi var və onların hər biri üçün kliklərin sayını almaq lazımdır.
Birinci keçid İkinci keçid
href atribut dəyərlərini dəyişənlərlə əvəz edin %request.reference%@%banner.eventN%, burada N əvəzinə 1-dən 28-ə qədər hadisə nömrəsi olmalıdır.
Misal üçün:
Birinci keçid İkinci keçid
Bağlantıların və dəyişənlərin yazışmaları ADFOX-a banner əlavə edən menecerə bildirilməlidir. Banner əlavə edərkən, "Tədbirlər" sekmesinde Tədbir 1 üçün birinci keçidi, Tədbir 2 üçün ikinci keçidi göstərməlisiniz.
ADFOX-da banner əlavə etmək
ADFOX-da banner əlavə etmək üçün istədiyiniz banner növünü və şablonunu seçin "Banner HTML5".
Banner parametrlərini təyin edin:
HTML5 kreativi ilə arxivləşdirin- layihə, sahə ilə .zip arxivini yükləyin "HTML5 yaradıcı kodu" boş qalmalıdır (banneri əlavə etdikdən sonra layihənizin .html faylının məzmunu ilə doldurulacaq).
HTML5 yaradıcı kodu- HTML redaktorlarında hazırlanmış layihə ilə zip arxivini yükləyin və ya HTML kodunu yapışdırın.
Bannerdə bir neçə keçid varsa, onları nişana əlavə edin Hadisələr bannerin yaxınlığında, keçid URL sahələrində.
Lütfən, link nömrələri və hadisələrin yazışmaları üçün HTML yaradıcı tərtibatçıları ilə yoxlayın.
Pikselin ölçülməsinə keçid- ADFOX pikseli standart olaraq istifadə olunur //banners.adfox.ru/transparent.gif, üçüncü tərəf sistemində təəssüratları izləmək lazımdırsa, ADFOX pikselini silin və başqa bir keçid göstərin.
Yaradıcı genişlik (px və ya %)- bannerin enini təyin edin.
Yaradıcı hündürlük (px və ya %)- bannerin hündürlüyünü təyin edin.
Şəkil- şəkil yükləyin.
Kreativlərin nümayişi üçün şərtlər:
- HTML kodu və şəkil əlavə edildi - HTML kodu göstəriləcək.
- şəkil əlavə edildi - şəkil göstəriləcək.
- HTML kodu əlavə edildi - HTML kodu göstəriləcək.
Banner konteyner sinif atributunun adı- banner konteynerinin sinif atributu üçün adı (və ya boşluqla ayrılmış bir neçə ad) göstərin.
SafeFrame istifadə edin (bəli|yox)- safeFrame, ciddi API-yə malik olan xüsusi iframe-də reklamı əhatə edən texnologiyadır. SafeFrame onun daxilində göstərilən reklamların məlumat toplamasının və SafeFrame-dən kənar səhifənin qalan hissəsi ilə qarşılıqlı əlaqənin qarşısını alır.
bəli - safeFrame-dən istifadəni aktivləşdirin və veb səhifəyə girişi rədd edin;
yox - safeFrame-i işə salmayın. Banner kodunun veb səhifəyə girişi var.
Banner blok üslubları- bir sətirdə banner konteyneri üçün fərdi üslublar. Üslubdan əlavə: ekran. Məsələn, "sərhəd: 1px bərk qırmızı;". Yanlış dəyərlər brauzer tərəfindən silinəcək.
Dostlar, hamıya salam. Bu gün biz Google Web Designer-də HTML5 formatında, 3D effekti ilə bannerlər yaratmağa davam edəcəyik.
Bu başa düşüləndir, html5 və css3-də yaradılan bannerlər istənilən ekranda, həm kompüterlərdə, televizorlarda, həm də mobil cihazlarda göstərilir. Eyni şeyi flaş bannerlər haqqında demək olmaz.
Bundan əlavə, bu bannerlər sadəcə istifadə edilə bilər və banner istənilən ekranda əla görünəcəkdir.
İnternet resurslarına baxmaq üçün mobil cihazların getdikcə daha çox istifadə edildiyini nəzərə alsaq, bu çox vacibdir.
Əsas olanı və onun saytda yerləşdirilməsini əvvəlki məqalədə artıq təsvir etmişəm. Beləliklə, bu gün mən 3D effekti və tsiklik (təkrar) parametrləri yaratmağa diqqət yetirəcəyəm. Biz həmçinin “hadisələr” üçün bir neçə parametrə baxacağıq.
Bütün bu prosesi ətraflı təsvir etmək olduqca çətindir, ona görə də sizə bir video dərsliyi təklif edirəm. Bu, materialın mənimsənilməsini çox asanlaşdıracaq. Həmçinin, vizual nümunə olaraq mənim banner layihəmlə arxivi yükləyin.
3D effektli banner yaratmağa hazırlanır.
Bannerin son görünüşü son nəticədə hazırlıqdan asılıdır. Google Web Designer redaktoru sizə real 3D effektlər yaratmağa imkan verir və bütün bunlar html kodunda yazılacaq, sadəcə olaraq vizual redaktorda hər şeyi düzgün yığmaq lazımdır.
Yüksək keyfiyyətli 3D effekti yaratmaq üçün əvvəlcə Photoshop-da boşluqları kəsməlisiniz, sonradan Google Web Designer-ə qoşulmaq lazımdır.
Nümunə olaraq aşağıdakı blankları hazırladım:
Mən bu blankları Photoshop-da hazırlamışam, amma internetdə buna bənzər çoxlu şəkillər var. Özünüzü gərginləşdirməyə ehtiyac yoxdur, ancaq hazır variantları götürün.
Qeyd: Bu cür blankların yaradılması prosesi ilə maraqlanırsınızsa, bu barədə şərhlərdə yazın.
Ümumi banner kompozisiyasını və ssenarisini düşünmək də vacibdir. Bu, bannerin bütövlükdə necə qəbul ediləcəyini müəyyən edir.
Google Web Designer-də 3D obyektin yaradılması.
Beləliklə, əvvəlki məqaləyə bənzətməklə, redaktoru işə salın və yeni bir layihə yaradın.
3D effekti kompozit təsviri, yəni istədiyiniz proyeksiyada yerləşən bir neçə hissədən ibarət təsviri nəzərdə tutur.
Bu çoxsaylı şəkillər ya qrup şəklində birləşdirilməlidir, ya da DIV blokunda yerləşdirilməlidir. Və filankəs doğru olacaq. Ancaq DIV tərəfi ilə işləmək mənim üçün daha rahatdır.
Addım 1: DIV bloku yaradın.
Beləliklə, bir DIV bloku yaratmaq üçün sol paneldə seçin "Etiketləmə Aləti (D)".
ID təyin etməyinizə əmin olun. Və bölmədən istifadə edərək ölçüləri tənzimləyin "Xüsusiyyətlər" sağ paneldə.
İndi bloku seçməlisiniz. Bunu etmək üçün sol paneldə seçin "seçim aləti (V)" və DIV blokunun çərçivəsinə sol siçan düyməsini iki dəfə basın. Rəngini qırmızıya dəyişəcək.
Addım 2. Şəkillərin təşkili.
Və indi ən əziyyətli proses başlayır. Bir şəklin bütün elementlərini ifşa etməlisiniz.
Mənim ixtiyarımda aşağıdakı əşyalar var:
- Üst tərəf.
— Yan (üç ayrı hissədən ibarətdir).
Əvvəlcə şəklin əks (arxa) tərəfini yerləşdirin və onu bannerin mərkəzi və yuxarı kənarına uyğunlaşdırın.
Eyni şəkildə ön tərəfi əlavə edin. Z oxu boyunca hizalayın və sürüşdürün.
Yan eni 4px (piksel) olduğu üçün ön və arxa tərəfləri Z oxu boyunca 2px və -2px dəyişdim. Bu, şəkillər arasında boşluq təmin edəcək.
Qeyd: dəqiq yerdəyişmə nömrələri üçün ekran görüntülərinə baxın.
Sonra tərəfi, bütün hissələri ayrıca əlavə edin. Yerləşdirmə asanlığı üçün alətlərdən istifadə edin "3D iş sahəsinin fırlanması" Və "miqyas". Onlar bütün detalları dəqiq tənzimləməkdə sizə kömək edəcəklər.
Başlamaq üçün sizə təklif edirəm ki, bütün şəkilləri bir tərəfə düzüb, sonra onları köçürüb digər tərəfdə güzgü proyeksiyasına yerləşdirin.
Növbəti addım yuxarı sol küncü düzməkdir.
İndi tərəfin mərkəzi hissəsi.
Və sol tərəfdəki alt künc.
Bütün yan elementləri Y oxu boyunca 90 0-da hizaladığınızdan əmin olun.
İndi istədiyiniz təbəqəni kopyalayıb yenidən yapışdırmalı, adını dəyişdirməli və yer parametrlərini dəyişdirməlisiniz, buna görə sağ tərəf üçün elementləri alırıq.
Bunu etmək üçün alt paneldə bir şəkil seçin - CTRL + C (kopya) düymələr birləşməsini basın və dublikat CTRL + V yapışdırın.
Gəlin yuxarıdan aşağıya qədər sahə tərəfi ilə eyni şəkildə başlayaq, ancaq yalnız sağ üçün.
Yuxarı sağ qapaq.
Şəkildə görünmədiyi üçün aşağı hissəni etməmişəm.
Ən ağır iş bitdi. İndi animasiya qurmağa başlaya bilərsiniz. Vizual nümayiş olaraq, şəkli çevirək.
Google Web Designer-də fırlanma effektinin yaradılması.
İlk addım bütün təsvir elementlərini ehtiva edən DIV blokundan çıxmaqdır. Yəni, biz konkret şəkillərlə blok daxilində işləmişik və indi DIV blokunu idarə edərək, bütün şəkillərlə eyni vaxtda işləməli olacağıq.
Başlamaq üçün alt paneldəki DIV düyməsini sıxın.
Beləliklə, vaxt şaletində, sağ siçan düyməsini basaraq, iki əsas çərçivə yaradırsınız. Bu belə görünməlidir:
Y miqyasında orijinal çərçivənin yeri -90 0 olaraq təyin edilmişdir.
Y miqyasında birinci əsas çərçivəni (ikincisini) 0 0-a təyin etdik.
İkinci əsas çərçivəni (ardıcıl üçüncü) Y miqyasında 90 0-a təyin edin.
Nəticələri yoxlaya bilərsiniz. Bunu etmək üçün düyməni basın Oynamaq.
Düzdür, bizim imicimiz yalnız bir inqilab edəcək. Təsvirin daim fırlanması və ya bir neçə inqilab etməsi üçün velosiped parametrlərini konfiqurasiya etməlisiniz.
Google Web Designer-də velosiped sürmənin qurulması.
Proqram bir neçə dövrilik (təkrar) variantını konfiqurasiya etməyə imkan verir. Bu yolla siz bütün banner elementləri və ya hər bir element üçün ayrıca təkrarlama qura bilərsiniz.
Həmçinin, dövrilik təkrarların sayı ilə məhdudlaşdırıla və ya sonsuz edilə bilər.
Aşağı paneldə, hər bir elementin yanında simvollar var "Qala", "Göz", "Tərs ox".
Beləliklə, dövriyyəni konfiqurasiya etmək üçün simvolu vurmalısınız "Tərs ox". Və ya məhdud sayda təkrar, ya da sonsuz bir seçim seçin.
Animasiyanı sonsuz təkrarlamağı seçdim. Çünki gələcəkdə konfiqurasiya etmək istəyirəm "Hadisələr" belə ki, siçan üzərinə qoyulduqda fırlanma dayanacaq və kursor çıxarıldıqdan sonra davam edəcək.
Siçanı bannerin üzərinə gətirdiyiniz zaman fırlanmanı dayandırın.
Hər şeydən əvvəl, birinci əsas çərçivədə (ard-arda ikinci) qısa yol təyin edirik. Bunu etmək üçün çərçivənin yuxarısına sağ vurun və menyu elementini seçin "Qısayol əlavə et". Qısayolun adını daxil edin və Enter düyməsini basın.
Və növbəti addımda siz qəbuledici kimi seçirsiniz « Səhifə 1". Orada başqa variantlar olmayacaq.
Və son addım, ilkin mərhələdə yaratdığınız qısa yolu seçin.
Hadisələri yadda saxlayın və yoxlayın. Siçanı qısayolun edildiyi çərçivənin üzərinə gətirdiyiniz zaman bannerin fırlanması dayanacaq.
Siçan kursorunu uzaqlaşdırdıqdan sonra fırlanmanın bərpası.
Kursoru yan tərəfə keçirdikdən sonra fırlanmanın davam etməsini təmin etmək üçün başqa bir hadisə qurun.
Əvvəlki ilə eyni şəkildə konfiqurasiya edilmişdir, yalnız iki fərq var.
Tədbir seçilir "Siçan"— « siçan".
Hadisə - siçanın geri çəkilməsi
Və bir hərəkət kimi "Zaman qrafiki" — « togglePlay".
Fəaliyyət - Davam edin
İndi 3D effektli bannerimiz hazırdır. Və istədiyiniz qədər müxtəlif effektlər yarada bilərsiniz.
Sadəcə siçan ilə klikləmək və keçid açmaq üçün hadisə təyin etməyi unutmayın. Banner gözəllik üçün yaradılmayıb axı.
Əvvəlcə bu proses mürəkkəb görünə bilər, lakin bir neçə bannerdən sonra artıq belə düşünməyəcəksiniz.
Bu gün mənim üçün hamısı budur, dostlar. Hamınıza uğurlar arzulayıram, şərhlərinizi səbirsizliklə gözləyirəm və sizi yeni məqalələrdə və video dərslərdə görəcəyəm.
Hörmətlə, Maksim Zaitsev.
İnternet reklamla doludur. Bir çox saytlarda bu, arıqlamaq üçün fırçalar üçün göz oxşayan reklamdır, digərlərində isə Yandex.Direct və ya Google AdSense. Və yalnız bəzilərində sadəcə görünüşü ilə istifadəçiləri qıcıqlandırmayan gözəl pankartlar görə bilərsiniz. Mənim rəyimdən siz heç bir ilkin bacarıq olmadan özünüz gözəl HTML5 banner yaratmağı öyrənəcəksiniz.
bannersnack müxtəlif formatlı HTML5 və Flash bannerlərinin yaradılması üçün onlayn xidmətdir, kod bilikləri və ya şəkil redaktorları ilə işləmək bacarığı tələb olunmur.
Xidmət iki növ banner yaratmağı təklif edir: adi banner və ya səhifə yüklənərkən təsadüfi banner. Siz həmçinin banersnack istifadə edərək Google və ya Facebook-da reklam kampaniyanızı başlata bilərsiniz. Ancaq ilk şeylər.
banner istehsalçısı
Məhz bu bölmədə siz ilk bannerinizi yarada bilərsiniz. Xidmət HTML5 və ya Flash formatında bannerlər təklif edir. Hər kəs Flashı öldürməyə çalışdığı üçün HTML5 redaktorunu təsvir edəcəyəm.
Sihirbazı işə saldığınız zaman dərhal bir neçə hazır şablon təklif olunur:
Təbii ki, sıfırdan banner yaratmaq imkanı heç vaxt əldən getmir. Sehrbazın yuxarı hissəsində gələcək bannerin ölçüsü göstərilir:
Ölçü seçərkən naxışlar da dəyişəcək. Özünüzü təyin etməkdənsə, əvvəlcədən müəyyən edilmiş ölçüyə üstünlük vermək daha yaxşıdır, çünki bannersnack nəticədə belə bir banner yaratmaqdan imtina edə bilər.
Bannerinizi yaratdığınız zaman aşağıdakı redaktor açılır:
Solda hər birinin öz şəkli və mətni olacaq bütün banner slaydlarının siyahısı var. Yuxarıda banner yaratmaq üçün alətlər, sağda isə təbəqənin xüsusiyyətləri var.
Siz öz şəkilinizi, mətninizi, düymənizi, formanızı və ya videonuzu banner kimi əlavə edə bilərsiniz. Şəkil və düymə əlavə etdim:
İstənilən elementi seçdiyiniz zaman bir neçə şablon təklif olunacaq, lakin həmişə olduğu kimi, son söz sizindir:
Hər təbəqənin üç xüsusiyyət nişanı var. Səhifədəki mövqe, rəng, forma və s.:
Bir təbəqəyə klikləməklə hərəkət edin:
Siz növbəti slayd və ya keçidə keçidi təyin edə bilərsiniz.
Slayd dəyişdirilərkən animasiya xüsusiyyətləri:
Bannerinizi redaktə etməyi bitirdikdə, sadəcə olaraq Saxla üzərinə klikləyin və banneriniz üçün ad seçin:
Sonra sayta daxil etmək üçün kodları olan bütün bannerlərinizin siyahısı açılacaq:
Qeyd etmək vacibdir ki, siz bannersnack saytındakı banneri dəyişdirdiyiniz zaman o, saytınızda da yenilənəcək. Yerləşdirmə kodunu yenidən kopyalamağa ehtiyac yoxdur.
banner rotatoru
Burada səhifə yüklənərkən təsadüfi yüklənən statik bannerlər yaradılır.
Sehrbaz artıq yaradılmış bannerlər arasından seçim etməyi və ya yenisini yaratmağı təklif edir:
Öz şəklinizi əlavə edərkən, yalnız keçid URL-ni təyin edə bilərsiniz:
Onda qalan şey sayta daxiletmə kodunu yenidən əldə etməkdir:
Bannersnack-in köməyi ilə hətta təcrübəsiz istifadəçi belə öz gözəl çarpaz brauzer bannerini yarada bilər.
HTML5 Bannerlər
2299 rubldan
RUB Sifariş verinHazırda HTML5 bannerləri tam hüquqlu animasiyalı banner reklamı üçün yeganə cari formatdır. Bu universal çarpaz platforma formatı bir sıra məhdudiyyətləri və çatışmazlıqları olan Flash bannerlərini əvəz etdi.
Bu imtinanın əsas səbəbləri aşağıdakılardır:
- Kompüter təhlükəsizliyi və mobil cihazların prosessor gücünün artan istehlakı sahəsində Flash texnologiyasına qarşı iddialar yığılıb;
- bəzi brauzerlər default olaraq Flash-ı blok etməyə başladılar;
- iOS mobil cihazlarında (iPhone, iPad) Flash displey istehsalçı tərəfindən təmin edilməmişdir;
- Flash banner reklam bloklama proqramlarının populyarlığı;
- sahibi Adobe tərəfindən Flash texnologiyasının sonrakı dəstəyindən və inkişafından imtina.
Animasiya edilmiş HTML5 bannerləri məhdudiyyətsiz istənilən brauzerdə, istənilən cihazın, o cümlədən smartfonlar, planşetlər və media TV-nin ekranında göstərilə bilər. Bu, onların çarpaz platforması və çox yönlü olmasıdır.
Müştəri üçün HTML5 bannerlərinin istifadəsi, ilk növbədə, itkisiz auditoriya əhatəsini genişləndirmək deməkdir.
HTML5 banneri nə edə bilər?
Çox. Axı bu, istifadəçinin diqqətini çəkən və hətta onunla qarşılıqlı əlaqədə olan ən qabaqcıl formatdır (interaktiv banner).
Animasiya baxımından belə bir banner vektor animasiyasını (miqyaslı itkilər olmadan), personajların animasiyasını, fotoşəkilləri, loqoları, qrafikləri və diaqramları, mətni və hətta 3D animasiyasını göstərə bilər. İnteraktiv nöqteyi-nəzərdən HTML5 banneri istifadəçi hərəkətlərinə cavab verə və əlavə məzmun və funksiyalar təklif edə bilər. Media baxımından HTML5 banneri video, slaydlar və audio yazıları oynaya bilər. Cavab vermək baxımından, HTML5 banneri səhifənin bütün eni boyunca uzana, əlavə panelləri genişləndirə və ya bütün ekranı doldurmaq üçün genişləndirə bilər.
HTML5 bannerlərinin əsas növlərinə nəzər salaq.
Sabit ölçülü cizgi HTML5 banneri.
Əksər reklam şəbəkələrində ən populyar format. Tələb olunan bannerlərin eni və hündürlüyü yerləşdirilməyə qəbul edilənlərin siyahısından seçilir. Biz həmişə ən ümumi ölçüləri təklif edəcəyik.
Uzanan HTML5 banner (cavab verən, rezin).
Bu, ekranın bütün enini (bəzən hündürlüyünü) tutmaq üçün uzana bilən pankartdır. (Ətraflı məlumatı bu məqalədə tapa bilərsiniz)
Tam ekran HTML5 banneri.
Tam ekranı açan banner. Bir qayda olaraq, ekran taymerini və "Bağla" düyməsini ehtiva edir. Mobil cihazlarda nümayiş etdirmək üçün xüsusilə məşhurdur.
Tez-tez belə bir banner mobil cihazın müxtəlif istiqamətləri və qətnamələri nəzərə alınmaqla uyğunlaşdırılmalıdır.
Genişlənə bilən HTML5 banneri (genişlənə bilər).
Əvvəlcə ekranda yalnız belə bir bannerin başlanğıc paneli (teaser) mövcuddur. Verilmiş alqoritm yerinə yetirildikdə (siçanın üzərinə sürükləmə və ya klikləmə, taymer və ya səhifədəki digər hadisələr) bannerin ikinci hissəsi əlavə genişləndirilmiş məlumatla açılır.
HTML5 Video banner.
Reklam platformasının parametrlərindən və tələblərindən asılı olaraq, o, ya avtostartla, ya da “Oynat” düyməsini basdıqdan sonra videonu göstərə bilər. Nəzarət və səssiz düymələri ola bilər. Video fayl adətən xarici hostinqdə yerləşir və göstərildikdə yüklənir.
Oyun üçün interaktiv bannerlər.
İstifadəçini sadə hərəkətlər edərək oyuna qoşulmağa təşviq edən bannerlər.
Bu cür bannerlər hədəf auditoriyanın diqqətini cəlb edir, böyük maraq doğurur, lakin eyni zamanda bir sıra məhdudiyyətlərə malikdir (məsələn, mobil cihazlarda siçan ilə keçid hadisəsinin olmaması və ya əlavə skriptlərin istifadəsinə məhdudiyyətlər). Əgər siz oyun HTML5 banneri yaratmağı planlaşdırırsınızsa, biz həmişə bu xüsusiyyətlər haqqında sizə məlumat verəcəyik.
“Ağıllı” HTML5 bannerləri (kalkulyatorlar).
Onlar istifadəçini cəlb etmək və onunla qarşılıqlı əlaqə yaratmaq, ona lazımi parametrlər və daxili alqoritmlə müəyyən edilmiş düstur (məsələn, kreditin hesablanması, ipoteka, tikinti materiallarının istehlakı və digər sadə əməliyyatlar) üzrə dərhal hesablama təklif etmək üçün istifadə olunur.
Redaktə edilə bilən HTML5 Bannerlər– bəzi hallarda müştəri tərtibatçının köməyinə müraciət etmədən tez bir zamanda bannerlərdə dəyişikliklər etməlidir (məsələn, qiymətləri, faizləri və ya kotirovkaları tez-tez dəyişmək). Biz bu tapşırığın öhdəsindən gələ bilərik və lazımi parametrləri birbaşa bannerin HTML koduna çıxara bilərik, burada müştəri müstəqil olaraq dəyişiklik edə bilər. Banner tərəfindən istifadə olunan məlumatları xarici fayllara çıxarmaq üçün sizin üçün əlverişli olan başqa bir həll təklif edə bilərsiniz.
Xarici məlumatların və API-nin yüklənməsi ilə işləyən HTML5 bannerləri.
Hazırda bir çox reklam şəbəkələri bannerlərin xarici mənbələrə çatmasını qadağan edir. Bununla belə, əgər banner belə bir fürsəti təmin edən saytda yerləşdirilirsə, HTML5 banneri saytın API-si vasitəsilə lazımi məlumatları (mətn, rəqəmlər, sitatlar) tələb edə bilər və onları verilmiş alqoritmə uyğun olaraq emal edərək, onu sayta göstərə bilər. istifadəçi.
3D HTML5 bannerləri.
Belə bannerlər səhifədə üçölçülü təsvir modelləri yaratmaqla istifadəçinin diqqətini cəlb edir.
HTML5 3D banneri kənarlarında banner çərçivələri olan fırlanan obyekt kimi, açılan kitab kimi və ya digər 3D effektlərdən istifadə etməklə həyata keçirilə bilər.
Qeyd edək ki, HTML5 banneri eyni anda təsvir edilən bir neçə funksiyanı özündə birləşdirə bilər. Məsələn, video banner səhifənin bütün eni boyunca uzana bilər və istifadəçi hərəkətlərindən asılı olaraq 3D animasiya səhifədə genişlənə bilər.
Veb saytımızda HTML5 banner sifariş etmək istəyirsinizsə və kreativ ideyanız müxtəlif formatların birləşməsini tələb edirsə, mütəxəssislərimiz bunu hər zaman edə bilər.
HTML5 banner - texniki cəhətdən nədir?
Ən yaxşısı HTML5 bannerini mini vebsayt kimi düşünməkdir. Mübaliğə yoxdur.
Bu banner formatına adını verən HTML5 veb səhifənin işarələmə dili və ya başqa sözlə, tərtibat dilidir. Və hər hansı bir müasir veb saytla eyni qanunlara uyğun olaraq tərtib edilmişdir. O, div konteynerlərini, plug-in şriftlərini, css üslublarını və js skriptlərini ehtiva edə bilər. Əsas element kətan animasiya konteyneridir. Animasiyanın özü java skripti ilə həyata keçirilir, tez-tez animasiya üçün xüsusi olaraq hazırlanmış js kitabxanalarından istifadə edilir.
İçində nə var? Niyə arxivdə? Niyə bu qədər çox fayl var?
Düzdür, çünki biz bannerin bir JPG şəkil faylı və ya “gif” və ya “flash disk” olmasına öyrəşmişik. Ancaq unutmayın ki, yuxarıda yazdığımız kimi, HTML5 banneri əslində mini-saytdır. O, çoxlu faylları ehtiva edir və zip arxivində reklam platformasına verilir. Arxivin içərisində əsas HTML faylı, java skript faylları, kitabxanalar, stil cədvəlləri və istifadə olunan şəkillər var.
Qeyd. Bəzi hallarda, reklam platforması sizdən bütün banneri bir faylda, o cümlədən 64 baza formatında istifadə olunan bütün skriptləri və şəkilləri təqdim etməyi tələb edə bilər. Təcrübəli bir tərtibatçı üçün bu problem deyil. Bununla belə, belə bir tələb pankart hazırlamaq və ona dəyişikliklər etmək üçün lazım olan vaxtı artırır. Xoşbəxtlikdən, bu tələb nadirdir.
Göndərilən HTML5 bannerini kompüterimdə necə görə bilərəm?
Çox sadə. Zip arxivini çıxarın və brauzerinizdə HTML faylını açın.
Düzgün HTML5 bannerini aldığımı necə yoxlaya bilərəm?
Əgər Google reklam xidmətləri üçün banner yaradılıbsa, o zaman dizaynerin işinin keyfiyyətini yoxlamaq üçün əla vasitə xidmətinizdədir - Google-un onlayn HTML5 validatoru. İstifadəsi asandır: zip arxivinizi bannerlə yükləyin və onun yoxlama siyahısından keçib-keçmədiyinə baxın. Səhvlər qırmızı işarələrlə qeyd olunacaq. Əgər onlar orada deyilsə, tərtibatçınızın əməyi boşa getməyib və banner Google adWords və ya Double Click-də yerləşdirilməyə hazırdır.
Yandex, Mail.ru, Rambler, adFox, adRiver və digər reklam şəbəkələrində banner sistemin veb saytına yükləndikdən sonra texniki tələblərə uyğunluğu da yoxlanılır. Problemlər halında, moderatordan səhvi izah edən şərh ala bilərsiniz. Bəzi saytlar reklam müştərisinə test səhifəsində bannerə baxmaq imkanı verir.
Bununla belə, HTML5 bannerinin düzgün istehsalının ən yaxşı təminatı tərtibatçının təcrübəsi, onun reklam platformalarının texniki tələblərini bilməsi və səhvləri dərhal düzəltməyə hazır olmasıdır.
Java Script-də animasiyalı banner fərqlidirmi?
Qarışıq olmayın. “Java Script banneri”, “Kanvas banner” – biz məhz “HTML5 banneri” adlandırılan şeydən danışırıq. Tərtibatçı alətindən asılı olaraq, js kitabxanaları və ya tərtibat qaydaları dəyişə bilər, lakin ümumi montaj sxemi eyni qalır.
HTML5 bannerini necə yaratmaq olar?
HTML5 animasiyaları yaratmaq üçün dizaynerlər arasında ən populyar redaktor Adobe Animate proqramıdır.
Google öz inkişaf alətini təklif edir - Google Web Designer. Onun üstünlükləri arasında çoxlu daxili şablonların olması və birbaşa Google reklam xidmətləri üçün banner dərc etmək imkanı var: adWords və Double Click. Dezavantajlar arasında məhdud animasiya imkanları var.
Bəzi dizaynerlər, çox vaxt amerikalılar, Green Sock Animation Platform redaktoru və kitabxanalarından istifadə edirlər. Lakin onlar ölkəmizdə ciddi şəkildə yayılmayıblar.
Bütün lazımi komponentlərin açıq mənbə olduğunu nəzərə alsaq, yaxşı mütəxəssis hətta sadə mətn redaktorunda belə HTML5 banner yarada bilər. Lakin bu üsul peşəkar animasiya proqramlarından istifadə ilə müqayisədə effektiv deyil.
HTML5 bannerləri üçün texniki tələblər.
Tələblər aşağıdakılara aiddir:
- HTML5 bannerinin ümumi çəkisi kb.;
- zip arxiv quruluşu, qovluq və faylların sayı;
- icazə verilən fayl formatlarının siyahısı;
- bannerə klikləməklə URL bağlantılarını aktivləşdirmək yolu (banner proqram təminatı);
- xarici hostinqdə icazə verilən js kitabxanalarının siyahısı;
- video və audio faylları birləşdirmək üçün prosedur və məhdudiyyətlər;
- çərçivə dizaynına tələblər, imtinalar, animasiya dövrlərinin tezliyi və sayı, cihazın prosessoruna yüklənmə.
Və bu, müştərini gecikmədən yerləşdirməyə və reklam kampaniyasına başlamağa hazır olan HTML5 banneri ilə təmin etmək üçün tərtibatçılarımızın nəzərə almalı olduğu tələblərin tam siyahısı deyil.
Əvvəllər yaradılmış Flash bannerlərimlə nə etməliyəm?
Özünüz baxın - ən böyük reklam şəbəkələri artıq yerləşdirmə üçün Flash bannerlərini qəbul etmir, Flash komponentləri brauzerlərdə və iOS cihazlarında bloklanıb, Swiffy (Flash bannerlərinin HTML5-ə yeganə adekvat onlayn çeviricisi) fəaliyyətini dayandırıb.
Flash formatının HTML5-ə avtomatik çevrilməsi demək olar ki, qeyri-mümkündür - əslində bunun üçün HTML5 redaktorunda tam əl ilə yenidən qurulma tələb olunur. Belə bir vəziyyətdə müasir və universal HTML5 formatında yeni animasiyalı bannerlər dəstinin yaradılmasına sifariş vermək düzgün qərar olardı.
Bəs "giflər"?
Siz başa düşməlisiniz ki, hər hansı bir GIF animasiyası, video fayllarda olduğu kimi, çərçivə şəkillərinin ardıcıl dəstidir. GIF faylında kadrın oxutma sürəti və təkrarların sayı haqqında məlumat ola bilər. Bu, onun imkanlarını məhdudlaşdırır.
GIF banneri vektor qrafikası ilə işləyə bilməz, proqramlı şəkildə animasiya yarada, istədiyiniz ölçüyə uyğunlaşa bilməz və cizgi HTML5 bannerinin asanlıqla idarə edə biləcəyi daha çox şey ola bilməz.
Bu reklam verən üçün nə deməkdir?
Artıq çəki problemi. Bəli, hətta bannerlər də buna həssasdır. Bütün əsas reklam platformaları kilobaytlarda banner çəkisinə ciddi məhdudiyyətlər qoyur.
GIF banneri mətnin kiçik animasiyası, düymə və ya fotoşəkilləri dəyişdirməklə bir neçə statik çərçivə göstərmək üçün yaxşıdır. Bu halda GIF bannerinin ümumi çəkisi reklam platformalarının tələblərini aşmır.
Əgər animasiya bir neçə yüz kadrın dəyişdirilməsini nəzərdə tutursa, onda GIF bannerinin çəkisi, ingilis dilində deyildiyi kimi, "dramatik", yəni dramatik şəkildə artır. Bir neçə meqabayt ağırlığında 20 saniyəlik GIF çox yayılmışdır. Və bu, reklam şəbəkələri tərəfindən son dərəcə xoşagəlməz haldır, onlar haqlı olaraq istifadəçinin bannerə baxmaq üçün nə qədər trafik yükləməli olacağından narahatdırlar.
Beləliklə, əgər sizə çoxlu animasiya effektləri, xarakter animasiyası, interaktiv, adaptiv və ya video bannerə ehtiyacınız varsa, seçim HTML5 bannerinin sifarişinin xeyrinə edilir.
