the dynamic web
DESCRIPTION
A brief history of the Internet, leading to a discussion of Dynamic Web design, and why we need it.TRANSCRIPT
![Page 1: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/1.jpg)
The Dynamic Weband why we need it
![Page 2: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/2.jpg)
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...
![Page 3: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/3.jpg)
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)
![Page 4: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/4.jpg)
1958
• US Defense Advanced Research Projects Agency (DARPA) created.
• Early research included the development of robust networking technologies for connecting remote military assets.
![Page 5: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/5.jpg)
Packet Switching Vs Circut Switching
http://www.iekucukcay.com/?p=60
![Page 6: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/6.jpg)
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.
![Page 7: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/7.jpg)
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
![Page 8: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/8.jpg)
US Internet backbone networks (colours represent different ISPs)
http://source-report.com/internetbackbone/internetbackbone_20.htm
![Page 9: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/9.jpg)
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
![Page 10: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/10.jpg)
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.
![Page 11: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/11.jpg)
An archived copy of the first webpage
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 12: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/12.jpg)
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
![Page 13: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/13.jpg)
• Mosaic was the first web browser to display images inline with text (this was seen as a huge leap forward at the time)
![Page 14: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/14.jpg)
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
![Page 15: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/15.jpg)
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
![Page 16: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/16.jpg)
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
![Page 17: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/17.jpg)
1995 - 1998Browser wars (Netscape vs Internet Explorer)
• Feature ‘arms race’
• Tables and frames for more complex layouts
• Animated gifs
• Javascript (button rollovers etc)
• ...
![Page 18: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/18.jpg)
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
![Page 19: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/19.jpg)
h"p://www.superdesignstudio.com/
![Page 20: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/20.jpg)
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.
![Page 21: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/21.jpg)
"A List Apart" website c. 1998
1998 - 2000
![Page 22: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/22.jpg)
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.
![Page 23: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/23.jpg)
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)
![Page 25: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/25.jpg)
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.
![Page 26: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/26.jpg)
![Page 27: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/27.jpg)
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)
![Page 28: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/28.jpg)
![Page 29: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/29.jpg)
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.
![Page 30: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/30.jpg)
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.
![Page 31: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/31.jpg)
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.
![Page 32: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/32.jpg)
Hypertext Transfer Protocol (HTTP)
![Page 33: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/33.jpg)
Static vs Dynamic Website
![Page 34: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/34.jpg)
Static website
• each logical page is represented by a physical file on the web server
![Page 35: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/35.jpg)
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”
![Page 36: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/36.jpg)
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...
![Page 37: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/37.jpg)
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)
![Page 38: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/38.jpg)
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.
![Page 39: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/39.jpg)
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.
![Page 40: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/40.jpg)
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
![Page 41: The Dynamic Web](https://reader033.vdocument.in/reader033/viewer/2022052619/5554ec29b4c905bb2a8b4aef/html5/thumbnails/41.jpg)
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.