TT284 Tutorial 1

1. Session Starts 7 PM – Be with you soon! TT284 Tutorial 1 TMA01 / ID & Class / Forms / Accessibility 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 1 TMA01 / ID & Class / CSS positioning Note to Moderator: TURN ON RECORDING!

3. Proposed Agenda If you have any questions as you go along, please "raise your hand", or just type them in the chat box Module Focus Accessibility Entities, colours, media ID and Class Forms TMA01 Hints & Tips Look ahead to Block 2 & 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. Module Overview

5. Course Overview You Are Here Practicals

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

7. Accessibility (or not…) An alternative (and personal) view of accessibility

8. Accordingto the W3C Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging (http://www.w3.org/ WAI/ intro/ accessibility.php)

9. Our Obligation

10. Perceivable to users in a way they perceive. No invisible content to any of their senses Operable: user interface component and navigation must be operable. It cannot require interaction that they cannot perform Four Principles of Accessibility

11. Understandable: information and the operation of user interface must be understandable Robust: content must be robust enough that it can be interrupted reliably by a wide variety of user agents, including assistive technologies Four Principles of Accessibility

12. Images & Sounds Sound files should always be accompanied by a transcript But: Is this realistic? - Will speech recognition technology improve? - Should all itunes songs come with lyrics? Images cause the biggest problem for an accessible Web. <img> attributes: – <alt> alternative text – <longdesc> URL of a long description file. But: how successful would Instagram be if every user had to include a text description of their photo?

13. Does “Man in red canoe” describe this image sufficiently? Describing Images

14. Mirror Lake Investments Inc. “Steering a course through your personal finances” Mortgages, savings, pensions Maple Leaf Tours Canadian Activity Holidays Consider These Two Web Pages What is an appropriate description for each image?

15. Longdesc in the Real World GOOD It is a standards compliant means to provide enhanced description of images far beyond the capabilities of alt text BAD It has virtually no browser support, so whilst your site may be standards compliant almost no visitor will be able to take advantage of it Conclusion longdescis standards compliant and may be used, but should not be relied upon to provide information which is not provided by some other means until it has better browser support

16. Different countries have different legislative guidelines. In the UK the following legislation applies to the accessibility of Web sites: The Disability Discrimination Act 1995, Part III Access to Goods and Services Special Educational Needs and Disability Act 2001 The Disability Discrimination Act 1995, Part IV Education Policies for the European Union and the rest of the world can be found at: http://www.w3.org/ WAI/ Policy/ Accessibility and Legislation

17. Accessibility Summary Accessibility is a good thing But: It is not easy It is not free It cannot be always be approached as a “tick box” exercise (e.g. with accessibility checkers) It depends on context And is not always possible or appropriate

18. Entities, Coloursand Multi-media Some useful features of XHTML in detail

19. XHTML Entities Modern browsers supports several character-sets: ASCII character set Standard ISO character sets Mathematical symbols, Greek letters, and other symbols These are all available through entities – you will probably need to look them up!

20. Color can be referenced by: Name Background-color: silver; Hexadecimal code Background-color: #c0c0c0 Note that is 3 bytes of hex RRGGBB That leads to over 16 million available colours Colour Specifications

21. We are not all Graphics Designers so don’t be afraid to use Web based tools to help use get our colours balanced. http://colorblender.com/ Colour Charts

22. Graphics File Formats

23. Sound & Vision For completeness (outside scope of this module) MP3 (sound) and MP4 (video) can just be linked to Browser will play, or load an external program Or “embed” as an object

24. Id and class Attributes Improvements in how CSS & XHTML work together

25. XHTML and CSS - 1 • We know how to style XHTML elements • e.g. h2 { font-size: 24px; } • But this applies to ALL h2 elements

26. XHTML and CSS - 2 • We can also group XHTML elements to treat them all the same way • e.g. h1,h2,h3 { font-family: sans-serif; } • And still treat individual items separately • e.g. h1 { font-weight: bold; }

27. Limitations • We cannot treat the same item differently in different places • e.g. differently styled headings in the main content and a sidebar • It is difficult to "explain" the structure of your page • Which part IS the sidebar? • Except by using XML comments • But these are not "visible" to CSS

28. New Attribute - Class • So XHTML introduces attributes to "describe" items • class attribute to describe what kind of thing(s) an element is • <h1 class="content">Stuff...</h1> • Elements can be of more than one kind • <p class="content quotation">more stuff...</p>

29. Using the Attribute in CSS • A new type of selector • .quotation { font-style: italic; } • We can combine this with element selectors • p.quotation { font-style: italic; margin: 20px; }

30. Another Attribute - ID • Implements the "Highlander" principle: • There can be only one(*) • Identifies a "unique" item ON THIS PAGE • <h1 id="maintitle">...</h1> (*) Obligatory geek joke, I have to do these, it's in my contract

31. Why have id? • Why do we need this? • Strictly speaking, we do not • To make a class unique only use it once! • But ID can help with identifying the unique components of your page • And can usefully be used in combination with class and multiple pages

32. Using the ID Attribute in CSS • uses the "octothorpe" • Or what you and I call a "hash"! • h1#maintitle { font: bold 24px sans-serif; } • Since there can be only be one element with that ID this is equivalent to • #maintitle {...}

33. Some Additional Elements • ID and class can be used to describe structure of page • But can be bit clumsy for this purpose • E.g. must we give every element in the sidebar a class="sidebar" attribute? • XHTML provides <div> element so we can indicate the “divisions” of our page

34. The <div> Element The <div> element simply groups other XHTML together But must retain the XML “hierarchy” By itself, makes no difference to layout But, combined with id and class: Helps document your page structure Allows us to treat the group of elements as a single block for CSS layout and formatting <div> elements are VERY common in real-life web pages

35. The <span> element For completeness, XHTML also provides the <span> element Like <div> but groups a set of words together Again, no effect on its own But combine with id and class to format with CSS Less common in real pages But useful for some things: <p>I love <span class=“placename”>Paris</span> in the spring</p>

36. Id and class Summary Allow us to “document” our page And hence format by “meaning” rather than element In combination with <div> and <span> allow us to group things in arbitrary ways And hence treat those groups as a single item for layout and format Use class to describe the kind of thing Use id to identify the separate parts of your page

37. Advanced Topic – Using id and class together Typically, one CSS file is used across multiple pages (easy to maintain) But we might want slight variations between different types of page, e.g. I use a different background image for pages about heraldry Normal page: <div id=“maincontent”> Lots of stuff… </div> Heraldry page: <div id=“maincontent” class=“heraldry”> Lots of stuff </div> CSS file: #maincontent { font: whatever; layout: whatever…; etc… background-image: url(“trees.png”); } #maincontent.heraldry { background-image: url(“wall.png”); }

38. Forms A quick review of forms and web page interaction

39. Behind the Submit Button : CGI Common Gateway Interface (CGI) are: Server side computer programs, or scripts, that receives the form data and processes it before returning requests. Alternatives use Application Program Interfaces (APIs)

40. The Anatomy of an XHTML Form <form Attributes action=http://norton.open.ac.uk/reflect.php method="post” id="form1” >

41. Input: Dropdown lists <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>

42. Hidden fields Hidden fields are not displayed by the browser Uses: passing information to, say, a MySQL database when there might be ambiguity in the data set, i.e. uniquely identifying John Smith. Also to help identify an uploaded file. <input type="hidden" id="age" name="age" value="23" /> <input type="hidden" id="DOB" name="DOB" value="01/01/70" /> <input type="hidden" id="admin" name="admin" value="1" />

43. Hidden Fields – Important note Whilst the browser will not render a hidden field it is available in plain text to anyone who views the page source That means that it should never be used to contain anything you are not content with the user seeing and when hidden fields are submitted you should always realise that the user may have changed the data

44. File fields These allow the user to browse to and select a file from their machine to upload The name parameter allows us to identify the file when it arrives.

45. Submit & Reset buttons <input type="submit” name=“submit” value="Submit" /> <input type=”reset" name=“reset” value=”Reset" />

46. Testing your forms http://norton.open.ac.uk/reflect.php Use with your own forms Use Chrome or Firebug to see what other people’s forms do

47. Reflect.php example

48. TMA01 Hints and Tips Useful information for tackling TMA01

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

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