Monday, March 31, 2008

Embracing the power of code

If you are the sort of web designer or developer who uses a visual design tool, such as Dreamweaver, GoLive, or FrontPage, and never looks at the underlying code, it is time to rethink your approach. You are rapidly becoming an endangered species-and not the furry or cuddly sort that environmentalists will campaign to save from extinction. Good-looking design is definitely a top priority-and always will be-but it is no longer enough on its own. Designers need to have a solid grasp of the underlying structure of their pages. That means a knowledge of Hypertext Markup Language (HTML)-or its more recent incarnation, Extensible Hypertext Markup Language (XHTML)-and Cascading Style Sheets (CSS).

The CSS Zen Garden, cultivated by Dave Shea, played a pivotal role in convincing designers of the power of code. The underlying XHTML of every page showcased at www.csszengarden.com is identical, the CSS produces stunningly different results. You do not need to be a CSS superhero, but as long as you have a good understanding of the basics of XHTML and CSS, you are ready to take your web design skills to the next stage by adding PHP to your arsenal.

PHP is a server-side language. That means it runs on the web server, unlike CSS or JavaScript, which run on the client side (that is, the computer of the person visiting your site). This gives you much greater control. As long as the code works on your server, everyone receives the same output. You can do the same thing with JavaScript, but what visitors to your site actually see depends on two things: JavaScript being enabled in their web browser, and the browser they are using understanding the version of JavaScript you have used. With PHP, this does not matter, because the dynamic process takes place entirely on the server and creates the XHTML needed to display the page with a random choice of image. The server chooses the image filename and inserts it into the tag before sending the page to the browser. You can even use images of different sizes, because the PHP code detects the dimensions of the image and inserts the correct width and height attributes.

What PHP does is enable you to introduce logic into your web pages. This logic is based on alternatives. If it is Wednesday, show Wednesday’s TV schedules . . . If the person who logs in has administrator privileges, display the admin menu, otherwise, deny access . . . that sort of thing.

PHP bases some decisions on information that it gleans from the server: the date, the time, the day of the week, information held in the page’s URL, and so on. At other times, the decisions are based on user input, which PHP extracts from XHTML forms. As a result, you can create an infinite variety of output from a single script. For example, if you visit at http://foundationphp.com/blog/, and click various internal links, what you see is always the same page, but with different content.

No comments: