1、Introduction to Web Technologies for Effective Dissemination of Information 13 November 2000 SIGAda 2000,Mr. Currie Colket SIGAda Vice Chair for Meetings and Conferences Phone: (703) 883-7381; Email: colketmitre.org | colketacm.org Dr. John McCormick SIGAda Secretary Phone: (319) 273-2618; Email: mc
2、cormiccs.uni.edu | SIGAda_Secretaryacm.orgMr. David A. Wheeler Institute for Defense Analyses Phone: (703) 845-6662; Email: dwheelerida.org | Mr. Clyde Roby Institute for Defense Analyses Phone: (703) 845-6666; Email: robyida.org,SIGAda Home Page http:/www.acm.org/sigada,Motivation,This tutorial is
3、designed for the SIGAda volunteer interested in using WWW technologies to promote Local activities and Working Group activities. At the end of this tutorial, you will be able to:Use simple web-authoring toolsDevelop your own Home PageTailor it to effectively communicate to your audienceEstablish Hom
4、e Page on ACM hostUse simple web-posting toolsUse simple web-verification toolsEstablish maillists for your activity,Overview,Introduction to WWW and SIGAda Home Page as Notional Example (John McCormick 20 minutes)Introduction to HTML and use of Netscape Composer (Currie Colket 90 minutes)Effective
5、Design Strategies Appropriate to Disseminating Information(Clyde Roby 30 minutes)Tools to Manage Development of Web Pages(Clyde Roby 40 minutes)Introduction to Ada CGI (David A. Wheeler 90 minutes)Using ACM WWW and Maillist Facilities (John McCormick 60 minutes)Introduction to XML (Currie Colket 30
6、minutes),Start: 8:30 Break: 10:00 Lunch: 12:00 Back: 1:30 Break: 3:00 End: 5:00,Introduction to SIGAda Home Page as Notional Example,John McCormick SIGAda Secretary,SIGAda Home Page - 1,SIGAda Home Page - 2,SIGAda Home Page - 3,SIGAda Home Page - 4,SIGAda Home Page - 5,SIGAda Home Page - 6,SIGAda Ho
7、me Page - 7,Introduction to HTML and use of Netscape Composer,Currie Colket MITRE SIGAda Vice Chair for Meetings and Conferences,Introduction to HTML,HTML BasicsFonts; Colors; Bold; ItalicsCreating ListsCreating Links to URLsCreating Anchors/TargetsCreating Relative LinksCreating Mailto LinksIncorpo
8、rating ImagesPutting Code On-lineForms Using the HTML Netscape Composer (a WYSIWYG)Creating Tables,Motivation for Knowing HTML,Many WYSIWYG Tools- Why Learn HTML?Output of tools is not always portableSome use advanced features of HTMLSome use non-standard extensions of HTMLSome tools generate XML in
9、stead of HTMLBrowsers typically omit information not understoodMany browsers cant handle XMLTools can not always support desired goalsOccasionally cleanup of HTML code is requiredPorting from one tool to anotherEliminate garbage automatically generatedStrengthens understanding of WWW capabilitiesUnd
10、erstanding HTML is good foundation for XML,What is HTML,Lingua franca for publishing hypertext on the World Wide WebNon-proprietary format based upon SGMLCreated and processed by a wide range of toolsfrom simple plain text editors to sophisticated WYSIWYG authoring toolsUses tags such as and to stru
11、cture text for PresentationBrowsers attempt to produce page even when there are errorsProduced by W3C as recommendation; voted on by Consortium members http:/www.w3.org/MarkUp/Status: Version 4.01 is current recommendation, replacing Version 3.2Support for Style Sheets - Control color, font, and lay
12、outInternationalization Features - text right to left (Hebrew & Arabic)Accessibility Features - Braille and speech synthesizersTables and Forms - many new featuresScripting and Multimedia - many new features3 Flavors of HTML:Transitional - take some advantage of 4.0, but primarily support 3.2Strict
13、- use style sheets, i.e., free of tags associated with layoutFrameset - used to partition browser into one or more frames,HTML Basics,HTML: HyperText Markup Language is Semantic Markupphysical: indent 1.0”, Use 24-Point Roman Font, Print “Hello”semantic: Hello uses markup tagsPhysical is WYSIWYG; HT
14、ML will differ on each systemDesigned to be extensible, in fact, still evolvingUses HyperText Transport Protocol (HTTP)Tag names are case insensitiveHTML Program Structure:,Some Tags have attributesText is continuous regardless of spaces/CRMost Tags in pairs; solo:Paragraph BreakLine BreakHorizontal
15、 Rule,Fonts; Colors; Bold; Italics, Highlighting HTML Characters can be highlighted using Boldfaced, Big and Bigger text, Italicized text, Strike-through Text,Small and Smaller text, with Subscripts and Superscripts, with Typewriter font and even underlining for emphasis. There is also a concept of
16、Logical Highlighting using Strongly Emphasized Text, Computer Code Text, Keyboard Character Text, Literal Character Text, Defining Instance Text, Emphasized Text, Variable Text, Strike-out Text. SIGAdaWWW TutorialSunday, 7:30 - 11:30 PM,Creating Lists, List Example The 3 most important things in rea
17、l estate are: Ordered ListsLocation,Location, and Location (It should be noted that all lists will wrap around with the correct indentation desired for the screen.The most important things in talking about software are: UnOrdered ListsUsing Bullets CorrectlyUsing Plenty of Bullets, andUsing Subordin
18、ate Bullets When NecessaryWith LettersAgain with LettersWith Small Roman Numerals With Large Roman NumeralsWith Numbers Even With Numbers Out of Sequence ,Creating Links to URLs - 1, Link Example The following URLs contain useful information on using html:W3C HTML Home Page - http:/www.w3.org/MarkUp
19、/W3C User Interface Domain - http:/www.w3.org/MarkUp/Activity.htmlHTML Quick Reference - http:/www.cc.ukans.edu/acs/docs/other/HTML_quick.shtmlThe Bare Bones Guide to HTML - http:/ HTML Documents - http:/www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-htmlinfo.htmlHTML Primers and Tutorials - http:/ L
20、atin 1 Character Entities and HTML Escape Sequence Table - http:/ Index of HTML Tags - http:/ URL, and HTTP Technical Information and Specifications - http:/www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-tech.htmlYahoo HTML Search Node - http:/ ,Creating Links to URLs - 2,Creating Anchors/Targets,Anc
21、hors/Targets ExampleAnchors/Targets Example Navigation: Email Addresses | News | Weather Email AddressesPelot Email Addresses Colket Email Addresses Colcord Email Addresses News News stuff Weather Weather Stuff ,Creating Relative Links,Useful for Program DevelopmentFile on local system has same rela
22、tive name as file on remote systemSwitch from one system to other with simple click,Relative Link ExampleNavigation: To www.colket.org | To C Drive Technology Resources: Acronyms | Ada | Conferences | HTML | Internet | Java | OO | Reuse | Email Addresses ,Creating Mailto Links,Mailto Example Mailto
23、Example Please email comments on this course toCurrie, Brad, Clyde, and JohnCurrie Colket (colketacm.org) ,is equivalent to “Currie Colket” ,Incorporating Images, Image Example ASIS is an interface between an Ada environment as defined by ISO/IEC 8652:1995 (the Ada Reference Manual) and any tool req
24、uiring information from this environment, as shown below:ASIS as interface to Ada compilation environment ,Above image made in PowerPoint by:Creating image; cutting it from pageUsing Page Setup, selecting landscape, 3”x5”Pasting image onto page; aligning it to centerSaving as gif (or jpeg) Obtaining
25、 size using Photo Editor Resize function,Size is important; allows for building page sans imagesALT for browsers without graphics or browsers turned off,Bad Form,Better Form,Good Form,Putting Code On-line, Code Example EXAMPLE: Loop iteration schemeList : constant Asis.Element_List := - 3.7,Use for
26、large blocks of code For Preformatted text Characters in fixed width Preserves space characters, CR Allows for character emphasis Anchors and text highlighting tags only,Forms - 1, Form Example Last Name: First Name: Address Line 1: Address Line 2: City: State: DCMDVAZip: Area Code: Phone: E-mail: V
27、olunteer Interests:ProgramPublicityLocal Arrangements(Multiple items can be selected.)Ada Awareness Initiative: YesNoMaybe (Only one item can be selected.)Enter any special comments you might have here.,Action,Text Input,Checkboxes,Radios,Text Areas,Submit/Reset,Text Options,Forms - 2,Forms - 3, Ema
28、il = Subject: Form posted from Mozilla Lastname=Colket&Firstname=Currie&Address1=9906+Dale+Ridge+Court&Address2=&City=Vienna&State=VA&Zip=22181-5348&Area_Code=703&Phone=883-7381&Email=colket%40acm.org&Interests=Program&Ada_awareness=Yes&Special_Notes=This+is+a+demonstration+of+posting+forms.+Notice+
29、how+the+text+automatically+wraps+around+as+the+information+is+typed.%0D%0A+&sub=Send+FormUse Ada95 bindings to CGI to automatically process form. Automatically confirm submission of formAutomatically update databasePerform other analysis of submitted information,David Wheeler will address Ada95 Bind
30、ings to CGI,Netscape returns as attachment Type: application/x-www-form-urlencoded Others return in different formats.,Using the HTML ,TITLE (Only required Element)Used as name for Bookmarks (those 60 are blank)Used to label display window or text screenUsed by browsers as quick index mechanismExamp
31、le: ACM SIGAda Home Page META (Optional - But highly recommended)Used for Meta information not explicitly defined elsewhere, Examples:BASE (Optional & NOT Recommended)Used for recording the base URL of the documentPrevents relative links from developmental environmentsRecorded as URL in Bookmarks in
32、stead of actual URL Example: ,Netscape Composer,Creating Tables,Effective Design Strategies Appropriate to Disseminating Information,Clyde Roby IDA,Note: Originally developed by Brad Balfour of Objective Interface,This Section: Concept and Goals,Main Goal: To help understand the many ways that the W
33、WW can be used to communicate information Secondary Goal: To help new “designers” to effectively choose appropriate techniques from among the many that the web provides Technique: Descriptive rather than Prescriptive Present a series of questions to be asked in order to decide what structure and tec
34、hniques to use to build the web pages (web site) Also will present a list of “rules” (both the commonly agreed upon and the controversial),Building A Collection of Web Pages Things to Think About,The AudienceWays the Audience Gets Info and Gets Notified of ChangesFrequency of Browsing by AudienceWhy
35、 Does the Audience Need Your SiteWhat Makes the Site AttractiveKinds of SitesTypes of Information ProvidedOrganizing the InformationTypes of ContentDesign Tips/“Rules”,The Audience,Who are they? What do they need? What do they want? How experienced are they? What do they already know? What do they w
36、ant to find out? How similar are they to the webmaster? How different are they from the webmaster? Are they using modern browsers on fast machines? Are their graphics enabled?,Ways the Audience Gets Info and Gets Notified of Changes,Push versus Pull Site Info Push versus Pull Change Notification Int
37、errupt versus Polling Most web sites are pull only and have no push content Not even for notification of changes/updates/new info Browsing oriented site info organization Search oriented site info organization “Channels” E-mail notification plus Web-Site Print “Ads” notification of web-site (or TV),
38、Frequency of Browsing by Audience,Multiple Times a Day Daily Weekly Monthly When Notified Only when first found Or found via a search engine Or found via a link to the site from the outside When ready to purchase Reference Only (based on external need for info),Why Does the Audience Need Your Site,U
39、niqueness? Timeliness? Loyalty? Membership? Who is your Competition? Within SIGAda Within Ada Community Within ACM Within the community of programming languages With the software development community,What Makes the Site Attractive,Content? Look and Feel? Responsiveness? Satisfying the Audiences nee
40、d? How much is too much? How much is too little? Issues: Connection Speed (everyone focuses on this) Form versus Content (is it “versus”?) Uniqueness versus Sameness Freshness of content and form,Kinds of Sites,Informational e.g., medicine, academia, most .org News e.g., CNN, MSNBC, ESPN Product/Ser
41、vice Oriented (Sales secondary via ads) e.g., Kelly Blue Book Sales/Selling Oriented e.g., “catalog” ordering, Ford, most product companies Organizational - Member Oriented e.g., info to members only or predominately Organizational - Outreach Oriented e.g., get new members to join based on info,Type
42、s of Information Provided (SIGAda specific),Technical info Copies of printed publications Software (source code and/or executables) Papers Data on experiences/results Membership info Organizational infrastructure (e.g., meeting minutes, org. structure, motions, charter, etc) Historical info (e.g., p
43、ast e-mail list traffic archive, conference results) Contact info Links to other sites,Organizing the Information,Types: Linear Hierarchy Graph (DAG) Random Depth of Links Breadth of Links What is the relationship between the contents What do people need to find? What do they know when they want to
44、find it? Search oriented users versus Browsing users,Types of Content,Text Graphics Multimedia Video Sound Stored Documents Ftp Served Interactively (format: PDF, PS, text) Software Source Executable Browsed on-line (hyperlinked) Downloaded,Steak versus Sizzle Content versus Presentation Competition
45、 General overall Level of “Professionalism” Native to the browser versus needs plug-in Use of JavaScript Use of Java Use of cgi,Design Tips/“Rules”,Commonly Agreed Upon No blinking text KISS Dont overwhelm with graphics Navigate with text instead of/in addition to any image maps (unless the navigati
46、on is truly graphical like a map) Make the organization obvious (and help show users where they are at all times) Keep links & site up to date,Controversial (like Multiple Inheritance)Frames All sites must be fast to download Whats the connection speed of your users (home versus work),Tools to Manag
47、e Development of Web Pages,Clyde Roby IDA robyida.org,Goal and Concepts,Goal: Development, Management, and Update of a Web Site (many web pages) Development and Organization Management Updating the Web Site Fixing the Web Site Tools to do the Job An Example: The ASIS Web Site,Web Development,Local D
48、evelopment of Web Pages Development of Informational Materials Moving Your Web Pages to the Web Site,Web Management,Who Comes to the Web Site? What do they Visit on the Web Site? How Often do they Visit/Return? How do they Retrieve/Use the Information? Why do they Visit the Web Site?,Updating the We
49、b Site,Local Update of Web Pages Updating of Informational Materials Updating Pages on the Web Site,Fixing the Web Site,Broken Links Wrong Information Outdated Information ISP Problems Notification to the Webmaster,WWW Tools,Tools to Develop the Web Site Tools to Manage the Web Site Tools to Update the Web Site Tools to Find and Fix the Problems,
