SlideShare uma empresa Scribd logo
1 de 48
Baixar para ler offline
Appmaker 
第⼀一次拖拖拉拉做WebAPP就上⼿手 
趙柏強 
bobchao@gmail.com 
appmaker60mins
me = BobChao 
Mozillian & Creative Commoner 
Project Manager, KKTIX 
appmaker60mins
1. create 
2. publish 
3. teach 
WebAPP with Appmaker 
your app and install with Firefox 
with teaching kit on webmaker.org 
appmaker60mins
尝	䌟
瘘ꨶ 
Y U NO LAPTOP!? 
appmaker60mins
http://flic.kr/p/oDg6SZ 
Desktop is okay  
appmaker60mins
1. ㆰ衽駵Ꟛ 
2. bit.ly/ 
appmaker60mins 
appmaker60mins
? 
appmaker60mins
appmaker60mins
我們擁護能讓⼤大眾 
了解更多、做更多、 
也做得更好的 Web。 
Mitchell Baker 
Photo from https://www.mozilla.org/foundation/annualreport/2012/ 
appmaker60mins
appmaker60mins
webmaker.org 
appmaker60mins
Appmaker Basic
appmaker60mins
apps.webmaker.org 
appmaker60mins
Working Space 
appmaker60mins
Bricks 
appmaker60mins
Properties 
appmaker60mins
Message Channels 
appmaker60mins
DEMO 
https://acoustic-use-518.webmak.es/app 
appmaker60mins
in the App… 
•Fireworks 
•shoot fireworks 
•set your own sound 
•Button 
•you can change the Label and Color 
•Text Input with Button 
•input text to use in other bricks. 
appmaker60mins
and what you will need later… 
•Counter 
•Count Up / Down / Reset 
•Set Value 
•Send current count 
appmaker60mins
3 mins 
play around 
appmaker60mins
https://commons.wikimedia.org/wiki/File:Hand_tally_and_knitting_row_counter_007.jpg 
Challenge: Counter APP 
Counter, Button, and maybe more… 
appmaker60mins
Publish & Install 
appmaker60mins
Login with Persona
Save & Publish
Firefox Firefox 
for Android 
Firefox OS 
Install 
appmaker60mins
Firefox Firefox 
for Android 
Firefox OS 
Run 
appmaker60mins 
Google Chrome 
for Android 
Google Chrome
DEMO 
https://thoughtless-bedroom-216.webmak.es/install 
appmaker60mins
appmaker60mins
Teach! 
appmaker60mins
Teach Appmaker 
Issue to solve 
Learn about Bricks Demo how you can use the bricks 
Paper Prototyping 
appmaker60mins 
Ideation 
Publish & Share 
(Edit) 
Create App 
Logic & flow, Layout, Interaction…
CC:BY-SA, https://www.flickr.com/photos/rcourtie/3499307295/sizes/z/ appmaker60mins
https://jess.makes.org/thimble/MTY3NTY4OTk4NA==/mobile-design-ideation-kit 
appmaker60mins
more info 
https://github.com/mozilla-appmaker/appmaker/wiki/Teach-Appmaking 
appmaker60mins
Not only about App 
appmaker60mins
我們擁護能讓⼤大眾 
了解更多、做更多、 
也做得更好的 Web。 
~ Mitchell Baker 
Photo from https://www.mozilla.org/foundation/annualreport/2012/ 
appmaker60mins
appmaker60mins
Web is the platform 
appmaker60mins
KNOWABLE 
OURS 
INTEROPERABLE 
appmaker60mins
Recap 
appmaker60mins
Web is the platform 
appmaker60mins
bit.ly/ 
appmaker60mins 
appmaker60mins
Next step… 
•Join Webmaker Taiwan forum(online) 
http://groups.google.com.tw/d/forum/moztw-webmaker 
•Create & Share your teach kit. 
•Try it in your class, and share your 
experience. 
Thanks! 
appmaker60mins
Next session: PopcornMaker

Mais conteúdo relacionado

Mais procurados

Levistudio operating tube
Levistudio operating tubeLevistudio operating tube
Levistudio operating tube
Bruce Jiang
 
Campaign Metrics - Measure Camp 2013
Campaign Metrics - Measure Camp 2013Campaign Metrics - Measure Camp 2013
Campaign Metrics - Measure Camp 2013
Steve Lock
 

Mais procurados (20)

BETTER THAN GOOGLE
BETTER THAN GOOGLEBETTER THAN GOOGLE
BETTER THAN GOOGLE
 
Progressive Web Apps 1. keynote
Progressive Web Apps 1. keynoteProgressive Web Apps 1. keynote
Progressive Web Apps 1. keynote
 
Programming for-non-programmers
Programming for-non-programmersProgramming for-non-programmers
Programming for-non-programmers
 
