Presentation is loading. Please wait.

Presentation is loading. Please wait.

CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr

Similar presentations


Presentation on theme: "CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr"— Presentation transcript:

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


Download ppt "CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr"

Similar presentations


Ads by Google