1. by Helior Colorado

2. History of the Internet

3. History of the Internet
1991 - World Wide Web was born

4. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)

5. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)

6. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.

7. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network

8. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public

9. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public
HTML (Hypertext Markup Language)

10. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public
HTML (Hypertext Markup Language)
Designed to link independent documents together

11. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public
HTML (Hypertext Markup Language)
Designed to link independent documents together
Designed by Tim Berners-Lee

12. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public
HTML (Hypertext Markup Language)
Designed to link independent documents together
Designed by Tim Berners-Lee
Designed to markup document content in ways a computer could
understand

13. History of the Internet
1991 - World Wide Web was born
HTTP (Hypertext Transfer Protocol)
Successor of ARPANET (Advanced Research Projects Agency Network)
★ was the Internet before www.
★ first to use packet switching techniques over network
★ used by government and universities only - not the public
HTML (Hypertext Markup Language)
Designed to link independent documents together
Designed by Tim Berners-Lee
Designed to markup document content in ways a computer could
understand
Designed to be simple and easy for anyone to adopt

14. History of the Internet

15. History of the Internet
After 1991...

16. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool

17. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog

18. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog
★ nothing much you could do with it

19. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog
★ nothing much you could do with it

20. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog
★ nothing much you could do with it
Web Design as a profession began

21. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog
★ nothing much you could do with it
Web Design as a profession began
★ through the demand from the market

22. History of the Internet
After 1991...
Businesses took interest to use the web as a marketing tool
Used as online brochure and catalog
★ nothing much you could do with it
Web Design as a profession began
★ through the demand from the market
★ with limited set of capabilities

23. History of the Internet
After 1991...

24. History of the Internet
After 1991...
Evolution of the Web (The Good)

25. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades

26. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0

27. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element

28. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element

29. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps

30. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2

31. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2
★ adopted Netscape’s visual elements

32. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2
★ adopted Netscape’s visual elements
Browsers support for images, tables, frames

33. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2
★ adopted Netscape’s visual elements
Browsers support for images, tables, frames
Many companies embraced the Web

34. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2
★ adopted Netscape’s visual elements
Browsers support for images, tables, frames
Many companies embraced the Web
★ competition became fierce

35. History of the Internet
After 1991...
Evolution of the Web (The Good)
HTML version upgrades
2.0
★ enhancement of <form> element
★ introduction of <table> element
★ introduction to image maps
3.2
★ adopted Netscape’s visual elements
Browsers support for images, tables, frames
Many companies embraced the Web
★ competition became fierce
★ online presence became vital

36. History of the Internet
After 1991...

37. History of the Internet
After 1991...
Evolution of the Web (The Bad)

38. History of the Internet
After 1991...
Evolution of the Web (The Bad)
Technologies were abused
Table-based design

39. History of the Internet
After 1991...
Evolution of the Web (The Bad)
Technologies were abused
Table-based design
Browsers Wars!!
Netscape vs. Microsoft

40. History of the Internet
After 1991...
Evolution of the Web (The Bad)
Technologies were abused
Table-based design
Browsers Wars!!
Netscape vs. Microsoft
Convoluted source code

41. History of the Internet
After 1991...
Evolution of the Web (The Bad)
Technologies were abused
Table-based design
Browsers Wars!!
Netscape vs. Microsoft
Convoluted source code
Sneaky techniques were used

42. Further into the future...

44. More technologies are added

45. More technologies are added
CSS (Cascading Style Sheet)

46. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation

47. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted

48. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)

49. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!

50. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!

51. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)

52. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape

53. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape
Inconsistent support across browsers

54. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape
Inconsistent support across browsers
CGI (Common Gateway Interface)

55. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape
Inconsistent support across browsers
CGI (Common Gateway Interface)
Primarily written in PERL

56. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape
Inconsistent support across browsers
CGI (Common Gateway Interface)
Primarily written in PERL
Commonly distributed with Javascript snippets

