A brief history of the Internet, leading to a discussion of Dynamic Web design, and why we need it.

1. The Dynamic Web
and why we need it

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.

5. Packet Switching Vs Circut Switching
http://www.iekucukcay.com/?p=60

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

19. h"p://www.superdesignstudio.com/

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.

21. 1998 - 2000
"A
List
Apart"
website
c.
1998

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)

24. 2000 - 2004
h"p://csszengarden.com/

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.

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)

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.

32. Hypertext Transfer Protocol (HTTP)

33. Static vs Dynamic Website

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.