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.

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.

Click here to download the free WaveFront theme from the WordPress Theme Directory.

The WaveFront theme is a free generic WordPress theme designed to replicate the looks and features of the two custom WordPress sites Stop Living in the Past and AnnyChih.com.

WaveFront provides calm yet stylish layouts customized for basic CMS functionality with several custom page templates including a no-sidebar front page (Front Page template) with three bottom boxes. The theme also has a list of hidden features and extra content that can be turned on and off by editing the template files.

For a full rundown of WaveFront’s features and customization options please visit the dedicated theme page here.

Just because you don’t agree doesn’t mean it’s wrong.

The above video, called Social Media Revolution is spreading like wildfire through social media circles and is being used by social media advocates as futher proof that social media is be all and end all of news, marketing and the internet in general. And there is truth, at least statistically, in the message the video brings: Social media technologies, be it blogs, forums, social networks like Facebook or micro-blogging systems like Twitter are changing the way we find, ingest and understand information and the world. It’s not exactly ground breaking news to people who spend their living and working days tethered to the world wide web but it provides a sobering picture of a new and emerging reality in which people turn away from established news and media outlets as their primary source for information and understanding of current events.

I find this profoundly disturbing.

When we were kids my parents spent a lot of time teaching my brothers and I that critical thinking should always lie at the core of any decision. They hammered home the sentiment that just because you don’t agree with something doesn’t mean it’s wrong. And it’s stuck with me through the years. I guess that’s why I’m so alarmed by what I’m seeing in the societal discourse in general and social media in particular. Anyone looking in from the outside will agree that the so-called open discussion and flow of information that permiates through the internet these days has little to do with critical thinking and more to do with opinionated rethoric, deliberate disinformation and outright lies. And this is the new and glourious foundation we are supposed to build our future society on? If so, it’s not one I want to be a part of!

Trading news for opinion

Earlier this year someone told me “In a couple of years mainstream media will be dead and people will get all their news from social media”. I have to say I agree, at least in part. No matter what happens I’m hard pressed to agree that all mainstream media outlets will buckle and disappear any time in the forseable future. But we are already seeing a shift in societal behavior away from established media outlets and toward social media as the chosen go-to news source. What people fail to realize (or choose to ignore) is that this shift means a shift from objective accountable news reports toward subjective and often heavily biassed opinion pieces. The trouble is that unless people are aware whether their source presents agenda-driven subjective opioions or fair and balanced reporting, the former can easily be mistaken for the latter. And when that happens, truth, reality and objective reason goes out the window.

Just because you say it does(n’t) make it so

The current health care debate in the USA is a perfect example of just how dangerous this trend has become: As of right now the majority of information floating around social media networks and blogs regarding the health care reform is what journalists and rethoric experts alike would describe as conjecture, hyperbole, spin and good old fashioned rubbish. In fact you’d be hard pressed to find any truly balanced and unbiassed reporting on the topic even in the mainstream media. But this is because just like everyone else, the media organizations have jumed on the social media bandwaggon without really taking the time to look at what that means for objective reporting. And because in the USA there is no fairness doctrine so the news outlets are free to present biassed and unbalanced reporting as fact without danger of reprisals.

Ironically it is this very tendency of the mainstream media in the US to be biassed that started the Social Media Revolution for real: People were fed up with being served what was more often than not biassed reporting and decided that they would be better proponents of the truth than the media outlets were. And this, combined with the relative anonymity of the internet, meant that anyone and everyone could become a reporter, an opinion maker, a true participant in the social discourse without fear of reprisals. The problem with this theory is two fold: Unlike journalists, bloggers and other social media contributors have no vested interest in staying on the straight and narrow so to speak. Whereas a journalist who publishes an opinion as fact or distorts the truth to the point where it borders on a lie runs the risk of losing her job, a blogger that does the same runs little to no risk. At the same time because of the very nature of social media – an information exchange where everyone participates on an equal footing – there is nothing that prevents social, political or corporate entities from presenting their own distorted versions of reality as truth to the masses as fact, often under false alisases or through independent agents, thus changing the public discourse on false premises.

I follow a lot of random people on Twitter and I keep seeing postings saying things like “Socialized health care kills people” and “The Canadian health care system is a failure”. These postings often link to blog posts where in the extreme socialized health care is compared to Nazi death camps and Stalinistic gulags. Any reasonable person should agree that these statements are little more than paranoid outbursts or outrageous lies. After all, there are no death camps for the elderly in Canada or Norway. In fact most countries with socialized helath care have a higher life expectancy than the USA. But looking at the apparent number of “concerned citizens” putting their worries in hypertext one can start to wonder if there isn’t some truth behind the claims. The problem is that unlike a normal debate, on the web you don’t know who is actually talking, and you don’t know if the 1000 latest comments actually came from one person or organization rather than 1000 independent minds. But this lack of transparency is invisible and in the end people are likely to listen to what they percieve as a vocal majority. It all boils down to a simple fact: In public forums, the person that shouts the loudest usually gets her message across. And since social media by definition is completely unregulated it is easy for organized groups, political parties and corporations to flood the social media airwaves with biassed and inaccurate information drowning out the objective reality in the process.

Social Media: Tunnelvision for the Masses?

An uncomfortable and embarrassing trait of human nature is that no matter how much we claim to be fair and balanced, we hate being wrong. So much so in fact that given the oportunity we will chose to ignore any information provided to us that doesn’t fit with our current belief system. The role of mass media in society has always been to present unbiassed facts and report the objective truth about news and events. And because mass media was the only real source of information, we would get the good with the bad so to speak. And whether we liked it or now we’d be presented with facts and figures that did not match our own understanding of the world and we’d be forced to at least reflect on our own stance and realize we are not always right.

