cast42

Cast for two

Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Monday, April 14, 2008

About fonts : switched to Lucida Grande


After reading an article that complains that Apple mixes up the wrong font families, I checked the font of this blog. This blog is using the Tekka template (a style modified from glish). Low and behold, the font was Trebuchet MS. It's especially the last two letters that motivated me to try anonther font ;-). Therefore, I adapted the blogger style file and replace "Trebuchet MS" with "Lucida Grande". Since I'm not that much into style and taste things, why not follow the advice from the professionals ? Let me know if you like it.

Posted by cast42 at 9:45 AM 6 comments

Labels: , ,

Wednesday, February 13, 2008

Blogger in Draft announces Blog list

Blogger in Draft , the beta version of Google's blog service Blogger, aanounces a new feature. They provide a page element that you can easily add to your blog with blog links. The nice thing is that you can import the links to the feeds you read with Google Reader and make a selection out of them.

cast42
Uploaded with plasq's Skitch!

What is even more nice, is that the page element is not Javascript, but static HTML. This means that bots can crawl your page!

Posted by cast42 at 9:17 AM 0 comments

Labels: ,

Thursday, December 20, 2007

Updated Analytics script ga.js works with Google blogger

Google provided an updated script to call the new javascript ga.js to enable to track usage of html pages with Google Analytics.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://
ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-
analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxx-xx");
pageTracker._initData();
pageTracker._trackPageview();
</script>

I injected above code in to the template of this blog and everyting is now working fine. If you want to try it, Andy wrote an how to.

Posted by cast42 at 10:15 AM 0 comments

Labels: , ,

Sunday, September 16, 2007

Testing video upload in Blogger

Recently, Google's Blogger added the ability to upload video. While the video is uploaded you can continue working on your blogpost. Neat.
Here is the result:


This is a screenshot of how the post appears in Google Reader:

Also in Netvibes, the video appears (but twice ;-)).

