Kako izgleda dizajn i razvoj ‘open source’ online aplikacija

WordPress je od svojih početaka slovio kao 'blogging' platforma, alat pomoću kojega možete 'brzinski' objaviti sadržaj na webu. Svjetski poznata '5 minute install' krilatica samo je pogurnula cijeli WordPress među alate kojima navodno nije mjesto u većim organizacijama. Za takvo obilježje su nesvjesno zaslužni i sami promicatelji platforme, želeći se marketinški distancirati od hladnog termina kao što je CMS. No ako je sigurnost WordPressa (opisana u početku serijala) najdosadnija glasina, WordPress kao blogging platforma je mit najviše udaljen od istine.

Orchestre de Jazz, Béla Vörös, bronze, 1927.

Ovaj članak napisan je u okviru rubrike i konferencije WordCamp Croatia gdje možete pogledati i prvi dio pod naslovom Zašto su WordPress i ‘open source’ aplikacije odlično rješenje za državne online projekte.

Tehnički gledano, WordPress je 2005. godine postao punokrvni sustav za upravljanje online sadržajem budući da su njegovi tvorci omogućili kreiranje statičkih stranica (tzv. pages) i prilagodljvih izbornika. Pomoću tih elemenata mogli ste kreirati bilo kakvo korporativno web sjedište, dovoljno moćno da stane bok uz bok tada popularnoj Joomli ili DotNetNuke-u. Upravo ta verzija WordPressa 1.5 (nazvana po Jazzistu Billy Strayhornu) označava odmak od blogerske platforme prema sveobuhvatnom alatu za web izdavaštvo.

Na ljeto 2010. godine izlazi verzija WordPressa 3.0 (imena Thelonious Monk) koja omogućava modeliranje i objavu bilo koje vrste sadržaja, ne samo blogova i statičkih stranica. Tehnologija koja to omogućava je integralni dio WP srži, a odaziva se na ime Custom Post Types i Custom Fields (inače, nazivlje WordPress verzija po Jazz velikanima nije slučajnost nego pravilo – svaki glavni programer odgovoran za WordPress verziju odabire ime po svojem omiljenom improvizatoru).

Što je Custom Post Types?

Custom Post Types je sastavni modul WordPress aplikacije, a služi za definiranje svih vrsta sadržaja na web sjedištu. Državne agencije i institucije pogotovo su pogodne za prilagodljivo modeliranje sadržaja, poradi njihovih zakonskih, operativnih ili ugovornih obaveza. Takvo tehnološko rješenje ide ruku pod ruku s misijom WordPressa da želi demokratizirati izdavaštvo.

Hbor.hr će nam poslužiti kao primjer – Kreditni programi su jedinice sadržaja koje trebaju imati svoj prilagođeni izgled i dizajn. Uz njih se vežu kamatne stope, procedura dobivanja kredita, partnerske banke, vezani dokumenti, grafičke upute te sijaset drugih tekstualnih elemenata. Proces razrade takvog interaktivnog sadržaja slijedi tri projektne faze:

  • Skiciranje i zajedničku razradu grubog plana sadržaja
  • Detaljan dizajn sadržaja, razrade svih njegovih veza, klasifikacija i interaktivnosti
  • Programiranje backend i front end sloja koji podržava dizajniranu interaktivnost

Kako izgleda proces razrade interaktivnog sadržaja?

Skiciranje i razrada se radi unutar zajedničke radionice, najbolje na fizičkoj lokaciji kod izvođača. Ako je virtualni način suradnje jedina opcija, alati poput InVisiona, Google Sheetsa i RealTime boarda pomažu da se pravilno iskomuniciraju želje dizajnera i potrebe klijenta.

Margarida CSilva
Jednakost inženjera, dizajnera i urednika, glavna je formula implementacije interaktivnog sadržaja od javnog interesa.

