Lecture   the dynamic web (2013)
Upcoming SlideShare
Loading in...5

Lecture the dynamic web (2013)






Total Views
Views on SlideShare
Embed Views



1 Embed 1,013

http://dave.if90.net 1013



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Lecture   the dynamic web (2013) Lecture the dynamic web (2013) Presentation Transcript

  • 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 of the World Wide Web... Monday, 5 August 13
  • 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
  • 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
  • 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 and the core network of a set that came to compose the global Internet. Monday, 5 August 13
  • 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
  • US Internet backbone networks (colours represent different ISPs) http://source-report.com/internetbackbone/internetbackbone_20.htm Monday, 5 August 13
  • 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
  • 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
  • An archived copy of the first webpage http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Monday, 5 August 13
  • 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
  • • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 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
  • "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 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
  • 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
  • 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-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
  • Monday, 5 August 13
  • 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
  • Monday, 5 August 13
  • 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
  • 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
  • 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
  • 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 requirements • Easily cacheable • Can be viewed “offline” Monday, 5 August 13
  • Disadvantages of static websites • Much less scope for personalisation, interactivity. • Every little change/update needs to be done manually... Monday, 5 August 13
  • 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
  • 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
  • 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
  • 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
  • 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
  • LAMP Architecture • most common (but not the only) Web Server Stack http://en.wikipedia.org/wiki/LAMP_(software_bundle) Monday, 5 August 13
  • 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
  • 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 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
  • 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
  • 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. Monday, 5 August 13
  • 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
  • • 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
  • 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
  • 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
  • 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
  • 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
  • AdministeringYour Website • cPanel (or something like it) Monday, 5 August 13
  • AdministeringYour Website • phpMyAdmin - for administering databases Monday, 5 August 13