+ All Categories
Home > Documents > By eng : ayman mahmoud - WordPress.com · 2010-01-18 · By eng : ayman mahmoud M150-PART 2 2...

By eng : ayman mahmoud - WordPress.com · 2010-01-18 · By eng : ayman mahmoud M150-PART 2 2...

Date post: 14-Jul-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
59
By eng : ayman mahmoud 1 M150-PART 2 [email protected] Unit nine Old programming languages were based on writing programs as a single very big monolithic code file. Disadvantages: Very much time consuming. Very error prone. Difficult to debug, modify, and update. Inability to distribute tasks among several programmers. Programming language such as JavaScript function have construction known as functions, subroutines and procedures. Structuring a program into several code modules in several files helps overcome these problems. JavaScript allows you to build a program from a number of separate les, each containing JavaScript code. A main program le can indicate that it wants to use JavaScript code from an external le by the simple inclusion of a line of HTML naming that le. The most common type of .js le is a function library which is a le containing a collection of related functions. These les (.js les) can also be used to hold the code needed to implement new types of objects. Function libraries and object types are module that can be implemented using .js les. A module is a piece of code concerned with a specific task to perform. ( function procedure subroutine ) Modules and modular programming have been used in computing for many years and their meaning has changed over time. Give at least three advantages of using modules. Different parts of the problem may be developed separately.
Transcript

By eng : ayman mahmoud

1 M150-PART 2

[email protected]

Unit nine

Ø Old programming languages were based on writing programs as a single very big monolithic code file.

Ø Disadvantages:

Ø Very much time consuming.

Ø Very error prone.

Ø Difficult to debug, modify, and update.

Ø Inability to distribute tasks among several programmers.

Ø Programming language such as JavaScript function have construction known as functions, subroutines and procedures.

Ø Structuring a program into several code modules in several files helps overcome these problems.

Ø JavaScript allows you to build a program from a number of separate files, each containing JavaScript code.

Ø A main program file can indicate that it wants to use JavaScript code from an external file by the simple inclusion of a line of HTML naming that file.

Ø The most common type of .js file is a function library which is a file containing a collection of related functions. These files (.js files) can also be used to hold the code needed to implement new types of objects.

Ø Function libraries and object types are module that can be implemented using .js files.

Ø A module is a piece of code concerned with a specific task to perform. ( function – procedure – subroutine )

Ø Modules and modular programming have been used in computing for many years and their meaning has changed over time.

Give at least three advantages of using modules.

Ø Different parts of the problem may be developed separately.

By eng : ayman mahmoud

2 M150-PART 2

[email protected]

Ø It allows many people to work on the same project, so shortening development time.

Ø Modules can be reused.

Ø Modules are replaceable components which can be easily replaced by improved versions without affecting other parts of the program.

Ø aid program testing and code maintenance

-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Importing function libraries in JavaScript

Ø Suppose we have a function library called drawingLibrary.js (the extension .js stands for java script file).

1- <script src = myLibrary.js> </script> 2- <script SRC = C:\M150\JavaScript\FunctionLibraries\myLibrary.js> </script>

3- <script SRC = http:/www.abc.cocom/JSCode/myLibrary.js> </script>

Ø If you import a library into your program, it is as if you copy/pasted all its functions into your code or had to rewrite them all. A simple program that makes use of a function library called drawingLibrary.js. <HTML> <HEAD>

<TITLE>An example program that uses drawingLibrary.js</TITLE> <SCRIPT SRC = drawingLibrary.js> </SCRIPT> <SCRIPT> drawSquare('red',5); document.write('<BR>');

By eng : ayman mahmoud

3 M150-PART 2

[email protected]

drawSquare('blue',5) </SCRIPT >

</HEAD> <BODY> </BODY> </HTML>

Ø Black box programming means the use of a function library (or any code module) by reference to its documentation rather than its implementation.

Ø A function library is intended to be used as a black box, you know the input, and you know the output, no need to understand the code in between.

Programming with function libraries

var today = new Date();

Ø Creates a new instance of type Date and stores it in the variable today.

Ø When it is called without parameters, Date() reads the computer’s internal clock setting, and initializes the properties of the newly created instance to the read values.

Ø A Date object can also be created for a specific date (past or future).

Ø var myDate = new Date(2004,4,3,12,24,34,15)

The arguments used in this constructor function represent year, month, day of the month, hour, minute, second and millisecond.

year = 2004 month = May day of month = 3 hour = 12 minute = 24 second = 34 millisecond = 15

// remember JavaScript uses zero-based indexing, so month 4 represents May.

By eng : ayman mahmoud

4 M150-PART 2

[email protected]

Ø All the arguments are optional except year and month, if not filled, JavaScript sets them to 0.

Ø The year is written with 4 digits.

Ø Months are numbered from 0 till 11, so 0 is January, 1 is February, etc…

Ø The 24h clock system is adopted so 1 pm is referred to as 13.

var myDate = new Date(2004,4)

Ø What does the Date object created by the last line of code above represent?

It represents 1 May 2004 at 00.00.00.00

Ø Write down a line of code which creates a Date object to represent 25 April 2005 at precisely 3.00pm and assigns it to the variable yourDate.

var yourDate = new Date(2005,3,25,15)

You can also create dates using a single string argument as follows.

var myDate = new Date('May 3 2004')

Write a line of code which will create the date 22 November 1955 and assign it to the variable myDate. ??

var myDate = new Date(1955,10,22)

By eng : ayman mahmoud

5 M150-PART 2

[email protected]

Solution<SCRIPT SRC=dateLibrary.js> </SCRIPT><SCRIPT>/****************************************************************//* Program to prompt the user for the year, month and day of their birth */ /* and prints out the day of the week on which they were born. *//****************************************************************/var day;var month;var year;var birthDay;

year = parse Float (window.prompt('Enter a year as a four digit number', ''));month = parseFloat (window.prompt('Enter a month number from 1 to 12', ''));month = month - 1;day = parseFloat(window.prompt('Enter a day as a number from 1 to 31', ''));birthDay = new Date (year, month, day);

document.write('You were born on a ' + dayName(birthDay));</SCRIPT> 19

Importing the function library

Separate SCRIPT tags for the code

Subtracting 1 from the month entered by the

user

dayName is a function from the dateLibrary if given a parameter of type Date returns the name of the

week day property

By eng : ayman mahmoud

6 M150-PART 2

[email protected]

Solution<SCRIPT SRC=dateLibrary.js> </SCRIPT><SCRIPT>/* Program to calculate and write out the user's age to the nearest day */var day;var month;var year;var birthDay;var today;year = parseFloat (window.prompt('Enter year as a four-digit number',''));month = parseFloat (window.prompt('Enter month as a number from 1 to 12','')) -1;day = parseFloat (window.prompt('Enter day as a number from 1 to 31',''));birthDay = new Date(year,month,day);

today = new Date();document.write('You are ' + differenceInYears(today,birthDay)+ ' years old.‘ + ‘<BR>’);document.write('Which means that you have been on this Earth for '+ differenceInDays(today,

birthDay) + ' days.‘ + ‘<BR>’);document.write('Have you used your time wisely?')</SCRIPT> 20

Importing the function library

Separate SCRIPT tags for the code

Subtracting 1 from the month entered by the

user

differenceinYears is a function from the dateLibrary if given 2 Date parameters returns the difference

between their year properties

differenceinDays is a function from the dateLibrary if given 2 Date

parameters returns the difference between their number of days

By eng : ayman mahmoud

7 M150-PART 2

