Bir banner ve tıklamalarımız var. Diğer afişler için, diğer teknik geziler ve orada, tıklama farklı okunur, şimdi belirli bir örneği düşünüyoruz.

Afiş ile konteyner

Diğer derslerde, size animasyon ile% 100 ekran genişliğinde bir afiş nasıl oluşturulacağını ve siteyi yerleştirmek için sitenin bir düzeninin nasıl oluşturulacağı ve hazırlanacağı söyleyeceğim.

Dersten dosyalar:

1. Hazır Afişler FullScreen: Tıklayın

Arkadaş, merhaba herkes. Bugün programda afiş oluşturmaya devam edecek Google Web. 3D efektli HTML5 formatında tasarımcı.

Ve bu anlaşılabilir, HTML5 ve CSS3'te oluşturulan pankartlar hem bilgisayarda hem de ekranda herhangi bir ekranda görüntülenir. mobil cihazlar. Flash afişler hakkında ne söyleyemezsiniz.

Ek olarak, bu afişler kullanmak için yeterli olabilir ve afiş herhangi bir ekranda harika görünecektir.

Ve mobil cihazların internet kaynaklarını görüntülemek için giderek daha fazla kullanıldığı gerçeğini göz önünde bulundurarak, çok önemlidir.

Siteye ana ve yerleşimi son makalede zaten söyledim. Bu yüzden bugün 3D efekti ve bisiklet ayarlarını (yeniden göster) oluşturmaya dikkat edeceğim. Ayrıca "Etkinlikler" için çeşitli ayarları da düşünün.

Bütün bu işlemleri oldukça zor boyamak için ayrıntılı olarak, bu yüzden dikkatinize bir video eğitimi getiririm. Öyleyse, malzeme daha kolay olacaktır. Ayrıca arşivi, afişimin projesi ile görsel bir örnek olarak indirin.

3d efektli bir banner oluşturulması için hazırlık.

Bitmiş formdaki banner türü, hazırlığın hazırlanmasına bağlıdır. Google Web Designer Editor, gerçekçi 3D efektler oluşturmanıza olanak sağlar ve tüm bunlar yazılacaktır. hTML KoduYalnızca görsel editörde her şeyi toplamanız gerekir.

Yüksek kaliteli bir 3D efekti oluşturmak için, gelecekte Google Web Designer'da rıhtım yapmanız gerekecek iş parçasının Photoshop'unu önceden kesmeniz gerekir.

Örnek olarak, böyle boşlukları hazırladım:

Bu kütükleri Photoshop'ta yaptım, ancak internette benzer resimler var. Gerilmez, ancak hazır seçenekler alamazsınız.

Not: Bu tür boşluklar oluşturma süreciyle ilgileniyorsanız, yorumlarda yazın.

Banner ve komut dosyasının genel bileşimini göz önünde bulundurmak da önemlidir. Banner'ın bir bütün olarak nasıl algılanacağına bağlıdır.

Google Web Designer'da 3B nesne oluşturma.

Öyleyse, son makaleyle analoji ile editörü çalıştırırken, yeni bir proje oluşturun.

3D efekt, bir kompozit görüntüyü ifade eder, yani istenen projeksiyonda bulunan birkaç parçadan oluşan bir görüntü.

Bu çoklu görüntüler, grupta veya DIV'deki yerlerde birleştirilmesi gerekir. Ve böylece doğru olacak. Ancak, yana doğru çalışmam benim için daha uygun.

Adım 1. Bir DIV bloğu oluşturma.

Böylece, boşanma oluşturmak için sol panelde seçim yapın "Etiket aracı (D) ".

Bir tanımlayıcı atadığınızdan emin olun. Ve bölümü kullanarak boyutları pon "Özellikleri" sağ bölmede.

Şimdi bloğu vurgulamanız gerekir. Bunu sol bölmede yapmak için "Seçim aracı (V) " Ve DIV bloğunun çerçevesindeki sol fare düğmesine çift tıklatın. Renginin kırmızı üzerindeki yerini alır.

Adım 2. Görüntüleri kilitleme.

Ve şimdi çoğu özenli işlem başlıyor. Tek bir görüntünün tüm öğelerini ayarlamanız gerekir.

Emrinde aşağıdaki öğeler var:

- Üst taraf.

- taraf (üç ayrı bölümden oluşur).

Başlamak için, görüntünün döner (arka) tarafını yerleştiririz ve merkezde ve afişin üst kenarında hizalıyoruz.

Aynı şekilde ön tarafı ekleyin. Z ekseni boyunca hizalayın ve kaydırın.

4px (piksel) tarafının genişliği olduğundan, z ekseni boyunca 2px ve -2px boyunca ön ve arka tarafını değiştirdim. Görüntüler arasındaki boşluğu ne sağlar.

Not: Tam yer değiştirme rakamları ekran görüntülerindedir.

Sonra, tüm parçaları ayrı ayrı ekleyin. Kolaylık için araçları kullanın "3.D Çalışma Alanının Döndürme " ve "Ölçek". Tüm detayların olduğundan emin olmanıza yardımcı olacaklar.

Başlamak için, öneriyorum, bir yandan tüm görüntüleri oluşturur ve ardından bunları kopyalayın ve diğer taraftaki ayna projeksiyonuna yerleştirir.

Bir sonraki adım sol üst köşeyi oluşturmaktır.

Şimdi tarafın orta kısmı.

Ve sol taraftaki alt köşe.

Yanın tüm unsurları, Y ekseni 90 0'a kadar mutlaka hizalamalıdır.

Artık istediğiniz katmanı kopyalamanız ve tekrar yapıştırmanız gerekir, konum parametrelerinin yeniden adlandırılması ve değiştirilmesi, bu yüzden sağ taraf için elemanları elde ederiz.

Bunu yapmak için, alt paneldeki görüntüyü seçin - CTRL + C tuş kombinasyonuna basın ve Ctrl + V çoğaltmasını takın.

Alan tarafı ile yukarıdan aşağıya, ancak sadece sağ için aynı şekilde başlayalım.

