1. 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!

2. TT284 Tutorial 0 Introduction / TMA01 Note to Moderator:
TURN ON RECORDING!

3. Proposed Agenda Course Overview Useful Resources
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!

4. Overview and Resources

5. Practicals
Course Overview

6. 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 choice
e.g. Install “Firebug” extension for Firebox,
or press F12 in Chrome / IE

7. Important dates for 2012 TMA01 14th November TMA02 23rd Jan
TMA03 6th March
EMA part 1 (Workplan) 17th April
EMA part 2 (project) 30th May

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

9. News, Assessment (TMAs) and Safari Library
The TT284 Website (1)

10. Block Specific and National Forums
The TT284 Website (2)

11. The Case Studies
Also check out Charly Lowndes’ video tour of the VLE at
The TT284 Website (3)

12. The Safari On-line Library
Click on the green tick if you already knew about this, or have used it before on another course...

13. Case Studies Open University Running Club (OURC) Parkrun London 2012
Static (ish) Web site
Parkrun
Dynamic Web application
London 2012
Massive!
Development, support, management and use of Web technologies in context
Not necessarily best practice…

14. 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
socio-technical complexity
scale
scope

15. Additional Resources None of the following are required
These are suggestions, for INFORMATION ONLY

16. Skills for OU Study
Linked from Student Home…

17. Library Services

18. Real Books "HTML & XHTML Pocket Reference"
4th Editions, approx £7 each + available for Kindle
"HTML & XHTML Pocket Reference"
(3rd edition does NOT cover HTML5 so may be better!)
"CSS Pocket Reference"

19. Unreal Books CSS Pro, HTML Pro, Js Pro, PHP Pro
Android / Iphone Apps by Mobile Apps Maui
63p each (alternative, free apps are also available)

20. Review of Block One Two sentence summaries of each part of Block 1
(Does NOT replace actually reading the material…)

21. Key Points from Block 1 XHTML describes the CONTENT
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
csszengarden.com - every page has identical CONTENT but (through CSS) a different FORMAT

22. Key Points from Block 1 Part 3 Part 4 ACCESSIBILITY is a good thing
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

23. 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"

24. Andrew Tanenbaum – “Computer Networks”
Web Standards
“The nice thing about standards is that you have so many to choose from.”
Andrew Tanenbaum – “Computer Networks”

25. Standards: How the Web Develops - A personal view
Bad idea "dies out".... (we hope!) IE6!!
Good Ideas
Bad Ideas
Standards Version x.a
Standards Version x.b
Standards Version y.a
Good Idea:
Tables (added to HTML2.0 in 1996)
Bad Idea:
Microsoft Frontpage Extensions
Work-around:
Round Corners
- At first, layout as a table with corner images
- Later, replaced by CSS features
"Work-arounds"
Better implementation
Work-around "dies out"....

26. Survey – Browsers & DevicesPC
Mac
Tablet
Phone
Smart TV
Chrome 
Firefox
Internet Explorer
Opera
Safari
Other
Place a tick in any box that represents a browser and device that you use regularly
(I’ve done mine)

27. Web Page Design
Much of what follows is subjective – your opinions may vary Please feel free to state your view in the chat box…

28. 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"

29. 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."

30. 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 ********* ********* *********....."

31. Different Devices, Different Formats
The next three pages show the same information presented in three different formats
Consider:
Navigation - how does the information "flow"?
Use of space - how is white space used?
Other content - what else is in view?

32. Economist Print Edition

33. Economist Mobile Edition

34. Economist Web Edition

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

36. What is XHTML? <head>…</head> <title>…</title>
Structured ASCII Text File
<tag on> and <tag off>
<head>…</head>
<title>…</title>
<body>…</body>
<h1>…<h1>
<p>…</p>
<ol>…</ol>
<ul>…</ul>
<li>…</li>
What is HTML?
All Internet browsers, such as Internet Explorer and Netscape, are capable of displaying any document placed on the Internet so long as it is:
* in plain text, i.e. no native formatting commands as used by all leading word processing packages. This type of file is often called an ASCII text file.
* marked-up with appropriate HTML tags
* or the appropriate "plug-in" has been added to the browser, for example Flash.
Plain text documents do not look particularly spectacular and after reading page after page of bland ASCII text, produced in a typewriter-like screen font, they even get boring and not very inspirational!
The Hypertext Mark-up Language (or HTML) is the language used to create documents for the World Wide Web. As the name implies it is a mark-up language - the original (ASCII) text is edited and new (text) codes are added to indicate how (and where) the text should appear.
When an HTML document is read by a suitable Web browser specifically designed to understand HTML codes, such as Internet Explorer or Netscape, the formatting codes are interpreted and the text is displayed in an attractive and more dynamic way. HTML documents can include graphics, and, more importantly, links to other documents - hypertext.
An HTML document can be produced in free-format, i.e. it doesn't matter what the text file looks like it is the browser that does the formatting. HTML is not so much concerned about the appearance of the documents but about the structure of a document.
HTML documents contain codes that mark headings, paragraphs, lists (3-types), tables etc.. Many formatting codes are available and many of them will be introduced in this course.
However, unlike other mark-up languages, such as LaTeX, HTML need NOT be concerned with other layout terms such as the typeface, font size, and style of the text in a document. These can be left to the capabilities of the local browser. However, as your experience grows you will want to take more control over the look and presentation of your individual documents or your whole Web site.
HTML editors are useful, especially if you have a large number of documents to write, but they are not essential to the creation of a HTML file - all you need is a simple text editor or a word processing package capable of writing (or saving) ASCII text files. However, as your experience and your Web sites grow you should consider using a Web site editor and management tool such as FrontPage or Dreamweaver.
Note: One of the best ways to get to know HTML is to save and edit an existing HTML document. When you are viewing a Web page that has a similar layout to the one you want, use the Save as... option available from the File menu of your browser. Make sure you save the file in its original HTML source form.