Paul Campbell — A Modern Approach to Third-Party Embedded Widgets (Turing Fes...
Paul Campbell — A Modern Approach to Third-Party Embedded Widgets (Turing Fes...Paul Campbell — A Modern Approach to Third-Party Embedded Widgets (Turing Fes...
Paul Campbell — A Modern Approach to Third-Party Embedded Widgets (Turing Fes...
 
WordPress Maintenance: 14 Essential Tasks to Keep Your Site Optimized
WordPress Maintenance: 14 Essential Tasks to Keep Your Site OptimizedWordPress Maintenance: 14 Essential Tasks to Keep Your Site Optimized
WordPress Maintenance: 14 Essential Tasks to Keep Your Site Optimized
 
Maven
MavenMaven
Maven
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?
 
Use Docker as the operation system builder - Do-Ker conference
Use Docker as the operation system builder - Do-Ker conferenceUse Docker as the operation system builder - Do-Ker conference
Use Docker as the operation system builder - Do-Ker conference
 
Website designing company_in_delhi blogging
Website designing company_in_delhi bloggingWebsite designing company_in_delhi blogging
Website designing company_in_delhi blogging
 
Levistudio operating tube
Levistudio operating tubeLevistudio operating tube
Levistudio operating tube
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
 
Spring tutorial for beginners with examples
Spring tutorial for beginners with examplesSpring tutorial for beginners with examples
Spring tutorial for beginners with examples
 
Use Promise, Future and some functional programing stuff without being a math...
Use Promise, Future and some functional programing stuff without being a math...Use Promise, Future and some functional programing stuff without being a math...
Use Promise, Future and some functional programing stuff without being a math...
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes back
 
Video de amor
Video de amor Video de amor
Video de amor
 
Campaign Metrics - Measure Camp 2013
Campaign Metrics - Measure Camp 2013Campaign Metrics - Measure Camp 2013
Campaign Metrics - Measure Camp 2013
 
Setup and run wordpress: 201
Setup and run wordpress: 201Setup and run wordpress: 201
Setup and run wordpress: 201
 

Destaque (9)

Creative Commons 介紹
Creative Commons 介紹Creative Commons 介紹
Creative Commons 介紹
 
Vidyo: How to Record and Broadcast your meeting
Vidyo: How to Record and Broadcast your meetingVidyo: How to Record and Broadcast your meeting
Vidyo: How to Record and Broadcast your meeting
 
Emerging Institutional Paradigms for the Digital Commons
Emerging Institutional Paradigms for the  Digital CommonsEmerging Institutional Paradigms for the  Digital Commons
Emerging Institutional Paradigms for the Digital Commons
 
Simpling and Copyright Issues
Simpling and Copyright IssuesSimpling and Copyright Issues
Simpling and Copyright Issues
 
創用 CC: 概覽與標示
創用 CC: 概覽與標示創用 CC: 概覽與標示
創用 CC: 概覽與標示
 
CC tech-projects: overview (TELDAP 2009)
CC tech-projects: overview (TELDAP 2009)CC tech-projects: overview (TELDAP 2009)
CC tech-projects: overview (TELDAP 2009)
 
OpenSource 新手上路
OpenSource 新手上路OpenSource 新手上路
OpenSource 新手上路
 
Mozilla, MozTW, and Open Web
Mozilla, MozTW, and Open WebMozilla, MozTW, and Open Web
Mozilla, MozTW, and Open Web
 
COSCUP: What, Why, and How
COSCUP: What, Why, and HowCOSCUP: What, Why, and How
COSCUP: What, Why, and How
 

Semelhante a Webmaker Workshop: Appmaker in 60mins

Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Christian Heilmann
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia mac
Maso Lin
 

Semelhante a Webmaker Workshop: Appmaker in 60mins (20)

Progressive Web App (feat. React, Django)
Progressive Web App (feat. React, Django)Progressive Web App (feat. React, Django)
Progressive Web App (feat. React, Django)
 
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web StoreSmart Browsers and HTML5 Web Apps for the Chrome Web Store
Smart Browsers and HTML5 Web Apps for the Chrome Web Store
 
DESIGN IT! Talk #001 (UX) Yukio Andoh
DESIGN IT! Talk #001 (UX) Yukio AndohDESIGN IT! Talk #001 (UX) Yukio Andoh
DESIGN IT! Talk #001 (UX) Yukio Andoh
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
 
Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!Microservices, la risposta che (forse) cercavi!
Microservices, la risposta che (forse) cercavi!
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8
 
Building an Appier Web - May 2016
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
 
Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautiful
 
Future of Mobile Web - Coldfront conf
Future of Mobile Web - Coldfront confFuture of Mobile Web - Coldfront conf
Future of Mobile Web - Coldfront conf
 
Webmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Popcorn maker in 60minsWebmaker Workshop: Popcorn maker in 60mins
Webmaker Workshop: Popcorn maker in 60mins
 
Intro to js august 31
Intro to js august 31Intro to js august 31
Intro to js august 31
 
Intro to js september 19
Intro to js september 19Intro to js september 19
Intro to js september 19
 
Mobile Web Mega Trend 2010
Mobile Web Mega Trend 2010Mobile Web Mega Trend 2010
Mobile Web Mega Trend 2010
 
Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia mac
 
Balsamiq mockups tutorial
Balsamiq mockups tutorialBalsamiq mockups tutorial
Balsamiq mockups tutorial
 
TechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google WorkboxTechEvent Advanced Service Worker / PWA with Google Workbox
TechEvent Advanced Service Worker / PWA with Google Workbox
 
OpenStack Murano introduction
OpenStack Murano introductionOpenStack Murano introduction
OpenStack Murano introduction
 

Mais de Bob Chao

網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會
Bob Chao
 
FUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 EventsFUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 Events
Bob Chao
 
Firefox Mobile: Designing Ideas
Firefox Mobile: Designing IdeasFirefox Mobile: Designing Ideas
Firefox Mobile: Designing Ideas
Bob Chao
 
Firefox 4 Party Opening
Firefox 4 Party OpeningFirefox 4 Party Opening
Firefox 4 Party Opening
Bob Chao
 
著作權在你身邊,150 秒版
著作權在你身邊,150 秒版著作權在你身邊,150 秒版
著作權在你身邊,150 秒版
Bob Chao
 

Mais de Bob Chao (20)

簡報規劃與設計
簡報規劃與設計簡報規劃與設計
簡報規劃與設計
 
開放社群,啊是多開放?
開放社群,啊是多開放?開放社群,啊是多開放?
開放社群,啊是多開放?
 
數位教材公眾授權資源蒐集與創用 CC 資源網站
數位教材公眾授權資源蒐集與創用 CC 資源網站數位教材公眾授權資源蒐集與創用 CC 資源網站
數位教材公眾授權資源蒐集與創用 CC 資源網站
 
Mozilla Community
Mozilla CommunityMozilla Community
Mozilla Community
 
開源人生指南 - 如何不慎豐富人脈與經驗
開源人生指南 - 如何不慎豐富人脈與經驗開源人生指南 - 如何不慎豐富人脈與經驗
開源人生指南 - 如何不慎豐富人脈與經驗
 
開放文化基金會可以幫你什麼?
開放文化基金會可以幫你什麼?開放文化基金會可以幫你什麼?
開放文化基金會可以幫你什麼?
 
Firefox OS Add-on in 10 minutes
Firefox OS Add-on in 10 minutesFirefox OS Add-on in 10 minutes
Firefox OS Add-on in 10 minutes
 
Build your own COSCUP
Build your own COSCUPBuild your own COSCUP
Build your own COSCUP
 
OCF 募款餐會: 開放文化影展
OCF 募款餐會: 開放文化影展OCF 募款餐會: 開放文化影展
OCF 募款餐會: 開放文化影展
 
8 個重回 Firefox 的理由 8 reasons back to Firefox
8 個重回 Firefox 的理由  8 reasons back to Firefox8 個重回 Firefox 的理由  8 reasons back to Firefox
8 個重回 Firefox 的理由 8 reasons back to Firefox
 
Google Analytics 網站分析: 學習心得分享
Google Analytics 網站分析: 學習心得分享Google Analytics 網站分析: 學習心得分享
Google Analytics 網站分析: 學習心得分享
 
Mozilla Webmaker: Brief Intro.
Mozilla Webmaker: Brief Intro.Mozilla Webmaker: Brief Intro.
Mozilla Webmaker: Brief Intro.
 
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
 
網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會網站分析 我小的時候以為自己會
網站分析 我小的時候以為自己會
 
Gamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 GameGamification 遊戲化是在 Play 蝦米 Game
Gamification 遊戲化是在 Play 蝦米 Game
 
FUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 EventsFUParty - Mozilla Taiwan 2012 Events
FUParty - Mozilla Taiwan 2012 Events
 
Firefox Mobile: Designing Ideas
Firefox Mobile: Designing IdeasFirefox Mobile: Designing Ideas
Firefox Mobile: Designing Ideas
 
Firefox 4 Party Opening
Firefox 4 Party OpeningFirefox 4 Party Opening
Firefox 4 Party Opening
 
著作權在你身邊,150 秒版
著作權在你身邊,150 秒版著作權在你身邊,150 秒版
著作權在你身邊,150 秒版
 
CC Workshop: Web Integration
CC Workshop: Web IntegrationCC Workshop: Web Integration
CC Workshop: Web Integration
 

Último

Último (20)

Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 

Webmaker Workshop: Appmaker in 60mins