Paljon tekemistä, vähän aikaa

En ole viikkoihin bloggaillut, mutta se ei johdu kyllästymisestä vaan yksinkertaisesti siitä, että olen saanut kuluneen kuukauden aikana useita uusia projekteja ja kävin tällä viikolla ensimmäistä kertaa kertausharjoituksessa Karkialammella sitten 2006 intistä kotiutumisen jälkeen. Vettä satoi jokaisena päivänä, paitsi perjantaina kun lähdettiin pois.

Kertausharjoitus hieman aiheutti kiireitä ja pieniä aikataulumuutoksia projektien osalta, mutta asia korjaantuu seuraavien viikkojen aikana ja toivottavasti pääsen bloggaamaankin enemmän. Tein viime kuun alussa hieman isomman projektin FM Suomi-sivuston kanssa, tekemällä heille Joomla-teeman, sekä foorumin ulkoasun.

Ensi viikon aikana saan valmiiksi toisen Joomla-projektin, sekä foorumiulkoasun. Projektista lisää sivuston valmistumisen jälkeen. Projektien lisäksi minulla on sivuilleni kymmeniä erilaisia uusia ideoita, joita ajattelin kokeilla lähipäivien aikana.

Finntastic: Ilmainen WordPress-teema on nyt valmis

Kuten lupasin, sain ensimmäisen ilmaisen WordPress-teeman valmiiksi tänään. Teeman voit katsastaa osoitteesta: http://demo.kulmaus.com/?themedemo=finntastic .

Finntastic on ilmainen WordPress-teema, minkä käyttö ja muokkaus on täysin vapaata, mutta jälleenmyynti kiellettyä. Toinen ehto on, että jossain kohtaa on selvästi näkyvissä teeman alkuperäinen tekijä ja linkki http://www.kulmaus.com -sivustoon. Kyseinen kohta löytyy oletuksena sivun alareunasta.

Teeman ominaisuuksia:

  • Droid Sans -fontti Googlen web-fonteista
  • Kaksi erilaista etusivua: jQueryllä hoidetut mainosbannerit (Etusivu 1) ja jQueryllä näytettävät viimeisimpien artikkeleiden kuvat (Etusivu 2).
  • HTML5 & CSS3 -ominaisuuksia: esimerkiksi tekstin ja laatikoiden varjot
  • Vimpaimia: etusivulla yksi, sivuilla ja blogissa oma
  • Toimivuus selaimilla: Internet Explorer, Firerox, Opera, Chrome, Safari

Etusivujen muokkaus

Etusivujen muokkaus onnistuu etusivu.php ja etusivu2.php -tiedostoista. Sinun tarvitsee muokata vain toista tiedostoa, eli sitä mitä haluat käyttää etusivuna. Molemmissa etusivuissa on ”Etusivu Widget Area”, eli voit näyttää kyseisellä kohdalla mitä tahansa widgettiä (vimpainta).

Sivujen muokkaus

Sivuilla näytetään sivuston sisältö ja sen vieressä sivun valikko, minkä voi muokata tai ottaa pois muokkaamalla page.php -tiedostoa. Sivuston hallintapaneelista voi päättää mitä vimpaimia sivuilla näytetään. Vimpain on nimetty ”Sivujen Widget Area”-nimellä. Kyseinen vimpain on siis eri kuin blogin sivulla näkyvä. Tyylien muokkaaminen onnistuu tietenkin style.css -tyylitiedoston kautta.

Artikkeleiden kuvat

Artikkeleista näytetään kuva automaattisesti oikean kokoisena. Kuva lisätään seuraavasti:

  1. Lisää kuva
  2. Kopioi kuvan url kohdasta ”Linkin url
  3. Klikkaa ”Tallenna kaikki muutokset
  4. Artikkelin tekstilaatikon alapuolella pitäisi olla ”Avainkentät” -niminen laatikko. Jos ei ole niin oikeasta yläkulmasta ”Näyttöasetukset” ja sieltä merkintä kohtaan”Avainkentät”.
  5. Klikkaa ”Syötä uusi” avainkentässä olevasta kentästä. Kirjoita nimeksi ”thumb” ja liitä kuvan url ”Arvo” -laatikkoon.
  6. Klikkaa ”Lisää avainkenttä”. Nyt artikkelista näkyy valittu kuva etusivulla, sekä blogissa. Etusivun isokuva on kooltaan 930 x 246 pikseliä.

Teeman tuki

Koska kyseessä on ilmainen WordPress -teema, tuen antaminen ei varsinaisesti kuulu teemaan, mutta yritän parhaani mukaan auttaa ongelmatilanteissa mikäli minulla on siihen aikaa. Saatan myös päivittää teemaa sen saaman palautteen mukaan. Palautetta ja teemaan liittyviä kysymyksiä voi lähettää suoraan kommentoimalla tähän artikkeliin, tai ottamalla yhteyttä lomakkeen kautta.

Päivitys #1: Kirjoittajan info-laatikon nimiotsikko (h2) oli alkuperäisessä väärä, siinä oli turhaa marginaalia yläosassa, joten ladatkaa uusiksi tai muokatkaa style.css tiedostosta kohdasta #entry-author-info h2 { margin-bottom: … } suoraan ”margin: 0”.
Päivitys #2: No olihan siellä vielä arkistotiedostossa sama juttu. Eli arkistoja selaamalla huomaa otsikoissa liian ison yläosan välin valkoiseen taustaan. Nyt asia on korjattu versiossa v1.2. Seuraavaksi ilmestyvät päivitykset kasaan yhteen isompaan pakettiin, niitä kun saattaa vielä olla.

