Demystifying HTML5

DEMYSTIFYING

SERGEJUS BARINOVAS

ARCHITECT, ADFORM

AGENDA

• The history of HTML5

• What’s new in HTML5

• HTML5 vs. Silverlight & Flash

• Next steps

MY HTML5 BACKGROUND

• Interest in HTML5 for ~1 year

• HTML5 workshop in Las Vegas

• Advertising is dependent on Flash (doesn’t work with iOS devices)

DISCLAIMER

This is not about

THE HISTORY OF HTML5

HTML QUIZ

What language HTML is based on?

HTML QUIZ ANSWER

HTML5 QUIZ

What is HTML5?

HTML5 QUIZ ANSWER

• HTML (HTML5, SVG1.1)

• CSS (CSS3)

• JavaScript API

A BIT OF HISTORY

HTML XHTML

• 1998 XML 1.0

• 1999 HTML 4.01

• 2000 XHTML 1.0• Reformulate HTML in XML without

adding any new elements or attributes• First draft of XForms 1.0

XHTML – THE TRUTH

Who is developing XHTML web sites?

XHTML – THE TRUTH

You are (probably) lying!

XHTML – THE TRUTH

Everything you know about XHTML is wrong

XHTML – THE TRUTH

• HTML 4.01• HTML 4.01 DOCTYPE• MIME type – text/html• Browsers forgive malformed HTML

• XHTML 1.0• XHTML 1.0 DOCTYPE• MIME type – application/xhtml+xml• Browsers fail on the first error

(draconian error handling)

XHTML – THE TRUTH

XHTML – forget about existing (99%) web sites!

XHTML – THE TRUTH

Thousands of web developers upgraded to XHTML syntax and DOCTYPE but kept serving it with a text/html MIME type

XHTML – THE TRUTH

This is not an XHTML!

A-HA MOMENT

We need to move on supporting interop!

THE FUTURE OF HTML

June 2004, W3C Workshop An evolution of the existing HTML 4 standard to include

new features for modern web application developer

THE FUTURE OF HTML 7 PRINCIPLES

• Backwards compatibility, clear migration path

• Well-defined error handling

• Users should not be exposed to authoring errors

• Practical use

• Scripting is here to stay

• Device-specific profiling should be avoided

• Open process

THE FUTURE OF HTML THE POLL

Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM?

11 to 8 against

THE FUTURE OF HTML THE SPLIT

• W3C• XHTML 2.0

• WHAT Working Group• Documenting the forgiving error-handling

algorithms that browsers actually used• XForms 2.0• <canvas>• <audio> and <video>

THE FUTURE OF HTMLTHE REUNION

October 2006, Tim Berners-Leeannounced that the W3C would work together with the

WHAT Working Group to evolve HTML

THE FUTURE OF HTMLFIRST DRAFT

January 2008, HTML5 DraftThe first time ever all 5 major browser

vendors collaborate together

THE FUTURE OF HTMLCURRENT SITUATION

First Public Working Draft

Working Draft

Candidate Recommend

Proposed Recommend

Recommendation

Last callCall to implement

WHAT’S NEW IN HTML5

JAVASCRIPT API

WHAT’S NEW – JAVASCRIPT API

• New Selectors

• Web Workers*

• Web Sockets*

• Web Storage

• Offline Apps*

• Geolocation

WHAT’S NEW – JS APINEW SELECTORS

• DOM APIvar els = document.getElementsByClassName('section');

els[0].focus();

• Selector APIvar els = document.querySelectorAll('ul li:nth-child(odd)');

WHAT’S NEW – JS APIWEB WORKERS

• Independent JavaScript threadingmain.js:

var worker = new Worker('increment.js');

worker.postMessage(2);

worker.onmessage = function(event) { alert(event.data); };

increment.js:

