Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Agenda CardMetaphor Cardruntime Cardmovement UI/UX Code Network

Slide 3

Slide 3 text

Cardmetaphor

Slide 4

Slide 4 text

Cardmetaphor Google Now On Mobile: Apple Passbook Tinder Pinterest Facebook Paper via @khoi

Slide 5

Slide 5 text

Citia Storehouse Flipboard Evernote Salesforce1 Cloud Magic via @khoi

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

New MySpace Google+ Burger King / Rebel Mouse Pinterest Storify

Slide 8

Slide 8 text

Cardmetaphor On The Desktop: Windows 8 Os X

Slide 9

Slide 9 text

So, what makes something a ‘card’?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Form? Function? • “Small” • “Self-contained” • “Concentrated” • “Easy to skim” • “Responsive” • “Ready to share”

Slide 12

Slide 12 text

Small

Slide 13

Slide 13 text

Small Size

Slide 14

Slide 14 text

Small Size

Slide 15

Slide 15 text

Large

Slide 16

Slide 16 text

Size

Slide 17

Slide 17 text

Small Size

Slide 18

Slide 18 text

Large Size

Slide 19

Slide 19 text

Size medium

Slide 20

Slide 20 text

Cardmetaphor Small LARGE medium now Size

Slide 21

Slide 21 text

Size

Slide 22

Slide 22 text

Size

Slide 23

Slide 23 text

SMALL MEDIUM LARGE XL Size

Slide 24

Slide 24 text

Cardmetaphor doesn’t matter Size

Slide 25

Slide 25 text

Cardmetaphor doesn’t matter Size It’s about Power

Slide 26

Slide 26 text

Power via @khoi To See the Gist

Slide 27

Slide 27 text

Power “Your connecting flight is late. You may have time to get a latte.” Flight Tracker via @khoi To See the Gist

Slide 28

Slide 28 text

Power “Before you call, know that a $10,000 deal is on the line.” Cloud Magic via @khoi To See the Gist

Slide 29

Slide 29 text

Power Cloud Magic via @khoi To See the Gist

Slide 30

Slide 30 text

Power “I know what I’m getting myself into if I flip this open.” To See the Gist Citia

Slide 31

Slide 31 text

Power To Act Upon it

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Power Jelly via @khoi “Your next action is either answer or forward. Choose one now.” To Act Upon it

Slide 35

Slide 35 text

Power via @khoi Jelly “Your question is answered. Don’t you want to share your gratitude?” To Act Upon it

Slide 36

Slide 36 text

Power To Act Upon it “I better spend more time reviewing these DNA things.” Medici for Ipad

Slide 37

Slide 37 text

Power To Make Something

Slide 38

Slide 38 text

Power Google+ Link Google+ Events To Make Something

Slide 39

Slide 39 text

Google+ Photo Power To Make Something

Slide 40

Slide 40 text

Google+ Photo Power To Make Something

Slide 41

Slide 41 text

Google+ Photo

Slide 42

Slide 42 text

Cardmetaphor Power

Slide 43

Slide 43 text

Cardmetaphor Power

Slide 44

Slide 44 text

Cardmetaphor Power To See The gist

Slide 45

Slide 45 text

Cardmetaphor Power To See The gist To Act Upon it

Slide 46

Slide 46 text

Cardmetaphor Power To See The gist To Act Upon it To Make Something

Slide 47

Slide 47 text

Cardmetaphor Power

Slide 48

Slide 48 text

Cardmetaphor

Slide 49

Slide 49 text

Have Different Sizes & Powers Cards

Slide 50

Slide 50 text

Have Different Sizes & Powers Have Different structure & Mixture Containers Cards

Slide 51

Slide 51 text

Cards Like Pinterest Containers

Slide 52

Slide 52 text

Cards Like Pinterest “Board” Structure

Slide 53

Slide 53 text

Cards Like Pinterest “Board” Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Structure

Slide 54

Slide 54 text

Cards Like Facebook “feed” Video Text Photo Album Ads Events Messages

Slide 55

Slide 55 text

Cards Like Google Now “Stack” Map BOARDING PASS WEATHER NEXT APPOINTMENT REMINDER

Slide 56

