HTML5 bannere. Opprette responsive HTML5 fullskjermbannere

for oss er det et banner og klikk leses fra denne. For andre bannere er det andre tekniske krav og der leses klikket annerledes, nå ser vi på et konkret eksempel.

Container med banner

I andre leksjoner vil jeg fortelle deg hvordan du lager et banner med 100 % skjermbredde med animasjon og hvordan du lager og forbereder et layout for nettsidelayout i henhold til alle reglene.

Filer fra leksjonen:

1. Ferdige fullskjermbannere: klikk

Banner (engelsk banner - flagg, banner) er et grafisk bilde av reklamekarakter, som ligner på en reklamemodul i pressen. Det kan enten være et statisk bilde eller til og med tekst, eller inneholde animerte elementer (til og med video og interaktive objekter). Som regel kan den inneholde en hyperkobling til annonsørens nettside eller en side med tilleggsinformasjon. Banners oppgaver er som følger. Først, selg produktet. Som betyr - tiltrekke besøkendes oppmerksomhet, renter potensielle kunder med et annonsert produkt eller en tjeneste, press dem til å gå til nettstedet og motivere til handling(Oppfordring til handling). CTA er det ultimate målet for annonsering. Og for det andre er bannerets oppgave bilde- eller merkevareannonsering, hvis formål er øke merkekjennskapen og skape et positivt bilde om merkevaren.

Populære typer annonser på nettstedet:

• Grafisk- en enkel type banner for annonsering på Internett. Består av et bilde av en viss størrelse og inneholder en lenke til en annonseringsressurs.
• Flash banner- har store muligheter for animasjon, dette lar deg bedre formidle informasjon ved hjelp av en kombinasjon av vektor- og rastergrafikk.
• HTML5-banner- en kombinasjon av HTML-elementer ved hjelp av animasjoner og god visuell design, tilpasset enhver enhet og nettleser.

De viktigste forskjellene mellom HTML og andre typer bannere
Sammenlignet med andre metoder for å lage bannere, gir HTML5-teknologi en rekke fordeler for å tiltrekke publikum til ressursen:

• Annonser i dette formatet vil bli vist identisk på alle enheter uten ekstra nettleserutvidelser.
  HTML5 gir deg flere muligheter for å integrere skjemaer, sosiale medier-knapper, kalendere, kart og andre applikasjoner i annonsene dine.
• Lett vekt og bruk av færre ressurser påvirker ikke hastigheten på innlasting av sider i nettleseren. Flash-teknologier tillater ikke å oppnå et slikt resultat.
• For å evaluere effektiviteten til HTML5-bannere kan du se statistikk i Google Analytics. Den gir forskjellig informasjon om gjester og lenkeklikk.

En betydelig ulempe med flash-teknologier har vært den gradvise oppgivelsen av dem av store selskaper som Apple, Mozilla og Amazon. Den viktigste drivkraften for forsvinningen av Flash var Google. De deaktiverte først Flash-animasjon i Google Chrome, og forlot deretter Flash-annonser i søkeannonseringstjenestene til fordel for HTML5.

Måter å lage HTML-bannere på
Bannerutvikling begynner med opprettelsen av en egen side og er innebygd på nettstedet via en "iframe". Det er flere metoder for å utvikle reklamebannere for en nettside, vi skal se på de mest populære.

1. Lag en ramme ved å bruke CSS3 og JavaScript
Rammen lar deg laste inn alle uavhengige dokumenter i et område med spesifiserte størrelser. Dette kan være forskjellig HTML-kode ved hjelp av stiler og skript for design. Det er også mulig å implementere et banner gjennom "lerret"-området, der animasjoner, tegninger, grafikk og til og med spill utvikles ved hjelp av JavaScript. For å få fart på utviklingen kan du bruke tredjepartsbiblioteker, for eksempel CreateJS.

Fordeler:

• Funksjonaliteten er ikke begrenset til noen programmer du kan implementere hva som helst.

Feil:

• Denne prosessen er ganske kompleks og krever spesielle layoutkunnskaper.
• Store arbeidskostnader sammenlignet med andre metoder.

