Uudistettu Kulmaus

Morjens!

Nyt on uusi Kulmaus julkaistu. Vuorossa on numero 5, oikeastaan numero voisi olla vaikka 10… sen verran paljon on sivusto mennyt eteenpäin. Tämä ”viitosversio” on ollut tekeillä noin 6kk, joten hiemanhan siinä taas kestikin.

Teen jonkinlaisen esittelykirjoituksen vielä erikseen, missä käydään läpi isommat muutokset ja tekniikat mitä käytin uuteen versioon.

HTML5 Ominaisuudet

Uusi HTML5 tuo mukanaan yksinkertaisemman merkkauksen ja mahdollistaa Canvasin avulla jopa Flashin korvaamisen.

Voinko käyttää jo HTML5 ja CSS3-ominaisuuksia?

Kyllä. Itse aloitin uusien ominaisuuksien käytön projekteissani viime vuoden alkupuolella ja nykyään monet selaimet osaa tulkita merkkauksen oikein. W3C -validaattori ei vielä täysin tue HTML5:sta, mutta sillä voi kuitenkin tarkistaa sivut virheiltä. Varsinkin CSS-validaattori herjaa virheellisesti ja sen herjaukset on helposti ohitettavissa laittamalla kaikki CSS3-määritykset erilliseen .css -tiedostoon. Itse en ole kyseistä ohitusta harrastanut, koska en näe siinä mitään väärää jos validaattori herjaa CSS3-ominaisuuksista.

Mitä uusi HTML5-tuo mukanaan?

Ensimmäisenä www-sivujen tekijä törmää uudistuneeseen dokumentin määrittelyyn, mikä hoidetaan vain kahdella sanalla aikaisemmin tehdyn parin rivin sijaan. Seuraavassa koodinpätkässä on normaali HTML4-sivuston rakenne ja sen jälkeen on uusi HTML5-määrittely.

Vanha HTML määrittely

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML4 -sivu</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Uusi HTML5-määrittely

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 - Testisivu</title>

<link rel="stylesheet" href="style.css" />
<script src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Kuten esimerkeistä näkee, on uusi HTML5 paljon yksinkertaisempi ja nopeampi tapa tehdä sivuja. Tyylitiedostot eivät enää tarvitse tietoa ”type=text/css” ja javascriptin voi liittää ilman ”type=text/javascript” määrittelyä. HTML5 mahdollistaa myös sivuston alueiden nimeämisen, ilman <div id=”…”>. Yleensä on käytetty esimerkiksi seuraavia määrittelyjä:

<div id="header"></div>
<div id="post"></div>
<div id="footer"></div>

Uusi HTML5 mahdollistaa alueiden määrittelyn ilman divejä, tosin CSS-tiedostoon täytyy laittaa vielä ylimääräinen tyyli, sekä sivuilla pitää käyttää javascriptiä, jotta sivusto näkyy oikein kaikissa selaimissa. Uudet määritykset voi tehdä seuraavasti:

...
<title>HTML5 - Testisivu</title>

<!--[if IE]><!--Ladataan HTML5-skriptitiedosto korjaamaan Internet Explorer-->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<header>Otsikkoteksti</header>

<nav>Navigaatio</nav>

<section>Sisältöä...</section>
<article>Artikkeliosa</article>
<footer>Alaosa, vaikka copyright</footer>
...

HTML-tiedostoon täytyy liittää html5.js javascriptitiedosto ja tyylitiedostoon täytyy laittaa seuraavat asetukset, jotta yllä mainitut määrittelyt näkyvät selaimissa oikein.

header, nav, section, article, footer {display:block;}

Näin on perustiedot käsitelty uudesta HTML5-merkkauksesta ja läpi käydyt esimerkit ovat hyödyllisiä. Kaikkia ei tarvitse käyttää, mutta suosittelen ainakin käyttämään uutta HTML5-sivuston määrittelyä. Lisää oppaita löytää verkosta helposti esimerkiksi googlettamalla ”HTML5”. hyvä HTML5-pohja löytyy sivulta http://html5boilerplate.com/. Suosittelen myös kirjaa HTML5 For Webdesigners (eng).

Sivulta http://www.cuttherope.ie/ löytyvä peli on tehty HTML5:lla käyttäen Canvasia.

Kotisivujen suunnittelu ja toteutus

