Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 for Mobile

8,082 views

Published on

See also:
This is demo movie.
- HTML5 for Mobile on Flash Lite
http://www.youtube.com/watch?v=HZURT3VxdRI
- HTML5 for Mobile on i-appli (NTT docomo)
http://www.youtube.com/watch?v=ZsPbMXzbmJE
- HTML5 for Mobile on iPhone
http://www.youtube.com/watch?v=zfjBMVgdozg

Published in: Technology, Design
  • Be the first to comment

HTML5 for Mobile

  1. 1. HTML5 for Mobile 2011/08/21
  2. 2. @homata, omata@jig.jpjig.jp
  3. 3. HTML5 MobileiPhone Android
  4. 4. HTML5 MobileHTML5+CSS3
  5. 5. HTML5 Mobile PCHTML5
  6. 6. HTML5 MobileFlash Flash Flash
  7. 7. HTML5 MobileFlash iPhone/iPad HTML
  8. 8. Flash HTML5Adobe - Wallaby http://labs.adobe.com/technologies/wallaby/Google - Swiffy http://swiffy.googlelabs.com/OpenSource - Smokescreen http://smokescreeen.us - FlashForward https://github.com/ken39arg/FlashForward/ iOS Flash HTML5 http://www.gree.co.jp/news/press/2011/0711.html (DeNA) - ExGame http://www.broadtail.jp/tec/exgame.html CLOQUE- FLAML http://flaml.jp/
  9. 9. .... ( |||)
  10. 10. HTML5 Web
  11. 11. ....!!
  12. 12. 2010 http://japan.internet.com/busnews/20110810/3.html?rss
  13. 13. Flash HTML5Abasake (HTML5 CSS3 JavaScript Flash
  14. 14. Flash HTML5Abasake (HTML5 CSS3 JavaScript Flash
  15. 15. Flash HTML5HTML5 Canvas Flash Lite 2.0HTML CSS
  16. 16. Android iOS
  17. 17. <!doctype html><html> (HTML)<head> <meta charset=utf-8 name=application> <title> </title> <meta name="viewport" content="width = 580, user-scalable=no" /></head><body onkeydown="keyDown(event.keyCode)" ontouchstart="touchstart(event.touches)" ontouchmove="touchmove(event.touches)" ontouchend="touchend(event.touches)" bgcolor="#303030" style="border: 0; margin: 0; padding: 0;"><!-- ontouchcancel="touchcancel(event.touches)"--> <div style="margin-left: auto; margin-right: auto; text-align: center;"> <canvas id="canvas" width="480" height="640"></canvas> </div> <script id="application" type="text/javascript" src="canvasout.js"></script></body></html>
  18. 18. var moveTouchY; (JavaScript)main();function main() { size = w; bricks = new Array(rows * cols); colors = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff"]; brickW = size / cols; brickH = size / 20; paddleW = brickW * 0.75; paddleH = brickH / 2.5; paddleX = (size - paddleW) / 2; lastStep = new Date(); ballX = size / 2; ballY = size - brickH * 2; ballSize = size / 40; speed = brickH * 2 / 3; var canvas = document.getElementById("canvas");
  19. 19. One Web
  20. 20. facebook HTML5 for MobileHTML5 for Mobilehttp://www.facebook.com/groups/139491626126253/
  21. 21. !! ) ... ir(M oha

×