The Firefox extensions that we installed yesterday will help you to develop your own web sites. They will also help you to analyze other web sites.

These are sites that showcase CSS design. Take a look at some of the sites, the source code (XHTML) and the CSS. Remember that you can use the web developer toolbar in Firefox to view the CSS (click the CSS button and select View CSS)

CSS Zen Garden - http://www.csszengarden.com/
CSS Beauty - http://www.cssbeauty.com/
Stylegala - http://www.stylegala.com/
CSS Drive - http://www.cssdrive.com/
CSS Vault - http://cssvault.com/

Firefox is an excellent browser for surfing web sites and testing web pages. If you have not used Firefox you can learn more about it in the tutorial Using Firefox.

One of the great things about Firefox is the ability to customize and extend the browser to suit your needs with extensions.

Extensions are small add-ons that add new functionality to Firefox. They can add anything from a toolbar button to a completely new feature. They allow the browser to be customized to fit the personal needs of each user if they need additional features, while keeping Firefox small to download. source: Mozilla Update Page

Extensions are easy to install. I have created a Flash demo for installing Firefox Extensions (Flash SWF 1,701kb). I would recommend viewing this tutorial in full screen mode by pressing F11.

There are numerous free Firefox extensions designed specifically for web developers. There are extensions validate HTML, XHTML, CSS, and accessibility, to troubleshoot CSS, to measure elements on a page, and to determine colors on a page. Here are a some of my favorites:

1. Web Developer Toolbar - The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Click View > Toolbars to turn on and off the web developer toolbar.
2. Aardvark - Start Aardvark by right-clicking on the page and choosing “Start Aardvark” from the menu. The extension will run until you leave, refresh, or stop it by pressing “Q” for quit. As you move the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. This is a very helpful extension when you’re designing a page with CSS.
3. HTML Validator - HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page by clicking View > Page Source.
4. Firebug - Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. To access this extension click View > Firebug or press F12.
5. X-Ray - Lets you see HTML/XHTML tags on a page without viewing the source code. Once installed, right-click the page and select X-Ray, all tags on the page will be displayed on the web page you are viewing.
6. MeasureIt - Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
7. DevBoi - a handy HTML/XHTML, CSS, JavaScript, and DOM reference. This is very useful when you’re learning HTML/XHTML and CSS. There is even an additional PHP reference. If you find yourself having to lookup CSS properties and XHTML elements and tags frequently you should get this extension. Click View > Sidebar > DevBoi to access the reference.
8. Extended Statusbar - A Statusbar with Speed, Percentage, Time and loaded size. The extended status bar will appear at the bottom of the browser window in the status bar area.
9. ColorZilla - With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Colorzilla will appear at the bottom of the browser window in the status bar area.
10. LinkChecker - Check webpage links at a glance with simple color coding. Click Tools > Check Page Links to run the extension.
11. FireFTP - FireFTP is a free, secure, cross-platform FTP client. Click Tools > FireFTP to access the extension.
12. Xinha Here - A cool extension for adding a WYSIWYG HTML editor interface to any textarea box on a web page form. Install the extension and restart Firefox. Right-click the textarea box you want to add HTML code to and select Xinha here! from the menu. A new window will open with a WYSIWYG HTML editor that allows you to format your message with HTML code.
13. FireBug - FireBug is a new tool that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.
14. IE Tab - Right click a link and select View this Page in IE Tab.
15. OperaView Adds View This Page in Opera to the page context menu and item Open Link Target in Opera to the link context menu. So if you would like to quick view page in Opera, just right click somewhere on the page and choose new menu item.
16. Clear Cache Button - Adds a clear cache toolbar button. After installing the extension, find the clear cache button in the toolbar customization panel by right clicking one of the existing toolbars and selecting customize.
17. MR Tech Local Install - The primary goal of this extension is to provide the tools needed to install and manage extensions and themes locally. This isn’t really a web developer tool, but it’s so handy. I found this especially useful for managing extensions. The nicest features for me is the ability to make older extensions compatible with newer versions of Firefox and the ability to install extensions that aren’t compatible with your current version of Firefox. You may need to install this extension if you have compatibility issues or errors installing any of the extensions mentioned above.
18. Session Saver - SessionSaver restores your browser -exactly- as you left it, every startup, every time. Not even a crash will phase it. Windows, tabs, even things you were typing — they’re all saved. Use the menu to add + remove sessions; right, shift, or middle-clicking will delete. “Simple mode” for peace of mind, or “Expert mode” for advanced flexibility. Access this extension by clicking Tools > Session Saver.

