avem un banner și se citesc clicuri din acesta. Pentru alte bannere, alte cerințe tehnice și acolo clicul se citește diferit, acum ne uităm la un exemplu concret.

Container cu banner

În alte lecții, vă voi spune cum să creați un banner la 100% din lățimea ecranului cu animație și cum să creați și să pregătiți un aspect pentru aspectul site-ului web conform tuturor regulilor.

Fișiere de lecție:

1. Bannere gata făcute pentru ecran complet: faceți clic

Prieteni, salut tuturor. Astăzi vom continua să creăm bannere în program Google Web Designer în format HTML5, cu efect 3D.

Și acest lucru este de înțeles, bannerele create pe html5 și css3 sunt afișate pe orice ecran, atât pe un computer, televizoare, cât și pe dispozitive mobile. Ce nu se poate spune despre flash-bannerele.

În plus, aceste bannere pot fi folosite suficient și bannerul va arăta grozav pe orice ecran.

Și dat fiind faptul că dispozitivele mobile sunt din ce în ce mai folosite pentru a vizualiza resursele de pe Internet, acest lucru este foarte important.

Principalul și plasarea lui pe site, am povestit deja în ultimul articol. Așa că astăzi voi acorda atenție creării unui efect 3D și setărilor de ciclism (reluare). Și luați în considerare, de asemenea, câteva setări pentru „evenimente”.

Este destul de dificil să descrii în detaliu întregul proces, așa că îți aduc în atenție un tutorial video. Deci va fi mult mai ușor să stăpânești materialul. Și descărcați și arhiva cu proiectul bannerului meu, ca exemplu bun.

Se pregătește pentru a crea un banner cu efect 3D.

Tipul de banner în forma finită depinde în cele din urmă de pregătire. Editorul Google Web Designer vă permite să creați efecte 3D realiste și toate acestea vor fi scrise cod html, trebuie doar să asamblați totul corect în editorul vizual.

Pentru a crea un efect 3D de înaltă calitate, trebuie mai întâi să tăiați spații libere în Photoshop, care ulterior vor trebui să fie conectate în Google Web Designer.

De exemplu, am pregătit următoarele spații libere:

Am făcut aceste spații libere în Photoshop, dar există multe imagini similare pe Internet. Nu vă puteți strecura, dar luați opțiuni gata făcute.

Notă: Dacă sunteți interesat de procesul de creare a unor astfel de spații libere, scrieți despre asta în comentarii.

De asemenea, este important să ne gândim la compoziția generală a bannerului și a scenariului. Depinde de modul în care va fi perceput bannerul în general.

Crearea unui obiect 3D în Google Web Designer.

Deci, prin analogie cu ultimul articol, lansați editorul, creați un nou proiect.

Efectul 3D presupune o imagine compozită, adică o imagine formată din mai multe piese situate în proiecția dorită.

Aceste imagini multiple trebuie să fie combinate fie într-un grup, fie plasate într-un bloc DIV. Și așa va fi corect. Dar, este mai convenabil pentru mine să lucrez cu partea DIV.

Pasul 1: Creați un bloc DIV.

Deci, pentru a crea un bloc DIV, în panoul din stânga, selectați „Instrumentul de etichetare (D)".

Asigurați-vă că atribuiți un ID. Și ajustați dimensiunile cu secțiunea „Proprietăți”în panoul din dreapta.

Acum trebuie să selectăm blocul. Pentru a face acest lucru, în panoul din stânga, selectați „instrument de selecție (V)"și faceți dublu clic pe butonul stâng al mouse-ului pe cadrul blocului DIV. Se va schimba culoarea în roșu.

Pasul 2 Aliniați imaginile.

Și acum începe cel mai minuțios proces. Trebuie să expuneți toate elementele unei singure imagini.

Am următoarele articole la dispoziție:

- Partea superioară.

- Partea laterală (constă din trei părți separate).

Mai întâi, plasați partea din spate a imaginii și aliniați-o cu marginea centrală și superioară a bannerului.

În același mod, adăugați partea din față. Aliniați și decalați de-a lungul axei Z.

Deoarece lățimea laturii este de 4px (pixel), am deplasat părțile din față și din spate de-a lungul axei Z cu 2px și -2px. Acest lucru va oferi un decalaj între imagini.

Notă: vedeți capturile de ecran pentru numerele exacte de compensare.

Apoi, adăugați partea laterală, toate părțile separat. Pentru o amplasare ușoară, utilizați instrumentele „3D rotație spațiu de lucru"și "Scară". Ele vă vor ajuta să vă potriviți cu exactitate toate detaliile.

Pentru început, îmi propun să construim toate imaginile pe de o parte, apoi să le copiam și să le plasăm într-o proiecție în oglindă pe de altă parte.

Următorul pas este construirea colțului din stânga sus.

Acum partea centrală a lateralului.

Și colțul de jos din partea stângă.

Asigurați-vă că aliniați toate elementele laterale de-a lungul axei Y cu 90 0.

Acum trebuie să copiem stratul dorit și să-l lipim din nou, redenumind și schimbând parametrii de locație, astfel încât să obținem elementele pentru partea dreaptă.

Pentru a face acest lucru, selectați imaginea din panoul de jos - apăsați combinația de taste CTRL + C (copiere) și lipiți duplicatul CTRL + V.

Să începem la fel ca partea câmpului de sus în jos, dar numai pentru dreapta.

Capac din dreapta sus.

