Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web-based Application Development Lecture 3 Anita Raja Agenda Introduction to the Internet (concluded) Planning a Web Site PTW Chapter 1 WWS Chapter 1 Creating a Basic Web Page PTW Chapter 2 Basic Services FTP – File Transfer Protocol (sftp) TELNET (ssh) Connect to remote computer as if a local user Early 70’s Ray Tomlinson Moves files from computer to computer Hacked FTP to pass messages to users E-Mail was born World-wide use of Internet The other reason for explosion in use of Internet is due to… Basic Services Timothy Berners-Lee 1989 Trying to share documents between research groups at CERN Hypertext Markup language – formatting Transfer protocol – send/receive marked-up document Basic Services HTML – Hypertext Markup Language HTTP – Hypertext Transfer Protocol Browser W W W – World Wide Web Basic Services First browsers were text-based 1993 @ U. Illinois, MOSAIC created GUI Browser – Graphical User Interface Mosaic Netscape Client-Server Computing Client Server Web page access Document is delivered at the client Comm. Connection is broken after document arrives at client • 1981 • Intel 8088 • 4.77 MHz • 16 - 64 KB RAM • 160KB floppy drives (1 or 2) • $4,000 IBM PC Model 5150 PC Comparison 1981 2003 % Change Speed 4.77 MHz 2GHz +41,929% RAM 16KB 128MB +800,000% Storage 160KB 40GB +25,000% Cost $4,000 $690 - 580% Other Comparisons 1903 (1981) +24 1927 (2005) +87 1990 (2068) The Web Wizard’s Guide to Web Design Chapter 1 Planning a Web Site Identifying the Audience Who is more important? Designer Audience Successful design meets the needs of the audience, not the designer! Users. Who are they? Why are they here? What are they looking for? How do they think? Identifying the Audience The sponsor is not the audience! The customer is the audience No customer = site’s purpose unfulfilled Identifying the Audience Possible design approaches: Organization-centered Technology-centered Organization’s point of view Public perception? If you’ve got it, flaunt it Does the technology serve the needs of the site? User-centered Target audience Identifying the Audience Define the audience Study them What do they need? How do they think? Develop site Use technologies to support purpose So visitors can understand and use Identifying the Audience Ways to define audience - demographics Age Gender Geography/Residence Income Education Race/Ethnicity Interest (Web) History Identifying the Audience Steps to define audience: Picture them at the computer Who are they? Range of ages Gender Income Why are they here? How did they get here? Do they have a history with this organization? Are there common characteristics? Determining Site’s Purpose What Why What will visitors do at the site? Why do they want to do it? Why would they want to do it here and not somewhere else? Definition serves both customer and organization needs Determining Site’s Purpose Organization’s Needs Customer’s Needs Provide services Consume services Inform potential customers about the organization Find out what resources are available Determining Site’s Purpose Look at the verbs: Increase sales Purchase an item Communicate the mission Determining Site’s Purpose Goals (strategic view) Objectives (tactical view) Long-term Organization-centered (usually) Specific means by which goals will be accomplished User-centered (usually) Many Web sites serve a variety of purposes Understand them from the beginning Determining Site’s Purpose How does success look? Always provide a means to measure the success of the site Specify these criteria from the beginning What means will be used? How will they be quantified? Planning the Structure “Form follows function” Design the functions first, the form will follow naturally Flow Chart How the subdivisions work or are organized Statement of functions The purpose each subdivision serves Each subdivision serves a unique purpose (What happens if this concept is violated?) Planning the Structure Avoid meaningless generalities Be concrete Be detailed Use action verbs Consider user’s perspective Planning the Structure Specifications Filename Text Images Links Menus Possibilities of the Web Text Efficient means of transferring information Screen not as comfortable as the printed page Hypertext How will your site use links? For navigation? To access content? How will the links be represented? Possibilities of the Web Images Most frequently used after text Content (the image is the message) Navigation Icons (represent an idea) Limited by bandwidth Measures rate at which data moves between points Possibilities of the Web Multimedia Animation Sound Video Virtual Reality http://www.virtualgettysburg.com/vg/panoramas/multi_node.html Interactivity The user is not passive! Assignment Hands-On Exercise, p. 30 Choose a Web site. Using the first two bullets as a guide: Describe the audience of the site Create a statement of purpose for the site Analyze the site: Did the site define the audience well or not? What is its purpose? Is it clear? What is your evidence? In addition to your analysis, turn in a hardcopy of any relevant pages from the site you selected. Programming the Web using XHTML and JavaScript Chapter 2 Creating a Basic Web Page The HTML Source Document “Surfing” Click hyperlink Browser requests document from server Server returns document requested Browser displays document The HTML Source Document Document contains HTML source code Describes content and layout of Web page Content: what to display Layout: How it will look How it will behave The HTML Source Document HTML documents are text-only What you’d see on a keyboard Layout specified by “elements” or “tags” Specify the structure of the page Classify the contents “This content is a heading” “This content is just some text” The HTML Source Document Heading tags <h1>Some text goes here</h1> 1–6 Most important – least important Ch02-Ex-01 Paragraph tag <p>The paragraph goes here</p> Ch02-Ex-02 The HTML Source Document Tag structure of Web pages HTML tags <html>The entire Web page goes here</html> The HTML Source Document Head tags <head>The head goes here</head> Special information goes in the head section <title>The page title goes here</title> Body tags <body>The body goes here</body> The page content goes in the body section The HTML Source Document <html> <head> <title>Page Title</title> </head> <body> Page content goes here </body> </html> The HTML Source Document Ch02-Ex-03 The HTML Source Document Use plain-text editors (Notepad) Filename.htm (or .html) Other types of editors (like MS WORD) use hidden formatting codes No spaces (underscore character instead) Enclose in quotes when using Notepad File – Open … Drag icon into open browser window HTML, XML, and XHTML Writing HTML code: Indent Nest properly HTML, XML, and XHTML Correct Incorrect <head> <title>Chapter 2</title> </head> <head> <title>Chapter 2 </head> </title> HTML, XML, and XHTML Browsers: Evaluate from the top down Ignore whitespace Tabs, extra spaces, line breaks Make your HTML code easily read by humans Ch02-Ex-03 but without human formatting Does HTML code have to be lower case? HTML, XML, and XHTML Browsers developed along diverging paths Netscape Explorer Features were added – not always in the same way 1994 - W3C created Create an “official” version of HTML HTML, XML, and XHTML PCs – not much of a problem Handheld devices – HUGE problem Need: A standardized version of HTML Compatible with all types of devices PCs, handhelds, others? HTML development stopped at V4 HTML, XML, and XHTML XML – Extensible Markup Language Specifies a universal, structured format Data is classified by its meaning Users could create custom tags Car dealer: <make> <model> <year> Very strict syntax rules ensure universality Case matters! HTML, XML, and XHTML XHTML – Extensible HTML Official release January 2000 XHTML is not XML but it is based on XML Inherits rules and benefits of XML Thus, XHTML is case-sensitive: <body> ≠ <BODY> ≠ <Body> ≠ <BoDy> Why? HTML, XML, and XHTML Exceptions imply complexity Software cannot be written simply It must account for each exception individually Programs must therefore be larger and more difficult to maintain Complexity requires Additional processing (slower) an More memory (larger and more expensive) HTML, XML, and XHTML How to make HTML into XHTML? Before <html> add: <?xml version=“1.0”> <!DOCTYPE html PUBLIC ¬ “-//W3C//DTD XHTML 1.0 Transitional//EN” ¬ http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd> 1st line: XML Declaration 2nd line: Document Type Definition HTML, XML, and XHTML Also, change <html> tag itself: <html xmlns=“http://www.w3.org/1999/xhtml”> XML namespace “Tags defined in this document conform to the W3C definitions found at ...” Start using the new standards NOW Ch02-Ex-04 HTML, XML, and XHTML <meta> tag describes document content Useful for search engines Optional, goes in <head> section Attributes: Name: “keywords”, “description” Content <meta name=“keywords” content=“coffee, tea, imported” /> Paragraphs and Line Breaks Can’t use whitespace to format document HTML uses elements (tags) and only elements to define document’s structure Paragraph tag <p> Classifies a block of text as a paragraph Preceded and followed by a blank line (usually) Can add other attributes (Chapter 3) Paragraphs and Line Breaks Break tag <br> Generates a line break Without inserting a blank line like the <p> tag. “Empty” tag – no </br> needed <br /> instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05