June 2008 Florida Atlantic University Department of Computer Science & Engineering ISM 4052 –Internet Application Programming Dr. Roy Levow Session 1

Internet Application Programming, June 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 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 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 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 Development of Web Content

Internet Application Programming, June 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 Web 2.0

Internet Application Programming, June Social Networking MySpace, Facebook, Friendster, LinkedIn, … Social Media YouTube, Internet TV, Digg, Podcasting, … Tagging Tag Clouds, Flickr Social Bookmarking Del.icio.us, Ma.gnolia Web 2.0 (2)

Internet Application Programming, June Ajax, Dojo toolkit Adobe Flex, Microsoft Silverlight, JavaFx Ruby on Rails Script.aculo.us JavaServer Faces ASP.NET Ajax Rich Internet Applications (RIAs)

Internet Application Programming, June 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 Combining Elements

Internet Application Programming, June Monetization Models How to collect money (often without actually selling something) Much is advertising based Business Models Beyond selling products Business Issues

Internet Application Programming, June Content for mobile devices Location Based Services Semantic Web Future

Internet Application Programming, June 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 Web Page Development

Internet Application Programming, June Validate structure of a document Can specify a url to validate Upload a file to validate Validation Service

Internet Application Programming, June Free form, plain text Content Text (direct) and links (indirect) Tags Specify structure and some display characteristics Start with, End with Self-contained use XHTML Format

Internet Application Programming, June Headers Links Images Special characters (entities) and line breaks Lists Unordered (bullets), Ordered (numbered), Nested Tables Forms Basic Components

Internet Application Programming, June Ex 4.1 paragraph Ex 4.2, … headings Examples

Internet Application Programming, June Ex 4.3 Links to other web pages href can be any url with Ex 4.5 – Images Resize with height and width attributes Ex 4.6 – Combining images and navigation Examples

Internet Application Programming, June Special characters Often used when character has special xhtml meaning or is not on keyboard Coded &xx; or &#nn (decimal) or &#xhh (hex) Examples: < > & Horizontal line with Line break forced by End of header Paragraph Line break tag Special Characters and Line Breaks

Internet Application Programming, June Additional tags control font and appearance to text Bold Strikethrough Subscript, Superscript Ex. 4.7 Font Styling

Internet Application Programming, June Unordered with Ordered with List item with Can be nested Ex. 4.8 & 4.9 Lists

Internet Application Programming, June Many attributes for size and layout Contain rows and columns of cells, Cells for columns are nested in rows Table can also contain header and footer, ; use instead of here caption above Features: Ex 4.10 Tables

Internet Application Programming, June Rectangular group of cells can be treated as a single cell Attributes rowspan and colspan Ex 4.11 Tables (2)

Internet Application Programming, June 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 Forms

Internet Application Programming, June Forms can contain Text area Checkbox Reset button Hidden fields Radio buttons Menus Example4.13 More Form Features

Internet Application Programming, June 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 Internal Links and Meta Elements

Internet Application Programming, June Allow detailed formatting of web pages Provide separation of structure from presentation (format) Inline Style Included directly in XHTML document More limited capability Cascading Style Sheets

Internet Application Programming, June 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 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 Embedded Style Sheet Include style sheet information in same page Style sheet elements Elements redefine styles or create new ones name { def } Def has same form as inline style

Internet Application Programming, June 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 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 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 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 Validation CSS validator for external stylesheets is at

Internet Application Programming, June 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 Relative Positioning Shift position with position: relative span tag specifies range for application of a style Ex 5.7

Internet Application Programming, June 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 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 Media Types