MIX10 Session and Supporting Documents


Get Microsoft Silverlight



Above is my MIX10 session A Case Study: Rapid WordPress Design and Prototyping with Expression Web 3 in its entirety in Silverlight video format. It can be blown up to full screen and I highly recommend it as there are code examples.

In the session I referenced a bunch of different technologies and applications I use on a day-to-day basis. For those in attendance and those watching on the web here is the exhaustive list of links and tools for you to play around with. I will post a link to the video version of my session when it becomes available approximately 24 hours after the session itself.

The Unholy Quatern

The Unholy Quatern consists of 4 basic elements;

  1. WordPress
  2. Microsoft Expression Web 3
  3. Microsoft Web Platform Installer
  4. Live Mesh

If you are only installing WordPress on your local computer there is no need to get WordPress from the original source – the Web Platform Installer will handle the installation for you. The same applies if you are using a different CMS under the WPI.

NOTE: If you are working in Windows 7 it will be necessary to run Expression Web 3 as Administrator if you want to set up the WPI version of WordPress as a site. Otherwise Expression Web 3 will not have permission to write to the folder and you’ll be banging your head against a wall for hours trying to figure out why it’s not working.

WordPress Code Snippets for Expression Web

I have created a downloadable version of the WordPress code snippets used in the session. They are availalbe – and frequently updated – at the Expression Gallery. The snippets work with any version of Expression Web and are quite literally plug-and-play. The current version of the WordPress Template Tools comes with a special snippet that lets you create new snippets. Snippets in the current version are:

  • Custom Page Template tag
  • Custom Field tag
  • PHP parsing Custom Field
  • Conditional Custom Field
  • Image as Header
  • Get blog/site URL
  • Get current theme URL
  • Get blog/site name
  • Get blog description
  • PHP include

Most of these are plug-and-play and those that are not are fairly easy to understand. They are all 100% standards-based and use current and up-to-date WordPress template tags.

I update the WordPress Template Tools on a random basis whenever I feel there is a new tag that will be useful for other people. If you have an idea for a template tag not currently in the list feel free to contact me with the suggestion.

Post a job. Find one. authenticjobs.com

This you??? Anatomy of a Twitter Phishing Attack

Over the last couple of days I’ve gotten at least 10 Direct Messages from Twitter friends – most of which are pretty well versed in modern web technologies and even one that calls herself a “social media expert”. The messages are all the same, the text “This you???” followed by a shortened link. The link takes you to a web page that looks a lot like the Twitter.com login page but when you log in your password is stored and passed on to evil people with eviler intentions yet to be unveiled.

Targeting (and hooking in) the pros

Twitter phishing attacks are nothing new but this one is a bit different – and all the more disturbing for it: It targets and manages to hook in Twitter power users more than any other exploit before it. This is done by taking advantage of the fact that most heavy Twitter users don’t actually use the regular Twitter.com page but rather a Twitter manager like TweetDeck or HootSuite. And whereas a person just using Twitter.com would immediately know something was up when they were redirected to the login page even though they were already logged in, a TweetDeck or HootSuite user would probably not be logged in and could potentially enter their information in a momentary lapse of reason.

Unknown agenda

Another thing that is disturbing about this particular attack is that unlike most other attacks which immediately start spamming people with badly disguised ads for teeth whitening, weight loss or other affilliate marketing junk, this one – at least for no – is only out to perpetuate itself sending out the same message over and over. This means there is probably some larger plan in progress, and so far we don’t know what that plan is.

Even more disturbing a lot of people use the same password for many things including their social media networks like Twitter, Facebook, YouTube, MySpace and whatever other timewaster fits their fancy. That means if someone gets a hold of their Twitter password they are likely to also have access to their other accounts, not to mention Gmail or Hotmail accounts!

How to aviod being phished (and what to do if you are a victim)

Twitter.com’s help has a comprehensive breakdown of how to reset your password, sever connections and get your account back if you are the victim of a phishing attack or your account has been hacked. If you think your account has been compromised it is paramount that you follow these steps immediately to protect your online identity. That link again is here.

