Embed Size (px)
Citation preview
hi
| Basel
HTML5
a pragmatic guideMartin Beeby
Technical Evangelist
@thebeebs
Agenda
Agenda
What is HTML5 20’Browsers 5’
Standards Bodies 5’
Basics 5’
Features 30’HTML 10’
SVG 5’
JavaScript 8’
CSS3 7’
| Basel
Perfect Competition
Browsers
Internet Explorer
Founded in 1995
Version 11
Rendering Engine: Trident
Firefox
Founded in 2002
Version 25
Rendering Engine: Gecko, Working with Samsung on Servo.
Safari
Version 7
Rendering: Webkit
Opera
Founded 1994
Version 17
Rendering: Presto/Blink
Chrome
Founded 2008
Version 30
Rendering: Webkit/Blink
Differences
Various Features
Subtly Different implementations
Various Vendor Prefixes
-ms, -moz, -webkit, -o
Similarities
HTML5 Parser
<b><i>Hi</b></i>
More similar than ever before
| Basel
What is HTML5?
<!DOCTYPE HTML>
Agenda
A specification
http://www.w3.org/TR/html51/
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
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/
| Basel
Feature Detection
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 ]-->
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');
}
Supports Canvas?
return !!document.createElement('canvas').getContext;
Supports Video
return !!document.createElement('video').canPlayType;
Improved Intellisense
COLOUR PICKER
BROWSER SUPPORT
Less
LESS
COMPLILES TO CSS
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
Modernizr – JavaScript API
if (Modernizr.video){
// The browser supports HTML5 video
}
if (Modernizr.video.ogg == 'probably'){
// The browser has ogg format support
}
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>
| Basel
New Features
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>
ContreJour.ie
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
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
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>
http://ubelly.com/mobelly
CSS3 2D Transforms
| Basel
Professional Quality Video
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
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
Fullscreen APIs
What is it?
• Web standard that enables HTML elements to take over the full screen window area.
| Basel
Speech
Agenda
Forms
TechDays 13 Conference
13
<input type=number>
<input
type=search>
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>
| Basel
Other Specs
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
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
| Basel
WebSockets
| Basel
WebWorkers
Storage
AppCache
IndexedDb
LocalStorage
WebSQL
Touch
Agenda
Touching the web
Agenda
Touch
Touch Events
Pointer Events (Mouse,
Touch, Pen)
Pointer.JS
http://smus.com/mouse-touch-pointer/
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;
}
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
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
| Basel
CSS3
Media Querieshttp://mediaqueri.es/
@-ms-viewport{width: device-width;
}
CSS3 2D Transforms
Agenda
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;}