You may not want to install all of these extensions, but I would highly recommend that you install the top seven on the workstation that you use in the classroom. The web developer toolbar and Aardvark are essential and the other five extensions are extremely useful.

If you switch to a different workstation the Firefox extensions will not be available on the new workstation. You can right click on an extension on a web site save it into your user directory (create a folder in drive F:\ called extensions). The extension will have an xpi file extension. When you move to a different workstation you will be able to install your extensions from F:\extensions by double clicking on the xpi file you want to install.

firefox, extensions, browser, tutorial, install, web, developer, design

I’ve come across some new (well new to me) Firefox extensions that I thought you might find helpful:

del.icio.us - the del.icio.us extension for Firefox offers everything you need to seamlessly integrate the del.icio.us service with your Firefox browser. This is very handy if you use del.icio.us to keep track of your favorite web sites.

SessionSaver - I love this extension! SessionSaver restores your browser -exactly- as you left it, every startup, every time, even if your browser crashes! I love this extension because I usually have numerous windows open at the end of the day that I want to continue to review; instead of having to bookmark all of the pages, they’re automatically saved by this extension. If you have upgraded to Firefox version 1.5 you can get the updated extension at the developer’s site.

Select Search - select any text on a web page, right click and from the menu you can search Google Maps, compare prices, shop, search jobs, read product reviews, look up definitions and acronyms, search health information, find movies and TV shows, look up music, and more. This is a very handy extension.

IE Tab - this is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.

OperaView - open pages in Opera from Firefox context menus.

Viamatic foXpose - click on the icon in the status bar to display a single page which includes captures of all the open browser windows. Handy!

For more Firefox tools, Finding the Good Stuff lists some of my favorite web developer extensions.

Some older Firefox extensions will not work with version 1.5, but I have read numerous blog posts with fixes for this issue. Check Scattered for instructions on how to modify Firefox 1.5 to work with all extensions.

Emily Chang - eHub - an extensive list of web applications, services, resources, blogs or sites with a focus on next generation web (web 2.0), social software, blogging, Ajax, Ruby on Rails, location mapping, open source, folksonomy, design and digital media sharing.

Mani Sheriar, a former student and successful designer, has started a blog to accompany her beautiful site. Mani offers CSS and XHTML tips and discussion on her site designs. This is definately a site that you want to watch, I’m sure she’ll be a constant source of amazement for all of you!

For you Scott Kelby fans there is now PhotoshopTV! You can now view Photoshop tutorials on your computer or iPod at http://www.photoshopguys.com/.

I came across a couple of tips for speeding up Firefox:

Firefox Speed Tip
Speeding Up Firefox the Right Way

Do you want to share photos online, edit photos, create calendars, collaborate online, etc.? I want to is a page of handy web site utilities.

Have you installed the Internet Explorer Developer toolbar? I have been using it for the last few weeks and it’s quite helpful. It offers a lot of the same tools as the Web Developer toolbar for Firefox. This is just a friendly reminder that these tools/extensions will really help when developing web sites. You can find additional helpful Firefox extensions here.

I wanted to bring to your attention a job search site called PageBites. PageBites.com allows you to search the Web for job openings and/or résumés. You can also post your résumé and/or job opening on our site. Ralph stopped by and posted some info on this job search site, but I’m afraid that you might miss it buried in the comments. I really liked this job search tool; RSS feeds are available for searches, the interface is clean and simple, and you can get job listings from numerous sources all in one place. You can also easily post your own resume.

MyPimp, the online calendar thing, is an online personal information manager. It offers the following organizational tools:

• Online calendar and todo list - never forget where you need to be or what you have to do
• Alerts - be reminded of important events via alerts sent directly to your cell phone or email
• Group calendars - join a group for your classes at school or create a group for a club, project team, or group of friends
• Address book - link up with friends and colleagues so you always have each other’s contact information
• Free - take advantage of our hundreds of hours of hard work!

Vertical scrolling tables from CSS Playground…Pretty slick, as are the rest of the CSS Playground demonstrations.

TJKDesign presents, One clean HTML markup, many layouts…, a demonstration of one XHTML file and numerous layouts using CSS.

