Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
Topics
1. DocType, New Tags and New Form Elements
2. Audio, Video, Canvas and SVG
3. CSS 3
4. Web Workers and Web Sockets
5. File System API and Drag and Drop
6. Geo, Device Orientation
7. Offline/Storage API
8. Chrome Frame
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript"> var data = {…} </script> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"> <title>HTML5</title> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript"> var data = {…} </script> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"> <title>HTML5</title> </head> <body> </body> </html>
<script type="text/javascript" src="js/app.js"></script>
<script src="js/app.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript"> var data = {…} </script> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"> <title>HTML5</title> </head> <body> </body> </html>
<link type="text/css" rel="stylesheet" href="css/app.css" media="screen">
<link rel="stylesheet" href="css/app.css" media="screen">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript"> var data = {…} </script> <link type="text/css" rel="stylesheet" href="css/app.css" media="screen"> <title>HTML5</title> </head> <body> </body> </html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta content="text/html;charset=utf-8">
<!DOCTYPE > <html> <head> <meta content="text/html;charset=utf-8"> <script src="js/app.js"></script> <script > var data = {…} </script> <link rel="stylesheet" href="css/app.css" media="screen"> <title>HTML5</title> </head> <body> </body> </html>
Div Hell <body> <div id="header"> <h1>TechNext</h1> <h2>Tech Meet for Dev, QA and Agile practisioner!</h2> <div id="navigation"> <ul> <li><a href="/">Home</a></li> <li><a href="/archive">Archive</a></li> <li><a href="/about">About</a></li> </ul> </div> </div> <div id="meets"> <div class="meet"> <div class="headline"> <h2><a href="http://www.meetup.com/TechNext/events/21562131/">HTML 5 Actually Hands On</a></h2> <h3>30th July 2011</h3> </div> <p> <h3>Topic</h3> <p>People have been talking about HTML 5 for ling. I think the wait is over and HTML 5 is now a reality.This session is all hands on coding of HTML 5. The topics include</p> <ol> <li>DocType, New Tags and New Form Types (Better Markup)</li> <li>Audio, Video, Canvas and SVG</li> <li>CSS 3</li> <li>Web Workers and Web Sockets</li> <li>File System API and Drag and Drop</li> <li>Geo, Device Orientation </li> <li>Offline/Storage API</li> <li>Chrome Frame</li> </ol> </p> <h3> Venue</h3> <p> Synerzip Softech Recreational Area 3rd Flior, Revliution Mall, next to CityPride Kothrud, Sheth U M Rathi Path, Pune, Maharashtra, India, Pune (map) </p> <div class="footer"> <a class="comments" href="/posts/1/comments">3 Reviews</a> <span class="posted_at">Posted at 12:01 AM July 10, 2011</span> </div> </div> <!-- More Posts...--> <div class="meet">
New HTML Form Elements
<input type="email" name="user_email" required placeholder="Enter Email Address"/>
<input type="search" />
<input type="url" name="url" required autofocus/>
<input type="tel" name="tel" required/>
<input type="number" name="number" min="1" max="5" step="1" value="3" required/>
<input type="range" name="range" min="1" max="5" step="1" value="3" required/>
<input type="datetime" name="datetime" required/>
<input type="month" name="month" required/>
Formats
• H 264 – MP4 Video
– Codec (Most browsers, but uses prop. Patents)
• Theora – Ogg Video
– Codec (Firefox, Chrome and Opera)
• WebM - .webm Video
– Codec (Firefox, Chrome, Opera, IE 9 *)
Tags
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Canvas
<canvas id=“canvas” ></canvas>
var canvasElem = document.getElementById(“canvas”);
var ctx = canvasElem.getContext(‘2d’);
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//the rectangle is half transparent
ctx.fillStyle = "rgba(255, 255, 0, .5)"
ctx.beginPath();
ctx.rect(15, 150, 120, 120);
ctx.closePath();
ctx.fill();
http://billmill.org/static/canvastutorial/color.html
Drawing Capabilities
• Drawing APIs
– lineTo(),moveTo(),arcTo()
• Transformation APIs
– scale(), translate(), transform()
• Context APIs
– save()
– restore()
https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D
Drawing Concepts
• Drawing by calculating everything yourself
• Drawing using Transformation
Psuedo Code
ctx.save();
ctx.rect(0,0,200,200);
ctx.restore();
ctx.save();
ctx.translate(200,200);
ctx.rect(0,0,200,200);
Ctx.save();
0,0
200,200
Psuedo Code
ctx.save();
ctx.translate(300,200);
ctx.rotate(…);
ctx.rect(0,0,200,200);
ctx.restore();
ctx.save();
ctx.translate(200,200);
ctx.translate(300,200);
ctx.scale(…,…);
ctx.rotate(…);
ctx.rect(0,0,200,200);
Ctx.save();
@ 84%
@ 45 Degree
Game Concept
setInterval(gameLoop,100);
function gameLoop(){
manipulateModel();
clearCanvas();
drawModel();
}
Brick Game
http://billmill.org/static/canvastutorial/index.html
SVG
http://tutorials.jenkov.com/svg/index.html
What’s with the prefixes
• -web-border-radius: 20px;
• -moz-border-radius: 20px;
• Really shouldn’t it be just border-radius?
http://www.sitepoint.com/abolish-css-vendor-prefixes/
CSS3 Animations
• Step 1 – CSS Transform 2D
• Step 2 – CSS Transform 3D
• Step 3 – CSS Transition (Smoothing out)
• Step 4 – CSS Animation (key frames)
Transforms
-webkit-transform: translate(x,y);
-webkit-transform: scale(xScale,yScale);
-webkit-perspective: distance;
-webkit-transform:translate3d(x,y,z);
-webkit-transform:scale3d(xScale,yScale,zScale)
-webkit-transform:rotate3d(xAng,yAng,zAng);
Transitions
-webkit-transition: <property> <time> <timing-func>
//Transition for one CSS property
-webkit-transition: -webkit-box-shadow 1s linear;
//Transition for all CSS Properties
-webkit-transition: all 1s linear;
Transitions
Timing Function
1. Linear
2. Ease
3. Ease-in
4. Ease-out
5. Custom e.g Cubic Benzier
Animation
@-webkit-keyframes <name> {
from { -webkit-transform: <transforms>}
to { -webkit-transform: <transforms> }
}
Animation
//Declaring an Animation
@-webkit-keyframes <name> {
0%{ -webkit-transform: <transforms>}
50% { -webkit-transform: <transforms> }
100% { -webkit-transform: <transforms> }
}
You can use any CSS property along side –webkit-keyframes
Animation
//Using an Animation -webkit-animation-name: <name>; -webkit-animation-duration: <duration>; -webkit-animation-iteration-count: <iteration>; -webkit-animation-direction: <direction>; //short form -webkit-animation: <name> <duration> <iteration> <direction> -webkit-animation: spin 8s infinite linear;
HTML Page Worker Javascript
DOM XHR
CSS
XHR Variables
postMessage() Event message
postMessage() Event message
Separate Javascript Context Web Page Context
WebWorker
//From HTML Side
var worker = new Worker(“some.js”);
worker.addEventListener(“message”,function(e){
var data = e.data;
});
worker.postMessage(data);
WebWorker
//From Worker JavaScript side
addEventListener(“message”,function(e){
//receive command from html
var data = e.data;
});
//inform html about result
postMessage(data);
Required Setup
• Chrome 12
• Start with command prompt
– --unlimited-quota-for-files
– --allow-file-access-from-files
File System Setup
var fileSys
function onInitFs(fs){
fileSys=fs;
}
function errorHandler(err){
alert(err.code);
}
window.webkitRequestFileSystem(window.PERSISTENT, 5242880, onInitFs, errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
Get Directory Entry
Function successCallback(dirEntry){
}
function errorHandler(err){
alert(err.code);
}
fileSys.root.getDirectory(dirPath,{},successCallback,errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
Create Directory Entry
Function successCallback(dirEntry){
}
function errorHandler(err){
alert(err.code);
}
fileSys.root.getDirectory(dirPath,{create:true},successCallback,errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
Read Directory Entries
function listFiles(entries){
}
dirReader = dirEntry.createReader();
dirReader.readEntries(listFiles,
errorHandler);
http://www.html5rocks.com/en/tutorials/file/filesystem/
Drag and Drop
<div id="commandHistory" ></div>
var dropbox = document.getElementById(“commandHistory”);
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragexit", dragExit, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, true);
Drag and Drop
function drop(event){
if(event.dataTransfer.files){
var files = event.dataTransfer.files;
for(var index=0;index<files.length;index++){
var file = files[index];
alert(“name=“+file.name);
}
}
}
Read File
var reader = new FileReader();
// init the reader event handlers
reader.onloadend = function(event){
alert(“data=“+event.target.result);
}
// begin the read operation
reader.readAsDataURL(files[index]);
Write File
fileSys.root.getFile(fileName, {create: true},
function(fileEntry) {
//Now we got handle to file, lets write
},
errorHandler);
Write File
fileEntry.createWriter( function(fileWriter) { fileWriter.onwriteend = function(e) { logDnd(fileName); }; fileWriter.onerror = function(e) { console.log('Write failed: ' + e.toString()); }; // Create a new Blob and write it to log.txt. var bb = new window.WebKitBlobBuilder(); bb.append(event.target.result); fileWriter.write(bb.getBlob('text/plain')); }, errorHandler );
Code Example var wsUri = "ws:localhost:10007"; var output; function init() { output = document.getElementById("output"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; }
Geo Code
function success(position){
alert(“lat=“+position.coords.latitude);
alert(“lng=“+position.coords.longitude);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
Device Orientation Demo
var iphone = document.getElementById("iphone"); window.addEventListener("deviceorientation",function(event){ document.getElementById("alpha").innerHTML = event.alpha; document.getElementById("beta").innerHTML = event.beta; document.getElementById("gamma").innerHTML = event.gamma; var rotate = 'rotate(' + event.gamma*-1 + 'deg)'; var scale = 'scale(' + ((event.beta/180)*2 + 1) + ')'; iphone.style.webkitTransform = rotate + ' ' + scale; });
http://www.jeremyselier.com/s/demo/device_orientation.html
Clock App
Reference Code - http://css-tricks.com/1399-css3-clock/
Goal
• Make this application available offline
• Control what is cached what is not
• Provide alternate resources when offline
• Notify online offline and various cache events
Steps
• Declare Manifest file
– CACHE
– NETWORK
– FALLBACK
• Online/Offline Events
• Cache Events
Local Storage Types
• Local Storage
• SQL (Deprecated)
• Indexed DB
99
Historical Notes 2007 iPhone changed what people expected from a mobile phone 2009 iPad created the tablet market Platform fragmentation 5000 different mobile devices all have preinstalled browsers devices may have alternate browsers ~18 browsers in use: Full browsers: equivalent of desktop; many use WebKit rendering engine; rendered on device. eg Safari, Android, IE mobile Mini mobile: low powered devices, poor bandwidth; web page rendered on server, compressed and sent to device; no client side interactions. eg Opera Mini, Bolt (Blackberry), Ovi (Nokia) Either deal with multiplicity or accept limited market.
Distinctive Features Small screen A large number of target devices: many screen sizes; resolutions; generations of machines; computing power. Heterogeneous Keyboard limited – touch interface Low power - both computing and electrical A number of distinct operating systems OSX – Android - Linux Intermittent connection to a network Location aware – optional but a large market Information available from built in sensors Device is not operated from a static position laptop is portable, but used on table or lap screen rotates
100
Components(i) Devices
Handsets – and pads/tablets - not all are designed to make calls. Target audience is very large, but fragmented.
Operating System
OsX (iPads iPhones) Windows Phone Android – form of Linux – may be heavily customised by Operator
101
Components(ii) Application Framework
Developer accesses application framework also called API to create application Java: many platforms support java, but diversity of screen size and processor power presents a challenge.
Flash Lite: AdobeFlash Lite is an application framework that uses the Flash Lite and ActionScript frameworks to create vector-based applications. Windows Mobile Applications: downloaded and installed over the air or loaded via a cable-connected computer. Cocoa Touch: API used to create native applications for the iPhone and iPod touch. Applications must be submitted and certified by Apple before being included in the App Store. Once in the App Store, applications can be purchased, downloaded, and installed over the air or via a cable-connected computer.
102
Components(iii) Application Framework
Android SDK: create native applications for any device that runs the Android platform. Applications in C/C++ or use a Java virtual machine. Java more common in the mobile ecosystem.
Web Runtimes (WRTs): Nokia, Opera, and Yahoo! provide various Web Runtimes, or WRTs. Frameworks for web apps – niche market
WebKit: a browser technology, so applications can be created simply by using web technologies such as HTML, CSS, and JavaScript. Applications can be run and tested in any WebKit browser, desktop, or mobile device
Web: only application framework that works across virtually all devices and all platforms. In the past limited functionality led to stagnation. Currently demand to offer products and services outside of operator control, and shorter development cycles seeing a growth.
103
Technology:
Could look at one of the proprietary frameworks Apple … windows … android …
Step learning curve; limited market Choose to do web based applications
html5, css, javascript
Leverage existing knowledge : you will need to understand it better. Limitations - gap in speed and functionality w.r.t. native applications narrowing.
104
We will introduce the use of phoneGap. Way of creating native apps direct from web technology. Single development - deploy of many platforms
105
Using html5/css/javascript means debugging can be performed in a standard web browser. jQuery – a javascript framework designed for manipulating web pages jQueryMobile – framework which extends jQuery specifically for mobile apps. Description of the framework structure – not a language class – ideas for practice in the workshops Considerations for performance optimisation
106
Web apps v native apps What is the difference? Why as a developer would you choose one or the other?
107
Web apps v native apps Normal web page if you know web technology you can develop mobile how do the sites know you are on a mobile? But some additions pinch to zoom rotate screen access (some) of the capabilities. GPS phoneGap includes some native code – allows you to access some utilities not available through straight html5/css/javascript (eg addressbook) Native apps - icons on the screen. for icons do you need native apps?
108
Web apps v native apps Technology Create responsive web sites web sites that will work on desktops or mobile devices. They respond to the browser and context in which they are running But also responsive in that they respond helpfully to the user and provide a good user experience where the web site responds rapidly to user requests. Need to understand how a web site is technically structured and how the browser goes about rendering the page.
109
An evolving set of technologies Sites hang around – browsers change – each with a different modification date – backwards compatibility is essential in web technologies Browsers support set of features … compatible with some of the technology Features are separated and given their own logos Semantics Styling Multimedia Offline Browsers support some set of html5
110
For the web we create a file to hold the content and to
document the structure – but not the layout.
The html file
A typical html file looks like this
The browser then makes a decision on how to display <h2>
- the second level heavy. Font size, style, colour,…
<!DOCTYPE html>
<html>
<head>
<title>Page information</title>
</head>
<body>
Page contents – including markup
describing the role of the text
<h2>Variation under domestication</h2>
</body>
</html>
html*
CSS3 – allows you to separate the layout instructions
from the content and structure,
Good practice everywhere
Vital for mobile development
(It will be something on which I judge the quality of your
assignment)
A number of different style sheets can be written for use
in different contexts.
Can also make style sheets for visual impairments –
colour blind – or even to create Braille or for a screen
reader.
presentation
A CSS file is just a set of css instructions
h2 {font-size:16px; font-family:verdana;}
Property:value pairs
CSS
selector
property
value
CSS <!DOCTYPE html>
<html>
<head>
<title>Page information</title>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue; font-size:20pt}
p {margin-left:50px;}
</style>
</head>
<body>
Page contents – including markup
describing the role of the text
<h2>Variation under domestication</h2>
</body>
</html>
CSS in the html file – what you should never do
1 Introduction
The markup tags describe the role of different bits of text
in the file. Tags come in pairs which delimit their start and
<h1>This is a top level header </h1>
The tags do not define:
how the page is laid out
or the look of the text.
That is determined by the browser unless you describe
what you want with a style sheet.
The style sheet should be in separate file
href gives the address of the file. This one snazzy.css is in
the same directory as the html file.
It may be in another directory, in which case you must give
the directory path.
It may even be on another machine when you give the url
of the file.
<head>
<title>Page of course Information</title>
<link rel=“stylesheet” href=“snazzy.css”
type = “text/css” />
</head>
External CSS file
Imagine being asked to draw out a web page given the html. In order to create the web page you would need to go through the whole file. A web browser needs to do the same thing. Identifying elements – sub-elements and content. It builds a suitable representation in memory.
<html>
<head>
Page information
</head>
<body>
Page contents – including markup
describing the role of the text
<h2>Variation under domestication</h2>
</body>
</html>
There are many ways of representing a web page in memory. Early web browsers did it in many ways. Once there is a model in memory it is possible to manipulate it in interesting ways. It provides a structure for interactive web pages. All browsers should model the web page in the same way. If in addition they provide an API (Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM Document Object Model Not unique – but standard
Building a model