Moderne web tehnologije u službi sadržajnog marketinga

Sadržajni marketing je odavno ograničen ne samo na pisanje kvalitetnih tekstova. Napredni trgovci i web dizajneri koriste slike, audio i video kako bi pomogli revitalizaciji statičkog sadržaja. Međutim, tijekom protekle godine, sadržajni marketing je dosegao novu razinu zahvaljujući interaktivnom sadržaju.

Uzmimo, primjerice, novi projekt e-novina The New York Times sa šarenim nazivom Snijeg ("Snijeg"). Ova stranica skladno spaja videozapise, slike i zanimljivu priču, odnosno najbolje elemente web tehnologija.

Naravno, gore navedeni portal rezultat je napornog rada profesionalnog tima, koji je uložio velike napore tijekom dugih mjeseci. Možete steći dojam da se uz ograničen proračun ne mogu postići isti rezultati.

Pogriješili ste.

Tehnologije na kojima se temelji ovaj projekt nisu tajna sedam pečata, a lako možete pregledati cijeli programski kod web stranica. Da biste to učinili, idite na stranicu, kliknite desnom tipkom miša na odgovarajući fragment i odaberite opciju "Prikaži element elementa" (ako imate Google Chrome), "Pregledajte element" (ako je Opera) i istražite element (ako je Mozilla Firefox). Ako želite vidjeti cijeli kôd stranice, možete jednostavno pritisnuti ctrl + u. Ova kombinacija tipki radi u svim popisanim preglednicima.

Nakon što to učinite, možete vlastitim očima vidjeti kako su programeri uspjeli postići takve nevjerojatne rezultate, pa čak i koristiti svoju tehnologiju u svojoj praksi. Usput, neki pametni web programeri već su iskoristili ovu prednost. Na primjer, tvrtka Usvsth3m, koja je stvorila zanimljivu parodiju projekta Snowfall, ili tvrtke ScrollKit, koja je uspjela napraviti točnu kopiju projekta u roku od jednog sata.

Naravno, nekolicina se može pohvaliti izvrsnim poznavanjem programskih jezika, ali bit stvari se ne mijenja. Ako je vaša aktivnost na neki način povezana sa sadržajnim marketingom, trebali biste razumjeti barem osnove modernih web tehnologija kako biste svojim klijentima ponudili takve projekte. U ovom članku ćemo pogledati najnovije sadržaje marketinške alate i tehnologije na kojima se temelje. Pokušat ćemo ih predstaviti što je moguće jednostavnije i jasnije kako bi razumjeli i oni ljudi kojima je web programiranje "tamna šuma".

Pomicanje slika

Pogledajmo jednostavan primjer. Concert Hotels je na svojoj internetskoj stranici objavio interaktivnu sliku koja prikazuje kapacitet memorije klasičnog iPod-a, izraženog u vinilnim pločama. Vi samo trebate kliknuti na strelicu prema dolje i ona će početi učitavati cijelu hrpu zapisa koji imitiraju kapacitet iPod-a. Zahvaljujući ovom jednostavnom prijemu, odmah shvatimo suštinu stvari. Osim toga, ova je slika dobila više od 26.000 dionica u društvenim mrežama. Rezultati govore sami za sebe:

S tehničke točke gledišta, stvaranje ove slike je nekoliko trivijalnosti. Hannah Smith, koja je jedna od njegovih razvojnih inženjera, čak je bila zabrinuta jer je bila prejednostavna. Zapravo, gomila zapisa koje vidite pred sobom je samo jedna slika, koja se ponavlja iznova i iznova dok se ne postigne željeni volumen. Zapravo, odabirete broj slika koje želite vidjeti na zaslonu, a zatim pokrenite ciklus, tijekom kojeg se slika ponavlja sve dok se ne postigne zadana vrijednost.

Skriptu slike možete pronaći u izvornom kodu. To je vrlo jednostavno. Možete čak i izdvojiti kod i vidjeti kako to radi u praksi.

Želite li izraditi isti sadržaj? Morate naučiti JavaScript jezik, kao i jednu od njegovih knjižnica - jQuery.

računanje

Jedan od najnovijih trendova u sadržajnom marketingu je prilagodba sadržaja za svakog posjetitelja stranice. To se može postići pomoću matematičkih izračuna koji se izvode "iza kulisa". Primjenom malo magije uz pomoć posebnih kodova, možete dobiti sličan rezultat.

