links for 2009-02-24

• 5 CSS3 Techniques For Major Browsers using the Power of jQuery | Noupe
  A little bit of a workaround to get the power of CSS3 now… using JQuery.
  (tags: jquery css3)
• Vischeck: Color Blind test
  Another online resource to test your site design against various color blindness types.
  (tags: colorblind accessibility)
• Colorblind Web Page Filter
  A script to check your pages against to test for ColorBlind perception difficulties.
  (tags: colorblind accessibility)

Electric Pineapple was originally an eccentric name for my web development company I started in my spare time in 2004. I was slinging the JavaScript like no one’s business for elementary schools and small businesses. I have moved on from my early days to a wonderful full time gig with The Iona Group doing multimedia development. I work on a variety of web and interactive projects and with a extraordinary group of coworkers and clients. Caterpillar, The Museum of Science and Industry, and The Field Museum are just some of these clients for whom I have developed. More information about web, interactives, technology, development and other musings that interest me will follow on these pages.

Tweetcoding, Tons of Fun. A huge Challenge, too.

Think you’ve got what it takes? Write a Flash ActioScript sketch/application in 140 characters or less. It’s harder than you think. Check out Grant Skinner’s overview and then read the rules. After you are thoroughly confused, check out the entry page for a little clarity and some great work. Prepare to be amazed at what a very creative community has put together. I have a couple I tossed together in the mix, but the real beauties belong to Quasimondo. His mastery of ActionScript has made 140 characters seem effortless.

With talk of more rounds to come and murmurs of various permutations of the gimmee code included to help you along in your quest, this should be fun to follow. Think of it as a communal geek Actionscript tennis carried on for all the world to be confused at.

I’d love to see a TweetCoding that offers Flex as a option, or perhaps allows for a couple external packages as some of the gimee code. URLRequests (for e4x madness), maybe extra audio stuff, a little 3D, maybe some filters. I feel tired thinking about the late nights already.

Have you created something cool in TweetCoding? Post a link here.

Renderosity

Ambient Occlusion, Specular Pass, Final Gathering, Global Illumination.

If you understand any of these terms, you know the hell I am experiencing right now. I kid of course, but lighting and rendering can certainly be a tedious process and I have yet to land on a “right way” of doing it. Certainly I have yet to land on an exact method that works well for me.

Perhaps what makes my process a bit unique is that I start working on lighting and rendering my scenes as I am still texturing my objects. I find that much of the final look of an object depends on both its material attributes (texture maps, bump maps, specularity, reflectivity, etc) as well as how that object is lit, rendered, and composited into the final image. I find that I can save a lot of time by combining these two process together and dealing with both of them at the same time. Less guesswork, less re-working, more time for drinking. (still with me? Just checking.)

I have been working on developing the render work flow for Annabelle’s Bistro for the last few days. My original intent was to render the entire animation through Mental Ray with Color, Shadow, Specular, Occlusion, Reflection, and Depth Passes. However, time considerations require that I simplify the process significantly.

As of now I am considering rendering Specular and Occlusion Passes through Mental Ray and combining the Color, Shadow and Reflection Passes into a single pass and Rendering that using Maya’s software render engine.

Below are examples of each pass and the final image resulting from combining them together in After Effects. I think the final composite looks pretty darn good for a simple test.

Annabelle’s Bistro Podcast Episode 10

Hello all,

In this weeks installment of the Annabelle’s Bistro Podcast, the class gathers to discuss Coraline. What does this have to do with Annabelle’s Bistro? Absolutely nothing!

Enjoy!

links for 2009-02-21

• Preloader in Flash CS3 – Actionscript 3.0 way « New Movieclip()
  Hey, why not link to another AS3 based preloader tutorial. Not bad.
  (tags: tutorial as3 preloader actionscript)
• Flash CS3 Tutorial – ActionScript 3 Preloader | School of Flash
  About the easiest to follow AS3 preloader tutorial I have come across, great for new Flash designers.
  (tags: flash preloader actionscript)
• CSS Help Pile – A huge pile of CSS-related tips, tricks & resources. – Artypapers
  A pretty big stack of CSS related tutorials and resources. Worth a review.
  (tags: css tutorial reference)

links for 2009-02-20

• Squidfingers / Patterns
  Looking for some nice tiley background for divs and pages? Well, this site has over 150 of ‘em.
  (tags: free texture backgrounds tiles)
• Garrett Dimon / One Idea is Better than Three
  Preaching to the choir here. Come to your meeting with confidence and rule that boardroom with your design prowess.
  (tags: process)
• Apple’s design process – BusinessWeek
  10 to 3 to 1. +Ponies! Who doesn’t love ponies?
  (tags: design process)
• flow|state: Matching design sketches to the desired level of design feedback
  Working a design from sketch to wireframe to Photoshop.
  (tags: prototyping process)
• A List Apart: Articles: Saving the Spark: Developing Creative Ideas
  Brainy ideas from some of the brainiest web designers around
  (tags: process ideas alistapart)
• Free Online Graph Paper / Grid Paper PDFs
  A whole site with nothing but grid paper? Wow, I’m in love.
  (tags: grid process sketches)

links for 2009-02-19

• 30 High-Quality Grunge Photoshop Brush Sets
  A nice assortment of brushes for designing using Photoshop. A good selection here.
  (tags: photoshop free brushes)

links for 2009-02-17

• noobr – The Ultimate Resource for noobs. Always.
  A wide array of good free stuff. Nice vectors, icons, css.
  (tags: free download)
• 50 Free High-Quality Icon Sets | Graphics | Smashing Magazine
  Some very very nice icons here in lots of formats and sizes.
  (tags: free icons)

Using CSS Zen Garden as a Teaching Tool For New Web Designers

I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing