Maanantaina, 25.9.2017

Sivuston tekemisen nĂ€kymĂ€tön osuus – tietorakenteen suunnittelu

Duden blogissa on puhuttu viimeaikoina suhteellisen paljon siitĂ€, paljonko nettisivut maksavat ja mistĂ€ se hinta sitten koostuu. Jokaisessa kirjoituksessa olemme kertoneet sivuston olevan aina rÀÀtĂ€löity 100% asiakkaan tarpeita varten, tuo rÀÀtĂ€löinti ulottuu aina visuaalisesta ilmeestĂ€ syvĂ€lle konepellin alle. Roni tiivistikin aiemmin osuvasti tuota konepellin alla olevaa osuutta. Ajattelin nyt avata tĂ€tĂ€ teemaa hieman enemmĂ€n nĂ€in […]

TÀmÀ kirjoitus saattaa sisÀltÀÀ vanhentunutta tietoa, sillÀ se on julkaistu yli 5 vuotta sitten.

Duden blogissa on puhuttu viimeaikoina suhteellisen paljon siitÀ, paljonko nettisivut maksavat ja mistÀ se hinta sitten koostuu. Jokaisessa kirjoituksessa olemme kertoneet sivuston olevan aina rÀÀtÀlöity 100% asiakkaan tarpeita varten, tuo rÀÀtÀlöinti ulottuu aina visuaalisesta ilmeestÀ syvÀlle konepellin alle.

Roni tiivistikin aiemmin osuvasti tuota konepellin alla olevaa osuutta. Ajattelin nyt avata tÀtÀ teemaa hieman enemmÀn nÀin back-end kehittÀjÀn roolissa kahdessa erillisessÀ kirjoituksessa.

KehitÀmme projektia mieluusti eteenpÀin ja ainakin rakennamme sivustomme sellaiseksi, ettÀ niitÀ pystyy kehittÀmÀÀn eteenpÀin.

EnsimmÀisessÀ osassa kÀsittelen tietorakenteen suunnittelun tÀrkeyttÀ ja kerron miten me Dudella hoidetaan asia. Seuraavassa osassa kerron minkÀ takia ja miten kiinnittÀÀ huomiota myös hallintapaneeliin.


KÀvijÀ nÀkee sivustosta ainoastaan ns. julkisen puolen, sen miltÀ kaikki tieto nÀyttÀÀ hienosti ja visuaalisesti aseteltuna. Tuskinpa kukaan tulee ajatelleeksi millÀ tavalla jokin tieto on tallennettu tietokantaan tai minkÀlaisilla palikoilla visuaalisuus on kasattu.

KÀytÀnnössÀ projektin koodaamisen aloitus alkaa aina tietorakenteen suunnittelusta. YhtÀÀn riviÀ koodia ei kirjoiteta, ennen kuin tietorakennetta on mietitty vÀhintÀÀn pÀÀssÀ, mieluusti jopa analogisella paperilla.

Miksi suunnitella tietorakennetta?

Selkeyden vuoksi samaan asiaan liittyvÀn tiedon hallinnoiminen on hyvÀ olla mahdollista yhdestÀ paikkaa. Sivuston sisÀllön yllÀpitÀjÀlle on paljon selkeÀmpÀÀ pÀivittÀÀ yhden ominaisuuden kuvausta itse ominaisuuden muokkasnÀkymÀstÀ, kuin erikseen jokaisella sivulla missÀ kyseinen ominaisuus nÀkyy tavalla tai toisella.

Tietorakenteen suunnittelu liittyy hallintapaneelin kÀyttömukavuuden ja selkeyden lisÀksi vahvasti jatkokehityksen ennakointiin. Kuvitellaan tilanne, jossa esimeriksi ominaisuuksia listataan ainoastaan etusivulla ja etusivulle on luotu lisÀtietokentÀt ominaisuuksien lisÀÀmistÀ varten. MitÀ sitten kun asiakas haluaakin listata ihan samoja ominaisuuksia, edes osaa niistÀ muilla sivuilla tai jokaiselle ominaisuudelle oman laajan esittelysivun?

Kaikki aiempi ominaisuuksiin liittyvÀ back-end koodi muuttuu turhaksi ja hommat joudutaan tekemÀÀn tÀltÀ osin nollasta uusiksi. Jos tietorakennetta on taas mietitty etukÀteen edes hieman ja luotu ominaisuuksille oma sisÀltötyyppinsÀ (custom post type, CPT), on homma todennÀköisesti paljon kivuttomampi.

Miten Dude tekee tÀmÀn kÀytÀnnössÀ?

Projekti kÀydÀÀn vielÀ kerran lÀpi yhdessÀ graafikon kanssa, jotta saadaan vastauksia seuraaviin kysymyksiin: minkÀlaisia sisÀltötyyppejÀ sivustolle tarvitaan? miten sen artikkelit jÀsennellÀÀn? tarvitaanko kategorioita? onko sisÀltötyypillÀ arkisto tai sen yksittÀisillÀ artikkeleilla julkista nÀkymÀÀ? linkittyykö joidenkin sisÀltötyyppien tiedot keskenÀÀn? mikÀ on sisÀltötyypin osoiterakenne (slug)? mikÀ on koko projektin kaiken sisÀllön osoiterakenne?

