(HTML Hypermedia APIs and Adaptive Web Design) Gustaf Nilsson Kotte

Size: px

Start display at page:

Download "(HTML Hypermedia APIs and Adaptive Web Design) Gustaf Nilsson Kotte"

MargaretMargaret Marshall
5 years ago
Views:

1 (HTML Hypermedia APIs and Adaptive Web Design) Gustaf Nilsson Kotte

2 @gustaf_nk

4 Platform fragmentation HTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!

10 ios Android WP7 Win8 SmartTVs Web SPAs? API Store

14 ios Android WP7 Win8 SmartTVs Web SPAs? API Store

16 LO: Support for out-bound navigational links (HTTP GET) <a href=" title="view search page">search</a> LN: Support for non-idempotent updates (HTTP POST) <form method="post" action=" <label>keywords:</label> <input name="keywords" type="text" value="" /> <input type="submit" /> </form>

20 Primary use cases Secondary use cases Secondary use cases Consume API Native POST Render HTML views HTML forms API

21 <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">message text</span> <span <a rel="message" href="..." title="message"> <span class="date-time"> </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") -->

22 Building Hypermedia APIs with HTML5 and Node, Mike Amundsen Designing Hypermedia APIs, Steve Klabnik

23 Platform fragmentation HTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!

27 3 ios devices 40% 3112 other devices 60%

39 Adaptive Web Design, Aaron Gustafson Progressive Enhancement 2.0, Nicolas Zakas Resource-Oriented Client Architecture,

40 Platform fragmentation HTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!

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

42 <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">message text</span> <span <a rel="message" href="..." title="message"> <span class="date-time"> </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>

43 <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">message text</span> <span <a rel="message" href="..." title="message"> <span class="date-time"> </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>

46 SPA Progressive Enhancement

47 Primary use cases Secondary use cases Secondary use cases Consume API Native POST Render HTML views HTML forms API

48 HTML Hypermedia API Store

50 Platform fragmentation HTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!

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.

53 This is not the web images by Brad Frost Trash can, Money bags, Exit sign, Scale, Escalator, Elevator, MacBook Pro, Ferrari NetBook, Hypermedia avatar, Storytelling, Back to the Future, Ooya, Samsung SmartTV, Mike Amundsen, Hipster Pabst Blue Ribbon, Juggling monkey, Unity, Kindle, ipad in sofa, laptop on train, Razor, Zombie,

APACHE SLING & FRIENDS TECH MEETUP BERLIN, SEPTEMBER Hypermedia API Tools for Sling (HApi) Andrei Dulvac, Adobe

APACHE SLING & FRIENDS TECH MEETUP BERLIN, 28-30 SEPTEMBER 2015 Hypermedia API Tools for Sling (HApi) Andrei Dulvac, Adobe ToC HatEoAS, Hypermedia formats, and semantic data Hypermedia API tools (HApi)