Aplikaciji implementiramo funkcionalnosti in zahteve, ki niso jedro aplikacije, vendar uporabniku prinaˇsajo dodano vrednost in aplikacijo razlikujejo od podobnih na trgu.
4.4.1 Vstopna stran
Vstopna stran je statiˇcna in se prevede na streˇzniku, uporablja statiˇcno upo-dabljanje. Za dinamiˇcno glavo strani skrbi next-firebase-auth. Element v ozadju je animacija v ˇstirih delih, s spremenljivo velikostjo, glede na velikost zaslona. Predstavitveni video je datoteka v formatu mp4 in se v tihem naˇcinu predvaja kroˇzno, ko se stran naloˇzi.
4.4.2 Vgradnja v spletno stran podcasta
Vsi trije tipi strani, ki jih lahko uporabnik naredi, ponujajo moˇznost, da upo-rabniku ustvarimo programsko kodo HTML, ki jo lahko vgradi v svojo spletno stran. Uporabnik v spletno stran vgradi prilagojeno javno stran podcasta z uporabo znaˇcke <iframe>. Prilagojena stran podpira transparentnost za boljˇso vkljuˇcitev z uporabniˇsko spletno stranjo. Stran ne vsebuje elementov, kot so ime podcasta, opis in slika, saj predpostavimo, da so ti element na uporabniˇski spletni strani. Povezave na podcast platforme so manjˇse, kar omogoˇca laˇzjo vkljuˇcitev v spletno stran. Ce konˇˇ cni uporabnik klikne na povezavo, se v novem zavihku odpre spletna stran, kjer se klik vpiˇse v ana-litiko in nato uporabnika preusmeri na ˇzeleno storitev. Programska koda za vgradnjo testnega podcasta se nahaja v prilogi A.5.
4.4.3 Vgradnja pojavnega okna v spletno stran podca-sta
Pojavno okno se v spletno stran vkljuˇci z znaˇcko <iframe>, podobno kot pri vgradnji v spletne strani. Znaˇcka <iframe> je ovita v pravokotnik, ki ima naslov in vektorski znak za zaprtje pojavnega okna (glej sliko 4.3). Pojavno okno se uporabniku odpre tri sekunde po nalaganju spletne strani. Ko se pojavno okno odpre, zatemni ozadje. Pomembno je, da zaprtje pojavnega okna uporabnika ne zaustavi, zato ne sproˇzi animacije. Uporabnik pojavno okno vgradi s pomoˇcjo ustvarjene programske kode HTML, JavaScript in CSS.
4.4.4 Analitika podcasta
Obisk strani podcasta, in drugih tipov strani, med prevajanjem strani na streˇzniku sproˇzi zapis v podatkovno bazo. V kolekciji analytics se ustvari dokument s ˇcasom klika in imenom podcasta.
Povezave na podcast platforme se v analitiko zapiˇsejo posamiˇcno. Klik na platformo je ˇstet na streˇzniˇski strani, saj se s tem zagotovi ˇstetje vseh
Slika 4.3: Prikaz pojavnega okna na spletni strani.
klikov. Podprta je na primer blokada programskega jezika JavaScript s strani odjemalca. Uporabnika ob kliku na platformo preusmeri na stran, ki na strani streˇznika sproˇzi shranjevanje podatkov v podatkovno bazo. Povezava, na katero uporabnika pelje aplikacija, sledi predlogi
/[ime podcasta]/redirect/[unikatno ime platforme]
?url=[povezava na platformo].
Uporabniku stran prikaˇze informacijo o naslovu, na katerega bo preusmer-jen, kar mu omogoˇca roˇcni vpis naslova v primeru odpovedi streˇznikov ali blokade JavaScripta. Ko se stran prevede in shrani klik v podatkovno bazo, je uporabnik preusmerjen na ˇzeleno platformo.
Podcaster lahko preko strani administracije podcasta obiˇsˇce stran ana-litike, ta mu prikaˇze ˇstevilo klikov na stran in na povezave zadnjih 30 dni.
Analitika posameznih podcast platform je prikazana v obliki majhnih krogov.
Ob obisku strani se izvede poizvedba podatkovne baze, ki iz dokumentov v kolekciji analytics pridobi le dokumente za ˇzeleno stran, ki so bili narejeni v zadnjih 30 dneh. Poizvedba je hitra zaradi sestavljenega indeksa (ang. com-posite index) po datumu in imenu. Dokumenti so filtrirani po tipu, razdelijo se na klike na stran in klike na podcast platformo.
Uporabnik ima dostop tudi po stopnje odzivnosti (CTR), ta se izraˇcuna
po enaˇcbi 4.1.
CT R =ˇst. klikov na povezave
ˇst. odprtih strani ×100 (4.1)
4.4.5 Metapodatki druˇ zbenih omreˇ zij
Ko uporabnik na druˇzbenih omreˇzjih deli povezavo na podcast, se prikaˇze slika podcasta. Aplikacija v metapodatke strani podcasta, epizode in oce-njevanja vkljuˇci sliko, naslov in opis. Metapodatki druˇzbenim omreˇzjem omogoˇcajo, da iz njih pridobijo naslov in sliko povezave, ki jo podcaster deli.
Vsaka stran vsebuje metapodatke standardov Open Graph [107] in Twit-ter [44]. V obeh standardih so zapisani: naslov, opis in slika, ˇce je za podcast podana.
4.4.6 Noga strani
Vstopna stran in administratorske strani vsebujejo nogo strani za laˇzje upra-vljanje strani. V nogi strani se nahaja logotip s povezavo na vstopno stran, povezava za obvestilo o hroˇsˇcu in za povratne informacije o spletni aplikaciji.
Obe oddaji informacij implementirata storitev Typeform. Typeform je sto-ritev, ki olajˇsa izdelavo spletnih obrazcev in se lahko vkljuˇci v spletne strani.
Uporabniku se ob kliku na povezavo v novem zavihku odpre stran ankete, kjer brez vmesnih interakcij vnese obvestilo.
4.4.7 Odzivna zasnova spletne strani
Odzivno zasnovo doseˇzemo z uporabo mreˇznega sistema knjiˇznice React-Bootstrap. Spletna stran je zavita v React komponento <Container>, nove vrstice v <Row>, vrstice pa so razdeljene v stolpce s <Col>. Stolpci, po potrebi, na prekinitvenih toˇckah vsebujejo atribut span, ki pove velikost, in order, ki narekuje vrstni red stolpca. React-Bootstrap stolpce na manjˇsih zaslonih uredi v vrstice in tako uporabniku omogoˇca laˇzjo interakcijo z apli-kacijo.
Urejanje povezav na zaslonu za urejanje podcasta, se na razliˇcnih veli-kostih zaslona prikaˇze v razliˇcnem vrstnem redu s pomoˇcjo React Bootstrap komponent za razporeditev elementov. Komponente <Col> vsebujejo dve prekinitveni toˇcki, obe prekinitveni toˇcki vsebujeta atributa za velikost in vrstni red stolpca. Primer uporabe komponent se nahaja v prilogi A.6.
Shranjevanje sprememb poteka preko lebdeˇcega gumba na dnu. Gumb ohranja poloˇzaj na dnu, dokler se uporabnik ne pomakne do konca seznama, takrat ostane pod seznamom. Gumb takˇsno vedenje doseˇze tako, da je hkrati pripet na vrh z Bootstrap pripomoˇckom sticky-top in na dno elementa, v katerem je. Programska koda CSS in React se nahaja v prilogi A.7.
4.4.8 Deaktiviranje podcasta
Na ˇcelnem delu sta, zaradi laˇzje uporabnosti in manj nenamernih klikov, gumba za izbiro in deaktiviranje podcasta razdeljena v dva predela. Ob kliku na deaktivacijo se uporabniku pod podcastom prikaˇze pogovorno okno, kjer svoj namen potrdi. Deaktivacija podcasta se preko klica API naredi z brezstreˇzniˇsko funkcijo, ki v podatkovno bazo zapiˇse deaktivacijo podcasta s spremembo atributa deleted. Poleg podcasta se deaktivirajo tudi strani, povezane s podcastom, to so strani epizod in stran ocene.