A version of Firebug with less features is available for Safari and other browsers, but it seemed jankity in Safari to me, so please install Firefox if it’s not on your laptop. Then once you have Firefox running and open, install Firebug.

Then open Firefox and install Firebug. Once it’s installed, you’ll notice a little fly in the bottom right hand corner of your browser window. Cute, huh? You click the fly to start up Firebug, on any web page you’re currently browsing. Next I’ll show you Firebug’s basic moves.

I really dig the way Creative Capital’s site is designed. I right-click (or two-finger tap on your trackpad, or control-click) any element in the page that I want to see the scripting of. If I want to see what font that italicized text in the Creative Capital site is, I right-click that actual webpage text that I like, and then at the bottom of the menu that pops up, I choose “Inspect Element.”

Once I choose “Inspect Element,” the Firebug window will pop up at the bottom of your browser window. On the left side is the HTML, and on the right is the CSS:

I found out that it’s Georgia (unless I don’t have Georgia, then it will switch to the next font in the list). But also it is italiziced, and that it’s 1.8em (that means it’s 80% larger than that particular font’s default size).

If I look at the top of this section of CSS, I notice that this is the styling of a DIV, so anything within this div will be styled with the following section of CSS that I see. It contains font styling, but also the last line is the width of the div (26.6em) – hm, a div that is always 2,660% as wide as the the default-sized single character of its font. A very typographic way of making a site.

A great thing about Firebug is that you can change the site (just how you’re looking at it, on your browser! Don’t worry about hacking the site!) by changing the CSS in the Firebug window – the page will update live. Give it a try, change the width, the color, the font family, etc. It’s really a great way to learn more about web design.

Below is a sample script provided to SAIC Admissions Counselors in spring 2010 that is intended to help them place students in the correct Wired course.  You may wish to preview this conversation and also the curricular materials and syllabi available on this website before you go through your first year course registration.

SAMPLE CONVERSATION BETWEEN A SAIC ADMISSIONS COUNSELOR AND A FIRST YEAR STUDENT REGISTERING FOR WIRED:

SAIC Admissions Counselor: Have you used Photoshop before?  Do you know how to resize images–make them smaller?  Save them to a specific folder?  Do you know how to use the Layers palette in Photoshop?  Do you know how to use the lasso and marquee to composite parts of one image into another?  Can  you use the eyedropper tool to color match and can you use the clone tool and the eraser?  If you answer yes to most of these questions I think that the more advanced section of Wired, Culture and Community on the WWW would be most appropriate for you.

However, if you feel you need more practice in Photoshop/digital imaging, we recommend you take the beginning section of Wired called Laptop Literacy and Digital Imaging.

If you wish to see the curriculum and weekly lessons for both courses you can see both syllabi online: Laptop Literacy is here and Culture + Community is here.  Please note that if you move the mouse over the “Laptop Literacy” and “Culture and Community” links on the toolbar you can actually see individual objectives, skills, and homework assignments for each week of the course.  Previewing this information in advance will help you make a more informed decision about which course is right for you!

SAIC Admissions Counselor: If you feel that you are already a web expert and know digital imaging and web production (using Dreamweaver/FTP) quite well there will be an opportunity to obtain an exemption to the class.  If you think you wish to place out of the class it is very important that you attend the first year Orientation where the Wired Coordinator, Tiffany Holmes, will go over the details of testing out of the course.  Usually the test is offered at the lunch hour two times before add/drop ends.

If you wish to communicate with the Wired Coordinator, Tiffany Holmes, before you come to campus please feel free to email her at tholme (at) saic (dot) edu.

You may wish to check first with your instructor to see if you have the ability to test out of SAIC Wired, a required course for incoming SAIC first year students.  Or better, check out this website and the accompanying class lessons so you can see if there are things you already know, or things that you need to learn.

If you know the basics of digital imaging, how to set up an HTML web site, and how to use a blog, you might be eligible to test out.  You can actually look at the test online HERE.

Email the Wired Coordinator, Tiffany Holmes at tholme (at) saic (dot) edu to find out when the Wired “test out” sessions are scheduled for.  The test-out session for the Fall 2010 school year is scheduled for Wednesday September 8th 12-1pm in MC-417 in the 112 South Michigan building.