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 capabilityLesson 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 Webpage.
=
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 beingdeveloped.
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=
=
MaintenanceSection 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 tagLesson 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 ViewLesson 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 graphicalreference.
<
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 toretrieve 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 databaseLesson 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 issuesSection 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.