Your SlideShare is downloading. ×
0
The Dynamic Web
and why we need it
Monday, 5 August 13
History of the WWW
• To understand why there became a need
for dynamic websites it helps to know a bit
about the evolution...
History of the WWW
• The Internet as we know it today was not so much
a single invention, but the culmination of many
diff...
1958
• US Defense Advanced Research Projects
Agency (DARPA) created.
• Early research included the development of
robust n...
Packet SwitchingVs Circut Switching
http://www.iekucukcay.com/?p=60
Monday, 5 August 13
1969
• The Advanced Research
Projects Agency Network
(ARPANET), was the world's
first operational packet
switching network ...
1988
• US National Science Foundation (NSF)
commissioned the construction of the
NSFNET, a university network backbone.
• ...
US Internet backbone networks (colours
represent different ISPs)
http://source-report.com/internetbackbone/internetbackbon...
1989 - 1990
• Tim Berners-Lee, while working
CERN invents the World Wide
Web in a proposal for an
information management s...
6 August 1991
• First website goes online.
• It defines Defines the WorldWideWeb
as “a wide-area hypermedia
information retr...
An archived copy of the first webpage
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Monday, 5 ...
1992 - 1995
• early adopters of the World Wide Web
were primarily university-based scientific
departments or research labor...
• Mosaic was the first web browser to display
images inline with text (this was seen as a
huge leap forward at the time)
Mo...
1992 - 1995
• Bandwidth was limited by the network
technologies.
• Web began to grow from a few hundred
web pages.
• Any s...
Web organisation
• In 1993, CERN agrees that anyone can use
the web protocol and code royalty-free
• In 1994,Tim Berners-L...
1995 - 1998
• Commercial interest in capitalising on the
growth of the web (eCommerce)
• Increased commercial investment p...
1995 - 1998
Browser wars (Netscape vs Internet Explorer)
• Feature ‘arms race’
• Tables and frames
for more complex
layout...
1995 - 1998
• Trend towards advertising a “web presence” rather than offering useful
content or services.
• This lead to w...
h"p://www.superdesignstudio.com/
Monday, 5 August 13
1998 - 2000
• ‘Traditional’ interface design principles start to be seriously
applied to web site designs.
• Web developme...
"A	
  List	
  Apart"	
  website	
  c.	
  1998