Pogledajmo ovu tehniku ​​na primjeru SeeYourFolks stranice:

Programeri stranice trebali su samo jedan dan kako bi stvorili ovaj učinkovit podsjetnik na važnost obiteljskih veza. Osim toga, imamo odličan primjer korištenja matematike za stvaranje sadržaja.

Načelo korištenja ovog obrasca vrlo je jednostavno. Potrebno je unijeti podatke o tome gdje živite, koliko su stari i koliko često ih vidite tijekom cijele godine. Stranica tada automatski izračunava koliko ih još uvijek možete vidjeti dok su živi.

To se događa na sljedeći način:

  • Kada unesete naziv svoje zemlje, svakom od njih se dodjeljuje određena vrijednost na temelju prosječnog očekivanog životnog vijeka u određenoj zemlji;
  • Starost vaše majke i vašeg oca presavijeni su i podijeljeni na pola da bi dobili prosjek;
  • Ta se prosječna vrijednost oduzima od prosječnog očekivanog trajanja života;
  • Dobiveni broj se množi brojem godišnjih sastanaka s vašim roditeljima;
  • Rezultat je zaokružen.

Postoji i drugi kôd koji se pokreće ako upišete dob samo jednog od roditelja, kao i plan okidanja koji se aktivira ako starost vaših roditelja premašuje prosječnu očekivanu životnu dob u vašoj zemlji. Kôd možete pogledati klikom na ovu vezu. Kao što možete vidjeti, jasno je označeno, tako da možete lako razumjeti što to znači.

Želite li izraditi isti sadržaj? Morate saznati informacije o tome kako izvršiti izračune pomoću JavaScripta.

Interaktivna infografika

Statična infografika je jučer. Ako želite iznenaditi svoje klijente, učinite ga interaktivnim. Izvrstan primjer dinamičke infografike prikazan je na internetskoj stranici tvrtke Gradski parkovi automobila koja pruža usluge parkiranja. Za razliku od prethodnih primjera, JavaScript u ovom slučaju traži da stranica na samoj web-lokaciji generira rezultate, a zatim dinamički mijenja sadržaj stranica.

Ova infografika potiče vozače da ostavljaju svoje automobile na parkiralištu za Božić. Doista, za vrijeme odmora nemoguće je odoljeti iskušenju da pijete alkohol, a, kao što znate, vožnja u pijanom stanju puna je ozbiljnih posljedica.

Posjetiteljima sajta daje se prilika da simuliraju stvarnu situaciju. Na vrhu stranice nalaze se različita alkoholna pića, nakon čega slijedi brojač koji označava broj jedinica alkohola koje ste konzumirali. Sadržaj stranice će se mijenjati ovisno o vašem izboru. Na primjer, ako planirate popiti 6 čaša šampanjca po večeri, brojač će pokazati sljedeći rezultat:

Ako odaberete drugo piće, rezultati će biti različiti, pa će se izvorni kod promijeniti. Pretpostavimo da odlučite ograničiti jednu čašu votke. U tom slučaju, brojač će pokazati jedinicu, ali ćete i dalje biti upozoreni:

"Možda ne prelazite dopušteno ograničenje, ali ne zaboravite da alkohol djeluje različito na različite ljude. Stoga je najsigurnije rješenje ostaviti automobil na parkiralištu i otići kući taksijem."

Otuda zaključak: vaš sadržaj ne mora biti statičan - može se promijeniti, odražavajući izbor vaše publike. Zašto napisati ogroman članak koji opisuje sve moguće rezultate kada možete stvoriti infografiju koja prikazuje informacije relevantne za određenog čitatelja?

Želite li izraditi isti sadržaj? Pregledajte informacije o tome kako se JavaScript koristi za traženje stranica, kao i značajke DOM-a.

Pomicanje stranice

Na nekim web-lokacijama sadržaj se mijenja ovisno o položaju na stranici. Glavni primjer je budućnost dijeljenja automobila. Unatoč činjenici da je u ovom slučaju JavaScript ponovno omogućen, mnogi elementi dizajna stvoreni su zahvaljujući CSS jeziku. Razmotrite sljedeću sliku:

Možete li vjerovati da su svi ovi brežuljci CSS elementi koji se međusobno preklapaju? Ako niste sigurni, možete ih pogledati u glavnoj CSS datoteci.