Nu am făcut partea inferioară, deoarece nu se vede în imagine.

Cea mai grea muncă s-a terminat. Acum putem începe configurarea animației. Ca o demonstrație vizuală, să rotim imaginea.

Crearea unui efect de rotație în Google Web Designer.

Primul pas este să ieși din blocul DIV, care conține toate elementele imaginii. Adică am lucrat în interiorul blocului cu imagini specifice, iar acum va trebui să lucrăm cu toate imaginile în același timp, controlând blocul DIV.

Pentru a începe, faceți clic pe butonul DIV din bara de jos.

Deci, pe scara de timp, făcând clic pe butonul din dreapta al mouse-ului, creați două cadre cheie. Ar trebui să iasă așa:

Locația cadrului sursă pe scara Y este setată la -90 0 .

Primul cadru cheie (al doilea la rând) este setat pe scara Y la 0 0 .

Al doilea cadru cheie (al treilea) este setat pe scara Y la 90 0 .

Puteți verifica rezultatul. Pentru a face acest lucru, faceți clic pe butonul Joaca.

Adevărat, imaginea noastră va face o singură revoluție. Pentru ca imaginea să se rotească constant sau să facă mai multe rotații, trebuie să ajustați parametrii de ciclism.

Configurarea ciclismului în Google Web Designer.

În program, puteți configura mai multe opțiuni pentru ciclism (repetări). Deci, puteți configura repetarea pentru toate elementele bannerului sau pentru fiecare element separat.

De asemenea, ciclicitatea poate fi limitată de numărul de repetări sau poate fi făcută infinită.

Pe panoul de jos, lângă fiecare element, există simboluri „Blocare”, „Ochi”, „Săgeată inversă”.

Deci, pentru a seta ciclul, trebuie să faceți clic pe simbol „Săgeată inversă”.Și alegeți fie un număr limitat de repetări, fie o opțiune nesfârșită.

Am ales animația în buclă infinită. Din moment ce vreau să înființez „Evoluții”în așa fel încât rotația să fie oprită când cursorul mouse-ului este plasat și va continua după ce cursorul este îndepărtat.

Opriți rotația când treceți mouse-ul peste banner.

În primul rând, pe primul cadru cheie (al doilea la rând), setăm eticheta. Pentru a face acest lucru, apăsați butonul drept al mouse-ului peste cadru și selectați elementul de meniu „Adăugați etichetă”. Introduceți un nume de etichetă și apăsați tasta Enter.

Și în pasul următor, alegeți ca receptor « Pagina 1". Nu vor exista alte opțiuni.

Iar pasul final, alegeți eticheta pe care ați creat-o la etapa inițială.

Salvați evenimente și verificați. Rotirea bannerului se va opri atunci când mutați cursorul mouse-ului peste cadrul în care a fost făcută eticheta.

Reluarea rotației după mutarea cursorului mouse-ului.

Pentru ca rotația să continue după mutarea cursorului în lateral, configurați un alt eveniment.

Este configurat similar celui precedent, cu doar două diferențe.

Evenimentul este selectat "Mouse"— « mouse out".

Eveniment - mutați mouse-ul

Dar ca acțiune "Cronologie" — « comutare".

Acțiune - Continuați

Așadar, bannerul nostru cu efect 3D este gata. Și puteți veni cu oricâte efecte diferite doriți.

Doar nu uitați să faceți un eveniment prin clic de mouse și deschiderea linkului. Bannerul nu a fost creat de dragul frumuseții, până la urmă.

Inițial, acest proces poate părea complicat, dar după ce ați făcut câteva bannere, nu vi se va mai părea așa.

Asta e tot pentru azi, prieteni. Vă doresc tuturor succes, aștept comentariile voastre și ne vedem în articole noi și tutoriale video.

Cu stimă, Maxim Zaitsev.

Banner HTML5- un banner care afișează conținut HTML arbitrar sau o imagine. Codul HTML poate fi simplu Pagina HTML cu stiluri și scenarii. Este plasat într-un iframe și are acces limitat la conținutul site-ului.

Folosind șablonul „Banner HTML5”, puteți adăuga un banner în două moduri:
1. prin pregătirea doar a imaginii. Prezența unui link de acces în parametrii bannerului controlează posibilitatea de a face clic pe imagine.
2. După ce ați pregătit o reclamă HTML în editor, conform instrucțiunilor: sau .
Dacă în banner sunt adăugate atât codul HTML, cât și o imagine, atunci codul HTML va fi afișat.

Parametri configurați la adăugarea la ADFOX:
- Lățimea, înălțimea bannerului.
- Stiluri css proprii pentru containerul banner.

Dezvoltare creativă HTML

1. Familiarizați-vă cu Cerințe pentru codul HTML

• Dimensiunea maximă permisă pentru un fișier HTML este de 65.000 de octeți.
• JavaScript și CSS ar trebui să fie plasate de preferință în codul HTML al bannerului. Dacă codul HTML rezultat depășește dimensiunea maximă permisă, atunci trebuie să reduceți codul mutând JavaScript și CSS în fisiere individuale:
  - salvați js și cod cssîn fișiere separate cu extensia .js sau .css;
  - fișierele în funcție de greutate nu trebuie să depășească 300Kb;
  - încărcați fișiere în fila „Fișiere”. campanie publicitarași conectați legăturile rezultate la fișierele din codul HTML.

  Un exemplu de conectare a fișierelor js și css:

  Căile de fișiere relative nu sunt permise în codul HTML.

