Beruflich Dokumente
Kultur Dokumente
Pradeep Pocha
11th Feb 2012
What is a protocol?
Protocol An agreement about how to do something
This enables computers and software built by different people to be able to communicate in the same language
#1
Human Protocols
Sending a letter via the postal service
Shayne Evans 5501 Sennott Sq. Pittsburgh, PA. 15260 Kim Morrison Contents! St. 123 Somewhere Someplace, PA. 15555
#1
Computer Protocols
Sending a packet via the network
To: From: 192.168.1.1 on port 23 192.168.1.110 on port 6710
#1
Visual Comparison
To: 192.168.1.1 on port 23 From: 192.168.1.110 on port 6710
#1
Textual Comparison
The address of the letter is the destination of the packet The return address of the letter is the source of the packet The content of the envelope is the payload of the packet In both protocols, if you disobey the rules your message will not be received
#1
Protocol Layers
Protocols can be layered on top of other protocols to enable new ways of communicating
#1
Dear [Recipient],
[Body of message goes here] [Closing] [Sender signature] [Sender name]
#1
Dear Kim,
Hey there! Whats up? Im good. Thanks. Sincerely,
Shayne Evans
Shayne Evans #1
Hey there! Whats up? Im good. Thanks. Kim Morrison 123 Somewhere St. Sincerely,Someplace, PA. 15555
Shayne Evans
Shayne Evans
#1
DNS, VoIP
TCP
UDP
Internet Protocol #1
DNS, VoIP
TCP
UDP
Internet Protocol #1
DNS, VoIP
TCP
UDP
Internet Protocol #1
TCP
UDP
Internet Protocol #1
DNS, VoIP
TCP
UDP
Internet Protocol #1
CS 640
18
URI,URN,URL
Uniform Resource Identifier
Information about a resource
Using HTML/XHTML
XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured Good references and tutorial sites are available Follow the standards and your work will be much simpler, more consistent, and your results more reliable
Plus your co-workers will like you more
Device Independence
Your audience may view your site with many different devices and browser types.
The Browser
XHTML
XHTML is a version of HTML modified to conform to the XML standard Designed to separate content from presentation
Content in XHTML Presentation controlled by Cascading Style Sheets (CSS)
Extensible Additional elements can be defined XML Compatible Other XML based languages can be embedded in XHTML documents Like a programming language
Specific syntax to use Validators help you get it right
XHTML Differences
Case is significant All elements must have begin tags and end tags <p>Hello</p> Empty elements contain their own end tag <br /> Attribute values must be enclosed in quotation marks More specfics available at http://www.w3.org/TR/xhtml1/#diffs
Hierarchical Structure
Content Types
Semantic Structure
Semantic Markup
Hierarchy
Strict DOCTYPE
Enter exactly as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Using Strict encourages standards based coding
Validators will flag logical errors in your methods Your CSS will work better and more predictably
Elements
Consist of three parts
Begin tag, which can contain attributes Contents End tag
Attributes
Always only used in the element begin tag Three types
Optional attributes: Varies with element type Standard attributes: id, class, title, style, dir, lang, xml:lang Event attributes: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Used in scripting
Empty Elements
Some elements have no content and therefore also have no end tag
<img src=photo.jpg /> <br /> <hr /> <link rel="stylesheet" type="text/css" href=main.css" />
In XHTML, which requires end tags on all elements, a single tag represents both the begin and end tag
<p>
Paragraph Important for presentation control to put text in an element. When in doubt, put text in a paragraph Blockquotes (<blockquote>) except they have wider left and right margins
Lists
Unordered lists (bulleted lists) <ul> <li>One</li> <li>Two</li> </ul> Ordered lists (numbered lists) <ol> <li>One</li> <li>Two</li> </ol>
Text Markup
Bolding
<b>text</b> <strong>text</strong>
Italics
<i>text</i> <em>text</em>
Other
<sub>text</sub> subscript <sup>text</sup> superscript <del>text</del> deleted text
Tables
<table border cellspacing="5" cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <tr> <td>Mary</td> <td>Analyst</td> </tr> <tr> <td>John</td> <td>Technician</td> </tr> </table>
Graphics
Graphics are placed by using an img element The alt attribute provides alternative text describing the graphic in case the graphic itself cannot be shown or the user cannot see the graphic <img src="picture.gif" alt="Suzzallo">
Anchors
Anchors can link your page to any file on the Web
Divs
Divs enclose a set of elements
<div style=text-align: center;> <h2> News</h2> <p><a href=budget.html>Budget</a></p> <p><a href=invest.html>Investment</a></p> </div>
Spans
Spans enclose objects (text, graphics) within an element
<p>Call me Ishmael. Some years ago <span style=font-style: italic;>never mind how long precisely</span> having little or no money in my purse, and nothing particular to interest me on shore,
A Style
Selector Property Value p { font-family: times; } Note the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;)
Using CSS
Styles can be set in a stylesheet, in a style element in the head or in a style attribute
Selectors
Simple selectors p { color: blue } h1, h2, h3, h4 { font-style: italic; } Contextual selectors ul li { font-weight: bold; } #main img { border: solid black 5px; } p.intro { font-family: verdana, sans-serif;}
Vertical Margins
The larger of the two vertical margins will determine the distance between elements
Pages are built as a series of blocks stacked from the top down
Controlling Layout
Styles can control size and placement of elements Example: #nav { width: 12em; float: left; } #news { width: 12em; float: right; } #main { margin: 1em 13em 1em 13em;
HTML-Kit
HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML
Press F9 and your XHTML is validated and tidied for easy reading
Resources
HTML-Kit editor http://chami.com/ Amaya editor http://www.w3c.org/Amaya W3schools XHTML and CSS tutorials http://www.w3schools.com/ Web Head Start tutorials http://www.webheadstart.org/ Tidy Web Interface - http://www.washington.edu/webinfo/tidy.cgi CSS Validator - http://jigsaw.w3.org/css-validator/ Dave Raggett XHTML and CSS tutorials http://www.w3.org/MarkUp/Guide/Overview.html Web Accessibility in Mind (WebAIM) - http://www.webaim.org/ Color contrast analyzer http://www.visionaustralia.org.au/info.aspx?page=628 Stylin With CSS, A Designers Guide, Second Edition by Charles Wyke-Smith
Web Application
64
Model 1 Architecture
Model 1 Architecture
Model 2 Architecture
Model 2 Architecture
Model-View-Controller
Servlet
A servlet is a JavaTM technology-based Web component, managed by a container, that generates dynamic content. --- Servlet API Specification, Version 2.4 The servlet container is a part of a Web server or application server that provides the network services over which requests and responses are sent, decodes MIME-based requests, and formats MIME-based responses. A servlet container also contains and manages servlets through their lifecycle
Client
Client
Request
Client
Client
Response
Client
Client
Response
%>
etc
lib
src
classes
web
com
example
model
web
BeerExpert.java
BeerSelect.java
tomcatChow
webapps
Beer-v1
WEB-INF
lib
Form.html
model
web
BeerExpert.java
BeerSelect.java
JDBC
Load the driver class Get a connection Create a statement Execute the query, returns ResultSet Iterate through ResultSet
JDBC Example
// Load the Oracle JDBC driver Class.forName ("oracle.jdbc.driver.OracleDriver"); //Connect to DB server as authorized user Connection conn = DriverManager.getConnection ("jdbc:oracle:thin:@orion.towson.edu:1521:cosc", account, password); // Create a JDBC Statement to hold SQL query Statement stmt = conn.createStatement (); ResultSet rset = stmt.executeQuery ("select ticker from stocks"); // Iterate through the result and print the employee names while (rset.next ()) { out.println (rset.getString (1)); }
Server side
Client side
Persistent cookie
87
What is state?
State is the information to describe or identify a session at a certain point of time Stateful: each request/response can maintain its state at different points of times
Phone calls are stateful
Stateless: each request/response cannot maintain its state at different points of times
HTTP protocol is stateless, i.e., HTTP itself does not provide mechanisms to maintain state information for each request/response. In other words, HTTP does not remember.
88
Applications
Where is session/state needed?
User sign-in status A transaction involving multiple steps (requests/responses), such as
shopping (cart) multi-page survey or multi-page test auto insurance quote
90
Cookies
Cookie is a small piece of textual information stored on the client computer which web servers can interact with
Cookie facts
Cookie is pure text information Cookie is sent with HTTP headers Cookie has restrictions (number, size, domain, path)
Client Computer
Persistent Cookie
Servlets or JSPs
Session Cookie
Reading a cookie
Cookie cookies[]=request.getCookies() getName() and getValue()
93 and Listing 8.2 See example cookieset.jsp, cookieread.jsp
Session Cookie
Session cookie is not saved to the disk; it only exist in the memory for the duration of the browser
Session cookie expires when the browser window is closed
Dont set maxAge when creating a session cookie Note: a session cookie JSESSIONID is automatically set by the server
94 See example cookieset.jsp and cookieread.jsp
Cookie Practices
Cookies only handle simple data
Numbers, characters, strings
Persistent cookies save data on client computers for a certain period of time
A unique feature that can be utilized Often used to save user preferences or convenience information
See example cookieset.jsp and cookieread.jsp
Session duration
On the server side, session duration is set by the server. Session expires when there is no activity for a certain amount of time.
96
Client Browser
1st request
First response: session id is set
Session Cookie
Properties
Session ID: session.getId() Creation time Is it a new session?
98 See example sessioninfo1.jsp and sessioninfo2.jsp; or Listing 9.1
Session Practice
What data to put in session?
Information that should be shared during a users visit of multiple requests
User preferences, choices User status, e.g. login information Shopping cart information Temporary data between page transition
The value of the variable remains in the memory until the servlet is reloaded
Example
Counter of the servlet/JSP page How to prevent count cheating?
See example classvariable.jsp
101
Usage
A counter of user visits (sessions)
102
Computer A
Computer B
104
References:
www.cs.pitt.edu/~sevans/cs110/protocols.ppt(#1)
XHTML and CSS:Rick Ells UW Technology
http://staff.washington.edu/rells/
CS 640
105