SlideShare a Scribd company logo

App vs. Widget, HTML5 Apps - cross platform

•
•
W
wolframkriesing

Slides from the Mobile Moday Developer Day Munich about "App vs. Widget - HTML5 Apps". We show how to get to multiple platforms with the standard web technologies HTML, JavaScript and CSS.

TechnologyDesign
1 of 51
Download to read offline
App vs. Widget HTML5 Apps Wolfram Kriesing uxebu Montag, 17. Mai 2010
App vs. Widget HTML5 Apps Wolfram Kriesing uxebu Montag, 17. Mai 2010
We open the mobile web. Montag, 17. Mai 2010
Montag, 17. Mai 2010
Montag, 17. Mai 2010
Montag, 17. Mai 2010
Landscape http://www.flickr.com/photos/tillwe/146242691/ Montag, 17. Mai 2010
Landscape http://www.flickr.com/photos/tillwe/146242691/ Montag, 17. Mai 2010
30th July 2009 14 Stores 23rd September 2009 23 Stores 2nd December 2009 26 Stores http://bit.ly/distimo-appstores Montag, 17. Mai 2010
Cross Platform Montag, 17. Mai 2010
Montag, 17. Mai 2010
Objective-C Symbian C Java Java .NET ... Montag, 17. Mai 2010
HTML Montag, 17. Mai 2010
Engine of the web http://www.flickr.com/photos/robadob/88901885/ Montag, 17. Mai 2010
iPhone - First usable mobile browser http://www.flickr.com/photos/chris_radcli!/2947219465/ Montag, 17. Mai 2010
http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/ Montag, 17. Mai 2010
Montag, 17. Mai 2010
App Store without Apple! Montag, 17. Mai 2010
What is a Widget? Montag, 17. Mai 2010
Montag, 17. Mai 2010
}? Montag, 17. Mai 2010
Layout index.html Design style.css AJAX Library Database Montag, 17. Mai 2010
Layout index.html W3C Widget = Design Icon style.css Configuration AJAX Library config.xml Database Montag, 17. Mai 2010
What is a W3C Widget? Montag, 17. Mai 2010
What is a W3C Widget? Montag, 17. Mai 2010
What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Montag, 17. Mai 2010
DONE! http://www.flickr.com/photos/sundazed/2704578067/ Montag, 17. Mai 2010
On any phone? Montag, 17. Mai 2010
HTML tive na Montag, 17. Mai 2010
W3C Widgets ti ve na HTML tive na Montag, 17. Mai 2010
W3C Widgets ...yes not purely but great HTML support Montag, 17. Mai 2010
Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Montag, 17. Mai 2010
Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Montag, 17. Mai 2010
A Phone is ... Montag, 17. Mai 2010
http://www.flickr.com/photos/kratz/1984004945/ Montag, 17. Mai 2010
http://www.flickr.com/photos/mbiddulph/3087388964/ Montag, 17. Mai 2010
http://www.flickr.com/photos/redstamp/4222841946/ Montag, 17. Mai 2010
• Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Montag, 17. Mai 2010
Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Montag, 17. Mai 2010
Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Montag, 17. Mai 2010
PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Montag, 17. Mai 2010
http://phonegap.pbworks.com/Roadmap Montag, 17. Mai 2010
EventNinja Montag, 17. Mai 2010
Events, Layout index.html a Calendar Design Icon style.css Database Configuration AJAX Library config.xml Montag, 17. Mai 2010
http://bit.ly/webdev-events Montag, 17. Mai 2010
Montag, 17. Mai 2010
Montag, 17. Mai 2010
Montag, 17. Mai 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Montag, 17. Mai 2010
Want to see it in action? Download it from your store. Contact us. Montag, 17. Mai 2010
thx http://uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Montag, 17. Mai 2010

Recommended

Widget areas
Widget areasWidget areas
Widget areasWordCamp
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget CampPeter-Paul Koch
 
The touch events
The touch eventsThe touch events
The touch eventsPeter-Paul Koch
 
Exemples de Story Boards
Exemples de Story BoardsExemples de Story Boards
Exemples de Story Boardsilustraciollotja
 
Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile webPeter-Paul Koch
 
Solucionari quadernet 2 t 5
Solucionari quadernet 2 t 5Solucionari quadernet 2 t 5
Solucionari quadernet 2 t 5mestrejaume5
 
Widget Platform
Widget PlatformWidget Platform
Widget Platformjosemataf
 
Qt Widget In-Depth
Qt Widget In-DepthQt Widget In-Depth
Qt Widget In-Depthaccount inactive
 

Recommended

Widget areas
Widget areasWidget areas
Widget areasWordCamp
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget CampPeter-Paul Koch
 
The touch events
The touch eventsThe touch events
The touch eventsPeter-Paul Koch
 
Exemples de Story Boards
Exemples de Story BoardsExemples de Story Boards
Exemples de Story Boardsilustraciollotja
 
Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile webPeter-Paul Koch
 
Solucionari quadernet 2 t 5
Solucionari quadernet 2 t 5Solucionari quadernet 2 t 5
Solucionari quadernet 2 t 5mestrejaume5
 
Widget Platform
Widget PlatformWidget Platform
Widget Platformjosemataf
 