57. More technologies are added
CSS (Cascading Style Sheet)
First attempt to separate content and presentation
Although very slow to be adopted
HTML (4.slow)
Table-based design, because css sucked!
Frames-based navigation, because css sucked!
JavaScript (not Java!)
Created by Sun Microsystems and Netscape
Inconsistent support across browsers
CGI (Common Gateway Interface)
Primarily written in PERL
Commonly distributed with Javascript snippets
Plug ‘n’ Play - “Who cares how it works?”

58. Sites created under different versions

59. Sites created under different versions
Different Browsers

60. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology

61. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies

62. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)

63. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate

64. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate
Layouts were broken

65. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate
Layouts were broken
Different Media (print, screen readers, etc.)

66. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate
Layouts were broken
Different Media (print, screen readers, etc.)
Varying interfaces, methods, and purpose

67. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate
Layouts were broken
Different Media (print, screen readers, etc.)
Varying interfaces, methods, and purpose
Rethink design approach to fit needs of users

68. Sites created under different versions
Different Browsers
Inconsistent interpretation of technology
No support for certain technologies
Different Devices (mobile phones, PDA, etc.)
Limited screen real-estate
Layouts were broken
Different Media (print, screen readers, etc.)
Varying interfaces, methods, and purpose
Rethink design approach to fit needs of users
That’s if they bothered to
support those other users!

69. DHTML

70. DHTML
The dirty word of the web.

71. WYSIWYG editors

72. WYSIWYG editors
Helped with Content Management

73. WYSIWYG editors
Helped with Content Management
GUI interface for clients

74. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers

75. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages

76. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters

77. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters
Generation which is referred to “Neighbors’ cousin’s nephew’s
friend” who could build you a website

78. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters
Generation which is referred to “Neighbors’ cousin’s nephew’s
friend” who could build you a website
Created heavy file size pages

79. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters
Generation which is referred to “Neighbors’ cousin’s nephew’s
friend” who could build you a website
Created heavy file size pages
Due to convoluted source code

80. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters
Generation which is referred to “Neighbors’ cousin’s nephew’s
friend” who could build you a website
Created heavy file size pages
Due to convoluted source code
Attempt to support all browser features

81. WYSIWYG editors
Helped with Content Management
GUI interface for clients
Made anyone believe they were web designers
Common folk created pages
Less experts and therefore more disasters
Generation which is referred to “Neighbors’ cousin’s nephew’s
friend” who could build you a website
Created heavy file size pages
Due to convoluted source code
Attempt to support all browser features
Generated by a machine

82. Enter Web Standards

83. 33% 33%
33%

84. 33% 33%
33%

85. Content
33% 33%
33%

86. Content
“Data”
33% 33%
33%

87. Content Presentation
“Data”
33% 33%
33%

88. Content Presentation
“Data” “Look & Feel”
33% 33%
33%

89. Content Presentation
“Data” “Look & Feel”
33% 33%
33%
Behavior

90. Content Presentation
“Data” “Look & Feel”
33% 33%
33%
Behavior
“Manipulation”

91. 33% 33%
33%

92. html
33% 33%
33%

93. html css
33% 33%
33%

94. html css
33% 33%
33%
javascript

95. Content or “Markup”

96. Content or “Markup”
Semantic

97. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly

98. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics

99. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose

100. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed

101. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed
using class or id attributes

102. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed
using class or id attributes
use names that describe the content, not its visual distinction

103. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed
using class or id attributes
use names that describe the content, not its visual distinction
example:

104. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed
using class or id attributes
use names that describe the content, not its visual distinction
example:
use “secondary_content” not “right_column”

105. Content or “Markup”
Semantic
understand the meaning of tags; use them correctly
Pragmatics
the practical use; most comprehensible; clean; clear purpose
Identify elements as needed
using class or id attributes
use names that describe the content, not its visual distinction
example:
use “secondary_content” not “right_column”
use “alert_warning” not “bright_red”

106. Presentation or “Styles”

