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. 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)
Monday, 5 August 13
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
6. 1969
⢠The Advanced Research
Projects Agency Network
(ARPANET), was the world's
ďŹrst operational packet
switching network and the
core network of a set that
came to compose the global
Internet.
Monday, 5 August 13
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. US Internet backbone networks (colours
represent different ISPs)
http://source-report.com/internetbackbone/internetbackbone_20.htm
Monday, 5 August 13
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 ďŹrst
Web browser and the ďŹrst HTTP
server software
Monday, 5 August 13
10. 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.
Monday, 5 August 13
11. An archived copy of the ďŹrst webpage
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Monday, 5 August 13
12. 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
Monday, 5 August 13
13. ⢠Mosaic was the ďŹrst web browser to display
images inline with text (this was seen as a
huge leap forward at the time)
Monday, 5 August 13
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. 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. 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. 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. 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
Monday, 5 August 13
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/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.
Monday, 5 August 13
21. "A
 List
 Apart"
 website
 c.
 1998
1998 - 2000
Monday, 5 August 13
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. 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
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
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. 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.
Monday, 5 August 13
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
34. Static website
⢠each logical page is represented by a
physical ďŹle on the web server
Monday, 5 August 13
35. 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â
Monday, 5 August 13
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. 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. 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. 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. 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. 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.
Monday, 5 August 13
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. 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
45. How do you get your ďŹles 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 ďŹrst connect via aVPN
Monday, 5 August 13
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 conďŹgure the Web Server
⢠Security locked down
⢠Tech support
⢠...
Monday, 5 August 13
47. Web hosting & Domain Name
Registration
⢠Web hosting â a service that provides
space on a web server for you to store
your website ďŹles 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. 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.geekcertiďŹed.com/node/1
Monday, 5 August 13
49. ⢠Web hosting providers will usually offer
various hosting packages that cost different
amounts depending on features and how
heavily trafďŹcked your site will be.
Monday, 5 August 13
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. 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. 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 difďŹcult 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/ďŹve-best-domain-name-
registrars
⢠You will pay different amounts for different domain sufďŹxes
(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. 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