S klijentske strane, potrebno je da na toj radionici budu prisutni odgovorna osoba za web sjedište te osoba koja se razumije u glavne marketinške procese institucije. Načelno se radi o voditeljici ili voditelju marketinškog / PR odjela budući da te osobe najviše poznaju vrstu usluga i sadržaja koje komuniciraju prema javnosti. Sa strane izvođača je važno da prisutni budu glavni dizajner i glavni programer. Faza skiciranja sadržaja i interaktivnosti je arhitekturalna faza i sve donesene odluke će se reflektirati na kasniji izgled i ponašanje web sjedišta prema krajnjem korisniku – javnosti.

Set pitanja i razgovora služi za kristaliziranje potrebe za objavom raznih vrsta sadržaja. Svi zaključci zapisuju se u službenu tablicu arhitekture sadržaja. Računajte da će na takvoj vrsti radionice biti 6 do 12 osoba, a važno je da svi imaju jednaki upliv u donesene sadržajne odluke. Izvođač treba dobro proanalizirati i upoznati postojeći sadržaj na klijentovoj web stranici te na sastanku educirati klijenta oko modernih pristupa pri izradi novog sadržaja. Ovakav koncept razvoja sadržaja je u samom duhu razvoja open source projekata jer daje svakome priliku da izrazi svoje stajalište. Znanje cijelog tima o tržištu, korisniku i proizvodu se ugrađuje u krajnju aplikaciju, a to je i samo svojstvo open source projekata (konsenzus, demokracija, evolucija).

Kreativnost počinje na razradi sadržaja

Prava kreativnost počinje kada dođete u fazu opisivanja detektiranog potrebnog sadržaja. WordPress oko tih tehnika ima nebrojeno puno opcija. Custom fields je funkcija WordPressa gdje za određenu vrstu sadržaja definirate njegove značajke. Na primjer, obična vijest ima samo par značajki – naslov, glavnu sliku, HTML sadržaj i kratki opis koji se ujedno koristi i kao SEO meta description tzv. Excerpt.

Shema odnosa sadržaja. Kreditne linije su točno prilagođene HBOR.HR javnim informacijama, a uz njih vežemo i podružnice, također prilagođene točnim potrebama javnosti.

Druge jedinice sadržaja mogu imati daleko bogatija i interaktivnija svojstva. Spomenuti kreditni programi imaju posebna polja za unos kreditnog postupka, kamata, vezanih dokumenata i bančinih kontakata. Uz to, svaki custom field ima svoj datatype i moguću relaciju prema drugim jedinicama sadržaja. Tako možete definirati “Podružnicu” kao jedinicu sadržaja te njezine custom field-ove – adresu, telefonski broj, latitude/longitude, ime voditelja podružnice i moguće kreditne programe koji se mogu realizirati u podružnici. Upravo taj zadnji custom field je zapravo relacija prema drugim jedinicama sadržaja (kreditnim programima).

Shema odnosa sadržaja. Kreditne linije su točno prilagođene HBOR.HR javnim informacijama, a uz njih vežemo i podružnice, također prilagođene točnim potrebama javnosti.

Koji je smisao takve arhitekture? S njima dizajner ima otvorene ruke pri definiranju korisničkih tokova (user flows) te detaljnih definiranja svih aspekata User eXperience i User Interaction ( UX/UI ) modela. Na primjer, tipičan korisnički put počinje od naslovnice >> korisnik “klikne” na izbornik kako bi pronašao kreditni program >> klikom na kreditni program odmah konzumira željeni sadržaj no želi više saznati o najbližoj podružnici >> klikom na podružnicu mu se otvara posebna sekcija sadržaja koju je dizajner osmislio isključivo za prikaz povezane podružnice.

O taksonomiji i međusobnom povezivanju sadržaja

Time dolazimo do trećeg koncepta unutar WordPressa – taksonomije (klasifikacije) i međusobnog (automatskog) povezivanja sadržaja. Svaka jedinica sadržaja može se klasificirati na više načina, a državna stranica Nacionalnog centra za vanjsko vrednovanje (NCVVO) sadrži dobre životne primjere. Naime, urednici NCVVO portala objavljuju raznovrsne novosti vezane uz državnu maturu. Neke od njih se tiču učenika, neke učitelja, a neke pak ispitnih koordinatora. Takva situacija je idealna za kreaciju taksonomije koja se zove “Persona”. Sam naziv taksonomije je proizvoljan i ovisi o prijedlogu glavnog dizajnera web sjedišta.