1998 - 2000
Monday, 5 August 13
1999–2001: "Dot-com" boom and
bust
• Everyone wanted to jump
on the dot-com bandwagon
at the end of the 20th
Century.
• A ...
2000 - 2004
• High-speed Internet connectivity becomes more affordable
• Push towards web standards, headed by the World W...
h"p://csszengarden.com/
2000 - 2004
Monday, 5 August 13
2004 – 2007
• Web 2.0 era
• Web applications vs websites
• Highly dynamic
• Community oriented
• User-contributed multi-me...
Monday, 5 August 13
2008 onwards
• (almost) real-time content updates
• Trend for content to ‘find’ users (rss feed
subscriptions, twitter upda...
Monday, 5 August 13
So what are the trends?
• More content
• More frequently (up-to-date and on-demand)
• From more sources (crowd sourcing,
m...
So what are the trends?
• More contributors. As a web designer you need to at least have
an understanding of all these are...
Hypertext Transfer Protocol (HTTP)
• HTTP functions as a request-response protocol in the
client-server computing model.
•...
Hypertext Transfer Protocol (HTTP)
Monday, 5 August 13
Static vs Dynamic Website
Monday, 5 August 13
Static website
• each logical page is represented by a
physical file on the web server
Monday, 5 August 13
Advantages of static
websites
• Lower entry barrier for development (just
plain old html and css files).
• Simple hosting r...
Disadvantages of static
websites
• Much less scope for personalisation,
interactivity.
• Every little change/update needs ...
Some stats
• 24 hours of video is uploaded toYouTube
every minute. (source)
• More than 30 billion pieces of content (web
...
Disadvantages of static
websites
• Can you even fathom updating this much
content by hand? And these numbers are
growing a...
Dynamic website
• Website content is stored in a database
(and/or other external sources) and
assembled with markup and ou...
Advantages of dynamic
website
• Content can be updated in a decentralised
way. (a single “webmaster” does not have
the sol...
Disadvantages of dynamic website
• Higher entry barrier / learning curve for
development
• More complex web server require...
LAMP Architecture
• most common (but not the only) Web Server Stack
http://en.wikipedia.org/wiki/LAMP_(software_bundle)
Mo...
Installing an AMP Server Stack
on your local computer
• MAMP (OSX) http://www.mamp.info/en/
index.html
• WAMP (Windows) ht...
QUT Web Server
https://webhost.ci.qut.edu.au/
Monday, 5 August 13
How do you get your files onto a
remote Web Server?
• FTP (File Transfer Protocol)
QUT-CIF FTP details as entered into File...
Why we don’t recommend using the
QUT Web Server for your portfolio
• A QUT login is required to view your site
• Once you ...
Web hosting & Domain Name
Registration
• Web hosting – a service that provides
space on a web server for you to store
your...
Web Hosting Providers
• http://whirlpool.net.au/wiki/
companies_web_hosting
• http://forums.whirlpool.net.au/archive/
6559...
• Web hosting providers will usually offer
various hosting packages that cost different
amounts depending on features and ...
Web Hosting Requirements for
KIB216
• To host a WordPress site, your only
2 requirements are
• PHP version 5.2.4 or greate...
OK I’ve purchased a web hosting package, now what?
• You should receive an email containing the details you need to
login,...
Domain Name Registration
• Selecting a domain name registrar is a bit simpler than selecting
web hosting as they all provi...
Pointing a domain name to a web-server
• If your web hosting package includes domain
name registration, than this should a...
AdministeringYour Website
• cPanel (or something like it)
Monday, 5 August 13
AdministeringYour Website
• phpMyAdmin - for administering databases
Monday, 5 August 13
Upcoming SlideShare
Loading in...5
×

Lecture the dynamic web (2013)

3,945

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,945
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lecture the dynamic web (2013)"

  1. 1. The Dynamic Web and why we need it Monday, 5 August 13
  2. 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... Monday, 5 August 13
  3. 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) Monday, 5 August 13
  4. 4. 1958 • US Defense Advanced Research Projects Agency (DARPA) created. • Early research included the development of robust networking technologies for connecting remote military assets. Monday, 5 August 13
  5. 5. Packet SwitchingVs Circut Switching http://www.iekucukcay.com/?p=60 Monday, 5 August 13
  6. 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. Monday, 5 August 13
  7. 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 Monday, 5 August 13
  8. 8. US Internet backbone networks (colours represent different ISPs) http://source-report.com/internetbackbone/internetbackbone_20.htm Monday, 5 August 13
  9. 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 Monday, 5 August 13
  10. 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. Monday, 5 August 13
  11. 11. An archived copy of the first webpage http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Monday, 5 August 13
  12. 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 Monday, 5 August 13
  13. 13. • Mosaic was the first web browser to display images inline with text (this was seen as a huge leap forward at the time) Monday, 5 August 13
  14. 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 Monday, 5 August 13
  15. 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 Monday, 5 August 13
  16. 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 Monday, 5 August 13
  17. 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) • ... Monday, 5 August 13
  18. 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 Monday, 5 August 13
  19. 19. h"p://www.superdesignstudio.com/ Monday, 5 August 13
  20. 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. Monday, 5 August 13
  21. 21. "A  List  Apart"  website  c.  1998 1998 - 2000 Monday, 5 August 13
  22. 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. Monday, 5 August 13
  23. 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) Monday, 5 August 13
  24. 24. h"p://csszengarden.com/ 2000 - 2004 Monday, 5 August 13
  25. 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. Monday, 5 August 13
  26. 26. Monday, 5 August 13
  27. 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) Monday, 5 August 13
  28. 28. Monday, 5 August 13
  29. 29. So what are the trends? • More content • More frequently (up-to-date and on-demand) • From more sources (crowd sourcing, mashups etc) • On more devices • Moving away from a static web towards a dynamic web. Monday, 5 August 13
  30. 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. Monday, 5 August 13
  31. 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. Monday, 5 August 13
  32. 32. Hypertext Transfer Protocol (HTTP) Monday, 5 August 13
  33. 33. Static vs Dynamic Website Monday, 5 August 13
  34. 34. Static website • each logical page is represented by a physical file on the web server Monday, 5 August 13
  35. 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” Monday, 5 August 13
  36. 36. Disadvantages of static websites • Much less scope for personalisation, interactivity. • Every little change/update needs to be done manually... Monday, 5 August 13
  37. 37. Some stats • 24 hours of video is uploaded toYouTube 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) Monday, 5 August 13
  38. 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. Monday, 5 August 13
  39. 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. Monday, 5 August 13
  40. 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 Monday, 5 August 13
  41. 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. Monday, 5 August 13
  42. 42. LAMP Architecture • most common (but not the only) Web Server Stack http://en.wikipedia.org/wiki/LAMP_(software_bundle) Monday, 5 August 13
  43. 43. Installing an AMP Server Stack on your local computer • MAMP (OSX) http://www.mamp.info/en/ index.html • WAMP (Windows) http:// www.wampserver.com/en/ Monday, 5 August 13
  44. 44. QUT Web Server https://webhost.ci.qut.edu.au/ Monday, 5 August 13
  45. 45. How do you get your files onto a remote Web Server? • FTP (File Transfer Protocol) QUT-CIF FTP details as entered into FileZilla *note if you are connecting to the QUT Web Server from outside the QUT intranet, you must first connect via aVPN Monday, 5 August 13
  46. 46. Why we don’t recommend using the QUT Web Server for your portfolio • A QUT login is required to view your site • Once you leave QUT you will want to migrate your portfolio to an external server anyway.   Setting up external hosting now will avoid this hassle • Don’t have access to configure the Web Server • Security locked down • Tech support • ... Monday, 5 August 13
  47. 47. Web hosting & Domain Name Registration • Web hosting – a service that provides space on a web server for you to store your website files and serve them to the world. • Domain name – what you would most likely refer to as the “name” of a website – e.g. google.com.  This will “resolve” to the “real” ip address of the website – e.g. 74.125.39.103 Monday, 5 August 13
  48. 48. Web Hosting Providers • http://whirlpool.net.au/wiki/ companies_web_hosting • http://forums.whirlpool.net.au/archive/ 65599 • http://www.webhostingdirectory.com.au/ index.php?do=listcomp • http://www.geekcertified.com/node/1 Monday, 5 August 13
  49. 49. • Web hosting providers will usually offer various hosting packages that cost different amounts depending on features and how heavily trafficked your site will be. Monday, 5 August 13
  50. 50. Web Hosting Requirements for KIB216 • To host a WordPress site, your only 2 requirements are • PHP version 5.2.4 or greater • MySQL version 5.0 or greater • These are features that should be included with most ‘basic’ plans. Monday, 5 August 13
  51. 51. OK I’ve purchased a web hosting package, now what? • You should receive an email containing the details you need to login, setup and administrate your web server. Monday, 5 August 13
  52. 52. Domain Name Registration • Selecting a domain name registrar is a bit simpler than selecting web hosting as they all provide essentially that same one feature/ service (securing a particular domain name for your sole use for a period of time).  In fact the most difficult thing will be coming up with a domain name that isn’t already taken. • Some domain name registrars: • http://whirlpool.net.au/wiki/domain_registration • http://www.domparison.com/domain-name-price-comparison/ • http://lifehacker.com/5683682/five-best-domain-name- registrars • You will pay different amounts for different domain suffixes (called top-level domains).  .com and .com.au domains will cost more than .net or .org domains for example. • List of top-level domains: http://en.wikipedia.org/wiki/ List_of_Internet_top-level_domains Monday, 5 August 13
  53. 53. Pointing a domain name to a web-server • If your web hosting package includes domain name registration, than this should already be set up. • If you purchased your domain name from a third party domain name registrar then you will likely receive email instruction from  the domain name registrar and/or the web hosting provider.  It is a relatively simple process that involves entering the name server(s) of the web hosting company into your account settings of the domain name registrar site.  For more detailed instructions see http://www.justweb.com.au/review/web- hosting-australia.html. Monday, 5 August 13
  54. 54. AdministeringYour Website • cPanel (or something like it) Monday, 5 August 13
  55. 55. AdministeringYour Website • phpMyAdmin - for administering databases Monday, 5 August 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×