1. Web technologies Session 2

2. Slide 2. 1 Objectives for session 2  To develop participants’ knowledge, skills and understanding of web-page design  To understand what makes a well-designed web page  To understand how the design of the page impacts on the user  To consider approaches to teaching web-page design

3. Slide 2. 2 Web page design  What makes a good web page?  Think of the criteria used to judge the onscreen presentation (unit 7.1) and the printed leaflet (unit 7.3) http://www.bbc.co.uk

4. Slide 2. 3 Criteria for judging a webpage  Is it attractive?  Is the text easy to read?  Do the images suit the content?  Is there a pleasing balance of text and images?  Is the layout clear and are the different elements in suitable positions?  Is the eye led to each aspect of the design?  How is white space used on the page?

5. Slide 2. 4  Exchanging and sharing information  Year 7 - Use given criteria to evaluate the effectiveness of own and others’ publications and presentations.  Year 8 - Devise criteria to evaluate the effectiveness of own and others’ publications and presentations, and use the criteria to make refinements.  See handout 2.1 Framework objectives

6. Slide 2. 5 Activity 1  The envelopes contain the main components for the Amstead homepage but in black and white  Select and arrange the components to create a new design  Note any colours you wish to use  Share your design and explain your choice of colours and layout  Could you use this sort of activity with pupils?  How might you adapt it?

7. Slide 2. 6 Creating web pages  Creating and applying a style sheet to a series of web pages:  Is efficient because it enables the designer to change the appearance of the website by changing only one file  Is good practice because it separates the structure and content from the appearance of the website

8. Slide 2. 7 Activity – 15 minutes  Open Mediator  Help sheets  “Introduction to web page creation, structure and appearance”  WT tutor resource 2.1  Images folder – Amstead logo

9. Slide 2. 8  Who is the audience for a web page?  What do users expect to see on a web page?  What is the best font and size to use?  Where is the best place to put hyperlinks? http://www.bbc.co.uk/cbeebies/ http://psychology.wichita.edu/optimalweb/default.htm Designing a web page

10. Slide 2. 9 What users like and expect  Most users:  expect both text and images on a page  scan the text for key words  expect simple language  prefer bullet points  dislike scrolling, especially horizontal scrolling  consider Comic Sans the most illegible font  prefer Verdana  prefer larger fonts (older users)  prefer hyperlinks in the body of the text but also expect a menu of links on the left of the screen  expect a home button top left or middle/bottom of the screen

11. Slide 2. 10  Increasing numbers of users, including many with disabilities, are accessing the web from a variety of sources:  On TV  On a WAP phone  From a kiosk  On a screen-reader http://www.w3c.org Accessing the Web

12. Slide 2. 11  Provide a text equivalent for every non-text element  Don’t rely on colour alone  Use markup and style sheets and do so properly  Avoid using tables to lay out pages  Provide clear navigation mechanisms  Ensure that documents are clear and simple  Use W3C technologies and guidelines WAI Accessibility: some guidelines

13. Slide 2. 12 Activity: ICT Framework objectives  Handout 2.1  Highlight any objectives that may be covered when pupils are creating web pages

14. Slide 2. 13 Activity: Annotating work  Using handout 2.2  Annotate the webpage  Comment on what you would change and why?  Comment on what you think is good design and why?

15. Slide 2. 14 Activity: Using questioning to clarify understanding  Pupils’ understanding can be checked by the careful use of questioning  A key objective in the ‘fitness for purpose’ theme is the requirement to justify the choice of form, style and content  Formulate some questions you might ask of a Y9 pupil to check his/her understanding of web design based on this page …

16. Slide 2. 15