Session Starts 7 PM – Be with you soon!
TT284 Tutorial 0
Introduction / TMA01
Please Note: This OU Live session will be recorded and
made available in various formats. By attending this
session you are agreeing to this recording. Thank You!
TT284 Tutorial 0
Introduction / TMA01
Note to Moderator:
Proposed Agenda
If you have any questions as you go
along, please "raise your hand", or just
type them in the chat box
Course Overview
Useful Resources
Key Points from Block 1
Examples of Website Design & Layout
CSS From Experience
Study Hints / How to approach TMAs
Next Tutorial / Questions
Also, please use the “chat” box to
talk to each other as much as you
want. I understand that real-time
opportunities to talk are limited!
Overview and Resources
Course Scheduling
•One week per section
•TMA in parallel with last 3 weeks of each block
•Don’t forget the Case Studies!
•Find the “developer tools” on your browser of
o e.g. Install “Firebug” extension for Firebox,
o or press F12 in Chrome / IE
Important dates for 2014/15
TMA01 13th November
TMA02 22nd Jan
TMA03 5th March
EMA part 1 (Workplan) 16th April
EMA part 2 (project) 1st June
Useful Resources
Have you found your way around the TT284
website ( a.k.a. VLE ) ?
Safari Bookshelf
Actual, real books
Your tutor and the tutor forum
The national forums
In the next few slides we will look briefly at the TT284
Website. You may already be familiar with most of it.
Screenshots are earlier version, current may differ slightly
News, Assessment (TMAs) and
Safari Library
The TT284 Website (1)
Block Specific and National Forums
The TT284 Website (2)
The Case Studies
Also check out Charly Lowndes’ video tour of
the VLE at
The TT284 Website (3)
The Safari On-line Library
Click on the green tick if you already knew about this, or
have used it before on another course...
Case Studies
•Open University Running Club (OURC)
oStatic (ish) Web site
oDynamic Web application
•London 2012
•Development, support, management and use of
Web technologies in context
•Not necessarily best practice…
Similarities and Differences
•Case studies all share a sporting theme, but the
organisations differ in:
•‘fly on the wall’ perspective versus ‘expert’ opinion
•Analyse, assess, discuss and reflect to test
understanding of concepts and techniques from
teaching materials
Additional Resources
None of the following are required
These are suggestions, for INFORMATION ONLY
Skills for OU Study
Linked from Student Home…
Library Services
4th Editions,
approx £7 each
+ available for
"HTML & XHTML Pocket Reference"
(3rd edition does NOT cover HTML5 so may be better!)
"CSS Pocket Reference"
CSS Pro, HTML Pro, Js Pro, PHP Pro
Android / Iphone Apps by Mobile Apps Maui
63p each (alternative, free apps are also
Review of Block One
Two sentence summaries of each part of Block 1
(Does NOT replace actually reading the material…)
Key Points from Block 1
Part 1
• STANDARDS allow the internet (and the web) to work
• IETF for the internet, W3C for the web
• + Others, e.g. ISO
Part 2
XHTML describes the CONTENT
CSS describes the FORMAT
o - every page has identical
CONTENT but (through CSS) a different FORMAT
Key Points from Block 1
Part 3
There's > 1 way to design a website...
There are attempts to measure USABILITY
BUT never forget that "content is king"!
Style over substance rarely true (for long) on the web
Part 4
ACCESSIBILITY is a good thing
But not necessarily easy
Additional effort + thought & planning
Key Points from Block 1
Part 5
Print out the CSS Box Model & pin it up!
Quality web typography isn't here yet...
Part 6
(Coverage of security is very light)
More to come later...
XHTML LINKS create the "web"
But XHTML FORMS make it "interactive"
Web Standards
“The nice thing about standards is that you have so many to
choose from.”
Andrew Tanenbaum – “Computer Networks”
Standards: How the Web Develops
- A personal view
Good Ideas
Bad Ideas
Standards Version x.a
Standards Version x.b
Bad idea
"dies out"....
(we hope!)
Standards Version y.a
Good Idea:
Tables (added to HTML2.0 in 1996)
Bad Idea:
Microsoft Frontpage Extensions
"dies out"....
Round Corners
- At first, layout as a table with corner images
- Later, replaced by CSS features
Survey – Browsers & Devices
Place a tick in any box that
represents a browser and
device that you use regularly
(I’ve done mine)
Smart TV
Web Page Design
Much of what follows is subjective – your opinions may vary
Please feel free to state your view in the chat box…
Effective Design? BBC News
"I think this site has been designed very well, it is un-cluttered, clean, efficient and has good signal as
opposed to noise. It makes good use of white space, it uses one primary font (Arial I think) with
various styles to direct you straight to various headlines"
Effective Design? Guardian UK
"The useful information is displayed in the visible form without the unnecessary distraction. The
graphic elements complement the message to convey and attract the users."
Ineffective Design? Waitrose
"This is a search for Pork Sausages that returns 44 hits. I can only see 12 on each page and
between 4 & 6 on each screen. ********* Annoying. Look at all that ********** white space. Total *******
waste of my valuable *********** time and ********* ********* *********....."
Different Devices, Different Formats
The next three pages show the same
information presented in three different
Navigation - how does the information "flow"?
Use of space - how is white space used?
Other content - what else is in view?
Economist Print Edition
Economist Mobile Edition
Economist Web Edition
HTML & CSS Basic Concepts
This is a preview of some of the practical work in parts 3
onwards – Don’t worry if you haven’t read these parts yet,
you can always come back to view the recording.
What is XHTML?
• Structured ASCII Text
• <tag on> and <tag off>
• <head>…</head>
• <title>…</title>
• <body>…</body>
• <h1>…<h1>
• <p>…</p>
• <ol>…</ol>
• <ul>…</ul>
• <li>…</li>
Anatomy of an XHTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>XHTML1.0 Valid Strict Template</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- An unseen HTML comment – All content and other tags go
HTML Developments
• 1992 HTML Based on SGML
o Tagged document + DTD
• November 24, 1995 : HTML 2.0 published
o May 1996: (tables)
o August 1996: (client-side image maps)
o January 1997: (internationalization)
• January 1997 : HTML 3.2 published as a W3C Recommendation.
• December 1997 : HTML 4.0 published as a W3C Recommendation.
o Strict, in which deprecated elements are forbidden,
o Transitional, in which deprecated elements are allowed,
o Frameset, in which mostly only frame related elements are allowed;
• April 1998 : HTML 4.0 was reissued
• December 1999 : HTML 4.01 published as a W3C Recommendation.
• May 2000 : HTML 4.01 Strict published
• January 26, 2000. XHTML 1.1 became a W3C Recommendation on May
31, 2001.
Using CSS
Each XHTML tag can have associated CSS info
CSS has TWO major functions
Set font, style, size
Set foreground colour
Set background
h1 { font-family: sans-serif;
font-weight: bold; }
Where something appears
on the page
#menu { position:
absolute; left: 10px; top:
10px; }
CSS Layout Concepts
In essence, very simple
Everything is a box
Boxes are either DIVs or SPANs
By default (with no CSS stylesheet) o
DIVs are arranged on the left, down the page
SPANs fill containing box left to right, top to bottom
Automatic assignments,
e.g. h1 is a DIV, words are SPANs
CSS Layout Concepts - 2
This is useful, because the default (nostylesheet) case does something sensible
Header and paragraph boxes arranged down
the left of the page
Words packed inside paragraph box
CSS Layout Concepts - 3
Or we can make boxes FLOAT, to act a bit like SPANS:
CSS Layout Concepts - 3
This gives us a LOT of flexibility
But can also cause problems!
Simple, fixed layouts, where everything is a known, fixed size
are pretty easy (e.g. forms)
The interaction of "width", "padding", and "margin" with floated
elements can have strange results
Flexible layouts, that work well with a variety of different screen
widths are VERY hard to achieve
Getting a CSS layout to work, without tools that let you actually
SEE the box model in action is almost impossible!
This is why I recommended finding the developer tools
CSS Layout Concepts - 4
CSS is NOT a "silver bullet" for web layout
Sites need different CSS for mobile and desktop layouts
Well supported, but twice as much to develop
CSS cannot flow text between boxes
Cannot achieve true, flexible layouts like newspaper columns
(except by some complicated Javascript tricks)
Wouldn't it be nice to have text in a single column on a
mobile, but flow across 2 or 3 columns on a desktop /
Sorry - can't be done with CSS!
Study and TMA
Study Hints
Make sure you have the study guide and know
where you should be
Don’t let yourself fall behind
If you start to fall behind discuss it with your
Work on assignments as you study the material
Always plan to submit your assignments at least
3 days before the final cut-off date
Approaching TMAs
Study the course
Read all of the TMA instructions carefully early
in the block
Don't try and just pick out those bits you think might fit into the
TMA. You will need it all later!
Don't leave it to the end
Keep the assignment beside you as you study
the block
make notes as you see content that might be useful
• Key explanations should be in your own words to show you
understand the concepts.
• You must not use quotations to replace explanations that
should be in your own words.
• Give a reference to the source of the information that you
have used to give your own explanation.
• Give references for diagrams
• Reference in a standard way
• Quotations should be used for standards where the wording
should not be changed.
• Use quotations for important statements of opinion by
important people in this field
TMA01 Issues
Read the question - Answer the question!
Look at the marking scheme
Use this to guide your time (and word count)
Use headings, structure that match the mark scheme
Your tutor will validate files during marking
So should you!
o or browser add-ons
All TMAs submitted on or before the cut off date
WILL BE RETURNED on or before 28th
November and will be marked in the order
submitted (more or less)
How Are You Feeling About TMA?
We will cover TMA01 in
much more detail during
the next tutorial..
Not looked yet…
Already finished(!)
Any Other Questions....?
Next Tutorial Session:
Monday 3rd November, 19:00 same place
TMA01 Hints and Tips
Q&A session on TMA01
Looking ahead to Block 2
Thank you for attending!
Please feel free to click on applause / smile / yawn /
confusion as you see fit....
Watch your e-mail for information about the recordings

TT284 Tutorial 1