Skapande av responsiva HTML5 helskärmsbanners. Bannersnack recension

Ett av alternativen för att distribuera reklam som kan vara tillgänglig för alla är HTML5-banners – fullfjädrade sidor, animerade och med interaktiva element. Till skillnad från andra sätt att locka besökare fungerar det här bara felfritt. Idag anses detta alternativ vara det mest populära webbannonseringsformatet. Och det finns ett antal objektiva skäl till detta, bestämt av en vägande lista över fördelar, och innan du beställer en HTML5-banner rekommenderar vi att du lär dig mer om detta format.

Värdighet

Skapandeprocessen

Långt lärda metoder används för att skapa HTML5-banners. Utåt skiljer de sig inte från Flash, men hela skillnaden ligger i de teknologier som dessa format är baserade på. En sådan banner skapas i form av en responsiv HTML5-sida, varefter den fylls med bilder, länkar, texter och dekoreras. Bland de vanligaste metoderna är användningen av grafiska redaktörer, specialiserade program, färdiga verktyg etc. På grund av deras huvudfunktion - anpassningsförmåga, tillåter dessa banners att använda en hel rad värden i processen för att skapa dem.

Internet svämmar över av annonser. På många sajter är detta en iögonfallande reklam för viktminskningsborstar, på andra är det Yandex.Direct eller Google Adsense. Och bara på några av dem kan du se vackra banners som inte irriterar användare med bara deras utseende. I min recension kommer du att lära dig hur du skapar en vacker HTML5-banner själv utan några inledande färdigheter.

bannersnack är en onlinetjänst för att skapa HTML5- och Flash-banners i olika format som inte kräver kunskap om koden och färdigheter i att arbeta med bildredigerare.

Tjänsten erbjuder att skapa banners av två typer: vanlig eller slumpmässig banner vid sidladdning. Med hjälp av banersnack kan du också lansera din reklamkampanj på Google eller Facebook. Men först till kvarn.

Banner maker

Det är i det här avsnittet du kan skapa din första banner. Tjänsten erbjuder banners i HTML5- eller Flash-format. Eftersom alla försöker döda Flash kommer jag att beskriva HTML5-redigeraren.

När du startar guiden erbjuds flera färdiga mallar omedelbart:

Möjligheten att skapa en banner från grunden försvinner förstås inte någonstans. Storleken på den framtida bannern anges överst i guiden:

När du väljer storlek kommer även mallarna att ändras. Det är bäst att ge företräde till en fördefinierad storlek, och inte ange din egen, eftersom bannersnack så småningom kan vägra att generera en sådan banner.

När du skapar din egen banner öppnas följande redigerare:

Till vänster finns en lista över alla bannerbilder, som var och en har sin egen bild och text. Överst finns verktyg för att skapa en banner, och till höger finns lageregenskaper.

Du kan lägga till din egen bild, text, knapp, form eller video som banner. Jag har lagt till en bild och en knapp:

När du väljer något objekt kommer flera mallar att erbjudas, men som alltid är sista ordet ditt:

Varje lager har tre egenskapsflikar. Position på sidan, färg, form och liknande:

Klicka på åtgärd på ett lager:

Du kan ange en övergång till nästa bild eller en övergång från en länk.

Animationsegenskaper när du byter bild:

När du är klar med att redigera din banner klickar du bara på Spara och väljer ett namn för din framtida banner:

Då öppnas en lista med alla dina banners med koder att bädda in på sajten:

Det är viktigt att notera att om du ändrar bannern på bannersnack-sajten kommer den också att uppdateras på din sajt. Du behöver inte kopiera inbäddningskoden igen.

Banner rotator

Det är här statiska banners skapas som laddas slumpmässigt vid sidladdning.

Guiden erbjuder att välja mellan redan skapade banners eller skapa en ny:

När du lägger till din egen bild kan du bara ställa in webbadressen för övergången:

Efter det återstår det att hämta inbäddningskoden på webbplatsen:

Så här kan även en oerfaren användare skapa sin egen vackra banner för flera webbläsare med hjälp av bannersnack.

