Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Next Decade in Web Design

2,327 views

Published on

With the advent of Facebook’s Open Graph, HTML5 and Google’s Rich Snippets, the web has begun a rapid transformation to being understandable for computers. This understanding comes from data that is embedded in webpages and, perhaps more importantly, a new kind of hyperlink that connects concepts instead of documents. Information architects and interaction designers are needed now more than ever to make sense of all this data and to visualize it in new and interesting ways. In this presentation, you will learn how to take advantage of the Semantic Web’s foundational technology called Linked Data, which allows you to both produce and consume the data that is making up this new web.

Published in: Technology
  • Note: the big white rectangle on slides 28-32 is actually an embedded video that is an edited version of (http://bit.ly/purpose-2):
    <!--copy and paste--><br /><object type="application/x-shockwave-flash" data="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" width="350" height="288"><param name="movie" value="http://video.ted.com/assets/player/swf/EmbedPlayer.swf"></param><embed src="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The Next Decade in Web Design

  1. 1. The Next Decade in Web Design Micah Herstand @MicahHerstand
  2. 2. Linked Data and the Web
  3. 3. Who I am and why I love the web
  4. 4. Who I am and why I love the web Journalist and PhilosopherAnyone can say anything about any topic
  5. 5. Who I am and why I love the web ee ch Journalist and Philosopher p ee SAnyone can say anything about any topic r F
  6. 6. Who I am and why I love the web ee ch Journalist and Philosopher p ee SAnyone can say anything about any topic r F Developer and Entrepreneur Everything can be accessed by everyone
  7. 7. Who I am and why I love the web ee ch Journalist and Philosopher p ee SAnyone can say anything about any topic r F ce ss c by everyone Developer and Entrepreneur A Everything canee accessed be F r
  8. 8. What is the web?
  9. 9. What is the web? Network
  10. 10. What is the web? Network Internet
  11. 11. What is the web? Network Internet Web
  12. 12. What is the web? Network Internet Web Seman/c
 Web Linked Data
  13. 13. An interface in the Web? Seman/c
Web Linked Data
  14. 14. An interface in the Web? Seman/c
Web Linked Data Seman/c
Web Linked Data
  15. 15. Linked Documents
  16. 16. Linked Data?
  17. 17. Hosting? Attending? Organizing?Live Blogging?
  18. 18. President? Leader?Legitimate? Dictator?
  19. 19. Happiness is a journey, not a destination on on on on on on The Web on on on on on on on
  20. 20. The journey is hidden on the web...What observer?According to...?
  21. 21. The journey is hidden on the web...
  22. 22. ...which can lead to consequences h$p://TinyURL.com/Watch‐Out‐For‐This‐Link
  23. 23. Constraints
  24. 24. Constraints boost Creativity
  25. 25. The real world has constraints
  26. 26. The real world has constraints
  27. 27. Constraints in the Web of Data
  28. 28. Constraints in the Web of Data
  29. 29. Constraints in the Web of DataRules
  30. 30. Constraints in the Web of Data Rules1. URIs for everything
  31. 31. Constraints in the Web of Data Rules1. URIs for everything2. URIs respond with useful information
  32. 32. Constraints in the Web of Data Rules1. URIs for everything2. URIs respond with useful information3. Relationships between data
  33. 33. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  34. 34. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  35. 35. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  36. 36. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  37. 37. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  38. 38. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  39. 39. Constraints in the Web of Data Rules1. URIs for everything Data2. URIs respond with useful information3. Relationships between data
  40. 40. Bottoms Up!
  41. 41. Design in the Web of Data
  42. 42. Web Design Evolution
  43. 43. Web Design Evolution 1990s BehaviorStyle, Structure & Content
  44. 44. Web Design Evolution 1990s 2000s Behavior Style BehaviorStyle, Structure & Structure & Content Content
  45. 45. Web Design Evolution 1990s 2000s Behavior Style BehaviorStyle, Structure & Structure & Content Content APIs (Content)
  46. 46. Web Design Evolution 1990s 2000s Behavior Style BehaviorStyle, Structure & Structure & Content Content APIs (Content) Data (Content)
  47. 47. Web Design Evolution 1990s 2000s 2010s Behavior Style Behavior Style BehaviorStyle, Structure & Structure & Structure Content Content APIs (Content) Linked Data (Content) Data (Content)
  48. 48. Web Design on Linked DataStyle Behavior Style Behavior Style Behavior Structure Structure StructureData Data Data Data Data Data Data Data Data Data Data Data Data
  49. 49. Web Design for Linked Data
  50. 50. Web Design for Linked Data hiTemp 2/25/11 (STL) 42 degrees Linked 2/25/11 (STL) skyType partly etc. Data loTemp 2/25/11 (STL) 33 degrees
  51. 51. Web Design for Linked Data Three Day ForecastDifferentiating Date 1 Hi: hiTemp* Date 2 Hi: hiTemp* Date 3 Hi: hiTemp* Structure Lo: loTemp* Sky: skyType Lo: loTemp* Sky: skyType Lo: loTemp* Sky: skyType hiTemp 2/25/11 (STL) 42 degrees Linked 2/25/11 (STL) skyType partly etc. Data loTemp 2/25/11 (STL) 33 degrees
  52. 52. Web Design for Linked Data Three Day Forecast for St. Louis, MO Human Fri Sat Sun Interface Hi: 40* Lo: 32* Hi: 49* Lo: 42* Hi: 66* Lo: 47* Three Day ForecastDifferentiating Date 1 Hi: hiTemp* Date 2 Hi: hiTemp* Date 3 Hi: hiTemp* Structure Lo: loTemp* Sky: skyType Lo: loTemp* Sky: skyType Lo: loTemp* Sky: skyType hiTemp 2/25/11 (STL) 42 degrees Linked 2/25/11 (STL) skyType partly etc. Data loTemp 2/25/11 (STL) 33 degrees
  53. 53. Web Design for Linked DataThree Day Forecast for St. Louis, MO Three Day Forecast for Paris, France Three Day Forecast Date 1 Date 2 Date 3 Hi: hiTemp* Hi: hiTemp* Hi: hiTemp* Lo: loTemp* Lo: loTemp* Lo: loTemp* Sky: skyType Sky: skyType Sky: skyType hiTemp hiTemp 2/25/11 (STL) 42 degrees 2/25/11 (Paris) 51 degrees 2/25/11 (STL) skyType 2/25/11 (Paris) skyType partly cloudy 2/25/11 (STL) loTemp 33 degrees loTemp 2/25/11 (Paris) 47 degrees
  54. 54. A New Kind of Link
  55. 55. Links have always been important
  56. 56. Links have always been important
  57. 57. Get more out of web links
  58. 58. Get more out of web links
  59. 59. “United States Health”
  60. 60. “United States Health”Google: Flu Trends (USA)
  61. 61. “United States Health”Google: Flu Trends (USA) Gapminder: Health Spending vs. Cholesterol
  62. 62. “United States Health”Google: Flu Trends (USA) Organisation for Economic Cooperation and Development Gapminder: Health Spending vs. Cholesterol
  63. 63. Links with meaning
  64. 64. Links with meaning
  65. 65. Links with meaning:Man :hasDaughter :Girl
  66. 66. Links with meaning:Man :hasDaughter :Girl :Girl :loves :Boy
  67. 67. Links with meaning:Man :hasDaughter :Girl :Girl :loves :Boy :Boy :meets :Man
  68. 68. In Practice
  69. 69. What’s out there...Facebook Likes Google Rich Snippets
  70. 70. What’s out there...
  71. 71. Facebook’s Open Graph (OGP.me)
  72. 72. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#">
  73. 73. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head>
  74. 74. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" />
  75. 75. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" /><meta property="og:title" content="Clean Up (EP)" />
  76. 76. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" /><meta property="og:title" content="Clean Up (EP)" />...
  77. 77. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" /><meta property="og:title" content="Clean Up (EP)" />...</head>
  78. 78. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" /><meta property="og:title" content="Clean Up (EP)" />...</head>...
  79. 79. Facebook’s Open Graph (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" content="album" /><meta property="og:title" content="Clean Up (EP)" />...</head>...</html>
  80. 80. Google’s Rich Snippets http://TinyURL.com/RichSnippets<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Product"> <span property="v:brand">Ari Herstand</span> <span property="v:name">Clean Up (EP)</span> <span property= " v:category ">Media > Music > Rock & Pop > Alternative & Indie Rock > Indie Rock</span></div><div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Offer"> <span property="v:name">Clean Up (EP)</span> <meta property="v:currency" content="USD" /> <span property="v:price">3.90</span></div>
  81. 81. Do it yourself Linked Data<div xmlns:v="http://rdf.data-vocabulary.org/#" xmlns:og="http://ogp.me/ns#"xmlns:myNames about="http://ariherstand.com/albums/cleanup"typeof="myTerms:Album"> <span property="v:brand">Ari Herstand</span> <span property="v:name">Clean Up (EP)</span> <span property= "og:type">Album</span> <meta property="myTerms:currency" content="USD" /> <span property="myTerms:price">3.90</span></div>
  82. 82. ResourcesLinked Data for Web Developers (fall 2011)W3.orgLinkedData.orgOGP.me - Open Graph ProtocolTinyURL.com/RichSnippets

×