Monitor.si, tehnično

Ob nedavni prenovi spletnih strani je glavni urednik opisal zgodovino vseh različic. Zadnja med njimi, ki je bila objavljena nedavno, je še čisto sveža in zdelo se nam je prav, da v reviji, ki je namenjena ljubiteljem digitalnih tehnologij, tudi malo podrobneje opišemo, kako smo se prenove lotili in jo izvedli.

Tabelarični prikaz delčka vsebine. Strani po 10 novic je v sistemu že 1611.

Danes je postavljanje spletne strani predvsem iskanje pravega ravnotežja med že ponujenimi storitvami in lastnim ali najetim razvojem programske opreme. Oblak, o katerem pogosto pišemo, je globoko posegel tudi v delo spletnih mojstrov. Pravzaprav je mogoče zelo uporabna in zmogljiva spletišča v celoti postaviti in urejati v oblaku, torej brez investicij v lastno strojno in programsko opremo. Na voljo so celo brezplačne ali cenovno zelo ugodne rešitve, ki jih poznamo pod kratico CMS (content management systems) in prevajamo kot »sistemi za upravljanje vsebin«.

V posebnih primerih pa tudi najboljši že pripravljen sistem CMS ni optimalna rešitev. Morda ga je treba precej prilagajati ali pa je razvoj sistema nekoliko zastal in grozijo varnostne vrzeli? Morda imamo tako specifične podatke ali storitve, ki bi jih radi odprli v splet, da je že izdelan CMS neprimeren? Pri Monitorju smo se srečali s podobnimi razlogi. Imeli pa smo še en motiv – spletne strani Mladine, publikacije iz istega podjetja, so že od leta 2011 tekle na lastnem sistemu CMS, ki se je po nekaj poporodnih težavah izkazal za primernega in ga je bilo mogoče uporabiti tudi za Monitor. Tako je padla odločitev, da bomo tudi monitor.si postavili na lastnem sistemu CMS, ki ga že vrsto let razvijamo v podjetju T-media, kjer sicer preživljam svoj redni delovni čas.

Prenos

Seveda bi bilo povsem neprimerno, da bi nove spletne strani zagnali prazne. Potreben je bil prenos vseh člankov in novic, skupaj s pripadajočimi slikami, povezavami URL in drugimi podrobnostmi. Tak prenos je navadno zapleten zato, ker je organizacija podatkov med sistemi CMS zelo različna. Ker smo želeli jasno in strukturirano ureditev vsebine, po kateri bo mogoče preprosto brskati, jo filtrirati ali preiskovati, obenem pa smo želeli odprto pot do morebitnih novih vsebin, ki se lahko pojavijo v prihodnosti, smo podatke najprej zbrali na skupni imenovalec. Iz več kot 60 različnih tabel smo vsebino prenesli v dve ključni in šest shramb podatkovnih ključev (»šifrantov«), tako da je bila struktura primerna za naš sistem CMS. Celoten postopek je bil zakodiran kot poseben program, saj smo ga ponovili približno štirikrat, da ne bi bilo treba ponavljati vnosov v oba sistema. Na koncu lahko z veseljem povem, da je bilo vzporedno »polnjenje« obeh sistemov potrebno le dober teden dni, po tem je nova stran skoraj brez težav prevzela strežbo starih in novih vsebin.

Shema delovanja predpomnilnika na spletni strani PageSpeed. Podobno deluje tudi Squid, ki smo ga uporabili na koncu.

Strežnik

Kot omenjeno, storitve v oblaku zelo vplivajo na zasnovo in izvedbo sodobnih spletnih strani. Spet smo se po zgledu Mladine odločili, da bomo strežbo izvajali kar iz oblaka, konkretno iz Amazonovega podatkovnega središča na Irskem, kjer je mogoče po razmeroma nizki ceni najeti potrebne računalniške zmogljivosti. Strežnik je virtualiziran sistem Windows Server, na katerem teče podatkovni strežnik SQL Server. Take sestave v nekaj različnih zmogljivostih ponuja Amazon neposredno, tako da ga vzpostavimo in poženemo z nekaj kliki miške (in vnesemo številko kreditne kartice).

Tudi namestitev ustreznega spletnega strežnika in zagon spletnih strani je mogoče avtomatizirati. V zadnjih letih smo v podjetju izpopolnili lasten sistem, ki ob pomoči krmilnih podatkov v interni zbirki in nekaj sistemskih skript zgradi celotno izvajalno okolje za spletne aplikacije, kakršni sta tudi Monitor in Mladina v spletu. To bomo s pridom izkoristili, če se bo strežba kdaj iz oblaka preselila kam drugam.

