Wyodor @ MobileMe

iWeb : Adding Google Analytics without editing the webpage

Google Analytics is a service that tracks the visitors of your webpage and provides information about where they come from, what pages they visit, what they use as Operating System and Browser and how long they stayed on your website. And a lot more.

Google uses JavaScript code which you have to paste in the webpage.

iWeb has no way of adding this to the webpage. After publishing you must open the html file in a plaintext editor and paste the code before the </body> HTML element. Then save the page.

Everytime you edit the page in iWeb, you have to edit the published page again to add the code.

Rather cumbersome.

Here's how you can add the code with the HTML Snippet.

Go to Google Analytics and sign-up for an account if you haven't already done that.

Create a new profile for your website.

It will provide you with a Webuser ID and the JavaScript code :

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

Open een plaintext document and paste the code without these lines :

<script type="text/javascript">
</script>

Save the file as plaintext and give it a meaningful name : I use analytics.js

Connect to your webserver and create a folder in the root of the server and put the file in it. I call this folder js.

Open iWeb and select the Site and page you want to track.

Add the HTML Snippet and paste this code :

<script type="text/javascript">

var bodyID = parent.document.getElementsByTagName("body")[0];

var newScript = parent.document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/js/analytics.js';
bodyID.appendChild(newScript);

</script>

Publish the page and open it in the browser. In Safari open the Activity window (Command-Option-A).

Check to see that the /js/analytics.js file is loaded correctly and a very long URL to Google is present.

The newScript.src = '/js/analytics.js'; only works when you have your own domain.

If you use both web.me.com/username and Personal domain, use newScript.src = '../js/analytics.js'; for non-blog pages and newScript.src = '../../js/analytics.js'; with the main blog page.

And again, verify it.

iWeb : HTML5 Audio and Video

Based on some topics in the iWeb forum at Apple Discussions about HTML5 I decided to give it a go too.

I already made the BlowUp and 3D pages described earlier.

Now I added some sample pages with audio and video.

HTML5 Audio — HTML5 Video

Both pages determine if a browser supports html5 and what audio or video formats.

Usually mp4/mpeg (h.264/AAC) or ogg. On the audiopage it falls back to a Flash Audioplayer if html5 is not supported.

I wrote the JavaScript in the past few days with some help from code at Apple Developers :

Safari HTML5 Audio and video Guide

I think it all looks rather well. See if you can apply it to your own pages.

iWeb : HTML5 Video Blowing Up and 3D demo

I came across this demo that shows what can be done with HTML5 Canvas and video.

Blowing up HTML5 video and mapping it into 3D space

I studied the code and came up with two samples of blowing up a video and a 3D sample, all in iWeb.

Blow Up, 3D and one on my iPad Site : Blow Up

To see how its done, open the widget markup files (In Safari : Command-Option-A to open the Activity window and than double-click the link to open it in a browserwindow).

Look at the source and follow the links to the JavaScripts.

It took a lot of tinkering to get everything pixel-precise on the canvas. The JavaScript code will tell you how.

MobileMe Public Folder

Ik heb m'n Openbare Map bij MobileMe wat duidelijker in beeld gebracht.

Public Folder @ MobileMe

Voorlopig is ie gevuld met Pdf bestanden van webpaginas waar ik m'n kennis vandaan haal om al het fraais op deze website te realiseren.

Dat het u tot nut moge weze.

iWeb webpaginas voor de iPad

Ik heb geen iPad, maar verheug me erop er een te hebben.

Vooruitlopend daarop heb ik vast wat geoefend met iWeb om paginas voor de iPad te maken.

Doel was om paginas te maken die niet scrollen en die precies passen in het schermformaat (768 breed en 1024 hoog).

Enige hulpmiddel was de iPhone Simulator.

Na passen en meten kwam ik uit op een pagina die 768 pixels breed is en 984 pixels hoog.

Bekijk 'm hier : http://dailynews.webege.com/ipad/

Het ontwerp komt van een Pages sjabloon.

Aanvulling : Wellicht niet eerder gezien, maar in de nieuwe iPhone SDK zit nu ook de iPad Simulator. Je kiest eerst de iPhone Simulator and dan in het menu Hardware > Apparaat > iPad.

Klik om een grote afbeelding te bekijken (opent in nieuw venster).

iWeb : Publish to MobileMe without the Sitename in the URL

How to publish to MobileMe without the iWeb Site name.

Go to the Finder.

Type Command-K (Connect to Server from the Go menu).

Copy/paste or type this line : http://idisk.me.com/MobileMeUserName/Web/Sites/

Use your own MobileMe user name.

Type Command-Shift-C to see the local Volumes and verify the iDisk Sites folder has mounted.

Open iWeb and create a Site. Or use an existing Site.

Name it Sites.

Choose to publish to a folder.

But Do not select a folder to publish to.

In the path field just type /Volumes/

You have to mount the iDisk Sites folder before publishing. Otherwise a Sites folder will be created in Volumes.

To easily mount the iDisk Sites folder, create an alias first.

Drag the iDisk Sites icon on top of your Username or Desktop icons in the Finder sidebar.

To mount the folder, select the Sites icon and type Command-R.

Now you can publish your iWeb pages.

Note that RSS and subscription feeds do not work.

And this set-up only works for ONE Site.

More iWeb Sites need to be published to a iWeb Sitesname folder.

You have to check the index.html file in the iDisk Sites folder to see that it redirects to the correct webpage.

Practice.

DropBox and iWeb publishing. With code to add fixed images and menus

I use DropBox to add storage on the internet.

But it is also possible to publish your (iWeb) webpages there. To use the webpages for others to visit, put them in the Public folder in your DropBox folder.

Then lauch the DropBox website.

Go to your public folder and hover over a link. Click Copy public link and copy the URL.

Here's a link : http://dl.dropbox.com/u/3563737/Lycos/index.html

On the pages you'll see a bar across the whole webpage. Resize the browserwindow to see the effect. Normally that's not possible in iWeb, but it is with the JavaScript below :

<script language="JavaScript" type="text/javascript">
<!--
parent.document.body.style.backgroundImage='url(http://www.wyodor.net/postkantoor/images/Paginavulling.png)';
parent.document.body.style.backgroundRepeat='repeat-x';
// -->
</script>

On the Nirvana Bril (Fixed Menu) page I also added a fixed menu. Click the link below to see the code. I use a JavaScript file. It's easier to edit and you don't have to publish the iWeb webpage everytime you make changes. It doesn't display well in Microsoft Internet Explorer.

http://dl.dropbox.com/u/3563737/JavaScript/NirvanaBrilFixed.js

You paste the URL to the JavaScript file in the iWeb HTML Snippet like this :

<script src="../../../JavaScript/NirvanaBrilFixed.js" type="text/javascript"></script>

Another nice way to customize iWeb pages. Hope you like.

Apple iPad als e-book lezer

Gisteren, 27 januari 2010, presenteerde Apple z'n nieuwste speeltje voor de l'Uomo Digitalis : de iPad.

Over 3 maanden te koop vanaf $499. Prijs in NL zal wel in dezelfde orde van grootte zijn.

Behalve de hele riedel aan mogelijkheden, internet, web, e-mail, fotos en filmpjes, is er nu ook de mogelijkheid om boeken te lezen.

Een e-book (of ebook) zal in het epub formaat zijn. Een gratis open source e-book standaard van het International Digital Publishing Forum.

Volgens de berichten zullen de boeken in eerste instantie alleen in de Amerikaanse iTunes Store te koop zijn.

Maar wat belet je om zelf een e-book te maken of een gratis versie te downloaden bij Project Gutenberg, epubBooks, en anderen.

Net als MP3 deuntjes en videos van eigen makelij, zal je ongetwijfeld ook t.z.t. die boeken aan iTunes kunnen toevoegen. Effe wachten op de iTunes update dus.

Overigens zijn er al e-book lezers te verkrijgen. Ik heb bijvoorbeeld Stanza, dat ook andere soorten tekstbestanden, zoals pdf, kan lezen. Niet alleen verkrijgbaar voor iPod touch en iPhone, maar ook voor Apple Macintosh en Windows. Downloadspagina.

Hoe maak je een e-book in epub formaat

Om zelf een e-book te maken vereist de nodige kennis.

Hier een tutorial : .epub eBooks Tutorial

Anders zijn er wel de nodige, al of niet gratis, programma's te vinden.

Ik vond al snel deze: sigil, een gratis multi-platform open source WYSIWYG ebook editor. Hier is het forum.

Dan deze : iStudioPublisher. Niet gratis. Hier Wiki artikel.

En hier een Google zoekactie naar ipad e-book format.

Aanvulling 1 : toen ik rechts-klik deed om een e-book met een ander programma te openen, zag ik dat ik ook Adobe Digital Editions had. Da's een programma dat als boekenplank fungeert voor epub boeken. Handig.

Aanvulling 2 : Ook Stanza kan diverse formaten omzetten in andere formaten. En via Lulu kwam ik bij Calibre ebook Management uit, waar je ook gratis software kunt downloaden om ebooks te maken en te converteren.

iWeb : Display date & time the page was updated

Here's a quick one. Based on this question in Apple Discussions about adding the time and date the webpage was updated.

Made a false start (the solution with the textbox, etc, works) but eventually came up with this solution:

<div style="width: 340px; height: 30px; margin-left: 2px; font-family: HelveticaNeue-UltraLight, 'Helvetica Neue', Arial, sans-serif; font-size: 12px">
<script language="JavaScript" type="text/javascript">
<!--

elem = parent.document.lastModified;
document.write ("Last Updated : " + elem);
// -->
</script>
</div>

I use a <div> to wrap the code and display it with the font of the page here.

To format the time & date in JavaScript, search the internets.

Mailform with Captcha

I created a mailform with captcha.

Found the files to do so at White Hat Web Design with more information about creating captcha images with PHP at www.phpcaptcha.org.

General information about creating images with PHP at The Wizard and Google. And of course in the PHP Manual.

With a mailform from KPN I pieced together a mailform. You can see it here.

But the form didn't work on my Mac with Personal Webserver. The browser showed an Internal Server error.

So I decided to create a new form with the combined information from the links above to eliminate the error. And it worked.

Download the zip file

The zip file contains the mailform, the php file to create and test the security code and a PNG file used as background for the captcha image.

The only personal information you have to enter is your e-mail address as the recipient in the mailform.php file.

Edit the php file with a HTML Editor of your choice. Put it on the server and test it.

Note 1. When you use the form on your Mac with Personall Webserver, I found that MobileMe and Google will not accept the message. Therefore I use my e-mail address at my ISP. I reason that mailservers do not accept mail from unknown sources as a security measure. Since I'm in the domain of my ISP with a IP number in their range they probably trust me as a sender. Unsend/undelivered messages can be found here:

/private/var/spool/postfix/active/
/private/var/spool/postfix/defer/
/private/var/spool/postfix/deferred/

Note 2. It will not work on MobileMe. You need an external server with PHP. If you haven't one, I suggest you try the free webhosting package at www.000webhost.com.

Note 3. The enclosed files work as advertised. But as usual, I assume no responsibility.

Extra note for iWeb users : To display the mailform use the <iframe> HTML element and paste it in the HTML Snippet.

<iframe src="http://url/to/mailform.php" frameborder="0" width="634" height="550" scrolling="no"></iframe>

Avoiding the iWeb Sitename in the URL

iWeb organizes and publishes its pages in Sites. It will append the Site name to the base URL of your webserver.

If you signed up for a webhosting-and-domainname package (not MobileMe) you can avoid the Sitename in the URL with sub-domains.

www in an URL is a sub-domain. Just as web in web.me.com is a sub-domain of me.com.

Note : It doesn’t work with MobileMe and Personal Domain. MobileMe doesn’t support sub-domains and the sub-domain in your CNAME will be ignored anyway.

Based on my experience to figure out how to avoid the Site name in the URL I wrote an article, or tutorial if you like, on how to do that.

In the article I describe what I got and what I did with my free webhosting package.

The article describes how I set up iWeb and fooled it to use the sub-domains, what extras needed to be done and what the drawbacks are in the end.

And in the very end it describes how I solved the drawbacks and why all of the above wasn’t necessary.

iWeb doesn’t know about all this. So you can happily keep publishing your webpages as before.

And it works. Having your cake and eat it too. Nice.

Below are three URLs. The base URL, the URL iWeb creates, and the sub-domainname URL. When you click a link note the changing of the URLs when it redirects to the right webpage.

http://dailynews.webege.com/
http://dailynews.webege.com/iweb/
http://iweb.dailynews.webege.com/ (the Tutorial)

To test an iWeb Site with a Blog RSS feed and iPhoto/Podcast subscriptions, proceed here :

http://dailynews.webege.com/holiday/

As a bonus there’s a short explanation of how to solve a PHP parse error when you publish an iWeb Site to a 3rd party host with an ill-configured webserver.

Sources : Apache htaccess and Apache Redirect directive