Banner (engelsk banner - flagga, banner) - en grafisk bild av reklamkaraktär, liknande reklammodulen i pressen. Det kan vara antingen en statisk bild eller till och med text, eller så kan den innehålla animerade element (upp till video och interaktiva objekt). Som regel kan den innehålla en hyperlänk till annonsörens webbplats eller en sida med ytterligare information. Uppgifterna för bannern är följande. Sälj först produkten. Så - locka till sig besökarens uppmärksamhet, intressera potentiell kund annonserade produkt eller tjänst, tryck för att gå till webbplatsen och framkalla åtgärder(Uppmaning till handling). Det är CTA som är det slutliga målet med reklam. Och för det andra är bannerns uppgift bild- eller varumärkesreklam, vars syfte är öka varumärkesmedvetenheten och bygga en positiv varumärkesimage.

Populära typer av annonser på webbplatsen:

• Grafisk- en enkel typ av banner för annonsering på Internet. Den består av en bild av en viss storlek och innehåller en länk till en reklamresurs.
• Flash banner- har stora möjligheter för animering, den låter dig förmedla information bättre med en kombination av vektor- och rastergrafik.
• HTML5-banner-kombination av HTML-element med animationer och bra visuell design, anpassad för alla enheter och webbläsare.

De viktigaste skillnaderna mellan HTML och andra typer av banners
Jämfört med andra metoder för att skapa banners ger HTML5-tekniker ett antal fördelar för att locka en publik till en resurs:

• Annonser i det här formatet kommer att visas på samma sätt på alla enheter utan ytterligare webbläsartillägg.
  HTML5 ger fler alternativ för att integrera formulär, knappar för sociala medier, kalendrar, kartor och andra applikationer i dina annonser.
• Låg vikt och användning av färre resurser påverkar inte hastigheten för att ladda sidor i webbläsaren. Flash-teknik tillåter inte att uppnå detta resultat.
• För att utvärdera effektiviteten av HTML5-banners kan du se statistik i Google Analytics. Där kan du hitta diverse information om gäster och klicka på länkar.

En betydande nackdel med blixtteknik var det gradvisa övergivandet av stora företag som Apple, Mozilla och Amazon. Google var den främsta drivkraften bakom försvinnandet av Flash. De stängde först av Flash-animationer i Google Chrome och lade sedan bort Flash-annonser i sina sökannonseringstjänster och valde HTML5.

Sätt att skapa HTML-banners
Utvecklingen av en banner börjar med skapandet av en separat sida och bäddas in i sajten genom en "iframe". Det finns flera metoder för att utveckla reklambanners för en webbplats, vi kommer att överväga de mest populära.

1. Skapa en ram med CSS3 och JavaScript
Ramen låter dig ladda alla oberoende dokument i ett område med specificerade storlekar. Det kan vara en annan HTML-kod som använder stilar och skript för dekoration. Det är också möjligt att implementera en banner genom området "canvas", där animationer, ritningar, grafik och till och med spel utvecklas med JavaScript. För att påskynda utvecklingen är det tillåtet att använda tredjepartsbibliotek, till exempel CreateJS.

Fördelar:

• Funktionaliteten är inte begränsad av några program, du kan implementera vad som helst.

nackdelar:

• Denna process är ganska komplicerad och kräver speciella layoutkunskaper.
• Stora arbetskostnader sett till tid i förhållande till andra metoder.

2. Adobe Edge Animate
De som är bekanta med Adobe After Effects kommer att tycka att Adobe Edge Animate-gränssnittet är mycket bekant. Adobe Edge Animate har mer begränsad funktionalitet som syftar till att utveckla enkelt animerat innehåll med HTML5, JavaScript och CSS3. Programmet stöder import av sådana format som.svg, .png, .jpeg, .gif, HTML; stöd för video- och ljudformat.

Det finns mer än 30 inbyggda effekter, vilket förenklar tiden för att skapa högkvalitativ animation flera gånger:

Fördelar:

