Categories
Expression Web My Book News

Breaking the silence: What I’ve been doing over the summer

If you follow this site and my Tweets you will surely have noticed my relative silence over the summer. Well, there is a reason… more precicely 3 reasons. I’ve been colossally busy dealing with three major projects that as of now are either nearing completion or at a point where I can start focusing on other stuff (like long neglected clients) again. So, to stave off the criticism for my falling off the face of the internet here’s a taste of what I’ve been working on:

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.

Categories
Expression Web My Book

In rewrite mode: New version of my book on the way!

Since Amazon.com was kind enough to list my book months before it’s done and I’ve been Tweeting about it for weeks there really is no reason to pretend it’s a secret any more: I am currently in the process of revising my book Sams Teach Yourself Microsoft Expression Web in 24 Hours 3 for the upcoming release of Expression Web 3 which is slated for some time later this summer.

Needless to say writing a book about software that not only is not out yet but is not even finished yet is a bit of a challenge. And like last year (when I wrote the first version of the book) I will probably spend the next couple of months in constant revision mode making new screen grabs, changing tutorials to fit a not-yet-completed user interface and so on. But hey, I’m not complaining: Writing these books means I have to learn and understand every minute detail about the software. And knowing your tools inside out makes for a faster and more productive work routine.

The new book is more than just an update to fit the new user interface: Over the past year I’ve received countless emails from readers with questions and comments about everything from how to save files in Expression Web to how I got a book deal and I’ve taken all these comments, suggestions and criticisms along with my own experiences and thoughts to rewrite many of the chapters and add new and exciting content. And yes, my sentences are just as long in the book!

New features in the book

The new version of the book will, amongst other things, include:

  • a completely new project that the reader will build from the ground up. The new project has a better design, more flexibility and new choices for the designer to make the site her own. The idea behind the new project is that once the site is completed by the end of Hour 24, the reader can simply replace the content from the book with her own content and launch the site.
  • New menu tutorials showcasing vertical and horizontal CSS based menus as well as a CSS based drop-down menu.
  • A CSS layout tutorial explaining how you can use CSS to create multiple different layouts within one site without having to make separate style sheets.
  • An entire chapter on cross-browser testing using SuperPreview and the other accessibility and reporting tools built into Expression Web 3.

I am currently rewriting Hour 18 and, having skipped some chapters, still have about 10 to go (plus a couple of apendixes and a bonus chapter) so if you have comments, questions, concerns or anything else you want to say before I wrap this baby up, please feel free to put it in the comments below or send me an email. The book is written to help you so if you need help, speak up!

That said, go to Amazon.com and buy the book now. That way you know you’ll have it the minute it comes out!

Categories
Expression Web News

Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips

Microsoft Expression Web SuperPreview BetaAbout a year ago I got an email from my friend Anna Ullrich from the Microsoft Expression team. She wanted to know if I’d be interested in providing some feedback on a new, exciting and super secret application they were developing for the next release of Expression Web. Being obsessively curious I couldn’t turn that offer down and a few weeks later Anna and Boris Feldman drove up from Redmond to meet me at the Microsoft office in downtown Vancouver.

What they presented to me – after the signing of numerous Non-Disclosure Agreements – was a pile of sketches of a future browser preview application with the working title “SuperPreview”. The premise was simple: During the authoring of a website the developer or designer can test the current output and get feedback in the form of warnings, graphic overlays and onion skinning showing how the page will appear and change depending on what browser is being used.

Now browser previews is not a new idea by any means – there are tons of free and paid online services that do the job and most if not all web design applications offer multi-browser previews – but all the existing services operate on a browser-by-browser basis. What was novel about SuperPreview was the idea of viewing all the browser outputs simultaneously and on top of each other so you can really see what the difference is.

As a designer/developer cross browser testing is a daily routine that often leads to my computer getting some multi-lingual verbal abuse. Because even with perfect, standards based and properly validating code there is no guarantee the site you design will look the same across all browsers and all platforms. What makes cross-browser testing truly tedious is that for every page you have to open multiple browsers and look a them individually. And if you want to find minute positional shifts or other differences you often have to flip back and forth between browsers or use screen grabs or worse (I sometimes use whiteboard marker on my screen!). Any application that simplifies this process would be a huge help.

So for two hours Anna and Boris listened to my rambling feedback and lofty suggestions and at the end we parted ways, they with a pile of notes, me with a deep and profound desire to build a time machine so I wouldn’t have to wait for the damn thing to be developed.

And today, finally, the wait is over. In conjunction with the MIX09 conference in Las Vegas Microsoft Expression Web SuperPreview is now available for download in public beta.

