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.

1. The Next Decade
in Web Design
Micah Herstand
@MicahHerstand

2. Linked Data and the Web

3. Who I am and why I love the web

4. Who I am and why I love the web
Journalist and Philosopher
Anyone can say anything about any topic

5. Who I am and why I love the web
ee ch
Journalist and Philosopher
p
ee S
Anyone can say anything about any topic
r
F

6. Who I am and why I love the web
ee ch
Journalist and Philosopher
p
ee S
Anyone can say anything about any topic
r
F
Developer and Entrepreneur
Everything can be accessed by everyone

7. Who I am and why I love the web
ee ch
Journalist and Philosopher
p
ee S
Anyone can say anything about any topic
r
F
ce ss
c by everyone
Developer and Entrepreneur
A
Everything canee accessed
be
F r

8. What is the web?

9. What is the web?
Network

10. What is the web?
Network
Internet

11. What is the web?
Network
Internet
Web

12. What is the web?
Network
Internet
Web
Seman/c
Web Linked Data

13. An interface in the Web?
Seman/c Web
Linked
Data

14. An interface in the Web?
Seman/c Web
Linked
Data
Seman/c Web
Linked
Data

15. Linked Documents

16. Linked Data?

17. Hosting?
Attending?
Organizing?
Live Blogging?

18. President?
Leader?
Legitimate?
Dictator?

19. Happiness is a journey, not a destination
on on
on
on
on
on
The Web
on
on
on
on
on on
on

20. The journey is hidden on the web...
What observer?
According to...?

21. The journey is hidden on the web...

22. ...which can lead to consequences
h$p://TinyURL.com/Watch‐Out‐For‐This‐Link

23. Constraints

24. Constraints boost Creativity

25. The real world has constraints

26. The real world has constraints

27. Constraints in the Web of Data

28. Constraints in the Web of Data

29. Constraints in the Web of Data
Rules

30. Constraints in the Web of Data
Rules
1. URIs for everything

31. Constraints in the Web of Data
Rules
1. URIs for everything
2. URIs respond with
useful information

32. Constraints in the Web of Data
Rules
1. URIs for everything
2. URIs respond with
useful information
3. Relationships between
data

33. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

34. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

35. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

36. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

37. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

38. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

39. Constraints in the Web of Data
Rules
1. URIs for everything Data
2. URIs respond with
useful information
3. Relationships between
data

40. Bottoms Up!

41. Design in the Web of Data

42. Web Design Evolution

43. Web Design Evolution
1990s
Behavior
Style, Structure &
Content

44. Web Design Evolution
1990s 2000s
Behavior Style Behavior
Style, Structure & Structure &
Content Content

45. Web Design Evolution
1990s 2000s
Behavior Style Behavior
Style, Structure & Structure &
Content Content
APIs
(Content)

46. Web Design Evolution
1990s 2000s
Behavior Style Behavior
Style, Structure & Structure &
Content Content
APIs
(Content)
Data (Content)

47. Web Design Evolution
1990s 2000s 2010s
Behavior Style Behavior Style Behavior
Style, Structure & Structure &
Structure
Content Content
APIs
(Content) Linked Data
(Content)
Data (Content)

48. Web Design on Linked Data
Style Behavior Style Behavior Style Behavior
Structure Structure Structure
Data Data Data Data
Data
Data
Data Data
Data Data Data Data
Data

49. Web Design for Linked Data

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. Web Design for Linked Data
Three Day Forecast
Differentiating 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. 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 Forecast
Differentiating 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. Web Design for Linked Data
Three 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. A New Kind of Link

55. Links have always been important

56. Links have always been important

57. Get more out of web links

58. Get more out of web links

59. “United States Health”

60. “United States Health”
Google: Flu Trends (USA)

61. “United States Health”
Google: Flu Trends (USA)
Gapminder: Health Spending vs. Cholesterol

62. “United States Health”
Google: Flu Trends (USA) Organisation for Economic
Cooperation and Development
Gapminder: Health Spending vs. Cholesterol

63. Links with meaning

64. Links with meaning

65. Links with meaning
:Man :hasDaughter :Girl

66. Links with meaning
:Man :hasDaughter :Girl :Girl :loves :Boy

67. Links with meaning
:Man :hasDaughter :Girl :Girl :loves :Boy
:Boy :meets :Man

68. In Practice

69. What’s out there...
Facebook Likes
Google Rich Snippets

70. What’s out there...

71. Facebook’s Open Graph
(OGP.me)

72. Facebook’s Open Graph
(OGP.me)
<html xmlns:og="http://ogp.me/ns#">

73. Facebook’s Open Graph
(OGP.me)
<html xmlns:og="http://ogp.me/ns#">
<head>

74. Facebook’s Open Graph
(OGP.me)
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:type" content="album" />

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. 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. 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. 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. 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. 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. 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. Resources
Linked Data for Web Developers (fall 2011)
W3.org
LinkedData.org
OGP.me - Open Graph Protocol
TinyURL.com/RichSnippets