Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
-
Upload
gustaf-nilsson-kotte -
Category
Technology
-
view
828 -
download
0
description
Transcript of Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
![Page 1: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/1.jpg)
Gustaf Nilsson Kotte
(HTML Hypermedia APIs and Adaptive Web Design)
![Page 2: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/2.jpg)
@gustaf_nk
![Page 3: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/3.jpg)
![Page 4: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/4.jpg)
Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!
![Page 5: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/5.jpg)
![Page 6: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/6.jpg)
![Page 7: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/7.jpg)
![Page 8: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/8.jpg)
![Page 9: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/9.jpg)
![Page 10: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/10.jpg)
iOS Android WP7 Win8 Web SPAsSmartTVs
API
Store
?
![Page 11: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/11.jpg)
![Page 12: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/12.jpg)
![Page 13: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/13.jpg)
![Page 14: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/14.jpg)
iOS Android WP7 Win8 Web SPAsSmartTVs
API
Store
?
![Page 15: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/15.jpg)
![Page 16: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/16.jpg)
LO: Support for out-bound navigational links (HTTP GET)<a href="http://www.example.org/search" title="view search page">Search</a>
LN: Support for non-idempotent updates (HTTP POST)<form method="post" action="http://www.example.org/my-keywords"/>
<label>Keywords:</label>
<input name="keywords" type="text" value="" />
<input type="submit" />
</form>
![Page 17: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/17.jpg)
![Page 18: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/18.jpg)
![Page 19: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/19.jpg)
![Page 20: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/20.jpg)
Primaryuse cases
Secondaryuse cases
Secondaryuse cases
API
Render HTML viewsHTML forms
NativeConsume API
![Page 21: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/21.jpg)
<div class="message-block"><div id="messages"><ul class="single">
<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>
</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>
</a></li><!-- ... ->
</ul></div>
</div>
<!–– Example: Access the user-texts property: $("#messages .message-text") -->
![Page 22: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/22.jpg)
”Building Hypermedia APIs
with HTML5 and Node”, Mike Amundsen
”Designing Hypermedia APIs”, Steve Klabnik
![Page 23: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/23.jpg)
Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!
![Page 24: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/24.jpg)
![Page 25: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/25.jpg)
![Page 26: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/26.jpg)
![Page 27: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/27.jpg)
3 iOS devices – 40%
3112 other devices– 60%
![Page 28: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/28.jpg)
![Page 29: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/29.jpg)
![Page 30: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/30.jpg)
![Page 31: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/31.jpg)
![Page 32: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/32.jpg)
![Page 33: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/33.jpg)
![Page 34: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/34.jpg)
![Page 35: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/35.jpg)
![Page 36: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/36.jpg)
![Page 37: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/37.jpg)
Responsive Web Design + Server Side Components
![Page 38: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/38.jpg)
![Page 39: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/39.jpg)
”Adaptive Web Design”, Aaron Gustafson
“Progressive Enhancement 2.0”, Nicolas Zakas
“Resource-Oriented Client Architecture”, http://roca-style.org
![Page 40: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/40.jpg)
Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!
![Page 41: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/41.jpg)
![Page 42: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/42.jpg)
<div class="message-block"><div id="messages"><ul class="single">
<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>
</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>
</a></li><!-- ... ->
</ul></div>
</div>
![Page 43: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/43.jpg)
<div class="message-block"><div id="messages"><ul class="single">
<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>
</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>
</a></li><!-- ... ->
</ul></div>
</div>
![Page 44: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/44.jpg)
![Page 45: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/45.jpg)
![Page 46: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/46.jpg)
ProgressiveEnhancement
SPA
![Page 47: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/47.jpg)
Primaryuse cases
Secondaryuse cases
Secondaryuse cases
API
Render HTML viewsHTML forms
NativeConsume API
![Page 48: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/48.jpg)
HTML Hypermedia
API
Store
![Page 49: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/49.jpg)
![Page 50: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/50.jpg)
Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!
![Page 51: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/51.jpg)
![Page 52: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/52.jpg)
(@gustaf_nk)
![Page 53: Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade](https://reader036.fdocuments.in/reader036/viewer/2022070323/5595af5a1a28ab023e8b4658/html5/thumbnails/53.jpg)
“This is not the web” images by Brad Frost
http://bradfrostweb.com/
Trash can, http://www.clker.com/clipart-15146.html
Money bags, https://doodleaday.files.wordpress.com/2012/03/doodle-1016-money-bags.jpg
Exit sign, http://www.ski.org/Rehab/WCrandall/EgressIIIWeb/images/egressfig7.gif
Scale, http://wishfit.files.wordpress.com/2012/02/scale.gif
Escalator, http://www.orientlighting.com/Upload/Editor/201121822854289.jpg
Elevator, http://aes-shreveport.com/http://aes-shreveport.com/wp-content/uploads/2010/03/elevator1.jpg
MacBook Pro, http://store.storeimages.cdn-apple.com/2911/as-images.apple.com/is/image/AppleInc/mbp2012-step0-macbookpro-lh?wid=341&hei=218&fmt=png-alpha&qlt=95
Ferrari NetBook, http://www.conceivablytech.com/wp-content/uploads/2010/04/ferrari12.jpg
Hypermedia avatar, https://si0.twimg.com/profile_images/1480823070/twitter.jpg
Storytelling, http://yarnstorytellers.files.wordpress.com/2012/05/kidsstorytelling.jpg
Back to the Future, http://www.thenoobnews.com/uploads/2012/01/Marty-doc-remote.jpg
Ooya, http://cf.shacknews.com/images/20120727/ouya_22884.nphd.jpg
Samsung SmartTV,
http://4.bp.blogspot.com/-DJYVeNjOxVA/T14mh5NVA5I/AAAAAAAAABU/Re1oXspmx1o/s1600/Samsung.jpg
Mike Amundsen, http://b.vimeocdn.com/ts/185/530/185530962_640.jpg
Hipster Pabst Blue Ribbon, http://www.nbclosangeles.com/blogs/press-here/Start-Up-Recruits-with-10000-and-Lifetime-Pabst-Blue-Ribbon-123126508.html
Juggling monkey, http://media.smashingmagazine.com/wp-content/uploads/2012/07/juggling-monkey.jpg
Unity, http://www.unitylakeorion.org/wp-content/uploads/unity.jpg
Kindle, http://www.blogcdn.com/www.engadget.com/media/2011/09/amazon-official-kindle-touch.jpg
iPad in sofa, http://www.itouch-magazine.eu/wp-content/uploads/2010/05/iPad-Lapdesk-Render-3-1024x797.jpg
laptop on train, http://medmondtech.files.wordpress.com/2011/06/080910090104-laptop-train-travel-man.jpg
Razor, http://4.bp.blogspot.com/-UJsfWWvWgbk/Tb2RS3iFDoI/AAAAAAAAD0k/4XCA3sgsP3A/s1600/Occams-Razor_1896-l.jpg
Zombie, http://www.everystockphoto.com/photo.php?imageId=9964446&searchId=0eda241fc65ccf35d9743309ac395215&npos=338