Categories
Tutorials Video Tutorials WordPress as CMS WordPress Themes

Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation


Finally, after a full week of catching up, here is the video tutorial version of my presentation at WordCamp Whistler 09 for those who were there and those who couldn’t come. The video is also available on WordPress.tv if you’d rather watch it there. I recorded the video over the weekend and it contains the entire presentation including all my fancy slides as well as the code examples and demos. The only thing you won’t see is me waving my hands around and messing up the code like I did at the actual event ;o)

Code Snippets

The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:

Custom Page Templates in 5 lines of code

This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.

 

Custom Fields in one line of code

This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.

 ID, '$key', true); ?> 

Custom Field that parses PHP code

This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.

 
ID, 'centerBox', true); ?> 
'.$boxContent); ?> 

Applications Used in the Presentation

After the presentation several people came up to me and asked what applications I used, so here is a short list:

BitNami WordPress Stack

The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.

Web Developer Add-On for FireFox

FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.

Microsoft Expression Web 2

My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.

Categories
Expression Web Microsoft Expression News

Get Microsoft Expression Products 50% off for the Holidays!

Just before the Holidays this dropped into my inbox. It’s a great deal made even better by the fact that the Microsoft Expression line is already competitively priced. Add to that the great review Expression Web 2 got form PCMag.com and you have the perfect last-minute or belated gift for yourself or the web designer / developer in your life:

For a limited time (exact timeframe is TBD), there is a 50% off discount on Microsoft Expression Studio, Expression Blend and Expression Web through the new Microsoft Online Store. *This is US Only*

http://store.microsoft.com/microsoft/design-developer/category/6
http://store.microsoft.com/microsoft/design/category/601

Categories
CSS Expression Web News

Pure CSS Drop-Down Menu tutorial – a slight omission

I just got a comment from a reader of my recent Expression Newsletter article The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web. He was having trouble getting the grey boxes to “fill out” properly which left the menu looking weird.

A quick review of his CSS told me the problem was he didn’t have the display property set to block. A slight omission for sure but I was more focused on where it originated. A quick read of the paragraph in the article showed me that somewhere in the editing (probably during my rigorous clean-up) this small but important piece of code was ommitted. Which means if people follow the tutorial step by step they’ll run into the same problem.

I’ve already informed the newsletter team of the issue and hopefully they’ll fix it presently. In the meantime, if you’ve run into this problem and you found your way to this blog, here is the full paragraph and the resulting code:

5th paragraph under the heading “Style the links”:

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to “fill out” the area with the background colour, go to the Layout category and set display to block.

The resulting code should look like this:

ul li a {
	background-color: #808080;
	color: #FFFFFF;
	width: 142px;
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding-left: 8px;
}

You can find a full working version of the menu here and it’s CSS here for reference.

Categories
Expression Web

Expression Web 2 Beta Bug Report

I’ve been working with Expression Web 2 Beta for two weeks now and I’ve found it to be a vast improvement from the first release. I’ll get back to that in a later post but right now I want to share with you some interesting and annoying bugs that have gotten in the way of my work.

File tree updates and image file recognition

I don’t know why, but it seems Expression Web works with some form of paging file or log that keeps track of the files in your site. That’s all fine and dandy except it doesn’t correspond with the folder you are working in. Let me explain: When I design sites I regularly ad new folders and files outside of the program by simply copying and pasting them in explorer view. Unfortunately these changes are not reflected in Expression Web unless you hit F5 or click “Refresh”. And even then, whether the tree gets updated or not seems rather random. Especially if it’s a sub-folder you currently have exploded in the tree view. Every time I ad a new file or folder within a sub folder of the site, I have to unexplode the tree to see the update. And that’s a couple of extra mouse clicks I could do without.

But that’s just the half of it. For some reason the program has serious trouble recognizing simple image files. This problem is heavily debated in the Expression Web forum and I’ve encountered it several times. Basically if you ad an image file into an existing folder outside of Expression Web, it’s hit and miss whether that file will actually be recognized by the program. Chances are all you get is a little red X instead of the image. The only way to remedy this issue is to go to File -> Import Image and import it into the program. This seems highly unneccessary as these are standard issue files (jpg, png, gif etc) that don’t require special rendering of any sort. And it gets really annoying when you are making minute changes to an image file to make it fit your layout because every time you overwrite your old file, you have to re-import it to see that update.

To be fair, I’m not sure this last issue is a real bug or if it’s an intended feature from the Dev team. Ideally I’d like to see both of the above issues resolved so that the updating/importing of new files are done automatically. If not, my secondary option would be that both full file-tree updates and image importing is included in the F5 Update function.

