Sams Teach Yourself Microsoft Expression 4 in 24 Hours

Earlier this summer Microsoft released version 4 of Expression Studio. The new version brough major upgrades to Expression Web and as a result my hugely popular book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours had to be updated. That meant I had to go through every nook and cranny of the new version to find all the new goodies, come up with new examples to show them off and then rewrite whole chapters to reflect these changes. It may come as a surprise, but revising a book like this is almost as much work as writing it from scratch. Which means once v5 comes out I am likely to do a complete rewrite. But that’s a different story.

The new book, scheduled to be released end of October, features updated and extended examples, new features, removal of deprecated features. New content worth noting is an extended chapter on the new and improved Expression Web SuperPreview which now includes full support for IE6, 7, 8 (compatibility mode) and 8 as well as a new feature called Remote Browser Testing that allows for testing on external browsers like Safari for Mac and an entire chapter on the new Search Engine Optimization (SEO) Checker tool.

Expression Studio 4 and Expression Web 4 comes as a free upgrade if you already own version 3. That means if you have version 3 you should upgrade right away. And if you alredy have my version 3 book you should get the new version once it comes out. I’m not saying this because I want to sell more books but because there are some new features in there that are important to understand and get the full use out of.

Microsoft Expression Web 4 LiveLessons (Video Training)

In addition to the book I’ve also created a colossal 27 lesson video series clocking in at around 5 hourscalled Microsoft Expression Web 4 LiveLessons (Video Training) for those of you who either don’t want to read a book or who want more hands-on training using Expression Web. The LiveLessons series features an entirely new example project based on the 12×12 Vancouver Photo Marathon website and provides a best-practice model for how to create professional, rock solid and stylish websites using standards-based HTML and CSS. The LiveLessons series is complementary to the Sams book so there are things that are covered in the videos that are not covered in the book and vice versa. Thus even though you’ll get a lot out of each item alone you’ll get a much better and more in-depth understanding by getting them both. Again, this is not a sales pitch – I’m being honest here. The combo really is the better deal.

The video series will be available on DVD early October and I believe it will also be available for download or online viewing on InformIT’s website (tba).

12×12 Vancouver Photo Marathon 2010

Because I don’t already have way too much on my plate I decided to start a huge photography event/contest last year called the 12×12 Vancouver Photo Marathon. In a nutshell it’s a contest where 60 photographers show up on a set date, pick up a 12 exposure 35mm film and then at the top of every hour for 12 hours are given one theme to interpret in one photo. At the end of 12 hours the films are returned, developed, judged and finally put up in a huge exhibit. In the end we end up with 720 photos divided into 60 sequences of 12 consecutive themes. The 2009 event was a massive success with over 300 people showing up for the gallery exhibit and we expect this year’s event to get even bigger.

In the runup to the even (and to kill two birds with one stone) I developed a new site for the marathon and used this site as the demo project for the Expression Web 4 LiveLessons series. As a result the site features some pretty fancy elements like a transparent CSS-only drop-down menu with multiple in-button styles, CSS3 drop-shadows and rounded corners and tons of other fancy schmancy style elements.

The 2010 12×12 Vancouver Photo Marathon takes place on Sunday September 12 from 8am to 8pm in downtown Vancouver with a home base at Blenz Coffee in Yaletown. Tickets for participation (60 in all) are $24 per person and cover all expenses. Tickets go for sale Thursday, August 12 at 8pm and are expected to sell out fast. The following art exhibit will be held at Vancouver Photo Workshops on the 16th of October.

Related posts:

1. In rewrite mode: New version of my book on the way!
2. This is Expression Web 3
3. My book is featured in the Canadian User Experience Blog

New in Expression Web 4

There is a long list of new features in Expression Web 4 but here I’m only going to mention three – because they are the most important ones.

In-app SEO reporting

