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.