Yesterday in class I mentioned the new CSS unit using CSS: The Missing Manual. This will be a required book for all new students entering the program and an optional book for students who are currently enrolled.

I have to say that this is an outstanding book on CSS. It is an excellent introduction to CSS and also a great read for those who are experienced with CSS. The techniques discussed are very current and it even discusses issues with Internet Explorer 7. One of the things that I really like about the book is that as it demonstrates techniques it also discusses the pitfalls and solutions in different browsers, especially Internet Explorer 6 and earlier versions. The book is also filled with hands-on tutorials for practical experience.

I have started to develop the assignment sheet for this book; it’s available at http://www.jobskillsnow.com/webdes/cssmissing.htm

We will be selling the book in class, meanwhile you can order CSS: The Missing Manual via Amazon for $23.09.

Also, many students have asked about Flash/USB drives for storing class work. Flash/USB drives are available at any store that sells electronics and you can also find them at Amazon. These are very portable devices that allow you to store and transfer small and large files from one workstation to another. They’re quite handy and very easy to use; much easier than having to burn CDs of your classroom work. Some students even use these drives to store and run software programs that they like to use in class.

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 mentioned a couple of weeks ago that we would be installed Internet Explorer 7 Beta 2 Preview on the instructor workstation. Unfortunately, it didn’t happen as quickly as I had planned. It is installed on the instructor workstation now, so have fun checking your sites in this new browser!

It’s the day we’ve all been waiting for! After five years without changes to the rendering engine that defines (and limits) what the Web can do, Microsoft has released IE7 Beta 2 Preview for download by developers everywhere.

If you have anything to do with the design and layout of a web site, you need to download this and get started on correcting any obvious compatibility issues.

Why the hurry, you ask? Well sure, there’s the fact that every Windows XP user in the world will be offered this browser as a free upgrade when it’s ready later this year. But more importantly in my mind is the fact that we have been clamouring for a less buggy, more standards-compliant browser from Microsoft for years. Now that Microsoft has finally responded, it’s up to us to show them they were right to do so.

Quoted from the SitePoint Times Email Newsletter. You can subscribe to these great newsletters @ SitePoint.

You can download (at home) and learn more about the beta release @ the Internet Explorer Beta 2 Preview Release Site. The IE Blog also has information on what is new with the release and other important notes about Internet Explorer improvements. Remember that this is a “beta” release, so there may be bugs, install with caution. I found a few issues when I went to install the beta version on my laptop:

1. After downloading the software and running the exe file your operating system installation needs to be validated before you can install. So information has to be sent to Microsoft.
2. I found that I couldn’t validate easily with Firefox. I ended up resetting my default browser to IE to validate.
3. I had to install an Active X control in order to validate and even then I got a validation error in IE.
4. I ignored the validation error in the browser and clicked Validate again in the install screen and it finally let me install the software.
5. Internet Explorer 6 will be replaced by this beta version, so only install if you’re ready to make the switch.

If you have already developed “live” web sites may want to download this preview release. Since the IE team has promised that they have fixed many of Internet Explorer bugs, you need to check your sites to see how they look in this new browser. If you have used CSS hacks on your site you may need to consider removing these hacks and using alternative methods to get your layout to display properly. I will install the preview release on the instructor workstation so that you will be able to check your sites here if you do not want to install the beta release at home.

I checked my blog and other sites in Internet Explorer 7 and the fonts were beyond tiny! Everything laid out well (thank heaven for small miracles), but I couldn’t read the text. Yikes! I discovered the the default text size for Internet Explorer 7 is set to smallest. You can change this in View > Text Size. I set mine to medium which is the default for IE 6.

Internet Explorer 7 now offers tabbed browsing just like Firefox. It also offers built in RSS support with a nice RSS feed reader built in. You can access your feeds by selecting View > Explorer Bar > Feeds. The interface is sleaker, a nice improvement over Internet Explorer 6. There are also some other nice new tools like a pop-up blocker and support for add-on programs, similar to Firefox extensions (it’s looking a lot like Firefox, IMHO).

Of course the biggest issue being discussed about the new beta release among developers is the “improved” CSS support. Since I just downloaded the software today I will wait a bit to comment on CSS and IE 7. Again, you can read more about the Internet Explorer 7 CSS support improvements at the IE blog. This resource blog also includes information on uninstalling the beta preview if necessary.

I will post more notes about this release as I have an opportunity to explore it. I will install the release on the instructor station this afternoon so that we can take a look at Internet Explorer 7 together.

Technorati tags: internet explorer, browsers, support, css, beta

Yesterday I encouraged you all to read the article Fixing Browsers: Bugs and Hacks by Lorelle VanFossen. Lorelle was kind enough to share another article she wrote, Views of a Web Page. In this article, Lorelle describes in wonderful detail the testing process used when building a web page. The article discusses developing and testing for various screen sizes, handhelds, variable font sizes, print, browsers, search engines, color blindness and visual impairments. Taking Your Camera on the Road puts into practice everything that we have discussed in class about accessibility. Thank you Lorelle for sharing your amazing resource with us!