Like the name suggests Expression Web 4 provides a full SEO report for selected pages or the entire site. Gone are the days of trying to remember all the SEO rules or using 3rd party apps to make sure your site gets listed on Google and Bing. With the click of a button Expression Web 4 will give you a list of everything you forgot to add to your site, like a title tag, proper description, keywords or broken links. But more interestingly it also gives you tips, in the form of warnings, that are not so obvious. During beta testing I ran the SEO reports on some of my existing sites and got feedback like “title is too general” and “description is too general”. This might seem like weird error reporting but it’s actually vitally important if you want your site to be noticed in the search environment: To be noticed your pages need proper titles that tell the visitor what’s on them. And the descriptions have to be specific enough to stand out. There are tons of other such warnings that, if heeded, will not only increase your SEO but will also teach you to write your code in an SEO friendly way the first time around. Which is exactly why I like Expression Web so much – it teaches you through its use to do things the right way.

More SuperPreview

I’ve raved about SuperPreview – the in-app or stand-alone cross-browser compatability tester that was introduced with Expression Web 3 – before. With Expression Web 4 SuperPreview has been enhanced and improved to include more browsers (IE 6, IE 7, IE 8 Compatibility Mode, IE 8 etc), more file inputs and most importantly an online component that lets you test your pages against the Mac version of Safari. It’s the same application with onion skinning, active areas, DOM view and all that great stuff, only improved for broader functionality.

I’ve said it before and I’ll say it again: SuperPreview by itself is reason enough to buy Expression Web.

Publish Current Page

For people like me who tend to work on multiple disjointed pages and do live updates to sites all the time the process of saving a page, going to the publishing panel and then uploading the pages to the external server is extremely cumbersome. The obvious solution to this problem would be to have a button or function that lets you publish the current or all open pages to the server right away. I requested this feature at some point in the pre-beta process of Expression Web 4 and I’m happy to say it’s now included in the app making publishing of your latest and greatest errors updates a one-click process. It may seem like a small and insignifficant upgrade but it really isn’t: After working with an early beta and going back to Expression Web 3 I kept swearing at my computer because I couldn’t just push my files straight to the server but had to go through the publishing panel. That quick one-click or shortcut process is a huge timesaver and a hugely important addition to an already excellent application.

If you have version 3, version 4 is a free upgrade

Yes, that’s right: If you already purchased Expression Web 3 or Expression Studio 3, Expression Studio 4 is a free upgrade. That means you get all the cool new stuff at no cost. Very cool.

More to come

I’m hard at work writing tutorials and other stuff (TBA) about Expression Web 4 so stay tuned to this blog for all the updates and other useful tips!

Further reading

I’ll try to compile a list of all the news on this exciting new app as they get in. If you have a link, dump it in the comments below and I’ll post it:

Microsoft Press Release
Official Microsoft Expression site
Paul Laberge’s post
Tim Heuer
Yahoo! News

Related posts:

1. This is Expression Web 3
2. Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips
3. Expression Web 3 Service Pack 1 now available

In conjunction with the launch of the new site we’ve also launched a Facebook page on which we’ll post updates on our work and keep our fans informed about what’s happening and what we’re working on. The combination of the new site, Design is Philosophy and the Facebook page will also be a great marketing tool for our many customers as we will be featuring each and every one of them on all platforms. And as always you can continue receiving Morten’s rants and raves by following him on Twitter @Mor10.

The site is done, the Facebook page is up, Pink & Yellow Media is open for business!

Related posts:

1. Design is Philosophy featured at Webdesigner Depot
2. CSS Gallery Features
3. Introducing Design is Philosophy

Several months and many hours of nit picking code later and Frugalbits is now finally live to the world. It’s a labour of love for me as well as the crew behind the site and it is a project I am exceedingly proud to have been a part of. So, without further ado, let me walk you through some of the interesting elements of the site:

A Carousel of Stories

Early on in the process the request came in to have a featured story carousel at the top of the front page. Unlike many other such sites the Frugalbits team didn’t want to have multiple text stories on the front page but requested instead one main story, named The Daily Deal, to be featured and then have a carousel with the latest 8 stories displayed at the top. Over the years I’ve worked with many different featured story plugins and carousels and as with pretty much every other plugin I come into contact with I’ve hated them all. For this one I decided I’d go out and find something that could be customized down to the last pixel and that ran independently of the whole WordPress plugin regime. And after a lot of searching I finally found a JavaScript based carousel I could take apart and put together exactly the way I wanted it.

