Vieraskynä: 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: Vieraskynä: Katsaus WordPress-sivustojen tietoturvaan.

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.

Kenneth Falck

Kenneth Falck 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.

1 kommentti “Vieraskynä: 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-blogi

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.
Lisätietoa blogista ja sen kävijöistä

  • 1140+ asiantuntija-artikkelia.

    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.

  • 1300+ digipalvelun referenssicasea.

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

  • 1000+ aktiivista lukijaa blogin kuukausikirjeellä.

    Kerran kuukaudessa ilmestyvä kuukausikirje koostaa julkaistut artikkelit, uudet julkaisut, avoimet työpaikat ja ajankohtaiset linkkivinkit.

  • 29 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.

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.

Siirry takaisin sivun alkuun