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

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.

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

Weer een webhost erbij

In Apple Discussions weer zo'n iWeb figuur die goedkoop uit wil zijn. Ergens bij een gratis webhoster aangemeld (Tripod) waarmee je vergeven wordt van de reclame op je webpagina. En dan janken dat z'n iWeb paginaatje niet werk bij Internet Explorer gebruikers.

Dus proefondervindelijk maar eens op zoek gegaan naar een gratis aanbieders met alle toeters en bellen maar zonder reclame om te kijken wat het allemaal voorstelt.

Uiteindelijk bij 000webhost terecht gekomen.

Aangemeld en binnen een paar minuten online.

In iWeb een Site aangemaakt en met het ingebouwde ftp op de server gezet. Geen enkel probleem. En waarom ook niet.

Maar de webserver is verkeerd geconfigureerd. Elke iWeb pagina begint met de regel:

<?xml version="1.0" encoding="UTF-8"?>

Een webserver die z'n PHP.ini bestand niet goed heeft ingericht zorgt voor een PHP parse foutmelding.

Ik zou mezelf niet zijn als ik dit niet zou kunnen oplossen. Nou was ik al bekend met dit probleem. Zie onder andere dit artikel. Maar dat hield in dat je het PHP.ini bestand zou moeten wijzigen. En daar kon je niet bij. Dus maar gezocht naar een htaccess oplossing.

En ook hier is Google je vriend : short_open_tag htaccess. Dit dus :

php_flag short_open_tag off

Om een lang verhaal kort te maken, ik heb er een verhaaltje van gemaakt.

Hiero : http://dailynews.webege.com/

Hopelijk heeft een ieder er iets aan.

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.

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.

Embedding Bing Maps

Embedding Bing Maps is slightly more complex than embedding Google Maps, since Bing does not provide the embed code. But it is possible. Here's how.

Go to Bing Maps and navigate to your desired location.

Click the share link and copy the URL. To verify, open a new browser window and paste the URL in the addressfield and hit return.

To embed the page in a webpage or blog, use this HTML code:

<div style="width: 685px; height: 700px; overflow: hidden;">
  <iframe src="the Bingmap URL" frameborder="0" width="685" height="700" scrolling="no"></iframe>
</div>

To see more of the map, click the close icon in the lefthand column. Or click the vertical divider in the middle.

The horizontal scrollbar is part of the Bing page and not of the DIV or IFRAME HTML element.

You can hide the logo and the search field, and center the result, by adding some extra code.

Paste this after scrolling ="no" : style="margin-top: -120px; margin-left: -5px"

Result: scrolling="no" style="margin-top: -120px; margin-left: -5px;">

This will hide the top of the Bingpage.

Note: to compensate for the -120px, the height of the DIV element must be decreased too (700px - 120px = 580px).

Note that different browsers will display the embedded map differently. So tinker with the settings.

Using the iWeb HTML Snippet

There are two ways to add custom HTML code in the HTML Snippet in iWeb.

The first way is for code that you normally would place in the body of a HTML webpage. The webpage does not require external JavaScript or CSS files or JavaScript or CSS code in the HEAD section of the webpage.

External Widgets like Google Maps, the IFRAME & DIV HTML elements and the OBJECT HTML element for displaying movies are such examples.

The second way you can apply when your HTML code in the body requires a JavaScript file of your own device or external CSS files or custom CSS code in the HEAD section you want to use for display purposes.

You can create a complete working HTML page in an external HTML Editor of your choice and simply paste the complete code in the HTML Snippet.

Examples are the Lytebox Slideshows, which require JavaScripts en CSS files in the parent of the page when using the IFRAME HTML element. See samples here.

On publishing, iWeb creates a widget1_markup.html file in a folder with the iWeb pagename. The widget1_markup.html files has a sequence number when there are more HTML Snippets in a page.

When using relative pathnames to files on your webserver, count three (3) directories down the path: src="../../../_iFrame/if_leeg.html" to escape from the iWeb site folder.

See also :

– absolute vs. relative pathnames
– inserting a webpage/file with the IFRAME HTML element

