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.

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.

WordPress ja HTML5

Pikkuhiljaa alkaa sivustot päivittymään HTML5 ja CSS3 -muotoon. Tämän hetkinen Kulmaus v3 ei ole vielä päivitetty, mutta tuleva v4 on jo HTML5 ja CSS3 ominaisuuksia hyödyntävä teema. Jos haluaa käyttää oikotietä WordPressin teeman muuntamisessa HTML5 versioon, kannattaa käyttää osoitteesta http://www.twentytenfive.com/ löytyvää pakettia, missä on WP3.0 -version mukana tuleva teema TwentyTen muunnettu HTML5 muotoon.

Tällainen lyhyt pikablogitus, että saadaan helmikuulle edes yksi kirjoitus 🙂

Tilannepäivitys

Projektipäivitystä viime vuoden tavoitteisiin.

Joulukuussa oli Sitepointilla joulukalenteri menossa ja sieltä tarttui ostoskoriin paketti, missä oli kuusi kirjaa ($20) liittyen nettisivuihin. Paketissa oli mm. WordPress, jQuery: Novice to Ninja, Host your Web Site in the Cloud, Create stunning HTML email.

Sain joulukuussa jopa luettua kaksi erittäin hyvää kirjaa: HTML5 For Web Designers ja CSS3 For Web Designers. Yhteensä sivuja oli noin 200 ja esimerkit erittäin hyviä ja helposti omaksuttavissa. Suosittelen kirjoja kaikille HTML/CSS:stä kiinostuneille. Kirjojen jälkeen tietää mitä uudet standardit tuovat mukanaan ja mitä kannattaa alkaa jo nyt käyttämään.

Jatka lukemista