www.1-language.com

www.a4esl.org

http://AD.Walker.org/listening.htm

www.antimoon.com (môn nghe hiểu)

www.askoxford.com

www.better-english.com/exerciselist.html

www.churchillhouse.com/english

www.easyenglish.com

http://elc.polyu.edu.hk/cill/default4.htm

www.english2u.com

www.netsurflearning.com

www.english-at-home.com

www.englishclub.net

www.englishforum.com/00

www.englishlearner.com

www.english-zone.com/index.php

www.esl.about.com

www.eslbee.com (môn viết)

www.esl-lab.com (môn nghe hiểu)

www.eslus.com/eslcenter.htm

www.idiomsite.com

www.iei.uiuc.edu/free.html

www.international.ouc.bc.ca/pronunciation

www.manythings.org

owl.english.purdue.edu (môn viết)

www.phrases.org.uk

www.readingmatrix.com

repeatafterus.com (môn nghe hiểu và phát âm)

www.soundsofenglish.org (môn phát âm)

www.the-bus-stop.net (bài hát cho trẻ em bằng tiếng Anh)

www.teflgames.com (trò chơi bằng tiếng Anh)

www.tolearnenglish.com

www.ucl.ac.uk/internet-grammar

www.vocabulary.com

http://webs.wichita.edu/ielc-lab/wnr (môn nghe hiểu)

www.wordsmith.org/awad/index.html

www.wordwizard.com

http://world.englishclub.com/vietnam.index.html

I firmly believe that websites should be designed first for a standards compliant browser like Firefox, and then made to work with a more popular (but lower quality) browser like Internet Explorer. When I get a site to work well in Firefox, I know that the code is working properly, rather than being a proprietary mess, ala Frontpage. And that’s important to us at Circle Six, as we believe more and more in not polluting the web any further with bad code.

So without further ado, I bring you the list of essential extensions for Firefox, the tools that make my life easier and my design/development process more efficient. Please add on to the list anything I leave out!

Web Developer

This is absolutely the most essential extension I have. I can’t even begin to describe everything it can do in this post. Some of the features I use on a daily basis are the ability to disable javascript, disable CSS, outline block level elements, resize the window and view response headers. For me, the greatest use of this extension is to accomplish backwards compatibility and accessibility in my pages, but to say that’s all it does with be selling it very short.

EditCSS

This extension is an excellent way to get immediate feedback on changes to your CSS. If you’re struggling with a strange CSS bug, this is a great way to start finding the solution. You can load it in the sidebar and begin tweaking your code, and watch the changes in realtime. It’s especially good for structural code and positioning elements. If only it worked for Internet Explorer!

Firebug

Honestly, I could never write Javascript without this extension. It provides a console that lets you debug your javascript right in the browser. You can track variables and put breakpoints in the code. And it’s especially good for AJAX development, with a DOM inspector and XMLHttp request viewer. I can see my requests and their responses as they happen, and figure out exactly what went wrong. Without that feedback, even the simplest AJAX app can be extremely frustrating to debug.

JSView

A great timesaver. It gives you quick feedback on what CSS and Javascript files are loaded in a page. It also lets you jump immediately to each external file’s source code. This is especially handy on dynamic sites that use javascript extensions that load unobtrusively: you can quickly check to see if a extension has loaded on a given page without viewing the source code. It’s also great for learning from other people’s work, taking a quick look at a CSS file to see how they got that text effect, or whether they’re using CSS-P or not.

View Formatted Source

This one has a few close runners-up: View Source Chart and X-Ray. They help make sense of the source code for a page, and make it a lot easier to find what you’re looking for. Especially if you’re debugging someone else’s page (because YOUR code, of course, is properly formatted to begin with). What sets View Formatted Source apart for me is that it has both a chart mode and an inline mode that displays outlines and labels directly on the page that you can click to see just that segment of the source code. The chart mode has the ability to fold sections based on tags.

My other favorite extensions:

ReloadEvery: This lets you refresh at a given interval. Good for seeing changes in (almost) realtime.
Foxmarks Bookmark Synchronizer: syncs bookmarks between multiple FF installations.
Screen grab!: Takes screenshots using java, and can auto scroll the page to get a full shot.
SEOpen: Nice tools for Search Engine Optimization.
Modify Headers: Add, modify and filter http request headers.
Tab Mix Plus: Extend the tab functionality of FF.
Mozex: Integrate external apps like TextMate.
del.icio.us Complete: Extend the del.icio.us extension.
murl: Automatically shorten url’s using murl and copy them to your clipboard.

A brief summary to begin with. I’m not going to detail the work that I do to turn Wordpress into a CMS, or why I choose to go that direction. This post will confine itself to the tools required to create a custom theme for Wordpress without hacking the core code. However, all of the tools that are mentioned are powerful enough to handle such tasks and I don’t use any additional tools to do my core hacking. So the overview goes like this:

• set up a local install of the Wordpress site (mirroring any current installation)
• create a local workflow to edit XHTML and CSS
• tweak and test on local platform
• deploy
• test on multiple platforms/browsers
• tweak to perfection

Now for the details.

Preparation:

I usually start out the process with a color palette, using Color Schemer Studio. The beauty of this program for me is that it allows me to generate a color palette from a photo, screen grabs, or color picker using a simple color wheel with harmony presets. I can build a favorites palette and automatically convert colors to their nearest websafe equivalent. The palettes can be exported for Photoshop, Illustrator, HTML, CSS and I can even drag colors right into some programs, including TextMate.

A general layout is also a good idea, and the Grey Boxes technique laid out in Transcending CSS is a great method for getting a general feel and giving yourself some flexibility down the line. You can use different outlining programs to create a layout, but I generally just end up making a sketch on paper and then doing a guide layer in Photoshop.

Graphics

Graphics are essential to any decent CSS layout. My tool of choice is, of course, Photoshop. I create an entire layout, using many layers and smart objects, and then export my files using Save for Web. For smaller graphics needs I use the tools available from Yellow Mug Software. They’re small, lightweight and extremely useful.

Local Install

Once I’m ready to begin development I create a local Wordpress installation using the latest version. If I’m updating a website that already has a working theme, I download all of the necessary files from the existing site and export the database. I then import the database into my mySQL installation locally and point the Wordpress install to that. This way I can work around all of the plugins and other potential pitfalls that will need to be accounted for in the theme.

For the purposes of running Apache and MySQL on my Mac, I use MAMP. It’s easy to set up and, despite having a relatively large memory footprint, it doesn’t interfere much with my workflow.

Headdress for OSX works wonderfully in combination with MAMP. It allows easy editing of the necessary files to create local addresses for accessing your local sites. Shaun Inman wrote a great article about integrating MAMP, Quicksilver and Headdress, which speeds things up a lot if you’re working on a lot of sites.

Development

A solid theme will always start with good XHTML. The very first thing I do is create the homepage with no dynamic data, just a plain XHTML page with dummy text and all of my layout and graphics. This gives me a chance to define the styles I’ll use for headlines, paragraphs, branding, etc., prior to worrying about any kind of PHP code. I use TextMate to create all of the XHTML that goes into the site. Be sure to create a CSS file and add a link to it.

Once I’ve got the semantic XHTML code in place (and it’s not a bad idea to validate as you go, it will help solve problems later), it’s time to start styling it. I love TextMate, but the live preview and milestone options in CSSEdit make it my tool of choice for CSS editing. Load up the local address to your dummy file in the preview window and start styling the page!

When I first start the project, I’ll copy a theme that I want to work off of, either one of my own or the default theme from Wordpress to use as a base. I’ll give it a new name, and edit the information found in the style.css file to change the way it shows up in Wordpress and help distinguish it from the others until I get a screenshot made. Then I’ll select the directory and open it as a project in TextMate. I’ll save the project with the name of my theme and use that as a base for editing the local theme. Right clicking a CSS file in the project allows me to open it in CSSEdit.

I tend to use the default theme as a starting point and copy out the Wordpress template tags that I need to create my basic layout. K2 from Binary Bonsai does some interesting things with the Loop, and can provide a more streamlined way of creating a site if you know what you’re looking at. I also use Hemingway from Warpspire as a reference for below-the-fold layouts. For most purposes, I prefer manually creating the necessary files, and often need to create my own page templates anyway. As I develop, I constantly consult the extensive Wordpress Codex for assistance with template tags and parameters.

Testing

Testing takes place the entire time, and most heavily as the local site nears completion. I always build first for Firefox and do my best to maintain valid code as I go. Internet Explorer 6 for Windows is the last browser on my list and, while the biggest pain, is not as important to me in the long run. It will eventually die and I’d rather have my code right than working in IE6. That being said, once I get to deployment, I take every measure to make sure that the poor bastards using IE6 can still get a usable website out of anything I develop, and be none the wiser.

Once a local site is looking good in Firefox, I test it in Safari, Omniweb, Opera, Camino and Firefox 1.5. I don’t run parallels, so testing on other platforms has to wait until I’ve deployed the new site.

Deploy

Yummy FTP has become my tool of choice for all remote work. In combination with CSSEdit and TextMate, it provides remote editing, synchronization, FTP Folder Watching and all of the other goodies that you need, plus a stable and very fast interface. And it’s cheap compared to some of the others. Not as cheap as Cyberduck, but far more powerful.