• Det finns många tillgängliga videohandledningar på webben om hur du använder programmet.
• Enkel funktionalitet, de flesta av processerna är automatiserade.
• Programmet kräver inga kunskaper i HTML5, JavaScript och CSS3.
• Efter avslutat arbete får vi alla nödvändiga dokument för att placera bannern på webbplatsen. Bilder - en mapp med grafiska bannerelement, flera JavaScript-, html-filer och en An-fil - för efterföljande redigering av filen i programmet.
• Den färdiga bannern stöds av alla moderna webbläsare och mobilapplikationer, uppfyller alla tekniska krav för reklamkampanjer i Yandex och Google.

nackdelar:

• Gränssnittet är endast på engelska.
• Sedan 2015 har Adobe slutat utveckla Adobe Edge Animate-projektet, programmet har inte uppdaterats sedan dess och har nått sin utvecklingsgräns. Edge Animate är fortfarande tillgänglig för nedladdning från Creative Cloud-arkiven.

3. Adobe Animate CC
Animate CC är en omdöpt Adobe Flash Professional-produkt. Nyligen har Flash-tekniken tappat användarnas förtroende, programmet behövde ett namnbyte och flera förbättringar. I grund och botten är detta samma Flash Professional-program, men där filerna dessutom sparas i HTML5 och JavaScript.

Gränssnittet är väldigt likt Flash Professional, men programmens möjligheter skiljer sig åt.

Fördelar:

• Möjligheten att skapa tredimensionell grafik. Det finns ett kameraverktyg som låter dig fånga bildens djup för riktig animering.
• Till skillnad från Edge Animate har Animate CC ett stort urval av vektorpenslar och möjligheten att arbeta med bitmappsgrafik.
• Programmet är relativt nytt, så Adobe utvecklar aktivt projektet, släpper uppdateringar och förbättrar Animate CC.
• Det finns en ryskspråkig version.
• Utökade alternativ för att exportera en fil till format: JavaScript / Html, jpeg, png, oam, svg, mov, gif. Genom att trycka på en knapp sparas elementen i bannern i sprites, vilket minskar laddningstiden för bannern.

nackdelar:

• Nyheten i programmet är också en nackdel. Det finns inte lika många handledningar om hur man skapar animationer i Animate CC som det finns i Adobe Edge Animate. Därför måste arbetet med vissa funktioner studeras oberoende, vilket inte är lätt. Programmet är ganska svårt för självständiga studier, men du kan lista ut det.
• Vissa funktioner är inte automatiserade som i Edge Animate, vilket också ökar tiden för att skapa banners.

4. Google Web Designer
Google gladde oss med en gratis editor speciellt skapad för implementering av html-banners. Google Web Designer är helt inriktat på att implementera annonsering, vars huvudsakliga partiskhet är riktad mot AdWords.

Om vi ​​tittar på fönstret för att skapa en ny fil kommer vi att märka att programmet redan har inbyggda annonsmallsstorlekar.

Fördelar:

• Enkelt gränssnitt.
• Tillgänglighet av mallar för annonsering på google.
• Helt gratis program.
• Tillgänglighet för den ryskspråkiga versionen.
• Responsiv design av banners är lagd, html-banner kommer att se bra ut i vilken skärmupplösning som helst.

nackdelar:

• Funktionaliteten hos Google Web Designer är tillräckligt smal för att skapa mästerverk av animation. Programmet är starkt begränsat av mallar.
• Brist på träningsprogram. Google Hjälp räcker inte för att helt lära ut funktionaliteten.

Alla metoder som presenteras ovan är inte nya, men de är bevisade. Detta innebär att det finns en garanti för att de skapade html-banners kommer att modereras på de flesta reklamplattformar, eftersom deras tekniska krav motsvarar allmänna standarder.

Vänner, hej alla. Idag kommer vi att fortsätta skapa banners i Google Web Designer i HTML5-format, med en 3D-effekt.

Och detta är förståeligt, banners skapade i html5 och css3 visas på alla skärmar, både på datorer, TV-apparater och på mobila enheter. Detsamma kan inte sägas om flash-banners.

Dessutom kan dessa banners vara, bara använda och bannern kommer att se bra ut på vilken skärm som helst.

