SlideShare une entreprise Scribd logo

Cross Platform Mobile Apps Using HTML, CSS and JavaScript

•
•
W
wolframkriesing

The document discusses developing cross-platform mobile apps using HTML, CSS, JavaScript and frameworks like PhoneGap. It notes that native apps can be expensive to develop for each platform, while cross-platform mobile apps allow developing once for multiple platforms using web technologies. The document also discusses standards like W3C widgets and specifications that aim to provide access to device functionality through a common API.

Technologie
1  sur  34
Télécharger pour lire hors ligne
Mobile Apps Cross Platform Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
JavaScript FrontEnd AJAX Usability UserExperience Browser CSS django dojo mobile Web2.0 widgets OpenSource Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Stores 30th July 2009 14 Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Stores 23rd30th July 2009 September 2009 23 Stores 14 Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Wanna write native Apps for each? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform Expensive and OUCH anyway Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Types of Mobile "Apps" Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Types of Mobile "Apps" • Preinstalled • Native App (from "some" app store) • Websitelimited access to phone resources • W3C Widget access to what the widget runtime provides • W3C Widget wrapped as native app depends on it's runtime Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Small apps. Very focused. Many platforms. Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Mobile Moment Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
we le l l-k p no s im wn HTML te st easy to CSS simp le te xt JavaScript easy velop to d fast to de evel op Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no • Offline not really Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
W3C Widgets http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no yes • Offline not really really Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
What is a W3C Widget? • Native app on the phone • Not a website! • Can do AJAX, SVG, CSS Transitions, etc. • Has it's own runtime (mostly) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Any Standards? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
W3C Widget Spec • specifies packaging Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
We want more! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
But they are just specs :-( Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Some numbers • iPhone App = 364 kB • JavaScript, HTML, CSS, media = 124 kB • that means PhoneGap+SDK foot print = 240 kB Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Distribution? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009

Recommandé

Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009
Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009
Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009wolframkriesing
 
Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009wolframkriesing
 
Mobile Apps Cross Platform - Webmontag Frankfurt 2009
Mobile Apps Cross Platform - Webmontag Frankfurt 2009Mobile Apps Cross Platform - Webmontag Frankfurt 2009
Mobile Apps Cross Platform - Webmontag Frankfurt 2009wolframkriesing
 
DIAGRAMA DE RED
DIAGRAMA DE REDDIAGRAMA DE RED
DIAGRAMA DE REDKarina Navar
 
Marketing and Advertising Your App: Driving Awareness and Promoting Downloads
Marketing and Advertising Your App: Driving Awareness and Promoting DownloadsMarketing and Advertising Your App: Driving Awareness and Promoting Downloads
Marketing and Advertising Your App: Driving Awareness and Promoting DownloadsPhunware
 
How to market your app
How to market your appHow to market your app
How to market your appOuriel Ohayon
 
Mobile apps marketing
Mobile apps marketingMobile apps marketing
Mobile apps marketingCogniter Technologies
 
Netflix
NetflixNetflix
NetflixMovies Apps Hub
 

Recommandé

Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009
Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009
Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009wolframkriesing
 
Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009wolframkriesing
 
Mobile Apps Cross Platform - Webmontag Frankfurt 2009
Mobile Apps Cross Platform - Webmontag Frankfurt 2009Mobile Apps Cross Platform - Webmontag Frankfurt 2009
Mobile Apps Cross Platform - Webmontag Frankfurt 2009wolframkriesing
 
DIAGRAMA DE RED
DIAGRAMA DE REDDIAGRAMA DE RED
DIAGRAMA DE REDKarina Navar
 
Marketing and Advertising Your App: Driving Awareness and Promoting Downloads
Marketing and Advertising Your App: Driving Awareness and Promoting DownloadsMarketing and Advertising Your App: Driving Awareness and Promoting Downloads
Marketing and Advertising Your App: Driving Awareness and Promoting DownloadsPhunware
 
How to market your app
How to market your appHow to market your app
How to market your appOuriel Ohayon
 
Mobile apps marketing
Mobile apps marketingMobile apps marketing
Mobile apps marketingCogniter Technologies
 
Netflix
NetflixNetflix
NetflixMovies Apps Hub
 
NoTube User Model slides
NoTube User Model slidesNoTube User Model slides
NoTube User Model slidesDan Brickley
 
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...eCommConf
 
MVVM frameworks - MvvmCross
MVVM frameworks - MvvmCrossMVVM frameworks - MvvmCross
MVVM frameworks - MvvmCrossFlavius-Radu Demian
 
SydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin FormsSydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin FormsAlec Tucker
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09mihaiionescu
 
Toolset of Beansmile
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmileleondu
 
M365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in StigmaM365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in StigmaCameron Dwyer
 
The shift to the edge
The shift to the edgeThe shift to the edge
The shift to the edgeJakub Wadolowski
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVMJames Montemagno
 
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
 
Baby steps
Baby stepsBaby steps
Baby stepswolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheetswolframkriesing
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for realwolframkriesing
 
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
 

Contenu connexe

Similaire à Cross Platform Mobile Apps Using HTML, CSS and JavaScript

NoTube User Model slides
NoTube User Model slidesNoTube User Model slides
NoTube User Model slidesDan Brickley
 
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...eCommConf
 
SydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin FormsSydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin FormsAlec Tucker
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09mihaiionescu
 
Toolset of Beansmile
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmileleondu
 
M365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in StigmaM365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in StigmaCameron Dwyer
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVMJames Montemagno
 

Similaire à Cross Platform Mobile Apps Using HTML, CSS and JavaScript (9)

NoTube User Model slides
NoTube User Model slidesNoTube User Model slides
NoTube User Model slides
 
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
Jay Phillips's Presentation at Emerging Communication Conference & Awards 200...
 
MVVM frameworks - MvvmCross
MVVM frameworks - MvvmCrossMVVM frameworks - MvvmCross
MVVM frameworks - MvvmCross
 
SydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin FormsSydMobNet July 2014: Xamarin 3 & Xamarin Forms
SydMobNet July 2014: Xamarin 3 & Xamarin Forms
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
 
Toolset of Beansmile
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmile
 
M365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in StigmaM365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
M365 Saturday Sydney 2019 - Dispelling the Office Add-in Stigma
 
The shift to the edge
The shift to the edgeThe shift to the edge
The shift to the edge
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVM
 

Plus de 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
 

Plus de 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)
 

