CIW-Methodology and Technology-Volume 1

Section 1: Design Concepts

Lesson 1: Overview of Design Concepts

< The Internet offers the capability for one-to-one relationships.

< The Internet is transactional.

< After E-Commerce, Intranet development is the second largest growth area in Web development.

< Many HTML and WYSIWYG editors are in 3rd and 4th generations.

< Dynamic HTML is a combination of scripts and HTML objects that provide interactivity.

Lesson 2: Web Page Layout and Elements

< The average person reads 25% slower from a monitor than from printed text.

< Common denominators for page layout:

= Most users have a 15-inch or smaller monitor.

= Most users utilize a 640x480-screen resolution.

= Most users have a 28.8 KBPS modem.

= Most users use version 4.x or earlier browser.

= Very few users download plug-ins.

< Page layout refers to the way a Web designer presents information to users.

< Items to consider when planning page layout:

= Frameset

= Margin

= Border

= Color

= Space

= Navigation

= Rule

= White space

= Table

= Paragraph

= List

= Heading level

= Image

< Response times for various Internet connections:

= Modem: 2Kb/sec

= ISDN: 8Kb/sec

= T1: 100 Kb/sec

< Color is perceived as a representation of the type of culture and industry a company participates.

< Colors that create black-subtractive

< Colors that create white-additive

< Two standard color formats:

= RGB

= Hexadecimal

< RGB values are formatted in base-10 number 0-255.

< RGB value is a 24-bit coloring scheme.

< Hexadecimal code values range from 00 to FF.

< Hex code uses base 16 values.

< There are 216 Web-safe colors.

< Dithering is the process by which a browser approximates a color to the closest browser-safe color.

< Times New Roman and Arial are the most common fonts on the Internet.

< One limitation of font usage is that the font must be registered on the user’s system to be viewed correctly.

< Serifs are small decorative strokes added to the end of a letter’s main stroke.

< Serifs improve readability by leading the eye along the line of type.

< Sans-serif fonts do not have serifs. They must be read letter by letter.

< Size=3 is the default font size for most browsers.

< True-Type fonts can be rendered in any point-size value without degradation.

< Anti-aliasing makes text look smooth by blurring lines between the text and background.

< Netscape fonts use Bitstream TrueDoc to store and compress fonts in a file called Portable Font Resource.

< Microsoft uses OpenType (Adobe).

< Web pages should contain 50% less text than the printed version of the same information.

< Use tables and transparent GIFs to add white space to pages.

Lesson 3: Usability Testing

< Knowing your audience requires learning demographics: age, education, income, and location.

< Usability elements:

= Quality content

= Easy navigation

= Information architecture

= Search capability

Lesson 4: Navigation Concepts

< Primary navigation consists of elements accessible from most locations within the site.

< Secondary navigation allows the user to navigate within specific locations.

< A site map is a graphical representation of a Web sites hierarchy.

< Three-click rule: Users should not need to click more than three times during navigation to find information they seek.

< Points to consider when designing site navigation:

= Determine goals and needs

= Learn from navigation that works

= Go deeper than the Home page

= Provide quick links

= Expect all users to have different backgrounds.

< Determining users goals and needs requires interviewing those who will use the site.

< Good navigation should tell people where they are and where they have been.

< Shortcuts provide quick links and easy access to small pieces of content.

Lesson 5: Web Graphics

< Good Web graphics must be aesthetically pleasing, functional, and small in file size.

< Pixel-picture element. Smallest unit displayed by a computer monitor.

< Higher bit values result in more intense colors.

< Standard screen resolution: 640x480 72dpi

< Dithering is the approximation of colors between an image palette and system palette.

< Two types of Web graphics:

= Bitmaps are composed of individual values for each color displayed. (photos, drop shadows)

= Vector images store information about the graphic in mathematical interpretations that are interpreted and displayed. (line art, shapes, illustrations)

< Vector-based drawing programs map shapes onto a visible grid.

< Vector graphics cannot deliver photo realistic detail and display more slowly when loading in a browser.

< Paint-type programs create bitmaps from scanned photos and video captures.

< Graphic images come in numerous file formats:

= Bitmap (BMP)

= Tagged Image File Format (TIFF)

= Windows metafile (WMF)

= Graphics Interchange Format (GIF)