Here are a few simple steps to avoid becoming a victim of a Twitter hijacking:

  • Have a complicated password. If you can’t think of one, here are a few ideas: Do like Mulder from The X-Files and swap out words with numbers. His password was “trustno1″ where the word “one” was exchanged for the number 1. Do like my friend Craig and show your support for a sports team. He’s a big fan of the Vancouver Canucks and hates the Toronto Maple Leafs. His password is “canucks>leafs” i.e. Canucks bigger than Leafs.
  • Change your password regularly. By “regularly” I mean every 6 months or so.
  • If anything unusual happens, change your password immediately.
  • Don’t use the same password for everything. That may sound like a lot of work but I use an algorithm based on the site name that changes the first and last character of my password so it’s not that hard.
  • Don’t give your password away.
  • Check the URL in the address bar before you enter your password. If it doesn’t say Twitter.com but something else, it’s not Twitter.com.

Design Schooled Kids – Pushing WordPress to the edge

dsk1A couple of months ago I got a tweet from Tracy Sullivan of Design Schooled Kids about creating a web site for her line of stationery for kids. It was an interesting project both because of the products themselves – stationery that teaches kids to read and write – and because it posed some unique challenges where design and development was concerned.

Well, actually the design portion was already handled by Tracy herself. The challenge in that regard lay in taking Tracy’s clean and exact designs and making them appear on the web as they did on paper. As for development the main challenge was that although this was to be an online store she wanted it to look nothing like an online store.  So basically the project consisted of taking a new site concept from a paper mock-up to a fully working website. Exactly the kind of stuff I like to do.

Taking WordPress right to the edge

dsk3The result of a lot of hard work is a website that in my view takes WordPress right to the edge of what it is capable of. Every element of the site is custom built from my basic WaveFront theme to create a look, feel and operation that in no way resembles or even hints at WordPress or a regular e-commerce CMS. That said there is no real reason why any site, WordPress blog or otherwise, should look a certain way. A CMS is after all just a HTML generator that spits out whatever you want it to, and once you have the HTML you can use CSS to display it any way you want. The true challenge here was centered around getting the e-commerce portion to look, work and feel less like a boxed e-commerce solution and more like something classy and custom even though it was built on top of the WP eCommerce plugin. So while on the back end this is a fairly standard WordPress installation with pages, a blog (upcoming) and an e-commerce component, on the outside it looks like a custom site with all the bells and whistles built from scratch. Which is exactly what both Tracy and I wanted.

Ultra-clean designs pose unique challenges

dsk2Tracy is a designer of my heart: Obsessively detailed and extremely picky. (To be honest I don’t think you can call yourself a designer if you don’t fall into these categories, but that’s just me.) Her designs looked easy enough, but the true challenge lay in matching her static pages created in InDesign to live dynamic pages on the web. With such a rigid frame to work inside all the regular cross-browser problems like padding- and margin widths, positioning, font sizes etc that we normally choose to ignore or just tweak till they fit within acceptible buffer zones were all of a sudden make-it-or-break-it points that had to be done exactly right. The most notable example was that when each page loaded, whatever page content was in the “content” section of the layout had to line up perfectly with the topmost menu item. Sure, that’s easy enough if all the content is the same, but in this case we were working with four fundamentally different types of pages: Plain text pages for general info (home, about etc), dynamic index pages for each product line consisting of a header image plus a series of thumbnails for each product, single product pages with a larger image off the top with product stats and purchase buttons on the right and info underneath and finally shopping cart pages.

dsk4This meant the site demanded entirely separate style codes for the different elements depending on the type of page (or more specifically page template) was being displayed. And all these styles had to be flexible enough to be applied to the same item in different ways depending on the current template. Normally this would be easy enough to solve by using custom page templates, but in this case we were using the WP eCommerce plugin which generated all the product indexes, single product pages and shopping carts. As a result I had to dissect the eCommerce plugin pretty much line by line to find where all these elements were generated and how to go about repositioning them. What I found was a plugin that although it looks amazing on the outside was actually quite messy behind the curtain. I won’t write any further on this topic here – suffice it to say if you want WP eCommerce to do something that’s not just basic implementation you better prepare yourself for hours of decrypting bizarre code layouts and counter intuitive solutions. More on that in a different post.

In the end I created multiple theme files for the theme itself as well as the WP eCommerce plugin that allowed for micromanaged control of all the different pages. Not an easy task, but more than doable given enough time and some good background music.