Note : Apple Macintosh Users can read the Apache manual on their computer. Start Personal Webserver and type http://localhost/manual/ in the Browserwindow.

More about a TABLE in iWeb

My tutorial about creating and addding a TABLE in a iWeb webpage will raise the question why not paste the table in the iWeb page.

Well, you can, but when you paste the table it becomes an image. It isn't text anymore. (The exception is an AppleWorks table. It will be pasted as text, but without the cells.)

Your visitor may want to copy the text for further use. And they can perform a Find on the webpage.

Also, text is indexed by search engines. If your spreadsheet numbers have relevance for others, you will be found by those numbers, not by the picture.

As a nice consequence, you can copy your table back into your spreadsheet. Including all the decorations. The calculations are gone, but you have your numbers back in case you lost your spreadsheet.

Try it.

BTW. Besides iWork Numbers you can also use Pages and Keynote to create tables.

6 januari 2010 : I might as well show the difference between a HTML Table and an image.

The HTML Table created with TextEdit:

The Table as an image pasted into iWeb.

Create and add a TABLE in iWeb

The use of a TABLE In a webpage is a convenient way to display information in tabular form.

iWeb has no feature to create tables in a webpage. The closest thing are textboxes. Create them and align them on the canvas.

To create a real HTML table and add it to a webpages you need the following:

• A spreadsheet application like Microsoft Excel, iWork Numbers, AppleWorks or similar.
• TextEdit.app.
• A browser.
• iWeb 08 or higher with the HTML Snippet option.

I use Mac OS X 10.6 and iWeb 09.

Create the spreadsheet

Create a spreadsheet with the columns and rows you want to display in the browser.

Add the numbers and apply decorations like fonts, colors, borders, etc.

Save your spreadsheet.

Exporting the spreadsheet

Microsoft Excel can export the spreadsheet as a HTML webpage. AppleWorks and iWork Numbers cannot.

All three applications can copy paste the formatted cells. I use that method.

Select the range of cells and copy them.

Open TextEdit.app and display the blank page as Rich Text.

Menu : Format > Make Rich Text (Cmd-Shift-R)

Paste the spreadsheet cells.

Save the page as a Web Page (.html) file.

Open the saved page in a webbrowser. Verify that it looks as intended.

If you created your spreadsheet in Microsoft Excel and saved it as a webpage, you should verify it in a browser too.

Displaying the saved html file in a iWeb page

To add the saved webpage to the iWeb Snippet you have 2 options :

1. Save the webpage in a folder on the webserver where you publish your webpages and display it in the HTML Snippet with the IFRAME HTML element.
2. Copy the HTML code and paste it in the HTML Snippet.

Option 1

• Determine the URL of the table webpage on the webserver. Copy the URL.
• Open iWeb and create a webpage.
• Add a HTML Snippet.
• Paste this code :

<iframe src="spreadsheet.html" frameborder="0" width="300" height="300" scrolling="no"></iframe>

• Paste the copied URL where is says spreadsheet.html.
• Change the width and height numbers.
• Click Apply. Your page will be displayed in the Snippet.
• Publish your iWeb page and verify it looks as intended.

Option 2

• Open the saved webpage in a browserwindow.
• Display the source of the page. In Safari: Cmd-Option-U.
• Copy the code.
• Open iWeb and create a webpage.
• Add a HTML Snippet.
• Paste the code.
• Click Apply. The Snippet will be adjusted to display the table.
• Publish your iWeb page and verify it looks as intended.

Editing the table webpage

To make changes to the table you have 2 choices :

1. Go back to your spreadsheet and repeat all the steps to publish your table again.
2. Edit the saved TextEdit webpage in TextEdit.

With choice 2, choose the Open command in the File menu in TextEdit.

Uncheck Ignore rich text commands.

You can now edit the formatted page.

When you save the page and you had chosen Option 1 to display the page with the IFRAME you do not need to edit the webpage in iWeb. Simply put it on the server again. Note that when the width and height of the table have changed, it might not fit in the HTML Snippet. In that case you have to adjust the size of the HTML Snippet.

Otherwise you have to repeat the steps in Option 2.

Recommended reading : Using the iWeb HTML Snippet

iWeb layout template

I created a iWeb template to make it easier to position objects on the canvas.

It is a grid with a selection of objects in various widths. All objects are graphic boxes. You should use textboxes if you want to type text. So place a textbox on an object to make it fit the width. Then delete the object.

