What’s this Comic About?

Basically all the ‘modern’ browsers are playing in the treehouse and poor IE6 is disgruntled that he cannot. He is sporting a 5 o’clock shadow and looks a little mean. Meanwhile, Firefox is pointing out that IE7 is indeed related to the banned browser. My question is this: why is IE7 still allowed in the treehouse? Or any IE for that matter. Internet Explorer 8 doesn’t even allow us to do anything cool with CSS3 or HTML5. Bottom line, die IE die!

Let's start off by saying that the word(s) 'web safe/websafe' will hopefully one day become extinct. That being said, there are many issues surrounding web fonts such as font licensing issues, browser compatibility and so on. As well, it can be tricky to navigate the various solutions out there and to decide on the one that's right for you. The aim of this article is to help you decide which solution is right and for you to be confident in that decision. Let's dive right in to examine what the Internet has to offer web designers seeking an alternative to the normal CSS font-families.

Google Font API / Google Font Directory

We begin with Google's Font API since it's the newest and freshest web font solution out there. This latest freebie from Google is like a free version of TypeKit without the huge font selection. I heard that they worked together on the project... who would turn down working with Google on a project? Not TypeKit.

Implementing Google Fonts

To begin using the Google Font Directory all you have to do to use click here to go to Google Font Directory, click on font you like from the list and copy-and-paste the appropriate code like this:

For Lobster Font Family: Put this code in the this head of your website to get the font from Googleapis

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

It's a snap to use the Google Font API...

The Google Font API will do everything for you. All you have to do is put the font family on a CSS selector like so:

.foo { font-family: 'Lobster', arial, serif; }

As you can see this is catching the attention of many web designers out there, including me. I've already started to use this on my website and I imagine that we'll be seeing this on a lot more WordPress blogs to begin with and eventually higher page-ranked sites.

Similar to Google Font Directory

TypeKit and FontDeck are similar font Libraries, but without the Google Font API. The CSS3 rule @font-face is very close to the same principle.

Why You Should Use Google's Font API

1. Save the bandwidth on your site. Visitors won't be downloading the font from your server.
2. If the same font is used across multiple sites it will
3. Google is fast, very fast

Why You Shouldn't Use Google's Font API

1. There's only around 20 fonts to choose from

Cufon

Cufon is a font replacement solution that aims to be the alternative to sIFR. Their is no Flash or plug-in involved here, only natively supported features.

Implementing Cufon

To use this solution select a font file that you'd like to use (.TTF, .OTF etc.) and head over to the Cufon Font Generator.

Once you get to the font generator page complete all the mumbo jumbo on there, the form itself is a bit confusing to understand at first I must admit. Assuming you filled out the font generator form properly it'll spit out a javascript file with the name of your font and some numbers (I believe this is your font weight). Save these files and upload them to your web server. If you have trouble with the form there's a Google Cufon group you can check out for help.

Now it's time to replace the text you want using cufon. Copy-and-paste the following into the head of your document but replace the script source to point to the location you uploaded the files the font generator generated. [inline]

Cufon does have it's use on the Internet, but it's more of a niche than poised to overtake any of the upcoming font library solutions. It does allow you to use any font you wish as long as it's in the common formats, but this also opens the door for lawsuits for businesses and organizations. Cufon is cool though, impress your friends and use it on one of your next projects.

Here's a good video that demonstrates implement cufon:

Example of markup rendered using Cufon: [inline]

<span style="width: 68px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 83px; height: 19px; top: 0px; left: -1px;" height="19" width="83"></canvas><span class="cufon-alt">Browse </span></span><span style="width: 28px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 43px; height: 19px; top: 0px; left: -1px;" height="19" width="43"></canvas><span class="cufon-alt">by </span></span><span style="width: 84px; height: 18px;" class="cufon cufon-canvas"><canvas style="width: 93px; height: 19px; top: 0px; left: -1px;" height="19" width="93"></canvas><span class="cufon-alt">Category</span></span>

Why You Should Use Cufon

1. Use and font you want (not sure how legal this is...)
2. Supported by all major browsers
3. Support an open source solution

Why You Shouldn't Use Cufon

1. The text is not selectable
2. The font variations show up differently cross-browser
3. It makes your markup looks all crazy with a bunch of spans and inline styles
4. Not as simple to implement
5. Cannot use for body text

@font-face

@font-face is a CSS3 rule that allows you to host fonts on your server and have them rendered via your website if the site visitor does not already have that font installed on their computer. Currently, browser that support the rule are Safari, Firefox, and Google Chrome. IE kinda supports it. So what's the problem? Font licenses... basically money. Many font artists don't want to see their fonts used without bring them in some money, which is completely understandable.

Implementing font-face

Using @font-face is nearly as easy as using the Google Font Library except you have to host the font file on your web server. To use the web font you wish you will need to declare each font family using the @font-face CSS3 rule. For example, you would put the following in your stylesheet:

@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

@font-face {
	font-family: Delicious;
	font-weight: bold;
	src: url('Delicious-Bold.otf');
}

Then use the font-family via CSS on your chosen elements:

h3 { font-family: Delicious, sans-serif; }

Why You Should Use @font-face

1. Cutting-edge CSS
2. Use any font you wish
3. Easy to implement
4. Selectable Text

Why You Shouldn't Use @font-face

1. Not fully cross-browser compliant
2. Font licensing issues

sIFR

sIFR is a is a web font solution that replaces your text elements with Flash equivalents. I've never implemented or had a need to use sIFR personally, but I have done work on a few websites that had this solution already in the works. I believe this solution will be used less frequently in the future since there seems to be a movement away from Flash. Despite this, the solution is still widely used; here's brief overview of how to implement sIFR:

Implementing sIFR

To begin, make sure you have Adobe Flash. You will need to modify the sifr.fla file and there's no way to do this other than Flash. You can download a trial from Adobe if you don't have it that is good for 30-days. Also, you should have the font files you wish to use as web fonts. Ok, have this all? Let's look at a brief overview of what you will be doing:

1. Download the latest sIFR files
2. Set up the Flash file for the desired typeface
3. Upload the necessary files
4. replace the desired text with the 'sIFR' text
5. styling the new text

Obviously this is a very brief overview. Here's a good tutorial that will walk you through implementing sIFR that is more in depth than my brief rundown.

Why You Should Use sIFR

1. Selectable Text
2. Use any font you want

Why You Shouldn't Use sIFR

1. Flash elements throughout your site
2. Font licensing issues
3. Not as light-weight
4. Not as easy to implement
5. Need Flash to implement

FLIR

FLIR (Facelift Image Replacement) is a font solution billed as the alternative to sIFR, but I would compare it more to Cufon. This means no flash at all. FLIR works with JavaScript, PHP and CSS to create a unique web font solution.

Implementing FLIR

To get FLIR up-and-running on your website you will have to do a bit of file configuration and the uploading files to your web server. Not too bad, but still not as snip snap as some of the previous solutions. Let's look at the overview:

1. Download the FLIR files
2. Configure the config-flir.php file to define the fonts
3. Add to the website by uploading the files and calling the path in you website header
4. Style the tags via the special FLIR.replace(); CSS attribute

For more FLIR implementation information check out: Introduction to FLIR and How to Use Any Font You Wish With FLIR.

Why You Should Use FLIR

1. Easier than sIFR to implement
2. Use any font you wish

Why You Shouldn't Use FLIR

1. Non-selectable text
2. 'Unclean' markup similar to Cufon
3. Right-click reveals the text is an image

Final Thoughts

After exploring a few of the popular web font solutions in use today I feel confident that the web will eventually move the way of web fonts for mostly headings and other similar elements. For actual content text it should be best practice to use a readable font-family that is native to all browser. This limits your problems and allows your users to view your site's content much more easily.

If you are having trouble implementing any of the above solution please feel free to leave a comment below or shoot me an email. Also, don't forget to become a fan of DLOCC on Facebook or liking this article! Thanks for all the support and have a good time making the web more typographically beautiful!

Has someone asked you to chmod a directory or file to 666 or 664 (three-digit octal) and you have no clue what this means? Well, take a second to read this post and I'll explain a bit of what I know about Change Mode, Chmod and CHMOD (for your information these are all the same thing).

To begin, let me say that this article will be discussing Change Mode in terms of file and directory permissions using file transfer protocol programs. Personally, I use FireFTP and Core FTP as my File Transfer Protocol Systems. Both make is very easy to connect and chmod any file or directory. FireFTP is built-in to Firefox, as an added extra benefit.

CHMOD in terms of FTP

So I don't claim to be any genius with FTP, so I'm speaking here in terms of my own experience with Change Mode.  I'm a web designer and my experience with Change Mode has been through FTP programs. Have you noticed when using your ftp program that each file/directory have multiple permission values.  This is because there are multiple ways to set permissions.

File and Directory Permissions Symbolic Notation

R: Changes the modes of directories and files recursively
V: Verbose mode; lists all files as they are being processed

Here are some common Symbolic notation:

Octal numbers

CHMOD octal numbers are from what I understand another way of setting read/write/execute permissions on a file or directory. I have seen them in both 3 and 4 digits.

CHMOD a File or Directory

Now that you have read my brief description into changing the permission of files using Change Mode (or CHMOD) it's time to fire up your favorite FTP program and try for yourself.

CHMOD 664

-rw-r-r-

CHMOD 755

-rwxr-xr-x-

CHMOD 666

-rw-rw-rw-

Trust me, finding website for this list wasn't that easy... if you've looked at many high school websites you'll know what I mean.  They all seem to have been made in 1995, except the ones below (plus many more, I'm sure). Also, I notice many private school's websites tend to be nicer since they are actually marketing the schools. I thought about excluding those websites but decided not to.

Red Lion Christian Academy

This School's website shows a nice example of how to use navigational elements properly and I'm impressed they have a favicon. Don't disregard the favicon! I love those things :] Anyways, they mix serif and sans-serif font typography which is a no no in my book, but the site still looks pretty sweet compared to the rest of the high school websites I've been looking at.

Cathedral High School - Indianapolis

The textures used on this high school's website layout is what caught my eye. The navigation and shadows look great and the rotating images keep the site interesting.

Howe Military School

They used Georgia? Oh wow, this get's put in my showcase... I love Georgia font if you can't tell. Besides that, the website looks great and not to mention they are running on WordPress it looks like... I <3 wordpress.

DeMatha Catholic High School

Wow, this site is great looking. It's got a more modern layout and the look-and-feel of the website flows when you actually get in and click around. They offer a search option, which many of these other sites do not. Search is good.

Albuquerque Academy

I love the background of this website. Maybe it's just me, but any website with a nice scenic background, perhaps of the sky or mountains like this one... seems to create a nice calming feeling that makes me want to dive deeper into the website.

Adlai E. Steverson High School

St. Andrews Episcopal School

Baltimore Lutheran School

This website's nice Flash Accordion as the main emphasis of work well and the gradient background is a good subtle backdrop. The website is designed nicely and the navigational elements are in the expected places.

North High School | The Saxons

Rancho Bernardo High School

Mt. Carmel High School

Morris Knolls High School

I included this website because I like it's simple layout. Although not beautiful per say, it is a nice efficient layout and deserves it's place among this list.

Hell Gate High School

This website has a nice color scheme and the header features a decent enough graphic of some mountains with trees and the school in the middle. Now, while it's nothing to go nuts about... it's subtle, efficient, positioned properly on the site.

Hawthorn Public Schools

The lesson of the day is: Joomla Site's work for schools. As long as they are aware that they must keep on top of security updates and new releases. Joomla allows schools like Hawthorn and others in this showcase to create very attractive and accessible websites in less time than other solutions.

Olathe Northwest High School

Please note: I did not include school websites that use third party solutions.

High School Website Directory: http://highschoolhomepages.student.com/

Introducing the iPad

iPad Pricing

iPhone Similarities

This is the lock screen - icons fly in. Let's go right to the web..."

New Drop-down Menus in iPad OS:

Apple's iBooks

Apple iPad Specs

• 1/2 inch thick tablet only weighing 1.5 pounds
• 9.7 inch full capacitive display with full multi-touch support
• Apple's 1GHz A4 processor.
• Bluetooth
• WiFI n
• Accelerometer, compass, GPS, etc.
• 10 hours battery life
• Available in 16, 32, 64GB

iPad - Environmentally Friendly:

• Arsenic-free
• BFR-free
• Mercury-free
• PVC-free system
• Highly Recyclable

Making a cool bubble background effect is easy in Photoshop. This tutorial will demonstrate how to create a whimsical bubble effect using Adobe Photoshop.

1. Start up Photoshop and click File > New and create a new canvas 500 width x 500 height pixels

2. Create a new layer and name it "bg" and delete the old "background" layer.

3. Select the Gradient tool and modify the colors similar to the example below:

4. Starting at the bottom of the canvas click-and-drag from the bottom to the top to apply the gradient background. You should have something similar to the following:

5. Create a new folder ground and name it "bubbles"

6. Create a new layer in the group called "bubbles1" and select the Ellipse tool.

7. Modify your primary color to a color similar to the one seen here:

8. Holding the Shift key draw a series of circles on the canvas varying in size.

9. Change the layer's Opacity to 20 percent.

10. Double-click on the layer and let's add some style.

Stroke:

Outer Glow:

11. Create a new layer and with the Ellipse tool selected draw more ellipses on the canvas. Rename this layer.

12. Double-click on the shape's color and change it to something similar to this:

The Canvas Now:

13. Mix up the layer's style again (change the stroke and glow properties).

Next Steps: Create a few more "Bubbles" layers and play around with the styles and colors until you have something you like. Mix up the sizes of the ellipses you create for a better effect.

Here's what I have up to this point:

I hope you enjoyed this quick tutorial, there's a lot more you can do with this effect. Whimisical bubbles are a neat effect that are becoming more widely used.

Summary: Here's all the information and resources you need in order to create a fluid Flash website.

The Active Tuts Tutorial by Makzan

I also included the 'Whimsical' animated background effect also found here at Active Tuts

If you don't have the font I used download it here: Airstrip Four

Download My Fluid Website

Demo My Fluid Website

View My Brief Code Walkthrough:

Also: If you are particularly good with this and want to redistribute the code in an update package then let me know. There are bugs in my code and it's not very 'clean' so if you do some work on it and want to share the wealth then by all means hit me up.

Disclaimer: I did not write this entire code. DLOCC claims no ownership over the Classes used, images and MP3s and other non-original elements of this package.

Don't forget to leave a comment! :]

Video: Part 1 of 2

Video: Part 2 of 2