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

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