2. History of the WWW
• To understand why there became a need
for dynamic websites it helps to know a bit
about the evolution of the World Wide
Web...
3. History of the WWW
• The Internet as we know it today was not so much
a single invention, but the culmination of many
different technologies and fields of research.
• We might categorise some of these as:
• The physical (network infrastructure)
• The logical (information organisation and
transport)
• The representatioal (how we represent the
data - usually visual)
• The interactive (how we interact with the
data - interfaces)
4. 1958
• US Defense Advanced Research Projects
Agency (DARPA) created.
• Early research included the development of
robust networking technologies for
connecting remote military assets.
6. 1969
• The Advanced Research
Projects Agency Network
(ARPANET), was the world's
first operational packet
switching network and the
core network of a set that
came to compose the global
Internet.
7. 1988
• US National Science Foundation (NSF)
commissioned the construction of the
NSFNET, a university network backbone.
• NSFNET was decommissioned in 1995
when it was replaced by new backbone
networks operated by commercial Internet
Service Providers
8. US Internet backbone networks (colours
represent different ISPs)
http://source-report.com/internetbackbone/internetbackbone_20.htm
9. 1989 - 1990
• Tim Berners-Lee, while working
CERN invents the World Wide
Web in a proposal for an
information management system
that presented data in a common
and consistent way.
• He creates the HyperText Transfer
Protocol (HTTP), the HyperText
Markup Language (HTML), the first
Web browser and the first HTTP
server software
10. 6 August 1991
• First website goes online.
• It defines Defines the WorldWideWeb
as “a wide-area hypermedia
information retrieval initiative aiming
to give universal access to a large
universe of documents.”
• Makes no mention of anything we
might associate with visual interface
design.
11. An archived copy of the first webpage
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
12. 1992 - 1995
• early adopters of the World Wide Web
were primarily university-based scientific
departments or research laboratories
• A turning point was the introduction of
Mosiac - a graphical browser released in
1993
13. • Mosaic was the first web browser to display
images inline with text (this was seen as a
huge leap forward at the time)
14. 1992 - 1995
• Bandwidth was limited by the network
technologies.
• Web began to grow from a few hundred
web pages.
• Any sense of web design was severely
limited by these constraints
• but, there is a clear trend towards a more
visual, more accessible web
15. Web organisation
• In 1993, CERN agrees that anyone can use
the web protocol and code royalty-free
• In 1994, Tim Berners-Lee founds the World
Wide Web Consortium (W3C) - the main
international standards organization for the
WWW
16. 1995 - 1998
• Commercial interest in capitalising on the
growth of the web (eCommerce)
• Increased commercial investment pushed
the technology to a point where there was
a legitimate role for web designers.
• Early examples of User Created Content
(UCC) - e.g. GeoCities
17. 1995 - 1998
Browser wars (Netscape vs Internet Explorer)
• Feature ‘arms race’
• Tables and frames
for more complex
layouts
• Animated gifs
• Javascript (button
rollovers etc)
• ...
18. 1995 - 1998
• Trend towards advertising a “web presence” rather than offering useful
content or services.
• This lead to websites which were stuffed full of attention seeking ‘bells and
whistles’ whether they served a purpose or not
• Splash pages
• Tiled background images
• Crazy background and text colour combinations
• Animated gifs/flash
• Blinking/scrolling/marching ants etc. text effects
• http://www.htmlprimer.com/articles/90s-web-design-nostalgic-look-back
• http://www.webpagesthatsuck.com/gorgeous-websites-from-the-late-90s-
to-inspire-you-if-you-have-no-taste.html
• More often than not this approach distracted from the content and made it
less accessible
20. 1998 - 2000
• ‘Traditional’ interface design principles start to be seriously
applied to web site designs.
• Web development tools like Dreamweaver promote a more
‘visual’ approach/workflow to web-interface design.
• Content is becoming more important and web-design begins to
focus on servicing that content
• But... presentation and content are still combined –specified
within html markup. It is not possible to update one
independent of the other.
• Website layouts of this period still look square, based mostly on
HTML tables (an abuse of their intended use) and sliced images.
22. 1999–2001: "Dot-com" boom and
bust
• Everyone wanted to jump
on the dot-com bandwagon
at the end of the 20th
Century.
• A lot of money was thrown
at entrepreneurs without
solid business plans because
of the novelty of the dot-
com concept, leading to the
tech bubble and subsequent
bust.
23. 2000 - 2004
• High-speed Internet connectivity becomes more affordable
• Push towards web standards, headed by the World Wide Web
Consortium (W3C)
• Continuing trend of more content, more often.
• Separation of presentation and content allowing each to be
updated independent of the other.
• Cascading Style Sheets (CSS) for presentation
• HTML for content
• Move away from static web pages towards
dynamic web sites. (more on this later)
25. 2004 – 2007
• Web 2.0 era
• Web applications vs websites
• Highly dynamic
• Community oriented
• User-contributed multi-media content (lots of it!)
• Interactivity and functionality approaching native
desktop applications
• Social networking takes off
• Purchasing goods and services online via sites like eBay
and Amazon becomes mainstream to the point where it
threatens traditional retailers.
26.
27. 2008 onwards
• (almost) real-time content updates
• Trend for content to ‘find’ users (rss feed
subscriptions, twitter updates etc)
• Storing personal data “in the cloud”
• Content ‘mash-ups’
• Embedded widgets, feeds, services etc using
external APIs
• Design for multiple devices (especially mobile)
28.
29. So what are the trends?
• More content
• More frequently (up-to-date and on-
demand)
• From more sources (crowd sourcing,
mashups etc)
• Moving away from a static web towards a
dynamic web.
30. So what are the trends?
• More contributors. As a web designer you need to at least have
an understanding of all these areas and how they fit together.
31. Hypertext Transfer Protocol (HTTP)
• HTTP functions as a request-response protocol in the
client-server computing model.
• In the most common example the web browser is the client and an
application running on a computer hosting a web site is the server.
• The client submits an HTTP request message to the server.
• The server returns a response message to the client containing
completion status information about the request and may also
contain requested content in its message body.
34. Static website
• each logical page is represented by a
physical file on the web server
35. Advantages of static
websites
• Lower entry barrier for development (just
plain old html and css files).
• Simple hosting requirements
• Easily cacheable
• Can be viewed “offline”
36. Disadvantages of static
websites
• Much less scope for personalisation,
interactivity - any scripting has to be done
client-side.
• Every little change/update needs to be
done manually...
37. Some stats
• 24 hours of video is uploaded to YouTube
every minute. (source)
• More than 30 billion pieces of content (web
links, news stories, blog posts, notes, photo
albums, etc.) shared each month in over 70
languages. (source)
• 50 million tweets are sent per day. (source)
38. Disadvantages of static
websites
• Can you even fathom updating this much
content by hand? And these numbers are
growing at an exponential rate.
• Fortunately computers are very good at
automating repetitive tasks in a dynamic
way.
39. Dynamic website
• Website content is stored in a database
(and/or other external sources) and
assembled with markup and output by a
web server script or application.
40. Advantages of dynamic
website
• Content can be updated in a decentralised
way. (a single “webmaster” does not have
the sole privilege/responsibility of updating
the website)
• Modularisation and reuse of common code
(e.g. headers, menus).
• Automation
41. Disadvantages of dynamic website
• Higher entry barrier / learning curve for
development
• More complex web server requirements
• Issues with pages being indexed by search
engines.
• Overall the benefits will almost always
outweigh the disadvantages.