= Joint Photographic Experts Group (JPEG)

< Browsers natively support only GIF and JPEG image formats.

< GIF is a platform limited to 256 colors.

< GIF is a "loss less" format; as it is compressed, no information is lost.

< GIF 89a allows storage and playback of a sequence of still images to create the illusion of animation.

< GIF images can be transparent.

< JPEG graphics can contain up to 24 bits.

< The greater the compression of a JPEG, the greater the level of degradation.

< Designers have no control over how 24 bits of JPEG are mapped into a 256-color palette.

< JPEG 2000 aims to enhance the compression feature of standard JPEGS.

< PNG (Portable Network Graphics) is emerging as the new format for Web graphics.

< PNG files are loss less and support transparency like GIFs, yet also support compression and high bit depth like JPEGS.

< PNG support is currently not complete.

< Scalable Vector Graphics (SVG) is currently in a working draft phase in the W3C.

< SVG uses XML to describe certain shapes; this allows the graphic to become an object in the HTML page.

< Creating Web-quality images requires the knowledge and use of a graphics application.

< The ALT attribute provides alternative text in place of an image in HTML.

Lesson 6: Multimedia

< The correct choice of multimedia will help conserve your visitor’s time, increasing the chances of longer visits and potential business.

< The most common types of basic animations are:

= Animated GIFs: a compilation of still images that is set in motion at a designated

sequence, speed, and repetition.

= Rollovers: actions triggered by passing the cursor over designated areas of the Web

page.

= Flash files: offer media rich content while conserving bandwidth.

< Scrolling text should not be used for critical information.

< Audio can be delivered by the user downloading the entire file and then playing the file or by streaming format.

< Embedded audio files should be avoided unless they are integral to the site.

< The only acceptable form of embedded audio is a Flash file.

< Common audio file types:

= .aiff: Macintosh native format

= .au: UNIX native format

= .mid: MIDI format; small file size by creating algorithms

= .mov: QuickTime format; supports audio and video

= .wav: Windows native format

= .swf: Shockwave/Flash format

< Streaming audio gives the user the ability of hearing an audio file without having to completely download the file first.

< Video can be downloaded and played or streamed down to the user.

< Video should never be mandatory outside of a LAN or Intranet.

< The most successful model to deliver content seems to be the "spiral" concept and its three components: interest, activity, and resolution.

< Designers must research to discover the most widely use plug-ins.

< JAVA vs. Plug-ins.

Section 2: Site Development and Management

 

Lesson 7: The Web Development Process

< A well-rounded Web design team has expertise in the following areas:

= Project management

= Graphic design

= Technology

= Marketing

= Writing and Editing

= Information architecture

< The look, feel, and functionality of a Web site are developed from the user’s point of view; a bottom up approach.

< The Web Development process consists of five phases:

= Conceptualization is the process of developing the vision and strategy for the Web site.

= Design Visualization is the process of preparing the transactional, navigational, and hierarchical construction of the content.

= Analysis is the process of testing concepts for achieving the Site’s vision.

= Production is the process of executing the designed plan.

= Evolution is the process of refining and updating the Site’s design.

< Defining the Project’s Goals:

= Step 1-Project Analysis: must be performed to identify strengths and weaknesses of the project, including team members.

= Step 2-Client expectations and evaluations: clients often have unrealistic expectations of the project’s capabilities.

= Step 3-Sign-off stages

= Step 4-Project transition

< A tactic is a method used to implement your strategy.

< A metaphor suggests a likeness or pre-existing identification with other things or experiences.

Lesson 8: Mind mapping

< Mind mapping is a process that allows you to structure ideas on paper in the order that your brain follows, rather than by linear process which is normally used when forming ideas.

 

Lesson 9: Site Implementation Factors

< Factors that affect site implementation include scope of the project, skill resources available, technology you plan to use, and time allotted for implementation.

< Determining the scope of the project requires you to decide the initial state of the Web site.

< The scope typically falls under one of the following:

= Internet: intended for public use and supplies information to random users

= Intranet: intended for internal use and supplies information to known users

= Extranet: intended for known external users and supplies specific information required by those users

< The skill resources required depends on which aspect of the Web application is being

developed.

= Development and Construction: skills sets range from HTML programmers to system and database administrators.

