HTML5 & Touch          Torbjörn Sjögren          10 January 201210/1/12              1       Torbjörn Sjögren
The Internet            I Refuse to Join Facebook!!10/1/12                 2                 Torbjörn Sjögren
The Brain            I Refuse to be a Neuron!!10/1/12                 3               Torbjörn Sjögren
The journey of the technology  1998       2005          2010    2012  PL/SQL     Java/C#       Cloud   Browser            ...
HTML5 - ROCKS10/1/12             5   Torbjörn Sjögren
The start    HTML 4.01                                          HTML 5    <!DOCTYPE html PUBLIC “-//W3C//DTD              ...
Differences HTML 4 and HTML5    @Deprecated    <center>    <frame>, <frameset> and <noframes>    <acrynom>, <applet>, <bas...
New tags: Structure and text     <article>, <aside>, <figcaption>, <figure>,      <footer>, <header>, <hgroup>, <nav>,    ...
Video    <video controls width=”640” height=”480” poster=”sample.jpg”>     <source src=”sample.mp4” type=’video/mp4; codec...
Audio            Attributes            •  accesskey - this specifies a keyboard shortcut for a given element            • ...
Canvas10/1/12      11   Torbjörn Sjögren
HTML5 data– Attributes                           <li data-tmp1=“A” data-tmp2=“B”>                            <b>…</b>     ...
Local database within browser10/1/12                 13          Torbjörn Sjögren
How JavaScript & HTML5 Are    Remaking the Web10/1/12               14         Torbjörn Sjögren
WebGL and Canvas                     http://code.google.com/p/quake2-gwt-port/                                            ...
A JavaScript Online App   http://drtobbe.com/pendulum.htmlSafari (Nitro)                             Safari (Nitro)10/1/12...
A JavaScript Offline App                     Safari (Nitro)                UIWebView                                      ...
PhoneGap / build    “Package in the Cloud”                                           http://build.phonegap.com          ht...
Build Native Apps          $   git   add .!          $   git   commit -m "initial commit”!          $   git   remote add p...
PhoneGap (JavaScript) Apps
Cross Platform                          JSConf – 25 April 2009                 http://www.slideshare.net/brianleroux/phone...
Mobile Cross Platform JavaScript    Frameworks (6 and counting…)10/1/12                 22             Torbjörn Sjögren
Search JavaScript 360M -> 1620MSeptember 2010                                  March 201110/1/12               23         ...
Information Overload…10/1/12                24   Torbjörn Sjögren
DZONE - http://www.dzone.com   -    Why HTML5 is worth your time   -    How JavaScript & HTML5 Are Remaking the Web   -   ...
Mobile – if – it´s technology                                Taptu 2010                      26
Apple – Thoughts on Flash - Touch                                                  Steve Jobs                             ...
Kitchen Sink – Landscape / Portrait   http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Demo – Source
CMS – Portrait / Landscape10/1/12                 30       Torbjörn Sjögren
JavaScript Template10/1/12                   31   Torbjörn Sjögren
Flash/XML versus      HTML5/CSS3/JS/JSON-P          Flash            XML                                           JSON-P ...
Gold 1900 - 201110/1/12                33   Torbjörn Sjögren
Upcoming SlideShare
Loading in …5
×

Html5 & touch

884
-1

Published on

html5, Touchscreen, JavaScript

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
884
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 & touch

  1. 1. HTML5 & Touch Torbjörn Sjögren 10 January 201210/1/12 1 Torbjörn Sjögren
  2. 2. The Internet I Refuse to Join Facebook!!10/1/12 2 Torbjörn Sjögren
  3. 3. The Brain I Refuse to be a Neuron!!10/1/12 3 Torbjörn Sjögren
  4. 4. The journey of the technology 1998 2005 2010 2012 PL/SQL Java/C# Cloud Browser 4
  5. 5. HTML5 - ROCKS10/1/12 5 Torbjörn Sjögren
  6. 6. 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>10/1/12 6 Torbjörn Sjögren
  7. 7. 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!10/1/12 7 Torbjörn Sjögren
  8. 8. 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/html510/1/12 8 Torbjörn Sjögren
  9. 9. 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>10/1/12 9 Torbjörn Sjögren
  10. 10. 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 play10/1/12 10 Torbjörn Sjögren
  11. 11. Canvas10/1/12 11 Torbjörn Sjögren
  12. 12. HTML5 data– Attributes <li data-tmp1=“A” data-tmp2=“B”> <b>…</b> </li>10/1/12 12 Torbjörn Sjögren
  13. 13. Local database within browser10/1/12 13 Torbjörn Sjögren
  14. 14. How JavaScript & HTML5 Are Remaking the Web10/1/12 14 Torbjörn Sjögren
  15. 15. WebGL and Canvas http://code.google.com/p/quake2-gwt-port/ www.3dtin.comhttp://www.pirateslovedaisies.com/ https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js10/1/12 15 Torbjörn Sjögren
  16. 16. A JavaScript Online App http://drtobbe.com/pendulum.htmlSafari (Nitro) Safari (Nitro)10/1/12 16 Torbjörn Sjögren
  17. 17. 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/10/1/12 17 Torbjörn Sjögren
  18. 18. PhoneGap / build “Package in the Cloud” http://build.phonegap.com http://build.phonegap.com10/1/12 18 Torbjörn Sjögren
  19. 19. 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! !10/1/12 19 Torbjörn Sjögren
  20. 20. PhoneGap (JavaScript) Apps
  21. 21. Cross Platform JSConf – 25 April 2009 http://www.slideshare.net/brianleroux/phonegap-at-jsconf10/1/12 21 Torbjörn Sjögren
  22. 22. Mobile Cross Platform JavaScript Frameworks (6 and counting…)10/1/12 22 Torbjörn Sjögren
  23. 23. Search JavaScript 360M -> 1620MSeptember 2010 March 201110/1/12 23 Torbjörn Sjögren
  24. 24. Information Overload…10/1/12 24 Torbjörn Sjögren
  25. 25. 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”}10/1/12 25 Torbjörn Sjögren
  26. 26. Mobile – if – it´s technology Taptu 2010 26
  27. 27. Apple – Thoughts on Flash - Touch Steve Jobs April, 2010http://www.apple.com/hotnews/thoughts-on-flash/
  28. 28. Kitchen Sink – Landscape / Portrait http://dev.sencha.com/deploy/touch/examples/kitchensink/
  29. 29. Sencha Demo – Source
  30. 30. CMS – Portrait / Landscape10/1/12 30 Torbjörn Sjögren
  31. 31. JavaScript Template10/1/12 31 Torbjörn Sjögren
  32. 32. Flash/XML versus HTML5/CSS3/JS/JSON-P Flash XML JSON-P XML JDBC 2012 A Nice Neuron!! 200210/1/12 32 Torbjörn Sjögren
  33. 33. Gold 1900 - 201110/1/12 33 Torbjörn Sjögren

×