Monday 22 July 2013

IE Tester

IETester allows you to test Web site designs across several versions of

Internet Explorer, going all the way back to version 5 (IE5). We highly rec-
ommend checking this out and using it to help test your Web site designs
across different versions of Internet Explorer. Download IETester from
www.my-debugbar.com/wiki/IETester.

Internet Explorer

Currently, the major versions of Internet Explorer that are supported by the majority of designers are versions 7 and 8, with most designers gradually dropping support for version 6 (commonly referred to as IE6). At the time of this writing, Microsoft has released a version 9 beta, with the final

version of IE9 expected in late 2011 or early 2012.

Trying to test your Web site on different versions of Internet Explorer is dif-

ficult because attempting to install different versions on your computer can
cause some big problems, if you don’t know exactly what you’re doing. We
use a few tools for overall browser testing (see the section “Understanding
cross-browser compatibility” later in this chapter); however, IETester comes
in handy specifically for testing on different versions of IE. In Figure 5-6, the
buttons across the top right are labeled for specific versions of Internet

Explorer: IE5.5, IE6, IE7, and IE8. The WordPress Web site is shown in ver-
sion 7 of the IE browser.

Internet Explorer

One of the challenges that designers come across is the different versions
of Internet Explorer that are widely used across the Web. With each new
version, Microsoft’s flagship browser comes closer and closer to compli-
ance with open Web standards; however, because Internet Explorer is the
browser present across millions of operating systems across the world,
not every individual user or company is quick to adopt the new versions
as they’re released. This results in several versions of IE in use across

the world, and designers generally make an effort to make sure that their designs render correctly on, at least, the last two to three recent versions of Internet Explorer.

Internet Explorer



Internet Explorer (IE), owing to the fact that it’s part of all Windows operating


systems, is by far one of the most popular browsers. Over the years, IE has struggled with its reputation of not keeping up and being noncompliant with Web standards and CSS rendering that the development and design commu-

nity has come to love and expect from other browser systems. This is largely due to the layout engine (the method used to display Web sites by translating CSS and HTML markup) in use at the foundation of the IE browser.

Editing Files and Testing Performance with WordPress Tools



As far as the design and development community is concerned, the choice


over which Web browser to use typically falls on how compliant the browser
is with open Web standards developed by the World Wide Web Consortium
(W3C), an international community that develops Web standards to ensure
long-term Web growth (www.w3.org). As a designer, you need to at least
have a working knowledge of what the W3C is and the standards it supports
and promotes. You can read about the W3C vision and mission statement at
www.w3.org/Consortium/mission.html.

 

Discovering different browsers and tools

Multitudes of different browser systems are available on the Web. This

section takes you through five browsers that are the most popular among
Internet users. Additionally, you find some helpful tools and add-ons to
assist you with your Web design efforts in the different browser systems,
including some of the must-have tools we use on a regular basis.

Understanding and choosing a Web browser

Knowing which Web browser to use as your primary browser can be confus-

ing because there are so many browser systems available. Everyone has a
favorite browser, and if you don’t already, you’ll find one that emerges as
your favorite for one reason or another. Each browser system has a different
look and feel, as well as different features and tools that make one of them
your preferred browser of choice.

One thing you need to keep in mind, however, is that it doesn’t matter which
browser you use as your preferred browser for Internet surfing. However,
having access to all major browsers is essential so you can test and view
your Web designs in different browsers to make sure that they render and
look the same.

If you can, download and install all the browsers in this chapter to your computer so you have them readily available to test your designs across them. Some browsers work only on a Mac or a Windows system, so use the ones that are for your system.

TextMate (Mac)

TextMate is an Apple product and, as such, can be used only on a Mac; it’s

the most popular text editor for Mac users and is referred to as “the missing
editor” for Macs. Like Notepad++, TextMate is a syntax editor that color-
codes the markup and code that you write. Additionally, TextMate can

✦ Easily search and replace

✦ Auto-indent mark up and code

✦ Open several documents, each in their own tab
✦ Work as an external editor for FTP programs

TextMate is not free, however. You can download a free 30-day trial from its
Website: http://macromates.com. After using TextMate for 30 days, you
can buy a single-user license for $56.

Notepad++ (Windows)

Notepad++ is a text editor for Windows users and is often referred to as

“Notepad on steroids.” The interface of Notepad++ looks a lot like the regu-
lar Notepad but that’s where the similarities end. Notepad++ is a text editor
with advanced features, such as color-coded syntax (see the nearby sidebar,
“Code syntax highlighting,” for information on syntax highlighting), code
indentation, and line numbering, which make it an extremely useful and
helpful application for writing and editing code. Figure 5-5 demonstrates
the color-coded syntax where the functions of the code are represented
by colors, making it easier for you (or the programmer) to pick different
sections of the code (such as functions or HTML).

Notepad++ supports many programming languages, including the main ones
you use for this book: CSS, HTML, and PHP. Notepad++ is free and open
source software; you can download it to your Windows computer from its
Website at http://notepad-plus-plus.org.

Notepad (Windows)

