Web Technologies for Effective Information Dissemination Tutorial

Introduction to Web Technologies for Effective Dissemination of Information13 November 2000SIGAda 2000 SIGAda Home Page  http://www.acm.org/sigada Mr. Currie Colket SIGAda Vice Chair for Meetings and Conferences Phone: (703) 883-7381; Email: colket@mitre.org | colket@acm.org Dr. John McCormick SIGAda Secretary Phone: (319) 273-2618; Email: mccormic@cs.uni.edu | SIGAda_Secretary@acm.org Mr. David A. Wheeler Institute for Defense Analyses Phone: (703) 845-6662; Email: dwheeler@ida.org | dwheeler@dwheeler.com Mr. Clyde Roby Institute for Defense Analyses Phone: (703) 845-6666; Email: roby@ida.org

Motivation • This tutorial is 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 tools • Develop your own Home Page • Tailor it to effectively communicate to your audience • Establish Home Page on ACM host • Use simple web-posting tools • Use simple web-verification tools • Establish 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 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 minutes) Start: 8:30 Break: 10:00 Lunch: 12:00 Back: 1:30 Break: 3:00 End: 5:00

Introduction to SIGAda Home Pageas Notional Example John McCormick SIGAda Secretary

SIGAda Home Page - 1

Introduction to HTML and use of Netscape Composer Currie Colket MITRE SIGAda Vice Chair for Meetings and Conferences

Introduction to HTML • HTML Basics • Fonts; Colors; Bold; Italics • Creating Lists • Creating Links to URLs • Creating Anchors/Targets • Creating Relative Links • Creating Mailto Links • Incorporating Images • Putting Code On-line • Forms • Using the HTML <Head> • Netscape Composer (a WYSIWYG) • Creating Tables

Motivation for Knowing HTML • Many WYSIWYG Tools- Why Learn HTML? • Output of tools is not always portable • Some use advanced features of HTML • Some use non-standard extensions of HTML • Some tools generate XML instead of HTML • Browsers typically omit information not understood • Many browsers can’t handle XML • Tools can not always support desired goals • Occasionally cleanup of HTML code is required • Porting from one tool to another • Eliminate garbage automatically generated • Strengthens understanding of WWW capabilities • Understanding HTML is good foundation for XML

What is HTML • Lingua franca for publishing hypertext on the World Wide Web • Non-proprietary format based upon SGML • Created and processed by a wide range of tools • from simple plain text editors to sophisticated WYSIWYG authoring tools • Uses tags such as <h1> and </h1> to structure text for Presentation • Browsers attempt to produce page even when there are errors • Produced by W3C as recommendation; voted on by Consortium members • http://www.w3.org/MarkUp/ • Status: Version 4.01 is current recommendation, replacing Version 3.2 • Support for Style Sheets - Control color, font, and layout • Internationalization Features - text right to left (Hebrew & Arabic) • Accessibility Features - Braille and speech synthesizers • Tables and Forms - many new features • Scripting and Multimedia - many new features • 3 Flavors of HTML: • Transitional - take some advantage of 4.0, but primarily support 3.2 • Strict - use style sheets, i.e., free of tags associated with layout • Frameset - used to partition browser into one or more frames

HTML Basics • Some Tags have attributes • Text is continuous • regardless of spaces/CR • Most Tags in pairs; solo: • <P> Paragraph Break • <Br> Line Break • <HR> Horizontal Rule HTML: HyperText Markup Language is Semantic Markup physical: indent 1.0”, Use 24-Point Roman Font, Print “Hello” semantic: <H1>Hello</H1> uses markup tags Physical is WYSIWYG; HTML will differ on each system Designed to be extensible, in fact, still evolving Uses HyperText Transport Protocol (HTTP) Tag names are case insensitive HTML Program Structure: <BODY BACKGROUND=“my_file.jpg” T EXT="#000000" LINK="#0000ff" VLINK="#ff0000" BGCOLOR="#ffffef"> <HTML> <HEAD> <Title>  </heaD> <Body>  </BODY> </HTML>

