Html5 & touch

HTML5 & Touch
Torbjörn Sjögren
10 January 2012

10/1/12 1 Torbjörn Sjögren

The Internet

I Refuse to Join Facebook!!

The Brain

I Refuse to be a Neuron!!


The journey of the technology

1998 2005 2010 2012
PL/SQL Java/C# Cloud Browser

4

HTML5 - ROCKS


The start

HTML 4.01 HTML 5

<!DOCTYPE html PUBLIC “-//W3C//DTD <!DOCTYPE html>
XHTML 1.0 Strict//EN” “http://www.w3.org/ <html lang=”en”>
TR/xhtml1/DTD/ xhtml1-strict.dtd”> <head>
<html xmlns="http://www.w3.org/1999/xhtml"> <meta charset=”utf-8”>
<head> </head>
<meta http-equiv=”Content-Type”
content=”text/ html; charset=utf-8”>
<meta http-equiv="Content-Language"
content="en-GB" />
</head>
<body>
<p contenteditable=true>
Lorem ipsum… </p>
<body>
</body>
</body>
</html>
</html>


Differences HTML 4 and HTML5

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


New tags: Structure and text

<article>, <aside>, <figcaption>, <figure>,
<footer>, <header>, <hgroup>, <nav>,
<section>, and <summary>

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

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

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


Video

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


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 on
the 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 Are
Remaking 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
http://drtobbe.com/pendulum.html

Safari (Nitro) Safari (Nitro)


A JavaScript Offline App

Safari (Nitro) UIWebView

iPhone 3: 20
iPhone 3GS: 55
iPhone 4: 30
iPad: 85
HTC Desire: 70
http://drtobbe.com/phonegap/

PhoneGap / build
“Package in the Cloud”
http://build.phonegap.com
http://build.phonegap.com


Build Native Apps
$ git add .!
$ git commit -m "initial commit”!
$ git remote add phonegap git@git.phonegap.com:drtobbe/5999_JavaScriptPendulum.git!
$ git push phonegap master!
!


Cross Platform

JSConf – 25 April 2009

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

Mobile Cross Platform JavaScript
Frameworks (6 and counting…)


Search JavaScript 360M -> 1620M
September 2010

March 2011


Information Overload…


DZONE - http://www.dzone.com
-  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
-  …

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

Mobile – if – it´s technology

Taptu 2010
26

Apple – Thoughts on Flash - Touch

Steve Jobs
April, 2010

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

Kitchen Sink – Landscape / Portrait

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

CMS – Portrait / Landscape


JavaScript Template


Flash/XML versus
HTML5/CSS3/JS/JSON-P

Flash

XML

JSON-P

XML

JDBC 2012

A Nice Neuron!!
2002

Gold 1900 - 2011


Html5 & touch

Recommended

Recommended

More Related Content

Similar to Html5 & touch

Similar to Html5 & touch (20)

Recently uploaded

Recently uploaded (20)

Html5 & touch