Slide 56 text

Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie Ticket Starbucks Card Target Coupon Starwood Loyalty Card

Slide 57

Slide 57 text

Cards Like FlipBoard “Collage” Photo ALBUM ARTICLE TWEET VIDEO IMAGE FACEBOOK POST BLOG POST ARTICLE mixture

Slide 58

Slide 58 text

Cards Like Storify “Page” HEADLINE VIDEO TWEET PODCAST Text

Slide 59

Slide 59 text

Cards Like Project Medici “Tree” ebook Excerpt Lecture Video Quiz PDF Paper Slide Deck Document Video Photo Document Lesson Lesson

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 64

Slide 64 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 65

Slide 65 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 66

Slide 66 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 67

Slide 67 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 68

Slide 68 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 69

Slide 69 text

metaphor Card Medici for Ipad Course Topic Lesson Card

Slide 70

Slide 70 text

Cardmetaphor Course Lesson Medici for Ipad Card

Slide 71

Slide 71 text

Cardmetaphor Course Lesson Card Native Platform Medici for Ipad

Slide 72

Slide 72 text

Web Platform Cardmetaphor Course Lesson Card Native Platform Medici for Ipad

Slide 73

Slide 73 text

Web Platform Cardmetaphor Course Lesson Card Native Platform Medici for Ipad

Slide 74

Slide 74 text

Cardmetaphor Course Lesson Card Web Platform Web Platform Medici Builder

Slide 75

Slide 75 text

Cardmetaphor Web Platform Card Container

Slide 76

Slide 76 text

Cardmetaphor Web Platform Quiz Video Podcast Game Simulation Article Card Container

Slide 77

Slide 77 text

CardRuntime

Slide 78

Slide 78 text

CardRuntime Native App Start with a normal native app, even an existing one that is already in the App Store.

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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...

Slide 81

Slide 81 text

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.

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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 \

Slide 92

Slide 92 text

Restore saved states 2 CardRuntime Ben Jolley [email protected] 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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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:

Slide 101

Slide 101 text

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:

Slide 102

Slide 102 text

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:

Slide 103

Slide 103 text

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:

Slide 104

Slide 104 text

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:

Slide 105

Slide 105 text

Live Demo CardRuntime

Slide 106

Slide 106 text

197 GRAND ST, 6S NEW YORK, NY 10013 Developed By Designed by CardRuntime

Slide 107

Slide 107 text

CardMovement

Slide 108

Slide 108 text

CardMovement UI Code Data = + Card

Slide 109

Slide 109 text

CardMovement UI Code Data = + Card JS N

Slide 110

Slide 110 text

CardMovement The most important aspect of the Card Metaphor

Slide 111

Slide 111 text

CardMovement The most important aspect of the Card Metaphor you can Move Cards

Slide 112

Slide 112 text

CardMovement

Slide 113

Slide 113 text

CardMovement

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

CardMovement The real power of “Movable” HTML5 Cards

Slide 119

Slide 119 text

CardMovement you can Chain them The real power of “Movable” HTML5 Cards

Slide 120

Slide 120 text

Close your eyes

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

Agenda To a build a Card Ecosystem based on Open Web technologies and Open Source ethos that fights back against lock-in CardStack

Slide 123

Slide 123 text

Mobile OS lock-in Social lock-in Data lock-in

Slide 124

Slide 124 text

Mobile OS lock-in Social lock-in Data lock-in

Slide 125

Slide 125 text

Mobile OS lock-in Social lock-in Data lock-in

Slide 126

Slide 126 text

NEW YORK Let’s start a Card Movement!

Slide 127

Slide 127 text

NEW YORK Let’s start a Card Movement!

Slide 128

Slide 128 text

NEW YORK Let’s start a Card Movement!

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

Open Closed

Slide 137

Slide 137 text

Web Windows Open Closed

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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.

Slide 141

Slide 141 text

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……

Slide 142

Slide 142 text

Open Native Web Apps

Slide 143

Slide 143 text

Open Native Web Apps

Slide 144

Slide 144 text

Open Web Native Apps

Slide 145

Slide 145 text

Card Engine allows Mobile Web people to builds features that go into and extend a native app Open Web Native Apps Good

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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