Teuvo Väisänen antoi vinkkejä HTML5:n uusista ominaisuuksista Teknologiat murroksessa -aamiasseminaarissa 25.3.2015. Tilaisuuden järjestivät Pirkanmaan tietojenkäsittely-yhdistys (Pitky) ja MIF

1. HTML5
25.3.2015

2. 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

3. 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

4. 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

5. 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 5Teuvo Väisänen

6. 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 6Teuvo Väisänen

7. 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 7Teuvo Väisänen

8. Multimedia
• HTML5 video & audio
– Ei enää tarvetta playereille
(Flash, Silverlight jne.)
• WebRTC
– videoneuvottelu selaimessa
• Camera API
– yhteys tietokoneen kameraan
25.3.2015 8Teuvo Väisänen

9. 2D/3D Graphics, Effects
• Canvas
– vektorigrafiikkaa JavaScriptillä
• WebGL
– kolmiulotteisuus selaimeen
• SVG
– vektorigrafiikkaa XML formaatissa
25.3.2015 9Teuvo Väisänen

10. 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 10Teuvo Väisänen

11. Device Access
• Camera API
– yhteys tietokoneen kameraan
• Geolocation
– paikkatieto
• Device Orientation
– laitteen asento
• Pointer Lock API
• Touch events
25.3.2015 11Teuvo Väisänen

12. 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 12Teuvo Väisänen

13. 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

14. Multidevice – Multiscreen
25.3.2015 Copyright © Tieturi 14

15. 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

16. KIITOS