• Nu poate exista decât un fișier .html per proiect.
• Numărul maxim admis de fișiere într-un proiect este de 50;
• Tipuri de fișiere permise în proiect: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Dimensiunea maximă a fiecărui fișier (valabil și pentru fișierele din arhivă):
  - 300Kb;
  - 1 Mb pentru fișiere video.
• Numele fișierelor trebuie să conțină numai numere sau litere din alfabetul englez, liniuțe de subliniere. Nu este permisă utilizarea de litere rusești, spații, ghilimele și caractere speciale în numele fișierului;
• Literele rusești nu pot fi folosite în numele variabilelor și obiectelor.
  Singura excepție este textul de pe banner.
• Format proiect finalizat - fermoar Arhiva.

Cerințe de imagine

Utilizați Imagini înaltă definiție, acest lucru va îmbunătăți drastic calitatea bannerului pe un dispozitiv mobil, deși va încetini viteza de descărcare a bannerului.

Puteți utiliza imagini SVG. Sunt vectori, ceea ce înseamnă că vor arăta mai bine pe toate dispozitivele - mobile și desktop. De asemenea, au o dimensiune mică a fișierului și pot fi animate.

Formate de imagine acceptabile: png, gif, jpg, svg.
Greutatea maximă a unui fișier: 300Kb.

2. Selectați editorul în care veți dezvolta reclamă HTML și faceți clic pe linkul corespunzător. Pregătiți o arhivă cu o reclamă HTML conform instrucțiunilor:

Adobe Animate CC Editor - Banner cu un singur buton

Adobe Animate CC Editor - Banner cu mai multe butoane

1. Descărcați șablonul de banner cu mai multe butoane

2. Creați un proiect HTML5 Canvas în Adobe Animate (sau deschideți unul existent)

3. Când adăugați butoane (butoane) sau clipuri imbricate (clipuri video) la scenă, este important să le setați numele instanței astfel încât să puteți adăuga ulterior un clic la butoanele dorite. Vă recomandăm să folosiți nume butonul 1 - butonul 9.

Vezi si:

Instrucțiuni pentru adăugarea unui buton și atribuirea unui nume de instanță

Buton pe scena principală

1. Creați un obiect pe scenă, de exemplu, folosind Instrumentul dreptunghi.
Apoi selectați-l și meniul contextual selectați „Convertire în simbol...”

2. În caseta de dialog care apare, selectați Tip: Buton, Numele poate fi lăsat neschimbat, faceți clic pe Ok.

3. Dați acestui buton un nume de instanță pentru ca clicul să funcționeze.

4. Scrieți următorul cod în Acțiuni pentru acest buton:

