SlideShare a Scribd company logo
1 of 29
Download to read offline
Mobile Apps
                            Cross Platform
                              Using HTML, CSS, JavaScript




                                 Wolfram Kriesing, uxebu
                                   @wolframkriesing



Dienstag, 11. August 2009
JavaScript FrontEnd    AJAX
    Usability  UserExperience
       Browser CSS mobile Web2.0
        django  dojo OpenSource




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Types of Mobile "Apps"

                     • Native App (from "some" app store)
                     • Website
                            limited 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

Dienstag, 11. August 2009
Native Apps

                     • iPhone Objective-C
                     • Android, Blackberry Java
                     • Nokia Symbian C
                     • Sony Ericsson Java
                     • Window Mobile .NET
                            Cross Platform . . . Expensive + OUCH

   Wolfram Kriesing, uxebu      @wolframkriesing

Dienstag, 11. August 2009
Small apps.

                                  Very focused.

                             Many platforms.

   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Mobile Moment



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
HTML
                                          CSS
                                       JavaScript


   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 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

Dienstag, 11. August 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

Dienstag, 11. August 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

Dienstag, 11. August 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

Dienstag, 11. August 2009
What is a W3C Widget?

                     • HTML
                     • CSS
                     • JavaScript
                     • config.xml
                     • zip it
                     • rename to *.wgt

   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Almost for free


                     • Facebook widget
                     • Dashboard widget
                     • Website widget
                     • ...


   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Any Standards?



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
W3C Widget Spec


                     • specifies packaging




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
We want more!



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Native Access

                     • Camera
                     • Telephony
                     • Geo location
                     • Accelerometer
                     • Compass
                     • Contacts
                     • ...
   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Multiple Ways


                     • JIL Spec     http://www.jil.org/



                     • BONDI Spec          http://bondi.omtp.org/



                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
But they are just specs :-(




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Multiple Ways

                     • JIL Spec     http://www.jil.org/



                     • BONDI Spec          http://bondi.omtp.org/



                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/



                     • 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

Dienstag, 11. August 2009
Runtimes

                     • JIL Spec     http://www.jil.org/



                     • BONDI Spec          http://bondi.omtp.org/
                                                                                      Nokia S60

                     • W3C Spec        http://dev.w3.org/2006/waf/widgets-api/         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???
   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
PhoneGap
                            An express goal of the PhoneGap project
                                 is for the project to not exist.




                                                  Open Source

   Wolfram Kriesing, uxebu     @wolframkriesing

Dienstag, 11. August 2009
Distribution?



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores




                             http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
Stores



             443 apps
                                                         318 apps




   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009
Events

                       Hands on?

            28 Aug - Köln
        21-23 Sep - Düsseldorf




             http://eventninja.net/mobile


   Wolfram Kriesing, uxebu    @wolframkriesing

Dienstag, 11. August 2009
thx

                                    http://blog.uxebu.com

                                           Wolfram Kriesing, uxebu
                                              wolfram@uxebu.com
                                            http://twitter.com/uxebu
                                      http://twitter.com/wolframkriesing



   Wolfram Kriesing, uxebu   @wolframkriesing

Dienstag, 11. August 2009

More Related Content

Similar to Cross Platform Mobile Apps HTML CSS JS

HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09mihaiionescu
 
Torquebox rubyhoedown-2012
Torquebox rubyhoedown-2012Torquebox rubyhoedown-2012
Torquebox rubyhoedown-2012Lance Ball
 
Leweb09 Building Wave Robots
Leweb09 Building Wave RobotsLeweb09 Building Wave Robots
Leweb09 Building Wave RobotsPatrick Chanezon
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.jsKasey McCurdy
 
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
 
A web app in pure Clojure
A web app in pure ClojureA web app in pure Clojure
A web app in pure ClojureDane Schneider
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayWesley Hales
 
Toolset of Beansmile
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmileleondu
 
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Robert 'Bob' Reyes
 
Isomorphic JavaScript – future of the web
Isomorphic JavaScript – future of the webIsomorphic JavaScript – future of the web
Isomorphic JavaScript – future of the webSigma Software
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5John Reiser
 
RubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineRubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineFlorian Dutey
 

Similar to Cross Platform Mobile Apps HTML CSS JS (20)

the web is mobile
the web is mobilethe web is mobile
the web is mobile
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Torquebox rubyhoedown-2012
Torquebox rubyhoedown-2012Torquebox rubyhoedown-2012
Torquebox rubyhoedown-2012
 
Leweb09 Building Wave Robots
Leweb09 Building Wave RobotsLeweb09 Building Wave Robots
Leweb09 Building Wave Robots
 
The shift to the edge
The shift to the edgeThe shift to the edge
The shift to the edge
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
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...
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
 
A web app in pure Clojure
A web app in pure ClojureA web app in pure Clojure
A web app in pure Clojure
 
Txjs
TxjsTxjs
Txjs
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies Today
 
Toolset of Beansmile
Toolset of BeansmileToolset of Beansmile
Toolset of Beansmile
 
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
 
Isomorphic JavaScript – future of the web
Isomorphic JavaScript – future of the webIsomorphic JavaScript – future of the web
Isomorphic JavaScript – future of the web
 
Evolution of java script libraries
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
 
NullMQ @ PDX
NullMQ @ PDXNullMQ @ PDX
NullMQ @ PDX
 
Tomas Grails
Tomas GrailsTomas Grails
Tomas Grails
 
RubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineRubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipeline
 

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)
 

Recently uploaded

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfScience&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfjimielynbastida
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
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
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Recently uploaded (20)

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfScience&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
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
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
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
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

Cross Platform Mobile Apps HTML CSS JS

  • 1. Mobile Apps Cross Platform Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 2. JavaScript FrontEnd AJAX Usability UserExperience Browser CSS mobile Web2.0 django dojo OpenSource Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 3. Types of Mobile "Apps" • Native App (from "some" app store) • Website limited 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 Dienstag, 11. August 2009
  • 4. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform . . . Expensive + OUCH Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 5. Small apps. Very focused. Many platforms. Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 6. Mobile Moment Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 7. HTML CSS JavaScript Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 8. 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 Dienstag, 11. August 2009
  • 9. 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 Dienstag, 11. August 2009
  • 10. 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 Dienstag, 11. August 2009
  • 11. 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 Dienstag, 11. August 2009
  • 12. What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 13. Almost for free • Facebook widget • Dashboard widget • Website widget • ... Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 14. Any Standards? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 15. W3C Widget Spec • specifies packaging Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 16. We want more! Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 17. Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 18. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 19. But they are just specs :-( Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 20. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ • 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 Dienstag, 11. August 2009
  • 21. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://dev.w3.org/2006/waf/widgets-api/ 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??? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 22. PhoneGap An express goal of the PhoneGap project is for the project to not exist. Open Source Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 23. Distribution? Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 24. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 25. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 26. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 27. Stores 443 apps 318 apps Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 28. Events Hands on? 28 Aug - Köln 21-23 Sep - Düsseldorf http://eventninja.net/mobile Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009
  • 29. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing Dienstag, 11. August 2009