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

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
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
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
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
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
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
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsHyundai Motor Group
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
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
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 

Recently uploaded (20)

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
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
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
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
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
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
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
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
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
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
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 

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