With the introduction of wide spread social media all of this changed. All of a sudden you could chose to ignore what the mainstream media said turning instead to people who were of the same mindset as yourself to give you only news and opinion that you agreed with and nothing else. With that a shift from news as it happens to news you agree with occurred. A subtle shift with serious and dangerous ramafications. When people are given the ability to filter news and opinion to hear only what they want to hear, they lose the ability to think critically. Which is bad enough. But it gets worse:

When people start trusting filtered opinion over objective reality, they become easy targets for manipulators and lose the ability to form their own understanding of the world. This is why the freedom of the press is such an important part of our society, why cross-media ownership is frowned upon and downright banned in many countries and why journalistic ethics commisions exist. But none of this applies to social media and as a result people, organizations and corporations with hidden agendas, evil intentions and broken moral compasses are able to present their distorted world view as fact with noone except other social media contributors standing against them. And as we’ve seen with the health care debate, the global warming debate and many others, in the end it’s the people with the most money that usually win simply because they have the means to keep the pressure up and quash the opposition.

That is why, whenever I hear people talk of social media as a revolution that will save the world and make it a better place, my critical mind cringes. It’s not what the social media evangelists want to hear, but like my parents said: Just because you don’t agree doesn’t mean it must be wrong.

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.

Replace the default heading with a clickable image

<h1 id="blog-title">
<a href="<?php echo get_bloginfo('url') ?>/" title="<?php get_bloginfo('name') ?>" rel="home">
<img alt="Alternate image text" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" /></a></h1>

The get_bloginfo(); template function

<?php
 echo get_bloginfo('$show')
?>

Where $show can be name, description, url, template_url etc. Full explanation in the Wordpress Codex.

Custom Page Template

<?php
/*
Template Name: Whatever
*/
?>

Standard PHP Include

<?php include ('fileName.php'); ?>

Insert Custom Field in Template

<?php echo get_post_meta($post->ID, '$key', true); ?>

Conditional Custom Field

<?php  
	if((get_post_meta($post->ID, 'divName', true))) { ?>
		<div id="divName">
			<?php echo get_post_meta($post->ID, 'divName', true); ?>		
		</div>
	<?php } 
?>

The Twitter Box

Click here to download a zipped archive of the Twitter box. Remember to change the username inside twitter.php, otherwise you’ll get my tweets on your site!

Why do I need a CSS Reset?

If you’ve never worked with a CSS Reset before I can pretty much guarantee that the question you are itching to ask is “why do I need a CSS Reset”. After all, you’ve designed or worked with numerous CSS-based sites in the past and even though they didn’t have a CSS Reset they work just fine. Right? Well, let me ask you this: If you’ve ever tried to design a site from scratch using CSS, and you’ve tried to make it cross-browser compatible, you’ve probably noticed that your styles don’t always look the same in different browsers even though they should. In most cases this has been a Internet Explorer vs. the rest type of battle and you’ve probably written it off as such and just picked a side. But that’s not the only, or right for that matter, solution. If you run into a browser incompatibility issue where CSS is concerned, it’s more often than not due to the fact you haven’t properly defined your styles leaving it up to the respective browser to make guesses as to what you want the site to look like.

To put it in simpler terms: If you don’t define all the default CSS parameters in your style sheet, the browser will use its default parameters instead. And since different browsers have different parameters your site will end up looking different depending on what browser you use.

What does the CSS Reset do?

As the name suggests, the CSS Reset resets all the default CSS parameters to a neutral position thus overriding any predefined assumptions at the hands of the browser. That’s a bit of a vague explanation so I’ve made a visual example that illustrates it perfectly:

The image above shows the same piece of basic HTML displayed when no CSS is defined and when the CSS Reset is applied. It is pretty obvious what happens: When you create a HTML page with some basic tags like <h1>, <p>, <blockquote> and <ul> without defining the styles of these tags with CSS, the browser applies its default stylesheet to these tags. But like I said earlier, different browsers have different standard stylesheets and as a result the page won’t look the same across all browser. And although this isn’t really a big problem when we’re talking super-basic stuff like what is displayed above, it becomes a serious pain in the neck when you create complicated CSS layouts.

So all I’m doing is creating more work for myself?

Unfortunately the gut reaction from a lot of people when they see the image above is “Oh crap! Why would I ever do that? I just create tons of work for myself.” Well, that’s partly true: With a CSS Reset applied you do have to manually define all your styles unless you like the reset look (I don’t). But on the bright side that also means you are now in complete control of every aspect of your site and nothing is left to chance any more. And in my book the former far outweighs the latter.

If that doesn’t convince you, consider this: Before I startet using the CSS Reset in all my projects, I spent a lot of time trying to jury rig my code into playing nice in all browsers. This often included using IE hacks and JavaScript. After emplying the CSS Reset I only rarely encounter these problems, and when I do it’s usually because I made a mistake somewhere.

Alright, I’m sold. How do I start using the CSS Reset?

There are several CSS Resets available out there. The one I use is CSS guru Eric A. Meyer’s Reset Reloaded. It seems to be the most comprehensive reset and it is constantly being updated. To employ it I simply copy the code from the site and paste it in at the very top of my stylesheet. When it comes time to work on my own styles I make new ones leaving the CSS Reset intact. Cascading Style Sheets work as a cascade from the top down which means with the CSS Reset on top the browser will first read all the reset styles and then whatever styles I define below and apply them in order. That way the layout is guaranteed to be clean of browser junk and only shows my style code.

That really is all there is to it. So employ the CSS Reset and go forth and code.

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.

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.