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 ﬁelds 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 worlds ﬁrst 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 ﬁrst Web browser and the ﬁrst HTTP server software
6 August 1991• First website goes online.• It deﬁnes Deﬁnes 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 ﬁrst 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 scientiﬁc departments or research laboratories• A turning point was the introduction of Mosiac - a graphical browser released in 1993
• Mosaic was the ﬁrst 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 - 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/ﬂash • 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
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/workﬂow 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 –speciﬁed 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.
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)
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 ‘ﬁnd’ 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 ﬁt 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.
Static website• each logical page is represented by a physical ﬁle on the web server
Advantages of static websites• Lower entry barrier for development (just plain old html and css ﬁles).• Simple hosting requirements• Easily cacheable• Can be viewed “ofﬂine”
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 beneﬁts will almost always outweigh the disadvantages.
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.