Sağ üst kapak.

Resimde görünmediği için alt kısmı yapmadım.

En büyük iş tamamlandı. Şimdi animasyonu ayarlamaya devam edebilirsiniz. Görsel bir gösteri olarak, görüntü rotasyonunu yapın.

Google Web Designer'da bir rotasyon etkisi oluşturma.

Her şeyden önce, görüntünün tüm unsurları olan DIV bloğundan çıkmanız gerekir. Yani, belirli görüntülerle bloğun içinde çalıştık ve şimdi DIV'yi sürerek aynı anda tüm görüntülerle çalışmanız gerekecek.

Başlamak için alt paneldeki DIV düğmesine basın.

Yani, sağ fare düğmesini tıklatarak zamanın dağ evinde, iki ana kare oluşturun. Böyle çalışmalı:

Kaynak çerçevenin Y ölçeğinde konumu -90 0 olarak ayarlanmıştır.

İlk anahtar çerçevesi (skordaki ikinci) Y ÖRDÜ YAKIYOR 0 0.

İkinci Anahtar Çerçevesi (Üçüncü Hesap) Y ÖLÇEDE YÜZEYE 90 0.

Her şey kontrol olabilir. Bunu yapmak için düğmeye tıklayın Oyna..

Doğru, resmimiz sadece bir dönüş yapacak. Görüntünün sürekli dönmesi veya birkaç devir yapması için, döngüsel parametreleri yapılandırmanız gerekir.

Google Web Designer'da döngüsellik ayarlayın.

Programda, birkaç döngüsel seçenek (tekrarlama) yapılandırabilirsiniz. Böylece tüm banner öğeleri veya her öğe için tekrarın ayrı ayrı yapılandırabilirsiniz.

Ayrıca, döngüsellik, tekrarların sayısı ile sınırlandırılabilir veya sonsuz hale getirilebilir.

Alt panelde, her bir elemanın yanındaki semboller var. "Kale", "Göz", "Ters Ok".

Yani, döngüselliği ayarlamak için sembolüne tıklamanız gerekir. "Ters ok". Ve sınırlı sayıda tekrarlama veya sonsuz bir seçenek seçin.

Sonsuz animasyon tekrarı seçtim. Gelecekte yapılandırmak istediğim gibi "Etkinlikler" Böylece, fare imleci uçurulduğunda, dönme durdurulur ve imleç çıkarıldıktan sonra devam eder.

Fare imlecini afişin üzerine getirirken dönmeyi durdurun.

Öncelikle ilk anahtar çerçevesindeki (skorda ikinci), bir kısayol kurun. Bunu yapmak için, çerçevenin üzerinde, fare düğmesini sağ tıklatın ve menü öğesini seçin. "Etiket ekle". Kısayolun adını girin ve Enter tuşunu tıklayın.

Ve bir sonraki adımda, alıcı olarak seçin « Sayfa 1. Orada başka bir seçenek olmayacak.

Ve son adım, ilk aşamada oluşturan bir etiket seçin.

Olayları kaydedin ve kontrol edin. Afiş rotasyonu, farenin imlecini, etiketin yapıldığı çerçevede değiştirdiğinizde durur.

Fare imleci yol açtıktan sonra dönmeyi yenilemek.

Döndürmenin devam etmesi için, imleç kadranın yanına, başka bir olayı yapılandırın.

Sadece iki farkla aynı şekilde yapılandırılmıştır.

Bir olay seçildiği gibi "Fare"— « mouseout ».

Etkinlik - fare çöküşü

Ve bir eylem olarak "Zaman çizelgesi" — « togglePlay ».

Eylem - Devam

İşte 3D efektli bannumuz için hazır. Ve istediğiniz gibi farklı efektler bulabilirsiniz.

Sadece fare tıklaması yapmayı unutmayın ve bağlantıyı açın. Banner, yarattığı güzellik uğruna değil, çünkü öyle.

Başlangıçta, bu işlem karmaşık görünebilir, ancak birkaç afiş yaparak, görünmeyeceksiniz.

Bugün her şeyim var dostum. Hepinize başarılar diliyorum, yeni makaleler ve video öğreticilerdeki toplantılara yorumunuzu bekliyorum.

Saygılarımla, Maxim Zaitsev.

Banner HTML5. - Keyfi HTML içeriğini veya resmi gösteren banner. HTML kodu olağan olabilir HTML sayfası stilleri ve komut dosyaları ile. Iframe'ye yerleştirilir ve sınırlı erişim Site içeriğine.

"Banner HTML5" şablonunu kullanarak, iki şekilde bir banner eklenebilir:
1. Görüntüyü yalnızca hazırlayın. Banner parametrelerine giden bağlantının varlığı, görüntü kabiliyetini ayarlar.
2. Talimatlardaki Editör'de HTML Yaratıcı hazırlayın: veya.
Banner'a bir HTML kodu ve resim eklenirse, HTML kodu gösterilecektir.

AdFox'a eklenirken ayarlanabilir parametreler:
- genişlik, afiş yüksekliği.
- Bir afiş ile bir kap için kendi CSS stilleri.

HTML Yaratıcı Geliştirme

1. S'yi okuyun. hTML kod gereksinimleri

• İzin verilen maksimum HTML dosya boyutu 65.000 bayttır.
• Javascript ve CSS, Banner'ın HTML kodlayıcısının içine yerleştirilmesi tercih edilir. Son HTML kodu izin verilen maksimum boyutu aşıyorsa, JavaScript ve CSS yaparak kodu azaltmak gerekir. ayrı dosyalar:
  - JS'yi kurtarın ve cSS Kodu Extension.js veya.css'li ayrı dosyalarda;
  - yol dosyaları 300kb'yi geçmemelidir;
  - Dosyaları "Dosyalar" sekmesine indirin reklam kampanyası Ve dosyalara verilen bağlantılar HTML koduna bağlanır.

  JS ve CSS dosyalarını bağlama örneği:

  HTML kodu, nispi yolların dosyalara kullanılmasına izin vermez.

