1. CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr. Tehseen Riaz Abbasi

2. Web Technologies and Programming
Lecture 32

3. Summary of Lecture

4. Guidelines of Interface Design
Outline
Guidelines of Interface Design
Principles of Screen Design
Interface Design Goals
Interaction Styles
Introduction to JavaScript.
Embedding JavaScript with HTML
JavaScript conventions
Datatypes and Operations in Java Script.
Dialog boxes in JavaScript
HTML DOM (Document Object Model)

5. Controlling the background dynamically Working with images Date Object
Outline
Controlling the background dynamically
Working with images
Date Object
History Object
Navigator Object
Screen Object
Form Object
Introduction to jQuery
XML
PHP (Part 1)
PHP (Part 2)

6. Passing data between Pages. Validating User Input
Outline
Passing data between Pages.
Validating User Input
Introduction to ASP.NET
Database connectivity, data insertion and Data Retrieval.
Web Services and Intro to Web Hosting
SEO Techniques

7. Benefits of Good Design
grgf
1. Guidelines of Good Interface Design
“The user interface is the most important part of any computer system.” (Galitz, 2002, p. 1)
Benefits of Good Design
Higher task completion rates
More efficient task completion rates
Reduced training costs
Improved customer service
The process of improving web pages so they rank higher in search engines for your targeted keywords.

8. Interface Design Process
grgf
1. Guidelines of Good Interface Design
Interface Design Process
Guidelines for this process.
Principles of User Interface Design.
Choice Of Interaction Style.
Choice of Interface types.
Types of Interfaces.
Interface Design Conventions for Web Based Applications.
Difference between Good and Bad Interface.
The process of improving web pages so they rank higher in search engines for your targeted keywords.

9. Reduce intellectual work Reduce memory work Reduce motor work
1 Interface Design Goals
Reduce visual work
Reduce intellectual work
Reduce memory work
Reduce motor work
Minimize or eliminate any burdens or obstructions imposed by technology

10. 1. Interface Design Convention (Web Based Application)

11. Elements of Visual Design.
grgf
1. Guidelines of Good Interface Design
Elements of Visual Design.
Principles.
Elements.
Font
Six Typographic Terms
Font Size
Types of Fonts
Proportional Vs. Fixed width Fonts
Case of Text
Layout
Color
Guidelines for Color Use
Labels
The process of improving web pages so they rank higher in search engines for your targeted keywords.

12. Common Uses of JavaScript Embedding JavaScript in HTML
grgf
2. Introduction to JavaScript.
What is JavaScript?
JavaScript is a client-side scripting language
JavaScript was designed to add interactivity to HTML pages
Common Uses of JavaScript
Cookie, Validating Data, Event Handling etc.
Embedding JavaScript in HTML
Internal: <Script> tag
External: separate file and include this in HTML code.
The process of improving web pages so they rank higher in search engines for your targeted keywords.

13. JavaScript Conventions Variables in JavaScript JavaScript Operators
grgf
2. Introduction to JavaScript.
JavaScript Conventions
Case Sensitivity, Comments, Using Quotes etc.
Variables in JavaScript
Numbers, Strings, Boolean, null values
JavaScript Operators
Assignment Operator: =
Arithmetic Operators: +, - , *, /, %, ++, --
Logical Operators: &&, ||, !
Comparison Operators: ==, ===, !=, !==, <, >, <=
The process of improving web pages so they rank higher in search engines for your targeted keywords.

14. Functions in JavaScript Conditional Statements and Loops.
grgf
2. Introduction to JavaScript.
I/O in JavaScript
Write(); and Prompt();
Functions in JavaScript
User defined and Pre-defined Functions.
Conditional Statements and Loops.
JavaScript Output
Using innerHTML.
using  document.write().
The process of improving web pages so they rank higher in search engines for your targeted keywords.

15. JavaScript has three kind of popup boxes:
grgf
3. Dialog Boxes in JavaScript
JavaScript provides the ability to pickup user input or display small amounts of text to the user by using dialog boxes.
JavaScript has three kind of popup boxes:
Alert box
An alert dialog box is mostly used to give a warning message to the users
Prompt box
A prompt box is often used if you want the user to input a value before entering a page
Confirm box
A confirm box is often used if you want the user to verify or accept something
The process of improving web pages so they rank higher in search engines for your targeted keywords.

16. The W3C DOM standard is separated into 3 different parts:
grgf
4. Document Object Model
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The process of improving web pages so they rank higher in search engines for your targeted keywords.

17. Textboxes buttons select list
grgf
4. Document Object Model
Window
Navigator
Document
History
Location
Forms[ ]
Array of forms
Images[]
Array of images
links[]
Array of links
anchors[]
Array of anchors
The process of improving web pages so they rank higher in search engines for your targeted keywords.
Options[] li
Element[ ] Array of element of forms
Textboxes buttons select list
Reset
files

