Chapter 14. How’d They Do That?
You’ve probably seen some amazing sites on the Internet and wondered how the web developer created a particular element of the site. This chapter covers what to do when you find something that is very cool on another person’s website and want to use it.
This chapter is not a guide to stealing other people’s work. People work very hard on building amazing Internet sites, and it would be unethical for you to steal their work and claim it as your own. But there are ways to learn how the web developer created the content, and by learning their methods you can create your own spectacular content.
If you find a website that has something on it that you like, you can always look at that website’s code. There’s nothing illegal or unethical about this. In fact, it’s like opening up the hood of a car and looking at how the engine works.
Any site on the Internet allows you to see the source code. To view a page’s source, follow these steps:
This displays the whole page’s text and is useful if you want to see how the whole page is constructed. If you are interested in only a portion of the page, there are tools, which are described later in this chapter, to help with this.
One of the great advantages of the Firefox browser is the opportunity to use add-ons. Several Firefox add-ons are available for web development. The Firefox browser has been embraced by the web development community, and that community has created, and will keep creating, interesting add-ons for Firefox. These add-ons help you figure how other people’s websites work.
To see how add-ons work, check out the web development section of the Firefox Add-ons page (https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4). This page lists the latest and greatest web development add-ons.
Here are some Firefox add-ons that I recommend. They’ll come in handy as you develop your own site.
Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60)—This is one of my favorite add-ons. Developed by Chris Pederick, it adds a number of very useful web development features to your Firefox (see Figure 14.3). These include allowing access to information about web pages, forms, and images. The add-on also has several validation functions and View Source options. The features are accessed by a new toolbar and menus that show up on your Firefox browser after you have installed the plug-in.
Page Validator (https://addons.mozilla.org/en-US/firefox/addon/2250)—This add-on validates your web page according to the W3C standards.
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)—Firebug integrates a script viewer into your Firefox window (see Figure 14.4). This enables you to view the source of a web page at the same time you are viewing it from the same browser. When you highlight elements in code, they are highlighted in the web page view. You can see the HTML code and the CSS code along with other more advanced views (scripts, DOM).
IE Tab (https://addons.mozilla.org/en-US/firefox/addon/1419)—This add-on enables you to display Internet Explorer tabs in a Firefox browser (see Figure 14.5). It enables you to see how your page can look in the two major browsers from inside Firefox.
Screengrab! (https://addons.mozilla.org/en-US/firefox/addon/1146)—If you want to get a screen shot of an entire web page, this add-on allows you to do just that.
ColorZilla (https://addons.mozilla.org/en-US/firefox/addon/271)—One of the things you need to do when designing a website is define your color scheme. ColorZilla, shown in Figure 14.6, identifies the colors that complement each other and look good with your message. ColorZilla enables you to click on a color item on any web page and get its color information and what colors go well with it.
Figure 14.6 Using ColorZilla’s eye dropper in the lower left to determine the exact color of this picture.
YSlow (https://addons.mozilla.org/en-US/firefox/addon/5369)—Yahoo! has rules for high-performing websites (http://developer.yahoo.com/performance/index.html#rules). This add-on validates your page with these criteria in mind.
MeasureIt (https://addons.mozilla.org/en-US/firefox/addon/539)—If you have ever wondered what size an element on a web page is, this add-on enables you to see the exact size of elements in pixels (see Figure 14.7).
CSSViewer (https://addons.mozilla.org/en-US/firefox/addon/2104)—This add-on enables you to view a website’s cascading style sheet.
When I hear the word badges I immediately think about Boy Scouts. As a Boy Scout, I tried to get as many badges as I could with an almost fanatical devotion. Websites can have badges too. A website badge is simply a small piece of code and graphic you put on your website to show affiliation with another website. It is like a small, graphical hyperlink.
There are literally thousands of web badges. You can get them from the originating websites or from badge sites such as Zwahlen Design (http://www.zwahlendesign.ch/en/node/19), which not only gives you hundreds of badges but also shows you how to make your own (see Figure 14.8).
The reason you add a badge to your website is to show affiliation. So if you have a WordPress site or use MySQL, it is a nice thing for you to add a badge for those things. There are two things to keep in mind with badges. First, don’t overwhelm your site with gaudy or large badges. This is the equivalent of wearing ostentatious jewelry. Second, don’t overwhelm your visitors with a huge number of badges. Having too many badges on your website is like having too many Christmas lights on your house. Don’t be that house and don’t be that website.
With Web 2.0 websites, there are new kinds of badges that actually contain content. For example, if you have a Twitter account, you might want to add the Twitter badge on your site (see Figure 14.9). Twitter is a microblogging website that lets you blog 140 characters at a time. If you have the Twitter badge, when you post to Twitter it automatically shows up on your Twitter badge.
Most of the Web 2.0 websites will tell you how to add one of these more complicated badges.
You can also find website and web page templates on the Internet. These are pre-designed web pages that you customize with your content. Again, there are literally millions of these on the Internet, covering a wide range of color schemes and content types. There are generally two categories of free web templates: generic templates and application-specific templates.
warning
Do not, under any circumstances, pay for web templates you find on the Internet. First, there are millions of free ones that you can download and use on your site. Second, trust in your own creativity. By modifying an existing free template, you may be able to create exactly what you need for your website.
Generic templates are website or web page templates that can be used with any website creation tool (see Figure 14.10). They usually just contain the basic HTML file and some basic graphics. The easiest way to find these templates is to Google free web page template or free website template.
If you are using a specific program to create a web page, you might want to search on the Internet for templates specific for your application. Just add the name of your application to the search terms mentioned in the preceding paragraph to find application-specific templates.
note
I certainly spend a good portion of this book telling you how much great stuff you can get on the web for free. You definitely can find quality templates on the Internet for free, but you will have to sift through a lot of things to find what you are looking for. Be patient and don’t expect to find what you are looking for right away.
If there are millions of websites on the Internet, there must be a lot of people developing those websites. These people like to talk to each other. This socializing is good for more than just finding friends. It can be excellent for networking ideas and information about website developments.
Developer network sites are websites where you can find a solution to a problem or question you might have regarding web development. You can be assured that you will find someone willing to share their solution or ideas with you. Connecting to other web developers in these communities enables you to share your experiences. These folks obviously have something in common with you (they are also developing websites), so do your part and share your knowledge as well. Here are some of the best web developer networks:
Webmonkey (http://www.webmonkey.com/)—Webmonkey was one of the first and great websites dedicated to website developers and setting up a community. It was launched in 1999 by the folks who bring you Wired magazine but closed three short years later. But wait—Webmonkey has returned! The site was relaunched in 2008 and contains excellent tutorials, references, and a code library. There is a sense of fun and community on this site and it continues to be an invaluable resource for web developers.
Yahoo! Developers Network (http://developer.yahoo.com/)—This site is for people using Yahoo! technologies to develop websites and other applications. Although it might not have a direct impact on your website, if you are doing anything related to Yahoo!, you might want to check it out.
Google Groups (http://groups.google.com/)—Google Groups are social connections that are based on interests. That could be anything from car racing to web development. Have a look around this site for web developer groups.
Other Developer Sites and Groups—If you are doing anything on the web or using a specific program to do web development, there is probably a web development community on the web for that type of development.