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

Artikkeli

Otathan huomioon, että tämä artikkeli on yli 14 vuotta vanha, joten sisältö ja linkit eivät ole välttämättä ihan ajan tasalla. Tuoreena lukemisena samasta kategoriasta: Verkkopalveluiden alustat Suomessa - markkina alkaa kypsyä.

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.

1 kommentti “Mitä web-kehittäjän tulee tietää HTML5:stä

  1. Kiitos Kennu hyvästä artikkelista!

    Kappale ”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.” on kyllä erittäin totta, mutta kannattaa tsekata Paul Irish & co:n HTML5 Boilerplate, joka tarjoaa loistavan avaimet käteen startin jo tänään laajasti toimivien HTML5-valmiiden verkkosivujen tekemiseen:
    http://html5boilerplate.com/

    En voisi lämpimämmin suositella. Väänsin tuosta jo tyhjän WordPress-templaten, jota käytän jokaisen wp-projektin alkupisteenä

Kommentointi on suljettu.



Vierityspalkki.fi

Julkaistu vuodesta 2006. Vierityspalkki on blogi kotimaisen internet-alan trendeistä, teknologioista ja alan toimistoista. Seuraa, niin tiedät miten ja kenen toimesta syntyvät parhaat verkkopalvelut, verkkokaupat ja räätälöidyt web-sovellukset. Uutiskirjeellä on jo yli 1000 tilaajaa.


Tilaa uutiskirje.

  • 40-50 asiantuntija-artikkelia vuosittain.

    Toimitettua asiasisältöä kattavasti teknologioista ja web-alan ilmiöistä. Vierityspalkki nostaa esiin alan puheenaiheita ja tuoretta tutkimustietoa, osallistuu keskusteluun sekä haastattelee alan asiantuntijoita ja toimistoja. Julkaistuja artikkeleita jo yli 1000 kappaletta.


    Kaikki artikkelit

  • 150-200 julkaistua referenssicasea joka vuosi.

    Julkaisut-palsta tarjoaa näkyvyyttä kiinnostaville uusille verkkopalveluille ja web-sovelluksille, ja antaa asiakkaille mahdollisuuden arvioida eri toimistojen osaamista.


    Selaa toimistojen julkaisuja

  • 300-400 työpaikkailmoitusta vuosittain.

    Vuodesta 2007 toiminut ilmoituspalsta on edelleen sivuston suosituin osio. Moni asiantuntija on löytänyt useammankin työpaikan palstan kautta vuosien varrella.


    Selaa avoimia työpaikkoja

  • 31 kokenutta digitoimistoa

    on päässyt aina ajantasaiselle Toimistot-listalle. Lista on auttanut asiakkaita löytämään kokeneita digitoimistokumppaneita jo usean vuoden ajan. Lista keskittyy WordPress-osaajiin ja räätälöityjen web-sovellusten tekijöihin.


    Selaa Toimistot-listaa

Tilaa kuukausikirje

Kerran kuukaudessa ilmestyvä uutiskirje koostaa artikkelit, julkaisut, työpaikat ja linkkivinkit. Kirjeellä on jo yli 1000 tilaajaa.
Huom. Sähköpostiosoitettasi ei luovuteta eteenpäin, eikä käytetä mihinkään muuhun tarkoitukseen – ihan oikeasti.

Siirry takaisin sivun alkuun