CSS Typeset

Pretty cool tool: Quickly see how the type will look online and grab the CSS for the look!

csstypeset.com

Lightbox & Similar Apps for viewing media

Hey there,
(The following use the javascript libraries of Prototype and Scriptaculous we've talked about in class.)

In the last class I noticed a few of us implemented the Lightbox 2.0 Image Viewer on the image gallery. This post relates to the same effect as Lightbox for viewing images... and more!

1) From Lightbox, Jonathan Chirstopher at Suckerfish developed the Suckerfish Hoverbox Redux. I'm not sure if I would really use this myself but wanted to show you yet another derivative of a simple idea that really took off.

2) An alternative to Lightbox is Lightview. Which does single images and galleries like Lightbox but also it does Quicktime, Ajax Form, Ajax Post, iframe, inline content and SWF (Flash)

"Lightview was built to change the way you overlay content on a website.

• Clean: Designed to compliment your content.
• Fast: Smart image preloading.
• Easy: Customizable without having to know CSS.
• Rounded: Adjustable rounded corners, no PNG images required.
• Smart: Content resizes to always fit on your screen.
• Slideshow: One button slideshow.
• Works on all modern browsers. "
  

Good luck with all the homework this week!

File Size Converter - I need a Byte

thebyteconverter.com

I found myself needing it for assignment 7.

DOM Stylesheet Library

On my way in this morning I saw a tweet by Smashing Magazine about this site sheetup.com. Checked it when I got to class and it looks like a great resource to check out.

Introducing Aviary Tools (like PS & AI but online)

Possible solution instead of buying the Adobe applications.

"Edit images, create mind-blowing effects, design logos, find colors, collaborate and more. All you need is a web browser. Try it now completely free!"

I just found out about this Aviary Tools in a newsletter. It seems too good to be true for those that don't have Photoshop or Adobe Illustrator. There is a free version but I see on the pricing page that they put a watermark on free creations. Two other yearly paid versions.

HTML/XHTML Character Entities

When you want that special character like a ♥ or ¶, you need to go to the reference list... at least I would.

• For a while I was using this link as my quick reference for character entities.
• This morning though I saw Smashing Magazine had sent a tweet on their twitter to another reference of character entities.
  

I'm blogging about this because the list links are an essential reference. As well, I've been following Smashing Magazine and in that a short while they have exposed me to some resources that made a recent design job very easy. There are some awesome tutorials on the site as well for the programmer side in us. Plus if you follow them on Twitter, you get some extra tidbits (like just a link to something) I don't believe they post about when you follow them on Twitter.

How was that for a pitch? Have a great week.
db

PHP links

In class we learned of

• PHP.net for the official site of PHP.
• tizag.com for a PHP tutorial (http://www.tizag.com/phpT/)

As well, the following two links are php portals of sorts with many categories... resource and reference.

• Top of the Google search result is php.resourceindex.com. I just looked around and for example found some quick answers to code and how to write the functions. Doesn't seem to be any "spam" in this collection of links.
  
• I somehow came across www.hotscripts.com/PHP Warning: there is a lot of junk to filter through. Perhaps there is something good in the Scripts and Programs section.

The Kitchen Sink of Design Stencils - Yahoo! Dev

If you ever wondered about the group which develops web ad unit standards, check out IAB.

The other week Amos posted a link to standard ad banner sizes and I'd like to elaborate on that and let you know about Yahoo!'s Design Pattern Library (part of the Developer Network) regarding the Stencil Kit. This free download has the kitchen sink of design elements that could be used as placeholders while mocking.

Plenty more resources in the Design Pattern Library. For example, this is their problem/solution for breadcrumbs

Firefox: Image Optimization

smushit.com

"Performance just got a little bit easier. Optimizing images by hand is time consuming and painful. Smush it does it for you."

I'm new to this add-on but for one that doesn't have Photoshop I think it's a great idea.

CSS Shorthand

CSS short hand is an art and some people are diehard about it. Me, I'm glad to remember what I can.

In surfing around today I found this post: 10 CSS shorthand techniques you’ll use everyday

It's an easy to read breakdown of pretty common uses. I was pleasantly surprised to know most of these and to learn about the "*" selector.

No Photoshop... No Problem

Check out GIMP for photo manipulation!

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)