HTML5

25.3.2015

Teuvo Väisänen

• Osaamisalueet / Competence areas • WEB

HTML, CSS, JavaScript, XML, UI, SEO, SEM, Web Analytics, CMS, SharePoint, Adobe CC, Social Media, Multimedia, Mobile, Browsers etc.

• teuvo.vaisanen@gmail.com • http://teuvovaisanen.fi • http://twitter.com/stedi

Teuvo Väisänen - teuvo.vaisanen@gmail.com 2

• Web-asiantuntija, valmentaja

• Web Specialist / Coach

Mikä HTML5?

• HTML – Living Standard

– WHATWG

– https://whatwg.org/

– Jatkuvasti muuttuva ja kehittyvä, “aina uusin HTML”, ilman versionumeroa

• HTML5

– W3C Recommendation 26 October 2014

– http://www.w3.org/TR/html5/

– “Jäädytetty” snapshot tietystä HTMLn kehitysvaiheesta

25.3.2015 Teuvo Väisänen 3

Mitä HTML5 on?

• Tiukasti ottaen se, mitä WHATWG / W3C “standardit” määrittävät

• Käytännössä HTML5 on kaikenlaista uutta, jota selaimet osaavat

– Semantics

– Multimedia

– 2D / 3D Graphics, Effects

– Offline & Storage

– Connectivity

– Device Access

– Performance & Integration

– Styling

25.3.2015 Teuvo Väisänen 4

HTML5 semantics

• Yli 30 uutta elementtiä

• Paljon uusia attribuutteja

• Muuttuneita elementtejä ja attribuutteja

• Poistuneita HTML 4 elementtejä ja attribuuteja

• http://www.w3.org/TR/html5-diff/

25.3.2015 5 Teuvo Väisänen

Styling

• CSS 3 ulkoasu – paljon uutta innovatiivista ulkoasuun ja käyttökokemukseen, mm.

– Parempi taittojen hallinta

– RWD – Responsive Web Design

– Transitiot ja animaatiot

– Web Fonts

– Jne.

• http://www.w3.org/Style/CSS/

25.3.2015 6 Teuvo Väisänen

Offline & Storage

• Application cache

– sivusto toimii ilman verkkoyhteyttä

• DOM Storage

– rakenteellisen datan tallennus selaimeen

• IndexedDB

– tietokanta selaimessa

• HTML File Api

– paikallisten tiedostojen käyttö

• Online & Offline events

25.3.2015 7 Teuvo Väisänen

Multimedia

• HTML5 video & audio

– Ei enää tarvetta playereille (Flash, Silverlight jne.)

• WebRTC

– videoneuvottelu selaimessa

• Camera API

– yhteys tietokoneen kameraan

25.3.2015 8 Teuvo Väisänen

2D/3D Graphics, Effects

• Canvas

– vektorigrafiikkaa JavaScriptillä

• WebGL

– kolmiulotteisuus selaimeen

• SVG

– vektorigrafiikkaa XML formaatissa

25.3.2015 9 Teuvo Väisänen

Connectivity

• Web Sockets

– jatkuva yhteys selaimen ja serverin välillä datan välittämiseksi

• Server-sent events

– push events

• WebRTC

– videoneuvottelu selaimessa

25.3.2015 10 Teuvo Väisänen

Device Access

• Camera API

– yhteys tietokoneen kameraan

• Geolocation

– paikkatieto

• Device Orientation

– laitteen asento

• Pointer Lock API

• Touch events

25.3.2015 11 Teuvo Väisänen

Performance & Integration

• Web Workers

• XMLHttpRequest level 2

• History API

• Drag and Drop

• contentEditable

• Focus management

• Fullscreen API

• Pointer Lock API

• requestAnimationFrame

• Jne.

25.3.2015 12

Teuvo Väisänen

Mitä selaimet osaavat?

• Can I use?

– Erinomainen tietokanta selainten kyvykkyydestä

– http://caniuse.com/

• modern.IE

– Erityisesti Internet Explorer –selaimen tilanne

– https://status.modern.ie/

• Modernizr

– Feature Detection Library

– http://modernizr.com/

25.3.2015 Teuvo Väisänen 13

Multidevice – Multiscreen

25.3.2015 Copyright © Tieturi 14

Esityksen linkkejä

• Semantics - Microdata

– https://developers.google.com/structured-data/

– http://schema.org/

• CSS 3

– Flexbox http://dev.w3.org/csswg/css-flexbox/

• Offline

– https://developers.whatwg.org/offline.html#offline

• MIF – HTML5 ja CSS 3 – Koulutus Tampereella

– http://www.mif.fi/fi/koulutus/1130-html5-ja-css-3

25.3.2015 Teuvo Väisänen 15

KIITOS