internet applications spring 2008. review last week –card sorting –usability & interactivity...
TRANSCRIPT
Internet Applications
Spring 2008
Review
• Last week– Card sorting– Usability & Interactivity– Guest Lecturer
This week
• Tech-topic presentations
• HTML / Webservers
• Introduction to programming
• http://www.techcrunch.com/2008/02/16/poor-people-use-yahoo-those-better-off-use-google/
Webservers
• A quick view of a configuration file– Httpd.conf– Access.log, error.log
• Integration with scripting environments
HTML
• Hypertext Markup Language• HTML 1.0 1992 – Tim Berners Lee• HTML 4.0 – 1999
– CSS
• XHTML 1.0 – 2002– Tight integration with JavaScript, DOM.
• XHTML 2.0 – 2002, 2006, 2008– Not entirely backwards compatible– Xforms, XML DOM, XML Events
Semantic html (xhtml)
• Semantics: of or relating to meaning or the study of meaning; "semantic analysis" (wordnet)
• Two forms of layout in html– Layout is embedded into document– Layout is abstracted into CSS
• Semantic HTML– “As much as possible, the tags surrounding the
content of a document should describe what that content is and/or what it's for.” Jason Kottke
• http://semantichtml.org/home/
Document Object Model
• Definition:• “The Document Object Model is a platform- and
language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” W3C
– Levels• Level 1. – Core components of HTML/XML. Focused on
navigation and Manipulation• Level 2 – Stylesheet object model, expanded
functionality. Enables traversal of document and namespace support (xmlcoverpages)
• W3C reference
DOM Example
•A Hierarchy of elements
•Family based inheritance
•Parent
•Child
•Sibling
•Element access by name
•document.getElementById("You")
Elements
Semantics & structure
Design & interactivityDecision making
CSS
PHP
PERL
RUBY
RDBMS
XMLXHTML
XSLSQL
AJAX
JavaScript
HTML Document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body><stuff>.....</stuff>
</body>
</html>
XHTML Syntax
• All elements must be closed properly• <html></html>• <html/>
• Elements must be properly nested• <ul><li></li></ul>
• Attribute values must be quoted• <img src=“/home/image.jpg”/>
• Formatting• Elements names are in lower case• Documents must be well-formed• Special characters must use entities
– & < >
• Comments• <!-- this is a comment -->
Tags, elements, attributes
• Tag / element • Consists of a name inside brackets <>
• Attributes• Properties of the elements included within the
<> such as <img src=“” alt=“”/>• Universal attributes
– class, id
Interesting Elements
• <h1><h2/></h3><h4>• <p>• <ul><li></li></ul>• <ol><li></li><ol>• <dl><dt><dd><dl>• <div></div>• <span></span>• <br/>• <a href=“”></a>• <img alt=“” src=“”>
Forms
• <form action=“submit.php” method=“get”>– <fieldset>
• <label for=“email”>Email Address:</label>• <input id=“email” name=“email” class=“text”
type=“text”/>
– </fieldset>
• </form>
XHTML Reference
• http://www.w3.org/2007/07/xhtml-basic-ref.html
• http://www.w3schools.com/tags/ref_byfunc.asp
Cascading Style Sheets
• Uses the <style> element– <style type=“text/css” media=“screen”>
• Methods for including in HTML– Inline – styles embedded within tags– Internal – styles embedded within head
tags– External – style sheets included using
• <link rel=“stylesheet” type=“text/css” href=“”/>
CSS formatting elements
• Properties– Fonts, colors, backgrounds, text, boxes and
layout, lists, tag classification
• Property types– Keyword font-weight:bold;– Length font-size:+2em;– Percentageline-height:120%– URL url(http://....)– Color #FFCC66
CSS Syntax
• EntriesSelector (elements, classes, ids, etc)
{Attribute:value; attribute:value;
}
• Comments/* this is a comment */
Selector context{color:purple} all text elements
p ul h1 {color:red} elements share style
ol > li {font-size:2em} child of ol
h1 + h2 {margin:top} adjacent h2 element
Div[title~=“bibliography”] matched attribute
p.centered a class on an element
.centered generic class
#header id
a:hover pseudoclassa:active
Positioning
• Standard document flow– Beginning to end– Renders block/inline elements using default rules
• Positioning in CSS– float:left – relative elements “flow” around floated
element– position:relative – keeps element in document flow– position:absolute – removes element from flow and
places in specific position– position:fixed – keeps a specific place in the
window
Class exercises
• Exercise 1 – Create an XHTML document– Style the document
• Exercise 2– Add semantic based navigation to the
document
Programming
• Definitions
• Concepts
• A programming framework
Definitions
• Programming Language• “A formal language used to write instructions that can be
translated into machine language and then executed by a computer.” (definitions)
• Scripting Language• Run-time (does not require compilation)• Restricted context (requires a specific environment)• Functional / Object oriented • Definitions
• Compiler / Interpreter• A program that builds and executes a program.
Compilers create a self-executable file, interpreters read a text script at run-time
The programming process
• Analyze the problem• What do you want your program to do?• What are your users expecting, what data do you have?
• Plan program flow/logic • What steps need to occur, in what order?• Useful tools include Step-Form, flowcharts, and
pseudocode
• Code the program• Create variables, routines, functions
• Compile/run the program• Test, verify• Release
Algorithms
• “An effective procedure for solving a problem in a finite number of steps.”
• Sample Algorithm for an email form (Step Form)– Begin
• If form data is present then continue processing– Get data from form (Subject, note, etc)– If the subject doesn’t contain bad stuff then continue
processing» Write subject, note to email function» Send email» If Email sent successfully then tell user that it did,
otherwise output the error code
– End
Algorithm elements
• Processes / Sequences• Actions are ordered according to need
• Decision making / Selection• If...Then...Else
– If today is Friday then go home early– If username = mitcheet then allow access
• Repetition / Iteration / Looping• While
– While the database returns data, print it out
• Foreach– For Each piece of data returned, write it to a file
• Variables• Placeholders for information to be used by program• Often “initialized” with specific values (such as 0”
Decision making
• Single-Alternative / unary outcome– If then
• Dual-Alternative / binary outcome– If then else
• Multi-Alternative /xary outcome– If then elsif elsif elsif– Switch case statements
• Switch case1: case2: default:
PHP Comparison Operators
http://www.w3schools.com/php/php_operators.asp
Nesting
• Use a mix of flow-control and decision making functions to create complex processes
• If -> then -> else
• Switch -> case -> default
• For -> next
• Do -> while
Variables
• Text – Strings
• Numbers– Integers (whole numbers)– Floating point – (decimal numbers)
• Boolean– True/False
Variables – single value
• Scalars – Single value variables– Strings - $username = “mitcheet”– Numbers $cost = 55.00– Boolean $ready = True
Variables – multiple values
• Arrays – Multi-value variables – Grouped in numerical order
• $email[1] = “[email protected]”• $email[2] = “[email protected]”
– Grouped with text• $email[1][“username”] = “[email protected]”• $email[1][“realName”] = “Erik Mitchell”
– General syntax• $email = array ( key=>value, key=>value)• Arrays can be nested (think hierarchy)
PHP Variable Operators
http://www.w3schools.com/php/php_operators.asp
Variable scope
• Depending on where you initialize a variable, impacts what functions can use it– A variable initialized at the beginning of
your file is “global”– A variable initialized within a function is
limited to the function.
Looping
• Definition• Loop structures allow re-execution of instructions with
multiple sets of data
• Examples• Writing records from a database query onto a webpage• Calculating cost, discounts, shipping on items in a
shopping cart• Comparing values to make decisions
• Benefits• declare logic and operational statements once & re-use• Loops are the building blocks of structured programming• Use a ‘main’ loop to control the program
Loop structures
• Components• Loop control variable
– the variable that keeps changing ($i for example)
• Sentinel value– the value which signals the end of the loop
• Loop control structures– Do while, While, for, foreach
• Examplefor($i=1; $i<=100; $i++) {
echo “hello world! <br/>”;
}
for() { } Control structure$i = 1 Variable declaration$i < 100 Limit declaration$i++ Increment declarationecho “”; operational statement
Creating an Algorithm
• Investigate– Identify a specific process
• (sending email)– Identify the major decisions
• (presence of data, appropriateness of data)– Identify the loops
• What needs to happen several times?– Identify variables
• Lay out the algorithm– Design a sequence of steps incorporating the decisions from
step 1. Make changes as necessary• Refine algorithm
– Implement changes noticed during run-through– Group processes, variables
Class Exercise
• Create a step-form program that will count the number of words on a page of text:– How does your program flow? What does
your algorithm do?– What elements of flow control would you
use?– How would you store data?– What types of functions would you need
your program to do?
Functions
• Definition– “A sequence of instructions for performing a
specific task” (freedictionary)• Benefits
– Modularization/Abstraction– Code re-use– Variable management (global, local)– Easier to troubleshoot and maintain
• Key concepts– Global variables vs local variables– Parameters– Returned values
PHP Functions
• Examples– Phpinfo(), for(), foreach(), echo.......
• Contents– Name, Parameters, operations, return values
function myFunctionName (parameters)
{
parameters;
operations;
return variables;
}
Declaration
{
Parameters passed to functionOperations (calculate, lookup, etc)Return values to rest of program
}
Programming approaches
• Logical/structural programming• Stream of consciousness• Starts at line 1
• Procedural programming• Uses functions, sub-functions, subroutines• Encapsulation, modularization
• Object-oriented programming• Further encapsulation• Uses concepts of inheritance, modularity
Object-oriented programming
• Definition
• History– Gained popularity in 1990s– Most languages have OO features
• PHP, Perl, Ruby.......
• Familiar examples• The Document Object model
The Door metaphor
• Methods• Open• Close
• Interface• The doorknob
• Inheritance• What does this door do
that all other doors do?
• Encapsulation• Hinges, knob, lock
http://flickr.com/photos/backnext/1413662719/
Object-oriented overview
– Classes– A category of things. Defines characteristics and
methods of related objects
– Objects– A specific item that belongs to a class, an “instance”
of a class
– Methods– Inheritance– Polymorphism
Object-oriented overview
– Classes– A category of things. Defines characteristics and methods
of related objects
– Objects– A specific item that belongs to a class, an “instance” of a
class
– Is-a relationships & multiple hierarchies• myChippedSilsMug is an example of the class Mugs
– Classes include• A name• Data (often)• Methods (often)
Object features
• Encapsulation – data is accessed through standard object interace
• Inheritance – base classes on parents
• Introspection – ability for a program to examine an objects charicteristics. – name parent class, properties, methods.
Object-oriented advantages
• Object reuse, abstraction• Saves development time, effort• Modularity• Method overloading, polymorphism use
reasonable easy to remember names for methods
• Polymorphism – same operation to be carried out differently depending on context
• Method overloading – different methods exist with the same name but different argument lists.
Classes example
• Class name: employee– Class data:
• idNumber, lastName, firstName, jobName, weeklySalary
• These would be ‘variables’ in our procedural environment, in OOP they are attributes.
– Class methods:• setData(), calculatePay(), findJob(),
showEmployeeData()......• Methods are comparable to functions in a
procedural environment
Modeling Classes
• Class diagram– Helps conceptualize
attributes and methods
•Class name
•Attributes–idNumber–lastName–FirstName
•Methods–setData()–calcPay()–showData()
Modeling classes - pseudocode
Class bookNum bookIdChar titleChar authorChar ISBNChar lengthChar pictureLocation
getBookCoverArt(char identifier)ISBN = identifierpictureLocation = amazonPictureAPI(ISBN)return
findBookCost(char identifier)ISBN = identifierbookCost = amazonCostAPI(ISBN)
Return
showBookData()print title, author, pictureLocation
return
Class attributes
• Classes:– Inherits attributes, methods
• Superclass / subclass• Parent / child
– Can Override default values• A child does not inherit every feature of the
parent
– Can be concrete / abstract• Concrete classes have objects• Abstract classes only have child classes
Creating Objects• Instantiation
– Creating objects that will inherit traits of classes• Php example
<?php//Create a class
class book {var $bookId;var $bookTitle;
}//Create an Object$mybook = new book();$mybook->bookTitle = "Gone with the Wind";$mybook->bookid = "54";echo $mybook->bookTitle." ".$mybook->bookId;
?>
Class features
• Polymorphism– Classes that do different things
• Method overloading– When different methods exist with the same name
but different argumnet lists – “when two objects of different classes can su ethe same method name you are uing polymorphism, when you create ac hiild class that contains a method with teh same nwame but idfffent function you are overloading”
Pseudo code• Input/output
– Input, Read, Display
• Iteration– Repeat Until, Dowhile /end dowhile, for/end for
• Decision– If <condition> then <statement> else– If <> then <> elsif <> elsif <> endif
• Processing– Add(+), subtract(-), compute, compare (<,=,>), set
• Subroutines (functions/sub-functions)– Use to define sub processes:
• EMAILTHIS: – Input email, subject, note– Send email– Set send result to output variable X– return X
• Include in your pseudo code with a call statement– Call EMAILTHIS (email, subject, note)
Error Handling
• http://users.evtek.fi/~jaanah/IntroC/DBeech/3gl_more.htm#start
flowcharts
• http://users.evtek.fi/~jaanah/IntroC/DBeech/3gl_flow.htm#start
Coding
• Translate your pseodocode
Language elements (Syntax)
• Syntax – grammar, order, structure of program– PHP syntax example
<? PHPFunction () { stuff }$variablename;End of Line markers (;)//comments
?>
– Syntax has to be perfect!– PHP is case specific
Language elements (logic)
• Elements of program logic– Program must follow a sequence of
instructions that create a logical process.
Group discussion
• Rough out an interface that does: what?Have them as a class define an
application
• Have them break into groups,– Define the interface, sketch it out– Define data model– Define one key task
Next week
• Technology Topics XML/RSS
• http://www.php.net/manual/en/tokens.php