Presenting the Hardest Working Nutcracker Metal Band in Showbiz

Enjoy this special Christmas wish from me, especially to you. Happy Holidays 2008!

Enjoy this special Christmas wish from me, especially to you. Happy Holidays 2008!
There’s some really cool stuff happening in Vancouver. Here’s a kick-ass touch-screen project from my buds Alex and Brett featured last weekend at the Richmond Winter Festival–
Simple formula for easing to a target… (why do I keep forgetting this?)
currentval -= (currentval-targetval)/speedmodifier

Typetester is an awesome tool–a must for XHTML/CSS-heads–created by Marko Dugonjic. Also, make sure you check out his explanation for using the base font/ems approach. Very flexible and smart.
I’ve compiled some links for myself related my experience at FlashForward 2007. I’m posting them here in case there are others interested in checking them out.
| Peter Elst | OOP for the Noob |
| Giovanni Gallucci | Branding via Social Media for the Interactive Artist and Small Agency Flash and Search Engine Optimization |
| Seb Lee-Delisle | AS3 Particle Effects |
| Kevin Lynch | Adobe Keynote |
| Erik Natzke | Beyond the Knowledge; The Art of Playing |
| Paul Ortchanian | BitmapData and 3D Image Manipulation in AS3 |
| Robert Reinhardt | Deploying Video with Flash CS3 |
| John Say | Video Game Opportunities with Flash |
| Michelle Yaiser | Working with Flash on a Multi-User Multi-Touch Tabletop |
More thoughts/details to come soon…
“This plugin was created for people who need to easily add multiple users to their WordPress installation.”
Man, the docs for AS3 in Flash CS3 suck.
Why can’t I get Loaders to throw a COMPLETE? Well, I can, but I just need to get the syntax right…
After troubleshooting for an hour, I find this post, which solves my problem immediately. Instead of:
myloader.addEventListener(Event.COMPLETE,onComplete);
I need:
myloader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
Thanks, Luca (who doesn’t seem to be posting anymore…)!

Oh man, that’s sweet… some solid dynamic text control in Flash…
![]()
http://www.stepinsidedesign.com/STEPMagazine/Article/28718
I guess Brad Pitt wasn’t available for the photo op, so they went with me (his sometimes face double).
Geoffrey Williams on his blog post:
“I’ve taken the time to convert a publicly available JavaScript MD5 and SHA1 API to AS3.”
This allows Flash to take a string (say, “password”) and encrypt that using SHA1(”5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8“) or MD5 (”5f4dcc3b5aa765d61d8327deb882cf99“).
Wonderful!! Now, if only this could be done in AS2… no?

Digital artist, Mark Stuckert, launches issue 2 of his mysteriously titled “The Problem of Nothing“. Check it: http://www.theproblemofnothing.com/
FULL DISCLOSURE: Although Mark is a former W.G.Arndt™ design student, I unfortunately can take little credit for his mad genius. Except, perhaps, for the occasional coding tip.
For the deep deal, here’s some of the best human beatboxing for your spitting pleasure–Rahzel does it fa rael:
http://www.youtube.com/watch?v=HzhkhYebSAo (OMG–so awesome!)
http://www.youtube.com/watch?v=Znfcmj9wEjk
http://www.youtube.com/watch?v=tIuiG2J4EaQ
In Kitchen Diaries, Beardyman lays down the recipe on some wicked beatboxing and cooks up some phat dishes.
(Thanks for the link, Hannes)On a personal note, I bet you didn’t know that I was quite the accomplished human beatboxer back in the day in Philly? Well, I was. Just ask any nerdy white kid I knew in highschool or at my part-time dishwashing gig. But I could never lay down the groove while simultaneously cooking up by the recipe like this.
Wkd.
Full disclosure: I’m originally from a Philly suburb, not the city proper. But I was a great beatboxer. For a white dishwasher.Michael Wesch, Assistant Professor of Cultural Anthropology at Kansas State University, describes the concept of Web 2.0 in under 5 minutes: Web 2.0 … The Machine is Us/ing Us. Beyond breezing through the "history" and the current state of 2.0, this video deftly inspires larger concepts and questions (…but nothing new here, though).
Since I understand this space somewhat, I’m able to follow along at the brisk pace of the video. But I doubt this is an easy-1-2-3 "What is Web 2.0" walkthrough–not suitable for Joe and Jane Public.
(Thanks, Jeff, for this great link).
http://www.eurekalert.org/pub_releases/2007-01/mc-mcs010407.php
Go Wii! Go Dance Dance Revolution! Or, how about kids just go outside?
Here’s an introduction to A* pathfinding algorythms.
Send a signature mod7 ecard that doesn’t suck to everyone on your list! Happy holidays and we’ll see you in the new year.
A little pre-holiday season update from mod7: the new BUDF website, designed and built by mod7, goes live today. Powered by the popular blogging and publishing platform, WordPress, the site is fully dynamic and client-managed. Happy Holidays! http://budf.ca
The first branded Hip Digital-powered sites have been launched, and they are lookin’ fine! Check out the Country Music TV Store and eSounds.ca.
In late 2005, Hip Digital Media Inc. came to mod7 for help in the design of a robust, brand-able online music-delivery system. Working closely with OpenRoad Communications, mod7 led the initial charge into the research, prototyping and modular visual design for this B2B and B2C endeavour and stayed on for Flash application programming and front-end HTML/CSS development.
More is certainly to come.
Fantomas: wicked cool post-industrial post-modern speed metal: http://www.youtube.com/watch?v=MGlKflP7ycE
The Wil Arndt-designed “work/life balance” event was held tonight at the Vancouver Film School. Can you rise to the top of your field, work less, and not sacrifice your family, interests and personal life? Passionate audience members joined an all-star panel in a lively discussion about work, life, and everything in between.
Thank you to our distinguished panel: Co-moderators Wil Arndt (mod7) and Gordon Ross (Vice President, OpenRoad) facilitate a cross-industry panel, including Stephen Beck (Principal, Engine Digital), Ron Bignell (Electronic Arts), Mark Busse (Industrial Brand Creative), Eric Karjaluoto (Principal, smashLAB), Robert Ouimet (Partner, At Large Media), Lisa Vogt (Managing Partner, McCarthy Tétrault LLP), and Jeremy Thorp (Electronic Media Instructor and Designer, blprnt.com). And thanks to New Media BC for sponsoring the event.
Further reading (courtesy of Gord and panel members):
Balance is Bunk!
http://en.wikipedia.org/wiki/Protestant_work_ethic
http://en.wikipedia.org/wiki/Work-life_balance
http://en.wikipedia.org/wiki/Maslow’s_hierarchy_of_needs
http://en.wikipedia.org/wiki/Rat_Race
From the Canadian Government
Article on Statistics Canada Study
Our “Packed with Experience” project for UJC picks up a Merit in the Best On-line Advertising Single category at the 2006 Lotus Awards.
Geek alert: if you’re not a server geek, there’s nothing to see here… move along now…
Sometimes it helps to read the fine print. When using PHP’s mail() function, some of us need to remember simple things, like not using \r:
Note: If messages are not received, try using a LF (\n) only. Some poor quality Unix mail transfer agents replace LF by CRLF automatically (which leads to doubling CR if CRLF is used). This should be a last resort, as it does not comply with RFC 2822.
http://www.deviantart.com/deviation/40255643/
Lovely toy… I just wasted an hour and I don’t want to stop.
Man, some of the best design and advertising stuff I see is coming out of Brazil these days. Eye-candy galore and an apparent “can-do” attitude (some of these studios are too small to making work of this callibre). Case in point:
http://www.seagullsfly.com/ (well, these dudes are quite big, actually)
And, ok, their interactivity is a bit weak (and one-trick-pony-ish), but their style, eye for detail, and execution values are undeniable.
While we’re on the subject of Brazillians, here’s a shoutout to my bud, Mauricio: www.thesoulsurfer.net
North America: November 19, 2006
Japan: December 2, 2006
New Zealand: December 7, 2006