Breaking the Web Wide Open! (complete story) by Marc Canter is an article that describes and discusses the current and future open technologies used on the web. I think this is worth a read.

RobotJohnny.com has some free “toyware” fonts for download. These are some fun fonts.

There are several useful online search tools/services that you should familarize yourself with. These tools will help you to find a lot of content related to web development.

Del.icio.us - Del.icio.us is a social bookmarking system. What exactly does that mean? Instead of using Favorites in IE or Bookmarks in Firefox, your bookmarks are stored online and available to other Del.icio.us users and web surfers in general. Del.icio.us is organized with tags; rather than putting a bookmark in a folder, users use relevant words or tags to describe the web site content. For example, if you were to add a del.icio.us bookmark for this site you might use tags like: web, xhtml, css, tutorials, design, etc.

Del.icio.us bookmarks are available everywhere, since they aren’t stored on your own computer. In addition to being able to search and browse your own bookmarks by tags, you can also do the same with other members bookmarks. Del.icio.us bookmarks can also be integrated easily into your web site; in the menu to the right I am displaying my most recent Del.icio.us bookmarks.

After signing up for a Del.icio.us account, install the Firefox bookmarklet found on the Del.icio.us About page. You will then be able to easily add sites to your Del.icio.us account via the Firefox bookmark toolbar.

Technorati - is a blog search engine that also employs the use of tags to organize and find content. Technorati displays the hour’s top searches on its homepage.

Sage, RSS and other Goodies - Learn to embrace and love RSS! Use tools like GooRSS, PubSub, Bloglines, blo.gs, Feedster, or any other news aggregator or RSS tool.

Use Google’s new blog search to find current, relevant information on web development.

There are a lot of great search tools available for Firefox. These tools come in the form of extensions. You can learn about Firefox, its usage, and installing extensions in my tutorial Using Mozilla Firefox.

Here are some extensions that I find useful:

Web Developer Toolbar
ColorZilla
HTML Validator
Aardvark
EditCSS
Spellbound
Sage
Paste and Go
Tabbed Browser Preferences
Google Preview
Link Checker
IEView

Here are a few of the extension resources that I have mentioned in recent posts:

Essential List and Resources on Firefox Extensions from Lifehacker
Extending Firefox for Web Developers

While were installing Firefox extensions, let’s also get the Internet Explorer Developer Toolbar.

PC Magazine has a short article on how to upsample your images. Good techniques if you need to increase the size of a jpeg image for printing.

Top 7 Tricks For Getting an Interview includes some interesting suggestions for how to get an interview. Since most of you are currently looking for employment, you may want to take a look.

JavaScript Fading Tooltips - CSS and JavaScript to create hyperlink mouseover tooltips. Pretty slick!

Do you enjoy reading (outside of class)? Try What Should I Read Next?. Type in the author and title of the last book that you read and you will receive reader recommendations for your next book. Of course you can use this for technical books tool.

PHP/MySQL Tutorial - For students who nearing completion of their XHTML books and are interested in learning about PHP/MySQL.

David just mentioned to me yesterday that he was looking for shopping cart solutions. SitePoint has a new article Put your Money where your Mouse Is: 6 Payment Gateways Reviewed.

Copy URL+ extension enables you to copy to the clipboard the current document’s address along with additional information such as the document’s title, the current selection or both. Speaking of extensions, we will take a look at the extensions mirror today and install some useful Firefox extensions on our systems.

Special: Lifehacker’s guide to weblog comments - I think these are great guidelines for commenting in blogs and on message boards.

I have a personal request. I am trying to setup a Mac at home so I can do web testing, etc., I ordered a part to allow me to hookup my PC monitor to the Mac, but I can’t seem to get it to work. If anyone in class is a Mac/PC guru, I sure would appreciate some help.

Always remember to play!

The Jackol’s Den has an htaccess cheat sheet that you may want to print and add to your resources. You can learn more about other ways the .htaccess file is used in the article Server Move. The .htaccess file can be used to prevent hotlinking as discussed in class yesterday.

Speaking of cheat sheets, Code by Matt, has cheat sheets for Photoshop, Illustrator, CSS, PHP, Dreamweaver, htacess, and more.

Great article at 43 folders on Writing sensible email messages. 43 folders is a personal productivity blog by Merlin Mann with a lot of excellent tips!