Ilmainen WordPress-teema: Finntastic

Vuosia sitten lupailin ilmaista WordPress-teemaa ja sen tekeminen jäi lopulta kesken. Nyt teen sellaisen ja ajattelin samalla kuvata ainakin suunnitteluvaiheen Photoshopissa, sekä .PSD-tiedoston leikkaamisen kuviksi. Koostamisen teemaksi meinasin tehdä tekstinä ja kuvina, mutta asiat voivat vielä muuttua.

Päivitys #1: Teen vain kuvien leikkaamisesta videon, koostaminen WordPress-versioon tulee suoraan .zip -tiedostona. Teeman arvioitu valmistumispäivä viikon 26 aikana.
Päivitys #2: Lisäsin .PSD-tiedoston, sekä käytettyjen ikoneiden latauslinkit.

Alkusuunnittelu

Teeman nimeksi valitsin Finntastic (suomalaisen tekemä ”fantastinen” WordPress teema, heh heh). Nimellä ei sinällään ole mitään isompaa merkitystä, se tuli nyt ensimmäisenä mieleen. Tarkoituksena on tehdä perinteinen WordPress-teema, mikä koostuu seuraavista ominaisuuksista:

  • Fontit: Droid Sans (ilmainen + Googlen Web Font), Arial, Georgia
  • Ikonit + WordPress-logo
  • Yläosa (logo+valikko)
  • Slider (näyttää joko ”mainoksia” tai viimeisimpiä artikkeleita)
  • Etusivulla blogista poimittuja artikkeleita
  • Twitteristä poimitut viisi viimeisintä twiittausta
  • HTML5 & CSS3 -ominaisuuksilla tehtyjä hienouksia
  • Kuvia mahdollisimman vähän
  • Katso valmis .PSD-kuva
  • Lataa PSD: [download id=”2″]

Pohjaksi valitsin 960.gs -sivun 12-sarakkeen pohjan, minkä leveys on yllättäen 960px, joista 940px on varattu sisällölle. Ensimmäisen videon alussa näkyy kyseisen frameworkin lisäosa, mikä tekee automaattisesti 12 saraketta ja kaikki apuviivat. Ikonit ja sliderin kuva eivät ole minun tekemiä, käytin niitä vain esimerkkeinä, ikoneja käytän kyllä teemassakin, koska ne ovat siihen sallittuja.

Ilmainen WordPress-teema, suunnitteluvaihe

Videoiden värit on hieman sinertävät, koska en ole aiemmin tehnyt videoita. En vain osaa, mutta opettelen. Videoiden äänet on myös poissa, ajattelin jättää kommentoinnin pois, eikä musiikin lisääminenkään tuntunut hyvältä idealta, joten voit kuunnella suosikkejasi samalla kun katsot videota. Kokonaispituus neljälle videolle on 48 minuuttia + leikkausvaihe n. 4 minuuttia.

Logo-osan ja vaalen taustan alueella on käytetty 0.8% kohinaa, mikä ei näy kunnolla videoissa, eikä valmiissa .psd-kuvassa. Live-versiossa se kuitenkin tuo pientä tekstuuria alueille. Toivottavasti videoista irtoaa jotakin uutta ja jos on jotain mitä voisin tehdä toisin niin kommentoikaa.

 

Tulossa olevaa sisältöä

En ole pariin viikkoon pysynyt tavoitteessani, eli muutama kirjoitelma viikossa on jäänyt tekemässä. Olen testaillut HTML5 ja CSS3 -ominaisuuksia ja suunnitellut muutamia parannuksia sivuilleni. Viilauksen kohteina on enimmäkseen ollut: navigointi, etusivun ”yli 10-vuoden kokemuksella” -slogan ja etusivulla sijaitseva ”Palvelut”. Myös alareunan ”Webmaster” alue kaipaa päivitystä, koska en tajunnut laittaa sitä suoraan WordPressin kautta muokattavaksi (tyhmä minä).

Koitan julkaista muutaman ns. oppaan, tai pikemminkin vinkin liittyen joko Photoshop/HTML5 tai CSS3 -aiheisiin. Löysin myös muutaman sivupohjan koneeni kätköistä, mitä olen joskus työstänyt mutta en koskaan saanut valmiiksi, joten saatan laittaa niitä näytille. Ne taitaa olla tehty aikoinaan ThemeForest.net-sivulle, missä voi myydä valmiita nettisivuja. Koska tiedostot ovat hieman kesken, en niitä koskaan sinne saanut laitettua.

Seuraavana opetteluvuorossa on javascript + jQuery. jQuery on jo kohtalaisen tuttu, mutta pitäähän sitä perus javaa osata myös käyttää.

Nopeuta projektien aloittamista

Yleensä uusien projektien aloittaminen alkaa uuden kansion ja css-tyylitiedoston tekemisellä. Usein kaikki tiedostot ja valmistelut tehdään uudelleen ja uudelleen jokaisen projektin alussa. Tiedostojen tekemiseen menee aikaa vain muutama minuutti, mikä on aika vähän, mutta entäpä jos teet sen kymmeniä tai jopa satoja kertoja projektien alussa?

Nopeuttaakseni projektien aloittamista, olen tehnyt kansion missä on kaikki mahdollinen valmiina:

Jatka lukemista