= Maintenance: skills sets might only require HTML programmers to provide and update content.

< The lowest common denominator when deciding on what technologies to use is the intended audience.

< Time is often the most valuable resource; it should not be overlooked or understated.

= Deadlines

= Maintenance

Section 3: Basic Technology Concepts

 

Lesson 10: HTML Standards and Compliance

< Tim Berners-Lee invented HTML with colleagues at CERN as a means of distributing non-linear text to points across the Internet (Hypertext).

< Hyperlinks are embedded instructions within one text file that calls another file when the link is accessed.

< Hypermedia is an extension of Hypertext. It includes images, video, audio, animation, and other data types incorporated into HTML documents.

< Ted Nelson first conceived hypertext in 1965.

< HTML is a cross-platform language that works on Windows, Macintosh, and UNIX platforms.

< In markup language, instructions and data reside in the same file.

< HTML is an application of SGML.

< Tags are pieces of text, enclosed in angle brackets that provide instructions to programs designed to interpret HTML.

< Web browsers are programs designed specifically to render hypermedia documents from the Internet.

< The HTML standard defines the individual elements that make up the language.

< Six versions of HTML standards exist: 1.0, 2.0, 3.0, 3.2, 4.0, and 4.01.

< The World Wide Web Consortium (W3C) is the standards organization that controls the evolution of HTML.

< HTML 1.0 is the first version used for graphical browsers.

< HTML 2.0 includes all capabilities of 1.0 plus support for user input fields, necessary for forms.

< HTML 3.0 was never ratified, instead in evolved into HTML 3.2.

< HTML 3.2 added features such as tables, applets, and text flow around images, while providing backward compatibility with HTML 2.0.

< HTML 4.0 is the W3C standard for the latest version of HTML. The new recommendation supports:

= Style sheets

= Internationalization features

= Accessibility features

= Enhanced tables and forms

= Scripting and multimedia

< There are three variants of HTML 4.0:

= Transitional: takes advantage of HTML 4.0 features but does not rely on them for benefit of those viewing pages with older browsers.

= Strict: used if you want to rid your document of structural markup, leaving it free of any tags associated with layout; used with CSS to produce font, color, and layout effects.

= Frameset: used to create frames in the browser window.

< HTML 4.01 is the latest revision from W3C. It calls for the support of XHTML.

< XHTML is a combination of Extensible Markup Language 1.0 (XML) and HTML 4.01.

< Deprecated tags and attributes are those that have been replaced by other HTML elements.

< HTML 4.0 deprecated tags:

= <ISINDEX>

= <APPLET>

= <CENTER>

= <FONT>

= <BASEFONT>

= <STRIKE>

= <U>

= <DIR>

= <MENU>

< You can still use deprecated tags; most browsers continue to support them.

< Proprietary extensions "extend" the existing HTML standard.

= <BLINK>: Netscape Navigator proprietary tag

= <MARQUEE>: Internet Explorer proprietary tag

Lesson 11: Tables and Page Structure

< The advantage of tables over frames is that the users can easily bookmark a page using tables.

< Within the standards of HTML 3.2, table structure is the only way to create page divisions.

< Page structures are created by adding attributes to the HTML table, table row, and table data tags.

< HEIGHT and WIDTH can be expressed in pixels or percentages.

< The <BODY> tag can be modified to move top and left margins to the edge of your browser window.

< The <TABLE> tag must be modified to allow your table to occupy the entire space of the browser window.

< The <TR> tag can be used to provide uniform attributes.

< The <TD> tag can also be modified to provide uniform attributes.

Lesson 12: HTML Frames

< Frames are scrollable regions in which pages can be displayed.

< A frameset is a Web page that defines a set of frames in which other Web pages are displayed.

< Frames are now a part of the HTML 4.0 recommendation.

< The advantage of using frames is that static and dynamic information can be combined.

< The <FRAMESET> tag is a container tag that allows you to define regions in your browser window and assign separate files to each region.

< Attributes for <FRAMESET> tag are COLS and ROWS.

< The <FRAME> tag defines the content that will appear in each frame. It is enclosed within the <FRAMESET> tag. The SRC attribute specifies which file appears in each frame.