Typesetter - oh I love this new typeface comparison tool! You can select three typefaces, sizes, colors, etc., and they will display on the screen so that you can select the best font for your web pages. Be sure to bookmark this valuable resource!

Essential List and Resources on Firefox Extensions from Lifehacker. These extensions would fall into the category of personal productivity rather than web developer. I use many of these extensions and they’re great!

The Opera web browser is now free. That’s $$$ free and ad free!

Microsoft is now offering the Internet Explorer Developer Toolbar (beta) - Here is info on the toolbar from the Microsoft site:

Overview
The IE Developer Toolbar provides several features for deeply exploring and understanding Web pages.

1. Explore and modify the document object model (DOM) of a web page.
2. Locate and select specific elements on a web page through a variety of techniques.
3. Selectively disable Internet Explorer settings.
4. View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
5. Outline tables, table cells, images, or selected tags.
6. Validate HTML, CSS, WAI, and RSS web feed links.
7. Display image dimensions, file sizes, path information, and alternate (ALT) text.
8. Immediately resize the browser window to 800×600 or a custom size.
9. Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
10. Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
11. Display a fully featured design ruler to help accurately align objects on your pages.

We will install and check this new toolbar out in class this afternoon.

Please don’t forget to vote in the Macromedia vs. Adobe poll that’s running in the forum.

I have a teacher’s meeting today. I will be leaving around 3:30 p.m. and Carolyn will be subbing for the remainder of class.

Standards-schmandards has an article on Methods for measuring text readability. The article discusses the importance of writing web site content that your visitors can understand. It also offers a readability index calculator, which is a form that you can use to test the readability of your content. The article goes on to discuss how you can improve your content’s readability score and provides a lot of great resources.

ScreenGrab is a Firefox extension that allows you to take screen captures of the browser window.

For those of you who are new to class, Firefox is a web browser that we use to test all of our web pages (in addition to Internet Explorer). I would like students who have not used Firefox to review this tutorial on using Firefox. Firefox is already installed on all of the classroom computers, so you will not have to reinstall it. I would just recommend reviewing the tutorial today, try surfing the web with Firefox, and tomorrow (Thursday) I will review installing extensions, etc.

Google now has a new Blog search engine. I think you will find this very useful when you’re looking for web development information since so much of the current discussion appears in blogs. I am happy to report that one of my sites finally comes up #1 on a search; if you search for hermit crabs, crabbytalk.com is number 1! The little things that make me happy. There is some Goggle Blog search help if you need it.

XHTML Character Entity Reference - 252 allowed entities in HTML 4 and XHTML 1.0.

This gave me a chuckle, The modern rules of advertising? Probably because Rob does walk on the freshly cleaned carpets or floors with his dirty work boots.

I have been putting off purchasing Photoshop CS2 at home, mainly because of the price; I just can’t stand the thought of shelling out that kind of money. Maybe if I hadn’t just started making outrageous mortgage payments I would be more like my old self and just drop the dough for my love of photography, but I can’t. I have been using the 30 day trial version of Photoshop Elements recently to see if that might meet my needs for photo editing. I have been happy with Elements and I think it’s an excellent program for people who want to edit thier photos. For me, I find myself missing many of the features (like Curves) that I have grown used to using in my workflow. That being said, I think that any of you who may be looking for a less expensive, Photoshop alternative, would be very pleased with Photoshop Elements. You can check out the features and download a trial version here. After downloading your trial, try out some of the tutorials at Photoshop Elements User.

Killer Buzz Flocks to New Browser - will you flock to this too?

I hope that you all had a wonderful August; while I’m not feeling so rested, I am feeling refreshed and happy to be returning to school. I just really hope that there aren’t any boxes waiting for me to unpack.

Here are a few resources to start the school year off right:

Cheat Sheet Roundup - Over 30 Cheatsheets for developers - JavaScript, CSS (Cascading Style Sheets), Hex Codes, XHTML, HTML, HTML Entities, MySQL, PHP, htaccess, and lots of other subjects.

.htaccess tips and tricks - an introduction and tips and tricks for creating and editing an .htaccess file.

Digital Web Magazine has a new article on Writing Semantic Markup.

Extending Firefox for Web Developers - extensions that web developers should install and use.

Character Entity References in HTML 4 and XHTML 1.0.

Wallpaperstock.com - a variety of very nice, free wallpapers for your desktop.