18. 4.1 HTML DOM Elements
Finding HTML Elements
To do so, you have to find the elements first. There are a couple of ways to do this:
Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections

19. We can access the bgcolor by following methods: document.body.bgColor
grgf
5. Controlling the Backgrounds Dynamically
The body tag has the following attributes
Bgcolor, Background, Text
We can access the bgcolor by following methods: document.body.bgColor
We can access the body text by following methods: document.body.style.color
Other Properties are:
background-color
background-image
background-repeat
background-attachment
The process of improving web pages so they rank higher in search engines for your targeted keywords.

20. JavaScript has a built-in object called Image
grgf
6. Working with Images.
JavaScript has a built-in object called Image
The Image object allows you to create objects that represent images created using the <img> element
Properties: name, border, height, width, hspace, vspace, src
An image object can be created as
var objname= new image()
You can access an <img> element by using getElementById():
The process of improving web pages so they rank higher in search engines for your targeted keywords.

21. Date object methods: getDate(): getDay(): getFullYear(): getMonth():
grgf
7. Working with dates.
Date object methods:
getDate():
Returns the day of the month (from 1-31)
getDay():
Returns the day of the week (from 0-6)
getFullYear():
Returns the year (four digits)
getMonth():
Returns the month (from 0-11)
getHours():
Returns the hour (from 0-23)
getMilliseconds():
Returns the milliseconds (from 0-999)
getMinutes():
Returns the minutes (from 0-59)
getSeconds():
Returns the seconds (from 0-59)
The process of improving web pages so they rank higher in search engines for your targeted keywords.

22. History object properties: History object methods:
grgf
8. History Object.
The history object contains the URLs visited by the user (within a browser window)
The history object is part of the window object and is accessed through the window.history property
History object properties:
Length: Returns the number of URLs in the history list
History object methods:
back(): Loads the previous URL in the history list
forward(): Loads the next URL in the history list
go(): Loads a specific URL from the history list
The process of improving web pages so they rank higher in search engines for your targeted keywords.

23. The navigator object contains information about the visitor's browser
grgf
9. Navigator Object.
The navigator object contains information about the visitor's browser
It also provides several properties that assist in the detection of various elements of the visitor’s browser and environment
Navigator object properties:
appCodeName: Returns the code name of the browser
appName: Returns the name of the browser
appVersion: Returns the version information of the browser
The properties appName and appCodeName return the name of the browse
Navigator object methods:
javaEnabled(): Specifies whether or not the browser has Java enabled
The process of improving web pages so they rank higher in search engines for your targeted keywords.

24. The screen object contains information about the visitor's screen
grgf
10. Screen Object.
The screen object contains information about the visitor's screen
The screen object properties:
availHeight
Returns the height of the screen (excluding the Windows Taskbar)
availWidth
Returns the width of the screen (excluding the Windows Taskbar)
Height
Returns the total height of the screen
Width
Returns the total width of the screen
colorDepth
Returns the bit depth of the color palette for displaying images
The process of improving web pages so they rank higher in search engines for your targeted keywords.

25. The Form object represents an HTML form
grgf
11. Form Object.
The Form object represents an HTML form
For each <form> tag in an HTML document, a Form object is created
Accessing Form Elements
document.forms[0].name.value
document.form1.elements[0].value
Setting Form Elements
document.forms[0].name.value = “Ali”
document.form1.elements[0].value = “Ali”
The process of improving web pages so they rank higher in search engines for your targeted keywords.

26. grgf
12. Introduction to jQuery
“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.”
Why use jQuery?
Rich Internet Applications (RIA)
Dynamic HTML (DHTML)
“Unobtrusive” JavaScript – separation of behavior from structure
Allows adding JavaScript to your web pages
Much easier to use
Eliminates cross-browser problems
Mobile First Web Developement
The process of improving web pages so they rank higher in search engines for your targeted keywords.

27. jQuery Syntax jQuery Selectors.
grgf
12. Introduction to jQuery
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
jQuery Selectors.
Element selector
Id selector
Class selector
The process of improving web pages so they rank higher in search engines for your targeted keywords.

28. XML stands for EXtensible Markup Language
grgf
13. XML
XML stands for EXtensible Markup Language
A meta-language for descriptive markup: you invent your own tags
Components of XML
Processing instructions
Encoding specification (Unicode by default)
Namespace declaration
Schema declaration
Elements
Each element has a beginning and ending tag
<TAG_NAME>...</TAG_NAME>
Elements can be empty (<TAG_NAME />)
Attributes
Describes an element; e.g. data type, data range, etc.
Can only appear on beginning tag
The process of improving web pages so they rank higher in search engines for your targeted keywords.