Urednik tada pri objavi sadržaja jednostavno označi na koju personu se odnosi objavljeni sadržaj. Označenih taksonomija može biti i više od jedne… Druga taksonomija koja je razvijena za NCVVO je “Školska godina” – 2015/2016, 2016/2017 itd. Time web sjedište dobiva doista moćne opcije za pretragu i filtriranje javnog sadržaja. Sa samo dvije jednostavne taksonomije korisnik može pronaći sve objave koje su vezane uz ispitne koordinatore, a da su također vezane uz školsku godinu 2015/2016. Važno – taksonomija i njihovih atributa može biti koliko god dizajner želi, a jedinice sadržaja mogu ili ne moraju pripadati tim definiranim taksonomijama.

Dmitrij Paskevic
WordPress omogućava neograničene klasifikacije javnog sadržaja.

Inače, taksonomije svoju najznačajniju primjenu imaju u eCommerce svijetu gdje se korisniku daje na izbor filtriranje proizvoda po svim vrstama značajki. Autoindustrija je idealni primjer gdje boja, brand, tip, zemlja porijekla i godina proizvodnje čine dobre primjere upotrebe taksonomije za klasifikaciju automobila. S druge strane, modna industrija omogućava korisniku filtriranje sve do crnih hlača veličine XXL i to je pokazni primjer upotrebe taksonomija u “njihovom” eCommerce svijetu (i nekih potrebnih novogodišnjih odluka. :))

Prikazano holističko definiranje sadržaja omogućava državnoj instituciji da modelira željeno interaktivno iskustvo prema korisničkim potrebama, ugovorima ili zakonima. Open source alat poput WordPressa ovdje služi isključivo kao framework koji usmjerava dizajnere i programere pri kreiranju modernog web sjedišta. Za razliku od zatvorenih proprietary CMS alata, sve što javnost treba konzumirati se može dizajnirati na optimalan način bez nasljeđivanja korporativnih koncepata.

Dizajn open source online aplikacija

Ranije smo opisali kako projektno rješenje ne smije biti rob određene korporativne tehnologije. Poslovne ideje organizacije, kontekst tržišta, politike sadržaja, UX, UI, arhitektura vrste sadržaja i način kako će urednici voditi razvoj web-a trebaju biti iznad pravila samog CMS-a. U modernoj web produkciji vrijedi pravilo da dobar CMS obogaćuje isplanirane procese i interaktivnosti. WordPress u tom smislu daje samo osnovne gradivne elemente, a na vama je da kreirate izgled cijelog sadržaja i s time producirate željeno internetsko sjedište.

Arhitektura sadržaja se određuje s tri spomenute WordPress tehnologije – Custom Post types, Custom Fields i Custom Taxonomies. Pomoću njih modeliramo vrstu portala, informativnog web sjedišta ili eCommerce platforme. No kada bi pitali dizajnera i programera što određuje produkciju jednog web projekta, uglavnom bi dobili odgovor – “količina i kompleksnost predložaka!” Svaki open source CMS iskorištava sadržajne predloške pa tako ni WordPress nije iznimka (ranije spomenuta WordPress “tema” je zapravo skup svih definiranih predložaka).

Predlošci (templates) su značajan WordPress koncept, a tehnički se radi o skupu PHP datoteka koje procesuiraju korisnikov upit te na pravilno dizajnirani način prikazuju jednu jedinicu sadržaja – vijest, kreditnu liniju, natječaj, dokument, multimediju, fotogaleriju itd. Produkcija web sjedišta se planira upravo oko tih datoteka jer one definiraju većinu korisničkog iskustva – vizualni aspekt, animacije, međusobne interaktivnosti, brzinu učitavanja, količinu procesuiranih informacija te još gomilu ostalih, relevantnih UX/UI elemenata.

WordPress verzije 4.7 implementira i opciju da za svaku jedinicu sadržaja definirate i više mogućih predložaka. Tada je urednik odgovoran odabrati kako će izgledati svaki sadržaj, a sve na temelju dizajniranih predefiniranih predložaka. I bez brige, nisam zaboravio na Jazzisticu … verzija 4.7 nosi ime Sarah “Sassy” Vaughan!