Kotisivujen suunnittelu ei ole mitään rakettitiedettä. Tärkeintä on muistaa, että sivuilla oleva sisältö on esitetty selkeästi ja sivuston sisältöä on helppo lukea, eikä haetun tiedon löytäminen ole kymmenien linkkien takana. Seuraavassa lyhyesti oma suunnittelutapani.

1. Vaihe: Inspiraatio ja mallit

Tämä vaihe voisi vaihtaa paikkaa toisen vaiheen kanssa, mutta mielestäni on helpompi ensin selata muita sivustoja ja niiden avulla suunnitella rautalankamalli. Yleensä aloitan avaamalla Dribbble-sivuston ja selailen grafiikoita, sekä muutamia siellä näytettyjä sivuprojekteja. Toinen erittäin paljon käyttämäni sivusto on Awwwards.com, missä valitaan päivittäin yksi ”päivän sivusto” perustuen useampien arvostelijoiden antamiin ääniin. Uusin tulokas inspiraation lähteisiini on HTML5 Gallery, missä on listattu HTML5:sta käyttäviä sivustoja.

Näiden lisäksi on monia muitakin sivustoja, mutta edellä mainitut kolme sivustoa ovat suosikkejani ja niistä löytyvillä töillä saa jo paljon ideoita.

2. Vaihe: Rautalankamalli

Monet sivujen tekijät ohittavat tämän vaiheen ja siirtyvät suoraan Photoshopiin tai HTML-version tekemiseen. Suosittelen tekemään ensimmäisen vaiheen jälkeen paperilla tai jollain ohjelmalla yksinkertaisen rautalankamallin. Hyvä opas rautalankamalleihin ja ohjelmiin löytyy Six Revisions-sivuston artikkelista. Tämä vaihe voi tuntua ajan tuhlaamiselta, mutta kunhan teet ensimmäisen kerran rautalankamallin, huomaat varmasti miten paljon rautalankamalli nopeuttaa sivun valmistumista ja helpottaa sivuston erilaisten osien hahmottamista.

3. Vaihe: Photoshop tai HTML

Kun sivuston suunnittelu on saatu siihen vaiheeseen, että voidaan aloittaa toteutus on valittavissa kaksi vaihtoehtoa: Photoshop tai HTML-versio. Yleensä olen tehnyt suoraan Photoshopin kautta ensin suunnitelman piirustusten mukaan ja sen jälkeen leikannut kuvat ja alkanut tekemään merkkausta. Photoshop on hyvä jos tekee sivustoa itselleen, tai tietää mitä asiakas haluaa. Ongelmia tulee siinä vaiheessa jos asiakas haluaakin nähdä esimerkiksi pyöristetyt reunat terävinä kulmina, tai vaihtaa linkkien väriä. Silloin joutuu tekemään uudestaan kaikki kohdat, missä on pyöristetyt kulmat ja etsimään muokattavat linkit.

Jos tekisi suoraan HTML-version, niin siihen on helpompi tehdä asiakkaan haluamat muutokset, sekä siitä näkee paremmin kaikki linkkien värit ja sivuston yleisilmeen.

4. Testaus ja julkaisu

Viimeinen vaihe on tietenkin sivuston testaus ja julkaisu. Ennen julkaisua on hyvä tarkistaa, että sivusto on todellakin valmis ja valmiina julkaistavaksi. Sivusto kannattaa testata Internet Explorerilla (versiot 7-10), Google Chromella, Mozilla Firefoxilla, Operalla ja Safarilla. Hyvä tarkistuslista löytyy osoitteesta http://lite.launchlist.net/ (englanninkielinen).

Minkälainen tapa Sinulla on tehdä verkkosivuja? Olisi mielenkiintoista tietää muiden velhojen työtapoja.

Projektisuunnittelija

Viimeaikoina olen saanut monia yhteydenottoja kotisivujen hinta-arvioista, joten ajattelin hieman helpottaa asiakkaitani ja itseäni tekemällä kohtalaisen simppelin Projektisuunnittelijan. Kyseinen sivu pyytää muutamia tärkeitä osa-alueita projektin aloittamista varten ja laskee hinta-arvion, minkä perusteella on helppo tehdä tarkempia suunnitelmia.

Projektisuunnittelija on vielä kehitysvaiheessa, joten kaikenlainen palaute on tervetullutta.

EDIT: Projektisuunnittelija on poissa käytöstä kunnes saan uuden version ulos.

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.