iWeb: Float text around objects

Video shows how to make text float around objects and/or HTML Snippets.

It is asssumed you have a basic understanding of iWeb. You know how to add objects, to give it a color, to move the objects around, etc.

The same applies to HTML Snippets.

Where does iWeb store its file?

Every day, every hour, every minute the question is raised in despair in the iWeb forum: Help I lost my file, where is it!!!

Yes, money is not enough the use a Mac.

Brains is!! Use it.

And if you still do not understand it.

Make changes to the iWeb pages, save the changes and remember the time you made them.

HTML5 Audio en meer Audio Embedding

In vervolg op mijn blog over HTML 5 Video en audio support geef ik hier links naar een ScreenCast en de HTML5 blogpagina bij Webkit.

CSS Tricks heeft een video uitleg van ca. 23 minuten. Daarin worden de diverse mogelijkheden getoond om audio bestanden in een webpagina te tonen. De screencast kwam ik tegen in Miro.

#59: Embedding Audio

Different Ways to Embed Audio

Op de Surfin' Safari (Webkit) blog pagina staat een verhandeling over het HTML5 Video element. Bekijk de pagina, maar vooral de broncode van die pagina hoe e.e.a. in zijn werk gaat.

Het beantwoordt indirect ook mijn opmerking over het vormgeven van de speler.

HTML5 Media Support

Zoals altijd: flink oefenen.

HTML 5 Video en audio support

Op de WWDC 2009 van Apple in San Francisco van vandaag werd gesproken over HTML 5 support voor de iPhone/iPod touch. Een van die ontwikkelingen is het gebruik van het VIDEO en AUDIO HTML element in plaats van het OBJECT/EMBED element.

Safari, ook voor de Desktop, ondersteunt HTML 5. Dus gelijk effe proberen.

De videos hieronder worden vertoond met het VIDEO HTML element. Zowel een .m4v, .flv als een .wmv video worden getoond. Wellicht omdat ik de Flip4Mac en Perian plugins gebruik, die weer door QuickTime worden gebruikt. Let ook op dat je nu geen pixels voor de controller hoeft toe te voegen om de juiste hoogte te krijgen. De width en height van de video voldoen. De controller zoemt in en uit beeld als je de muis over het beeld beweegt.

Firefox, Flock en Internet Explorer ondersteunen het niet en tonen de vervangende tekst.

Hieronder 3 bestanden: .m4v, .flv en .wmv. Bekijk de broncode voor de details.

Wil je specifieke eigenschappen van een videospeler, dan zal je toch de OBJECT code voor die betreffende speler moeten gebruiken. Zie voor dergelijke overzichten de diverse paginas op mijn website.

Verder merk ik dat niet alle attributen werken. Als autoplay="false" wordt aangebracht begint de film toch te spelen. Als je het helemaal weglaat, dan laadt wel de film maar het spelen moet je met de hand starten.

Nadeel in beide gevallen is dat de hele film direct wordt gedownload, ook al speel je 'm niet af. Flash Video en Silverlight spelers beginnen met laden op het moment van spelen. Zie de voorbeeldpaginas elders op mijn Site.

Al met al is het toch een goede ontwikkeling die een hoop gecodeer overbodig maakt. Helaas zal de grote massa met hun verouderde browser er nog niet aan toe zijn.

M4V

Autoplay staat uit.

FLV

Autoplay staat uit.

WMV

Autoplay staat aan.

Unicode tekens in een webpagina tonen

Een simpele uitleg met bewegend beeld over hoe je bijzondere tekens in een webpagina kunt tonen. Kijk hier voor wat paginas die ik in het verleden als vingeroefening heb gemaakt.

Het Lettertekenpalet, evenals Toetsenbordweergave, kan je in een menu tonen/kiezen als je het eerst bij de Systeemvoorkeuren > Landinstellingen hebt aangevinkt.

Hou er rekening mee dat niet elke browser, en zeker niet alle PCs met Windows, Unicode tekens kan tonen.

Dit is de demo tekstregel uit het flmpje:

Type the code here : ↩ and ↩ and display it in the browser.