107. Presentation or “Styles”
Separation

108. Presentation or “Styles”
Separation
keep style sheets independent from other documents

109. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />

110. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency

111. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant

112. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant
Always style with CSS

113. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant
Always style with CSS
Avoid using markup to style elements based on their default
visual output

114. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant
Always style with CSS
Avoid using markup to style elements based on their default
visual output
example:

115. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant
Always style with CSS
Avoid using markup to style elements based on their default
visual output
example:
don’t use <b>, <i>, <u>, <blink>

116. Presentation or “Styles”
Separation
keep style sheets independent from other documents
use: <link rel=”stylesheet” media=”screen” href=”styles.css” />
Consistency
avoid styles that are not standards-compliant
Always style with CSS
Avoid using markup to style elements based on their default
visual output
example:
don’t use <b>, <i>, <u>, <blink>
use font-weight: 600, font-style: italic, border-bottom: solid 1px

117. Behavior or “DOM Manipulation”

118. Behavior or “DOM Manipulation”
Unobtrusive

119. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements

120. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements

121. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes

122. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation

123. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation
make features that compliment pages without making pages rely
on them for functionality

124. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation
make features that compliment pages without making pages rely
on them for functionality
If a technology isn’t available, pages still render correctly

125. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation
make features that compliment pages without making pages rely
on them for functionality
If a technology isn’t available, pages still render correctly
Progressive Enhancement

126. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation
make features that compliment pages without making pages rely
on them for functionality
If a technology isn’t available, pages still render correctly
Progressive Enhancement
adding functionality after providing basic content and function

127. Behavior or “DOM Manipulation”
Unobtrusive
separation without disruption of other elements
Use DOM to select elements
consistent use of id and class attributes
Graceful Degradation
make features that compliment pages without making pages rely
on them for functionality
If a technology isn’t available, pages still render correctly
Progressive Enhancement
adding functionality after providing basic content and function
enhance experience of capable clients

128. Advantages

129. Advantages
★SEO

130. Advantages
★SEO
★Smaller file sizes, better bandwidth

131. Advantages
★SEO
★Smaller file sizes, better bandwidth
★Accessible to all user clients

132. Advantages
★SEO
★Smaller file sizes, better bandwidth
★Accessible to all user clients
★Backwards compatible

133. Advantages
★SEO
★Smaller file sizes, better bandwidth
★Accessible to all user clients
★Backwards compatible
★Future compliant

134. Advantages
★SEO
★Smaller file sizes, better bandwidth
★Accessible to all user clients
★Backwards compatible
★Future compliant
★Minimal maintenance

135. We’re past all that, aren’t we?

136. Even a decade later....

137. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool

138. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design

139. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags

140. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM

141. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!

142. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!

143. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!
WYSIWYG sGll exist (and aren’t too much different then yesteryear)

144. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!
WYSIWYG sGll exist (and aren’t too much different then yesteryear)
S0ll overly complex source code

145. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!
WYSIWYG sGll exist (and aren’t too much different then yesteryear)
S0ll overly complex source code
Replaced table‐based design with un‐seman0c DIV tags

146. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!
WYSIWYG sGll exist (and aren’t too much different then yesteryear)
S0ll overly complex source code
Replaced table‐based design with un‐seman0c DIV tags
.mobi (top‐level domain)

147. Even a decade later....
VVC teaches HTML as if it were a forma4ng tool
Table‐based design
Non‐seman0c use of tags
VVC teaches JavaScript without acknowledging the DOM
VVC doesn’t even teach CSS!
S0ll having a hard 0me adop0ng!
WYSIWYG sGll exist (and aren’t too much different then yesteryear)
S0ll overly complex source code
Replaced table‐based design with un‐seman0c DIV tags
.mobi (top‐level domain)
Influences people to believe that the mobile web should be a
different experience than a consistent Internet we experience on
the desktop

148. Final Thoughts.

149. Helior Colorado
me@helior.info