29. PHP: Hypertext Preprocessor
grgf
14. PHP (Part 1)
PHP: Hypertext Preprocessor
Originally called “Personal Home Page Tools”
Used to create dynamic web pages
Popular server-side scripting technology
Setting Up the Environment:
A Web Server
PHP
MySql
Writing and Executing PHP Code with HTML.
The process of improving web pages so they rank higher in search engines for your targeted keywords.
WAMP Server

30. grgf
14. PHP (Part 1)
Constants:
A constant is a placeholder for a value that you reference within your code that is formally defined before using it
must begin with a letter or an underscore
are case sensitive
typically they are named using all capital letters
Variables:
Begin with $ sign
First character must be a letter or underscore
Remaining characters may be letters, numbers or underscores
Data Types: Float,Integer,Boolean,String,Array, Object
The process of improving web pages so they rank higher in search engines for your targeted keywords.

31. Arithmetic Operators: +, - ,*, /, %, ** Assignment Operators: =
grgf
14. PHP (Part 2)
Operators in PHP
Arithmetic Operators: +, - ,*, /, %, **
Assignment Operators: =
String Operators: , .=
Increment/decrement Operators: , --
Logical Operators: AND, OR, NOT, XOR, &&, ||, !
Comparison Operators: >, <, <=, >=
Equality Operators: ==, !=, ===
The process of improving web pages so they rank higher in search engines for your targeted keywords.

32. Conditional Statements:
grgf
15. PHP (Part 2)
Conditional Statements:
if statement - executes some code if one condition is true
if...else statement - executes some code if a condition is true and another code if that condition is false
if...elseif....else statement - executes different codes for more than two conditions
switch statement - selects one of many blocks of code to be executed
Looping Statements:
For Loop
While Loop
Do-While Loop
ForEach Loop
The process of improving web pages so they rank higher in search engines for your targeted keywords.

33. Arrays in PHP: Declaring an array: Adding element in an array:
grgf
15. PHP (Part 2)
Arrays in PHP:
An array is traditionally defined as a group of items that share certain characteristics
Each item consists of two components:
Key
Value
Declaring an array:
$array_name[key] = value;
$players[0] = “Shahid Khan Afridi”;
Adding element in an array:
$players[1] = “Muhammad Amir”;
Accessing element in an array
echo $players[0];
The process of improving web pages so they rank higher in search engines for your targeted keywords.

34. grgf
16. Passing Data Between Pages
Forms provide a mean of submitting information from the client to the server.
Action attribute
Method attribute
GET Method
POST Method
GLOBAL Variables:
$_GET
$_POST
The process of improving web pages so they rank higher in search engines for your targeted keywords.

35. Passing data between sessions.
grgf
16. Passing Data Between Pages
Passing data between sessions.
A session is basically a temporary set of variables that exists only until the browser has shut down
$_SESSION:
represents data available to a PHP script that has previously been stored in a session
session_start()
$_SESSION[‘variable_name’]
session_destroy()
unset($_SESSION[‘variable_name’])
The process of improving web pages so they rank higher in search engines for your targeted keywords.

36. Regular expressions in PHP
grgf
17. Validating User Input
Regular expressions in PHP
A regular expression is a concise notation to describe patterns in strings
Example: |^[0-9]{2}-[0-9]{2}-[0-9]{4}$|
Notations of Regular Expressions. ^: $: -:
[ ]:
[^ ]: ? + *
Validating User’s Input
Validating name:
Validating Password:
Validating date:
Validating CNIC:
Validating
Validating user’s input
The process of improving web pages so they rank higher in search engines for your targeted keywords.

37. String Function in PHP strtolower(): strtoupper(): ucfirst():
grgf
17. Validating User Input
String Function in PHP
strtolower():
Convert a string in lower case
strtolower($string);
strtoupper():
Convert a string in upper case
strtoupper($string);
ucfirst():
Convert the first character of a string to upper case
ucfirst($string);
ucwords():
Convert the first character of each word in a string to upper case
The process of improving web pages so they rank higher in search engines for your targeted keywords.

38. ASP.NET is a web development platform, which provides
grgf
18. Introduction to ASP.NET
ASP.NET is a web development platform, which provides
A programming model
A comprehensive software infrastructure
Various services required to build up robust web applications for PC as well as mobile devices.
Setting Up the Environment.
CLR and other components in .NET Framework
The process of improving web pages so they rank higher in search engines for your targeted keywords.

39. Event Handling in ASP.NET
grgf
18. Introduction to ASP.NET
Event Handling in ASP.NET
Application_Start:
Application_End:
Session_Start:
Session_End:
Page and Control events in ASP.NET
DataBinding
Disposed
Error
Init
The process of improving web pages so they rank higher in search engines for your targeted keywords.

