html5 & touch

8/2/2019 Html5 & Touch

http://slidepdf.com/reader/full/html5-touch 1/33

HTML5 & TouchTorbjörn Sjögren

10 January 2012

12-04-20 Torbjörn Sjögren1



The Internet


I Refuse to Join Facebook!



The Brain


I Refuse to be a Neuron!



The journey of the technology

4

1998

PL/SQL2005

Java/C#

2010

Cloud2012

Browser



HTML5 - ROCKS




HTML 4.01

<!DOCTYPE html PUBLIC “-//W3C//DTD

XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/ xhtml1-

strict.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv=”Content-Type”

content=”text/ html; charset=utf-8”>

<meta http-equiv="Content-Language"

content="en-GB" />

</head>

<body>

</body>

</html>

The start


HTML 5

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8”>

</head>

<body>

<p contenteditable=true>Lorem ipsum… </p>

</body>

</html>



@Deprecated

<center>

<frame>, <frameset> and <noframes>

<acrynom>, <applet>, <basefont>, <big>, <blink>, <dir>,

<font>, <isindex> , <strike>, <tt> and <u>

align, bgcolor, border, cellpadding, cellspacing, height, nowrap,rules, valign and width

Mantra: Use CSS instead!

Differences HTML 4 and HTML5




<article>, <aside>, <figcaption>, <figure>,

<footer>, <header>, <hgroup>, <nav>,

<section>, and <summary>

<wbr>, <bdi>, <bdo>, <ruby>, <rp>, <rt>

New tags: Structure and text


• HTML4: http://www.w3schools.com/tags

• HTML5: http://www.w3schools.com/html5

http://www.w3schools.com/tags

http://www.w3schools.com/html5


http://www.w3schools.com/tags



<video controls width=”640” height=”480” poster=”sample.jpg”>

<source src=”sample.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’>

<source src=”sample.webm” type=’video/webm; codecs=”vp8, vorbis”’>

<source src=”sample.ogv” type=’video/ogg; codecs=”theora, vorbis”’>

<object width=”640” height=”480” type=”application/x-shockwave-flash”data=”flowplayer-3.2.1.swf”>

<param name=”movie” value=”flowplayer- 3.2.1.swf”>

<param name=”allowfullscreen” value=”true”>

<param name=”flashvars” value=’config={“clip”: {“url”: “http://yourdomain.

com/videos/sample.mp4”, “autoPlay”:false, “autoBuffering”:true}}’>

<p>If you can read this, you’re using a pre- HTML5 browser without Flash.</p>

</object>

</video>

Video




















Audio


Attributes

• accesskey - this specifies a keyboard shortcut for a given element• class - this specifies a classname for a given element, to be used in

conjunction with a style sheet

• contenteditable - specifies whether a user is allowed to edit the content

• contextmenu - specifies the context menu for a given element

• dir - specifies the direction of the text for content in a given element

• draggable - specifies if a user is allowed to drag a given element

• dropzone - specifies the event that occurs when an item or data is dragged

and dropped into a given element

• hidden - specifies if a given element is hidden or not• id - specifies a unique identificationfor a given element

• lang - specifies a language code for the content in a given element

• spellcheck - specifies if a specific element will need to be subjected to a

spelling and grammar check

• style - defines an inline style for a specific element tabindex - specifies the tab

order of a specific element

• autoplay - if this attribute is included, the audio will begin to play once it is

ready

• controls - if this one is included, controls for the audio file will be included onthe page (which is a great idea--it is very annoying to not have a way to stop

the audio from playing)

• loop - if this one is included, the audio will loop and play again once it has

finished

• preload - this one has three parameters: auto, which plays once it has loaded,

metadata, which only displays the data associated with the audio file, and

none, which means it will not preload

• src - this one’s value is simply the URL of the audio file you wish to play




































































Canvas







HTML5 data– Attributes


<li data-tmp1=“A” data-tmp2=“B” >

<b>…</b></li>











Local database within browser







How JavaScript & HTML5 AreRemaking the Web








WebGL and Canvas


http://code.google.com/p/quake2-gwt-port/

www.3dtin.com

http://www.pirateslovedaisies.com/

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js










A JavaScript Online App


Safari (Nitro)

http://drtobbe.com/pendulum.html

Safari (Nitro)









A JavaScript Offline App


UIWebViewSafari (Nitro)

iPhone 3: 20iPhone 3GS: 55

iPhone 4: 30

iPad: 85

HTC Desire: 70

http://drtobbe.com/phonegap/














PhoneGap / build“Package in the Cloud”


http://build.phonegap.comhttp://build.phonegap.com









Build Native Apps


$ git add .

$ git commit -m "initial commit”

$ git remote add phonegap [email protected]:drtobbe/5999_JavaScriptPendulum.git$ git push phonegap master










PhoneGap (JavaScript) Apps




Cross Platform


JSConf – 25 April 2009

http://www.slideshare.net/brianleroux/phonegap-at-jsconf








Mobile Cross Platform JavaScriptFrameworks (6 and counting…)








Search JavaScript 360M -> 1620M


September 2010

March 2011








Information Overload…







- Why HTML5 is worth your time

- How JavaScript & HTML5 Are Remaking the Web- 16 popular JavaScript frameworks

- Object Oriented Programming with JavaScript

- Web vs. Desktop Apps: “Never Bet Against the Open Web”

- Using TDD With Modern JavaScript

- An ultimate HTML5 cheat sheet you must have

- 5 New Ways to Build Apps for iPhone, Android and Web Browsers

- Say good-bye to Flash, but is HTML5 winning?

- Create a Stylish Contact Form with HTML5 & CSS3

- How HTML5 is changing the face of mobile

- Best HTML5 Books: My Top 5 Choices

- 100 Awesome CSS/Javascript Plugins and Coding Techniques

- Treat JavaScript right!

- Opera 11 preview with WebGL and Hardware Acceleration for Windows

- Book Review: Eloquent JavaScript: A Modern Introduction to Programming

- Convert XML to JSON with JavaScript

- …

DZONE - http://www.dzone.comh


JSON = JavaScript Object Notation (1999) Ex: {“key”:”value”, “name”:”joe”}












































Mobile – if – it´s technology

26Taptu 2010






Apple – Thoughts on Flash - Touch

http://www.apple.com/hotnews/thoughts-on-flash/

Steve Jobs

April, 2010







Kitchen Sink – Landscape / Portrait

http://dev.sencha.com/deploy/touch/examples/kitchensink/






Sencha Demo – Source




CMS – Portrait / Landscape







JavaScript Template


Fl h/XML







Flash/XML versusHTML5/CSS3/JS/JSON-P


Flash

XML

XML

JDBC

JSON-P

2002

2012

A Nice Neuron!















Gold 1900 - 2011


html5 & touch

Documents