Category: Expression Web

Categories
Expression Web News

Just announced: Speaking at Make Web Not War 09 in Vancouver

Make Web Not WarJust announced (though it’s not on the site yet) I’ll be speaking at the Make Web Not War 09 conference in Vancouver on June 2nd. The topic of my session will (not surprisingly) be how to harnes the power of WordPress through the use of Expression Web 2. It’s a 1 hour session and right now I’m working in overdrive to create compelling, provoking and replicatable examples for those attending.

As per usual nothing of my session will be set in stone until a couple of minutes before the session starts (because I’m just that organized) so if you’re attending and you have a request or a suggestion or a question that you’d like me to talk about, drop a line in the comments of this post or send me an email and I’ll take it under consideration.

I was going to bring some of my new and insanely cool limited edition shirts to the event but sadly the printer decided they need two full weeks to do the job so they won’t be ready in time. Instead I might be bringing some other cool nicknacks to remember me by. And who knows, it might be something you actually want!

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.

Continue reading “Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips”
Categories
Events Expression Web

Speaking at Interactive Panel Discussion: The Right Presentation Layer for Your Solution

I’ve been invited to participate in an interactive panel discussion about Microsoft’s many web development and presentation tools called “The Right Presentation Layer for Your Solution”. The discussion takes place online tomorrow (Thursday Feb. 26, 2009) at 11am to noon Pacific time (2pm to 3pm EST). To see, hear and participate in the discussion you have to register by following this link. Below is the press release in its entirety.

Interactive Panel Discussion: The Right Presentation Layer for Your Solution

By the end of this webcast, you will be able to:

  • Use some of the presentation layer tips and tricks provided by the panel
  • Gain some knowledge of what presentation layer technologies Microsoft provides that you can use in your solutions
  • And most importantly, have your questions answered!

The Presentation Layer of an application can be pivotal to the adoption of your solution by users. The right technology for the presentation layer should be the one that makes an emotional connection with the user and helps make the user more productive.

Join us for an interactive panel discussion from some of the foremost experts in user experience, effective presentation layer design and development. This is intended to be a discussion between you and the panel of experts, so come prepared to ask your questions about picking the presentation layer for solution!
This event is focused on Custom Developers, ISVs and Interactive Designers.

This webcast is appropriate for both technical and business decision makers.

W E B C A S T

Thursday February 26, 2009

Time: 2:00PM to 3:00PM EST

Event ID: 1032385445

Register Now

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
CSS Expression Web News Tutorials

Read my article in the Microsoft Expression November Newsletter

A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.

That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.

This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.

If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.

Categories
CSS Expression Web News WordPress as CMS

Introducing Design is Philosophy

After finishing a series of projects long overdue I finally had a couple of days to sit down and redesign my much neglected blog. Over the summer I’ve jotted down ideas and sketches for this blog but I’ve never really had time to get down to work. At the same time I’ve been telling everyone and their dog about how well Expression Web works as a blog design tool and how well WordPress works as a CMS. So I figured it was about time I put everything together to demonstrate that there is reality behind all the talk. And after 3 days of hard work, here is the result: A WordPress blog designed from scratch in Expression Design and Expression Web 2.

Continue reading “Introducing Design is Philosophy”
Categories
Expression Web My Book WordPress as CMS

New WordPress based site: The Reader’s Companion

In conjunction with the release of my new book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours I have created a Reader’s Companion site where the readers can download lesson files, dive deeper into the world of Expression Web through further reading, find relevant links and interact with other readers. The site is a custom WordPress installation with a highly customized theme designed from scratch using Expression Web 2.

In the coming weeks I’ll post a series of articles and tutorials demonstrating how you can customize this amazing CMS (yes, I don’t consider WordPress a mere “blogging platform” any more) to create advanced, attractive and easily manageable sites. For now, let’s just take a look at the highlights:

Valid XHTML and CSS

Valid XHTML 1.0 TransitionalThose of you who have (or will) read my book will know this: I put a lot of importance on the whole issue of valid code (yes yes, I know… this blog has more errors than a Sarah Palin interview but in my defence I haven’t had time to clean it up because I’ve been too busy writing a book and tutorials) and since the site is a bit of a showcase for what I teach in the book it better fit the bill. So even though it is a WordPress site with a lot of customization, it validates 100%.

TIP: Amazon.com links don’t validate!

Not surprisingly the site contains a couple of direct links to the Amazon.com page for the book so people can buy it straight from the site. Unfortunately the crazy Amazon.com links do not validate. To ensure that the site would validate anyway I therefore used a redirect service called TinyURL to create a small (and valid) URL directly to the page. TinyURL even offers the ability to create custom URLs so instead of the long and cumbersome Amazon.com link the book on the left hand side of the page points to http://tinyurl.com/styexpressionweb2.

Fancy Sliding Doors Header Buttons with Invisible Text

The original idea for the site was to provide a place where people could download the lesson files for the book. For this reason the button leading to the lesson files should be large, prominent and working properly across all platforms and browsers including text-only browsers. At the same time I didn’t want standard HTML text to ruin the appearance of the site.

The standard solution to this problem would be to create an image-based button. But I don’t like image-based buttons. Fortunately there is an alternate (and in my view much cleaner and more attractive) solution: A Sliding Doors CSS button with invisible text.

