Entries by Steve Monas

Absolute Positioning

Sticky Postings

Introduction Posted by Steve Monas in 0 on Friday, January 5. 2007

Comments (0)
Trackbacks (0)

Where do we start? Well if we follow the advice of our wise old ancestors we should ‘start at the beginning’. This book starts somewhere in the middle. Well, that may be a good place to start if you have some knowledge of what went before and have some understanding of the direction in which you want to head.

Since you have picked up this book to read, we must assume that you do know what went before and what is to come after. Nevertheless, we must begin at the beginning if we want to identify and root out misconceptions about web design. Else we may find ourselves in difficulties. We may not understand or appreciate the problems of positioning elements and the throes of positioning them absolutely. So following the dictums of the ancestors we shall begin at the beginning.

The web page is a derivative of the physical paper. However, it does not suffer from the limitations of a physical paper. Using paper is all about control. Its size is fixed. Its fonts cannot be fixed by the reader. It will remain same at the point of creation and at the point of distribution. The reader has no option but to accept what he gets!

The web page is different. Its dimensions can be changed. The fonts can be changed; the look and feel can be changed. It is dynamic and pliable and fully capable of adapting itself to the visualization of the web designer. It can be customized to the needs of the user. It can be made accessible to the blind reader or cater to those who can see and hear. Software can be made to read the page for the visually impaired or adapt itself to Braille for those who read with the fingers. The presentation is only limited by the vision of the programmer and determined by the needs of the user.

Unfortunately, the web page seems to have broken all bounds and become uncontrollable. The designer cannot ensure that the web page remains the same at the point of creation and distribution! It takes on the shape of the window in which it is displayed and distorts the positioning of the elements that the designer so carefully laid out on the page!

The chameleon like quality of the web page has exercised the minds of the web designer and the end user alike. It is a common plaintive theme that can be found in web design discussion forums and books that have been churned out on web design. The novice and the experienced, cry hoarse over the problem of control in web pages.

“How do we control the look and feel of the web page in multitude of browsers and desktop resolutions?�?

“How do we ensure that the elements are positioned as designed in the final output that appears before the user?�?

The web designer must acknowledge the sad fact that he has no control over the display of his page. The reality he encounters is a far call from the ideal that he wants! He can at best attempt to direct the user experience. He will have to second guess the platform differences and resolution logic. He will have to try to render every page pixel perfect.

Therefore, before we start on this book about absolute positioning it is important to understand that positioning of elements is a challenge and absolute positioning of elements is an absolute challenge.

The designer is not God. He needs to rethink his role, to abandon control and seek a relationship with the page that has nothing to do with the “what we see is what we get (WYSIWYG)�? world. He must accept that he needs to create adaptable pages in which content and appearance are two distinct elements. He must appreciate that it is the nature of the web to be flexible. So he must begin the journey by letting go of concepts of control of web pages and accepting that flexibility is the first mantra web design.

If the dreams of a killer website have taken a beating, it is time to say that you have no cause to despair. Killer web pages have been created and continue to be created despite thes problems. However, concerted efforts are being made to discipline the web page. You may soon find that you have tools which enable you create web pages that look the same and display the same whatever the browser, the platform or the device!

Microsoft, Netscape and Opera have rallied forces to deliver standard compliant browsers. While these standards do not provide you with complete control they at least help you create web pages that look fairly good on desktops and palmtops alike. The expectation is that you separate structure from presentation using semantic XHTML and CSS layout and do not get carried away with false convictions that backward compatibility with older browsers is a possibility. The web designer must understand that bygones will be bygones and they must let go of those browsers and push the new ones that are taming the world of web design for him.

Now that the decks have been cleared of all misconceptions you are really ready to get started. So let me tell you what this book is all about.

This book is about web designing as you have guessed. It is also about the problem of control. It is about positioning elements and advantages of absolutely positioning them. It is all about the challenge you are about to take up and the truths you are going to be forced to accept. So if you are ready, turn the page and begin your journey of discovery.

Tuesday, January 9. 2007

Absolute Positioning? Absolutely Not! Posted by Steve Monas in Chap 05 at 02:31

Comments (0)
Trackbacks (0)

Absolute Positioning? Absolutely Not!

Absolute Positioning? Absolutely Not!

Absolute Positioning? Absolutely not! This reaction to the process of absolutely positioning elements on a web page is understandable but not justified. Why ever not? Absolute positioning provides the designer with certain advantages and a quite a few disadvantages too. However, before we actually set out the long list of advantages and disadvantages, let us look at the concept of absolute positioning.

Defining Concepts

Absolute positioning defines the x and y coordinates of an element with reference to the top left corner of the browser page or the containing block and the position attribute is set to absolute. The code will read as under:

Note that the right and bottom coordinates have not been defined. So the text moves to the right and the bottom of the page. Specifying all four coordinates will give you greater control over the element.

Absolute positioning removes the element from the normal flow of the document and it does not impact the other elements on the page when the page is loaded. This means that the element is placed in an arbitrary position somewhere in the viewport and its properties are set by the top, bottom, left and right attributes.

A point that needs to be noted here is that if the absolutely positioned element is a child element of another element which has not been placed static, then the absolutely placed element will not be placed relative to the viewport, but relative to the parent box. In the following code three boxes have been specified. When the code is executed, box one will be placed relative to the view port. Box two will be placed absolutely and box three as the child of box two will be placed relative to box two.

#one {
position: absolute;
top: 1em;
left: 1em;
}
#two {
position: absolute;
top: 3em;
left: 2em;
}
#three {
position: absolute;
top: 0.5em;
left: 0.5em;
}
<P ID="one">This is box one.</P>
<DIV ID="two">
<P>This is box two.</P>
<P ID="three">This is box three, which is also inside box two.</P>
</DIV>

One common use of absolute positioning is for creating columnar layouts for the web pages. You would probably create two Div ID to represent the columns and define a block of text within each <Div>. This can also be achieved by defining the following style sheet.

#columns {
position: relative;
top: 0;
right: 0;
padding-right: 10em;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 9em;
}
In this code we have set the position of the container to relative and the position of the boxes absolute with reference to the container. A right padding of 10em is included to make the necessary room for the box. Margins are not set. The width of the element is inside its margin and contains the padding. If the margin is set it will to the right of the text and the positioned box!

The user agent or the application that processes the web page such as the browser selects the initial containing block. It also could be related to the veiwport.

It is ok to assign negative values to the absolutely positioned elements. However, this may result in non-display of the element.

Layers can be used to absolutely position elements on a page. Layers are created using the div tag as in the following code:

<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

It is possible to position the layer and also define its dimensions. However, the latter is optional. Absolute positioning can use absolute (px) and relative (%) units of measurement.

The advantage of using layers with div tags is that they load faster. All the style information is contained in the attributes added. The overlapping layers can be created using the z-index command. The values assigned to the z index will determine its order in the stack. The higher the index the closer the div will appear to the front of the page. The layer that holds the page’s content should be given the z index of one so that users can read the content and click on the navigation elements.

Absolute positioning gives complete control over the elements of a web page to you. Once the element is pulled out of the flow it can be placed anywhere in the page and this will allow you the freedom to display your content before your navigation structures become visible. This enables you to provide the user with optimum accessibility and to optimize your content for search engines.

However, absolute positioning can cause problems of overlapping if adequate care is not exercised. Layouts that use absolute positioning for columns can have problems with footer display if the column length is not correctly estimated.

Comparing Concepts

Most users are confused between absolute and relative positioning concepts in CSS. This is because of the coordinate system within which the block is placed. The block then depends on the positioning context and there is no universal set of coordinates to guide the designer. Whenever a new block is placed on the page it creates a positioning contexts for its descendents with reference to the upper left hand corner of the page. It another element is placed within the first element, its position will be calculated with reference to the top left corner of the containing block and not the page. The code fragment below will place an absolutely positioned element with reference to the top left corner of the page.

<div class="MyTitle"
style="position:absolute; left:125px; top:75px;">
This text is being absolutely positioned with reference to the page.
</div>

If a second div is placed within the first one as in the code under, the positioning context will indent the second line 25px from the first as the positioning context determines the position of the second element within the first one.

<div class="MyTitle"
style="position:absolute; left:125px; top:75px;">
This text is being absolutely positioned with reference to the page.
<div class="MyTitle"
style="position:absolute; left:25px; top:30px;">
This is another absolutely positioned element within the first one.
</div>
</div>

The font size will also be larger as the second line is treated as the child of the first element and its font size is calculated relative to the first element.

If a third element is added using the relative positioning, it will be contained within the second element. Relative positioning will render the text slightly to the right of the second element within the span. This is because it calculates the position with reference to the original position on the page.

:<div class="firstDiv"
     style="position:absolute; left:125px; top:75px;">
This text is being absolutely positioned with reference to the page.
<div class="firstDiv"
       style="position:absolute; left:25px; top:30px;">
    This is<span style="position:relative; left:10px;
top:30px;">relative positions example</span> is contained within the second line.
</div>
</div>

In short the absolutely positioned elements are placed relative to the positioning context in which they are located while relatively positioned elements create their own positioning context based on their original location.

Combining Concepts

Absolute positioning is relative! In reality an absolutely positioned element is relative to the containing block. The containing block is the nearest positioned ancestor or the document’s initial containing block. It is a structurally superior element whose property is absolute or fixed or relative. The following example shows how an absolutely positioned element can be relative to the containing block. The H3 positioned as relative allows the span to be positioned relative to the containing header.

h3 {
position: relative; / So that elements INSIDE this header can be positioned relative to the header /
}

h3 span {
position: absolute;
display: block; / So we can give the element a width /
top: 3px;
right: 3px;
width: 10px;
}

<h3>Some header <span>!!!</span></h3>

Parent child relationships affect absolute positioning. The position of the child element is determined in relation to the parent element. The contained element’s absolute position will be referenced in relation to the upper left corner of the <div> element.

A relative element can be nested in an absolute element. The relative element will be treated as a child of the absolute element and its position on the page will be determined in the context of the parent’s position on the page. The relative element is moved to its original position in the flow within the parent element. The code for this will read as under:

.relpos { position: relative;
left: 150px
}

The markup of the second page will read as under:

An absolute element can also be nested within a relative element. The relatively positioned element is the parent and the absolutely positioned element is the child. It positioned will be determined with reference to the coordinates within the relatively positioned element. The absolutely positioned element will move if the relatively positioned element is moved. The css code will read as under:

.relposx { position: relative;
              top: 270px;
              left: 0px;
              border: teal thick groove
             }

The code for the absolutely positioned element will read as under:

.abposx { position: absolute;
              top: 0px;
              left: 150px;
              z-index: 0
             }

z Index Property and Positioning—Absolute/Relative

CSS allows overlay of elements to create a 3D effect. The elements can be absolutely positioned in such a way that they are positioned in overlapping layers. A stacking happens and the z index order value is used to position the layer in the stack and consequently the image or text. The code below is illustrative of this technique. It positions one image slightly above the other.

.csslogo{ color: red;
              font-size: 42pt;
              font-weight: bold;
              top:110px;
              left: 80px;
              position: absolute;
              z-index:1
             }
.wkshop { color: black;
              font-size: 26pt;
              font-weight: bold;
              top:140px;
              left:200px;
              position: absolute;
              z-index:2
             }

As indicated in the opening sentence, many programmers feel that Absolute positioning should not be encouraged for web page design. Their contention is that absolutely positioned elements on a web page make for rigidity in design and can cause display problems when they are executed in different browsers and computers with different resolutions. One solution could be that we create different style sheets for different resolutions and take advantage of the strengths of using absolute positioning of elements in a web page. As I said earlier, the design of the web page is only limited by the imagination of the designer and the tools he brings into play in the creation of his art. Scripting languages and object oriented programming techniques are coming up with a number of useful methods of designing and controlling the elements of the web page. Why not take advantage of them? Why complain about the problems of absolutely positioning elements? I would say yes to absolute positioning provided it is used skillfully and effectively by the designer!

Saturday, January 6. 2007

Layers and Positioning of Elements Posted by Steve Monas in Chap 12 at 02:49

Layers and Positioning of Elements

Layers and Positioning of Elements

A layer is a type of container. It can hold text, images, tables and other layers. While layers are extremely difficult to hardcode and a number of browsers do not support layers, they can be used to an advantage for obtaining text and image effects and for the creation of web sites that are creative. The web designer can also have immense versatility in the positioning of elements on a page. A number of software, like Dreamweaver have provided designers with tools for creation of layers with ease.

Using Layers to Position Elements.

Coordinates and positioning are two important attributes of the layer that have to be considered the moment the web designer works on his composition. The coordinate system x/y begins with the top right corner of the page. Layers can be stacked or overlapped in the order supplied by the third coordinate called the z-index, which is used by the web browser to determine the topmost layer of the stack. Positioning of elements on a layer is similar to positioning of elements on the web page—static, relative and absolute. Static positions, as we have already stated, treat the image or text like a block in the normal flow. Relative positioning places the element with reference to the top left corner of the document. Absolute positioning takes the layer and the elements on it away from the normal flow and places them in coordinates of their own. They are not affected by the contents of the page.

Attributes and Positions

An HTML attribute or a style property is called a parameter in web design parlance. For instance, the ID parameter means either an ID attribute that can used with the <LAYER> tag or the ID Style property. However, property means Style property.

The <LAYER> tag takes on pixels as the unit of measurement for attributes that specify the distance. Style properties are generally numerical values.

The Position property only applies to layers that have been defined as styles and its value can be absolute or relative.

ID is an identity for the layer and must begin with an alphabet. The ID can be used to refer to the layer in the code. This is an optional attribute.

The Left and Top parameters are used to specify the horizontal and vertical positions of the top-left corner of the containing layer or page. The value has to be an integer.

PageX and PageY properties are sometimes used to specify the horizontal and vertical positions in pixels of the top left corner of the layer relative to the enclosing document if there is no equivalent style property specified with the <layer> tag.

The SRC and Source –include style attribute are used to specify the HTML document that needs to be displayed in a specific layer. This source file can include JavaScript code and all layers in the source file will be treated as child layers. This technique is useful if the content has to be dynamically changed constantly.

The chef doesn't have to rewrite the entire page just to update the information about the special of the day.

The Width parameter is used when the layer’s contents have to warp to fit within the layer. An integer value is normally used but percentages can also be ascribed. However if the layer contain images which cannot be warped the layer will ignore the width property and expand automatically to accommodate the width of the image. By default it will warp at the right boundary of the containing layer.

The height parameter defines the initial height of the clipping region of the layer. This is expressed as an integer value or a percentage of the height of the containing layer. Like the width property, the height will also expand to accommodate elements which cannot be warped. By default the height is the minimum height for all the contents of the layer.

The Clip property defines the clipping rectangle—that is the visible boundaries of the layer. It takes the top, left, right and bottom values as pixels. The left and right values are pixels with reference to the left edge of the rectangle and the top and bottom are defined with reference to the top edge of the layer itself. If the right and bottom values are specified the other two values will default to zero. If no value is specified, the values of the width and height will be determined by the contents of the layer.

Z-Index, above and below are three attributes used by the <LAYER> tag for defining the stacking order of the layers. Values specified in these attributes will override default values. The topmost layer will have the highest z-index value. The Above attribute refers to the layer above the referenced layer and the below attribute refers to the layer immediately below the referenced layer. All nested layers are stacked above the parent layer.

The visibility attribute will determine the visibility or invisibility of the layer. Pop up menus are examples of setting visibility attributes to layers. All submenus are created as invisible layers and they pop up on mouse-over events. HIDE hides the layer and INHERIT causes the layer to have the same visibility as the parent layer. This is also the default value. A layer with a visibility set to show may not be visible if there are other layers with the visibility set to show above it.

By default layers are transparent. The BG-Color and Background-color can be specified to define the color of the layer. The Background color will be applied to the rectangular region occupied by the layer. If a border is defined in the Style the region will be enclosed with a border in the color specified for the border.

The Background and Background-image style properties assign a tiled image across the background of the layer. The value specified is the URL of the image.

OnMouseOver and OnMouseOut, OnFocus, OnLoad, event handlers are functions or inline JavaScript code that can be invoked to make visible or invisible layers.

Finally the NoLayer tag displays the content as if was not positioned at all. If layers functionality is required, it will generate JavaScript errors.

Layers can contain applets and plugins which are special windowed elements that float on top of all layers—even when the containing layer is not visible. If these elements are moved to the edge of the containing layer they will disappear completely or partially(as in the case of form elements).

Examples of Layer Positions

Relative Positioning and Layers:

Relatively positioned layers form part of the normal flow of the web page. These are also known as Inflow layers. These layers occupy space in the document flow and share line space with other elements of the web page. The left and top attributes or properties can be set to specify the offset of the layer’s top-left corner from the current position of the document. The <ILAYER></ILAYER> tag is used while specifying an inflow layer.

<ILAYER ID=layer2>
<P>Sample content for relatively positioned layer</P>
</ILAYER>
<STYLE type="text/css">

</STYLE>

In the following code relative position has been used to determine the positioning of layers:
<html>
<body>

Sample ON TOP:

<div style="position:relative; font-size:50px; z-index:2;">Sample</div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">Sampleagain</div>
Sampleagain ON TOP:<div style="position:relative; font-size:50px; z-index:3;">Sample </div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">Sampleagain</div>

</body>

</html>

The web page will look as under:

Absolute Positioning and Layers:

Absolutely positioned layers can be defined with reference to its coordinates within its containing layer. The top, left corner of the layer can be set using the left and top attributes or properties. However, if these attributes are not set they will default to the top and left of the containing layer automatically.

The absolutely positioned layer will not occupy space in the normal flow and will have no impact on the other elements on the page within the normal flow. The other elements on the page too will not make space for the absolutely positioned element in the normal flow.

An absolutely positioned layer is created using the <LAYER> </LAYER> tag. If the layer has been defined as a style the layer will have to be created as under:

<LAYER ID=layer1 TOP=200 LEFT=260>
<P>Sample layer content</P>
</LAYER>
<STYLE type="text/css">

</STYLE>

If the position is defined as Absolute in the example given for relative positioning, the web page will appear as under:

Note that the top layer has been defined using the z-index attribute in both instances cited above.

Layers can be positioned relatively absolute or absolutely relative. In other words the position of the layer can be calculated with reference to the upper left corner (the absolute) or from the position of the layer within which the layer has been placed(relative).

Negative and positive values are acceptable while positioning layers. The positions can also be changed dynamically using JavaScript. This opens up immense possibilities. Whole games can be designed using layers with coordinates and positions defined. Or layers of pages can be created in a stack and clicking on a link can move the specified layer to the top.

Layer problems

The most irritating problem about absolutely positioned layers is overlapping text. The moment a user resizes his text, all the beautiful layering done by the web designer takes a toss! The text begins to overlap. While Gecko browsers will allow the text to overflow, IE will expand the layers and overlap the borders of the layers too! The second layer will not move down to accommodate the first one as both are absolutely positioned and are not affected by the changes in the position of other elements!

Another common problem with layers is that they will not stay put where the designer intended them to stay! If the layer is designed to be 800 pixel wide and the user has a screen that is 1024 pixel wide the layer will appear to jump a little to the left. While the actual layer has not moved a single pixel, it appears to move because it is absolutely positioned! In reality it is the table that has moved to the right to remain perfectly centered on the page. Since we do not have control over the user’s resolutions, it may be a good idea not to use absolute positioning? Maybe static positioning would server your ends better? Or maybe you could try setting margin and padding properties to resolve the issue?

In a sense setting the Margin and padding would solve the problem. Well ….Almost. The <div> containing the first layer will expand to accommodate the text if the font size is changed and the second layer will move to accommodate the changes in the first layer—rendering the layers correctly. The padding will take care of the space around the border and ensure that the text does not stick to the borders. A wrapper <div> can be used to enable the text to retain its positions relative to each other and the wrapper can be centered while the text remains at a specified position from the left of the browser viewport.

Once all the above has been taken care of the designer will still have to deal with Browser bugs. Width is part of the content area. Any margin and padding added is included in the width in the determination of the area occupied by the element. Old Browsers do not recognize the box model which describes the width. Internet Explorer will calculate the width property and subtract the padding and borders before rendering the page. Well, you can imagine what will happen to all the positioning you have done when IE renders the page!

To accommodate this bug in IE it has been suggested that web designers should ensure that the browser renders the page in Standards mode rather than in the quirks mode by including a Doctype in the page. The designer will also have to take care of the problems of IE 5x. A number of CSS hacks exist that can filter styles. These can be used or you could use a specific type of code that is called conditional comment. A code like the one under will be offered to IE 5x.

This code can be placed in <head> of the document after other styles or link to an external style sheet. While IE 5x will act on it, other Browsers will ignore it.

Stacking layers

We briefly discussed z-index order and stacking of layers. In this section we shall understand this concept better.

CSS allows the designer position boxes on layers in addition to rendering the layers from 0 to whatever integer value he wishes to stack layers in the z-index property. The position of the layer in the Z axis is based on this integer value and higher the value the closer to the top the layer would be positioned.

Default stacking rules

Let us visualize a situation where no z index is assigned to a layer. What would be the stacking order--Default? The default order of stacking takes into account the background and borders of the root element, the descendant blocks in the normal flow –in the order of appearance in HTML, the descendent order of elements—again in the order of appearance in HTML.

How floating elements can be handled

The stacking of floating blocks is handled differently. They are placed between the non-positioned and the positioned boxes after taking into account the background and borders of the root element, the descendent blocks in the normal flow—in the order of their appearance in HTML, floating blocks and descendant positioned elements in the order of their appearance in HTML.

Using z-index to change default stacking

If a z-index is specified then the default stacking order is overridden and the specified stacking order takes effect. The z-index defines the position of the element in the z-index or third dimension of the page. The integer value can be positive or negative. The layer with the lowest index value will be the bottommost layer of the stack. If there are several layers with the same z-index value they are placed on the same layer.

The stacking context

In certain circumstances child stacking contexts can be created. For instance if a particular layer has a number of sub layers, the latter would be child layers for the said layer. A stacking context will have to be created for the child layers that are to be stacked on the parent layer.

If an element is placed within another element and is given an z index value other than auto, then it creates its own stacking context. All child elements will then be stacked entirely within that context. The entire div and its contents are treated as single element in that layer.

Positioning and assigning a z-index value to an HTML element creates a stacking context.
Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

Examples of stacking

The code for the display of overlapping cells is given below for ease of understanding. Each <div> is defined, its properties set and then a z-index order has been assigned. Readers should try to reassign the z-index order or change the properties of the different divs to see the effect on the positioning of layers.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Understanding Stacking order</title>

</head>
<body>
//Positioning the Divs
    <div id="div1">
      <h1>Division Element #1</h1>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>

    <div id="div2">
      <h1>Division Element #2</h1>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>

      <div id="div4">
        <h1>Division Element #4</h1>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>

      <h1>Division Element #3</h1>
      <code>position: absolute;<br/>
      z-index: 4;</code>

      <div id="div5">
        <h1>Division Element #5</h1>
        <code>position: relative;<br/>
        z-index: 1;</code>
      </div>

      <div id="div6" style="position: absolute; left: 387px; top: 59px">
        <h1><font size="4">Division Element #6</font></h1>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>

</div>

</body>
</html>

Converting Layers to Tables.

Layers or tables? –this is a question that most designers ask themselves when they sit down to design their websites. If the target audience is still hanging on to the ancient browsers—the answer is simple—it has to be tables. However, if they have moved on to newer browsers—well, you could use layers. There is yet a third possibility. You could write codes for identifying browsers types and create a design that will convert your layers into tables and vice versa depending on the version of the browser!

Software like Dreamweaver and Front page make the creation of layers or tables a breeze. The WYSIWYG editors help you move your layers and columns around without touching the code. In fact, a large number of designers subscribe to the view that it is easy to create layers and then convert them into tables.

When layers are converted into a table, every layer is assigned a specific cell. Additional cells required to preserve the space between the layers are also created. Software that converts layers into tables also provides for aligning the layers edges if they are positioned within the specified number of pixels. This ensures that the resulting table will have less number of empty rows and columns.

Often the last row of the table is filled with transparent GIFs to ensure that the table is displayed uniformly in all browsers. This type of table can be edited by dragging the columns. The Center option can be used to center the table on the page.

The process of converting tables to layers is the reverse. Every cell in the table becomes a layer and additional empty cells used for maintaining the space between cells become space between the layers and so on.

Saturday, January 6. 2007

Using Layout Managers Posted by Steve Monas in Chap 11 at 02:14

Comments (0)
Trackbacks (0)

Using Layout Managers

Using Layout Managers

The Concept

Layout managers were created to simplify interface design and free the designer from the drudgery of calculating the coordinates for each element on the page and worrying about properties, attributes and display problems relating to any specific elements. While the concept is laudable and helpful, it was not the ultimate panacea for the web designer’s problems. While it was possible to use different layout managers for different containers on a page and these layout managers gave sizes and positions to the components in the window and are helpful for windows whose size changed or were displayed on multiple operating systems, they did not provide the ultimate sought after solution. Complex layouts with nested containers, invisible components all come packaged with their own peculiar problems and layout managers can be as frustrating to the designer as manual arrangement of elements on a web page!

A basic requirement of web design is portability. Standard UI design techniques do not guarantee portability. What looks beautiful on the design platform may be distorted beyond recognition in other platforms.

The first portable layout managers were designed in Java with a guarantee of being deployable on multiple platforms. These layout managers specified rules and constraints for the layout of the user interface. The advantages of these layout managers were that they correctly positioned components that were independent of fonts, screen resolutions and platform differences. They provided intelligent component placement for containers when they are dynamically resized. They also provided for ease of translation to make allowances for increase in the length of the string on translation.

The Java UI container comes inbuilt with a special object called the layout manager. This component controls the components in the container. It automatically arranges the components in accordance with the rules, properties, constraints specified by the layout manager. The preferredSize, minimumSize, maximumSize, alignmentX and alignmentY and the size of the container are specified. The user can accept the default layout manager or override the settings and specify a custom layout manager.

All layout managers use absolute positioning. Therefore, components do not adjust automatically when parent containers are resized. The properties of different layout containers are as under:

BorderLayout has a hgap(horizontal gap) and vgap(vertical gap) to determine the distances between the components. Each component has a constraint value with possible values like North, south, east, west and center.

FlowLayout and GridLayout properties can be used to align components with reference to the vertical and horizontal gaps. GridLayout also has the option of specifying the number of rows and columns.

GridBagLayout has no properties. However, it has GridBagLayoutConstraints object associated with it which has properties of height and width of the component linked to it. It also has information about where the component in anchored in its cell, how the component fills up the cell, or how much padding surrounds the component inside its cell.

Java uses different types of information to determine the position and size of components placed in the container.

Layout managers in C# were different from the Java layout managers. While Java relegated layout managers to Graphical User Interfaces, in C# anything that implements Ilayoutable interface can be laid out. Moreover, since the layoutable objects are abstract concepts, distinct areas of the parent component can be laid out. This gives a lot of power to the web designer.

Layout managers in Visual Studio 2003 are analogous to the layout managers of Java in that it implements Flow layout and Grid Layout. ASP.NET 2.0 introduced Master pages as a layout concept. Master pages implement standard visual and functional capabilities throughout the web based application and work in conjunction with content pages. Content will be populated into the placeholders for content provided in the master pages. Personalization features, takes the concept a little further by allowing users to select and populate their pages with components.

Layout Examples

TLB pages

TLB stands for Translation look-aside buffer. This is a table in the processor’s memory and contains information about the recently created pages in the memory. The program’s virtual memory is cross-referenced with the corresponding absolute address in the physical memory. This enables faster computing. The TLB contains about 64-256 entries. The number of entries in the TLB is multiplied by the page size defined in the TLB reach. This is critical to the performance of the application and the performance begins to degrade once the TLB reaches the critical point.

During the recent years the TLB is failing to keep pace with the increasingly large working sets of applications. Modern processor cache is getting large and few microprocessors have a TLB reach larger than the secondary cache for conventional page sizes. TLB misses become more common while accessing data from the cache and this increases the latency to memory.

Efforts are being made to increase the TLB using the memory controller TLB. This will let the designer aggressively create super pages from non-contiguous, unaligned regions of the physical memory. Shadow pages are supported by the MTLB and this greatly empowers the Operating System’s ability to swap shadow-backed super pages more efficiently.

Header and Footer Pages

Sites that are several pages long would like to introduce a header and footer that will look identical on all pages. This header or footer should be capable of being changed when the designer wants to change the look and feel of the site. Header and footer pages are generally HTML pages that are part of the “includes�? in PHP or master files in ASP.NET. Look at the following file created in PHP.

<html>
<head>
<title>Welcome to this sample site!</title>
<style type="text/css">
a {
// lots of styles
}
</style>
</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; mycontent"><b>Sidebar!</b>
- Navigate
- Navigate
</div>
<div>Content!!!!! mycontent</div>
</body>
</html>

All pages associated with this header file will have to have the extension .php and then the header and footer files will have to be created. Enter all the details from the Layout that you want reflected in every page and name the file header.inc. The header file will appear as under:

<html>
<head>
<title>Welcome to my sample site!</title>
<style type="text/css">
a {
// lots of styles
}
</style>
</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; mycontent"><b>Sidebar!</b>
- Navigate
- Navigate
</div>
<div>

Note that the code is truncated before the content starts. The Footer.inc file will reflect the footer layout as under:

</div>
</body>
</html>

Both the header.inc and the footer.inc files will have to be uploaded to the same folder as the pages in the website. Layout coding should not be part of any of the files in your folder, else your header and footer files will be overridden. At the head of every file enter the following code:

<?php include("header.inc"); ?>

Below the content, the following code will have to be added.

<?php include("footer.inc"); ?>

The include files can be named with any extension so long as the correct extension is specified in the include code.

In Java too, the include files can specify the header and footer files to be included as in PHP.

The classic ASP can include any type of script files as include files for headers and footers. The extension ASP or INC or HTM can be specified. The development of User controls offered greater flexibility, reliability and speed. Header user controls can be created by renaming the HTML file into head.ascx. The header must be registered and then called as under:

<%@ Page Language="VB" runat="server" %>
<%@ Register TagPrefix="UserControl" TagName="Header" Src="/usercontrols/head.ascx" %>
<html>
<head>
<title>samplesite –Create smart headers and footers using ASP.NET User Controls</title>
</head>

ASP.NET 2.0 Master pages are used for creating consistent and maintainable interfaces and derives from the UserControl class. The PreInit event of the master page is called before the PreInit event of the content page is called and the content page fills into the content placeholder on the master page and becomes a child of the master page before it is displayed.

In absolute positioning layout of components the footer pages will have to take into consideration the length of the longest column, while the header will have to take into consideration the start of the columns..

Floating Window Pages

Floating windows can be used when visual overlapping is considered advantageous and provides some depth to the application. A floating window floats in front of other windows because the z-index order placement is relative to that of the other windows. Floating windows are supported in Windows, Mac Os and Linux.

Floating windows help the designer divide the web page into rectangles that can be formatted independently of each other. They could be like DHTML layers—they can be hidden, shown or animated on top of the page. They can contain other HTML elements, such as text or image and another floating box if required. However, some web browsers do have problems with the floating windows, which have embedded floating boxes as the child-floating box inherits the CSS from the parent-floating box.

A large number of designers are tending to move towards use of floating layers instead of popup windows. These are just HTML elements such as divs styled to sit on top of the rest of the page. This window usually has a close button on the top right corner for ease of dismissal.

The important facts about floating windows are that popup blockers cannot block them. It forces the audience to look at the window—at least to figure out how it can be dismissed. If a link on the page is clicked the floating window will disappear with the rest of the page. Often JavaScript is used to close them but not for displaying them. They behave like normal windows on all computers. They cannot be minimized or resized. It is also not possible to switch back and forth between a floating window and the main page.

Absolutely positioned floating windows have been used for creating attractive and “never scroll out of view�? menus.

Stretchable pages

Web pages that stretch to fit into any window is the latest craze in web design. If the page does not stretch a lot of white space around it looks pretty bad. A simple solution is to center the design, but the white space remains a fact. Relative sizing using percentage values on tables does not allow for any arbitrary screen size. So stretching the pages to fit the window without distorting the elements composing it is a task that tests the ingenuity of the web designer.

However, stretchable pages have some disadvantages. Stretching limits the page design and can cause readability problems. They should be used with caution and that too only with pages that have a great deal of content such as portal pages or company home pages.

Stretchable pages must flexibly expand horizontally. This will be possible if solid color backgrounds are used or patterns that do not distort on stretching are used.

Text is usually laid out in columns and more the columns the greater the ease of reading. However, if there are too few columns on a page, the text may stretch beyond a reasonable limit. Multiple column pages are easier to stretch for this reason.

What has absolute positioning got to do with all the facts stated above? Absolute Positioning enables the designer design without layout managers! If the layout manager is set to null, the controls can be manually positioned using absolute positioning. However, it is not very comfortable to manually set the elements in their respective positions when the whole can be done with ease using a layout manager! Moreover, all components will get locked in place and will not adjust to the position and size if the window is resized. It is possible to take care of this issue also, but would require a lot of programming effort from your side.

Saturday, January 6. 2007

Concept of Templates Posted by Steve Monas in Chap 09 at 01:50

Comments (0)
Trackbacks (0)

Concept of Templates

Concept of Templates

Much of the tasks in web page design are repetitive. The need to maintain a consistent look and feel throughout the site, the familiarity of users to the positioning of buttons and navigational elements and so on, makes it inevitable that some of the aspects of the design are repeated again and again. This results in a lot of time being expended on doing the same tasks over and over again. A template separates form from content and helps web designers layout elements on a generic page that can be called to provide the consistent look and feel of the website. Today, template designs provide a way of enforcing layouts, defining sets of privileges, style and content for multiple pages. The template can be divided into regions and tabs and styles can be applied to specific regions and items such as portlets can be added.

At the other end of the spectrum, the user too, benefits from templating. The web designer now has the option to define themes or skins for web pages which can be accessed by users who wish to give a special feel to his page while retaining the underlying template that defines the look and feel of the website. These themes and skins are nothing but elements of a web page that have been pre-positioned for immediacy of deployment. With ASP.NET 2.0 the web designer can provide a repository of components to the web user for dragging and dropping into the web page. The end user has the freedom to position the elements on the web page!

Evolution of the Concept of Templates

The web designer needs to feel that he is in control of the way in which his web page displays the elements he has so carefully positioned. The end user wants to feel that he should have the ability to personalize the page to suit his tastes. There is a constant conflict of interest and the concept of templates has evolved from this fundamental need of both the designer and the user.

Paper templates for entering structured information have always been around. The first web pages were designed as if were extensions of the paper format. Task based forms on the Internet, even today; share many of the features of the paper format. The word document is a template of the paper and Microsoft Word provides a large number of templates for jobs such as letter writing or resume writing. It enables users keep structure and content independent from each other and makes designer experimentation with templates wholly possible.

The initial web pages were static pages and the initial efforts were directed towards experimenting with variations of the static page.

The Cascading Style Sheets were the first efforts to distinguish between form and content. The possibility of creating “Styles�? to which web content could be linked suggested undreamed of possibilities. A number of designers began to experiment with form. In fact it became such an obsession that flashy, buttons, colors and designs began to dominate the web. Form seemed to take precedence over content and communication. The moderate members of the profession vociferously expressed their discomfort with the state of things and a balance has gradually been achieved.

Server side coding for templates emerged in the 1990’s. The Common Gateway Interface was first typically used in Unix Web servers for AWK report generator or M4 templates. The Server side ‘include’ helped in defining a more direct way of creating server side scripts on web servers. Web portals, then, catalyzed the whole and web designers began to experiment with “template languages�? and talk about the need for a “template standard language�?.

A template system now consists of a template engine that processes web templates and content information to produce web documents. The template engine can also be used as part of a preprocessor, filter or template processor. Programming languages such as PERL, Ruby, C or Java all support template processing natively or using add-on libraries and modules. Java Server pages, Active Server pages, PHP are template engines in their own right. XSLT and Xquery designed by W3C have emerged with promises of future convergence of template languages!

Templates can be simple “substitute templates�? or masks where place variables are substituted with the web designer’s content or can be complex templates using XSLT schemas. Masks or substitute templates are the first server side includes that created uniform headers and footers on the web page. Complex templates provide for standardized layouts using a single base layout over which other layouts are superimposed.

A template can be defined as a piece of code that uses preset variables to expose data on a web page. The template can be further categorized into data templates and theme templates. Data templates are base templates on which theme templates are superimposed to give a customized look and feel to the web page.

Templating?

A template is a kind of wire frame for the web page. The elements that must appear in every page on the website can be laid out in the frame to form a basic layout for the whole. The “All page template�? is a general layout background for the website with a fixed header and footer with an “all content�? variable. The block template is a segment or component region of the page with a specified layout block. The menu block that usually appears on the left hand side column of the page is an example of a template layout box in a dynamic web site.

Strongly template oriented websites have databases that receive only pure content while the form is determined by the template and are not impacted by the content that is displayed on the page. Weakly template oriented websites allow the template design to be affected by the content and the template rules are changed every time the content changes. While the former can make for rigidity of design the latter can make for non standardized web pages. Providing for themes and skins probably emerged from a desire to mitigate the rigidity of strongly oriented web templates and to overcome the weakness of the weakly oriented ones.

The template file is a single file that may reference other resources for logical dependencies or layout dependencies. The file is formatted with specific markup and reflects the template system strategies of the website. It uses scripts to provide instructions to the template engine and can be an embedded template language or an event driven template language. Embedded template language embeds the template script into a host language(old processor languages), while in an event driven template language (such as XSLT and filter languages) the template script treats each block as a separate event definition.

A template language formalizes the variables, blocks, substitution rules or logic in a web template and the standards that can be fixed into engine dependent or independent contexts in accordance with the type of language selected.

Simple substitution templates have only syntax rules and no logic and iteration. Iteration templates are similar to simple substitution templates but have inbuilt iterations that can repeat a substitution in the scope of a single block or several blocks. Programmable templates call functions that execute and impact the state or value of other variables. Complex templates have unrestricted logic and specify sequential algorithms and permit parameterization.

Templates also fit in with the concept of object oriented programming. It encapsulates the concept and functionality so that it can be modified minimally without impacting the other parts of the application.

If there are a large number of templates in a web site, template management demands the use of the Layout manager. The layout manager enables the management of layout in addition to the management of content in a web site. We shall be dealing with layout managers in greater detail in a later chapter. So we shall not say much more than this here.

This chapter however, would be incomplete if we do not mention personalization, even though the details would be beyond the scope of this book.. Personalization of a site is the process of creating templates that filter and target the information displayed on the web site on the basis of the user’s identity and predefined needs. The pages are tailored to the user needs and are a common form of enhancing customer service or e-commerce sales and marketing. Personalization software includes software like Broadvision, ResponseLogic and Autonomy. ASP.Net personalization features take the whole technology one notch higher by allowing the user customized even the components that will be placed on the web page. It introduces an generic storage system object called “profile’ which makes it easy to track and apply user preferences on web pages.

Web design is maturing. It is becoming modular, object oriented and more scientific. It is concerned about usability issues and is focusing on creating websites that are user friendly and cross browser compatible. Positioning elements on a template and then deploying them across the website is a challenge by itself. Absolute positioning of elements in a template based web site is an absolute challenge. We shall be exploring this in a later chapter.

Saturday, January 6. 2007

Pages, Page Sizes and Positioning of ... Posted by Steve Monas in Chap 08 at 01:47

Comments (0)
Trackbacks (0)

Pages, Page Sizes and Positioning of Elements

Pages, Page Sizes and Positioning of Elements

Ultimately, what the user sees is a page. The layout of the page will impact on how the user rates the website. Flashy buttons, animations that distract and positioning of key elements including content, will all make the difference between the success and the failure of the page. This chapter intends to introduce you to the broad concepts that govern page layouts and how it impacts the overall impression that the web page creates on the user.

Proximity of elements is the distance between the locations of elements on the web page. Proximity determines how elements relate to one another whether they are text, navigation or graphics. Elements that are placed close together appear to have a stronger relationship than elements that are farther apart.

Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart. For instance a caption for a picture must be placed directly below the picture and not a few inches below if it must establish a relationship. A subtitle must be directly below the title if it must make sense. A layout that positions elements in an unrelated manner is likely to be termed as weak. Therefore, positioning of elements on the web page will impact of the page on the user.

Alignmentis one of the most critical principles of site layout that must be taken into consideration while designing the pages and positioning the elements of the page. It not only disturbs the readability of the page, but can also detract from the appearance. On most pages the alignment is from left to right. It provides a good starting point for the eye movement and the eye of the user is accustomed to this style unless he belongs to a culture that reads from right to left customarily.

Repetition is the art of saying the same thing over and over again without boring the reader with the intention of getting a point across. While web pages do not have to be the same across pages, users welcome repetition of some of the elements with slight variations for consistency. . For instance, placement of the logo on the upper left corner, the menu bar at the top of the page and so on adds to the look and feel of the site and provides a strong sense of familiarity to the user.

Contrast is used to make things stand out significantly. For instance the white of text against a dark background or the use of dark colored text on a white background. It makes reading easy and helps highlight it. Contrast can also be used to attract the attention of the user to a particular object on the page—such as a freebie or a competition announcement by making the text larger than the surrounding text or printing it in a significant color or positioning it in the middle of the page.

Navigation is another element that is carefully positioned on pages to hold the attention of the reader. It is a very important element on the page as it helps the reader get around the site with ease. Research has revealed that positioning of navigation elements is one of the main reasons that determine how long a visitor stays on the site.

A number of navigation styles have consequently developed. The most common one is to position the navigation buttons at the top of the page so that they are visible to the user as soon as he enters the site. Sometimes Navigation is provided for on the left of the page and sometimes on the right. A few sites prefer to have the navigation buttons at the bottom of the page. Some place it horizontally and some vertically. The type of site and the style of the site will determine the kind of navigation style that is used.

While top and left navigations are common and familiar to users, bottom navigation is advantageous when the pages are long and the user has to scroll through the page back to the top if the navigation is placed at the top. Sometimes the navigation links are duplicated at the top and the bottom of the page for ease of operation.

Text is the primary means of communication on a web page and hence has to be positioned in a central place on the page. Text is also displayed on different browsers in different ways because it relies on fonts installed on the user’s computer. So positioning of text and use of fonts that display well across browsers becomes an important aspect of page layouts. Almost all PC users have Arial and Times New Roman installed and Macintosh users have Helvetica and Times New Roman. So it would be safe to stick to these fonts while positioning text on the page.

It must also be remembered that users read as a group of words. The size of the text then becomes the key element that determines how easy or difficult the text is to read. Large text is difficult to read if they have to read two words at a time and small text is difficult to read if groups of words are too closely packed. Consequently, it may be advisable to define the font size so that browser settings do not override the text and distort the page.

High contrast between the text and background also makes the text easier to read. Red and blue texts create perception problems and should be avoided.

Page Size and Layout is extremely important factors in positioning of elements on a web page. This is one of the biggest challenges faced by web designers. Variability of screen sizes is incumbent upon the settings adopted by the user. Most computer monitors are set for 800 X 600 pixels. However, some monitors go in for lower or higher pixel settings. This can play havoc with the page and the positioning of elements on the page. Therefore, the web designer must create a web page that caters to all the different monitor settings and yet display well!

As pointed out earlier, knowing your audience is crucial to the kind of web page you design and how you place your elements on the page. If the audience is using older computers, then the screen resolution should be set for 640 pixel wide screen. If the audience is fairly tech savvy, you are likely to have an audience who has the screen set to 800 pixels and if you have a specialty audience then they are likely to be using an extremely wide monitor of 1024 pixels.

However, if your audience is extremely varied, then it would be best to design your screen for 640 pixels, center the page and allow the browser to display your web page smaller than the screen width. In this way you will not be sacrificing the positioning of elements at the altar of the screen width. However, there will a lot of “dead space�? around the page, which cannot be used by the designer.

Tables have been around for a long time as a method of laying out the pages. These are used to control the width of material presented on the web page. The table width is specified as a percent or pixels. Percent will cause the table size to change depending on what the viewer’s screen width is. The display is fairly uniform across browsers and screen sizes. It follows that the screen will be narrow in one monitor and wide in another if pixels are used to define the tables.

Use of frames in more elaborate websites throws up its own problems of positioning elements. It is also a moot point that a number of browsers do not support frames. Frames work by splitting up the browser window into two or three regions and displaying a separate page in each region. The problem of page layout is commensurate with the number of pages and frames on the screen at any given point of time. Each is an independent page and the positioning of elements in one page has nothing to do with the positioning of elements in another frame. One method of getting around the problem of frames and yet taking advantage of its capabilities is the use of a single large frame on a web page. It helps control with precision the placement of images and other items on the page. While a large number of browsers don’t support frames, they are more widely supported than layers or stylesheets and they open up the site to a wider potential audience. By adding the <NOFRAMES> tag and simply making a few minor adjustments to the framed area alone, anyone would have access to the information without having to build different versions of the same site.

The concepts of frames has been taken a little further by the use of iframes which was popularized by Microsoft Internet Explorer 3.0 and is now supported by Netscape 6 and opera 5. An iframe is an inline frame that is not bound to the side of the browser window. It floats free and can sit anywhere in the window. It goes where it wants to go and displays whatever it needs to display. It obviously gives the web designer some undreamed of advantages.

The next kind of page layout that is often used is the Style based layout. All style information is stored in a separate style sheet and <div> tags are used to place elements in right positions. By itself, the <div> tag is inert. It becomes active when it is combined with a style sheet rule. Most of these sheets use CSS positioning techniques to place their elements on the page—especially relative positioning. However, special effects can be obtained by using Floating boxes or Absolute Positioning techniques.

Layering is another method that is used during page layout to place elements on the page so that users have easy access to them. This type of layout is done sometimes deliberately to create dramatic effects. When overlapping layers are used the designer must inform the browser how the element goes into the z-index and which elements are high on the z index and which are lower.

Well we have briefly explored the elements of the page, the size of the page the layout of the page and positioning of elements, generally, in the context. The chapters preceding this one and including this one was intended to be introductory. The idea was to ensure that you had all the concepts in place and that you truly appreciate the problems of the web designer who sets out to design his web page. Well we shall now begin drilling into each of the concepts in the context of absolute positioning of elements in the later chapters of this book.

Saturday, January 6. 2007

Site Organization and Element ... Posted by Steve Monas in Chap 07 at 01:29

Comments (0)
Trackbacks (0)

Site Organization and Element Positioning

Site Organization and Element Positioning

The user visiting a web site wants to find something. You as the designer must make it easy for him to do so. If the user leaves the site without finding the element he is looking for, you as a designer have failed to deliver. The positioning of the navigation elements and other elements on the site directs the user to the element he wants to find. A number of site organization models have been developed to assist web designers create usable and navigable web sites. In this chapter we shall briefly look at some of the organization models that are in use today.

Logical site organization models.

An efficient ordering of information is what users are looking for. Real content should be tucked away only a few clicks below the surface. The information can be simply placed in a sequence or in hierarchies. Web like organizational structures have several advantages, but tend to develop into dense links that explore information nuggets fully from multiple dimensions.

Site diagrams are used to evolve the site and act as the core-planning document that is referenced every time a change is proposed. Positioning of the different elements on the web pages and the location, accessibility of the pages is defined in this document.

Clear, consistent icons, graphic identity schemes and graphics or text based overview and summary screens can give the user a bird’s eye view of what he is looking for. Users should not be confronted with complexity. Interface metaphors should not be obscure or culturally insensitive. It is of paramount importance that users should always be able to return to the home page. This is usually taken care of by providing users with a button bar at the top or bottom of every page.

Site organizations are generally Linear, Hierarchical or Circular. The type of navigation used defines the site organization that has been used. Linear layouts direct the user from page to page one after another. This type of design is best suited for web sites that require the user to perform a task linearly such as registering for a seminar. Hierarchical layouts are used when information has to be presented hierarchically. The user is provided with multiple paths for reaching the target page. Circular layouts are most suited for large sites where volumes of information are stored. Circular sites are designed with entry pages that allow users reach any page from anywhere.

Every web site begins with an home page. It is the logical entry point of the web site. In hierarchical site organizations the home page is the apex from which all other pages flow. The top of the home page is the point that attracts the eye of the user when he arrives at the home page. So any element positioned at this point attracts the attention immediately. If the site aims at efficient navigation, this space should be dense with links. Menu home pages are the most common type of home pages. These pages are dominated by text or graphic links. News oriented home pages put live/hot news on the home page with links to details in other pages. Path based home pages are known for sheer breadth and depth of site content. This type of home page helps split audience into interest groups and to offer them user specific information.

Splash screens are controversial entry points. This type of entry point to the web site is more attractive in an entertainment site rather than in an information site.

Tabled?

Tables are one of the primary tools that are used by web designers to gain control over elements of a web page. They also offer visually interesting organization of text and graphics. They help the designer designate specific parts or columns and rows for menus, navigation bars or for framing images or content. However, browser support of tables is still a matter of concern and many designers resort to table-less layouts for browser compatibility and uniformity of display across all browsers.

Text tables require the use of preformatted fonts for better display. The use of <pre> gives the designer control over column alignment as the tag ensures that the same amount of space is used for every character, irrespective of the width of the font. Several text-based browsers can only display text tables.

Special tags are used to create graphical tables. Borders, colors, shading, backgrounds, frames, spacing and padding are some of the attributes that are pressed into the service of the web designer. The table attributes of height, width, alignment, row and column spanning are taken advantage of. Nested tables are a common feature. However, tabled layouts can pose complex design problems that designers must familiarize themselves with before launching into tabled web designs.

Visual formatting of tables is specified as a rectangular grid of intersecting rows and columns organized into groups. The borders defined around them may indicate Row and column groups. Data may be aligned horizontally or vertically within a cell or in all cells of a row column group. Positioning of cells as float or absolutely, may cause the cells to cease to be part of the table. We shall deal with this in greater detail in a later chapter.

The optimal layout for tables is not defined in CSS. However, the constraints that designers must appreciate while laying out the table are specified and the algorithm may be customized to the needs of the designers, except in the instance where “fixed layout algorithm�? has been selected.

The advantage of using tables is that they are flexible. They can spread out to cover the whole page or they can be forced to occupy specified regions of the page. The disadvantage of using tables is that they create bloated volumes of code, increase the size of the file, impact the loading speed of the page on to the browser, are labor intensive, and mixes presentational data with content.

Table-less layouts in CSS are achieved using Structural markup language. This just requires a different kind of thinking hat. We have to cease thinking about the format of the page and start thinking about the structure of the content and information. Content is released from the table cells and wrapped into <div> tags. The div elements or id or class describes their content and function rather than their appearance. The advantage is that meaning can be conveyed to the user even if he cannot see the web page!

One of the simplest methods of creating a column-like layout, using CSS, is defining percentage-based positions for elements. Other relative units of measurement can also be used unlike in tables. For instance the em attribute enables the calculation of the size of the element will be determined by the calculation of the size of the text in the element.

The limited support to tables in IE 5, Netscape 6 and Mozilla, the need for a different method of laying out the pages is welcome. Float and clear properties can be used to make texts flow around images. Objects can be positioned with reference to the bottom right or z index can be used to layer objects.

While tables provide a relatively useful framework for emulating the printed page, they are not very useful in providing tools for designing new ways of presenting information. CSS positioning is more dynamic and provides more scope for innovation.

Framed?

Web designers use frames when they wish to display multiple HTML documents on a single page at once. The implementation of frames was introduced by Netscape Navigator 2.0 and was not backward compatible and is not supported by a large number of browsers. Web designers who use frames have to double their labor by designing web pages that use frames and ones that do not use frames to cater to end users viewing the page through different types of browsers!

The first task is to set up the frameset document. This document differs from the normal HTML 3.2 document in that it does not have a BODY element. The frameset determines the number of rows and columns and their respective heights and widths. Nested framesets are also factored into the page when the frameset is set up.

Rows and columns are defined, by first describing the outermost set of rows and columns and then replacing the FRAME element in the row or column, to get the nested innermost FRAMESET element.

Frames have several drawbacks. The image load is never off in Netscape Navigator. Combination of frames cannot be book marked and there are no URLs associated with framesets. Frames break up the integrity of the page and distract the attention of the user. Navigation does not work with frames. The unit of navigation is distinct from the unit of view.

Frames also present a number of implementation problems to the web designer. Users with browsers that do not support frames (they are a significant percentage) will not be able to view the pages in the way it is to be viewed. The BACK button does not work with framed sites. Additionally framed sites present a number of print problems. Search engines too have troubles with frames, as frames are not navigation units in their index.

Nevertheless frames are still popular design mode with many web designers who wish to implement specific features in their site. The use of frames, while vehemently opposed, had its own set of loyal followers. The future of this feature of web design will depend on the skill of the frame advocates in proving the usability of the technique.

We shall look at frames from the perspective of positioning elements on framed pages a little later in this book.

Friday, January 5. 2007

Positioning of Elements and Audience Posted by Steve Monas in Chap 06 at 22:00

Comments (0)
Trackbacks (0)

Positioning of Elements and Audience

Positioning of Elements and Audience

The Customer is the King!

Information alone is not the primary goal of website users. They enter the website with the curiosity of a child entering a new room. They expect the different items to be placed exactly where it should be and expect it to be in the shape that they are accustomed to. Anything that does not conform to the norm is probed or discarded as unfamiliar territory depending on the kind of user he or she is. A web designer setting out to design a website that is experimental may be in for a shock. The audience may not appreciate his efforts for the simple reason that the shapes, colors and dimensions of the web page are not relatable to anything that they have experienced! "Human needs should be the guide for our technologies." —Ben Shneiderman

Therefore, a detailed understanding of the audience needs in creation and positioning of elements is an effective metric of good web design. So if you know who your target audience is you can design for them meaningfully and efficiently. Positioning of elements in your website is all about organizing your content into logical, user oriented sections and prioritizing content in order of importance to your target audience. A point to be considered in this context is that elements placed below the fold (point at which the user has to start scrolling), will receive less importance than the elements at the top of the page.

Positioning of elements is all about being conscious of the culture of communication in the region and sensitively arranging the elements in accordance with the expectations. For instance, most cultures read a document from left to right, but some cultures read it from right to left and expect the elements to be placed accordingly!

Demographics will help you distinguish your audience on the basis of gender, income level, age, religion, geographic location and so on. A study of the environment in which the section of audience lives will also help you determine what they will find appropriate. If you look a little deeper you will perhaps explore their motivations and intentions and arrive at other expectations that are not immediately visible. Finally, while studying your audience you need to factor in issues of hardware and software limitations and technology awareness levels. It is also necessary to address browser issues that can distort the best-designed websites.

Type of Websites

Each medium of communication has its won unique constraints and this can impact the principles and elements of the design. The constraints may be based on a variety of factors which may include the customer expectations, the purpose of the web site, the technology used, the processes and standards of the industry and so on. The environment creates a unique set of constraints in the placement and positioning of elements in a web page.

Commercial websites are websites that sell products or services to its customers. A right combination of art, technology and communication skills are vital ingredients of a successful commercial website. The user should be able to understand at a glance what the website is selling and should be able to access the details with ease. They should be able to select the product into the proverbial shopping cart, see their selections, confirm the selections and pay for them. Shipping information, time that will be taken etc should be displayed prominently. So the positioning of these elements on the website will be of primary importance.

Personal websites are information sites normally accessed by a closed group of people or people with similar interests. The type of information being provided and the type of audience who will access the information will determine type and positioning of elements. The intent of the website should be clear when the user enters the site so that his expectations are correctly oriented.

Organizational websites are created to advocate and individual opinion or a group’s point of view within the organization. Message boards, chat forums and discussion groups are usually the pages that are frequently accessed by these groups. The websites should be designed to instantly give the user access to all the above elements.

Educational websites are designed to provide information about educational institutions or to present study materials, tutorials and so on to the students. The user should be able to see the list of lessons and navigate to the required lesson with ease. He should be able to access, the applications, registration forms and other aspects of the website that are essential for him, with ease.

Entertainment websites are created with an intention to provide users with a variety of entertainment avenues.

News websites provide the latest news and Blogs are intended for logging online readings, posting online diaries or provide discussion forums and chat rooms for users. A hybrid website will probably cater to all or some of the above in meaningful ways.

Interactive vs Static Sites

Interactive websites are designed for interaction with the end user. Users can request for information or leave comments on such sites. They can download software, information or graphics. They can participate in chat rooms, discussion forums; leave messages on message boards and blog on topics. This type of sites is becoming extremely popular and the underlying technology is easy to obtain and use.

Static websites on the other hand are intended to provide information to the end user. It does not expect to receive any comments from the users or interact with them in any way. It usually provides a static hypertext and navigation is performed through “static�? documents.

Dynamic Sites

Dynamic sites are sites that provide for an interactive navigational experience to the end user. The content displayed in determined by the requirements specified by the end user and the context settings defined. Client side scripting, like JavaScript or ActionScript, is usually used to provide for the interactivity of the interface. Ajax is the latest language used for client side scripting. Server side scripting is used if the content has to be changed dynamically by a sequence of reload of pages or reacting to a posted form or reacting to parameters in the URL. Server side scripting languages like PHP, Perl, ASP.NET, JSP are used. These languages in turn use the Common Gateway Interface (CGI) to produce dynamic web pages.

As McCasland points out, at a very broad level, “culture is communication�?—it is the silent language that permeates the consciousness of the audience and determines their reaction to symbols and colors. It is clear that information hierarchies are very important in positioning of elements and is the cornerstone of usability in web design. However, a foray into this area is beyond the scope of this book. While it is important to understand that target audiences play a role in the type of elements used in a web page and the placement of such elements, it is not really the core of the discussion we have launched ourselves into. So this chapter has touched upon the topic but not drilled down into its essentials!

Friday, January 5. 2007

Taking Position Posted by Steve Monas in Chap 04 at 21:57

Comments (0)
Trackbacks (0)

Taking Position

Taking Position

Web pages have been around for some time now. Buttons, banners, text, audio, video or animated gifs etc are elements that make up the pages. Presenting these elements in attractive and accessible manner is the intent behind every web page design. While the end result looks attractive and simple, the reality is that the placement of elements is very complex. It is an art that has exercised the minds of countless web designers for ages. The Cascading style sheets, the scripting languages and the experimentation with visual formatting models are all outcomes of the efforts of these designers to find solutions to the vexing problem of positioning elements on a web page! Let us look at a web page and the positioning of elements in some detail….

Elements in a Web Page

The type of web page being designed, determines the elements that will be placed on it. The content owners are the domain experts and they have a role to play in the layout of pages and the elements that are set on the pages.

Every web site begins with a definition of a goal. This is followed by a task analysis that will define the primary goal and functionality of the site. These functional goals have to be met by the layout and design of the page. Buttons, tabs, text boxes, graphics, navigation bars and other elements should clearly indicate what the purpose of the site is and how the user can access the various elements on the website by clicking on the buttons or using the navigation elements on the page. Web conventions should be followed and taken advantage of. New elements should clearly indicate the purpose for their existence. Cluttered websites with flashy banners and multitude of elements tend to confuse the visitor and you may find that he has clicked his way out the moment he has entered the site! A well-structured web page that clearly informs the visitor what he can do will hold the attention of even a casual visitor. So it is very important to understand your purpose and position your elements appropriately on your web page!

Conceptualizing Positioning

The W3C published its first working draft on style sheet specifications for positioning HTML elements on the page in three-dimensional space in 1997. Web designers found that they could use these specifications for greater control over objects on a web page and for designing tight static page layouts or for tracking DHTML motion effects. . Netscape and Microsoft championed the specifications and provided support for some of the positioning properties in their 4.0 version browsers. CSS level 2 improved upon the specifications in 1998.

Positioning defines the placement of elements on a page. The size and position of the element depends on the type of element, the content of the element and the display context or purpose of the element. By default elements flow one after another linearly, in the order defined in the HTML source. This default flow does not give the web designer much control over the design of the page. Most web designer resort to the use of CSS or scripting languages to define the attributes of their elements, position them or manipulate them.

The Box Model

At the top level the web page is a canvas—a container for other elements that have to be placed in it. It can be seen as a box, which has a specific dimension—x and y coordinate and a z-axis that flows away from the viewer into 3D space. Each element that is placed into the canvas occupies space in the x and y dimensions. These elements can be text, graphics, audio, video or buttons and navigation elements. HTML code generates this box and it is called the element box.

The visual formatting model of CSS2 views the page as the initial ‘containing block’ or root block. The position and sizes are to be calculated with reference to the edges of this block. The width and the height attributes for the root element are specified using the width and height property or defined as auto (in which case the user agent or browser supplies the height and width). This forms the veiwport for the user. The initial containing block cannot be floated or positioned in any manner.

Generated boxes are blocks placed within this containing block and can also act as containing blocks for descendent blocks or nested blocks. Each block is then defined with reference to the containing block. These block level elements are formatted visually as blocks. These blocks can be positioned and floated. Any additional boxes generated outside the principal block by the contained blocks are placed in relationship with the principal block.

Anonymous block boxes are boxes which have another block box inside it(such as those generated by a DIV tag), and it is forced to have only block boxes in it by a process of wrapping any inline boxes into it. The properties of the anonymous box are inherited from enclosed non-anonymous boxes.

Inline level elements are content distributed in line. They participate in a inline formatting context or a compact inline box may occupy a position in the margin of the block box. Anonymous inline boxes do not contain an inline level element. A run in box is used for run in headers and is a block box. It becomes an inline box when another block box follows the run in box.

In CSS 2 the box can be laid out in three positioning schemes. The normal flow allows block formatting of block boxes and inline formatting of inline boxes. It permits relative positioning of block or inline boxes and positioning of compact or run-in boxes. Floats are boxes, which are placed according to normal flow and then shifted to the left or right of the flow, and its content flows along with it. Absolute positioning removes the box from normal flow completely and assigns it a position with reference to the containing block.

The positioning scheme selected determines the kind of positioning algorithm that needs to be used.

Understanding and determining Positions

Many web designers are confused about the different positioning schemes that are available. An understanding of positioning schemes must begin with the concept of normal flow. This is the default behavior of the web browser. Each block level element is stacked one after another with inline elements flowing into the available space on the page.

The root element is the html element and the first block in the document. Other elements can be placed with this root block using any one of the four CSS positioning schemes. The schemes are Static, absolute, Relative and fixed. All these positioning schemes have a relationship with the normal flow.

Normal flow versus Static Positioning

This is a process of placing a box in the normal flow. It is really a box that is not positioned and is the default position. No declaration with the position property is required for this type of positioning. However, the declaration position: static places the element within the normal flow of the document. The top and left properties need not be specified in this context and performs the same function as position: relative with no top and left defined.

This seems slightly redundant but if the W3C specs are to be strictly adhered to, it is important to know the different types of position properties that have been created.

Absolute Positioning

Absolute positioning takes its position from the top left hand corner of the browser pane with the x and y coordinates at 0. This positioning gives the designer tremendous control over the elements so positioned. The code for an absolutely positioned element can be placed anywhere in the code and still the element will display at the coordinates specified.

Absolute positioning positions the box within the containing block and not the browser itself. The top, right and bottom properties are specified in different combinations to position the box within the container.

Absolutely positioned boxes are not part of the normal flow and they have no effect on sibling boxes that are positioned using other positioning schemes on the page.

If the width of an absolutely positioned box is not specified, it will move dynamically when the browser is resized. However, it will retain its positioning. If you do not want the box to move widths will have to be specified.

Relative Positioning

A relatively positioned element on a web page is not positioned with reference to the containing block but with reference to the normal flow. Therefore the element disregards its containing block and relates to the browser. The relative tag helps the designer place the elements with reference to the positioning of other elements on the page.

Fixed Positioning

This type of positioning is similar to the absolute positioning attribute in that it is calculated with reference to its containing blocks and it is pulled out of the normal flow. However, the reference is in the context of the browser viewport. The viewport is a fixed block that remains fixed however much the other elements move around it. When the browser is resized the fixed block will not be resized or moved in any manner.

Fixed positioning was not supported by Internet Explorer 6 and below and could be used only if the web page was being designed for other browsers. Internet Explorer 7 supports fixed positioning.

Positioning Considerations

So what are the things we should take into consideration when we decide to position the elements on our web page? The layout of the content and the purpose of the document are important. Do we want the content to use the default flow and reflow when the window is resized? Then we should be using Relative positioning. If we want content to reflow when it is resized but to remain fixed otherwise, we should obviously use fixed positioning. If we want to be sure that the user, whatever he may do, does not disturb our positioning of element, then your choice has to be absolute positioning! So positioning considerations are determined by the layout of the content and the purpose of the document!

However, if you wish to take advantage of the properties of Relative positioning and absolute positioning, you could place an absolutely positioned element into a relatively positioned element. The element will be then centered in a rectangle. This obviates the necessity of using tables and content can be worked into larger layouts and scripting can be added to each element such that these elements fall into place outside the document when the user loads the page.

A method often used is to define an outer div and an inner div. The outer div flows with the contents of the document and the inner dive holds the absolute position when the page is loaded. The outer div is then modified with a scripting function “doPosition�?. The offsetWidth and offsetHeight properties are manipulated to calculate the new absolute position for the element. The posLeft or pixelLeft properties can also be used to center the images as they give alternate access to the Left property and lets the user position the element using a floating point number.

Combining Dynamic Positioning Techniques

The environment of the web is evolving. Web designers are no longer satisfied with the positioning attributes offered by CSS. Experimentation with various positioning techniques has led to the development of “Dynamic HTML�?. This is an umbrella term for a large number of techniques that are used to make the web page dynamic.

The first efforts to change the contents of the page were based on CGI.. This required the server to reconfigure the contents of the page and reserve it to the client. This was extremely slow and clogged the network traffic and irritated the user. Dynamic HTML on the other hand performs on the client side. Changes to the page are instantaneous. Everything can be changed—text, images, tables, content and forms!

The basic technique that is used is that each element of the page is divided into manipulative units and these are exposed to a scripting language such as Javascript. This made the documents live applications and enabled web designers interact with the elements dynamically and also attribute behaviors to them.

A problem that most web designers faced was that the scripts were proprietary and would not work uniformly in all browsers. Efforts to get round this problem, resulted in the emergence of the “Object Model�?. This framework helped organize behavior references and the interaction of elements with each other including the process of referencing elements of a document, the application of styles to elements and the effect of scripts on style changes and so on.

This experimentation also led to the development of XML –a simplified versions of the Standard Generalized Markup Language(SGML)—and brought about various changes in standards and other proprietary object models for documents based on SGML, XML and DOM.

The concept of layers was evolved and functionalities were defined. The document was seen as an ordered collection of elements, all the content of the web page and any set of attributes that were defined for each element. The concept of assigning Ids to elements was conceived along with concepts of parent and child elements. Child objects were seen to inherit attributes from the parents and could also contain attributes that were unique to them by a process called “overriding�?. Object hierarchies were defined and object oriented methods of handling elements of the web page emerged as a future standard.

DOM was seen to provide web designers with a number of advantages. You can now structure your documents into headings, paragraphs, hypertext links and other component parts and this makes for easy access to them individually. DOM also provides a language and implementation-neutral interface and can be used in a wide variety of environments and applications. It is therefore, interoperable and provides HTML and XML support. The dJava and ECMAScript support offers a consistent programming interface. The Style sheet support enables the manipulation and changing of Cascading Style Sheets.

The DOM structure resembles a tree with a parent and child node layout and can contain more than one tree. However, there is no compulsion that the tree structure must be followed. Any logical hierarchical model can be followed. Navigation between the different nodes or hierarchies can be achieved using the NodeList object from anywhere in the website or page.

The W3C working group has completed the level 1 of DOM in October 1998 and the Level 2 recommendations are underway. A style sheet object model is included in the level 2 working.

Controlling Content Visibility

Positioning of elements also brings into focus another need of web design—the visibility of the element. Does the web designer want the element to be visible, partially visible or invisible? The content of the positioned elements can be restricted in a number of ways. Setting values to the display and visibility attributes of the element can do this. The clip and overflow attributes can be used to define how much of the content will be visible. Overlapping elements can also be used to control the visibility of elements. The z-index ordering technique can be used for this purpose.

Clipping Regions and Overflow

Using the clip attribute sets the clipping region for a positioned element. The rectangle within which the element is displayed is defined by the attribute and any portion that extends beyond the rectangle is clipped. The clipping region has to be carefully defined in a parametric order—top, right, bottom and left). The clipping region can be changed dynamically by referencing the clipping property and resetting its values.

document.all.MyDiv.style.clip = "rect(0 50 75 0)";

Overflow happens when the content of the positioned element does not fit into the defined area and overlaps other elements in the page.   The overflow attribute helps hide the overflow or makes visible scrollbars that can be used to access the content that is not visible. The overflow attribute an be reset dynamically by changing the values of the overflow attribute.

if (document.all.xDiv.style.overflow != "scroll")

    document.all.xDiv.style.overflow = "scroll";

Z-Index Ordering

When two or more elements occupy the same area some kind of ordering is called for. The Z-Index ordering attribute helps the designer set the order in which the elements should be drawn on the screen. This attribute is especially useful when there are relatively or absolutely set elements on the page and they overlap other elements. A positive value in the Z-index causes the element to be stacked on top of other elements and a negative value causes it to be stacked at the bottom. The element that has been given the highest z-index value is stacked on the top and the one with the lowest is stacked at the bottom. If two or more elements have the same z index value, the source order is used to determine their position in the stack.

Significantly the elements which are placed below the top positioned element in the stack are not accessible to input devices. However, if the parent is a scrolling container or the parent has been manually positioned, the elements lower down in the stack become accessible to input devices. The z-index property can be changed dynamically by accessing the z-index attribute of the elements.

MyImg.style.zIndex = 2;

It must be noted at this point that all elements, which are windowless, participate in the z-order overlapping. Windowed objects like ActiveX controls and iframe do not overlap with other objects and do not participate in the z order. The select element too is a windowed object in IE 6 and below. However, in IE 7 the z index property is supported for the select element.

Element Visibility

Your web page may have a number of elements, which have to be hidden unless a specific trigger is fired or an action is performed. For instance if you have to display a clock on the page at a particular time of the day, the clock will have to remain hidden until the time trigger happens. Element visibility attribute is also used when carrying out transition effects or making a div element visible or invisible.

<p>A paragraph above the DIV element</p>

<div id=xDiv style="position:absolute;top:50px;left:50px;height:100px;

    width:100px;visibility:hidden"></div>

<p>A paragraph below the DIV element</p>

Note that accessing the visibility property can help set the visibility of the element. An invisible element can be made visible by adding the following code.

xDiv.style.visibility = "visible";

Invisible elements continue to impact on the document layout in the background. The invisible element, unlike the display element reserves the place for the element. What has been written so far in this chapter is only the tip of the iceberg. It is intended to inspire you to greater creativity and to convey to you the idea that positioning of elements and the evolution of tools for positioning elements is only limited by your imagination. While a lot of work has already been done in this area and web design has come a long way from simple HTML, it is still evolving and as a web designer you are part of this evolution and perhaps the catalyst of it.

Friday, January 5. 2007

A Voyage of Discovery Posted by Steve Monas in Chap 03 at 21:55

Comments (0)
Trackbacks (0)

A Voyage of Discovery

A Voyage of Discovery

A web site is designed to enable interaction with the end user. Interaction styles refer to all the different ways in which technology enables the user communicate with the system. Historically, it all began with the text terminal. Commands were entered as lines of text and the output was a text. With increasing use of CRTs and other output devices graphical user interfaces gained importance. The Microsoft Windows, Mac OS and the X Windows system have gained popularity. A logical development that happened was the object oriented approach to web design that was driven by a need to view all elements of interface design as objects that can be manipulated and optimized. In this chapter we shall be focusing on the different aspects of web Interface design and gain a general understanding of the development of concepts relating to positioning of elements on the web page and web site.

Command Line Interfaces:

A Command Line Interface(CLI) is a text tool that is used to command the computer perform some operations and provide the end user with desired outputs. The output that is obtained is also text. The concept of CLI originated from the teletype machine and represented an advance from the punch card system. Even today a number of users prefer to CLIs which provide an environment with increased productivity such as embedded systems and other network devices. Programmers and Systems Administrators (especially those who use Unix based operating systems) and scientists and engineers prefer the CLI to the Graphical User Interface (GUI) as they deal more with text rather than graphics. Persons with visual disability also prefer CLI.

The core of the CLI is the command line interpreter or shell. The command prompt is an example of a Shell. Microsoft is working on a WindowsPowerShell code named MONAD. This combines the traditional Unix shell with object oriented .NET framework.

The CLI is composed of syntax and semantics. The syntax forms the grammar of the commands that are given to the operating system. Unix and MS-DOS have their own unique syntax. Embedded systems such as Nortel, Juniper Networks or Cisco have their own peculiar syntax and rules. These rules are intended to guide the user navigate through the system of commands.

The semantics of the CLI refer to the types of operations that can be performed using the CLI.

The user sees a command prompt and he is expected to type his command on the prompt. The command is usually terminated with an enter key. A textual output is generated when the command is executed.

Command lines are self documenting and set forth exactly what the user wants done. Lengthy commands can be saved with alias. These stored commands are called command procedures and calling the procedure will result in the execution of the command.

Navigation is another important aspect of the Command line interface. The user may have to specify the relative and absolute paths to command and data in some CLI, while others may require him specify the hierarchy and the options available within the hierarchy while issuing his commands referred to as mode. Most CLIs have two types of modes—System and Interface. Systems commands cannot be issued from within the interface mode and vice versa.

CLI vs GUI

Die hard graphical user interface fans would probably point out the CLI is not relevant anymore. However, they forget that graphics and command lines are orthogonal. Text user interfaces and graphic application like CAD still use the CLI. It is true that GUI interfaces are visual and simple to learn, but CLI is a powerful tool in the hands of the learned. Moreover, behind every GUI, the command line is at work!

The argument that is often advanced against CLI is that a lot of commands have to be memorized or looked up in the manual. The lay user would be disadvantaged in the process. GUI on the other hand can be tailored to require almost no command line skills from the user. He gets what he sees on the screen. All commands can be attractively packaged into menus, toolbars, dialogs and other graphical means.

CLI users would point out that large graphical interface applications are cumbersome and often require consultation with the manual. They are resource intensive and limit the interaction of the user with the system. Repetitive tasks which can be achieved using loops in CLI will have to be done manually by clicking through a number of screens. A single script cannot be written to execute the tasks automatically.

While both have their advantages and disadvantages, it is important to understand that both have a significant place in the different kinds of operating systems and platforms that we work with today.

Command line interfaces are not all used by experts alone. Non expert users can also interact with the application in multitude of ways. Forms created using CLI are typical examples of such interfaces approximating to GUIs, that can be used by non expert users. Menus and direct manipulation of objects on screen are also part of CLI application interfaces.

CLI also approaches the object oriented approach when it uses abstract and default CommandListener classes, 118N/L10N Support, POSIX style support; joined option support and so on. The above features make the library easy to use and helps encapsulate the operations of individual options. The code also becomes easier to write, debug and maintain.

The future of CLI appears to be very interesting. The past –the MSDOS—continues to be a part of the Windows application and the future is here as Windows Vista tries to integrate it with its operating system to empower its power users! Voice command Interfaces for the blind, artificial intelligence programs, and countless other CLI based interfaces are being used for a variety of purposes. However, these interfaces are increasingly becoming the domain of the scientist and the administrator. The common man prefers to use the Graphical User Interface, which delivers exactly what he sees!

The Graphical User Interface

Most users are top-level users. They want to give high-level commands to the computer and wait for it to process the command at the backend without bothering their heads about how the command gets executed in the guts of the machine. GUI, despite its several drawbacks, is easier to learn and simpler to understand.

The GUI interface takes advantage of computer graphics and displays images that approximate to real life functional expectations from objects. For instance a button is to be clicked, pages can be picked up and dropped into folders; all papers are to be stored in categories and so on. The cut, copy and paste function that has become part of the GUI has revolutionized computing for the common man. He can share data and images across applications working on a common platform. The objects continue to be visible to the user and can be manipulated by him without remembering a large amount of syntax or typing in lengthy commands. All commands are encapsulated and the actions performed by the end user tell the computer which commands to execute.

The predecessor to the GUI was the PUI or PARC User Interface. Stanford Research Institute invented this interface and its primary contribution was the creation of text-based hyperlinks. GUI later extended this to graphics. The widgets library invented by the PUI consisting of windows, menus, radio buttons, checkboxes and icons were adopted by GUI. The pointing device and the keyboard were contributions of PUI.

The GUI that is familiar to most users of Windows and Mac OS originated in Xerox Palo Alto research laboratory in the late 1970’s. This interface was designed for the Applie computer and many of its features were adopted by Microsoft for the Windows operating system.

Today, GUI is an important aspect of application programming. The visible graphical interface enables the precise alignment and positioning of elements on the screen. The visible elements are known as Chrome and can be customized by the user by selecting different skins for the elements. More recent interfaces allow the user to select the very elements he wants to make visible on the screen and to hide those he does not wish to have on his screen!

GUI Interaction design is fundamental to any web design. Visually apparent interfaces are intrinsically forgiving and instill in their users a sense of control over the elements of the page. It reveals at once the span of control, visually communicates the process of interaction and directs them in the execution of their tasks. The inner workings of the system is masked and work is unobtrusively and continuously saved so that the user is in a position to undo any work that he finds has been wrongly done. In other words applications must work untiringly at the backend while requiring the user to input minimum information at the front end or the web page.

GUI interfaces are designed to anticipate the user needs and to provide the user with all the tools needed for the interactive process. While “look and feel�? of the page will provide the user with a sense of consistency, the status mechanisms can be used to keep the user informed while interaction causes changes in the condition of the page. This information can be communicated by changing the color of the text or the color of the page or the wait cursor or actual text at the status bar.

The GUI was a natural reaction to the extended learning curve demanded by the Command line interface.

Modern operating systems provide both GUI and CLI interfaces, but end users prefer the former to the latter and are most often unaware that there is a CLI inbuilt into the OS. The GUI is popular for the following reasons:

Continuous visibility of objects of interest. For example, an object stays where it is until the operator moves it.
Rapid, incremental reversible operations whose impact is immediately visible.
Pointing, selecting and dragging techniques have replaced the need to type complex syntax, such as command lines like MS-DOS or shell interfaces.

The cross platform support promised by the GUI, however, is riddled with inconsistencies in the way in which different features can be implemented on different platforms. Color usage is a major area of concern in this context. We will be dealing with the differences in a little more detail when we begin to discuss browsers and cross platform support for browsers.

Current research on user interfaces are focused on creating a zooming interface that blends 3D movement with 2D or 2 ½ D vectorial objects. Application specific GUIs are also being designed to satisfy the requirements of vertical markets and are known as “application specific GUIs�? such as the touch-screen software.

Another important direction of development is the emergence of the object-oriented interface. Object oriented interfaces implement a system of objects that interact or are interrelated, non-nested objects. The functions that are implemented when the classes are implemented are hidden from the user. These interfaces provide greater flexibility and manipulative capability to the application designer.

Object Oriented Interfaces:

Object oriented interfaces use objects as tangible and conceptual things that have definite attributes and expose specific methods. The purpose is to break down the interface into modular, reusable chunks called classes. The classes then act as blue prints for creating instances of the objects and implementing methods encapsulated in these objects. This results in robust, reusable parts in the interface that can be removed and changed without impacting other parts of the interface. The whole becomes easy to maintain and flexible in deployment.

Object oriented interfaces are defined as a contract between a class and the user. The implementation of the class implements the methods that it exposes and promises the user certain functionalities from the interface. This contract is enforced at compile time.

Object oriented interfaces provide the end user with easy to use applications and flexible services. Objects have attributes and methods and perform or enable the performance of some specific functions. They have a state, which is internal to the object and visible to the end user. An object can be static or dynamic. Instances of objects are created out of the object and inherit all the features of the object or form a class of its own. The latter types are called metaclasses. Parameterized classes are templates for a class. A non-class instance is an instance of a class without being a class in itself. Aggregate objects and monolithic objects can be created to deliver specific functionalities. However, the details are beyond the purview of this book and hence are only touched upon and not elaborated.

Both PHP and ASP.NET offer OOP paradigms to application development and support OOP concepts. However, while PHP supports partial encapsulation and polymorphism ASP.NET offers a robust OOP scripting paradigm. ASP.NET is build on a framework called Common language runtime and offers an extensive series of well-organized class libraries that have inbuilt functionalities that enable easy creation of components for the web page. ASP.NET 2.0 takes the whole conceptualization a step further and allows users to drag and drop objects on the web page along with all the functionalities that come with the object! Master pages, personalization of pages, themes for pages and so on become possibilities in this object oriented world of ASP.NET 2.0! Cross platform implementation is no longer a distant dream.

Friday, January 5. 2007

Browsers! Browsers! Browsers! Posted by Steve Monas in Chap 02 at 21:52

Comments (0)
Trackbacks (0)

Browsers! Browsers! Browsers!

Browsers! Browsers! Browsers!

The raison d’etre of web design is the end user. After all, the Web page was created so that he can browse it, interact with it and use it. If he is not comfortable with the web page or the page does not display accurately, it is logical that the user finds fault with the web page and the designer of the page. However, in reality the web designer is not to be blamed. He does create web pages that are excellent, user friendly and entirely in accordance with the needs of the end user in mind. It may not be displaying the results correctly because the browser being used by the end user is not the one for which the web page was designed! Again, the end user may turn around and ask “So, is that not a problem the designer should have fixed?�? Maybe he is right but so long as there is no single standard or rule that is supported across browsers, the web designer must silently bear the blame.

What goes wrong with the web page when it is displayed in different browsers? Many, many things go wrong! The page overflows horizontally and vertically. The text boxes in forms are not in the position in which they were originally placed. The images seem to have jumped up or down a few pixels or they just do not load. The formatting seems wrong and the font is changed! This list could go on endlessly. The fact remains that web pages do not display uniformly across all browsers. There are several problems that need to be addressed if they have to display well in all target browsers.

Added to this issue is another major problem. The same browser or version of browser does not display the web page the way it should in another computer. The platform is different, the operating system is different and hence the browser displays differently! So, the woes of the web designer seem endless! He must throw up his hands in frustration or tell the user “Dear User, my web page will only display well in browsers of xyz kind working on an operating system xyz�?. This will lose them visitors and customers.

Most web designers decide to settle for a compromise. They will make enough effort to ensure that their web pages display well in the most popular browsers and pray to God that it will not appear too bad in others.

Therefore, before studying of the problems, which browsers browbeat the web designer with, let us look at a few of them in some detail.

User Environments:

The window in which the user explores your web page is called the browser.
A browser is a generic name for a computer program that creates a window or interface through which websites can be viewed on their computers. Most computers come with pre-installed browsers and are often identified by the name of the browser installed. The most popular browsers in use are:

Microsoft Internet Explorer
Netscape Navigator
Firefox and related Mozilla-based browsers
Opera

Microsoft adopted a marketing strategy of bundling their browser with the windows and hence it became the default browser that was used by all users who used windows platform. Many of them are happy with the bundled software and are too lazy or unenthusiastic about changing over to other browsers—even if they offer better features. Netscape Navigator was a long time rival of Microsoft. However, it was taken over by America online and the latter prefers to use the Internet Explorer for all its operations. However, the healthy competition between Netscape Navigator and Internet Explorer gave a boost to browser technology and while the non standard features of these browsers attracted much criticism, they got the developers thinking about standardization of browser technology. Internet Explorer too is implementing standards with each new browser version that it brings into the market. However, the fact remains that standardization of browsers is still a distant dream and the web designer must make his pages compatible with all the target browsers. He must have a clear understanding of the way these browsers treat the HTML codes or the CSS or the different scripting languages before designing his pages.

Internet Explorer:

Internet Explorer has been the most popular browser. It comes installed with the Windows Operating System. 60% users used IE 6 in 2003. The popularity appears to be waning and today only 20% of the users work with Internet Explorer. The reasons for this are many and include issues of vulnerability of IE compared to other browsers.

Since IE was the most popular Browser for a long time, most web designers also focused on creating pages which displayed well on IE. Several of these die hard fans of IE will tell the user that they will have to download different browsers for different web pages if they do not use IE. Others will simply throw before the user innumerable examples of disjointed websites that do not display well on any browser as examples of how non-IE browsers function. What these die-hard fans do not state is the truth that most of the web pages designed for IE were really products designed for Microsoft applications and not for the Internet. They also do not acknowledge that is possible to design websites that function well in other browsers. It is believed that websites that are designed only for IE may result in loss of visitors in the long run. Yet, one comes across the statement on many web pages “Designed for IE�?.

So what is “Design for IE�?? The 1990 browser wars were responsible for the non standard features of IE and its rival Netscape Navigator. Later, the lack of changes in IE’s Trident rendering engine since versions IE 5 has also resulted in lack of support for standards in IE. So web designers who wanted to take advantage of the features of the most popular web browser, had to design their web pages to display well on IE.

The criticism often leveled against IE is that HTML and CSS are implemented in an incomplete and incorrect fashion and there are bugs in the implementation of the float margins for the CSS standards. The IE box model bug is another famous bug that makes IE critics vociferous. It is often noted that web sites created and tested in IE using the non standard extensions can result in other browsers being extinguished by Microsoft.

IE 6 and below do not support PNG alpha channel. This has resulted in a reduced use of the PNG image format on web pages. This alpha channel distinguishes this image format from GIF and JPEG. However, in IE the transparent section of the image is displayed as gray, white or some other color depending on the image editor that has been used for the creation of the PNG format. Many IE developers are aware of the missing functionality but continue to use IE. In addition to this problem, IE will ignore a PNG image, which is 4097, or 4098 bytes in size and only display the placeholder.

JPEG images in IE display an interlacing problem. The image does not appear as a series of scans, which sharpen the image with every scan. Similar interlacing problems are also seen in PNG images. As the result the image does not get displayed until it is completely downloaded.

IE does not support XHTML. So design for IE will have to take into consideration the fact that the XHTML’s MIME file will immediately present the user with a download prompt. Workarounds that are used to get over this problem treat the XHTML file as if it were a HTML 4.0 file and as a result lose support for the unique features of XHTML such as robust error checking.

Moreover, Internet Explorer will display a text file with HTML like tags as HTML instead of text. This behavior can only be changed by manually editing the registry at the user end and most users would not be interested in undertaking the task. Content negotiation is also not supported in the browser. So the web designer must take care of these problems at design time.

CSS support in IE is believed to be very inadequate. Practical experience shows that IE misinterprets many of the CSS level 1 features and the famous Internet explorer box model bug defines the width different from the one specified by W3C. This required specialized web page design for Internet Explorer. Microsoft has come up with an option in Version 6 to enable the “standards mode�? which supports the DOCTYPE on the first line of the HTML. W3C has also adopted Microsoft’s box model implementation in the CSS 3 specs.

IE supports a scripting language called Jscript, which is similar to the JavaScript specification of Netscape. This script also supports ECMAScript, which is the standard scripting language of the web and hence this aspect of IE does not unduly impact the web designer. Nevertheless the Document Object Model adopted by Microsoft for its Jscript only implements some of the DOM levels recommended by W3C. It also implements some proprietary extensions to DOM. The slow down in IE development post version 6 also resulted in the non-implementation of standards that work with every browser. So web designers are forced to write extra code for IE, so that their web pages display correctly in many browsers.

After IE 5.5 Microsoft also dropped its support for API plug-ins in favor of its proprietary ActiveX components and this increased the workload for designers.

Unicode display in IE also is not automatic. Most web designers are forced to second guess on the software that is likely to be available on the user’s computer.

A number of campaigns have been launched to encourage user’s to migrate from Internet Explorer. The numbers of new popular browsers that have come into the market have also got the web designers thinking and more designers are attempting to code for browsers that implement standardized specs of W3C.

Netscape Navigator

This browser was a competitor to Internet Explorer and one of the first pioneers in this field. It was purchased by America online and is still used by nostalgic web surfers. The development of Netscape is almost at a standstill. Its position has been taken by Mozilla Firefox today.

FireFox

This is a robust modern browser that is competition to Microsoft’s Internet Explorer. It is drawing a large part of IE business and is free. Unlike IE, its download size is minimal and has a lean, mean interface with eye-catching themes. It knows how to block annoying pop ups and has extensions that can be used to enhance user experience.

Statistical data posted on a number of websites indicate that around 11% of web customers have downloaded FireForx web browser in the last one year(2005-06). So it is estimated that about 35% of the website traffic must be from Firefox users. Therefore, it makes sense to design for Firefox.

Designing for Firefox is to comply with W3C standards. Moreover, Firefox falls back on the “Quirk mode�? when a web page is not standard compliant and still displays the page correctly as it seeks to replicate many of the quirks found in IE and other browsers in order to make non-compliant pages look right. So several designers suggest that it would be better if one could design for Firefox first and then test for compliance in other browsers. Designing for Firefox is said to have the following advantages:

Increased search engine optimization
Proper content presentation
Decreased development and maintenance costs
Lower bandwidth usage
Faster download times
Web viewing beyond the computer (your site on wireless devices & RSS)
Increased benefits for disabled users.

However, web designers still need to remember that the other half of the world is still using IE and other browsers and if he does not cater to that segment is still going to lose a large chunk of his customers. So if Firefox displays pages well using the “quirks mode�? it may make sense to design for IE and then test it in Firefox.

Firefox has certain special features, which web designers would love to take advantage of. The first of these is the efficient pop up blocking feature. Second is the Tabbed browsing feature. Firefox is also integrated fully with Google search. It uses keywords for bookmarks and has a dictionary tooltip that provides definitions for any word. The improved security features, the download manager, the customizable toolbars, the theme manager and the smart update feature are all bundled with the browser and can be used by web designers to enhance user experience.

Firefox also has an extensibility feature that allows users to add features and functionality through the installation of XPInstall modules. The core of the program remains clean and unbloated. This extension system is a fertile ground for experimentation for the creative web designer. However, cautious designers point out that security is a concern that must be addressed while using extensions.

A troublesome feature of using extensions is that the browser must be restarted when extensions are installed, uninstalled or disabled.

Firefox supports plugins that are based on Netscapes plugin application program interface. This is also supported by IE 3.0 upwards and Opera.

Firefox is standard compliant and supports most web standards such as HTML, XML, XHTML, CSS, JavaScript, DOM, MathML, XSL and XPath. It also supports PNG formats and can withstand the rigorous Acid2 standards test.

Firefox also has cross platform support for different versions of Microsoft Windows, Mac OS X, Linux etc. Since its source code is available, it can be customized for other operating systems also. Moreover, Firefox uses the same profile format in multiple platforms. Finally Firefox is a very secure browser, built with security in mind.

Opera

Opera is a slim, small browser that is easy to install and has been around for several years now. It supports many of the features supported by Firefox but is a browser that stipulates that the add-free version must be paid for. So the number of users is limited.

Safari

Safari is a Mac browser. No Windows version of this browser has been designed. It comes inbuilt with the Apple computer. It is quick, elegant and has an integrated Google tool bar.

Apart from the above popular browsers, there are a few specialty browsers that cater to a niche market. For instance, Lynx is a browser that is text based and caters only to users who work with terminals that do not support graphics. However, this is beyond the scope of the subject of this book and we shall not explore user environments that cater to specialized users.

Who is in Control

The web designer has to comply on the one hand with web design standards and on the other he has to ensure that the user environment in which the web page is to be displayed does not distort user experience! Is he in control? Is the user in control?

As a Web designer, you certainly feel that you are not in control. Your creativity is controlled and limited by the functionalities that are available in the various browsers and the preferences of your customers. However, if you have adequate knowledge of how the different browsers function and how they display the different elements on a web page, you can exercise a large amount of control on his web page.

The user feels that he is not in control. He does not design the web pages that he sees and he has very little that he can do to improve the display of elements on the web page. He certainly feels that he is not in control.

The reactions to this lack of control range from an effort on the part of the designer to gain greater control over the web page and going overboard with giving control over the various components of the web page to the user. Neither trend is healthy nor perhaps the process will find its equilibrium somewhere halfway between the two extremes.

Graphical User Interface and Web conventions

Visual interfaces were attempts to recreate on the screen accepted behavior patterns from daily life. These familiar patterns were used to attract the casual surfer to interact with the web page. In due course, imitation led to the creation of a number of websites which followed similar patterns and these evolved into simple, informal rules that have become embedded in the visual culture. This reduced the decoding burden on the user and made the designer’s job easier. Today web designers are appreciated for their skill in utilizing current conventions and applying them for maximum benefit for all.

Web conventions cover a whole gamut of elements on a web page. The positions of these elements are fixed as per norms of the convention. The triangular yellow road sign is a sign of warning on the web page. The button with a raised beveled edge clicks when the mouse cursor is pressed over it and it appears to depress and release and also trigger of an action as expected. A hyperlink is underlined in blue and indicates that it will link the user to another page. The navigation button for the home page is often located at the top left hand corner of the screen, just below the logo. Words separated by vertical lines at the bottom of the page indicate that they are a set of links to other parts of the website. The list could be endless.

Conventions work because they are visual signals to the user and they are located where they are expected to be located. They convey complex meanings very simply. The web designer can exploit the power of these conventions while focusing on specifics in his website.

Conventions, however, are not sacrosanct. They can be broken. Web designers can go against the established convention, but they might find that their users resist the move or are having difficulties in accepting the new norms easily. However, conventions, which are associated with one kind of information, should not be used when conveying an entirely different type of information. For instance a warning symbol should not be used on a message that is merely informative. A button should not suddenly behave like a text box. This will only serve to confuse the user and put them off your website.

Closely associated with conventions is the concept of usability. A website which is user friendly and provides for ease of navigation and gives the right messages was considered to be usable. Design and usability are two faces of the same coin. A web site that is well designed is very usable. It harnesses the power of visual communication to convey to the user what he needs to do to move around the site and perform all the actions he wishes to perform. Users must know what to expect, how these features are displayed in the interface, where these features are to be found on the page and so on if they have to use the web page effectively. This will leave the user with a feeling that he has control over the website and motivate them to stay a little longer on your website exploring all that they can do there.

Building a Site that Works across Browsers:

The foregoing discussion probably left you feeling a little frustrated and disheartened. Designing a web page that displays its elements well across all browsers is not so easy as it seems. It appears that one must compromise and design for a single web browser or at best a chosen few. However, your awareness of the problems and a few simple rules can help you design a web page that displays fairly well on all the major browsers!

An important aspect of the web page design is the size of the canvas you have to work with. So we must educate ourselves on the spatial aspects of all browsers. The first aspect that must hold our attention is the concept of offset. When content fills a web browser, some amount overflows the edges of the browser window. It is important to know by how many pixels the content is offset from the browser window. Next we must focus on the canvas size. What is the width of the page in 640 x 480 dpi and in 800 x 600 dpi? What is the height available to the user for viewing the contents of the page? The third element is the Text size. What are the standard HTML text sizes? What are the tracking and leading? Finally how much room does the pull down menus and text input fields take up on the page and what about other form elements on the page? The offset in some of the major browsers has been tabulated below to provide you with some idea about the canvas you have to work with.

Browser	Horizontal Offset	Vertical Offset
IE 5.x (Win)	10	15
NN 4.x (Win)	8	8
NN 4.x (Mac)	8	8
IE 4.x (Win)	10	15
IE 4.x (Mac)	8	8
NN 3.x (Win)	10	15
NN 3.x (Mac)	8	8
IE 3.x (Win)	10	16
IE 3.x (Mac)	8	8

Measurements in pixels

The offset can be overridden, if you must, by inserting a simple code as under in the body tag:

        <BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>

However, this will not work with Netscape Navigator 3.x and you may also have to set the default offset.

Having taken care of the offset, you must now turn your attention to the resolution. What is the canvas size for which you must design your page? Web gurus would advice you to design your page for the lowest possible resolution and center the entire page. However, it is good to know what are the maximum canvas sizes you can have for each resolution. This will give you an idea of how much empty space will be visible to the end user when they view your page in higher resolutions.

Browser	640x480 width	640x80 height	800x600 width	800x600 height
IE 5.x(Win)	600	275	760	395
NN 4.5+ (Win)	604	294	764	414
NN 4.0x (Win)	604	294	764	414
NN 4.5+ (Mac)	592	309	752	429
NN 4.0x (Mac)	582	315	742	435
IE 4.x (Win)	600	275	760	395
IE 4.5x (Mac)	563	318	723	438
IE 4.0x (Mac)	574	321	734	441
NN 3.x (Win)	600	270	760	390
NN 3.x (Mac)	582	306	742	426
IE 3.x (Win)	613	276	763	396
IE 3.x (Mac)	598	317	758	437

Measurements in pixels

The size, tracking and leading of text is another aspect of designing that needs focus when we propose to design for display that works well in all browsers. In reality, there is almost no variation in text sizes across browsers. The difference happens because of the difference in platforms. Not much can be done in this direction. However, it is important to remember not to select a small font as it will not be readable in Mac browsers.

Form elements are untamable. The size, spacing and typography of forms take on a life of their own in different browsers. It can be a very frustrating experience. It is important to remember to design form elements for the browser that displays them the largest. If it looks good on that browser, it will look good in all browsers. Font and style attributes cannot be applied to form elements, as most browsers do not recognize them.

These are simple rules and are easy to follow. Follow them and your experience of web design may not be so frustrating.

Operating Systems and Positioning:

As stated earlier, the platform also has a significant role to play in the way the browsers display the elements on the web page.

Mac platform combined all the tools for design, development, programming and testing on a single system and hence it was defined as a niche platform and most web designers initially did not code for Mac browsers. When browser developers began to market Mac versions of their browsers, web designers woke up to the fact that about 12% of the users are on Mac systems and it is important to capture that market for their product. This need also led to the awareness that the Browser was a software product that is independent of the platform in which it runs. Efforts were made to create browsers that worked well in different platforms and to treat Browsers as a separate software product. However, platform specific browsers are still the norm. Platform independent browsers are just being thought of.

The fact remains that different operating systems use different browsers and there are significant display differences even when the same browser is used. The web designer must optimize his web page to work with all platforms. So it important to understand the kinds of browsers that can be used with different operating systems. You need to provide ALT tags on the web page if the browser can’t handle images. You also need to keep in mind the fact that some platforms do not have 256 colors and hence your web page must work just as well in monochrome as in low color settings. It may be a good idea to use browser safe colors.

Purchasing a PC emulator may also be a good idea, as it will give you insight into how your page will look in different platforms. HTML can be used to control the web page and the background can be set to white so that it overrides default settings. It is also important to remember that Windows see Macintosh designed pages as dark and the latter sees windows pages as light. These adjustments will have to be done.

If you have taken care of all these issues, you can focus your attention on the design and positioning of elements on the page!

Client and Server Side Programming:

Client or Server side programming is another aspect of web design that has an impact on the way pages display on the screen of the end user. Client side scripting refers to a computer program that is executed on the client side by the user’s web browser. This program becomes significant when the web page code contains DHTML, scripting languages and the content is to be changed based on user input. Server side scripting can be written in many languages such as PERL and PHP. These are executed on the web server when a user requests a document. The output is understood by web browsers as HTML and sent to the users system.

While most all browsers understand client side and server side scripting languages, the implementation is not uniform. It is important to review the behavior of the client side scripts on a variety of platforms before the web page is deployed.

Some effort has been made in this chapter to point out the various factors that are likely to impact on the positioning of elements on a web page and the display of such elements on the user’s browser. While the designer may not be successful in taking care of all the issues that may arise in the process, the awareness will enable him to take into account those factors, which can be adjusted so that the display does not deviate from the norm considerably.

Friday, January 5. 2007

Deep Positioning Posted by Steve Monas in Chap 01 at 18:35

Comments (0)
Trackbacks (0)

Deep Positioning

Deep Positioning

The Story of the Web

The world has come a long way from CERN. The web as it was conceived by Tim Berners-Lee is hardly recognizable in its reach today. It is no longer a minor network of communication between scientific communities located in a single building or a few buildings across the square. It is a complex, international, cross platform, cross language, cross cultural mesh of servers, clients, users and databases all talking, searching, viewing, accessing, downloading and working relentlessly 24 x 7 x 365. No one knows how many servers are out there and the volume of information that is being bandied back and forth across the continents.

While the dimensions of the web have changed and has expanded, not much has changed in the conceptualization. Tim Berners-Lee was concerned that three technologies must be incorporated if the web has to work. He identified the language, the protocol and the browser as fundamental requirements for the web. The type of language, the protocol used and the number of browsers available for display have changed but the belief that they are essential has remained unchanged. Web designers are still very concerned that their pages should display consistently across a variety of browsers and computers! Trillions of pages of material have been written on the subject and it is the raison de etre for this book.

The User interface that was first designed was a line mode interface called the World Wide Web (www). It was used in a minor network in March 1991 and provided for information sharing using HTML, HTTP. It became fully operational on the multi platform computer network at the CERN laboratories in Switzerland. Marc Andersen developed the first graphical browser Mosaic in NCSA in 1993. This later developed into the Internet Explorer and the Netscape Navigator. The driver of this initiative was the need to discover and create user-friendly environments that would make web usage a pleasurable task.

The intent was laudable and the achievement commendable. However, the pendulum has swung to the other extreme and the web designer today is confronted with a multitude of browsers sitting on a variety of operating systems that make a mish-mash of his web page and distorts his efforts when displayed in different browsers. He may well wish for a platform independent, non-browser-based world wide web that displays his page in the way he intended it to display!

HTML Frustrations:

Frustration is the genesis of innovation in web design. The language of the web started out as simple HTML. It is an abbreviation for Hyper Text Markup Language. It was the language that Tim Berners-Lee used in his CERN. He had a very limited requirement. He wanted a technology and a program, which would help him interpret HTML and convert it into screen-based text. He wanted a browser that enabled this text to be viewed from a range of different computer platforms uniformly. It served his purpose.

HTML was designed to pass the layout functions to the end user. The designer was forced to use or misuse the original HTML standard creatively if he felt the need to control the layout.

Formatting text in HTML is not like formatting text for print. The text just refuses to stay where it was put. One method adopted by designers was to establish a general structure of the document by adding HTML tags that create paragraphs and heading levels in raw text.

By default, it is a series of boxes stacked one after another linearly or contained within one another. The top level box is the page itself. It is the container for the other boxes which can be <p></p> box or a <H1></H1> box. These can be box level elements or inline elements. While box level elements begin and end the line, inline elements are contained within box level elements. The greatest weakness of HTML is its inability to define a variety of properties for all these boxes. The boxes cannot be taken out of normal flow.

Line breaks in HTML have to be deliberately specified; else the language will by default break the lines at different places for a user in accordance with the size of the type and the browser window. Moreover, HTML does not object to laxity in coding and does not insist that everything is neatly parceled into tags.

Headings are displayed in bold typeface with automatic line breaks and extra space above and below. There are six levels of headings available and are expected to be used in the order of hierarchy. However, creative designers use or misuse these heading sizes to give some sense of formatting to the web page. With newer tools being available for formatting this feature is more or less redundant. However, it is mentioned here, as it was one of the major potentially creative style elements of the early HTML web page.

As mentioned earlier, HTML text tags indicate style or structural information for inline elements. This affects the appearance of the enclosed text without adding line breaks or extra space. Closing tags are required to turn off the style attribute whenever required.

However, HTML does not allow the separation of style from content. It also does not provide for greater typographical and page layout controls. Site maintenance also becomes and issue if the HTML code has to be gone over and edited every time small stylistic element of the web page has to be tweaked.

Distinctions between the logical and physical style also, really did not make much sense at this stage of development of web design. Nevertheless, logical style was regarded as a more pure method of going about style.

Logical styles or content based styles were used to describe the enclosed text’s meaning, context or usage and leave the rendering issues to the discretion of the browser. This style enabled the designer specify that a selected text should be emphasized or displayed as code. Most browsers were also built to adhere to the conventions of logical style.

Physical styles are used to provide specific instructions to the browser to display text as Italic or strike through. They are also used to control the size of the text.

Other inline elements which offer some scope for manipulation and creativity were the font tag, the ordered and unordered lists. However, the potential for creativity was very limited and often frustrating to the designer whose imagination could not be translated into the web page.

One method that helped get over the limitations of text display in HTML was the use of the preformatted text. The preformatted text could be displayed in the browser, exactly as it was typed into the HTML code. It was always displayed in monospace font and this allowed columns of characters to line up correctly. The source text was coded <pre> text and teletype <tt>. It naturally became a favorite cheat for controlling alignment of text in the browser.

The no-break(<nobr>) tag was developed to ensure that the text displayed in a single line and did not warp over in the browser window. This had obvious disadvantages as the text flowed beyond the browser window if the string was too long.

The <wbr> was an esoteric word-break tag that was used in conjunction with the no-break tag to indicate a potential word break in conjunction with a no line break tag.

Centering of text elements was another area where some innovation in positioning was attempted. The align attribute was used to align text elements horizontally on a page at the block level.

Indents was a problem in HTML. There was no specific function for creating indented text in HTML. So, creative web designers make use of the existing tags to indent text on a web page. One such element is the use of the <blockquote> and the other is list elements.

The Mosaic browser that was developed in 1993 had a very different aim. It built in capabilities of displaying text and graphics, which was something the users were looking for. Unfortunately, technological restrictions of the time imposed limitations on this browser. Slow modem connections, monochrome monitors, top to bottom layouts and left to right sequencing of text and images and interspersed layouts with carriage returns and data stream separators did not provide much scope for innovation or imagination. The layout was linear. The HTML itself could only provide a Teletype model for layout of pages. Headline banners in websites were followed by edge-to-edge text with blank spaces for separators. It imitated the paper document on the screen with none of its flexibility. There was a lot of dissatisfaction among the web designers and an outcry for a language and a browser that would give more flexibility and scope for innovation.

However, the mosaic browser, made designers more aware of the shortcomings of the HTML language. Graphics were used as inline images and were part of the flow of the HTML document, but were extremely difficult to control. A few innovative designers began controlling the graphics using transparent graphics to create white space on the page. This led to thoughts on how to define the height and width of the graphic and all the issues relating to x, y and z indexes that were later resolved in the Cascading Style Sheets.

In 1994 the W3C consortium was established with the view to set goals and standards for the future development of the language of the Web—HTML. A number of versions of HTML were churned out. Each version was an improvement over the other, but there were no standardization norms that were adhered to. This resulted in a hot debate over the merits of the different versions and the need to implement standardization norms. Microsoft and Netscape meanwhile forged ahead adopting HTML 3.0 as their standard and developed their browsers forcing compliance on the web designers. They responded to the market demand for structures that will help designers format their web pages more precisely. They also did not hesitate to violate the Standard Generalized Mark-up Language (SGML) content rules in the process. (NOTE: This language pre-existed HTML and was not very popular because it was not designed for easy implementation. It was adopted by HTML for content formatting). HTML Version 3.2 acknowledged these deviations and brought in some standardization of the language.

Web technologies too improved during this period and several new design features began to emerge. Icons replaced words, tiled images appeared in backgrounds, bevelled buttons with edges adorned the pages, banners were used in place of titles and top to bottom, bullet list menu driven systems emerged enabling the presentation of hierarchical information. However, the web designers were more obsessed with technology rather than content. The web page was a battlefield of flashy banners, buttons, colours and objects! Very few web designers made efforts to create well-structured layouts for their pages. The revolution happened only when table tags were introduced into HTML for statistical purposes and remained to service the designers who wanted to bring order into the chaos of their pages. Positioning of elements within tables became a very important aspect of web design.

The table brought context and structure to the table data and provided for systems for incremental display and display for non-visual display agents(Braille based browsers). At a very basic level tables are made up of cells that are arranged into rows and columns. Display characteristics can be controlled at the table level or cell level or row/column level. The HTML tags provides for many tags for controlling the display characteristics. However, browsers still continue to have their own methods of interpreting the tags and hence the display differs from browser to browser. HTML 4.0 deprecated many of the table formatting tags in favour of achieving the same effects with style sheets. Browsers nevertheless continue to support the tags.

Tables come with their own frustrations and headaches. The code becomes potentially complex and a single missing tag can destroy the table display and cause chaos. Tables that display in one browser well, begin to look like a jigsaw puzzle in another browser. The text size can also play havoc on the table display and this varies from user to user and the designer has very little control over it. Form elements too display erratically in browsers depending on the settings preferred by the user. Another major problem that is faced is the “unwanted white space creep�? in tables.

Additionally in Netscape Navigator has a predilection to collapse empty cells and it will not render background colour of the collapsed cell. So designers who want to use empty cell spaces for design purposes will have to fill it with something if the page has to render perfectly.

Netscape Navigator 2.0 introduced frames at this juncture. Frames allowed designers to divide the browser window into multiple smaller windows –each displaying a different HTML document. This worked well in Internet Explorer 3.0 and higher too. This new methodology of presenting elements on a web page had its advantages as well as disadvantages. The main advantage of frames was that they enabled one part of the web page to remain static while others could be scrolled. They unified the resources from separate servers and alternate content could be added with ease using the <noframes> tag. However, this construct was not supported by older browsers. It made the web page design more complicated and users could not bookmark individual pages. The number of pages on the browser window also increased the load on the server and resulted in low downloading speed. These framed documents also became a problem for the search engines and the pages could not be tracked if they are a part of a framed document.

While Netscape Navigator and the Internet explorer attempted to define their own rules of the game, standardization remained a distant dream. Resolutions of different monitors could only be second guessed. Colour schemes continued to be diverse and downloading time was extensive. While font and type set could be defined on the browser the vertical and horizontal spread of the text also could not be completely controlled by the designer. As a result, web designers still could not deliver text that was legible, readable and clear on the monitor and graphics that were attractively displayed.

This limitation prompted many designers to adhere to the philosophy that information must be presented from the designers point of view as compatibility with the different browsers was a technology issue that must be handled by the designer. Closely allied to this was the belief that the site’s objectives were of paramount importance and the site must aim to draw the visitor in and inform him instantly of the reason for its existence. So techniques of presentation assumed importance. Navigation systems and site structure gained focus. It was felt that Web design must evolve to use the rapidly changing technologies such as multimedia, animation, database integration, ecommerce and 3 D worlds(VRML).

Therefore, Dynamic HTML marked this phase of development of the web page. Positioning techniques and use of Cascading Style Sheets in Dynamic HTML offered more flexibility to the designer.

HTML 4.0 was completed in 1997. Style sheets were added and efforts were made provide support for internationalization (such left to right alignment of text, the LANG attribute etc). Richer tables and forms were introduced. Scripts and object tags for multimedia were incorporated. The flavour of the HTML(transitional, strict and Frameset) was indicated at the beginning of the document to enable the browser or validator parse the code.

In 1999, HTML 4.01 made preparations for integrating XHTML into its warp and woof of HTML. This resulted in cleaner HTML. The document was properly formatted, tags were well nested and it was easier to introduce changes to the document. XHTML combines the flexibility of HTML and the extensibility of XML. Tags can be defined and deployed on the fly and with XHTML, if you find a need for a new mark-up tag; you simply define it in an XHTML module and use it in your page as you would any other HTML tag. You can also use XHTML to mark-up the code as appropriate for the (XHTML compatible) browser that is viewing it. You are also in a better position to understand the different types of degradations that happen in different browsers due to unsupported tags. Standards are being evolved to handle the degradation gracefully by turning off the tags and providing alternates for those browsers, which cannot parse the tags.

Cascading Style Sheets to the Rescue:

Cascading style sheets were a welcome relief to the web designers frustrated by the control over design provided by HTML. The style sheets for the first time allowed the designer apply typographical styles and spacing instructions for elements on the page. The term cascading was used to refer to a situation where several sources of style information compete for control over the elements on a page.

Cascading Style Sheets were first created and integrated with web design with the laudable intention of separating Style from content. The Style in Cascading Style Sheets refers to the definition of colours, fonts and positioning of elements on a web page. Each style is defined with a unique name called the selector and this name is used to invoke and activate the specific style in the HTML document.

W3C devised a hierarchical system for assigning weights to each type of style element in CSS. These sets of rules were used to resolve conflicts between different style sheets that simultaneously affect the presentation of a single document. More specific rules could override the general rules set for the site so that particular pages could be modified to suit the theme therein.

The CSS enables the web designer define the look and feel of the page in one place. Thereafter it is easy to change the look and feel by changing the attributes in the style sheet. Font sizes and other text attributes can be defined accurately as in a word document. HTML tags also can be redefined; Links can be customized or layers can be built into the web page using CSS. The web pages also load faster as the CSS is only loaded once when the visitor enters your site, while the HTML gets loaded for each page

HTML by default produces a linear style of positioning elements known as “Static�? positioning. Elements could not be taken out of this “Normal flow�? and positioned elsewhere on the page. Nor could specific properties be defined for the various containers or boxes that make up the HTML page. A change in the style of presenting any one element on the Web page required ploughing through volumes of code. CSS codes were written independent of the HTML code and were called up from within the code. Styles could then be independently and globally edited without ploughing through volumes of code.

CSS enabled designers specify traditional typography attributes such as font size, line spacing, and letter spacing and offered methods for specifying indents, margins and element positioning. It separated style from content and enabled the creation of potentially smaller documents that downloaded quickly. It made for easier site maintenance.

One major drawback for CSS was the possible lack of browser support. Versions of Browsers earlier than Internet Explorer 3.0 and Netscape Navigator 4.0 do not support style sheets. Also there is no consistency of support among browsers that claim that they do support CSS. However, web designers still see a lot of advantage in using style sheets.

CSS provides a number of rules that allow the designer specify the x and y coordinates for an element or its attributes. These rules can be applied to an HTML document as inline style directions or as style embedded at the top of the HTML or as an external file that can be linked to or imported into the document.

Inline style information can be added to an individual element by adding the Style attribute which is a standard style declaration. This is equivalent of the <font> tag and they are still attached to individual elements and are as cumbersome to modify as the <font> tag of the HTML. A sample of the Inline style is shown here:

<H1 STYLE= “Color: black�?> This heading will be shown in black</H1>

The embedded style sheet is a more compact method. The style element is used at the top of the HTML document as under:

<HTML>

<HEAD>

<!—

H1(color:black)

P( font-size: 14 pt;

Font-face: Times New Roman)

-- >

</STYLE>

<TITLE> Style Sheets</TITLE>

<HEAD>

……

<HTML>

The <! and --> tags hides the style element from browsers that don’t support style sheets.

External Style Sheets are the most powerful of the three types of Style sheets. This enables the web designer put all style elements together in a single style sheet document and reference it from all pages in a web site. This reference can be done either by linking to the document using the <link> tag in the <head> of the page or by importing the style sheet into the <style> element using the @import function.

Sample of Linking:

<HEAD>

<LINK REL=�?STYLESHEET�? HREF= “/pathname/stylesheet.css�?

TYPE= “text/css�?>

</HEAD>

Sample of importing:

<STYLE>

@import url(http://pathname/stylesheet.css);

</STYLE>

An important aspect of style sheets was the inheritance concept. The style properties are seen as passing down from a parent element to a child element or to any element contained with the child element. This enabled designers to define attributes for the parent elements and override them wherever required for the child elements. This made for more efficient style specification.

In 1997 W3C came up with a working draft of specifications for style sheet properties for positioning elements on the page and in three dimensional spaces. The effort was initiated by Netscape and Microsoft. This was taken further in CSS 2 which was released in 1998.

Positioning in Style sheets is a rich and complex topic and will be taken up in greater detail in the later chapters of this book. For the present we shall briefly look at the concepts of positioning at 35000 feet. The positioning of an element could be fixed, absolute or relative to the containing blocks and could also be made independent of the containing block. A fixed element will remain at the same location on the window while an absolutely positioned element will be taken out of the normal flow of the document and the space it occupied in the original static flow will be given up. The relatively positioned element appears as part of the normal flow and it is positioned on the basis of the coordinates specifically defined while its place will be retained in the static flow.

The type of positioning that you will need to use will depend on the layout of the content and the purpose of the document. Combinations of positioning properties may also give you advantages of manipulating multiple items on the page.

DHTML which developed later was a combination of HTML, Javascript, CSS and Document Object Model. Today there are a number of visual editors which enable you to create both CSS and DHTML.

The XML/CSS combination is expected to bring simplicity back into web design. While the former will help web designers create powerful content the later will help them create attractive styles! However, Jon Bosak had some observations to make on the limitations of CSS in the context of HTML in his presentation on 11^th April 1997 at WWW6:

CSS cannot grab an item (such as a chapter title) from one place and use it again in another place (such as a page header).
CSS has no concept of sibling relationships. For example, it is impossible to write a CSS stylesheet that will render every other paragraph in bold.
CSS is not a programming language; it does not support decision structures and cannot be extended by the stylesheet designer.
CSS cannot calculate quantities or store variables. This means, at the very least, that it cannot store commonly used parameters in one location that is easy to update.
CSS cannot generate text (page numbers, etc.)
CSS uses a simple box-oriented formatting model that works for current Web browsers but will not extend to more advanced applications of the markup, such as multiple column sets.
CSS is oriented toward Western languages and assumes a horizontal writing direction.

However, the W3C working group which is committed to XML is attempting to develop a simplified version of the DSSSL standards. They aim to provide more layout and document presentation features for CSS2. Nevertheless, there is a hot debate on whether XML should be used in combination with CSS or with XSLT because CSS cannot be used to modify the XML document structure whereas XSLT enables designers to do just that!

W3C working group responsible for the XML standard is concentrating its efforts on the implementation of a simplified version of the DSSSL standard, DSSSL Online (DSSSL-O). DSSSL-O promises to provide far more layout and document presentation features than CSS, but is a considerably more complex standard and may prove difficult to implement.

CSS is scripting language independent and can be used in combination with a number of scripting languages. The effort is to establish CSS 1 as an interoperable style sheet language for the web and to establish an interface with scripting languages and to take advantage of some of the positioning features of both CSS and scripting languages.

Web design has finally arrived. Today the new versions of browsers provide the controls that designers yearned for. The designer has more flexibility and can position his elements with greater accuracy than he could in the original HTML using CSS, XML or XHTML.

« previous page (Page 1 of 1, totaling 12 entries) next page »
Frontpage

Quicksearch

Chapters

All categories

Syndicate This Blog

RSS 0.91 feed

RSS 1.0 feed

RSS 2.0 feed

ATOM 0.3 feed

ATOM 1.0 feed

RSS 2.0 Comments

Contact Author

Contact Form

Blog Administration

Open login screen

</p> <div id="footer"> <p>Powered by <a href="http://www.s9y.org">s9y</a> - Design by <a href="http://www.carlgalloway.com">Carl</a></p> </div> </div> </body> </html>

Related Links

Sticky Postings

Tuesday, January 9. 2007

Saturday, January 6. 2007

Saturday, January 6. 2007

Stretchable pages

Saturday, January 6. 2007

Saturday, January 6. 2007

Saturday, January 6. 2007

Friday, January 5. 2007

Type of Websites

Friday, January 5. 2007

Absolute Positioning

Absolute positioning positions the box within the containing block and not the browser itself. The top, right and bottom properties are specified in different combinations to position the box within the container.

Absolutely positioned boxes are not part of the normal flow and they have no effect on sibling boxes that are positioned using other positioning schemes on the page.

If the width of an absolutely positioned box is not specified, it will move dynamically when the browser is resized. However, it will retain its positioning. If you do not want the box to move widths will have to be specified.

Relative Positioning

Fixed Positioning

Fixed positioning was not supported by Internet Explorer 6 and below and could be used only if the web page was being designed for other browsers. Internet Explorer 7 supports fixed positioning.

Combining Dynamic Positioning Techniques

Controlling Content Visibility

Clipping Regions and Overflow

Z-Index Ordering

MyImg.style.zIndex = 2;

Element Visibility

Friday, January 5. 2007

Friday, January 5. 2007

Friday, January 5. 2007

HTML was designed to pass the layout functions to the end user. The designer was forced to use or misuse the original HTML standard creatively if he felt the need to control the layout.

Quicksearch

Chapters

Syndicate This Blog

Contact Author

Blog Administration