2. Adobe Edge Animate
For de som er kjent med Adobe After Effects, vil Adobe Edge Animates grensesnitt virke veldig kjent. Adobe Edge Animate har en mer komprimert funksjonalitet rettet mot å utvikle enkelt animert innhold ved hjelp av HTML5, JavaScript og CSS3. Programmet støtter import av formater som .svg, .png, .jpeg, .gif, HTML; støtte for video- og lydformater.

Det er mer enn 30 innebygde effekter, noe som forenkler tiden for å lage animasjon av høy kvalitet flere ganger:

Fordeler:

• Det er mange tilgjengelige videoopplæringer på Internett om hvordan du bruker programmet.
• Enkel funksjonalitet, de fleste prosesser er automatiserte.
• Programmet krever ikke kunnskap om HTML5, JavaScript og CSS3.
• Etter endt arbeid mottar vi alle nødvendige dokumenter for å plassere banneret på siden. Bilder - en mappe med grafiske elementer av banneret, flere JavaScript, html-filer og en An-fil - for senere redigering av filen i programmet.
• Det ferdige banneret støttes av alle moderne nettlesere og mobilapplikasjoner og oppfyller alle tekniske krav til reklamekampanjer i Yandex og Google.

Feil:

• Grensesnittet er kun på engelsk.
• Siden 2015 har Adobe sluttet å utvikle Adobe Edge Animate-prosjektet har ikke blitt oppdatert siden da og har nådd utviklingsgrensen. Edge Animate er fortsatt tilgjengelig for nedlasting i Creative Cloud-arkivene.

3.Adobe Animate CC
Animate CC er et omdøpt produkt fra Adobe Flash Professional. Nylig har Flash-teknologien mistet tilliten til brukerne, og programmet trengte en navneendring og flere modifikasjoner. I hovedsak er dette det samme Flash Professional-programmet, men hvor filer i tillegg lagres i HTML5 og JavaScript.

Grensesnittet er veldig likt Flash Professional, men programmene har forskjellige muligheter.

Fordeler:

• Mulighet for å lage tredimensjonal grafikk. Det er et kameraverktøy som lar deg fange dybden av rammen for ekte animasjon.
• I motsetning til Edge Animate har Animate CC et stort utvalg av vektorbørster og muligheten til å jobbe med rastergrafikk.
• Programmet er relativt nytt, så Adobe utvikler prosjektet aktivt, gir ut oppdateringer og forbedrer Animate CC.
• Det er en russisk versjon.
• Avanserte alternativer for å eksportere filer til formater: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Ved å trykke på én knapp lagres bannerelementer i sprites, og reduserer dermed lastetiden for banneret.

Feil:

• Nyheten i programmet anses også som en ulempe. Det er ikke så mange opplæringsprogrammer om hvordan du lager animasjon i Animate CC som det er i Adobe Edge Animate. Derfor må driften av noen funksjoner studeres uavhengig, noe som ikke er lett. Programmet er ganske komplisert å studere på egen hånd, men du kan finne ut av det.
• Noen funksjoner er ikke automatisert som i Edge Animate, noe som også øker banneropprettingstiden.

4. Google Web Designer
Google gledet oss med en gratis editor spesielt laget for å implementere HTML-bannere. Google Web Designer er helt skreddersydd for implementering av annonsering, hvor hovedfokuset er på AdWords.

Hvis vi ser på vinduet for å lage en ny fil, vil vi legge merke til at annonsemalstørrelsene allerede er innebygd i programmet.

Fordeler:

• Enkelt grensesnitt.
• Tilgjengelighet av maler for annonsering i Google.
• Helt gratis program.
• Tilgjengelighet av russisk versjon.
• Adaptiv bannerdesign er inkludert; HTML-banneret vil se bra ut i alle skjermoppløsninger.

Feil:

• Funksjonaliteten til Google Web Designer er smal nok til å lage mesterverk av animasjon. Programmet er sterkt begrenset av maler.
• Mangel på treningsprogram. Google Hjelp er ikke nok til å lære funksjonaliteten fullt ut.