37. Anatomy of an XHTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<html xmlns="
<head>
<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" />
</head>
<body>
<!-- An unseen HTML comment – All content and other tags go here-->
</body>
</html>

38. HTML Developments 1992 HTML Based on SGML
Tagged document + DTD
November 24, 1995 : HTML 2.0 published
May 1996: (tables)
August 1996: (client-side image maps)
January 1997: (internationalization)
January 1997 : HTML 3.2 published as a W3C Recommendation.
December 1997 : HTML 4.0 published as a W3C Recommendation.
Strict, in which deprecated elements are forbidden,
Transitional, in which deprecated elements are allowed,
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
HTML5
January 26, XHTML 1.1 became a W3C Recommendation on May 31, 2001.
HTML Developments
TBL based HTML on the emerging standard for text mark-up call the Standard Generalized Mark-up Language [SGML] which was being used at CERN and uses the now familiar mark-up tags contained with angle brackets "<tag>". An SGML document has two fundamental parts:
* the document containing the content and the mark-up tags
* a document type declaration (DTD) which defines the grammar and rules for the language in which the document is written. That is, it defines all the names of the various element use in the mark-up, how they interact with each other and other syntax that might apply.
Every SGML-based language, such as HTML, must have its own SGML DTD defining the language rules and, hence any SGML based document is useless without its associated DTD. SGML is good at what it was designed for (large scale document management systems) but its in ability to process a document without a DTD, the inflexibility and inability of DTDs to be reused, plus the complexity of the software to process SGML documents meant that the authors of Web browsers never properly implemented the SGML interpreter and wrote software that could only process HTML codes.
Although processing of HTML pages by browsers was fast, this bespoke authoring of browsers meant that new features were difficult to implement consistently. Recognizing the special aspects of the Web a new sub-set of SGML was developed called the eXtensible Mark-up language [XML] which like SGML is a tool for defining other mark-up languages and the grammatical rules etc. are still defined by a DTD. XML imposes strict rules on how new languages must be written but, if followed, these rules make documents usable even if the DTD is not present. Some of these rules are:
* Elements and attributes names are case-sensitive.
* Every start tag must have an end tag.
* Empty elements are written using "empty-element tags".
* Element attributes must always be assigned values and these values must always be quoted.

39. Using CSS Each XHTML tag can have associated CSS info
CSS has TWO major functions
Formatting
Set font, style, size
Set foreground colour
Set background
e.g:
h1 { font-family: sans-serif; font-weight: bold; }
Layout
Where something appears on the page
e.g:
#menu { position: absolute; left: 10px; top: 10px; }

40. CSS Layout Concepts In essence, very simple Everything is a box
Boxes are either DIVs or SPANs
By default (with no CSS stylesheet) -
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

41. CSS Layout Concepts - 2
This is useful, because the default (no- stylesheet) case does something sensible
Header and paragraph boxes arranged down the left of the page
Words packed inside paragraph box

42. CSS Layout Concepts - 3
Or we can make boxes FLOAT, to act a bit like SPANS:

43. 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 earlier…

44. 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 / tablet?
Sorry - can't be done with CSS!

45. Study and TMA Guidance

46. 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 tutor
Work on assignments as you study the material
Always plan to submit your assignments at least 3 days before the final cut-off date

47. Approaching TMAs Study the course
Don't try and just pick out those bits you think might fit into the TMA. You will need it all later!
Read all of the TMA instructions carefully early in the block
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

48. References
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

50. 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!
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)

51. How Are You Feeling About TMA?
Aaarggh! OK
We will cover TMA01 in much more detail during the next tutorial..
Not looked yet…
Already finished(!)

52. Any Other Questions....? Next Tutorial Session:
Tuesday 29th October 2013, 19:00 same place
Topics:
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 for information about the recordings