Och med tanke på det faktum att mobila enheter används mer och mer för att surfa på internetresurser, så är detta mycket viktigt.

Jag har redan beskrivit den huvudsakliga och dess placering på webbplatsen i den senaste artikeln. Så idag kommer jag att fokusera på att skapa 3D-effekten och ställa in looping (re-display). Och överväg även några inställningar för "händelser".

Det är ganska svårt att beskriva hela denna process i detalj, så jag uppmärksammar dig på en videohandledning. Detta kommer att göra materialet mycket lättare att bemästra. Och ladda även ner arkivet med projektet av min banner, som ett illustrativt exempel.

Förbereder för att skapa en banner med en 3D-effekt.

Den slutliga formen av bannern beror på förberedelserna. Google Web Designer-editorn låter dig skapa realistiska 3D-effekter och allt detta kommer att skrivas i html-koden, du behöver bara sätta ihop allt korrekt i den visuella editorn.

För att skapa en högkvalitativ 3D-effekt måste du först klippa ut ämnen i Photoshop, som senare måste sammanfogas i Google Web Designer.

Som ett exempel har jag förberett följande ämnen:

Jag gjorde dessa tomrum i Photoshop, men det finns många liknande bilder på Internet. Du behöver inte anstränga dig utan ta färdiga alternativ.

Obs: Om du är intresserad av processen att skapa sådana mallar, skriv om det i kommentarerna.

Det är också viktigt att tänka på den övergripande bannersammansättningen och manuset. Hur bannern kommer att uppfattas som helhet beror på detta.

Skapande av ett 3D-objekt i Google Web Designer.

Så, analogt med den senaste artikeln, starta redaktören, skapa ett nytt projekt.

3D-effekten innebär en sammansatt bild, det vill säga en bild som består av flera delar placerade i den önskade projektionen.

Dessa flera bilder måste kombineras antingen till en grupp eller placeras i ett DIV-block. Och så och så blir det rätt. Men det är bekvämare för mig att arbeta med DIV-sidan.

Steg 1. Skapa ett DIV-block.

Så, för att skapa DIV-blocket, välj i den vänstra panelen "Verktyg för att arbeta med taggar (D)".

Se till att tilldela ett ID. Och ändra storlek med hjälp av avsnittet "Egenskaper" i den högra rutan.

Nu måste vi välja blocket. För att göra detta, välj i den vänstra rutan "Markeringsverktyg (V) " och genom att dubbelklicka på vänster musknapp, klicka på ramen i DIV-blocket. Samtidigt kommer den att ändra färg till rött.

Steg 2. Ordna bilderna.

Och nu börjar den mest mödosamma processen. Det är nödvändigt att exponera alla element i en enda bild.

Jag har följande element till mitt förfogande:

- Övre sidan.

- Sida (består av tre separata delar).

Placera först baksidan (baksidan) av bilden och rikta in den mot mitten och övre kanten av bannern.

Lägg till framsidan på samma sätt. Rikta in och förskjut längs Z-axeln.

Eftersom sidobredden är 4px (pixlar), flyttade jag fram- och baksidorna längs Z-axeln med 2px och -2px. Vilket kommer att ge ett gap mellan bilderna.

Obs: se skärmbilderna för de exakta förskjutningssiffrorna.

Lägg sedan till sidan, alla bitar separat. Använd verktyg för enkel placering "3D rotera arbetsområdet" och "Skala"... De hjälper dig att exakt passa alla detaljer.

Till att börja med föreslår jag att rada upp alla bilderna på ena sidan och sedan kopiera dem och placera dem i en spegelprojektion på andra sidan.

Nästa steg är att bygga det övre vänstra hörnet.

Nu mitten av sidan.

Och det nedre hörnet är på vänster sida.

Var noga med att rikta in alla element på sidan med Y-axeln vid 90 0.

Nu måste du kopiera det önskade lagret och klistra in det igen, döpa om och ändra platsparametrarna, så att vi får elementen för höger sida.

