Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Session_1 - FAU College of Engineering
Document related concepts
no text concepts found
Transcript
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: < > & • 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