The carousel requested would feature 8 stories (4 and 4) and would have a square story picture, a tagline on a translucent banner and the story title itself. In addition the coloured banner the story title would go on should change depending on the category the story belonged to. This meant I needed to create a loop in which 4 fields were queried for each story: thumbnail, tagline, category and title. It quickly became apparent that apart from the title the rest of the fields had to be customized for each story. To solve this I created 3 custom fields; thumbnail, cat and tagline, and the story editor filled out each of these taglines with the appropriate content. It worked quite well and I was satisfied that this solution would work

But. After a beta launch one of the editors brought up a point I never considered: The first entry of the carousel would always be the same as the story on the front page. And since the front page only had one story this was to put it midly somewhat redundant. Fortunately WordPress has an answer for this type of situation: offset.

<?php query_posts('posts_per_page=8&offset=1'); ?>

An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.

Adding an Author Box

Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<div id="authorbox">  
		<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>  
		<div class="authortext">  
			<h4><?php the_category(' '); ?> is by <?php the_author_posts_link(); ?></h4>  
			<p><?php the_author_description(); ?></p>  
		</div>  <!-- END #authortext -->
	</div>  <!-- END #authorbox -->
<?php } ?>

Custom templates

One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.

Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!

Related posts:

1. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks
2. New WordPress-based Site: AnnyChih.com
3. WordPress as CMS – The Project

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.

Related posts:

1. Twitter Sucks!
2. Twitter force-follow exploit makes us all friendless
3. Create a Twitter Box in Your Sidebar – Part II

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

The 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

Tracy 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.

This 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.

Related posts:

1. Cool Author Box: Free WordPress Plugin
2. PinkAndYellow.com resurfaces with a new design
3. Frugalbits.com – WordPress as a Magazine CMS

The result was ByLandSeaOrAir.com – a WordPress based site with a theme that utilizes all the tips and techniques showcased in the book. Fact is if you go in and lift out all the code and graphics from the new site you’ll see that it matches the final project in the book almost line by line.

So the site serves two purposes: To tell the world of our travels and to show that there really is no limit to what you can do once you understand the principles behind HTML and CSS. Enjoy.

Related posts:

1. New WordPress based site: The Reader’s Companion
2. My book is featured in the Canadian User Experience Blog
3. WordPress as CMS – The Project

UPDATE: WINNERS ANNOUNCED!

The draw for the Expression Web 3 giveaway were performed this evening by @AnnyChih and @dabblerDOTca. Congratulations to @paladyn as the grand prize winner. The two runners up are @tommyflynn and @mxj1009. A big thanks to the 80-some Tweeters who participated in the contest.

To celebrate the release of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours Design Is Philosophy is holding a contest with some excellent prizes:

1st prize:

• A full working copy of Microsoft Expression Web 3
• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours
• A limited edition custom Design Is Philosophy t-shirt as pictured above (your choice of size and colour – black, blue, green and tan available)

2nd and 3rd prize:

• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours

The winners will be selected by random draw of the twitter accounts that have tweeted the above comment and will take place on Wednesday October 7th at which point I will contact the winners. You’ll have 2 days to get your contact info back to me so check back here and keep an eye on your inbox on Wednesday to ensure that you get the prize if you win.

How to enter

Putting your name in to win the big prize is incredibly simple:

1. Follow me on Twitter
2. Tweet the following message:

Win an Expression Web 3 package incl software, Teach Yourself xWeb 3 book + Tshirt from @mor10. Details here: http://bit.ly/VEG6R

If you’re not already on Twitter it is easy to join: Just go to Twitter.com, enter your credentials and start tweeting. Twitter is an excellent social networking tool where you can find and connect with people from all walks of life including other Expression Web users and experts. Chances are if you have a problem, suggestion, question or concern you’ll find someone on Twitter who has an answer or a tip to get you on your way. While you’re there make sure to follow these other Expression Web tweeters: @MSExpression, @expressionweb, @tinaclarke, @patgeary, @XStudio, @cdwise.

Related posts:

1. Read my article in the Microsoft Expression November Newsletter
2. My book is featured in the Canadian User Experience Blog
3. First photo of my new Expression Web 3 book

This is a work in progress. Please submit your comments, questions, suggestions and edits in the comments below and I will apply them as time allows.

