Web-based structures, links and testing National 4 & 5 Computing Science

Contents National 4 website, page, URL hyperlink National 5 hyperlinks (internal, external), relative and absolute addressing navigation web browsers and search engines good design to aid navigation, usability and accessibility

What is the world wide web? A collection of multimedia information held on the internet. Information stored at websites that often contain many web pages Websites are stored on web servers that are connected to the internet Web page = a single document (html file) Websites = an effective way to distribute information Each website has a Home page that is a starting point to explore the website A website may have hyperlinks to other websites

What is a hyperlink? Links between web pages, documents or files Hyperlinks - activated by clicking on text or on an area of the screen like a hotspot Internal hyperlink goes to another page within the same website External hyperlink goes to a different website – which may be on a different server

National 5

Absolute and relative hyperlinks - N5 HyperText Mark-up Language (HTML) = language used to create web pages To create hyperlinks:- href attribute holds the URL of the webpage <a> tag is also used Internal hyperlink – < a href=“home.htm”> Home page </a> relative addressing is used External hyperlink – < a href=“www.bbc.co.uk/news”> BBC </a> absolute addressing is used

Questions What is the world wide web? What is a web page? What language can be used to create webpages? Where are websites stored? What is a hyperlink? Nat 5 What is the difference between an internal hyperlink and an external hyperlink? Which type of hyperlink uses absolute addressing? Name the other type of addressing that is used by a hyperlink.

What is a URL? Uniform resource Locator Full web address that is used to access a page directly Unique address for a file on the internet http://www.LHS.sch.uk/departments/computing /index.htm Protocol – http - HyperText Transfer Protocol Domain name - www.LHS.sch.uk Pathname - departments/computing/index.htm – leads to the file

What is navigation? How the user finds their way around an information system Navigation structure – how pages or screens are arranged Linear Hierarchical Web

Linear navigation structure Pages are viewed in order e.g. When entering delivery details followed by payment information User can go back to the previous page Best for short sequences Level 1 Level 2 Level 3 Level 4

Hierarchical navigation structure Sometimes called “tree navigation” Fast movement between pages and easy to add pages to Level 1 Level 2 Level 3

Web navigation structure There are multiple direct connections between web pages Level 6 Level 4 Level 7 Level 2 Level 1 Level 3 Level 8 Level 5 Level 9

Questions What does URL stand for? Name the parts of the following URL:- Http://next.co.uk/summer/sale.htm Nat 5 What is navigation? Describe the three types of navigation that a website may use.

Practical task Use a search engine to find out about the quantity of information that is added to the World Wide Web each day. Write a short statement about your findings

What is a web browser? Program to let the user browse web pages that are stored on another computer (a web server) Loads page from another computer and displays them Examples are:- Internet Explorer Safari Firefox Chrome Opera

Web browser facilities Possibly;- E-mail File transfer Browser can be set up with a home page to be viewed when the browser starts – or when Home button is used Save pages and print pages Store a reading list that can be viewed offline Store history of recently used pages Bookmarks or Favourites to remember web page addresses Tabbed browsing to view several web pages in one window

What is a search engine? Web site that helps you to find information Examples:- Ask Jeeves, Bing, Google How search engines work:- Search web pages for different words Create an index of the words and the pages that they are found on Search the indexes using the words that the user entered Display hyperlinks to the pages containing the words that the user entered

Basic search User enters one or more keywords Sometimes the keywords are called a search string The Enter key or search button is used to start the search for all or part of the search string Well chosen keywords cuts down the time taken to find what you are looking for e.g. Three toed sloth instead of sloth

Basic search … continued Phrases are enclosed in quotation marks e.g. “Lesmahagow High School” Search engine finds web pages that contain that complete phrase – not just part of it Useful as the search results fewer web pages and they are more likely to contain what you are looking for Pages that are found by a search engine are called hits

Advanced search Most search engines let the user use:- AND – all keywords must appear on the web page OR – at least one keyword must appear on the web page NOT – a keyword must not appear on the web page e.g. Lesmahagow NOT school

Browser Questions Describe what a web browser does. Which web browser do you use at home? What feature of a browser can you use to remember URL’s of pages that you have visited? What use is the History feature? What do you use a search engine for? Which search engine do you normally use? Describe how a search engine works.

What is navigation? How the user finds their way around an information system Navigation methods when using a browser include:- Enter URL into address bar Forward and back buttons Home button Pages visited are stored in browser’s history

Navigation methods on a web page Hyperlinks – link to another web page Hotspots - text or graphics that activate a video, display a graphic or open a window Breadcrumbs show the user’s position in the website

More navigation methods on a web page Guided navigation – e.g. filters used on shopping websites Tag clouds – an image containing keywords that are linked to web pages Site maps -  a Web page that lists the pages on a Web site

Good website design to aid navigation Range of text and graphic-based hyperlinks to provide a flexible way to move around Navigation bar with links to different areas of the website Site map showing all the pages Consistent throughout the site so users get used to it Keep the number of click to a minimum to get users to a page quickly

Navigation Questions Explore the following navigation features then describe each:- Breadcrumbs (e.g. PC World – find an Apple laptop) Guided navigation (e.g. Debenhams) Site Maps (e.g. Next – very bottom of home page) State two features of website design that aid navigation

What is usability? How easy it is to use the website An intuitive user interface increases the usability of the website Good idea to use familiar icons where possible Intuitive means you know instinctively what to do e.g. think of a smartphone’s user interface

Good website design to aid usability A reasonable time to load the site Adequate text to background contrast (not yellow text on a white background) Font size that is easy to read Consistent styles and colours Flash is not used too much so that the website does not have excessive moving text, flashing graphics, etc A clear company logo A clear description of the company’s purpose A clear path to contact information Unobtrusive ads Main content is visible before scrolling down

What is accessibility? Websites should be designed to be usable by everyone – including people with disabilities Methods of making a website accessible include:- Speech recognition Specialised pointing devices

Good website design to aid accessibility For visually impaired users:- Well chosen font, colour and size of text which helps readability Careful choice of colour scheme A screen magnification or zoom feature Voice output option that reads text and commands for visually impaired users or users with reading or learning difficulties Auto-complete when filling forms

Usability & accessibility questions What is usability? Describe two features of website design that ensure that a website is usable. What is accessibility? Describe two features of website design that ensure that a website is accessible to a person who is visually impaired.

Testing – National 5 Testing should check:- Links and navigation Each web page matches the user interface design i.e. text and graphics are positioned correctly and correct colour scheme and font are used Buttons Menus Input boxes Graphics, videos, audio files The website works with different browsers

Questions Name 3 features of a website that should be tested. Many browsers and websites use cookies and plug-ins. Use BBC Webwise to find out about them. Describe cookies and plug-ins.