Pro Yearly is on sale from $80 to $50! »

Stacking the Card Deck: Reclaiming Our Mobile Future with HTML5-based Cards

Stacking the Card Deck: Reclaiming Our Mobile Future with HTML5-based Cards

***NEW: Full video of this talk is now available at http://cardstack.io/video1

Designers have looked to card-based UI to present units of content responsively across a wide range of mobile devices and screen sizes. We see this with Twitter cards, Google Now cards, Passbook passes, Pinterest tiles, Facebook Paper, etc. While these popular examples have brought the card metaphor to the mainstream, they represent only a fraction of the true potential of cards.

When done right, a card looks like responsive web content, works like a focused mobile app, and feels like a saved file that you can share and reuse. As these “cards” become more interactive, they go from being just concentrated bits of content and turn into mini-apps that can be embedded, capture and manipulate data, or even process transactions.

While discussions in the field have centered on the card metaphor as a UX design pattern, it is time to explore the architecture beneath the cards, to see whether cards built on the foundation of HTML5, CSS3, and modern JavaScript, can re-inject the ethos of the Open Web back into mobile development and turn back the tide against proprietary platform lock-ins and app silos.

Drawing upon the work he led at McGraw-Hill Education Labs on an open e-learning and e-publishing platform, Christopher Tse, a technologist/designer, will show how HTML5 cards built by different individuals and companies can be mixed and matched by end users to tell stories, to work collaboratively, and to conduct business.

Chris will present a set of card interaction patterns would help designers evaluate the right mix of cards (in terms of size, variety, purpose, relationship, and intent) for different workflow scenarios. On the technology front, Chris will introduce the “4Rs”, which stands for Render, React, Restore, and Report, as the four basic services card-based applications need for interoperability. He will introduce a few promising open source libraries that give developers the necessary plumbing to get a jumpstart on their next card-based project.

This talk was originally presented at NYC CSS/UX Meetup on June 5, 2014 at AOL/HuffingtonPost in New York City.
http://www.meetup.com/nyccssux/events/179830102/

Full video of the talk will be made available soon.

For Developers:

Tom Dale (@tomdale) and Luke Melia (@lukemelia) presented the technical foundations on HTML5 Cards at the Boston JavaScript Meetup in October 2013.

Cards are the Future of the Web: How Do We Build them? [Hangout on Air]
https://www.youtube.com/watch?v=pwYwLBWvy7Q

For Designers:

Khoi Vinh (@khoi) is curating a collection of card user interfaces on Pinterest. This is the definitive gallery of all things cards: http://www.pinterest.com/khoi/card-user-interfaces

Resources & Links:

Glazier [GitHub]: https://github.com/yapplabs/glazier
Glazier [Live Demo]: http://www.glazier.io
Oasis.js [Intro Deck]: https://speakerdeck.com/christse/oasis-dot-js-sneak-peek
Oasis.js [GitHub]: https://github.com/tildeio/oasis.js
Conductor.js [GitHub]: http://conductorjs.github.io
Grid Style Sheets: http://gridstylesheets.org
ZINC: Coming Soon...
CardStack: http://cardstack.io

A collection of essays on Cards: https://medium.com/understanding-the-future-of-the-web-its-cards

Join the NYC CSS/UX group for announcements for the Card Designathon:
http://www.meetup.com/nyccssux/

Follow @christse on Twitter for updates on the Card Movement
http://twitter.com/christse

Join the Card Movement at http://cardstack.io

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

June 05, 2014
Tweet