Overall I’d say DesignSchooledKids.com has been my most challenging project to date, not because of the design or development elements of the baisc site but because the WP eCommerce plugin falls short in way too many places. In the end I made it all work the way it should but that was only because I spent an enormous ammount of time fixing or all together rewriting the code in the plugin so it would behave properly. It’s a bit of a disappointment really but now that I know how all the pieces fit together I should be able to reproduce it in the future.

Visit Design Schooled Kids and check out both what WordPress can do and what Tracy has to offer.

MIX10 Proposal: I Reject Your Stylesheet and Substitute My Own

I reject your stylesheet and substitute my own t-shirt

Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.

OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.

To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.

Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.

Does feminism have a place in the web design world?

Men With PensLast Monday a groundbreaking essay was published on Copyblogger with the somewhat puzzling title Why James Chartrand Wears Women’s Underpants. In it blogger, writer and owner of the famed design firm MenWithPens James Chartrand outed himself as a woman in a man’s name. This linguistic sex change itself was far from revolutionary. After all cross gender pseudonyms are hardly anything new in the writing world and on the internet with it’s relative anonymity, it is hard if not impossible to know if the person you are presented with is the person behind the screen at the best of times. What made this article so important (and so incindiary) was the reasons for this seemingly insignifficant charade and what it led to: By writing under a man’s name, James discovered that not only was her copy more accepted by her peers but she was paid almost double for the same ammount of work. Which leads to an uncomfortable conclusion: Sexism and gender bias has found new fertile grounds in the otherwise modern and forward thinking web.

A woman’s work is never done

I grew up in Norway, a country where women are constitutionally treated as equals, where stay-at-home moms are often frowned upon and where International Women’s Day on March 8th is celebrated by parades of women carrying huge red flags. And yet even in my home country women are frenquently short changed both in terms of pay, promotions and hirings, not to mention the stil prevalent problem of sexual harrassment and deliberate alienation. True, the situation for women in the work force today is vastely different from the one of women only 20 years ago. But to claim that women are now equal to men, that gender no longer plays a part in the hiring process, project appointments and salary negotiations, makes you the proverbial ostrich sticking its head in the sand. We may be converging on equality somewhere down the road, but we are far from there.

The problem now faced by women in the workplace (and everywhere else for that matter) is that whereas in the past the bias and discrimination was blatant, explicit and counscious (watch just one episode of Mad Men and you’ll get the idea) the sexists of today are for the most part not even aware of what they are doing. Asked up front why a manager chose to send Jack on assignment rather than Jill he may answer “it’s because Jill has a family to take care of” thinking this is a perfectly reasonable explanation. It’s not: it is supressed gender bias. “But it’s true!” you might say. Is it? What if I said that both Jack and Jill are married with two kids. The argument would still be put forward and would still be just as sexist. Our society is rife with inbred assumptions about gender roles such as the established fact that women are responsible for their children. But this is not a fundamental truth, it’s a social invention. Why can’t Jill’s husband take care of her kids while she’s away on business like Jack’s wife is expected to do? This is but one very basic example of how sexism has gone under ground.

We all make assumptions, most of them wrong…

What James experienced while writing under her own name was a version of the hidden sexism I just described, one that is present on the web as well as in real life. Due to perscribed gender roles taught to us by everyone from our peers to our parents to popular culture we have a built in tendency to make assumptions, purely based on gender, about how well people are able to do things. And while women are often thought to be more creatively inclined – more artistic if you will – the skill set necessary to do more technical tasks, be it a car mechanic, a program developer or a person dealing in the ruthless world of commercial blogging, tends to be attributed mostly to men. And for this reason we tend to trust men more than women when it comes to searching out information in these fields. Just think about it: Make a list of all the blogging, web design and technical writers you know and read and you’ll find a major male dominance. And I bet you’ll also find that more often than not the women writers are more focused on design and aesthetics. But this isn’t necessarily their choice: My theory has long been that there are scores of female writers out there who in spite of their skill can’t get a foot through the door because of this gender bias. And with James revelation my assumptions have, at least for one writer, been confirmed. Now I’m left to wonder how many other women in men’s names there are out there.