For the full version of the Code of Ethics please visit the page dedicated to this topic found here.

Short Version

1. It is your right to voice your opinion. Freedom of Speech, Information, Publication and Expression are basic elements of a democracy. As a Content Creator it is your obligation to use and protect these rights at all times.

2. Be critical of everything, even your self. As a Content Creator you are part of the creation of free knowledge creation and discussion. It is your obligation to shed critical light on what goes on in society as well as how Content Creators, including your self, are presenting these events.

3. Use your power to protect. As a Content Creator you can shine a light on injustices and neglect perpetrated on individuals and groups. Use this power wisely.

4. Tell the truth at all times. With great power comes great responsibility. Words and images are powerful weapons that should be used with the utmost care. When publishing content, present the facts as they are, even if you disagree with them.

5. Present your opinion as your opinion. Your opinion and interpretation of events is important and should be shared but must never be confused with hard facts or data. When voicing your own or someone else’s opinion or interpretation, always state it as such. Never present opinion, interpretation or conjecture as fact.

6. State your allegiances to stay independent. To preserve your own trustworthiness and integrity as a Content Creator, always state any relation, financial, personal, political or otherwise, to the subject or topic you are presenting. Bias, even if it is only perceived as such, immediately discredits your account unless you warn of it first. In simple terms; if you have a political affiliation that colours your judgment, say so; if you are employed by or received money from the subject you are covering, say so; if you were given gifts or preferential treatment in return for a positive review or commentary, say so. By stating these facts of allegiance your opinions gain informational value that would otherwise be lost in suspicion of bias.

7. Reveal your sources unless doing so can harm your sources. Always reveal your sources to ensure transparency unless doing so may put the source in harms way. In ensuring transparency you lend credibility to your own content as well as provide others to further pursue the facts of the matter.

8. Be critical of your sources and seek independent verification. Even if you are ethical and unbiased there is no guarantee your sources are. Before presenting information as fact, always check your source’s credibility and seek independent verification of these facts. If none can be found, state so clearly.

9. Always give credit where credit is due. Give proper attribution when using, quoting or basing your content on the work of others. In other words present quotes as quotes, link to original articles, give photo and illustration credit to the original creator etc.

10. Always preserve the intended meaning of a given statement. When quoting or paraphrasing a statement always ensure that the intended meaning is communicated. Never edit or change a statement in such a way that the intended meaning is changed.

11. Give your opponent a chance to respond. The very foundation of an open discussion is to give either side an opportunity to voice their opinion. Always provide an opportunity for your opponent to present the case of the opposing side.

12. Admit and correct your mistakes immediately. When an inaccuracy or error in your content is discovered by you or someone else, correct it immediately and announce that you have done so to ensure that those who base their opinions and other content creation on the incorrect information have a chance to make corrections as well. It is your duty to uphold the truth and present fact even if that means admitting you were wrong.

Related posts:

1. Social Media: Revolution or the End of Objective Reason?
2. Anny gets shortlisted for the Best Job in the World proving the power of social media
3. Bridging Media – Some thougts

One of the cool things about SuperPreview (the browser testing application that comes packaged with the new Microsoft Expression Web 3) is that it lets you check any site against older browsers. So when I have a couple of minutes to spare I test out well known sites to see if they comply with web standards and if they still support Internet Explorer 6.

Big was my surprise this morning when I ran YouTube in IE6 mode: At the top of the page they’ve now added a big blue box warning visitors using Internet Explorer 6:

We will be phasing out support for your browser soon. Please upgrade to one of these more modern browsers.

The warning is followed with direct links to download Firefox 3.5, Internet Explorer 8 and (of course) Google Chrome. (On a related note, as a designer you should have all these browsers installed as well as Opera and Safari.)

I’m glad to see that big American players are now getting on board with the movement to phase out Internet Explorer 6 which so far has had most of its success in Europe. And with the support of a player as big as YouTube I can see a time in the not-t00-distant future when we can stop caring about IE6 and get on with our lives.

Related posts:

1. Most Popular Browsers (or Why You Need to Code for Internet Explorer 6)
2. StopLivingInThePast.com is Live – Join the Movement to Phase Out IE6 Forever
3. Internet Explorer Alert – Critical Product Vulnerability