< The opening <FRAMESET> must follow the closing <HEAD> tag and must precede the opening <BODY> tag. If you don’t use alternate text for browsers incapable of rendering frames, you don not need the <BODY> tag at all.

< The <FRAMESET> tag must contain either the ROWS or COLS attribute. You cannot specify ROWS and COLS in the same <FRAMESET> tag.

< The NAME attribute can be used to designate internal links <A NAME-"any name">.

< The <BASE> tag allows you to specify the URL for a document and a default target frame for all links in that file.

< The TARGET attribute specifies the default target for all hyperlinks on a particular page.

< The <NOFRAMES> tag allows you to create a page for those whose browsers don’t support frames.

Lesson 13: Metadata

< Metadata can be defined as data about data.

< The metadata tag describes the content of a Web page and has several uses and forms.

< The DTD (Document Type Definition) <!DOCTYPE> tag precedes the opening <HTML> tag. This requirement is stated in HTML 3.2 standard.

< The <TITLE> element is mandatory in HTML 3.2.

< <META> information consists of general information about the document or page content that should be available for the user.

< <META> tags are header elements and can include:

= Expiration date

= Author name

= Keywords

= Description

< The <META> tag requires the CONTENT attribute and either the NAME or HTTP-EQUIV attribute.

< <META HTTP-EQUIV> tags are equivalent to HTTP headers.

< If you use the <MEAT HTTP-EQUIV> tag, you force your Web server to add or change content in the response header.

< <META> tags with a NAME attribute are used for information types that do not correspond to HTTP headers.

< Only about 1 out of 4 Web sites use keyword and description <META> tags.

< Not all search engines use metadata.

< The maximum keyword allowance is 1,000 characters; however it is believed that anything over 255 is ignored.

< Description should be no more than 25 words (maximum allowance is 150 characters).

< A directory differs from a search engine in that it will only find sites based on manual submissions.

< Common characteristics used to determine relevance using search engines:

= Titles

= Beginning content

= Frequency

< To change a Web page’s content after a specified delay without user interaction, you can use the <META HTTP-EQUIV="Refresh"> attribute and value.

< Dublin Core is the core set of metadata elements.

Lesson 14: Cascading Style Sheets

< A style sheet is a predefined HTML document structure that includes heading fonts, text layout commands, graphic object placement, and other design guidelines.

< A style is a set of formatting instructions placed in the <HEAD> of an HTML document.

< Styles allow you to make one change that affects multiple HTML elements.

< Cascading style sheets refer to the use of multiple style definitions in a single document.

< There are four ways to apply style variations:

= Linked: a single style sheet controls multiple Web pages

Ø Each page must be linked to the style sheet by a plain text file with a .css extension.

= Imported: uses the "@ import" method to import an external style file.

= Embedded: styles for a single page and perhaps the simplest method.

= Inline: added inline to existing HTML tags or in conjunction with the approved HTML 4.0 <SPAN> tag.

< The advantage of using inline styles is that you can designate attributes with a single tag.

< Styles allow for inheritance, which means that a few simple statements can dramatically alter large amounts of text.

< A style guide is a standards document that establishes a set of conventions for performing common tasks.

Section 4: Applications and Tools

 

Lesson 15: Site Development with Microsoft FrontPage 2000-Introduction

< FrontPage incorporates three distinct functions to assist in the overall development process.

= Site Management.

= Page Layout and Design

= Data Connection

< FrontPage views allow the user to access different components of the application.

= Page View

Ø Normal

Ø HTML

Ø Preview

= Folders View

= Reports View

= Navigation View

= Hyperlink View

= Tasks View

Lesson 16: Site Development with Microsoft FrontPage 2000-Basic Features

< Page layout in FrontPage is performed using the Page View.

< Advanced page layout can be performed using HTML tables or CSS positioning.

< You do not need to know the exact table dimensions because WYSIWYG editors allow you to modify tables to the desired sizes.

< You can construct tables with FrontPage in several ways:

= Use the Insert Table feature

= Draw the Table

= Manually code the table in HTML

< Inserting images can be done using images located on the Internet, on your computer, or images already on the Web site.

< Each table on a Web site has it’s own set of properties.

< Each page on a Web site also has it’s own set of properties.

< Cells within a table have their own set of properties.

< An image map allows a single image to become a hyperlink to multiple locations.