<H1> Highlighting HTML </H1> Characters can be highlighted using <B>Boldfaced</B>, <BIG>Big and <BIG>Bigger</BIG></BIG> text, <I>Italicized text</I>, <S>Strike-through Text</S>, <SMALL> Small and <SMALL> Smaller </SMALL> </SMALL> text, with <SUB>Subscripts</SUB> and <SUP>Superscripts</SUP>, with <TT>Typewriter font</TT> and even <U> underlining for emphasis. </U> <P>There is also a concept of Logical Highlighting using <STRONG>Strongly Emphasized</STRONG> Text, <CODE>Computer Code</CODE> Text, <KBD>Keyboard Character</KBD> Text, <SAMP>Literal Character</SAMP> Text, <DFN>Defining Instance</DFN> Text, <EM>Emphasized</EM> Text, <VAR>Variable</VAR> Text, <STRIKE>Strike-out</STRIKE> Text. <P><CENTER><FONT COLOR="#009900"> <FONT SIZE=+4>SIGAda</FONT></FONT> <BR><FONT COLOR="#FF0000"> <FONT SIZE=+3> WWW Tutorial</FONT></FONT> <FONT COLOR="BLUE"> <FONT SIZE=+2> <P> Sunday, 7:30 - 11:30 PM</FONT></FONT></CENTER> Fonts; Colors; Bold; Italics

