Screen Grab in Firefox on Mac

In class we installed the Firefox add-on Fireshot for grabbing screen shots. When I got home I realized that add-on only works for Firefox on PC. I found and have used this week a similar add-on for Mac called Screengrab!

I really like Screengrab! because you can Save or just Copy with a couple simple clicks, starting on the icon in the bottom status bar. Save as JPEG or PNG in the preferences.

I have updated my previous blog post about Firefox add-ons I use as well.

Building Pet Store : 1 : Observatons of Coding

On my one pot cooking spot I've started to build my pet store wire frame. I'm building something a little different than what I first posted from PowerPoint. I don't have the new sketch scanned but you can see here the screen shot of the div ids with some place holding content.

Following are a few observations I've noticed while coding and in time want to figure why I these behaviors are happening.

Background Colors:
Only in IE6 & IE7 does the container background show for the whole area. It doesn't show in Safari or Firefox for either PC or Mac in areas where there is not content. I think the floats have something to do with this. Need to figure it out.

Margins:
I know bottom margin is showing in some browsers and not in others. Need to figure this out because I believe there are issues in IE for combinations of padding and margin if both used in one block style.

Oh it's been a long time since I built a framework but I'm enjoying the challenge. Usually I would be grabbing all this base XHTML and CSS from framework resources on the web to save time in the development stage and to give me more time in the design stage.

More Observations to come.
Feedback welcome.

Testing in Browsers + Mutiple IEs on your PC

While building our Pet Store wire frames into real web sites I thought to mention how I test on multiple browers. If you haven't experienced it yet you will soon find out that there are some frustrating differences between all the browsers and how they render your XHTML and CSS.

I personally have bitten the Mac apple and therefor don't have much to do with the PC world until it's time to test. So how do I test all the main browsers during development?

Set-up for PC

Q: How to have multiple IEs on one computer?
A: As far as I know you can't have more than one IE installation on the default set-up of a PC. I have found a solution around this at this article on tredosoft.com which explains the multiple IE installation available at the bottom of page. I had no issues following the installation.

Set-up for Mac

If you have a newer Intel Mac you are in luck. Well, you still need to buy Windows but at least you don't have to buy a whole new computer set-up. If you have an older Mac computer you can get Virtual PC but the software isn't supported by Microsoft anymore.

My computer: MacBook Pro (Intel)
Windows Installation: Windows XP Home Edition
Additional Mac software: Parallels (to run Mac OS and Windows concurrently)

Then install the multiple IE installer to get all the stand alone versions you would like to test for.

Now that you have the hardware

Q: What browsers to test on?
A: Looking at the browser stats on W3 you see you should test for IE7 and IE6. IE5 is still out there but the stats for use are dropping fast so I'm personally not testing for that browser. Then the obvious is Firefox with high numbers. After that I test for Safari which ships with Mac computers. You may have thought there was an IE for the Mac but that browser is no longer supported by Microsoft. In short that browser list is:

• IE7 PC
• IE6 PC
• Firefox PC & Mac
• Safari PC & Mac
  

Questions I still have about testing. Perhaps you know the following.

• Does the PC version of Safari render like the MAC version?
• Any good on-line testing web sites and how much do they cost?
• What other solutions are there for MAC people to run PC?

Remember you are a student right now and can get some great discounts on computer software. If you are going to be developing for the web I would get what you will need in the near future now.

feedback welcome

Class 02: In Class Assignment 01

In class assignment to copy the PowerPoint layout of Amos'.

Please View at OnePotCooking

Wireframe: My Pet Shop

In class assignment: Create a wireframe of information architecture for a pet store

Firefox Web Dev Plugins I Use

I use Firefox as a regular web dev tool. The following list of plugins I've found helpful in design and coding.

You can find these plugins at Firefox Add-ons

• Web Developer - Adds a menu and a toolbar with various web developer tools. Very powerful.
  
• Firebug - Equally as powerful, with firebug you can edit, debug, and monitor CSS, HTML, and JavaScript live
• MeasureIt - Take the guessing work out of coding widths with this on screen ruler.
  
• ColorZilla - Get that RGB or Hex numbers you need with this screen color picker.
• Palette Grabberr - Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page. (I don't have much experience with this add-on but it seems great)
• Clear Cache Button - fast way to clear cache in Firefox
  
• Cooliris - works with Google images and Flickr and makes looking for photos a snap
  
• Session Manager - Can use this to save sessions of tabs per client
• ScreenGrab - Copy or save the whole page or just what is visible or just what you choice and in more than one file format. Easy to use and quickly accessible.
  
• Fireshot - (PC only) Screen shot taker and control of file created
  

I'm new to these three possibly very helpful Firefox plugins for web development. These three relate to easily seeing the code structure with a right click on the page. Very useful in seeing what's under the hood.

• Aardvark - Utility for selecting elements and doing various actions on them. It can be used for web development but has other applications.
  
• X-Ray - See the tags on a page without viewing the source code.
• Professor X - See inside a page's head without viewing the sourcecode...

Search of other plugins on Firefox Add-ons in the Web Development section.

(Please comment and/or suggest your own preferences)

First step

The journey starts with the first step.