Tässä artikkelissa on käytössä uusi ominaisuus "Syntaxhighlight" joka helpottaa lähdekoodin jakamista. Viemällä hiiren kursorin lähdekoodipätkän yläpuolelle avautuu oikeaan ylänurkkaan pieni valikko josta valitsemalla "View source" (ensimmäinen vasemmalta) avautuu uuteen ikkunaan helposti 'maalattava' ja kopioitava muoto kyseisestä koodin pätkästä. Tätä ominaisuutta tullaan käyttämään myös myöhemmissä BlogiHaltuun.net kirjoituksissa.
Nyt on aika lähteä liikenteeseen siinä mitä jo edellisessä kirjoituksessani pohjustin eli oman teeman luomisessa. Kannattaa siis käydä ensin lukemassa pohjustus täältä, niin tiedät missä mennään.
Helpottamaan minun sekä kaikkien tähän projektiin osallistuvien lukijoiden elämää kaikki kysymykset ja vastaukset koostetaan erillisiksi artikkeleiksi tukemaan tätä pääasiallista artikkelisarjaa. Jos et halua omaa kysymystäsi artikkeliin mainitse siitä kysyessäsi.
Käyttöön otettakoon myös tällä ilmoituksella Dropbox palvelu. Kaikki artikkeleihin liittyvä oheis materiaali on ladattavissa Dropbox linkeistä. Ennenkuin kukaan pelästyy palvelu on ilmainen. Eli kukaan ei joudu repimään kukkaron nyörejä auki.
Dropbox palvelua hyödynnetään myös mahdollisissa ongelmanratkonta tilanteissa, koska on selkeämpää tarkastella tiedoston lähdekoodia verrattuna internetselaimen 'tulostamaan' lähdekoodiin. Ne kun lähdes poikkeuksetta blogger blogeissa eroavat toisistaan. Koska palvelu on muutenkin hyödyllinen kehotan kaikkia lukijoitani rekisteröitymään kyseiseen palveluun täällä.
Olen myös tehnyt pienen sivupohjan josta rakentaminen aloitetaan. Sivupohja on perus HTML kielinen internetsivu joka sisältää kuvan, sivu taustan, index.html tiedoston ja malli.css tiedoston. Tätä käytetään pohjana omalle blogger teemalle ja näin ensialkuun myös vertailukohtana siihen miten blogger blogi eroaa tavallisesta internet sivusta. Tiedoston voit ladata tästä Dropbox linkistä.
1. Teemalle alusta
Ensimmäinen vaihe ennen lähdekoodin kimppuun hyökkäämistä on tietenkin perustaa blogi. En ryhdy nyt neuvomaan miten uusi blogi bloggerissa tehdään vaan oletan sen jo olevan hanskassa. Tämä uusi blogi perustetaan siitä yksinkertaisesta syystä ettei tarvitse häiritä oman bloginsa lukijoita silläaikaa kun virittelee omaa teemaa kuntoon.
Tälläinen 'harjoittelu' -blogi tulee myös tarpeeseen myöhemminkin jos haluaa testailla uusia ominaisuuksia ennenkuin ottaa niitä käyttöön omassa blogissaan. Teeman malliksi voit valita perinteisen "Simple" mallin. Blogin luomisen jälkeen on aika poistua hetkeksi Bloggerista ja siirtyä Notepad++ ohjelmaan ja lähdekoodin kimppuun.
2. Notepad++ käyttöön
Nyt lähdekoodin kimppuun. Purettuasi tämän perus HTML pohjan jonka rakensin on aika avata index.html tiedosto Notepad++ ohjelmalla ja tarkastella hieman mitä se sisältää. Pyrin pitämään sen mahdollisimman yksinkertaisena ja sisällytin siihen ainoastaan muutaman osan. Sivusto koostuu siis neljästä pääosasta:
- Reunus -osa
- Otsikko -osa
- Leipäteksti -osa
- Alatunniste -osa
Tunnistamisen helpottamiseksi olen lisännyt <--! kommentteja --> tähän tiedostoon. Nämä kommentit eivät näy lopullisessa sivussa vaan internetselain ohittaa nämä automaattisesti. Kommentit ovat yleinen tapa ilmoittaa internetsivun sisällöstä ja siitä mitä kukin koodin osanen sisältää tai saa aikaan.
Internetsivussa tapahtuu kuitenkin jo paljon ennen kuin itse "näytettävä" osa koodista alkaa. Sivun osiossa joka alkaa tagilla <head> on oma tärkeä roolinsa internet sivuissa. Tässä "head" osassa voidaan esimerkiksi kertoa selaimelle muista tiedostoista joita tarvitaan sivun näyttämiseen selaimissa oikein. Näitä osia voivat olla erilaiset tyylitiedostot (.css), Javascript koodit (.js) jne.
Ainoa pakollinen head osaaan sijoitettava elementti on <title></title> Tämä on yksinkertaisuudessaan sivuston nimi/ nimi ja kuvaus. Tämä title elementin sisältämä tieto tulee tarpeeseen hakukoneille, lisästtäessä sivu kirjanmerkkeihin ja silloin kun surffaat internetsivulle näkyy title elementistä löytyvä tieto selaimen työkalurivillä.
Yksinkertaisuudessaan internetsivu voisi siis näyttää tältä:
Kuten huomata saattaa ei oma mallimme poikkea kovinkaan paljon yllä olevasta esimerkistä. Merkittävimmät erot ovat kosmeettisia, monessakin mielessä. Ensimmäinen merkittävä ero on se mitä löytyy head osasta. Tämä kun sisältää linkin tyylitiedostoon (malli.css).
Tyylitiedostoon palaamme hieman myöhemmin joten jatketaan tutustumista index.html tiedostoon vielä hetkisen ajan. Head osasta siirrytään eteenpäin eli <body> osaan. Body elementtien sisälle sijoitetaan kaikki se tieto ja elementit jotka halutaan näkyvän ihmisille jotka vierailevat internetsivuillasi.
Oman mallimme body elementti sisältää 4 pää osiota jotka on erotettu toisistaan. Helpoiten tämä onnistuu käyttämällä <div> </div> elementtiä. Yksinkertaistettuna voidaan kuvitella että jokainen DIV elementti on säiliö jonka sisälle voidaan asettaa sisältöä. DIV elementin sekä div elementin sisällön tyylit voidaan määrittää tyylitiedostossa minkä näköiseksi halutaan. Tämä siis muodostaa lopulta sivuston ulkoasun.
Omasta mallistamme body elementin sisältä löytyvät "container", "page-header", "page-body" sekä "page-footer" nimiset div elementit. Nämä on aseteltu tyylitiedoston avulla siten että ne muodostavat yhdessä järkevän kokonaisuuden ja helposti ymmärrettävän pohjan omalle sivullemme. (Kts alla oleva kuva)
Oman mallimme body elementti sisältää 4 pää osiota jotka on erotettu toisistaan. Helpoiten tämä onnistuu käyttämällä <div> </div> elementtiä. Yksinkertaistettuna voidaan kuvitella että jokainen DIV elementti on säiliö jonka sisälle voidaan asettaa sisältöä. DIV elementin sekä div elementin sisällön tyylit voidaan määrittää tyylitiedostossa minkä näköiseksi halutaan. Tämä siis muodostaa lopulta sivuston ulkoasun.
Omasta mallistamme body elementin sisältä löytyvät "container", "page-header", "page-body" sekä "page-footer" nimiset div elementit. Nämä on aseteltu tyylitiedoston avulla siten että ne muodostavat yhdessä järkevän kokonaisuuden ja helposti ymmärrettävän pohjan omalle sivullemme. (Kts alla oleva kuva)
"Container" osa on oikeastaan pelkkä reunus joka rajoittaa sivun sisältöosan leveyttä. Internetsivuissa ei ole tarpeellista läheskään aina käyttää koko sivun leveyttä hyödykseen. Vaikka poikkeuksiakin löytyy kuten BlogiHaltuun.net:in ylin valikko joka alkaa aivan vasemmasta reunasta jatkuen täysmittaisena oikeaan laitaan.
"Page-header" osa on tarkoitettu Blogin nimeä, lyhyttä kuvausta ja ehkä myös mahdollista valikkoa varten. Verrata voit esimerkiksi bloggerin valmiisiin mallipohjiin, joista löytyy juuri blogin nimi ja kuvaus header osasta.
"Page-Body" on leipäteksti osa johon sijoitetaan normaalisti kaikki kirjoitukset. Usein myös body osan oikealle tai vasemmalle puolelle sijoitetaan sivupalkki. Tätä ei kuitenkaan esimerkki mallissamme ole.
"Page-Footer" on alatunniste alue, johon asetetaan yleensä kopiointia koskevia merkintöjä sekä sivuston/ tekijän tiedot.
Nyt kun vihdoin pääsimme sivun lähdekoodin loppuun on aika siirtyä seuraavaan osioon, eli niihin pieniin mutta merkittäviin eroihin joita blogger blogilla on verrattuna normaaleihin internetsivuihin.
3. HTML vs. XML
On tehtävä selvä pesäero blogien ja perus internetsivujen välillä. Perus internetsivu on pahimmillaan staattinen täysin muuttumaton möhkäle jonka joku on voinut luoda 5 vuotta sitten. Blogi pyrkii olemaan alati muuttuva kokonaisuus joka päivittyy eli on 'dynaaminen'. Blogger blogi ei tee tähän kaavaan poikkeusta. Siitä syystä blogger blogi onkin rakennettu hyvin eri tavalla tavalliseen internetsivuun verrattuna.
Merkittävin Blogger blogissa vierailijalle näkymätön ero on se että Blogger blogien lähdekoodi on kirjoitettu xml kielellä. XML eli eXtensible Markup Language on tarkoitusperiltään hyvin erilainen verrattuna perinteiseen HTML:n (HyperTextMarkupLanguage) .
Se missä HTML keskittyy siihen miltä data (esim internetsivu) näyttää on XML kehitetty ohjelmisto ja 'rauta' riippumattomaksi työkaluksi datan siirtelyyn ja tallennukseen. Tästä syystä näillä kahdella on hyvin paljon eroa ja se aiheuttaakin usein päänvaivaa blogger bloggaajille.
Tässä vielä muutamia eroavaisuuksia:
- HTML ei erota isoja ja pieniä (abc = ABC ) kirjaimia toisin kuin xml (abc ≠ ABC )
- HTML:ssa on vain tietyt määritykset XML sallii käyttäjän luoda omia
- HTML on staattinen XML dynaaminen (johtuen juuri käyttötarkoitus erosta)
- XML kieli ei salli 'huonoa' koodia. HTML ei koodin pikku puutteista välitä
Näistä eroavaisuuksista johtuen emme voikkaan käyttää sellaisenaan luomaani sivupohjaa vaan se vaatii muutoksia toimiakseen blogger blogialustassa eli seuraavaksi lähdetään muokkaamaan pohjaa blogger ystävälliseksi.
4. Pohjasta Bloggeriin
Siirrytään takaisin index.html dokumentin alkuun. Blogger saisi sätkyn jos yrittäisimme vaihtaa blogin lähdekoodin tähän viritelmään. Blogger ei tajua että kyseessä on normaali internetsivu, koska sitä ei ole rakennettu sitä ymmärtämään. Siksi joudummekin muuttamaan omaa koodiamme pala palalta vastaamaan bloggerin xml vaatimuksia.
Ennenkuin tehdään yhtään muutosta lähdekoodiin pitää tehdä se merkittävin muutos eli tallentaa tiedosto xml muotoon. Tämä onnistuu suoraan Notepad++ ohjelmalla: eli valitse Tiedosto -> Tallenna nimellä -> eXtensible markup language file . (Nimeksi voit antaa minkä tahansa kunhan valitset oikean tiedosto muodon.) Tallennuksen jälkeen voidaan tuhota 'kaunis' internetsivumme ja tehdä siitä Blogger blogi.
Vaihe 1 - HEAD osa
Korvaa lähdekoodista:Tällä:
Seuraavaksi avaa Notepad++ ohjelmaan auki myös malli.css tiedosto ja kopioi sen koko sisältö sille kuuluvaan kohtaan. Eli xml tiedostossasi kohtaan jossa lukee /* Aseta CSS osa tämän tilalle */. Vaikka blogger blogissa on mahdollista käyttää ulkoisia css tiedostoja on huomattavasti helpompaa liittää olemassaolevat css määrittelyt samaan tiedostoon. Tämän jälkeen tallenna xml tiedosto. Seuraavaksi palataan hetkeksi bloggeriin.
Vaihe 2 - Kuvat kuntoon
Siirry luomaasi blogger blogiin ja laadi uusi kirjoitus. Tähän kirjoitukseen lisää harjoitusteemasta löytyvät 3 kuvaa. Aivan normaalisti kuten lisäisit minkä tahansa kuvan käyttäen bloggerin omaa kuvien lisäys nappia. (footer-rule.png, lgrey023.jpg, rakennus.jpg) lisättyäsi kuvat siirry kirjoitus osiossa html puolelle ja kopioi kuvien osoitteet talteen. (src='kuvanosoite.com/kuva.jpg') joudumme nimittäin lisäämään kuvien oikeat osoitteet teemaan.
Kuten jo sanoin seuraavaksi lisäämme oikeat osoitteet blogiteemamme CSS osaan. Tähän tapaan:
Korvaa:
Tällä:
Vaihdettuasi kaikkien kolmen kuvan osoitteet on taas hyvä tehdä välitallennus. Ennenkuin laitetaan blogiteeman runko lopullisesti kuntoon.
Vaihe 3 - Runko kuntoon
!HUOM!Bloggerin käyttämät koodin osat eroavat toiminnaltaan ja ominaisuuksiltaan huomattavasti normaalista html kielestä. Emme kuitenkaan kiinnitä vielä huomiota niihin vaan pyrimme saamaan ensialkuun aikaan teeman joka latautuu blogger alustalla ongelmitta. Myöhemmissä artikkelisarjan kirjoituksissa tutustumme tarkemmin teeman rakenteeseen ja sen eri osien toimintaan. Nyt joudutte vain orjallisesti tekemään tarvittavat muutokset teeman toiminnan takaamiseksi.Seuraavaksi vaihtoon menee blogin otsikko alue, jotta saamme näkyviin sen otsikon jonka määrittelimme harjoitusblogia luodessa.
Korvaa:
Tällä:
Otsikon jälkeen on aika laittaa bloggeriin sivupalkki. Vaikka omassa teemassamme ei ollutkaan erillistä sivupalkille tarkoitettua "lokeroa" (<div></div>) siihen oli syynsä. Nyt nimittäin saat aivan itse päättää asetetaanko sivupalkki vasemmalle vai oikealle puolelle blogikirjoituksia.Valinnastasi riippumatta joudut tekemään seuraavat muutokset blogisi lähdekoodiin.
Nosta ensin rakennus.jpg kuvaa (pääkuva) hieman ylemmäs eli page-header (otsikkoalue) osaan asti. Etsi ensin kuvan lähdekoodi blogistasi ja kopioinni sijaan leikkaa kyseinen koodinpätkä.
Tämän jälkeen liität sen blogin page-header (otsikkoalue) osan loppuun tähän tapaan:
Nyt voidaan tehdä seuraava muutos eli korvata valikko linkkilista bloggerin Sidebar määrityksellä sekä asetella se oikeaan kohtaan blogin lähdekoodissa. Eli etsi xml tiedoston lähdekoodista:
Korvaa se tällä:
Seuraava vaihe on lisätä lokerikko sivupalkkia varten oikeaan kohtaan xml tiedoston lähdekoodia. Eli etsi blogisi lähdekoodista kohta: Ja lisää välittömästi tämän kohdan alapuolelle <div id="sivupalkki"> </div> tähän tapaan: Lisättyäsi tämän on aika siirtää muokattu sivupalkki koodi oikeaan lokeroonsa. Eli siirrä (leikkaa+liitä) hieman ylempää blogisi lähdekoodista juuri muokkaamasi Ja liitä se oikeaan paikkaan tähän tapaan:
Tämä lähdekoodin muotoilu saattaa jo kauhistuttaa mutta vielä muutama vaihe ja olemme valmiit julkaisemaan teeman koko maailman kauhisteltavaksi. Seuraavaksi määritellään blogin CSS osaan uusi muuttuja nimeltään "Sivupalkki".
Voit lisätä tämän mihin tahansa kohtaa blogisi lähdekoodia, mutta itse yritän pitää asiat "järjestyksessä" ja lisään muutoksen kohtaan "Pää sisältö" tähän tapaan (Jos haluat sivupalkin olevan vasemmalla muuta float:right -> float:left): Lisättyäsi css osaan tämän uuden muuttujan muuta vielä kohtaa main-content seuraavasti (jos haluat blogin sivupalkin olevan vasemmalla muuta float: left -> float: right):
Vielä yksi CSS muutos johtuen siitä että siirsimme pääkuvaa. Eli Etsi ja muuta:
täksi:
Vaihe 4 Footer osa ja julkaisu
Tehdään blogin xml lähdekoodiin vielä yksi muutos. Etsi blogin lähdekoodista kohta: ja muuta se:Tallenna tiedosto
Vihdoinkin! Nyt on tullut se maaginen hetki julkaista ihka ensimmäinen itse tehty blogger teema! Siirry siis bloggeriin ja mene luomasi harjoitus blogin malli osaan, ja valitse kohta muokkaa HTML-koodia. Tämän jälkeen siirry pikaisesti Notepad++ puolelle valitse koko luodun teeman teksti (ctrl+a) kopioi tämä. Sen jälkeen siirry takaisin bloggeriin. Valitse bloggerissa koko lähdekoodi (ctrl+a) ja liitä kopioitu itsetehty teema tämän tilalle. Tämän jälkeen vain klikkaat "Tallenna malli.
Eteesi lävähtää vihoviimeinen varoitus. "uusi mallisi ei sisällä seuraavia widgettejä:". Ei hätää, sillä emme niitä ole sinne teemaan asettaneetkaan. Paina vain "Poista widgettejä" nappia ja olet valmis.
Jos kaikki onnistui niinkuin piti teema tallentui widgettien poiston jälkeen ilman virheilmoituksia. Nyt on oma uusi uljas teemasi kaiken kansan ihailtavana. Voit itsekkin huokaista helpotuksesta ja siirtyä ihailemaan uutta teemaasi.
Loppusanat
Täytyy sanoa heti ensialkuun että ei se nyt maailman kaunein teema ole, mutta ainakin se on itse tehty. Ei kuitenkaan kannata pelästyä sillä vaikka tilanne päällisin puolin näyttää toivottomalta tulemme seuraavissa artikkeleissa huomattavasti kohentamaan teeman ulkoasua sekä tietenkin tutustumaan kaikkeen siihen mitä ja miten voi omaa blogger blogiaan ja omaa teemaansa parantaa.
Jos et onnistunut tämän artikkelin avulla saamaan omaa teemaasi alkuun eli törmäsit ihmeellisiin virheilmoituksiin ei hätää! Kuten tavallista vastaan kyllä mielelläni kaikkiin kysymyksiin ja autan selvittämään mikä mahtaa olla vialla. Otan myös vastaan ehdotuksia siitä mitä asiaa haluatte tulevissa Oma teema! artikkeleissa lukea. Teeman rakennus intoa kaikille.
Ei kommentteja:
Lähetä kommentti