Kako izgleda dizajn i razvoj 'open source' online aplikacija

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.

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

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.

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

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!

Pravila ponašanja

Na Netokraciji za vas stvaramo kvalitetan, autorski potpisan sadržaj i zaista se veselimo vašim kvalitetnim, kontruktivnim komentarima. Poštujmo stoga jedni druge prilikom komentiranja držeći se sljedećih pravila ponašanja:

  • Ne budite 💩: Nema vrijeđanja, diskriminiranja, ni psovanja (osim ako nije osobni izričaj, ali onda neka psovka bude općenita, a ne usmjerena prema nekome)
  • Samo kvalitetna rasprava, manje trolanja: Ne morate se ni sa kim slagati, ali budite konstruktivni i doprinesite raspravi! Svako trolanje, flameanje, koliko god "plesalo" na granici, leti van.
  • Imenom i prezimenom, nismo Anonymous 👤: Autor sadržaja stoji iza svog sadržaja, stoga stojite i vi iza svog komentara. Koristimo ime i prezime (Hrvoje Lončar) ili barem ime i inicijala (Hrvoje L.) te pravu email adresu. Kako koristimo podatke koje tamo ostavljate? Bacite oko na našu izjavu o privatnosti.

Sve ostale komentare ćemo s guštom spaliti, jer ne zaslužuju svoje mjesto na internetu.

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

Dvije strane Porscheovog ulaganja u Greyp: Mali ulagači ljuti i nezadovoljni dok se Neufund hvali povijesnim exitom

Iza najave da Porsche preuzima većinski udio u Greyp Bikes krije se priča malih ulagača koji su 2019. u Greyp uložili kroz Equity Token Offering i sad se osjećaju - izigrano i izgurano.

Novost

Developeri, recite što doista želite: šareni ured, pivo petkom, veliku plaću, dobrog šefa….

Traženi, maženi, paženi i razmaženi. Tako mediji i društvo u zadnje vrijeme doživljavaju developere. Zagrebačka IT tvrtka odlučila je provjeriti jesu li doista takvi te pitati developere što oni doista žele.

Društvene mreže

Stiže Huuk. Nova globalna društvena mreža iz Rijeke?

Gradski autobus veselih boja s pitanjem "What the Huuk are we doing tonight" koji u zadnje vrijeme vozi Rijekom i obećanje da ćete od danas, 1. prosinca moći "Proširiti svoje pleme" najavili su lansiranje nove aplikacije u tom gradu. Kakve točno saznali smo u razgovoru sa suosnivačem Mateom Starčevićem Filipovićem.

Što ste propustili

Kultura 2.0

30 godina od prvog SMS-a: 6 stvari koji su obilježile način kako komuniciramo putem poruka

SMS je zagazio u svoju 30. godinu i kako nam se čini, neće još tako lako izumrijeti. Osim toga, svaki danom nas iznenađuju novi načini komuniciranja putem poruka. Tehnologija je divna, ali što je s korisnicma koji su ključni u definiranju "kulture dopisivanja". Postoji li "online bonton"?

Startupi i poslovanje

Jedan je po struci pravnik, drugi programer. Dijele ljubav prema računalnoj sigurnosti i – humoru

Evo priče o tome kako tehnologija povezuje različite ljude, kako se nose s izazovima koje pred njih tehnologija postavlja i što je presudno važno za uspješne projekte.

Startupi i poslovanje

1 dijete, 1 robot: CircuitMess i UBIK pokreću humanitarnu akciju za djecu u domovima

Humanitarna akcija traje do 22. prosinca, a trebala bi omogućiti da svako dijete u domovima za nezbrinutu djecu u Hrvatskoj dobije barem jednog robota.

Intervju

Može li Osijek zamijeniti Irsku? Siniši se dogodilo upravo to

Hrvatsku je zbog odlaska u inozemstvo radi potrage za (boljim) poslom napustio ogroman broj ljudi. Među njima je i nemali broj IT stručnjaka. Ipak, moguć je i drugačiji scenarij ako je prilika prava…

Startupi i poslovanje

Konzum je prvi trgovački lanac u Hrvatskoj u kojem se može plaćati kriptovalutama

Konzum je uz pomoć hrvatske tvrtke Electrocoin i njihovog sustava PayCek postao prvi trgovački lanac u Hrvatskoj u kojem možete plaćati kriptovalutama.

Startupi i poslovanje

Hrvatski BE-ON za pomoć blokiranim građanima osigurao 1,3 milijuna eura od Feelsgood fonda

Prema najnovijim dostupnim podacima u Hrvatskoj je preko 240.000 ovršenih potrošača. Hrvatski BE-ON želi im pomoći financijskim savjetovanjem.