The visual style that has come to be associated with the term Web 2.0 has exploded in popularity; everywhere you look, corporate sites, web service sites, ecommerce sites, and even personal blogs are making use of clean, minimalist design coupled with fancy graphic effects. If you’d like to jump on the bandwagon, this is the article for you! Using Photoshop, I’ll show you how to add Web 2.0 graphic goodness to your site design using non-destructive techniques. It may even take your site from boring to trendy!
I won’t assume too much, nor should it matter if you’re not using the latest version of Photoshop. If you’re a Photoshop veteran, no doubt you’ll be happy skimming through the first few tips while we cover the basics. But I’ll be surprised if Photoshop whizzes don’t learn at least something along the way.
Oh, and one other thing — whenever I mention a tool for which a keyboard shortcut can be used, I’ve indicated that shortcut key in parentheses. If you’re a keyboard junkie, you’ll know that mastering these shortcuts is a real time-saver.
Let’s get started then, shall we?
Creating a Simple Gradient
One of the easiest effects to achieve in Photoshop is the subtle gradient. Looking at any mix of Web 2.0 sites, you’ll see gradients used as page backgrounds, behind a top banner or header area, on interface bars, and in different shapes (see starbursts, below).
One of the easiest ways to make a gradient effect is to apply a layer style to an existing layer. Here’s a quick series of steps for creating a rectangle that has a gradient.
1. Set a base color for your rectangle by clicking the color patch in the toolbar, as shown in Figure 1, and selecting the color that you’d like to use.
Figure 1. Selecting a base color (click to view image)
2. To create a rectangle shape, select the rectangle shape tool (keyboard shortcut: U) and draw a rectangle on your canvas by clicking, dragging, and releasing, as illustrated in Figure 2.
Figure 2. Drawing a colored rectangle (click to view image)
3. In the Layers palette, click the layer effect icon and select Gradient Overlay, like I’ve done in Figure 3.
Figure 3. Adding a gradient overlay to the rectangle (click to view image)
4. For a simple gradient, change the Blend Mode to Multiply and lower the Opacity to about 40%. Click OK. (The Multiply blend mode allows the black/white gradient — which you can see in the color patch — to simply darken the existing color. Lowering the opacity keeps the color from getting too dark.)
Figure 4. Changing the gradient overlay settings (click to view image)
5. Figure 5 shows the completed gradient effect on the rectangle. What’s particularly handy is the fact that you can edit the effect at any time by double-clicking the effect icon (circled below) next to the layer name in the Layers palette.
Figure 5. The final gradient (click to view image)
Variations
Set the blend mode to Screen in the Layer Style dialog box. This will lighten the base color instead of darkening it.
Click the gradient color patch in the Layer Style dialog box to edit the gradient. Drag the bottom color sliders to adjust how quickly the gradient fades.
Set the blend mode to Normal in the Layer Style dialog box, and click the gradient color patch to edit the gradient. You can pick one of the preset gradients, or edit and add color patches to the bottom of the gradient editor to create your own customized gradient. If you set the blend mode to Normal, the custom gradient completely overlays your shape, so it doesn’t even matter what the original color of your rectangle was!
You can apply a Layer Style to any layer, not just to rectangles. This means that you can apply this technique to rounded rectangles, circles, stars — you can apply a gradient overlay to anything that you create on a layer.
Monday, July 7, 2008
Subtle reflections with Photoshop
Now that you have some great backgrounds, let’s apply some Web 2.0 effects to text and objects. One of the effects you may have seen a lot of is the standard reflection. This effect can be created with either a text layer, shape layer, or a graphic layer.
1. The first step is to duplicate your layer. Drag on the layer in the Layers palette and drop it on top of the “new layer” icon at the bottom of the palette (shown in Figure 16).
Figure 16. Duplicating a layer (click to view image)
2. This creates a copy of the layer, which you can now flip upside down. With the copied layer selected, type Ctrl-T (Command-T on Mac) to “transform” the shape. You’ll see a boundary box with handles on the corners and sides appear around your layer. Click on the top handle and, holding the Shift key, drag downward to flip the text vertically like that shown in Figure 17.
Figure 17. Transforming our duplicated text (click to view image)
3. Double-click inside the bounding box to commit the transformation, then change to the Move tool (V) and move the layer up to meet the bottom of the original layer. Lower the opacity slightly, as I’ve done in Figure 18.
Figure 18. Lowering the opacity of our reflection (click to view image)
4. To add another level of visual interest, add a layer mask to fade out the bottom part of the reflection. Click the Add Layer Mask icon at the bottom of the Layers palette. As shown in Figure 19, you’ll see a linked blank square attached to your layer.
Figure 19. Adding a layer mask (click to view image)
5. Set your foreground color to black and select the gradient tool (G), choosing the Foreground to Transparent option in the options bar.
Figure 20. Making our mask a gradient (click to view image)
6. Click on the white mask thumbnail in the Layers palette to make sure you’re going to edit it, then click a little below the bottom of your reflected layer. Hold the Shift key, and drag upwards until you’re just about at the top of your layer. Release your mouse button, and you’ll see that a gradient has been completed on the mask layer, as shown in Figure 21. The black areas of the mask hide the layer, so the gradient effectively fades out your reflected layer.
Figure 21. Creating a gradient layer mask (click to view image)
Tip: You can add a layer mask to any layer for a similar faded effect. Or, add a layer mask and then use a paint or shape tool to hide part of a layer — black will completely hide the area you paint, and different shades of grey will provide different levels of opacity!
1. The first step is to duplicate your layer. Drag on the layer in the Layers palette and drop it on top of the “new layer” icon at the bottom of the palette (shown in Figure 16).
Figure 16. Duplicating a layer (click to view image)
2. This creates a copy of the layer, which you can now flip upside down. With the copied layer selected, type Ctrl-T (Command-T on Mac) to “transform” the shape. You’ll see a boundary box with handles on the corners and sides appear around your layer. Click on the top handle and, holding the Shift key, drag downward to flip the text vertically like that shown in Figure 17.
Figure 17. Transforming our duplicated text (click to view image)
3. Double-click inside the bounding box to commit the transformation, then change to the Move tool (V) and move the layer up to meet the bottom of the original layer. Lower the opacity slightly, as I’ve done in Figure 18.
Figure 18. Lowering the opacity of our reflection (click to view image)
4. To add another level of visual interest, add a layer mask to fade out the bottom part of the reflection. Click the Add Layer Mask icon at the bottom of the Layers palette. As shown in Figure 19, you’ll see a linked blank square attached to your layer.
Figure 19. Adding a layer mask (click to view image)
5. Set your foreground color to black and select the gradient tool (G), choosing the Foreground to Transparent option in the options bar.
Figure 20. Making our mask a gradient (click to view image)
6. Click on the white mask thumbnail in the Layers palette to make sure you’re going to edit it, then click a little below the bottom of your reflected layer. Hold the Shift key, and drag upwards until you’re just about at the top of your layer. Release your mouse button, and you’ll see that a gradient has been completed on the mask layer, as shown in Figure 21. The black areas of the mask hide the layer, so the gradient effectively fades out your reflected layer.
Figure 21. Creating a gradient layer mask (click to view image)
Tip: You can add a layer mask to any layer for a similar faded effect. Or, add a layer mask and then use a paint or shape tool to hide part of a layer — black will completely hide the area you paint, and different shades of grey will provide different levels of opacity!
Difference between HTML and XHTML
Even though this is a CSS reference, we should spend some time talking about HTML and XHTML, because your choice of markup language will affect how CSS is applied in some instances. Moreover, in order to understand the variations in the way CSS is applied to HTML and XHTML, you need to grasp the fundamental differences between the two markup languages.
The most important difference between the two markup languages is that HyperText Markup Language, or HTML, is an application of SGML (Standard Generalized Markup Language),1 and allows an author to omit certain tags and use attribute minimization.2 The Extensible HyperText Markup Language, or XHTML, is an application of XML (Extensible Markup Language).3 It doesn’t permit the omission of any tags or the use of attribute minimization. However, it provides a shorthand notation for empty elements—for example, we could use
instead of
—which HTML does not. A conforming XML document must be well formed, which, among other things, means that there must be an end tag for every start tag, and that nested tags must be closed in the right order.4 When an XML parser encounters an error relating to the document’s well-formedness, it must abort, whereas an HTML parser is expected to attempt to recover and continue.
There are three areas in which the differences between HTML and XHTML affect our use of CSS:
case sensitivity
optional tags
properties for the root element
Note, though, that these differences apply only when an XHTML document is served as an application of XML; that is, with a MIME type of application/xhtml+xml, application/xml, or text/xml. An XHTML document served with a MIME type of text/html must be parsed and interpreted as HTML, so the HTML rules apply in this case. A style sheet written for an XHTML document being served with a MIME type of text/html may not work as intended if the document is then served with a MIME type of application/xhtml+xml. For more information about MIME types, make sure to read MIME Types.
This can be especially important when you’re serving XHTML documents as text/html. Unless you’re aware of the differences, you may create style sheets that won’t work as intended if the document’s served as real XHTML.
Where the terms “XHTML” and “XHTML document” appear in the remainder of this section, they refer to XHTML markup served with an XML MIME type. XHTML markup served as text/html is an HTML document as far as browsers are concerned.
The most important difference between the two markup languages is that HyperText Markup Language, or HTML, is an application of SGML (Standard Generalized Markup Language),1 and allows an author to omit certain tags and use attribute minimization.2 The Extensible HyperText Markup Language, or XHTML, is an application of XML (Extensible Markup Language).3 It doesn’t permit the omission of any tags or the use of attribute minimization. However, it provides a shorthand notation for empty elements—for example, we could use
instead of
—which HTML does not. A conforming XML document must be well formed, which, among other things, means that there must be an end tag for every start tag, and that nested tags must be closed in the right order.4 When an XML parser encounters an error relating to the document’s well-formedness, it must abort, whereas an HTML parser is expected to attempt to recover and continue.
There are three areas in which the differences between HTML and XHTML affect our use of CSS:
case sensitivity
optional tags
properties for the root element
Note, though, that these differences apply only when an XHTML document is served as an application of XML; that is, with a MIME type of application/xhtml+xml, application/xml, or text/xml. An XHTML document served with a MIME type of text/html must be parsed and interpreted as HTML, so the HTML rules apply in this case. A style sheet written for an XHTML document being served with a MIME type of text/html may not work as intended if the document is then served with a MIME type of application/xhtml+xml. For more information about MIME types, make sure to read MIME Types.
This can be especially important when you’re serving XHTML documents as text/html. Unless you’re aware of the differences, you may create style sheets that won’t work as intended if the document’s served as real XHTML.
Where the terms “XHTML” and “XHTML document” appear in the remainder of this section, they refer to XHTML markup served with an XML MIME type. XHTML markup served as text/html is an HTML document as far as browsers are concerned.
What will Web 3.0 look like?
What will Web 3.0 look like? Who knows? But here are a few possibilities.
[Source: PCMag.com]
The Semantic WebA Web where machines can read sites as easily as humans read them (almost). You ask your machine to check your schedule against the schedules of all the dentists and doctors within a 10-mile radius—and it obeys.
The 3D WebA Web you can walk through. Without leaving your desk, you can go house hunting across town or take a tour of Europe. Or you can walk through a Second Life–style virtual world, surfing for data and interacting with others in 3D.
The Media-Centric WebA Web where you can find media using other media—not just keywords. You supply, say, a photo of your favorite painting and your search engines turn up hundreds of similar paintings.
The Pervasive WebA Web that’s everywhere. On your PC. On your cell phone. On your clothes and jewelry. Spread throughout your home and office. Even your bedroom windows are online, checking the weather, so they know when to open and close.
[Source: PCMag.com]
The Semantic WebA Web where machines can read sites as easily as humans read them (almost). You ask your machine to check your schedule against the schedules of all the dentists and doctors within a 10-mile radius—and it obeys.
The 3D WebA Web you can walk through. Without leaving your desk, you can go house hunting across town or take a tour of Europe. Or you can walk through a Second Life–style virtual world, surfing for data and interacting with others in 3D.
The Media-Centric WebA Web where you can find media using other media—not just keywords. You supply, say, a photo of your favorite painting and your search engines turn up hundreds of similar paintings.
The Pervasive WebA Web that’s everywhere. On your PC. On your cell phone. On your clothes and jewelry. Spread throughout your home and office. Even your bedroom windows are online, checking the weather, so they know when to open and close.
Watz PHP?
What is PHP?
PHP stands for ‘Hypertext Preprocessor’ which is actually a recursive acronym. It is an open source and most widely used scripting language for the web. In another words, PHP is a server side scripting language and can be embedded into HTML code which is parsed and processed when the page is requested.
Why is it popular?
The main credit goes to it being an open source language and ease of use. Practically, PHP is much easier to learn and code when compared to other scripting languages. It is fast and flexiable. Like every other language, there is a certain degree of learning curve associated with PHP. Refer to Features of PHP.
Where to start?
Before you start with basics of PHP programming, it is important that you understand the purpose and usability of programming in PHP. You should know what PHP can do for you and what it is not meant for. You may also want to learn about installing PHP on your system to begin PHP programming and web development, but first, let’s start with Introduction to PHP Programming.
What to expect?
We intend to provide you with all basic information you will need to start learning PHP right away. PHP as you know is best suited for web development and hence we will also include several examples for you to get an insight into programming PHP with MySQL (with examples) for web development. We are also expanding all our sections on PHP so as to offer as much as we can to our readers.
What can I do with PHP?
PHP, as we told earlier, is a server-side scripting language. The client will always see and interact with HTML in his browser. PHP is capable of generating dynamic HTML pages and hence it can output HTML which servers as a presentation layer and in the backend, on the server it can continue to process all requests made by the client. These requests could be processing of form, handling cookies, uploading files, generating dynamic HTML by querying a database etc.
Popular Features of PHP
Some of the most popular features of PHP are as mentioned below:-
PHP works on multiple Operating Systems. Some are Linux, manu Unix flavors, BSD, Mac OS X and many more..Plenty of Web Servers are supported. Some are Apache, IIS, Netscape iPlanet and many others..Use it as a procedural programming or object oriented programming. Choice is yours!Dynamic generation of HTML, PDF, Flash, Text, CSV, XML and others..Support for numerous databases like MySQL, Oracle, MS-SQL, Sybase, PostgreSQL and many others..Interaction with services like LDAP, POP3, SMTP etc..PHP comes along with PEAR (PHP Extension and Application Repository) which is like a library of code, procedures for handling error, components which can be reused.
Not only these, but there are many more features and abilities of PHP which you will discover as you go along.
PHP can also be used from command line to execute php scripts. This is similar to running a UNIX shell or a perl script from command to accomplish tasks like taking backup of files, analyzing log files, generating a list of files and folders etc.
PHP is capable of doing much more than what read above. You can use it on command line interface to do most of the tasks stated above, without a browser, of course. PHP can also be used to create rich GUI applications using PHP-GTK kit. This requires knowledge of advanced PHP features.
Let’s look at some of the popular features of PHP.
Installing PHP
Requirements
All you need is a working system! Since PHP supports wide variety of operating systems, it should not be a problem to find the right PHP version for your operating system. For web based PHP applications, you will need some or all of the following:-
A Web Server (for serving pages off a web site)
PHP (the PHP core)
A Database Server (Plenty of databases are supported)
A text editor to edit PHP files (This will ease your development but optional)
Your options
You can either choose to download all the above three components and install them individually or you can download pre-configured packaged applications which will install Apache, MySQL and PHP as a single component. Some of the popular applications are EasyPHP, XAMPP and WAMP.
If you do not have prior installation experience of Apache, PHP and MySQL, we recommend that you start by installing any of the above packaged applications for a quick start. The installation notes are available on their respective web sites.
However, if you choose to install Apache, MySQL and PHP manually, then follow these links to download and configure these applications.
Apache
Apache is available as a free download from Apache web site. We recommend you download a stable release for your operating system. For Windows OS, download MSI installer which is quick to install.
PHP
PHP is available as a free download from PHP web site. You should look for stable release for your OS.
MySQL
MySQL database is available for download at MySQL web site and you are looking for a stable release for this as well.
PHP Text Editor
A google search for PHP editors will produce many results and depending on your choice, you can either opt for a free or a commercial editor. I personally recommend PSPad for its ease of use and functionality.
PHP stands for ‘Hypertext Preprocessor’ which is actually a recursive acronym. It is an open source and most widely used scripting language for the web. In another words, PHP is a server side scripting language and can be embedded into HTML code which is parsed and processed when the page is requested.
Why is it popular?
The main credit goes to it being an open source language and ease of use. Practically, PHP is much easier to learn and code when compared to other scripting languages. It is fast and flexiable. Like every other language, there is a certain degree of learning curve associated with PHP. Refer to Features of PHP.
Where to start?
Before you start with basics of PHP programming, it is important that you understand the purpose and usability of programming in PHP. You should know what PHP can do for you and what it is not meant for. You may also want to learn about installing PHP on your system to begin PHP programming and web development, but first, let’s start with Introduction to PHP Programming.
What to expect?
We intend to provide you with all basic information you will need to start learning PHP right away. PHP as you know is best suited for web development and hence we will also include several examples for you to get an insight into programming PHP with MySQL (with examples) for web development. We are also expanding all our sections on PHP so as to offer as much as we can to our readers.
What can I do with PHP?
PHP, as we told earlier, is a server-side scripting language. The client will always see and interact with HTML in his browser. PHP is capable of generating dynamic HTML pages and hence it can output HTML which servers as a presentation layer and in the backend, on the server it can continue to process all requests made by the client. These requests could be processing of form, handling cookies, uploading files, generating dynamic HTML by querying a database etc.
Popular Features of PHP
Some of the most popular features of PHP are as mentioned below:-
PHP works on multiple Operating Systems. Some are Linux, manu Unix flavors, BSD, Mac OS X and many more..Plenty of Web Servers are supported. Some are Apache, IIS, Netscape iPlanet and many others..Use it as a procedural programming or object oriented programming. Choice is yours!Dynamic generation of HTML, PDF, Flash, Text, CSV, XML and others..Support for numerous databases like MySQL, Oracle, MS-SQL, Sybase, PostgreSQL and many others..Interaction with services like LDAP, POP3, SMTP etc..PHP comes along with PEAR (PHP Extension and Application Repository) which is like a library of code, procedures for handling error, components which can be reused.
Not only these, but there are many more features and abilities of PHP which you will discover as you go along.
PHP can also be used from command line to execute php scripts. This is similar to running a UNIX shell or a perl script from command to accomplish tasks like taking backup of files, analyzing log files, generating a list of files and folders etc.
PHP is capable of doing much more than what read above. You can use it on command line interface to do most of the tasks stated above, without a browser, of course. PHP can also be used to create rich GUI applications using PHP-GTK kit. This requires knowledge of advanced PHP features.
Let’s look at some of the popular features of PHP.
Installing PHP
Requirements
All you need is a working system! Since PHP supports wide variety of operating systems, it should not be a problem to find the right PHP version for your operating system. For web based PHP applications, you will need some or all of the following:-
A Web Server (for serving pages off a web site)
PHP (the PHP core)
A Database Server (Plenty of databases are supported)
A text editor to edit PHP files (This will ease your development but optional)
Your options
You can either choose to download all the above three components and install them individually or you can download pre-configured packaged applications which will install Apache, MySQL and PHP as a single component. Some of the popular applications are EasyPHP, XAMPP and WAMP.
If you do not have prior installation experience of Apache, PHP and MySQL, we recommend that you start by installing any of the above packaged applications for a quick start. The installation notes are available on their respective web sites.
However, if you choose to install Apache, MySQL and PHP manually, then follow these links to download and configure these applications.
Apache
Apache is available as a free download from Apache web site. We recommend you download a stable release for your operating system. For Windows OS, download MSI installer which is quick to install.
PHP
PHP is available as a free download from PHP web site. You should look for stable release for your OS.
MySQL
MySQL database is available for download at MySQL web site and you are looking for a stable release for this as well.
PHP Text Editor
A google search for PHP editors will produce many results and depending on your choice, you can either opt for a free or a commercial editor. I personally recommend PSPad for its ease of use and functionality.
Webpage thumbnailing
check out a great site for creating Webpage thumbnails on-the-flyvisit Websnapper 2.0
easy steps:
Just register
get a Developer ID
type ur URL in thr tool
and add the parameter ..&key=[DEVELOPER_ID]
n get ur thumbnail of desired size (small/medium/large)
easy steps:
Just register
get a Developer ID
type ur URL in thr tool
and add the parameter ..&key=[DEVELOPER_ID]
n get ur thumbnail of desired size (small/medium/large)
The 3 Layers of the Web
You can do a lot without JavaScript. Using Hypertext Markup Language (HTML — throughout this article, we’ll refer to HTML and XHTML as just HTML. Which you choose is up to you, and doesn’t have a much to do with JavaScript. In case it matters to you, the HTML code we’ll present in this article will be valid XHTML 1.0 Strict), you can produce complex documents that intricately describe the content of a page — and that content’s meaning — to the minutest detail. In this chapter from the new Simply Javascript (you can also download this article, along with two others, as a PDF), I’ll show you that by using Cascading Style Sheets (CSS), you can present that content in myriad ways, with variations as subtle as a single color, as striking as replacing text with an image.
No matter how you dress it up, though, HTML and CSS can only achieve an animatronic monstrosity that wobbles precariously when something moves nearby. It’s when you wheel in the JavaScript that you really can breathe life into your Pinocchio, lifting you as its creator from humble shop clerk to web design mastery!
But whether your new creation has the graceful stride of a runway model, or the shuffling gait of Dr. Frankenstein’s monster, depends as much on the quality of its HTML and CSS origins as it does on the JavaScript code that brought it to life.
Before we learn to work miracles, therefore, let’s take a little time to review how to build web sites that look good both inside and out, and see how JavaScript fits into the picture.
Keep ‘em Separated
Not so long ago, professional web designers would gleefully pile HTML, CSS, and JavaScript code into a single file, name it index.html (or default.htm, if they had been brainwashed by Microsoft), and call it a web page. I’ve conceptualized this as something like Figure 1. You can still do this today, but be prepared for your peers to call it something rather less polite.
Figure 1. A single-file mess (click to view image)
Somewhere along the way, web designers realized that the code they write when putting together a web page does three fundamental things:
It describes the content of the page.
It specifies the presentation of that content.
It controls the behavior of that content.
They also realized that keeping these three types of code separate, as depicted in Figure 2, “Separation of concerns,” made their jobs easier, and helped them to make web pages that work better under adverse conditions, such as when users have JavaScript disabled in their browsers.
Computer geeks have known about this for years, and have even given this principle a geeky name: the separation of concerns.
Figure 2. The separation of concerns (click to view image)
Now, realizing this is one thing, but actually doing it is another — especially if you’re not a computer geek. I am a computer geek, and I’m tempted to do the wrong thing all the time.
I’ll be happily editing the HTML code that describes a web page’s content, when suddenly I’ll find myself thinking how nice that text would look if it were in a slightly different shade of gray, if it were nudged a little to the left, and if it had that hee-larious photocopy of my face I made at the last SitePoint office party in the background. Prone to distraction as I am, I want to make those changes right away. Now which is easier: opening up a separate CSS file to modify the page’s style sheet, or just typing those style properties into the HTML code I’m already editing?
Like behaving yourself at work functions, keeping the types of code you write separate from one another takes discipline. But once you understand the benefits, you too will be able to summon the willpower it takes to stay on the straight and narrow.
Three Layers
Keeping different kinds of code as separate as possible is a good idea in any kind of programming. It makes it easier to reuse portions of that code in future projects, it reduces the amount of duplicate code you end up writing, and it makes it easier to find and fix problems months and years later.
When it comes to the Web, there’s one more reason to keep your code separate: it lets you cater for the many different ways in which people access web pages.
Depending on your audience, the majority of your visitors may use well-appointed desktop browsers with cutting-edge CSS and JavaScript support, but many might be subject to corporate IT policies that force them to use older browsers, or to browse with certain features (like JavaScript) disabled.
Visually impaired users often browse using screen reader or screen magnifier software, and for these users your slick visual design can be more of a hindrance than a help.
Some users won’t even visit your site, preferring to read content feeds in RSS or similar formats if you offer them. When it comes time to build these feeds, you’ll want to be able to send your HTML content to these users without any JavaScript or CSS junk.
The key to accommodating the broadest possible range of visitors to your site is to think of the Web in terms of three layers, which conveniently correspond to the three kinds of code I mentioned earlier. These layers are illustrated in Figure 3, “The three layers of the Web.”
Figure 3. The three layers of the Web (click to view image)
When building a site, we work through these layers from the bottom up:
We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.
With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.
Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.
If we keep the HTML, CSS, and JavaScript code separate, we’ll find it much easier to make sure that the content layer remains readable in browsing environments where the presentation and/or behavior layers are unable to operate. This “start at the bottom” approach to web design is known in the trade as progressive enhancement.
No matter how you dress it up, though, HTML and CSS can only achieve an animatronic monstrosity that wobbles precariously when something moves nearby. It’s when you wheel in the JavaScript that you really can breathe life into your Pinocchio, lifting you as its creator from humble shop clerk to web design mastery!
But whether your new creation has the graceful stride of a runway model, or the shuffling gait of Dr. Frankenstein’s monster, depends as much on the quality of its HTML and CSS origins as it does on the JavaScript code that brought it to life.
Before we learn to work miracles, therefore, let’s take a little time to review how to build web sites that look good both inside and out, and see how JavaScript fits into the picture.
Keep ‘em Separated
Not so long ago, professional web designers would gleefully pile HTML, CSS, and JavaScript code into a single file, name it index.html (or default.htm, if they had been brainwashed by Microsoft), and call it a web page. I’ve conceptualized this as something like Figure 1. You can still do this today, but be prepared for your peers to call it something rather less polite.
Figure 1. A single-file mess (click to view image)
Somewhere along the way, web designers realized that the code they write when putting together a web page does three fundamental things:
It describes the content of the page.
It specifies the presentation of that content.
It controls the behavior of that content.
They also realized that keeping these three types of code separate, as depicted in Figure 2, “Separation of concerns,” made their jobs easier, and helped them to make web pages that work better under adverse conditions, such as when users have JavaScript disabled in their browsers.
Computer geeks have known about this for years, and have even given this principle a geeky name: the separation of concerns.
Figure 2. The separation of concerns (click to view image)
Now, realizing this is one thing, but actually doing it is another — especially if you’re not a computer geek. I am a computer geek, and I’m tempted to do the wrong thing all the time.
I’ll be happily editing the HTML code that describes a web page’s content, when suddenly I’ll find myself thinking how nice that text would look if it were in a slightly different shade of gray, if it were nudged a little to the left, and if it had that hee-larious photocopy of my face I made at the last SitePoint office party in the background. Prone to distraction as I am, I want to make those changes right away. Now which is easier: opening up a separate CSS file to modify the page’s style sheet, or just typing those style properties into the HTML code I’m already editing?
Like behaving yourself at work functions, keeping the types of code you write separate from one another takes discipline. But once you understand the benefits, you too will be able to summon the willpower it takes to stay on the straight and narrow.
Three Layers
Keeping different kinds of code as separate as possible is a good idea in any kind of programming. It makes it easier to reuse portions of that code in future projects, it reduces the amount of duplicate code you end up writing, and it makes it easier to find and fix problems months and years later.
When it comes to the Web, there’s one more reason to keep your code separate: it lets you cater for the many different ways in which people access web pages.
Depending on your audience, the majority of your visitors may use well-appointed desktop browsers with cutting-edge CSS and JavaScript support, but many might be subject to corporate IT policies that force them to use older browsers, or to browse with certain features (like JavaScript) disabled.
Visually impaired users often browse using screen reader or screen magnifier software, and for these users your slick visual design can be more of a hindrance than a help.
Some users won’t even visit your site, preferring to read content feeds in RSS or similar formats if you offer them. When it comes time to build these feeds, you’ll want to be able to send your HTML content to these users without any JavaScript or CSS junk.
The key to accommodating the broadest possible range of visitors to your site is to think of the Web in terms of three layers, which conveniently correspond to the three kinds of code I mentioned earlier. These layers are illustrated in Figure 3, “The three layers of the Web.”
Figure 3. The three layers of the Web (click to view image)
When building a site, we work through these layers from the bottom up:
We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.
With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.
Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.
If we keep the HTML, CSS, and JavaScript code separate, we’ll find it much easier to make sure that the content layer remains readable in browsing environments where the presentation and/or behavior layers are unable to operate. This “start at the bottom” approach to web design is known in the trade as progressive enhancement.
OS Content Management System (CMS)
A content management system (CMS) is a program used to create a framework for the content of a Web site.[1] CMSs are deployed primarily for interactive use by a potentially large number of contributors. For example, the software for the website Wikipedia is based on a wiki, which is a particular type of content management system. For the purposes of this page, Content management means Web Content Management. Other related forms of content management are listed below.
The content managed includes computer files, image media, audio files, electronic documents and web content. The idea behind a CMS is to make these files available inter-office, as well as over the web. A CMS would most often be used as an archive as well. Many companies use a CMS to store files in a non-proprietary form. Companies use a CMS to share files with ease, as most systems use server-based software, even further broadening file availability. As shown below, many CMSs include a feature for Web Content, and some have a feature for a “workflow process”.
“Workflow” is the idea of moving an electronic document along for either approval, or for adding content. Some CMSs will easily facilitate this process with email notification, and automated routing. This is ideally a collaborative creation of documents. A CMS facilitates the organization, control, and publication of a large body of documents and other content, such as images and multimedia resources.
A Web content management system is a CMS with additional features to ease the tasks required to publish web content to web sites.
Find list of : Open source content management systems Technorati Profile
The content managed includes computer files, image media, audio files, electronic documents and web content. The idea behind a CMS is to make these files available inter-office, as well as over the web. A CMS would most often be used as an archive as well. Many companies use a CMS to store files in a non-proprietary form. Companies use a CMS to share files with ease, as most systems use server-based software, even further broadening file availability. As shown below, many CMSs include a feature for Web Content, and some have a feature for a “workflow process”.
“Workflow” is the idea of moving an electronic document along for either approval, or for adding content. Some CMSs will easily facilitate this process with email notification, and automated routing. This is ideally a collaborative creation of documents. A CMS facilitates the organization, control, and publication of a large body of documents and other content, such as images and multimedia resources.
A Web content management system is a CMS with additional features to ease the tasks required to publish web content to web sites.
Find list of : Open source content management systems Technorati Profile
Subscribe to:
Posts (Atom)