I will, on occasion, put a site in a subdirectory and deal with the hassles of changing it’s location in the database so that I can test it before it goes live. Generally my sites are finished enough at the deployment stage that I can make minor tweaks quickly enough that it won’t affect site traffic by going live with a few quirks.

Generally, however, I only need to upload the new theme to the themes folder of the site I’m working on and change the site’s presentation options to point to it. If anything goes wrong, I can always revert to the previous theme.

Tweak

If I bookmark the theme directory in Yummy FTP, I’m a couple of clicks away from editing any relevant file. Double clicking a CSS file will load it up in my CSS editor (you need to edit the extension definitions to make this happen), and php files will load up in TextMate. Saving the file will automatically upload and overwrite the previous version. The downside to this is that you don’t have a version control system and doing so takes a little extra effort. I can detail some of my solutions in another post.

Finishing

And then it’s time for all of the cross-platform, cross-browser testing that needs to be done. Have fun with that, especially when you’re smoking along and then get to Internet Explorer 6 (or worse yet, 5.5). I highly recommend using Conditional Comments and avoiding CSS hacks, especially now that version 7 is out. Make sure to back up your theme when you’re done. Take snapshots of your previous theme for posterity, and crop one and add it to your new theme as screenshot.png so that it looks nice in the Wordpress back end.

To Begin With…

The first thing to consider is placement. For a vertical menu I would suggest placing the code I will supply in the sidebar.php file under the “sidebar” div if you have one. And if you’re going for a horizontally-displayed navigation menu I suggest adding the code in the header.php file underneath your main <h1> heading.

The Markup

Here’s the mark-up you will want to place in your file of choice.

 <!--See Note 1-->
 <ul id="nav">
 <!--See Note 2-->
  <?php if(is_home() && !is_paged()){ ?>
   <li class="current_page_item">
    <a href="<?php echo get_settings('home'); ?>" title="You are Home">Blog Navigation</a>
   </li>
 <?php } else { ?>
  <li>
   <a href="<?php echo get_settings('home'); ?>" title="Click for Home">Blog Home</a>
  </li>
 <?php } ?>
 <!--See Note 3-->
 <?php  wp_list_pages('sort_column=menu_order&title_li='); ?>
 <!--See Note 4-->
  <li>
   <a class="rss" rel="alternate" href="<?php bloginfo('rss2_url'); ?>" title="Really Simply Syndication">RSS Feed</a>
  </li>
 </ul>

Markup Notes

Now to explain what’s what in the script above.

Note 1

I first identify the menu with a “nav” ID. This isn’t needed for styling since WordPress generates the list-item classes in its core, but I’m using it anyway as it serves two purposes. The “page_item” class doesn’t really need to be there. Go with it; editing core files isn’t advisable as it’ll impede upgrading WordPress. The main reason I offer this is to use #nav as a fragment identifier so as to use it as a bookmark link target for a “Jump to Navigation” link: <a href="#nav">Jump to Navigation</a> (Code 1)

Note 2

This is a bit of page negotiation since I want the menu to have a home page link — something not provided on the page list by default. When you’re on the index this will say “Blog Navigation” and be styled as a current page link, but if you’re on any other page, including a “paged” home (when you view older posts via a page turner link), the link will say “Blog Home” instead and will look clickable instead of like the “current page” style. (Code 2)

Note 3

This is the meat and potatoes so to speak. This is the code for the dynamic menu produced by the WordPress core. This will produce page links in list item tags: <li>. Each will bear the “page_item” class except the current page where it’ll also bear the “current_page_item” class. I use only the latter. This conditional tag has two parameters in the function:

1. sort_column=menu_order — This allows you to use the page ordering feature built into WordPress. This ensures you can put your page links in an order you deem logical.
2. title_li= — This parameter can contain data such as <h2>Heading</h2>. If it is removed, the word “Pages” will display between the dynamic links and the home page link. If the <h2> heading elements are left blank the word “Pages” will display in the same spot. This would be okay if there was no home page link but that’s not the case, so I give the whole parameter a null value. I could give it a “0” (zero) I suppose. (Code 3)

Note 4

This last link is optional. Use it if your want a prominent link to your Really Simple Syndication or RSS feed. I give this link a special “rss” class so I can give it a unique background image in the style sheet. I add it to the “ul#nav” selector in the style sheet so the same attributes and properties are applied. I then give it a background image in a new CSS block — I’ll show you what I mean next. (Code 4)

Styling the List

What follows are some styles for your Cascading Style Sheet (CSS). These styles will produce block-level links in the vertical format. You can modify these styles to get your desired look, add backgrounds, change colors, anything you wish. To make it a horizontal menu you’ll want to float it left (right reverses the order so you’ll have to modify the scripting and markup) and list items will need the display property, “inline.” You can also give the unordered list a width and center it with margin-auto. You will also want to center-align the text, probably…