Alle metodene som er presentert ovenfor er ikke nye, men de er beviste. Dette betyr at det er en garanti for at de opprettede HTML-bannerne vil passere moderasjon på de fleste reklameplattformer, siden deres tekniske krav er i samsvar med generelle standarder.

Venner, hei alle sammen. I dag vil vi fortsette å lage bannere i Google Web Designer i HTML5-format, med en 3D-effekt.

Og dette er forståelig, bannere laget i html5 og css3 vises på alle skjermer, både på datamaskiner, TV-er og mobile enheter. Det samme kan ikke sies om flash-bannere.

I tillegg kan disse bannerne enkelt brukes og banneret vil se bra ut på hvilken som helst skjerm.

Og gitt det faktum at mobile enheter i økende grad brukes til å se Internett-ressurser, er dette veldig viktig.

Jeg har allerede beskrevet den viktigste og dens plassering på nettstedet i forrige artikkel. Så i dag skal jeg være oppmerksom på å lage en 3D-effekt og sykliske (gjenta) innstillinger. Vi vil også se på flere innstillinger for "hendelser".

Det er ganske vanskelig å beskrive hele denne prosessen i detalj, så jeg tilbyr deg en videoopplæring. Dette vil gjøre det mye lettere å mestre materialet. Last også ned arkivet med bannerprosjektet mitt som et visuelt eksempel.

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

Det endelige utseendet til banneret avhenger til syvende og sist av forberedelsen. Google Web Designer-editoren lar deg lage realistiske 3D-effekter og alt dette vil bli skrevet i html-kode, du trenger bare å sette sammen alt riktig i den visuelle editoren.

For å lage en 3D-effekt av høy kvalitet, må du først kutte blanke i Photoshop, som senere må slås sammen i Google Web Designer.

Som et eksempel forberedte jeg følgende blanks:

Jeg laget disse blankene i Photoshop, men det er mange lignende bilder på Internett. Du trenger ikke anstrenge deg, men ta ferdige alternativer.

Merk: Hvis du er interessert i prosessen med å lage slike blanks, skriv om det i kommentarene.

Det er også viktig å tenke på den generelle sammensetningen av banneret og manuset. Dette avgjør hvordan banneret vil bli oppfattet som en helhet.

Opprette et 3D-objekt i Google Web Designer.

Så, analogt med forrige artikkel, start redigeringsprogrammet og lag et nytt prosjekt.

3D-effekten innebærer et sammensatt bilde, det vil si et bilde som består av flere deler plassert i ønsket projeksjon.

Disse flere bildene må kombineres enten til en gruppe eller plasseres i en DIV-blokk. Og det og det vil være riktig. Men det er mer praktisk for meg å jobbe med DIV-siden.

Trinn 1: Lag en DIV-blokk.

Så for å lage en DIV-blokk, velg i venstre panel "Tagging Tool (D)".

Sørg for å tildele en ID. Og juster størrelsene ved hjelp av seksjonen "Egenskaper" i høyre panel.

Nå må du velge blokken. For å gjøre dette, velg i venstre panel "utvalgsverktøy (V)" og dobbeltklikk venstre museknapp på rammen til DIV-blokken. Den vil endre farge til rød.

Trinn 2. Ordne bilder.

Og nå begynner den mest møysommelige prosessen. Du må eksponere alle elementene i ett enkelt bilde.

Jeg har følgende ting til rådighet:

- Oversiden.

— Side (består av tre separate deler).

Plasser først baksiden av bildet og juster det til midten og øvre kant av banneret.

Legg til forsiden på samme måte. Juster og skift langs Z-aksen.

Siden sidebredden er 4px (piksler), forskjøv jeg for- og baksiden langs Z-aksen med 2px og -2px. Dette vil gi et gap mellom bildene.

Merk: se skjermbildene for nøyaktige forskyvningstall.

Deretter legger du til siden, alle delene separat. For enkel plassering, bruk verktøyene "3D rotasjon av arbeidsområdet" Og "Skala". De vil hjelpe deg med å justere alle detaljene nøyaktig.

