Html5 bannere. Oprettelse af responsive HTML5 FullScreen-bannere

for os er det et banner og klik aflæses herfra. For andre bannere er der andre tekniske krav og der læses klikket anderledes, nu kigger vi på et konkret eksempel.

Container med banner

I andre lektioner vil jeg fortælle dig, hvordan du laver et banner i 100% skærmbredde med animation, og hvordan du opretter og forbereder et layout til hjemmesidens layout efter alle regler.

Filer fra lektionen:

1. Færdiglavede fuldskærmsbannere: klik

Banner (engelsk banner - flag, banner) er et grafisk billede af reklamekarakter, der ligner et reklamemodul i pressen. Det kan enten være et statisk billede eller endda tekst eller indeholde animerede elementer (selv video og interaktive objekter). Som regel kan den indeholde et hyperlink til annoncørens hjemmeside eller en side med yderligere information. Bannerets opgaver er som følger. Sælg først produktet. Hvilket betyder - at tiltrække besøgendes opmærksomhed, interesse potentielle kunder med et annonceret produkt eller service, skubbe dem til at gå til webstedet og motivere til handling(Opfordring til handling). CTA er det ultimative mål for annoncering. Og for det andet er bannerets opgave billed- eller brandannoncering, hvis formål er øge brand awareness og skabe et positivt image om brandet.

Populære typer annoncer på webstedet:

• Grafisk- en simpel type banner til annoncering på internettet. Består af et billede af en vis størrelse og indeholder et link til en reklameressource.
• Flash banner- har store muligheder for animation, dette giver dig mulighed for bedre at formidle information ved hjælp af en kombination af vektor- og rastergrafik.
• HTML5 banner- en kombination af HTML-elementer ved hjælp af animationer og godt visuelt design, tilpasset til enhver enhed og browser.

De vigtigste forskelle mellem HTML og andre typer bannere
Sammenlignet med andre metoder til at skabe bannere giver HTML5-teknologier en række fordele for at tiltrække publikum til ressourcen:

• Annoncer i dette format vil blive vist identisk på alle enheder uden yderligere browserudvidelser.
  HTML5 giver dig flere muligheder for at integrere formularer, knapper på sociale medier, kalendere, kort og andre apps i dine annoncer.
• Let vægt og brug af færre ressourcer påvirker ikke hastigheden af ​​indlæsning af sider i browseren. Flash-teknologier tillader ikke at opnå et sådant resultat.
• For at evaluere effektiviteten af ​​HTML5-bannere kan du se statistik i Google Analytics. Det giver forskellige oplysninger om gæster og linkklik.

En væsentlig ulempe ved flash-teknologier har været den gradvise opgivelse af dem af store virksomheder som Apple, Mozilla og Amazon. Den vigtigste drivkraft for Flash forsvinden var Google. De deaktiverede først Flash-animation i Google Chrome og opgav derefter Flash-annoncer i deres søgeannonceringstjenester til fordel for HTML5.

Måder at lave HTML-bannere på
Bannerudvikling begynder med oprettelsen af ​​en separat side og er indlejret på webstedet via en "iframe". Der er flere metoder til at udvikle reklamebannere til en hjemmeside, vi vil se på de mest populære.

1. Opret en ramme ved hjælp af CSS3 og JavaScript
Rammen giver dig mulighed for at indlæse alle uafhængige dokumenter i et område med specificerede størrelser. Dette kan være forskellig HTML-kode ved hjælp af stilarter og scripts til design. Det er også muligt at implementere et banner gennem "canvas"-området, hvor animationer, tegninger, grafik og endda spil udvikles ved hjælp af JavaScript. For at fremskynde udviklingen kan du bruge tredjepartsbiblioteker, såsom CreateJS.

Fordele:

• Funktionaliteten er ikke begrænset til nogen programmer, du kan implementere hvad som helst.

Fejl:

• Denne proces er ret kompleks og kræver specielle layoutfærdigheder.
• Store arbejdsomkostninger sammenlignet med andre metoder.

