sunnuntai 9. maaliskuuta 2014

Toivepostaus: Blogikoodailun alkeet

Yritän kertoa käsiteltävät asiat mahdollisimman helposti ja lyhyesti, joten päätin jättää johdannon (jonka vain murto-osa tuppaa lukemaan) kokonaan väliin. Mennään siis suoraan asiaan.

Bloggerin blogeissa ulkoasua voi muokata kolmessa paikassa:
- Ulkoasussa
- Mallin suunnittelutyökalussa
- HTML-koodissa

Näistä suosittelen käyttämään Ulkoasua ja Mallin suunnittelutyökalua. Ulkoasussa kannattaa muokata gadgetien paikka, blogin nimi, faviconin liittäminen yms. perusjutut, mutta lähes kaikki koodit suosittelen lisäämään Mallin suunnittelutyökaluun.  

Tietysti on olemassa runsas joukko koodeja, joita Mallin suunnittelutyökaluunkaan ei voi lisätä, mutta peruskoodit se lukee sujuvasti. Niihin tapauksiin on tarkoitettu käyttää HTML-koodia. Alla onkin lista, miksen suosittele käyttämään sitä.

Miksi koodeja ei kannata lisätä blogin HTML-koodiin?
- Mallin suunnittelutyökalua käyttämällä pystytään minimoimaan mahdolliset riskit, joita HTML-koodiin sekaantuminen voi aiheuttaa. Pienikin väärä kirjain/numero väärässä kohdassa voi aiheuttaa suuren katastrofin, pahimmassa tapauksessa blogiisi ei enää pääse, vaan sivu näyttää kaikille varmasti tuttua tekstiä Error.
Kokemuksella voin sanoa, ettei HTML-koodiin kannata kajota ellei ole 101% varma, mitä on tekemässä. Kokeneena koodajaana HTML-koodausta voi tietysti kokeilla. Lisäksi Mallin suunnittelutyökalussa muokkaukset näkee hetkessä, toisin kuin HTML-koodissa. Ja vielä vika juttu: HTML-koodia käyttämällä koodit eivät todennäköisesti toimi enää, jos lisäät ne Mallin suunnittelutyökalun CSS-osioon. Kuten aiemmin mainitsinkin, on olemassa paljon koodeja, jotka eivät kuitenkaan käy CSS-osioon Mallin suunnittelutyökalussa. Ne käyvät vain HTML-koodiin. Jos olet vasta aloittelija, suosittelen jättämään HTML-koodauksen tulevaisuuteen.

KOODIEN LIITTÄMINEN BLOGIIN

Suurin osa tämän apublogin koodeista laitetaan Mallin suunnittelutyökaluun. Alla on kuvasarjaohje, mihin ja miten koodit liitetään sekä varmuuden vuoksi vielä sanallinen selitys.


Hallintapaneeli -> Blogin nimi -> Malli -> Mukauta -> Lisäasetukset -> CSS
Koodit liitetään kenttään, joka on ympyröity punaisella.   

Koodin jälkeen on hyvä painaa entteriä. Itse painan sitä aina kahdesti koodin jälkeen, jotta erilliset koodit erottuvat hyvin.


KOODIEN RAKENTEESTA

Koodeja on erilaisia, ja osaa niistä käytetään CSS:ään. Käydäänpä yleisten CSS-koodien rakenne läpi ja se, millaiset rakenteet kuuluvat HTML-koodin ja millaiset CSS:ään.


Yllä oleva kaappaus on HTML-koodista.  HTML-koodissa suurin osa koodeista on < > -merkkien väliin laitettuja tekstikoodeja. Nämä koodit eivät toimi CSS:ään laitettuna. Jotkut < > -merkkien väliin laitetut koodit toimivat, jos ne laitetaan JavaScriptinä Ulkoasun kautta. Muistakaa siis, että < > -rakenteiset koodit kuuluvat lähinnä vain HTML:ään. Itse en ole perehtynyt HTML-koodeihin, joten niiden rakenteesta en osaakaan muuta kertoa kuin vain sen, että ne alkavat <-merkillä ja päättyvät >-merkkiin.

CSS-koodien rakenne on yksinkertaisempi. Ainoa hankaluus on, että halutuille määreille tarvitaan koodikielelliset määreet. Se saattaa olla välillä pidempikin projekti. Itse tuskailin monta kuukautta yhden määreen kanssa, koska en tiennyt, mikä määre vastaa kyseistä määrettä koodikielellä. Koodailu onkin kuin uuden kielen opettelua.

Alla oleva koodi on navigaatiopalkin värin muuttamiseen kehitelty.

#navbar-iframe {  
background:#ffffff;
}

CSS-koodeissa on kolme tärkeää kohtaa:
1. Valitsin
2. Ominaisuus
3. Arvo

Näiden lisäksi tärkeässä osassa ovat myös aaltosulkeet { ja }.

