Oct 22
By Land, Sea or Air – A travel blog based on the MyKipple project
We’ve been talking about taking a road trip through the USA for a long time, so when my TV job ended in October we decided now was the time. And in true blogger fashion, a road trip required a dedicated blog just for that and nothing else. This also presented an opportunity for me to show people how far you can push the MyKipple.com design I created for my new book Sams Teach Yourself Micrsoft Expression Web 3 in 24 Hours.
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.
Sep 28
First photo of my new Expression Web 3 book
FedEx just dropped off a hardcopy version of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours along with what’s called an “F&G” (Folded and Gathered) copy for corrections in prep for the first reprint. That means you can go get your hands on this hot-off-the-presses volume right now!
Aug 24
HTML Basics: Hyperlink Syntax – Absolute, Relative and Root-relative
My new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours is nearing completion (just finished final review of the first 10 chapters last night). The book is a revision of the original for the new version of Expression Web and in the rewriting process I also added some new content to help the readers better understand the sometimes confusing and mysterious world of web code. These additions were mostly brought forth by questions and comments from readers as is the case with the excerpt below about hyperlink syntax.
I chose this excerpt because it is relevant not only to people who use Expression Web 3 but to anyone who does anything on the web. When I started out in this field I was often confused about why there were three different types of hyperlinks and how and when to use them. Well, here is a straight forward explanation with examples:
Absolute, Relative and Root-relative Hyperlinks – an explanation
As you are creating hyperlinks in Expression Web 3, you will notice that the syntax of the link address in the Code view changes depending on what you link to. There are actually three different ways of writing a hyperlink address, all of which are used for different purposes:
Absolute Hyperlinks
Absolute hyperlinks are complete addresses that contain all the elements of a URL. They always start with some version of http:// followed by the domain name (for example, www.designisphilosophy.com) and optionally a page/folder. Absolute hyperlinks are used when linking to pages outside of the current site that have a different domain name.
Relative Hyperlinks
Relative hyperlinks are addresses that are relative to the current domain or location. They only contain the name of the target page prefixed with any necessary folder moves (for example, default.html). The browser sees that this is a relative hyperlink and adds the domain and folder location of the current page to the beginning of the link to complete it. If you use relative hyperlinks and you want to navigate from a page stored in one folder to a page stored in a different folder you add the folder prefixes to the hyperlink. For instance, a relative link from a page in Folder 1 to a page in Folder 2 would be ../Folder 2/page.html, where the ../ tells the browser you want to go out of the current folder and into a new one. When you create hyperlinks between pages in Expression Web 3, they are always inserted as relative links so that the application can easily update them if you choose to move files around. However, if you move the files around on your computer outside of the Expression Web program, the hyperlinks break.
Root-relative Hyperlinks
Root-relative hyperlinks are a subset of relative hyperlinks in which all the links are assumed to start from the root folder (domain name) of the site. They differ from the relative hyperlinks in that the address is prefixed by a forward slash (for example, /default.html). The browser applies only the domain to the beginning of this link. Root-relative hyperlinks are used in place of relative ones in large sites in which there is a chance the files will be moved around without using an application such as Expression Web 3 to update them. Because they refer to the root of the site rather than the current location of the page they are placed in, they work regardless of where the file is placed as long as they remain under the right domain.
Jul 10
This is Expression Web 3
Expression Web 3 is now available for trial download directly from Microsoft. Click here to join in on the fun!
It’s no secret that I’ve been playing around with various pre-beta and beta versions of version three of Microsoft Expression Web for the last few months, all in preparation for the release of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours which is available for pre-order from Amazon.com right now (even though it’s not finished yet!) So for all this time I’ve had to keep my mouth shut about my new toy and what it can do. Well, no more. I just got the all clear from the development team to talk about the application publicly and share some screenshots of what you can expect when it goes public in the next couple of months.
So, without further ado, here is a quick rundown of the new features, the new appearance and my innitial thoughts on the new member of the Expression Web family.
New Flat-tastic User Interface
The first thing you’ll notice (apart from the new logo in the splash page of course) when opening Expression Web 3 is the new UI skin. The application looks very different from its two prior iterations in that the team has moved away from the classic fake 3D/embossed look to a 2D/3D inspired look with flat surfaces and drop-shadows. The interface is also a lot darker than the prior ones with a dark gray being the predominant colour. The new look makes me think of new media applications like TweetDeck and DestroyTwitter and there is little doubt in my mind that much of the inspiration was taken from what I want to refer to as the post-web2.0 look.
As you can see in the graphic at the top of this article the new look is very clean and sharp and makes icons, toolbars and panels pop out. This dark flat-tastic look has already been used in Expression Design and Expression Blend and I think it is a welcome change that not only links Expression Web to it’s application siblings. It also visually separates the new application from those of the past and signals a new beginning of sorts. Not to mention that to me at least it is much easier on the eye (I tend to do a lot of design work in the dark).
AutoHide Panels
One of the things that really irks me with design applications in general is all these toolbars and task panes that take up valuable screen space. To curb my frustrations I prefer to work on a dual-monitor setup where I can stash all the tools and task panes on one monitor and leave the application on the other. But this doesn’t work when I’m on my laptop (which is where I’m at most of the time these days). And in Expression Web 1 and 2 even with a widescreen monitor the task panes ate up a lot of real estate. As a result I kept turning the task panes on and off all the time – a process that was a real time waster. In response to complaints and suggestions to do something about the task panes, the dev team introduced a simple AutoHide feature that lets you collapse the panels (they’re not called “task panes” anymore) to the sides from where you can open them by hovering over their names. In practical terms that means you can leave all your favourite panels on the workspace without having them take up tons of room in the process.
The AutoHide feature is easily toggled on and off with a pin logo (seen in the upper right-hand corner of the grab to the right). When the pin is lying sideways as in the grab, the panel is pinned to the wall (AutoHide on). When it’s in the upright position, the panel is a permanent part of the workspace. It’s a simple feature but it makes a world of difference, especially because you can pin individual and rarely used panels to the sides for easy access if you were to need them.
New and improved publishing options
It’s no secret that the publishing options, and especially the FTP publishing option, in Expression Web 1 and 2 were less than stellar. It was so bad in fact that I urged the readers of my book to not use them. Well, without breaking any deals with my publisher I can tell you that my recommendation in the new book is quite different. Not only has the troll that was messing with the FTP been slaughtered but two all new publishing methods have been added to the list providing more secure transfers and options. The list of publishing options now features SFTP (Secure Shell File Transfer Protocol), FTPS/SSL (File Transfer Protocol over Secure Socket Layer) as well as the original FTP, FrontPage Server Extensions, WebDAV and File System.
But that’s not all. Expression Web 3’s publishing option has been rebuilt from scratch and features a whole new range of functions including the ability to define multiple publishing locations for one site so you can push your files to a backup storage as well as publish them online, or publish them to multiple servers, or set up a testing server and a main server within the same project. This again is a seeminly minor but actual major improvement that makes life a lot easier for people like myself who do a lot of server testing and cross-publishing.
In-application Browser Previews with Snapshot
In addition to alterations and improvements to the old versions of the application, Expression Web 3 introduces some new features that are going to make your life as a designer/developer a hell of a lot easier. They are connected at the hip but I’d rather deal with them independently. The first one is the Snapshot panel. Like the name suggests, Snapshot takes a real-time browser shot of your current page and displays it in a panel inside your workspace. This means you now have a quick and easy way to see what your recent changes will look like in different browsers, including Internet Explorer 6 and 7 and Firefox, without having to actually run the page in a real browser.
Snapshot’s output is just that – a snapshot – and does not provide functional links and the like. But it does generate JavaScript, CSS, HTML, PHP and whatever else you want to throw at it and gives you a true representation of what your page looks like in the different browsers.Like the other panels you can undock the Snapshot panel and place it somewhere else, for instance on your second monitor.
SuperPreview – Browser Testing Made SuperSimple
I’ve written about SuperPreview before both here on DesignIsPhilosophy.com and in the official Microsoft Expression Newsletter but it can’t be repeated enough: Expression Web SuperPreview could one of the most important innovations in web development of the last several years. SuperPreview is the powerful big brother of Snapshot – a stand-alone application that lets you perform cross-browser testing that lets you compare true output from multiple different browsers with onion skinning and side-by-side preview. To identify incompatibilities, problems and even tiny shifts the application also features simultaneous box highlighting of individual elements and even provides full FireBug-like DOM trees to give you as much info as possible about what’s going on when things go wrong.
I’m not going to go into too much detail here – the application will be better served with a tutorial video that shows how it actually works in real-time – but I will say one thing: Even if I was still a DreamWeaver user, I would buy Expression Web 3 just to get the full version of SuperPreview. And that says a lot cuz’ I’m a cheap guy. With alligator arms.
For more info on Expression Web 3 microsoft just published Expression Web 3: An Overview on the official Microsoft Expression website.
For another take on the new version check out fellow Microsoft MVP Cheryl D. Wise’s blog.
Apr 28
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!
