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

2. Internet Application Programming, June 2008 2 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)

3. Internet Application Programming, June 2008 3 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

4. Internet Application Programming, June 2008 4 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

5. Internet Application Programming, June 2008 5 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

6. Internet Application Programming, June 2008 6 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

7. Internet Application Programming, June 2008 7 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)

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

9. Internet Application Programming, June 2008 9 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

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

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

12. Internet Application Programming, June 2008 12 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

13. Internet Application Programming, June 2008 13 Validate structure of a document http://validator.w3.org Can specify a url to validate Upload a file to validate Validation Service

14. Internet Application Programming, June 2008 14 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

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

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

17. Internet Application Programming, June 2008 17 Ex 4.3 Links to other web pages href can be any url Email with mailto:user@d.nmailto:user@d.n Ex 4.5 – Images Resize with height and width attributes Ex 4.6 – Combining images and navigation Examples

18. Internet Application Programming, June 2008 18 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

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

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

21. Internet Application Programming, June 2008 21 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

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

23. Internet Application Programming, June 2008 23 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

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

25. Internet Application Programming, June 2008 25 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

26. Internet Application Programming, June 2008 26 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

27. Internet Application Programming, June 2008 27 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

28. Internet Application Programming, June 2008 28 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

29. Internet Application Programming, June 2008 29 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

30. Internet Application Programming, June 2008 30 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

31. Internet Application Programming, June 2008 31 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

32. Internet Application Programming, June 2008 32 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

33. Internet Application Programming, June 2008 33 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

34. Internet Application Programming, June 2008 34 Validation CSS validator for external stylesheets is at http://jigsaw.w3.ofg/css-validator

35. Internet Application Programming, June 2008 35 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

36. Internet Application Programming, June 2008 36 Relative Positioning Shift position with position: relative span tag specifies range for application of a style Ex 5.7

37. Internet Application Programming, June 2008 37 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

38. Internet Application Programming, June 2008 38 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