Web Technologies and Programming Lecture 32

1Web Technologies and ProgrammingLecture 322Summary of Lecture 16 - 303OutlineGuidelines of Interface DesignPrinciples of Screen DesignInterface Design GoalsInteraction StylesIntroduction to JavaScript.Embedding JavaScript with HTMLJavaScript conventionsDatatypes and Operations in Java Script.Dialog boxes in JavaScriptHTML DOM (Document Object Model)4OutlineControlling the background dynamicallyWorking with imagesDate ObjectHistory ObjectNavigator Object Screen ObjectForm ObjectIntroduction to jQueryXMLPHP (Part 1)PHP (Part 2)5OutlinePassing data between Pages.Validating User InputIntroduction to ASP.NETDatabase connectivity, data insertion and Data Retrieval. Web Services and Intro to Web HostingSEO Techniques61. Guidelines of Good Interface Design“The user interface is the most important part of any computer system.” (Galitz, 2002, p. 1)Benefits of Good DesignHigher task completion ratesMore efficient task completion ratesReduced training costsImproved customer service71. Guidelines of Good Interface DesignInterface Design ProcessGuidelines 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.81 Interface Design GoalsReduce visual workReduce intellectual workReduce memory workReduce motor workMinimize or eliminate any burdens or obstructions imposed by technology91. Interface Design Convention (Web Based Application)101. Guidelines of Good Interface DesignElements of Visual Design.Principles.Elements.FontSix Typographic TermsFont SizeTypes of FontsProportional Vs. Fixed width FontsCase of TextLayoutColorGuidelines for Color UseLabels112. Introduction to JavaScript.What is JavaScript?JavaScript is a client-side scripting languageJavaScript was designed to add interactivity to HTML pages Common Uses of JavaScriptCookie, Validating Data, Event Handling etc.Embedding JavaScript in HTMLInternal: tagExternal: separate file and include this in HTML code.122. Introduction to JavaScript.JavaScript ConventionsCase Sensitivity, Comments, Using Quotes etc.Variables in JavaScriptNumbers, Strings, Boolean, null valuesJavaScript OperatorsAssignment Operator: =Arithmetic Operators: +, - , *, /, %, ++, --Logical Operators: &&, ||, !Comparison Operators: ==, ===, !=, !==, , elementProperties: name, border, height, width, hspace, vspace, src An image object can be created asvar objname= new image()You can access an element by using getElementById():207. 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)218. 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 propertyHistory object properties:Length: Returns the number of URLs in the history listHistory object methods:back(): Loads the previous URL in the history listforward(): Loads the next URL in the history listgo(): Loads a specific URL from the history list229. Navigator Object.The navigator object contains information about the visitor's browserIt also provides several properties that assist in the detection of various elements of the visitor’s browser and environmentNavigator object properties:appCodeName: Returns the code name of the browserappName: Returns the name of the browserappVersion: Returns the version information of the browserThe properties appName and appCodeName return the name of the browseNavigator object methods:javaEnabled(): Specifies whether or not the browser has Java enabled2310. Screen Object.The screen object contains information about the visitor's screenThe screen object properties:availHeightReturns the height of the screen (excluding the Windows Taskbar)availWidthReturns the width of the screen (excluding the Windows Taskbar)HeightReturns the total height of the screenWidthReturns the total width of the screencolorDepthReturns the bit depth of the color palette for displaying images2411. Form Object.The Form object represents an HTML formFor each tag in an HTML document, a Form object is createdAccessing Form Elementsdocument.forms[0].name.valuedocument.form1.elements[0].valueSetting Form Elementsdocument.forms[0].name.value = “Ali”document.form1.elements[0].value = “Ali”2512. 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 structureAllows adding JavaScript to your web pagesMuch easier to useEliminates cross-browser problemsMobile First Web Developement2612. Introduction to jQueryjQuery SyntaxThe 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 jQueryA (selector) to "query (or find)" HTML elementsA jQuery action() to be performed on the element(s)jQuery Selectors.Element selectorId selectorClass selector2713. XMLXML stands for EXtensible Markup Language A meta-language for descriptive markup: you invent your own tagsComponents of XMLProcessing instructions Encoding specification (Unicode by default) Namespace declarationSchema declarationElementsEach element has a beginning and ending tag...Elements can be empty ()AttributesDescribes an element; e.g. data type, data range, etc.Can only appear on beginning tag2814. PHP (Part 1)PHP: Hypertext PreprocessorOriginally called “Personal Home Page Tools”Used to create dynamic web pagesPopular server-side scripting technologySetting Up the Environment:A Web ServerPHP MySqlWriting and Executing PHP Code with HTML.29WAMP Server14. PHP (Part 1)Constants: A constant is a placeholder for a value that you reference within your code that is formally defined before using itmust begin with a letter or an underscoreare case sensitivetypically they are named using all capital lettersVariables: Begin with $ signFirst character must be a letter or underscoreRemaining characters may be letters, numbers or underscoresData Types: Float,Integer,Boolean,String,Array, Object3014. PHP (Part 2)Operators in PHPArithmetic Operators: +, - ,*, /, %, **Assignment Operators: =String Operators: . , .=Increment/decrement Operators: ++ , --Logical Operators: AND, OR, NOT, XOR, &&, ||, !Comparison Operators: >, =Equality Operators: ==, !=, ===3115. PHP (Part 2)Conditional Statements:if statement - executes some code if one condition is trueif...else statement - executes some code if a condition is true and another code if that condition is falseif...elseif....else statement - executes different codes for more than two conditionsswitch statement - selects one of many blocks of code to be executedLooping Statements:For LoopWhile LoopDo-While LoopForEach Loop3215. PHP (Part 2)Arrays in PHP:An array is traditionally defined as a group of items that share certain characteristicsEach item consists of two components:KeyValueDeclaring an array:$array_name[key] = value;$players[0] = “Shahid Khan Afridi”;Adding element in an array:$players[1] = “Muhammad Amir”;Accessing element in an arrayecho $players[0];3316. Passing Data Between PagesForms provide a mean of submitting information from the client to the server.Action attributeMethod attributeGET MethodPOST MethodGLOBAL Variables:$_GET$_POST3416. Passing Data Between PagesPassing 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 sessionsession_start()$_SESSION[‘variable_name’]session_destroy()unset($_SESSION[‘variable_name’])3517. Validating User InputRegular expressions in PHPA 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 InputValidating name:Validating Password:Validating date:Validating CNIC:Validating Email:Validating user’s input3617. Validating User InputString Function in PHPstrtolower():Convert a string in lower casestrtolower($string);strtoupper():Convert a string in upper casestrtoupper($string);ucfirst():Convert the first character of a string to upper caseucfirst($string);ucwords():Convert the first character of each word in a string to upper caseucfirst($string);3718. Introduction to ASP.NETASP.NET is a web development platform, which providesA programming modelA comprehensive software infrastructureVarious 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 3818. Introduction to ASP.NETEvent Handling in ASP.NETApplication_Start:Application_End:Session_Start:Session_End:Page and Control events in ASP.NETDataBindingDisposedErrorInit3919. Data base Connectivity and data insertionCreating database in MySQL using WAMP.Connecting PHP with MySQLmysql_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_Email’,’user_Password’)VALUES (‘$name’,’$email’,’$password’)mysql_query(query to execute)4019. Data base Connectivity and data insertionFile Upload.$_FILES: contains any item uploaded to the server when the post method is usedForm Enctype should be multipart/form-dataAccessing file information$_FILES[‘input-field name’][‘name’];Uploading File.move_uploaded_file ( string $filename , string $destination );4119. Retrieving Data from MySQLConnection with databaseSelecting 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);4219. Retrieving Data from MySQLUpdate Data.$sql =“UPDATE users SET user_Name = ‘Ali’, user_Email = ‘ali@yahoo.com’, user_Password=‘123 Where user_Id=1’’;mysql_query($sql);4320. Web Services, Intro to Web HostingWeb 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, ComplexityWeb services serves as a component that: Communicates via open protocols (HTTP, SMTP, etc.) Processes XML messages framed using SOAP 4420. Web Services, Intro to Web HostingModel of Web ServicesService providerService registryService requestorSOAP: 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 LanguageWSDL 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.4520. Web Services, Intro to Web HostingWeb HostingTypes of Web HostingSelf-hostingShared hostingDedicated hostingGrid HostingCollocated hosting4621. Search Engine OptimizationWhat 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 ResultsConceptual CategoriesOn-Page SEO, Off-Page SEOSEO Tactics and Methods4721. Search Engine OptimizationMobile SEOMobile Search Engine Optimization is the process of designing a website to makeit suitable for viewing on mobile devicesTechniques of Mobile SEOSelect Mobile Configuration.Avoid common mistakes.Tools for Mobile SEO48SummaryGuidelines of Interface DesignIntroduction to JavaScript.Dialog boxes in JavaScriptHTML DOM (Document Object Model)Controlling the background dynamicallyWorking with imagesDate ObjectHistory ObjectNavigator Object Screen Object49OutlineForm ObjectIntroduction to jQuery.XMLPHP (Part 1)PHP (Part 2)Passing data between Pages.Validating User InputIntroduction to ASP.NETDatabase connectivity, data insertion and Data Retrieval. Web Services and Intro to Web HostingSEO Techniques50THANK YOU51