Nothing to see here, move along please. This blog is only used to allow me to communicate between my tablets and my PCs.

Tuesday, November 13, 2007

Using Google Docs to create Blogger Entries


The Blogger editor is not as rich as the Google Doc editor - it is OK for simple text but it restricts inserted images to reduced, low-resolution images that you have to click on to to see the original. I guess this is OK for photographs, but I want to include in-line screens-shots and diagrams in my Blog entries. Blogger also has problems rendering code fragments accurately.
I am using the Google Docs to edit Blogger entries and then publishing them to my Blog.

Screen-shots and Diagrams

You can store your images on another external web-server (e.g. Photobucket) and copy references back into a Blogger entry, but this adds extra steps into the work-flow.

Google Docs documents can have in-line images and their sizes and resolutions are not as severely restricted as they are in Blogger. For example, the following wide screen-shot renders faithfully:


Some of the Blogger templates truncate wide images, but others do not - I have not discovered the magic formula yet but the 'Simple II' template works OK.


Code Fragments

I was initially put off using Blogger because I have seen several Blogs where code fragments are shown that have all leading spaces removed. This makes the code hard to read, but for Python it also makes the code unusable because leading spaces are syntactically significant and it is not always possible to re-construct the original code by simply inserting new spaces. For example, the following:
function goodbyeornot(){
if (confirm("Do you want to exit?"))
{
alert("Thanks for Visiting!");
}
else
{
location.reload();
}
}
renders as:

function goodbyeornot(){
if (confirm("Do you want to exit?"))
{
alert("Thanks for Visiting!");
}
else
{
location.reload();
}
}

in Blogger.

This turned out to be a common complaint about Blogger and the only way around it is to edit the code in the HTML editor. A kind soul has made available a simple tool to format source code for inclusion in Blogger entries: formatmysourcecode.

However, if you want to use Google Docs to create and edit Blogger entries then, unless your are prepared to re-create the source code segments every time that you update your entry, then formatmysourcecode cannot help you.

Google Docs does allow you to type in/paste source code fragments into a document and they will retain leading spaces correctly. Fine. Unhappily, when you publish your document to Blogger the spaces get nuked. Grrrr....

The solution is to enclose your code fragments inside some html tags in Google Docs HTML editor. You need:

<blockquote><pre>
Your code here...
</pre><blockquote>
<HTML>
<TITLE>OnUnLoad example</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function goodbyeornot(){
if (confirm("Do you want to exit?"))
{
alert("Thanks for Visiting!");
}
else
{
location.reload();
// I also tried: location = "trap2.html";
}
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbyeornot()">
<H3>Example of onUnload event handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
I find that inserting the above three lines using the HTML editor and then switching to the GUI editor to actually enter/past the code works best - especially if you want to show some html code.


<HTML>
<TITLE>OnUnLoad example</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function goodbyeornot(){
if (confirm("Do you want to exit?"))
{
alert("Thanks for Visiting!");
}
else
{
location.reload();
// I also tried: location = "trap2.html";
}
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbyeornot()">
<H3>Example of onUnload event handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>

No comments: