Web Technologies CUV1
Statement Of Work (SOW)
A contract to initiate a project; the contract contains project goals and specifies how those goals will be met.
Web services
A group of XML- based technologies and open standards that enable computers with various platforms and software to exchange data and share functionality over the Web. - The benefit to a Web developer is that the developer can use third-party services on his or her own site or Web application without needing to know the details of any service's functionality.
What is a Web site tactic?
A method used to implement your Web site strategy
image map
A portion or multiple portions of an image that act as hyperlinks - You can create an image map to designate multiple areas of an image as hyperlinks to other pages.
Conceptualization
Conceptualization is the process of developing the vision and strategy for the Web site.
Which of the following is true of elements to which positioning has been applied?
Content that remains within the normal flow will ignore those positioned elements.
Web Accessibility Initiative (WAI)
Created by (W3C) to ensure that core technologies used on the Web, such as HTML, CSS, XML and DOM, are equally accessible to users with physical, visual, hearing and cognitive disabilities.
Design process from the top-down
Define and design the look and feel of the site, then conform user interaction to that particular design.
flexible two-column layout using golden ratio
Divide 100% by 1.62, which results in 62%. Subtract 62% from 100%, which results in 38%. Main column will take up 62 percent of the width of your design area, leaving 38 percent for the secondary column
When are HTML tags deprecated?
Each time a new HTML recommendation becomes a standard
Language orgins
SGML -> HTML -> XHTML -> XML DHTML is a technology that combines HTML 4 with script, CSS and the Document Object Model (DOM).
Two Metalanguages
SGML and XML
Pixels per inch (ppi) is the appropriate measure for
Images that will appear onscreen
To what does the term "cascading" refer?
Inheritance or the hierarchical relationship among styles applied in different ways
vector-based drawing applications
Inkscape, CorelDRAW X5, Adobe Illustrator CS5. Programs work by mapping the shapes you create onto an invisible grid. Image information is stored as a set of mathematical instructions. They are best suited for line art, shapes and illustrations. Increasing the size of a vector graphic does not increase the file size. Vector graphics are resolution-independent(allows it to scale without increasing file size.
inline CSS styles
Inline styles are added inline to existing X/HTML tags or used in conjunction with the approved HTML 4.0 <span> tag. - The advantage of using inline styles is that you can designate a set of attributes with a single tag. -
In what section of an X/HTML document should you place styles if you embed them in the document?
The <head> section
<blink> tag
caused text to appear and disappear (or blink) in the browser window.
Project assumptions
circumstances and events that are partially or completely outside of the project team's control, but are necessary for the project to succeed.
Scope
goals of the Web site and the tasks that need to be performed to achieve those goals?
A style guide
is a book, manual or guide specifying rules and examples of usage, punctuation, and typography. - A standards document or manual that establishes a set of conventions or rules for performing common tasks
SQL Server
is a client-server database management system used to add, retrieve and delete data. Python is a programming language.
<frameset> tag
is a container tag that allows you to define regions in your browser window and assign separate Web page files to each region. - The <frameset> tag typically replaces the <body> tag in an X/HTML frameset document because no text other than the frame pages' content generally appears on the frameset page. - Placement: It must follow the closing </head> tag and precede the opening <body> tag. - Must contain: The rows attribute and/or the cols attribute
site map
is a site page that indexes and inks to all pages on the site.
Web page wireframe
is a sketch of the skeletal view of a site's architecture(finalized representation of the site). - shows you How the pages on the site work together to create a complete solution -focuses on how pages on the site work together to create a complete solution. - You can use a Web site wireframe to help set customer expectations for the final site, and describe the need for specific programming to additional members of the team.
inline style
is a style attribute added directly within an X/HTML tag. - The advantage of using inline styles is that you can designate a set of attributes with a single tag. - Inline styles are used to define a set of properties for a single item (or block of items). - Inline styles are not reusable Priority: Embedded -> inline -> internal -> external ->
z-index
is a value that determines a box's stacking order along the z-axis (which is perpendicular to the screen). - The z-index becomes important when you work with elements that are removed from the normal document flow. - The z-index setting determines the stacking order of elements within the same containing block (stacking context). - if there is no z-index specified, elements in the same stacking context are stacked in the following order (from back to front): boxes in the normal flow, floating boxes, positioned boxes.
Fireworks
is a vector and raster (bitmap) image-editing application that was designed for the development of Web graphics. - combines vector-based programs, bitmap editors and image optimizers. - similar interface as Adobe Creative suite 5 and Dreamweaver CS5. - native files(default) in Portable Network Graphics (PNG) format - do not need programming knowledge to create animated graphics that incorporate X/HTML and JavaScript functions. - Will open files created in Adobe Photoshop and Illustrator, and CorelDRAW. - Unable to edit in Preview tab(all others you can). - PNG supports 24-bit color, or 16.7 million colors. - When you crop the excess image canvas, the image will decrease in dimensions and file size. - Crop tool is limited to rectangular and square outline shapes. - Marquee tool allows selection of select images that supports circular and oval outline shapes. - Lasso tool allows you to draw any shape of polygon on an image to select the area. The Lasso tool has two settings: free form and segmented. - Layers are created independently, series of layers creates image. Layers support GIF and JPG formats but finalized image must be in PNG format. - Image States(previous releases this was "image frames") allows you to create animation in image files easily such as a GIF from 1 picture rather than several on other programs. - Transparent images: when the background of a page needs to be displayed behind the image. Image transparency is also used to give the appearance that an image is floating, or is not constrained to a rectangular or square shape. - slicing: easily divide large images into smaller images for use on Web pages. Several images load as one, decreasing load times.
reciprocal link
is an off-page practice wherein one site links back to another. A cloaked site is a site that is shown to individual users, but not to crawlers.
trademark
is any word, name, phrase, sound or image that a company uses to distinguish itself from the competition.
Color depth
is color information measured in bits; higher bit values (also called bit depths) result in more intense or realistic colors. File size increases with the color depth.
Asymmetrical balance
is created when a single object on one side of the page is balanced by a number of smaller (or more lightly colored or weighted) objects on the other side.
Symmetrical balance
is created when all elements on one side of the page are mirrored on the other.
Radial balance
is created when elements on the page radiate or spiral out from a central point.
Metadata
is data that embraces and describes a larger body of data. - Metadata can be defined as data about data.
element that is static
is described as "unpositioned" because the browser will position it according to the normal document flow when it renders the page.
Procedural markup
is designed specifically to affect the appearance of a document
A markup language
is designed to instruct computers how to process data.
The HTML 1.0 standard
is essentially the first version of HTML used for graphical browsers. It is equivalent to the first HTML specification (version 0), with added support for: images
trade secret
is generally a formula, pattern, idea, process or compilation of information that provides the owner with an advantage in the marketplace and that is treated by the owner in a way that can be expected to keep the public from learning about it.
Navigation
is moving from one point to another in an understood and controlled manner with purpose. biggest impact on users is Feedback to the user.
relatively positioned element
is part of the normal flow, but it is shifted out of its original position.
element with the position property of relative
is part of the normal flow, but it is shifted out of its original position. Elements that come after a relatively positioned element act as if the relatively positioned element were still in the normal flow and leave a gap for it
absolutely positioned element
is positioned at specified coordinates relative to its containing block. - allows you to form pages that resemble frames by using a z-axis
element with the position property of absolute
is positioned at specified coordinates relative to its containing block. The position is specified using the top, right, bottom and left properties. Absolutely positioned elements are moved out of the normal flow entirely.
element with a fixed position
is positioned at specified coordinates relative to the browser window (viewport), and therefore remains in that position regardless of scrolling.
information architect
is responsible for translating customer requirements into a blueprint for site development. This may include planning the site's navigation and determining whether database integration is needed.
The WAV format
is the Windows native format.
Slicing
is the process of dividing images into several smaller images.
By its nature, the Internet
is transactional. Furthermore, by its nature the Internet is non-linear. Internet is One-to-One. The entire Internet experience, from logging on to Web browsing, is predicated on user requests and server responses -- in other words, transactions and interactivity.
<table> tag
is used to modify an entire table. - The height and width attributes are used with table tags. - defines the structure of X/HTML tables. - to size each table to occupy the entire space of a Web page modify Border, height, width and cellspacing - Cellspacing and border attributes apply to <table> tags - Height and width attributes
<tr> tag
is used to modify table rows. - X/HTML attributes - align, bgcolor or background,
project schedule
lists the planned dates for performing tasks and meeting goals identified in the project plan.
anti-aliasing
maintains rich-looking letters that do not have jagged edges. - makes the text look smooth by blurring the lines between text and background. - technique removes the harsh, jagged edges of the letters, which are especially noticeable with large fonts. - drawback to anti-aliasing is that it adds more colors to the image, resulting in larger file sizes and longer downloads.
"Lossless"
means that as an image is compressed, no information is lost. Dithering is the approximation or reconciliation of colors between an image palette and the system palette.
"Lossy"
means that as the compression of an image is increased, colors are dropped from the image color palette, resulting in image degradation.
To create a border-less webpage structure
modify attributes of the <body> and <table> tags
Eye-tracking
most Web users first look At the center of the page
needs analysis
needs analysis identifies the problems, challenges or needs that the project must resolve or address.
Secondary navigation elements
allow the user to navigate within a specific location in the site. E.G. a Press Releases link within the About Us section.
importing method
allows you to apply multiple style sheets using one style element. ]Priority: Embedded -> inline -> internal -> external ->
Flash files
offer media-rich content while conserving bandwidth.
inverted pyramid layout style
offers the user a list of page summaries (topics) first, then references (hyperlinks) to the detailed pages for those interested. Similar to A newspaper.
MIDI format
produces small file sizes by creating music algorithms.
copyright
provides protection for original works of authorship that are fixed in a tangible form of expression.
The HTML 3.2 standard added widely deployed features such as:
tables, figures and frames (tables and mathematical equations, among other widely deployed features).
As a web designer
your job is usually to create a Web site that meets the stakeholders' needs and that can be used by the site's target audience.
project management life cycle(PMI)
•Initiating phase - Developing a Statement Of Work (SOW) •Planning phase - Developing a project schedule(To outlines tasks, responsibilities, budgets and deadlines) •Executing phase & Controlling phase - work is performed (executed), progress is monitored, and corrective action is taken as needed (controlled). During the design and analysis sub-phase of the executing phase, the designer will create the Web site's look and feel. - executing phase sub-phases - conceptualization, structure, design and analysis, production and testing, and evolution. - executing phase(production and testing sub-phase) the completed design is translated into XHTML pages, and any necessary functionality is programmed or implemented. - During the design and analysis sub-phase - the designer will create the Web site's look and feel(job of the graphic designer). - The structure sub-phase - involves preparing the transactional, navigational and hierarchical construction of the Web site's content. - Conceptualization - is the process of developing the vision and strategy for the Web site(job of Marketing professionals & involved in look and feel ). •Closing phase - evaluate & determine any future changes. Success is deemed when completed on budget, time frame and quality. Should receive formal acceptance from customer, a documented history of the development project and recommendations for future Web development projects. -Evolution phase - is the process of refining and updating the site design. This phase depends upon the feedback from stakeholders and the results of your testing. - Writers and editors are responsible for writing, editing and proofreading the content on the Web site. -Documenting a project promotes team member accountability and enables stakeholders to monitor various stages of the project. - metaphors are valuable to Web site design because Web users are interested in the total experience of visiting a site, not just buying a product
Generalized Markup Language (GML)
defined not only the appearance of the data in a document but was the the first language to define the structure of the data. Followed GenCode.
embedding method
defines styles for only a single page. Priority: Embedded -> inline -> internal -> external ->
<frame> tag
defines the content that will appear in each frame of a frameset. - It is enclosed within the <frameset> tags. - The src attribute of the <frame> tag specifies the file that will appear in the frame.
content attribute
defines the specific value(s) for the general information, such as an expiration date, keywords, a synopsis, author names, frame names or URLs.
Document Type Definition (DTD)
defines the structure and elements (essentially the grammar) to which an XML document conforms.
You use structural markup to:
describe the appearance of text and its context in a document.
The basic procedure of optimization is
determining the smallest color palette possible and choosing a file format that results in the quality required.
The most basic collaboration tools for Web teams are:
e-mail, meetings and telephone calls.
linking method
single style sheet controls multiple Web pages.
font-style
specifies italic type.
Dublin Core initiative
specifies the core set of metadata elements. Dublin Core was designed with several goals in mind: - Enable search engines to filter by standard fields (e.g., date and author). - Provide the ability for browsers to display metadata fields in a separate window. - Enhance cross-collection repurposing and integration of content. - Enhance site management by allowing old pages to be located more easily.
font-family
specifies the font type, such as Times, Palatino, Arial or Garamond and so forth.
<!DOCTYPE> tag
specifies the version of X/HTML used in a document from other versions of X/HTML. - required in order to use a validation service.
font-weight
specifies the weight, or thickness, of a font. Values for this attribute include bold, normal and lighter.
Cascading Style Sheets [CSS])
states that all formatting should be defined either in a separate document called a style sheet, in a <style> section within an HTML page, or as values for a style attribute within HTML tags. - the use of tags such as <center> and <font> is now discouraged by the W3C, and these elements are said to be "deprecated" in favor of style sheets. - CSS treats every element in a document as a box. - to define a text style specification for the body element is body {color: navy; font-family: Arial}.
GUI HTML Editors vs. Text Editors
strength of GUI HTML editor: - editor can provide useful hints and advice for Web authors. - integration with proprietary but popular technologies. weakness of GUI HTM: - code alteration issues(nearly all of these applications will insert or replace code that they somehow see as unfit.) - expense Text Editors: Advantages: - can open any text document with it. - color coded - Macros Disadvantages: - Mistakes may not be seen - sometimes slow
HTML 4.0 added support for
style sheets, scripting and multimedia( use of Cascading Style Sheets (CSS) and internationalization features, such as reading from right to left.) HTML 4.0 is the W3C standard for the last major revision of SGML-based HTML.
Metalanguage
a language that is used to create other languages
font-size
sets text character size.
Familiar navigation conventions
" labels" are common elements used throughout the World Wide Web that have become familiar to users and therefore have predefined meanings, such as FAQ or Frequently Asked Questions, Downloads, News, Site Map, About Us, Contact Us and Help.
HTML interpreters
(also known as user agents) are programs such as Mozilla Firefox and Microsoft Internet Explorer that process HTML pages and render them to the user as text pages formatted in accordance with the embedded instructions.
TrueType fonts
(serif) - fonts that can be rendered in any point-size value without degradation of letter quality.
HTTP Servers and Web Applications
- A cookie header appears to your browser as follows: name=value(Only one required); expires=date; path=path; domain=domain; secure - Common Gateway Interface (CGI) permits Macintosh, PC and UNIX computers to post data to or retrieve data from an HTTP server through a Web browser. - JavaServer Pages and Active Server Pages are technologies that enable Web developers to include program instructions within their X/HTML pages that will run on the server when the page is requested by a Web browser. - Internet traffic to a subdomain first accesses the domain's IP address, then goes to the subdomain location. - An aggregator collects syndicated Web content into a single location. An aggregator is simply a modern Web browser, not an add-on. There is no subscription fee associated with using an aggregator. - JavaServer Pages and Active Server Pages are not reliant on browser type, yet allow real-time data to be sent. - JSP can run on multiple platforms (as long as Java code processing is enabled). - By contrast, ASP was designed to be used on Windows servers, although it can be ported to other platforms. - an address record, or A record, defines the location of your Web site. - Internet traffic to a subdomain first accesses the domain's IP address, then goes to the subdomain location. - Subdomains do not have their own IP addresses. The subdomain is specified before the domain name in a Web address. - A Web feed is an XML-based document whose content items include hyperlinks to the source of the content. - Converting RSS to e-mail is beneficial to the site publishing the feed because it allows the publishing site to push the feed to subscribers. - An Atom entry is the equivalent of an RSS channel item. - A guid (globally unique identifier) is a string that uniquely identifies an RSS channel item. - The description element is a phrase that describes an RSS channel.
Joint Photographic Experts Group (JPEG)
- Automatic compression and 16.7 million colors(24 bits of color information). - Format has great color depth and works particularly well for photographs, but is considered a "lossy" format type because compression results in image degradation. - JPEG offers greater color depth than GIF, but usually requires more time to download. - JPEG 2000 advantage over Standard JPEG becuase JPEG 2000 has enhanced compression that reduces image degradation from compression.
Web Site Publishing and Maintenance
- Dreamweaver does not support HTTP publishing to a Web server. - Expression Web allows you to save your Web pages and sites on the local system, and then transfer your files to a fully functional Web server via FTP or HTTP. - You use HTTP to publish from Expression Web to a Web server that has the FrontPage Server Extensions installed. - Dreamweaver is a GUI Web site authoring and management application; it is not a code-only site authoring tool. - FTP uses one of two modes to transfer data: binary or ASCII. - FTP clients transfer non-text files, such as music and images, in binary mode. - Text-based files, such as X/HTML, CSS and XML documents, are transferred in ASCII mode. - FTP does not support Raster mode. - If you manually coded your Web pages, you need only an FTP client for publishing. - You can use the localhost URL (also known as the loopback address) to publish files to a server running on the local computer. However, to publish your pages to a live server on the World Wide Web, you will need an FTP client to transfer the files to the appropriate IP address. - Expression Web allows you to use HTTP to publish Web site files to a Web server as long as the appropriate server extensions are installed. - Dreamweaver and KompoZer use FTP to publish to a Web server. - The manual link-checking process must be methodical to avoid skipping links. - use an Application Service Provider (ASP) to provide specialized software functionality along with Web hosting. - use File Transfer Protocol (FTP) to transfer files between two computers or a server and a computer. - FTP is used to transfer files to a Web server, even if you use a GUI Web site authoring tool such as Dreamweaver or Expression Web.
Flash
- Flash is one of the most influential media types to enhance the Web and Web-browsing experience. - Flash mainly derived from the Macromedia applications FutureSplash and Director. - Flash combines four elements that define its functionality: a. vector graphics - based on mathematical computations b. streaming capability - file plays almost immediately c. Timeline - controls the way in which a Flash movie plays(default 24 frames per second) - Each Flash movie is a timeline - movie frames that create animation - Similar to a series of movie frames - a sequenced ruler used to control the movie and how it plays the elements on the stage - The timeline consists of frames containing vector graphics that are opened at a designated sequence and speed. d. layers - Layers allow multiple animation sequences to run simultaneously and reduce the perceived download time. - Flash graphics can be scaled without file size being affected. - Total Flash? Depends on skill, requirements, audience. - not natively supported in browsers and requires a plugin - When you create a Flash movie, you produce a file with the .fla file name extension. The FLA file format can then be converted and compressed into a SWF (pronounced "swiff") file, which is then inserted into the X/HTML code using the <object> tag (for newer browsers) or the <embed> tag (for some old browser versions) to display in the browser. - both a development tool and a testing tool. - can be used to create objects and images, eliminating some of the need to use other applications to create graphics and then import them. - supports the importation of graphics in common file formats such as GIF, JPG and PNG from other programs. - can also provide effective navigation elements for site navigation. - shapes include lines, ovals/circles and squares/rectangles. - two modes for drawing: 1. Merge drawing mode is default drawing mode. a. automatically merges your drawn shapes when you overlap them. b. Moving a merged shape makes the bottom shape permanent. c. overlapping lines are divided into segments at the intersection points. d. Painted objects of the same color also merge together. e. create masks, cutouts and other negative images. f. should group shapes that you want to keep intact, or separate shapes using layers. 2. Object drawing mode: a. do not automatically merge together when overlaid b. can overlap shapes without altering their appearance when you moving c. more flexibility when creating and manipulating shapes d. no Pen tool - With the Pen tool, By default, selected line segments and anchor points are indicated by the color of the layer on which they appear. - Color and fills can be assigned to most objects placed on the Flash stage. - The Flash stage is the development area in which you place elements, objects and graphics used in the movie. - Fills can be solid colors, gradients or patterns and can originate from other fills or even images. - can fill an area with a selected image or part of an image. - two colors can you change on a Flash object: The stroke and the fill -When a browser encounters a SWF file, the browser uses the Flash Player plug-in to display the Flash movie. - Flash frame types: 1. (Normal) frame - designed to extend the movie to a certain point along the timeline. 2. Keyframe - a Flash frame containing objects that will be displayed in all frames following it, until the timeline encounters another keyframe or a blank keyframe. 3. Blank keyframe - a milestone Flash frame that contains no content. When a blank keyframe is inserted, all preceding content is stopped, and new content can begin. 4. Keyframes take precedence over normal frames. 5. The difference between a keyframe and a blank keyframe is that one has content and the other does not. 6. Flash uses keyframes as milestones(instructions), at which point the movie receives instruction for some new action(provide a break in the movie). - Symbols: A symbol is a graphic, a button or a movie clip that is stored in a Flash movie's library. 1. Symbols can be created after an object is imported into Flash. 2. To convert: select the graphic, specify it as a graphic symbol, and give it a symbol name. After the file is a symbol, it can be inserted repeatedly throughout the Flash movie. - symbol types - Graphics, buttons and movie clips Buttons: triggered by mouse events. 1. can then perform as a standard rollover button, or it can be used to launch embedded movies. 2. can add user-triggered interaction to buttons in Flash by using ActionScript(similar to java-script(client-side)) such as mouse over, or click - Library - allows you to customize and organize your stored items into folders, as you do with the files on your hard drive. - onion skins - to bracket multiple frames to edit those frames simultaneously(display the contents of multiple movie frames). Tweens: refers to creating animation. - In Flash CS4 and CS5, tweening is object-based. - In versions prior to CS4, tweening was timeline-based. - A motion path is the path that an object follows in a motion tween. -The values for the object's X and Y position properties are stored in property keyframes. - There are no morphing frames in Flash. - symbols are stored in the symbol library. - can apply both motion tweens and shape tweens to text. - You can use the Free Transform tool to select and reposition an entire motion path. - You can use the Subselection tool to adjust the curves of the path. -You can use the Line tool to draw a line (or "stroke") in Flash. - A shape tween is a Flash animation in which objects change their shape or form on the stage. objects cannot be symbols. Use if you want to animate a small circle transforming into a large square in Flash. - tween span - A group of frames in the timeline in which an object on the stage can have one or more properties changed over time - You cannot apply shape tweening to symbols in Flash because symbols are reusable shapes that do not change. - two types of motion-related tweens: Classic and Motion - classic tweens are timeline-based and use keyframes. Classic tweens consist of groups of individually selectable frames in the timeline. - motion tweens are object-based and use property keyframes. motion tween spans are treated as a single object in the timeline. objects must be symbols. Use to move an object across the stage. - create tweened animation - You provide beginning and ending frame information, then Flash creates the frame values in between. - Flash Motion Editor: presents a table of properties and values on the left and a corresponding graph on the right. - tweening process minimize file size because Flash stores only the values for the changes in frames rather than all values for each entire frame. -For sound to play in a Flash movie, it must be placed in the timeline. The length of time that the sound will play depends on the sound file itself. - You can place sounds on a separate layer or on a layer that contains other objects(recommended on separate layers). - The location on the timeline in which the sound file is placed determines when the sound file will play. - Flash supports MP3 files on all operating systems, AIFF files for Macintosh and WAV files for the PC. - A Flash movie clip is an animation that is embedded into a Flash movie yet runs independently of the movie. - Movie clips are considered to be Flash symbols - an event sound is downloaded completely before it begins to play. - All sounds must be imported to the library before they can be added to a timeline. - Sound files cannot be convered to symbols. - Compressing sound files can adversely affect the sound quality. - To create a mask, you must modify a layer to a "mask layer" however No modifications to the timeline or to the X/HTML code in which the Flash movie is embedded are necessary to create a mask. - a mask is a special type of layer that covers an area of the stage, allowing a part you specify to show through. - ActionScript statements end with a semicolon (;). -In an ActionScript 3.0 function, a colon (:) followed by the word "void" indicates that no value is returned by the function. - You should advise site users that your site uses Flash content because not all devices support Flash files, and Flash content may be inaccessible to users with disabilities. - You should use ActionScript to create interactivity in Flash. - Dot notation shows the relationships between objects and their parts by listing them from general to specific, separating each part name with a period (or dot). - If you use Flash files in your Web site, you should provide an X/HTML version of the content that is essential to a Web page or to understanding your site.
True statements about HTML
- HTML was originally developed to define structure, not formatting. - HTML is the traditional authoring language used to develop Web pages. - HTML is a cross-platform language that works on Windows, Macintosh and UNIX platforms. - HTML is a true markup language; HTML files are plain text files that have been "marked up" with tags, which are embedded in the text. HTML is not extensible. - HTML standard ensures That hypertext is displayed consistently in various browsers and platforms
In CSS, what are the three basic ways that elements can be positioned?
- Normal: block elements are stacked on top of each other, and inline elements flow from left to right within blocks. - float: The float property can be applied to an element to shift a box as far as possible to either the left or the right. - absolute: Absolute positioning allows you to remove boxes from normal flow and position them precisely within their containing box. Absolute positioning with style sheets allows you to form pages that resemble frames. - able to apply to an element in order to position it at specific coordinates relative to its containing block
benefit to validating XHTML code
- Pages written with validated XHTML will load faster than pages using code that has not been validated. - Validating the X/HTML code does not affect how clearly a document renders in a browser.
True about frames
- Static and dynamic information can be combined on a Web page through the use of frames. -Adaptive browsers, mobile and alternative browsers, and other non-standard browsers typically do not support frames, or offer only limited support for frames. -Frames are an extension of the HTML 3.2 standard and are part of the HTML 4.0 / XHTML 1.0 Recommendations - You can target frames by name or by relationship. - An advantage of using frames is that static and dynamic information can be combined on a page. -Frame sizes are said to be absolute: Pixels
Plug-Ins and Java Applets
- The Flash Player plug-in is available for the Windows, Macintosh, Linux and some other UNIX platforms. - An encoding application is an application that compresses and streamlines your multimedia files for later interpretation and playback. - You should use the <applet> tag to embed a Java applet into a Web page to ensure platform-independence. - You use the <img> tag to insert images into a Web page. - You can use the <embed> tag to define embedded content such as a plug-in. The <embed> tag is new in HTML 5. - In order to specify to update the screen many times per second, you must create a new Java thread that contains an animation loop. The animation loop keeps track of the current frame and requests periodic screen updates. - To create a downloadable file, you must link to a file type that is not natively supported by the browser or its plug-ins. - In relation to Java applets, a class file is a file containing the compiled Java code that runs the applet function. - Java applets use the classid attribute of the <object> tag to reference the location and type of object being embedded (in this case, a Java applet file). - you should provide links to the Web sites offering the plug-ins for the file types you use on your site for users that don't have proper plugins - Java applets must be downloaded in their entirety before they can begin execution. Java applets do not have caching capability, and they must be downloaded again upon each subsequent visit to the Web site. - A Java Virtual Machine (JVM) is required to run a Java program.
JavaScript
- The World Wide Web is based upon the event-driven programming model. - In an object-based model, there is no support for object inheritance and subclassing, and functionality depends on a collection of built-in objects. - In the procedural model, the user is expected to interact with the program in a fairly sequential manner. - An object-oriented program is handled as a collection of individual objects that each performs a different function. - A procedural program is written as a sequence of statements that performs a specific task. - An object-based program depends for functionality on a collection of built-in objects, but does not allow for object inheritance and subclassing. - JScript is the Microsoft implementation of the Netscape JavaScript language. - You should add the language attribute in the <script> tag to your JavaScript code to ensure that the browser correctly interprets the code. - You use the comment tag <!-- //--> to add comments to your X/HTML code. - You use the <!DOCTYPE> declaration to identify which version of HTML you are using. - the default scripting language in both Internet Explorer and Firefox is JavaScript. - VBScript is a scripting language developed by Microsoft that is supported only by Internet Explorer -JavaScript has a short development cycle, a mild learning curve, and is platform-independent. - JavaScript does not need to be compiled before it can be imported into an X/HTML document, nor does it require plug-ins to run on various platforms and operating systems. - In programming terms, an object is a programming function that encapsulates predetermined attributes and behaviors. - A method is an action that a programming component can perform. - A property is an attribute of a programming component. - Java is a full-fledged object-oriented programming language developed by Sun Microsystems, Inc. - JavaScript is a scripting language developed by Netscape. - ECMAScript is a standardized language that contains the common functionality between JScript and JavaScript. - use the alert() method of JavaScript to create pop-up or pop-under windows. - use the open() method to open additional windows. - use the prompt() method to request and capture user input. - In the JavaScript object model, redirection is the process of providing a user with appropriate content based on which browser he or she is using to view your site. - Sniffing is the process of determining which browser is in use. - You can use the JavaScript image object to define the location of graphic elements so they can be preloaded into the cache. - Scripting languages are the component of Dynamic HTML (DHTML) that you should use to interact with tags and styles. - X/HTML and Cascading Style Sheets (CSS) enable you to control page structure, whereas scripting allows you to interact with tags and styles. - Scripting enables you to design a response or function to a user event, such as a mouse move. - You can use VBScript or JavaScript to interact with the Document Object Model (DOM). - In JavaScript, a function is a named block of multiple commands to be executed as a single unit. - A statement is a single line of code to be executed in a script or program. - You can concatenate or link two or more units of information to form one unit. - use the navigator object to access information( test properties) specific to a particular browser. - use the image object to preload images into the browser cache. - use a sniffer to determine which browser is in use. - Dynamic HTML (DHTML) is made possible through the use of script, the Document Object Model (DOM), X/HTML and Cascading Style Sheets (CSS). - JavaScript uses dot notation and features platform independence. - JavaScript is an object-based and event-driven scripting language. - you should use the image object to define the location of graphic elements so they can be preloaded into the cache - In the Document Object Model (DOM), every element in an X/HTML document is referred to as a Node. - The multiple commands that make up a function are enclosed within curly braces { } - Double hyphen (--) and double slash (//) characters are used in HTML and JavaScript comments. - DHTML can be used to replace functions currently performed by Java applets, ActiveX controls or animated GIFs. - DHTML provides dynamic content to the browser rather than the typical static X/HTML, but without the need to access the server each time it receives browser input. It can often serve as an alternative to some server-side technologies such as Active Server Pages (ASP). - DHTML is not a W3C standard. - The term Dynamic HTML (DHTML) describes a group of interrelated technologies (script, the Document Object Model [DOM], X/HTML and Cascading Style Sheets [CSS]) that provides Web page interactivity. - Active Server Pages (ASP) is a server-side scripting technology that can pass information back to a browser. - Common Gateway Interface (CGI) is a simple protocol that can be used to communicate between X/HTML forms and an application. - The Document Object Model (DOM) is a language-neutral way for programs to access and modify the content, structure and style of XML and X/HTML documents. - An event in an X/HTML document is any action that occurs during the life of the X/HTML page in the browser. - An event handler is a mechanism that detects the occurrence of an event, then performs a defined action as a result. - Scripting languages allow you to interact with tags and styles.
selector types for CSS
- The two selector types are tag and class. -Once you have defined a class selector, you can apply it to any individual element. - To define a class selector, you simply add a period ( . ) before the name of the selector, which you can specify to describe the purpose of the formatting. (eg. .important {color: red; text-decoration: underline}.) - To apply a class selector to an element, you add the class attribute to the given element tag. (eg. <p class="important"> Very Important Text </p>.) - Can be applied to multiple elements in a document. - A tag selector defines the style that you use to apply to every instance of an element in the document.
true statements about XHTML
- To be valix XHTML code, Every element has an opening and closing tag, attributes are enclosed in quotation marks, and elements and attributes use lowercase letters. -for a Web page to be XHTML-compliant, A root element that links to the definition for XHTML using the XML namespace element(e.g. include an opening tag for your document such as <html xmlns="http://www.w3.org/1999/xhtml">or/and (<!DOCTYPE>) tag). -ensure that all XHTML tags are typed in lowercase letters. -XHTML combines characteristics of HTML and XML to create a transition from HTML toward XML. -1.0 is the latest version of HTML. -combines characteristics of HTML and XML to create a transition from HTML toward XML -Required: A document type declaration ( <!DOCTYPE> ) tag at the beginning of each document - a benefit of writing your Web page code in XHTML is You provide current browsers with backward-compatibility. - XHTML does not incorporate script to add interactivity, ntroduce new HTML tags, and XML does not include any predefined tags.
Databases
- UPDATE statement to modify an existing database record. - INSERT statement to create a new database record. - DELETE statement to remove a record from a database table. - SELECT statement to retrieve information from a database table. - Hypertext databases store information as objects(useful for storing different types of information, such as text, images and multimedia (video or sound files)). - Distributed databases can be constructed from multiple files and housed at different locations on the enterprise. - Structured Query Language (SQL) is an example of a language used to retrieve or manipulate information in a database(a fourth-generation programming language (4GL)). - A database management system (DBMS) is an application that allows users to manipulate information in a database and offers the capability to create and manage database objects. -Machine language is an example of a first-generation language. - Assembly language is an example of a second-generation language. - Data-driven Web sites such as e-commerce sites generally combine database data with page templates to generate the X/HTML pages that a Web site visitor sees. - ActiveX controls are software components based on Microsoft's ActiveX technology that can be used to enable interactive content on the Web. - use client-side programs to add interactivity to your Web pages. - ActiveX controls and client-side programs are not used to display database data on X/HTML Web pages. - Java Database Connectivity (JDBC) communicates only with SQL-compliant databases. - ActiveX Data Objects (ADO) is a technology used to access various information types, such as spreadsheets, Web pages and other documents. - binary Large Object (BLOB) is a technology used for storage of binary data in a single entry. - A database schema is a definition of the structure of a database system that is often depicted as a graphical reference. - A database field is a column of information that can be sorted and retrieved, such as names or e-mail addresses. - A database record is a complete set of information, such as the name, e-mail address and phone number for one person. - Product pages on e-commerce Web sites are usually data-driven. - Data-driven Web sites are sites that use a server-side program to combine data from a database with page templates to generate the X/HTML pages that a Web site visitor sees. Data-driven sites generally hide the database's structure and data-extraction functionality. - A relational DBMS is a database management system that stores information in a collection of tables, which are related by common fields. - A flat-file DBMS is a database management system that stores information in a single table consisting of multiple rows and columns. - A multidimensional DBMS is a database management system that uses common field values and stores information in organized groups of records. - ASP.NET is Microsoft's platform for developing dynamic Web applications for Microsoft Internet Information Services (IIS). - Common Gateway Interface (CGI) / Perl is a first-generation database/Web page integration language. - Open Database Connectivity (ODBC) is a standard method for accessing a database that supports both SQL and non-SQL languages. -
What should you do to ensure that your keywords help rank your site highly relative to the given search criteria?
- Use both singular and plural spellings of keywords, as well as other variations. - Include combination keywords, such as "mobile phones" in addition to "mobile" and "phones." Studies indicate that as many as 60 percent of all searches use two or more words. - You can include commonly misspelled words in your <meta> tags to help users find your site, but do not misspell words on your pages.
Which of the following describes the relationship between floated elements and other elements in a document?
- When you apply float to an element, it becomes a block box that can be shifted to the left or right on the current line. - Block-level elements above a floated element are not affected by the floated element, but elements below a floated element will wrap around the floated element.
Dreamweaver
- With relative positioning, the positions of elements are specified relative to other elements. - With absolute positioning, CSS is used to specify the exact pixel positions of elements on a page. - With absolute positioning use 800 pixels to ensure the most usera avalable to view your page. - There are no options for "horizontal" positioning in Dreamweaver. - To conform to the layout of most programming tools, the panel groups in Dreamweaver's Coder workspace are located in the left pane of the interface window. - In Dreamweaver's Classic workspace, the panel groups are located in the right pane. The Properties inspector is a window separate from the panel groups. - The biggest difference between the Coder workspace and the Classic workspace in Dreamweaver is the position of the panel groups in the workspace window. - The features available in the panel groups and in the Properties inspector are the same in each workspace. - When you import existing X/HTML code into Adobe Dreamweaver, you need not reformat any code. - You use behaviors to add interactive elements to a Web page. - You use AP elements for absolute positioning. - In Dreamweaver, the Classic workspace opens Web pages in WYSIWYG mode by default. - The Coder workspace opens Web pages in code view. - he Insert bar is a component of the Dreamweaver interface, but is not a Dreamweaver workspace. - To conform to the layout of most programming tools, the panel groups in Dreamweaver's Coder workspace are located in the left pane of the interface window. - In Dreamweaver's Classic workspace, the panel groups are located in the right pane. - Raymond has chosen to develop his Web site using Dreamweaver because he can add advanced elements such as DHTML to his pages with no manual coding. - Dreamweaver can be used to manage Web files that you create, but you generally cannot obtain all the files for sites you find on the Web. - Dreamweaver is not designed to teach you X/HTML. - You should use relative positioning whenever possible in order to accommodate users with various screen resolutions. - In absolute positioning, CSS is used to specify the exact pixel position of elements. - There are no options for "horizontal" positioning in Dreamweaver. - You should use the panel groups in the right pane of the Dreamweaver interface to access the behaviors, files and assets of Web projects. - you should use the document window to work with the elements on the Web page you are designing. - You should use the Insert toolbar to specify the type of page you want to design( view page elements as menu items and tabs). - You should use the Properties inspector in Dreamweaver to access the characteristics and attributes of the currently selected object. - Dreamweaver is designed to be used by application developers, programmers and Web designers. - The biggest difference between the Coder workspace and the Classic workspace in Dreamweaver is the position of the panel groups in the workspace window. - can best be described as A GUI X/HTML page creation and Web site management tool
ID selector
- You add a hash mark (#) before the name of a selector to define it as an ID selector. - It can be applied to only one element in a document(ID selector used in a document is unique).
colors
- additive colors - Colors that create white when mixed together(computer monitor) - subtractive colors - Colors that create black when mixed together - In print media, all colors are a combination of cyan, magenta, yellow and black; this color scheme is referred to as CMYK. - Red text on a black background is often associated with hostility
Microsoft Expression Web
- best be described as A GUI Web site development application - writes clean code that is compliant with XHTML 1.0 Transitional by default. - universal X/HTML editor becuase Its ability to open individual files or entire Web sites - similarity to other Microsoft Office applications(menus and toolbars ) reduces the learning curve for users familiar with Microsoft products. - The WYSIWYG interface for X/HTML design makes Expression Web a GUI editor. - three distinct functions within the application to assist in the overall development process: site management, page layout and design, and data connection. - data connection function allows a Web developer to Generate content with dynamic data - The page layout and design function allows developers to choose among tables, frames pages or CSS positioning for page layout, as well as HTML code preservation, multimedia and scripting technologies. - When you choose to create a new Web with Expression Web, Expression Web creates a special Web folder that contains all the necessary subordinate folders and files(Subfolders named _vti_cnf and _vti_pvt that contain Web site metadata). - The Split subview of Page view provides the ability to edit X/HTML code directly while seeing its effect on the rendered page. - Page view provides the ability to preview the current page's appearance in a Web browser and the ability to view the current page's layout and design. - Transitioning from FrontPage to Expression Web requires a bit of a learning curve, in some cases forcing the Web designer to learn standards-based methods for adding specific features and functionality to their Web sites. Web designers should understand CSS positioning to most effectively use Expression Web's CSS layout features. - If you create a Web page using an Expression Web template, your page will validate, but you must provide alternative text for the images you use on your Web site. All areas of the template are locked by default; you must define editable regions to allow changes. to present their own unique content, you must define particular areas in your dynamic Web template as editable regions(locked by default). - Expression Web creates clean, W3C-compliant code. - Relatively positioned layers may move over or under an absolutely positioned layer, depending on the z-index setting of the particular layers. - default image map shapes: Rectangle, circle and polygon - Advanced page layout can be performed using X/HTML tables, X/HTML framesets and CSS positioning. - use dynamic Web template to ensure that all your site pages consistently adhere to the site's design specifications - when the size of a relatively positioned layer changes, other elements on the page adjust to compensate. - pasting text from Word documents into a Web pages: The pasted code may not be up to current XHTML and CSS standards and will remove the structure tag pairs (<html>, <head>, <title> and <body>) so that no duplicates will exist. Common problem generated: Use of deprecated tags - Absolutely positioned layers do not move. - Setting the float property can cause a layer to move to a particular edge of the browser window. - There are five possible settings for the position property: absolute, fixed, relative, static and inherent. - You can create a navigation bar using CSS by basing the navigation bar on an unordered list. - When you nest one division inside another, the containing division becomes the parent element. - The absolute, fixed and relative position properties allow you to work with <div> tags in the WYSIWYG editor - A division with the inherent or static position properties will not display in the Layers panel. - when the size of a relatively positioned layer changes, other elements on the page adjust to compensate. - Styles can be applied three ways in Expression Web: They can be linked, embedded or inline styles. - Expression Web does not support imported styles. - you must be running Microsoft Expression Development Server on your local computer in order to preview ASPX pages. - When you are building an ASP page in Expression Web, a data source control provides the mechanism for connecting to a data source. - If you want to define a set of properties for a single item (or block of items) on a Web page, you should use inline styles. - When you use a data view in Expression Web to integrate XML data on an HTML page, you will not be able to update the integrated data on the Web page because this data is read-only. - The two types of ASP.NET controls that you can add to an ASP page in Expression Web are data source controls and data-bound controls. - you can use an existing style sheet, or you can define your own styles and link your site pages to them.
CSS2
- can optimize font type so pages will render properly in a specific environment. - you can determine a document's appearance based on whether it will be presented onscreen, in print, with a speech synthesizer or using a Braille device. - supports bi-directional rendering for languages that are not read left-to-right such as Arabic or Hebrew. - The need for the browser-proprietary <layer> tag is eliminated with CSS2, which provides a z-axis that allows elements to be stacked on a page and displayed accordingly. - determines the display of paged media (such as transparencies) using a page box with finite width and height. This feature provides areas that act as page breaks between information for transfer to print media. -optimizes the use of voice synthesizers for hearing-impaired users using Aural style sheets - allows you to form pages that resemble frames by using a z-axis with Absolute positioning.
maximum page effectiveness
- ensuring that each page contains approximately 50 percent less text than a printed version of the same information would contain -
dithering
- is the process by which the browser approximates a color to the closest browser-safe color it supports. - is the approximation or reconciliation of colors between an image palette and the system palette. - process works by placing two colors from the system's palette next to each other in order to trick the eye into seeing a third color that is desired but not part of the palette.
Balance a webpage
- symmetrically balanced page - Ensure that all elements on one side of the page are mirrored on the other. - Asymmetrical balance page- a single object on one side of the page is balanced by a number of smaller (or more lightly colored or weighted) objects on the other side. - Radial balance page - when elements on the page radiate or spiral out from a central point.
perception and presentation of a Web site
-A company's style, culture and mood can be conveyed by the COLORS presented in the site and how they blend, coordinate or contrast. - a Web site with primarily hard, bright colors such as red, pink, yellow and green may give the impression of a flashy, artistic type of industry and culture, such as a high-tech software design or graphic art firm. - a site with more subdued colors such as white and soft blue or gray might be perceived as a more conservative or traditional organization.
true statement about XML
-Must be well-formed. -All attribute values must be enclosed in quotation marks. -To be well-formed, all tags must be explicit; they cannot be inferred. XML offers the user the ability to create an infinite number of markup tags. -XML is not an application of SGML but a subset of SGML. it is a metalanguage. -Well-formed XML documents must include a root element, which is the container tag that encompasses all other elements in the document (similar to the <html> tag in an HTML document). -All properly declared tags inside the root element must nest in the correct order. -in XML, letter-case specificity is required - All tags must match in case - either uppercase or lowercase - to be considered part of a matching set. -Documents that need persistence over time should be written in XML. -A document that is well-formed and contains a Document Type Definition (DTD) -You must nest tag pairs one within the other.
What should you do to enhance the placement of keywords in your site?
-Place a site description using as many keywords as possible early in the <body> tag within the first 200 characters. - Remember that users will read this information, so it must make sense. Also, include the keywords in other areas of the document, including the last sentence. - Use the alt attribute of the <img> tag to include keywords. - Do not place a banner ad at the top of your home page. Using the alt attribute and hyperlink this way describes keywords other than your own. - Manually submit your site to earch engines
Mindmapping
-a process that allows you to structure ideas on paper in the order your brain follows, rather than the linear process normally used when documenting ideas. -Mindmapping is a process of moving ideas from thought to document. -best be described as A dynamic sketch
Accommodating mobile browsers
-do not handle client-side scripting (e.g., Jscript) very well. -Stick to basic XHTML and style sheets, and avoid interactive elements. - Avoid using static page widths, and keep in mind that users are paying for the time they are using their devices, so use few words and small images so that your pages load quickly.
empty tags
-tags that contain the relevant information within the tag boundaries but enclose no document text are called. -You must include the forward slash character ( / ) at the end of the tag(in XML).
<noframes> tag
-to specify alternative text that will appear to users whose browsers cannot support frames. - If browser supports frames - The text specified in the <noframes> tag will not appear. - Placement: It must follow the closing </frameset> tag and precede the opening <body> tag. - For a message to show on users that do not support frames use: the <body> tag
Web Content Accessibility Guidelines (WCAG)
1.0 is a specification that divides usability conformance requirements into a hierarchy with three levels. 1. provide equivalent alternatives to auditory and visual content 2.
The browser-safe color palette is limited to
216 colors. Dithering will not occur if you limit colors to those in the browser-safe color palette. An 8-bit color display can only display 256 colors at one time. A 16-bit display can display 65,536 colors at once.
push technology
A Web delivery format that allows Web page content to automatically download to a computer at user- defined intervals.
What is a frameset?
A Web page that defines a set of frames in which other Web pages are displayed - Purpose: To create independent window panes in which a constant navigation frame is maintained
In relation to X/HTML documents, what are styles?
A set of formatting instructions with which one change can affect multiple X/HTML elements
Which choice correctly describes the use of tag selectors to define CSS styles?
A style defined for an element is applied to every instance of that element in the document.
Graphics applications commonly used in the industry supports both vector and raster graphics
Adobe Fireworks CS5
paint-type application
Adobe PhotoShop CS5. Creates raster images from scanned photos and video frame captures, or can be used to create original artwork. A raster graphic is an arrangement of small dots, and each dot corresponds to a pixel on the screen. Raster graphics are best suited for photographs and realistic graphics. Raster graphics include the JPEG, GIF and PNG formats. do not use XML
project objectives
All stakeholders must understand and agree to the project objectives, assumptions and constraints. -objectives are the yardstick by which the success or failure of your Web development project will be measured.
Which of the following is an example of on-site analytics?
Analyzing the server logs
Sans-serif fonts
Arial and Verdana are examples of sans-serif fonts. sans-serif fonts are used for small (smaller than 8 point) and very large-scale text, such as footnotes and headlines
Why is using pay per click (PPC) not considered an organic method for improving page ranking?
Because with pay per click, you pay to have your page listed as highly as possible
What are the two types of boxes you can use in CSS?
Block: Block boxes are created by block elements such as <p> and <div>, which are formatted visually as blocks or large sections of content. Block elements are stacked on top of each other in CSS inline: Inline boxes are created by inline X/HTML elements such as <b> and <span>. inline elements flow from left to right within blocks in CSS
How is a descendant selector defined?
By creating a list of selectors separated by white space
To eliminate or minimize the default page margins that border every web page
CSS or Set margin attributes in the <body> tag
Open-Source GUI Editors
Common features : - A word processor-style interface - HTML code editing - The ability to upload pages - Code validation - Spell checking - Default code choice (HTML 4.01 or XHTML 1.0) - Preview mode - CSS editing - The ability to insert code - Color choosers - Tag completion - Search - Code choice(, usually between HTML 4.01 Strict and XHTML 1.0 Transitional or XHTML 1.0 Strict) - Template choice Drawbacks: - Limited features - Lack of group editing support - Developer issues - Transient support
When scanning images from a print source or importing pictures from a digital camera for use on the Web, it is generally accepted that you should set the resolution to " " in order to display the image onscreen at approximately the same size as the original image.
DPI
absolute sizing
Expressing the size of frames in pixels(frame remains constant regardless of browser window size).
Which of the following is a technology that converts XML into HTML?
Extensible Stylesheet Language Transformation (XSLT)
File formats that are natively supported by all browsers
GIF and JPEG
online image optimizer
GIFBot from NetMechanic. you simply enter a URL for the images. The online program visits the site to download and optimize the images, then grants you access to the optimized images.
desktop image optimizer
GIFCruncher from Spinwave.com. The images being optimized need not be made available on the Web for the service to access them.
WYSIWYG(What You See Is What You Get)
GUI site-development tools use a display format in which the file being edited appears on the screen just as it will appear to the end user.
In the late 1960s, as computers started to be used widely in certain arenas, a layout language was designed to provide a standard language for specifying formatting information so that printed documents would look the same, regardless of the hardware used. What was the name of this language?
GenCode: Generalized Markup Language (GML) and Standard Generalized Markup Language (SGML) are the successors to GenCode.
scope creep
Gradual increases in project scope that can undermine the success of a project.
What differentiates HTML 4.01 from HTML 4.0?
HTML 4.01's support of Extensible HTML (XHTML)
HTML contains a finite set of elements, which are entered into pages as tags. What does this fact suggest about HTML?
HTML is not extensible.
The usability of a site can be divided into several distinct elements that are essential to high-quality design
High-quality content, Easy navigation, Coherent information architecture ,Search capability, Relevant services. The combination of these elements determines usability. Each element has equal importance — removing even one element will diminish usability.
Why is white space important in Web page layout?
It reduces clutter and helps visitors to scan pages more easily.
Which of the following factors prevents the widespread adoption of CSS positioning today?
Lack of experience and knowledge among Web designers
PNG
Lossless compression and high, adjustable color depth
Web design tools that implement Dynamic HTML (DHTML) functions that will take advantage of available technologies
Microsoft Expression Web and Adobe Dreamweaver
Which of the following will result from using XML to create more specific structure and defined content than is possible with HTML?
Much more refined Internet searches
The three major site characteristics are
Navigation(controls the user's movement through the site), Interactivity(forms for users to complete and submit) and Database integration(allows Web pages to use dynamic data, often in conjunction with interactivity).
In typographical terms, what is a pica
One pica = 12 Points
Portable Network Graphics (PNG) features
PNG files are lossless, support transparency, support compression and support high bit depth(can be adjusted). - Creating a graphic in PNG with layers, they are not supported by GIF or JPEG formats. When converted to these formats will no longer be able to manipulate.
A significant discrepancy between an image's bit depth and the system's bit depth will cause
Palette flash
The golden ratio
Phi (1.62)
trackback link
Purpose: It creates a link back to your blog as a comment. - The trackback automatically creates a link back to your blog as a comment.
<meta> tag
Purpose: To specify information about a Web page that does not affect its appearance - Each <meta> tag requires the content attribute and either the name or http-equiv attribute. - correct syntax: <meta name="nameValue" content="contentValue"/> - A Web page's expiration date, author, keyword list and search engine description are defined in the <meta> tag - When you use the <meta> tag name attribute value of "description," the content attribute contains values that provide a synopsis of the site content in some search engine results. - You use the http-equiv="pragma" attribute and value to control the page cache to the browser folder. - When you use the <meta> tag name attribute value of "keywords," the content attribute contains values that a search engine can match to search text entered by users. - The <meta> tag name attribute takes the "keywords" value for use with search engines. - You use the http-equiv="expires" attribute and value to define a date when the file will be considered expired in cache, and a new page request will be generated. - To change a Web page after a specified delay without user interaction, you can use the http-equiv="refresh" attribute and value. - The <meta http-equiv=""> tag is equivalent to an HTTP header. - the <meta name=""> tag, the information specified in the <meta> tag will not be added to the HTTP header, but will remain in your X/HTML document. - to redirect them automatically to home page, use <meta http-equiv="refresh" content="seconds;URL=http://site.com"/> - Certain pages should not be indexed by search engines, use <meta name="robots" content="noindex"/> - to prevent the Web crawler from following the links on his home page and indexing the linked pages use content="nofollow" - The "noimageclick" content attribute value prevents links from pointing directly to images; only links to the page will be allowed. - The "noimageindex" content attribute value prevents the images on the page from being indexed, but the text on the page can still be indexed.
RGB color values
RED 255,0,0 GREEN 0,255,0 BLUE 0,0,255 WHITE 255,255,255 BLACK 0,0,0
Hexadecimal color values
RED = FF0000 GREEN = 00FF00 BLUE = 0000FF WHITE = FFFFFF BLACK = 000000
term for the container tag that encompasses all other elements in the document
Root element
serif fonts
Serifs improve readability by leading the eye along the line of type. Example of a serif font: Times New Roman. Serifs are the small decorative strokes added to the ends of a letter's main strokes. often used for body text.
What can you do to prevent any elements from wrapping around the sides of a floated element?
Set the clear property to both.
external style sheet
Style sheet files should include only style information. - X/HTML tags should not be included in your plain-text style sheet file.
The HTML or XML code that appears inside angle brackets and that begins or encloses the document text is known as:
Tag
function of tags
Tags provide instructions to programs designed to interpret HTML.
interactivity
The ability for software to respond differently to the user's actions; the system's response is directly communicated to the user.
In typographical terms, what is leading?
The amount of added vertical spacing between lines of type
Consider the following code: <td width=25%> </td> Which statement about this code is true?
The code is correct in HTML, but incorrect in XML. HTML does not require attribute values to be enclosed in quotation marks. By contrast, XML does require that attribute values be enclosed in quotation marks.
Differences between HTML and XML
The coding requirements for XML are much stricter than those for HTML.
Which of the following attributes does each <meta> tag require?
The content attribute and either the name or http-equiv attribute
In typographical terms, what is an em?
The distance horizontally equal to the type size, in points, that you are using
What is a disadvantage of adding HTML extensions to broaden HTML's initial focus?
The extensions provided false structure by replacing tags that had previously been used to define content structure.
disadvantage of adding HTML extensions to broaden HTML's initial focus?
The extensions provided false structure by replacing tags that had previously been used to define content structure.
Web site vision statement
The fundamental framework that defines the scope and intent of a Web site. Purpose: It helps everyone involved in the development process focus on fulfilling the intended vision. Should include A value and a measurable goal.
According to the International Organization for Standardization (ISO), what is usability?
The measure of how easy a given item is to use
Design process from bottom-up
The site's look, feel and functionality emerge as you develop various scenarios from the user's viewpoint. - best describes the Web development process
Example of a Web site design specification
The standard sizes in which the company's logos can appear for designated uses
In typographical terms, what is a measure?
The width of a body of type
statically positioned divisions
They are part of the normal document flow and, like layers, allow for flexible page layouts. - in compliance with current standards and are inserted with no set properties. By default, they appear as wide as their containers and will stretch vertically to accommodate content.
true of floated boxes
They follow the same rules as boxes using normal flow. - The float property can be applied to an element to shift a box as far as possible to either the left or the right. - For example, if two boxes are floated to the left, the one that appears first or highest in the document code will appear on the page above the content that follows it.
search engines
They use an automated process to follow Web hyperlinks and index the content that they find. This process, sometimes called a "robot" or a "spider," is used to discover new Web pages. - first component a search engine looks for to determine whether a Web site matches a search query is The keywords in the <title> tag.
Common fonts
Times New Roman(PC) (Times(MAC)) & Arial (PC)(Helvetica(MAc) RECOMMENDED - Sans-serif - If multiple fonts listed, The browser will use the first font in the list found on the end-user's site.
"three-click rule" for managing user access to linked files:
Users should not need to click more than three times during their navigation of a site to find the information they seek.
Scalable Vector Graphics (SVG)
Uses Extensible Markup Language (XML) to describe certain shapes. Scalability, searchability and scripting events. SVG files an be easily manipulated with Web programs to support zooming, rotation, movement and other types of image manipulation.
What reflects a conventional scheme for using typefaces in a Web page?
Using a serif font for body text and a sans serif font for headings
Which of the following can be defined as persuading users to spend time on your Web site and return to it in the future?
Web site strategy
Which of the following statements about XHTML is true?
XHTML documents can be used, viewed and validated by both HTML and XML processors.
if you Forget to close tags
XML - will not render the page HTML - will infer what the closing tag should be and render the page. If you use the wrong tag, the browser disregards it and renders the document, no matter how ill-constructed the document is.
<a> tag
anchor tag. - The target and name attributes of the <a> tag are used to specify locations to which you can anchor your links. - use the name attribute to point hyperlinks from the navigation frame of your frameset to the main area of your browser window(<a name="anyName"> tag) - The href attribute of the <a> tag specifies the destination of a link. - The src attribute of any tag specifies the name of the file that will appear in the tag. - target a frameset link by relationship using the target attribute - The name and target attributes are used with the anchor tag, <a>.
Tag selectors
are automatically applied to every instance of a given element in a document.
Patent
are awarded for practices and processes that solve a problem or embody a new way of doing business.
raster graphics
are created using actual dots of color, making a raster graphic larger decreases the image resolution. - are created using actual dots of color, making a raster graphic larger decreases the image resolution. - Increasing the size, The image resolutions will degrade.
Landmark pages
are pages to which all other pages are hyperlinked, such as the home page or search page.
Moving Picture Experts Group (MPEG) Audio Layer-3 (or MP3)
audio file format is a lossy compression format, yet can reduce an audio file's size by up to 12 times while retaining almost the same fidelity with little or no noticeable difference to the average listene
With respect to style sheets, inheritance is the ability for styles that you apply to an element to:
be passed down to child elements.
Primary navigation elements
consists of the navigation elements that are accessible from most locations within the site. E.G. an About Us link.
XHTML Frameset
contains the elements necessary to create documents using framesets. - supports the use of frames to partition the browser window into two or more adjacent windows.
SEO professionals are expected to lead users to a:
conversion - typical conversion is a purchase of a good or service on a site or capturing user personal information, demographic information or user preferences
<td> tag
create visual separations between table rows and cells - Height and width attributes
Many longtime Web developers are skeptical of using GUI Web-development applications to develop Web sites because older versions of Microsoft Office products and FrontPage (Expression Web's predecessor):
created convoluted and difficult-to-understand code.
XHTML Strict
enables you to use Cascading Style Sheets (CSS) but disallows the use of layout and style elements
GIF files
exist in two versions: 87a and 89a. 87a format limited to a display of 256 colors. most of the GIF's advantageous features, such as small file size, lossless compression and transparency. The 89a version of GIF also supports animation and interlacing.
Information portals
find new Web pages based on manual submissions only.
use { }
for style attribute - must be followed by a colon and an appropriate value. Multiple attribute/value pairs can be separated with semicolons. All should be enclosed within curly braces { }.
XHTML Transitional
includes all the HTML 4.0 features, such as style sheets, and allows you to use some deprecated elements. It is also compatible with older Web browsers.
A style sheet is a predefined structure for X/HTML documents that:
includes heading fonts, text layout commands, graphic object placement, and other design guidelines.
Positional awareness
includes understanding any parent, peer or child pages relative to the current location.
three elements in the spiral concept of user interaction
interest, activity, resolution
Frame sizes are said to be relative when they are expressed in terms of:
percentages
Internet access layer
refers to functionality that includes the protocols for communicating with remote Web sites, ranging from HTTP to various encryption types such as SSL.
navigation layer
refers to functionality that tracks locations that the user has visited on the Web, and helps the user go where he or she wants to go.
presentation layer
refers to the browser window that displays the page requested by the user.
Section 508 of the Rehabilitation Act
requires that all electronic and information technology developed, procured, maintained or used by federal agencies be comparably accessible to users with disabilities.
Metadata can be best described as:
the content in an XML or X/HTML document that is not intended to be seen by the user.
CSS treats every element in a document as a box. Every box has a content area surrounded by padding, a border and margins. This makes positioning with CSS possible because:
these components have configurable properties, which can be controlled using style sheets. This ability makes positioning with CSS possible.
use ( " " )
to enclose tag attribute values.
use ( < > )
to enclose tags.
text-decoration
underlined text
Design specifications
used to plan the general look and feel of the site, including the fonts, colors and images that will be used. -
The HTML 2.0 standard was the first to include support for:
user input fields(for forms).
http-equiv attribute
values that control the browser's functions include "refresh", "expires", "pragma", "set-cookie" and "window-target".
<layer> tag
was an early technique for positioning elements on a Web page.