< A template is a document that specifies default settings or attributes.

< FrontPage allows Rich Text Format (RTF) documents to be imported directly into a page in Page view.

< FrontPage also allows HTML to be directly inserted into a Web page. FrontPage removes the structure tag pairs so that no duplicates exist.

< Shared borders are loosely based on the idea of frames, in which a portion of the page remains constant as you traverse the site.

< For a shared border to function, the Web server must have FrontPage server extensions.

< You can create framesets in FrontPage using the frameset templates.

< When using frames, you must target each hyperlink to instruct it where to open the page to which it links.

< There are three ways to apply styles in FrontPage.

= Linked

= Embedded

= Inline

< Themes are predesigned styles. They include graphics, rules, fonts, and colors.

Lesson 17: Site Development with FrontPage 2000-Advanced Features

< The FrontPage DHTML toolbar makes it easy to create DHTML effects without the need to know how to code them.

< A Web form is typically the only way to obtain information from a user.

< Components are special features of FrontPage that make programming easy to implement.

< To use FrontPage components the Web server must support FrontPage server extensions.

< A site search form is very useful to visitors and should be implemented when possible..

Lesson 18: Site Development with Macromedia Dreamweaver 3.0-Introduction

< Dreamweaver is a WYSIWYG editor produced by Macromedia

< Dreamweaver serves as an HTML page creation tool and Web site management tool, offering capabilities to organize and structure entire Web applications.

Lesson 19: Site Development with Macromedia Dreamweaver 3.0-Basic Features

< Dreamweaver gives you the ability to manually position elements, rather than creating a table and then modifying the table to accommodate element positions.

< The Image Properties palette allows you to create image maps in Dreamweaver.

< Dreamweaver allows you to create templates to maintain consistency and ensure necessary components remain consistent.

< Dreamweaver has the capability to import a document created with Microsoft Word and saved as HTML.

< The Objects palette offers Dreamweaver full frames capability.

Lesson 20: Site Development with Dreamweaver 3.0-Advanced Features

< Dreamweaver provides a dialog box specifically for creating rollover buttons.

< Dreamweaver uses the Forms menu from the Objects palette to create forms.

< Dreamweaver does not offer server-side form processing.

< Dreamweaver offers a feature called Behaviors that allows you to add other interactive elements to a page.

< The Behaviors Inspector controls behaviors.

< Users can drag layers from your site if you do not convert layers to tables before publishing.

< The Dreamweaver Library allows you to store objects and files that are used repeatedly.

< HTML can be manually edited with Dreamweaver using an external HTML editor.

< A jump menu in Dreamweaver is a drop down menu that automatically links to a specified URL.

< Dreamweaver Exchange provides developers with a place to download and submit Dreamweaver extensions.

Lesson 21: Web Pages with Allair Homesite 4.5

< Homesite 4.5 is an advanced HTML editor used to create complex Web pages quickly.

< Homesite can also create JavaScript pop-up windows, dynamic expandable outlines and page transitions.

< Homesite is not a WYSIWYG editor; it is an HTML tag editor.

< A hierarchy-style internal manager that allows the user to create, rename, move, and delete files provides strong file management.

< The Tags menu allows the user to:

= Open a dialog box to edit the current tag

= Create blank opening or closing tags to fill

= Find a matching opening or closing tag

= Repeat the last tag inserted

< The Tag Chooser allows any HTML tag to be inserted.

< The Tag Completion feature automatically adds a closing tag when you type a tag.

Lesson 22: Images with JASC Paint Shop Pro

< Paint Shop Pro is a paint-type program that translates images into bitmap files so you can manipulate them.

< The use of 16.7 million colors (24 bit) is recommended because most effects and filters will not work on images with fewer colors.

< PSP 5.0 and later supports floating palettes, meaning the palettes expand and retract when you need them.

< PSP allows you to add text to any image.

< Paint Shop Pro provides a variety of filters and special effects.

< The filter-browser gives you a sample of what effect each filter has on an image.

< Cropping an image will decrease it dimensions and file size.

< A layer is a portion of a PSP image that can remain independent of other layers on the image.

< Transparency is used to give the appearance that an image is floating.

< The screen capture feature has several options:

= Area: an area of a screen specified by the user