Vasta kun nÀmÀ asiat alkaa olla selvillÀ, aletaan kasaamaan sisÀltötyyppejÀ, niiden lisÀtietokenttiÀ (metadata) ja sivupohjia.

KÀytÀnnössÀ Duden back-end kehittÀjÀn workflow lisÀkenttien luomiseen ja sivuston julkiselle puolelle saamiseksi on seuraava:

  1. Huomataan ettÀ esimeriksi etusivulla on nostoja tuotteen ominaisuuksista ja jokainen nosto sisÀltÀÀ otsikon, ikonin sekÀ lyhyen kuvauksen.
  2. Selataan leiskat lÀpi ja katsotaan onko joillain toisella sivulla samanlainen elementti tai samat sisÀllöt esitettynÀ hieman eri tavalla.
  3. ”Ahaa, kaikki ominaisuudet esitellÀÀn yhdellĂ€ koontisivulla ja siellĂ€ nĂ€yttĂ€isi olevan sama otsikko sekĂ€ ikoni, mutta eri kuvaus ja erilainen visuaalisuus.”
  4. Luodaan ominaisuus -sisÀltötyypin artikkelille lisÀtietokentÀt ikoni, lyhyt kuvaus, lyhyt kuvaus etusivun nostossa ja kÀytetÀÀn otsikkona ominaisuuden nimeÀ.
  5. Luodaan etusivulle lisÀsisÀltökenttÀ josta voi valita nostettavat ominaisuudet, tai vaihtoehtoisesti luodaan yksittÀisen ominaisuuden muokkaukseen valinta tÀtÀ varten. Tapa riippuu hieman siitÀ, miten etusivun muu sisÀltö rakentuu ja tarvitaanko ominaisuusnostoja myös muualla.
  6. Luodaan teemaan osat (template part) erikseen yksittÀisen ominaisuuden nostolle koonti- ja etusivulla. NÀissÀ kÀytetÀÀn edellÀ mainittuja lisÀtietokenttiÀ. EnsimmÀistÀ osaa kÀytetÀÀn ominaisuuksien koontisivun listassa ja toista etusivulla.
  7. Teeman osissa tulostetaan kaikki olennaiset tiedot, tÀssÀ tapauksessa otsikko, edellÀ mainitut lisÀtietokentÀt ja yksittÀisen ominaisuuden osoite ilman html-rakennetta (poislukien kuvien, otsikoiden ja linkkien html tagit).

Sama rumba toistetaan sivupohja kerrallaan ja sivun elementti kerrallaan.

KÀytÀnnössÀ Duden työmallilla, jossa jokaisessa projektissa on erikseen back-end ja front-end kehittÀjÀt, sivuston julkinen puoli nÀyttÀÀ hyvin rujolle nÀiden työvaiheiden jÀlkeen, ennen kuin front-end kehittÀjÀ rakentaa asettelun visuaaliseen muotoon. Kaikki sisÀltö on nÀkyvissÀ kuten kuuluukin, mutta ei kovin nÀtisti.

Front-end kehittÀjÀ rakentaa projektista riippuen html-rakenteen ja css-tyylit sisÀllön ympÀrille ennen tai jÀlkeen taustatyön, usein antaen lisÀtehtÀviÀ, korjaustöitÀ tai muita muutoksia back-end kehittÀjÀlle. Loppu projektista etenee siis samaan aikaan front-end sekÀ back-end kehittÀjÀn pöydillÀ yhteistyötÀ tehden.

PS. Ollaan Ronin kanssa höpöttÀmÀssÀ marraskuussa Tampere WordPress Meetupissa meidÀn tavasta tehdÀ sivustoja, tulehan ihmeessÀ paikalle!

Lue myös nÀmÀ

MikÀ niissÀ verkkosivuissa oikein maksaa?

Verkkosivujen hinnat puhuttavat aina. Aiheeseen on otettu kantaa meidÀnkin blogissa pariin otteeseen.

NĂ€in Duden sivustouudistus tapahtui, vaihe vaiheelta

TÀmÀ versio Duden nettisivuista oli mahtava yhteistyöprojekti. Sivustolla on jokaisen neljÀn ukon mieltymyksiÀ ja tuotoksia tasapuolisesti ja toivomme, ettÀ se nÀkyy.

KÀrsitkö hitaasti latautuvista verkkosivuista? Korjaa nÀmÀ asiat ja vÀltÀt sudenkuopat

Nettimaailman isoin riesa on hitaat sivustot. MikÀÀn ei ole rasittavampaa kun etsiÀ tietoa tai hoitaa pÀivittÀisiÀ askareita netissÀ ja odotella sekuntitolkulla sivun latautumista.