The PHP destroyer

Expression Web 2 Beta does have extensive support for PHP, but it’s not quite there yet. I’ve been designing some new WordPress themes with the software and I’ve come across something really weird: On the second upload of the same file, the PHP is garbled (at least parts of it). Here’s exactly what happens:

I have a file called header.php. Right at the top of the <head> there is this line of code:

<title><?php bloginfo(‘name’); if ( is_404() ) : _e(‘ » ‘, ‘box’); _e(‘Not Found’, ‘box’); elseif ( is_home() ) : _e(‘ » ‘, ‘box’); bloginfo(‘description’); else : wp_title(); endif; ?></title>

After editing and saving the php file, I uploaded it to the server and ran a test. Everything was fine but there were some minor issues further down in the file that needed tweaking. I made the necessary changes, saved and re-uploaded the file. This time, once it reached the server, the line above read like this:

<title>&lt;?php bloginfo(&#39;name&#39;); if ( is_404() ) : _e(&#39; » &#39;, &#39;sandbox&#39;); _e(&#39;Not Found&#39;, &#39;sandbox&#39;); elseif ( is_home() ) : _e(&#39; » &#39;, &#39;sandbox&#39;); bloginfo(&#39;description&#39;); else : wp_title(); endif; ?&gt;</title>

It’s pretty evident what happened here but why it happened is beyond me and I think it’s pretty clear why I find this “mildly” frustrating. It does look a lot like the old PHP problem EW had, but what’s new is that it only appears to effect small parts of the file rather than the whole. There is plenty of PHP code further down in the same file that remains unaffected even though the <title> tag is completely garbled. Ghost in the Shell anyone?

Categories
Expression Design

Expression Design 2 Beta – HUGE Improvements

I’ve had a chance to play around with Expression Studio 2 Beta for about a week now and I can tell you there are some huge improvements in the new releases. Today I’m going to limit my scope to Expression Design 2 Beta. It’s only fair considering how harshly I criticized the first release of this program.

I have yet to experiment with the XAML part of this program so these observations are purely based on my experiences with Design 2 as a design program.

Pixel friendly

If you read my other posts on Design you’ll know that the first iteration of the program operated on a pixel-free basis meaning that it allowed you to export bizarre image sizes like 19.325 px and so on. Although this wasn’t a problem if you were designing vector graphics for vector applications, it was a huge pain if you were desiging for export to bitmaps. Well, those days are gone my friend. Design 2 not only works in pixels if you want it to, but it snaps to pixels as well so you avoid exporting white space.

Clean bitmaps

Another big issue I had with Design 1 was the horrendous quality of the bitmap exports from the program. When I first blogged about it, the Expression Design dev team actually contacted me directly because they couldn’t believe their own eyes. But sure enough, the program was mangling bitmaps to such a degree that they were pretty much useless. Well, once again the dev team listened and the new bitmap exports are crystal clear. I’ll post a new set of exports when I find the time but I can tell you right now that they are on par if not better than PhotoShop.

Expression Design 2 Beta - Effects outside the artboardEffects outside the artboard

One weird thing about Design v1 was that the applied effects didn’t function outside the artboard. I guess it makes sense in some ways but for an Illustrator guy like myself it was just damn weird. And it did occasionally lead to problems. In Design 2, the effects are no longer artboard-bound which means you can create elements with effects, store them off the artboard and still see what you’ve done to them without having to drag them back in. You can also make crop areas outside of the artboard and export these elements to bitmap, XAML or whatever you want.

Expression Design 2 Beta - Whole Document exportExpression Design 2 Beta - Selected object exportNew exports

Whereas before you had to tur off the layers you didn’t want to export, you now have several export options in the export window. First off you can export everything visual on the artboard like you could before. The second option is Export Selected which lets you only export the currently selected element on the artboard on a transparent background. The third option is Export Slices which lets you export a series of slices in one click. Simple improvements that save a lot of time.

Expression Design 2 Beta - Sub-layer controlSub-layer control

Coming from PhotoShop and Illustrator I found it incredibly annoying that you had no visibility and locking control on the sub-layers in Design. This has been fixed and you can now toggle visibility and lock on all sub layers independently. Again a sublte improvement that makes a world of difference.

So far the Design 2 experience has been a joyous one for me. I have yet to encounter any bugs and the program is more functional than the original. There are still things it can’t do but the inclusion of proper layered PSD importing makes these shortcomings less of an annoyance. I am currently desigining a new website using only Design 2 Beta and once it’s up and running I’ll give everyone a full run through of the experience.

For now I highly recommend getting the upgrade.