Microsoft’s Developer Network has a great article on the business case for making games as accessible as possible to those with disabilities. Here are some excerpts relevant to some of the work we’re doing (images/photos from Gamasutra reprint of Microsoft 2006 Gamefest presentation):
Accessibility features generally tend to serve one of five types of disabilities:
- Vision - Blindness, inability to distinguish colors, blurred Vision, etc.
- Hearing - Hard-of-hearing, deafness.
- Speech - Speech impairments, language differences.
- Mobility - Wrist, arm, leg, and hand impairments.
- Cognitive - Learning impairments and reasoning challenges, including dyslexia.
In the context of video games, adding accessibility means making a title usable to someone with one of these disabilities.
On why accessiblity is important:
Researchers at the Wheeling Jesuit University recently discovered that playing…games helps distract children and young adults suffering from chronic pain (The Edmonton Journal, Feb 13th 2006). Furthermore, video games have been proven to help children facing surgery more effectively-and with fewer side effects-than tranquilizers (The Associated Press, Dec 19th 2004). Games are even being used for cancer treatment; exercise, vitally important to recovery after chemotherapy, has been encouraged through the use of games such as Dance Dance Revolution(c) when children refuse to participate in other forms of physical activity.
…allowing people with impairments (especially children) to participate in activities that most individuals enjoy and take for granted can help reduce emotional pain and the feeling of being an outsider.
And some less-altruistic reasons:
Accessibility features can increase sales by encouraging people with disabilities to buy an accessible title… the positive P.R. from the media as well as accessibility advocacy groups provides free advertising.
Visual impairments
8.7% of the male population is affected by some level of color blindness…Another 1.2% of individuals are affected by more severe forms of visual impairment
Steps and features that can improve the gaming experience for “both gamers with normal vision and gamers with a visual impairment”:
- Test titles on black and white televisions. Note any instances where items, players, objectives, and commands can’t be distinguished and adjust your color palette accordingly.
- Give gamers an option to increase the size of text on their screen. Also provide the capability to change the scrolling rate of text. It is important to remember that that the console experience is 10-foot, not the 2-foot gaming experience many PC developers are used to. Even for gamers with no vision problems, small UI and text can be difficult to read at long distances.
- Provide text-to-speech features that can voice all game text, including game menus that track focus on buttons. Allow the user to control the speed, pitch, and gender of the voice. To help prevent text-to-speech from being drowned out by other game noises, give users the ability to adjust the volume of speech, ambient noise, active game sounds, and music. Also, include the option to play distinct sounds when transitioning through menu items and over buttons.
- Finally, give gamers the option to change brightness and contrast settings in- game. Provide users with the ability to choose their own custom color schemes so that text, background, and HUD colors can be custom configured to suit an individual’s needs.









Auditory Impairments
In the U.S. alone, over 28 million people are affected by some sort of hearing impairment. While hearing impairments are often associated with age, 17 out of every 1,000 children under the age of 18 are affected with a hearing impairment…
Steps and feattures to “make your game usable and enjoyable for gamers with normal hearing and for gamers who have an auditory impairment”:
- Close caption all dialogs. This includes in-game content and cinematics. Give the gamer the ability to turn these captions on and off.
- When a sound effect delivers vital information, provide a textual or tactile (vibration) mechanism for feedback as well. For example, if normally a bomb in your game makes a faster beeping noise close to its explosion, provide a visual indicator (such as a time bar) that also allows the gamer to know how much time is left before the explosion.
- If your game supports online play, give gamers the option to send text messages as well as use their voice to deliver information amongst team members and other online players. A headset is not useful to an individual who can’t hear and, more and more, players are looking to play with other individuals with whom they can communicate and strategize online.