= Full-screen: the entire screen

= Client-area: only the input area of the active window

= Window: active window only

= Object: an object in a window

< You can create animated GIFs using Animation Shop.

Lesson 23: Multimedia with Macromedia Flash 5.0

< Flash combines four elements that define its functionality:

= Vector graphics

= Streaming capability

= A timeline

= Layers

< By using vector graphics, Flash can be scaled without file size being affected.

< Streaming allows multimedia content to begin playing as soon as it reaches its destination (browser).

< The Flash Timeline can be thought of as a series of movie frames. The more frames added, the longer the movie.

< Each movie can have multiple layers, providing animation that is linear and parallel.

< Flash is not natively supported in browsers and requires a plug-in.

< Flash movies are placed in HTML code using the <OBJECT> and <EMBED> tags

< Flash is a development tool and a testing tool.

< Colors and fills can be assigned to most objects on the Flash stage.

Lesson 24: Multimedia with Flash 5.0-Timelines and Layers

< The Flash Timeline is a sequencing component that controls the way in which a Flash movie plays.

< There are three basic types of frames in Flash:

= Normal frame: designed to extend the movie to a certain point along the timeline

= Key frame: a frame containing objects that will be displayed in all frames following it or until the timeline encounters another key frame or blank key frame.

= Blank key frame: a Flash frame that marks a milestone in the timeline.

< Layers are used to run multiple timelines independently.

Lesson 25: Multimedia with Flash 5.0-Creating and Editing Symbols and Buttons

< Flash has the ability to define and reuse objects called symbols.

< A symbol is a graphic, a button, or a movie clip stored in a Flash movie’s library.

< A Flash button can be used as a standard rollover button or to launch embedded movies.

< You can used pre-designed buttons or create your own from shapes.

< The Library allows you to customize and organize items into folders.

Lesson 26: Multimedia with Flash 5.0-Tweens.

< The most dynamic aspect of Flash is its animation capability called "tweening".

< There are two types of tweens:

= Motion tween: motion in which objects move from one location to another on the stage

= Shape tween: motion in which objects change their shape or form on the stage

< There are three main rules for tweening:

= Only one tween can exist in a layer at a time.

= In a motion tween, the objects must be symbols.

= In a shape tween, the objects cannot be symbols.

< There are two ways to create a motion tween:

= Place a symbol in a key frame and reposition the symbol further down the timeline in another key frame and add motion tween.

= Use a guide layer, which acts as a path for the tween.

< Shape tweens offer more flexibility because you can transform any shape into any other shape you want.

< Text tweening is a form of motion tweening.

Lesson 27: Multimedia with Flash 5.0 Movie Clips

< Flash movie clips differ from movies only in that a movie clip uses a different timeline.

< A movie clip is a Symbol so you use the Symbol Editor to develop the clip.

< The movie clip is called by an action in the main movie.

< In order to add sound to a movie, it must be placed in the timeline.

< The easiest way to add a Flash movie to HTML is to let Flash create the HTML code, then insert the code it creates into the HTML page.

Lesson 28: Multimedia with Flash 5.0-Tell Targets and Masks

< When using Tell targets, you assign a scripting action to an object, and Flash instructs the object on how to perform.

< You can use a Mask to cover layers.

Section 5: Advanced Technology Concepts

 

Lesson 29: JavaScript Fundamentals

< HTML has little or no ability to interact with users. To do this you would use CGI scripts of JAVA.

< JavaScript is a run-time interpreted language.

< Scripting languages are subsets of larger languages.

< In programming, objects encapsulate predetermined attributes and behaviors.

< Properties represent various object attributes.

< Methods are the actions an object can perform.

< A scripting language is a simple programming language designed to enable users to write useful programs easily.

< JavaScript is a scripting language.

< JavaScript is object-based, not object oriented. It depends for functionality on a collection of built-in objects.

< JavaScript is event-driven.

< Netscape developed JavaScript.

< Java was developed by Sun Microsystems and is an object-oriented programming language.

< JavaScript can be server-side or client-side.

< LiveWire can be used to implement server-side JavaScript.

< JavaScript does not support database access without LiveWire.

< VBScript is a subset of Visual Basic. It is easier to learn that JavaScript because it is interpreted not complied.

< Jscript is the Microsoft implementation of JavaScript..