Feminism and the art of shooting yourself in the foot

In the days following Chartrand’s revelation the debate has been raging on the web. But not over what you think. The most inflammatory debates have been over whether James really is a feminist or if she betrayed her sex by taking on the role of a man. And this latter stance, professed loudly and often obnoxiously with vile accusations of gender abandonment, is the one taken by militant feminists. In fact this type of reasoning is one of the staples of feminism and is, in my opinion, one of the main reasons feminism, and with it equal rights for women, is not gaining ground as rapidly as it should. To put it plainly I believe feminism has become a dogmatic belief system rather than a fight for equal rights. And I think that’s why a lot of women who want to call themselves feminists also hate feminism.

male not equal to femaleWhereas feminists of the past were fighting for the right to be treated as men’s equals, modern feminists have a tendency of veering towards the extreme view that apart for a few minor anatomical differences men and women are exactly the same. “Gender is a societal invention” they say “and the ideal world is a society witout gender”. (To me that just sounds like Maoist China and I seriously would not want to live there). And from this dogmatic and quite bizarre stance follow some logical but irrational conclusions, from which the criticism of James is based:

If men and women by nature are exactly the same and gender is a societal invention (created by men to suppress women), women who operate within the confines of these societal inventions are in fact enforcing them and thereby hindering the progress of women’s rights and equality.

In other words, the only way the ideal equal society feminists want to achieve will ever come into existance is if women start behaving as genderless entities and men realize they are wrong, shed their evil sexist ways and conform to their new roles as equals.

Which is completely rediculous.

This attitude is doomed from the start. Not only does it have a premise that is ludicrous – that there is no qualitative difference between men and women – but the strategy that it derrives is horribly counter productive: Rather than showing men that women are their equals, this strategy portrays women as weird and disconnected angry people with a chip on their shoulder the size of a small planet.

James got it right – and that makes people angry

Let me turn this on its head for one minute and consider the plight of women as a product with men as it’s primary demographic. How do you sell a product? By making the target demographic feel like they need it. And how do you make them feel like they need it? By making them identify with the characters in the commercials and posters – the ideal customer.

Following this simple principle, the best way of marketing gender equality is to make the target demographic, the oppressive man, identify with the product, the oppressed woman and thereby understand his mistakes by seeing himself from the other side of the glass ceiling. But this is a pretty tall order: You can’t start underpaying all men or subject them to systematic demotions to favour female employees. A version of this strategy, affermative action, has been used extensively throughout the world to even the playing field. But although it has been effective in balancing the workforce numbers where gender, ethnicity and other visual minorities are concerned, it has also caused an unintended negative bias that now colours all these groups: Many people not included in these groups now believe that the groups of people that need affermative action to get ahead are in fact inferior by design and therefore not worthy of their jobs.

What James did was, allbeit inadvertantly, approach the issue in a more indirect way wedging herself into the “good old boys club” to prove her worth. I can’t help but think of her as a covert infiltrator trying to bust up an organization of biggots but that would do her a disservice and paint her peers in an unneccesarily bad light. She just did what she had to to get ahead, and in doing so she proved a point in a way few others could: As a woman she was ignored and underpaid, but as soon as people saw her as a man she was treated as one of the best, because she is. In other words gender trumped quality! But rather than just sit on this astounding and disturbing fact she chose to go public with it. And by doing so she forced her male peers as well as her many thousands of readers to come to an uncomfortable conclusion: Gender really does matter. Way more than it should. Because who amongst us can say that the revelation that James wears women’s panties didn’t immediately change our understanding of her as a person as well as her writing?

In one short essay James succeeded where feminists have failed for decades: She made men identify with her and realize that they are undercutting their female counterparts for reasons that have nothing to do with talent or productivity and everything to do with gender bias and downright sexism. It’s a bitter pill to swallow but one that we can no longer leave on the side of our plate. Now the publishers, editors and readers of the world are faced with a some painful questions: How many of the male writers I read every day are actually females writing under male pseudonyms to be taken seriously? And why  does the gender specification provided in a name alone change my understanding and acceptance of a piece of work so entirely? After all to borrow some words from Shakespeare, what’s in a name? A rose by any other name would smell as sweet. Why not so also with the fruits of our creative minds?