<H1> List Example </H1> <P>The 3 most important things in real estate are: [Ordered Lists] <OL> <Li> Location, <Li> Location, and </Li> <Li> Location (It should be noted that all lists will wrap around with the correct indentation desired for the screen. </OL> The most important things in talking about software are: [UnOrdered Lists] <UL> <Li> Using Bullets Correctly <Li> Using Plenty of Bullets, and <Li> Using Subordinate Bullets When Necessary <OL TYPE="a"> <Li> With Letters <Li> Again with Letters <OL TYPE="i"> <Li> With Small Roman Numerals </OL> <OL TYPE="I"> <Li> With Large Roman Numerals</OL> <OL TYPE="1"> <Li> With Numbers </OL> <OL TYPE="1" START="7"> <Li> Even With Numbers Out of Sequence </OL> </OL></UL> Creating Lists

<H1> Link Example </H1> <P>The following URLs contain useful information on using html: <OL> <LI> <A HREF="http://www.w3.org/MarkUp/">W3C HTML Home Page</A> - <I>http://www.w3.org/MarkUp/</I> <LI> <A HREF="http://www.w3.org/MarkUp/Activity.html">W3C User Interface Domain</A> - <I>http://www.w3.org/MarkUp/Activity.html</I> <LI> <A HREF="http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml">HTML Quick Reference</A> - <I>http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml</I> <LI> <A HREF="http://werbach.com/barebones/">The Bare Bones Guide to HTML</A> - <I>http://werbach.com/barebones/</I> <LI> <A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-htmlinfo.html"> Creating HTML Documents</A> - <I>http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-htmlinfo.html</I> <LI> <A HREF="http://www.eclipse.net/derek/">HTML Primers and Tutorials</A> - <I>http://www.eclipse.net/derek/</I> <LI> <A HREF="http://www.bbsinc.com/symbol.html"> ISO Latin 1 Character Entities and HTML Escape Sequence Table</A> - <I>http://www.bbsinc.com/symbol.html</I> <LI> <A HREF="http://www.willcam.com/cmat/html/crossref.html">Compact Index of HTML Tags</A> - <I>http://www.willcam.com/cmat/html/crossref.html</I> <LI> <A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-tech.html"> HTML, URL, and HTTP Technical Information and Specifications</A> - <I>http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/d2-tech.html</I> <LI> <A HREF=” http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/"> Yahoo HTML Search Node</A> - <I>http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/</I> </OL> Creating Links to URLs - 1

Creating Links to URLs - 2

Creating Anchors/Targets <HTML> <HEAD> <TITLE>Anchors/Targets Example</TITLE> </HEAD> <BODY> <H1>Anchors/Targets Example</H1> <P>Navigation: <A HREF="#Email">Email Addresses</A> | <A HREF="#News">News</A> | <A HREF="#Weather">Weather</A> <Br></P> <H2><A NAME="Email">Email Addresses</H2> <UL> <LI><A HREF="email.html"> Pelot Email Addresses</A> </LI> <LI><A HREF="email.html#Colket"> Colket Email Addresses</A> <IMG SRC="gif/updated.gif" WIDTH=46 HEIGHT=11></LI> <LI><A HREF="email.html#Colcord"> Colcord Email Addresses</A> </LI> </UL> <H2><A NAME="News">News</H2> News stuff <H2><A NAME="Weather">Weather</H2> Weather Stuff </HTML>

Creating Relative Links <H1><A NAME="Top">Relative Link Example</H1> <P>Navigation: <A HREF="http://www.colket.org/"> To www.colket.org</A> | <A HREF="file:///c|/www/index.html"> To C Drive</A> <Br> </P> Technology Resources: <A HREF="acronyms.html">Acronyms</A> | <A HREF="Ada.html">Ada</A> | <A HREF="confere.html#Conferences_Future"> Conferences</A> | <A HREF="html.html">HTML</A> | <A HREF="internet.html">Internet</A> | <A HREF="java.html#Internet">Java</A> | <A HREF="OO.html#OO">OO</A> | <A HREF="Reuse.html">Reuse</A> | <A HREF="email.html">Email Addresses</A> <Br> Useful for Program Development File on local system has same relative name as file on remote system Switch from one system to other with simple click

Creating Mailto Links <HTML> <HEAD> <TITLE>Mailto Example </TITLE> </HEAD> <BODY> <H1> Mailto Example </H1> Please email comments on this course to <A HREF="mailto: "Currie Colket" <colket@acm.org>, "Brad Balfour" <bbalfour@acm.org>, "Clyde Roby" <roby@ida.org>, "John McCormick" <mccormick@nova.cs.uni.edu>" TITLE="Comments on Course"> Currie, Brad, Clyde, and John</A> <P><ADDRESS>Currie Colket <A HREF="mailto:colket@acm.org"> (colket@acm.org)</A> </ADDRESS> </BODY> </HTML> "Currie Colket"<colket@acm.org> is equivalent to “Currie Colket” <colket@acm.org>

Incorporating Images <H1> Image Example </H1> <P> ASIS is an interface between an Ada environment as defined by ISO/IEC 8652:1995 (the Ada Reference Manual) <IMG Align=bottom SRC="gif/new.gif"> and any tool requiring information from this environment, as shown below: <IMG SRC="gif/updated.gif" WIDTH=46 HEIGHT=11> <Center> <IMG SRC="gif/asis.gif" ALT="ASIS as interface to Ada compilation environment" WIDTH=488 HEIGHT=306><BR> <B>ASIS as interface to Ada compilation environment</B> </Center> Bad Form Good Form Better Form • Above image made in PowerPoint by: • Creating image; cutting it from page • Using Page Setup, selecting landscape, 3”x5” • Pasting image onto page; aligning it to center • Saving as gif (or jpeg) • Obtaining size using Photo Editor Resize function Size is important; allows for building page sans images ALT for browsers without graphics or browsers turned off

Putting Code On-line <H1> Code Example </H1> <P> EXAMPLE: Loop iteration scheme <pre> List : constant Asis.Element_List := -- 3.7 <I><ASIS function returning a list>;</I> An_Element : Asis.Element; -- 3.6 begin for I in List'Range loop An_Element := List (I); <STRONG>Process (An_Element); </STRONG>end loop; </pre> • Use <PRE> for 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 <H1> Form Example </H1> <FORM ACTION="mailto:colket@acm.org" METHOD="POST"> <B>Last Name: </B><INPUT TYPE="TEXT" MAXLENGTH="255" NAME="Lastname"> <B>First Name: </B><INPUT TYPE="TEXT" MAXLENGTH="255" NAME="Firstname"><Br> <B>Address Line 1: </B><INPUT TYPE="TEXT" MAXLENGTH="255" SIZE="50" NAME="Address1"><Br> <B>Address Line 2: </B><INPUT TYPE="TEXT" MAXLENGTH="255" SIZE="50" NAME="Address2"><Br> <B>City: </B><INPUT TYPE="TEXT" MAXLENGTH="40" NAME="City"> <B>State: </B><SELECT NAME="State" > <OPTION SELECTED> DC <OPTION> MD <OPTION> VA </SELECT> <B>Zip: </B><INPUT TYPE="TEXT" MAXLENGTH="15" NAME="Zip"> <P><B>Area Code: </B><INPUT TYPE="TEXT" MAXLENGTH="3" SIZE="3" NAME="Area_Code"> <B>Phone: </B><INPUT TYPE="TEXT" MAXLENGTH="15" NAME="Phone"> <B>E-mail: </B><INPUT TYPE="TEXT" MAXLENGTH="80" SIZE="30" NAME="Email"> <P><B>Volunteer Interests:</B> [<INPUT TYPE="checkbox" NAME="Interests" VALUE="Program" CHECKED>Program] [<INPUT TYPE="checkbox" NAME="Interests" VALUE="Publicity">Publicity] [<INPUT TYPE="checkbox" NAME="Interests" VALUE="Local">Local Arrangements] <SMALL><EM>(Multiple items can be selected.)</EM></SMALL> <P><B>Ada Awareness Initiative: </B> <INPUT TYPE="radio" NAME="Ada_awareness" VALUE="Yes" CHECKED > Yes <INPUT TYPE="radio" NAME="Ada_awareness" VALUE="No" > No <INPUT TYPE="radio" NAME="Ada_awareness" VALUE="Maybe"> Maybe <SMALL><EM>(Only one item can be selected.)</EM></SMALL><Br> <CENTER><TEXTAREA COLS=60 ROWS=4 WRAP="on" NAME="Special_Notes"> Enter any special comments you might have here. </TEXTAREA></CENTER> <P> <INPUT TYPE="submit" NAME="sub" VALUE="Send Form"> <INPUT TYPE="reset" VALUE="Reset Form"> </FORM> Action Text Input Text Options Checkboxes Radios Text Areas Submit/Reset

Forms - 2

<FORM ACTION="mailto:colket@acm.org" METHOD="POST"> • Email = 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+how+the+text+automatically+wraps • +around+as+the+information+is+typed.%0D%0A++&sub=Send+Form • < FORM ACTION ="https://swww.acm.org/signup.cgi" method="post"> • Use Ada95 bindings to CGI to automatically process form. • Automatically confirm submission of form • Automatically update database • Perform other analysis of submitted information Forms - 3 Netscape returns as attachment Type: application/x-www-form-urlencoded Others return in different formats. David Wheeler will address Ada95 Bindings to CGI

Using the HTML <Head> TITLE (Only required <HEAD> Element) Used as name for Bookmarks (those >60 are blank) Used to label display window or text screen Used by browsers as quick index mechanism Example: <TITLE> ACM SIGAda Home Page </TITLE> META (Optional - But highly recommended) Used for Meta information not explicitly defined elsewhere, Examples: <META NAME=“Keywords” CONTENT= “Ada, Safety-Critical, SE”> <META HTTP-EQUIV=“Creation-Date” CONTENT= “17-Oct-99”> BASE (Optional & NOT Recommended) Used for recording the base URL of the document Prevents relative links from developmental environments Recorded as URL in Bookmarks instead of actual URL Example: <BASE HREF=“http://www.acm.org/SIGAda/index.html” >

Netscape Composer

Creating Tables

Effective Design Strategies Appropriate to Disseminating Information Clyde Roby IDA Note: Originally developed by Brad Balfour of Objective Interface

Main Goal: To help understand the many ways that the WWW 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 techniques to use to build the web pages (web site) Also will present a list of “rules” (both the commonly agreed upon and the controversial) This Section: Concept and Goals

Building A Collection of Web Pages —Things to Think About • The Audience • Ways the Audience Gets Info and Gets Notified of Changes • Frequency of Browsing by Audience • Why Does the Audience Need Your Site • What Makes the Site Attractive • Kinds of Sites • Types of Information Provided • Organizing the Information • Types of Content • Design 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 want 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?

Push versus Pull Site Info Push versus Pull Change Notification Interrupt 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) Ways the Audience Gets Info and Gets Notified of Changes

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) Frequency of Browsingby Audience

