HTML5 & Touch: A Concise History of Progress

HTML5 & Touch Torbjrn Sjgren 10 January 2012
12-04-20
Torbjrn Sjgren
The Internet
I Refuse to Join Facebook!

12-04-20 2 Torbjrn Sjgren
The Brain
I Refuse to be a Neuron!
The journey of the technology
1998 PL/SQL
2005 Java/C#
4
2010 Cloud
2012 Browser
HTML5 - ROCKS
12-04-20
Torbjrn Sjgren
The start
HTML 4.01
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/ xhtml1strict.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>
HTML 5
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> </head>
<body> </body> </html>
<body> <p contenteditable=true> Lorem ipsum </p> </body> </html>
12-04-20
Torbjrn Sjgren
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!
12-04-20
Torbjrn Sjgren
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
12-04-20
Torbjrn Sjgren
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, youre using a pre- HTML5 browser without Flash.</p> </object> </video>
12-04-20
Torbjrn Sjgren
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 ones value is simply the URL of the audio file you wish to play
12-04-20
10
Torbjrn Sjgren
Canvas
12-04-20
11
Torbjrn Sjgren
HTML5 data Attributes
<li data-tmp1=A data-tmp2=B> <b></b> </li>
12-04-20
12
Torbjrn Sjgren
Local database within browser
12-04-20
13
Torbjrn Sjgren
How JavaScript & HTML5 Are Remaking the Web
12-04-20
14
Torbjrn Sjgren
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)
12-04-20
16
Torbjrn Sjgren
A JavaScript Offline App
Safari (Nitro)
UIWebView iPhone 3: iPhone 3GS: iPhone 4: iPad: HTC Desire: 20 55 30 85 70
http://drtobbe.com/phonegap/
PhoneGap / build Package in the Cloud

http://build.phonegap.com http://build.phonegap.com
12-04-20
18
Torbjrn Sjgren
Build Native Apps

$ $ $ $ git git git git add . commit -m "initial commit remote add phonegap git@git.phonegap.com:drtobbe/5999_JavaScriptPendulum.git push phonegap master
12-04-20
19
Torbjrn Sjgren
PhoneGap (JavaScript) Apps
Cross Platform
JSConf 25 April 2009
http://www.slideshare.net/brianleroux/phonegap-at-jsconf
Mobile Cross Platform JavaScript Frameworks (6 and counting)
12-04-20
22
Torbjrn Sjgren
Search JavaScript 360M -> 1620M

September 2010
March 2011
Information Overload
12-04-20
24
Torbjrn Sjgren
DZONE - http://www.dzone.com h
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)

12-04-20 25
Ex: {key:value, name:joe}

Torbjrn Sjgren
Mobile if its 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/
Sencha Demo Source
CMS Portrait / Landscape
12-04-20
30
Torbjrn Sjgren
JavaScript Template
12-04-20
31
Torbjrn Sjgren
Flash/XML versus HTML5/CSS3/JS/JSON-P

Flash
XML JSON-P
XML
JDBC
2012
A Nice Neuron!
2002
Gold 1900 - 2011
12-04-20
33
Torbjrn Sjgren

HTML5 & Touch: A Concise History of Progress

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5 & Touch: A Concise History of Progress

Enviado por

Direitos autorais:

Formatos disponíveis

HTML5 & Touch Torbjrn Sjgren 10 January 2012

I Refuse to Join Facebook!

The journey of the technology

<body> </body> </html>

<body> <p contenteditable=true> Lorem ipsum </p> </body> </html>

Differences HTML 4 and HTML5

New tags: Structure and text

HTML4: http://www.w3schools.com/tags HTML5: http://www.w3schools.com/html5

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

A JavaScript Online App

A JavaScript Offline App

UIWebView iPhone 3: iPhone 3GS: iPhone 4: iPad: HTC Desire: 20 55 30 85 70

PhoneGap / build Package in the Cloud

Build Native Apps

PhoneGap (JavaScript) Apps

JSConf 25 April 2009

Mobile Cross Platform JavaScript Frameworks (6 and counting)

Search JavaScript 360M -> 1620M

JSON = JavaScript Object Notation (1999)

Ex: {key:value, name:joe}

Mobile if its technology

Apple Thoughts on Flash - Touch

Steve Jobs April, 2010

Kitchen Sink Landscape / Portrait

Sencha Demo Source

CMS Portrait / Landscape

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

Gold 1900 - 2011

Você também pode gostar