Da laže prenesemo morebitne visoke obremenitve, smo celoten sistem opremili še s predpomnilnikom na spletni strani (front side cache). Za tega smo najprej uporabili novo Googlovo storitev PageSpeed, ki je pravzaprav identična tehnologija, kot jo uporablja novi mobilni brskalnik Chrome: zahteve po spletni strani prestreže vmesni strežnik, ki pobere vso zahtevano vsebino iz dejanskega strežnika, jo dodatno stisne in optimizira ter potem postreže čim bliže končnemu uporabniku. Za vsebine, ki se ne spreminjajo pogosto (slike, slogi CSS in podobno), celo hrani začasno, optimizirano kopijo, tako da izvirni strežnik niti ne dobi vsake zahteve nazaj. Stvar je delovala hitro in učinkovito, žal pa smo tik pred objavo ugotovili, da ni združljiva s storitvijo »pošlji na Kindle«, ki smo jo na vsak način želeli imeti pod članki. Novega »povzpetnika« PageSpeed je tako nadomestil tehnično podobni Squid, ki pa smo ga morali vzpostaviti na svoji strojni opremi (PageSpeed seveda izkorišča Googlove strežnike po svetu), obvestili pa smo tudi Googlove inženirje in morda se PageSpeed še vrne.

Upravljanje oglasnih mest v sistemu DoubleClick for Publishers (DFP).

Spletne strani

Splet se hitro postavlja na noge tudi kot nova podlaga za najrazličnejše programe. Torej, kot smo nekoč razvijali za Unix, Okna, Mac …, lahko zdaj razvijamo kar za brskalnik. Na voljo so celo knjižnice, s katerimi je mogoče narediti zmogljive programe, ki strežnika niti ne potrebujejo. No, pri Monitorju že zaradi obsežne zbirke podatkov v ozadju to ni šlo v celoti, smo pa želeli izkoristiti, kar se le da.

Samo izhodišče spletnih strani je bil izvrsten projekt HTML5 Boilerplate, ki je nekakšna zbirka najboljših praks pri vzpostavljanju spletnega pročelja. Poskrbi za enotno delovanje v večini sodobnih brskalnikov, popravi, kar je mogoče popraviti, v zastarelih, ponuja učinkovite mehanizme organizacije vsebin, vključevanja slogov in skript in podobno. Praktično ni razloga, da sodobne spletne strani ne bi začeli v izhodišču, ki ga ponuja Boilerplate.

Seveda tudi ni šlo, da v končni izdelek ne bi vključili knjižnice jQuery, ki je najbolj priljubljena razširitev in poenostavitev funkcionalnosti javascripta, ki so pomembne pri prikazu iz delovanju spletne strani. Kot zadevo zastavi že Boilerplate, se knjižnica jQuery naloži kar iz oblaka, kar ponuja hitrejše delovanje in boljše predpomnjenje.

Spletna stran se preživlja tudi z oglasi in koristno je, če imamo dober sistem za kar se da učinkovito strežbo oglasov, ki ga lahko enostavno upravljamo. Spet smo se obrnili k oblakom in iz njih potegnili Googlovi storitvi DoubleClick for Publishers (DFP) in AdSense. Obe ponujata učinkovito strežbo prilagojenih oglasnih vsebin, ki jih na spletno stran uvrstimo z nekaj vrsticami v javascriptu. Oglase v AdSense izbirajo Googlovi algoritmi samodejno, v DFP pa jim lahko dodamo še oglasna mesta, ki jih tržimo sami.

Na spletni strani je lahko gumb »pošlji na Kindle«.

Spletno stran krasijo še nekateri dodatki, pri katerih tudi izkoriščamo storitve v oblaku. Kot  omenjeno, smo omogočili deljenje člankov po družabnih omrežjih Twitter in Facebook. Za to ni treba nič več kot vrstico javascripta. Ob objavi strani je postala dostopna tudi storitev »pošlji na svoj Kindle«, ki je bila razlog, da smo PageSpeed nadomestili s Squidom. Ta zahteva vključitev Amazonove knjižnice in še eno vrstico javascripta. Na dnu spletne strani najdemo zadnji video Monitor TV in tekoče spremljamo objave na Twitterju in Facebooku. Za prvo smo naredili rešitev v našem CMS, drugo omogoča izvrstna knjižnica za jquery.tweet (ki pa je zaradi spremembe politike Twitterja zdaj v nemilosti in jo bomo verjetno kmalu morali zamenjati), tretje pa je kar družabni vtičnik, ki ga Facebook ponuja sam v obliki oznake

Ostala nam je »samo« še sredica, za katero smo uporabili poseben sistem CMS.

Preporod

Naš CMS v osnovi temelji na vizualnem urejevalniku HTML, ki je razvit na prilagojeni knjižnici TinyMCE. Okrog urejevalnika je izgrajen še sistem za dodajanje različnih priponk (slik, dokumentov, ključnih besed), ki se organizirano shranjujejo v zbirko podatkov in uvrščajo ali na vnaprej predpisane poti ali pa o njihovem prikazu odloča še sama kategorija (npr. vse novice se prikazujejo na naslovu /novice).

Za uporabnike sistema je dobrodošlo, da so vsi urejevalniki preprosti in imajo enoten način rabe. V glavnem so vsebine pregledno predstavljene v tabelaričnem pregledu, ki ga lahko urejamo in filtriramo, izbiramo želene podatke in izvajamo skupinske akcije (npr. »objavi vse označene«), lahko pa izberemo posamezen zapis in ga urejamo individualno. Veliko pozornosti smo namenili kakovostnemu prenašanju vsebin s tehniko kopiraj in prilepi. Ne zato, ker bi vzpodbujali epidemijo plagiatorstva, temveč zato, ker večina vsebin pri naših strankah nastaja v drugih okoljih, kot je Pisarna. No, tudi tu ni šlo brez zapletov, saj smo tik pred objavo ugotovili, da kopiraj in prilepi iz člankov, postavljenih v InDesign (v katerem se postavljata Mladina in Monitor) ne poteka najbolje. InDesign namreč vsebino na odložišču pretvori iz odstavkov v zgolj prelome vrstic. Na srečo nam je odprta arhitektura našega sistema omogočila kratek poseg z nekaj kode v javascriptu, ki se zdaj aktivira pri vsakem lepljenju in v primeru, ko zazna vsebino InDesigna, naredi ustrezne pretvorbe.

Pri vnosu je namreč ključni element vsebine odstavek, ki mu priredimo ustrezen slog. Ta je lahko glavni naslov, uvod, avtor … lahko je naštevanje, tabela ali slika … lahko je celo video (v primeru videa YouTube preprosto vnesemo enolično oznako – opazna je v vsakem naslovu URL – in odstavku označimo ustrezen slog, vse drugo se zgodi samodejno).

Urejanje podrobnosti prispevka

»Nenehni« testi

Poseben izziv pri spletnih straneh Monitorja so bile primerjalne tabele za nenehne teste, ki jih vodimo v rubriki Najboljši izdelki. Ker so izdelki predstavljeni s kupom atributov, ki niso tipični element sistemov CMS, smo razmišljali, kako narediti enostaven in prilagodljiv sistem, ki ne bi terjal veliko dodatnega programiranja. Spet smo se ozrli v oblak.

Primerjalne tabele izdelkov nastajajo kot preglednice v Excelu. Ta je sicer izjemno orodje za analizo na namizju, nekoliko teže pa je podatke iz Excela dinamično predstaviti kot del spletnih strani. Zato smo se ozrli po njegovem »oblačnem« konkurentu, Google Apps. Izkaže se, da je vsebino iz Excelove tabele mogoče preprosto prenesti v preglednico Google Apps. Ključna prednost takšne preglednice je programerski vmesnik (API), s katerim lahko podatke iz preglednice prikličemo, urejamo in prikažemo kot del spletnih strani.

Preglednica mora biti objavljena za javnost (published), torej so podatki vidni komurkoli, seveda pa jih še vedno lahko urejajo le pooblaščeni. Dobra lastnost je tudi to, da objavljena in delovna kopija nista nujno enaki. Preglednico lahko urejamo dlje časa, šele ko smo zadovoljni z njo, pa jo spet objavimo za javnost in s tem osvežimo objavljene podatke.

Google ponuja več različnih vmesnikov API, v slogu izkoriščanja spletnega brskalnika kot podlage programske opreme prihodnosti pa smo se odločili za varianto v javascriptu. Znancu jQuery smo tako dodali še knjižnico jQueryUI za uporabniški vmesnik, ker pa ta ne pozna zmogljive tabele, smo dodali še jqGrid, razširitev jQuery za delo s tabelaričnimi podatki.

