MAINOSALANVERKKOSIVUSTONERITYIS0 PIIRTEETJANIIDENTOTEUTTAMINEN HeikkiAla0Nikkola Opinnäytetyö Toukokuu2013 Mediatekniikankoulutusohjelma Tekniikanjaliikenteenala
Tekijä(t) ALA0NIKKOLAHeikki Julkaisunlaji Opinnäytetyö Päivämäärä 06.05.2013 Sivumäärä 39 Julkaisunkieli Suomi Verkkojulkaisulupa myönnetty (X) Työnnimi MAINOSALANVERKKOSIVUSTONERITYISPIIRTEETJANIIDENTOTEUTTAMINEN Koulutusohjelma Mediatekniikankoulutusohjelma Työnohjaaja(t) MANNINEN,Pasi Toimeksiantaja(t) HAUTANEN,Arto0Into0DigitalOy Tiivistelmä Opinnäytetyössätutkittiinerityispiirteitäja0toiminnallisuuksia,joitauseimmatmainosalanverk0 kosivutoteutuksetsisältävät.toimeksiantajanaopinnäytetyössätoimiinto0digitaloy,jonkatoteut0 tamaanverkkosivustohankkeensuunnitteluunjatoteutukseenopinnäytetyöpohjautui.opinnäyte0 työssäkäsiteltiinmainosalansivustojaominaisuustasollajatarkoituksenaolilöytäänäihinominai0 suuksiinkestäviä,luotettaviajamonipuolisiaratkaisuja. Opinnäytetyössävertailtiinmainosalanverkkosivutoteutustenalustaksisoveltuviasisällönhallinta0 järjestelmiä,joistatutkittiintarkemminmainosalansivustojenvaatimuksiinenitensoveltuvaa WordPressiäsenerityisominaisuuksienosalta.Tarkasteltaviaominaisuuksiaopinnäytetyössäolivat kieliversiointi,erikoisfonttienkäyttö,responsiivinensuunnittelujateemojenkäyttö.näidenerityis0 ominaisuuksienmerkitystätutkittiinmainosalanverkkototeutuksienosaltayleisesti. Opinnäytetyössätutkittiinnäitätekniikoitaverkkosivuhankkeenosaltakäytännössä,toteuttamalla niitäjulkiseenverkkosivustoon.hankettakäsiteltiinsuunnittelun,toteutusprosessinsekätulosten osalta.opinnäytetyönpohdintaosiossavertailtiinteoriaosiossatutkittujenerikoisominaisuuksien toteutusmahdollisuuksiahankkeessakäytettyihintoteutuksiin.pohdintaosiossakäsiteltiinerityisesti hankkeessakäytettyjenratkaisujenkannattavuuttaniidenpitkäikäistäkäyttöäjajatkokehitysmah0 dollisuuksiaajatellen.pohdintaosiossaanalysoitiinmyöstulevaisuudennäkymiänäidenratkaisujen jaerikoisominaisuuksienosalta. Hankkeessatutkitutratkaisutosoittautuivatoikeiksiratkaisuiksisivustonvaatimustensuhteen. Ratkaisujentodettiinolevansoveltuviamyösjatkossatoteutettaviahankkeitavarten,joihinon suunniteltusamankaltaisiaratkaisuja.hankkeenlopputuloksenasyntynytverkkosivustojulkaistiin marraskuussa2012. Avainsanat(asiasanat) Sisällönhallintajärjestelmä,Responsiivinensuunnittelu,Kieliversiointi Muuttiedot
Author(s) ALA0NIKKOLAHeikki Typeofpublication Bachelor sthesis Date 06.05.2013 Pages 39 Language Finnish Permissionforweb publication (X) Title COMMONSPECIALFEATURESOFMARKETINGWEBSITESANDTHEIRIMPLEMENTATIONS DegreeProgramme MediaEngineering Tutor(s) MANNINEN,Pasi Assignedby HAUTANEN,Arto0Into0DigitalOy Abstract Thethesisexaminesthespecialfeaturesrequiredbymanymarketingwebsites.Thesubjectofthe thesiswasassignedbyinto0digitaloy.thethesisisbasedontheplanninganddesigningofawebsi0 teprojectsetoutbythecompany.thethesisexamineswebsitesattheleveloffeatures.themain goalofthethesiswastofindsustainablesolutionsforthespecialfeatures. Thethesisalsocomparedcontentmanagementsystemssuitableasaplatformformarketingwebsi0 tes specialfeatures.outofthreecandidateswordpresswaschosenforfurtherexaminationon howthespecialfeaturescouldbeimplemented.thespecialfeaturestobeexaminedweremultilin0 gualcontentmanagementforthecontentmanagementsystem,usingspecialfonts,responsive websitedesignandpackagingallthisfunctionalityasatheme.thesefeaturesandtheirsolutions wereexaminedingeneral. Thetheoriesandsolutionswereappliedtoawebsiteprojectandexamininginapracticethenim0 plementedonacommercialwebsite.theprojectwasinspectedintermsofplanning,design,im0 plementationandresults.theresultsoftheprojectandthesolutionsusedwerethencomparedto theexaminedtheoriesandpossiblesolutions.thesummaryspecificallyexaminedtheviabilityof thechosensolutionsbytheirlongevityandfurtherdevelopmentaspects.thesummaryalsodealt withpossiblefuturescenariosconcerningthespecialfeaturesandthesolutionsused. Thesolutionsexaminedturnedouttobethecorrectsolutionsthatmatchedtherequirementsof thewebsite.thesolutionshavesincebeenappliedtomanymoreprojectswithsimilarrequire0 ments.theproject sresult,thewebsitewaspublishedinnovember2012 Keywords ContentManagementSystem,Responsivedesign,Multilingualsites Miscellaneous
1 SISÄLTÖ 1TYÖNLÄHTÖKOHDAT...3 1.1Tausta...3 1.2Toimeksiantaja...4 1.3Tavoite...4 2SISÄLLÖNHALLINTAJÄRJESTELMÄT...5 2.1Yleistä...5 2.2WordPress...5 2.3Drupal...6 2.4Joomla...6 3MARKKINOINTISIVUSTOJENERIKOISOMINAISUUDET...8 3.1Yleistä...8 3.2Kieliversiointi...8 3.2.1Yleistäkieliversioinnista...8 3.2.2Toteutustapasisällönhallintajärjestelmässä...8 3.2.3WordPressinkieliversiointimahdollisuudet...9 3.3Erikoisfonttienkäyttö...11 3.3.1Yleistäerikoisfonteista...11 3.3.2Toteutustavat...12 3.4Teemat...13 3.4.1Yleistäteemoista...13 3.4.2Teemanrakenne...14 3.4.3Sivupohjanrakenne...16 3.5Responsiivinensuunnittelu...17 3.5.1Yleistäresponsiivisestasuunnittelusta...17 3.5.2Tekniikat...18 4MARKKINOINTISIVUSTONTOTEUTUSHANKE...21 4.1Lähtötilanne...21 4.2Tekninensuunnittelu...22 4.3.Sisällönhallintajärjestelmänvalinta...23 4.3.1Huomioonotettavatasiatsisällönhallinnanvalinnassa...23 4.3.2Valinta...25
2 4.4Käyttöönotto...26 4.5Erikoisominaisuuksientoteutus...27 4.6Tulokset...34 5POHDINTA...36 LÄHTEET...40 KUVIOT KUVIO1.WordPressWsivunhallintanäkymänkielivalitsin...10 KUVIO2.EsimerkkimediaqueryWtekniikallaporrastetustaresponsiivisuudesta...19 KUVIO3.EsimerkkifluidWtaitosta...20 KUVIO4.MultipleContentBlocksWlisäosankaksiitsenäistäsisältöeditoria...29 KUVIO5.Sisältösivunsivupohja...30 KUVIO6.VäriteemanmäärittäminenCustomFieldinavulla...31 KUVIO7.Etusivunsivupohjanrakenne...32 KUVIO8.Responsiiviseksioptimoitusisältösivu...33
3 1TYÖNLÄHTÖKOHDAT 1.1Tausta Verkkosivustojenmerkitysmarkkinointialallaonmuuttunutviimevuosinamerkittä0 västi.vielämuutamiavuosiasittenverkkosivustotmerkitsivättoteuttavaltataholta ostettavaatuotetta,jonkapäivittäminentarkoittihtml0koodiinkiinteästisijoitettu0 jensisältöjenmuokkaamistaasiantuntevanhenkilöntoimesta.myösnämäsivustot suunniteltiinetupäässäselainyhteensopivuuksienpuitteissa.ulkoasussakäytettiin monestiyksinkertaisiaratkaisuja,jotkatoimivathyvinkaikillaselaimillajagrafiikan toteutustapahtuipitkältikuvina. Nykyäänverkkosivustotovatluonteeltaanlähespalvelunomaisia.Neovatminimis0 säänsuurenpalveluntarjoajanhyvinylläpidetyssäwebhotellissasijaitseviasisällönhal0 lintajärjestelmänpäällätoimiviaintuitiivisiakehyksiä,joitaläheskukatahansateks0 tinkäsittelyohjelmaakäyttävähenkilövoitäydentäähaluamallaanmultimediasisällöllä ilmanmerkittävääperehtymistätekniikkaan.sivustojenulkoasutsuunnitellaansisäl0 lönmukaanvenyviksisekäkatseltaviksilähesmillätahansaverkkoyhteyteenkykene0 vällälaitteella.yhäuseampaanlisäosaantaiohjelmistoononsaatavillamyösvarteen0 otettavailmainentaierittäinhalpakevyempivaihtoehto,raskaanjakattavanmaksul0 lisensovelluksensijaan. Mikääninternetistäladattava,palvelimelleasennettavapaketillinentiedostojaeikui0 tenkaanvoiollavalmissivustototeutus,jotenulkoasunsuunnittelusekäteknisento0 teutuksensuunnitteluovatyhämerkittäviäjavälttämättömiävaiheitasivustohank0 keissa.myösvalmiidenlisäosienjasovelluksientarkkaarviointiedesauttaatoteutuk0 senjouhevuutta.huonostitoteutetuntaisattumankauttadefacto0asemaanpääty0 neenlisäosanvalintavoiaiheuttaarunsaastiturhanajankäyttöägooglenkauttahel0 postilöytyneenselvittämättömänongelmanratkomiseen.
4 1.2Toimeksiantaja OpinnäytetyöntoimeksiantajanaoliInto0DigitalOy,jokaonJyväskylässä,Lappeen0 rannassajahelsingissätoimivadigitoimisto,jonkaasiakaskuntakoostuupääosinmai0 nostoimistoista.suurimmaksiosaksiinto0digitalinpalvelutkoostuvatbrändisivustois0 ta,kampanjasivuista,facebook0sovelluksista,display0mainoksista,mobiilisovelluksis0 tasekämuistainternetissätapahtuvanmarkkinoinnintoteutuksista.myösmobiiliso0 vellustoteutuksetovatyleistyneetyrityksentoimenkuvassa.into0digitaloyonyksi viestintäkonserniintojaidantytäryhtiöistä,mainostoimistoidaframinohella. 1.3Tavoite Opinnäytetyöntavoitteenaoliselvittäähyviäkäytänteitämainosalanverkkosivusto0 jentoteutukseenjaniihinliittyviinerityisvaatimuksiin.vaatimuksetkäsittävätmones0 tikokosivustonlaajuisenmuokattavuudenasiakkaantoimesta,kieliversioinnin,blogi0 toiminnonkommentointineen,erikoisfonttienkäytönsekäulkoasunresponsiivisuu0 denmobiililaitteitakohtaan.opinnäytetyössäkäsitelläänmyöshanketta,jossaulko0 puolinentahoontoteuttanutsivustongraafisensuunnittelun,käyttöliittymäsuunnit0 telunsekäsivustonrakenteensuunnittelun.toteutettuhankekäsittelisivustonsivus0 tonteknistätoteutusta,jonkainto0digitaloyteki.sivustoonsijoitettuulkopuoliselle palvelimelle,jotenhankeeikäsittelekävijämääriäjapalvelimenmitoitusta. Opinnäytetyössäpyrittiinlöytämäänedellämainittuihinvaatimuksiinjatkossakäytet0 täviäratkaisuja,sillänämäovatalatiyleistyviäperusvaatimuksiamainosalansivus0 toissa.monestinämäsivustotkoostuvatperustaltaanerisivutyypeistä,kutenetu0, sisältö0jayhteystietosivusta.osanäistäerikoistoiminnoistaonyleisestitoteutettava jokoyksittäisinäräätälöinteinätaivaihtoehtoisestietsimälläluotettaviavalmiitalisä0 osia.lisäosienkäyttöonkuitenkinriskialtista,koskamoniintarkoituksiineilöydyns. defacto0ratkaisua,vaanylistettylisäosasaattaaollahyvinkinhuonostitoteutettu.
5 2SISÄLLÖNHALLINTAJÄRJESTELMÄT 2.1Yleistä Sisällönhallintajärjestelmäonverkkosivunteknisenäpohjanakäytettäväpalvelimelle asennettavajärjestelmä,jonkakauttasivustonsisältöonhallittavissaeditorienkaut0 ta.tämämahdollistaasivustonhallitsemisenilman,ettämuokkaustoimissatarvitsee osatakäsitellähtml0koodiataityylimäärityksiä.sisällönhallintamyöshoitaakaikki sivustontietokantatoimenpiteet. TässäopinnäytetyössäsisällönhallintajärjestelmätonrajattuvainLAMP0ympäristöön asennettaviinilmaisiinavoimenlähdekoodinsisällönhallintajärjestelmiin,jotkaovat laajaltitunnettujajakäytettyjä. 2.2WordPress WordPressonyksimaailmansuosituimmistaOpenSource0sisällönhallintajärjestel0 mistä.seonhyvinkevytsovellus,jonkasuosioperustuuhelppokäyttöisyyteensekä yksinkertaisuuteen.wordpresskehitettiinb2/cafelog0blogisovelluksenpohjalta20000 luvunalussaamerikkalaistenkehittäjienmattmullenweginjamikelittlentoimesta. WordPressinensimmäinenversiojulkaistiintoukokuussa2003javiimeisinversio 3.5.1onjulkaistutammikuussa2013.Wordpress.comtarjoaavalmiiksiWordPressin palvelimelleasennetunilmaisensisällönhallintapalvelunjawordpress.orgladattavan paketin,jonkavoiasentaaomaanwebhotelliintaipalvelimelle.(about2013;history 2013.) WordPresssisältääitsessäänvainolennaisimmattyökalutblogisivustontaitavan0 omaisemmanverkkosivustonpystyttämiseenjasisällönhallintaan.sesisältääartikke0 leihin,kategorioihin,kommentointiinjaavainsanoihinperustuvanblogitoiminnon, sisältösivutoiminnon,valikkotyökalunsekäkäyttäjienhallinnan.yksinkertaisistape0 rustoiminnallisuuksistahuolimattawordpressinollessaavoimenlähdekoodinsovellus
6 jaerittäinhelppomuokattava,senlaajakehittäjäkuntaonkehittänytmerkittävän määränlisäosia,jotkawordpressingnugpl0lisenssinvuoksiovatmyösavoimialäh0 dekoodiltaanjasiksimyösmuokattavissaomiintarpeisiin.lisäosatvoivatollailmaisia taimaksullisia.opinnäytetyönkirjoitushetkelläniitäolisaatavillayli24300erilaista. (About2013.) WordPressinteknisetvaatimuksetovatmyöshyvinyksinkertaiset.Uusinversio3.5.1 vaatiipalvelintilaltaphp5.2.40tukeajamysql5.00tukea.monetwebhotellitriittävät hyvinwordpress0asennukseen.josjostainsyystäesimerkiksiphp5.20tukeaeiole, voidaankäyttäävanhempaawordpress0versiota3.1,jokavaatiiphp4.3jamysql 4.1.20tuen.KaikkivanhatWordPress0versiotovatladattavissaWordPressinsivustolta. MonistayleisimmistälisäosistaonsaatavillaversiotmyösvanhemmilleWordPress0 asennuksille.(requirements2013.) 2.3Drupal DrupalonWordPressinjaJoomla:ntavoinavoimeenlähdekoodiinperustuvasisäl0 lönhallintajärjestelmä,jonkaalkuperäinenkehittäjäondriesbuytaert.senkehitys alkoivuonna1999jasenensimmäinenjulkaisuolitammikuussa2001.viimeisinver0 sio7.22onjulkaistuhuhtikuussa2013.drupalintakanaonuseidenyleisimpiensisäl0 lönhallintajärjestelmientapaanlaajakehittäjäkuntajakattavalisäosavalikoima.kuten WordPress,DrupalvaatiitekniseksipohjaksivainPHP5.20tuensekäMySQL0,Post0 gresql0taisqlite0tietokannan.drupalonpitkältihyvinmodulaarinenjärjestelmä, jostakehittävätahovoiräätälöidäjuurihalutunlaisenkokonaisuuden.(historyof Drupal2013.) 2.4Joomla EdellämainittujenWordPressinjaDrupalinkaltaisestiJoomlaonmyösyksisuosi0 tuimmistaavoimenlähdekoodinsisällönhallintajärjestelmistä.joomlaonvuonna 2005julkaistu,MiroInternationalinkehittämäprojekti,jostaonkehittynytyksimaa0
7 ilmantunnetuimmistasisällönhallintajärjestelmistäperinteisienverkkosivujenkehi0 tykseen.joomlanuusinversioon2.59,jokaonjulkaistuhelmikuussa2013.wordp0 ressinollessaenemmänblogikäyttöönorientoitunutsekävapaamuotoisempiohjel0 mointikäytännöiltäänonjoomlaperiaatteeltaansuuremmilleverkkosivustoilleja intraneteillesuunniteltu.joomlakäyttäämvc0arkkitehtuuria(model0view0 Controller),jossakäytetäänkokonaisvaltaisestiolio0ohjelmointiajatoiminnotoneri0 teltyomiinkokonaisuuksiinsa.myösjoomlaonteknisiltävaatimuksiltaanhyvinyk0 sinkertainen.sevaatiiphp5.3jamysql5.0.40tuen.(whatisjoomla?2013;techni0 calrequirements2013;platform2012;featuresoverview2013.)
8 3MARKKINOINTISIVUSTOJENERIKOISOMINAISUUDET 3.1Yleistä Kappaleessaesitellyterikoisominaisuudet:kieliversiointi,responsiivisuus,erikoisfont0 tienkäyttöjaulkoasunpaketointiteemaksiovatuseinmainosalansivustototeutuksis0 satoistuviaominaisuuksia.toimeksiantajankäyttäessäuseimmissatoteutuksissa WordPressiä,kappaleessarajataanominaisuuksientoteutustapojenläpikäyntivain WordPressiin. 3.2Kieliversiointi 3.2.1Yleistäkieliversioinnista Verkkosivustojenyksitavanomaisimmistavaatimuksistaonkieliversiointi.Yksinkertai0 sissayhdensivunsivustoissavoidaanmonestitoteuttaasamatekemälläsivustadup0 likaattijakääntämällätekstithalutullekielelle.toinenyksinkertainentapaontehdä lyhytyhteenvetosivu,jossaonlyhyestisivustonkaikkitärkeätietokäännettynä.kat0 tavampitoteutustapakäännöstentoteuttamiseenverkkosivustoissaonkuitenkin tekstisisältöjenversiointierikielilläjaniidenkeskinäistensuhteidenmuodostaminen. 3.2.2Toteutustapasisällönhallintajärjestelmässä Sisällönhallintajärjestelmässäpyritäänkieliversioinnintoteutuksessasiihen,ettäsi0 vustonsivurakennepysyisimuuttumattomanajakaikellesisällölleolisimahdollisuus tehdäversioterikielille.monissasisällönhallintajärjestelmissätämäeioleperustoi0 minnallisuus,vaansetäytyytoteuttaauseinerillisenlisäosankautta.monetnäistä lisäosistaovatkuitenkinpuutteellisia,sillähyvänkieliversiointitoiminnontekeminen vaatiimonestisisällönhallintajärjestelmäntietokantarakenteenradikaaliamuokkaus0 ta.käytännössäsivustonsisältöjenvaatimarakennetuleetässärakennemuutoksessa duplikoitumaanerikieliversioidenmääränverran.
9 Jottakieliversiointitoiminnonkäyttösisällönhallintajärjestelmänhallinnassaolisi mahdollisimmanjohdonmukaistajayksinkertaista,tuleemuokattavastatekstisisällös0 täpäästäluomaanuusikieliversiotaimuokkaamaanolemassaolevaakieliversiota riittävänhelposti.lisäosassatuleemyösollaselkeätmahdollisuudetmäärittääkieli0 versioinninasetukset.tämäontärkeäasiasivustototeutuksissa,joissasivustonkäyt0 töliittymässäonkielivalitsinjostapääseeaukiolevansivunerikieliversioille.ontär0 keäämäärittääpoikkeustilanteet,mihinohjataanjosaukiolevastasivustaeiolekieli0 versiota. 3.2.3WordPressinkieliversiointimahdollisuudet WordPressinvakioasennuksessatuleemukanavielätoistaiseksikokeellinenWord0 PressMultiSite,jotavoikäyttääkieliversiointiin.Seonominaisuus,jokaantaamah0 dollisuudettehdärinnakkaisiaasennuksiaerialiosoitteidenalle.ominaisuusmahdol0 listaatehdäsamaateemaakäyttäenerillisiäwordpress0asennuksia,sekäniidenhal0 linnollisienasetustenmuokkaamisenkeskitetysti.multisiteeikuitenkaanannamah0 dollisuuttalinkittääsisältöjäkeskenääntaitehdäkielivalitsinta,jostapääseeerikieli0 versionvastaavallesivulle.(createanetwork2013.) WordPressilleonuseampiakieliversiointiintarkoitettujalisäosia,jotkatarjoavatnämä puuttuvattoiminnallisuudet.osanäistälisäosistaonilmaisiaosamaksullisia.ilmaisis0 talisäosistayksisuosituimmistaonkiinalaisenqianqininkehittämäqtranslate0 lisäosa,jokatarjoaayksinkertaisenkäännöstoiminnonartikkeleillejasivuille.qtrans0 latentapauksessakääntäminentapahtuujokotekemälläkieliversiottaimerkitsemällä samaansisältöönshort0tageilla(wordpressinsisältöeditorissakäytettäviälyhyitälisä0 osakohtaisiakoodimerkintöjä)tekstinsekaanallaolevanesimerkinmukaisesti (qtranslate2013.): < :en >Englanninkielinen tekstiversio< : > < :fi >Suomenkielinen tekstiversio< : >
10 qtranslateonkuitenkinhyvinkevytlisäosa,jokatarjoaavainyksinkertaisimmattar0 peetkieliversiointiin.setarjoaaartikkelienkäännöstyöhönmyösautomaattisenkään0 tämisen.kutenmonetilmaisetpienenkehittäjätahontekemätlisäosat,qtranslateei olejoissaintapauksissatäysinyhteensopivamuidentietokantarakenteitamuuttavien lisäosienkanssa.(qtranslate2013.) MaksullinenvaihtoehtoqTranslatelleonWPML0lisäosaperhe.WPML0lisenssionkehit0 täjäkohtainenjakattaarajattomanmääränsivuja,joitakehittäjäylläpitää.pelkkiin blogitoimintoihinwpmltarjoaa29dollarinarvoistalisenssiä,kuntaas79dollarilla saakokowordpress0toteutuksenkääntämiseenriittävänlisäosavalikoiman.artikke0 leihinjasisältösivuihinwpmltarjoaakäyttöliittymässäänominaisuudettehdäkään0 nösversioita,sekäsisältöjenkopioinnintoisistakieliversioista.wpmltarjoaamyös artikkelienjasivujenlistauksiinindikaattoritjoskieliversiotovatolemassalistatuista sisällöistä,sekälinkitniidenluomiseenjamuokkaamiseen.tämänäkymäonesitetty kuviossa1.(purchase2012;features2012.) KUVIO1.WordPress0sivunhallintanäkymänkielivalitsin NäidenpäätoiminnallisuuksienlisäksiWPMLtarjoaamyöslisäosiamuidenominai0 suuksienkäännöstenhallintaan.wpmlcoretarjoaasivustonreititysmahdollisuudet, kutenaliosoitteidenkäytönkieliversioissajamonipuolisenkielivalitsimen,jonkavoi
11 sisällyttääsivustonkäyttöliittymään.wpmlstringtranslationontyökalu,jollasivus0 tollailmeneviätekstejävoikääntää searchandreplace 0periaatteella,kääntäenjo0 kaisenkäännökseenviitatunmerkkijonon,jotkasivustoltalöytyvät.tämätyökaluon erityisenhyödyllinenwidgetejäjaomiapluginejakäyttäessä,jotkaeivätwpml:n kauttanormaalistimahdollistakieliversiointia.wpmlcmsnavigation0lisäosaontyö0 kaluvalikoidenkieliversiointiin.(features2012;wpmlcoreandadd0onplugins 2012.) WPMLonsuurenkehittäjätahontoteuttamajaylläpitämävakaajamonipuolinenli0 säosa,jokatarjoaaajoissatuenuusimmillewordpress0julkaisuille,sekäarkistonvan0 hemmistalisäosienversioistavanhemmillewordpress0versioille.huolellisestitoteu0 tettunawpmlonmyöshyvinyhteensopivamuidenlisäosienkanssa.wpmltarjoaa lisäpalvelunaammattilaiskääntäjienkäännöspalveluja.(features2012.) 3.3Erikoisfonttienkäyttö 3.3.1Yleistäerikoisfonteista Erikoisfonttienkäyttöwebissäontullutainayleisemmäksiajansaatossa.Tässäkon0 tekstissaerikoisfontittarkoittavatfontteja,jotkaeivätolens.websafe0fontteja.web0 safe0fontitovatfontteja,jotkalöytyvätuseiltapäätelaitteiltatainiilleonolemassa hyvinsamankaltaisiakorvaaviafontteja,josvaadittuafonttiaeilöydy.mainosalan verkkosivustoilleniidenkäyttöonjoalanpuolestahyvinominaista.vaatimuksena näidenfonttienkäytölleonesimerkiksibrändiengraafistenulkoasujentiukatmää0 reet.(csswebsafefontcombinations2013.) Minimissäänerikoisfonttienkäyttöverkkosivustoillakäsittääesimerkiksisivustonot0 sikotbrändingraafisenohjeistuksenvaatimallaerikoisfontilla.ääritilanteissakoko sivustontekstisisältösaattaavaatiaerikoisfontinkäyttöä.ideaalitilanteessakuitenkin sivustonleipätekstin,linkkienjalistaustentulisikäyttääwebsafe0fontteja,koska
12 useimmissatoteutuksissatämäratkaisuparantaasuorituskykyäjapäätelaitteesta riippumattaonvarmaa,ettätekstisisältönäkyyoikein. 3.3.2Toteutustavat Erikoisfonttejaonmahdollistakäyttääuseallatavalla.Luotettavintapatähänonteh0 däteksteistä,joissanäitäfonttejaonkäytetty,kuviajasisällyttääkuvatiedostotteks0 tinsekaan.tämätoteutustapaonerittäintyöläsjatekstienmuokkausvaatiiainauu0 sienkuvientekemisen.lisäksityylimuutokseteivätvaikutakuvamuodossaolevaan tekstiin. Ensimmäisiäerikoisfonttienkäyttötapojaolivatmm.sIFRjaCufón,jotkaovatJava0 Script0kirjastoja,jotkamuuttavatHTML0tiedostossaolevaatekstiäeritekniikoineri0 koisfonteiksi.sifrkääntääfontitflash0elementeiksijacufóncanvas0elementeiksi. Molemmattekniikatvaativatfonttitiedostonkääntämisenomillageneraattoreillaan JavaScript0tiedostoiksisekäoikeudenfonttienupottamiseenverkkosivustoille.Nämä tekniikatovatkuitenkinepävakaitajakerryttävätsuurenosansivustonlatausajasta. MonestiCufónillatehdytfontitkäyttäytyväteritavoinselaimienvälillä.Myösfonttien piirtyminensivustolleonmonestihäiritsevää,koskauseitasatojakilotavujasuurien JavaScript0tiedostojenlatautuminenjasuorittuminensijoittuumelkomyöhäänsivun latauksessa,silläniitäkäytetäänasynkronisesti.(davidson2004;aboutcufón2012.) CSS3onvähitellentuonutmukanaanmyösfonttienkäytön@font0face0tekniikalla. TämätekniikkavaatiiminimissäänfonttitiedostojensisällyttämisenTrueType0 muodossapalvelimelle,sekäniidenkutsumisentyylitiedoston@font0face0 komennolla.tämätekniikkaonerittäinvakaajanopea.fontitpiirtyvätparhaimmalla mahdollisellatavalla,sekämuotoilutoimiiparemminkuinesimerkiksicufóniakäyttä0 essä.@font0facenollessacss30tekniikka,seeitoimivanhemmillaselaimilla.tällä hetkellälaajaltikäytössäolevistaselaimista@font0faceeituemicrosoftininternet Explorer8:aataivanhempaa.Jotta@font0facetoimisimahdollisimmanmonessapää0 telaitteessa,tuleefontistaollauseitaerityyppisiäversioita.näidenversioidentekemi0
13 seenlöytyymuutamiaverkkopalveluita,kutenfontsquirrel.nämäpalvelutmuodos0 tavatalkuperäisestätruetype0taiopentype0fontistasvg0,eot0,jawoff0versiot, sekägeneroiautomaattisestityylitiedostoonliitettävän@font0face0tagin.myös @font0facevaatiikäytettävältäfontiltaupotusoikeudenjanämäfonttigeneraattorit eivätannageneroidamuitaversioitajosfonttienkehittäjätovatlisänneetfonttinsa ns.mustillelistoille.(introductiontowebtypographyand@font0face2011;css3 @font0facerule2013.) Koskafonttienkäyttöoikeuksienostaminenverkkosivustolleupotukseenvoiollaerit0 täinkallista,eiseolevälttämättäparasratkaisulyhytaikaisenkampanjasivustonto0 teutukseen.muutamattahot,kutengoogle,fonts.comjatypekit,tarjoavatpalveluja, jotkatarjoavatfonttejakäytettäväksijokoilmaiseksitaivuosittaistapientämaksua vastaan.nämäpalvelutmuodostavathinnoitteluntaiilmaispalvelunjokosivunkävi0 jämäärienmukaan.esimerkiksitypekitintarjoama49.99dollariavuodessamaksava palvelukattaamainostoimistontarpeeterittäinhyvin,tarjoten500,000sivulatausta kuukaudessa,sekäkaikkienheidäntarjoamienfonttienrajoittamattomankäytönra0 joittamattomassamäärässäverkkosivustoja.vastaavastiyksifonttiperhe,jokasisältää senerivariaatiot,voimaksaatuhansiaeuroja.fontinostaessaanyrityssaayrityskui0 tenkinsenkäyttöoikeudetmyösmuissamedioissa.tämämenetelmäonyleinensiinä tapauksessa,kunsuurempibrändisisällyttääerikoisfonttienkäyttöägraafiseenoh0 jeistukseensa.(pricing2013.) 3.4Teemat 3.4.1Yleistäteemoista WordPress0toteutuksessaulkoasujaperustoimintojenmuokkauksetkootaankoko0 naisuuksiin,joitakutsutaanteemoiksi.teemasisältääsivustostakaiken,mitäeihallita sisällönhallintatyökalujenkautta.teemojentarkoituswordpressissaonmuodostaa yhteenkansioonsisällytettäväkokonaisuustiedostoista,joitatarvitaansivustonulko0 asuun.(themereview2013.)
14 3.4.2Teemanrakenne WordPress0sivustonulkoasussanäkyväHTML0koodirakentuuteemassasijaitsevista template0tiedostoista,joistasisällytetääntarpeellisiaosiariippuenladattavansivun tyypistä.template0tiedostotsisältäväthtml0koodia,jonneonsijoitettuphp0kielellä WordPressinomillakomennoilla(TemplateTags)haettavaasisältöä,kutentekstisisäl0 töä,otsikoita,kuviataisisältösivunjaartikkelienominaisuuksia,kutenjulkaisupäivä0 määriä,kategoriatietojajakirjoittajatietoja.keskeisimpiäteemanulkoasuelementtejä verkkosivutoteutuksissaovattiedostot:header.php,footer.phpjapage.php,johon headerjafootersisällytetään.teemasisältääjuurikansiossaanmyöstavanomaisen tyylitiedostonstyle.css,johonsivustontyylitjateemantiedotsisällytetään.(theme Review2013;SteppingIntoTemplateTags2013.) Teemasisältääuseintiedostonfunctions.php,jossatehdäänkaikkiWordPressinva0 kiotoiminnallisuudenkäsittely.functions.php:npääasiallinentarkoitusontarjota helppoalustatoiminnallisuuksienmuokkaamiseenjalisäämiseenilman,ettäkehittä0 jäntarvitseemuokatawordpressinlähdekooditiedostoja.wordpresstarjoaatoimin0 tojenmuokkaamiseenhook0komentoja,joillavoidaanlisätäkoodiasuoritettavaksi jonkinwordpressinperustoiminnallisuudenyhteyteen.tällätoiminnallisuuksienkes0 kittämisellähelpotetaanmyösongelmanratkaisua,sekäselkeytetäänkoodinraken0 netta.(themereview2013;creatingyourownpagetemplates2013;steppinginto TemplateTags2013.) Functions.php0tiedostomahdollistaamyössuurenosanWordPress0asennuksenhal0 lintaosionkustomoinnista,kutenperustoiminnallisuuksienkäytönestämisensekä käyttäjätasojenoikeuksienmuokkaamisen.nämämuokkausmahdollisuudetovatkäy0 tännöllisiäniissätapauksissa,jolloinhalutaankarsiahallintaosiostatarpeettomiatoi0 minnallisuuksiapois.(steppingintotemplatetags2013.)
15 Teemanpakollisiatiedostojaovat: index.php Sivupohja,jotakäytetäänoletuksenajosmuitasivupohjiaeilöydy. comments.php Sivupohja,jossalistataanartikkelinkommentit screenshot.png Esimerkkikuvateemanvakioulkoasusta,jokanäytetääntee0 manvalintaruudussa style.css Tyylitiedosto,jossaonminimissäänoltavateemantiedot,kuten teemannimi,kehittäjätiedot,versionumerointijaversioyhteensopivuus. TeemaansuositellaansisällyttääuseimpienWordPressinperustoimintojenkäytön mahdollistamiseksi: 404.php Sivupohja,jokanäytetääntilanteessa,jossahaluttuasivuaeilöydy. archive.php Arkistosivupohja,jokalistaaartikkelitjulkaisuajanmukaan page.php Oletuksenakäytettäväsisältösivupohja search.php Sivupohja,jossanäytetäänhauntulokset,Wordpressinhakutoi0 mintoakäytettäessä single.php Yhdenartikkelinnäyttämiseentarkoitettusivupohja header.php Sivustonheaderinsisällönliittämiseentarkoitettutemplate, jonkatulisisisältääkaikkijokasivullakäytettävätelementit,kuten<head>0 elementti. footer.php Sivustonfooterinsisällönliittämiseentarkoitettutemplate.Käy0 tetään,kutenheader.php:ta,muttasivustonpohjaosaan. sidebar.php Sivustonwidgetiensisällyttämiseenkäytettävätemplate. Muitayleisimpiätiedostoja,joitavoidaansisällyttääteemaanvalinnaisesti: author.php WordPress0asennuksenkäyttäjänesittelyyntarkoitettusivupoh0 ja. category.php Kategorianallaolevienartikkeleidenlistaukseentarkoitettusi0 vupohja. tag.php Yhdenasiasananallaolevienartikkeleidenlistaukseentarkoitettusi0 vupohja.
16 WordPress0asennuksenmukanatuleeesimerkkiteemaTwentyeleven,jokasisältää kaikilleperustoiminnoilleyksinkertaisettoteutustavatjakattavatesimerkitfunc0 tions.php:neritekniikoidenkäyttötavoista.twentyeleventarjoaamyösvalmiinpoh0 janomanteemanjalostamiselle.(creatingyourownpagetemplates2013.) 3.4.3Sivupohjanrakenne WordPressinsivupohjatpohjautuvatsilmukkatekniikkaan,jotakutsutaanloopiksi.Eri sivupohjat,kutenkategorialistaus,yksittäisenartikkelinsivu,sisältösivu,taihauntu0 lostenlistaussivuperustuvatloopiin.loop0tekniikkakäyttääainasamaasyntaksiaja senhakemasisältöriippuusivupohjantyypistä.loopkäydäänhave_posts()0metodin jawhile0silmukankanssaläpi,jokamahdollistaawordpressinomientemplatetag0 funktioidenkäyttämisensilmukansisällä.templatetag0funktiotovatlyhyitäjaselkei0 täkomentoja,joillasilmukassaolevastaelementistäsaadaanoleellisiatietojatulos0 tettuasivupohjaan.esimerkiksifunktiothe_title()tulostaasuoraanartikkelilletaisi0 vullemääritetynotsikon.vastaavastithe_content()tulostaaartikkelintaisivunsisäl0 lönmuotoiluineen.(theloop2013.) Loopinollessasivupohjanydinonmuuttoistuvatelementit,kutenheader,footerja sivupalkki,tarkoitustulostaaomillepaikoilleenniilletarkoitetuillafunktioilla.esimer0 kiksilaittamallaget_header()0funktiontiedostonalkuun,tulostaafunktiohea0 der.php:nsisällönkohtaan,johonseonsijoitettusivupohjassa.header.phpsisältää kaikenhtml0tiedostonalkuunliittyvätelementitjaulkoasussasivunyläosantoistuvat elementit,kutenlogonjanavigaation.vastaavastifooter.phpsisältääsivustonulko0 asunalaosassaolevatelementitsekäbody0elementinloppuunsisällytettävätasiat, kutenkävijäseurannatjamahdollisetjavascript0tiedostojensisällytykset.(theloop 2013.) Allaonesimerkkiyksinkertaisestasisältösivunakäytettävästäsivupohjasta.Tiedoston alussakommenttiensisässäolevamerkintä TemplateName:Alasivu määrittääsi0
17 vupohjannimen,jollasevoidaankiinnittääsisältösivunsivupohjaksihallinnasta. Funktiotget_header(),get_footer()jaget_sidebar()sisällyttävätlopulliseenHTML0 koodiinomattemplate0tiedostonsa.content0elementinsisälläolevawhile0silmukka onloop0tekniikka,jokasisällyttääjokaiseensilmukaniteraatioonpost0elementin. Post0elementinsisälläonkäytettyedellämainittujaWordPressintemplatetag0 komentoja,joistathe_title()tuosivunotsikonjathe_content()sisällönmuotoilui0 neen.(creatingyourownpagetemplates2013.) <?php /* Template Name: Alasivu */ get_header();?> <div id="content" role="main"> <?php while ( have_posts() ) : the_post();?> <div class="post"> <h2 class="page-title"><?php the_title();?></h2> <?php the_content();?> </div> <?php endwhile;?> </div> <?php get_sidebar();?> <?php get_footer();?> 3.5Responsiivinensuunnittelu 3.5.1Yleistäresponsiivisestasuunnittelusta Responsiivinensuunnittelutarkoittaasivustonulkoasunmuokkaamistaparemmin yhteensopivaksilaitteille,joissaonpienempiänäyttöjäkuintavanomaisissatietoko0 neissa.responsiivinensuunnittelukeskittyymonestikäyttöliittymänyksinkertaista0 miseensekätypografianselkeyttämiseenkäytettävyydenparantamiseksi.älypuheli0 mienjatablettitietokoneidenyleistyessäulkoasunoptimoinninoletetaanolevanyhä enemmänitsestäänselväominaisuusmainosalansivustossa.tilastosivustostatcoun0 terinmukaanmobiiliselaintenosuusonjonoussutlähes15%kaikistapäätelaitteista janiidenosuusonjatkuvassanousussa.(mobilevs.desktop2013.)
18 3.5.2Tekniikat Responsiiviseentoteutukseenonuseampiayksinkertaisiatekniikoita.Teknisentoteu0 tuksenpuolestaresponsiivisensuunnittelunpäämääräinentarkoitusonnäyttäämo0 biililaitteillasisältöpienemmällenäytönresoluutiollesopivallatavallahäiritsemättä sivustonulkoasuanäytettäessätietokoneenselaimella.ideanollessayksinkertainen, monettoteutustavatovatyksinkertaisiajayhteensopiviauseidenvanhempienselain0 versioidenkanssa.(pettit2012.) YleisintapatoteuttaaresponsiivinentaittoteknisestionkäyttääCSS:nmediaquery0 tekniikkaa,jollapäätelaitteentyyppitunnistetaanpäätelaitteenselaintietojenavulla antamallaesimerkiksihtml0koodisssatyylitiedostoonviitatessamedia0attribuutille haluttupäätelaitteentyyppi.allaolevallaesimerkillävoidaankaikkienmobiililaittei0 denkohdallaottaakäyttöönvainmobiililaitteilletarkoitettutyylitiedostomobile.css. (Pettit2012;Patel2012.) <link rel="stylesheet" media="screen" href="style.css" /> <link rel="stylesheet" media="mobile" href="mobile.css" /> Vaihtoehtoisestityylimäärityksiävoidaanottaakäyttöönselaimenleveydenollessa tiettyjenleveyksienrajoissa.esimerkkinätästä,sivuntyylitvoidaanjaotellakäytettä0 väksiyleisimpienmobiililaitteidenleveyksienmukaan:tablettilaitteenvaaka0asento 1024px,tablettilaitteenpystyasento768px,älypuhelimenvaaka0asento480pxjaäly0 puhelimenpystyasento320px.allaolevanesimerkinmukaisessatoteutuksessamedia query0tunnisteetlaitetaansivustonnormaalientyylienalapuolellejaniidensisällä tehdäänpäätelaitekohtaisiamuokkauksia.koskamediaquery0tunnisteillaontässä tapauksessavainmaksimileveydet,periytyvätesimerkiksileveämmilleselaimilletar0 koitetuttyylitmyöskapeammilleselaimille.kuviossa2onesitettyesimerkkisisällön asemoinnistakynnystasoittainerilaitteille.mediaqueryteivätvaikutaesimerkissä työpöytäversioon,muttamuuttavatasemointiatablettilaitteenjaälypuhelimenosal0 ta.(cssmediatypes2013.)
19 @media screen and (max-width: 1024px) { /* Tyylimääritykset tablettilaitteen vaaka-asennolle */ } @media screen and (max-width: 768px) { /* Tyylimääritykset tablettilaitteen pystyasennolle */ } @media screen and (max-width: 480px) { /* Tyylimääritykset älypuhelimen vaaka-asennolle */ } @media screen and (max-width: 320px) { /* Tyylimääritykset älypuhelimen pystyasennolle */ } KUVIO2.Esimerkkimediaquery0tekniikallaporrastetustaresponsiivisuudesta Sivustostavoidaanmyöstehdäkokonaanerillinenmobiilikäyttööntarkoitettuversio, johonkäyttäjäohjataansaapuessaanmobiililaitteellasivulle.tätätekniikkaakäyte0 tääntilanteissa,joissahalutaannäyttääsivu,jokaonmerkittävästisisällöltäänerilai0
20 nenkuindesktop0versio.esimerkiksi,joshalutaannäyttäämobiililaitteillapelkästään tärkeimmättiedot,käytetääntätätekniikkaa.(patel2012.) Verkkosivustonulkoasuvoidaantoteuttaasiten,ettäseskaalautuuselaimenlevey0 destäriippuen.tällöinelementtienleveydetmääritetäänprosentteinapikseliarvojen sijaanjakokoulkoasullemääritetäänmaksimileveys,jolloinsisältökeskitetään.tätä toteutustapaakutsutaanfluid0taitoksi.monessatapauksessa,joissasisältöonasetel0 tupalstoihin,tämätekniikkaonyhdistettynämediaquery:llätehtäviinlaitekohtaisiin porrastuksiin.kuviossa3onesiteltytavanomainenfluid0taitto,jossasisältöelementti0 enleveydetovatsuhteellisiaselaimenleveyteen.(pettit2012.) KUVIO3.Esimerkkifluid0taitosta
21 4MARKKINOINTISIVUSTONTOTEUTUSHANKE 4.1Lähtötilanne Hankkeenlähtökohtanaolitilanne,jossasuomalainenyrityshalusiuudenverk0 kosivustonbrändiuudistuksenyhteydessä.yritysoliuudistanutbrändinsäbränditoi0 mistonkanssa,jokaoliluovuttanutgraafisenohjeistuksen,sivustonrautalankamallit jakarkeangraafisenulkoasuninto0digitalilleviimeisteltäväksi.hankkeeseenosallistu0 nutmainostoimistokeskittyiprojektissasisällöntuotantoonjakuvitukseen. Sivustonsisällönsovittiinolevankokonaanmuokattavissa,jottamainostoimistovoisi muokataläheskaikkiasivustollaoleviateksti0jakuvasisältöjä.ratkaisutähänolisi0 vustonrakentaminensisällönhallintajärjestelmänpäälle.sisällönhallinnantulisiolla mahdollisimmanhelppokäyttää,jottaasiakkaaneitarvitsisiopetellaerikoistekniikoi0 ta,vaansisällönhallintaonnistuisiwysiwyg0työkaluilla. Suunnitteluvaiheessasivustokoostuiperinteisistäelementeistä.Sivustollatultaisiin käyttämäänkolmeasisältösivutyyppiä:etusivua,sisältösivua,jayhteystietosivua.li0 säksisivustolletulisiblogiosiosekätapahtumaosio.etusivu,jokatoimisiportaalina muihinsivustonalaosioihin,sisältäisiselkeätlinkitsivustonneljällepääsisältösivulle, listauksetblogiartikkeleistajatapahtumista,sekäfacebookinlikeboxin.sisältösivut olisivatyksinkertaisiasivuja,jotkakoostuisivatkahdestapalstasta:vasenpalstakoko0 naantekstisisällöllejaoikeakuville.yhteystietosivumyötäilisimuutensisältösivun linjoja,muttaoikeapalstasisältäisiinteraktiivisengooglemaps0kartan. Sivustosisältäisikauttalinjansamanheaderinjafooterin.Headersisältäisivainyrityk0 senlogonjakaksitasoisennavigaation.navigaationensimmäinentasoolisiainanäky0 villäjasisältäisisivustonpäätasonsivut.josaukiolevallasisältösivullaolisialasivuja, navigaationensimmäisentasonalapuolelleaukeaisinavigaationtoinentaso,jossa listattaisikaikkisivunkaikkialasivut.footersisältäisivainensimmäisentasonnavigaa0 tionjatekijänoikeustiedot.
22 Sivustollesuunniteltiinmyösblogitoiminto,jossayritysvoisikertoakuulumisistaanja menneistätapahtumista.blogitoimintoonsuunniteltiinlistausnäkymä,jossanäkyisi artikkelinotsikko,lyhytkatkelmaartikkelistasekäerikseenmääritettäväartikkeliin liittyväkuva.blogitoimintotulisimyössisältääyksittäisenartikkelinnäkymän,jossa näytetäänedellämainittujenelementtienlisäksikokoartikkelinsisältö,sekäkommen0 tointitoiminto,jossavierailijatvoisivatkommentoidaartikkeliayksinkertaisestakom0 menttilomakkeestajättämällänimensä,sähköpostiosoitteensajakommenttinsa.blo0 gitoiminnonohellasivullehaluttiinmyöstoinenartikkelitoiminto.yrityshalusitapah0 tumalistauksen,jokatoimisisamallatavalla,kutenblogitoimintomuttaeisisältäisi kommentointiaeikäkuvialistauksessa. Sivustonulkoasustasuunniteltiintoteutettavaksikaksiversiota.Toinenversioolisins. työpöytäversioelitietokoneenselaimellakäytettäväkiinteäleveyksinenversio,jossa sisältökeskittyisisivusuunnassajosnäyttöolisileveämpikuin990pikseliäleveäsisäl0 töalue.laitteellejonkanäytönleveysonpienempikuin990pikseliä,toteutettaisiin ulkoasuresponsiivisenataittona. Näidenperustoimintojenlisäksiyrityshalusimyöserivärisettekstiteematjokaista sivustonneljääsisältö0osiotakohden.mahdollisestimyöhemmintoteutuvinatoimin0 toinahaluttiinlomaketyökalu,jollaasiakasvoisiluodasivustolleerinäisiäilmoittau0 tumislomakkeitatapahtumiin,sekäkokosivustonlaajuisenkieliversioinnin.pääpai0 nonasivustontoiminnalletuliollaselkeys,nopealadattavuus,helppokäyttöisyysja helppomuokattavuushallinnanpuolella. 4.2Tekninensuunnittelu Projektinsuunnitteluvaiheessaasetettiinasiakkaantoimestavaatimukset,minkäpuit0 teissasivustotulisiteknisestitoteuttaa.palveluntarjoajaksiilmoitettiinnebulajatek0 niseksialustaksiheidäntarjoamansawebhotelpro0palvelintila.teknisenäpohjana
23 tulisisiisolemaanlamp0ympäristö,jotensivustontekniikantulisipohjautuapalveli0 menpuolellaphp0kieleen.levytilaawebhotelprotarjoaa2gt,jotentilaaonriittä0 västiläheskaikkiinphp0pohjaisiincms0järjestelmiin.webhotelproeisisälläsellaise0 naantietokantaa,muttacms:ienvaatimamysql0tietokantaonsaatavillalisäominai0 suutena.(webhotellit2013.) LiikennöintisuositukseksiNebulailmoittaa50Gt/kk,jokaolisiasiakkaanmukaanriit0 tävämääräsivustonoletettuihinkävijämääriin.josliikennöintiylittääsuosituksen, Nebulailmoittaaasiakkaalleylityksestä.ToistuvistaylityksistäNebulavaatiivaihta0 maanpalvelupaketintoiseenpakettiin,jossaonsuurempikapasiteetti.(webhotellit 2013.) 4.3.Sisällönhallintajärjestelmänvalinta 4.3.1Huomioonotettavatasiatsisällönhallinnanvalinnassa Yhtenäasiakkaanperusvaatimuksistaolisivustonhelppohallittavuus,jotenkäytettä0 väncms:nvalintarajoittuiilmaisiin,laajaltikäytössäoleviinopensource0 järjestelmiin.suositunjärjestelmänkäyttöoliaiheellistasiksi,ettäyleisimmätcms:t ovathyvindokumentoitujajaohjeistettujamolemmilletahoille,sekäkehittäjilleettä sisällönhallinnankäyttäjälle.nopeatutustuminenpoikikolmeinto0digitalillejoen0 nestääntuttuaehdokasta:wordpress,joomlajadrupal.kaikkiakolmeaonkäytetty yrityksentekemissätoteutuksissajaovathyväksitodettujaalustoja. Alustanvalinnassatulikiinnittäähuomiopääasiassasiihen,kuinkapaljonresursseja kunkinjärjestelmänkäyttökuluttaisi.työmääränmitoitusriippuipääosinkahdesta asiasta:onkoehdollaolevajärjestelmätoteuttajalleennestääntuttuelitulisikore0 surssejavaratajärjestelmääntutustumiseenjakehitystyönopetteluun,vaionnistuisi0 kototeutussuoraanräätälöimälläennestääntuttuajärjestelmää?josvalintatehdään silläperusteella,ettäjärjestelmäonkehittäjälletuttu,riittäisivätkösenperusominai0
24 suudetjalaajastikäytettyjenluotettavienlisäosienominaisuudetsivustonvaatimuk0 siin? Into0Digitalinsisällönhallintaavaativatverkkosivustoprojektittoteutetaanmonesti WordPressinpäällehallintatyökalujenyksinkertaisuudestajohtuen.Koskauseimmissa tilanteissaasiakashaluaaitsemuokatajalisätäsivustonsisältöjä,verkkosivustopro0 jekteissahalutaankäyttäämahdollisimmanpaljonwordpressinvakiotoimintojanii0 denhyvändokumentoinninjawordpressinlevinneisyydentakia.toisinaanwordp0 ressonyrityksenprojekteihinliiankinyksinkertaistettujapelkistetty.näissätapauk0 sissatuleeharkitavaihtoehtoisiaratkaisuja,jottawordpressinperustoiminnallisuutta eivakaus0jatietoturvallisuussyistätarvitsisilähteäliiaksimuokkaamaan. DrupalonollutInto0Digitalinprojekteissakäytössälähinnäniissätilanteissa,jossa tiedetääntarvittavaksitiettyädrupalinolemassaolevaalisäosaa,onverkkosivusto alunperintoteutettujonkintoisentahontoimestadrupalillatainiissäprojekteissa missätiedetään,etteiwordpresssovellukäytettäväksiliianyksinkertaistettunajärjes0 telmänä.verrattunawordpressiin,onyrityksentoteuttamissaprojekteissayleisesti Drupalominaisuuksiensapuolestahiemanmonimutkaisemmanjaraskaammanoloi0 nen,sekäkehitystyöltäänhiemantyöläämpikuinwordpress.tämänlisäksimonissa yrityksenprojekteissadrupaleivakioasennuksenaantarjoatarpeeksiyksinkertaista sisällönhallintatoiminnallisuutta,jolloinsivustonsisältöeiolisitarpeeksihelpostisuo0 raanasiakkaanhallittavana. Joomla:nkäyttöonInto0Digitalintoteuttamissaverkkosivustoissaollutmelkovähäis0 tä.yleensäkäytönsyynäonollutprojektinaikaisempitoteutusjoomla:llajajatkoke0 hitysontehtyinto0digitalintoimesta.joomla:nperustoiminnallisuudetjäävätprojek0 tienvaatimustenpuitteissauseissatapauksissaliianvähällejaesimerkiksiwordpres0 sinyksinkertaisemmathallintatyökalutmielletäänparemminsivustonsisältöähallit0 sevantahontarpeisiinsopivammaksi.
25 4.3.2Valinta Projektinteknisensuunnittelunmerkittävimpiäkysymyksiäolisisällönhallintajärjes0 telmänvalinta.valintatehtiinperusteella,olisikocms0ratkaisussajovalmiiksimah0 dollisimmanpaljonprojektinvaatimiatoiminnallisuuksiajovalmiina.myöskintoteut0 tajanaikaisempikokemussisällönhallintajärjestelmästäolimerkittäväperustevalin0 nalle. Wordpressnousikolmestavaihtoehdostakärkeenjoalkuvaiheessamyössiksi,että asiakasolitoivonutsenkäyttöäsivustontoteutuksessa.myösvalmiitblogitoiminnot, kutenartikkelit,kategoriatjakommentoinnit,nostivatwordpressinkärkiehdokkaaksi. Muutamiapieniävaatimuksiakutensisältösivujenneljänkategorianerottelujaväri0 teemoilla,eikäkieliversiointiaollutsaatavillasuoraanwordpressintoiminnallisuuksis0 ta.(drupal0joomla0wordpress0comparison2013.) Drupaliaeivalittu,koskaseeiolluttekijälletuttujärjestelmäjasensisällönhallinta0 työkaluteivätolleettarpeeksiyksinkertaisetsiihennähden,ettäasiakastoteuttaisi sisällönsyötönpääosinitse.kieliversiointimahdollisuudetolisivatparemmat,sekä tekniseltäkannaltablogitoiminnallisuuksienjasisältösivujenerotteluoliparemmin toteutettu.tämäolisiollutmahdollisestimerkittäväseikkasivustonjatkokehitystä ennakkoonsuunnitellessa.(wilding2011.) Joomlaeiolisitarjonnuttähänverkkosivustoonyhtäyksinkertaistablogitoiminnalli0 suutta,sekäsenkehitystyöjalisäosateivätolisiolleettuttujakehittäjälle.joomlassa olisitosinollutnatiivitukikieliversioinnille,muttablogitoimintoolisipitänyttoteuttaa lisäosilla. LopulliseksivalinnaksipäätyiWordPresssentarjoamienvalmiidentoiminnallisuuksien jatekijänaikaisemmankokemuksenvuoksi.ainoaksiepäselväksiasiaksijäänytkieli0 versiointionkäytytarkemminläpiluvussa 3.2Kieliversionti
26 4.4Käyttöönotto NebulanWebhotelPro:ssavakionakäytössäolevaPHP0versio4.3onnostettujuuri0 kansion.htaccess0tiedostossaversioon5.2,jokamahdollistaauusimmanwordpress0 version3.5.1käytön.asennustavartenhaettiinwordpress.org0sivustoltauusinpaket0 ti,jokasiirrettiinkotisivutilanalikansioon.tilanjuurihakemistossaolitoteutettavan sivustonvanhaversio,jokaotettiinpoiskäytöstävastauudensivustonjulkaisunyh0 teydessä.(php0ohjelmointi2013) WordPressinasennuspalvelimelleontehtyjärjestelmänomanasennusvelhonavulla. Asennusvelhopyytäätarkistettuaanyhteensopivuudenpalvelimenominaisuuksien kanssa,syöttämäänsisällönhallinnanvaatimatperustiedotasennusympäristöstä,ku0 tentietokannantiedotjakäyttäjätunnukset,sivustonnimen,ylläpitäjänsähköpos0 tiosoitteen,halutunylläpitäjänkäyttäjätunnuksenjasalasanan,sekälyhyenkuvauk0 sensivusta.tietokantamäärityksiälukuunottamatta,asetuksetovatmuokattavissa hallintapaneelista. WordPressinviisitoistaminuuttiavievänasennuksenjälkeensivustoolitäysinkäytet0 tävissä.hallinnankauttasivustolletehtiinylläpitäjänlisäksimuutamiakäyttäjätun0 nuksiakatselmointikäyttöönjaasiakkaankäytettäväksi.asennuksenjälkeensivustol0 letehtiinvalmiiksiperusrakenteet,kutensisältösivujenalustavarakenne,navigaatiot valikkotyökalulla,artikkelilistauksienvaatimatkategoriat,sekäotettiinkäyttööntar0 vittavatperusominaisuudetbloginkäyttöön,kutenkommentointijaavainsanojeneli tagienkäyttö. Sivustolleonasennettumuutamiayleishyödyllisiätuttujajaluotettavialisäosiakuten hakukoneoptimointiintarkoitettuallinoneseo0pack,sekäadvancedtinymce0 sisältöeditori,jokamuuttaawordpressinsisältöeditoriaperinteisientekstinkäsittely0 ohjelmienkäyttöliittymääenemmänvastaavaksi.
27 4.5Erikoisominaisuuksientoteutus SivustonvaatimusmäärittelyssämainittukieliversiointiontoteutettuWordPressin WPML0lisäosalla.Sivustonpääkielenollessasuomi,onosallesisällöstäolemassamyös ruotsinkielisetversiot.kieliversionpääasiallinenkäyttöliittymäkoostuusivunheade0 rissaolevastakielivalitsimesta,jostasiirrytäänetusivulletaiaukiolevansivunkieliver0 sioon,jossellainenonmääritettysivulle.kielivalitsinontoteutettuwpml:nomalla kielivalitsintoiminnolla,jokaonasetuksiavoimuokatawpml:nhallintapaneelista. Kielivalitsimessaonvakioasetuksenakieliversioidenindikaattorinamaidenliput,mut0 tasivustollaliputonkorvattutekstiversioilla.muokkausontehtymuuttamallakieliva0 litsimenkoodiaheaderinsivupohjastaheader.php0tiedostosta. Sivustollaolijulkaisunyhteydessäasiakkaanpyynnöstätoiminto,jokanäyttääruot0 sinkieliselläsivustollablogiosiossasuomenkielisetblogimerkinnät.tämäeikuulunut WPML:nvakiotoiminnallisuuteen,jotensetoteutettiinmuuttamallablogilistausten sivupohjanloopintoimintaa,suodattamallanäytettävääsisältöä.tämätoimintootet0 tiinmyöhemminpoisjablogikirjoituksistatehtiinkieliversioinnitmolemmillekielille. Erikoisfonttienosaltatämänprojektintapauksessaoligraafisessasuunnittelussakäy0 tettyainoastaanfutura0fonttia.fonttiolisuunniteltukäytettäväksikaikissatekstisi0 sällöissäsekänavigaatioissa.cufónsuljettiinpoisvaihtoehdoistajoaikaisessavai0 heessa,koskaseonhyvinepävakaajavanhanaikainen.jäljellejäivätfontinkäyttö @font0face:llataikäyttäävuosittainmaksettavaafonttipalvelua.asiakaspäättikäyt0 täätypekit0yrityksentarjoamaapalveluajossafonttiladataankäyttööntypekitinpal0 velimellasijaitsevanjavascript0tiedostonavulla.fonttionitsessäänmelkoraskas350 kilotavuntiedostokoolla,muttatoimiimoitteettomastikaikillapäätelaitteillajase0 laimilla. Typekitinkäyttöönottotapahtuikirjautumallapalvelunsivustolletilauksenjarekiste0 röinninyhteydessäsaatavillakäyttäjätunnuksellajasalasanalla,jonkajälkeenluotiin projektijohonkäytettävätfontitliitettiin.projektitarkoittaakäytännössäyhtäverk0
28 kosivustoajohonladataanvainkäytettävienfonttientarvittavatvariaatiot,jottala0 dattavajavascript0tiedostoeikuormittaisisivustonlatausaikaaliiaksi.projektillease0 tettiinsallitutdomainit,jottajavascript0tiedostoaeivoikäyttääulkopuolisillasivus0 toilla.tämänjälkeenfonttiolikäytettävissätyylitiedostonkauttafont0family0 attribuuttiakäyttämällä,kutentiedostonalussa@font0face:llatuotulokaalifonttitie0 dosto.erivariaatioidenkäyttöfutura0fontista(bold,heavy,normal)vaatitypekitiä käytettäessäfont0weight0attribuutinnumeroarvoja. Kokosivustonulkoasu,sivupohjat,erikoisominaisuuksienkäyttöönottosekäpienem0 mättoiminnallisuusräätälöinnitonsisällytettysivustolletehtyynomaanteemaan, jokaonalustaastiinto0digitaloy:ntoteuttama.kaikkiperustoiminnot,kutensisältö0 sivut,blogitoimintojanavigaatiotontoteutettuwordpressinperustyökaluillajoka mahdollistaaniidenkäyttämisenhallintapaneelinkautta.sivustonheaderjafooter, toistuvatelementit,sekänavigaatiosijoitettiinheader.php0jafooter.php0tiedostoon, sekätoiminnallisuudetfunctions.php0tiedostoon.sivustonkahdellaeriartikkelilis0 tausnäkymälläoneroavaisuuksiaulkoasussa.tämäonratkaistutekemällämolemmil0 lelistauksilleomatcategory.php0tiedostot,joissakummassakinnäytetäänerielemen0 titartikkelilistauksissa.kaikkiartikkelisivutkäyttävätsamaayksittäisenartikkelinsi0 vupohjaa.blogintoiminnallisuudetovatmuokkaamattomiawordpressinperustoi0 minnallisuuksia.vainulkoasujaonmuokattutyylitiedostonavulla. Sivustonkiinteäsisältökoostuukolmestaerilaisestasivupohjasta:etusivunsivupoh0 jasta,sisältösivunsivupohjastajayhteystietosivunsivupohjasta.sisältösivunjayh0 teystietosivunsivupohjatovathyvintavanomaisia,niissäonheaderinjafooterinvä0 lissäkaksimultiplecontentblocks0lisäosanavullatoteutettuasisältöpalstaavierekkäin aseteltuna.multiplecontentblocksmahdollistaauseampienerisisältöeditorienkautta muokattavienpalstojensisällyttämisensamaansivupohjaan.tämätekniikkamahdol0 listaasen,ettäsivustonsisällönsyöttäjävoivapaastisijoittaahaluamaansasisältöä kumpaankinpalstaanalkuperäisensuunnitelmansijasta,jossatoinenpalstaolisiva0 rattupelkästäänkuvillejatoinenpalstatekstisisällölle.kuviossa4onesiteltymulti0 plecontentblocks0lisäosankaksisisältöeditoria,joistamuokataanvierekkäistenpals0
29 tojentekstisisältöjä.näidenpalstojenasemointijasisältösivunsivupohjanrakenneon esiteltykuviossa5. KUVIO4.MultipleContentBlocks0lisäosankaksiitsenäistäsisältöeditoria
30 KUVIO5.Sisältösivunsivupohja YhteyssivunsivupohjaeroaasisältösivustaGooglenkarttalisäosanpuolesta.Näiden sivupohjientekstisisällön,sekäheaderinsisällönvärivaihtuusivulleasetettavanväri0 teemanmyötä.näitäväriteemojakäytetäänindikaattorinasivustonneljällepääosal0 le.väriteematonmääritettysisältösivuillekäyttämälläwordpressinomaacustom Field0työkalua,jollasivullevoidaanmäärittääsivupohjallelähetettäväparametri,täs0 sätapauksessaväriteemannimi.tämätoiminnallisuusonesiteltykuviossa6.väri0 teemasisällytetäänbody0elementilleallaolevallakoodilla.
31 <?php $color = get_post_meta($postid, 'theme', 'true') $parentcolor = get_post_meta($post->post_parent, 'theme', 'true'); if(empty($color)) { $colortheme = $color.'-theme'; } else if (empty($parentcolor)) { $colortheme = $parentcolor.'-theme'; } else { $colortheme = ''; }?> <body <?php body_class();?>> KUVIO6.VäriteemanmäärittäminenCustomFieldinavulla Etusivunsivupohjaeroaakahdestamuustasivupohjastamerkittävästi.Etusivullaon suurikokoisetkuvinatoteutetutlinkitsivustonneljäänpääosioon,jotkaonsävytetty alasivujenväriteemojenmukaan,joihinlinkitviittaavat.linkeilleonmyöslisättyho0 ver0tyyli,jokapoistaakuviensävytyksenkunhiirenosoitinviedäänlinkinpäälle.sivu0 pohjanoikeassareunassaonsisältöpalstantyylinenpalstajossaonkaikkimuuetusi0 vunsisältö,kutenotsikko,molempiensivustonartikkelikategorioidenlistaukset,sekä sisältötekstipalsta.otsikonallaonjavascriptillätehtyjenefektienavullaaukeavavi0
32 deosoitin,jokasisältääsivustollesuunnitellunvideologon.videosoitinonyoutube0 videopalveluntarjoamaembed0elementti,jokasisällytetäänsivupohjaaniframe0 tekniikalla.palstanpohjallaonfacebookinlikebox0lisäosa,jokayoutube0soittimen tavoinsisällytetääniframella.likeboxsisältääsivustontilaajantuoreimmatface0 book0päivitykset,sekälistauksensivustonvierailijankavereistajotkaovattykänneet sivustonfacebook0sivusta.kutenmuutkinsivustonalasivutonetusivunsisältösijoi0 tettunaheaderinjafooterinväliin.kuviossa7onnäkyvilläetusivunsivupohjanraken0 ne. KUVIO7.Etusivunsivupohjanrakenne
33 Sivustonresponsiivisuusontoteutettutunnistamallaselaimenleveysmediaquery0 tekniikallajatekemällätablettitietokoneenvaakanäkymääkapeammillenäytöille omatkäyttöliittymät.selaimenleveyksienkynnystasot,jotkaaiheuttavatmuutoksia käyttöliittymässäovatsivustonnormaalialeveyttä990pikseliäpienemmätnäytöt, tablettitietokoneenpystyasento768pikseliä,älypuhelimenvaaka0asento480pikseliä sekäälypuhelimenpystyasento320pikseliä.tablettitietokoneenpystyasennossasi0 vustonsisältöelementtejäonskaalattuhiemanpienemmäksisekäosavierekkäisiin palstoihinsijoitetuistaelementeistäonasemoitupäällekkäin.allaolevassakuviossa8 onhavainnollistettusisältösivunsisältöelementtienuudelleensijoitteluatilanteissa, joissaselainonkapeampikuinsivustonnormaalileveys990px. KUVIO8.Responsiiviseksioptimoitusisältösivu Älypuhelimientapauksessakaikkielementitonasemoitupäällekkäin,sekäkuvituksen jamuidensisältöelementtienkokoaonpienennetty.sivustonresponsiivisuudessaon