118
From HTML to HTML 5

From HTML to HTML 5€¦ · 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

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

From HTML to HTML 5

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

Web Technology =

Innovation Vs Standards

HTML 5 Browser Compatibility

New DocType and Tags

<!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>

Section, Article, Aside

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">

What is Needed?

More Meaning to tags than just Divs

Header Nav

Article Aside Header

Section

Section

Footer

Figure

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/>

Audio & Video Tags

Audio & Video Formats & Codecs

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 *)

Audio & Video Tags

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>

Audio & Video Events

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

Example

0,0

200,200

@ 84%

What is x,y?

@ 45 Degree

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();

}

CSS 3 Border Radius

CSS 3 Text Effects

CSS3 Animations

• Step 1 – CSS Transform 2D

• Step 2 – CSS Transform 3D

• Step 3 – CSS Transition (Smoothing out)

• Step 4 – CSS Animation (key frames)

CSS 3 Transformation 2D Transforms and 3D Transforms

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;

Rotating Div Example

WebWorker

Working in background

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);

File System and Drag and Drop

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

Device Orientation Demo

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

Taking Application Offline

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 Types

• Local Storage

• SQL (Deprecated)

• Indexed DB

Introducing HTML5 for Mobile Phones

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