Transcript

  1. Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based

    Cards Chris Tse Presented by Follow @christse on Twitter AOL + Huffington Post Event Location NYC CSS/UX Meetup Meetup Organizer Presentation Date June 5, 2014
  2. Agenda CardMetaphor Cardruntime Cardmovement UI/UX Code Network

  3. Cardmetaphor

  4. Cardmetaphor Google Now On Mobile: Apple Passbook Tinder Pinterest Facebook

    Paper via @khoi
  5. Citia Storehouse Flipboard Evernote Salesforce1 Cloud Magic via @khoi

  6. Cardmetaphor On The Web: Twitter Stack Exchange Vox via @khoi

  7. New MySpace Google+ Burger King / Rebel Mouse Pinterest Storify

  8. Cardmetaphor On The Desktop: Windows 8 Os X

  9. So, what makes something a ‘card’?

  10. Form? • “Small” • “Self-contained” • “Concentrated”

  11. Form? Function? • “Small” • “Self-contained” • “Concentrated” • “Easy

    to skim” • “Responsive” • “Ready to share”
  12. Small

  13. Small Size

  14. Small Size

  15. Large

  16. Size

  17. Small Size

  18. Large Size

  19. Size medium

  20. Cardmetaphor Small LARGE medium now Size

  21. Size

  22. Size

  23. SMALL MEDIUM LARGE XL Size

  24. Cardmetaphor doesn’t matter Size

  25. Cardmetaphor doesn’t matter Size It’s about Power

  26. Power via @khoi To See the Gist

  27. Power “Your connecting flight is late. You may have time

    to get a latte.” Flight Tracker via @khoi To See the Gist
  28. Power “Before you call, know that a $10,000 deal is

    on the line.” Cloud Magic via @khoi To See the Gist
  29. Power Cloud Magic via @khoi To See the Gist

  30. Power “I know what I’m getting myself into if I

    flip this open.” To See the Gist Citia
  31. Power To Act Upon it

  32. Power “Don’t you want to watch this video?” “Proclaim your

    love about Sricaha” “Don’t show me again.” “Tell your friends you like Sriracha!” “Find out what’s the big deal about Sriracha.” “Gotta blog this.” “Defend Sriracha!” Facebook Newsfeed To Act Upon it
  33. Power Facebook for IOS Source: http://techcrunch.com/2014/05/14/facebook-now/ via @khoi After you

    post this photo at Yosemite See who else is here And what they’ve been doing here To Act Upon it
  34. Power Jelly via @khoi “Your next action is either answer

    or forward. Choose one now.” To Act Upon it
  35. Power via @khoi Jelly “Your question is answered. Don’t you

    want to share your gratitude?” To Act Upon it
  36. Power To Act Upon it “I better spend more time

    reviewing these DNA things.” Medici for Ipad
  37. Power To Make Something

  38. Power Google+ Link Google+ Events To Make Something

  39. Google+ Photo Power To Make Something

  40. Google+ Photo Power To Make Something

  41. Google+ Photo

  42. Cardmetaphor Power

  43. Cardmetaphor Power

  44. Cardmetaphor Power To See The gist

  45. Cardmetaphor Power To See The gist To Act Upon it

  46. Cardmetaphor Power To See The gist To Act Upon it

    To Make Something
  47. Cardmetaphor Power

  48. Cardmetaphor

  49. Have Different Sizes & Powers Cards

  50. Have Different Sizes & Powers Have Different structure & Mixture

    Containers Cards
  51. Cards Like Pinterest Containers

  52. Cards Like Pinterest “Board” Structure

  53. Cards Like Pinterest “Board” Photo Photo Photo Photo Photo Photo

    Photo Photo Photo Photo Photo Photo Structure
  54. Cards Like Facebook “feed” Video Text Photo Album Ads Events

    Messages
  55. Cards Like Google Now “Stack” Map BOARDING PASS WEATHER NEXT

    APPOINTMENT REMINDER
  56. Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie

    Ticket Starbucks Card Target Coupon Starwood Loyalty Card
  57. Cards Like FlipBoard “Collage” Photo ALBUM ARTICLE TWEET VIDEO IMAGE

    FACEBOOK POST BLOG POST ARTICLE mixture
  58. Cards Like Storify “Page” HEADLINE VIDEO TWEET PODCAST Text

  59. Cards Like Project Medici “Tree” ebook Excerpt Lecture Video Quiz

    PDF Paper Slide Deck Document Video Photo Document Lesson Lesson
  60. Instructor can mix and match different cards to shape the

    curriculum tree. Medici Builder metaphor Card
  61. Instructor can mix and match different cards to shape the

    curriculum tree. Medici Builder metaphor Card
  62. Students can navigate the curriculum structure curated by the instructor

    and access the mixture of cards from tablets or the Web. metaphor Card Medici for Ipad
  63. metaphor Card Medici for Ipad Course Topic Lesson Card

  64. metaphor Card Medici for Ipad Course Topic Lesson Card

  65. metaphor Card Medici for Ipad Course Topic Lesson Card

  66. metaphor Card Medici for Ipad Course Topic Lesson Card

  67. metaphor Card Medici for Ipad Course Topic Lesson Card

  68. metaphor Card Medici for Ipad Course Topic Lesson Card

  69. metaphor Card Medici for Ipad Course Topic Lesson Card

  70. Cardmetaphor Course Lesson Medici for Ipad Card

  71. Cardmetaphor Course Lesson Card Native Platform Medici for Ipad

  72. Web Platform Cardmetaphor Course Lesson Card Native Platform Medici for

    Ipad
  73. Web Platform Cardmetaphor Course Lesson Card Native Platform Medici for

    Ipad
  74. Cardmetaphor Course Lesson Card Web Platform Web Platform Medici Builder

  75. Cardmetaphor Web Platform Card Container

  76. Cardmetaphor Web Platform Quiz Video Podcast Game Simulation Article Card

    Container
  77. CardRuntime

  78. CardRuntime Native App Start with a normal native app, even

    an existing one that is already in the App Store.
  79. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE That app probably already has a built-in browser to consume mobile-optimized web pages.
  80. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime Add a Card Runtime, which provides a bi-directional communication channel along with set of contracts, so that...
  81. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Cards You can embed HTML5- based cards, built by you or a third-party that extends the capability of your app experience.
  82. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Objective-C JavaScript JavaScript JavaScript
  83. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C JavaScript JavaScript JavaScript
  84. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  85. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  86. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  87. CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card 1 Render to Size/mode 2 React to Actions/events 3 Restore saved states 4 Report Metadata
  88. Render to Size/mode 1 CardRuntime Image Full Content SMALL List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Medium Large Description Title
  89. Render to Size/mode 1 CardRuntime Image Full Content Shrink List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Expand Fill Screen Description Title
  90. Render to Size/mode 1 CardRuntime Image Full Content Shrink List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Expand Fill Screen Description Title SAVE Edit mode
  91. Restore saved states 2 CardRuntime AAPL Stock Price 2006 2010

    From To { “symbol”: “AAPL”, “from”: “2006”, “to”: “2010”, } Store into Restore from Card STATE Remote Stock Data \
  92. Restore saved states 2 CardRuntime Ben Jolley benjolley@coolstartup.io I have

    noticed that our invoices are not getting paid on time. Are we following up to with your client to remind them? Let me know when you have done that. INVOICE AGE CARD Snapshot Live Data Apr 25, 2014 Card SNAPSHOT Payment Terms Unpaid Count Paid Count 0 29 0 1 17 2
  93. React to Actions/events 3 CardRuntime Current Time Playback finished IF

    playback finishes THEN start playing next video ALWAYS remember the time of the playback time Video Playlist Vimeo Card Start Playback YouTube Card VEVO Card CNN Video Card HBO GO Card
  94. REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 $1,223.41 USD 09/07/2012 $1,223.41 USD 09/07/2013
  95. REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 $1,223.41 USD 09/07/2012 $1,223.41 USD 09/07/2013
  96. REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED
  97. REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED
  98. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED REport Metadata 4 25 25 W Hotels NYC @WHotelsNYC Thank you for your stay from 9/4 to 9/7. Hope to see you again! CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2013 W New York 541 Lexington Avenue, New York, New York 10022 • United States • Map Phone: (212) 755 1200 Fax: (212) 319 8344 Thank you for staying with us. RECEIPT Aloft Milwaukee Downtown 1230 Old World Third St Milwaukee, WI 53212 414-226-0122 / 414-266-0133 http://www.starwood.com/ Mr. Stoltz, Robert Page Number 4 Invoice Nbr 1000009494 1515 N Wakefield St Guest Number 58912 Arrive Date 07-01-2011 Arlington, VA 22207- 2137 Folio ID A Depart Date 07-05-2011 No. Of Guest 2 Room Number 2001 Club Account SPG - A41911610734 Time 07-06-2011 03:08 Duplicate Invoice EXPENSE SUMMARY REPORT Currency: USD Date Food/Bev Telephone Misc Room/Tax Other Total Payment 09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00 09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00 09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00 09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00 09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97 09-06-2012 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ -0.00 Total $4.71 $0.00 $92.00 $477.48 $2.78 $576.97 $ -576.97 Aloft Milwaukee Downtown 1230 Old World Third St Milwaukee, WI 53212 414-226-0122 / 414-266-0133 http://www.starwood.com/ Mr. Dale, Tom Page Number 1 Invoice Nbr 1000321123 San Francisco, CA Guest Number 58912 Arrive Date 09-01-2012 Folio ID A Depart Date 09-06-2012 No. Of Guest 2 Room Number 2001 Club Account SPG - A419321810734 Time 09-06-2012 03:08 Date Food/Bev Telephone Misc Room/Tax Other Total Payment 09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00 09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00 09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00 09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00 09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97
  99. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED REport Metadata 4
  100. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A card is:
  101. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode A card is:
  102. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A card is:
  103. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A FILE 3 Restore to Saved States A card is:
  104. My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A FILE 3 Restore to Saved States An API 4 REport MetaData A card is:
  105. Live Demo CardRuntime

  106.  197 GRAND ST, 6S NEW YORK, NY 10013 Developed

    By Designed by CardRuntime
  107. CardMovement

  108. CardMovement UI Code Data = + Card

  109. CardMovement UI Code Data = + Card JS N

  110. CardMovement The most important aspect of the Card Metaphor

  111. CardMovement The most important aspect of the Card Metaphor you

    can Move Cards
  112. CardMovement

  113. CardMovement

  114. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  115. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  116. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  117. HTML5 Cards Can Move Between Apps Between Devices Between Users

    Between Services
  118. CardMovement The real power of “Movable” HTML5 Cards

  119. CardMovement you can Chain them The real power of “Movable”

    HTML5 Cards
  120. Close your eyes

  121. Agenda CardMetaphor Cardruntime Cardmovement UI/UX Designers Web Developers Business people

  122. Agenda To a build a Card Ecosystem based on Open

    Web technologies and Open Source ethos that fights back against lock-in CardStack
  123. Mobile OS lock-in Social lock-in Data lock-in

  124. Mobile OS lock-in Social lock-in Data lock-in

  125. Mobile OS lock-in Social lock-in Data lock-in

  126. NEW YORK Let’s start a Card Movement!

  127. NEW YORK Let’s start a Card Movement!

  128. NEW YORK Let’s start a Card Movement!

  129. Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  130. Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  131. Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  132. Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON
  133. Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON
  134. Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers
  135. Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers
  136. Open Closed

  137. Web Windows Open Closed

  138. Web The most open, amazing, transformative human-made ecosystem ever.

  139. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last…
  140. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives.
  141. Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives. We can’t stay here for ever……
  142. Open Native Web Apps

  143. Open Native Web Apps

  144. Open Web Native Apps

  145. Card Engine allows Mobile Web people to builds features that

    go into and extend a native app Open Web Native Apps Good
  146. Card Engine becomes a standard extension and plug-in system for

    apps that want to integrate third- party functionalities via HTML5 cards Open Web Native Apps Better
  147. HTML5 Cards becomes the successor of native, app store distributed

    “apps” as the interface to the services on the Internet. Open Web Native Apps Best
  148. CardStack.io Visual Format Language Container AppLication Card Contracts Secure Data

    Passing Card Execution Environment Card State Persistence Grid Style Sheet (Next talk) Glazier (Reference implementation) Conductor.js, library for writing card contracts Oasis.js, a polyfill for MessageChannel Info on UIWebView / IFrame / WebComponent ZINC via WebSocket / LocalStorage Pre-Announcing Everything you need to build HTML5 Cards and Containers
  149. Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based

    Cards Chris Tse Presented by Follow @christse on Twitter Watch out for the dates for the Card Designathon this summer How to Contribute Designers Check out Glazier on Github. Try it. Developers https://github.com/yapplabs/glazier Look for the launch for CardStack.io later this month Learn More Design and HTML/CSS and help wanted