Introduction

This is the concluding part in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it is used. In the second part, we saw what Semantic Markup is, how it has been built into CSS and what enhancements it brings for Web pages.

In this part, we shall see how style rules are defined and what kind of issues may arise in displaying the same Web page across different browsers.

Defining style rules

• Selectors

Every CSS style definition has three parts: a selector, a property and a value. The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon (:), and surrounded by curly braces as shown in the code sample below. Selectors can be grouped so that the same style rule can be applied to multiple elements. This selector needs to be separated by a comma to form a group.

h1, h2, h3, h4, h5, h6, p
{
color: green
}

• The class selector

Using a class selector, you can define different style rules for multiple elements. The class selector is defined as a selector name prefixed by a dot (.). You can apply multiple classes to elements which give you the flexibility to define more rules, displaying the page accordingly, as shown next.

.contentarea
{
width: 200px;
}
.content
{
margin: 0;
padding: 0;
color: #cccccc;
}

Applying the above classes,

<p class=”contentarea content”>
Some content here …
</p>
<p class=”content”>
Some content here …
</p>

• The id selector

You can define style rules to HTML elements with the id selector, which is defined as a hash (#). In the example below, the style rule will be applied to the element which has the id ‘someid’. With this, you can define different style rules for multiple elements. You can apply multiple classes to elements giving you the flexibility to define more rules and accordingly displaying the page, as shown below.

#someid
{
font-weight:bold;
}

Applying the above classes,

<p id=”someid”>
Some content here …
</p>

Note: As a rule, you can have only one element in a page with one id. Having multiple elements with the same id is not recommended and your scripts might not give you the desired output.

• Adding comments in CSS

To explain what you are doing in the style rules, you can insert comments in CSS, using the /* and */ tags.

#someid
{
/* The following rule will make the font bold on screen!!! */
font-weight:bold;
}

Next, we shall see some cross-browser issues that we need to handle during the coding of our Web page.

Cross-browser issues

The designer of a Web page can never know what browser the user may use to browse his Web page. This is aggravated by the fact that users now have several lighter and faster browsers to browse the Web. This makes your task as a Web developer more difficult as unfortunately all these browsers follow standards in their own way.

Nonetheless, as the developer, you have a few tools to make sure that your Web page loads correctly in the majority of browsers. One of them is testing your page on as many browsers as possible, at least on Microsoft Internet Explorer versions 6 and 7, and Firefox versions 2.x and 3.x.

You can also use tools such as conditional CSS linking, improving the compatibility of your page for the browser on which it will be viewed. To link CSS files conditionally in your Web page, you can use the following conditional statements in your code for Internet Explorer versions 6 and 7:

<!–[if IE 6]>
<link src=“ieg_6.css” type=“text/css” />
<! [endif]– >

<!–[if IE 7]>
<link src=“ieg_7.css” type=“text/css” />
<! [endif]– >

This will do the following while loading your page: If the user is using Microsoft Internet Explorer 6, then styles from ieg_6.css will be applied to the page while the other CSS file will be ignored.

On the other hand if the user is browsing using Internet Explorer 7, styles will be applied from ieg_7.css. This approach provides you the flexibility to maintain separate CSS files specific to Internet Explorer 6 and 7. We can have a common file in which all the common rules can be specified and in these specific files, we can override the rules for these specific browsers. The obvious advantage of using this method is improved code management since in case of a problem, we need not go through the entire hierarchy of code files for the site. We can straight away look into the specific file and apply the necessary fixes.

Further study and references

A lot of material on CSS is available on the Web; some of the links are mentioned below.

• Yahoo Developer Network: http://developer.yahoo.com/performance/rules.html
• CSS Filters from the now-defunct dithered.com: http://www.communis.co.uk/dithered/css_filters/index.html
• CSS Hack category on the CSS-Discuss Wiki: http://css-discuss.incutio.com/?page=CssHack
• W3Schools: http://w3schools.com

Introduction

This is the second in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it is used.

In this part, we shall see what Semantic Markup is, why it is recommended and what enhancements it brings for Web pages.

Basics of Semantic Markup

The closest literal meaning of the word ‘semantic’ is the word ‘meaning’. As applied to Web pages, the term ‘semantic markup’ means using the correct tag to accurately describe the type of content of a Web page.

Before CSS was introduced, designers had limited options to design and present the content of their Web pages, the most common way for which was to use table cells and font tags to create styles. This used to severely limit the presentation techniques for the content.

CSS was introduced to enable designers create a consistent technique to define the style information for Web documents.

Standard tags provided by CSS

• Heading tags

As we had seen in part 1 of this blog, CSS enables Web page designers to separate the content of a page from its presentation. This is done using tags.

Heading tags are the equivalent of the ‘Level 1 heading’ style in any popular word processing program. A majority of the Web pages usually start with a heading tag, followed by several subheading tags (followed by their content) arranged hierarchically.

Except for the Web page’s title (which appears in the browser’s title bar), using heading and subheading tags is highly recommended to organize the page content in a sequential and logical flow. Heading and subheading tags are usually indicated in the Web page’s HTML code as ‘h1’ (for the heading), ‘h2’ (for the section heading), ‘h3’ (for the section subheading) and so on. An example of using heading tags in a sample Web page is shown below.

• Paragraph tags

Since the content of the page will usually be arranged in paragraphs, a tag is available for this purpose. This tag (<p>, </p>) enables the page designer to arrange the content in paragraphs. A code example followed by its output in a standard browser for the paragraph tag are shown next.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3306FC;
}
</style>
</head>
<body>
<h1>A ‘heading 1’ heading, followed by its paragraph</h1>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

• List tags

List tags, as the name suggests, can be used to create numbered or bulleted lists of items on a Web page. These are amongst the most underutilized tags, since the type and variety of options that they provide are almost limitless. Several options are also available for nesting of lists. This page provides several quick examples of the usage of list tags, with their types and categories.

• Table tags

Tables should preferably be used to display data present in a tabular format, such as in a spreadsheet. Table tags are probably used incorrectly the most, that is, they are used to tabularize data that would be better presented, perhaps as a list. Several good examples of the usage of table tags for the formatting of tables and their cells are presented in this link.

To summarize part two of this blog, we saw how CSS offers us several tools enabling us to display our Web page in the correct and intended manner, while letting us keep the HTML code maintainable.

In the third and concluding part, we shall see how to define style rules, and look at some cross-browser implementation issues.

Introduction

Cascading Style Sheet, usually used in its abbreviated form as CSS, is a style sheet language designed to enable the separation of a document’s content from the way it is intended to be presented. Introduced by the W3C consortium in 1996, CSS is used to describe the ‘look and feel’ of a document written in another markup language, such as XML or XHTML.

In this blog article, we shall go through the basics of CSS and see a few examples of how it is to be used. We shall also see some cross-browser techniques to make a piece of CSS code work in the same way on all the major browsers.

It is assumed that the reader knows HTML and how to create HTML pages.

What is CSS?

To understand CSS, we first need to understand the concept of a Style Sheet Language – a language used to describe the layout of structured documents. A bare-bones example of this requirement would be displaying a table on a Web page. In this case, the content of the table is distinct from its layout, meaning, the table can use any font, background color and design whilst conveying the same information.

A collection of such style-defining rules is known as a style sheet and a language which enables defining such rules for a particular application or purpose is known as a style sheet language.

Put another way, a style sheet allows a Website developer to define the content of the Web page in one file and the way that content is to be presented in another. Using a technique, these two files are ‘linked’ to generate the required output in the desired manner.

CSS is a powerful tool for a Website developer, allowing him to be consistent with the look and feel of his Web pages while giving him much more control over the layout and design than straight HTML ever did.

As mentioned in the preceding paragraphs, the styles take care of displaying the Web page and are defined in separate files. So if multiple styles are declared for an element, they will cascade into one and that is the reason these sheets are known as Cascading Style Sheets or CSS.

The cascading order of what style to be used when there is more than one specified for an HTML element depends on the following order, in increasing levels of priority:

1. Browser default: Look for the style element that is created; if it is not in the document, use the default rules in the browser.
2. External Style Sheet: Determine if any of the style rules are marked as important and apply those to the appropriate elements.
3. Internal Style sheet (declared inside the <head> tag): Any style rules in the document will have precedence over the default browser settings.
4. In-line style sheet (declared inside the HTML element – this has the highest priority): The more specific the style rule, the higher the precedence it will have.

So, an in-line style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag in an external style sheet or in a browser (a default value). Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.

The basics of CSS

The basic purpose of CSS is to allow the designer to define style declarations (formatting details such as fonts, element sizes, and colors), and to apply the defined styles to selected portions of HTML pages using selectors – references to an element or group of elements to which the style is applied.

Let’s understand it with the help of a simple example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>. . . </p>
<h2>Second Title</h2>
<p>. . .</p>
<h2>Third Title</h2>
<p>. . .</p>
</body>
</html>

It can be seen from the sample code above that both the content as well as the style of the Web page are separately defined (although for ease of understanding, they have been shown in the same file). The font and font colors to be used for the page are defined in the <style> block, whereas the actual content, that is, the text of the page, is defined separately within the <body> block.

Different ways in which styles can be applied

Now let’s understand the different ways in which CSS can be applied to a Web page.

• In-line Styles

When the style rules are defined for an HTML element using the <style> attribute in the Web page itself, these are known as ‘in-line styles’. As mentioned above, these style rules have the highest priority. An example of inline styles is shown below:

<p style=”font-family: sans-serif; color: #3366CC;”>
Amazingly few discotheques provide jukeboxes.
</p>

With inline styles, there are some advantages such as:

1. The styles are available in the page source itself.
2. These rules will be applied as they have the highest priority.

But there are also some disadvantages such as:

1. No re-usability of rules: As the styles are specific to the element, you have to specify these styles for all the elements.
2. Code maintenance: Since the styles are going to be a part of the Web page, code maintenance is a problem.

• Embedded Styles

When the style rules are defined in the <head> tag of the page, they are known as embedded styles. An example of embedded styles is shown next.

<html>
<head>
<style type=”text/css”>
/* Style rules here*/
</style>
</head>
<!—rest of the html of the page –>
</html>

With embedded styles too there are certain advantages and disadvantages. The advantages are:

1. The styles are available in the page source itself.
2. The same style can be applied to multiple elements.

The disadvantages are:

1. No re-usability: Though the style rules are now part of the page instead of the element, if the same style rules have to be applied to a different page, then the same rules need to be defined for the other page too.
2. Code maintenance: Since each page is going to have rules, if a change is required to be made in the appearance of a particular element, then a change in all the pages where these style rules are defined will have to be made.
3. External style sheets: When the style rules are defined in a separate file and used in the Web pages by providing a ‘link’, these are known as external style sheets. These files are saved with the .css file extension.

An example of an external style sheet is shown next.

/* START: External style sheet file name – eg.css */
/* style rules go here */
/* END: External style sheet file name – eg.css */
To link this file to your Web page, we add the following line in the <head> tag of the page:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”eg.css” />
</head>
<!—rest of the html of the page –>
</html>

External style sheets are highly recommended for any application since they present an advantage of re-usability as well as ease in code maintenance. However, this does not mean that one should never use embedded or in-line styles in Web pages, but it is recommended to use them only where absolutely necessary.

Before moving on to see more about style definition, we will understand one more term from Web 2.0 – Semantic Markup covered in next part of the blog. Watch this space for more.

Introduction

In today’s connected age, almost everyone knows what the Internet is. However, very few people have an idea about the workings of this worldwide network. The Internet, as we know it today, has had a long history of evolution and like any other interesting and useful invention, is governed by a set of rules and protocols.

This blog introduces the reader to the basics of the fundamental protocol behind the workings of the Internet – the Internet Protocol, and the current and upcoming versions of this protocol.

Internet Protocol

Internet Protocol (IP) is a set of rules used for data communication across a packet-switched network. It is also known as TCP/IP. The Internet Protocol is used as the mechanism for resolving host addresses and routing data packets from a source to a destination across one or more IP networks, such as the Internet.

The major design principle behind IP was that the network infrastructure cannot be relied upon for data delivery, but it is dynamic in terms of the number of available links and nodes between the source and destination. The network is supposed to be self-sustaining and there is no central monitoring agency to track the state of the network.

IPv4

The first version of Internet Protocol to be publicly deployed and widely used is IPv4. It was designed by the Internet Engineering Task Force (IETF) and came into force in September 1981. RFC791 (http://tools.ietf.org/html/rfc791) provides the technical details of IPv4.

Limitations of the Addressing Mechanism in IPv4

Any computer or computing device connected to the Internet has to be allocated a unique address for identifying it on the worldwide network. This address is called the IP address. This address serves two main purposes: 1 – identifying a host system or a network interface on the Internet, and 2 – providing a logical address for a software application running on that computer.

IPv4 uses 32 bits for computing this address. Using 32 bits provides a maximum of 2³² or 4,294,967,296 (4 billion) unique addresses. Out of these 4 billion addresses, some are reserved for special purposes, such as private networks and for multicasting.

Also, due to the phenomenal growth of the Internet in the late 80s and early 90s, empty or unassigned IPv4 addresses have started decreasing and are estimated to exhaust before 2012. This anticipated shortage has been the driving factor behind the design of a new version of the Internet Protocol, IPv6.

IPv6

IPv6 was designed as a successor to IPv4 and was described by the IETF in a standards document RFC2460 (http://tools.ietf.org/html/rfc2460) published in December 1998. IPv6 uses a 128-bit addressing mechanism, resulting in 2¹²⁸ (3.4 x 10³⁸) addresses. This vast increase in the address space provides more flexibility in allocating addresses for devices as well as for routing data traffic.

Why not the name ‘IPv5’ after ‘IPv4’?

The designers of the next generation IP networks could not use the number ‘5’ as a successor to IPv4 because it had already been assigned to ‘Flow Oriented Streaming Protocol’, an experimental protocol intended to support the transmission of streaming audio and video.

Key Features and Advantages of IPv6 and Differences from IPv4

IPv6 uses a new header format which is significantly different from that of IPv4, making the two protocols not interoperable. IPv6 also specifies a new packet format, designed to minimize the computing overhead in processing the packet headers. Some of the key features of IPv6 are listed below.

• Larger address space

The most important feature of IPv6 over IPv4 is that it provides a 128 bit address compared to a 32 bit one for IPv4, increasing the addressing capability by several trillions. An example of the addressing provided by IPv6 is shown below. (Source: link)

• Stateless address autoconfiguration (SAA)

SAA is a technical term describing a mechanism in which IPv6 hosts can automatically configure themselves using predefined handshake signals and messages defined by ICMPv6 – a protocol designed to augment IPv6. ICMPv6 provides for several messages which are used for diagnostic and error reporting activities.

• Multicasting

Multicasting is the ability of a host to send out a single packet to multiple destinations. IPv4 included multicasting as an optional feature (although it was most commonly implemented in all hardware and associated software) whereas IPv6 specifies multicasting as a mandatory feature.

• Included network layer security

IPv6 includes a protocol for encryption and authentication – IPSec. This feature too was optional in IPv4 (although it was usually implemented) but made mandatory in IPv

• Simplified processing by routers

To make the process of packet forwarding easier, a number of simplifications, the details of which are beyond the scope of this blog, were made to the IPv4 packet header forming the base for the IPv6 header. These changes were targeted at making data forwarding by routers simpler and hence more efficient.

• Mobility

Mobile IPv6 (MIPv6) dropped the concept of triangular routing, in which a packet is sent to a proxy before being sent to the intended destination. Hence, mobile IPv6 is as efficient as normal IPv6. IPv6 routers may also support Network Mobility (defined by RFC3933 – http://tools.ietf.org/html/rfc3963) allowing an entire network subnet to move to a new router connection point without being renumbered. Theoretically, this would also increase the efficiency of data flow.

• Extensibility of Options and ‘Jumbogram’ Support

Options in IPv6 are implemented as additional extension headers after the IPv6 header, providing the size of an entire packet for implementing an option. This is unlike IPv4, which limits the options parameters to a fixed size of 40 octets.

IPv4 also limits packets to 65,535 (2¹⁶ – 1) octets. IPv6 supports packets over this limit, known as ‘jumbograms’ which can be as large as 4,294,967,295 (2³² – 1) octets.

IPv6 Deployment

Although IPv4 addresses are slowly getting depleted, their exhaustion has been significantly slowed down by the introduction of techniques such as classless inter-domain routing (CIDR) and the extensive use of network address translation (NAT). It has been forecasted that IPv4 addresses will be completely depleted sometime between 2011 and 2012.

IPv6 still accounts for a very small fraction of the addresses used in the IPv4 dominated public Internet.

The biggest deployment area for IPv6 is cellular telephony, which is slowly being transitioned from 3G to 4G technologies where voice is seen as a Voice over Internet Protocol (VoIP) service, mandating the use of IPv6.

Hurdles to the Adoption to IPv6

The spread of IPv6 usage has been slow due to several barriers to its availability and adoption.

The biggest barrier to IPv6 adoption is its compatibility with legacy devices. Problems with such devices include manufacturers who either no longer exist, or make updates prohibitively expensive. Problems with these devices also include mask programmed firmware (ROM) which is impossible to upgrade as well as limitations of the device to support the IPv6 protocol stack.

Newer equipment supporting IPv6 include newer and improved hardware, which also increases the cost of the device to the end customer and makes software development for such devices expensive.

Lastly, a significant hurdle to the spread of IPv6 is the consumer’s lack of interest, since IPv4 is proving to be sufficient for all their needs right now.

In summary, we saw in this blog the advantages that IPv6 promises to bring for tomorrow’s connected world. It only remains to be seen when IPv6 becomes as common as the Internet itself is, today.

Animation is the illusion of movement created by a rapid display of a sequence of images. Scientifically, this occurs due to the persistence of vision experienced by the eye. The most common and everyday example of animation is a video program.

3D animation came into existence with advancements in computing software and technology. 3D animation creates graphics using a 3D representation of 2D geometric data stored in a computer.

Examples of 3D graphics or animation would be cartoon films and 3D models used in engineering and architecture.

How Does Animation Work

The basic principle of animation is the same for all media – displaying a rapid sequence of images which are slightly different than each other creating the illusion of movement before the eye.

However, this is how regular, 2D animation is created (or rather, was created until a few years ago). Nowadays, for both creating 2D as well as 3D animation, computer software from several vendors such as Adobe, Xara, Strata and Corel are available.

The Thaumatrope was one of the earliest devices designed to understand the persistence of vision (Source: http://www.aranpa.com)

The various steps involved in generating 3D animation are described next.

Concepts and Storyboarding

Storyboarding is the process of creating a visual representation of the actual screenplay of the animation’s story. It basically consists of a series of illustrations or images presented in a sequence for pre-visualizing an animation. It is usually an intricate and tedious process as it is supposed to visually convey the actual story of the animation.

Modeling

3D modeling is usually done using specialized computer software and involves developing a mathematical model of any surface of a three dimensional object. This is actually done using 2D images of the object using a process called 3D rendering. Models may be created automatically or manually; the latter is usually done by an artist and is similar to sculpting. An example of a computerized 3D model of a human head is shown next. (Source: http://pabs.us/graphictutorials/wp-content)

Layout

To render objects on the media being used, they must first be placed within a scene, a process known as layout. In this process, the physical and spatial interrelations between the objects contained in a scene are first decided. Next, several techniques such as motion capturing and keyframing are used to capture their movement and deformation over time.

Just as in modeling, layout may also involve physical movement of the objects in the scene, similar to sculpting. An example of the use of layout is shown below in a promotional poster for the film ‘Shrek’.

Positioning the Cameras and Lighting

For the scene to provide a realistic feel to the viewer, the lights and cameras must be positioned correctly. This ensures that minor details, such as shadows, also appear authentic in the final results. As an example, the following image shows the results of correctly positioning the cameras and lights in the making of a promotional poster for the Ford Focus car. (Source: http://www.leblogauto.com/images/focus_cc2.jpg)

Rendering

This is usually the last step in creating the illusion of motion between the objects in the scene. This step also involves complex interaction of different light sources of varying intensities and positioned at different places to get the desired effects in the scene.

This step is most commonly performed using 3D computer software. A technique known as 3D projection, which allows a 3D image or object to be viewed in 2 dimensions is also used in the process of rendering.

Visual Effects (VFX)

Visual effects are the combination of various processes in which live action footage is combined with computer generated static imagery. It is used to create realistic looking environments which may be costly or dangerous to create artificially and then capture on film.

Visual effects are most commonly part of a film’s post-production, and have now become accessible to amateur filmmakers with affordable animation software.

An example of visual effects is the use of Computer Generated Imagery or CGI, which consists of developing scenes, first shot with real actors and then processed using computer software to render a computerized 3D equivalent of that scene, as shown in the image below from the movie ‘Avatar’ (Source: http://images2.fanpop.com)

In summary, we have seen in this blog that 3D animation involves several steps, starting from the concept right up to post-production with each of these steps involving technical as well as creative expertise in equal measures. Thankfully, advances in technology have made this field simpler and more productive for the professionals, and within reach for the amateurs.