DesignBash » Quickie

The HTML of HTML 5

admin — Sun, 20 Nov 2011 22:12:26 +0000

As the web continues to move forward, it’s becoming more and more important to understand (and use) HTML 5 tags. Although most tags are not officially supported in Internet Explorer, there are some great JavaScript libraries out there that allow us to start using HTML5 today!

So, before getting to far into your HTML, you’ll need to drop in a small JavaScript reference to HTML5.js, which “shims” in HTML5 support for IE8 and below. It’s easy enough to do this, just use this little code snippet:

Alright, now that we’ve considered older browsers we can get started with some actual HTML5 code. Starting from the very top, we need the doctype. Thankfully, the HTML5 doctype is simple compared to the ones you’re probably familiar with. Look at the beautiful simplicity of the document below:




  
    
    HTML5 Example
  
  
    This is a perfectly valid document

Mmmmm, so much nicer than before…

What About Self Closing Tags?

One of the design choices that I really appreciate about HTML5 is the fact that you can optionally self-close tags. I plan to write my code without the self-closing slash, as I find it less noisy, but there is nothing wrong with self closing tags.

HTML5 Semantics

HTML5 gives us the ability create documents that are incredibly semantic. All the new elements were created with modern websites in mind, as you’ll see in the examples below:



  Large Title



  Home
  About
  Contact




  
    Article Title
  
  
    Another Article Title
  




  New York, New York/address>

That’s a very small example of what we can do with this new kind of markup. For a full explanation of all the new tags, checkout the official HTML5 specifications. It can be a little dry, but it’s worth slowly reading over.

How to SSH using OSX and Terminal

admin — Fri, 29 Jan 2010 16:56:30 +0000

I know for many people this is a really really simple task, but I constantly find myself looking this up online and it usually takes me 5-10 minutes before I find a useful result. With this in mind, please enjoy the following snippet.

SSH, OSX and Terminal

I’ll retrace my exact steps here, including hot-keys. First we need to open up the terminal – a basic prompt interface that lives beneath all the bling of OSX. Rather than digging around in your applications folder, just hit apple-spacebar to open spotlight. Type “terminal” and it should show up right away.

Inside the Matrix (Terminal)

Now you can start to feel like a hacker. Thankfully, OSX ships with SSH pre-installed, which makes this tutorial very easy. To connect using SSH you need to type:

“SSH username@www.yourwebsite.com”

After pressing enter you’ll be prompted for two things… a password and a yes/no question asking if you want to add a record of the SSH connection (or something like that). While typing your password you can’t actually see the characters, but it is really working. Also, you need to write a full “yes” or “no” in response to the question…

That’s It!

You should be connected and ready to go. There are many different SSH commands, so I won’t go through those right now, but here are a few to get you started:

ls – Used to list the contents of a directory
cd .. – Used to go back (or up) one directory
cd directory/name – Used to navigate to a directory
exit – Used to end the SSH session
pwd – Prints the working directory

Giving Backgrounds Texture

admin — Thu, 14 Jan 2010 22:20:57 +0000

There is a neat little trick that most good web designers know and love, and it has to do with background textures and noise. I remember when I first started designing for the web, I would never use textures in my designs and was always left feeling like something was missing. A textured background, even when it’s very subtile, will give your site much more depth and feeling than a plan flat color or gradient. This quick example will use some simple noise to give a gradient background some extra depth. So let’s get started!

First Example – A Noisy Gradient

Step 1 – Create a New Document

Create a new web document that is 1200px by 1000px.

Step 2 – Choose a Nice Gradient Background

For this example I decided to do a nice bright-dark green gradient. Make sure it’s linear to make it easier to slice into HTML/CSS afterwards.

Step 3 – Add the Noise Layer

Next, add a new layer on top of your background layer. This will be our noise layer. Fill it in with total black and then go up to Filter > Noise > Add Noise. Use roughly the same settings that I use below:

You should end up with a really really noisy background.

Step 4 – Blending and Opacity

Next we need to change the blending mode and opacity to make our noise layer more palatable. First set the blending of the noise layer to Overlay. Next you need to bring the opacity down to somewhere between 1% and 20%, depending on how much noise you want. In my Example I used 5% opacity.

Your final background should end up looking something like this:

Click to See Full Size

Halftone Tutorial Photoshop – Quickie

admin — Fri, 08 Jan 2010 18:50:16 +0000

Here is a quick way to produce a neat halftone effect in Photoshop that can be used to give your compositions a little more complexity.

Step One – Setup the Document

Start off by creating a new document with the dimensions of 800px by 800px.

Step Two – Black to White Gradient

Create a new layer and fill it with a blank-to-white gradient. Try and make the gradient fairly even across the entire document.

Step Three – Apply the Halftone Filter

Select the entire gradient layer and goto Filter > Pixelate > Color Halftone… and fill it in with the settings below.

Step Four – Rotate the Halftone Layer

Next we can rotate the halftone layer by around 45 degrees counter clockwise.

Step Five – Crop it Down

Next make a selection near the centre of the halftone and crop it – I ended up cropping a section of ~ 615px by 300px.

Step Six – Apply a Pleasing Gradient

Choose a nice two color gradient (I choose blue). You now have two options. The first is to create a new gradient layer above your halftone layer and then reduce the gradient layer’s opacity to a suitable level. Or, the second option is to put a gradient layer below the halftone layer, set the halftone layer’s blending option to “Darken“, and reduce the halftone layer’s opacity until you find a good level. Either way the effect will be similar!

And there you have it – a quick and easy halftone effect that you can use to make neat backgrounds!