Intro html5

50 %
50 %
Information about Intro html5

Published on July 23, 2014

Author: lukhachdem29

Source: slideshare.net

Introduction to HTML 5 Brad Neuberg Developer Programs, Google Wednesday, October 7, 2009

The Web Platform is AcceleratingUserExperience native web 1990 -- 2008 Q408 Q109 Q209 ... iPhone 2.2: Nov 22, 2008 canvas app cache database SVG Safari 4.0b: Feb 29, 2009 canvas video app cache database workers SVG HTML DOM CSS XHR Opera Labs: Mar 26, 2009 canvas video geolocation SVG Android 1.5: Apr 13, 2009 canvas geolocation app cache database workers Firefox 3.5b4: Apr 27, 2009 canvas video geolocation app cache database workers SVG Chrome 2.0: May 21, 2009 canvas video geolocation app cache database workers SVG Wednesday, October 7, 2009

And It’s Solving Key Developer ChallengesUserExperience native web HTML DOM CSS XHR SpeedLocationGraphics Storage 1990 -- 2008 Q408 Q109 Q209 ... Wednesday, October 7, 2009

More Developers 0 75 150 225 300 MonthlyContributorstoOSSBrowsers 2002 2003 2004 2005 2006 2007 2008 2009 webkit firefox 2.0-3.0 firefox 3.1+ chrome Wednesday, October 7, 2009

More Users 50 150 250 350 450 OSSBrowserUsers(M) 2005 2006 2007 2008 2009 Wednesday, October 7, 2009

More Speed 0 20 40 60 80 SunSpiderRunsPerMinute 2001 2003 2005 2007 Q108 Q208 Q308 Q408 Q109 100x improvement in JavaScript performance Wednesday, October 7, 2009

5>4 A More Powerful Web Wednesday, October 7, 2009

Cautionary Tales of Latent Lemonade xhr (1999) xml (1998) css (1996) AJAX (2004) Wednesday, October 7, 2009

HTML 5: A Chance to Do Things Differently Wednesday, October 7, 2009

canvas/SVG video geolocation app cache & database web workers Wednesday, October 7, 2009

0 0 width height Y x y X Until Recently, You Couldn’t Draw on the Web Wednesday, October 7, 2009

And Graphics Weren’t Very Interactive javascript:onClick(Draw()); Wednesday, October 7, 2009

The Usual Options Do This... VML Flash Silverlight Wednesday, October 7, 2009

... But canvas and SVG Are Intrinsic to the WebTransparentStack DOM Document Object Model (DOM) Specification Original: http://www.w3.org/TR/REC-DOM-Level-1/ Latest: http://www.w3.org/TR/DOM-Level-3-Core/ Contributors: Netscape, Sun, Microsoft, W3C, IBM, Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel Research, Arbortext Hypertext Markup Language (HTML) Original: http://tools.ietf.org/html/rfc1866 Latest: http://www.w3.org/TR/html5/ Contributors: T. Berners-Lee, D. Connolly, L. Masinter, MIT, W3C, AT&T, IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass, Adobe, Lotus, CWI, Reuters, JavaSoft, HP, GRIF, Sun, Opera, Mozilla, Google, Apple Hypertext Transfer Protocol (HTTP) Original: http://tools.ietf.org/html/rfc1945 Latest: http://tools.ietf.org/html/rfc2616 Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach HTTP HTML Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) • HTML-like tags for drawing 15 <!DOCTYPE html> <html> <body> <svg width="200" height="200"> </svg> </body> </html> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) 16 Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) 16 var rect = document.getElementById('myRect'); Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) 16 var rect = document.getElementById('myRect'); rect.style.fill = 'green'; Wednesday, October 7, 2009

Scalable Vector Graphics (SVG) 16 var rect = document.getElementById('myRect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); } Wednesday, October 7, 2009

Scalable Vector Graphics 17 Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); Wednesday, October 7, 2009

Canvas API • JavaScript API ("Scriptable Image Tag") 18 <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); Wednesday, October 7, 2009

canvas and SVG demos • Mozilla Download Center (FF) • First Person Gifter (FF) • Population Demo (FF) • Bespin (Safari) • German Election Atlas (Safari) Wednesday, October 7, 2009

When Canvas or SVG? 20 Wednesday, October 7, 2009

When Canvas or SVG? SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects 20 Wednesday, October 7, 2009

When Canvas or SVG? SVG -> High level –Import/Export –Easy UIs –Interactive –Medium Animation –Tree of objects 20 Canvas -> Low level –No mouse interaction –High Animation –JS Centric –More Bookkeeping –Pixels Wednesday, October 7, 2009

Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers HTML 5 Support Wednesday, October 7, 2009

http://tinyurl.com/mbw73x Wednesday, October 7, 2009

http://tinyurl.com/mbw73x Wednesday, October 7, 2009

Wednesday, October 7, 2009

videocanvas/SVG geolocation app cache & database web workers Wednesday, October 7, 2009

Video is Complicated, and Outside Your Control Wednesday, October 7, 2009

// HTML 5 makes <video> as easy as <img> Wednesday, October 7, 2009

Embedding Video 27 Wednesday, October 7, 2009

Embedding Video 27 <video src="http://example.com/myMovie.ogg" controls> Wednesday, October 7, 2009

Embedding Video 27 <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. Wednesday, October 7, 2009

Embedding Video 27 <video src="http://example.com/myMovie.ogg" controls> Your browser does not support the video element. </video> Wednesday, October 7, 2009

Multiple Files & Scripting 28 <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video> Wednesday, October 7, 2009

Multiple Files & Scripting 28 <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video> var v = document.getElementsByTagName("video")[0]; v.play(); Wednesday, October 7, 2009

<video> demos • Basic Player (FF 3.5) • YouTube (Safari 4) - View Source Wednesday, October 7, 2009

Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers HTML 5 Support Wednesday, October 7, 2009

geolocationcanvas/SVG video app cache & database web workers Wednesday, October 7, 2009

Life’s Better with Location CRM Social Ads Games Photos 75 ft 20 ft 500 ft 1.1 mi 2.1 mi Places 2.8 mi Wednesday, October 7, 2009

...And Browsers Are Now Location-Enabled Wednesday, October 7, 2009

// the geolocation api brings browser- based location to your apps Wednesday, October 7, 2009

Geolocation Sample 35 Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } Wednesday, October 7, 2009

Geolocation Sample 35 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } ); Wednesday, October 7, 2009

geolocation demos • Google Maps (FF 3.5) Wednesday, October 7, 2009

Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers HTML 5 Support (iPhone) Wednesday, October 7, 2009

app cache & database canvas/SVG video geolocation web workers Wednesday, October 7, 2009

Web Apps Need to Work Everywhere Wednesday, October 7, 2009

// database and app cache store user data and app resources locally Wednesday, October 7, 2009

app cache & database demos • Sticky Notes Demo (Safari 4) Wednesday, October 7, 2009

App Cache • List resources that you want to take offline 42 CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js Wednesday, October 7, 2009

App Cache • List resources that you want to take offline 42 CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js <body manifest="./cache.manifest"> </body> Wednesday, October 7, 2009

Database Wednesday, October 7, 2009

Database 44 Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); Wednesday, October 7, 2009

Database 44 var db = window.openDatabase("NoteTest", "1.0", "Example DB", 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); } Wednesday, October 7, 2009

Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers HTML 5 Support (mobile) (mobile) (iPhone) Wednesday, October 7, 2009

web workerscanvas/SVG video geolocation app cache & database Wednesday, October 7, 2009

A More Powerful Web == More Powerful Apps Wednesday, October 7, 2009

But More Power == More Responsibility I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript I will not hose the browser with JavaScript Wednesday, October 7, 2009

// web workers defines an API for running background scripts Wednesday, October 7, 2009

web workers demos • Bad Primes (FF 3.5) • Good Primes (FF 3.5) • Motion Tracker (FF) Wednesday, October 7, 2009

Web Workers 51 Wednesday, October 7, 2009

Web Workers 51 <script> Wednesday, October 7, 2009

Web Workers 51 <script> var worker = new Worker('worker.js'); Wednesday, October 7, 2009

Web Workers 51 <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { Wednesday, October 7, 2009

Web Workers 51 <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); Wednesday, October 7, 2009

Web Workers 51 <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; Wednesday, October 7, 2009

Web Workers 51 <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> Wednesday, October 7, 2009

worker.js 52 function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes(); Wednesday, October 7, 2009

Chrome Firefox Safari Opera canvas/SVG video geolocation app cache database workers HTML5 Support (iPhone) (mobile) (mobile) (mobile) Wednesday, October 7, 2009

Download Slides • http://codinginparadise.org/presentations/intro_html5.pdf 54 Wednesday, October 7, 2009

Introduction to HTML 5 Brad Neuberg Developer Programs, Google Wednesday, October 7, 2009

Add a comment

Related pages

HTML5 Introduction - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Intro to HTML5 and CSS3 - YouTube

Beginner video tutorials in HTML5 and CSS3 ... Sign in now to see your channels and recommendations!
Read more

html5.org — HTML revisited

html5.org. HTML5 is the latest version of HTML and XHTML. The HTML Standard defines a single language that can be written in HTML and XML.
Read more

Intro - Webkompetenz

Intro HTML5-Handbuch » Intro Was Sie von diesem Buch erwarten können. Wie HTML mit dem Gesamtkomplex „Erstellung ...
Read more

1 Introduction — HTML5 - World Wide Web Consortium (W3C)

HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014
Read more

Five Things You Should Know About HTML5 - Dive Into HTML5

You are here: Home Dive Into HTML5 Five Things You Should Know About HTML5 1. It’s not one big thing. You may well ask: “How can I start using HTML5 if ...
Read more

Introduction to HTML - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Flashintro.de | Internetseiten sofort zum Herrunterladen ...

Ihre erstklassige & günstige Quelle für qualitative Internetseiten, Html5, Flash und jQuery Templateseindrucksvolle Intros und Firmenpräsentationen.
Read more

Intro to Web : HTML5+CSS3+JavaScript - YouTube

Intro to Web : HTML5+CSS3+JavaScript by Adel Sabour; 39 videos; ... 29 HTML5) DOM Properties and Methods of Navigator, Screen ,History, ...
Read more

HTML5 Tutorial | HTML 5 Tutorial

HTML5 tutorial is a tutorial for beginners in plain Engish. Soon you'll be able to build a simple website and have a solid understanding of the basics of ...
Read more