Za primerjalne tabele najprej potrebujemo identifikacijo javno objavljene preglednice Google Apps. S tem podatkom se lahko sestavi URL, na katerem so vsi javni podatki preglednice na voljo kot podatkovni dovod (feed). Tak naslov s tehniko Ajax naložimo,  kadarkoli ga potrebujemo, ne da bi motil siceršnji prikaz strani. Z nekaj premetavanja podatkovnih struktur lahko dobimo tabelarično urejene podatke. Prve vrstice tabele izkoristimo za dodatno identifikacijo izdelkov tako, da s še enim zahtevkom Ajax naslovimo naš CMS, ki vrne slike in naslove člankov, kjer so izdelki opisani. Zatem ponudimo abecedno urejene nazive izdelkov, uporabnik označi želene, mi pa jih pregledno prikažemo v jqGrid. Kakršnokoli spreminjanje izbranih izdelkov in njihovo urejanje ne zahteva več prenašanja podatkov, gre samo še za urejanje in sortiranje v javascriptu, ki ga dovolj učinkovito izvajajo celo sodobne lahke mobilne naprave (npr. pametni telefoni). Same tehnične podrobnosti uporabe Google Apps skozi programerski vmesnik bomo objavili v eni od prihodnjih številk.

Surovi podatki v Google Drive …

… in urejen, dinamičen prikaz v spletu: monitor.si/najboljsi-izdelki/

Mozaik

Sodobne spletne strani so pisan mozaik, sestavljen iz različnih osnov, spletnih storitev in ščepca ali dveh lastne kode, ki je povezana z nekakšnim sistemom v ozadju. Ta je lahko kateri od javno dostopnih sistemov CMS, v določenih okoliščinah pa se izplača uporabiti tudi posebej razvit sistem CMS, ki pa seveda mora biti odprt, saj je splet še vedno nadvse dinamično področje, kjer se nove storitve pojavljajo vsak dan, obenem pa se spreminja in širi tudi tehnologija, s katero se spletne strani obiskujejo in uporabljajo.

Pri takem hitrem pregledu sodobne spletne strani je skoraj neverjetno, koliko različnih gradnikov jo sestavlja in koliko različnih storitev, ki so na voljo na najrazličnejših koncih spleta, jo poganja. A prav to je čar in tudi moč spletne podlage, ki je gotovo ena najbolj razburljivih tehnoloških osnov tudi za prihodnost. Delo na monitor.si tako še zdaleč ni končano, temveč so nove strani le svež začetek. Upamo, da smo na dobri poti in da boste na njej z nami tudi vi.

Povezave

V članku smo navedli precej zunanjih virov. Tule so pregledno zbrani.

Amazonov oblak AWS, ki omogoča gostovanje virtualnih strežnikov in različne napredne storitve oblaka (med drugim uporabljajo pri Dropbox, Pinterest, Airbnb …): aws.amazon.com

Predpomnjenje strani Google PageSpeed ponuja pospešitev in manjšo obremenitev strežbe spletnih strani: developers.google.com/speed/pagespeed/service

Predpomnjenje strani Squid je odprtokodna alternativa za PageSpeed, ki jo lahko namestimo na lastno strojno opremo: www.squid-cache.org

Osnova HTML5 Boilerplate je izvrstno izhodišče za izgradnjo sodobnih spletnih strani v HTML5, ki dovolj dobro delujejo tudi v starejših spletnih brskalnikih: html5boilerplate.com

Knjižnica jQuery je najbolj priljubljena razširitev javascripta, ki znatno olajša delo spletnim programerjem: jquery.com

Oglasni sistem Google DFP je učinkovit način upravljanja oglasnih vsebin: www.google.com/doubleclick/publishers/small-business/

Oglasni sistem Google AdSense je Googlov visoko avtomatiziran oglasni sistem: adsense.google.com

Storitev »pošlji na Kindle« je zanimiva storitev za bralce spletnih strani, ki so tudi uporabniki programske ali strojne opreme Kindle: www.amazon.com/gp/sendtokindle

Knjižnica »jquery.tweet« omogoča prikaz svežih ščebetov (a je v nemilosti zaostrujočih se pravil uporabe dovodov Twitterja): tweet.seaofclouds.com

Vtičniki Facebook Social omogočajo hitro dodajanje družabnih elementov, povezanih s Facebookom: developers.facebook.com/docs/plugins

Knjižnica TinyMCE je izvrstno ogrodje v javascriptu, ki omogoča vizualno urejanje HTML: www.tinymce.com

Spletna pisarna Google Apps je zmogljiva alternativa klasičnim pisarniškim programom, še posebej če želimo kaj tudi objaviti v spletu: www.google.com/enterprise/apps/business

Knjižnica jQueryUI je razširitev jQuery, ki prinaša kakovostne gradnike spletnih uporabniških vmesnikov: jqueryui.com

Knjižnica jqGrid omogoča dinamične tabelarične prikaze na spletnih straneh: www.trirand.com/blog