Dernier

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
"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
 
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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
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
 
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
 
"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
 
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
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
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
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
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
 

Dernier (20)

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
"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
 
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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
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
 
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
 
"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...
 
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
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
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
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
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
 
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
 
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
 

Cross Platform Mobile Apps Using HTML, CSS and JavaScript

  • 1. Mobile Apps Cross Platform Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 2. JavaScript FrontEnd AJAX Usability UserExperience Browser CSS django dojo mobile Web2.0 widgets OpenSource Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 3. Stores 30th July 2009 14 Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 4. Stores 23rd30th July 2009 September 2009 23 Stores 14 Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 5. Wanna write native Apps for each? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 6. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform Expensive and OUCH anyway Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 7. Types of Mobile "Apps" Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 8. Types of Mobile "Apps" • Preinstalled • Native App (from "some" app store) • Websitelimited access to phone resources • W3C Widget access to what the widget runtime provides • W3C Widget wrapped as native app depends on it's runtime Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 9. Small apps. Very focused. Many platforms. Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 10. Mobile Moment Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 11. we le l l-k p no s im wn HTML te st easy to CSS simp le te xt JavaScript easy velop to d fast to de evel op Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 12. Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no • Offline not really Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 13. W3C Widgets http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no yes • Offline not really really Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 14. What is a W3C Widget? • Native app on the phone • Not a website! • Can do AJAX, SVG, CSS Transitions, etc. • Has it's own runtime (mostly) Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 15. What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 16. What is a W3C Widget? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 17. What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 18. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 19. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 20. Any Standards? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 21. W3C Widget Spec • specifies packaging Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 22. We want more! Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 23. Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 24. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 25. But they are just specs :-( Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 26. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 27. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 28. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 29. Some numbers • iPhone App = 364 kB • JavaScript, HTML, CSS, media = 124 kB • that means PhoneGap+SDK foot print = 240 kB Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 30. Distribution? Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 31. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 32. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 33. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009
  • 34. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Freitag, 25. September 2009