< ECMA Script will be a standardized scripting language.

< JavaScript resides in HTML documents.

< The <SCRIPT> tag is used to place JavaScript into HTML.

< Dot notation is used to associate an object’s name with its properties or methods.

< Strengths of JavaScript:

= Quick development

= Easy to learn

= Platform independent

< The alert () method will allow a pop-up window on page load.

< The prompt () method requests user input through a text field within a dialog box.

< You can open a window by using the open () method.

< The Navigator object allows access to information specific to a browser.

< The Image object defines the location of required images for a rollover effect.

Lesson 30: Dynamic HTML

< DHTML is made possible through the use of script (JavaScript or VBScript), the Document Object Model (DOM), and two specifications that work together: HTML 4.0 and cascading style sheets (CSS).

< DHTML can offer alternatives to server-side technology such as Active Server Pages (ASP).

< Active Server Pages (ASP) is a technology that uses the server to run scripts, then passes the output back to the browser.

< The DOM (Document Object Model) is a specification or hierarchy of JavaScript objects.

< The DOM is the interface that accesses and manipulates HTML and XML documents. It also provides logical structure to these documents.

< Cascading Style Sheets (CSS) enable you to create Web pages with layout specification of desktop publishing programs.

< Scripting lets you design a response or function to a user event, such as a mouse move.

< An event handler detects when events occur and performs a defined action as a result.

< One of the main differences in Netscape’s implementation of DHTML is the use of the <LAYER> tag.

Lesson 31: Extensible Markup Language (XML)

< XML stands for Extensible Markup Language.

< XML is derived from SGML (Standard Generalized Markup Language).

< SGML is a meta-language, a language used to create other languages.

< XML allows search engines to perform directly targeted searches.

< The ten goals of XML:

= Usable over the Internet

= Support a variety of applications

= Compatible with SGML

= It is easy to write programs that process XML

= Options in XML are kept to a minimum

= It is human legible and clear

= Design is prepared quickly

= Design is formal and concise

= It is easy to create XML pages

= Terseness is of minimal importance

< XML tags must have a closing tag.

< Five basic rules for well-formed XML:

= Tags cannot be inferred; they must be explicit.

= Empty tags require a forward slash (/) before the closing bracket.

= All attribute values must be enclosed in single orderable quotations.

= Tags must nest correctly.

= Tags are case-sensitive and must match in every implementation.

< XHTML combines HTML and XML to create a transition from HTML toward XML while still

providing backward compatibility.

Lesson 32: HTTP Servers

< An HTTP server is commonly known as a Web server.

< A Web server serves HTML document over the Internet, Intranets, Extranets, LANS, and WANS.

< Popular Web servers include:

= Apache

= Netscape Enterprise

= Microsoft IIS

< A port is logical connection port and can range from 0-65563.

< Ports 0-1024 are reserved for privileged services.

< Port 80 is the default port for HTTP servers.

< Port 443 uses Secure Sockets Layer (SSL).

< Personal Web Server 4.0 allows PCs running Windows NT or 95/98 to function as a Web Server.

< Common Gateway Interface (CGI) is not a language; it is a simple protocol used to communicate between HTML forms and an application.

< CGI can be used to extract data from a database or file.

< Java Server pages and Active Server pages are technologies that enables data and applications to be ran on the server before information is sent to the client.

< The main difference between CGI and ASP/JSP technologies is the way processes are executed.

Lesson 33: Cookies

< Cookies are small text files that have a variety of uses.

< Currently, a server can pass no more than 20 cookies to a user’s computer and a user can store no more than 300 cookies.

< Cookie header parameters:

= Name=value

= Expires=date

= Path=path

= Domain=domain

= Secure

< Cookies are used to maintain state.

< Cookies can be enabled or disabled.

< Cookies can be deleted manually.

Lesson 34: Downloadables and Plug-Ins

< Plug-Ins extend the browser’s capabilities to view and interact with non-traditional, sometimes new file formats, not supported by a browser.

< Plug-Ins can be installed three ways:

= Online: performed without exiting a browser session

= Offline: the user downloads the plug-in, quits the browser, and launches the plug-in installation file.

= Pre-Installation: some common plug-ins are pre-installed by browser manufacturers.