U njemu ćete dobiti informacije o tome kako su svi elementi slike fiksirani na mjestu. Na prvi pogled, čini se da su dinamični, ali zapravo je većina pozadinske slike fiksna. Samo se vozilo i neki interaktivni dijelovi kreću.

Pretpostavimo da vas zanima kako se pokreće ravnina smještena na samom početku stranice. Da biste to učinili, otvorite infografiju i pogledajte kôd stavke (kako to učiniti, napisali smo gore). Vidjet ćete da postoji poseban kod koji mijenja položaj donjeg dijela zrakoplova, stvarajući na taj način iluziju njegovog kretanja.

Želite li izraditi isti sadržaj? Saznajte CSS i JavaScript animaciju. Isto tako, poznavanje HTML-a 5 ne šteti da bi se ispravno oblikovao kôd.

I opet o projektu Snijeg

Nažalost, na području internetskog marketinga još se nije pojavio točan termin za opisivanje sadržaja, poput Snijega. Unatoč tome, broj takvih primjera stalno raste iz dana u dan.

    U srži, projekt Snijeg se sastoji od sljedećih elemenata:

  • Visokokvalitetan tekstualni sadržaj;
  • Video u MP4 formatu (može vam se činiti da su to samo dinamičke slike, ali zapravo su to videozapisi koji se mogu reproducirati);
  • Prikladne slike;
  • Dobar izgled stranice.

Tako je projekt Snijeg postao internetski dah svježeg zraka, jer skladno spaja sve gore navedene elemente. S tehničkog gledišta, vrlo je jednostavno izvući pojedinačne elemente i vidjeti kako oni rade. Na primjer, slike se aktiviraju kada dođete do određenog položaja na stranici. U tom je slučaju za ovu svrhu korišten Inview dodatak. Postoji još jedan način za postizanje tog učinka. Da biste to učinili, morate koristiti JavaScript za pokretanje slika na određenom mjestu na web stranici. Na primjer, u jednom od članaka o Pitchforku, slika se mijenja sa svakim pomicanjem miša.

Ako pogledate kôd stranice, postaje jasno da se taj učinak postiže kroz skup slika koje imaju ime (XXXX-1.jpg), itd., Kao i skriptu koja zahtijeva da stranica prikaže slike XXXX-1 (+ 1). ) .jpg sa svakim pomicanjem prema dolje dok ne ponestane. Drugim riječima, skripta najprije prikazuje sliku XXXX-1.jpg, a zatim XXXX-2.jpg, dok se njihov popis ne iscrpi. Kao što možete vidjeti, sve je vrlo jednostavno.

I nekoliko riječi o projektu Snijeg. Kao što je već spomenuto, kvalitetan raspored je jedna od najvažnijih komponenti. Ovo je još jedan dobar primjer korištenja CSS jezika za vizualno pozicioniranje elemenata na stranici. Velika je stvar to što autori projekta nisu izgledali prelijepo. Ona ne ometa percepciju teksta, već je, naprotiv, čini figurativnijom i razumljivijom.

Želite li izraditi isti sadržaj? New York Times je svojim čitateljima pružio detaljnu povijest stvaranja ovog projekta. Ostaje samo upoznavanje s njim.

Obratite pažnju na tekst na engleskom jeziku.

Ukratko

Budućnost sadržajnog marketinga bit će određena web tehnologijama, starim i novim. Najvažnije je pravilno ih upotrijebiti kako bismo uspješno nadopunili glavni tekstualni sadržaj. Čak i ako su pojmovi jQuery, CSS i JavaScript novi i zastrašujući za vas, nemojte očajavati. S vremenom ćete ih početi razumjeti, a onda će vam biti lakše razumjeti tehnologije koje su temelj različitih vrsta sadržaja.

Naravno, ne možete stvoriti kvalitetan i integriran sadržaj bez pomoći profesionalnih web programera i dizajnera. Međutim, trebali biste imati barem opće razumijevanje web tehnologija ako radite na području sadržajnog marketinga.

Jeste li upoznati s drugim najnovijim sadržajnim marketinškim tehnologijama? Koristite li ih prilikom izrade sadržaja na web-lokaciji? Pozdravljamo vaše komentare.

Pogledajte videozapis: Video upute za portal www posaljipaket hr (Kolovoz 2019).

Ostavite Komentar