2. Adobe Edge Animate
For dem, der er bekendt med Adobe After Effects, vil Adobe Edge Animates interface virke meget bekendt. Adobe Edge Animate har en mere komprimeret funktionalitet rettet mod at udvikle simpelt animeret indhold ved hjælp af HTML5, JavaScript og CSS3. Programmet understøtter import af formater såsom .svg, .png, .jpeg, .gif, HTML; understøttelse af video- og lydformater.

Der er mere end 30 indbyggede effekter, hvilket forenkler tiden med at skabe animation af høj kvalitet flere gange:

Fordele:

• Der er mange tilgængelige video-tutorials på internettet om, hvordan du bruger programmet.
• Enkel funktionalitet, de fleste processer er automatiserede.
• Programmet kræver ikke kendskab til HTML5, JavaScript og CSS3.
• Efter arbejdets afslutning modtager vi alle de nødvendige dokumenter til at placere banneret på siden. Billeder - en mappe med grafiske elementer af banneret, flere JavaScript, html-filer og en An-fil - til efterfølgende redigering af filen i programmet.
• Det færdige banner understøttes af alle moderne browsere og mobilapplikationer og opfylder alle tekniske krav til reklamekampagner i Yandex og Google.

Fejl:

• Grænsefladen er kun på engelsk.
• Siden 2015 er Adobe stoppet med at udvikle Adobe Edge Animate-projektet, og programmet er ikke blevet opdateret siden da og har nået sin udviklingsgrænse. Edge Animate er stadig tilgængelig til download i Creative Cloud-arkiverne.

3.Adobe Animate CC
Animate CC er et omdøbt produkt fra Adobe Flash Professional. For nylig har Flash-teknologien mistet brugernes tillid, og programmet trængte til en navneændring og flere ændringer. Grundlæggende er dette det samme Flash Professional-program, men hvor filerne desuden gemmes i HTML5 og JavaScript.

Interfacet minder meget om Flash Professional, men programmerne har forskellige muligheder.

Fordele:

• Mulighed for at lave tredimensionel grafik. Der er et kameraværktøj, der giver dig mulighed for at fange dybden af ​​billedet til ægte animation.
• I modsætning til Edge Animate har Animate CC et stort udvalg af vektorpensler og muligheden for at arbejde med rastergrafik.
• Programmet er relativt nyt, så Adobe udvikler aktivt projektet, frigiver opdateringer og forbedrer Animate CC.
• Der er en russisk version.
• Avancerede muligheder for at eksportere filer til formater: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Ved at trykke på én knap gemmes bannerelementer i sprites, hvilket reducerer bannerindlæsningstiden.

Fejl:

• Nyheden af ​​programmet betragtes også som en ulempe. Der er ikke så mange tutorials om, hvordan man laver animation i Animate CC, som der er i Adobe Edge Animate. Derfor skal driften af ​​nogle funktioner studeres uafhængigt, hvilket ikke er let. Programmet er ret kompliceret at studere på egen hånd, men du kan finde ud af det.
• Nogle funktioner er ikke automatiserede som i Edge Animate, hvilket også øger banneroprettelsestiden.

4. Google Web Designer
Google glædede os med en gratis editor, der er specielt oprettet til implementering af HTML-bannere. Google Web Designer er helt skræddersyet til implementering af annoncering, hvis hovedfokus er på AdWords.

Hvis vi ser på vinduet til oprettelse af en ny fil, vil vi bemærke, at annonceskabelonstørrelserne allerede er indbygget i programmet.

Fordele:

• Enkel grænseflade.
• Tilgængelighed af skabeloner til annoncering i Google.
• Helt gratis program.
• Tilgængeligheden af ​​russisk version.
• Adaptivt bannerdesign er inkluderet. HTML-banneret vil se godt ud i enhver skærmopløsning.

Fejl:

• Funktionaliteten af ​​Google Web Designer er smal nok til at skabe mesterværker af animation. Programmet er stærkt begrænset af skabeloner.
• Mangel på træningsprogrammer. Google Hjælp er ikke nok til fuldt ud at lære funktionaliteten.