Til å begynne med foreslår jeg at du setter opp alle bildene på den ene siden, for så å kopiere dem og plassere dem i en speilprojeksjon på den andre siden.

Neste trinn er å stille opp i øvre venstre hjørne.

Nå den sentrale delen av siden.

Og nederste hjørne på venstre side.

Pass på å justere alle sideelementer ved 90 0 langs Y-aksen.

Nå må du kopiere ønsket lag og lime det inn igjen, gi det nytt navn og endre plasseringsparametrene, slik at vi får elementene til høyre side.

For å gjøre dette, velg et bilde i bunnpanelet - trykk på tastekombinasjonen CTRL + C (kopier) og lim inn dupliserte CTRL + V.

La oss starte på samme måte som feltsiden fra topp til bunn, men bare for den rette.

Øvre høyre omslag.

Jeg gjorde ikke den nedre delen, siden den ikke er synlig på bildet.

Det hardeste arbeidet er over. Nå kan du begynne å sette opp animasjonen. Som en visuell demonstrasjon, la oss rotere bildet.

Opprette en rotasjonseffekt i Google Web Designer.

Det første trinnet er å avslutte DIV-blokken, som inneholder alle bildeelementene. Det vil si at vi jobbet inne i en blokk med spesifikke bilder, og nå må vi jobbe med alle bildene samtidig og administrere DIV-blokken.

For å begynne, klikk på DIV-knappen i bunnpanelet.

Så, på tidshytten, ved å klikke med høyre museknapp, oppretter du to nøkkelrammer. Det skal se slik ut:

Plasseringen av originalrammen på Y-skalaen er satt til -90 0 .

Vi setter den første nøkkelrammen (den andre) på Y-skalaen til 0 0 .

Sett den andre nøkkelrammen (tredje på rad) til 90 0 på Y-skalaen.

Du kan sjekke resultatene. For å gjøre dette, klikk på knappen Spille.

Riktignok vil bildet vårt bare gjøre én revolusjon. For at bildet skal rotere konstant eller gjøre flere omdreininger, må du konfigurere sykkelparametrene.

Sette opp sykling i Google Web Designer.

Programmet lar deg konfigurere flere syklisitet (repetisjon) alternativer. På denne måten kan du sette opp en repetisjon for alle bannerelementer eller for hvert element separat.

Du kan også begrense syklisiteten til antall repetisjoner eller gjøre den uendelig.

På bunnpanelet, ved siden av hvert element, er det symboler "Castle", "Eye", "Reverse Arrow".

Så for å konfigurere syklusen må du klikke på symbolet "Reverser pil". Og velg enten et begrenset antall repetisjoner eller et uendelig alternativ.

Jeg valgte å gjenta animasjonen i det uendelige. For i fremtiden vil jeg konfigurere "Arrangementer" slik at rotasjonen stopper når musen holdes og fortsetter etter at markøren er fjernet.

Stopper rotasjonen når du holder musen over banneret.

Først av alt setter vi en snarvei på den første nøkkelrammen (den andre på rad). For å gjøre dette, høyreklikk over rammen og velg menyelementet "Legg til snarvei". Skriv inn navnet på snarveien og trykk på Enter-tasten.

Og i neste trinn velger du som mottaker « Side 1". Det vil ikke være andre alternativer der.

Og det siste trinnet, velg snarveien du opprettet på det innledende stadiet.

Lagre hendelser og sjekk. Bannerrotasjonen stopper når du holder musen over rammen der snarveien ble laget.

Gjenopptagelse av rotasjon etter å ha flyttet musepekeren bort.

For å sikre at rotasjonen fortsetter etter at du har flyttet markøren til siden, sett opp en annen hendelse.

Den er konfigurert på samme måte som den forrige, med bare to forskjeller.

Hendelsen er valgt "Mus"— « museut".

Hendelse - tilbaketrekking av mus

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

Handling - Fortsett

Nå er banneret vårt med 3D-effekt klar. Og du kan komme opp med så mange forskjellige effekter du vil.

Bare ikke glem å angi en hendelse for et museklikk og åpne en lenke. Banneret ble ikke laget for skjønnhetens skyld, tross alt.

I utgangspunktet kan denne prosessen virke komplisert, men etter et par bannere vil du ikke tro det lenger.

Det var alt for meg i dag, venner. Jeg ønsker deg all suksess, jeg ser frem til kommentarene dine og se deg i nye artikler og videoopplæringer.

Med vennlig hilsen, Maxim Zaitsev.

HTML5-bannere

fra RUB 2.299

GNI

Rekkefølge

Foreløpig er HTML5-bannere det eneste gjeldende formatet for fullverdig animert bannerannonsering. Dette universelle tverrplattformformatet erstattet Flash-bannere, som hadde en rekke begrensninger og ulemper.

Hovedårsakene til dette avslaget er følgende:

• Krav har samlet seg mot Flash-teknologi innen datasikkerhet og økt forbruk av prosessorkraft til mobile enheter;
• noen nettlesere har begynt å blokkere Flash som standard;
• på iOS-mobilenheter (iPhone, iPad), ble ikke Flash-skjerm levert av produsenten;
• populariteten til blokkeringsprogrammer for Flash-bannerannonser;
• avslag på ytterligere støtte og utvikling av Flash-teknologi fra eieren, Adobe.

Animerte HTML5-bannere kan vises uten begrensninger i hvilken som helst nettleser, på skjermen til enhver enhet, inkludert smarttelefoner, nettbrett og media-TV. Dette er deres tverrplattform og allsidighet.

For kunden betyr bruken av HTML5-bannere for det første å utvide publikumsdekningen uten tap.

Hva kan et HTML5-banner gjøre?

Mye. Tross alt er dette det mest avanserte formatet som tiltrekker brukerens oppmerksomhet og til og med samhandler med ham (et interaktivt banner).

Når det gjelder animasjon, kan et slikt banner vise vektoranimasjon (uten skaleringstap), animasjon av karakterer, bilder, logoer, grafer og diagrammer, tekst og til og med 3D-animasjon. Fra et interaktivt perspektiv kan et HTML5-banner svare på brukerhandlinger og tilby tilleggsinnhold og funksjoner. Fra et mediesynspunkt kan et HTML5-banner spille av video, lysbilder og lydopptak. Når det gjelder respons, kan et HTML5-banner strekke seg over hele bredden av siden, utvide flere paneler eller utvide for å fylle hele skjermen.

La oss se på hovedtypene HTML5-bannere.

Animert HTML5-banner med fast størrelse.
Det mest populære formatet i de fleste annonsenettverk. Bredden og høyden på de nødvendige bannerne velges fra listen over de som er akseptert for plassering. Vi vil alltid foreslå de vanligste størrelsene.

Strekkende HTML5-banner (responsiv, gummi).
Dette er et banner som kan strekke seg til å oppta hele bredden (noen ganger høyden) på skjermen. (Flere detaljer finner du i denne artikkelen)

Fullskjerm HTML5-banner.
Banner som åpner fullskjerm. Som regel inneholder den en visningstidtaker og en "Lukk"-knapp. Spesielt populær for visning på mobile enheter.

Ofte må et slikt banner være adaptivt, og ta hensyn til ulike orienteringer og oppløsninger på mobilenheten.

Utvidbart HTML5-banner (kan utvides).
Til å begynne med er bare startpanelet til et slikt banner (teaser) til stede på skjermen. Når en gitt algoritme utføres (musepeker eller klikk, timer eller andre hendelser på siden), åpnes den andre delen av banneret med ytterligere utvidet informasjon.

HTML5-videobanner.

Avhengig av innstillingene og kravene til reklameplattformen, kan den vise en video enten med autostart eller etter å ha trykket på "Play"-knappen. Kan inneholde kontroll- og demp-knapper. Videofilen er vanligvis plassert på en ekstern hosting og lastes ned når den vises.

Gaming interaktive bannere.
Bannere som oppmuntrer brukeren til å bli med i spillet ved å utføre enkle handlinger.