[email protected]

Solutionfunction promptForDate(){var dayNumber;var monthNumber; var yearNumber;

yearNumber = parseFloat(window.prompt('Enter year number from 1900 to 3000',''));while (yearNumber < 1900 | | yearNumber > 3000) {

yearNumber = parseFloat(window.prompt('Enter year number from 1900 to 3000',''));}; monthNumber = parseFloat(window.prompt('Enter month number from 1 to 12',''));while (monthNumber < 1 | | monthNumber > 12){

monthNumber = parseFloat(window.prompt('Enter month number from 1 to 12','')) ;};dayNumber = parseFloat(window.prompt('Enter day number from 1 to 31',''));while (dayNumber < 1 | | dayNumber > 31){

dayNumber = parseFloat(window.prompt('Enter day number from 1 to 31',''));};return new Date(yearNumber, monthNumber - 1, dayNumber);

} 29

Asking the user to enter the year

As long as the user enters an invalid year number

Asking the user to enter the year AGAIN

Asking the user to enter the month

As long as the user enters an invalid month number

Asking the user to enter the dayAs long as the user enters

an invalid day number

Returning the required Date object

By eng : ayman mahmoud

8 M150-PART 2

[email protected]

The scope of variables

Ø Where a variable is declared in JavaScript determines where it can be accessed.

Ø The scope of a variable is the extent of the access to it.

If a variable is declared using var in your JavaScript code OUTSIDE a function, then it is called a global variable, it is known to all the functions in the code, its value can be changed anytime in the code and even by other functions.

Ø Variables that exist only inside a function are called Local variables. They have no presence outside the function. Their values cannot be changed by the main code or other functions. This results in easy code maintenance and is especially helpful if many programmers are working together on the same project.

Ø it's advisable to use variables that are initialized only when a function is called and die when the execution comes out of the function.

Ø When a variable is global and a function alters its value, the new value will stick to the variable even after the function finishes executing.

<script language ='javascript'> var a = 10; // global variable disp_a (); function disp_a() { var a = 20; // local variable alert("Value of 'a' inside the function " + a); } alert("Value of 'a' outside the function " + a); </script>

Ø Any variable that is initialized inside a function using the var keyword will have a local scope.

By eng : ayman mahmoud

9 M150-PART 2

[email protected]

Ø If a variable is initialized inside a function without var, it will have a global scope.

Notes:

Ø Avoid using the same name for different variables.

Ø Never use a variable without declaring it first using the keyword var.

Ø Always declare the variables you need at the top of your program or your function.

Ø Always keep track of how the value of a global variable varies throughout your code

Type of variable Global local

Declaration Declared in main

program Declared in the function in which it is to be used

Scope (visibility)

visible everywhere in the program, Including within the bodies of any

functions defined in that program or

imported from function libraries.

Visible only within the function in which it is

declared

Lifetime Exists for as long as the

program runs Exists only during the

execution of the function

Consider the following program, in which a number of variables have been declared.

function writeOpinions() { var a,b; a = 'I think JavaScript is OK'; b = 'But Smalltalk is better';

By eng : ayman mahmoud

10 M150-PART 2

[email protected]

document.write(a + '<BR>'); document.write(b + '<BR>')

} ; var b,c; b = 'There are many programming languages'; c = 'Some are better than others'; document.write(b + '<BR>'); document.write(c + '<BR>'); for (var d=1; d<3; d= d+1) { writeOpinions() }

(a) Write down the output from the program.

There are many programming languages

Some are better than others

I think JavaScript is OK

But Smalltalk is better

I think JavaScript is OK

But Smalltalk is better

(b) What is the scope of the variables a, b (declared in the function writeOpinions()), b (declared in the outer program), c and d?

The variables a and b are local (declared in the function writeOpinions()) while the variable b (declared in the outer program), c and d are all global variables,

(c) What is the lifetime of the variables a, b (declared in the function), b (declared in the outer program), c and d?

The lifetime of a and b local is for as long as the function writeOpinions() executes.

The lifetime of b (global) , c, and d is for as long as the program executes

Functions, variables and name collisions

By eng : ayman mahmoud

11 M150-PART 2

[email protected]

Name collisions occur when a global variable has the same name as a function, or another global variable, or when two functions have the same name. Such name

collisions can cause bugs in your programs that can be difficult to track down.

Data types

A data type defines a collection of values together with the operations that are allowable on those values. So, for example, in JavaScript 1, 27, 56 and 34 are values belonging to the number data type.

Boolean and number are examples of primitive data types. Primitive data types are types that are not defined in terms of other data types, so, for example, a number is just a number, and is not made up out of, say, a Boolean and a number.

Primitive types are called ‘basic types’, JavaScript provides a number of data types which are called object types.

There are three object categories in JavaScript: native objects, host objects,and user-defined objects.

§ Native object types are defined by the JavaScript language. Examples of these are the String, Array, Date, and Math object types.

§ Host object types are supplied to JavaScript by the browser environment (e.g. Internet Explorer or Netscape). Examples of these are Window, Document, and Form object types.

§ User-defined object types are defined by you, the programmer.

Ø An object defines a collection of properties and methods:

Ø Properties, attributes of the object.

Ø Methods are functions that act on an object’s properties.

By eng : ayman mahmoud

12 M150-PART 2

[email protected]

Creation of objects

var today = new Date()

var myArray = new Array(12)

What reserved word is used to create an object? New

Creating new object types

JavaScript enables you to define and create your own object types, by defining a constructor function.

In order to create objects of this new Student object type we are going to need a constructor function, a constructor function is a function that has the same name as the type of object we want to create.

The constructor function is like any other function except that its name starts with a capital letter.

Inside the constructor function we declare properties such as student’s name and course

Ex : create a new object type, Student. Each student object will have (properties) such as – name, courseCode, .

