1 / 38

June 2008

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

chanel
Télécharger la présentation

June 2008

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Florida Atlantic UniversityDepartment of Computer Science & Engineering ISM 4052 –Internet Application Programming Dr. Roy Levow Session 1 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. 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. 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. 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

  6. 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

  7. 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

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

  9. 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

  10. Business Issues • Monetization Models • How to collect money (often without actually selling something) • Much is advertising based • Business Models • Beyond selling products

  11. Future • Content for mobile devices • Location Based Services • Semantic Web

  12. 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

  13. Validation Service • Validate structure of a document • http://validator.w3.org • Can specify a • url to validate • Upload a file to validate

  14. 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 />

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

  16. Examples • Ex 4.1 • <?xml …> • <html> • <head> • <body> • <p> paragraph • Ex 4.2 • <h1>, … <h6> headings

  17. Examples • Ex 4.3 • Links to other web pages • <a href=http:// …> • href can be any url • Email with mailto:user@d.n • Ex 4.5 – Images • <img src=url …alt=descr> • Resize with height and width attributes • Ex 4.6 – Combining images and navigation

  18. 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 />

  19. Font Styling • Additional tags control font and appearance to text • Bold <strong> • Strikethrough <del> • Subscript <sub>, Superscript <sup> • Ex. 4.7

  20. Lists • Unordered with <ul> • Ordered with <ol> • List item with <li> • Can be nested • Ex. 4.8 & 4.9

  21. 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

  22. Tables (2) • Rectangular group of cells can be treated as a single cell • Attributes rowspan and colspan • Ex 4.11

  23. 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

  24. More Form Features • Forms can contain • Text area • Checkbox • Reset button • Hidden fields • Radio buttons • Menus • Example4.13

  25. 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

  26. 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

  27. “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 Inline Styles

  28. Style is a quoted string with a series of elements of the form Element_name: value1, value2, … Separated by ; Ex 5.1 Inline Styles (2)

  29. 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 Embedded Style Sheet

  30. 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 Example Embedded Style Sheet

  31. 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 Style Classes and Scope

  32. Ex 5.3 a.nodec applies to link class that has defined attribute nodec a:hover defines changed appearance when mouse is over item Style Inheritance

  33. 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 External Style Sheets

  34. CSS validator for external stylesheets is at http://jigsaw.w3.ofg/css-validator Validation

  35. 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 Positioning Elements

  36. Shift position with position: relative span tag specifies range for application of a style Ex 5.7 Relative Positioning

  37. Backgrounds Ex 5.8 Element dimensions Ex 5.9 Floating elements and text flow Ex 5.10 Borders Ex 5.11 & 5.12 Other Features

  38. 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

More Related