Mobiilit teknologiat biomassojen käsittelyyn, Pyrolyysipävä 12.11.2014
Teknologiat murroksessa -aamiasseminaari, HTML5, Teuvo Väisänen
-
Upload
management-institute-of-finland-mif -
Category
Education
-
view
102 -
download
2
Transcript of Teknologiat murroksessa -aamiasseminaari, HTML5, Teuvo Väisänen
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.
• [email protected] • http://teuvovaisanen.fi • http://twitter.com/stedi
Teuvo Väisänen - [email protected] 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
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