För att göra detta, välj en bild i den nedre panelen - tryck på tangentkombinationen CTRL + C (kopiera) och klistra in en dubblett av CTRL + V.

Låt oss börja på samma sätt som för fältsidan uppifrån och ned, men bara för höger.

Överst till höger keps.

Jag har inte gjort den nedre delen, eftersom den inte syns på bilden.

Det svåraste jobbet är över. Nu kan du börja anpassa din animation. Låt oss rotera bilden som en visuell demonstration.

Skapa en rotationseffekt i Google Web Designer.

Det första steget är att ta sig ur DIV-blocket, som innehåller alla bildelement. Det vill säga, vi arbetade inuti blocket med specifika bilder, och nu måste vi arbeta med alla bilder samtidigt, kontrollera DIV-blocket.

Klicka först på DIV-knappen i den nedre panelen.

Så, på stugan av tiden, genom att trycka på höger musknapp, skapar du två nyckelrutor. Det ska se ut så här:

Ställ in platsen för källramen på Y-skalan till -90 0.

Ställ in den första nyckelbildrutan (den andra i raden) på Y-skalan till 0 0.

Ställ in den andra nyckelbildrutan (den tredje i raden) på Y-skalan till 90 0.

Allt kan kontrolleras resultatet. För att göra detta, klicka på knappen Spela.

Det är sant att vår bild bara gör en rotation. För att bilden ska rotera konstant eller göra flera varv måste du justera de cykliska parametrarna.

Konfigurera looping i Google Web Designer.

I programmet kan du konfigurera flera alternativ för cyklicitet (repetitioner). På så sätt kan du ställa in upprepning för alla element i bannern eller för varje element separat.

Dessutom kan cykliciteten begränsas av antalet repetitioner eller göra den oändlig.

På den nedre panelen, bredvid varje objekt, finns det symboler "Castle", "Eye", "Back Arrow".

Så för att ställa in cykeln måste du klicka på symbolen "Omvänd pil". Och välj antingen ett begränsat antal repetitioner eller ett oändligt alternativ.

Jag valde oändlig looping av animationen. Sedan i framtiden vill jag konfigurera "Utvecklingar" på ett sådant sätt att rotationen stannar när du håller muspekaren för muspekaren och fortsätter efter att markören har tagits bort.

Stoppa rotationen när du håller musen över banderollen.

Först av allt, ställ in en genväg på den första nyckelbildrutan (den andra i raden). För att göra detta, tryck på höger musknapp ovanför ramen och välj menyalternativet "Lägg till genväg"... Ange namnet på genvägen och tryck på Enter.

Och i nästa steg väljer du som mottagare « Sida 1 "... Det kommer inte att finnas några andra alternativ där.

Och det sista steget, välj genvägen som du skapade i det inledande skedet.

Spara händelser och kontrollera. Rotationen av banderollen stoppas när muspekaren svävar över ramen där genvägen gjordes.

Återuppta rotation efter att ha flyttat muspekaren.

För att rotationen ska fortsätta, efter att ha flyttat markören åt sidan, ställ in ytterligare en händelse.

Den är konfigurerad på samma sätt som den föregående, med bara två skillnader.

Händelsen är vald "Mus"— « musknapp".

Händelse - bortförande av mus

Och som en handling Tidslinje — « växla Spela ".

Åtgärd - Fortsätt

Så vår banner med 3D-effekt är klar. Och du kan tänka på hur många olika effekter som helst.

Glöm bara inte att göra ett event för ett musklick och länköppning. Bannern skapades trots allt inte för skönhetens skull.

Inledningsvis kan den här processen verka komplicerad, men efter att ha gjort ett par banners kommer du inte längre att verka så.

Det var allt för mig idag, vänner. Jag önskar dig all framgång, jag ser fram emot dina kommentarer och ses i nya artiklar och videohandledningar.

Med vänlig hälsning, Maxim Zaitsev.

HTML5-banners

från 2 299 rub.

GNUGGA

Att beställa

För närvarande är HTML5-banners det enda faktiska formatet för fullfjädrade animerade bannerannonser. Detta universella plattformsoberoende format ersatte Flash-banners, som hade ett antal begränsningar och nackdelar.

