by Helior Colorado

History of the Internet

History of the Internet
1991 - World Wide Web was born

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

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

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.

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

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

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)

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

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

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

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

History of the Internet

History of the Internet
After 1991...

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

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

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

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

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

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

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

History of the Internet
After 1991...

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

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

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

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

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

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

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

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

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

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

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

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

History of the Internet
After 1991...

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

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

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

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

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

Further into the future...

More technologies are added

More technologies are added
CSS (Cascading Style Sheet)

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

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

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

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!

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!

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!)

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

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

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)

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

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

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?”

Sites created under different versions

Sites created under different versions
Different Browsers

Sites created under different versions
Different Browsers
Inconsistent interpretation of technology

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

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

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

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

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.)

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

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

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!

DHTML

DHTML
The dirty word of the web.

WYSIWYG editors

WYSIWYG editors
Helped with Content Management

WYSIWYG editors
Helped with Content Management
GUI interface for clients

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

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

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

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

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

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

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

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

Enter Web Standards

33% 33%
33%

33% 33%
33%

Content
33% 33%
33%

Content
“Data”
33% 33%
33%

Content Presentation
“Data”
33% 33%
33%

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

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

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

33% 33%
33%

html
33% 33%
33%

html css
33% 33%
33%

html css
33% 33%
33%
javascript

Content or “Markup”

Content or “Markup”
Semantic

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

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

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

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

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

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

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:

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”

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”

Presentation or “Styles”

Presentation or “Styles”
Separation

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

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

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

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

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

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

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:

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>

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

Behavior or “DOM Manipulation”

Behavior or “DOM Manipulation”
Unobtrusive

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

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

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

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

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

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

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

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

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

Advantages

Advantages
★SEO

Advantages
★SEO
★Smaller file sizes, better bandwidth

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

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

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

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

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

Even a decade later....

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

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

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

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

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!

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!

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)

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

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

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)

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

Final Thoughts.

Helior Colorado
me@helior.info