Archive for the 'Tutorials' Category

Page 2 of 4

Password-Protect iWeb Sites

The ability to password-protect iWeb-Sites is only available to those that publish to .Mac. Even though iWeb does not offer this ability to those who publish to a folder, it does not mean that it is not possible. This tutorial will show you how to easily protect your site with a password and an username.

For this tutorial, we will be using a free application called iTweak. It has been made to simplify such additions to the iWeb application and so it is just perfect to use.

Please note that this tutorial is only available to those who publish to a folder and upload to a server that is capable of running .htaccess files. Please ask your hosting service first before you start this tutorial.

View a the final result (a demo) here or get right started.

Continue reading ‘Password-Protect iWeb Sites’

Adding Haloscan Comments to iWeb

UPDATE: Haloscan has been purchased by JS-Kit. Hence, Haloscan is out of service and you can only use JS-Kit to add comments to iWeb. There is a new tutorial that will show you how to do this.

Are you one of those users who would wish to have comments integrated right into your site but you are publishing to a folder and so you can’t do that? Or you just want to use the awesome technology of Halscan to power your comments? This tutorial will show you in an extremely easy way how to do this!

For this tutorial, we will be using a free application called iTweak. It has been made to simplify such additions to the iWeb application and so it is just perfect to use.

So let’s get right started!

Continue reading ‘Adding Haloscan Comments to iWeb’

Adding a Contact Form to iWeb

Have you ever wanted one of those fascinating contact forms right in your site? It isn’t that hard if you code your sites yourself – but with iWeb, getting and adding one becomes a bit more difficult. With this tutorial, I will aim to show you in a very simple way how to easily and rapidly add a cool PHP contact form right to your iWebsite.

For this tutorial, we will be using a free application called iTweak. You can go ahead and download it right here.

Please note that this tutorial will require the use of a PHP capable server. Otherwise, the tutorial and the form will not work. .Mac, sadly, is not capable of PHP. All those who don’t have PHP support, can take a look at a simple HTML snippet ready code from Wufoo.

The finished form will have a name, email, website field and a textarea for people to type their message. The style will apply to the theme you are using in iWeb. Simply try it out and you’ll see how it looks.

See the demo page for the result.

Continue reading ‘Adding a Contact Form to iWeb’

Adding The Sparkle Framework

As I have been working for the Developer Tools from Apple for quite a while now, I have really gotten into finding out about all sorts of nice things that others have created for the developer community. One of them is the Sparkle Framework. This framework allows you to automatically update your application via appcasts and deliver them right to your customers; just like Apple’s Software Update application.

So integrating and using this framework is just a charm. I really suggest that you use it! Although the framework works totally fine it really lacks a good documentation for those who are new to this whole developing community (or are coding in a different language other than Cocoa). So I thought I’d make a tutorial that should make life easier. I fiddled ages with the original documentation until I got it to work – which wasn’t that exciting.

BTW – The Foolworkshop (by K. Lawson) has also done a tutorial which includes larger images. Take a look at that as well.

Continue reading ‘Adding The Sparkle Framework’

Fonts in the Web?

Fonts, fonts and fonts – thats what you have installed on your Mac! My fonts library has over 200 different fonts and it just becomes obscuring when I try to pick one good-looking font for the web!

Fonts for the web are limited. To get to the point for those who don’t like reading, here are the reasons:

  • Not every computer has your specific font
  • Different browsers might not render your font
  • Macs/PCs might not read your font

The biggest problem with using fonts is that not all computers have your font. If you plan to use a font that you downloaded from Dafont, then do not expect that your visitors will have that font. This will result in the browser replacing your specified font with it’s standard font. That of course will mess your site up. Shifting, ugliness, etc… – you know the outcomes!

Another problem is that each browser renders fonts differently. Firefox varies from Safari and both of them vary from Internet Explorer. Some might read your font, some might not! Safari is one of the best browsers to read all fonts. I have never had real issues using any fancy fonts with Safari – but as soon as I switch to Camino or Firefox on my mac (with the fonts installed), the fonts might render correctly. I do not know the reasons behind this – but it just sucks! Internet Explorer seems to ignore nearly all fonts except for the standard serif or sans-serif. Crazy!

Lastly, the Mac and Windows issue. I will not elaborate to much on this because it is pretty obvious that Mac and Windows things are not that compatible.

Basically it comes down to forgetting about the idea that you have found the global font for all platforms. Now people switch to options like sIFR or to just use images. Unknowingly, you kick Googles ass because it can no longer read any of the contents in your site!

So what are we to do?

To make it simple and painless: use any of the standard fonts. There is a collection of standard fonts that will render correctly in all browsers and on all platforms. The fonts aren’t the best – but someone takes what they can get!
So here is a list of them:

  • Arial
  • Arial Black
  • Comic Sans MS – cool
  • Courier New
  • Georgia – cool
  • Helvetica – cool
  • Impact
  • Times
  • Times New Roman
  • Trebuchet MS
  • Verdana – 100% all time working

If you are a mac user, you can find these fonts in the default font browser under the tab “Web-safe” fonts:

I know, this isn’t the best solution, so what else is there?

Well what I like to do is to simply use the font that I like. I then use CSS to apply a font family and a second font for backup. So when my favorite font is not accepted by the browser, it skips to the second font. The second font is one of the fonts in the list above and looks as similar as possible to the one you wanted. Thus, those who have the font and the correct browser enjoy your design capabilities and those who do not have your font, get to enjoy one of the default fonts.

Here is an example:

element {
font-family: "cool sans-serif seeming font", sans-serif;
}

So choose your fonts correctly! Test them in all browsers and with all platforms to make sure that you know how you render.