function Student(aName,aCourse) { //object properties this.name = aName; this.courseCode = aCourse }

: وتعدیل خواصھ student من نوع objectانشاء

var studentA = new Student('Joe','M150');

studentA.courseCode = 'M255'

studentA.name = 'Jim'

By eng : ayman mahmoud

13 M150-PART 2

[email protected]

: مالحظات Ø name and courseCode are the object’s properties.

Ø The this keyword refers to the instance of the object that has just been created using the new keyword.

Ø the Student() constructor function assigns the values aName and aCourse to the name and courseCode properties of the newly-created Student object.

By eng : ayman mahmoud

14 M150-PART 2

[email protected]

Function Student(aName,aCourse) {

// object properties

this.name = aName;

this.courseCode = aCourse

};

// your code should start below

var someStudent;

someStudent = new Student('Lindsey','M150');

document.write('name is ' + someStudent.name);

document.write('<BR>');

document.write('course is ' + someStudent.courseCode);

document.write('<BR>');

someStudent.name = 'Sarah';

someStudent.courseCode = 'M256';

document.write('<BR>');

document.write('name is now ' + someStudent.name);

document.write('<BR>');

document.write('course is now ' + someStudent.courseCode)

By eng : ayman mahmoud

15 M150-PART 2

[email protected]

function Student(aName, aCourse, idNumber)

{

//object properties

this.name = aName;

this.courseCode = aCourse;

this.studentID = idNumber;

};

//write your code below:

var anotherStudent;

anotherStudent = new Student('Stanley','M150',54678);

document.write('name is ' + anotherStudent.name);

document.write('<BR>');

document.write('course is ' + anotherStudent.courseCode);

document.write('<BR>');

By eng : ayman mahmoud

16 M150-PART 2

[email protected]

document.write('id number is ' + anotherStudent.studentID);

Creating and Using Object Instances

Object instances are created using the new keyword and are assigned to an object variable that will be used to reference the object. For example, in the following script we will create a new instance of the car object with the name myCar:

carObject = new car ("Ford", "Focus", "Red");

We have also passed through parameters to initialize the properties of the object (make, model and color).

Next we need to understand how to call a method on an object and access an object property. This is achieved by using what is called dot notation on the name of the object instance:

To access a property:

objectInstance.propertyName

To call a method of an object:

objectInstance.methodName()

In our example we have a method called displayCar() to display the 3 properties of the object. Following the above dot notation syntax we can call this method as follows:

carObject.displayCar()

We can also access a property, for example the color as follows:

document.write ("The make property of myCar is " + myCar.make );

Finally, we can also change one of the properties of an object instance:

myCar.make = "BMW";

Lets now bring all of this together in a complete example within an HTML page:

By eng : ayman mahmoud

17 M150-PART 2

[email protected]

<html>

<head> <title>A Simple JavaScript Function Example</title> <script language="JavaScript" type="text/javascript"> function car (company, model, color) { this.company = company; this.model = model; this.color = color this.displayCar = displayCar; } function displayCar() { document.writeln("company = " + this.company) } </script> </head> <script language="JavaScript" type="text/javascript"> myCar = new car ("Ford", "Focus", "Red"); myCar.displayCar(); document.write ('<br>') myCar.company = "BMW"; myCar.displayCar(); </script> </body> </html>

By eng : ayman mahmoud

18 M150-PART 2

[email protected]

Unit 10

Ø Every software project needs to start with proper planning: Ø Who is our client? Ø What is the problem/need in question? Ø What is the requirement expected by the software? Ø To how many tasks the program needs to be divided? Ø Are there any repetitive parts in the program? Ø Who are the end users of the software? Ø How will the software interface look from the user side? Ø Where can things go wrong?

What do you require of your software?

Ø We wish to develop software called the OCAS (Overall Continuous Assessment Score) program.

Ø What is meant by OCAS? It is the average of the student’s TMA marks.

Ø How do we calculate this average? Ø If all the TMAs are equally weighted, then the average of their grades will

be the sum of their marks divided by their number. Ø On certain courses, not all TMAs contribute to the same percentage of the

final grade, they are differently weighted, the percentage of their contribution is called weighting factor. Ø The weighted average (WA) for example for 4 TMAs is calculated using

the following equation:

( ) ( ) ( ) ( )1 1 2 2 3 3 4 4

100mark wf mark wf mark wf mark wf

WA× + × + × + ×

=

By eng : ayman mahmoud

19 M150-PART 2

[email protected]

The first TMA contributes 11 per cent of the final score, so we need to

multiply the score by 11 and divide it by 100 as follows:

Contribution from TMA01 is (90 * 11)/100.

What do you require of your software?

If the software developer fails to gain a clear understanding of what is

Expected of the system, and then may be the developed system not acceptable to the client.

Requirements analysis is the process of gaining an understanding of what is required of a system.

Requirements analysis results in a requirements specification, which sets out as precisely as possible what is required of the software.

Ø A program specification is a document describing what the program does, so for our OCAS program it is as follows: Ø The assessment is based on at least 2 TMA marks and at most 8. Ø The TMAs may be differently weighted, but the weighting factor must be a

whole number. Ø All summative TMAs must be included in the calculation even if the score is

0. Ø If the TMAs are equally weighted:

OCAS = (sum of all TMA scores)/(number of TMAs)

Ø If the TMAs have different weights: Contribution of each TMA = (TMA score x weighting factor of that TMA) / 100

By eng : ayman mahmoud

20 M150-PART 2

[email protected]

Ø The user will first be asked, using a dialogue box, for the number of TMAs on their course.

Ø This input will be checked and if it is not a whole number in the range of 2 to

8 the user will repeatedly be asked to re-enter, until the input is of the correct form.

Ø The user will be presented with a series of dialogue boxes, in which they are asked to enter their TMA scores, one at a time.

Ø If any entry is not a whole number from 0 to 100 the user will be repeatedly asked to re-enter, until the input is of the correct form.

Ø The user will then be asked whether all TMAs are equally weighted.

Ø If they are, the program will calculate the OCAS as a straight average.

Ø If not, the user will be presented with a second series of dialogue boxes, in which they will be asked to enter the weightings for each TMA. Ø If any entry is not a whole number from 1 to 99 the user will be repeatedly asked

to reenter, until the input is of the correct form. Ø A check will then be made that the weightings entered add up to 100. If not, the

user will be asked to reenter all the weightings. Ø The program will then calculate the OCAS score, using the appropriate formula. Ø Finally, the program will display the OCAS, to two decimal places, in a dialogue

box.

Designing your software

By eng : ayman mahmoud

21 M150-PART 2

[email protected]

Ø While designing software, we create descriptions of it using diagrams and flow charts.

Ø We follow a top-down approach when dealing with the problem, from its most general aspect to the smallest detail.

Ø The overall structure is referred to as preliminary design

Our top-level design is as follows.

get number of TMAs get TMA scores find out if TMAs are equally weighted if they are not get TMA weightings end if if TMAs are equally weighted calculate OCAS (as average of TMAs) else calculate OCAS (by applying weightings) end if display OCAS

A module is an identifiable piece of program code that implements a

particular task. It has a name by which it can identified and reused. three types of module: functions, function libraries and objects.

The use of modules facilitates:

the developer’s understanding of what is required by the software;

the separate development of different aspects of a software

By eng : ayman mahmoud

22 M150-PART 2

[email protected]

the isolation and identification of problems or errors in the code;

code reuse;

code modification which enables replacement of parts of a program

while minimising the effect on other parts.

SAQ 4.2 What do we need to include in a function specification so that it can be used without any lmowledge of its implementation? We need to include: a description of what the function does . the number and type of the arguments (if any); the return value (if any).

Putting it all together

get number of TMAs using function getValidNumber()

get TMA scores using function getTmaScores()

find out if TMAs are equally weighted

if they are then

calculate OCAS using function calculateAverage()

else

get weighting factors using function getWeightingFactors()

By eng : ayman mahmoud

23 M150-PART 2

[email protected]

calculate OCAS using function calculatedWeightedAverage()

end if

display OCAS

This is just one possible design. We could, for example, have combined

getWeightingFactors() and calculateWeightedAverage() into a single

Function.

Since we have specified each of the functions that the main program code

will call, we can at this stage write down the code for the main part of the

etailing your designs, implementing your software

var numberOfTmas; // number of TMAs on the course

var ocas; // the OCAS (overall continuous assessment score)

var tmasEquallyWeighted; // whether TMAs are equally weighted

var tmaScores; // an array holding the TMAs

var weightingFactors; // array holding weighting factors for TMAs

// get number of TMAs in the range 2 to 8

numberOfTmas = getValidNumber('Enter number of TMAs on your course', 2, 8); // get array of valid TMA scores

By eng : ayman mahmoud

24 M150-PART 2

[email protected]

tmaScores = getTmaScores(numberOfTmas);

// find out if TMAs are equally weighted – default value of 'y'

tmasEquallyWeighted = window.prompt('Are the TMAs on your course equally weighted? Enter y or n', 'y');

//default value of 'y'

// calculate ocas using appropriate formula

if (tmasEquallyWeighted == 'y')

{

ocas = calculateAverage(tmaScores)

}

else

{

weightingFactors = getWeightingFactors(numberOfTmas);

ocas = calculateWeightedAverage(tmaScores, weightingFactors);

};

window.confirm('OCAS (overall continuous assessment score) is: ' + ocas);

// display final OCAS score

By eng : ayman mahmoud

25 M150-PART 2

[email protected]

Ø getValidNumber function is

Ø getTmaScores function :

By eng : ayman mahmoud

26 M150-PART 2

[email protected]

Ø calculateAverage function :

Ø The sumElements function will be called from inside the calculateAverage function like so:

By eng : ayman mahmoud

27 M150-PART 2

[email protected]

By eng : ayman mahmoud

28 M150-PART 2

[email protected]

calculatesweightedaverage function :

Ø The functions that we wrote will be called from a main code. Ø These functions follow a certain hierarchy as shown in the figure below:

Ø After writing your program and before delivering it to the user, you will need to provide an instructions manual with it called user documentation.

Ø A programmer documentation helps the people who will take care of the maintenance of the program, and even yourself to remember specific details in the code.

Ø A project documentation or project log should include description of any part of the development process for future reference, why certain choices were maid other than others.

By eng : ayman mahmoud

29 M150-PART 2

[email protected]

Unit ten : Testing your software

Ø A program accepted by the compiler or interpreter may however not do what it is required from it and not give the wanted result.

Ø a program contains several errors that won’t be discovered unless the program is thoroughly tested.

Ø Checking the functioning of a program requires making sure that separately each function or module is working properly.

Ø Check if the program as a whole behaves appropriately, if the functions are called and used appropriately, tests that check that are called integration tests.

Ø We need to be careful that correcting one error may result in other errors in parts of the code, keeping track of the modifications, encountered errors, and corrections is advised, this process is called regression testing. ( اختبار التراجع

Test types

Ø The first test is a visual test to walk through the written code and logically work out its behavior at each input.

Ø The black box test is done without looking at the code but by testing a large number of input values and observing the output.

Ø The white box testing involves looking at the details of the program code and test each possible path through the program, paying particular attention to those parts that are likely to be susceptible to errors.

By eng : ayman mahmoud

30 M150-PART 2

[email protected]

Ø An extreme value is a valid input according to the program specifications but in some respects it is a special case, causing the program to deviate ( ( یشذ–ینحرف from its general behavior (ex: an empty string given to a program that accepts string input, or a very large number given to a program that performs arithmetic calculation on numbers.

Ø For numerical inputs, a boundary value occurs at the ends of ranges of numbers, where a program is specified to behave in a certain way for a given range of numbers, this behavior is usually coded using comparisons operators such as <, <=, >, >=.

Ø There are three types of errors: Ø The common syntax errors such as forgetting the quotations when

declaring a string, placing unequal parenthesis, forgetting a semicolon, etc…

Ø The semantic errors such as misspelling identifiers, dividing by 0, trying to access an index that doesn’t exist, etc…

Ø The logical errors such as using the wrong comparison operator, or writing a while loop that never ends, etc…

Ø In compiled languages (which JavaScript is not), the first task of the compiler is to check through the whole program for syntax errors.

Ø With an interpreted language such as JavaScript, the distinction is not so clear because each program statement is checked, translated and executed line by line.

Unit ten : Tracing variable values

By eng : ayman mahmoud

31 M150-PART 2

[email protected]

Ø A good technique for locating errors is to trace down the variations of variable values at the execution of each line of code.

Ø Another way to trace the values of variables is to display it after each execution,

this way you SEE how it is varying.

Ø For example:

Tracing variable values

By eng : ayman mahmoud

32 M150-PART 2

[email protected]

Unit 11

Ø System is a collection of things, parts or components, each of which can be human, organic, mechanical or otherwise, that relate to each other in order to accomplish some desired end, i.e. a function, goal or objective.

Ø A Systems can be a subsystem of another system its supersystem. Ø A system is called wild if it is:

Ø Unpredictable. Ø Uncontrollable. Ø Irrational. غیر منطقى

Ø An example of wild system is the stock market. It's certainly wild and Black Monday showed us the risks inherent in trying to predict, control.

Spend a few minutes thinking whether the following are wild.

(a) The orbit of the moon around the earth.

(b) The outbreak of a new virus.

(c) The choice of a new computer.

Try to explain your answers in terms of the three characteristics of wildness.

(a) The orbit of the moon around the earth is highly predictable and highly rational (since it can be explained using known scientific laws), but highly uncontrollable (at least by us).

(b) The outbreak of a new virus is very unpredictable. We know, however, how new viruses arise, and so can explain an outbreak; it is therefore rational.

(c) The choice of a new computer is highly predictable, highly rational and highly controllable .

Examples of wildness

■ Internet which is the best example of wildness, the wildness comes from The unpredictability, uncontrollability, and irrationality of the movement of its data

■ Computer viruses, computer viruses are programs that ‘infect’ other programs by embedding a copy of them inside. When the infected program is run, the virus has a chance to run too, so propagating the ‘infection’.

■ Spam email.(uncontrollable ) ■ Robots. ( machines that interact with their external environment, perhaps even with other

robots, and behave in ways that are unpredictable and difficult to control)

■ Artificial neural networks. العصبیة الصناعیة الشبكات These are computers or computer programs that are designed to mimic تقلد the way that a human brain works.

By eng : ayman mahmoud

33 M150-PART 2

[email protected]

■ Genetic algorithms. الخوارزمیات الجینیةthese are a collection of search algorithms based on the mechanics of natural selection and genetics. They generate solutions to

problems that cannot readily be explained or predicted.

The four dimensions of reach

Ø The four dimensions reachable by a human are : Ø Space. Ø Time. Ø Perception. Ø Action.

SAQ 3.1

What are the four dimensions of reach and how should they be grouped together?

The four dimensions of reach are space, time, perception and action. Space and time should be grouped together since taken together they define a context (when and where) in which things happen. Perception and action should be grouped together because they define what happens, and how.

Perception تصور

Ø It means the acquisition الحصول of information through the five senses: sight, hearing, touch, taste, and smell.

Ø They are enough for our surrounding environment. Ø To perceive رؤیة خارج حدود اإلمكانیات البشریةoutside our environment, we need

technologies: Ø Example: Microscopes enhance sight to see in the micro-environment.

Action

Ø There are two types of actions: Ø Technologically unaided, any action that is human induced using only the

body’s capacity without any instrument. لوجیة یتم اجراء الحدث بإستخدام الجسم البشرى بدون مساعدات تكنو

Ø Technologically enhanced, when instruments are involved to extend the human body capacity and to perfect its movement.

SAQ 3.1

Describe three ways in which computers can be used to enhance our human capacity for action.

By eng : ayman mahmoud

34 M150-PART 2

[email protected]

Communicating. Word-processor software provides facilities for writing and editing text, making it easier and quicker to produce well-structured and well-presented documents.

Travelling. Modern aircraft and air traffic control systems make extensive use of computers to ensure that air travel is safe and efficient. Never before have people moved around the world as they do now.

Cleaning. Computers embedded in domestic appliances, such as dishwashers and washing machines, enhance our capacity for acting by automating aspects of such chores.

Space الفضاء – المكان

Ø Humans have had the tendency to reach out to the outer space using rockets. Ø Microscopes enabled humans to reach into the smaller space. Ø New spaces exist thanks to computers:

Ø Hard disk space, CD-ROM space. Ø Software-based space such as spreadsheets. Ø Cyberspace or virtual space.

Time

Examples include:

Obelisks. المسالت

Sundials. الساعات الشمسیة. Hourglasses. الساعات الرملیة

Water clocks. الساعات المائیة.

Mechanical clocks that make use of a balance wheel and pendulum.

.الساعات المیكانیكیة التي تستخدم توازن العجالت والبندول Modern electronic and digital clocks based on vibrating crystal or electromagnetic waves associated with the internal workings of atoms as their regulators

الموجات الكھرومغناطیسیة كریستال أوالساعات الرقمیة على أساس اھتزاز ال

Human and computer agents

actionsعناصر یمكن من خاللھا التفاعل واتخاذ

Briefly explain the meaning of agent, autonomous, and identity.

By eng : ayman mahmoud

35 M150-PART 2

[email protected]

An agent is an entity that is able purposely to bring about a change in itself or in the world. عنصر لھ القدرة على احداث تغییر لنفسھ او لعنصر اخر

Autonomous means self-governing, i.e. acting in accordance with one’s own principles and in pursuance of one’s own goals or assigned goals. مستقل

Identity refers to the set of characteristics that persist in a thing or individual and by virtue of which it can be recognised as the thing or individual it is. مجموعة من الخصائص التى تعرف عنصر ما

Ø Actions such as booking tickets, buying a house, require passing through an agent.

Ø These actions can be done via the Internet; avatars will act like human agents in the virtual world.

Ø Agents bring out actions to deliver results.

Ø Two properties are associated with agents: Ø Autonomy, to act in accordance with its own principles and pursues its own goals

or goals that may have been assigned to it. االستقالل ، والتصرف وفقا لمبادئھا وأھدافھا تسعى إلى أھداف أو یمكن أن تكون قد المسندة إلیھا

Ø Identity it is what distinguishes it from all other agents. It means that there is something unique about it, such as a set of behavioral or personal characteristics.

وھو ما یعني أن ھناك شیئا فریدا في ذلك ، مثل مجموعة من الخصائص . الھویة ھي ما یمیزھا عن غیرھا من العوامل السلوكیة أو الشخصیة

Ø Agents being either human or computers, four types of interactions arise: Ø Human→Computer (ex: human launching a software application). Ø Computer→Computer (ex: software closure notified to the operating system). Ø Computer→Human (ex: disappearance of a window after hitting the close

button). Ø Human→Human (ex: another human opinion intervening with the work).

Consider the following scenario.

By eng : ayman mahmoud

36 M150-PART 2

[email protected]

You have just signed up with an ISP (internet service provider) who is to supply you with email services and access to the web. Having installed all the software that was sent to

you by your ISP, you attempt to connect to the internet using your modem by clicking on the appropriate icon that appeared on your desktop during the

installation process. However, when the connection manager window pops up, requesting that you enter your user name and password, you are faced with a problem because you seem to have mislaid the letter sent from your ISP containing these details! Fortunately, you have your account number and the telephone

number of the helpdesk for your ISP at hand. You ring the helpdesk and after confirming your identity, the operator at the helpdesk releases your username and password. You then enter these into the appropriate fields in the connection manager window, wait a few seconds, and then your browser launches, displaying the homepage of your ISP. Identify in the above scenario one example of each of the four kinds of interaction.

Human–human interaction: your telephone conversation with the helpdesk operator.

Human–computer interaction: clicking on the ISP icon installed on your PC’s desktop.

Computer–human interaction: the appearance of the connection manager window.

Computer–computer interaction: the communication that takes place between your PC and the central server of your ISP.

Who should be held responsible when something goes wrong?

Ø Laws of ethics say that a software designer should not be held responsible for any harm resulting as an outcome of the software if the harm is: Ø Unintentional. بدون قصد Ø Not reasonably predictable. ال یمكن التنبؤ بھا او التحكم فیھا Ø Due to the unethical use of the computer. ناتجة عن استخدام الحاسب ألغراض غیر اخالقیة

Ø Computers are not held responsible either. Ø It is a matter of:

Ø Delegation منح السلطة the act of entrusting authority to another human or computer for performing a task or activity.

Ø Delegating a task to a computer is done through programming.

Ø A program is a single, complete and (more or less) self-contained ordered list of instructions that can be executed on a computer.

By eng : ayman mahmoud

37 M150-PART 2

[email protected]

Ø A universal computer is one that, given sufficient time and memory and the appropriate program, can simulate any other computer whatsoever – including itself.

Ø We delegate to computers because we trust them and believe that they are reliable. Ø A computer system consistently produces the same results under the same (or similar)

conditions.

Ø The more we understand how and why it behaves in the way that it does, the more we are likely to trust it.

Ø Interaction between humans and machines requires a certain currency. Ø The currency of human–computer interaction we mean is whatever it is within which, or

on the basis of which, interaction can take place. Ø A currency can be used:

Ø As a medium of exchange. Ø To store value. Ø As a standard or measure.

Ø One of the standard currencies of computing is information. The other standard currency of computing is data.

Ø Which one should we use? Data or information Ø In order for a human–computer interaction to take place, we need to make use of both

kinds of computing currency, data and information, and establish rules that enable conversion between them.

Ø During the interaction, the conversion from data to information and vice versa is done in a cycle called the information loop of computing.

Ø The cycle consists of four phases, going through all four types of interactions.

By eng : ayman mahmoud

38 M150-PART 2

[email protected]

Identify which one of the four activities associated with the information loop of computing is involved in each of the following activities.

(a) Receiving and then reading the contents of an email message.

(b) Converting a file from rich text format (.rtf) to ASCII.

(c) Explaining to someone how to install a piece of software on their PC.

(d) Saving a letter written using a word processor as a file in text only (.txt) format.

Discussion

(a) Expansion of data into information.

(b) Transformation of data into data.

(c) Transformation of information into information.

(d) Contraction of information into data.

By eng : ayman mahmoud

39 M150-PART 2

[email protected]

Unit 12

An Introduction to Human-Computer Interaction (HCI)

Ø A good user interface (UI) design enables the user to effectively interact with the system and perform his tasks.

Ø If the data is not presented on the user interface in a way that the users can interpret it in order to be informed about the data, then it can sometimes have serious consequences

Ø HCI is the study of how humans interact with computers and their applications. It tells us how to build user interfaces that are safe, efficient, easy and enjoyable to use (as well as functional!).

Ø A user interacts with a computer system via the user interface (UI). The UI can be thought of as that part of a computer system that helps us to accomplish tasks; it takes our commands and communicates information back to us.

Ø The two-way communication that is interaction through the UI is all you will see of any computer system (you don’t need to know what is happening, or how it happens, beneath the UI).

What is the difference between the terms ‘user interface’ and ‘human–computer interaction’?

The user interface constitutes ت شكل that part of the computer system through which the user communicates commands, and receives data for interaction with a computer system.

Human–computer interaction is the study of how users interact with computer systems. It is concerned with the design of computer systems that are safe, efficient, easy and enjoyable to use, as well as being functional.

By eng : ayman mahmoud

40 M150-PART 2

[email protected]

The importance of good user interface design

Ø A good UI :

Easy to use;

Easy to understand;

Meets the needs of the intended users;

Supports users in the tasks they wish to undertake.

Ø A good UI designer thinks about the users of the UI and pays great attention to the usability of the UI for users (always to be aware of a user’s needs)

Ø To design a good UI it is important to know who the users will be, their goals, their tasks, and their specific context of use. In HCI, this is called user-centered design.

Ø For organizations, poor usability can lead to decrease in staff productivity, high staff turnover, low morale and poor job satisfaction.

Ø Usability describes how a [system] can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.

Ø A good UI designer, before designing a system, will try to answer the following:

Ø Who are the users?

Ø What are the users’ experiences?

Ø What skills do they have?

Ø What tasks will they be using the system for?

Ø If the system is a replacement for an existing one:

Ø What are the users’ expectations?

Ø How do they currently perform their tasks?

Ø How will the new system support and/or change their goal and tasks, and environments?

User interface essentials

There are several UI design principles in the HCI literature: Visibility, feedback, affordance, simplicity, structure, consistency and tolerance

Ø be familiar with standard terminology in UI design:

By eng : ayman mahmoud

41 M150-PART 2

[email protected]

command button; dialogue box; icon ; label ;menu bar ; menu ; primary window ; text box ; toolbar

Ø Elements of web pages:

Link ; menu ; title bar; navigation bar

Ø The above UI elements are called collectively UI widgets اضافات.

Ø Visibility means making it clear what a UI element is used for.

Ø Design principle: All UI elements should have good visibility.

Ø Examples: In a UI for a software DVD player, there is a ‘standard’ recognizable symbol for a play button; In the UI for a mobile phone, an envelope icon shows that a message has been received.

Ø Feedback is related to the concept of visibility. Feedback means making it clear what action has been achieved through the use of the UI element

Ø Design principle: All UI elements should provide adequate feedback in response to the user’s actions.

Ø Ex: When I press any key on the keypad of my mobile phone, a beep is heard and I can also feel the key being pressed ( ملموس tactile feedback).

Ø Affordance means making it clear how a UI element should be used

Ø Design principle: All UI elements should have good affordance.

Ø An example is the underlining of links that affords clicking.

Ø Simplicity means keeping things as simple as possible.

Ø Design principle: Make simple, common tasks simple to do.

Ø Example: Since opening or saving a file in a word-processor application are some of the most common tasks that a user performs, menu items ‘Open file’ and ‘Save file’ are provided in many word-processor applications.

Ø Structure: A UI will be more usable if it is structured in way that is meaningful and useful to user.

Ø Design principle: Structure the UI in a meaningful way for the user.

By eng : ayman mahmoud

42 M150-PART 2

[email protected]

Ø Example: The “Print” dialog box groups together related information (e.g. Printer, Page range and Copies…)

Ø Consistency in appearance, positioning and behavior within the UI makes a system easy to learn and remember.

Ø Design principle: The presentation of the UI should be consistent.

Ø Guidelines: If two UI elements are to serve the same or similar purpose they should be made as consistent as possible.

Ø Why the three different MS Office applications: Word, Excel and PowerPoint have the similar “look and feel”?

Ø Tolerance refers to the ability of a UI to prevent errors if possible, or to make them easy to recover from, if not.

Ø Design principle: The UI should be designed to reduce the number of user errors and facilitate recovery from them.

Ø Examples: To prevent the wrong choice of menu item, some items might be greyed out. You can offer an example of the format of a date that is to be entered.

Errors are not always due to poor UI design. They could occur when a user is unfamiliar with an application, or does not have the right experience or skills, even because of stress, interruptions…

Recoverability of a UI refers to how easy it is for users to recover from their mistakes:

• In backwards error recovery the user will be allowed to ‘undo’ the effects of the action that caused the error

• In forwards error recovery, the system accepts the error (no undo) but still helps the user to accomplish their goal.

Visual representation of data

Ø Visual representations (graphs, diagrams, maps) display data in a way that can be interpreted by users in order to retrieve the information.

Ø The use of visual representations for understanding the data and gaining insight into it is called information visualization

By eng : ayman mahmoud

43 M150-PART 2

[email protected]

v Text is a very natural way for us to communicate because of its recognized flexibility and power,

Guideline:

v Readable text will allow the user to find the information that they need easily on the page (when presenting text, make sure the typeface - serif or sans serif - and size are appropriate for the display)

v Numeric data is presented through several graph and chart types (line graph, the bar chart, and the pie chart)

Guideline:

v Ensure that the choice of graph or chart type is appropriate for the representation (making a good choice depends on thinking about the viewer’s task).

Working with charts

1- Data-ink is the part of the graphic that presents the data that contributes to the information it is meant to convey.

Non-data-ink can include important information, e.g. labels or grids, but also the fancy graphics that can distract the reader.

Guideline: The largest share of the ink on a graphic should be data-ink.

2- Chart junk is the enemy of simplicity in information visualization. It distracts a reader from achieving their task with meaningless photos and line art, administrative clutter, fancy fonts, weird backgrounds –

Designing for the web

A simple structure allows each element of the page to be tied to its message and enhances the flexibility and adaptability of your site.

A consistent layout of web pages increases ease of use, aids user navigation and helps to establish unity across several pages of the website

By eng : ayman mahmoud

44 M150-PART 2

[email protected]

Because it sets the scene for the whole website, the most challenging page to design is the home page.

Ø Your home page should tell users where they are and what your site does

Ø While designing interior pages , you have to think why people come to your site. What are they looking for?

Ø The information should be relevant, credible, useful and up to date.

Ø To capture and maintain user interest, the content should be well presented and organized.

Ø Interior web pages contain more content and less introductory infor.

Ø Interior pages should have meaningful titles.

Ø The look and feel (colors, fonts, title bar…) should be consistent.

Ø There should always be a link to the home page from an interior page. (otherwise a user might be ‘stuck’ inside your website )

Ø Small errors in spelling and grammatical mistakes will also reduce the feeling of quality.

Two other design issues of interaction with web pages:

v Scrolling

The important content of a page should be visible without scrolling.

v Designing for accessibility

Websites should be designed so that they can be accessed by people whose eyesight and/or hearing is impaired (one solution might just mean using bigger text

By eng : ayman mahmoud

45 M150-PART 2

[email protected]

Unit 13

افكار الوحدة

v the digital divide and approaches that are being used to overcome it v speech recognition and speech synthesis which enable humans to interact

with computers through the spoken word v non-speech audio, used as a medium for our interaction with computers

through sound effects and computer music v handwriting recognition in which written words are converted into

computer process able characters v tangible and gesture computing in which computers recognise and respond

to human gestures such as sign language, and the manipulation of physical objects in the environment

v ubiquitous computing: many of the ethical issues to do with information in the real world and our interactions with it come together in this fast-moving field of computing

Sensational computing is the studying the use of the senses of hearing and touch to represent information, and mediate in human – computer interaction

Why is it important to use these other senses? Here are some reasons.

Some reasons for using such senses to represent information are:

1. To make information accessible to as many people as possible 2. Exploit these senses and modes of information representation to overcome

the digital divide 3. Increase the richness of communication between humans and computers. 4. In some situations, especially some special kind of information like music

is best represented using non visual forms

By eng : ayman mahmoud

46 M150-PART 2

[email protected]

The digital divide الفجوة الرقمیة

Ø The digital divide refers to the gap that exists between the information–rich developed world and the information-poor developing world.

Ø The information gap between developed countries and developing ones.

Ø It describes the information gap between people of the same country.

Reasons for such the digital divide

Ø The poor availability of computers and telecommunication infrastructure necessary to use the information.

Ø The cost of computers and the lack of technical infrastructure. Ø The need for electricity distribution system. Ø Many people in the developing countries are illiterate Ø High levels of illiteracy is due to that most languages especially African

one do not have a written form and many languages are not supported by computer applications.

Ø There are still many people all around the world who are not familiar with English language

Bridging the digital divide التخلص من الفجوة الرقمیة

Ø The solution to the information gap is to use the Simputer

Ø Simputer stands for simple inexpensive multilingual Simputer stands for people’s computer

Ø The Simputer is a self-contained, hand held computer, designed for use in environments where computing devices such as PC are deemed inappropriate. Due to the low cost, it was also deemed appropriate to bring computing power to the developing countries.

By eng : ayman mahmoud

47 M150-PART 2

[email protected]

Ø Designed to help the poor and illiterate join the information age

Ø Developing its own version of the web's formatting language to turn text into understandable Hindi, Kannada and Tamil speech.

Ø The Simputer project is committed یلتزم to using open rather than proprietary standards in order to keep down costs. open standard such as Linux operating system

Ø Simputer goes the Information Markup Language (IML) that works out what text on a webpage should be read out, turns it into artificial, but understandable, speech using a library of sounds stored on the machine.

By eng : ayman mahmoud

48 M150-PART 2

[email protected]

Speech audio interfaces

The section aims to:

Ø describe speech recognition techniques and the limitations of speech recognition;

Ø describe different ways of synthesizing speech; Ø Show how a new generation of household robots is being developed that is

capable of using speech interaction.

Speech recognition, define how computers recognize spoken words, and speech

synthesis, which define how computers generate sound.

Ø Speech becomes important when providing interfaces for illiterate and poor literacy skills people or people with visual impairment

How Speech recognition systems works ??

By eng : ayman mahmoud

49 M150-PART 2

[email protected]

Describe the various stages involved in speech recognition???

First, a microphone detects the sound waves spoken by a person and

Converts them into an analogue electrical signal. This analogue signal is digitized using an analogue/digital converter. The digital sequence is then divided into small items called phonemes, which will be converted into words using some math calculations.

(Data capture – phoneme extractions – word estimate)

Types of ASR (Automatic Speech Recognition)

Isolated word

Ø Isolated word recognizers (a telephone answering system – bank system) are designed to recognize individual words. Pauses at the beginning and end of each word make it easy to isolate words and then recognize them

Ø Isolated word recognizers are reasonably easy to develop

Ø Most isolated word recognizers will be designed to be used by anyone, i.e. They are speaker independent.

Ø isolated word recognizers have small dictionary

Speaker-enrolment

Ø In speaker-enrolment systems, the ASR software has been trained to recognize a single user .

Ø Large database of words, language and grammar rules. Ø There are a number of commercially available ASR software products

including Dragon’s NaturallySpeaking and IBM’s ViaVoice, that are intended to replace the need to type on a keyboard in order to enter text into a computer

By eng : ayman mahmoud

50 M150-PART 2

[email protected]

Ø There are two uses for speech recognition systems: Ø Dictation-- translation of the spoken word into written text, Ø Computer Control-- control of the computer and software applications by

speaking commands.

Ø Speech recognition is not speech understanding this is a common misconception

Speech synthesis تولید األصوات

Ø Speech synthesis means generating human voice using computers

Ø Three Techniques used by speech synthesis systems: 1. Using Phonemes to produce speech. 2. Using Diphones to produce speech. 3. Model based speech synthesis to produce speech

Using Phonemes to produce speech

Ø Humans are capable of producing a wide range of sounds. These can be Controlled by the relative tension of the vocal chords in the throat, and by the positions and shapes of the tongue, lips and jaw حركة األحبال الصوتیة

اه والشف

Ø The individual sounds produced by humans are known as phonemes.

Ø The number of phonemes varies widely between languages. Ø English uses around 45 phonemes, a relatively small number, whereas

Mandarin Chinese, a so-called tonal language uses approximately 2000 phonemes.

Ø العدد تقریبى حیث یختلف عدد الphonemes تبعا لجنسیة المتكلم أو اللكنة الخاصة بھ مثال األنجلیزى phonemes 40 أما اإلنجلیزى األمریكى فھو 50البریطانى

Ø Speech system joins together appropriate phonemes in order to construct words.

By eng : ayman mahmoud

51 M150-PART 2

[email protected]

Ø The phonemes are stored as real speech fragments which are concatenated to produce words. For example, the word ‘cat’ would be constructed from the three phonemes ‘k’, ‘a’ and

‘t’ which would be joined together in that order.

Diaphones, an alternative to phonemes

Ø A second method of creating speech uses fragments that span two phonemes. These fragments are known as diaphones;

Ø diaphones stretch from the middle of one phoneme to the middle of the following phoneme.

Ø Several speech synthesis programs have been constructed using diaphones, which produce much smoother speech than the phoneme approach.

Ø The span between 2 phonemes are called Diphones

Model-based speech synthesis

Ø Model-based speech synthesis is the most advanced speech synthesis system and is based on detailed scientific studies of human speech.

Ø Model-based speech synthesis has none of the drawbacks of the phoneme and diaphone methods.

Ø Model-based speech is simulating the human vocal tract, so it does require more computing power than the other methods but this is now possible with a personal computer.

Ø The three types of speech synthesis are phonemes, diaphones and model-based speech synthesis.

By eng : ayman mahmoud

52 M150-PART 2

[email protected]

Ø The individual sounds that are produced by humans are called phonemes. Ø Speech synthesis based on phonemes involves joining together the appropriate phonemes in order to construct words.

Ø Speech synthesis that uses diaphones focuses on the changes in sound that consecutive phonemes make when they are joined together

Ø A diaphone extends the middle of one phoneme to the middle of the next.

Ø The third method, model-based speech synthesis, is the most advanced form of speech synthesis and relies on modeling the way in which humans speak.

Problems facing the speech systems that convert text in to speech are

v The first problem is how to pronounce a word of text. The phonetic elements (which make up a description of how each word is pronounced can be used to give a guide to the pronunciation.

v Ambiguous words كلمات مترادفة which are spelt identically but have different pronunciations, called homographs, can create problems and confusion.

v The computer has no understanding of what it is reading, so it can make no attempt at inferring the correct pronunciation while speaking the text.

The quality of speech synthesis depends on

1. The method used (whole words, or phonemes or even parts of phonemes.

2. the number of bits used to represent each part of the sound that makes up the speech (the more used, the larger the file but the better the reproduction)

By eng : ayman mahmoud

53 M150-PART 2

[email protected]

3. The quality and range of the equipment used with the computer system (e.g. loudspeakers) and the computer processor’s speed

Non speech sound

v describe the different types of sound; v show how computing and digital techniques can be applied to music; v Show how sound effects in computer interfaces can be used.

Different types of sounds:

1. Music: which can accompany other things to enhance enjoyment or create atmosphere, and for itself

2. Alerts: sound effects such as beeps used for attention getting 3. Warnings: loud sound effects used for attention grabbing 4. Noise: unwanted sounds that can appear in different frequencies and amplitudes

Ø Theses different sound types are used in human interaction with computers and they are important medium for information transformation

Digital recording and reproduction

v CDs have a higher fixed sampling frequency than MP3 which has various sampling frequencies..

v MP3 recording provides smaller file; enables easy transmission as they have smaller sampling rates compared to CD

v the advantage of the CD recording is a higher fidelity (provided the player is capable of reproducing it), and the advantage of the MP3 standard is that the smaller file it produces enables its easy and rapid transmission over the internet.

v Sampling rate of MP3 is lower than CD

MIDI

By eng : ayman mahmoud

54 M150-PART 2

[email protected]

v The Musical Instrument Digital Interface (MIDI) standard enables the connection of a musical instrument, usually an electronic keyboard resembling a piano keyboard to a

computer.

v A MIDI interface with appropriate software enables a composer to compose at the keyboard without having to pause to write down the music

v Like the CD and MP3 formats, MIDI represents music in digital form

Digital composition:

By eng : ayman mahmoud

55 M150-PART 2

[email protected]

Ø Digital synthesizers مولد اصوات is typically controlled by an electronic keyboard like the piano keyboard

Ø Two ways in which the computer is used in music composition (capturing and processing the notes:

1. A computer program is used to input musical scores using direct annotation of notes( Sibelius use the keyboard and the mouse to input notes)

2. Use MIDI input format and this allow capturing the data and also editing it later

The term Earcons is used to describe the non verbal messages that is used in interfaces to tell the user some information about computer operations

المستخدمة للتواصل بین المستخدم والكبیوتر مصطلح یستخدم لوصف الرسائل غیر اللفظیة

Handwriting recognition

Ø Keyboard is a device that contains a number of keys arranged in a random way called QWERTY keyboard ( the same as early mechanical design of manual typewriters)

Ø For us who use Latin alphabets (26 letters, 10 numbers and few characters) this keyboard is perfect

Ø This keyboard is not suitable for many other alphabets like Japanese which is made up of many thousands of characters.

Ø An alternative way beside the keyboard is needed which is Handwriting recognition Ø Handwriting recognition via a touch-sensitive screen is the solution

• Different types of writing systems (Latin, Arabic,…), each language has a rule for writing direction.

• Large individual differences in writing style; each one write the characters in different shape, placing differing amount of stress on the strokes comprising each character or even use different number of strokes in the characters.

• Human beings are extremely good at resolving ambiguity in characters (we find it simple to distinguish the number 5 from letter S) but generating a programming solution for this problem is difficult

• Humans rely on the common sense knowledge (we don't expect to have a number 5 in the middle of a word then it is S ) this is difficult to codify in a computer program

By eng : ayman mahmoud

56 M150-PART 2

[email protected]

Techniques and conventions used to simplify the task of handwriting recognition are

Ø Restricting the range of symbols that can be used, to just the uppercase letters. Ø Requiring that characters are written in predefined boxes. (such as those that appear on many

paper forms that we fill in today) Ø Accepting handwritten characters that are not joined up Ø Redesigning the interface so that it is very clear what input is required (simple ticks and crosses,

or other forms of shorthand rather than handwritten text).

Neural networks used in handwriting recognitions.

Ø Many handwriting recognition systems use the technology of neural networks to overcome the difficulties

Ø Neural networks refers to the network of neurons inside the nervous system of human beings Ø A neural network refers to the artificial neural networks (programming constructs that mimic the

properties of neurons of nervous system). Ø Each Artificial neural must be trained first before they become useful, this is done by presenting the

neural with known data and recording its respond.

Ø If the network produces correct answer, it moves to the next example, else the software involves repeated test until the answer is correct.

Ø neural network technique has been used by handwriting recognition system

Newton MessagePad

Ø Good example of performing handwriting recognition with neural networks is Newton MessagePad released by apple in 1993

Ø It uses powerful neural network software to interpret handwriting. Ø The Newton has 2 advantages: no need to change your handwriting style and it would learn to

recognize your writing Ø When user enters a word the system attempt to match it with the words from its internal dictionary, if

it is found then it recognize the word. Ø Else the user can tell the Newton to add the word to its internal dictionary. Ø As time went, Newton become more and more accurate

Ø Newton has some problems that have to overcome in order to produce a viable handwriting recognition system.

Ø Handwriting recognition system must run on a pocket computer, and this system requires difficult computing tasks that needs large amount of memory and processing power.

Ø Large amount of memory and processing power greatly reduces the battery life. Ø Palm computing wanted to produce a pocket computer with lower price and a battery life of weeks or

even months by using a slow microprocessor and small memory.

By eng : ayman mahmoud

57 M150-PART 2

[email protected]

Ø Simplifying the way of entering letters will simplify the task of recognition. Ø The solution is Glyphs

Graffiti النقوش –الزخرفة – an alternative to handwriting recognition

Ø A glyph شكل منقوش is an element of writing. Two or more glyphs representing the same symbol, whether interchangeable or context-dependent

Ø The Palm’s solution is based on their graffiti system. Ø Graffiti system is a kind of alphabet used to simplify the computer recognition of handwriting Ø Users needs to learn first the graffiti alphabet before using the Palm system Ø Experiments shows that Palm system overcome most

Tangible computing and gesture computing

Ø tangible computing, which involves devices that can be used to interact with representations of information in the digital world

، والتي تشمل األجھزة التي یمكن استخدامھا للتفاعل مع تمثیل المعلومات الرقمیة في العالم الملموسة الحوسبة

Ø Gesture computing, where computers are programmed to interpret human gestures and movements.

ات البشریة حوسبة اإلیماءات حیث یتم برمجة األجھزة لفھم الحركات واإلیماء

Ø Tangible computing and gesture computing are Known as Haptic computing touching interaction with computers

Tangible computing

Ø Tangible computing is so-called because it describes the way in which haptic interfaces to computers can be used to make computers and digital information more real, or more tangible, than they are now.

By eng : ayman mahmoud

58 M150-PART 2

[email protected]

Ø Tangible interface is an interface that gives a physical form to digital information.

Ø PDA, personal digital assistant is an example of tangible user interface in which extra controls and sensors are added to it so that physically manipulate the PDA

Ø PDAs generally suffer from a number of problems: their screens are small, they demand your visual attention and errors are made easily while operating them.

Ø Force-feedback devices can be used in training applications and computer games in order to give the user feedback through the sensation of resistance to movement.

Ø In information visualisation, physical (tangible) objects are used as manipulable ‘containers’ for digital media. Tangible user interfaces, in combination with virtual reality, offer the opportunity to interact with information in a very direct way, through devices such as data gloves .

v The data glove is a sophisticated glove that can detect the joint angles of the fingers and thumbs, and the position of the hand in three-dimensional space. Data gloves have found their uses in many virtual reality applications, particularly in scientific visualisation systems, which allow complex information to be visualised .

v A tangible user interface is an interface that gives a physical form to digital information.

v An example of a tangible user interface is a PDA that has extra controls and sensors added to it so that physically manipulating the PDA

Gesture recognition

v Gesture recognition is appropriate when it is necessary to use a computer without using a keyboard or screen, or when the user is unable to hear and often, as a consequence, to speak ستیفن ھوكینغ

v Most commonly used language for Gesture communication is probably American Sign Language (ASL).

v Gesture recognition is based on recognizing the special signs done by the user and responding to them. So the problem is to develop recognizers that recognize the sign language.

By eng : ayman mahmoud

59 M150-PART 2

[email protected]

v Developing such recognizer is not an easy manner for several reasons especially that the sign language is done free form, in the air, primarily by hands.

v Two solutions for such problem: o Person making the signs gestures to wear special gloves, which make it easier for an

image-recognition system to track the hands against a general background. o The signer needs to wear special sensors which allows the computer to track the

position of the hand in 3 dimensions.

v New researches are done nowadays on the movement made by the human eye and trying to recognize it

Ubiquitous computing الحوسبة فى كل مكان

Ø Making many computers available throughout the physical environment, while making them invisible to the user

Ø Sensor inside your mother washing machine,…… Ø The computers are embedded inside the physical environment and other equipment. Ø Computer will be small and will not like conventional computers Ø The computers will be invisible in the sense that people will not be aware that they are using

a computer.


Recommended