Moderné webové technológie v službách content marketingu

Obsah marketing je už dlho obmedzená nielen na písanie kvalitných textov. Pokročilí obchodníci a weboví dizajnéri používajú obrázky, zvuk a video na pomoc pri revitalizácii statického obsahu. V uplynulom roku však obsahový marketing vďaka interaktívnemu obsahu dosiahol úplne novú úroveň.

Vezmite si napríklad nový projekt e-novín The New York Times s farebným názvom Snowfall ("Snowfall"). Táto stránka harmonicky kombinuje videá, obrázky a zaujímavý príbeh, teda najlepšie prvky webových technológií.

Vyššie uvedený portál je, samozrejme, výsledkom tvrdej práce profesionálneho tímu, ktorý vyvinul veľké úsilie počas dlhých mesiacov. A môžete mať dojem, že s obmedzeným rozpočtom nemožno dosiahnuť rovnaké výsledky.

Mýliš sa.

Technológie, ktoré sú základom tohto projektu, nie sú tajomstvom siedmich pečatí a môžete ľahko zobraziť celý programový kód webových stránok. Ak to chcete urobiť, prejdite na stránku, kliknite pravým tlačidlom myši na príslušný fragment a vyberte možnosť „Zobraziť elementový kód“ (ak máte prehliadač Google Chrome), „Skontrolovať prvok“ (ak je Opera) a preskúmať prvok (ak je prehliadač Mozilla Firefox). Ak chcete zobraziť celý kód stránky, môžete jednoducho stlačiť kláves ctrl + u. Táto klávesová kombinácia funguje vo všetkých prehliadačoch uvedených v zozname.

Potom, čo to urobíte, môžete na vlastné oči vidieť, ako boli vývojári schopní dosiahnuť také úžasné výsledky, a dokonca využiť svoju technológiu vo svojej praxi. Mimochodom, niektoré chytré webové vývojári už využili tohto. Napríklad spoločnosť Usvsth3m, ktorá vytvorila zaujímavú paródiu na projekt Snowfall, alebo spoločnosť ScrollKit, ktorej sa podarilo urobiť presnú kópiu projektu do hodiny.

Samozrejme, málokto sa môže pochváliť vynikajúcou znalosťou programovacích jazykov, ale podstata veci sa nemení. Ak je vaša činnosť nejakým spôsobom spojená s marketingom obsahu, mali by ste pochopiť aspoň základy moderných webových technológií s cieľom ponúknuť takéto projekty svojim klientom. V tomto článku sa pozrieme na najnovšie nástroje a technológie marketingu obsahu, ktoré ich tvoria. Pokúsime sa ich prezentovať čo najjednoduchšie a najzrozumiteľnejšie, aby pochopili aj ľudia, pre ktorých je programovanie webu „temným lesom“.

Posúvanie obrázkov

Pozrime sa na jednoduchý príklad. Koncertné hotely zverejnili na svojich webových stránkach interaktívny obrázok, ktorý zobrazuje kapacitu pamäte klasického prehrávača iPod, vyjadreného v vinylových platniach. Stačí kliknúť na šípku nadol a začne načítavať celý balík záznamov, ktoré napodobňujú kapacitu prehrávača iPod. Vďaka tejto jednoduchej recepcii okamžite pochopíme podstatu veci. Okrem toho tento obrázok získal viac ako 26 000 podielov v sociálnych sieťach. Výsledky hovoria samy za seba:

Z technického hľadiska je vytvorenie tohto obrazu pár drobností. Hannah Smithová, ktorá je jedným z jeho vývojárov, sa dokonca bála, pretože to bolo príliš jednoduché. V skutočnosti je súbor záznamov, ktoré vidíte pred sebou, len jeden obrázok, ktorý sa opakuje, až kým sa nedosiahne požadovaný objem. V skutočnosti si vyberiete počet obrázkov, ktoré chcete vidieť na obrazovke, a potom spustite cyklus, počas ktorého sa obraz opakuje, až kým sa nedosiahne zadaná hodnota.

Obrázkový skript sa nachádza v zdrojovom kóde. Je to celkom jednoduché. Môžete dokonca extrahovať kód a zistiť, ako to funguje v praxi.

Chcete vytvoriť rovnaký obsah? Musíte sa naučiť jazyk JavaScript, ako aj jednu z jeho knižníc - jQuery.

výpočtovej

Jedným z najnovších trendov v obsahovom marketingu je adaptácia obsahu pre každého návštevníka stránky. To možno dosiahnuť pomocou matematických výpočtov, ktoré sa vykonávajú "v zákulisí". Použitie trochu mágie pomocou špeciálnych kódov, môžete získať podobný výsledok.