Alle metoderne præsenteret ovenfor er ikke nye, men de er bevist. Det betyder, at der er en garanti for, at de oprettede html-bannere vil passere moderation på de fleste reklameplatforme, da deres tekniske krav overholder generelle standarder.

Venner, hej alle sammen. I dag vil vi fortsætte med at skabe bannere i Google Web Designer i HTML5-format, med en 3D-effekt.

Og det er forståeligt, bannere oprettet i html5 og css3 vises på enhver skærm, både på computere, fjernsyn og mobile enheder. Det samme kan ikke siges om flash-bannere.

Derudover kan disse bannere nemt bruges, og banneret vil se godt ud på enhver skærm.

Og i betragtning af det faktum, at mobile enheder i stigende grad bruges til at se internetressourcer, er dette meget vigtigt.

Jeg har allerede beskrevet den vigtigste og dens placering på webstedet i den forrige artikel. Så i dag vil jeg være opmærksom på at skabe en 3D-effekt og cykliske (gentage) indstillinger. Vi vil også se på flere indstillinger for "begivenheder".

Det er ret svært at beskrive hele denne proces i detaljer, så jeg tilbyder dig en videotutorial. Dette vil gøre det meget lettere at mestre materialet. Download også arkivet med mit bannerprojekt som et visuelt eksempel.

Forbereder på at lave et banner med en 3D-effekt.

Det endelige udseende af banneret afhænger i sidste ende af forberedelsen. Google Web Designer-editoren giver dig mulighed for at skabe realistiske 3D-effekter, og alt dette vil blive skrevet i html-kode, du skal bare samle alt korrekt i den visuelle editor.

For at skabe en 3D-effekt af høj kvalitet skal du først klippe blanks i Photoshop, som senere skal sammenføjes i Google Web Designer.

Som et eksempel forberedte jeg følgende blanks:

Jeg lavede disse blanks i Photoshop, men der er mange lignende billeder på internettet. Du behøver ikke anstrenge dig, men tage færdige muligheder.

Bemærk: Hvis du er interesseret i processen med at oprette sådanne blanks, skriv om det i kommentarerne.

Det er også vigtigt at tænke på den overordnede sammensætning af banneret og manuskriptet. Dette bestemmer, hvordan banneret vil blive opfattet som helhed.

Oprettelse af et 3D-objekt i Google Web Designer.

Så i analogi med den forrige artikel, start editoren og opret et nyt projekt.

3D-effekten indebærer et sammensat billede, det vil sige et billede bestående af flere stykker placeret i den ønskede projektion.

Disse flere billeder skal kombineres enten til en gruppe eller placeres i en DIV-blok. Og sådan og sådan vil være korrekt. Men det er mere bekvemt for mig at arbejde med DIV-siden.

Trin 1: Opret en DIV-blok.

Så for at oprette en DIV-blok skal du vælge i venstre panel "Tagging Tool (D)".

Sørg for at tildele et ID. Og juster størrelserne ved hjælp af sektionen "Ejendomme" i højre panel.

Nu skal du vælge blokken. For at gøre dette skal du vælge i venstre panel "udvælgelsesværktøj (V)" og dobbeltklik på venstre museknap på rammen af ​​DIV-blokken. Den skifter farve til rød.

Trin 2. Arrangering af billeder.

Og nu begynder den mest omhyggelige proces. Du skal eksponere alle elementerne i et enkelt billede.

Jeg har følgende ting til min rådighed:

- Overside.

— Side (består af tre separate dele).

Placer først bagsiden (bagsiden) af billedet og juster det til midten og øverste kant af banneret.

Tilføj forsiden på samme måde. Juster og skift langs Z-aksen.

Da sidebredden er 4px (pixels), flyttede jeg for- og bagsiden langs Z-aksen med 2px og -2px. Dette vil give et mellemrum mellem billederne.

Bemærk: se skærmbillederne for nøjagtige forskydningstal.

Tilføj derefter siden, alle delene separat. Brug værktøjerne for at lette placeringen "3D rotation af arbejdsområde" Og "Vægt". De vil hjælpe dig med at justere alle detaljer nøjagtigt.

