Session_1 - FAU College of Engineering

Download Report

Transcript Session_1 - FAU College of Engineering 

Florida Atlantic University
Department of Computer Science & Engineering
ISM 4052 –Internet Application
Programming
Dr. Roy Levow
Session 1
June 2008
Lesson Plan – Session 1

Introduction
• Internet, Web 2.0, Tools, Technology,
Languages
• Browsers
• Web 2.0

Web Page Layout and Construction
• Introduction to XHTML
• Cascading Style Sheets (CSS)
Internet Application Programming, June 2008
2
Lesson Plan – Session 2

Client-Side Programming
• JavaScript
• Literals, Variables, Expressions, Control Statements,
Functions, Arrays, Objects
• Document Object Model (DOM)
• Objects and Collections
• JavaScript Events
• Event & Handlers
• Introduction to AJAX Concepts
• XMLHttpRequest
• Google Maps API
June
2008
Internet Application
Programming,
June 2008
3
Brief History




ARPANET (DOD project to connect
networks) 1969
Switch to internet protocols 1982
First external connections 1992
World Wide Web 1993
• First Browser, Mosaic, (Marc Andreessen)
• World Wide Web Consortium (W3C) 1994

Prohibition on commercial use of internet
dropped 1995
Internet Application Programming, June 2008
4
Development of Web Content

Earliest web sites displayed static information
• Only user interaction was navigation

Basic Interaction
• User sends data to server where new page is
constructed and delivered to client

Dynamic Pages
• Scripting for actions within browser
• AJAX allows pages that behave much like
local applications
Internet Application Programming, June 2008
5
Web 2.0


Users control of content and organization
Elements
• Search
• Google, Yahoo!, MSN, …
• Content Networks (Aggregators)
• About.com, eHow, LifeTips, …
• User-Generated Content
• Wikis, Collaborative filtering, Craigslist
• Blogging
Internet Application Programming, June 2008
6
Web 2.0 (2)

Social Networking
• MySpace, Facebook, Friendster, LinkedIn, …

Social Media
• YouTube, Internet TV, Digg, Podcasting, …

Tagging
• Tag Clouds, Flickr

Social Bookmarking
• Del.icio.us, Ma.gnolia
Internet Application Programming, June 2008
7
Rich Internet Applications (RIAs)






Ajax, Dojo toolkit
Adobe Flex, Microsoft Silverlight, JavaFx
Ruby on Rails
Script.aculo.us
JavaServer Faces
ASP.NET Ajax
Internet Application Programming, June 2008
8
Combining Elements

Web Services
• Make data or processing elements available

Mashups
• Combine elements from a variety of web
sources

Widgets & Gadgets
• Mini applications that run alone or as part of
larger application
Internet Application Programming, June 2008
9
Business Issues

Monetization Models
• How to collect money (often without actually
selling something)
• Much is advertising based

Business Models
• Beyond selling products
Internet Application Programming, June 2008
10
Future



Content for mobile devices
Location Based Services
Semantic Web
Internet Application Programming, June 2008
11
Web Page Development

Originally HyperText Markup Language =
HTML
• Describes content and style but not layout
details

Now Extensible HTML = XHTML
• W3C Standard
• Specifies content and structure
• Limited formatting features
• Extensive formatting capability provided by CSS
Internet Application Programming, June 2008
12
Validation Service

Validate structure of a document
• http://validator.w3.org
• Can specify a
• url to validate
• Upload a file to validate
Internet Application Programming, June 2008
13
XHTML Format


Free form, plain text
Content
• Text (direct) and links (indirect)

Tags
• Specify structure and some display
characteristics
• Start with <xxx>, End with </xx>
• Self-contained use <xx />
Internet Application Programming, June 2008
14
Basic Components





Headers
Links
Images
Special characters (entities) and line breaks
Lists
• Unordered (bullets), Ordered (numbered),
Nested


Tables
Forms
Internet Application Programming, June 2008
15
Examples

Ex 4.1
•
•
•
•
•

<?xml …>
<html>
<head>
<body>
<p> paragraph
Ex 4.2
• <h1>, … <h6> headings
Internet Application Programming, June 2008
16
Examples

Ex 4.3
• Links to other web pages
• <a href=http:// …>
• href can be any url
• Email with mailto:[email protected]

Ex 4.5 – Images
• <img src=url …alt=descr>
• Resize with height and width attributes

Ex 4.6 – Combining images and navigation
Internet Application Programming, June 2008
17
Special Characters and Line Breaks

