Presentation is loading. Please wait.

Presentation is loading. Please wait.

TT284 Tutorial 0 Introduction / TMA01 Session Starts 7 PM – Be with you soon! Please Note: This OU Live session will be recorded and made available in.

Similar presentations

Presentation on theme: "TT284 Tutorial 0 Introduction / TMA01 Session Starts 7 PM – Be with you soon! Please Note: This OU Live session will be recorded and made available in."— Presentation transcript:

1 TT284 Tutorial 0 Introduction / TMA01 Session Starts 7 PM – Be with you soon! 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 Key Points from Block 1 Examples of Website Design & Layout CSS From Experience Study Hints / How to approach TMAs Next Tutorial / Questions If you have any questions as you go along, please "raise your hand", or just type them in the chat box 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 Course Overview Practicals

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

7 Important dates for 2012 TMA01 14 th November TMA02 23 rd Jan TMA03 6 th March EMA part 1 (Workplan) 17 th April EMA part 2 (project) 30 th 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 The TT284 Website (1) News, Assessment (TMAs) and Safari Library

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

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

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) o Static (ish) Web site Parkrun o Dynamic Web application London 2012 o 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 complexityscalescope

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" (3rd edition does NOT cover HTML5 so may be better!) "CSS Pocket Reference" 4th Editions, approx £7 each + available for Kindle

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 CSS describes the FORMAT o - every page has identical CONTENT but (through CSS) a different FORMAT STANDARDS allow the internet (and the web) to work IETF for the internet, W3C for the web + Others, e.g. ISO Part 1 Part 2

22 Key Points from Block 1 ACCESSIBILITY is a good thing But not necessarily easy o Additional effort + thought & planning There's > 1 way to design a website... There are attempts to measure USABILITY BUT never forget that "content is king"! o Style over substance rarely true (for long) on the web Part 3 Part 4

23 Key Points from Block 1 (Coverage of security is very light) o More to come later... XHTML LINKS create the "web" o But XHTML FORMS make it "interactive" Print out the CSS Box Model & pin it up! Quality web typography isn't here yet... Part 5 Part 6

24 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 Standards Version x.aStandards Version x.bStandards Version y.a Bad Ideas "Work-arounds" Good Ideas Better implementation 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-around "dies out".... Bad idea "dies out".... (we hope!) IE6!!

26 Survey – Browsers & Devices PCMacTabletPhoneSmart 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 "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? BBC News

29 "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." Effective Design? Guardian UK

30 "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 ********* ********* *********....." Ineffective Design? Waitrose

31 Different Devices, Different Formats The next three pages show the same information presented in three different formats Consider: o Navigation - how does the information "flow"? o Use of space - how is white space used? o 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? Structured ASCII Text File and …

37 Anatomy of an XHTML page XHTML1.0 Valid Strict Template

38 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 HTML5 January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001.

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

40 CSS Layout Concepts In essence, very simple Everything is a box o Boxes are either DIVs or SPANs By default (with no CSS stylesheet) - o DIVs are arranged on the left, down the page o SPANs fill containing box left to right, top to bottom Automatic assignments, o 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! o Simple, fixed layouts, where everything is a known, fixed size are pretty easy (e.g. forms) o The interaction of "width", "padding", and "margin" with floated elements can have strange results o Flexible layouts, that work well with a variety of different screen widths are VERY hard to achieve o 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 o Well supported, but twice as much to develop CSS cannot flow text between boxes o Cannot achieve true, flexible layouts like newspaper columns o (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? o 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 o 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 o Don't leave it to the end Keep the assignment beside you as you study the block o 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 o Use this to guide your time (and word count) o Use headings, structure that match the mark scheme Your tutor will validate files during marking o 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)

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

52 Any Other Questions....? Next Tutorial Session: o Tuesday 29 th October 2013, 19:00 same place Topics: o TMA01 Hints and Tips o Q&A session on TMA01 o 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

Download ppt "TT284 Tutorial 0 Introduction / TMA01 Session Starts 7 PM – Be with you soon! Please Note: This OU Live session will be recorded and made available in."

Similar presentations

Ads by Google