Til at begynde med foreslår jeg, at du stiller alle billederne op på den ene side, og derefter kopierer dem og placerer dem i en spejlprojektion på den anden side.

Det næste trin er at opstille det øverste venstre hjørne.

Nu den centrale del af siden.

Og nederste hjørne i venstre side.

Sørg for at justere alle sideelementer ved 90 0 langs Y-aksen.

Nu skal du kopiere det ønskede lag og indsætte det igen, omdøbe det og ændre placeringsparametrene, så vi får elementerne til højre side.

For at gøre dette skal du vælge et billede i det nederste panel - tryk på tastekombinationen CTRL + C (kopi) og indsæt duplikatet CTRL + V.

Lad os starte på samme måde som marksiden fra top til bund, men kun for den rigtige.

Øverst højre omslag.

Jeg lavede ikke den nederste del, da den ikke er synlig på billedet.

Det hårdeste arbejde er slut. Nu kan du begynde at opsætte animationen. Lad os som en visuel demonstration rotere billedet.

Oprettelse af en rotationseffekt i Google Web Designer.

Det første trin er at forlade DIV-blokken, som indeholder alle billedelementerne. Det vil sige, at vi arbejdede inde i en blok med specifikke billeder, og nu skal vi arbejde med alle billeder samtidigt og administrere DIV-blokken.

For at begynde skal du klikke på knappen DIV i bundpanelet.

Så på tidshytten opretter du to nøglerammer ved at klikke på højre museknap. Det skal se sådan ud:

Placeringen af ​​den originale ramme på Y-skalaen er indstillet til -90 0 .

Vi sætter den første nøgleramme (den anden) på Y-skalaen til 0 0 .

Indstil den anden nøgleramme (tredje i træk) til 90 0 på Y-skalaen.

Du kan tjekke resultaterne. For at gøre dette skal du klikke på knappen Spil.

Sandt nok vil vores image kun lave én revolution. For at billedet skal rotere konstant eller lave flere omdrejninger, skal du konfigurere cykelparametrene.

Opsætning af cykling i Google Web Designer.

Programmet giver dig mulighed for at konfigurere flere cyklicitet (gentagelse) muligheder. På denne måde kan du opsætte en gentagelse for alle bannerelementer eller for hvert element separat.

Desuden kan cykliciteten begrænses af antallet af gentagelser eller gøres uendelig.

På det nederste panel, ud for hvert element, er der symboler "Castle", "Eye", "Reverse Arrow".

Så for at konfigurere cykliciteten skal du klikke på symbolet "Vend pil". Og vælg enten et begrænset antal gentagelser eller en uendelig mulighed.

Jeg valgte at gentage animationen i det uendelige. For i fremtiden vil jeg konfigurere "Begivenheder" så rotationen stopper, når musen holdes svævende, og fortsætter, efter at markøren er fjernet.

Stopper rotation, når du holder musen over banneret.

Først og fremmest sætter vi en genvej på den første nøgleramme (den anden i træk). For at gøre dette skal du højreklikke over rammen og vælge menupunktet "Tilføj genvej". Indtast navnet på genvejen, og tryk på Enter-tasten.

Og i næste trin vælger du som modtager « Side 1". Der vil ikke være andre muligheder der.

Og det sidste trin, vælg den genvej, du oprettede i den indledende fase.

Gem begivenheder og tjek. Bannerrotationen stopper, når du holder musen over rammen, hvor genvejen blev lavet.

Genoptagelse af rotation efter at have flyttet musemarkøren væk.

For at sikre, at rotationen fortsætter efter at have flyttet markøren til siden, skal du konfigurere en anden begivenhed.

Den er konfigureret på samme måde som den forrige, med kun to forskelle.

Begivenheden er valgt "Mus"— « museud".

Hændelse - tilbagetrækning af mus

Og som en handling "Tidslinje" — « togglePlay".

Handling - Fortsæt

Nu er vores banner med 3D-effekt klar. Og du kan komme med så mange forskellige effekter, som du vil.

Bare glem ikke at indstille en begivenhed til et museklik og åbning af et link. Banneret blev jo ikke skabt for skønhedens skyld.

I starten kan denne proces virke kompliceret, men efter et par bannere vil det ikke længere virke sådan for dig.

Det var alt for mig i dag, venner. Jeg ønsker dig al succes, jeg ser frem til dine kommentarer og se dig i nye artikler og videotutorials.

Med venlig hilsen, Maxim Zaitsev.

HTML5 bannere

fra RUB 2.299

GNIDE

Bestille

I øjeblikket er HTML5-bannere det eneste nuværende format for fuldgyldig animeret bannerannoncering. Dette universelle format på tværs af platforme erstattede Flash-bannere, som havde en række begrænsninger og ulemper.

Hovedårsagerne til dette afslag er følgende:

• Der er akkumuleret krav mod Flash-teknologi inden for computersikkerhed og øget forbrug af processorkraft på mobile enheder;
• nogle browsere er begyndt at blokere Flash som standard;
• på iOS-mobilenheder (iPhone, iPad) blev Flash-skærm ikke leveret af producenten;
• populariteten af ​​Flash-bannerannonceblokeringsprogrammer;
• afvisning af yderligere støtte og udvikling af Flash-teknologi fra dets ejer, Adobe.

Animerede HTML5-bannere kan vises uden begrænsninger i enhver browser, på skærmen på enhver enhed, inklusive smartphones, tablets og medie-tv. Dette er deres tværplatform og alsidighed.

For kunden betyder brugen af ​​HTML5-bannere først og fremmest en udvidelse af publikumsdækningen uden tab.

Hvad kan et HTML5-banner?

Meget. Dette er trods alt det mest avancerede format, der tiltrækker brugerens opmærksomhed og endda interagerer med ham (et interaktivt banner).

Med hensyn til animation kan et sådant banner vise vektoranimation (uden skaleringstab), animation af karakterer, fotos, logoer, grafer og diagrammer, tekst og endda 3D-animation. Fra et interaktivt perspektiv kan et HTML5-banner reagere på brugerhandlinger og tilbyde yderligere indhold og funktioner. Fra et mediesynspunkt kan et HTML5-banner afspille video, dias og lydoptagelser. Med hensyn til responsivitet kan et HTML5-banner strække sig over hele sidens bredde, udvide yderligere paneler eller udvide for at fylde hele skærmen.

Lad os se på hovedtyperne af HTML5-bannere.

Animeret HTML5-banner af fast størrelse.
Det mest populære format i de fleste reklamenetværk. Bredden og højden af ​​de påkrævede bannere vælges fra listen over dem, der accepteres til placering. Vi vil altid foreslå de mest almindelige størrelser.

Udstrækkende HTML5-banner (responsiv, gummi).
Dette er et banner, der kan strække sig til at optage hele skærmens bredde (nogle gange højde). (Flere detaljer kan findes i denne artikel)

Fuldskærms HTML5-banner.
Banner, der åbner fuld skærm. Som regel indeholder den en display-timer og en "Luk"-knap. Især populær til visning på mobile enheder.

Ofte skal et sådant banner være adaptivt under hensyntagen til forskellige orienteringer og opløsninger af den mobile enhed.

Udvidbart HTML5-banner (kan udvides).
Først er det kun startpanelet for et sådant banner (teaser) på skærmen. Når en given algoritme udføres (svæver musen eller klik, timer eller andre begivenheder på siden), åbnes den anden del af banneret med yderligere udvidet information.

HTML5-videobanner.

Afhængigt af indstillingerne og kravene til reklameplatformen kan den vise en video enten med autostart eller efter at have trykket på knappen "Afspil". Kan indeholde kontrol- og mute-knapper. Videofilen er normalt placeret på en ekstern hosting og downloades, når den vises.

Gaming interaktive bannere.
Bannere, der opfordrer brugeren til at deltage i spillet ved at udføre simple handlinger.

