SlideShare a Scribd company logo
1 of 21
HTML5 for Mobile
     2011/08/21
@homata, omata@jig.jp

jig.jp
HTML5 Mobile

iPhone Android
HTML5 Mobile


HTML5+CSS3
HTML5 Mobile

             PC
HTML5
HTML5 Mobile

Flash           Flash
        Flash
HTML5 Mobile

Flash          iPhone/iPad   HTML
Flash                   HTML5
Adobe - 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/
.... (   |||)
HTML5   Web
....!!
2010
    http://japan.internet.com/busnews/20110810/3.html?rss
Flash           HTML5

Abasake (

HTML5   CSS3 JavaScript   Flash
Flash           HTML5

Abasake (

HTML5   CSS3 JavaScript   Flash
Flash           HTML5
HTML5 Canvas Flash Lite 2.0

HTML      CSS
Android   iOS
<!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>
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");
One Web
facebook
       HTML5 for Mobile

HTML5 for Mobile
http://www.facebook.com/groups/139491626126253/
!!
              )
                  ...
        ir(
M   oha

More Related Content

What's hot

Using HTML5 for a great Open Web
Using HTML5 for a great Open WebUsing HTML5 for a great Open Web
Using HTML5 for a great Open WebRobert Nyman
 
Video navarra
Video navarraVideo navarra
Video navarramirdeco
 
P'ti mag - 11.03.16
P'ti mag - 11.03.16P'ti mag - 11.03.16
P'ti mag - 11.03.16Marsatwork
 
Firefox & HTML5
Firefox & HTML5Firefox & HTML5
Firefox & HTML5dynamis
 
Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Steve Fisher
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreEngineor
 
Agregar editor hosts_en_linux_centos
Agregar editor hosts_en_linux_centosAgregar editor hosts_en_linux_centos
Agregar editor hosts_en_linux_centosJames Jara
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeMauricio Gelves
 

What's hot (18)

Using HTML5 for a great Open Web
Using HTML5 for a great Open WebUsing HTML5 for a great Open Web
Using HTML5 for a great Open Web
 
YUI for your Hacks-IITB
YUI for your Hacks-IITBYUI for your Hacks-IITB
YUI for your Hacks-IITB
 
Somkait
SomkaitSomkait
Somkait
 
Video navarra
Video navarraVideo navarra
Video navarra
 
Membuat slide show pada posting
Membuat slide show pada postingMembuat slide show pada posting
Membuat slide show pada posting
 
P'ti mag - 11.03.16
P'ti mag - 11.03.16P'ti mag - 11.03.16
P'ti mag - 11.03.16
 
Tying Your Shoes
Tying Your ShoesTying Your Shoes
Tying Your Shoes
 
Mobile Web Design Code
Mobile Web Design CodeMobile Web Design Code
Mobile Web Design Code
 
Ad
AdAd
Ad
 
Ajit Jaokar - The ASUS effect
Ajit Jaokar - The ASUS effectAjit Jaokar - The ASUS effect
Ajit Jaokar - The ASUS effect
 
Firefox & HTML5
Firefox & HTML5Firefox & HTML5
Firefox & HTML5
 
Erik mogensen stowe
Erik mogensen stoweErik mogensen stowe
Erik mogensen stowe
 
Gregory
GregoryGregory
Gregory
 
Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 
Agregar editor hosts_en_linux_centos
Agregar editor hosts_en_linux_centosAgregar editor hosts_en_linux_centos
Agregar editor hosts_en_linux_centos
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
 
Vmware
Vmware Vmware
Vmware
 

Viewers also liked

Living by the Book Week 1
Living by the Book Week 1Living by the Book Week 1
Living by the Book Week 1John Shapiro
 
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...Leonardo "Hackin" Freire
 
Redis on Rails at RedDotRubyConference 2012
Redis on Rails at RedDotRubyConference 2012Redis on Rails at RedDotRubyConference 2012
Redis on Rails at RedDotRubyConference 2012Obie Fernandez
 
Living bythe Book Observation
Living bythe Book ObservationLiving bythe Book Observation
Living bythe Book Observationguest60214a
 
Redis on Rails (RedDotRubyConf 2012)
Redis on Rails (RedDotRubyConf 2012)Redis on Rails (RedDotRubyConf 2012)
Redis on Rails (RedDotRubyConf 2012)Obie Fernandez
 

Viewers also liked (9)

Redis
RedisRedis
Redis
 
Hacking Twitter API [ Giran Siege ]
Hacking Twitter API [ Giran Siege ]Hacking Twitter API [ Giran Siege ]
Hacking Twitter API [ Giran Siege ]
 
Living by the Book Week 1
Living by the Book Week 1Living by the Book Week 1
Living by the Book Week 1
 
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...
iMasters DevCommerce 2016 - A difícil tarefa de ser TI numa empresa de varejo...
 
Photoimpa
PhotoimpaPhotoimpa
Photoimpa
 
Redis on Rails at RedDotRubyConference 2012
Redis on Rails at RedDotRubyConference 2012Redis on Rails at RedDotRubyConference 2012
Redis on Rails at RedDotRubyConference 2012
 
Brochure Masters NL
Brochure Masters NLBrochure Masters NL
Brochure Masters NL
 
Living bythe Book Observation
Living bythe Book ObservationLiving bythe Book Observation
Living bythe Book Observation
 
Redis on Rails (RedDotRubyConf 2012)
Redis on Rails (RedDotRubyConf 2012)Redis on Rails (RedDotRubyConf 2012)
Redis on Rails (RedDotRubyConf 2012)
 

Similar to HTML5 for Mobile

Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
20111014 mu me_html5
20111014 mu me_html520111014 mu me_html5
20111014 mu me_html5Erik Duval
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejElinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejPertti Paavola
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobilePablo Garrido
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 

Similar to HTML5 for Mobile (20)

HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Mume HTML5 Intro
Mume HTML5 IntroMume HTML5 Intro
Mume HTML5 Intro
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
20111014 mu me_html5
20111014 mu me_html520111014 mu me_html5
20111014 mu me_html5
 
Upload[1]
Upload[1]Upload[1]
Upload[1]
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkejElinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
Elinvoimaa hunajasta-yleist-hunajatietoa-ja-kyttvinkkej
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
 
Xxx
XxxXxx
Xxx
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
HTML5
HTML5HTML5
HTML5
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 

More from Hiroshi Omata

シビックテックの現状と期待 (2016/02/21)
シビックテックの現状と期待 (2016/02/21)シビックテックの現状と期待 (2016/02/21)
シビックテックの現状と期待 (2016/02/21)Hiroshi Omata
 
地域コニュニティとオープンデータ
地域コニュニティとオープンデータ地域コニュニティとオープンデータ
地域コニュニティとオープンデータHiroshi Omata
 
川崎市
5374.jp(ごみなし.jp) 国際版
川崎市
5374.jp(ごみなし.jp) 国際版川崎市
5374.jp(ごみなし.jp) 国際版
川崎市
5374.jp(ごみなし.jp) 国際版Hiroshi Omata
 
Code for Japanの活動紹介と地域コミュニティ
Code for Japanの活動紹介と地域コミュニティCode for Japanの活動紹介と地域コミュニティ
Code for Japanの活動紹介と地域コミュニティHiroshi Omata
 
木曜日は井戸端会議です。(BrigadeMeetup@金沢)
木曜日は井戸端会議です。(BrigadeMeetup@金沢)木曜日は井戸端会議です。(BrigadeMeetup@金沢)
木曜日は井戸端会議です。(BrigadeMeetup@金沢)Hiroshi Omata
 
第1回LODチャレンジデー オープン川崎LT資料
第1回LODチャレンジデー オープン川崎LT資料第1回LODチャレンジデー オープン川崎LT資料
第1回LODチャレンジデー オープン川崎LT資料Hiroshi Omata
 
百カ国語テロップで横浜観光
百カ国語テロップで横浜観光百カ国語テロップで横浜観光
百カ国語テロップで横浜観光Hiroshi Omata
 
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19Hiroshi Omata
 
2014/06/19 第3回 CKAN コミュニティミーティング | homata
2014/06/19 第3回 CKAN コミュニティミーティング | homata2014/06/19 第3回 CKAN コミュニティミーティング | homata
2014/06/19 第3回 CKAN コミュニティミーティング | homataHiroshi Omata
 
川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)Hiroshi Omata
 
川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)Hiroshi Omata
 
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)Hiroshi Omata
 