Zašto su predlošci bitni?

Vizualni predlošci se izrađuju za svaku vrstu sadržaja – ovdje je prikazan mobilni predložak za news list view, news grid view te isti taj predložak, ali sa početnom izdvojenom grafikom, tzv. Hero Unit. Primjetite kako dva predloška s lijeve strane prikazuju isti set podataka no vizualno su drugačiji. Urednik samostalno odabire kako će mu koji sadržaj izgledati. To je moguće od verzije WordPress-a 4.7

Zašto su nam predlošci bitni? Na ranije spomenutom sastanku postavljena je teza kako sva WordPress sjedišta izgledaju isto – izjava je zapravo vezana uz spomenutu stigmu blogging platforme. Upravo su predlošci alat gdje dizajneri mogu osmisliti i producirati bilo kakvu vrstu moderne web interaktivnosti i željenog izgleda koristeći standardne jezike poput HTML, CSS, JavaScript i PHP-a. Jedino realno ograničenje koje im treba jest pravilno posložena arhitektura sadržaja.

Nakon što je analiza sadržaja gotova, može se pristupiti izradi grubih skica – tzv. Lo-Fi Wireframes. To je ujedno i prvi vizualni korak pri izradi web sjedišta. Dizajner sad konačno ispred sebe ima analizu sadržaja te može početi skicirati korisničke putanje, vrste izbornika i grube sheme weba. Naglasak je na riječi skicirati jer upravo je ideja wireframinga da se razradi čim smislenije rješenje s čim više ideja i opcija.

Lo-Fi wireframing je bitan kod ideizacije projektnog riješenja i razrade interaktivnosti sadržaja.

Kasnije se u procesu izrade detaljnih skica (Hi-Fi wireframing) odbacuju ‘slabe’ ideje te se klijentu prezentira detaljna skica web sjedišta. I tako za svaku jedinicu sadržaja i svaku vrstu predloška. Proces ste vjerojatno prepoznali iz koncepta brainstorminga – prvo se generira mnoštvo ideja (creation phase), a potom se odbacuju manje kvalitetne ideje (elimination phase).

Hi-Fi wireframing služi za detaljnije opisivanje interaktivnosti (npr. Video play gumb ili komentar ispod kućice, na slici). Unutar tog procesa eliminiramo loše i nerealne ideje.

Ideacija olovkom i papirom oslobađa veći broj ideja i obogaćuje suradnju s klijentom. Time se dozvoljava da sam vlasnik projekta ugradi svoje mišljenje i komentare u sam temelj razvoja web sjedišta. Nakon izrade detaljne skice slijedi produkcija User Interface kita (skup grafičkih elemenata koji vizualno opisuju web sjedište). Neki bi (ispravno) rekli da se time definira “DNA” web sjedišta. Tek nakon svih određenih radnji možete pristupiti izradi detaljnog vizualnog rješenja WordPress projekta. Po završetku tog procesa ćete imati gotovu WordPress temu prilagođenu svim klijentskim i timskim zahtjevima.

Korisnik uz najmanje moguće trenje treba doći do željenih podataka

Klasična greška klijenata, a i dizajnera, je da odmah na početku projekta žele kreirati i definirati krajnji vizualni izgled web sjedišta. Neki državni javni natječaju idu toliko daleko i uvjetuju prijavljenim timovima slanje dizajnerskih preview projekta. Takvi zahtjevi, uz to što su neetički, nemaju poslovnog smisla jer ignoriraju sve o čemu smo do sada pričali – analizu i arhitekturu sadržaja, grubo skiciranje, detaljnu razradu predložaka projekta, detaljne skice i šećer na kraju – eliminaciju loših ideja. Više o toj problematici pročitajte na www.nospec.com.

