SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

Destacado (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 a 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 a 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
 

Más de 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
 

Más de 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)
 

Último

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
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
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
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
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
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
 

Último (20)

Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
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
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
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
 

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

Notas del editor

  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