Sådanne bannere tiltrækker målgruppens opmærksomhed, vækker stor interesse, men har samtidig en række begrænsninger (for eksempel fraværet af en mouseover-begivenhed på mobile enheder eller begrænsninger i brugen af ​​yderligere scripts). Vi vil altid fortælle dig om disse funktioner, hvis du planlægger at oprette et HTML5-banner til gaming.

"Smarte" HTML5-bannere (beregnere).
De bruges til at involvere og interagere med brugeren og tilbyde ham en øjeblikkelig beregning i henhold til de nødvendige parametre og en formel specificeret af en intern algoritme (for eksempel beregning af et lån, realkreditlån, forbrug af byggematerialer og andre simple operationer).

Redigerbare HTML5-bannere– i nogle tilfælde skal kunden hurtigt foretage ændringer på bannerne uden at ty til hjælp fra udvikleren (f.eks. hyppigt ændrede priser, procenter eller tilbud). Vi kan klare denne opgave og udlæse de nødvendige parametre direkte i bannerets HTML-kode, hvor kunden selvstændigt kan foretage ændringer. Du kan tilbyde en anden løsning, der er praktisk for dig til at udlæse de data, der bruges af banneret, til eksterne filer.

HTML5-bannere, der fungerer med indlæsning af eksterne data og API.
I øjeblikket forbyder mange reklamenetværk bannere i at nå eksterne kilder. Men hvis banneret placeres på et websted, der giver en sådan mulighed, kan HTML5-banneret anmode om de nødvendige oplysninger (tekst, tal, anførselstegn) gennem webstedets API og, efter at have behandlet dem i henhold til en given algoritme, vise det til bruger.

3D HTML5 bannere.
Sådanne bannere tiltrækker brugerens opmærksomhed ved at skabe tredimensionelle billedmodeller på siden.

Et HTML5 3D-banner kan implementeres som et roterende objekt, hvis kanter indeholder bannerrammer, som en rulleliste eller ved at bruge andre 3D-effekter.

Bemærk, at et HTML5-banner kan indeholde flere af de beskrevne funktioner på én gang. For eksempel kan et videobanner strække sig over hele sidens bredde, og en 3D-animation kan udvides på siden afhængigt af brugerhandlinger.

Hvis du ønsker at bestille et HTML5-banner på vores hjemmeside, og din kreative idé kræver at kombinere forskellige formater, kan vores specialister altid gøre dette.

HTML5 banner - hvad er det teknisk set?

Det er bedst at tænke på et HTML5-banner som et miniwebsted. Ingen overdrivelse.

HTML5, som giver dette bannerformat sit navn, er et web-side markup-sprog, eller med andre ord layout-sprog. Og den er udformet efter de samme love som enhver moderne hjemmeside. Det kan indeholde div-beholdere, plug-in-skrifttyper, css-stile og js-scripts. Hovedelementet er canvas-animationsbeholderen. Selve animationen er implementeret ved hjælp af et java-script, ofte ved hjælp af js-biblioteker, der er specielt designet til animation.

Hvad er der indeni? Hvorfor i arkivet? Hvorfor er der så mange filer?

Det er rigtigt, for vi er vant til, at et banner er én JPG-billedfil eller en "gif" eller et "flashdrev". Men husk, som vi skrev ovenfor, et HTML5-banner er i bund og grund et mini-site. Den indeholder mange filer og leveres til reklameplatformen i et zip-arkiv. Inde i arkivet er der en primær HTML-fil, java script-filer, biblioteker, typografiark og brugte billeder.

Bemærk. I nogle tilfælde kan en reklameplatform kræve, at du leverer hele banneret i én fil, inklusive alle brugte scripts og billeder i base-64-format. Dette er ikke et problem for en erfaren udvikler. Et sådant krav øger dog den tid, det tager at producere et banner og foretage ændringer i det. Heldigvis er et sådant krav sjældent.

Hvordan kan jeg se det sendte HTML5-banner på min computer?

Meget simpelt. Pak zip-arkivet ud og åbn HTML-filen inde i din browser.

Hvordan kan jeg kontrollere, at jeg har modtaget det korrekte HTML5-banner?