Pravilno razrađeno korisničko iskustvo je direktno povezano uz cilj javnih servisa da na efikasan način omoguće konzumiranje interaktivnih informacija. Državna matura kod NCVVO-a, kreditne linije za mlade poduzetnike kod HBOR-a, energetski natječaji kod ENU.hr su primjeri javnih informacija gdje korisnik uz najmanje moguće trenje treba doći do željenih podataka. Uz to, javni podaci imaju notu veće važnosti – HBOR-ova kamatna stopa ili ENU energetski certifikat će vam životno više značiti od GIF-a rasplesane mačke. Koncept dizajna javnih web sjedišta samim time treba biti lišen ekscesivnih marketinških poruka i loših dizajnerskih praksi. Takvo je stanje poželjna dizajnerska situacija, a WordPress alat koji multidisciplinarnom timu omogućava rad po čistom open source transparentnom okruženju.

Više o ovim temama donosi najveće hrvatsko okupljanje WordPress zajednice, WordCamp Zagreb, koje će se održati od 1. do 3. rujna sa središnjim konferencijskim danom u Muzeju suvremene umjetnosti. Prijavite se!

ponuda

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

Zašto više nije dovoljno biti dobar developer u Hrvatskoj (i zašto ‘freelance’ nije rješenje)

CEO-i Rentlija, Neuralaba, Bornfighta i Locastica u Labinu su razgovarali o tome kako učiniti zaposlenike sretnima, ali i o freelancerima te - podjeli zarade.

Analiza

PSD2: Banke, ‘fintech’ i tehnološki giganti upravo su u utrci života

Tko će prvi prijeći preko svih prepreka regulacija i standarda do otvorenog bankarstva?

Sponzorirano

Osvoji 50.000 kuna vrijednu stipendiju za studij programiranja!

Svake godine pojave se nove statistike - koliko programera nedostaje u Hrvatskoj i Europskoj uniji i koliko će taj broj porasti. Za sada se taj nedostatak već broji u stotinama tisuća.

Što ste propustili

Društvene mreže

Twitter zbunjuje one koji ga ne koriste, zato opaska ‘retweets ≠ endorsements’ nije dovoljna

Mnogi korisnici Twittera u svoju biografiju dodali su objašnjenje “retweets ≠ endorsements”. No, u pojedinim slučajevima, posebice ako je politika upletena, to neće biti dovoljno da se ogradite od sadržaja koji dijelite - posebice ako taj sadržaj dođe pred oči onih koji Twitter ne koriste.

Prikaz

Za moje sestrične: Dan u životu community managera u Remedy Entertainmentu

"Vida, ne možemo vjerovati da si već deset mjeseci u Finskoj, a mi još uvijek nemamo pojma što ti zapravo radiš", rekle su mi sestrične. Za njih, a i za sve ostale, slijedi moj tipičan radni dan u Remedy Entertainmentu.

Društvene mreže

Roditelji su nam preuzeli Facebook (i zato Facebook Portal ima smisla)

Dok ‘našu’ društvenu mrežu odbacuje Generacija Z, nasljeđuju je - naši roditelji.

Internet marketing

Je li studentski natječaj Pauza.hr-a zapravo kupovanje recenzija (kako tvrdi Plava Kamenica)?

U gastronomiji stručna Plava Kamenica prozvala je servis za naručivanje hrane Pauza.hr - i pokazala kako nije svaki natječaj za "influencere" zapravo kupovanje pozitivnih recenzija.

Kultura 2.0

Da, #PrekinimoŠutnju, ali bez ‘influencera’ Kujundžić bi se opet oglušio na mučnu istinu

Kampanja #PrekinimoŠutnju, koju je pokrenula udruga RODA - Roditelji u akciji još prije četiri godine, ovih je dana oživljena i višestruko pojačana zahvaljujući jednoj utjecajnoj ženi - saborskoj zastupnici Ivani Ninčević Lesandrić, koja je o svom mučnom iskustvu progovorila javno. I pokrenula lavinu koja se ne stišava.

Tehnologija

Treba li vam uopće televizor pogonjen Androidom?

Iako Android u televizorima nije novost, mnogi se prilikom kupovine novog TV-a i dalje pitaju - što on točno donosi i isplati se uopće izdvojiti više novca za uređaj pogonjen tim sustavom?