Pozrime sa na túto techniku ​​na príklade stránky SeeYourFolks:

Vývojári stránky potrebovali len jeden deň, aby vytvorili túto účinnú pripomienku dôležitosti rodinných väzieb. Okrem toho máme skvelý príklad použitia matematiky na vytváranie obsahu.

Princíp používania tohto formulára je pomerne jednoduchý. Je potrebné zadať informácie o tom, kde žijete, ako sú starí vaši rodičia a ako často ich vidíte počas celého roka. Stránka potom automaticky vypočíta, koľkokrát ich môžete vidieť, kým sú nažive.

To sa deje nasledovne:

  • Keď zadáte názov vašej krajiny, každej z nich sa priradí určitá hodnota na základe priemernej dĺžky života v danej krajine;
  • Vek vašej matky a vášho otca je zložený a rozdelený na polovicu, aby sa dosiahol priemer;
  • Táto priemerná hodnota sa odpočíta od priemernej dĺžky života;
  • Výsledné číslo sa vynásobí počtom vašich ročných stretnutí s rodičmi;
  • Výsledok sa zaokrúhli.

Existuje aj iný kód, ktorý sa spustí, ak vstúpite do veku iba jedného z rodičov, ako aj spúšťaciu schému, ktorá sa aktivuje, ak vek vašich rodičov prekročí priemernú dĺžku života vo vašej krajine. Celý kód môžete zobraziť kliknutím na tento odkaz. Ako vidíte, je jasne označená, takže môžete ľahko pochopiť, čo to znamená.

Chcete vytvoriť rovnaký obsah? Musíte sa dozvedieť informácie o tom, ako vykonávať výpočty pomocou JavaScriptu.

Interaktívne infografiky

Statická infografika je včera. Ak chcete svojich zákazníkov prekvapiť, urobte ho interaktívnym. Vynikajúci príklad dynamickej infografiky je prezentovaný na internetovej stránke spoločnosti Town Center Car Parks, ktorá poskytuje parkovacie služby. Na rozdiel od predchádzajúcich príkladov, JavaScript, v tomto prípade požaduje, aby stránka na samotnej webovej stránke generovala výsledky a potom dynamicky mení obsah stránok.

Táto infografika povzbudzuje vodičov, aby opustili svoje autá na parkovisku na vianočný večer. Počas sviatkov je totiž nemožné odolať pokušeniu piť alkohol a, ako viete, riadenie pod vplyvom alkoholu má vážne následky.

Návštevníci stránok majú možnosť simulovať skutočnú situáciu. V hornej časti stránky sú rôzne alkoholické nápoje, po ktorých nasleduje počítadlo udávajúce počet jednotiek alkoholu, ktoré ste konzumovali. Obsah stránky sa zmení v závislosti od vášho výberu. Ak napríklad plánujete vypiť 6 pohárov šampanského za večer, počítadlo zobrazí nasledujúci výsledok:

Ak si vyberiete iný nápoj, výsledky budú odlišné, a preto sa zdrojový kód zmení. Predpokladajme, že sa rozhodnete obmedziť jednu pohár vodky. V tomto prípade bude počítadlo zobrazovať jednotku, ale budete stále upozornení:

"Možno neprekročíte povolený limit, ale nezabudnite, že alkohol pôsobí na rôznych ľudí inak. Preto je najbezpečnejším riešením opustiť auto na parkovisku a ísť domov taxíkom."

Z toho vyplýva záver: váš obsah nemusí byť statický - môže sa zmeniť, čo odráža výber vášho publika. Prečo napísať obrovský článok popisujúci všetky možné výsledky, keď môžete vytvoriť infographic, ktorý zobrazuje informácie relevantné pre konkrétneho čitateľa?

Chcete vytvoriť rovnaký obsah? Prezrite si informácie o tom, ako sa JavaScript používa na vyžiadanie stránok, ako aj o funkciách DOM.

Posúvanie stránky

Na niektorých stránkach sa obsah mení v závislosti od vašej pozície na stránke. Prvým príkladom je Budúcnosť zdieľania áut. Napriek tomu, že v tomto prípade je jazyk JavaScript znovu povolený, vďaka jazyku CSS sa vytvára mnoho prvkov dizajnu. Zvážte nasledujúci obrázok:

Môžete veriť, že všetky tieto kopce sú prvky CSS, ktoré sa navzájom prekrývajú? Ak máte pochybnosti, môžete si ich prezrieť v hlavnom súbore CSS.

