Andrew Colclough

So, I can use this now?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the superfluous display:block; can be removed, as it will be included in the browser default styles.

Supporting IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Before we leave this code, there’s one thing to mention about the script tag in HTML5. HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.

Wrapping Up

So we can begin, right now, to structure our documents using the new tags provided in HTML5. With a few simple tricks, they’ll work today, and be compatible in the future. So next time you start a new site, consider going with HTML5, and give your markup a little more defined structure.

Epicenter Design

Start from the core of the page and build outward

Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward. This means that, at the start, you ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first.

Whatever the page absolutely can't live without is the epicenter. For example, if you're designing a page that displays a blog post, the blog post itself is the epicenter. Not the categories in the sidebar, not the header at the top, not the comment form at the bottom, but the actual blog post unit. Without the blog post unit, the page isn't a blog post.

 

This is such a key aspect of software and UI design, I can't promote it enough.

Stated simply: Start with the content -> then add the stuff that helps people get around the content.

Don't forget to read the entire book. It's free.

I am currently testing this system out - and so far I have been totally blown away. I think Compass+Sass are a huge leap forward in the CSS arena. If you get the opportunity - watch this full video to get a good overview of some of the power that Compass and Sass could add to your web design/dev project.

Here are links to both Frameworks to get you started:
-Sass
-Compass

And as Samuel L. Jackson once said, "Hold on to your butts."

Working in Web Development means you have to have a development environment installed on your local machine, in order to test and develop dynamic pages, using a web server (Apache,), a database (MySQL) and a scripting language (PHP). There are ways of getting those components installed in a bundle, like WAMP, LAMP or MAMP. But as a developer, you are more the manual type, right? So as I had to go through that installation process recently, this article documents the steps I went through.

Apache

OSX already comes with Apache installed, it is just a matter of starting the server. You can do this if you go to System Preferences > Sharing and check “Web Sharing”. The Apache default page should now be displayed at

http://localhost

Later on, you can use the following commands to start, stop or restart Apache:

$ sudo apachectl start
$ sudo apachectl stop
$ sudo apachectl restart

If you would like to change the DocumentRoot of the server, you need to edit the httpd.conf file:

$ sudo vi /etc/apache2/httpd.conf

In here, you need to change the DocumentRoot setting:

DocumentRoot "/Users/myUser/myNewWebroot/"
<Directory "/Users/myUser/myNewWebroot/">
...
</Directory>

PHP

PHP comes bundled up with Leopard as well. The important things to know here are where it got installed and where to find the configuration file.

Most likely, it got installed to:

/usr/local/php5

The configuration file should be located at:

/private/etc/php.ini

You only need to make sure that Apache knows that PHP is available, so edit httpd.conf:
$ sudo vi /etc/apache2/httpd.conf

And add the following lines (in the appropriate sections, to keep things tidy):

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
…
LoadModule php5_module libexec/apache2/libphp5.so

Finished with that, restart Apache, empty the browser cache and then load a php file for testing if it is correctly interpreted.

MySQL

Download the most recent dmg image from the MySQL site.

Before actually installing MySQL, I found it helps to restart the computer before proceeding with the installation. When running through the installation wizard, MySQL will get installed to:

/usr/local/mysql-VERSION

So, for example:

/usr/local/mysql-5.0.51b-osx10.5-x86/

Also, a symlink should have been created:

/usr/local/mysql -> mysql-5.0.51b-osx10.5-x86

You should also install the Preference Pane, which comes with the installation package as MySQL.prefPane

To start MySQL manually, run the following command:
$ sudo /Library/StartupItems/MySQLCOM/MySQLCOM start

You should also add MySQL to $PATH:
$ vi ~/.profile
$ export PATH=$PATH:/usr/local/mysql/bin
$ source ~/.profile

To check whether that was successful, run:
$ echo $PATH

The default settings for the root user are:

• Username: root
• Password: [leave blank]

Add-on: PHPmyAdmin

To get PHPmyAdmin installed, which comes in handy for managing your database(s), download the latest package from their download page. Extract that package to a directory somewhere in your DocumentRoot.

Open config.sample.inc.php with an editor of your choice and add the following details for your MySQL installation:

/*
 * This is needed for cookie based authentication to encrypt password in
 * cookie
 */
$cfg['blowfish_secret'] = 'whatever'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

$cfg['Servers'][$i]['user']          = 'root';
$cfg['Servers'][$i]['password']      = ''; // use here your password

After you made those changes, save the file as config.inc.php.

PEAR

PEAR should also already be available on your Mac. The location is probably:

/usr/local/php5/bin/pear

It is a good idea to add the path to PEAR to $PATH, similar to setting the path for MySQL (see above). In addition, upgrade PEAR to the latest version like so:

$ sudo pear channel-update pear.php.net
$ sudo pear upgrade PEAR

Resources

• Installing MySQL on Mac OS X (MySQL Reference Manual)
• Installing MySQL 5.0 on Max OS X 10.5 client
• Installing MySQL on Mac OS X

Nice clean "how to" article. I'm looking for a really comprehensive one on Snow Leopard (I'll post it if I find it)- cause getting all this to run yesterday was kind of a pain.

Making happy designers and developers...

Whether you are a total n00b, or teh 7337 h4XX0rz - this is a great intro article covering most of the basics of Cascading Style Sheets.