Hvis der oprettes et banner til Googles annonceringstjenester, er et glimrende værktøj til at kontrollere kvaliteten af ​​designerens arbejde til din tjeneste - Googles online HTML5-validator. Det er nemt at bruge: Upload dit zip-arkiv med et banner og se, om det passerer tjeklisten. Fejl markeres med røde ikoner. Hvis de ikke er der, var din udviklers arbejde ikke forgæves, og banneret er klar til placering i Google adWords eller Double Click.

I reklamenetværkene Yandex, Mail.ru, Rambler, adFox, adRiver og andre kontrolleres banneret også for overholdelse af tekniske krav, efter at det er uploadet til systemets websted. I tilfælde af problemer kan du modtage en kommentar fra moderator, der beskriver fejlen. Nogle websteder giver annonceringskunden mulighed for at få vist banneret på en testside.

Alligevel er den bedste garanti for den korrekte produktion af et HTML5-banner udviklerens erfaring, hans viden om de tekniske krav til reklameplatforme og hans vilje til omgående at rette fejl.

Er et banner med animation i Java Script anderledes?

Bliv ikke forvirret. "Java Script banner", "Canvas banner" - vi taler om præcis det, der almindeligvis kaldes et "HTML5 banner". Afhængigt af udviklerværktøjet kan js-biblioteker eller layoutregler ændre sig, men den generelle samlingsordning forbliver den samme.

Hvordan opretter man et HTML5-banner?

Den mest populære editor blandt designere til at skabe HTML5-animationer er programmet Adobe Animate.

Google tilbyder sit eget udviklingsværktøj - Google Web Designer. Blandt dets fordele er tilstedeværelsen af ​​mange indbyggede skabeloner og muligheden for at udgive et banner direkte til Googles annonceringstjenester: AdWords og Double Click. Blandt ulemperne er begrænsede animationsmuligheder.

Nogle designere, ofte amerikanske, bruger Green Sock Animation Platform-editoren og biblioteker. De har dog ikke fået nævneværdig udbredelse i vores land.

I betragtning af at alle de nødvendige komponenter er open source, kan en god specialist oprette et HTML5-banner selv i en simpel teksteditor. Denne metode er dog ikke effektiv sammenlignet med at bruge professionelle animationsprogrammer.

Tekniske krav til HTML5-bannere.

Kravene vedrører:

• total vægt af HTML5-banneret i kb.;
• zip-arkivstruktur, antal mapper og filer;
• liste over tilladte filformater;
• en måde at aktivere URL-links ved at klikke på et banner (bannerfirmware);
• liste over tilladte js-biblioteker på ekstern hosting;
• procedure og begrænsninger for tilslutning af video- og lydfiler;
• krav til rammedesign, ansvarsfraskrivelser, frekvens og antal animationscyklusser, belastning på enhedens processor.

Og dette er ikke en komplet liste over krav, som vores udviklere skal tage højde for for at kunne give kunden et HTML5-banner, der er klar til placering og starten af ​​en annoncekampagne uden forsinkelser.

Hvad skal jeg gøre med mine tidligere oprettede Flash-bannere?

Se selv - de største reklamenetværk accepterer ikke længere Flash-bannere til placering, Flash-komponenter er blokeret i browsere og på iOS-enheder, Swiffy (den eneste passende online-konvertering af Flash-bannere til HTML5) er holdt op med at virke.

Automatisk konvertering af Flash-format til HTML5 er næsten umuligt – faktisk kræver det en komplet manuel genopbygning i en HTML5-editor. I en sådan situation ville den rigtige beslutning være at bestille oprettelsen af ​​et nyt sæt animerede bannere i det moderne og universelle HTML5-format.

Hvad med "gifs"?

Du skal forstå, at enhver GIF-animation er et sekventielt sæt rammebilleder, ligesom i videofiler. GIF-filen kan indeholde oplysninger om billedafspilningshastigheden og antallet af gentagelser. Dette begrænser hans evner.

Et GIF-banner kan ikke fungere med vektorgrafik, skabe animation programmatisk, tilpasse sig den ønskede størrelse og meget mere, hvilket et animeret HTML5-banner sagtens kan klare.