• Proje, Extension.html ile yalnızca bir dosya içerebilir.
• Projedeki izin verilen maksimum dosya sayısı 50;
• Projede izin verilen dosya türleri: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Her dosyanın maksimum boyutu (ayrıca arşivin içindeki dosyalar için de geçerlidir):
  - 300kb;
  - Video dosyaları için 1 MB.
• Dosya adları, yalnızca İngilizce alfabenin numaralarını veya harflerini, kapatıcı sembolü içermelidir. Rus mektupları dosyası, boşluklar, tırnak ve özel karakterler adında kullanamaz;
• Değişkenler ve nesnelerin isimlerinde, Rus harflerini kullanmak imkansızdır.
  İstisna sadece afiş üzerindeki metindir.
• Biçim hazır proje - zip. Arşiv.

Görüntüler için Gereksinimler

Fotoğrafları kullanın yüksek çözünürlükBu, afişin indirme hızını azaltmasına rağmen, mobil cihazdaki afişin kalitesini büyük ölçüde iyileştirir.

SVG resimlerini kullanabilirsiniz. Onlar vektör ve bu nedenle tüm cihazlarda - mobil ve dexte üzerinde daha iyi görüneceklerdir. Ayrıca küçük bir dosya boyutu var ve animasyonla birlikte olabilir.

İzin verilen görüntü formatları: PNG, GIF, JPG, SVG.
Bir dosyanın maksimum ağırlığı: 300KB.

2. HTML reklamını geliştireceğiniz editörü seçin ve uygun bağlantıya tıklayın. Talimatlara göre HTML yaratıcılığıyla bir arşiv hazırlayın:

Adobe Animate CC Editör - Bir Düğme Banner

Adobe Animate CC Editör - Birkaç Düğme Banner

1. Birkaç düğme ile bir banner için bir şablon indirin

2. Adobe Animate'de bir HTML5 Canvas Projesi oluşturun (veya mevcut olanı açın)

3. Düğmeler (düğmeler) eklerken veya sahneye yatırırken, onları ayarlamak önemlidir. Örnek isim.Böylece istediğiniz düğmelere bir tıklama ekleyebilirsiniz. İsimleri kullanmanızı öneririz button1 - Button9..

Ayrıca bakınız:

Bir düğme ekleme ve örnek adı atama talimatları

Ana sahnede düğme

1. Sahnede bazı nesneler oluşturun, örneğin dikdörtgen aracı kullanarak.
Ardından bağlam menüsünde, "Sembol'e Dönüştür" seçeneğini seçin.

2. Görünen iletişim kutusunda, Türü'nü seçin: Düğme, Adı değişmeden bırakılabilir, Tamam'ı tıklatın.

3. Çalışmak için bu düğme örneği adını atayın.

4. Kodu bu düğme için eylemler halinde itin:

Window.buttons.Push (// Düğmeleri virgül içinden geçirin, bunu bu BU BU BU. BTTON1, düğmeler için yerin ilk başında);

İç içe düğme

1. Düğmenin başka bir sembolün içinde, örneğin film klibi içinde olduğunu varsayalım.
Bu örnekte, bu film klibi örnek adı "Adı" ile belirtilir.

2. Tarafından Çift tıklama İsminin içine git, yuvalanmış bir düğme olacak.

3. Eylemlerde belirtilirken, böyle bir düğmeye giden yol, bundan sonra nesnenin bir örnek adını eklemeniz gerekecektir, burada gömülü:

Window.buttons.Push (// virgül içindeki düğmeleri lavabo, bunu bu.name.button1 düğmelerin için düğmenin sonuna kadar ekleyerek);

Şeffaf düğmeler oluşturma talimatları

1. İstediğiniz öğeyi vurgulayın ve sembolüne dönüştürün.

2. Adı ve pirzola türünü belirtin: düğme

3. Sembole çift tıklama kullanarak, git:

4. Keyframe ekini isabet çerçevesine yap

5. İçeriğini yukarı, aşağı, aşağı kaldırın

6. Şeffaf Düğme Hazır:

4. Projeye projeye eylem ekleyin (butonlar için kod ekleyeceğiz)

5. Kod yazmak için kodu açın

Window.buttons.Push (// düğmeleri virgül içinden, başlangıçtaki düğmenin sonunu ekleyerek); Setadfox ();

Düğme ana sahnedeyseniz, örneğin sonra hemen örnek adını ekleyin, örneğin

This.button1

Düğme sahnenin içinde ise, daha sonra bu ilk derece adı sahnesini emdikten sonra ve sonra örnek adı düğmeleri:

This.scene_instance_name.button2.

Eylemler katmanındaki son kod örneği:

Window.buttons.push (// bir virgül aracılığıyla düğmeleri, bunu ekleyerek bunu bu.Button1, this.scene_instance_name.button2 // düğmeler için yerin sonu); Setadfox ();

7. Kod satırındaki ilk düğme, ilk bağlantıyı ADFOX, ikincisi - ikinci ve benzeri arayacaktır.

HTML yaratıcılığıyla birlikte, AdFox'a bir afiş, düğmelerin bileşeni ve referans numaraları hakkında bilgi eklemek için yöneticiyi gönderin.

8. Yayınlama ayarlarını açın ve şablonu ilk öğeden bağlayın ve istediğiniz dizini seçerek projeyi yayınlayın.

9. Projeyi yayınladıktan sonra, Format.zip'te arşivleyin. Yaratıcınız AdFox Banner'a indirmeye hazır.

Google Web Designer Editor

Bu afişin kodu, editörde reklam oluştururken bir temel olarak alınabilir.

Şablon betiği içerir adfox_html5.js. ve geçişlerin ve sayma olaylarının doğru çalışması için parametrelerin ayarlanması:
% Referans%,% user1%,% eventn%, burada N, 1 ila 30 arasında bir olay numarasıdır.

2. İşleme'yi tıklayın.

Tüm olaylar "Olaylar" sekmesinden belirli animasyon öğelerine atanır.

İşlemleri çağırmak için etkileşimli bir alan bileşeni kullanılır.
Ekleyin ve etkinliği seçin Etkileşimli alan → Dokunma / presleme (veya "TAP ALAN\u003e İngilizce sürümünde" TOPLAY\u003e TIKLAYIN ").

Sekmesinde " Kendi kodu"Clique işlev çağrısını belirtin.

2.1 Bir geçiş düğmesi kullanılıyorsa:

Callclick ();

2.2 Geçiş düğmeleri birkaç ise:

Callclick (n);

nerede n.

2.3 Bir animasyondan geçiş olmadan bir olayı çağırmanız gerekirse, aşağıdaki kodu kullanın:

Callevent (n);

nerede n. - Olay numarası neden olacak.

Çekme (kauçuk) afişinin uygulanmasının özeti.

Böylece afiş, yerde bulunacağı kabın genişliğinde, panelde Özellikleri Konum ve boyutlar için, piksel yerine yüzdeyi belirtin.

Ayrıca seçenekleri kullanın "Konteynırda Hizala" ve "Lastik Düzeni" üzerinde üst panel Araçlar.
Herhangi bir tesviye aletini kullanmadan önce "lastik düzeni" etkinleştirirseniz, sonra ana kabın boyutunu değiştirirken, tüm öğeler birbirine eşit olacak ve kabın boyutuna göre olacaktır.
Bu durumda, eşzamanlı olarak elementlerin nispi boyutlarını yüzde ve mutlak - piksel olarak kullanabilirsiniz.

4. Projenin yayınlanması.

AdFox'ta bir afiş eklerken, yöneticinin düğmelerin ve olay numaralarının uyumunu bilmesi gerekir. Her Etkinlik Yöneticisi, değişkeni kullanarak Anahtar için kendi bağlantısını yazar, daha sonra banner koduna aktarılır.

Projeyi yayınladıktan sonra, biçiminde arşivleyin .zip.. Yaratıcınız AdFox Banner'a indirmeye hazır.

Diğer Editörler

1. Afişdeki Tıklamaları Sayma

ADFOX'teki banner için, tıklamalarla ilgili istatistikler, etiketteki HTML kodunda ve HREF niteliğinin bir değişkeni kaydetmesi için gereklidir:

% banner.Reference_USER1%

Ayrıca bağlantılar için, öznitelik değerindeki% banner.Target değişkeninden hedef niteliği kullanın.
Özellik eksikse, bağlantı iframe içinde açılır, yani ilan edilen site banner sahasında açılır.

Bir afiş üzerinde tıklamaları saymak için bir HTML kodunun örneği:

Site Reklamveren

Mobil uygulamalara yerleştirilecek olan pankartların HTML kodunda, tıklamaları hesaba katacak makroyu kullanın:% - reeference%@%banner.user1%

2. Banner'teki birden fazla bağlantıyla tıklamaları sayma

Bannerin'in giden geçiş için birkaç bağlantısı olduğunu varsayalım. farklı sayfalar Reklam Site ve her biri için geçiş sayısını almanız gerekir.

İlk Bağlantı İkinci Bağlantı

HREF özniteliğinin değerini değişkenlere değiştirin %%Quest.Reference%@%banner.eventn%N'nin yerine, 1 ila 28 arasında bir olay numarası olmalıdır.
Örneğin:

İlk Bağlantı İkinci Bağlantı

Referanslara ve değişkenlere uygunluk, AdFox'ta bir afiş ekleyen yöneticiye muhbirdir. Bir afiş eklerken, "Etkinlikler" sekmesindeki ilk bağlantıyı ve 2 - İkinci bağlantı olayında ilk bağlantıyı belirtmeniz gerekir.

AdFox'ta bir afiş ekleme

AdFox'ta bir afiş eklemek için istediğiniz afiş türünü ve şablonunu seçin. "Banner HTML5".

Afiş parametrelerini belirtin:

HTML5 Creative ile Arşiv - Download.zip proje ile arşiv, alan "HTML5 Creative Code" Boş kalmalıdır (içerikle doldurulacaktır. Bir afiş ekledikten sonra HTML dosyaları dosyaları).

Html5 yaratıcı kod - Zip arşivini hazırlanan proje ile indirin HTML editörleri Veya HTML kodunu yerleştirin.

Afişde birkaç bağlantı varsa, onları sekmeye ekleyin. Etkinlikler Geçiş URL alanında banner.
Referans numaralarına ve etkinliklere uygunluk Yaratıcı HTML geliştiricilerini belirtin.

Yıkama pikseline bağlantı - Varsayılan piksel adfox //banners.adfox.ru/transparent.gif., gerekirse, gösterilerin kayıtlarını saklayın. Üçüncü taraf sistemiAdFox pikselini çıkarın ve başka bir bağlantı belirtin.

Yaratıcı Genişlik (PX veya%) - Afişin genişliğini belirtin.

Yaratıcı Yükseklik (PX veya%) - Afişin yüksekliğini belirtin.

Resim - Görüntüyü yükleyin.
Yaratıcı Şov Koşulları:
- HTML kodu ve resim - HTML kodu görüntülenecektir.
- Görüntü eklendi - Görüntü gösterilecektir.
- HTML kodu eklendi - HTML kodu gösterilecektir.

Banner Konteyner Sınıfı Özniteliği Adı - Bir afiş ile sınıf özniteliği konteyneri için adı (veya boşluk yoluyla birkaç isim) belirtin.

SAFEFRAME kullanın (evet | Hayır) - SafeFrame, katı bir API'li özel bir iFrame'ye reklam veren bir teknolojidir. SafeFrame, içine çekilen, veri toplayan ve SafeFrame dışındaki sayfanın geri kalanıyla etkileşime giren reklam vermez.
evet - SafeFrame kullanımını etkinleştirin ve Web sayfasına erişimi devre dışı bırakın;
hayır - SafeFrame dahil etmeyin. Banner kodunun web sayfasına erişimi var.

Afiş Bloğu İçin Stiller - Bir satırlı bir banner konteyner için keyfi stiller. Stiline ek olarak: ekran. Örneğin, "sınır: 1px katı kırmızı;". NEVALID değerleri tarayıcı tarafından atılacak.

Banner (Eng. Banner - bayrak, şeffaflık) - Basındaki reklam modülüne benzer bir reklam doğasının grafik görüntüsü. Hem statik bir görüntü hem de hatta metin olabilir ve animasyonlu elemanlar (video ve etkileşimli nesnelere kadar) içerebilir. Kural olarak, reklamverenin veya bir sayfanın sitesine bir köprü içerebilir. daha fazla bilgi için. Afişin görevleri aşağıdaki gibidir. İlk önce mal satmak. Yani - çekmek Ziyaretçinin dikkati faiz mal veya hizmet tarafından ilan edilen potansiyel müşteri, siteye geçişe itmek ve indüklemek (Eylem çağrısı). CTA'dır ve reklamın nihai amacıdır. Ve ikincisi, afişin görevi, amaç veya markalı reklamcılıktır. marka Bilincini Geliştirin Ve marka hakkında olumlu bir görüntü yapın.

Sitede popüler reklamlar:

• Grafik - İnternette reklamcılık için basit bir afiş türü. Belli bir boyutun bir görüntüsünden oluşur ve bir reklam kaynağına bir bağlantı içerir.
• Flaş afişi - Animasyon için harika özelliklere sahiptir, vektör ve raster grafiklerin bir kombinasyonunu kullanarak bilgiyi daha iyi aktarmanıza izin verir.
• Html5 afiş - Herhangi bir cihaza ve tarayıcıya uyarlanmış animasyonların kullanımı ve iyi görsel tasarım ile HTML elemanlarının kombinasyonu.

HTML'nin diğer afiş türlerinden ana farkları
Afiş oluşturma yöntemleriyle karşılaştırıldığında, HTML5 teknolojisi, izleyiciyi kaynağa çekmek için birkaç avantaj sağlar:

• Bu formattaki duyurular, ek tarayıcı uzantıları olmadan tüm cihazlarda eşit olarak görüntülenecektir.
  HTML5, kendi içine entegre etmek için daha fazla fırsat sağlar reklam Duyuruları Formlar, düğmeler sosyal ağlar, takvimler, haritalar ve diğer uygulamalar.
• Düşük ağırlık ve daha küçük kaynakların kullanımı, tarayıcıdaki sayfaların indirme hızını etkilemez. Flaş teknolojisi böyle bir sonucu elde etmesine izin vermez.
• Afişlerin HTML5 üzerindeki etkinliğini değerlendirmek için, istatistikleri görüntüleyebilirsiniz. Google Analytics.. Konuklar ve bağlantılardaki geçişler hakkında farklı bilgiler var.

Flaş teknolojilerinin önemli bir dezavantajı, Apple, Mozilla ve Amazon gibi büyük şirketlerin kademeli olarak reddedilmesidir. Flash'ın ortadan kaybolması için ana itici güç Google'dı. İlk olarak, flaş animasyonunu engellediler. Google Chrome.Ve daha sonra Flash reklamlarını, HTML5'i tercih ederek arama reklam hizmetlerinde reddetti.

HTML afiş oluşturmanın yolları
Bir afişin gelişimi ayrı bir sayfanın oluşturulmasıyla başlar ve siteye "iframe" ile gömülüdür. Siteye reklam afişlerini geliştirmek için çeşitli yöntemler vardır, en popülerlere bakacağız.

1. CSS3 ve JavaScript kullanarak bir çerçeve oluşturma
Çerçeve, bağımsız belgeleri belirtilen boyutların alanına yüklemenizi sağlar. Tasarım için stilleri ve komut dosyalarını kullanarak farklı bir HTML kodu olabilir. JavaScript kullanılarak animasyonlar, çizimlerin, grafiklerin ve hatta oyunların geliştirildiği "kanvas" alanından bir afiş de mümkündür. Gelişimi hızlandırmak için, CreateJ'ler gibi üçüncü taraf kütüphanelerini kullanmasına izin verilir.

Faydalar:

• İşlevsellik herhangi bir programla sınırlı değildir, her şeyi gerçekleştirebilirsiniz.

Dezavantajları:

• Böyle bir işlem oldukça karmaşıktır ve özel düzen becerileri gerektirir.
• Büyük işçilik maliyeti diğer yollar hakkında.

2. Adobe Edge Animate
Adobe bilenler After Effects.Adobe Edge Animate program arayüzü çok tanıdık görünecek. Adobe Edge Animate, HTML5, JavaScript ve CSS3 kullanarak basit animasyonlu içeriği geliştirmeyi amaçlayan daha büyük bir işlevselliğe sahiptir. Program, bu tür formatların .svg, .png, .jpeg, .gif, html olarak desteklemesini destekler; Video ve ses formatlarını destekleyin.

Birkaç kez yüksek kaliteli animasyon oluşturma süresini basitleştiren 30'dan fazla gömülü etkisi vardır:

Faydalar:

• Programı kullanmak için ağdaki birçok video eğitimi.
• Basit işlevsellik, çoğu işlem otomatiktir.
• Program HTML5, JavaScript ve CSS3 bilgisini gerektirmez.
• İşin sonunda, tüm gerekli belgeleri sitedeki afişi barındırmak için alıyoruz. Görüntüler - Grafik Elemanları Banner, Birkaç javascript dosyaları, HTML ve bir format - daha sonra programdaki bir dosyayı düzenlemek için.
• Herkes tarafından desteklenen hazır afiş modern tarayıcılar ve mobil uygulamalarYandex ve Google'daki reklam kampanyalarının tüm teknik gereksinimlerine uygundur.

Dezavantajları:

• Sadece İngilizce olarak arayüz.
• 2015'ten bu yana Adobe, Adobe Edge Animate Project'in geliştirilmesini durdurdu, program o zamandan beri güncellenmedi ve gelişimdeki sınırına ulaştı. Kenar Animate, yaratıcı bulut arşivlerinde indirmek için hala kullanılabilir.

3. Adobe Animate CC
Animate CC, yeniden adlandırılmış bir üründür. Adobe Flash programı. Profesyonel. Son zamanlarda, Flash Technology, kullanıcıların güvenini kaybetti, adı ve birkaç modifikasyonları değiştirmek için gereken program. Özünde, bu aynı flaş programı Profesyonel, ancak dosyaların ek olarak HTML5 ve JavaScript'te kaydedildiği.

Arayüz Flash Professional'a çok benzer, ancak programların olanakları farklıdır.

Faydalar:

• Üç boyutlu grafikler oluşturma yeteneği. Bu animasyon için çerçevenin derinliğini kaldırmanıza olanak sağlayan bir "kamera" aracı var.
• Edge Animate Animate CC Programının aksine büyük seçim Vektör fırçalar ve raster grafikleriyle çalışma yeteneği.
• Program nispeten yenidir, bu nedenle Adobe projeyi aktif olarak geliştirir, güncellemeleri serbest bırakır ve Animate CC'yi geliştirir.
• Rusça dil versiyonu var.
• Formatlardaki Gelişmiş Dosya Verme Seçenekleri: JavaScript / HTML, JPEG, PNG, OAM, SVG, MOV, GIF. Bir düğmeye basarak, afiş elemanları sprite olarak kaydedilir, böylece afişin önyükleme süresini azaltır.

Dezavantajları:

• Programın yenilik de dezavantajları da alacak. Animate CC'de animasyon dersleri oluşturmak, Adobe Edge Animate gibi değildir. Bu nedenle, bazı fonksiyonların çalışmaları bağımsız olarak çalışılmalıdır, bu da kolay değildir. Program, kendi kendine çalışma için oldukça karmaşıktır, ancak çözebilirsiniz.
• Bazı fonksiyonlar, kenar animasyonunda olduğu gibi, bir afiş oluşturma süresini de arttırır.

4. Google Web Tasarımcısı
Google bize memnun ücretsiz editörHTML afişlerini uygulamak için özel olarak tasarlanmıştır. Google Web Designer, ana eğimin AdWords'ü hedef alan reklamları uygulamak için tamamen keskinleştirilmiştir.

Yeni bir dosya oluşturmanın penceresine bakarsak, reklam şablonlarının boyutunun zaten programa yerleştirildiğini not ediyoruz.

Faydalar:

• Basit bir arayüz.
• Google'da reklamcılık için şablonların kullanılabilirliği.
• Tamamen ücretsiz program.
• Rus versiyonunun varlığı.
• Koyulmak uyarlanabilir Tasarım Afişler, HTML afişi herhangi bir ekran çözünürlüğünde harika görünecek.

Dezavantajları:

• Google Web Tasarımcısı işlevi, masterpieces animasyonu oluşturmak için oldukça dardır. Program şablonlarla çok sınırlıdır.
• Öğrenme programlarının eksikliği. Google sertifikaları işlevselliği tamamen eğitmek için yeterli değildir.

Yukarıda sunulan tüm yöntemler yeni değil, ancak kanıtlanmışlar. Bu nedenle, oluşturulan HTML afişlerinin çoğu tanıtım bölgesinde yönetileceği bir garanti vardır, çünkü teknik gereksinimleri genel standartlara uygundur.

Html5 afişleri

2 299 ruble.

OVMAK.

Sipariş vermek

Halen, HTML5-Banner, tam teşekküllü animasyonlu afiş reklamcılığın tek güncel formatıdır. Bu evrensel çapraz platform formatı, birkaç kısıtlama ve dezavantajı olan flaş afişlerini değiştirdi.

Böyle bir reddetmenin temel nedenleri aşağıdakilerdir:

• flash teknolojisi, bilgisayar güvenliğinin şikayetlerini biriktirdi ve mobil cihazların işlemci gücünün artması;
• bazı tarayıcılar varsayılan olarak flaş ekranı engellemeye başladı;
• İOS Mobil Cihazlarda (iPhone, iPad), flaş gösterisi üretici tarafından sağlanmadı;
• afiş Flash reklam blokerlerinin popülaritesi;
• sahibi, Adobe tarafından Flash teknolojisini daha fazla desteklemeyi ve geliştirmeyi reddetmek.

Hareketli HTML5 pankartları, akıllı telefonlar, tabletler ve medya TV dahil olmak üzere herhangi bir cihazın ekranında herhangi bir tarayıcıda kısıtlamalar olmadan gösterilebilir. Bu onların çapraz platformu ve çok yönlülüğüdür.

Müşteri için, HTML5 afişlerinin kullanımı, her şeyden önce, izleyicinin kapsamını kaybetmeden genişletir.

HTML5-Banner ne olabilir?

Çok. Sonuçta, bu, kullanıcının dikkatini çeken ve hatta bununla etkileşime giren en gelişmiş formattır (etkileşimli afiş).

Animasyon açısından, böyle bir banner, vektör animasyonunu (ölçeklendirildiğinde kaybetmeden), karakterlerin, fotoğrafların, logoların, grafiklerin ve çizelgelerin animasyonunu, metin ve hatta 3D animasyon gösterebilir. Etkileşimli bakış açısına göre, HTML5 Banner, kullanıcı işlemlerine cevap verebilir ve ek içerik ve özellikler sunar. Medya taşıyıcıları açısından, HTML5 banner video, slaytlar ve ses kayıtları oynayabilir. Uyarlanabilirlik açısından, HTML5-Banner, sayfanın tüm genişliğine uzanabilir, ek panelleri ifşa edebilir veya tüm ekranda açılabilir.

HTML5 afişlerinin ana tiplerini düşünün.

Sabit boyutun animasyonlu HTML5-Banner.
Çoğu reklam ağındaki en popüler format. Gerekli afişlerin genişliği ve yüksekliği, yerleştirmeye kabul edilen listeden seçilir. Bana her zaman en yaygın boyutları söyleyeceğiz.

Çekme HTML5 Banner (Uyarlanabilir, Kauçuk).
Bu, ekranın tüm genişliğini (bazen yükseklik) işgal edebilecek bir banner. (Daha fazla bu yazıda bulunabilir)

Tam ekran HTML5 Banner.
Banner, tüm ekranda açılıyor. Kural olarak, ekran zamanlayıcısını ve Kapat düğmesini içerir. Özellikle mobil cihazlarda görüntülemek için popüler.

Genellikle böyle bir banner, çeşitli yönelimlere ve mobil cihaz izinlerine uyarlanmalıdır.

HTML5-Banner (Raskulop) atma.
İlk olarak, böyle bir afişin (teaser) yalnızca bir başlangıç \u200b\u200bpaneli vardır. Belirli bir algoritmayı (fare veya presleme, zamanlayıcı veya sayfa üzerindeki diğer olaylar) yürütürken, ek gelişmiş bilgi ile başlığın ikinci kısmı açılır.

HTML5 Video Banner.

Reklam platformunun ayarlarına ve gereksinimlerine bağlı olarak, hem bir motor istasyonu ile hem de "oynat" düğmesine bastıktan sonra bir video gösterebilir. Kontrol düğmeleri içerebilir ve sesi çıkarabilir. Video dosyası genellikle görüntülendiğinde harici bir barındırma ve önyüklenebilir durumda bulunur.

Oyunu interaktif afişler.
Basit eylemler yaparak kullanıcıyı oyuna girmeye çağıran afişler.

Bu tür afişler hedef kitlenin dikkatini çeker, bir yaşam ilgisine neden olur, ancak aynı zamanda birkaç kısıtlamaya sahiptir (örneğin, mobil cihazlardaki bir fare işaretleme olayının eksikliği veya ek komut dosyalarının kullanımındaki kısıtlamalar). Bir oyun HTML5 afişi oluşturmak için tasarlandıysanız, size her zaman bu özelliklerden bahsederiz.

Akıllı HTML5-Afişler (Hesap Makineleri).
Kullanıcıyla birlikte çalışmak ve etkileşime girmek için kullanılır, ona hemen bir hesaplama sunar. gerekli parametreler ve belirli bir iç algoritma formülü (örneğin, kredi hesaplaması, ipotek, yapı malzemeleri tüketimi ve diğer karmaşık işlemler).

Düzenlenebilir HTML5 Banner - Bazı durumlarda, müşterinin, geliştiricinin yardımına başvurmadan pankartlardaki değişikliklere derhal katkıda bulunması gerekir (örneğin, sıklıkla fiyatlar, ilgi veya teklifler). Böyle bir görevle başa çıkabiliriz ve gerekli parametreleri doğrudan müşterinin kendiniz yapabileceği afişin HTML koduna ekleyebiliriz. Afiş, harici dosyalar tarafından kullanılan verilerin çıktısına başka bir uygun çözüm sunabilirsiniz.

Harici veri ve API yükleme ile çalışan HTML5-Banner.
Üzerinde şu an Birçok reklam ağı, afişin dolaşımını yasaklamaktadır. dış kaynaklar. Bununla birlikte, afişin böyle bir fırsat sağlayan bir web sitesine gönderilmesi durumunda, bir HTML5 afişi gerekli bilgileri (metin, rakamlar, tırnak) talep edebilir ve bunları belirtilen algoritmaya göre Site API'siyle işleme koyabilir.

3D HTML5 Banner.
Bu tür afişler, sayfada hacimsel görüntü modelleri oluşturarak kullanıcının dikkatini çeker.

HTML5 3D banner, yüzü açılır bir kitap şeklinde veya diğer 3B efektler kullanılarak, afiş çerçeveleri içeren döner bir nesne olarak uygulanabilir.

HTML5 Banner'ın tarif edilen özelliklerin birkaçını içerebileceğini unutmayın. Örneğin, bir video afiş sayfanın tüm genişliğine çizilebilir ve kullanıcı işlemlerine bağlı olarak sayfada üç boyutlu animasyon açılır.

Sitemizde bir HTML5 afiş sipariş etmek istiyorsanız ve yaratıcı fikir çeşitli formatların birleşimini gerektiriyorsa - her zaman uzmanlarımızın gücü altında.

HTML5-Banner - Teknik olarak neyi temsil ediyor?

HTML5 afişini mini bir web sitesi olarak algılamak daha doğrudur. Abartmadan.

Bu afiş formatının adını veren HTML5, web sayfalarını, basitçe konuşmanın, düzenlenmenin dilidir. Ve modern bir site olarak aynı yasalara göre gerçekleşiyor. Div konteynerleri takılı yazı tipleri içerebilir, stilleri CSS. ve JS komut dosyaları. Ana öğe, tuval animasyon kabıdır. Animasyonun kendisi, JAVA script kullanılarak, özellikle animasyon için özel olarak tasarlanmış JS kitaplığı kullanılarak uygulanır.

İçinde ne var? Neden arşivde? Neden bu kadar çok dosya var?

Doğru, çünkü afişin JPG veya GIFKA veya "Flash Drive" dosyası olduğuna alışkın olduk. Ancak yukarıda nasıl yazdığımızı hatırlayın, HTML5-Banner, aslında, mini sitedir. Çeşitli dosyalar içerir ve zip arşivinde bir reklam platformuyla birlikte gelir. Arşivin içinde ana HTML dosyası, Java script dosyaları, kitaplıklar, stil sayfaları ve kullanılan görüntülerdir.

Not. Bazı durumlarda, reklam platformu, kullanılan tüm komut dosyaları ve görüntüleri taban-64 formatında dahil ederek bir dosyayla tüm afişi gerektirebilir. Bu deneyimli bir geliştirici için bir sorun değil. Ancak, böyle bir gereklilik, afişin terimini arttırır ve değişir. Neyse ki, böyle bir gereksinim nadiren görülür.

Bilgisayarımdaki HTML5 afişini nasıl görebilirim?

Çok basit. ZIP arşivini açın ve dosyayı tarayıcınızda HTML dosyasındaki açın.

Doğru HTML5-Banner ne yaptığımı nasıl kontrol edebilirim?

Afiş reklam için oluşturulursa google Hizmetleri, Hizmetinizde, tasarımcının kalitesini kontrol etmek için harika bir araç - on-line HTML5 validatatörü Google'dan. Biz sadece kullanıyoruz: zip arşivinizi bir afiş ile indirin ve kontrol yaprağını kontrol edip etmeyeceğini görün. Hatalar kırmızı simgelerle işaretlenecek. Hayır ise - geliştiriciniz boşuna çalışmadı ve afiş yerleştirmeye hazır Google reklamları. Veya çift tıklayın.

Yandex, Mail.ru, Rambler, Adfox, Adriver ve diğerlerinin reklam ağlarında, sistem sitesine indirdikten sonra, teknik gereksinimleri olan banner ile uyum için de kontrol edilir. Sorun durumunda, moderatörün bir hata açıklaması ile yorum yapabilirsiniz. Bazı siteler müşteri reklam fırsatı sunar Ön izleme Test sayfasında banner.

Bununla birlikte, HTML5-Banner'ın doğru imalatının en iyi garantisi, geliştiricinin tecrübesidir, tanıtım sitelerinin teknik gereksinimleri ve hataları hızlı bir şekilde doğru doğrulama isteğinin bilgisidir.

Java betiğinde animasyonlu bir banner başka bir şey mi?

Kendini karıştırmayın. "Java Script Banner", "Tuval Afiş" - "HTML5-Banner" olarak adlandırılan şey hakkında. Geliştirici aracına bağlı olarak, JS kütüphaneleri veya düzen kuralları değişebilir, ancak Genel Kurul planı aynı kalır.

HTML5 Banner nasıl oluşturulur?

HTML5 animasyonları oluşturmak için tasarımcıların editörleri arasında en popüler - adobe programı Canlandırmak.

Google, kendi geliştirme aracını - Google Web Designer'ı sunar. Avantajları arasında - çok sayıda yerleşik şablonların varlığı ve doğrudan Google'ın reklam hizmetleri için bir banner yayınlama yeteneği: AdWords ve çift tıklama. Eksesteler arasında animasyonun sınırlı özellikleridir.

Bazı tasarımcılar, Amerikan'dan daha fazlası, Editör ve Kütüphane Yeşil Çorap Animasyon platformunu kullanın. Ancak, önemli bir dağıtım alamadık.

Düşünen, gerekli tüm bileşenler açık bir koddur, iyi bir uzman, en basit durumda bile bir HTML5 afiş oluşturabilir metin düzeltici. Ancak, bu yöntem profesyonel animasyon programlarının kullanımı ile karşılaştırıldığında etkili değildir.

HTML5 afiş için teknik gereksinimler.

Gereksinimler endişesi:

• kB'de Toplam Ağırlık HTML5 Banner;
• zIP Arşiv Yapıları, Klasör ve Dosya Sayısı;
• İzin verilen dosya formatlarının listesi;
• uRL bağlantılarının banner (afiş üretici yazılımı) üzerine tıklamasını sağlama yolu;
• dış barındırma için izin verilen JS kütüphanelerinin listesi;
• video ve ses dosyalarının siparişi ve kısıtlamaları;
• Çerçevenin tasarımı, feragatname, frekans ve animasyon çevrimlerinin sayısı, cihaz işlemcisine yükleyin.

Ve bu, geliştiricilerimizi, müşteriye bir HTML5 afişini sağlamak için, bir reklam kampanyasını gecikmeden karşılamaya ve başlamaya hazır hale getirmeleri için geliştirmeniz gereken bir gereksinimlerin tam bir listesi değildir.

Daha önce oluşturulan flash afişlerimle ne yapmalıyım?

Kendinizi görün - En büyük reklam ağları artık Flash Afişlerini Konaklama için kabul etmiyor, Flash bileşenleri tarayıcılarda ve iOS cihazlarında engellendi, işini durdurdu (HTML5'te yalnızca yeterli çevrimiçi Flash Afiş Dönüştürücü).

HTML5'teki otomatik flaş formatı dönüşümü neredeyse imkansızdır - gerekli, aslında, HTML5 editöründe tam bir manuel bir isyancıdır. Böyle bir durumda, doğru çözüm, modern ve evrensel HTML5 formatında yeni bir animasyonlu afiş kümesi oluşturmak için olacaktır.

Peki ya "Gif'ler"?

Herhangi bir GIF animasyonunun seri bir çerçeve seti olduğu ve video dosyalarında olduğu anlaşılmalıdır. GIF dosyası, çerçevelerin hızı ve tekrarların sayısı hakkında bilgi içerebilir. Bu bununla sınırlıdır.

GIF-Banner, vektör grafikleriyle nasıl çalışacağını, programatik olarak bir animasyon oluşturmayı, animasyonlu bir HTML5 afişinin başa çıktığı, istediğiniz boyuta uyum sağlar.

Bu reklamveren için ne anlama geliyor?

Aşırı kilo desteği. Evet, afişler bile tabidir. Tüm ana reklam platformları, panobaytlarda afişin ağırlığında sert kısıtlamalar sergiler.

GIF-Banner, birkaç statik çerçeveyi görüntülemek için iyidir, küçük bir metin, düğme veya fotoğraf değişimlerinin küçük bir animasyonu ile mümkündür. Bu durumda, GIF banner'ın toplam ağırlığı, tanıtım sitelerinin gereksinimlerinin ötesine geçmez.

Animasyon, birkaç yüz karenin değişikliğini etkilerse, GIF-Banner'ın ağırlığı, İngilizce olarak ifade edildiklerinde, "dramatik" olarak ifade edilir. Birkaç megabayt ağırlığında 20 saniyelik gifler - olağan şey. Ve son derece sevmiyor reklam ağlarıKim haklı olarak, banner'ı görüntülemek için kullanıcıyı ne kadar trafiğin indirmesi için endişelendirir.

Öyleyse, birçok animasyon efekti, karikatür animasyon, etkileşimli, adaptif veya video banner ile bir banner gerekirse - seçim HTML5 afişin sırası lehine yapılır.