Valitsin kertoo asian blogista, jota halutaan muuttaa / johon halutaan lisätä jotain. Valitsimen jälkeen tulee {-sulku. Navigaatiopalkin koodissa valitsin on navigaatiopalkki.
Valitsin voi olla myös muodossa .date-header eli valitsimessa on kiinni piste. Yhdyssanat erotetaan usein viivalla.
Ominaisuus kertoo kyseisestä blogin osasta asian, joka halutaan lisätä / jota halutaan muuttaa. Navigaatiopalkin koodissa Ominaisuus on background eli navigaatiopalkin väri. CSS-koodien koodikielellisiä vastineita juurikin Ominaisuus-osassa voi päätellä englanninkielisistä sanoista. Ominaisuuksia voi olla koodissa paljon! Ominaisuuden jälkeen tulee kaksoispiste :
Arvo voi kertoa värin, Ominaisuuden koon jne. Se siis kertoo jotain Ominaisuudesta. Arvon jälkeen tulee puolipiste ;
Kun koodi on valmis, painetaan kerran enteriä ja loppuun lisätään }-sulku.


JOS KOODI EI TOIMI... [ENSIAPUA]

1. Tarkista, että olet kopioinut koodin alusta loppuun. 
2. Kokeile muuttaa koodissa olleita arvoja. Jos arvo on esimerkiksi 10px, kokeile muuttaa arvo esimerkiksi -50px:iin ja katso, huomaatko muutosta.
3. Ethän ole poistanut esim. arvoa muuttaessasi kaksoispistettä jne.?
4. Kokeile, toimiiko blogissasi mikään koodi. Bloggerin bugit voivat aiheuttaa häiriöitä Mallin suunnittelutyökalussa. Lisäksi jos olet kajoontunut blogisi HTML-koodiin, Mallin suunnittelutyökaluun lisätyt koodit eivät enää välttämättä toimi.
5. Tarkista, sopiiko koodi blogisi mallille. Tämän blogin koodit ovat Simplelle, joten en takaa niiden toimivuutta muissa malleissa. Yleensä tämä ei kuitenkaan ole syypää, miksei koodi toimi. 
6. Lisäämäsi koodi voi olla myös ristiriidassa toisen koodin kanssa = toinen koodi kumoaa toisen toimivuuden. 

Ikävä kyllä kaikki koodit eivät toimi kaikissa blogeissa. Blogitkin ovat yksilöitä.


MUUTA MAHDOLLISESTI TÄRKEÄÄ

Jos haluttua määrettä ei osaa muuttaa koodikieleksi, kannattaa hyödyntää muita koodeja. Esimerkiksi tässä blogissa on iso liuta koodeja, joissa on paljon erilaisia Valitsimia ja Ominaisuuksia. Koodikieltä oppii vain harjoittelemalla, kuten vaikkapa englantia tai mandariinikiinaa. Kukaan ei ole seppä syntyessään, ja Harjoittelu tekee mestarin -sanontaan on oikeasti uskominen. Googlettaminen on suotavaa, jos apua kaipaa. Nykyään googlessa on lähes kaikki. Google Kääntäjäkin voi olla avain hakusessa olleeseen määreeseen, nimimerkillä kokemusta on :-D

Toivottavasti tämä postaus avasi edes vähän koodikielestä!

Jos jokin jäi askarruttamaan, kysykää ihmeessä.

xoxo, iltsu

2 kommenttia:

  1. Hei, osaisitkohan neuvoa - töppäsin lisätessäni kuvaa Flickr:n kautta postaukseen, ja gadgetit (tunnisteet, blogiarkisto jne) tipahtivat alavasemmalle ja näkyvät siis vasta postausten jälkeen. Ovat siis aiemmin sijainneet samaan tapaan oikealla kuten blogissasi. Aloitin mallin muokkauksen alusta, toivoen että se olisi ongelman korjannut, mutta ei. Malleista käytössä simple ja asettelut ovat kuten niiden haluankin olevan, mutta silti gadgetit pysyvät väärässä paikassa vaikka niiden pitäisi olla mallin mukaisesti. Huomasin äsken, että myöskään linkit blogissani eivät toimi. Ensimmäisen postauksen otsikosta pääsee postaukseen, mutta minkään muun postauksen otsikoista ei pääse mihinkään, saati sitten niiden sisältämistä muista linkeistä. Myöskään arkisto, tunnisteet tai Blogilistan, Bloglovinin jne sovellusten "Seuraa"-linkit eivät toimi. Blogin vanhempia postauksia ei siis pääse selaamaan millään keinolla. Myöskin alareunassa sijaitsevat katkoviivat pomppasivat jostain syystä postauksen otsikon alapuolelle? http://elisamarianne.blogspot.fi/ Kiitos jo etukäteen! :)

    VastaaPoista
    Vastaukset
    1. Ekana tosi tosi suuret pahoittelut, että vastaan tähän vasta nyt!

      Tuollaista ongelmaa en ole aiemmin tavannutkaan :D. Outo juttu, että Flickristä kuvan lisääminen postaukseen aiheuttaisi tuollaisen probleeman... Oletko varma, ettet muokkaillut blogisi ulkoasu tms. ennen kuvan lisäämistä postaukseen? Toki on mahdollista, että ongelma on juuri syntynyt Flickrin kautta kuvan viemisestä postaukseen - se vain kuulostaa korvaani jokseenkin oudolta.

      Kävin vilkaisemassa blogiasi, ja siellä kaikki näyttäisi olevan kunnossa! Gadgetit ovat niin kuin niiden pitääkin olla, ja linkitkin toimivat. Taisit saada tällä aikaa ongelman itse kuntoon - loistavaa työtä Elisa!

      Poista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)