V ňom dostanete informácie o tom, ako sú všetky prvky obrázka fixované na mieste. Na prvý pohľad sa zdajú byť dynamické, ale v skutočnosti je väčšina obrázkov na pozadí pevná. Pohybujú sa len vozidlo a niektoré interaktívne časti.

Predpokladajme, že máte záujem o to, ako sa lietadlo nachádzajúce sa na samom začiatku stránky uvedie do pohybu. Ak to chcete urobiť, otvorte infographic a pozrite si kód položky (ako to urobiť, napísali sme vyššie). Uvidíte, že existuje špeciálny kód, ktorý mení polohu dolnej časti lietadla, čím vytvára ilúziu jeho pohybu.

Chcete vytvoriť rovnaký obsah? Naučte sa animáciu CSS a JavaScript. Tiež znalosť HTML 5 nebude zasahovať, aby sa kód správne formátoval.

A opäť o projekte Sneženie

Bohužiaľ, v oblasti internetového marketingu sa ešte neobjavil presný termín na opis obsahu, ako je napríklad Sneženie. Napriek tomu počet takýchto príkladov neustále rastie každý deň.

    Projekt Snowfall pozostáva z týchto prvkov:

  • Vysoko kvalitný textový obsah;
  • Video vo formáte MP4 (môže sa vám zdať, že ide len o dynamické obrázky, ale v skutočnosti ide o videá, ktoré sa dajú prehrať);
  • Vhodné obrazy;
  • Dobré rozloženie stránky.

Projekt Sneženie sa tak stal pre užívateľov internetu dychom čerstvého vzduchu, pretože harmonicky kombinuje všetky vyššie uvedené prvky. Z technického hľadiska je celkom jednoduché extrahovať jednotlivé prvky a vidieť, ako fungujú. Obrázky sa napríklad aktivujú, keď dosiahnete určitú pozíciu na stránke. V tomto prípade bol na tento účel použitý plugin Inview. Existuje ďalší spôsob, ako dosiahnuť tento účinok. Ak chcete tak urobiť, musíte použiť JavaScript na spustenie obrázkov na konkrétnom mieste webovej stránky. Napríklad v jednom z článkov o programe Pitchfork sa obrázok zmení s každým posunom myši.

Ak sa pozriete na kód stránky, je jasné, že tento efekt sa dosiahne pomocou súboru obrázkov s menom (XXXX-1.jpg) atď., Ako aj skriptom, ktorý vyžaduje, aby stránka zobrazovala obrázky XXXX-1 (+ 1). ) .jpg s každým rolovaním nadol, kým sa nevyčerpá. Inými slovami, skript najprv zobrazí obrázok XXXX-1.jpg, potom XXXX-2.jpg, kým sa ich zoznam nevyčerpá. Ako vidíte, všetko je veľmi jednoduché.

A pár slov o projekte Sneženie. Ako už bolo spomenuté, kvalita je jednou z jej najdôležitejších zložiek. Toto je ďalší dobrý príklad použitia jazyka CSS na vizuálne umiestnenie prvkov na stránke. Skvelá vec je, že autori projektu nerobili rozloženie príliš fantáziu. Nezasahuje do vnímania textu a naopak ho robí obrazovejším a zrozumiteľnejším.

Chcete vytvoriť rovnaký obsah? New York Times poskytol svojim čitateľom podrobnú históriu vytvorenia tohto projektu. Zostáva to len zoznámiť sa s ním.

Poznamenajte si text v angličtine.

Poďme zhrnúť

Budúcnosť marketingu obsahu bude určená webovými technológiami, starými aj novými. Najdôležitejšie je ich správne používať, aby úspešne dopĺňali hlavný obsah textu. Aj keď sa pojmy jQuery, CSS a JavaScript zdajú nové a zastrašujúce pre vás, nezúfajte. Postupom času ich začnete chápať a potom bude pre vás jednoduchšie pochopiť technológie, ktoré sú základom rôznych typov obsahu.

Samozrejme, nemôžete vytvoriť vysoko kvalitný a integrovaný obsah bez pomoci profesionálnych vývojárov a dizajnérov. Ak pracujete v oblasti marketingu obsahu, mali by ste mať aspoň všeobecné znalosti o webových technológiách.

Poznáte ďalšie najnovšie technológie marketingu obsahu? Používate ich pri vytváraní obsahu na svojich webových stránkach? Uvítame vaše pripomienky.

Zanechajte Svoj Komentár