SlideShare une entreprise Scribd logo
1  sur  19
Choosing the Right Mobile
Development Platform (Part 2)




         @ChrisGriffith
What does jQuery Mobile do?


    jQuery Mobile makes it easy to develop user interfaces for mobile web apps.
Basic Structure
  <body>
     <div id="homePage" data-role="page">
         <div data-role="header">
             <h1>Header</h1>
         </div>
         <div data-role="content">
             <p>Content</p>
         </div>
         <div data-role="footer">
             <h4>Footer</h4>
         </div>
     </div>
  </body>
Basic Structure
Basic Structure
  <body>
       <div id="homePage" data-role="page">
             <div data-role="header">
                   <h1>Page Title</h1>
             </div>
             <div data-role="content">
                   <p>My page content</p>
                   <p><a href="#about">About this app</a></p>
             </div>
             <div data-role="footer">
                   <h4>Footer</h4>
             </div>
       </div>
       <div data-role="page" id="about">
             <div data-role="header">
                   <h1>About This App</h1>
             </div>
             <div data-role="content">
                   <p>This app rocks! <a href="#homePage">Go home</a></p>
             </div>
       </div>
  </body>
Performance
Performance


  $(document).bind("mobileinit", function() {
      $.mobile.defaultPageTransition = "none";
      $.mobile.defaultDialogTransition = "none";
  });
Device Access?

                 Limited

                 Device by device

                 But…

                 Getting better
Templating
Templating


  $('#hikeDetailsPage').live('pageshow', function(event) {
      var hikeDetailsHTML;

    hikeDetailsHTML =
  Mustache.to_html(hikeDetailsTemplate, currentHikeData);

        $('#hikeDetails').html(hikeDetailsHTML);
  });
Styling
iOS
iOS
Android
Android
This presentation continues in part 3

Contenu connexe

Tendances

Designing and Implementing a Multiuser Apps Platform
Designing and Implementing a Multiuser Apps PlatformDesigning and Implementing a Multiuser Apps Platform
Designing and Implementing a Multiuser Apps Platform
Apigee | Google Cloud
 

Tendances (20)

Introduction to jQueryMobile
Introduction to jQueryMobileIntroduction to jQueryMobile
Introduction to jQueryMobile
 
HTML5 and jQuery Mobile
HTML5 and jQuery MobileHTML5 and jQuery Mobile
HTML5 and jQuery Mobile
 
Las apps
Las appsLas apps
Las apps
 
Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!Ionic Framework: Let's build amazing apps. No Excuses!
Ionic Framework: Let's build amazing apps. No Excuses!
 
Services
ServicesServices
Services
 
Ionic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentIonic - Revolutionizing Hybrid Mobile Application Development
Ionic - Revolutionizing Hybrid Mobile Application Development
 
Fragmented Web Design
Fragmented Web DesignFragmented Web Design
Fragmented Web Design
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
Invading the home screen
Invading the home screenInvading the home screen
Invading the home screen
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 
Designing and Implementing a Multiuser Apps Platform
Designing and Implementing a Multiuser Apps PlatformDesigning and Implementing a Multiuser Apps Platform
Designing and Implementing a Multiuser Apps Platform
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
Intro to Mobile Development for Web iOS and Android
Intro to Mobile Development for Web iOS and AndroidIntro to Mobile Development for Web iOS and Android
Intro to Mobile Development for Web iOS and Android
 
How To Create One App For All Platforms using PhoneGap
How To Create One App For All Platforms using PhoneGapHow To Create One App For All Platforms using PhoneGap
How To Create One App For All Platforms using PhoneGap
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
 
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
 
Hybrid Apps, Ionic framework
Hybrid Apps, Ionic frameworkHybrid Apps, Ionic framework
Hybrid Apps, Ionic framework
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Hybrid app dev trends
Hybrid app dev trendsHybrid app dev trends
Hybrid app dev trends
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 

Similaire à Choosing the Right Mobile Development Platform (Part 2)

Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
Daniel Downs
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
James Pearce
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
Robert Nyman
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
yangdj
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
yangdj
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobile
doodoofish
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
NAVER D2
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 appspresso hands on lab
NAVER D2
 

Similaire à Choosing the Right Mobile Development Platform (Part 2) (20)

JQuery Mobile UI
JQuery Mobile UIJQuery Mobile UI
JQuery Mobile UI
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
 
Jquery mobile2
Jquery mobile2Jquery mobile2
Jquery mobile2
 
One Size Fits All
One Size Fits AllOne Size Fits All
One Size Fits All
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
 
Design Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGapDesign Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGap
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side Transformations
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobile
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 appspresso hands on lab
 

Plus de Chris Griffith

Plus de Chris Griffith (20)

Intro to Ionic Framework
Intro to Ionic FrameworkIntro to Ionic Framework
Intro to Ionic Framework
 
Electron: From Beginner to Pro
Electron: From Beginner to ProElectron: From Beginner to Pro
Electron: From Beginner to Pro
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic Development
 
Announcing StencilJS
Announcing StencilJSAnnouncing StencilJS
Announcing StencilJS
 
Beyond Ionic
Beyond IonicBeyond Ionic
Beyond Ionic
 
Essentials of Adobe Experience Design
Essentials of Adobe Experience DesignEssentials of Adobe Experience Design
Essentials of Adobe Experience Design
 
What is the Ionic Framework?
What is the Ionic Framework?What is the Ionic Framework?
What is the Ionic Framework?
 
Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)
 
Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)
 
Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)
 
Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)
 
Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 
Prototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersPrototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for Designers
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile Apps
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile Apps
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
 
Developing AIR for Android with Flash Professional
Developing AIR for Android with Flash ProfessionalDeveloping AIR for Android with Flash Professional
Developing AIR for Android with Flash Professional
 
Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5	Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5
 
Creating Compelling Mobile User Experiences
Creating Compelling Mobile User ExperiencesCreating Compelling Mobile User Experiences
Creating Compelling Mobile User Experiences
 

Dernier

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Dernier (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 

Choosing the Right Mobile Development Platform (Part 2)

  • 1. Choosing the Right Mobile Development Platform (Part 2) @ChrisGriffith
  • 2.
  • 3. What does jQuery Mobile do? jQuery Mobile makes it easy to develop user interfaces for mobile web apps.
  • 4. Basic Structure <body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body>
  • 6. Basic Structure <body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>My page content</p> <p><a href="#about">About this app</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>About This App</h1> </div> <div data-role="content"> <p>This app rocks! <a href="#homePage">Go home</a></p> </div> </div> </body>
  • 8. Performance $(document).bind("mobileinit", function() { $.mobile.defaultPageTransition = "none"; $.mobile.defaultDialogTransition = "none"; });
  • 9. Device Access? Limited Device by device But… Getting better
  • 11. Templating $('#hikeDetailsPage').live('pageshow', function(event) { var hikeDetailsHTML; hikeDetailsHTML = Mustache.to_html(hikeDetailsTemplate, currentHikeData); $('#hikeDetails').html(hikeDetailsHTML); });
  • 13.
  • 14. iOS
  • 15. iOS
  • 18.