Nonetheless, this will offer you a simple copy and paste beginning. (All of this should be put in a container div of 200 pixels with 10 pixels of padding unless you decide to modify dimension and/or units, or you’re doing the horizontal thing.)

 /* This styles the unordered list element to remove bullets and align the text */
 ul#nav {
   list-style-type : none;
   text-align : right;
 }

 /*
  This styles the links. It’s a block-level link and the text is positioned
  with padding. Other styles are defined: width, colors, text attributes, etc.
 */
 ul#nav a, ul#nav a.rss {
   background-color : #d3d3a7;
   padding : 15px 5px 2px 10px;
   margin-bottom : 10px;
   width : 180px;
   height : auto;
   color : #333;
   font-weight : bold;
   font-style : normal;
   display : block;
   text-decoration : none;
 }

 /* This gives the “rss” class link a background image */
 ul#nav a.rss {
   background : #d3d3a7 url(images/rss.jpg) no-repeat 2px 2px;
 }

 /* This is only necessary for IE6 else the link margins will collapse on hover */
 ul#nav li {
   margin-bottom : 10px;
 }

 /* This removes the default left margin (indentation) */
 ul#nav li {
   margin-left : 0;
 }

 /*
  Now to offer some hover and focus styles. Further specification of focus/active styles
  could be added but I didn’t do it in this example. I didn’t feel it was needed
 */
 ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
   background-color : #669900;
   color : #fff;
 }

 /* This offers up a hover/focus state image for the “rss” class link */
 ul#nav a.rss:hover, ul#nav a.rss:focus {
   background : #669900 url(images/rss_on.jpg) no-repeat 2px 2px;
 }

 /*
  This style the single state of the “current_page_item” class link. Not needed for
  the “rss” class link since that target page won’t display the menu
 */
 ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
 ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
   background-color : #9e9e55;
   color : #fff;
   cursor : default;
   text-align : left;
 }

Miscellaneous

Here’s some general info.

• You could add to the style info above to support child pages, or sub-pages, but the CSS I provided doesn’t support that link type in a special way — the subpage links and the current page link will both be marked the same way.
• You could also modify the script part of this menu if you had a static home page. Please note, however, that I’m not sure if a modification is needed to tell the truth. I haven’t tried it in such an application. You tell me.
• What I have on this site is custom made because I currently have several non-WordPress pages. Thus, if you want to see an example of this menu, please check out the sidebar on my BeastBlog v.2.0 theme support blog, but please know that it is slightly different than what I’m offering here. I added a “btn” class in addition to the “nav” ID. Doing it this way allows advanced theme users — since the theme is publically available — the ability to easily give additional menus the same styling via the “btn” class (because IDs must be unique on any given page while classes can be used repeatedly).
• In my example, when on the home page, I offer a link. This doesn’t have to be the case. A heading in a list item could be styled, plain text could be offered, what ever you want. I chose to do this instead. Laziness.

For these instructions, it is assumed that your blog’s URL is http://example.com/wordpress/. Note that during the upgrade process access to your blog may not work for your visitors. You may consider a plugin like Maintenance Mode.
Step 0: Before You Get Started

* Just in case something goes wrong, make sure you have a backup. WordPress_Backups is a comprehensive guide.
* Deactivate your plugins. A plugin might not be compatible with the new version, so it’s nice to check for new versions of them and deactivate any that may cause problems. You can reactivate plugins one-by-one after the upgrade.

Step 1: Replace WordPress files

1. Get the latest WordPress. Either download and extract it to your computer or download it directly to the server.
2. Copy the new files to your server, overwriting old files. You may use FTP or shell commands to do so.

NOTE The wp-content folder requires special handling, as do the plugins and themes folders. You must copy over the contents of these folders, not the entire folder. Copying the entire folder overwrites all your customizations and added content.

Also take care to preserve the wp-config.php file in the root directory, as it contains your database sign-in information. Do note though that usually this will not be a problem since in a new installation the config file will be named wp-config-sample.php.
Step 2: Upgrade your installation

1. Visit the upgrade page. It will be at a URL like http://example.com/wordpress/wp-admin/upgrade.php. This updates your database to be compatible with the latest code, and before you do this your blog might look funny.

Step 3: Do something nice for yourself

If you have caching enabled, your changes will appear to users more immediately if you clear the cache at this point (and if you don’t, you may get confused when you see the old version number in page footers when you check to see if the upgrade worked).

Your WordPress installation is successfully upgraded. That’s as simple as we can make it without Updating WordPress Using Subversion.

Consider rewarding yourself with a blog post about the upgrade, reading that book or article you’ve been putting off, or simply sitting back for a few moments and let the world pass you by.