Uniqueness? 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 Why Does the AudienceNeed Your Site

Content? Look and Feel? Responsiveness? Satisfying the Audience’s need? 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 What Makes the Site Attractive

Informational e.g., medicine, academia, most .org News e.g., CNN, MSNBC, ESPN Product/Service 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 Kinds of Sites

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., past e-mail list traffic archive, conference results) Contact info Links to other sites Types of Information Provided(SIGAda specific)

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 find it? Search oriented users versus Browsing users Organizing the Information

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 General overall Level of “Professionalism” Native to the browser versus needs plug-in Use of JavaScript Use of Java Use of cgi Types of Content

Commonly Agreed Upon No blinking text KISS Don’t overwhelm with graphics Navigate with text instead of/in addition to any image maps (unless the navigation 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 What’s the connection speed of your users (home versus work) Design Tips/“Rules”

Tools to Manage Development of Web Pages Clyde Roby IDA roby@ida.org

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 Goal and Concepts

Local Development of Web Pages Development of Informational Materials Moving Your Web Pages to the Web Site Web Development

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? Web Management

Local Update of Web Pages Updating of Informational Materials Updating Pages on the Web Site Updating the Web Site

Broken Links Wrong Information Outdated Information ISP Problems Notification to the Webmaster Fixing the Web Site

Web Technologies for Effective Information Dissemination Tutorial