Oma teema -2-

Aika palata taas oman teeman kimppuun. Ensimmäisessä osassa pääsimme jo hyvään vauhtiin, eli saimme oman teemamme näkyviin bloggerissa. Edellinen artikkeli jätti kuitenkin paljon kysymysmerkkejä, sillä siinä ei selitetty bloggerin lähdekoodin ominaisuuksista juuri sanastakaan vaan iskettiin vain blogger blogi normaalin internetsivun päälle. Siitä syystä onkin aika lähteä tutustumaan hieman tarkemmin siihen miltä uusi uljas blogimme näyttää lähdekoodin puolelta katsottuna. 

b:section määritykset

Lähdetään siis jälleen liikkeelle Notepad++ ohjelman puolelta ja avataan blogimme ulkoasun xml tiedosto ja otetaan tarkasteluun blogin otsikko osa. Etsi siis lähdekoodista kohta:
Bloggerissa  erilaiset elementit määritellään komennolla <b:section...></b:section> . Jokainen b:section sisältää erilaisia määritelmiä (attribute) joiden avulla kyseisen elementin toimintaa ja sisällön toimintaa määritellään.

Näitä määritelmiä ovat:

• id
• id atribuutti on pakollinen
• id:ssä määritellään elementille nimi. 
• nimi tulee olla uniikki ja saa sisältää ainoastaan numeroita ja kirjaimia (ei ääkkösiä) 
• class
• class on vapaaehtoinen määritelmä
• määrittää blogin elementin luokan
• blogger tunnistaa muutamia class määritelmiä: header, sidebar, footer, navbar ja main. Blogger myös osaa sijoittaa näiden avulla sisällön oikealle paikalleen teemaa vaihdettaessa jne.
• maxwidgets
• maxwidgets on vapaaehtoinen määritelmä
• määrittää kuinka monta widgettiä kyseisen elementin sisälle voidaan asettaa.
• showaddelement 
• showaddelement on vapaaehtoinen määritelmä
• määrittää näytetäänkö blogger asetuksien ulkoasuvalikossa lisää gadget linkki elementin yhteydessä. 
• kaksi vaihtoehtoa (kyllä/ei): 'yes' 'no'
• growth
• growth on vapaaehtoinen elementti 
• määrittää kuinka elementin sisälle lisätyt widgetit sijoittuvat
• kaksi vaihtoehtoa: 'horizontal' tai 'vertical'
• horizontal: vierekkäin, vertical: päällekkäin

Näiden avulla siis määritellään miten elementti (b:section) käyttäytyy.

Katsotaan mitä oman mallimme header elementissä määritellään:

Eli class='header' määrittelee kyseisen b:section elementin header tyyppiseksi. Nimeksi tälle osalle on annettu header (id='header') vaikka se voisi yhtä hyvin olla vaikka 'otsake' (id='otsake'). Osion widgettien määräksi on asetettu yksi (maxwidgets='1') ja siihen ei voi yrittää lisätä uusia (showaddelement='no'). Joskus näkee blogeja joissa header osassa kaksi eri widgettiä. Blogin otsikon ja kuvauksen lisäksi saattaa niistä oikealle löytyä esim banneri tai jokin muu vastaava. Silloin jouduttaisiin muuttamaan header osion määritelmiä soveltumaan tälläiseen asetteluun. Esimerkiksi tähän tapaan:

Tämän kaltaisella asettelulla header osassa olisi tila kahdelle widgetille joiden asettelu on vierekkäin (growth='horizontal').

b:section: säiliö widgeteille

Nyt kun olemme päässeet vauhtiin lähdekoodin tarkastelussa on aika heittää lisää vettä myllyyn. Blogger asettelussa b:section on siis elementti jonka paikan voi itse määrittää blogin lähdekoodissa. Jokaisen b:section elementin sisälle voidaan asetella erilaisia widgettejä <b:widget.../> ja nämä widgetit ovat itseasiassa se blogin osa joka näkyy blogissa vieraileville ihmisille. Widget tyyppejä joita bloggerin lähdekoodissa voi määritellä on muutamia: BlogArchive, Blog, Feed, Header, HTML, SingleImag, LinkList, List, Logo, BlogProfile, Navbar, VideoBar ja NewsBar.

Näiden "widgettien" lisäksi on olemassa vielä toinen samankaltainen ryhmä erilaisia näytettäviä blogin osia, joita blogger kutsuu "gadgeteiksi". Lähdekoodissa nämä kuitenkin näyttävät aivan samalta (molempia kutsutaan koodilla b:widget). Gadgetteja voi itse asettaa helposti bloggerin Ulkoasu valikosta haluamiinsa kohtiin, olettaen että sinulla on määriteltynä b:section siihen kohtaa blogia johon ajattelit gadgetin asettaa. Tämä saattaa kuulostaa monimutkaiselta mutta itseasiassa ei sitä ole. Katsotaan hieman tätä seuraavaa kuvaa:

Harjoitus blogissamme on siis yhteensä 4 b:section elementtiä. Näistä kahdessa, eli sidebar ja footer, on mahdollisuus lisätä uusia gadgetteja. Jos tilanne olsi se että haluat lisätä gadgetin johonkin muualle joudut lisäämään uuden b:section määritelmän tähän kohtaa blogiasi.

Kannattaa kuitenkin ottaa huomioon se että internetsivuissa on rajallisesti tilaa lisätä uusia elementtejä ja ainoat järkevät tyhjät tilat sijaitsevat tässä mallissa b:section id="main" elementin vasemmalla ja b:section id="sidebar" oikealla puolella. Tilan puute saattaa iskeä etenkin silloin kun sivulla halutaan olevan paljon materiaalia esillä yhtäaikaisesti.

b:section & CSS

Joku on jo saattanut huomatakkin b:section elementti toimii hyvin samalla tavalla kuin normaali div elementti perus internetsivuissa. Tämä on viimeistään siinä kohtaa varmaa kun selviää: Selaimen törmätessä internetissä blogger blogiin blogger alusta "kääntää" kaikki b:section elementit selaimia varten div elementeiksi. Tästä syystä b:section elementtejä voidaan muokata käyttäen css muotoiluja aivan kuten tavallisia div elementtejä.

Samasta syystä emme myöskään joutuneet ensimmäisessä osassa tekemään minkänlaisia muutoksia  omaan css koodiimme. Riitti ainoastaan kun kopioimme css määritykset blogin xml tiedostoon oikealle paikalleen. Tulevissa osissa tutustumme tarkemmin siihen millaisia css määritelmiä voidaan b:section elementeille sekä muille blogger blogin osille asettaa. Ennenkuin ehdimme css muotoiluihin asti pitää kuitenkin jatkaa koodin läpi kahlaamista ainakin vielä yhden kirjoituksen verran.

Loppusanat

Tässä oli siis lyhyt oppimäärä siitä mikä on bloggerin lähdekoodin mystinen b:section ja miten sen määrittelyt vaikuttavat blogiin ja toiminnallisuuteen. Seuraavassa osassa siirry askeleen syvemmälle ja lähdemme tutustumaan  siihen mitä b:section elementin sisälle asetettavat widgetit ovat ja miten niitä määritellään.

Kuten tavallista, jos sinulla ilmenee kysyttävää mistään tämän artikkelin kohdasta tai haluaisit lisää tietoa jonkin kohdan toiminnasta omassa harjoitusteemassasi jätä kommenttia.