Mobility Impairments
Imagine that you are a gamer:
With no mobility impairment: The game controller has so many buttons, you (as a casual gamer) are intimidated and you don’t want to learn how to use it.
With a temporary mobility impairment: You have a broken thumb so you can’t use the thumbstick on your controller. You have a broken leg so you can’t use the dance pad for a dancing title.
With a permanent and severe mobility impairment: You have lost an arm so you cannot use a two handed controller. You have Parkinson’s disease, your hands shake, and that makes you accidentally trigger buttons on the controller. You are paralyzed from the neck down so you cannot use a standard game controller at all.
…some easy things you can keep in mind when developing your games.
- Minimize button use and think more about menu interfaces for commands. This is particularly useful for individuals who may be missing digits or a hand. It is also useful for paralyzed individuals who use custom controllers.
- Allow gamers to customize their controller configuration and button/thumbstick sensitivity. This will allow individuals who have fine motor skills problems customize the controller to minimize the impact their disability has on game play. It also allows for better support of custom controllers for the disabled.
- If your game utilizes a specific type of peripheral (dance pad, light gun, etc.), allow other controllers to perform the same functions. For instance, a game such as Dance Dance Revolution(c) allows even wheelchair-restricted individuals to play along with their friends through the use of a regular hand- held controller.

At this point, you might be thinking that you couldn’t possibly accommodate all of these gamers in all of these scenarios. And even if you were to implement every suggestion in this paper, you couldn’t ensure that a title would be completely accessible to everyone. But by following these accessibility guidelines, you can make your title much more appealing to the accessibility community. And that can only increase sales.
To make a title more accessible, developers and publishers need to find people with various types of disabilities to usability test their games. This approach provides first-hand information about whether or not a game is accessible for a certain audience. As an added benefit, having diverse development and testing resources can offer additional insights that can improve game play for all gamers. Most importantly, engage the accessibility community and get to know these potential customers. Hold a game bash for your title at a local deaf service center, children’s hospital, or veteran’s center. Encourage developers and testers to volunteer with local organizations that work with the disabled, to take a sign language class, or to sign up for accessibility-related newsletters to keep up with the community. Solicit feedback on previous titles from disabled-gamers at local schools and colleges.


Looks like there’s no end in sight for the kids (and adults) who can’t get enough Virtual Pet-style action. And they obviously don’t care how crappy the game looks, either.
From this Ubisoft press release:
Dogz and Catz series have already won over a huge audience, are currently among the top 10 games on Game Boy Advance. Players create and control a cute furry pet that they choose from a selection of many different breeds. Players can take their pets everywhere within the virtual environment, starting inside the house and walking around the neighborhood to visit friends… We’re building upon the success of our existing Dogz and Catz franchises and introducing new animals that consumers are sure to adore.
Wow, adopt and raise a puppy/cat of your very own? This is the perfect solution for those of us with kids living in a cramped, urban apartment. And no smell!
Then again… call me inhumane… but if anything needs to be parachuted out a window, thrown down the laundry chute, dressed up in doll clothes and ribbons, or mounted like horse and ridden around under the crushing weight of our toddler, I’d rather have it be fluffy the cat and not our $150 Nintendo DS Lite.
Head over to the Comic Sans-tastic microsite: http://petz.ubi.com/
Desktop programs are a thing of the past, replaced by free, simple, Web-based apps that do everything from spreadsheets to e-mail–and more!
That’s the hype, anyway. But is it actually true?