Slike bannere tiltrekker seg oppmerksomheten til målgruppen, vekker stor interesse, men har samtidig en rekke begrensninger (for eksempel fraværet av en mouseover-hendelse på mobile enheter eller restriksjoner på bruk av ekstra skript). Vi vil alltid fortelle deg om disse funksjonene hvis du planlegger å lage et HTML5-banner.

"Smarte" HTML5-bannere (kalkulatorer).
De brukes til å involvere og samhandle med brukeren, og tilby ham en umiddelbar beregning i henhold til nødvendige parametere og en formel spesifisert av en intern algoritme (for eksempel beregning av lån, boliglån, forbruk av byggematerialer og andre enkle operasjoner).

Redigerbare HTML5-bannere– i noen tilfeller må kunden raskt gjøre endringer i bannerne uten å ty til hjelp fra utvikleren (for eksempel hyppige endringer i priser, prosenter eller tilbud). Vi kan takle denne oppgaven og sende de nødvendige parameterne direkte inn i HTML-koden til banneret, hvor kunden selvstendig kan gjøre endringer. Du kan tilby en annen løsning som er praktisk for deg å sende ut dataene som brukes av banneret til eksterne filer.

HTML5-bannere som fungerer med lasting av eksterne data og API.
For øyeblikket forbyr mange annonsenettverk bannere fra å nå eksterne kilder. Men hvis banneret er plassert på et nettsted som gir en slik mulighet, kan HTML5-banneret be om nødvendig informasjon (tekst, tall, anførselstegn) gjennom nettstedets API og, etter å ha behandlet dem i henhold til en gitt algoritme, vise den til bruker.

3D HTML5-bannere.
Slike bannere tiltrekker brukerens oppmerksomhet ved å lage tredimensjonale bildemodeller på siden.

Et HTML5 3D-banner kan implementeres som et roterende objekt hvis kanter inneholder bannerrammer, som en rullegardinbok eller ved å bruke andre 3D-effekter.

Merk at et HTML5-banner kan inneholde flere av de beskrevne funksjonene samtidig. For eksempel kan et videobanner strekke seg over hele bredden av siden, og en 3D-animasjon kan utvides på siden avhengig av brukerhandlinger.

Hvis du ønsker å bestille et HTML5-banner på nettsiden vår, og din kreative idé krever å kombinere ulike formater, kan våre spesialister alltid gjøre dette.

HTML5-banner - hva er det teknisk sett?

Det er best å tenke på et HTML5-banner som et mininettsted. Ingen overdrivelse.

HTML5, som gir dette bannerformatet navnet sitt, er et merkespråk for nettsider, eller med andre ord, layoutspråk. Og det er lagt opp i henhold til de samme lovene som enhver moderne nettside. Den kan inneholde div-beholdere, plug-in-fonter, css-stiler og js-skript. Hovedelementet er lerretsanimasjonsbeholderen. Selve animasjonen er implementert ved hjelp av et java-skript, ofte ved hjelp av js-biblioteker spesielt designet for animasjon.

Hva er inni? Hvorfor i arkivet? Hvorfor er det så mange filer?

Det stemmer, fordi vi er vant til at et banner er én JPG-bildefil eller en "gif" eller en "flash-stasjon". Men husk, som vi skrev ovenfor, et HTML5-banner er egentlig et mininettsted. Den inneholder mange filer og leveres til reklameplattformen i et zip-arkiv. Inne i arkivet er det en hoved HTML-fil, java script-filer, biblioteker, stilark og brukte bilder.

Merk. I noen tilfeller kan en reklameplattform kreve at du leverer hele banneret i én fil, inkludert alle brukte skript og bilder i base-64-format. Dette er ikke et problem for en erfaren utvikler. Et slikt krav øker imidlertid tiden det tar å produsere et banner og gjøre endringer i det. Heldigvis er et slikt krav sjeldent.

Hvordan kan jeg se det sendte HTML5-banneret på datamaskinen min?

Veldig enkelt. Pakk ut zip-arkivet og åpne HTML-filen inne i nettleseren din.

Hvordan kan jeg sjekke at jeg har mottatt riktig HTML5-banner?