40. Creating database in MySQL using WAMP. Connecting PHP with MySQL
grgf
19. Data base Connectivity and data insertion
Creating database in MySQL using WAMP.
Connecting PHP with MySQL
mysql_connect(“hostname” ,”username”, ”password”)
Inserting data in database.
Insert SQL command:
INSERT INTO `table_name`
(list of columns)
VALUES (list of values)
INSERT INTO users
(‘user_Name’,’user_ ’,’user_Password’)
VALUES (‘$name’,’$ ’,’$password’)
mysql_query(query to execute)
The process of improving web pages so they rank higher in search engines for your targeted keywords.

41. Accessing file information Uploading File.
grgf
19. Data base Connectivity and data insertion
File Upload.
$_FILES: contains any item uploaded to the server when the post method is used
Form Enctype should be multipart/form-data
Accessing file information
$_FILES[‘input-field name’][‘name’];
Uploading File.
move_uploaded_file ( string $filename , string $destination );
The process of improving web pages so they rank higher in search engines for your targeted keywords.

42. Connection with database Selecting Data.
grgf
19. Retrieving Data from MySQL
Connection with database
Selecting Data.
$sql = ‘select * from users’;
$result = mysql_query($sql);
$users = mysql_num_rows($result);
Deleting Data.
$sql=“DELETE FROM users
WHERE user_Id=5”;
mysql_query($sql);
The process of improving web pages so they rank higher in search engines for your targeted keywords.

43. Update Data. $sql =“UPDATE users SET user_Name = ‘Ali’,
grgf
19. Retrieving Data from MySQL
Update Data.
$sql =“UPDATE users
SET user_Name = ‘Ali’,
user_ =
user_Password=‘123
Where user_Id=1’’;
mysql_query($sql);
The process of improving web pages so they rank higher in search engines for your targeted keywords.

44. grgf
20. Web Services, Intro to Web Hosting
Web services evolved from previous technologies that served the same purpose such as RPC, ORPC (DCOM, CORBA and JAVA RMI).
Three Problems solved: Interoperability, Firewall traversal, Complexity
Web services serves as a component that:
Communicates via open protocols (HTTP, SMTP, etc.)
Processes XML messages framed using SOAP
The process of improving web pages so they rank higher in search engines for your targeted keywords.

45. SOAP: Simple Object Access Protocol
grgf
20. Web Services, Intro to Web Hosting
Model of Web Services
Service provider
Service registry
Service requestor
SOAP: Simple Object Access Protocol
Soap is an XML vocabulary standard to enable programs on separate computers to interact across any network.
WSDL: Web Services Description Language
WSDL specifies what a request message must contain and what the response message will look like in unambiguous notation.
UDDI: Universal Description, Discovery and Integration specification
UDDI is a directory for storing information about web services , like yellow pages.
The process of improving web pages so they rank higher in search engines for your targeted keywords.

46. Web Hosting Types of Web Hosting Self-hosting Shared hosting
grgf
20. Web Services, Intro to Web Hosting
Web Hosting
Types of Web Hosting
Self-hosting
Shared hosting
Dedicated hosting
Grid Hosting
Collocated hosting
The process of improving web pages so they rank higher in search engines for your targeted keywords.

47. What are Organic Results? Why SEO? How does a Search Engine works?
grgf
21. Search Engine Optimization
What is SEO?
SEO is all about optimizing a website for growing visibility in organic (non-paid) search engine results.
What are Organic Results?
Why SEO?
To rank a website well in search engine results.
How does a Search Engine works?
Crawling ,Indexing, Processing, Calculating Relevancy, Retrieving Results
Conceptual Categories
On-Page SEO, Off-Page SEO
SEO Tactics and Methods
The process of improving web pages so they rank higher in search engines for your targeted keywords.

48. Techniques of Mobile SEO
grgf
21. Search Engine Optimization
Mobile SEO
Mobile Search Engine Optimization is the process of designing a website to make it suitable for viewing on mobile devices
Techniques of Mobile SEO
Select Mobile Configuration.
Avoid common mistakes.
Tools for Mobile SEO
The process of improving web pages so they rank higher in search engines for your targeted keywords.

49. Guidelines of Interface Design Introduction to JavaScript.
Summary
Guidelines of Interface Design
Introduction to JavaScript.
Dialog boxes in JavaScript
HTML DOM (Document Object Model)
Controlling the background dynamically
Working with images
Date Object
History Object
Navigator Object
Screen Object

50. Introduction to jQuery. XML PHP (Part 1) PHP (Part 2)
Outline
Form Object
Introduction to jQuery.
XML
PHP (Part 1)
PHP (Part 2)
Passing data between Pages.
Validating User Input
Introduction to ASP.NET
Database connectivity, data insertion and Data Retrieval.
Web Services and Intro to Web Hosting
SEO Techniques

51. THANK YOU