De främsta skälen till ett sådant avslag är följande:

• anspråk har samlats mot Flash-teknik inom området datorsäkerhet och ökad förbrukning av processorkraft för mobila enheter;
• vissa webbläsare började blockera Flash som standard;
• på iOS mobila enheter (iPhone, iPad) tillhandahölls inte Flash-skärmen av tillverkaren;
• populariteten för Flash-bannerannonsblockerare;
• vägran från ytterligare stöd och utveckling av Flash-teknik av dess ägare, Adobe.

Animerade HTML5-banners kan visas utan begränsningar i vilken webbläsare som helst, på skärmen på alla enheter, inklusive smartphones, surfplattor och media-TV. Detta är deras plattformsoberoende och mångsidighet.

För kunden innebär användningen av HTML5-banners, först och främst, att utöka publikens räckvidd utan förlust.

Vad kan en HTML5-banner göra?

Mycket. Detta är trots allt det mest avancerade formatet som drar till sig användarens uppmärksamhet och till och med interagerar med honom (interaktiv banner).

När det gäller animering kan en sådan banner visa vektoranimation (förlustfri skalning), animering av karaktärer, foton, logotyper, grafer och diagram, text och till och med 3D-animation. Ur en interaktiv synvinkel kan en HTML5-banner reagera på användarnas handlingar och erbjuda ytterligare innehåll och funktioner. Ur ett mediaperspektiv kan en HTML5-banner spela upp videor, bilder och ljudinspelningar. När det gäller lyhördhet kan HTML5-bannern sträcka sig till hela sidans bredd, visa ytterligare paneler eller expandera till helskärm.

Låt oss ta en titt på huvudtyperna av HTML5-banners.

Animerad HTML5-banner med fast storlek.
Mest populära formatet i de flesta annonsnätverk. Bredden och höjden på de obligatoriska banners väljs från listan över banners som accepteras för placering. Vi visar dig alltid de vanligaste storlekarna.

Stretching HTML5-banner (responsiv, flytande).
Detta är en banderoll som kan sträcka sig för att fylla hela skärmens bredd (ibland höjd). (Mer information finns i den här artikeln)

Helskärm HTML5-banner.
Helskärmsbanner. Som regel innehåller den en displaytimer och en "Stäng"-knapp. Särskilt populärt för visning på mobila enheter.

Ofta måste en sådan banner vara lyhörd för att passa olika orienteringar och upplösningar för den mobila enheten.

Expanderbar HTML5-banner (expandera).
Till en början är bara startpanelen för en sådan banner (teaser) närvarande på skärmen. När den angivna algoritmen exekveras (mussvävning eller klick, timer eller andra händelser på sidan), öppnas den andra delen av bannern med ytterligare utökad information.

HTML5-videobanner.

Beroende på inställningarna och kraven för reklamplattformen kan den visa en video, både med autostart och efter att ha tryckt på "Spela"-knappen. Kan innehålla kontrollknappar och mute-knappar. Videofilen lagras vanligtvis på en extern värd och laddas upp när den visas.

Spel interaktiva banners.
Banderoller som uppmanar användaren att gå med i spelet genom att utföra enkla åtgärder.

Sådana banners lockar målgruppens uppmärksamhet, väcker stort intresse, men har samtidigt ett antal begränsningar (till exempel frånvaron av en mouseover-händelse på mobila enheter eller begränsningar för användningen av ytterligare skript). Vi kommer alltid att berätta för dig om dessa funktioner om du funderar på att skapa en HTML5-banner för spel.

Smarta HTML5-banners (kalkylatorer).
De används för att engagera sig och interagera med användaren och erbjuda honom en omedelbar beräkning enligt nödvändiga parametrar och en formel som ställs in av en intern algoritm (till exempel beräkning av ett lån, bolån, förbrukning av byggmaterial och andra enkla operationer).

