4. The Internet before the Web
The World Wide Web came into existence
about twenty years ago. But the Internet is
much older.
So what was it like before the Web?
6. From mainframes to Keyboard Cat in 50 years
http://www.youtube.com/watch?v=9hIQjrMHTv4
7. The Internet in the 80s and
early 90s: Oh my, it was slow
‣ Only access was via large networks or
dial-up modems
‣ Modems were extremely slow:
300 BAUD (early 80s) 0.03 k/s
2400 BAUD (late 80s) 0.24 k/s
14.4k BAUD (early 90s) 1.4 k/s
28.8k BAUD (mid-90s) 2.8 k/s
56k BAUD (late 90s) ~4.8 k/s
8. No, seriously, it was really slow
‣ Weight of the cnn.com home page today:
around 311k
300 BAUD 3 hours
2400 BAUD 22 minutes
14.4k BAUD 3.7 minutes
28.8k BAUD 2 minutes
56k BAUD 1 minute
BROADBAND A few seconds
9. The electronic frontier...
‣ The early Internet enabled a variety of
information-exchange activities:
‣ E-mail
‣ Usenet newsgroups
‣ Telnet (to connect to other systems)
‣ FTP (File Transfer Protocol – file exchange)
‣ Bulletin Board Systems
‣ Chat rooms
‣ Listserv email lists
10. ...was a wilderness of information
‣ However, there was no overarching
method for finding anything
‣ Everything was connected, but you still
needed to know where to look
‣ Text-based terminals used arcane key
commands and were not user-friendly
‣ Internet culture was insular and focused
around a niche audience
11. A Bulletin Board System in the news
http://www.youtube.com/watch?v=eSyTFvrihkM
12. Every Internet guy in the 80s
http://www.youtube.com/watch?v=yFF0oQySsh4
13. Private playgrounds spring up
‣ As the Internet grew in popularity,
various regional and national service
providers appeared
‣ The largest providers created proprietary
content networks exclusively for their
paying audiences:
14. The Internet becomes, um, pretty
‣ These closed networks brought a whole
new visual flair to online communication
‣ AOL quickly surpassed its rivals
16. A link from the past...
‣ Hypertext — one of the fundamental
underlying technologies of the Web
‣ Conceived
in the 60s,
popularized
in the 80s
by Apple’s
HyperCard
17. ...becomes the key to the future
‣ Tim Berners-Lee – researcher at CERN,
the European Organization for Nuclear
Research
‣ 1990 – Conceived and created a
hypertext-based system for linking and
displaying pages of information
‣ He dubbed it the “World Wide Web”
19. Open and everywhere
‣ The Web differed from everything that
came before it:
‣ It was hyperlinked and capable of
displaying both text and graphics
‣ It was openly accessible to anyone
with Internet access
‣ Anyone could publish Web pages
20. But it wasn’t quite what you think
‣ The Web was envisioned largely as a
network for academic exchange
‣ Designed to separate content from
presentation
‣ HTML (Hypertext Markup Language) was
intended to add semantic meaning to
content:
<meaning>content</meaning>
21. When the Web went
commercial, all that went
out the window.
23. Web History Timeline
The Early The Boom The Lean The Social
Days Years Years Era
05
00
04
06
08
09
01
02
07
10
03
95
97
98
94
96
99
93
20
20
20
20
20
20
20
20
20
19
20
20
19
19
19
19
19
19
24. The Web gets rolling: 1993-1994
‣ Marc Andreessen creates Mosaic, the
first graphical Web browser, and goes on
to form Netscape
‣ Jerry Yang and
David Filo launch
Yahoo!, a growing
Web directory
‣ Berners-Lee
founds the W3C
World Wide Web Consortium
25. The Early Days: 1994-1996
‣ “We have a Web site!”
‣ Simple, then more sophisticated
‣ Browser battles
‣ Netscape vs. Internet Explorer (and AOL)
‣ Small screens – 640 x 480 pixels
‣ Limited palette – 256 colors
‣ Small page sizes – ~50k maximum
26. The Early Days: 1994-1996
640 x 480
1024 x 768
SCREEN SIZE WEB COLOR PALETTE
27. The Early Days: 1994-1996
‣ Layout was initially very rudimentary
Minimal image
Grey background
options
Very little Full-width
typographic pages
control
28. The Early Days: 1994-1996
‣ Browser-specific tags allowed background
colors and images, finer type adjustments
and more — but that was cheating
‣ Tables allowed more complex layouts —
but that was even more cheating
‣ The single-pixel GIF spacer nearly
brought about the end of the world
‣ Thus began the semantic war
29. The Early Days: 1994-1996
‣ Ad banners first appeared (and would
never go away again)
‣ Search existed, but was far less effective,
and there were many players
‣ E-commerce still relatively small
‣ Everyone was experimenting to figure
out what worked
30. The Early Days: 1994-1996
‣ The Web became a cultural phenomenon
‣ Business was excited and optimistic
32. Hotwired – early 1995
“Fake” columns
More concise
masthead
Consolidated
Blue hyperlinks
site navigation
33. Hotwired – late 1995
Task-focused
Netscape-only navigation
background
color
Shift to more
magazine-like
feature graphics
34. Hotwired – early 1997
Increasingly
information-heavy
layout
Daily updated
content bubbles
to the top
Detachable
Javascript
navigation
Frames!
35. Hotwired – 1997/98
Dynamic HTML
is used
(and abused)
Experimentation
as a driving
force – staying
on the cutting
edge
Screensaver-like
execution
(trendy at the time)
36. The Boom Years:
1997-2001
The Early The Boom The Lean The Social
Days Years Years Era
05
00
04
06
08
09
01
02
07
10
03
95
97
98
94
96
99
93
20
20
20
20
20
20
20
20
20
19
20
20
19
19
19
19
19
19
37. The Boom Years: 1997-2001
‣ Money entered the Web in vast quantities
‣ Being online was simply a requirement
for most businesses
‣ E-commerce started to take off
‣ “.com” became a buzzword, and
companies could increase their valuation
simply by adding it to their name
38. The Boom Years: 1997-2001
‣ Major Web sites were now multi-million-
dollar extravaganzas
‣ The technology race continued
‣ Web startups appeared by the hundreds,
and soaked up billions of dollars in
venture capital
‣ Nobody had any idea how to make
money, but nobody cared
39. The Boom Years: 1997-2001
‣ Just about anything related to
information or commerce went online
‣ Banking and stock trading
‣ Buying books, tickets, clothes
‣ Ordering pizza and groceries
‣ Major newspapers and magazines
‣ Video (though in a small way)
‣ Games
‣ Music downloads (legal and illegal)
40. The Boom Years: 1997-2001
‣ Dynamic HTML and Flash brought
movement, sound and interactivity
http://www.thefwa.com/flash10/
41. The Boom Years: 1997-2001
‣ As the Web became an integral part of
people’s lives, some worried about how
easy it was to use
‣ Usability became a growing field of
study and practice
‣ The Web standards movement grew up
to bring order to the chaos of browser
idiosyncrasies
42. The Boom Years: 1997-2001
‣ The Web became a major cultural force
‣ Online communities grew
‣ Average people started personal home
pages, to talk about... nothing
‣ Blogging became a trend
‣ Optimism and excitement were still in
the air...
44. The Lean Years:
2001-2005
The Early The Boom The Lean The Social
Days Years Years Era
05
00
04
06
08
09
01
02
07
10
03
95
97
98
94
96
99
93
20
20
20
20
20
20
20
20
20
19
20
20
19
19
19
19
19
19
45. The Lean Years: 2001-2005
‣ The dot-com bubble burst, killing millions
ruining the party
‣ Stock prices plummeted, companies
were delisted and many went bankrupt
‣ Lots of hip Web designers (like me) got
laid off
‣ The climate changed dramatically
46. The Lean Years: 2001-2005
‣ The Web’s early years were spent partying
and blowing money on stupid things, but
now it was time to grow up
‣ The experiments largely ended, and
companies focused on ROI and
measurable results
‣ Smaller Web sites, more focus on
customer needs
47. The Lean Years: 2001-2005
‣ Search became the focal point
‣ Google found the magic formula for truly
effective search results, called PageRank
‣ The rise of effective Web search
dramatically transformed the way we
use information, possibly forever
‣ The rise of search also greatly changed
the way we design the Web
48. The Lean Years: 2001-2005
‣ ROI imperative, focus on user needs,
search-oriented thinking and
usability concerns led to the rise of
User Experience as a field
‣ Best practices and a variety of ways
of researching and modeling user
behavior started to make the Web
more effective (if a bit less fun)
49. The Lean Years: 2001-2005
‣ Blogging grew from a niche activity
to a media phenomenon
‣ Many bloggers went from being
hobbyists to being professionals
‣ Blogs began to rival traditional media
as primary information sources —
major newspapers and magazines
started blogs as well
50. The Social Era
2005-present
The Early The Boom The Lean The Social
Days Years Years Era
05
00
04
06
08
09
01
02
07
10
03
95
97
98
94
96
99
93
20
20
20
20
20
20
20
20
20
19
20
20
19
19
19
19
19
19
51. The Social Era: 2005-present
‣ As Web technology and bandwidth
continued to evolve, a new generation
became the driving force
‣ Where the first ten years of the Web
were about content delivery and
browsing, the new era would be
creating and sharing
‣ It got started with a concept widely
known as Web 2.0
52. The Social Era: 2005-present
‣ Web 2.0 is a catch-all term for a variety
of converging ideas and technologies:
‣ User content creation and sharing
‣ Marketing as a conversation
‣ Client-side presentation technologies
‣ Simplified, task-focused interface design
‣ Connecting as a means of adding value
‣ Mashups of existing technologies
53.
54. The Social Era: 2005-present
‣ Video became arguably the key
content delivery mechanism
‣ Increasing adoption of broadband made
video watching easy
‣ YouTube made personal videos a
massive cultural force
‣ Creating a viral video became a way for
anyone to become a quasi-celebrity
‣ Video culture largely cut across social
boundaries
55. The Social Era: 2005-present
‣ Sharing made the Web social
‣ Facebook, Twitter, Flickr and other sites
made sharing content easy
‣ Sharing became a way to define one’s
identity online and build social credibility
‣ The combination of sharing and online
profiles created an parallel online social
culture in which people could define
themselves separately from their real-life
personas
56. But what does it really mean?
http://www.youtube.com/watch?v=NLlGopyXT_g
57. So that’s where the Web
came from. Next we’ll
discuss where it’s going.
64. How the Web has changed
‣ In thinking about the Web’s impact today,
we need to look at how it has evolved:
‣ Sharing is integral
‣ Video has become ubiquitous
‣ Viral culture is unpredictable, uncontrollable
‣ Speed is everything
‣ Trust has become a key factor
‣ Change is happening faster and faster
‣ Control by external forces is more difficult
65. Group Exercise
‣ Break into about 5 groups
‣ Choose one topic from the list on the
previous page
‣ Spend 15 minutes discussing and
researching it
‣ Be prepared to discuss what it means,
why it’s important, and show examples
of the principle in action online
66. A look at the Web’s impact on
Business
Culture
Entertainment
Information Use
67. The Web and Business
‣ The Web has changed the way business
functions at every level:
‣ Communication
‣ Information and research
‣ Advertising and marketing
‣ Customer relationship management
‣ Sales (online and offline)
‣ Customer service
‣ Supply chain and manufacturing
68. The Web and Business
‣ The Web has also disrupted a variety
of industries:
‣ The music business
‣ Newspaper and magazine publishing
‣ Television and movies
‣ Journalism as a profession
‣ The effects of the Web’s evolution on
these industries are still being felt, and
their future is still uncertain
69. The Web and Culture
‣ The Internet has contributed to mass
culture, with viral media and memes
traversing the globe in hours
‣ At the same time, it has helped niche
culture to flourish, with corners of the
Web devoted to every conceivable
topic or point of view
70. The Web and Culture
‣ The Web is all about connection, and it
connects people in many ways:
‣ Social media
‣ Forums and chat rooms
‣ Commenting on blogs
‣ Online dating
‣ Online phone calls
‣ Transactions via eBay, Craigslist
‣ Online gaming
71. The Web and Culture
‣ Social media have had a huge impact
on the way people interact with
companies and brands
‣ Companies are using Facebook,
Twitter, Foursquare and other tools to
connect with their customers
‣ People are increasingly defined by their
output online
72. The Web and Entertainment
‣ Music is widely available online, via
iTunes, YouTube, MySpace and legal
and illegal downloads
‣ The RIAA claims $12.5 billion in annual
losses to piracy — the real impact is
difficult to determine
‣ The Web has allowed artists to bypass
the music industry, and sell and
market their music directly to their fans
73. The Web and Entertainment
‣ The Web competes with television for
your attention, and it has been winning
‣ YouTube offers millions of clips, in
addition to thousands of pirated movies
and shows available online
‣ Hulu and Netflix offer legal alternatives,
and television producers and networks
have embraced them rather than fight a
losing battle
74. Content can come from anywhere...
http://www.youtube.com/watch?v=3eooXNd0heM
and it can be made by anyone
75. The Web and Information
‣ We consume information voraciously
today, and much of that information
comes from the Internet
‣ We read news online, watch videos,
send email, update our Facebook
status, shop, share funny links and
much more, often while watching TV
and listening to music at the same time
76. The Web and Information
‣ The ubiquity of Internet search, on the
desktop and now mobile, has made
information accessible like never before
‣ Search gives us a level of access to
information that libraries, encyclopedias
and other media never have
‣ At the same time, that information must
be analyzed and vetted, and it can
create a false sense of understanding
77. The Web and Information
‣ In addition to wacky videos, blogs have
become a major source of information
‣ Blogs often break news stories
‣ Bloggers are often featured as experts
or pundits within mainstream news, and
are often treated like journalists
‣ Blogs have significantly eaten into both
the authority and revenues of the
mainstream media
78. The Web and Information
‣ This “cult of the amateur”* has not
been without its critics, however
‣ The rise of user-generated content has
challenged the idea of “experts” and
intellectual authority
‣ Low quality, misinformation, factual
errors and sheer volume are problems
‣ Ubiquitous free content makes
professionalism more difficult
* Refers to The Cult of the Amateur: How Today's Internet Is Killing Our Culture – Andrew Keen, 2007
80. Web site categories
‣ Marketing
‣ E-Commerce
‣ Entertainment
‣ Information / News
‣ Tools / Task-oriented
‣ Social / Community
81. Site analysis exercise
‣ Choose a site in each of two of the
categories
‣ For each site, tell us the following:
‣ How it works / what it does
‣ The strategy (why they took that approach)
‣ Its major content or functionality
‣ What it does well
‣ What could be improved
82. Homework
‣ Choose two sites in each of four of the
categories (the four you didn’t choose)
‣ In a Word document, include:
‣ Name and URL of each site
‣ How it works / what it does
‣ The strategy (why they took that approach)
‣ Its major content or functionality
‣ What it does well
‣ What could be improved
‣ Compare the two and discuss the differences