Special characters
• Often used when character has special xhtml
meaning or is not on keyboard
• Coded &xx; or &#nn (decimal) or &#xhh (hex)
• Examples: &lt; &gt; &nbsp; &amp;
• Horizontal line with <hr />
• Line break forced by
• End of header
• Paragraph <p>
• Line break tag <br />
Internet Application Programming, June 2008
18
Font Styling

Additional tags control font and appearance
to text
• Bold <strong>
• Strikethrough <del>
• Subscript <sub>, Superscript <sup>

Ex. 4.7
Internet Application Programming, June 2008
19
Lists

Unordered with <ul>
Ordered with <ol>
List item with <li>
Can be nested

Ex. 4.8 & 4.9



Internet Application Programming, June 2008
20
Tables

Many attributes for size and layout
• <table table_attributes>

Contain rows and columns of cells <tr>, <td>
• Cells for columns are nested in rows
• Table can also contain header and footer
• <thead>, <tfoot>; use <th> instead of <td> here
• caption above <caption>
• Features:
• Ex 4.10
Internet Application Programming, June 2008
21
Tables (2)

Rectangular group of cells can be treated as
a single cell
• Attributes rowspan and colspan

Ex 4.11
Internet Application Programming, June 2008
22
Forms

Collect user information
• May be processed
• on client with script
• sent to server application for processing
• Processing on serer



Specify display items and fields by name
Specify how data will be processed
Ex 4.11
Internet Application Programming, June 2008
23
More Form Features

Forms can contain
•
•
•
•
•
•

Text area
Checkbox
Reset button
Hidden fields
Radio buttons
Menus
Example4.13
Internet Application Programming, June 2008
24
Internal Links and Meta Elements

Internal links take you to a specific part of the
page
• Useful for long pages

Ex 4.14

meta Elements
• Provide information about page
• Used by search engines

Ex 4.15
Internet Application Programming, June 2008
25
Cascading Style Sheets



Allow detailed formatting of web pages
Provide separation of structure from
presentation (format)
Inline Style
• Included directly in XHTML document
• More limited capability
Internet Application Programming, June 2008
26
Inline Styles


“style” attribute can be added to many tags
Can alter characteristics such as
• Font-size, usually specified in points
• Font
• Color
• Name
• Hexadecimal number #rrbbgg
Internet Application Programming, June 2008
27
Inline Styles (2)

Style is a quoted string with a series of
elements of the form
• Element_name: value1, value2, …
• Separated by ;

Ex 5.1
Internet Application Programming, June 2008
28
Embedded Style Sheet


Include style sheet information in same page
<style type=“text/css”>
Style sheet elements
</style>

Elements redefine styles or create new ones
• name { def }
• Def has same form as inline style
Internet Application Programming, June 2008
29
Example Embedded Style Sheet


Ex 5.3
Properties
• font-family: font, modifier
• Font = arial, times new roman, …
• Modifier = sans serif
• background color
• font-size
• Symbolic or numeric pt size

Classes specified as .name
• Can be applied in any context
Internet Application Programming, June 2008
30
Style Classes and Scope

Style in inherited
• applies to all nested elements


Explicit style of nested components can
override style from ancestors
Styles may specify a series of tags, applying
only in that context
“ul ul” applies in a sublist
“h1, h2” applies to both h1 and h2

st:pseudo allows redefining pseudoclass
Internet Application Programming, June 2008
31
Style Inheritance

Ex 5.3
• a.nodec applies to link class that has defined
attribute nodec
• a:hover defines changed appearance when
mouse is over item
Internet Application Programming, June 2008
32
External Style Sheets

File with extension .css contains style
definitions
• Ex 5.4

Document file link to style sheet
<link rel = “stylesheet” type “text/css”
href = “styles.css” />
• Ex 5.5
Internet Application Programming, June 2008
33
Validation

CSS validator for external stylesheets is at
http://jigsaw.w3.ofg/css-validator
Internet Application Programming, June 2008
34
Positioning Elements

Property position
• absolute for position relative to top left corner
= (0,0)
• Size is often in px, pixels
• Relative to top, bottom, left, right
• z-index specifies overlay order for overlapping
items
• 1 is lowest

Ex 5.6
Internet Application Programming, June 2008
35
Relative Positioning

Shift position with
position: relative


span tag specifies range for application of a
style
Ex 5.7
Internet Application Programming, June 2008
36
Other Features

Backgrounds
• Ex 5.8

Element dimensions
• Ex 5.9

Floating elements and text flow
• Ex 5.10

Borders
• Ex 5.11 & 5.12
Internet Application Programming, June 2008
37
Media Types

Can define different styles for different media
• Screen, handheld, Braille, aural, print


Ex 5.13
Ex 5.14 – Building a drop-down menu with
CSS
Internet Application Programming, June 2008
38