Window.buttons.push(//Căi separate prin virgulă pentru butoane, adăugând acest lucru this.button1 //Sfârșitul spațiului pentru butoane);

buton imbricat

1. Să presupunem că butonul se află în interiorul unui alt simbol, ca în interiorul unui clip de film.
În acest exemplu, acestui clip de film i se dă un nume de instanță „nume”

2. De dublu click intrați în interiorul numelui, va fi un buton imbricat.

3. Când specificați calea către un astfel de buton în Acțiuni, va trebui să adăugați numele de instanță al obiectului după aceasta, în care este imbricat:

Window.buttons.push(//Căi separate prin virgulă pentru butoane, adăugând acest this.name.button1 //Sfârșitul spațiului pentru butoane);

Instrucțiuni pentru crearea butoanelor transparente

1. Selectați elementul dorit și convertiți-l într-un simbol

2. Introduceți un nume și selectați Tip: Buton

3. Faceți dublu clic pe simbol pentru a naviga la acesta:

4. Faceți inserarea unui cadru cheie în cadrul de accesare

5. Ștergeți conținutul cadrelor sus, peste, jos

6. Butonul transparent este gata:

4. Adăugați un strat Acțiuni la proiect (vom adăuga codul pentru butoane la acesta)

5. Deschide fereastra de codare

Window.buttons.push(//Căi separate prin virgulă pentru butoane, adăugând acest prim //Sfârșitul spațiului pentru butoane); setAdfox();

Dacă butonul se află în scena principală, atunci scrieți numele instanței imediat după aceasta, de exemplu

Acest.buton1

Dacă butonul se află în interiorul unei scene imbricate, apoi, după aceasta, scrieți mai întâi numele instanței scenei și apoi numele instanței butonului:

Acest.nume_instanță_scenă.button2

Un exemplu de cod rezultat în stratul Acțiuni:

Window.buttons.push(//Căile butoanelor separate prin virgulă, adăugând acest this.button1, this.scene_instance_name.button2 //Sfârșitul spațiului pentru butoane); setAdfox();

7. Primul buton de pe linia de cod va apela primul link de la ADFOX, al doilea buton îl va apela pe al doilea și așa mai departe.

Împreună cu reclamă HTML, transmiteți informațiile despre corespondența dintre butoane și numere de link managerului care va adăuga bannerul la ADFOX.

8. Deschideți opțiunile de publicare și conectați șablonul din primul paragraf și publicați proiectul selectând directorul dorit.

9. După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.

Editorul Google Web Designer

Codul acestui banner poate fi folosit ca bază pentru crearea de reclame în editor.

Șablonul conține script adfox_HTML5.js si un set de parametri pentru funcţionare corectă tranziții și numărarea evenimentelor:
%reference%, %user1%, %eventN%, unde N este numărul evenimentului de la 1 la 30.

2. Gestionarea clicurilor.

Toate evenimentele sunt alocate unor elemente de animație specifice prin fila Evenimente.

Pentru a invoca acțiuni, utilizați componenta „Zona de clic”.
Adăugați-l și selectați un eveniment Hotspot → Atingeți/Clic(sau „Tap Area > Touch/Click” în versiunea în limba engleză).

În fila „ Cod propriu" specificați un apel la funcția de clic.

2.1 Dacă se folosește un buton de salt:

callclick();

2.2 Dacă există mai multe butoane de navigare:

callclick(n);

Unde n

2.3 Dacă trebuie să declanșați un eveniment dintr-o animație fără o tranziție, utilizați următorul cod:

CallEvent(n);

Unde n- numărul evenimentului care urmează să fie apelat.

O caracteristică a implementării unui banner de întindere (cauciuc).

Pentru a face bannerul să se întindă pe lățimea containerului în care va fi amplasat pe site, pe panou Proprietăți pentru poziție și dimensiuni, specificați procente în loc de pixeli.

Folosiți și opțiuni „Aliniați la container”și „Aspect cauciuc” pe panoul de sus unelte.
Dacă activați Fluid Layout înainte de a utiliza oricare dintre instrumentele de aliniere, atunci când containerul părinte este redimensionat, toate elementele se vor alinia între ele și cu dimensiunile containerului.
În acest caz, puteți utiliza simultan atât dimensiunile relative ale elementelor în procente, cât și dimensiunile absolute - în pixeli.

4. Publicarea proiectului.

Când adăugați un banner la ADFOX, managerul va trebui să cunoască corespondența dintre butoane și numerele evenimentului. Pentru fiecare eveniment, managerul va prescrie propriul link de tranziție, care va fi apoi transmis codului banner folosind o variabilă.

După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.

Alți editori

1. Număr de clicuri pe banner

Pentru ca ADFOX să calculeze statisticile de clic pentru un banner, trebuie să setați o variabilă în codul HTML în eticheta a pentru atributul href:

%banner.reference_user1%

De asemenea, pentru utilizarea link-urilor atribut target cu variabila %banner.target% în valoarea atributului.
Dacă atributul lipsește, atunci linkul se va deschide în interiorul iframe-ului, adică site-ul promovat se va deschide în spațiul banner.

Un exemplu de cod HTML pentru numărarea clicurilor pe un banner:

Site-ul agentului de publicitate

În codul HTML al bannerelor care vor fi plasate în aplicațiile mobile, utilizați următoarea macrocomandă pentru a ține cont de clicuri: %reference%@%banner.user1%

2. Numărarea clicurilor de la mai multe link-uri dintr-un banner

Să presupunem că un banner are mai multe link-uri pe care se poate face clic care duc la pagini diferite site-ul promovat și pentru fiecare dintre ele trebuie să obțineți numărul de tranziții.

Primul link Al doilea link

Înlocuiți valorile atributelor href cu variabile %request.reference%@%banner.eventN%, unde în loc de N ar trebui să existe un număr de eveniment de la 1 la 28.
De exemplu:

Primul link Al doilea link

Corespondența legăturilor și variabilelor trebuie raportată managerului care adaugă bannerul la ADFOX. Deoarece atunci când adăugați un banner, va trebui să specificați primul link pentru Evenimentul 1 în fila „Evenimente” și al doilea link pentru Evenimentul 2.

Adăugarea unui banner la ADFOX

Pentru a adăuga un banner la ADFOX, selectați tipul și șablonul de banner dorit „Banner HTML5”.

Specificați parametrii bannerului:

Arhivați cu reclamă HTML5- descărcați arhiva .zip cu proiectul, câmpul „Cod de reclamă HTML5” trebuie să rămână gol (va fi completat cu conținutul fișierului .html al proiectului dumneavoastră după ce a fost adăugat bannerul).

Cod de reclamă HTML5- descărcați arhiva zip cu proiectul, pregătită în Editore HTML sau inserați codul HTML.

Dacă există mai multe link-uri în banner, adăugați-le în filă Evoluții la banner, în câmpurile URL ale tranziției.
Consultați dezvoltatorii reclamei HTML pentru corespondența dintre numărul de linkuri și evenimente.

Referire la pixelul de măsurare- Pixelul ADFOX este utilizat implicit //banners.adfox.ru/transparent.gif, dacă este necesar, ține evidența afișărilor în sistem terță parte, eliminați pixelul ADFOX și furnizați un alt link.

Lățimea reclamei (px sau %)- Specificați lățimea bannerului.

Înălțimea reclamei (px sau %)- Specificați înălțimea bannerului.

Imagine- incarca imaginea.
Condiții pentru afișarea reclamelor:
- Cod HTML și imagine adăugată - Codul HTML va fi afișat.
- imagine adăugată - imaginea va fi afișată.
- Cod HTML adăugat - Codul HTML va fi afișat.

Numele atributului de clasă al containerului banner- specificați un nume (sau mai multe nume separate printr-un spațiu) pentru atributul de clasă al containerului cu banner.

Utilizați SafeFrame (da|nu)- safeFrame este o tehnologie care împachetează reclamele într-un iframe special care are un API strict. SafeFrame împiedică reclamele pe care le redă să culeagă date și să interacționeze cu restul paginii în afara safeFrame.
da - activați utilizarea safeFrame și interziceți accesul la pagina web;
nu - nu include safeFrame. Codul banner are acces la pagina web.

Stiluri pentru blocul banner- stiluri personalizate pentru containerul banner într-o singură linie. Pe langa stil: display. De exemplu, „chenar: 1px roșu continuu;”. Valorile nevalide vor fi eliminate de browser.

Banner (banner englezesc - steag, banner) - o imagine grafică de natură publicitară, asemănătoare unui modul de publicitate din presă. Poate fi fie o imagine statică, fie chiar text, sau poate conține elemente animate (până la video și obiecte interactive). De regulă, poate conține un hyperlink către site-ul web al agentului de publicitate sau o pagină cu Informații suplimentare. Sarcinile bannerului sunt următoarele. În primul rând, vindeți un produs. Si asta inseamnă - a atrage atenția vizitatorului interes un potențial client cu un produs sau serviciu promovat, împingeți-l să meargă pe site și induce la acţiune(Apel la acțiune). CTA este scopul final al reclamei. Și, în al doilea rând, sarcina bannerului este publicitatea de imagine sau de marcă, al cărei scop crește gradul de conștientizare a mărciiși construiți o imagine pozitivă a mărcii.

Tipuri populare de reclame pe site:

• Grafic- un tip simplu de banner pentru publicitate pe Internet. Constă dintr-o imagine de o anumită dimensiune și conține un link către o resursă publicitară.
• Banner flash- are posibilități mari de animație, vă permite să transmiteți mai bine informații folosind o combinație de grafică vectorială și raster.
• Banner HTML5- o combinație de elemente HTML cu animații și design vizual bun, adaptate oricărui dispozitiv și browser.

Principalele diferențe dintre HTML și alte tipuri de bannere
În comparație cu alte metode de a crea bannere, tehnologiile HTML5 oferă o serie de avantaje pentru a atrage un public către o resursă:

• Anunțurile în acest format se vor afișa la fel pe toate dispozitivele fără extensii suplimentare de browser.
  HTML5 oferă mai multe opțiuni de integrare în dvs reclame forme, butoane retele sociale, calendare, hărți și alte aplicații.
• Greutatea redusă și utilizarea mai puține resurse nu afectează viteza de încărcare a paginii în browser. Tehnologiile flash nu permit obținerea unui astfel de rezultat.
• Pentru a evalua eficiența bannerelor HTML5, puteți vizualiza statistici în Google Analytics. Oferă diverse informații despre oaspeți și clicuri.

Un dezavantaj semnificativ al tehnologiilor flash a fost abandonarea treptată a acestora de către companii mari precum Apple, Mozilla și Amazon. Principalul impuls pentru dispariția Flash a fost Google. Mai întâi au dezactivat animația Flash Google Chrome, și apoi s-au îndepărtat de anunțurile Flash în serviciile lor de anunțuri de căutare în favoarea HTML5.

Modalități de a crea bannere HTML
Dezvoltarea bannerului începe cu crearea unei pagini separate și este încorporată pe site printr-un „iframe”. Există mai multe metode de dezvoltare bannere publicitare pe site, vom considera cele mai populare.

1. Creați un cadru cu CSS3 și JavaScript
Cadrul vă permite să încărcați orice documente independente într-o zonă de o dimensiune dată. Poate fi un cod HTML diferit, folosind stiluri și scripturi pentru stil. De asemenea, este posibilă implementarea unui banner prin zona „pânză”, în care sunt dezvoltate animații, desene, grafice și chiar jocuri folosind JavaScript. Pentru a accelera dezvoltarea, puteți utiliza biblioteci terțe, cum ar fi CreateJS .

Avantaje:

• Funcționalitatea nu este limitată de niciun program, puteți implementa orice.

Defecte:

• Acest proces este destul de complex și necesită abilități speciale de aspect.
• Costuri mari de muncă în timp în comparație cu alte metode.

2. Adobe Edge Animate
Pentru cei care cunosc Adobe dupa efecte, interfața Adobe Edge Animate se va simți foarte familiară. Adobe Edge Animate are o funcționalitate mai limitată care vizează dezvoltarea conținutului animat simplu folosind HTML5, JavaScript și CSS3. Programul acceptă importul de formate precum .svg, .png, .jpeg, .gif, HTML; suport pentru formate video și audio.

Există mai mult de 30 de efecte încorporate, ceea ce simplifică timpul de creare a animației de înaltă calitate de mai multe ori:

Avantaje:

• O mulțime de tutoriale video disponibile pe web despre cum să utilizați programul.
• Funcționalitate simplă, majoritatea proceselor sunt automatizate.
• Programul nu necesită cunoștințe de HTML5, JavaScript și CSS3.
• La finalizarea lucrărilor, primim toate documentele necesare pentru amplasarea unui banner pe site. Imagini - folder cu elemente grafice banner, mai multe Fișiere JavaScript, html și Un fișier de format - pentru editarea ulterioară a fișierului în program.
• Bannerul Ready este susținut de toată lumea browsere moderneși aplicatii mobile, îndeplinește toate cerințele tehnice ale campaniilor de publicitate în Yandex și Google.

Defecte:

• Interfața este doar în limba engleză.
• Din 2015, Adobe a oprit dezvoltarea proiectului Adobe Edge Animate, programul nu a mai fost actualizat de atunci și și-a atins limita în dezvoltare. Edge Animate este încă disponibil pentru descărcare în arhivele Creative Cloud.

3. Adobe Animate CC
Animate CC este un produs rebranded Adobe Flash profesional. LA timpuri recente Tehnologia Flash a pierdut încrederea utilizatorilor, programul avea nevoie de o schimbare a numelui și de câteva îmbunătățiri. În esență, acesta este același Program flash Profesional, dar în care fișierele sunt salvate suplimentar în HTML5 și JavaScript.

Interfața este foarte asemănătoare cu Flash Professional, dar capacitățile programelor diferă.

Avantaje:

• Abilitatea de a crea grafice tridimensionale. Există un instrument „cameră” care vă permite să capturați adâncimea cadrului pentru o animație reală.
• Spre deosebire de Edge Animate, Animate CC are mare alegere pensule vectoriale și capacitatea de a lucra cu grafice raster.
• Programul este relativ nou, așa că Adobe dezvoltă activ proiectul, lansează actualizări și îmbunătățește Animate CC.
• Există o versiune în limba rusă.
• Opțiuni extinse pentru exportul unui fișier în formate: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Prin apăsarea unui buton, elementele bannerului sunt salvate în sprites, reducând astfel timpul de încărcare a bannerului.

Defecte:

• Noutatea programului este atribuită și deficiențelor. Nu există atât de multe tutoriale de animație în Animate CC cât există în Adobe Edge Animate. Prin urmare, funcționarea unor funcții trebuie studiată independent, ceea ce nu este ușor. Programul este destul de dificil auto-studiu dar poți să-ți dai seama.
• Unele funcții nu sunt automatizate, ca în Edge Animate, care mărește și timpul de creare a bannerului.

4. Google Web Designer
Google ne-a făcut fericiți editor gratuit, special creat pentru implementarea de bannere html. Google Web Designer se concentrează complet pe implementarea reclamei, a cărei tendință principală este direcționată către AdWords.

Dacă ne uităm la fereastra pentru crearea unui fișier nou, vom observa că dimensiunile șabloanelor de anunțuri sunt deja încorporate în program.

Avantaje:

• Interfață simplă.
• Disponibilitatea șabloanelor pentru publicitate pe google.
• Program complet gratuit.
• Prezența versiunii ruse.
• Întins design adaptiv bannere, bannerul html va arăta grozav în orice rezoluție de ecran.

Defecte:

• Funcționalitatea Google Web Designer este suficient de restrânsă pentru a crea capodopere de animație. Programul este foarte limitat de șabloane.
• Lipsa programelor de instruire. Ajutorul Google nu este suficient pentru o pregătire completă în funcționalitate.

Toate metodele prezentate mai sus nu sunt noi, dar sunt dovedite. Aceasta înseamnă că există garanția că bannerele html create vor fi moderate pe majoritatea platformelor de publicitate, deoarece cerințele lor tehnice respectă standardele generale.

Bannere HTML5

de la 2 299 rub.

FRECA

Ordin

În prezent, bannerele HTML5 sunt singurul format real pentru anunțuri banner animate cu drepturi depline. Acest format universal multiplatform a înlocuit bannerele Flash, care aveau o serie de limitări și dezavantaje.

Principalele motive pentru această negare sunt următoarele:

• S-au acumulat revendicări împotriva tehnologiei Flash în domeniul securității computerelor și al consumului crescut de putere de procesor al dispozitivelor mobile;
• unele browsere au început să blocheze Flash în mod implicit;
• pe mobil dispozitive iOS(iPhone, iPad) afișajul Flash nu a fost furnizat de producător;
• popularitatea blocatorilor de anunțuri banner Flash;
• refuzul sprijinirii și dezvoltării în continuare a tehnologiei Flash de către proprietarul său, Adobe.

Bannerele animate HTML5 pot fi afișate fără restricții în orice browser, pe ecranul oricărui dispozitiv, inclusiv smartphone-uri, tablete și TV media. Aceasta este multiplataforma și universalitatea lor.

Pentru client, utilizarea bannerelor HTML5 înseamnă, în primul rând, extinderea acoperirii publicului fără pierderi.

Ce poate face un banner HTML5?

Mult. La urma urmei, acesta este cel mai avansat format care atrage atenția utilizatorului și chiar interacționează cu acesta (banner interactiv).

În ceea ce privește animația, un astfel de banner poate afișa animație vectorială (fără pierderi de scalare), animație de personaje, fotografii, logo-uri, grafice și diagrame, text și chiar animație 3D. Din punct de vedere interactiv, un banner HTML5 poate răspunde la acțiunile utilizatorului și poate oferi conținut și funcții suplimentare. În ceea ce privește media, un banner HTML5 poate reda videoclipuri, diapozitive și înregistrări audio. În ceea ce privește adaptabilitatea, un banner HTML5 se poate extinde pe toată lățimea paginii, poate dezvălui panouri suplimentare sau se poate extinde la ecran complet.

Luați în considerare principalele tipuri de bannere HTML5.

Banner animat HTML5 de dimensiune fixă.
Cel mai popular format în majoritatea rețelelor publicitare. Lățimea și înălțimea bannerelor necesare sunt selectate din lista de bannere acceptate pentru plasare. Întotdeauna vom sugera cele mai comune dimensiuni.

Întinderea bannerului HTML5 (responsive, cauciuc).
Acesta este un banner care se poate întinde pentru a umple toată lățimea (uneori înălțimea) ecranului. (Mai multe detalii gasiti in acest articol)

Banner HTML5 pe ecran complet.
Banner care se deschide pe ecran complet. De regulă, conține un temporizator de afișare și un buton „Închidere”. Mai ales popular pentru afișarea pe dispozitive mobile.

Adesea, un astfel de banner trebuie să fie adaptabil pentru a se adapta la diferite orientări și rezoluții ale dispozitivului mobil.

Banner HTML5 extensibil (extindere).
La început, doar panoul de pornire al unui astfel de banner (teaser) este prezent pe ecran. Când se execută un anumit algoritm (îndreptarea mouse-ului sau clic, cronometru sau alte evenimente pe pagină), a doua parte a bannerului se deschide cu informații suplimentare extinse.

Banner video HTML5.

În funcție de setările și cerințele platformei de publicitate, aceasta poate afișa un videoclip atât cu autostart, cât și după apăsarea butonului „Play”. Poate conține butoane de control și de dezactivare a sunetului. Fișierul video este de obicei localizat pe o gazdă externă și este încărcat atunci când este afișat.

Bannerele interactive ale jocului.
Bannere care încurajează utilizatorul să se alăture jocului prin acțiuni simple.

Astfel de bannere atrag atenția publicului țintă, trezesc un interes puternic, dar în același timp au o serie de limitări (de exemplu, absența unui eveniment de trecere a mouse-ului pe dispozitivele mobile sau restricții privind utilizarea scripturilor suplimentare). Vă vom spune întotdeauna despre aceste funcții în cazul în care vă gândiți să creați un banner HTML5 pentru jocuri.

Bannere HTML5 „inteligente” (calculatoare).
Folosit să interacționeze și să interacționeze cu utilizatorul, oferindu-i o plată imediată pentru parametrii potrivițiși formula specificată de algoritmul intern (de exemplu, calcularea unui împrumut, ipotecă, consum de materiale de construcție și alte operațiuni simple).

Bannere HTML5 editabile– în unele cazuri, clientul trebuie să facă cu promptitudine modificări la bannere fără a apela la ajutorul dezvoltatorului (de exemplu, schimbarea frecventă a prețurilor, procentelor sau cotațiilor). Putem face față acestei probleme și deducem parametrii necesari direct în codul HTML al bannerului, unde clientul poate face modificări în mod independent. Puteți oferi o altă soluție convenabilă pentru a vă afișa datele utilizate de banner în fișiere externe.

Bannere HTML5 care funcționează cu încărcare externă a datelor și API.
Pe acest moment multe rețele publicitare interzic accesul bannerului surse externe. Totuși, dacă bannerul este plasat pe un site care oferă o astfel de oportunitate, bannerul HTML5 poate solicita informațiile necesare (text, cifre, ghilimele) prin intermediul API-ului site-ului și, după ce le-a procesat conform unui algoritm dat, le poate arăta către utilizator.

Bannere 3D HTML5.
Astfel de bannere atrag atenția utilizatorului prin crearea unor modele tridimensionale de imagini pe pagină.

Un banner HTML5 3D poate fi implementat ca obiect rotativ ale cărui margini conțin rame banner, ca o carte pop-up sau folosind alte efecte 3D.

Rețineți că un banner HTML5 poate include mai multe dintre caracteristicile descrise simultan. De exemplu, un banner video se poate extinde pe toată lățimea paginii, iar o animație 3D se poate extinde pe pagină pe baza acțiunilor utilizatorului.

Dacă doriți să comandați un banner HTML5 pe site-ul nostru, iar o idee creativă necesită combinarea diferitelor formate, specialiștii noștri o pot face oricând.

Banner HTML5 - ce este tehnic?

Cel mai bine este să vă gândiți la un banner HTML5 ca la un mini site web. Fără exagerare.

HTML5, care a dat numele acestui format de banner, este un limbaj de marcare pentru pagini web, cu alte cuvinte, aspect. Și este alcătuit după aceleași legi ca orice site modern. Poate conține containere div, fonturi incluse, stiluri cssși scripturi js. Elementul principal este un container pentru animații de pânză. Animația în sine este implementată folosind un script java, mai des folosind biblioteci js special concepute pentru animație.

Ce e inauntru? De ce arhiva? De ce atâtea fișiere?

Așa este, pentru că suntem obișnuiți cu faptul că un banner este un singur fișier imagine JPG sau un „gif” sau „unitate flash”. Dar amintiți-vă, așa cum am scris mai sus, un banner HTML5 este, de fapt, un mini-site. Conține multe fișiere și este livrat platformei de publicitate într-o arhivă zip. În interiorul arhivei se află fișierul HTML principal, fișierele script Java, bibliotecile, foile de stil și imaginile utilizate.

Notă. În unele cazuri, platforma de publicitate vă poate solicita să furnizați întregul banner într-un singur fișier, inclusiv toate scripturile și imaginile utilizate în format de bază 64. Aceasta nu este o problemă pentru un dezvoltator experimentat. Cu toate acestea, o astfel de cerință crește timpul necesar pentru a face un banner și a face modificări. Din fericire, această cerință este rară.

Cum pot vedea bannerul HTML5 trimis pe computerul meu?

Foarte simplu. Despachetați arhiva zip și deschideți fișierul HTML din interior în browser.

Cum pot verifica dacă mi-a fost creat bannerul HTML5 corect?

Dacă bannerul este creat pentru publicitate servicii Google, atunci la dispozitia dumneavoastra este un instrument excelent pentru verificarea calitatii muncii unui designer - un validator on-line HTML5 de la Google. Utilizarea este simplă: încărcați fișierul zip banner și vedeți dacă trece lista de verificare. Erorile vor fi marcate cu pictograme roșii. Dacă nu sunt acolo, dezvoltatorul tău nu a funcționat în zadar și bannerul este gata pentru plasare Google AdWords sau dublu clic.

În rețelele de publicitate Yandex, Mail.ru, Rambler, adFox, adRiver și altele, bannerul este de asemenea verificat pentru conformitatea cu cerințele tehnice după ce este încărcat pe site-ul web al sistemului. În caz de probleme, puteți obține un comentariu de la moderator care descrie eroarea. Unele platforme oferă clientului de publicitate oportunitatea previzualizare banner pe pagina de test.

Totuși, cea mai bună garanție a producerii corecte a unui banner HTML5 este experiența dezvoltatorului, cunoștințele sale cerinte tehnice platforme de publicitate și disponibilitatea de a corecta prompt erorile.

Este diferit un banner de animație Java Script?

Nu te lăsa confuz. „Java Script banner”, „Canvas banner” – vorbim despre ceea ce se numește de obicei „HTML5 banner”. În funcție de instrumentul de dezvoltator, bibliotecile js sau regulile de aspect se pot schimba, dar schema de asamblare generală rămâne aceeași.

Cum se creează un banner HTML5?

Cel mai popular editor printre designeri pentru crearea de animații HTML5 este programul Adobe Anima.

Google oferă propriul său instrument de dezvoltare - Google Web Designer. Printre avantajele sale se numără prezența multor șabloane încorporate și posibilitatea de a publica un banner direct pentru serviciile de publicitate Google: adWords și Double Click. Printre minusuri se numără posibilitățile limitate de animație.

Unii designeri, majoritatea americani, folosesc editorul și bibliotecile Green Sock Animation Platform. Cu toate acestea, nu au primit o distribuție semnificativă în țara noastră.

Având în vedere că toate componentele necesare sunt open source, un bun specialist poate crea un banner HTML5 chiar și în cel mai simplu editor de text. Cu toate acestea, această metodă nu este eficientă în comparație cu utilizarea programelor profesionale de animație.

Cerințe tehnice pentru bannere HTML5.

Cerințele se aplică pentru:

• greutatea totală a bannerului HTML5 în kb;
• structuri de arhivă zip, numărul de foldere și fișiere;
• lista de formate de fișiere permise;
• o modalitate de a activa link-urile URL făcând clic pe un banner (firmware banner);
• lista de biblioteci js permise pe găzduiri externe;
• procedura și restricțiile pentru conectarea fișierelor video și audio;
• cerințe pentru proiectarea cadrului, declinări de răspundere, frecvența și numărul de cicluri de animație, sarcina procesorului dispozitivului.

Și aceasta nu este o listă completă de cerințe pe care dezvoltatorii noștri trebuie să le țină cont pentru a oferi clientului un banner HTML5 gata de plasat și de a începe fără întârziere o campanie de publicitate.

Ce ar trebui să fac cu bannerele mele Flash create mai devreme?

Vedeți singuri - cele mai mari rețele de publicitate nu mai acceptă bannere Flash pentru plasare, componentele Flash sunt blocate în browsere și pe dispozitivele iOS, Swiffy (singurul convertor online adecvat de bannere Flash în HTML5) a încetat să funcționeze.

Conversia automată a formatului Flash în HTML5 este practic imposibilă - necesită, de fapt, o reasamblare completă manuală într-un editor HTML5. Într-o astfel de situație, decizia corectă ar fi să dispunem crearea unui nou set de bannere animate, într-un format HTML5 modern și universal.

Dar cum rămâne cu „gif-urile”?

Trebuie să înțelegeți că orice animație GIF este un set secvenţial de cadre de imagine, la fel ca în fișierele video. Fișierul GIF poate conține informații despre frecvența cadrelor și numărul de repetări. Acest lucru îi limitează posibilitățile.

Bannerul GIF nu poate funcționa grafica vectoriala, creați animații programatic, adaptați la dimensiunea dorită și multe altele pe care un banner animat HTML5 le poate gestiona cu ușurință.

Ce înseamnă asta pentru agentul de publicitate?

Problema excesului de greutate. Da, chiar și bannerele sunt supuse acesteia. Toate platformele de publicitate majore stabilesc limite stricte pentru greutatea unui banner în kilobyți.

Un banner GIF este bun pentru a afișa câteva cadre statice, poate cu o mică animație de text, un buton sau o schimbare a fotografiei. În acest caz, greutatea totală a bannerului GIF nu depășește cerințele platformelor de publicitate.

Dacă animația afectează schimbarea a câteva sute de cadre, atunci greutatea bannerului gif crește, așa cum se spune în engleză, „dramatic”, adică dramatic. Un GIF de 20 de secunde care cântărește câțiva megaocteți este un lucru obișnuit. Și chiar nu-mi place retele de publicitate, care sunt pe bună dreptate preocupați de cât de mult trafic va trebui să descarce un utilizator pentru a vedea un banner.

Așadar, dacă aveți nevoie de un banner cu multe efecte de animație, animație de personaje, banner interactiv, adaptiv sau video, alegerea se face în favoarea comenzii unui banner HTML5.