Hvad betyder det for annoncøren?

Problemet med overvægt. Ja, selv bannere er modtagelige for det. Alle større reklameplatforme sætter strenge begrænsninger for bannervægt i kilobyte.

Et GIF-banner er godt til at vise et par statiske rammer, måske med en lille animation af tekst, en knap eller skiftende billeder. I dette tilfælde overstiger den samlede vægt af GIF-banneret ikke kravene til reklameplatforme.

Hvis animationen involverer ændringen af ​​flere hundrede billeder, så stiger vægten af ​​GIF-banneret, som de siger på engelsk, "dramatisk", det vil sige dramatisk. En 20-sekunders GIF, der vejer flere megabyte, er almindelig. Og dette er ekstremt utilfreds med reklamenetværk, som med rette er bekymrede over, hvor meget trafik brugeren skal downloade for at se banneret.

Så hvis du har brug for et banner med mange animationseffekter, karakteranimation, interaktivt, adaptivt eller videobanner, er valget taget til fordel for at bestille et HTML5-banner.

Internettet er fyldt med reklamer. På mange sider er dette iøjnefaldende reklame for slankebørster, på andre er det Yandex.Direct eller Google AdSense. Og kun på nogle kan du se smukke bannere, der ikke irriterer brugerne ved deres blotte udseende. Fra min anmeldelse vil du lære, hvordan du selv laver et smukt HTML5-banner uden indledende færdigheder.

bannersnack er en online service til at lave HTML5 og Flash bannere i forskellige formater, som ikke kræver viden om kode eller færdigheder i at arbejde med billedredigering.

Tjenesten tilbyder at oprette to typer bannere: et almindeligt banner eller et tilfældigt banner, når siden indlæses. Du kan også starte din annoncekampagne på Google eller Facebook ved hjælp af banersnack. Men først ting først.

banner maker

Det er i denne sektion, du kan oprette dit første banner. Tjenesten tilbyder bannere i HTML5- eller Flash-format. Da alle forsøger at dræbe Flash, vil jeg beskrive HTML5-editoren.

Når du starter guiden, tilbydes der straks flere færdige skabeloner:

Muligheden for at lave et banner fra bunden forsvinder selvfølgelig aldrig. Øverst i guiden er størrelsen på det fremtidige banner angivet:

Når du vælger en størrelse, vil mønstrene også ændre sig. Det er bedst at foretrække en foruddefineret størrelse frem for at angive din egen, da bannersnack i sidste ende kan nægte at generere et sådant banner.

Når du opretter dit banner, åbnes følgende editor:

Til venstre er en liste over alle bannerslides, som hver vil have sit eget billede og tekst. Øverst er værktøjerne til at lave et banner, og til højre er lagegenskaberne.

Du kan tilføje dit eget billede, tekst, knap, form eller video som et banner. Jeg tilføjede et billede og en knap:

Når du vælger et element, vil flere skabeloner blive tilbudt, men som altid er det sidste ord dit:

Hvert lag har tre egenskabsfaner. Placering på siden, farve, form osv.:

Handling ved at klikke på et lag:

Du kan angive en overgang til næste dias eller et link.

Animationsegenskaber ved ændring af et dias:

Når du er færdig med at redigere dit banner, skal du blot klikke på Gem og vælge et navn til dit banner:

Derefter åbnes en liste over alle dine bannere med koder til indsættelse på siden:

Det er vigtigt at bemærke, at når du ændrer et banner på bannersnack-siden, vil det også opdatere på dit websted. Der er ingen grund til at kopiere indlejringskoden igen.

banner rotator

Her oprettes statiske bannere, der indlæses tilfældigt, når siden indlæses.

Guiden tilbyder at vælge mellem allerede oprettede bannere eller oprette et nyt:

Når du tilføjer dit eget billede, kan du kun angive overgangs-URL:

Så er der kun tilbage at hente indlejringskoden på siden igen:

Sådan kan selv en uerfaren bruger ved hjælp af bannersnack skabe sit eget smukke cross-browser banner.