Wyodor On The Web

iWeb : iframe alternative in the HTML Snippet

To display a remote webpage in an iWeb webpage, you use the HTML Snippet with the <iframe> HTML element.

It's a line of code with a lot of attributes :

<iframe src="http://url.to.file.html" frameborder="0" width="500" height="500" scrolling="no" allowTransparency="true"></iframe>

iWeb uses an separate file, widget0-markup.html, to display that remote page.

And since the HTML Snippet itself is an <iframe> it's double.

To avoid that you can use a JavaScript that replaces the widget0-markup.html with another file, be it a webpage or an image.

Here's the code you paste :

<div style="width: 650px; height: 650px">
  <script language="JavaScript">
    location.replace('../../../your files.html');
  </script>
</div>

Use three sets of ../ to escape from the folder with the Sitename if you use a relative URL, Use "/url-to-file", when using a relative to root URL or use an absolute URL to the remote file.

De <div> is used to define the size of the HTML Snippet. It is assumed that the file doesn't have to scroll inside the HTML Snippet. If you want that, you'll have to find a solution for that, or use the <iframe>.

See sample pages here : demo pages... 

See also this blog entry : Using the iWeb HTML Snippet

HTML as PHP (cont.)

Discovered that one.com does not support this Apache Directive :

<files widget*.html>
AddType application/x-httpd-php .html
</files>

See this blog post for details :

HTML as PHP »

If applied, the widget markup file downloads.

Sent Tweet for answers :

Does one.com support this directive

Update 19 aug 2010 :

Got the answer : AddType will not work etc...

Well, this problem is not unique. Some searching showed that it is common with other providers as well. See this discussion :

Make PHP to work in your HTML files with .htacess

So now we have to find a solution for at least the iWeb Widget issue. And as per usual, I found one.

Here's how to proceed.

In the Finder do Command-Shift-G and paste this line :

/Applications/iWeb.app/Contents/Resources/Widgets/

Hit Return.

Right-click file HTMLRegion.iwdgt and choose Show package content from the pop-up menu.

Open file Info.plist in either the Property List Editor (part of Xcode) or a Plain Text editor.

Find this :

<key>DynamicResourceValuePrefsKeys</key>
<dict>
<key>x-html-markup</key>
<string>$WIDGET_ID_markup.html</string>
</dict>

and change the extention to php.

<string>$WIDGET_ID_markup.php</string>

Save the file (you need Administrator right to do this) and start iWeb.

The drawback is that the HTML Snippet behaves differently now. When you add code it also shows the code it will add when you publish the pages. The HTML Snippet expands when more code is added. It doesn't take the various widths and heights of <divs> into account. You have to manually resize the HTML Snippet yourself.

But it will publish the widget markup file as php.

So use it when you feel certain you can cope with it.

You may have to update pages with the old extension.

And if you haven't been there yet, here's a sample page.

Succesfully migrated from MobileMe to One.com

Well, I made the step to migrate my webpages from MobileMe to One.com.

Here are the steps I took with the date/time :

15-aug-2011 — 21:00 : Signed up at One.com.

15-aug-2011 — 21:10 : Received confirmation from One.com and instructions how to transfer the domainname.

15-aug-2011 — 21:21 : Sent a request for an Authorization Identification ID (Auth-ID) to domainname hoster KPN to transfer the domainname to One.com.

16-aug-2011 — 07:07 : Received Auth-ID and sent it One.com for processing.

16-aug-2011 — 08:24 : Received and confirmed message from ascio.com (domainname hoster in Denmark) to transfer domainname.

16-aug-2011 — 21:15 : Received and confirmed message from opensrs.com to transfer domainname from Tucows to Ascio.

17-aug-2011 — 11:17 : Received message from One.com that domainname transfer was complete.

17-aug-2011 — 11:30 : Mail working under domainname.

17-aug-2011 — 11:45 : Website working on new server.

; <<>> DiG 9.6.0-APPLE-P2 <<>> www.wyodor.net ns +multiline +nocomments +nocmd +noquestion +nostats +search
;; global options: +cmd
wyodor.net. 900 IN SOA ns01.one.com. hostmaster.one.com. (
2004000000 ; serial 10800 ; refresh (3 hours)
1800 ; retry (30 minutes)
1209600 ; expire (2 weeks)
900 ; minimum (15 minutes)

Depending on where you live and which DNS Server you use, it takes some time for the new domainname settings to propagate through the internet. At the bottom of my Homepage you'll see that it's hosted at One.com.

While waiting for the transfer, I downloaded my pages, and everything else, from iDisk to a folder on my computer. All in All it was some 2,75GB.

I used Cyberduck to upload everything that was in the iDisk > Web > Sites folder.

It took a few hours to upload about 2GB, most of which were about 1GB of movies.

The website at MobileMe can still be looked at : http://web.me.com/wyodor/

The website can also be reached at http://wyodor.net.

Other subdomains default to a server elsewhere. I use it to prepare pages, new ideas and other stuff.

Common e-mail names like webmaster, postmaster and info are now supported with my domainname.

iWeb : Another table example

Added an iWeb webpage with a <table> made in iWork's Numbers and Textedit.

Car comparison chart

Looks nice, as always.

Read the note about the different height in different browsers.

Read Create and add a TABLE in iWeb to learn how to do it.

HTML as PHP

With a proper configuration on the server you can use webpages with a html extention as php files.

The question was raised in the iWeb forum at Apple Discussions.

Here's an explanation :

Execute PHP from a .html File

I used this :

AddType application/x-httpd-php .html

Here's a widget_markup file. You won't see anything php in the source :

http://dailynews.webege.com/phpdemo/widget1_markup.html

This is what I pasted in the HTML Snippet :

<?php
echo("hello world\n");
?>

How to create a .htaccess file on the server, read this :

http://iweb.dailynews.webege.com/PHP_parse_error.html

UPDATE

To make the server check for php code in the widget-markup files only, use this code :

<files widget*.html>
AddType application/x-httpd-php .html
</files>

And to avoid a php error with the iWeb page, make sure this line is present in the .htaccess file :

# to prevent the php parse error
php_flag short_open_tag off

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 a plaintext document (I use Fraise, formerly Smultron) 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.

Google Analytics — Besturingssystemen

In tegenstelling tot een hoop mensen in het iWeb Discussions forum ben ik niet gefrustreerd als ik niet #1 ben bij Google. Sterker nog, een hoop van die lui zijn volledig getraumatiseerd als hun kut webpaginaatje niet wordt gevonden.

Aangemoedigd door allerlei SEO FUD Meisters verspillen ze hun tijd met allerlei programmas om hun ranking te verbeteren.

En als je dan hun paginaatje ziet, vraag je je af waarom je ze wilt vinden.

Omdat ik toch wel nieuwsgierig ben naar wie er zoal m'n website bezoeken, heb ik Google Analytics op een paar paginas aangebracht.

Ik ga niet alle statistieken tonen, wellicht later eens, maar één staatje is aardig om te zien. De besturingssystemen. Dan blijkt dat de Apple iPad reeds na een maand op een verdienstelijke 3e plaats staat.

Vermoedelijk komt dat omdat ik zelf met de iPad Simulator mij website bezoek om te zien hoe een en ander in beeld komt.

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 on 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.

10.000 punten in Apple Discussions

Vandaag de 10.000 punten barriere doorbroken.

Sinds de laatste keer dat ik dit meldde, 9000 punten in Apple Discussions , weer 1.000 punten erbij.

Nog 40.000 punten tot level 5.

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