Vieraskynä: Mitä web-kehittäjän tulee tietää HTML5:stä

Vieraskynä-palstallamme on silloin tällöin vierailevana bloggaajana joku Vierityspalkin toimituksen ulkopuolinen taho. Jos olet kiinnostunut vierailemaan Vieraskynä-palstallamme, ota yhteyttä toimitukseen.

HTML5 ei tuo webiin varsinaisesti mitään uutta, sillä sen tarkoituksena on standardoida olemassaolevat käytännöt yhtenäisellä tavalla. Loppukäyttäjän näkökulmasta maailma pysyy ennallaan, mutta web-kehittäjän täytyy opiskella monta uutta tekniikkaa. Hakukoneoptimointi vaatii uusien semanttisten tagien hallintaa, Google Gearsin sijaan käytetään uusia offline-ominaisuuksia, Flash-animaatiot muuttuvat canvas-elementeiksi ja niin edelleen. Mitä kaikkea kehittäjän tulee huomioida pysyäkseen ajan tasalla?

Introducing HTML5 (Kindle-versio, pokkariversio) on pätevä ja tiivis katsaus HTML5:n sisältämiin uusiin ominaisuuksiin ja eroavuuksiin aiempaan nähden.

Kirjaa ei kannata ostaa, ellei tunne HTML- ja web-tekniikkaa jo entuudestaan melko hyvin. Se ei pyri olemaan oppikirja tai lähdeteos vaan lähinnä valistunut yhteenveto siitä, mitä HTML5 merkitsee web-kehittäjille. Näkökulma on puhtaasti tekninen.

Bruce Lawson ja Remy Sharp ottavat heti ensimmäisestä kappaleesta lähtien varsin käytännönläheisen lähestymistavan HTML5:een. Toinen kirjoittajista esimerkiksi käyttää XHTML-syntaksia <img src=”kuva.png” />, kun taas toinen jättää mieluummin kaikki turhat merkit pois: <img src=kuva.jpg>. Molemmat muodot ovat sallittuja HTML5:ssä, vaikka “tagikeitto-syntaksi” varmasti kirpaisee monia XHTML-aikakauteen tottuneita puristeja.

Alussa käydään läpi myös HTML5:n lyhyt historia. Syntyvaiheen kiintoisana anekdoottina mainitaan esimerkiksi se, miten standardin isä Ian Hickson analysoi suurehkon otoksen webbisivuja ja selvitti niiden yleisimmät CSS-luokkanimet. Näin saivat alkunsa uudet semanttiset elementit kuten <header>, <footer>, <article> ja <section>.

Semantiikan ohella kirja kiinnittää huomiota myös HTML5:n uuteen outline-rakenteeseen. <h1> voikin nyt sijaita loogisesti sisemmällä tasolla kuin <h2>, sillä rakenne määräytyy article- ja section-elementtien mukaan. Samalla raapaistaan hieman pintaa WAI-ARIA-saavutettavuusstandardin roolista HTML5:n yhteydessä.

Monet kirjassa käsitellyistä tekniikoista ovat tässä vaiheessa hyvin riippuvaisia käytetystä selainversiosta. Esimerkiksi lomakkeiden uusien kontrollien toiminta on vaihtelevaa. <audio>- ja <video>-elementtien koodekkeihin liittyvä sota WebM- ja H.264-standardien välillä lienee Vierityspalkin lukijoille tuttua alan uutisista. <canvas>-elementillä on vielä jonkin matkaa kuljettavanaan, ennen kuin kaikki selaimet alkavat renderöidä pikselit täsmälleen samalla tavalla.

Web storagea, offline-sovelluksia ja geolokaatiota käsittelevät kappaleet ovat erityisen mielenkiintoisia mobiilisovellusten kannalta. Nämä tekniikat olivat ennen osana Googlen Gears-pakettia, mutta HTML5:n myötä niistä on muodostumassa standardi tapa rakentaa itsenäisiä ja alustariippumattomia web-sovelluksia. Mikäli Chrome Web Store joskus avautuu, niistä tullee myös kaupallisesti merkittäviä.

Jos mikään tässä kirjoituksessa mainituista tekniikoista kuulostaa uudelta ja vieraalta, suosittelen hiljalleen tutustumaan HTML5:een ja sen mahdollisuuksiin. Vielä ei välttämättä ole aika ryhtyä toteuttamaan oikeita webbiprojekteja HTML5:llä, mutta kehitystä on hyvä seurata.

Introducing HTML5 on melko edullinen ja kevyt opus tähän tarkoitukseen, mutta muutama muukin löytyy. Mikäli nettilukeminen kiinnostaa, niin Mark Pilgrimin HTML5 Up And Running (O’Reilly / Google Press) on selailtavissa ilmaiseksi nimellä Dive Into HTML5. Valitettavasti kyseistä kirjaa ei ole saatavilla Kindle-muodossa, minkä vuoksi en ole sitä itse lukenut.

Kenneth Falck

Kirjoittaja on työskennellyt digitaaliseen mediaan liittyvien teknologioiden tutkimuksen ja kehityksen parissa 1990-luvun alkupuolelta lähtien. R&D- ja tuotantoprojektien ohella hän toimii myös freelance-journalistina kirjoittaen kuukausittaista kolumnia Tietokone-lehteen. Blogi löytyy osoitteesta http://kfalck.net.