HTML5 for Mobile

  • 7,086 views
Uploaded on

See also: …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,086
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Flash を HTML+CSS+JavaScript に変換する\n\n・Adobe - Wallaby < http://labs.adobe.com/technologies/wallaby/ >\n・Google - Swiffy <http://swiffy.googlelabs.com/>\n・OpenSource - Smokescreen <http://smokescreen.us/>\n・カヤック - FlashForward <https://github.com/ken39arg/FlashForward>\n・グリー - iOS端末向けFlash-HTML5変換 <http://www.gree.co.jp/news/press/2011/0711.html>\n・ブロードテイル(DeNA) - <ExGame http://www.broadtail.jp/tec/exgame.html>\n・ CLOQUE- FLAML <http://flaml.jp/>\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n・one web\nどのよう環境からでも同じように利用できるプラットフォームとしてのWeb\n\n・HTML5 and Same Markup\n http://blogs.msdn.com/b/ie/archive/2010/05/05/html5-and-same-markup-second-ie9-platform-preview-available-for-developers.aspx\n\nブラウザ互換性\n
  • \n
  • \n

Transcript

  • 1. HTML5 for Mobile 2011/08/21
  • 2. @homata, omata@jig.jpjig.jp
  • 3. HTML5 MobileiPhone Android
  • 4. HTML5 MobileHTML5+CSS3
  • 5. HTML5 Mobile PCHTML5
  • 6. HTML5 MobileFlash Flash Flash
  • 7. HTML5 MobileFlash iPhone/iPad HTML
  • 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. .... ( |||)
  • 10. HTML5 Web
  • 11. ....!!
  • 12. 2010 http://japan.internet.com/busnews/20110810/3.html?rss
  • 13. Flash HTML5Abasake (HTML5 CSS3 JavaScript Flash
  • 14. Flash HTML5Abasake (HTML5 CSS3 JavaScript Flash
  • 15. Flash HTML5HTML5 Canvas Flash Lite 2.0HTML CSS
  • 16. Android iOS
  • 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. 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. One Web
  • 20. facebook HTML5 for MobileHTML5 for Mobilehttp://www.facebook.com/groups/139491626126253/
  • 21. !! ) ... ir(M oha