It also contains an image with an irregular shape. It is copied from an older iWeb template. The latest version of iWeb has no irregular shape tool anymore. But it still works.

You can delete all the objects and use the small vertical lines at the top to snap your own objects to the grid.

Download the iWeb Template Domain file

After downloading the zip file, upzip it and put the Template.sites2 file in:

~/Library/Application Support/iWeb/

where ~ is your Home directory. Folder names may vary depending on your System language.

To add the Template Domain file to your own project you have to merge the files with iWebSites.

Caution when merging the files

When merging the files I noted an error in iWebSites. The Template page will sometimes have a page from your own Domain file after merging.

To prevent that, first open the downloaded Template Domain file in iWeb by double-clicking it.

Create a New Site and choose a page from iWeb when asked.

Then drag the Template page from the Template Site to your new Site. The Template Site will disappear.

Remove the page you chose when creating the New Site.

Save your Site and Quit iWeb. Open iWebSites.

Select the Template site and one of your own sites and click the Merge button. iWebSites will create a new Domain file.

Make it default or open it in iWeb. Check the result.

You may have to start over and fiddle to make it work properly.

To use the Template page, duplicate it and drag it to your own site. Work from there.

Hope this helps you creating stunning websites.

Other useful topics

Display a remote picture in your iWeb page
Using the iWeb HTML Snippet
How to add a movie to your blog

Display a remote picture in your iWeb page

Wrote a tutorial on how to display a remote picture in your iWeb page with the iWeb HTML Snippet.

Instead of using the IFRAME HTML element, I use a JavaScript.

I have more coming once I have more demos.

QuickTime X en Flip4Mac

Toen ik Snow Leopard had geïnstalleerd, merkte ik dat Flip4Mac het niet meer deed.

Na wat zoeken kwam ik, uiteraard, op de Flip4Mac website terecht en zag dat ze een Beta versie hadden die op Snow Leopard werkte.

Geïnstalleerd. Werkte verder prima.

De gratis versie kan geen WMV videos exporteren zonder dat je een watermerk erin krijgt. Om dat te voorkomen moet je een betaalversie aanschaffen.

Wat schetste mijn verbazing toen ik zag dat QuickTime X een WMV video als 480p en 720p kon bewaren, inclusief conversie naar H.264/AAC, zonder een watermerk.

Foutje of een nieuwe ontwikkeling van QuickTime X?

Het kunstje gaat niet op als je één van de andere bewaaropties kiest of als je Bewaar voor Web kiest.

Dat ze dat bij Flip4Mac ook doorhadden bleek toen ik een update (2.3.0.14) installeerde. Weg mogelijkheid.

Gelukkig had ik nog onthouden welke versie de Beta was (2.3.0.7). Die heb ik gezocht en gevonden bij BrotherSoft.

Ik heb 'm ook. Download 'm hier (11.4MB)

Installeer deze versie en je hebt de oude situatie terug.

Snow Leopard besteld

Vandaag besteld. A.s. vrijdag wordt ie verzonden. Maandag in huis? Kan niet wachten. Meer...

Another Flash Slideshow

Since I have no creative mind or soul, I rely on others.

Below is a Flash Slideshow I found on the website of the famous Dutch Singer Jan Smit.

I did adjust the html code and put in my own images. Well, not my own, cos I do not own a Harley-Davidson motorcycle.

You have to check the code to figure out how its done. Download the set.

The Slideshow is embedded in this page with the IFRAME html element. See this page and this page.

Objects on top of Movies

A while ago I read this topic about placing objects on top of QuickTime movies in iWeb:

Quicktime not layering behind others

In iWeb an object appears to be on top, but after publishing the page the object disappears behind the QuickTime movie.

Have a look at these images below. On the left a Flash Video, on the right a QuickTime movie. You'll see 2 images, the blue-ish one is the (selected) image on the page, the red-ish one when dragged.

When displayed in a browserwindow it's normal behaviour that QuickTime movies are on the front. But it seems strange when working in iWeb. Despair galore!

So what's the solution? Use a Flash Video. Besides that, you have more features. See my iFrame section with samples.

See this page where a butterfly image is positioned above a HTML Snippet with a Flash Video.

iWeb Banner Movie

Wrote a Quick & Dirty Tutorial on how to create a Banner movie.

Not for iWeb per sé, but that's what interests me most.

Read it here.

Use it for your own pleasure.