The Next Decade in Web Design
Download as KEY, PDF1 like602 views
The document discusses the evolution of web design over the past decades, emphasizing the importance of linked data and creative constraints in enhancing web interfaces. It outlines rules for structuring data using URIs and explores the practical applications of linked data through examples like weather forecasting and social media integration. Additionally, it highlights the significance of meaningful links and offers resources for web developers to implement linked data effectively.
The Next Decade in Web Design
- 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?
- 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
- 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
- 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
- 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
- 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
- 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
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n