Qt Widget In-Depth
Qt Widget In-DepthQt Widget In-Depth
Qt Widget In-Depthaccount inactive
 
Widget Ecosystem and Widget Economy
Widget Ecosystem and Widget Economy Widget Ecosystem and Widget Economy
Widget Ecosystem and Widget Economy wehome.me, a home sharing on blockchain owned by hosts and guests
 
A Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime WebA Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime WebHilary Mason
 
Apple earnings q4-2010
Apple earnings q4-2010Apple earnings q4-2010
Apple earnings q4-2010O'Reilly Media
 
Mate
MateMate
MateJohn Blanco
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSteve Souders
 
Sharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's StorySharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's StoryJoe Brockmeier
 
Hoppala at XMediaLab
Hoppala at XMediaLabHoppala at XMediaLab
Hoppala at XMediaLabMarc René Gardeya
 
Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012Ronald Lenz
 
Voice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, GermanyVoice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, GermanyMarc René Gardeya
 
Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016Andrew Shotland
 
2009 Research Where
2009 Research Where2009 Research Where
2009 Research WhereO'Reilly Media
 
Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014patrickVinson
 
But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?gagravarr
 
AR project at San Diego's School in the Park
AR project at San Diego's School in the ParkAR project at San Diego's School in the Park
AR project at San Diego's School in the ParkMarc René Gardeya
 
Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation wgstoddard
 
12 13 what is desktop virtualization
12 13 what is desktop virtualization12 13 what is desktop virtualization
12 13 what is desktop virtualizationO'Reilly Media
 
Open Source Craft at Twitter
Open Source Craft at TwitterOpen Source Craft at Twitter
Open Source Craft at TwitterChris Aniszczyk
 
JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionswolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeisterwolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjswolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindwolframkriesing
 

More Related Content

Viewers also liked

A Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime WebA Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime WebHilary Mason
 
Apple earnings q4-2010
Apple earnings q4-2010Apple earnings q4-2010
Apple earnings q4-2010O'Reilly Media
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSteve Souders
 
Sharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's StorySharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's StoryJoe Brockmeier
 
Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012Ronald Lenz
 
Voice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, GermanyVoice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, GermanyMarc René Gardeya
 
Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016Andrew Shotland
 
Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014patrickVinson
 
But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?gagravarr
 
AR project at San Diego's School in the Park
AR project at San Diego's School in the ParkAR project at San Diego's School in the Park
AR project at San Diego's School in the ParkMarc René Gardeya
 
Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation wgstoddard
 
12 13 what is desktop virtualization
12 13 what is desktop virtualization12 13 what is desktop virtualization
12 13 what is desktop virtualizationO'Reilly Media
 
Open Source Craft at Twitter
Open Source Craft at TwitterOpen Source Craft at Twitter
Open Source Craft at TwitterChris Aniszczyk
 

Viewers also liked (17)

Widget Ecosystem and Widget Economy
Widget Ecosystem and Widget Economy Widget Ecosystem and Widget Economy
Widget Ecosystem and Widget Economy
 
A Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime WebA Data-driven Look at the Realtime Web
A Data-driven Look at the Realtime Web
 
Apple earnings q4-2010
Apple earnings q4-2010Apple earnings q4-2010
Apple earnings q4-2010
 
Mate
MateMate
Mate
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
 
Sharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's StorySharing Apache's Goodness: How We Should be Telling Apache's Story
Sharing Apache's Goodness: How We Should be Telling Apache's Story
 
Hoppala at XMediaLab
Hoppala at XMediaLabHoppala at XMediaLab
Hoppala at XMediaLab
 
Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012Citizen Science on the Move conference 25, 26 & 27 june 2012
Citizen Science on the Move conference 25, 26 & 27 june 2012
 
Voice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, GermanyVoice+IP Conference Frankfurt, Germany
Voice+IP Conference Frankfurt, Germany
 
Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016Search Different Understanding Apple's New Search Engine State of Search 2016
Search Different Understanding Apple's New Search Engine State of Search 2016
 
2009 Research Where
2009 Research Where2009 Research Where
2009 Research Where
 
Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014Sxsw speaker submission_effectiveui_07252014
Sxsw speaker submission_effectiveui_07252014
 
But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?But we're already open source! Why would I want to bring my code to Apache?
But we're already open source! Why would I want to bring my code to Apache?
 
AR project at San Diego's School in the Park
AR project at San Diego's School in the ParkAR project at San Diego's School in the Park
AR project at San Diego's School in the Park
 
Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation Open Source at the Apache Software Foundation
Open Source at the Apache Software Foundation
 
12 13 what is desktop virtualization
12 13 what is desktop virtualization12 13 what is desktop virtualization
12 13 what is desktop virtualization
 
Open Source Craft at Twitter
Open Source Craft at TwitterOpen Source Craft at Twitter
Open Source Craft at Twitter
 

More from wolframkriesing

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionswolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeisterwolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjswolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindwolframkriesing
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheetswolframkriesing
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the messwolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meantwolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburgwolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevconwolframkriesing
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)wolframkriesing
 

More from wolframkriesing (20)

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functions
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeister
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behind
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
 
Baby steps
Baby stepsBaby steps
Baby steps
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
 

App vs. Widget, HTML5 Apps - cross platform