Hvis det opprettes et banner for Googles annonseringstjenester, er et utmerket verktøy for å sjekke kvaliteten på designerens arbeid til tjeneste - Googles online HTML5-validator. Det er enkelt å bruke: Last opp zip-arkivet ditt med et banner og se om det passerer sjekklisten. Feil vil merkes med røde ikoner. Hvis de ikke er der, var ikke utviklerens arbeid forgjeves, og banneret er klart for plassering i Google AdWords eller Double Click.

I annonsenettverkene Yandex, Mail.ru, Rambler, adFox, adRiver og andre, blir banneret også sjekket for overholdelse av tekniske krav etter at det er lastet opp til systemets nettsted. Ved problemer kan du motta en kommentar fra moderator som beskriver feilen. Noen nettsteder gir annonsekunden muligheten til å forhåndsvise banneret på en testside.

Den beste garantien for riktig produksjon av et HTML5-banner er likevel utviklerens erfaring, hans kunnskap om de tekniske kravene til reklameplattformer og hans vilje til å rette opp feil umiddelbart.

Er et banner med animasjon i Java Script annerledes?

Ikke bli forvirret. "Java Script banner", "Canvas banner" - vi snakker om akkurat det som vanligvis kalles en "HTML5 banner". Avhengig av utviklerverktøyet kan js-biblioteker eller layoutregler endres, men generell monteringsskjema forblir det samme.

Hvordan lage et HTML5-banner?

Den mest populære editoren blant designere for å lage HTML5-animasjoner er Adobe Animate-programmet.

Google tilbyr sitt eget utviklingsverktøy – Google Web Designer. Blant fordelene er tilstedeværelsen av mange innebygde maler og muligheten til å publisere et banner direkte for Googles annonseringstjenester: AdWords og Double Click. Blant ulempene er begrensede animasjonsmuligheter.

Noen designere, ofte amerikanske, bruker Green Sock Animation Platform-redaktøren og bibliotekene. De har imidlertid ikke fått nevneverdig distribusjon i vårt land.

Tatt i betraktning at alle nødvendige komponenter er åpen kildekode, kan en god spesialist lage et HTML5-banner selv i et enkelt tekstredigeringsprogram. Denne metoden er imidlertid ikke effektiv sammenlignet med bruk av profesjonelle animasjonsprogrammer.

Tekniske krav til HTML5-bannere.

Kravene gjelder:

• totalvekten av HTML5-banneret i kb;
• zip-arkivstruktur, antall mapper og filer;
• liste over tillatte filformater;
• en måte å aktivere URL-koblinger ved å klikke på et banner (bannerfastvare);
• liste over tillatte js-biblioteker på ekstern hosting;
• prosedyre og restriksjoner for tilkobling av video- og lydfiler;
• krav til rammedesign, ansvarsfraskrivelser, frekvens og antall animasjonssykluser, belastning på enhetens prosessor.

Og dette er ikke en komplett liste over krav som utviklerne våre må ta hensyn til for å kunne gi kunden et HTML5-banner som er klart for plassering og starten av en annonsekampanje uten forsinkelser.

Hva bør jeg gjøre med mine tidligere opprettede Flash-bannere?

Se selv - de største annonsenettverkene aksepterer ikke lenger Flash-bannere for plassering, Flash-komponenter er blokkert i nettlesere og på iOS-enheter, Swiffy (den eneste passende online-konverteren av Flash-bannere til HTML5) har sluttet å fungere.

Automatisk konvertering av Flash-format til HTML5 er nesten umulig - faktisk krever det en fullstendig manuell ombygging i en HTML5-editor. I en slik situasjon vil den riktige avgjørelsen være å beordre opprettelsen av et nytt sett med animerte bannere i det moderne og universelle HTML5-formatet.

Hva med "gifs"?

Du må forstå at enhver GIF-animasjon er et sekvensielt sett med rammebilder, akkurat som i videofiler. GIF-filen kan inneholde informasjon om bildeavspillingshastighet og antall repetisjoner. Dette begrenser evnene hans.

Et GIF-banner kan ikke fungere med vektorgrafikk, lage animasjon programmatisk, tilpasse seg ønsket størrelse og mye mer, noe et animert HTML5-banner enkelt kan håndtere.