< Macromedia Shockwave is a family of multimedia players designed to provide the Web user with a wide range of multimedia experiences.

< Adobe introduced Acrobat to help Web professionals publish distributable documents from existing files by creating Portable Document Format (PDF) files.

< RealPlayer allows the browser to play audio and video in streaming format.

< When providing a link to a downloadable file always provide the file type and file size..

Lesson 35: Java Applets

< Java is a programming language derived from C++.

< "Object-oriented" means that a program can be created once and re-used a number of times.

< Java Applets are platform-neutral.

< Applets are small application designed to run inside a browser.

< Java can function in any computer environment, but Java Applets will work only in Web-based applications.

< Applets are small and fast.

< Multithreading allows more than one thread of execution within a document

< To embed a Java Applet into an HTML document, you should use the <OBJECT> tag.

< The <APPLET> tag should be used to make the code platform-independent.

< The <PARAM> tag is used to set parameters within an Applet.

Lesson 36: Databases

< Traditional databases store and organize information in fields, records, and files.

< Hypertext databases store information as objects.

< Schema is the structure of a database system and often depicts the structure as a graphical

reference.

< There are three types of database queries:

= Menu: user is offered a list of options from which to choose

= Query by Example: user states which fields and values to use in the query.

= Query Language: specialized language called Structured Query Language is used to

retrieve or manipulate information in a database

< SQL (Structured Query Language) has become the semi-standard language for accessing information from a database.

< Database queries require a database management system (DBMS).

< A DBMS is an application that allows users to manipulate information in the database.

< There are three types of DBMS:

= Flat file: stores information on a single table consisting of multiple rows and columns

= Relational database management system (RDBMS): stores related information in a collection of tables

= Multidimensional: uses common field values and stores information in organized groups of records

< DBMS includes the following technologies or support for access, storage, and output:

= Open database connectivity (ODBC): the standard method for accessing a database regardless of the DBMS application used.

= Computer output to laser disk (COLD): used for storage of information on CD-ROMS

= Binary Large Object (BLOB): used for storage of binary data in a single entry

= Virtual Sequential Access Method (VSAM): used on IBM mainframes

= Indexed Sequential Access Method (ISAM): used for the management of information storage and access on a hard drive.

= Online Analytical Processing (OLAP): used to analyze information and data organization

= Report Program Generator (RPG): used for generating reports

= ActiveX Data Objects (ADO): used to access different information types, such as spreadsheets, Web pages, and other documents.

= Java Database Connectivity (JDBC): executes statements via JAVA programming with any SQL database

Lesson 37: Standards Organizations

< Organizations that facilitate the growth of the Internet:

= Internet Society (ISOC): The ISOC provides leadership in addressing issues that confront the future of the Internet, and heads the group responsible for Internet infrastructure standards, including the IETF and IAB.

= Internet Architecture Board (IAB): a technical advisory group that conducts research and makes recommendations to the Internet Society (ISOC)

= Internet Research Task Force (ERTF): concerned with the evolution of the Internet and the long term issues surrounding it

= Internet Engineering Task Force (IETF): concerned with short term technical Internet issues and makes recommendations to the IAB for standards approval

= World Wide Web Consortium (W3C): primary focus is on the World Wide Web and not the Internet; creates recommendations for languages and technologies such as HTML, XML, and CSS

= Internet Corporation for Assigned Names and Numbers (ICANN): a non profit private sector that assumes responsibility for IP address space allocation, protocol parameter assignment, domain name system management, and root server system management

= Requests for Comments (RFCs): created to collect information on all types on Internet-related issues

Section 4: Web Workshop

 

Lesson 38: Web Workshop

 

Lesson 39: Web Site Publishing

< File Transfer Protocol (FTP) is used to transfer files between two computers or a server and a computer, depending on the configuration.

< When publishing your Web site, two pieces of information are necessary:

= IP address and URL of the machine to which you want to copy your site

= User name and password to access and publish your content to that server

< The generic method of publishing a Web site uses FTP.

< WS FTP Pro is a shareware program that can be used to publish Web sites.

< Microsoft FrontPage 2000 has a built-in publishing capability.

< Use HTTP to publish to a server with FrontPage extensions installed.

< Dreamweaver 3.0 offers publishing capabilities in the Site window.