Download presentation
Presentation is loading. Please wait.
1
What is an Information System?
An integrated set of components that allow people to carry out tasks effectively by providing access to information. Examples of information systems: Databases Websites Mobile Applications Kiosk Systems Games
2
What Information Systems have you used?
Electronic Season Ticket Turnstile Argos Stock Checker Cinema Ticket collection machine
3
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
4
What is the world wide web?
Web page Website = a single document (html file) = an effective way to split up information across multiple web pages Each website has a Home page that is a starting point to explore the website A website may have hyperlinks to other websites
5
HTML HTML stands for Hyper Text Markup Language and is the main language used to produce webpages In HTML you use tags to construct the Webpage, for example <b> Mr Ross </b> would put Mr Ross in bold
6
HTML Tags Open Tag Close Tag What the Tag identifies <html>
Start and end of HTML file <head> </head> Start and end of the heading section <title> </title> Page title <body> </body> Start and end of the content of the page <hX> </hX> Headings numbered 1-6 <i> </i> Italics <center> </center> Center alignment <p> </p> Paragraph
7
More HTML Tags Open Tag Close Tag What the Tag identifies <u>
Underlines the text <b> </b> Makes the text bold <br> Starts a new line in text <a href> </a> Adds a hyperlink to another webpage <img> Used to insert an image
8
What is a URL? Uniform Resource Locator
Full web address that is used to access a page directly a unique address for a file on the internet – http - HyperText Transfer Protocol - - news/Scotland/index.htm – leads to the file Protocol Domain name Pathname
9
What is a hyperlink? A link between web pages, documents or files
Hyperlinks are activated by clicking on text or an image or 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
10
Absolute and relative hyperlinks
To create hyperlinks:- HTML used (as hyperlinks are part of a webpage) href attribute holds the URL of the webpage <a> tag is also used Internal hyperlink – E.g. < a href=“../home.htm”> Home page </a> relative addressing is used – no protocol or domain name is needed External hyperlink – E.g. < a href=“ absolute addressing is used
11
Hyperlinks www.allshopping.co.uk index.htm images foods finest
resources specials.htm price_list.pdf fish.png cereals.bmp frozen.htm fresh.htm
12
What is navigation? How the user finds their way around an information system Navigation structure – how pages or screens are arranged Linear Hierarchical Web
13
Navigation structure - Linear
Level 1 Level 2 Level 3 Level 4 Pages viewed in order e.g. taking a survey User can go back to the previous page Best for short sequences
14
Navigation structure - Hierarchical
Level 1 Level 2 Level 3 Also called “tree navigation” Fast movement between pages Easy to add pages to
15
Navigation structure - Web
Level 1 Level 2 Level 8 Level 5 Level 9 Level 3 Level 7 Level 4 Level 6 Multiple direct connections between web pages
16
Navigation Methods Web Browser Navigation Type in URL
Forward, Back and Home buttons Hyperlinks (text) Hotspots (image) Favourites/Bookmarks History
17
Navigation Aids Searching – using keywords Menus – many websites
have drop down menus of pages Breadcrumbs show the user’s position in the website
18
More navigation aids 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 website
19
More navigation aids Use a Navigation bar with links to different areas of the website
20
Good website design to aid navigation
Consistent throughout the site so users get used to it Reduce clutter by grouping links into sections Keep the number of clicks to a minimum to get users to a page quickly Range of text and graphic-based hyperlinks to provide a flexible way to move around
21
What is a web browser? Program to let the user browse web pages
Loads pages from the web server and displays them to you The HTML of the page is responsible for the appearance of the page, not the browser
22
Web browser features Home page - viewed when the browser starts – or Home button clicked Store a reading list that can be viewed offline Save pages and print pages Stores history of recently used pages Bookmarks/Favourites to remember URLs Tabbed browsing to view several web pages in one window
23
What is a search engine? Web site that helps you to find information
Examples: Bing, Google How search engines work:- Search web pages for different words Create an index (list) of the words and the pages (URL) 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
24
Basic search User enters one or more keywords
Sometimes the keywords are called a search string Pages that are found by a search engine are called hits Well chosen keywords cuts down the time taken to find what you are looking for
25
Basic search … continued
Phrases are enclosed in quotation marks e.g. “Springburn Academy” Search engine finds web pages that contain that complete phrase – not just part of it Good as fewer results returned so more likely to contain what you are looking for
26
Advanced search Most search engines let the user use:-
keyword AND keyword – 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. Springburn NOT school
27
Purpose of an Information System
To store information and present it to the user in a form which is useful to the user. An organisational information system collects, organises, stores, processes and outputs information for the benefit of a company or an organisation.
28
Describe the Purpose Different websites have different purposes eg. To inform, shopping, banking etc Look at these websites and identify their purpose: School website
29
Features of an Information System
Main features of an Information System (IS) are: Hardware physical parts of a computer system Software the programs that the hardware is used to run should be able to process, search and sort data quickly and efficiently
30
Features of an IS (cont)
Storage all IS store data use hard disks, solid state disks or cloud Networks/Connectivity a network is a set of computers joined together so information can be transferred/communicated between them
31
Functions of an IS Collecting information
Taking information in and gathering it together Variety of input devices used for this purpose: keyboards mice scanner
32
Functions of an IS (cont)
Organising information managing the information using software such as a database package or web page creation application Storing information saving information so it can be used again information needs to be regularly backed up
33
Functions of an IS (cont)
Processing information performing operations on the data such as sorting, searching and calculating Outputting information making the information available in the required format – e.g. printed, in a web page, on the screen, ed
34
Example: School Information System
Purpose: take care of the administration tasks in a school Collecting: gathering registration information and examination marks Organising: pupils into classes for lessons Storing: keeping backups of all data Processing: putting reports from different teachers together for each pupil Outputting: printing reports for parents, sending marks to examiners, printing attendance information for Personal Support
35
Advantages of computer based information systems
Computers can retrieve (find) data much quicker than searching manual filing systems. Computer files take up very little physical space Computer based system can be constantly updated Different organisations information systems can be linked in networks Can access data from anywhere using the internet
36
Wireframe Design A wireframe is a diagram or sketch which shows the appearance and function of a website or information system. Contains details such as position of each element (text, graphics, hyperlinks etc) on the page May be a basic outline - hand drawn May be a detailed diagram, created using dedicated software
39
Actual web page
40
Wireframe Example
41
Testing Testing should check:- Links and navigation work
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 work Page counters update
42
Testing (cont) Testing should check:- Menus work
Input boxes accept text Graphics, text, videos and audio files all appear and have correct content The website works with different browsers Any JavaScript coding works as expected
43
Users of an IS IS users include experts and novices (beginners) Expert
familiar with the features and functions of the IS does not need detailed instructions to get started
44
Users of an IS (cont) Novice
unfamiliar with the features and functions of the IS requires help to get started using the system will benefit from detailed instructions
45
Age-range The age-range refers to the ages of the users
Target audience of an Information System is the set of typical users. Typical users include: young child, teenager and adult. E.g. Facebook age-range and target audience would be: MUST take target audience into account when designing the user interface of an Information System (13+) teenagers and adults
46
What is the User Interface?
User interface – the way the computer and the user communicate Also known as the HCI – human computer interface Good software + Poor interface = no body wants to use
47
What is wrong with this website?
48
Visual Layout Pages should look appealing to all users
Avoid information overload A balance of graphics and text Accessibility features Remember the target audience Avoid clutter – use whitespace
49
Navigation Consideration must be given to how the user will navigate the information system. Browser buttons Hyperlinks Hotspots Pop-up menus Search features
50
Selection Selection - making a choice
How will the user make choices in the information system? e.g. Using a menu Form filling Radio button Hotspot
51
Selection (cont) Which of these is better?
Selection is better than free text entry when choice is limited - user is forced to choose a valid option
52
Selection (cont) E.g. consider a takeaway shop online ordering. If they only sell 4 flavours of pizza then forcing the user to choose one of them stops mistakes PIZZA Hawaiian Margherita Pepperoni Meat Feast Enter pizza choice: Cheese and little fi|
53
Look at these screens from the same suite of products:
54
Consistency Pages and screens should have a consistent appearance throughout the information system Text: font, colour, etc Use of colour Page balance Navigation features
57
Readability About making the website usable by everyone all abilities
A A A Readability About making the website usable by everyone all abilities all impairments Methods of making an information system accessible include:- Adjustable text size Speech recognition Specialised pointing devices
58
Interactivity Interactivity is the ‘feel’ of the page, e.g. the feedback given when an option is selected. JavaScript can be used by programmers to make webpages interactive and dynamic
59
JavaScript Mouse Events
onmousedown onmouseup onmouseenter onmouseleave onmousemove onmouseover onmouseout button pressed button released - pointer moved onto - pointer moved out - pointer moving over pointer over pointer moved out Example
60
Interactivity A dynamic web page contains information which will change each time you visit the page. E.g. the current date and time the result of performing a search Example
61
Interactivity An interactive web page contains information which will change in response the users actions. E.g. change of text, or style or image more information shown feedback e.g. popup dialog to report an error audio or video played Example
Similar presentations
