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.

Kesä tuli, kesä meni

Edellisestä blogipostauksesta on näköjään vierähtänyt jo ”muutama” kuukausi. Ajattelin nyt hieman valaista mitä on tullut tehtyä tämän hiljaiselon aikana.

Alkuvuosi

Alkuvuosi oli erittäin kiireinen, johtuen räjähdysmäisestä www-sivujen projektimäärästä. Tein muutaman alkuvuoden aikana enemmän www-sivuja, kuin viime vuoden touko-joulukuu välillä. Tämä oli tietenkin ihan loistava asia, sillä www-sivujen tuottaminen on se mistä pidän, ehkä liikaakin.

Kevät & kesä 2012

Keväällä aloitin tekemään projekteja mikkeliläisen mainostoimiston Haaja & Arwo Design Oy:n kanssa. Kesä sitten menikin varsin nopeasti projektien parissa. Paljon tuli nettisivuja tehtyä, sekä uusia taitoja opittua.

Kesän aikana tuli myös hankittua ja luettua paljon www-puolen kirjoja, sekä katsottua monia video-oppaita liittyen mm. seuraaviin:

Kuten aiheista voi jo päätellä, seuraavana haasteena on siirtää weppisivut responsiivisiksi, eli mahdollistaa sivujen selailun suosituilla tablet-laitteilla ja puhelimilla. SASS ja Compass nopeuttavat CSS:n tekemistä, joten halusin oppia molemmista ainakin perusteet ja se olikin aika helppoa ja nopeaa (suosittelen). jQuery-kirjan hankin jo viime vuoden puolella, mutta nyt kesän aikana sitä tuli lueskeltua paljon, vaikka vieläkin se on hieman kesken.

Tulevaisuus

Tilasin myös uuden kirjan: The Smashing Book #3: Redesign The Web. Kirjan lisäksi meinasin aloittaa Ruby-kieleen tutustumisen, joten syksyn pimeneviin iltoihin on jotain uutta opiskeltavaa.

Responsiivisuus, SASS ja Compass tulevat olemaan aika kovassa käytössä nyt lähiaikoina kun yritän saada uuden version Kulmauksesta ulos. Tapojeni mukaan olen tehnyt kevään ja kesän aikana melkein 20 erilaista suunnitelmaa uudesta versiosta (v5), mutta aina aloittanut alusta seuraavana päivänä.

 

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.

Hyvää Joulua ja Uutta Vuotta 2012

On aika tullut kiittää kuluneen vuoden projekteista kaikkia asiakkaita ja toivottaa hyvää Joulua ja Uutta Vuotta 2012. Jatketaan hienojen nettisivujen valmistamista ensi vuonnakin.

Nyt pidän lyhyen tauon projekteista ja jatkan nettisivujen parissa ensi vuonna. Tässä kuussa yritän vielä saada julkaistuksi Joomla-teeman, mutta en lupaa varmaksi. Kyseessä on vapaa-ajan projekti, joten voi olla ettei kyseinen homma paljoa saa aikaa Joulun ja uuden vuoden aikana.

– Sami