Sliding Doors for Dummies

If you are not familiar with the Sliding Doors principle, here is a short explanation: Sliding Doors refers to the use of one background image containing two or more button states that slide in and out of view depending on user interaction. You can read more about Sliding Doors and how to use them at A List Apart.

The problem with CSS buttons is that they depend on pure HTML text to work. But as always there is a way around it through some clever abuse of the text-indent attribute: By setting the position of the button to absolute and the text-indent to some very high negative number (for example -9999), the browser moves the text so far off to the left of the screen that it will never be visible. And since the text is hidden with CSS, any text-only browser will still display the text where it is supposed to be.

There are two such buttons on the site: The home button on the left and the lesson files button on the right. They both work in exactly the same way.

Current Page Menu Highlighting

If you use the correct classes you can make WordPress highlight the current page menu items through CSS. If you let WordPress handle the main menu (or any menu for that matter) it assigns two types of classes to the items depending on where you are on the site: Each menu item is given a number through the page_item class and the current_ page_item class is also applied to the current page (you can also set this up manually through php if you don’t want WordPress to manage your menus). On the Reader’s Companion site it looks like this:

As a result, to highlight the current page in the menu all you have to do is create a dedicated style class called .current_page_item.

Custom Page Templates

Another great feature of WordPress is the ability to create custom page templates that are assigned to different pages. In the Reader’s Companion site you see this in effect in the difference between the front page and the other pages. The front page template includes a left hand bar that displays the date of each post while the other template fills the entire left hand area with the page body itself.

Creating a custom page template is a fairly simple operation: All you have to do is find the template you wish to base the new one on, make any changes you need and then insert the following block of code at the top of the page:

/*

Template Name: Page with no Sidebar

*/

When the new template php file is uploaded to the relevant theme directory, it automatically shows up in the page write panel under the heading Page Template. From here you can choose your template from a drop-down menu.

Tutorials Coming – Questions Welcome

Like I said earlier I am working on a series of tutorials to demostrate exactly how these different elements come together and how you too can create advanced custom WordPress themes with Expression Web 2. In the meantime take a closer look at the site, read over the CSS and if you have any questions or comments drop me a line in the comments below.

Categories
Expression Web My Book News

My book is finally here!

So I’m sitting in my couch tweaking the new web site I’ve created to supplment my upcoming book when the phone rings. FedEx is downstairs with something for me. When I get down to the lobby the guy is standing there with two huge boxes complaining about how heavy they are. It took me a few seconds to connect the dots but the Pearson Publishing sticker on the side made it all clear: The two boxes contained the 25 complimentary copies of my upcoming book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. I was under the impression that the boxes wouldn’t arrive until after the book had hit shelves but it’s quite obvious now I was wrong.

Above are some nice cheezy photos of me and the book. And since Kenny the Squeeze Toy is heavily featured in the book itself I figured it would be appropriate to show that he is actually real.

So I guess there’s no doubt any more: The book is real and feels nice and solid. And since I have so many I’ll probably give some away so stay tuned!

Categories
Browsers Expression Web My Book Silverlight Tutorials

Previewing Silverlight Applications in Your Browser With Expression Development Server

If you’ve tried placing a Silverlight application in a HTML page in Expression Web 2 (or any other web authoring application for that matter) and previewing it in your browser you know it doesn’t work. Here is a small exerpt from my upcoming book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours that explains how you can use the Expression Development Server to trick your browser into previewing Silverlight applications without having to run them off a server:

To make sure everything is working properly, you should preview the page in your browser. But if you do all you’ll see is an empty white page. This is because Silverlight is a server-side script that must be running on a web server to work properly. In other words technically you need to upload your files to a web server and test them from there. Fortunately there is a way around this problem: Because a big part of Expression Web 2 is the ability to create advanced dynamic websites using Microsoft’s server-side script language ASP.NET, the program comes equipped with a small application called Expression Development Server. This application creates a virtual server on your computer that behaves like a web server and lets you run server-side scripts in pages even though they are only stored on your computer. You will be introduced to the Expression Development Server in more detail in Hours 22, “Beyond the Basics: PHP in Expression Web 2,” and 23, “Beyond the Basics Part 2: Building a Site with ASP.NET.”

The problem at hand is that the Silverlight script will run only on a web server. So to be able to preview the application you need to make Expression Web 2 think that the page you are currently working with is actually an ASP.NET page. That way it will be previewed using Expression Development Server and the Silverlight script will run properly. Doing so is surprisingly simple: Open the HTML file that contains the Silverlight application you want to preview, select File, Save As on the menu bar, and change the file extension to .aspx – the extension for ASP.NET pages that can contain regular HTML code. Now when you open the page it will be previewed in the browser through Expression Development Server and the Silverlight application will run properly.

Clever eh? Now go crack open your piggybank and buy my book!

Categories
Expression Web Tutorials

How Expression Web 2 Creates CSS

Anna Ullrich just published an excellent article called Who’s Editing Your CSS? explaining how Expression Web 2 handles CSS and why you can trust the program to spit out proper non-bloated code.

If you’ve watched my webcast or read any of my articles you should have an idea of this but Anna’s article is far more thorough than anything else I’ve read.

Oh, by the way Anna: Who is editing your CSS? Your page is broken in Opera ;o)