Graphics Reference
In-Depth Information
WEB DESIGN TECHNOLOGY
There are many ways in which websites can be built, and designers
often rely upon specific methods and tools that work best for their
needs. However, designing websites generally involves three layers of
functionality: structure, presentation, and behavior. HTML specifies
the structure of content, controls the presentation of the content, and
JavaScript, a scripting language that is usually embedded directly into
HTML pages, and provides websites with interactive capabilities. With
the release of CSS3, interactivity can also be achieved through style
sheets. These three types of markup and scripting provide capabilities
for controlling the layout of content; typographical specifications such
as font, size, and spacing selection; and interactivity on the web.
Supporting JavaScript are cross-browser JavaScript libraries,
collections of JavaScript code that emphasize interaction between
JavaScript and HTML. A popular example is jQuery, a fast and concise
library containing a store of commonly used functions, shortcuts, and
animation effects that allow designers to create interactive interfaces
for web applications. Other libraries include ProtoType, YUI Library
(Yahoo), Moo Tools, Scriptaculous, and Dojo. Libraries are often
extended by plug-ins and/or modules that combine functions into a
specific interface component like a slideshow, an interactive behavior
like an animation, or a custom event that triggers a reaction, like
changing the background color when scrolling past a specific section
in a page.
HTML
HTML (hypertext markup language) is a set of markup tags or code
that describes the hierarchy, structure, or function of content to be
displayed in a web browser. Every item to be displayed on the page is
marked up with these tags. Divisions within the content are articulated
and the order of the information is established, much like a traditional
outline (Fig. 8-24 ). The on-screen typographer can quickly mark up
content to establish hierarchy, promote connections between different
types of information, and construct flow.
Operating systems (OS) and web browsers
Viewing web pages set in typefaces that are not installed on a computer
results in a carefully designed web page being rendered in different
fonts than those used in the original design. Different set widths and
letterform designs can totally change the appearance of the page layout
and type. Fonts can be embedded in web pages, but often these are not
downloaded and displayed. CSS permits a designer to list a string of
commonly available fonts (for example, Georgia, Times New Roman,
Times) that are frequently installed on computers. The computer will
set the text in the first available font from the list.
In response to this limitation and problem, CSS now includes
the @font-face property, which allows web pages to embed virtually
any typeface. Through this technique, the number of on-screen fonts
available to designers is dramatically increased. Typically, an @
font-face declaration specifies several different file types, since there
is no one standard for all browsers. This, however, allows @font-face
embedded fonts to render correctly on any modern browser.
Accurate on-screen type display largely depends upon the
operating system in use and a user's choice of web browser. Every
web browser features a layout engine that decides how it will render
type on the screen. These engines determine how web designs are
generated and visualized. Most browsers, however, defer to the text-
rendering engines of the operating system to determine the look of the
typography. What this means for the web designer is that browser/
OS combinations must be checked to ensure that particular fonts are
accurately rendered on the web.
On a Macintosh computer, each and every web browser utilizes
Core Text, the system default text-rendering engine, along with
OS font-smoothing (antialiasing) settings. Browser preferences do
not affect the way type is antialiased. Therefore, the appearance of
typography on a Macintosh remains the same regardless of the browser
in use. This, however, is not true of every OS/browser combination.
CSS
CSS (cascading style sheets) control the presentation of information
contained in an HTML file (Fig 8-24 ). All aspects of how a page looks
and is visually structured are specified via CSS. Using style sheets,
designers have the ability to control page composition; specify exact
type sizes, weights, and styles; and manipulate interletter, interline,
and interword spacing. As discussed in Chapter 3, these aspects
are major determinants of typographic legibility. Style sheets can be
embedded within a single HTML file or externally linked.
Advances in CSS, including the new CSS3 specification, have
greatly increased the designer's control over layout. Rotation, layering,
insets, and other sophisticated typographic forms of expression can
now be implemented on screen via CSS. Additionally, the CSS3
“transform” property allows designers to construct interaction without
the need of learning a scripting language like JavaScript. Most CSS
properties can be transformed, either individually or in combination
with other properties.
JavaScript and JavaScript libraries
JavaScript is a scripting language widely used to create dynamic,
interactive web pages. It is maintained as source code embedded
in HTML pages, which are otherwise static rather than dynamic.
Web developers use JavaScript to validate form input, create image
rollovers, and open pop-up windows, among other things.
 
Search WWH ::




Custom Search