Notepad, by default, saves files with a .txt extension. With WordPress tem-
plates and theme files, you typically save files with a .php or .css exten-
sion, so you want to take care and make sure that you save files correctly.
To save as a .php or .css extension with Notepad, follow these quick steps:

1. Open Notepad by clicking the Start button and then choosing
Programs➪Accessories➪Notepad.

2. Create your CSS or PHP document.

Check out  the  minibook for a simple PHP document you can create.

3. Choose File➪Save As and then select the location to save the docu-
ment in the Save In drop-down list in the dialog box that appears.

4. Type the name of the file, including the extension, in the File
Name field.

In Figure 5-4, the name of the file is header.php. If you’re saving a
CSS document, the extension is .css (for example: style.css).

5. Choose All Files in the Save as Type drop-down list.

By default, Notepad wants to save it as a text document (.txt).

6. Leave ANSI selected in the Encoding field and then click the
Save button.

Notepad (Windows)

Notepad is a basic plain-text editor that you can use to write code without the fuss and worry of text formatting; it doesn’t support any special document formatting or characters at all, which is what makes it great for writing code and Web documents.

Notepad is the go-to text editor for most Windows users because it’s a

Microsoft product packaged in every Windows operating system. Notepad
is typically used for viewing and editing text files with the .txt extension,
but many people, including myself, use it to create basic CSS and HTML
files as well.

Choosing the text editor that’s right for you

In this post, you dig into WordPress themes, work with CSS and HTML, and

type template tags and a bit of PHP; this chapter arms you with the tools you need to gather to prepare for a smooth and efficient experience later.

Next to good ol’ pen and paper, nothing beats a good, solid text editor. We
admit, we’re a little old school, so for things like grocery lists and jotting
down ideas, we stick with a pad of paper and a pen. Unfortunately, writ-
ing code is difficult with a pen and paper, and it doesn’t translate very well
when we need to publish it to the Internet. That’s when a basic text editor
program comes in very handy — we always have one open on the computer
(usually several instances of a favored text editor, actually) and use it daily
for writing CSS and HTML, and for coding WordPress templates and themes.

Make sure that you use a text editor and not a word processor, such as

Microsoft Word, to write any code. A word processing program automati-
cally inserts formatting, characters, and hidden spaces because it assumes
that you want the document formatted. When you’re writing code, this sort
of formatting is the last thing you want — so stick with a basic text editor.

The text editors listed and described in this section are programs that are installed on your computer. Some of them are available only for Windows, some only for Mac users — we specify this in their descriptions.

Editing Files and Testing Performance with WordPress Tools



Over the course of Lisa’s journey with WordPress, which began in 2003,

she’s learned a lot of lessons from editing WordPress files, building themes,


and using different browsers and browser tools to help her view, test, and diagnose certain problems (such as speed, error messages, and CSS rendering) on her Web site.

One important thing she’s learned is that when she sits at the computer to begin to work on any WordPress project, large or small, it’s vital that she have the right tools readily available. Having the right tools makes a world of difference in the quality, efficiency, and overall experience in designing and developing a Web site for her or a client.

This section of the chapter introduces you to tools for things like editing

HTML, CSS, and PHP, as well as using various Web browser platforms, such as Internet Explorer and Mozilla Firefox. For example, we include different tools and add-ons that you can add to the browser to make it work better for your Web site and be easier for you to maintain it.

In some cases, the tools we mention here aren’t necessarily required — however, you’ll be very thankful when you find tools that make your Web site managing a lot easier!

Using plugins to make caching easier

We recommend these two plugins, which provide you with the best and easi-

est ways to make sure that your WordPress site has a caching system in place:

✦ W3 Total Cache: Install this plugin to easily optimize your Web site

and user experience with page, browser, database, and object caching.
W3 Total Cache also includes features like HTML, CSS, and JavaScript
minify, as well as CDN configurations to improve your Web site’s speed
and performance (http://wordpress.org/extend/plugins/
w3-total-cache).

✦ WP Super Cache: This plugin generates static HTML files from your
dynamic WordPress blog posts and pages. The static HTML files are
then served to your Web site visitors instead of the dynamically gener-
ated PHP files, without affecting the look or function of your site. This
reduces the load on your server and increases the speed of your Web
site. Unlike the W3 Total Cache plugin, WP Super Cache (http://
wordpress.org/extend/plugins/wp-super-cache) doesn’t
have minify or CDN configurations.

Editing Files and Testing Performance with WordPress Tools



✦ CacheFly: www.cachefly.com


✦ PEER 1: www.peer1.com/managed/content_delivery_network.php
✦ MaxCDN: www.maxcdn.com

The benefits of running a content delivery network include the following: ✦ Improved speed of your Web site

✦ Improved visitor experience

✦ Improved scalability for your Web site and database data delivery

✦ Resistant to Web site crashes during times of high traffic volumes                        Book II

Chapter 5

In the next section of this chapter, we give you a couple of plugins that provide a user interface to help you set up a CDN on your Web site. Just remember that CDN services aren’t free, and the costs vary depending on the service provider that you use.