Introduction to HTML 5. Brad Neuberg Developer Programs, Google
|
|
|
- Miranda Carpenter
- 6 years ago
- Views:
Transcription
1 Introduction to HTML 5 Brad Neuberg Developer Programs, Google
2 The Web Platform is Accelerating User Experience XHR CSS DOM HTML iphone 2.2: Nov 22, 2008 canvas app cache database SVG Safari 4.0b: Feb 29, 2009 canvas video app cache database workers SVG 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 native web Q408 Q109 Q209...
3 And It s Solving Key Developer Challenges User Experience Graphics Location Storage Speed XHR CSS DOM HTML native web Q408 Q109 Q209...
4 More Developers Monthly Contributors to OSS Browsers chrome firefox 3.1+ firefox webkit
5 More Users 450 OSS Browser Users (M)
6 More Speed 80 SunSpider Runs Per Minute x improvement in JavaScript performance Q108 Q208 Q308 Q408 Q109
7 A More Powerful Web 5>4
8 Cautionary Tales of Latent Lemonade AJAX (2004) xml (1998) css (1996) xhr (1999)
9 HTML 5: A Chance to Do Things Differently
10 canvas/svg video geolocation app cache & database web workers
11 Until Recently, You Couldn t Draw on the Web 0 0 X y x height Y width
12 And Graphics Weren t Very Interactive javascript:onclick(draw());
13 The Usual Options Do This... VML Flash Silverlight
14 ... But canvas and SVG Are Intrinsic to the Web DOM Document Object Model (DOM) Specification Original: Latest: Contributors: Netscape, Sun, Microsoft, W3C, IBM, Novell, JavaSoft, SoftQuad Inc., Inso EPS, Texcel Research, Arbortext Transparent Stack HTML Hypertext Markup Language (HTML) Original: Latest: 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 HTTP Hypertext Transfer Protocol (HTTP) Original: Latest: Contributors: UC Urvine, Compaq, MIT, Xerox, Microsoft, W3C, T. Berners-Lee, R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach
15 Scalable Vector Graphics (SVG) HTML-like tags for drawing 15
16 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect 15
17 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" 15
18 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" 15
19 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" 15
20 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" 15
21 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" 15
22 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myrect" class="chart" /> 15
23 Scalable Vector Graphics (SVG) HTML-like tags for drawing <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myrect" class="chart" /> 15
24 Scalable Vector Graphics (SVG) HTML-like tags for drawing 15 <!DOCTYPE html> <html> <body> <svg width="200" height="200"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" </svg> </body> </html> id="myrect" class="chart" />
25 Scalable Vector Graphics (SVG) 16
26 Scalable Vector Graphics (SVG) var rect = document.getelementbyid('myrect'); 16
27 Scalable Vector Graphics (SVG) var rect = document.getelementbyid('myrect'); rect.style.fill = 'green'; 16
28 Scalable Vector Graphics (SVG) var rect = document.getelementbyid('myrect'); rect.style.fill = 'green'; rect.onclick = function() { alert('hello'); } 16
29 Scalable Vector Graphics 17
30 Canvas API JavaScript API ("Scriptable Image Tag") 18
31 Canvas API JavaScript API ("Scriptable Image Tag") <canvas id="mycanvas" width="150" height="150"> </canvas> 18
32 Canvas API JavaScript API ("Scriptable Image Tag") <canvas id="mycanvas" width="150" height="150"> </canvas> var canvas = document.getelementbyid('mycanvas'); 18
33 Canvas API JavaScript API ("Scriptable Image Tag") <canvas id="mycanvas" width="150" height="150"> </canvas> var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); 18
34 Canvas API JavaScript API ("Scriptable Image Tag") <canvas id="mycanvas" width="150" height="150"> </canvas> var canvas = document.getelementbyid('mycanvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "rgb(200,0,0)"; 18
35 Canvas API JavaScript API ("Scriptable Image Tag") <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); 18
36 Canvas API JavaScript API ("Scriptable Image Tag") <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)"; 18
37 Canvas API JavaScript API ("Scriptable Image Tag") <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); 18
38 Canvas API JavaScript API ("Scriptable Image Tag") <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); 18
39 Mozilla Download Center (FF) First Person Gifter (FF) Population Demo (FF) Bespin (Safari) German Election Atlas (Safari) canvas and SVG demos
40 When Canvas or SVG? 20
41 When Canvas or SVG? SVG -> High level Import/Export Easy UIs Interactive Medium Animation Tree of objects 20
42 When Canvas or SVG? SVG -> High level Import/Export Easy UIs Interactive Medium Animation Tree of objects Canvas -> Low level No mouse interaction High Animation JS Centric More Bookkeeping Pixels 20
43 HTML 5 Support Chrome Firefox Safari Opera canvas/svg video geolocation app cache database workers
44
45
46
47 canvas/svg video geolocation app cache & database web workers
48 Video is Complicated, and Outside Your Control
49 // HTML 5 makes <video> as easy as <img>
50 Embedding Video 27
51 Embedding Video <video src=" controls> 27
52 Embedding Video <video src=" controls> Your browser does not support the video element. 27
53 Embedding Video <video src=" controls> Your browser does not support the video element. </video> 27
54 Multiple Files & Scripting <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video> 28
55 Multiple Files & Scripting <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(); 28
56 Basic Player (FF 3.5) YouTube (Safari 4) - View Source <video> demos
57 HTML 5 Support Chrome Firefox Safari Opera canvas/svg video geolocation app cache database workers
58 canvas/svg video geolocation app cache & database web workers
59 Life s Better with Location 2.8 mi Places CRM Social Ads Games Photos 500 ft 2.1 mi 1.1 mi 20 ft 75 ft
60 ...And Browsers Are Now Location-Enabled
61 // the geolocation api brings browserbased location to your apps
62 Geolocation Sample 35
63 Geolocation Sample navigator.geolocation.getcurrentposition( 35
64 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { 35
65 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; 35
66 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; 35
67 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showlocation(lat, lon); 35
68 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showlocation(lat, lon); } 35
69 Geolocation Sample navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showlocation(lat, lon); } ); 35
70 Google Maps (FF 3.5) geolocation demos
71 HTML 5 Support Chrome Firefox Safari Opera canvas/svg video geolocation (iphone) app cache database workers
72 canvas/svg video geolocation app cache & web workers database
73 Web Apps Need to Work Everywhere
74 // database and app cache store user data and app resources locally
75 Sticky Notes Demo (Safari 4) app cache & database demos
76 App Cache List resources that you want to take offline CACHE MANIFEST /static/stickies.html /media/deletebutton.png /media/deletebuttonpressed.png /css/stickies.css /js/stickies.js 42
77 App Cache List resources that you want to take offline CACHE MANIFEST /static/stickies.html /media/deletebutton.png /media/deletebuttonpressed.png /css/stickies.css /js/stickies.js <body manifest="./cache.manifest"> </body> 42
78 Database
79 Database 44
80 Database var db = window.opendatabase("notetest", "1.0", 44
81 Database var db = window.opendatabase("notetest", "1.0", "Example DB", 44
82 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); 44
83 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { 44
84 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( 44
85 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( function (tx) { 44
86 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( function (tx) { tx.executesql( 44
87 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( function (tx) { tx.executesql( "INSERT INTO WebKitStickyNotes " 44
88 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( function (tx) { tx.executesql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " 44
89 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); function saveme(id, text, timestamp, left, top, zindex) { db.transaction( function (tx) { tx.executesql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?,?,?,?,?,?)", 44
90 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); 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]); 44
91 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); 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]); } 44
92 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); 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]); } ); 44
93 Database var db = window.opendatabase("notetest", "1.0", "Example DB", ); 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]); } ); } 44
94 HTML 5 Support Chrome Firefox Safari Opera canvas/svg video geolocation (iphone) app cache (mobile) database (mobile) workers
95 canvas/svg video geolocation app cache & database web workers
96 A More Powerful Web == More Powerful Apps
97 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
98 // web workers defines an API for running background scripts
99 Bad Primes (FF 3.5) Good Primes (FF 3.5) Motion Tracker (FF) web workers demos
100 Web Workers 51
101 Web Workers <script> 51
102 Web Workers <script> var worker = new Worker('worker.js'); 51
103 Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { 51
104 Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('results: ' + event.data); 51
105 Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('results: ' + event.data); }; 51
106 Web Workers <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('results: ' + event.data); }; </script> 51
107 worker.js function findprimes() { //... prime algorithm here postmessage(nextprime); } findprimes(); 52
108 HTML5 Support Chrome Firefox Safari Opera canvas/svg video geolocation (iphone) app cache (mobile) database (mobile) workers (mobile)
109 Download Slides 54
110 Introduction to HTML 5 Brad Neuberg Developer Programs, Google
State of the Open Web. Brad Neuberg, Google
State of the Open Web Brad Neuberg, Google http://flickr.com/photos/jamespaullong/164875156/ Who is this guy? Ajax Image CC: jopemoro/flickr Who is this guy? Ajax Image CC: jopemoro/flickr Ajax Who is
Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...)
Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Helder da Rocha Independent Java & Web professional Argo Navis Informatica Ltda. São Paulo, Brazil helder@argonavis.com.br
HTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.
HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing
Fundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1 The birth of HTML HTML Blows and standardization -3- -4-2 HTML 4.0
COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012
HTML5 MOCK TEST HTML5 MOCK TEST I
http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your
Chapter 13 HTML5 Functions
Sungkyunkwan University Chapter 13 HTML5 Functions Prepared by H. Ahn and H. Choo Web Programming Copyright 2000-2012 Networking Laboratory Copyright 2000-2018 Networking Laboratory Networking Laboratory
HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library
HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions
Sam Weinig Safari and WebKit Engineer. Chris Marrin Safari and WebKit Engineer
Sam Weinig Safari and WebKit Engineer Chris Marrin Safari and WebKit Engineer 2 3 4 5 Simple presentation of complex data 6 Graphs can be interactive California County: San Francisco Population: 845,559
COPYRIGHTED MATERIAL. Defining HTML5. Lesson 1
Lesson 1 Defining HTML5 What you ll learn in this lesson: Needs fulfilled by HTML5 The scope of HTML5 An overview of HTML5 Syntax An overview of HTML5 APIs and supporting technologies In this lesson, you
IGME-330. Rich Media Web Application Development I Week 1
IGME-330 Rich Media Web Application Development I Week 1 Developing Rich Media Apps Today s topics Tools we ll use what s the IDE we ll be using? (hint: none) This class is about Rich Media we ll need
Top Trends in elearning. September 15 & 16, Is HTML5 Ready for elearning? Debbie Richards, Creative Interactive Ideas
Top Trends in elearning September 15 & 16, 2011 501 Is HTML5 Ready for elearning? Is HTML5 Ready for elearning? Polls 1 and 3 2 Session 501 Is HTML5 Ready for elearning? Page 1 What s Covered in This Session?
Leveraging the HTML5 Canvas/Javascript for web and mobile maps with CartoVista
Leveraging the HTML5 Canvas/Javascript for web and mobile maps with CartoVista Dany Bouchard, DBx GEOMATICS inc. ABSTRACT. Developing cross-browser mapping applications is a challenge that requires good
Course 20480: Programming in HTML5 with JavaScript and CSS3
Course 20480: Programming in HTML5 with JavaScript and CSS3 Overview About this course This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript
COURSE 20480B: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
ABOUT THIS COURSE This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into
Programming in HTML5 with JavaScript and CSS3
Programming in HTML5 with JavaScript and CSS3 20480B; 5 days, Instructor-led Course Description This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic
footer, header, nav, section. search. ! Better Accessibility.! Cleaner Code. ! Smarter Storage.! Better Interactions.
By Sruthi!!!! HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. The current version
City of Mobile GIS Web Mapping Applications: New Technology, New Expectations
City of Mobile GIS Web Mapping Applications: New Technology, New Expectations Presenters : Scott Kearney GIS Manager Patricia Creamer GIS Analyst Background: GIS Department Developing web mapping apps
ShowNTell - An easy-to-use tool for answering students questions with voiceover
+ ShowNTell - An easy-to-use tool for answering students questions with voiceover recording Dr BHOJAN ANAND LIFT & TEG Grant: Start date: June 2014 End date: Dec 2015 + ShowNTell Problem Statement & Motivation
HTML5 HTML & Fut ure o Web M edi dia Streami a est Work h op, ov 2010 Michael Dale Zohar Babin eve oper o Dev R l e t a i tions & C
HTML5 &F Future of fweb bmedia Streaming Media West Workshop, Nov. 2010 Michael Dale Zohar Babin Senior Developer Head of Dev Relations & Community michael.dale@kaltura.com zohar.babin@kaltura.com @michael_dale
WebKit ; FOR : DUMMIES. by Chris Minnick WILEY. John Wiley & Sons, Inc.
WebKit ; FOR : DUMMIES by Chris Minnick WILEY John Wiley & Sons, Inc. Table of Contents Introduction 7 Why I Love WebKit, and You Should Too 1 Who Should Read This Book 2 Conventions Used in This Book
WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.
About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction
Web Development 20480: Programming in HTML5 with JavaScript and CSS3. Upcoming Dates. Course Description. Course Outline
Web Development 20480: Programming in HTML5 with JavaScript and CSS3 Learn how to code fully functional web sites from the ground up using best practices and web standards with or without an IDE! This
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
Next... Next... Handling the past What s next - standards and browsers What s next - applications and technology
Next... Handling the past What s next - standards and browsers What s next - applications and technology Next... Handling the past What s next - standards and browsers What s next - applications and technology
Improving Yioop! User Search Data Usage
Improving Yioop! User Search Data Usage A Writing Report Presented to The Faculty of the Department of Computer Science San José State University In Partial Fulfillment of the Requirements for the Degree
Programming in HTML5 with JavaScript and CSS3
20480 - Programming in HTML5 with JavaScript and CSS3 Duration: 5 days Course Price: $2,975 Software Assurance Eligible Course Description Course Overview This training course provides an introduction
Qiufeng Zhu Advanced User Interface Spring 2017
Qiufeng Zhu Advanced User Interface Spring 2017 Brief history of the Web Topics: HTML 5 JavaScript Libraries and frameworks 3D Web Application: WebGL Brief History Phase 1 Pages, formstructured documents
Varargs Training & Software Development Centre Private Limited, Module: HTML5, CSS3 & JavaScript
PHP Curriculum Module: HTML5, CSS3 & JavaScript Introduction to the Web o Explain the evolution of HTML o Explain the page structure used by HTML o List the drawbacks in HTML 4 and XHTML o List the new
Visual HTML5. Human Information Interaction for Knowledge Extraction, Interaction, Utilization, Decision making HI-I-KEIUD
Visual HTML5 1 Overview HTML5 Building apps with HTML5 Visual HTML5 Canvas SVG Scalable Vector Graphics WebGL 2D + 3D libraries 2 HTML5 HTML5 to Mobile + Cloud = Java to desktop computing: cross-platform
What is HTML5? The previous version of HTML came in The web has changed a lot since then.
What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However,
Web Design. Basic Concepts
Web Design Basic Concepts Web Design Web Design: Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web. Web sites may be relatively simple, or highly
20480B - Version: 1. Programming in HTML5 with JavaScript and CSS3
20480B - Version: 1 Programming in HTML5 with JavaScript and CSS3 Programming in HTML5 with JavaScript and CSS3 20480B - Version: 1 5 days Course Description: This course provides an introduction to HTML5,
Content Visualization Issues
Name Sanobar Nishat (113052001) MTP : Implementation Issues of Visualization on Small screen devices Report: Summary Report 4 (week 4) Date: 4 Feb 13 Summary: Graphical data visualization is used to display
Web browser architecture
Web browser architecture Web Oriented Technologies and Systems Master s Degree Course in Computer Engineering - (A.Y. 2017/2018) What is a web browser? A web browser is a program that retrieves documents
Scalable Vector Graphics (SVG) vector image World Wide Web Consortium (W3C) defined with XML searched indexed scripted compressed Mozilla Firefox
SVG SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for twodimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed
Beyond Cookies: Persistent Storage for Web Applications. Brad Neuberg Google
Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google What? What? 4K What? 4K 100K What? 4K 100K 500K What? 4K 100K 500K >1 MB What? Name/Value Storage Database Static Files Why?
20480B: Programming in HTML5 with JavaScript and CSS3
20480B: Programming in HTML5 with JavaScript and CSS3 Course Details Course Code: Duration: Notes: 20480B 5 days This course syllabus should be used to determine whether the course is appropriate for the
Publishing Technology 101 A Journal Publishing Primer. Mike Hepp Director, Technology Strategy Dartmouth Journal Services
Publishing Technology 101 A Journal Publishing Primer Mike Hepp Director, Technology Strategy Dartmouth Journal Services mike.hepp@sheridan.com Publishing Technology 101 AGENDA 12 3 EVOLUTION OF PUBLISHING
WebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01
Announcements Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2012 Homework 5 due Monday, 04/16 In-class quiz Wednesday, 04/18 Final on Tuesday, 05/01 6-8pm David Rittenhouse Lab A7 Networking
Software Platforms. Quiz with Explainations. Hans-Petter Halvorsen, M.Sc.
Software Platforms Quiz with Explainations Hans-Petter Halvorsen, M.Sc. Questions 1. List 3 different software platforms with some examples for each 2. List 5 different Web Browsers and the name of the
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The
Lesson 5: Multimedia on the Web
Lesson 5: Multimedia on the Web Learning Targets I can: Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss
Firefox 4 for Mobile Reviewer s Guide. Contact us:
Reviewer s Guide Contact us: press@mozilla.com TABLE OF Contents About Mozilla 1 Get Started 2 Type Less, Browse More 3 Get Up and Go 4 Customize and Go 6 Favorite Features 7 The Cutting Edge 8 about Mozilla
Microsoft Programming in HTML5 with JavaScript and CSS3
1800 ULEARN (853 276) www.ddls.com.au Microsoft 20480 - Programming in HTML5 with JavaScript and CSS3 Length 5 days Price $4510.00 (inc GST) Version B Overview This course provides an introduction to HTML5,
Programming in HTML5 with JavaScript and CSS3
Programming in HTML5 with JavaScript and CSS3 Código del curso: 20480 Duración: 5 días Acerca de este curso This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students
the web as it should be Martin Beeby
the web as it should be Martin Beeby - @thebeebs paving the way to the end user Hotbed of innovation World of standards Ever-closer user experiences in the beginning mosaic netscape navigator internet
Scripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents
![Scripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents](/thumbs/81/84719184.jpg "Scripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents")
Contents Scripting Contents Web Architecture and Information Management [./] Spring 2009 INFO 190-02 (CCN 42509) Erik Wilde, UC Berkeley School of Information [http://creativecommons.org/licenses/by/3.0/]
Building mobile app using Cordova and AngularJS, common practices. Goran Kopevski
Building mobile app using Cordova and AngularJS, common practices Goran Kopevski Agenda What is cordova? How to choose proper JS framework Building mobile app using Cordova and AngularJS Common fails,
HTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries
HTML5 and Mobile: New Markup & Styles for the Mobile Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview Demos View some code bits New Features and Functions
Visualizing Information with
Visualizing Information with HTML5 @synodinos 35,000 years ago Chauvet cave, southern France By far the oldest paintings ever discovered Hundreds of paintings At least 13 different species Viubk source
The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.
Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led
GRITS AJAX & GWT. Trey Roby. GRITS 5/14/09 Roby - 1
AJAX & GWT Trey Roby GRITS 5/14/09 Roby - 1 1 Change The Web is Changing Things we never imagined Central to people s lives Great Opportunity GRITS 5/14/09 Roby - 2 2 A Very Brief History of Computing
8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Helper Applications & Plug-Ins
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 11 Web Multimedia and Interactivity Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
Internet programming Lab. Lecturer Mariam A. Salih
Internet programming Lab. Lecturer Mariam A. Salih The Internet : The Internet is a worldwide network of computer systems through which information can be easily shared. Browsers : To view information
Table of Contents WWW. WWW history (2) WWW history (1) WWW history. Basic concepts. World Wide Web Aka The Internet. Client side.
Table of Contents WWW World Wide Web Aka The Internet Karst Koymans Informatics Institute University of Amsterdam (version 44, 2014/10/06 11:35:56 UTC) Tuesday, October 7, 2014 WWW history Basic concepts
It's a cross-platform vector graphics package written in JavaScript. Frequently referenced as dojox.gfx or dojo.gfx. Supported backends:
What is DojoX GFX? It's a cross-platform vector graphics package written in JavaScript. Frequently referenced as dojox.gfx or dojo.gfx. Supported backends: SVG (FF, Opera, Webkit/Safari 3 beta). VML (IE6,
Web Development & Design Foundations with HTML5, 8 th Edition Instructor Materials Chapter 11 Test Bank
Multiple Choice. Choose the best answer. 1. Java can be described as: a. a more sophisticated form of JavaScript b. an object-oriented programming language c. a language created by Netscape 2. JavaScript
/
HTML5 Audio & Video HTML5 introduced the element to include audio files in your pages. The element has a number of attributes which allow you to control audio playback: src This
mgwt Cross platform development with Java
mgwt Cross platform development with Java Katharina Fahnenbruck Consultant & Trainer! www.m-gwt.com Motivation Going native Good performance Going native Good performance Device features Going native Good
Mobile Web Appplications Development with HTML5
Mobile Web Appplications Development with HTML5 Lab 1: The Challenge Claudio Riva Aalto University - Fall 2012 1 / 36 THE CHALLENGE OVERVIEW OF THE ASSIGNMENT WAY OF WORKING TEAMS DEVEVELOPMENT ENVIRONMENT
Khronos and the Mobile Ecosystem
Copyright Khronos Group, 2011 - Page 1 Khronos and the Mobile Ecosystem Neil Trevett VP Mobile Content, NVIDIA President, Khronos Copyright Khronos Group, 2011 - Page 2 Topics It s not just about individual
Firefox for Android. Reviewer s Guide. Contact us:
Reviewer s Guide Contact us: press@mozilla.com Table of Contents About Mozilla 1 Move at the Speed of the Web 2 Get Started 3 Mobile Browsing Upgrade 4 Get Up and Go 6 Customize On the Go 7 Privacy and
WHAT IS WEBKIT? COPYRIGHTED MATERIAL SMASHING WEBKIT CHAPTER 1
1 WHAT IS WEBKIT? WEBKIT IS AN open-source rendering engine designed to display web pages. It powers Google Chrome and Safari as well as a variety of mobile devices such as iphone, ipad, and Android phones
Learn HTML5 in 5 Minutes!
Learn HTML5 in 5 Minutes! By Jennifer Marsman There s no question, HTML5 is a hot topic for developers. If you need a crash course to quickly understand the fundamentals of HTML5 s functionality, you re
DYNAMIC MATHEMATICS WITH GEONExT: NEW CONCEPTS
4 th European Workshop on Mathematical & Scientific e-contents 11-13 September, Trondheim, Norway Alfred Wassermann, Matthias Ehmann, Carsten Miller Mathematics and Mathematical Education University of
,
Weekdays:- 1½ hrs / 3 days Fastrack:- 1½hrs / Day [Class Room and Online] ISO 9001:2015 CERTIFIED ADMEC Multimedia Institute www.admecindia.co.in 9911782350, 9811818122 Welcome to one of the highly professional
Perceptive Enterprise Search
Perceptive Enterprise Search Technical Specifications Version: 10.4 Written by: Product Knowledge, R&D Date: September 2016 2015 Lexmark International Technology, S.A. All rights reserved. Lexmark is a
HTML5 for Java Developers. Sang Shin Founder and Chief Instructor JPassion.com
HTML5 for Java Developers Sang Shin sang.shin@jpassion.com Founder and Chief Instructor JPassion.com A few words before we start This is 1-hour version of 3-day HTML5 codecamp :-) You can get the codecamp
Developing Ajax Web Apps with GWT. Session I
Developing Ajax Web Apps with GWT Session I Contents Introduction Traditional Web RIAs Emergence of Ajax Ajax ( GWT ) Google Web Toolkit Installing and Setting up GWT in Eclipse The Project Structure Running
Some businesses have changed in a major way because of new technology
Some businesses have changed in a major way because of new technology Take Uber or Kareem for example. These are some of the largest taxi companies in the world, yet the company itself does not own a single
Master Project Software Engineering: Team-based Development WS 2010/11
Master Project Software Engineering: Team-based Development WS 2010/11 Implementation, September 27 th, 2011 Glib Kupetov Glib.Kupetov@iese.fraunhofer.de Tel.: +49 (631) 6800 2128 Sebastian Weber Sebastian.Weber@iese.fraunhofer.de
Enterprise Search. Technical Specifications. Version: 11.0.x
Enterprise Search Technical Specifications Version: 11.0.x Written by: Product Knowledge, R&D Date: May 2018 Copyright 1988-2018 Hyland Software, Inc. and its affiliates. Table of Contents Enterprise Search...
Grade 9 :The Internet and HTML Code Unit 1
Internet Basic: The internet is a world-wide system of computer networks and computers. Each user makes use of an internet service provider (ISP). The ISP will set up a user account which will contain
VS005 - Cordova vs NativeScript
presenta VS005 - Cordova vs NativeScript Fabio Franzini Microsoft MVP www.wpc2015.it info@wpc2015.it - +39 02 365738.11 - #wpc15it 1 Apache Cordova Telerik NativeScript Cordova VS NativeScript Agenda www.wpc2015.it
Revision for Grade 7 ASP in Unit :1&2 Design & Technology Subject
Your Name:.... Grade 7 - SECTION 1 Matching :Match the terms with its explanations. Write the matching letter in the correct box. The first one has been done for you. (1 mark each) Term Explanation 1.
Scalable Vector Graphics commonly known as SVG is a XML based format to draw vector images. It is used to draw twodimentional vector images.
About the Tutorial Scalable Vector Graphics commonly known as SVG is a XML based format to draw vector images. It is used to draw twodimentional vector images. This tutorial will teach you basics of SVG.
Agenda. INTRODUCTION TO WEB DEVELOPMENT AND HTML <Lecture 1> 1/20/2013. What is a Web Developer? Rommel Anthony Palomino Spring
INTRODUCTION TO WEB DEVELOPMENT AND Rommel Anthony Palomino Spring 2013 2 What is a Web Developer? Agenda History of the Internet Web 2.0 What is web development today Technology part of it
20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code.
20480C: Programming in HTML5 with JavaScript and CSS3 Course Code: 20480C; Duration: 5 days; Instructor-led WHAT YOU WILL LEARN This course provides an introduction to HTML5, CSS3, and JavaScript. This
Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
Review Ch. 17 Creating Online Pages and Sites. 2010, 2006 South-Western, Cengage Learning
Review Ch. 17 Creating Online Pages and Sites 2010, 2006 South-Western, Cengage Learning Web Browsers Software programs that allow users to find and view web pages Web browsers interpret HTML and XML to
Table of Contents WWW. WWW history (2) WWW history (1) WWW history. Basic concepts. World Wide Web Aka The Internet. Client side.
Table of Contents WWW World Wide Web Aka The Internet Karst Koymans Informatics Institute University of Amsterdam (version 163, 2016/10/06 13:25:13 UTC) Friday, October 7, 2016 WWW history Basic concepts
Alert. In [ ]: %%javascript alert("hello");
![Alert. In [ ]: %%javascript alert(hello);](/thumbs/88/116833753.jpg "Alert. In [ ]: %%javascript alert(hello);")
JavaScript V Alerts and Dialogs For many years, alerts and dialogs, which pop up over the browser, were popular forms of user interaction These days there are nicer ways to handle these interactions, collectively
LECTURE 3. Web-Technology
LECTURE 3 Web-Technology Household issues Blackboard o Discussion Boards Looking for a Group Questions about Web-Technologies o Assignment 1 submission Announcement e-mail? Have to be in a group Homework
HTML5 Evolution and Development. Matt Spencer UI & Browser Marketing Manager
HTML5 Evolution and Development Matt Spencer UI & Browser Marketing Manager 1 HTML5 Ratified. finally! After 7 years of development, the HTML5 specification was ratified on 28 th October 14 urce>
World Wide Web. World Wide Web - how it works. WWW usage requires a combination of standards and protocols DHCP TCP/IP DNS HTTP HTML MIME
World Wide Web WWW usage requires a combination of standards and protocols DHCP TCP/IP DNS HTTP HTML MIME World Wide Web - how it works User on a machine somewhere Server machine Being more specific...
Index. B2G. See Boot to Gecko (B2G) project Banner landmark, 32 Baranovskiy, D., 137 Boot to Gecko (B2G) project, 155 Browser vendors, 6, 12
Index A Android, SVG, 138 Animated SVG Girl, 139 Animated SVG icons, 145 APIs cross-document messaging, 162 Drag and Drop (DnD), 163 geolocation, 161 history, 159 HTML5 Web App, 159 Web Sockets, 162 Web
Jim Jackson II Ian Gilman
Single page web apps, JavaScript, and semantic markup Jim Jackson II Ian Gilman FOREWORD BY Scott Hanselman MANNING contents 1 HTML5 foreword xv preface xvii acknowledgments xx about this book xxii about
Web UI. Survey of Front End Technologies. Web Challenges and Constraints. Desktop and mobile devices. Highly variable runtime environment
Web UI Survey of Front End Technologies Web UI 1 Web Challenges and Constraints Desktop and mobile devices - mouse vs. touch input, big vs. small screen Highly variable runtime environment - different
Index LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
Developing Location based Web Applications with W3C HTML5 Geolocation
International Journal of Interdisciplinary and Multidisciplinary Studies (IJIMS), 2017, Vol 4, No.3,179-185. 179 Available online at http://www.ijims.com ISSN - (Print): 2519 7908 ; ISSN - (Electronic):
F FAILboard Pro, File Transfer Protocol (FTP) application
A, B Adobe Dreamweaver CS5.5 compression compressed, obscured, and alien like jquery code, 236 uncompressed jquery script, 235 HTML5 Boilerplate, 240 PhoneGap, 256 Adobe Fireworks design comp, 143, 144
HTML5 & Java: Opening the Door to New Possibilities
1 HTML5 & Java: Opening the Door to New Possibilities Bernard Traversat Director Engineering,JPG, Oracle 3 Repeat of this session: Tuesday 9:30am-10:30am Parc 55 Mission Room The
Introduction to Gears. Brad Neuberg Google
Introduction to Gears Brad Neuberg Google JavaScript CSS HTML What is Gears? JavaScript CSS HTML What is Gears? JavaScript CSS HTML What is Gears? JavaScript CSS HTML What is Gears? JavaScript CSS HTML
I m sorry but HTML5 mobile games DO work.
I m sorry but HTML5 mobile games DO work. Joe Monastiero President, Ludei Ludei is pronounced Lou-day Heard This Lately? HTML5 sucks for mobile app and game development. Here s What He Said HTML5 Will
Web Programming 1 Packet #5: Canvas and JavaScript
Web Programming 1 Packet #5: Canvas and JavaScript Name: Objectives: By the completion of this packet, students should be able to: use JavaScript to draw on the canvas element Canvas Element. This is a
OPTIMIZING AND DELIVERING VIDEO ON MOBILE PLATFORM. Israk Technology Sdn. Bhd.
OPTIMIZING AND DELIVERING VIDEO ON MOBILE PLATFORM Israk Technology Sdn. Bhd. Smartphone 101 In a nutshell, a smartphone is a device that lets you make telephone calls, but also adds in features that you
Touch Forward. Bill Fisher. #touchfwd. Developing Awesome Cross-Browser Touch
Touch Forward Developing Awesome Cross-Browser Touch Interactions Bill Fisher @fisherwebdev #touchfwd Super F*cking Important yeah, it s important. http://commons.wikimedia.org/wiki/file:071228_human_hands.jpg
Designing Reusable Web Components
Designing Reusable Web Components Dr. Joonas Lehtinen Vaadin @joonaslehtinen Agenda What do we want to Q & A design? Technology HTML5 / Canvas Google Web Toolkit Vaadin Framework Designing Web Component