HTML5 for Mobile     2011/08/21
@homata, omata@jig.jpjig.jp
HTML5 MobileiPhone Android
HTML5 MobileHTML5+CSS3
HTML5 Mobile             PCHTML5
HTML5 MobileFlash           Flash        Flash
HTML5 MobileFlash          iPhone/iPad   HTML
Flash                   HTML5Adobe - Wallaby    http://labs.adobe.com/technologies/wallaby/Google - Swiffy http://swiffy.g...
.... (   |||)
HTML5   Web
....!!
2010    http://japan.internet.com/busnews/20110810/3.html?rss
Flash           HTML5Abasake (HTML5   CSS3 JavaScript   Flash
Flash           HTML5Abasake (HTML5   CSS3 JavaScript   Flash
Flash           HTML5HTML5 Canvas Flash Lite 2.0HTML      CSS
Android   iOS
<!doctype html><html>                                                                  (HTML)<head>          <meta charset...
var moveTouchY;                                                    (JavaScript)main();function   main() {          size = ...
One Web
facebook       HTML5 for MobileHTML5 for Mobilehttp://www.facebook.com/groups/139491626126253/
!!              )                  ...        ir(M   oha
Upcoming SlideShare
Loading in...5
×

HTML5 for Mobile

7,326

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
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,326
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Flash &amp;#x3092; HTML&amp;#xFF0B;CSS&amp;#xFF0B;JavaScript &amp;#x306B;&amp;#x5909;&amp;#x63DB;&amp;#x3059;&amp;#x308B;\n\n&amp;#x30FB;Adobe - Wallaby &lt; http://labs.adobe.com/technologies/wallaby/ &gt;\n&amp;#x30FB;Google - Swiffy &lt;http://swiffy.googlelabs.com/&gt;\n&amp;#x30FB;OpenSource - Smokescreen &lt;http://smokescreen.us/&gt;\n&amp;#x30FB;&amp;#x30AB;&amp;#x30E4;&amp;#x30C3;&amp;#x30AF; - FlashForward &lt;https://github.com/ken39arg/FlashForward&gt;\n&amp;#x30FB;&amp;#x30B0;&amp;#x30EA;&amp;#x30FC; - iOS&amp;#x7AEF;&amp;#x672B;&amp;#x5411;&amp;#x3051;Flash&amp;#xFF0D;HTML5&amp;#x5909;&amp;#x63DB; &lt;http://www.gree.co.jp/news/press/2011/0711.html&gt;\n&amp;#x30FB;&amp;#x30D6;&amp;#x30ED;&amp;#x30FC;&amp;#x30C9;&amp;#x30C6;&amp;#x30A4;&amp;#x30EB;(DeNA) - &lt;ExGame http://www.broadtail.jp/tec/exgame.html&gt;\n&amp;#x30FB; CLOQUE- FLAML &lt;http://flaml.jp/&gt;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n&amp;#x30FB;one web\n&amp;#x3069;&amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x74B0;&amp;#x5883;&amp;#x304B;&amp;#x3089;&amp;#x3067;&amp;#x3082;&amp;#x540C;&amp;#x3058;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x5229;&amp;#x7528;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x30D7;&amp;#x30E9;&amp;#x30C3;&amp;#x30C8;&amp;#x30D5;&amp;#x30A9;&amp;#x30FC;&amp;#x30E0;&amp;#x3068;&amp;#x3057;&amp;#x3066;&amp;#x306E;Web\n\n&amp;#x30FB;HTML5 and Same Markup\n&amp;#x3000;http://blogs.msdn.com/b/ie/archive/2010/05/05/html5-and-same-markup-second-ie9-platform-preview-available-for-developers.aspx\n\n&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x4E92;&amp;#x63DB;&amp;#x6027;\n
  • \n
  • \n
  • 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

    ×