Once you digest Views of a Web Page, take some time to explore the rest of Lorelle and Brent’s site, Taking Your Camera on the Road (you may want to grab a cup of coffee, you may be there for hours as the information is so diverse). Lorelle and Brent have spent 10 years on the road photographing and documenting their journey; the photographs are exquisite and the stories are inspirational, educational, and gut wrenching. For those of you who love photography, don’t miss the learning section!

Checking Sites for Consistency

One of the really tough parts of web development is getting your site layout consistent in multiple browsers on multiple platforms (Windows (98, 2000, XP), Macintosh, Linux, etc.), with different resolutions when you’re using CSS. You must ensure that your site looks good in various versions of Internet Explorer, Firefox, Opera, Netscape, Mozilla, Safari, and Konqueror on multiple platforms at different resolutions (800×600, 1024×768, etc.). The instructor workstation, at the front of the classroom, has IE, Firefox, Netscape, Opera, and various other PC based browsers. The classroom Macintosh has Safari, Opera, Internet Explorer, Camino and various other browsers.

Checking your site for consistency is a time consuming process and requires access to different computers and operating systems. Access to multiple computer systems may not be an option for new web developers, as equipment costs can be high. BrowserCam’s Screen Capture Service lets you submit multiple URL’s, choose the browsers and operating systems you want to see, and in about a minute returns screen captures of your webpage loaded in the different browsers and operating systems you selected. BrowserCam has been kind enough to offer this service to students in our class for free. I will announce the username and password in class this afternoon; if you miss class, be sure to ask me for the access information.

Once you start to check your sites in different browsers you are going to find a lot of inconsistencies. Lorelle on WordPress has written an article on Fixing Browsers: Bugs and Hacks and pulled together some excellent resources on the subject. Over the weekend, students who have completed at least the CSS unit of the XHTML book should review this article, the accompanying sites and the handouts that I will provide you with today in class. I would also recommend that you spend time at CSS-Discuss for more information on browser inconsistencies. Google’s blog search is an excellent tool for finding CSS help. Try searching for “conditional comments css” or “css hacks”.

Validating Sites

All of your projects should validate as XHTML Transitional. I would recommend that you read Making Documents XHTML Compliant before you begin the validation process.

Next Up: Google Office? An interesting article on the possible joint venture of Sun and Google.

Treehouse, an online developer’s magazine, is now available. This first issue is free to all! (This is a 50+ page PDF file, please do not print it in the classroom.)

If you have an iPod, you may want to check out some of the Podcasts from the Web Essentials 2005 conference. Veerle’s Blog has an entry on some of the available topics and speakers.

I know that some of you would like to work on PHP/MySQL at home, here is a guide to Install & Configure Apache, PHP, JSP, & MySQL on Windows XP/2000. This guide is current as of this post.

Dynamic Drive, which is a great resource for JavaScripts and DHTML scripts, has a list of a few online web tools you may enjoy and find useful.

Lifehacker offers the Ten Must-Have Bookmarklets. David can you please add some other “must-haves” to this list?

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.

IEBlog has an article Standards and CSS in IE - in a nutshell, little has been done to support standards and CSS in Internet Explorer 7 Beta 1. There is however an impressive list of “fixes” for Beta 2, so we shall see. For additional information on the update, head over to MezzoBlue. While you’re over at Mezzoblue, check out the book link list from the book The Zen of CSS Design. Lots of wonderful samples and resources.

Speaking of good books, one of my favorite, easy to understand, books on XHTML and CSS is Web Standards Solutions: The Markup and Style Handbook. Dan Cederholm, of SimpleBits, has authored a second book, Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS which I cannot wait to order (unfortunately, I must wait until I know where I will be living in the next week or so).

Forbes.com has released the Best of the Web - Summer 2005 - Blogs that Matter. Why so much attention to blogs? Well, it’s estimated that there is one new blog created every second! They’re easy to create, maintain, and publish with. Check out my Blogger tutorial if you would like to create your own online blog quickly and easily. If you would like a little more of a challenge, try the WordPress tutorial.

Digital Web Magazine has a fresh issue which includes an article on Color theory for the color blind. If you haven’t already, I would recommend that you take a look at the variety of topics that DWM has to offer, there should be something there for everyone.

The CSS Playground is now known as CSS PLaY - There is an interesting demonstration, a definition list bar chart, you may want to check out.

Web Design From Scratch has a couple of informative articles: Imagery - a discussion of imagery that adds value to a site and Colour - a discussion of proper color usage on a site. Actually, this site has a lot of content that students in our course would benefit from.

I Love Jack Daniels has a new JavaScript cheatsheet.

A while back we had discussed creating HTML email in class. there is a new article on Optimizing CSS presentation in HTML emails.

I would like to remind all of you that are working on projects that we have a free BrowserCam account that you can use to test your sites. I will demo this service and give you the username and password this afternoon in class.

If you are planning on building a non-profit web site, you may want to read the article Digital Images for Nonprofits, Courtesy of Flickr and Creative Commons.