Redigerbara HTML5-banners- i vissa fall måste kunden omedelbart göra ändringar i banners utan att behöva ta hjälp av utvecklaren (till exempel ofta ändrade priser, procentsatser eller offerter). Vi kan hantera en sådan uppgift och mata ut nödvändiga parametrar direkt till HTML-koden för bannern, där kunden självständigt kan göra ändringar. Du kan erbjuda en annan bekväm lösning för att mata ut data som används av bannern till externa filer.

HTML5-banners som fungerar med extern data och API-laddning.
För närvarande förbjuder många annonsnätverk bannerns åtkomst till externa källor. Men om en banner placeras på en webbplats som ger en sådan möjlighet, kan en HTML5-banner begära nödvändig information (text, siffror, citat) via webbplatsens API och, efter att ha bearbetat dem enligt en given algoritm, visa den för användare.

3D HTML5 banners.
Sådana banners lockar användarens uppmärksamhet genom att skapa tredimensionella modeller av bilder på sidan.

HTML5 3D-banner kan implementeras som ett roterande objekt, vars kanter innehåller bannerramar, som en rullgardinsbok eller med andra 3D-effekter.

Observera att en HTML5-banner kan innehålla flera av de beskrivna funktionerna samtidigt. Till exempel kan en videobanner sträckas ut över hela sidans bredd, och en tredimensionell animation kan utvecklas på sidan baserat på användarens handlingar.

Om du vill beställa en HTML5-banner på vår hemsida, och en kreativ idé kräver att man kombinerar olika format, kan våra specialister alltid göra det.

HTML5-banner - vad är det tekniskt sett?

Det är bäst att tänka på en HTML5-banner som en miniwebbplats. Ingen överdrift.

HTML5, som gav sitt namn till detta bannerformat, är ett märkningsspråk för webbsidor, med andra ord layout. Och den är typsatt enligt samma lagar som alla moderna sajter. Den kan innehålla div-behållare, pluggbara typsnitt, css-stilar och js-skript. Huvudelementet är canvas-animationsbehållaren. Själva animeringen implementeras med hjälp av ett java-skript, oftare med hjälp av js-bibliotek speciellt utformade för animering.

Vad finns inuti? Varför i arkivet? Varför finns det så många filer?

Det stämmer, eftersom vi är vana vid att en banner är en JPG-bildfil eller en "gif" eller "flashenhet". Men kom ihåg, som vi skrev ovan, en HTML5-banner är faktiskt en minisajt. Den innehåller många filer och kommer i ett zip-arkiv från annonswebbplatsen. Inuti arkivet finns den huvudsakliga HTML-filen, java-skriptfiler, bibliotek, stilmallar och använda bilder.

Notera. I vissa fall kan en reklamplattform kräva att du tillhandahåller hela bannern i en fil, inklusive alla använda skript och bilder i base-64-format. Detta är inte ett problem för en erfaren utvecklare. Ett sådant krav ökar dock termen för att göra bannern och göra ändringar i den. Lyckligtvis är detta krav inte vanligt.

Hur kan jag se den skickade HTML5-bannern på min dator?

Väldigt enkelt. Packa upp zip-arkivet och öppna HTML-filen inuti din webbläsare.

Hur kontrollerar jag att rätt HTML5-banner har renderats till mig?

Om en banner skapas för Googles reklamtjänster, är det till din tjänst ett utmärkt verktyg för att kontrollera kvaliteten på designerns arbete - online HTML5-validatorn från Google. Det är lätt att använda: ladda ner ditt zip-arkiv med en banner och se om det klarade checklistan. Fel kommer att markeras med röda ikoner. Om de inte finns där har din utvecklare inte fungerat förgäves och bannern är redo att placeras i Google adWords eller Double Click.

I reklamnätverken Yandex, Mail.ru, Rambler, adFox, adRiver och andra kontrolleras även bannern för överensstämmelse med de tekniska kraven efter att den har laddats upp till systemets webbplats. Vid problem kan du få en kommentar från moderatorn som beskriver felet. Vissa webbplatser ger annonskunden möjlighet att förhandsgranska bannern på testsidan.

Ändå är den bästa garantin för korrekt HTML5-bannerproduktion utvecklarens erfarenhet, hans kunskap om de tekniska kraven på reklamplattformar och hans beredskap att snabbt rätta till fel.

Är en banner med animation i Java Script annorlunda?

Var inte förvirrad. "Java Script-banner", "Canvas-banner" - det är precis vad som brukar kallas "HTML5-banner". Beroende på utvecklarens verktyg kan js-bibliotek eller layoutregler ändras, men schemat för generalförsamlingen förblir detsamma.

Hur skapar man en HTML5-banner?

Den mest populära HTML5-animationsredigeraren bland designers är Adobe Animate.

Google erbjuder sitt eget utvecklingsverktyg - Google Web Designer. Bland dess fördelar är närvaron av många inbyggda mallar och möjligheten att publicera en banner direkt för Googles annonseringstjänster: AdWords och Double Click. Bland nackdelarna är de begränsade animeringsmöjligheterna.

Vissa designers, oftare amerikanska, använder Green Sock Animation Platform-redigeraren och biblioteken. De har dock inte fått någon nämnvärd spridning i vårt land.

Med tanke på att alla nödvändiga komponenter är öppen källkod kan en bra specialist skapa en HTML5-banner även i den enklaste textredigeraren. Den här metoden är dock inte effektiv jämfört med att använda professionella animationsprogram.

Tekniska krav för HTML5-banners.

Kraven gäller:

• totalvikt av HTML5-banner i KB;
• zip-arkivstruktur, antal mappar och filer;
• lista över tillåtna filformat;
• hur man aktiverar URL-länkar genom att klicka på bannern (bannerfirmware);
• lista över tillåtna js-bibliotek på extern hosting;
• procedur och begränsningar för anslutning av video- och ljudfiler;
• krav på utformningen av ramen, friskrivningar, frekvens och antal animeringscykler, belastning på enhetens processor.

Och detta är inte en komplett lista över krav som våra utvecklare måste ta hänsyn till för att kunna förse kunden med en HTML5-banner redo att placera och starta en reklamkampanj utan dröjsmål.

Vad ska jag göra med mina tidigare skapade Flash-banners?

Se själv - de största annonsnätverken accepterar inte längre Flash-banners för placering, Flash-komponenter blockeras i webbläsare och på iOS-enheter, Swiffy (den enda lämpliga online-konverteraren från Flash-banner till HTML5) har slutat fungera.

Automatisk konvertering av Flash-format till HTML5 är nästan omöjligt - det kräver faktiskt en fullständig manuell ombyggnad i HTML5-editor. I en sådan situation skulle det rätta beslutet vara att beordra skapandet av en ny uppsättning animerade banners i det moderna och universella HTML5-formatet.

Men hur är det med "gifs"?

Du måste förstå att alla GIF-animationer är en sekventiell uppsättning rambilder, precis som i videofiler. En GIF-fil kan innehålla information om bildhastigheten och antalet repetitioner. Detta begränsar hans möjligheter.

En GIF-banner kan inte fungera med vektorgrafik, skapa animation programmatiskt, anpassa till önskad storlek och mycket mer, vilket en animerad HTML5-banner enkelt kan hantera.

Vad betyder detta för annonsören?

Problemet med övervikt. Ja, även banderoller är föremål för det. Alla större reklamsajter sätter strikta restriktioner för bannerns vikt i kilobyte.

En GIF-banner är bra för att visa flera statiska ramar, kanske med lite animering av text, knappar eller fotoändringar. I det här fallet går den totala vikten av GIF-bannern inte utöver kraven för reklamplattformar.

Om animeringen innebär förändring av flera hundra bildrutor, ökar vikten på gif-bannern, som de säger på engelska, "dramatiskt", det vill säga dramatiskt. En 20-sekunders GIF, som väger flera megabyte, är vanlig. Och detta ogillas extremt av annonsnätverk, som med rätta är oroliga över hur mycket trafik en användare måste ladda ner för att se bannern.

Så om du behöver en banner med en mängd olika animationseffekter, karaktärsanimering, en interaktiv, responsiv eller videobanner, görs valet till förmån för att beställa en HTML5-banner.