Download presentation
Presentation is loading. Please wait.
1
Internet Applications Spring 2008
2
Review Last week –Card sorting –Usability & HCI –Guest Lecturer
3
This week Tech-topic presentations Introduction to programming HTML / Webservers http://www.techcrunch.com/2008/02/16/ poor-people-use-yahoo-those-better-off- use-google/
4
Webservers A quick view of apache files –Httpd.confHttpd.conf –Access.log, error.logAccess.log, error.log
5
HTML Hypertext Markup Language HTML 1.0 1992 – Tim Berners-Lee HTML 4.0 – 1999 –CSS XHTML 1.0 – 2002XHTML 1.0 –Tight integration with JavaScript, DOM. XHTML 2.0 – 2002, 2006, 2008XHTML 2.0 –Not entirely backwards compatible –Xforms, XML DOM, XML Events
6
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 KottkeJason Kottke http://semantichtml.org/home/
7
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 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)xmlcoverpages W3C reference
8
DOM Example A Hierarchy of elements Family based inheritance Parent Child Sibling Element access by name document.getElementById("You")
9
Using technology Semantics & structure Design & interactivity Decision making CSS PHP PERL RUBY RDBMS XML XHTML XSL SQL AJAX JavaScript
10
HTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">.....
11
XHTML Syntax All elements must be closed properly Elements must be properly nested Attribute values must be quoted Formatting Elements names are in lower case Documents must be well-formed Special characters must use entities –& < > Comments
12
Tags, elements, attributes Tag / element Consists of a name inside brackets <> Attributes Properties of the elements included within the <> such as Universal attributes –class, id
13
Interesting Elements Headings: – Paragraphs – Unordered Lists: – Ordered Lists: – Definition Lists: – Divs: – Breaks: – Links: – Images: –
14
Forms – Email Address: –
15
XHTML Reference http://www.w3.org/2007/07/xhtml-basic- ref.htmlhttp://www.w3.org/2007/07/xhtml-basic- ref.html http://www.w3schools.com/tags/ref_byfu nc.asphttp://www.w3schools.com/tags/ref_byfu nc.asp
16
Cascading Style Sheets Uses the element – Methods for including in HTML –Inline – styles embedded within tags –Internal – styles embedded within head tags –External – style sheets included using
17
CSS formatting elements Properties –Fonts, colors, backgrounds, text, boxes and layout, lists, tag classification Property types –Keywordfont-weight:bold; –Lengthfont-size:+2em; –Percentageline-height:120% –URLurl(http://....) –Color#FFCC66
18
CSS Syntax Entries Selector (elements, classes, ids, etc) { Attribute:value; attribute:value; } Comments /* this is a comment */
19
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.centeredgeneric class #headerid a:hoverpseudoclass a:active
![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.centeredgeneric class #headerid a:hoverpseudoclass a:active](http://images.slideplayer.com/27/9151647/slides/slide_19.jpg "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.centeredgeneric class #headerid a:hoverpseudoclass a:active")
20
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
21
Class exercises Exercise 1 –Create an XHTML document –Style the document Exercise 2 –Add semantic based navigation to the document
22
Programming Definitions Concepts A programming framework
23
Definitions Programming Language “A formal language used to write instructions that can be translated into machine language and then executed by a computer.” (definitions)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
24
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
25
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 pseudocodeflowcharts Code the program Create variables, routines, functions Compile/run the program Test, verify Release
26
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
27
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”
28
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:
29
PHP Comparison Operators http://www.w3schools.com/php/php_operators.asp
30
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
31
Variables Text –Strings Numbers –Integers (whole numbers) –Floating point – (decimal numbers) Boolean –True/False
32
Variables – single value Scalars – Single value variables –Strings - $username = “mitcheet” –Numbers $cost = 55.00 –Boolean $ready = True
33
Variables – multiple values Arrays – Multi-value variables –Grouped in numerical order $email[1] = “mitcheet@unc.edu” $email[2] = “burrohj@unc.edu” –Grouped with text $email[1][“username”] = “mitcheet@wfu.edu” $email[1][“realName”] = “Erik Mitchell” –General syntax $email = array ( key=>value, key=>value) Arrays can be nested (think hierarchy)
![Variables – multiple values Arrays – Multi-value variables –Grouped in numerical order $ [1] = $ [2] = –Grouped with text $ [1][ username ] = $ [1][ realName ] = Erik Mitchell –General syntax $ = array ( key=>value, key=>value) Arrays can be nested (think hierarchy)](http://images.slideplayer.com/27/9151647/slides/slide_33.jpg "Variables – multiple values Arrays – Multi-value variables –Grouped in numerical order $ [1] = $ [2] = –Grouped with text $ [1][ username ] = $ [1][ realName ] = Erik Mitchell –General syntax $ = array ( key=>value, key=>value) Arrays can be nested (think hierarchy)")
34
PHP Variable Operators http://www.w3schools.com/php/php_operators.asp
35
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 initiialized whitnin a fucntion is limited to the function.
36
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
37
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 Example for($i=1; $i<=100; $i++) { echo “hello world! ”; } for() { }Control structure $i = 1Variable declaration $i < 100Limit declaration $i++Increment declaration echo “”;operational statement
38
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
39
Functions Definition –“A sequence of instructions for performing a specific task” (freedictionary)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
40
PHP Functions Examples –Phpinfo(), for(), foreach(), echo....... Contents –Name, Parameters, operations, return values function myFunctionName (parameters) { parameters; operations; return variables; } Declaration { Parameters passed to function Operations (calculate, lookup, etc) Return values to rest of program }
41
Class Exercise Create a step-form program that will print out an email form and process the data once the user clicks “send” –What states does your page have? –How does your program flow? What does your algorithm(s) do? –What elements of flow control would you use? –How would you process/store data? –What types of functions would you need your program to do?
42
Next week Technology Topics XML/RSS More on programming basics
Similar presentations
