The Next Decade  in Web Design       Micah Herstand      @MicahHerstand
Linked Data and the Web
Who I am and why I love the web
Who I am and why I love the web     Journalist and PhilosopherAnyone can say anything about any topic
Who I am and why I love the web                     ee ch     Journalist and Philosopher                   p           ee ...
Who I am and why I love the web                     ee ch     Journalist and Philosopher                   p           ee ...
Who I am and why I love the web                     ee ch     Journalist and Philosopher                   p           ee ...
What is the web?
What is the web? Network
What is the web? Network   Internet
What is the web? Network   Internet   Web
What is the web? Network    Internet    Web   Seman/c
     Web       Linked Data
An interface in the Web?      Seman/c
Web                       Linked                        Data
An interface in the Web?      Seman/c
Web                       Linked                        Data      Seman/c
Web       ...
Linked Documents
Linked Data?
Hosting? Attending? Organizing?Live Blogging?
President? Leader?Legitimate? Dictator?
Happiness is a journey, not a destination                        on        on                                        on   ...
The journey is hidden on the web...What observer?According to...?
The journey is hidden on the web...
...which can lead to consequences h$p://TinyURL.com/Watch‐Out‐For‐This‐Link
Constraints
Constraints boost Creativity
The real world has constraints
The real world has constraints
Constraints in the Web of Data
Constraints in the Web of Data
Constraints in the Web of DataRules
Constraints in the Web of Data       Rules1. URIs for everything
Constraints in the Web of Data       Rules1. URIs for everything2. URIs respond with   useful information
Constraints in the Web of Data       Rules1. URIs for everything2. URIs respond with   useful information3. Relationships ...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Constraints in the Web of Data       Rules1. URIs for everything            Data2. URIs respond with   useful information3...
Bottoms Up!
Design in the Web of Data
Web Design Evolution
Web Design Evolution    1990s    BehaviorStyle, Structure &     Content
Web Design Evolution    1990s               2000s    Behavior         Style BehaviorStyle, Structure &    Structure &     ...
Web Design Evolution    1990s               2000s    Behavior         Style BehaviorStyle, Structure &    Structure &     ...
Web Design Evolution    1990s               2000s    Behavior         Style BehaviorStyle, Structure &    Structure &     ...
Web Design Evolution    1990s               2000s            2010s    Behavior         Style Behavior   Style BehaviorStyl...
Web Design on Linked DataStyle Behavior           Style Behavior             Style Behavior  Structure                    ...
Web Design for Linked Data
Web Design for Linked Data                          hiTemp          2/25/11 (STL)             42 degrees Linked   2/25/11 ...
Web Design for Linked Data                                     Three Day ForecastDifferentiating   Date 1                 ...
Web Design for Linked Data                           Three Day Forecast for St. Louis, MO   Human                         ...
Web Design for Linked DataThree Day Forecast for St. Louis, MO                                                  Three Day ...
A New Kind of Link
Links have always been important
Links have always been important
Get more out of web links
Get more out of web links
“United States Health”
“United States Health”Google: Flu Trends (USA)
“United States Health”Google: Flu Trends (USA)         Gapminder: Health Spending vs. Cholesterol
“United States Health”Google: Flu Trends (USA)         Organisation for Economic                                Cooperatio...
Links with meaning
Links with meaning
Links with meaning:Man :hasDaughter :Girl
Links with meaning:Man :hasDaughter :Girl   :Girl   :loves :Boy
Links with meaning:Man :hasDaughter :Girl         :Girl   :loves :Boy               :Boy   :meets   :Man
In Practice
What’s out there...Facebook Likes                 Google Rich Snippets
What’s out there...
Facebook’s Open Graph       (OGP.me)
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#">
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head>
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Facebook’s Open Graph                        (OGP.me)<html xmlns:og="http://ogp.me/ns#"><head><meta property="og:type" con...
Google’s Rich Snippets                   http://TinyURL.com/RichSnippets<div xmlns:v="http://rdf.data-vocabulary.org/#" ty...
Do it yourself Linked Data<div xmlns:v="http://rdf.data-vocabulary.org/#" xmlns:og="http://ogp.me/ns#"xmlns:myNames about=...
ResourcesLinked Data for Web Developers (fall 2011)W3.orgLinkedData.orgOGP.me - Open Graph ProtocolTinyURL.com/RichSnippets
Upcoming SlideShare
Loading in …5
×

The Next Decade in Web Design

2,252 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
1 Comment
1 Like
Statistics
Notes
  • 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
No Downloads
Views
Total views
2,252
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
7
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×