The Dynamic Weband why we need it

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

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)

1958

• US Defense Advanced Research Projects Agency (DARPA) created.

• Early research included the development of robust networking technologies for connecting remote military assets.

Packet Switching Vs Circut Switching

http://www.iekucukcay.com/?p=60

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.

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

US Internet backbone networks (colours represent different ISPs)

http://source-report.com/internetbackbone/internetbackbone_20.htm

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

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.

An archived copy of the first webpage

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

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

• Mosaic was the first web browser to display images inline with text (this was seen as a huge leap forward at the time)

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

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

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

1995 - 1998Browser wars (Netscape vs Internet Explorer)

• Feature ‘arms race’

• Tables and frames for more complex layouts

• Animated gifs

• Javascript (button rollovers etc)

• ...

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

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

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.

"A  List  Apart"  website  c.  1998

1998 - 2000

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.

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)

h"p://csszengarden.com/

2000 - 2004

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.

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)

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.

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.

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.

Hypertext Transfer Protocol (HTTP)

Static vs Dynamic Website

Static website

• each logical page is represented by a physical file on the web server

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”

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

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)

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.

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.

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

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.