This is the code generated (with long encoded URL's edited out):


<object width="320" height="266" class="BLOG_video_class"

   id="BLOG_video-c97b748c29cea499"

   classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">

   <param name="movie" value="http://www.blogger.com/img/videoplayer.swf?videoUrl=LONGVIDEOURL&nogvlm=1&thumbnailUrl=LONGTHUMBURL">

   <param name="bgcolor" value="#FFFFFF">

      <embed width="320" height="266" 

         src="http://www.blogger.com/img/videoplayer.swf?videoUrl=LONGVIDEOURL

            &nogvlm=1&thumbnailUrl=LONGTHUMBURL& 

            messagesUrl=video.google.com%2FFlashUiStrings.xlb%3Fframe%3Dflashstrings%26hl%3Den"

         type="application/x-shockwave-flash">

      </embed>

</object>
<a href="rtsp://rtsp-youtube.l.google.com/video.3gp?fmt=13&cid=c97b748c29cea499" type="video/3gpp">

   <img width="320" height="266" alt="video"

       src="http://video.google.com/ThumbnailServer2?app=blogger&contentid=c97b748c29cea499

      &offsetms=5000&itag=w320&sigh=f52nsu-i5tuyLzJ7tEY1Q8a5Y2M"

      class="BLOG_mobile_video_class" id="BLOG_mobile_video-c97b748c29cea499">

</a>

So if the Flash object can not be rendered, at least a link to a RTSP server with a 3GPP video is presented. The latter is probably the case on mobile browsers (Iphone?). The movie size is 320x266. Probably this corresponts to a default 4:3 aspect ratio and 320x240 pixels video surface. So there are 26 lines at the bottom for the controls. So if the the original footage has 16:9 format, black borders are added automatically so that aspect ratio is maintained.

Conclusion: Google Blogger upload works well, uploading goes fast and allows continuing editing while uploading goes on. Nicely done!

Posted by cast42 at 12:26 PM 0 comments

Labels: , , , , ,

Sunday, July 29, 2007

How to include a HTML page into blogger posts ? (final)

I already undertook three attemps (attempt 1, attempt 2 and attempt 3) to include a Google Sheet into a blogger post without much succes. I almost surrendered but I got a new idea. I started from the proposal I found in "Insert HTML page into another HTML page" that basically proposed the following code:

<!--[if IE]>
   <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
      <p>backup content</p>
   </object>
<![endif]-->
<!--[if !IE]> <-->
   <object type="text/html" data="some.html">
      <p>backup content</p>
   </object>
<!--> <![endif]-->

The above code is very good for direct inclusion into a HTML page, but Blogger filters out the conditionals for selecting the code based upon the user agent. So it's not the solution we're seeking for. But then I got another idea. Maybe I could insert the above code using Javascript that IS allowed to be inserted in Bloggers HTML. In that way, it's possible to circumvent the restriction in Blogger HTML. I pasted the code into a HTMl-to-Javascript convertor. This gave me:

<script language="JavaScript" type="text/javascript">
<!--
function writeJS(){
var url = 'http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true';

var str='';
str+='<!--[if IE]>';
str+='<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="'+url+'">';
str+='<p>backup content<\/p>';
str+='<\/object>';
str+='<![endif]-->';
str+=' <!--[if !IE]> <-->';
str+='<object type="text\/html" data="'+url+'">';
str+='<p>backup content<\/p>';
str+='<\/object>';
str+='<!--> <![endif]-->';
document.write(str);
}
writeJS();
//-->
</script>


that renders as:

Above code reders nicely in Firefox and Safari but not in Interet Explorer 6.
Therefore I changed the code such that in IE an iframe is displayed and otherwise an object. The code was put into javascript:

<script language="javaScript" type="text/javascript"    src="http://lode.nachtergaele.googlepages.com/includeHTML3.js">
</script>


and on IE6 it renders to:


So finally, we start to view some light:


  1. First, include into blogger a Javascript:

    <script language="JavaScript" src="http://lode.nachtergaele.googlepages.com/includeHTML3.js" type="text/javascript" ></script>

  2. Put in the Javascript file the following Javascript code:

    <!--
    function writeJS(){
    var str='';
    str+='<!--[if IE]>';
    str+=' <iframe src="http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true" width='550' height='370' frameborder='0'>';
    str+='<p>backup content</p>';
    str+='</iframe>';
    str+='<![endif]-->';
    str+='<!--[if !IE]> <-->';
    str+=' <object type="text/html" data="http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true" width='550' height='370' frameborder='0'>';
    str+=' <p>backup content</p>';
    str+=' </object>';
    str+='<!--> <![endif]-->';
    document.write(str);
    }
    writeJS();
    //-->
  3. Alternatively, Javascript can detect the user agent as well. This leads to the following code:

    <!--
    function writeJS(){
    var str='';
    if (navigator.appName.indexOf("Microsoft") != -1) {
       str+=" <iframe       src='http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true'       width='550' height='370' frameborder='0'>";
       str+='<p>backup content</p>';
       str+='</iframe>';
    } else {
       str+=" <object type='text/html'       data='http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true'       width='550' height='370' frameborder='0'>";
       str+=' <p>backup content</p>';
       str+=' </object>';
    }
    document.write(str);
    }
    writeJS();
    //-->

  4. And that wil do the trick. The Javascript code generates HTML code that includes an Iframe if viewed by Internet Explorer and an object for other browsers. I agree that this is maybe a big detour just to able to include an object. And hopefully it shows up in the feed readers....


In 50 ways to include HTML into a Blogger post an overview is given of all kinds of techniques and can be used for testing.

Posted by cast42 at 6:03 PM 3 comments

Labels: , ,

How to (not?) include a HTML page into blogger posts ? (continued 2)

Much to my despair, I noticed the Google Spreadsheet included in a blog post of this blog does not render nicely (even after some digging into the issue, see post1 and post2) in Microsoft Internet Explorer 6 and 7:
While reading Make Magazine in Google Reader, I noticed that the Youtube movie of post "Thomas Edsison hates cats" was coming trough nicely. I looked up the HTML code in the RSS feed and adapted the code I found for displaying inline HTML code. It boils down to something like this:

<![CDATA[<p>
<object data="URL to HTML page" type="text/html" width="520" height="350">
<embed src="URL to HTML page" type="text/html" width="520" height="350"></embed>
</object></p>
<p>Title of HTML Page <a href="URL to HTML page">Link</a></p>]]>

Unfortunatly, Blogger does not accept the <![CDATA[. It reports "tag is broken". I removed the CDATA:

<p>
<object data="URL to HTML page" type="text/html" width="520" height="350">
<embed src="URL to HTML page" type="text/html" width="520" height="350"></embed>
</object></p>
<p>Title of HTML Page <a href="URL to HTML page">Link</a></p>


which renders to (with URL of the Google Spreadsheet):





Blog of colleagues Juli 2007 Link


which renders on Microsoft Internet Exporer 6 as:

Bummer. The object does not display nicely. Ok, lets see what Google Reader makes from it:

Archhh. This is even worse. It must have been the CDATA. Why is Blogger not accepting that I put CDATA into a blogpost. Give me full control of the HTML in the feed please !
Or maybe, as a last resort conflicting with my open standards first DNA, I could try this (as a kind of revance ;-)): export the Google Sheet to Microsoft Excel and include the Excel sheet with MIME type : application/vnd.ms-excel
The code would be like this:

<p>
<object data="URL to HTML page" type="application/vnd.ms-excel" width="520" height="350">
<embed src="URL to HTML page" type="application/vnd.ms-excel" width="520" height="350"></embed>
</object></p>
<p>Title of HTML Page <a href="URL to HTML page">Link</a></p>

which causes Firefox 2.0.5 on OSX to pop up this dialogue:

Ok, I surrender. Maybe the Iframe code Google Sheets proposes it not that bad at all. If any body has a better idea, please let me know.

Posted by cast42 at 12:42 PM 0 comments

Labels: , , ,

Friday, July 27, 2007

How to include a HTML page into blogger posts ? (continued)

In How to include a HTML page into blogger posts ? I explored using the more general object tag to include an external page of HTML into a blogger post. You would for example want to do this when discussing a published Google Document Sheet. When checking the appearence of the post in the RSS reader Google Reader, I noticed that the alternate text showed up:

This brought me to an idea for an improvement. I took a screenshot of the Google Sheet as displayed in my browser and loaded up the picture to the blog post. Next I moved the blurb of code for the picture:

<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6fFWgw_EHUdXJ9ez9cL69nHhZWKtx-fGWF_glB7NmFob_7n_2G5KcUPFtB8iBBv1v30grM3GWevFiTlQo7jTnNgS1YUm2upPmP14c6fq3WHpLm8BSwIRsFl5fEZhR_BBqSGXpw/s1600-h/Screenshot_5.png">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6fFWgw_EHUdXJ9ez9cL69nHhZWKtx-fGWF_glB7NmFob_7n_2G5KcUPFtB8iBBv1v30grM3GWevFiTlQo7jTnNgS1YUm2upPmP14c6fq3WHpLm8BSwIRsFl5fEZhR_BBqSGXpw/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

into to object tag enclosure:

<object data="URL to HTML page" type="text/html" width="520" height="350">

<a onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6fFWgw_EHUdXJ9ez9cL69nHhZWKtx-fGWF_glB7NmFob_7n_2G5KcUPFtB8iBBv1v30grM3GWevFiTlQo7jTnNgS1YUm2upPmP14c6fq3WHpLm8BSwIRsFl5fEZhR_BBqSGXpw/s1600-h/Screenshot_5.png">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6fFWgw_EHUdXJ9ez9cL69nHhZWKtx-fGWF_glB7NmFob_7n_2G5KcUPFtB8iBBv1v30grM3GWevFiTlQo7jTnNgS1YUm2upPmP14c6fq3WHpLm8BSwIRsFl5fEZhR_BBqSGXpw/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

</object>

The result is that in Google Reader a picure of the Google sheet shows up:

If you want that the browser is directed to the published HTML page of the Google Sheet when clicking on the picture of the sheet, you can change the URL of the href of the pciture:

<object data="URL to HTML page" type="text/html" width="520" height="350">

<a onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="URL to HTML page">
<img style="display:block; margin:0px auto 10px;
text-align:center;cursor:pointer; cursor:hand;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6fFWgw_EHUdXJ9ez9cL69nHhZWKtx-fGWF_glB7NmFob_7n_2G5KcUPFtB8iBBv1v30grM3GWevFiTlQo7jTnNgS1YUm2upPmP14c6fq3WHpLm8BSwIRsFl5fEZhR_BBqSGXpw/s400/Screenshot_5.png"
border="0" alt=""id="BLOGGER_PHOTO_ID_5091774679559246658" /></a>

</object>


Of cource, you can also copy and past the HTML code directly into the blog post. Then you get this:
URLEst. ValuePage RankWebsite GraderTechnorati AuthorityTechnorati Rank

http://peterdecroubele.be205945237167,118

http://www.koenfillet.be$1910477--

http://www.werner.be94944928226,753

http://koenfillet.blogspot.com/44547756103,461

http://www.braincubes.be/23421241,367,488

http://castfortwo.blogspot.com/823668779,588

http://www.patdonnez.be/log/index.php80313--

http://detender.wordpress.com/5046310638,771

http://joro.wordpress.com/4224122,505,981

http://217.19.231.156/apps/blog_david/40259--

http://mertenswouter.com/blog/11050--

http://stielo.blogspot.com/206213,900,217

http://hetruimesop.blogspot.com/0043-7,931,033

http://jeroenvanaert.blogspot.com/0043-7,931,033

http://myjumps.blogspot.com/0042-7,931,033


which is not that bad. Only something with the first row went wrong.
A bit fiddling with the HTML code allows to obtain this:

URLEst. ValuePage RankWebsite GraderTechnorati AuthorityTechnorati Rank
http://peterdecroubele.be205945237167,118
http://www.koenfillet.be$1910477--
http://www.werner.be94944928226,753
http://koenfillet.blogspot.com/44547756103,461
http://www.braincubes.be/23421241,367,488
http://castfortwo.blogspot.com/823668779,588
http://www.patdonnez.be/log/index.php80313--
http://detender.wordpress.com/5046310638,771
http://joro.wordpress.com/4224122,505,981
http://217.19.231.156/apps/blog_david/40259--
http://mertenswouter.com/blog/11050 - -
http://stielo.blogspot.com/206213,900,217
http://hetruimesop.blogspot.com/0043-7,931,033
http://jeroenvanaert.blogspot.com/0043-7,931,033
http://myjumps.blogspot.com/0042-7,931,033


Every table row contained a bogus 
<td class="rAll"> </td>
that I just deleted.

Posted by cast42 at 11:04 AM 0 comments

Labels: , , , ,

Thursday, July 26, 2007

How to include a HTML page into blogger posts ?

In the previous post, I included HTML code generated from a published Google Sheet. To do so, I first used the code proposed when publishing a Google Document and selecting Blogger as target.

This is basically the HTML code Google proposes to post into the HTML code of post on Blogger:


<iframe src="URL to HTML page" frameborder="0" height="350" width="520">
</iframe>

This works when viewing the blog post in a browser, but when reading the post with a feed reader, the HTML iframe is sometimes ommitted. Recently, I read an interesting article "The object tag - embed content in valid strict HTML -" arguing for the use of the HTML object tag as follows:

<object data="URL to HTML page" type="text/html" width="520" height="350">
alt : <a href="URL to HTML page">alternate text</a>
</object>

The advantage of using the object tag is that the HTML object (the Googele sheet) appears when reading the blog post inline with netvibes:

In Google Reader, the alternate text appears (in this case the URL to the HTML of the document):

In iGoogle, it is even worse. There even the alternate text does not appear:

The above picture displays the Atom feed from Google (http://castfortwo.blogspot.com/feeds/posts/default) and the feed from feedburner (http://feeds.feedburner.com/cast42).

Conclusion is that even using the object tag is no ideal solution to include an exteral HTML page into a blog post. But if you opt to do it, the use of the object tag may be preferred instead of using an Iframe. In case you would know a better solution, do not hesitate to add a comment.

Posted by cast42 at 9:22 PM 0 comments

Labels: , , , , ,

Subscribe to: Posts (Atom)