Hva betyr dette for annonsøren?

Problemet med overvekt. Ja, selv bannere er mottakelige for det. Alle større reklameplattformer setter strenge restriksjoner på bannervekt i kilobyte.

Et GIF-banner er bra for å vise noen statiske rammer, kanskje med litt animasjon av tekst, en knapp eller skiftende bilder. I dette tilfellet overstiger ikke den totale vekten til GIF-banneret kravene til reklameplattformer.

Hvis animasjonen innebærer endring av flere hundre rammer, øker vekten av GIF-banneret, som de sier på engelsk, "dramatisk", det vil si dramatisk. En 20-sekunders GIF som veier flere megabyte er vanlig. Og dette er ekstremt mislikt av annonsenettverk, som med rette er bekymret for hvor mye trafikk brukeren må laste ned for å se banneret.

Så hvis du trenger et banner med mange animasjonseffekter, karakteranimasjon, interaktivt, adaptivt eller videobanner, er valget tatt til fordel for å bestille en HTML5-banner.

Internett er fylt med reklame. På mange nettsteder er dette iøynefallende reklame for slankebørster, på andre er det Yandex.Direct eller Google AdSense. Og bare på noen kan du se vakre bannere som ikke irriterer brukerne bare på grunn av deres utseende. Fra min anmeldelse vil du lære hvordan du lager et vakkert HTML5-banner selv uten noen innledende ferdigheter.

bannersnack er en nettbasert tjeneste for å lage HTML5 og Flash bannere i ulike formater, som ikke krever kunnskap om kode eller ferdigheter i arbeid med bilderedigering.

Tjenesten tilbyr å lage to typer bannere: et vanlig banner eller et tilfeldig banner når siden lastes. Du kan også lansere annonsekampanjen din på Google eller Facebook ved å bruke banersnack. Men først ting først.

banner maker

Det er i denne delen du kan lage ditt første banner. Tjenesten tilbyr bannere i HTML5- eller Flash-format. Siden alle prøver å drepe Flash, vil jeg beskrive HTML5-editoren.

Når du starter veiviseren, tilbys flere ferdige maler umiddelbart:

Selvfølgelig forsvinner aldri muligheten til å lage et banner fra bunnen av. Øverst i veiviseren er størrelsen på det fremtidige banneret angitt:

Ved valg av størrelse vil også mønstrene endres. Det er best å gi preferanse til en forhåndsdefinert størrelse i stedet for å spesifisere din egen, siden bannersnack til slutt kan nekte å generere et slikt banner.

Når du oppretter banneret ditt, åpnes følgende editor:

Til venstre er en liste over alle bannerlysbildene, som hver vil ha sitt eget bilde og tekst. Øverst er verktøyene for å lage et banner, og til høyre er lagegenskapene.

Du kan legge til ditt eget bilde, tekst, knapp, form eller video som banner. Jeg la til et bilde og en knapp:

Når du velger et element, vil flere maler tilbys, men som alltid er siste ord ditt:

Hvert lag har tre egenskapsfaner. Plassering på siden, farge, form osv.:

Handling ved å klikke på et lag:

Du kan angi en overgang til neste lysbilde eller en lenke.

Animasjonsegenskaper når du endrer et lysbilde:

Når du er ferdig med å redigere banneret ditt, klikker du bare på Lagre og velger et navn for banneret:

Da åpnes en liste over alle bannerne dine med koder for innsetting på siden:

Det er viktig å merke seg at når du endrer et banner på bannersnack-siden, vil det også oppdateres på nettstedet ditt. Det er ikke nødvendig å kopiere innbyggingskoden på nytt.

banner rotator

Her lages det statiske bannere som lastes tilfeldig når siden lastes.

Veiviseren tilbyr å velge mellom allerede opprettede bannere eller lage et nytt:

Når du legger til ditt eget bilde, kan du bare angi overgangs-URL:

Da gjenstår det bare å få innebygde koden på siden igjen:

Slik kan selv en uerfaren bruker, ved hjelp av bannersnack, lage sitt eget vakre banner på tvers av nettlesere.