You have to see the future of Microsoft Office. You can view a video of the latest Microsoft Office Suite and sign up for updates on the beta suites at Microsoft’s Office 2007 Preview Site.

Bring on the Ribbon!

Over 300 Web 2.0 sites rated, ranked, and awarded.

http://web2.0awards.org/

A great opportunity to learn about some outstanding web sites and web tools. Be sure to check these sites out, you’ll learn so much about the latest web technologies.

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/

Part 3, Evaluating website accessibility, of the three part series on accessibility from 456 Berea Street is now available.

If you haven’t read the first two parts of this series, check the March 16 archive for links.

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

CSS Table Gallery - The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Some cool examples of what you can do with data tables. There are download files for you to use.

456 Berea Street has two new articles on web site accessibility. These are the first two articles in a three part web site accessibility series.

Evaluating Website Accessibility Part 1, Background and Preparation

Evaluating Website Accessibility Part 2, Basic Checkpoints

These are excellent accessibility articles that should be read by everyone enrolled in the web program. They will provide you with an understanding of accessibility, accessibility tools, and a knowledge of best practices when it comes to designing accessible sites for all.

Be sure to keep an eye on 456 Berea Street for the third part of this terrific series.

accessibility, website, coding, tools

A collection of 40 CSS layouts is now available at Layout Gala. This is a wonderful collection of templates that you can use to get started when you’re building a CSS based web site.

I mentioned how useful cheat sheets were yesterday. Here are a few cheat sheets that you may want to print and add to your class resources.

CSS

Jack Daniels’ CSS Cheat Sheet
CSS Shorthand Properties
CSS Properties Table
CSS2 Reference
Efficient CSS with shorthand properties

HTML/XHTML

Jack Daniels’ XHTML Cheat Sheet (PDF)
XHTML cheat sheet

More Cheat Sheets

Lorelle on WordPress, one of my favorite web development blogs, has a great round-up of web development cheat sheets. Bookmark, bookmark, bookmark. Did I mention you should bookmark this resource?

Other Resources

David posted a link to Selecttutorial: CSS Selectors tutorial over on the forum. This is another tutorial that I would suggest that all of you read.

css, xhtml, cheat sheets, resources, development, coding

I uploaded more CPanel and Fantastic hosting tutorials last night. There are over 60 tutorials now available for managing your hosting accounts.

Please take the time to review these tutorials. Learning to properly manage your hosting account is an important part of your training experience.

The tutorials are available @ http://www.robinshosting.com/faq.html. All of the tutorials are in Flash SWF format.

I am please to announce that robinshosting.com has acquired CPanel Flash tutorial movies. The purchase of these tutorials was made possible by generous donations from students in the program. The following CPanel tutorials are now available:

1. Password protecting a directory
2. How to change your password
3. Managing a MySQL database in PHPMyAdmin
4. How to redirect URL
5. Keeping your contact information up to date
6. How to use webmail
7. How to add a FTP account
8. How to addon a domain
9. How to add subdomain
10. Creating an autoresponder
11. How to backup your site
12. Creating a default (catchall) email account
13. How to set up a cronjob
14. How to redirect e-mail
15. How to create a POP email account
16. How create custom error pages
17. Using File Manager
18. How to install and uninstall Frontpage extensions
19. Enabling Hotlink Protection
20. Using Index Manager
21. How to create a MySQL database
22. Setting up an e-mail account in Outlook Express
23. Disk Usage Viewer
24. How to Trace an Email Address
25. How to Setup an Email Filter
26. Submitting to Search Engines
27. Setting Up the IP Deny Manager
28. Navigating Around cPanel
29. Raw Log Manager

You can find all of these tutorials on the new FAQs page on the hosting site. Additional tutorials for CPanel and Fantastico will be available in the very near future.

If you can’t find the answer to your question on the FAQs page, check the hosting forum and post a question. If you have a question about a feature, other students probably will too.

As an assignment for today, I would like all of the web development students to review the new CPanel movies. You need to get to know your account features and this is the best way.

I have also updated all of the FTP/Dreamweaver tutorials again. I would recommend that you review these tutorials; links can be found on the FAQ page also. The XHTML and Dreamweaver assignment sheets have also been updated.