Your SlideShare is downloading. ×
How I Made PocketDDD
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How I Made PocketDDD

1,404
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,404
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. How I Made PocketDDD
    Ross Scott
    11/06/2011
    1
    3
    2
    Go
    1
    Ross Scott
    t: @RossDScott
    e: ross.d.scott@gmail.com
  • 2. Before how, there’s why
    Ross Scott
    2
    VS
    11/06/2011
  • 3. Ross Scott
    3
    What are the requirements?
    • Lightweight
    • 4. Offline
    • 5. Local storage
    • 6. Mobile look and feel
    11/06/2011
  • 7. Ross Scott
    4
    Take a look at the app
    11/06/2011
  • 8. Ross Scott
    5
    What is HTML5?
    11/06/2011
  • 9. Ross Scott
    6
    Key Features of HTML5
    • Offline & Storage
    • 10. Connectivity
    • 11. Performance & Integration
    11/06/2011
  • 12. Data Attributes
    Ross Scott
    7
    Var id = $(this).children(‘.hiddenId’).first().val();
    <input data-slotid=“3“ />
    Var id = $(this).data(‘slotid’);
    11/06/2011
  • 13. Local Storage
    Ross Scott
    15/02/2011
    8
    if (checked) {
    localStorage['track:' + slotId] = sessionId;
    }
    else {
    localStorage['track:' + slotId] = null;
    }
  • 14. Offline Application
    Ross Scott
    9
  • 15. Offline Application
    Ross Scott
    10
    PocketDDD.manifest
    CACHE MANIFEST
    #Version 13
    Content/Pocket.css
    Scripts/PocketViewEvent.js
    NETWORK:
    http://api.twitter.com/
    FALLBACK:
    Error.html
    11/06/2011
  • 16. Offline Application
    Ross Scott
    11
    11/06/2011
  • 17. Offline Application
    Ross Scott
    12
    This slide is slightly different than the last one, honest!
    11/06/2011
  • 18. Lightweight
    Ross Scott
    13
    • MVC + EF Code First
    • 19. JSON View Model
    • 20. Everything else generated client-side
    11/06/2011
  • 21. jQuery Templates
    Ross Scott
    14
    Define a HTML Fragment:
    <script id=“speakerItem" type="text/x-jQuery-tmpl">
    <li>
    <a href="" data-sessionid="${Id}">
    <h3>${Speaker}</h3>
    </a>
    </li>
    </script>
    11/06/2011
  • 22. jQuery Templates
    Ross Scott
    15
    Apply an object:
    varspeakerList = {Id : 4, Speaker : “George Adamson”};
    vargenHTML = $('#speakerItem').tmpl(speakerList);
    $('#speakerList').append(genHTML);
    11/06/2011
  • 23. Ross Scott
    16
    • Target wide variety of platforms
    • 24. Automatic initialization
    • 25. Theming
    11/06/2011
  • 26. jQuery Mobile
    Ross Scott
    17
    Anatomy of a Page:
    <div id=“home” data-role="page">
    <div data-role="header">...</div>
    <div data-role="content">...</div>
    <div data-role="footer">...</div>
    </div>
    Navigation:
    $.mobile.changePage(‘#home’);
    11/06/2011
  • 27. jQuery Mobile
    Ross Scott
    18
    Lists:
    <ul data-role="listview" data-inset="true“>
    <li data-role="list-divider“>15:40 to 16:40</li>
    <li href=“#speakerA”>This Androids Life<li>
    </ul>
    $('#lst’).listview('refresh');
    11/06/2011
  • 28. jQuery Mobile
    Ross Scott
    19
    Links & Buttons:
    <a href=“#home" data-role="button">Home</a>
    <a data-role="button" data-icon="delete">Delete</a>
    <select data-theme="b”>
    <option>Agenda</option>
    <option>My Day</option>
    <option>Speakers</option>
    </select>
    11/06/2011
  • 29. The End
    Ross Scott
    20
    11/06/2011

×