hidownload.microsoft.com/download/3/0/e/30e8e435-33d1-47b0... · 2018-10-13 · draganddrop...
TRANSCRIPT
![Page 1: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/1.jpg)
hi
![Page 2: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/2.jpg)
| Basel
HTML5
a pragmatic guideMartin Beeby
Technical Evangelist
@thebeebs
![Page 3: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/3.jpg)
Agenda
Agenda
What is HTML5 20’Browsers 5’
Standards Bodies 5’
Basics 5’
Features 30’HTML 10’
SVG 5’
JavaScript 8’
CSS3 7’
![Page 4: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/4.jpg)
| Basel
Perfect Competition
Browsers
![Page 5: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/5.jpg)
Internet Explorer
Founded in 1995
Version 11
Rendering Engine: Trident
![Page 6: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/6.jpg)
Firefox
Founded in 2002
Version 25
Rendering Engine: Gecko, Working with Samsung on Servo.
![Page 7: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/7.jpg)
Safari
Version 7
Rendering: Webkit
![Page 8: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/8.jpg)
Opera
Founded 1994
Version 17
Rendering: Presto/Blink
![Page 9: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/9.jpg)
Chrome
Founded 2008
Version 30
Rendering: Webkit/Blink
![Page 10: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/10.jpg)
Differences
Various Features
Subtly Different implementations
Various Vendor Prefixes
-ms, -moz, -webkit, -o
![Page 11: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/11.jpg)
Similarities
HTML5 Parser
<b><i>Hi</b></i>
More similar than ever before
![Page 12: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/12.jpg)
| Basel
What is HTML5?
![Page 13: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/13.jpg)
<!DOCTYPE HTML>
![Page 14: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/14.jpg)
Agenda
A specification
![Page 15: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/15.jpg)
http://www.w3.org/TR/html51/
![Page 16: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/16.jpg)
Symantic Markup
<header id="masthead">
<nav class="navbar navbar-fixed-top">
<a href="/">Home</a>
<a href="/">Privacy Policy</a>
</nav>
</header>
Nav
Article
Aside
Figure
Section
![Page 17: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/17.jpg)
![Page 18: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/18.jpg)
Older Browsers
IE6-8 Don’t support the new elements
HTML5 Shiv/Shim<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif ]-->
http://code.google.com/p/html5shiv/
![Page 19: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/19.jpg)
| Basel
Feature Detection
![Page 20: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/20.jpg)
Conditional Comments
<!--[if IE]> This content is ignored in Internet Explorer 10 and other browsers. In older versions of Internet Explorer, this renders as part of the page. <![endif ]-->
![Page 21: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/21.jpg)
User Agent Sniffing
if (-1 != navigator.userAgent.indexOf("MSIE"))
{
document.write('NO SUPPORT');
}
else if (-1 != navigator.userAgent.indexOf("Firefox") || -1 != navigator.userAgent.indexOf("Chrome") || -1 != navigator.userAgent.indexOf("Safari")) {
}
else {
document.write('NO SUPPORT');
}
![Page 22: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/22.jpg)
Supports Canvas?
return !!document.createElement('canvas').getContext;
![Page 23: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/23.jpg)
Supports Video
return !!document.createElement('video').canPlayType;
![Page 24: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/24.jpg)
![Page 25: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/25.jpg)
Improved Intellisense
![Page 26: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/26.jpg)
COLOUR PICKER
![Page 27: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/27.jpg)
BROWSER SUPPORT
![Page 28: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/28.jpg)
Less
![Page 29: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/29.jpg)
LESS
![Page 30: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/30.jpg)
COMPLILES TO CSS
![Page 31: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/31.jpg)
Modernizr - http://modernizr.com
Detects features.
You can use a JS library.
Adds CSS classes to the HTML element of the document. So you can base CSS on the features of the browser.
Includes HTML5 shim
![Page 32: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/32.jpg)
Modernizr – JavaScript API
if (Modernizr.video){
// The browser supports HTML5 video
}
if (Modernizr.video.ogg == 'probably'){
// The browser has ogg format support
}
![Page 33: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/33.jpg)
Modernizr – CSS Classes
<html class=" js flexbox no-flexbox-legacy canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths" lang="en>
![Page 34: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/34.jpg)
| Basel
New Features
![Page 35: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/35.jpg)
Canvas
var supportsCanvas, canvasElement, canvasContext;supportsCanvas = !!document.createElement('canvas').getContext;if (supportsCanvas) {
canvasElement = document.getElementById(“flagCanvas");
canvasContext = canvasElement.getContext('2d');;
canvasContext.fillStyle = "rgba(255,0,0,1)";canvasContext.fillRect(0, 0,
canvasElement.clientWidth, canvasElement.clientHeight);canvasContext.fillStyle =
"rgba(255,255,255,1)";canvasContext.fillRect(267, 55, 125, 430);canvasContext.fillRect(118,205, 430, 125);
}
<canvas id=“flagCanvas" width="665" height="532"></canvas>
![Page 36: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/36.jpg)
ContreJour.ie
![Page 37: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/37.jpg)
New Canvas 2D Context APIs
• Image Smoothing – create new pixelated effects
• Dashed lines – drawing dashed lines
• Fill rules –allows developers to choose their fill rule
![Page 38: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/38.jpg)
DirectDraw Surface (DDS) Support
• Use hardware more efficiently
• Reduces your app load time Background images
87.5% less GPU memory usage
• Recommended for in-package assets
![Page 39: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/39.jpg)
Videos
<video poster="movie.jpg" controls><source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/><source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/><source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/><p>This is fallback content</p>
</video>
![Page 40: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/40.jpg)
http://ubelly.com/mobelly
CSS3 2D Transforms
![Page 41: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/41.jpg)
| Basel
Professional Quality Video
![Page 43: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/43.jpg)
Media Source Extension (MSE)
What is MSE?
• Specifies an HTML extension API that defines the implementation of adaptive streaming in the browser
Video
Elementsrc
Source
Buffer
Audio
Source
Buffer
Video
Media
SourceSource buffer
![Page 44: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/44.jpg)
Encrypted Media Extensions (EME)
What is EME?
• Specifies an HTML extension API that defines access to DRM implementations contained in the web platform
msneedkeyMSMedia
Keys
MediaKey
Session
Video
Element
![Page 45: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/45.jpg)
Fullscreen APIs
What is it?
• Web standard that enables HTML elements to take over the full screen window area.
![Page 46: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/46.jpg)
| Basel
Speech
![Page 47: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/47.jpg)
Agenda
Forms
![Page 48: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/48.jpg)
TechDays 13 Conference
13
<input type=number>
<input
type=search>
![Page 49: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/49.jpg)
SVG
<svg xmlns="http://www.w3.org/2000/svg"
width="1000" height="1000"
viewBox="0 0 32 32">
<rect fill="#f00" height="32" width="32" />
<rect fill="#fff" height="6" width="20" x="6"y="13" />
<rect fill="#fff" height="20" width="6" x="13"y="6" />
</svg>
![Page 50: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/50.jpg)
![Page 51: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/51.jpg)
| Basel
Other Specs
![Page 52: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/52.jpg)
Web Crypto API
What are Web Crypto APIs?
• Web standard that defines a JS API for performing basic cryptographic operations in a web application
• Most complete WebCrypto implementation on the web
![Page 53: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/53.jpg)
Algorithms Supported
Key Generation• AES-CBC• AES-GCM• HMAC (SHA-1, SHA-256, SHA-384)• RSAES-PKCS1-v1_5• RSASSA-PKCS1-v1_5• RSA-OAEPEncrypt/Decryption• AES-CBC• AES-GCM• RSAES-PKCS1-v1_5• RSA-OAEP
Wrap/Unwrap• AES-KW• RSA-OAEP• AES-GCMImport/Export Keys Formats• Raw• pkcs8• spki• jwk
![Page 54: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/54.jpg)
| Basel
WebSockets
![Page 55: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/55.jpg)
| Basel
WebWorkers
![Page 56: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/56.jpg)
Storage
AppCache
IndexedDb
LocalStorage
WebSQL
![Page 57: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/57.jpg)
Touch
![Page 58: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/58.jpg)
Agenda
Touching the web
![Page 59: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/59.jpg)
Agenda
Touch
Touch Events
Pointer Events (Mouse,
Touch, Pen)
Pointer.JS
http://smus.com/mouse-touch-pointer/
![Page 60: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/60.jpg)
Agenda
provide feedback
CSS3 animations
@keyframes upKeys {
from { transform:scale(0.95, 0.95) }
to { transform:scale(1, 1) }
}
@keyframes downKeys {
from { transform:scale(1, 1) }
to { transform:scale(0.95, 0.95) }
}
.up {
animation: upKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1);
animation-fill-mode: forwards;
}
.down {
animation: downKeys 167ms cubic-bezier(0.1, 0.9, 0.2, 1);
animation-fill-mode: forwards;
}
![Page 61: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/61.jpg)
![Page 62: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/62.jpg)
One in 30 taps
will miss the
target
1 in 100 1 in 200
0.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
3mm 5mm 7mm 9mm 11mm 13mm
% OF MISSED TAPS
![Page 63: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/63.jpg)
2mm padding (10 pixel) between targets
7x7mm = 40 pixels
5x5mm = 30 pixels
9x9mm = 50 pixels
2mm padding (10 pixels) between targets
2mm padding (10 pixels) between targets
when it just won’t fit
when accuracy matters
recommended minimum size
![Page 64: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/64.jpg)
| Basel
CSS3
![Page 65: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/65.jpg)
Media Querieshttp://mediaqueri.es/
![Page 66: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/66.jpg)
![Page 67: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/67.jpg)
![Page 68: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/68.jpg)
@-ms-viewport{width: device-width;
}
![Page 69: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/69.jpg)
CSS3 2D Transforms
![Page 70: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/70.jpg)
Agenda
![Page 71: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/71.jpg)
Agenda
2D-3D Transforms
rgb(167,14,61) rgb(167,14,61)
<style>body {
margin-top:100px;}h2 {
background-color: rgb(167,14,61);color:rgb(255,255,255);font-family:Arial;padding:10px 10px 10px 30px;margin:7px;margin-left:-30px;display:block;font-size:40px;
transform-origin: 0% 0%;transform: translate(0px, 0px) rotate(-13deg) scale(1);
}
h2:nth-child(1) {width:220px;
}h2:nth-child(2) {
width:150px;}
![Page 72: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/72.jpg)
![Page 73: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/73.jpg)
![Page 74: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/74.jpg)
![Page 75: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/75.jpg)
![Page 76: hidownload.microsoft.com/download/3/0/E/30E8E435-33D1-47B0... · 2018-10-13 · draganddrop websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow textshadow](https://reader034.vdocuments.net/reader034/viewer/2022042306/5ed29ead9c816a0c4332643c/html5/thumbnails/76.jpg)