self.onmessage = function(event) {

var result = event.data + 1;

self.postMessage(result);

WHAT’S NEW – JS APIWEB SOCKETS

• Bi-directional full-duplex communicationvar socket = new WebSocket(location);

socket.onopen = function(event) {

socket.postMessage('Hello, WebSocket');

socket.onmessage = function(event) { alert(event.data); }

socket.onclose = function(event) { alert('closed'); }

WHAT’S NEW – JS APIWEB STORAGE

• Local Storagevar item = document.localStorage.setItem('key','value');

• Session Storagevar item = document.sessionStorage.getItem('value');

• IndexedDBvar db = indexedDB.open('books', 'Books');

db.createIndex('BookTitle', 'books', 'title');

var index = db.index('BookTitle');

var result = index.get('HTML5');

WHAT’S NEW – JS APIOFFLINE APPS

• Application Cache<html manifest="offline.manifest">

CACHE MANIFEST

styles.css

jquery-1.4.min.js

index.html

• Offline / Online Eventswindow.addEventListener("online",function() {alert('on')});

window.addEventListener("offline",function() {alert('off')});

WHAT’S NEW – JS APIGEOLOCATION

• Geolocation APIif (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(pos) {

var lat = position.coords.latitude;

var lng = position.coords.longitude;

alert(lat + ':' + lng);

WHAT’S NEW – CSS3

• Selectors

• Border Radius

• Backgrounds

• Color & Opacity

• Shadows

• 2D Transforms

• WOFF Fonts

WHAT’S NEW – CSS3SELECTORS

• Selectors.row:nth-child(even) { background: #dde; }

• Specific attributesinput[type="text"] {background: #eee; }

• Negation:not(span) { display: block; }

• Selection::selection { background: #c00; }

WHAT’S NEW – CSS3BORDER RADIUS

border-radius: 20px 10px;

border-top-left-radius: 20px 10px;

border-top-right-radius: 10px 25px;

border-bottom-right-radius: 5px 10px;

border-bottom-left-radius: 15px 25px;

WHAT’S NEW – CSS3BACKGROUNDS

• Multiple backgroundsdiv {

background-image: url(bg1.png), url(bg2.png);

background-position: center center, 20% 80%, top left;

• SVG in CSS backgroundsbody { background-image: url("marble.svg") }

WHAT’S NEW – CSS3COLOR & OPACITY

• RGB / RGBAdiv.demo1 { background: rgba(60, 80, 100, 0.25); }

• HSL / HSLAdiv.demo2 { background: hsla(320, 100%, 25%, 0.4); }

• Opacitydiv.demo3 { background:#036; opacity:0.2; }

WHAT’S NEW – CSS3SHADOWS

• Box Shadowdiv { box-shadow: 5px 5px 7px #888; }

• Text Shadowspan { text-shadow: 2px 2px 7px #111; }

WHAT’S NEW – CSS32D TRANSFORMS

transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);

transform-origin: 0% 0%;

WHAT’S NEW – CSS3WOFF FONTS

• Font Linking@font-face {

font-family: Whimsy;

src: url('fonts/Whimsy.woff');

WHAT’S NEW – HTML5SIMPLER MARKUP

HTML5 is simpler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Sergejus apie .NET</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!doctype html>

<head>

<!doctype html>

<html>

<head>

<!doctype html>

<html>

<head>

<!doctype html>

<html>

<head>

WHAT’S NEW – HTML5ELEMENTS

HTML5 is more semantic

• <section>

• <nav>

• <article>

• <header>

• <footer>

• <aside>

• <figure>

• and more…

WHAT’S NEW – HTML5WEB FORMS 2.0

HTML5 is for Web Apps

WHAT’S NEW – HTML5WEB FORMS 2.0• <input type="text" required autofocus />

• <input type="email" value="some@email.com" />

• <input type="date" min="2009-11-22" max="2011-11-22" value="2010-11-22"/>

• <input type="range" min="0" max="50" value="10" />

• <input type="search" results="10" placeholder="Search..." />

• <input type="tel" placeholder="(370) 678-00000" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{5}.*?$" />

• <input type="color" placeholder="e.g. #bbbbbb" />

• <input type="number" step="1" min="-5" max="10" value="0" />

WHAT’S NEW – HTML5AUDIO/VIDEO

HTML5 is richer

• Audio<audio id="audio" src="sound.mp3" controls />

document.getElementById("audio").muted = false;

• Video<video id="video" src="movie.webm" autoplay controls />

document.getElementById("video").play();

• Container / Video + Audio Codecs

• MP4 / H.264 + AAC• Ogg / Theora + Vorbis• WebM

No Single

Combination YET

WHAT’S NEW – HTML5CANVAS

• Simple Shapes

• Paths

• Text

• Gradients

• Images

WHAT’S NEW – HTML5CANVAS<canvas id="canvas" width="838" height="220" />

var canvasContext = document.getElementById("canvas")

.getContext("2d");

canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();

canvasContext.arc(450, 110, 100, Math.PI*1/2, Math.PI*3/2);

canvasContext.lineWidth = 15;

canvasContext.lineCap = 'round';

canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';

canvasContext.stroke();

</script>

WHAT’S NEW – HTML5SVG<svg xmlns="http://www.w3.org/2000/svg">

circle:hover {fill-opacity:0.9;}

</style>

<circle cx="6cm" cy="2cm" r="100" style="fill:red; stroke:black;

stroke-width:0.1cm" transform="translate(0,50)" />

<circle cx="6cm" cy="2cm" r="100" style="fill:blue; stroke:black;

stroke-width:0.1cm" transform="translate(70,150)" />

<circle cx="6cm" cy="2cm" r="100" style="fill:green; stroke:black;

stroke-width:0.1cm" transform="translate(-70,150)"/>

</svg>

HTML5 VS. FLASH & SILVERLIGHT

HTML5 is the future of Open Web

HTML5 is not ready

for main stream yet

HTML5 DRAWBACKS

• Draft version of specification

• No standardized audio / video containers and codecs

• Poor video / graphics performance

• Lack of professional HTML5 tools

• Flash & Silverlight will stay for• Enhanced video streaming• Digital rights management (DRM)• Complex RIAs

ADOBE AND HTML5

• Working hard on HTML5 support• HTML5 video player with fallback to Flash• Export images as SVG and Canvas from

Illustrator and Photoshop• Convert Flash to HTML5

MICROSOFT AND HTML5

• Big focus on HTML5 and standards• HTML5 is the only true cross platform solution

for everything, including (Apple’s) iOS platform.Bob Muglia, PDC2010

• Silverlight remains top platform for• Mobile• Desktop applications• Video / audio streaming

NEXT STEPS

HTML5 is notall or nothing

NEXT STEPS

HTML5 is foward compatible!

NEXT STEPS

You can start using it right now!

NEXT STEPS

• Read http://diveintohtml5.org

• Modernizr.js – detects HTML5 support

• ASP.NET MVC HTML5 helpers

• Leverage <video> with fallback to Silverlight or Flash

• Leverage <canvas> and <svg> with fallback to image

NEXT STEPS

Have fun and be creative!

THANKS!

sergejus.blogas.lt, @sergejusb

Demystifying HTML5

Technology

HTML5 vs. Native Apps: Demystifying the Decision Making Process

Demystifying Chinese Investment in Australia - April 2016demystifyingchina.com.au/reports/demystifying-chinese-investment... · Demystifying Chinese Investment in Australia | April

Demystifying Annuities

Demystifying Ontologies

Demystifying SCORM

Demystifying Warden

[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support

Demystifying EVM

Demystifying PostgreSQL

Demystifying HTML5 - Tizen

Demystifying Lucifer

Demystifying Dyslexia - resources4sped.pbworks.comresources4sped.pbworks.com/f/Demystifying+Dyslexia.pdf · Demystifying Dyslexia By Sarah Johnson Inclusion Specialist Moseley Elementary

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

Demystifying HTML5 - Tizen · Demystifying HTML5 Basics W3C and WhatWG What’s new Distributing HTML5 Applications Intel AppUp Encapsulator WebKit Hybrid Applications Talk is cheap,

Demystifying SPB

Demystifying Prototypes

Demystifying Patents

“HTML5”: more than just HTML5

Html5 viewer HTML5 office kukudocs

Demystifying Molar Endodontics Revisitedimu.edu.my/.../uploads/Demystifying-Molar-Endodontics-Revisited.pdf · Demystifying Molar Endodontics Revisited “ Amazing course in microscopic