The Dynamic Weband 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 Switching Vs 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 - 1998Browser 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 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)

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 a VPN

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

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

Administering Your Website

• cPanel (or something like it)

Monday, 5 August 13

Administering Your Website• phpMyAdmin - for administering databases

Monday, 5 August 13