More from Hiroshi Omata (12)

シビックテックの現状と期待 (2016/02/21)
シビックテックの現状と期待 (2016/02/21)シビックテックの現状と期待 (2016/02/21)
シビックテックの現状と期待 (2016/02/21)
 
地域コニュニティとオープンデータ
地域コニュニティとオープンデータ地域コニュニティとオープンデータ
地域コニュニティとオープンデータ
 
川崎市
5374.jp(ごみなし.jp) 国際版
川崎市
5374.jp(ごみなし.jp) 国際版川崎市
5374.jp(ごみなし.jp) 国際版
川崎市
5374.jp(ごみなし.jp) 国際版
 
Code for Japanの活動紹介と地域コミュニティ
Code for Japanの活動紹介と地域コミュニティCode for Japanの活動紹介と地域コミュニティ
Code for Japanの活動紹介と地域コミュニティ
 
木曜日は井戸端会議です。(BrigadeMeetup@金沢)
木曜日は井戸端会議です。(BrigadeMeetup@金沢)木曜日は井戸端会議です。(BrigadeMeetup@金沢)
木曜日は井戸端会議です。(BrigadeMeetup@金沢)
 
第1回LODチャレンジデー オープン川崎LT資料
第1回LODチャレンジデー オープン川崎LT資料第1回LODチャレンジデー オープン川崎LT資料
第1回LODチャレンジデー オープン川崎LT資料
 