These dudes from Zurich make bags and such from recycled truck tarpaulins and car seat-belts: wicked!! I’m down with the F97 Willy and lovin the color selection, “according to Pan-European truck tarp fashions“.
Check out the materials.
Flash -> JavaScript and JavaScript -> Flash communication is whole lot more rockin’ in Flash 8+ than previous versions. No more need for clumsy FSCommand and that crew. Now you can call functions directly! Geekly sweetness.
Learn all about it here:
Adobe - Developer Center : Using the External API for Flash–JavaScript Communication
and another take here:
http://www.communitymx.com/content/article.cfm?cid=0922A
Note: if you’re having problems getting the communication happening on your local machine(JavaScript errors in your browser, etc.), you may need to set your Flash parameter ‘allowScriptAccess’ to ‘always’ instead of the default ’sameDomain’.
HP is running a promotional campaign about it’s 100 millionth HP LaserJet printer shipped since 1984. Seriously, given the built-in obsolescence that seems to be an unspoken “feature” of most consumer printers, I question whether this is something to be proud of, or even mention.
What do 100 million printers mean? Read on.
Let’s do some non-scientific guestimation here on the impact of 100 million printers over the last 22 years.
An informal survey tells me that most people I know (who buy printers, obviously) have had to replace their printer (HP, or otherwise) about 6 times since 1984. If we get conservative (and give HP the benefit of the doubt, recognizing their hardware’s good anecdotal track record) and assume that maybe 2 out of 5 HP printers purchased since that year have since been discarded, then that’s 40 million HP LaserJet printers in the garbage.
Looking at the HP announcement, we see that 1984 printers weigh 71 lbs. and 2006 printers weigh 43.8 lbs. For this 22 year timespan, let’s assume, then, that’s about 57 lbs. per printer. That’s 2.28 billion pounds of plastic and metal (if my math’s correct? Lemme know).
And that translates into 47,174 metric tonnes per year on average in landfills (note that’s just HP LaserJet printers, not any of their other product lines, nor their competitors, like Epson or Lexmark).
The Empire State Building weighs 330,000 metric tonnes. So, in our rough guestimation, we threw away about three Empire State Building’s worth of HP LaserJet printers in the past 22 years.
Sure, that’s just a drop in the ocean compared to the 132 million tons of solid waste trucked away to landfills every year in the United States alone. But still. We can design ways to avoid this. We can. But we need to get our priorities straight.
The time is coming when it will not be “cool” to be a reckless consumer. In fact, the trend toward eco-friendly consumption has been in the works for a long time. And that’s probably the key to making true change — the market goes where consumers go (it can be said otherwise, but I’ve yet to see it on a grand scale). So maybe the trick is to use our slickest marketing tools and manipulations into making obsolescence unfashionable. Is it possible? I think so.
But the pathetic reality is that, for now, and despite my complaining and holier-than-thou grand-standing here, I will probably end up opting for the saving-my-money route. Screw the environment. I need a printer. NOW.
It’s still cooler to make money than to save the world.
Oh well.
Here’s some help for those of you willing to fight the power and reanimate your own defunct printer: http://www.fixyourownprinter.com/
Things are looking good in the new stoo-day-oh. We can finally breathe and move around without bashing our hips, and I think that’ll translate into more efficient designers, smokin’ websites and lots and lots of money.
Shopping for the office is fun and not so fun. I just love running out and spending the boss’s money on stuff that I think will look cool or will make the office swankier. Then I realize that I am the boss. Nuts. Then I go and return useless crap that the boss thinks is too expensive. What a dick.
I spent much of last week at Home Depot. And IKEA. And shopping for furniture at stores with other gay people in the middle of the day. I’m not gay, but somehow I seemed to bump into the same gay couple at every furniture store in South Granville. Trying to make them feel like I wasn’t stalking them, I’d joke around and say stupid things that, upon reflection, probably made me sound like an insane and lonely loser. Which I am also not.
I ended up buying a couch and chair set (I was initially opposed to the pedestrian idea of a “set”, how droll) from Moe’s. Yes — a furniture place called Moe’s. But it’s cool — the dude’s name is really “Moe”, so whatever.
At the start of the move we were all stoked, which is probably why things got done faster. We were out of the old place and into the new literally within a few hours. But by the end of week number one of “moving mode” — between client work intrusions (what? we still have to work??), shopping numbness, and brittle plaster walls that don’t hold up pictures very well – much momentum was lost. In the end, it took one day of me taking a hard-core “I’m not leaving until I’m frickin’ done” attitude to rock out clear the decks. I rocked out with the organization, man. In anticipation of the new couch set, actually. We had to make room.
Now, there’s still a pile of cardboard rubble in the corner of one room, and I have stacks of docs and papers a mile high to review, but it finally feels like it’s coming together.
We have red lockers.
We have comfortable yet stylish seating.
We have nice track lighting.
We have a coffee table with design-y mags and type books I’ve never had time to open.
There’s still a lot on the 2-frickin-do list (plants, picture frames to mount, rubble removal, sinks to put in, and on), but it’s closer than ever. I’m looking forward to the mod7 “open house” – when we invite all our clients and friends to casually drop by and help us drain our fridge of all the beer that BURNKIT sent us.
Cause it’s probably the one time I’ll get the chance to actually use our new couch set.
Amit’s Game Programming Information
Amit is a hobbyist game programmer. He must see lots of action.
But I digress. Cause I’m actually reading everything on his site and enjoying it.
Oh, man, how deviously fun!!
Encryption is for sissies. If you have a wireless network in your home that your neighbor is mooching off of, this page gives you a few pointers on how to make their web experience more entertaining: Upside-Down-Ternet
I prefer the blurry net rather than any sort of redirecting.
This certainly tempts me to open up our network…
(Thanks, Pete Stevens!)
My neighbours are stealing my wireless internet access. I could encrypt it or alternately I could have fun.
I’m starting here by splitting the network into two parts, the trusted half and the untrusted half. The trusted half has one netblock, the untrusted a different netblock. We use the DHCP server to identify mac addresses to give out the relevant addresses.
ddns-updates off; ddns-update-style interim; authoritative; shared-network local { subnet *.*.*.* netmask 255.255.255.0 { range *.*.*.* *.*.*.*; option routers *.*.*.*; option subnet-mask 255.255.255.0; option domain-name “XXXXX”; option domain-name-servers *.*.*.*; deny unknown-clients; host trusted1 { hardware ethernet *:*:*:*:*:*; fixed-address *.*.*.*; } } subnet 192.168.0.0 netmask 255.255.255.0 { range 192.168.0.2 192.168.0.10; option routers 192.168.0.1; option subnet-mask 255.255.255.0; option domain-name-servers 192.168.0.1; allow unknown-clients; } }
Suddenly everything is kittens! It’s kitten net.
/sbin/iptables -A PREROUTING -s 192.168.0.0/255.255.255.0 -p tcp -j DNAT –to-destination 64.111.96.38
For the uninitiated, this redirects all traffic to kittenwar.
For more fun, we set iptables to forward everything to a transparent squid proxy running on port 80 on the machine.
/sbin/iptables -A PREROUTING -s 192.168.0.0/255.255.255.0 -p tcp -m tcp –dport 80 -j DNAT –to-destination 192.168.0.1
That machine runs squid with a trivial redirector that downloads images, uses mogrify to turn them upside down and serves them out of it’s local webserver.
#!/usr/bin/perl $|=1; $count = 0; $pid = $$; while (<>) { chomp $_; if ($_ =~ /(.*.jpg)/i) { $url = $1; system(”/usr/bin/wget”, “-q”, “-O”,”/space/WebPages/images/$pid-$count.jpg”, “$url”); system(”/usr/bin/mogrify”, “-flip”,”/space/WebPages/images/$pid-$count.jpg”); print “http://127.0.0.1/images/$pid-$count.jpgn”; } elsif ($_ =~ /(.*.gif)/i) { $url = $1; system(”/usr/bin/wget”, “-q”, “-O”,”/space/WebPages/images/$pid-$count.gif”, “$url”); system(”/usr/bin/mogrify”, “-flip”,”/space/WebPages/images/$pid-$count.gif”); print “http://127.0.0.1/images/$pid-$count.gifn”; } else { print “$_n”;; } $count++; }
Then the internet looks like this!
And if you replace flip with -blur 4 you get the blurry-net
Content with Style: Playing Nice with the Other CSS Kids <- This article has some good ideas for developing in CSS across a team. Some great organizational tips, too. Not too sure about the importing of multiple CSS files into a master CSS file, though.
Other gems this article leads to is some interesting thoughts on creating a standard CSS framework (see previous post) and some tactical stuff, like using "tags" to organize your mondo-biggo CSS files:
Wow, I’m becoming quite the XHTML/CSS geek these days, eh?
In this article, the author takes a stab at creating a naming convention for universal web page elements. Ambitious, if not a bit simplistic.
In general, I’m in favour of this sort of thing on a corporate level.
On a related note, I appreciate this guy’s motivation for introducing such conventions:
“…as a businessman I would like to establish conventions which make my development time more efficient and therefore more profitable.”
This is a big challenge for companies like ours, who pride themselves on unique solutions to unique problems. There isn’t a lot of space for process and workflow flexiblity when every project is so vastly different. (”vastly” is a bit of an over-statement, sure — it’s not like we’re making websites in one project and then stuffed bears on the next…)
Regardless, looking at this guy’s suggestions, I already see that it doesn’t apply cleanly to one of the music-based websites we’re working on. His conventions are:
- #container
- Page container (usually a
)
- #branding
- Used for a header or banner to brand the site.
- #branding-logo
- Used for a site logo
- #branding-tagline
- Used for a strapline or tagline to define the site’s purpose
- #nav or #navigation
- Used to contain a navigation device
- #nav-main
- Main or primary navigation
- #nav-section
- Navigation to pages within the current site section
- #nav-external
- Navigation to pages outside the site
- #nav-supplementary or #nav-supp
- A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
- #nav-(whatever)
- A list of links named at a designer’s descretion
- #search
- Related to search interface and search results
- #search-input
- A search form
- #search-output
- Search results which could include a
or other markup including definition lists
- #content
- Used for content rather than for another purpose such as navigation
- #content-main
- The main content area
- #content-news
- News related content
- #content-(whatever)
- Could include any form of content, including #content-related, #content-quote etc.
- #siteinfo
- Used for various site related information
- #siteinfo-legal
- Copyright information etc.
- #siteinfo-credits
- Designer or other credits
E-commerce related
- #content-products
- An overall area containing products
- .products
- Referring to individual products
- .products-prices
- Prices, discounts, special offers etc.
- .products-description
- A summary or longer description of a product
- .products-review
- A customer review
- .products-(whatever)
- Could include any form of product related content
This is great for corporate brochure sites or blogs, but it gets pretty restrictive (and thus useless) for some of the kinds of things we do.
That said, I still can’t underscore enough the importance of establishing consistent conventions on the project level. This is critical and sometimes gets brushed aside in the rush to “get it done”. Which brings me back to my original lament — I wish we could get rolling on the production of projects sooner by using a standard framework of conventions (and not redesigning the wheel on every go)!
This column from PC Magazine is a funny read for us HTML geeks. The author seems to get a few things wrong (or glosses over a few steps in logic), like in his assertion that:
“…CSS’s real benefit was that the layout not only could be changed easily but also could become dynamic: The content is stored in a database and presented as necessary, with instant updates.”
We all know that this really has nothing to do with CSS, but whatever…
If anything, this article underscores the true broken promise of web standards: you still need to pay a design professional oodles of money if you want to do it “right”. CSS for the masses has failed, thus far.
This forum had a post regarding a good cross-browser list style hack that gives one more precise control over custom bullet point graphics. The gist is here:
1. HTML:
2. CSS: (comments added for post)
#newsList ul { /* for positioning and styling preferences */
padding:0;
margin:0;
}
#newsList li a, #newsList li a:visited {
list-style-type:none; /* removes default bullet */
background-image:url(../img/arrow_red.gif);
background-repeat: no-repeat; /* ONE bullet only please */
background-position: 0 .45em; /* .45em from top (vertical) */
padding-left:12px; /* space between bullet and text */
/* styling options below */
line-height:1.5em;
font-weight:bold;
color:#000;
text-decoration:none;
}
Pretty painless and degrades nicely to boot. Noo doot aboot it.
[F9/AS3] Scrolling engine using Flash 9 and ActionScript 3…
Just when I’ve mastered (ha ha) ActionScript 2.0, they release 3.0. Sigh. Did I really think that 2.0 (as great as it is) would be the final step? That there was no further one needed to go? Apparently, the Adobe’s bank account says otherwise.
Read the press release about the Flash 9 Alpha.
And, the alpha “preview” download
Let the fun begin!
Thank you. This page has a less crappy hack for the IE min-height bug:
Yes, it’s still a hack, but it’s sooooo less horrible that some of those “prop DIV” solutions, which are basically a valid CSS/XHTML way to bring back the single-pixel-GIF trick.
Here it is in a nut shell:
.rbox .content {
height:200px;
margin:0px 10px 0px 10px;
overflow:inherit;
}
html>body .rbox .content
{
height: auto;
margin:0px 10px 0px 10px;
min-height:200px;
overflow:inherit;
}
The second style is ignored by IE because of the child selector (>). Of course, once IE 7 is released, this might be fixed. So then it’s backward-compatible…
Why don’t I see it in Internet Explorer?!
The IE/Win Disappearing List-Background Bug
This article brings up an IE bug when it comes to displaying lists. But the fix also seems to work for any element that’s not rendering properly in IE: simply add “position: relative;” to your element’s style.
Now, if only I had known that a year ago, I would saved myself a lot of grief and avoidance of obscure and questionable work arounds!
Oh, List-A-Part, how lovely though art with all thine nice and useful HTML articles. This forms useability checklist should be part of everyone’s world flow (well, mostly):
A List Apart: Articles: Sensible Forms: A Form Usability Checklist
Add this to the “How to make HTML behave more and more like Flash” pile.
Mandarin Design: CSS Opacity and Transparency
The article linked above has some great JavaScript- and non-JavaScript-based approaches to interactive opacity, and handles them cross-browser (well, on the PC, anyway).
All you n00b server lords out there (like me):
Learn how to chown that file!
[user@localhost]$ chown theuser thefilemask
I recently came across a problem related to one of our custom CMS builds. For the browser user upload of images, the PHP application wrote an image file to the webserver with the owner set to ”apache” (I guess that’s because the PHP processes run as instances in the Apache server). So, when I tried to copy the apache-owned images via FTP to my local drive, it would not allow me ’cause I was logged on as the FTP user. That’s a problem if you’re migrating a site from a dev environment to a live environment on another server half way around the world.
So, rather than muck about with permissions, etc., I simply logged into our server via a shell, and changed the owner of all the images in question to the user account I’m using for FTP access. Done and done. FTP all good. Migration all good.
So far.
Flash MP3 Player : This seems like a nice quick solution, with a JavaScript customization API and blog plugins!! Sweet!
Thanks to Darren from OpenRoad for the tip.
Here’s an example of misleading IA/UI: http://www.gamespot.com/misc/top100_pop.html
“Most Popular Games”?? I don’t think so. Try “Most Popular Game Details Pages on Our Site”. Cause today it ranked “Halo 3″ as #4, and I damn well know that the third Master Chief installment ain’t even close to being released!
(Note the tiny “Ranking based on GameSpot traffic” text under the title.)
NPD Funworld : Looks like this is the resource for gaming sales stats and other industry tidbits. If you have the dough to pay for it. And toys. Also interesting are stats on Canadian diet: http://www.npdcanada.com/store.food.html
Gamasutra - Feature - “Paper Burns: Game Design With Agile Methodologies”
This article talks about the ”Agile” development method, as applied to game development. I can see this as quite applicable to interactive design. We kind of work this way already (though on a much, much smaller scale): we rapid prototype, get the client involved early and often, work flexibly, and test throughout.
The one thing this article alludes to but doesn’t answer to my satisifaction is how costs are controlled. Yes, the traditional ”Waterfall” method (akin to an assembly line) may be inefficient and lead to degraded products, but how does one plan and budget for the potentially limitless iterations of Agile? This may not be an issue in game design, but for projects with strictly fixed budgets and deadlines, I can’t see how this is “controlled” effectively.
Perhaps, I’m just not getting the point that this methodology may apply more for large teams developing really large, really complex projects.
Still, it’s nice to see our approach validated, even if not directly.
When it comes to structuring projects and active source code, I try to lean towards simple and semantic. Mostly.
We’re in the middle of upgrading our office IT infrastructure, so I’m taking the opportunity to overhaul our weak, inconsistent, all-too-organic and out-dated organizational system.
No small task.
I think our biggest problem in this area is the challenge of consistency, given the broad nature of our projects, which include Motion Graphics, Web Development, and Print. Our process flow (per project) can change as well. Sometimes we’re implenting existing art direction and sometimes we’re generating concept and IP from scratch. How does one quantify all these variables into something consistent and understandable.
And why the fuss, you ask?
Several reasons, including:
Here’s what some people have to say on the matter:
Something else I wrestle with is how tightly to integrate our file structures and organizational schemes with our idealized mod7 ”Process“. My definition of process (in the context of design) is: a system or set of activities that brings about a logical set of solutions to a given need or problem. At my process lectures, I talk about an “activities template”:
Each of these activites employ the classic design subcycle:
The ideal convention will also be self-documenting. You shouldn’t need to go through a project later to “clean it up”; chuck out stray files, rename oddly-named comps (finalfinal2b.psd), write a ton of explanatory docs. A good system, when followed, should eliminate all that.
A good system should also be flexible enough to encourage play and unexpected discovery.
Sounds easy enough.
Another attempt at CSS rounded-corner dialogs using the sliding doors technique
Scott Schiller rocks out with some rad rounded corners. I used this on a client backend (those things are good for trying out stuff you wouldn’t unleash on the world yet) with an impressively high success rate. Simple to replicate, too.
The only bummer is you still need crazy extra HTML elements that muck up your otherwise clean and solid structure.
He mentions a JavaScript-based solution that he developed, which he now poo-poos. I think I’ll try it out anyway.
Projectseven.com - Tutorials: CSS Equal Height Columns
Fancy-dancy animated JavaScript. Uses JavaScript to separate behaviour from presentation (CSS) and structure (HTML). Nice.
This approach blows less hard than the “faux column” trick, which always reeked of single-pixel-GIF-era code hackery to me.
How to size text using ems | clagnut/blog
This is Richard Rutter’s “font sizing method”. Seems a bit too fudgy for my taste. And lot’s of inheritance issues to contend with. Yuck.
design in-flight: Soup to Nuts: Making a CSS-based layout start to finish
This is an excellent and simple article on designing CSS-based layouts. This is very similar to our internal development workflow for this sort of thing, but better documented! ;)
The idea of logical HTML labeling and global-to-local, hierarchical CSS development is critical knowledge.
Reading this won’t solve some of the trickier visual issues we regularly encounter and it’s certainly not the only way to do things, but, as a primer, it rules.
That Bing Gordon is a smart guy.
From: Game Tycoon Interview with Bing Gordon (EA), here are my fave Gordonisms:
Fave business quote of the day:
“Once you find out that the trick to business is making ‘marginal revenue equal marginal cost’, the rest of financial planning is conceptually easy.”
Fave creative quote of the day:
“The trick to finishing any creative project on schedule is to ship whatever is done by a given date. This is what advertising agencies usually do with the commercials they create. Of course, no one remembers that it was on time after it fails miserably.”
Fave strategy quote of the day:
“I think our industry’s greatest challenge is to transition from technology-based to creativity-based experiences.”
(That’s not just hype-jargoning—think about it for sec, and how it applies to creating a mainstream business advantage.)
Fave interesting-way-to-look-at-it quote of the day:
“Our industry’s biggest business challenge is to figure out how to convince consumers to pay ‘fair value’ for the increased quality we are delivering. We need to monetize our ‘excess hours’ of satisfied play. Our best games are unbelievably cheap on a per hour basis, compared to, say $1.00 per hour for paperback books, and $5-10 an hour for movies and DVD’s.”
Finally, an answer to this retarded Flash issue.
Working on some dynamic Flash mapping, I found out how nuts the mapping world is. “Oh yeah, converting from UTM coordinates (those used in many GPS systems) to Lat and Long in Flash, dynamically and in real-time, won’t be a big deal.”
It was a little trickier than anticipated.
But hard work prevailed!
And luck—for this particular project, the conversions were limited to one geographic area of the world (British Columbia, Canada), so the usual fudging that happens in making map calculations work is limited. I managed to work through this, culling from various cartography sites (they do this stuff in high school??), and got my head wrapped around this… in about three hours. So much for a simple formula. Who would have thought that the earth is not a perfect sphere?
Anyways, for any of you that need to do something similar someday, I present these three ActionScript functions to help you along (but please don’t ask me for tech support!).
function UTMtoLatLong (zone, easting, northing) {
// GRS 80 datum
a = 6378137; // equatorial radius
// b = 6356752.3141 // polar radius
// Flattening : 1/298.257222101
long0 = ((UTMzonetoNum(zone)-1)*6)-180+3; // central meridian of zone
k0 = 0.9996; // scale along long0
onef = 298.257223563;
e2 = 2*(1/onef)-Math.pow((1/onef),2);
// This is the eccentricity of the earth's elliptical cross-section.
ex2 = e2/(1-e2);
ny = northing;
nx = easting-500000; // (relative to central meridian; subtract 500,000 from conventional UTM coordinate).
// Calculate the Meridional Arc
M = ny/k0;
// Calculate Footprint Latitude (fp)
mu = M/(a*(1 - e2/4 - 3*Math.pow(e2,2)/64 - 5*Math.pow(e2,3)/256));
e1 = (1-Math.sqrt(1-e2))/(1+Math.sqrt(1-e2));
J1 = (3*e1/2 - 27*Math.pow(e1,3)/32);
J2 = (21*Math.pow(e1,2)/16 - 55*Math.pow(e1,4)/32);
J3 = (151*Math.pow(e1,3)/96);
J4 = (1097*Math.pow(e1,4)/512);
fp = mu + J1*Math.sin(2*mu) + J2*Math.sin(4*mu) + J3*Math.sin(6*mu) + J4*Math.sin(8*mu);
// Calculate Latitude and Longitude
C1 = ex2*Math.pow((Math.cos(fp)),2);
T1 = Math.pow((Math.tan(fp)),2);
R1 = a*(1-e2)/Math.pow((1-e2*Math.pow((Math.sin(fp)),2)),3/2);
N1 = a/Math.pow((1-e2*Math.pow(Math.sin(fp),2)),1/2);
D = nx/(N1*k0);
Q1 = N1*Math.tan(fp)/R1;
Q2 = (Math.pow(D,2)/2);
Q3 = (5 + (3*T1) + (10*C1) - Math.pow((4*C1),2) - 9*ex2)*Math.pow(D,4)/24;
Q4 = (61 + 90*T1 + 298*C1 + 45*Math.pow(T1,2) - 3*Math.pow(C1,2) - 252*ex2)*Math.pow(D,6)/720;
Q5 = D;
Q6 = (1 + 2*T1 + C1)*Math.pow(D,3)/6;
Q7 = (5 - 2*C1 + 28*T1 - 3*Math.pow(C1,2) + 8*ex2 + 24*Math.pow(T1,2))*Math.pow(D,5)/120;
lat = radiansToDegrees(fp - Q1 * (Q2 - Q3 + Q4));
long = long0 + radiansToDegrees((D-(1+2*T1+C1)*(Math.pow(D,3))/6 + (5-2*C1+28*T1-3*Math.pow(C1,2)+8*ex2+24*Math.pow(T1,2))*(Math.pow(D,5))/120)/Math.cos(fp));
return (lat+'|'+long);
};
function UTMzonetoNum (zone:String) {
// note: currently returns a string, not an integer
for (i=0; i
zoneNum = (zone.slice(0,i));
return zoneNum;
break;
}
}
};
function radiansToDegrees (radians:Number) {
degrees = radians/(Math.PI/180);
return (degrees);
};
There you go—enjoy!
http://www.gearlive.com/index.php/news/article/bumptop-alternative-desktop-interface-06210627/
Ok, this is wicked. At first glance it seems like a corny Blackjack interface. But it’s all in the interaction, baby. This is the kind of stuff I was dreaming about in 1998. Looks like computer horsepower is starting to allow realtime manipulation in virtual space.
Of course, the ultimate goal here is to break this out of the virtual world altogether, and do this kind of stuff with smart, networked computer screen paper.
http://www.youtube.com/watch?v=fsE0g-8CDQo&eurl=http%3A%2F%2Fwww%2Eheavy%2Dbackpack%2Ecom%2F
Minority Report pervades everything. Kind of amazing, considering what a dull movie that was. I guess when you assemble a futurist think tank to help with your envisioning, you’re bound to make an impact—despite terrible source material.
http://www5.designersalaries.com/aigaaquent/Home.form
Interesting to compare this against: http://www.sprokit.ca/page.php?id=25
http://www.epresenterplus.com/blog/archives/000030.html
Finally, an answer to this retarded issue!
http://www.onlamp.com/pub/a/php/2003/02/06/php_foundations.html
[user@localhost]$ chown theuser thefilemask
http://www.e-church.com/Blog.asp?EntryID=4
“At this time, we are looking for the following qualities in potential bloggers:
:: Passion for a deeper spiritual life
:: Frequently uses the Internet at work and home
:: Enjoys writing and has journaled
:: Desire to seek spiritual formation in a community of peers and willing to covenant with others
Other qualities that might make you a good canidate for blogging at e-Church include:
:: You are an introvert and usually dislike sharing in the typical small groups
:: You desire to track your spiritual journal in a literary way
:: You enjoy the act of “linking” to other people and memes ”
http://www.sideroad.com/Sales/value_proposition.html
“A value proposition is a clear statement of the tangible results a customer gets from using your products or services. The more specific your value proposition is, the better.”
http://money.cnn.com/2006/05/15/magazines/business2/welllikedsuccess/index.htm
Some lovely anti-teamwork careerism.
Perhaps Steve Spurrier, the former Florida football coach who compiled a 122-27-1 record and won a national championship, puts it best. “If people like you too much,” he says, “it’s probably because they’re beating you.”
A += (B - A)/Constant
http://www.escapistmagazine.com/issue/48/3
Secret sauce, eh?
http://www.bit-tech.net/columns/2006/06/03/web_2_privacy/1.html
Another Wil talks about the darkside of Web 2.0: The ultra-marketing opportunities that these social networks create.
“When the Web 2.0 bubble bursts - when the massive buyouts are done, the millionaires are made and the sites we love today are in the hands of big business - the innovation will grind to a halt, and what’s left will be the endless grinding of the marketeering machine.”
From Jeff Weir: “Looks like it might be handy in seeing rendering differences between browsers.”
http://www.wddg.com/newsietsoonk/
Man, that’s funny.
“Web 2.0.”
I tend to involuntarily wince a little every time I hear that shallow buzzword these days. At the risk of sounding like a dick (or, worse, like a Gore), let me get one thing straight right off the bat: I was into the idea of Web 2.0 waaaay before you were.
Probably. [Read more →]
http://schokofabrik.ath.cx/score/version_e/zero.html
Ok, this sounds quite cool. Cross-disciplinary, quite possibly, if they do it right.
“During the workshop, participants will invent and build games that relate to the structure and location of the Schokofabrik (Dresden,Germany)
With the use of digital and analog tools, participants will create playful links between different mediums: perhaps light and sound, movement and noise etc.. Various instructional workshops covering techniques related to the projects will be taught by specialists and technicians. In addition, lectures will illuminate the theme and it’s infinite meanings, deepening the theoretical and philosophical possibilities. On the last day, the public is invited to play, discuss the projects, and party.
come and play with us
the workshop takes places in Dresden, Germany
from July 30th- August 4th
virtual visitors welcome”
By Swiss artist Pipilotti Rist and architect Carlos Martinez — the design of a public “lounge” in the financial district of St. Gallen in northeast Switzerland.
http://www.we-make-money-not-art.com/
Man, this is a great culture website. Just one question — why doens’t this wierd shit ever happen in my city?
Ok, maybe it does, but I just don’t get out enough.
For $195 US you can buy a virtual island in Second Life and get started with building, buying and selling.
With REAL money.
The map on the home page is an interesting satellite-view starting point. Well, and the free membership. I signed-up today to check it out. We’ll see where that leads.
http://news.bbc.co.uk/2/hi/in_pictures/5017026.stm
Lovely photos by the BBC! Wicked design. Those Germans know clean and purposeful design.
I love the central box form as this “machine for travel”, like a factory that creates movement as the organic forms of the rail and galleria-style roof flow out. Or, probably more appropriate, a mall that sells Spielraum und Durchfahrt.
http://www.newyorkmetro.com/realestate/features/2016/17143/
“And New York is—finally—getting greener.”
Learning some lessons from Europe, I think? Everyone should just copy Vancouver (complete with clean ocean, mountains, and nearby nature).
http://www.microsoft.com/windowsxp/mediacenter/default.mspx
Reflections, reflections… it’s all about reflections now…
Heavy-handed (place their logo on my site? Yeah, right), but a good resource on why ’spec work’ hurts.
Thanks to my good friend Eric for this post on his blog, which seemed to have started the whole NO!SPEC movement…!
http://www.aneventapart.com/news/2006/04/nyc_teaser.php
New York City July 2006
http://www.metanexus.net/metanexus_online/index.asp
Interesting-looking info on the dialogue between science and religion. Must check this out in more detail sometime…
http://news.tmcnet.com/news/2006/05/25/1659947.htm
No way! It’s finally happening! Cooool!
http://slayeroffice.com/code/scroll_menu/
Scrolly and expandy HTML/CSS/JS…
http://www.sonystyle.com.mx/lounge/
Ohmigod, the interface and motion graphics are suh-weet!!!!
Wow, this frickin rocks. Now THAT’s “experiential”!
http://www.ovalpartnership.com/main.php?lang=eng
Nice architecture-related website. HLA-like.
http://uk.samsungmobile.com/mobile_phone/experience/index.htm
Oh, man the art direction and Flash on this site is SHIT-hot, yo. Delushious Jackson, baby.
Beautifully usable Flash interface, always full of the latest, greatest, hippest design trends and studios…
This sounds so 1999 dot-bomb, but I think it can make sense, given the right goals, market, and circumstances.
The big idea I like is this: “Owners who are building businesses to sell realize that the companies themselves are the ultimate products, not the products, services or technology they sell.”
And then I read shite like this and the eyes go arollin’: “Of course, the fastest way to go global today is via the Internet.”
Well, at least this article is devoid of “synergies” and “paradigms”. So it must be legit. :0
http://www.pueblo.gsa.gov/cic_text/smbuss/bucredit/bucredit.htm
Wow — as a “small business”, I’m grouped in with those other bigtime losers, “Women” and “Minorities”. How very affirmative!
This is a nice primer on getting money from a bank for operational and capital needs, and how to start getting your money-begging ducks in a row. But these are financial ducks, they be green, yo!
John Dvorak offers up a good overview of his perspective on the general lack of spirit, vision and business sense over at Microsoft.
One comment that struck me in particular, if only because it’s a possible reflection of my own knee-jerk attitude, was this one: “Microsoft is too easily distracted by successful companies who are not competitors” (referring to Google).
Other highlights: Vista OS, MSN, XBOX360, pad-based computing.
http://www.huddletogether.com/projects/lightbox2/
Looks like a great ’snap-in’, HTML/CSS/JavaScript-based photo browsing tool. Will need to try it out someday soon…
http://www.thefwa.com/?app=articles&id=42
Oh, deliciously Flashsome.
http://www.schillmania.com/content/projects/javascript-animation-2/demo/
More amazing Flash-like Javascript/HTML….