百カ国語テロップで横浜観光
百カ国語テロップで横浜観光百カ国語テロップで横浜観光
百カ国語テロップで横浜観光
 
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19
川崎市全域版 5374.jp(ごみなし.jp) 作成ワークショップ (2014/07/19
 
2014/06/19 第3回 CKAN コミュニティミーティング | homata
2014/06/19 第3回 CKAN コミュニティミーティング | homata2014/06/19 第3回 CKAN コミュニティミーティング | homata
2014/06/19 第3回 CKAN コミュニティミーティング | homata
 
川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)
 
川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)川崎 International Open Data Day 2014(2014/02/22)
川崎 International Open Data Day 2014(2014/02/22)
 
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)
Code for Sabae - Code for Japan 自治体関係者勉強会vol.1.0 (2014/02/06)
 

Recently uploaded

Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 

Recently uploaded (20)

Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 

HTML5 for Mobile

  • 1. HTML5 for Mobile 2011/08/21
  • 5. HTML5 Mobile PC HTML5
  • 6. HTML5 Mobile Flash Flash Flash
  • 7. HTML5 Mobile Flash iPhone/iPad HTML
  • 8. Flash HTML5 Adobe - 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
  • 12. 2010 http://japan.internet.com/busnews/20110810/3.html?rss
  • 13. Flash HTML5 Abasake ( HTML5 CSS3 JavaScript Flash
  • 14. Flash HTML5 Abasake ( HTML5 CSS3 JavaScript Flash
  • 15. Flash HTML5 HTML5 Canvas Flash Lite 2.0 HTML 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");
  • 20. facebook HTML5 for Mobile HTML5 for Mobile http://www.facebook.com/groups/139491626126253/
  • 21. !! ) ... ir( M oha

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. 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
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \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
  19. \n
  20. \n