tutorial gratis: Juli 2011

Minggu, 24 Juli 2011

Google Blogger Page Elements Tags For Layouts

MenuHome: How Blogger Data Tags Work
Page Elements Tags For Layouts in Blogger
Available Data Tags in Blogger
HTML Template Syntax in Blogger

The <body> section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template. Questions?

Each section in your template has an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

A <b:section> tag can have the following attributes:

id - (Required) A unique name, with letters and numbers only.
class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

In its simplest form, a widget is represented by a single tag, which is basically just a placeholder indicating how the widget should be handled in the Page Elements tab. The actual data for any given widget is stored in the Blogger database and only accessed when the widget needs to be displayed. Some examples of widgets (one for a page header and one for a list) are:

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

A widget may have the following attributes:

id - (Required) May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
locked - (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
title - (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.
pageType - (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)

The types of widgets you can specify are:

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

Each widget can also be written out in an expanded form, detailing the complete layout and contents for that widget. This is what you'll see, for instance, if you download your template from the Edit HTML tab to make a backup. Usually, you won't need to work with widgets in this mode, since it's simpler to just modify them from the Page Elements tab. However, if you want to know more, you can read about the HTML Template Syntax in Google Blogger.

Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. So, you're welcome to refer to, for example, div#header or div#myList in your CSS if you want to. Questions? Let me know!

◀ How Blogger Data Tags WorkAvailable Data Tags ▶

Google Blogger HTML Template Syntax

MenuHome: How Blogger Data Tags Work
Page Elements Tags For Layouts in Blogger
Available Data Tags in Blogger
HTML Template Syntax in Blogger

The basic <b:widget> tags for creating widgets are described in Page Elements Tags For Layouts in Google Blogger. If you just want to use the Page Elements tab to work with everything, then that's all you need to know. However, if you want more fine-grained control, this article describes what you can put inside a widget, if you're working in the "Expand Widget Templates" mode of the Edit HTML page. Questions?

The first thing to do is to add a closing tag. So this:

<b:widget [...attributes...] />
becomes this:

<b:widget [...attributes...]>
</b:widget>

Now with that out of the way, let's talk about what you can put between those tags.

Includes

Widget content is contained in "includable" sections, which have this format:

<b:includable id='main' var='thiswidget'>
[insert whatever content you want here]
</b:includable>

The attributes are as follows:

id: (Required) A unique identifier made up of letters and numbers.
var: (Optional) An identifier made up of letters and numbers, for referencing data within this section. (See the data section below.)

Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need.

If you make more includables with different IDs, they will not be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with <b:include name='new' /> and it will display that way.

The attributes for the b:include tag are as follows:

name: (Required) An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
data: (Optional) An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.

Here is a simple example demonstrating the use of b:includable and b:include. Loops and data are described later in this article. The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "i" and the included section references it as its var "p", then prints the title.

<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>

<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>

Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)

Data

The data: tag is arguably one of the most important ones, since it's the avenue that brings in all of your actual content. Some examples of this tag are:

<data:title/>
or

<data:photo.url/>

The first example is simplest, and will work in most widgets, since most widgets have titles. All it does is print out the title of the widget. The second example shows a more complex variable, from which we select a particular component. A photo, say in the context of a profile widget, may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.

There is a great deal of data that you can access with the data: tag, and it varies depending on which widget you're working with. We've got a All Available Data Tags in Google Blogger to help you find the data you need.

Loops

The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:

<b:loop var='identifier' values='set-of-data'>
[repeated content goes here]
</b:loop>

The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. A common convention is to simply call this "i". The set of data you specify for the values can be any piece of data described in the Available Data Tags in Google Blogger as being a list of items. For instance, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.

<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>

Notice how "i" takes on the value of each post in turn, so you can get the title from each one.

If / Else

You can use the b:if and b:else tags to display content in some places but not others. The general format is this:

<b:if cond='condition'>
[content to display if condition is true]
<b:else/>
[content to display if condition is false]
</b:if>

The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:

<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.
<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).
<b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.
<b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.

Unfortunately Blogger template does NOT support declaring and using custom variables. This is surprising and inconvenient to many of us. Let's keep our fingers crossed that Google will add this feature in the future..
Now in Google Blogger's HTML template, you know how the layout tags work, you know all the available tags that give you data regarding this post, and you know the logic syntax to manipulate those data. You should be able to modify the template to do whatever you need within the capabilities of the language! Questions?

◀ Available Data Tags

Sabtu, 23 Juli 2011

Google Blogger Available Data Tags

MenuHome: How Blogger Data Tags Work
Page Elements Tags For Layouts in Blogger
Available Data Tags in Blogger
HTML Template Syntax in Blogger

As mentioned in the HTML Template Syntax in Google Blogger post, there are many different tags you can use to include specific pieces of data in your template. They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url. Questions?

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.

Globally Available Data
Page Header
Blog Posts
Blog Archives
Profile
Text / HTML / JavaScript
Feed
Picture
Labels
List
Link List
Logo

Globally Available Data

This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.

title: The blog's title.
pageType: The type of the current page. One of 'item', 'archive', or 'index'.
url: The URL of the current page.
homepageUrl: The homepage of the blog.
pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
encoding: The encoding to use for the blog, e.g. UTF-8.
languageDirection: Either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
feedLinks: The autodiscovery feed links for the page header.

Page Header

This is a simple widget with just two pieces of data. They can be referenced simply as <data:title/> and <data:description/>.

title: The blog's title.
description: The blog's description.

Blog Posts

This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.

feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
- url: The feed URL.
- name: The feed name (i.e. 'Posts' or 'Comments').
- feedType: The type of feed (Atom or RSS).
- mimeType: The mime type of the feed.
olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
olderPageTitle: Title of the link to the older page of posts.
newerPageUrl: The newer equivalent of olderPageUrl.
newerPageTitle: The newer equivalent of olderPageTitle.
commentLabel: The phrase to use to show the number of comments, e.g. "comments."
authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."
timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."
postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."
backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."
posts: A list of all posts for this page. Each post contains the following:
- dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
- id: The numeric post ID.
- title: The post's title.
- body: The content of the post.
- author: The display name of the post author.
- url: The permalink of this post.
- timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.
- labels: The list of the post's labels. Each label contains the following:
  - name: The label text.
  - url: The URL of the page that lists all posts in this blog with this label.
  - isLast: True or false. Whether this label is the last one in the list (useful for placing commas).
- allowComments: 'True' if this post allows comments.
- numComments: The number of comments on this post.
- showBacklinks: Whether to show backlinks for this post.
- numBacklinks: Number of backlinks for this post.
- addCommentUrl: The URL of the 'add a comment' form for this post.
- emailPostUrl: The URL of the 'email this post' form for this post.
- editUrl: The URL of the edit form for this post.
- feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
  - url: The feed URL.
  - name: The feed name (e.g. 'Posts' or 'Comments').
  - feedType: The type of feed (Atom or RSS).
  - mimeType: The mime type of the feed.
- comments: A list of all comments for this post (on item pages only). Each contains the following:
  - id: The numeric ID of the comment.
  - body: The body of the comment.
  - timestamp: The time the comment was created.
  - author: The display name of the comment's author, or 'Anonymous'.
  - authorUrl: URL of the comment author's profile, if the comment is not anonymous.
  - deleteUrl: The URL for deleting this comment.
  - isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.

title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
- name: The name of this archive interval, e.g. "August 2006."
- url: The link to the page containing posts from this interval.
- post-count: How many posts there are in this interval.

Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.

title: The title of the widget.
userUrl: The author's profile URL.
location: The location from the author's profile.
aboutme: The "About Me" information from the profile.
displayname: The author's display name.
photo: The user's profile photo, made up of the following:
- url: The photo URL.
- width: The photo's width, in pixels.
- height: The photo's height, in pixels.
- alt: The "alt" text for the photo.

On team blogs, the profile widget contains less information about more authors, as follows.

title: The title of the widget.
authors: The list of all authors, each of which contains the following:
- displayname: The author's display name.
- userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.

title: The widget's title.
content: The content of the widget.

Feed Widget

A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.

title: The widget's title.
feedUrl: The URL of the feed.

Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.

title: The title of the widget.
sourceUrl: The URL of the image.
width: The image's width, in pixels.
height: The image's height, in pixels.
caption: The image caption.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.

title: The widget title.
labels: The list of labels, each of which contains:
- name: The text of the label.
- count: How many posts have this label.
- url: A link to a page displaying posts with this label.

List Widget

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.

title: The widget title.
items: The list of items.

Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.

title: The widget title.
links: The list of links, each of which contains:
- name: The link's text.
- target: The link's URL.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

fullButton: The URL of the Blogger button you've selected.

Questions? Let me know!

◀ Page Elements Tags For LayoutsHTML Template Syntax ▶

How Google Blogger Data Tags Work

MenuHome: How Blogger Data Tags Work
Page Elements Tags For Layouts in Blogger
Available Data Tags in Blogger
HTML Template Syntax in Blogger

Google Blogger is one of the most popular blogs. You sign up for an account and get a blog going within minutes. It offers much flexibility in making the blog the way you want it to be but not without some knowledge and finesse. Read on to know exactly how to access data related to the current post and how to manipulate them with loops and conditionals.

When you log into your Blogger account and go to Design -> Edit HTML and check 'Expand Widget Template you see a bunch of Blogger specific tags interspersed with HTML code. Here's an example:

...
<b:loop values='data:post.comments' var='comment'> 
  <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
      <data:comment.authorAvatarImage/>
    </b:if>
    <b:if cond='data:comment.authorUrl'>
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
      <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
      </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  </dd>
  <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p>
        <data:comment.body/>
      </p>
    </b:if>
  </dd>
</b:loop>
...

In the Blogger HTML template we see regular HTML tags such as <p> and CSS styling class inside HTML tags. But what about other tags that are NOT HTML tags? What is "data:post.comments"? What is "b:loop" tag? What is "b:if" tag? How does the syntax work?

Basically they are Google Blogger's way of showing each post's data and manipulating them with some simple logic. For example "data:post.comments" store all the comments of this post, and b:loop loops through them one by one. You can identify basic data of a post including the post's title, URL, date and time of the post, etc. However without a comprehensive tutorial that goes through all the available data tags and programming logic syntax how do we know what data are available and how we can manipulate them?
To my dismay I cannot find much help on Google with keywords like "blogger html template tutorial", "blogger data tags help", "blogger widget tags syntax", "blogger tags language tutorial". I finally found some help but they are so hidden on the web that I decided to write a post on them to bring more visibility to where people can find help!

Basically you need to understand three things: element tags for layout in Blogger, available data tags in Blogger, and syntax to manipulate them in Blogger's template language.

Without further ado let's look at the available data tags in Blogger! Questions?

Page Elements Tags For Layouts ▶

Reverse the Order Of Comments In Google Blogger

Q: How can I reverse the order of comments of each blog in Google Blogger?

By default Google Blogger orders the comments of each post in the ascending order of recentness, meaning that the most recent comment shows up last. How uncool! Did it ever occur to them that people would like to see the most recent comment first? How do I show the most recent comments first? How do I show the comments in the descending order of recentness? This post will first describe the issue and then recommend a fix that works!

The Problem
Let's see if there's a way to fix this issue natively in Blogger's widget tag language.

Log into your Blogger account and go to Design -> Edit HTML and check 'Expand Widget Templates' you'll see the following (I put the 'comment-footer' section above 'comment-body' to fit my blog's style):

...
<b:loop values='data:post.comments' var='comment'> 
  <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
      <data:comment.authorAvatarImage/>
    </b:if>
    <b:if cond='data:comment.authorUrl'>
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
      <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
      </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  </dd>
  <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p>
        <data:comment.body/>
      </p>
    </b:if>
  </dd>
</b:loop>
...

The key line is this:

<b:loop values='data:post.comments' var='comment'>
This line basically loops through each comment for this post. To reverse the order of these comments you'll need a way to indicate you want to loop starting at the most recent comment and work your way through the older comments. But HOW? Unfortunately there is NO WAY to do it natively in Blogger's widget tags for layout! How frustrating!

Luckily you can use the almighty Javascript to manipulate the DOM and reverse the order of the comments! Below we'll discuss this solution. Questions? Let me know!

Solution: Use Javascript
To use the Javascript solution here are the steps you need to do. I assume you've already created an external Javascript file (mine is called my.js) and referenced it within <head> section in your HTML template. Your Javascript file should contain the Javascript code I'll be discussing in this post.

In STEP 1 wrap all components of a comment in a DIV. Each comment has three components: author, body, footer. Once they are wrapped inside one DIV, you can manipulate the comments much more easily. This is not a necessary step but it helps organize comments.

In STEP 2 you write a Javascript function to collect all the comment nodes and insert them into the DOM in the reverse order.

Finally, in STEP 3, call the Javascript function and see that the comments are reversed! Obviously this solution only works if Javascript is enabled, but in today's world of browsers you can pretty much assume that this is the case.

Next let's look at each step in detail below!

STEP 1: Group each comment into one DIV block
Log into your Blogger account and go to Design -> Edit HTML and check 'Expand Widget Templates' and locate the following block of code:

<b:loop values='data:post.comments' var='comment'> 
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
      ...
    </dt>
    <dd class='comment-footer'>
      ...
    </dd>
    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
      ...
    </dd>
</b:loop>

As you can see each comment consists of the author, footer (date and time, etc.), and body. Again I've put the 'comment-footer' section above 'comment-body' to fit my blog's style. Change it to the following:

<b:loop values='data:post.comments' var='comment'> 
  <div class='comment-block'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
      ...
    </dt>
    <dd class='comment-footer'>
      ...
    </dd>
    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
      ...
    </dd>
  </div>
</b:loop>

Now you can see that we've grouped the 'comment-author' block, 'comment-footer' block, and 'comment-body' block inside one DIV block so that we can easily manipulate each comment!

STEP 2: Write a Javascript Function
Now let's open up the external Javascript file referenced by your blog's HTML template. In it we need to write a Javascript function to manipulate the order of comments. Here's the code:

function reverseComments() {
 var commentList = document.querySelectorAll("div.comment-block");

 for(var i=0;i< commentList.length;i++) {
  var node = commentList[i];
  node.parentNode.insertBefore(node, node.parentNode.firstChild);
 }
}

The way the function works is simple. It selects all the DIV blocks with class set to 'comment-block'; then it loops through each comment and insert it again in the reverse order. Once it's done you get the same comments in the reverse order!In fact this is Javascript and as such you can manipulate the comments any way you want. You can do things like show only the first 3 comments and have the rest hidden which become visible upon clicking a button that says "See more comments". The sky is the limit!

STEP 3: Call the Javascript functionNow you simply call the function 'reverseComments()' where appropriate! You MUST call it when the DOM is ready! I use jQuery, so I call reverseComments() inside the block of $(document).ready(function() { ... }); in my external Javascript file. If you don't use jQuery simply call the function in the following manner:

window.onload=function(){
  reverseComments();
}

Questions? Let me know!

Minggu, 17 Juli 2011

Putty Session Times Out Too Fast! Let's NEVER time out!

When I use Putty to run an SSH session it always times out too quickly. How do I make it so that the session never times out?
Putty is one of the most popular Windows based network connection clients. The protocols it supports include SSH, Telnet, Rlogin, Serial, Raw. Whenever I ssh into my ssh server and wait a bit the session times out! The reason is my SSH server sets a timeout value and when my inactivity exceeds that value the session times out. When it happens and when I type something the following dialog window pops up:

Isn't it annoying? How the hell do I tell the session to NEVER time out? One way is to configure your remote server to never time out. However it may be complicated and you may not have the permission to do so. Luckily there's a way for Putty to help you achieve this goal!

Solution
You can actually tell Putty to keep sending packets to the remote server so that the server thinks the session is alive and will not time out. Isn't that nice? Simply follow the following steps.

1. Create a session profile!
Fill in the session credentials of the session you regularly access by filling out the following fields: Host Name (or IP address), Port, Connection type. A sample screen shot looks like this:

2. Configure your session profile!
Go to Connection on the left tree and you should see the following screen shot:

The red rectangle highlights what you need to change. The value of 'Seconds between keepalives (0 to turn off)' is the number of seconds between each two null packets sent to the destination server to keep the session alive. Simply change the value to something like 10. Keep in mind the value depends on how quickly your remote server times out your session when you are inactive. If you find that your session still times out set the value lower.

3. Save your session profile!
Click on Session on the left to go back to the session window which looks like:

Give it a name in the 'Saved Sessions' field. In the example the value of that field is 'daltrac'. Then click on Save button. Now you've saved this session profile. Whenever you want to access a session created by this profile simply click on it in the saved session list and click on Open button!

Now you should be able to run the session and keep the session indefinitely without it timing out. Again this is because Putty keeps sending packets to the remote server to make it think that the session is alive.

If you have any questions please let me know and I will do my best to help you!

Subclipse "SVN Cannot Create Tunnel" Error

When I check out SVN project in Eclipse via Subclipse plugin it fails and displays an error dialog "SVN: can't create tunnel". How do I fix it?
A few definitions first. Eclipse is a popular IDE for developing software, particularly Java, PHP, and C++. Subclipse is a plugin that can be installed on Eclipse making SVN tools available to the IDE's user. SVN is Subversion which is one of the most popular free source control software applications.

When I installed Subclipse on Eclipse on Windows 7 platform I didn't have trouble checking out and manipulating my SVN project which is hosted somewhere remotely. However when my friend did he saw the following error when trying to check out an SVN project:

If you are using SVN command line then the SVN command to check out a project looks like 'svn co svn+ssh://...'

How do I fix this error?

The Issue
When you check out an SVN project two protocols are needed: SSH, SVN. That's they the SVN project URL is prefixed with 'svn+ssh://'. This combination ensures that your communication with the SVN server is encrypted and secure. This means that Eclipse needs to know how the SSH protocol works. Below we'll discuss the solution.

Solution
Simply download any SSH client! Such tools include Putty and TortoiseSVN. Download Putty and reinstall Subclipse and see if the problem goes away. It should because when I installed Eclipse and Subclipse I already had Putty installed, and I never had this issue.

If your problem still exists for whatever reason, install TortoiseSVN and tell Subversion how to run SSH protocol by following these steps:

Install TortoiseSVN. Download the latest TortoiseSVN from their official website and install it.
Locate Subversion's configuration file. If you are using Windows 7 or Windows Vista it should be located at C:\Users\[User]\AppData\Roaming\Subversion\config. If you are using Windows XP it should be located at C:\Documents and Settings\%USERID%\Application Data\Subversion\config.
Edit Subversion's configuration file. Open it and locate the line where 'ssh' is commented out as follows "# ssh = $SVN_SSH ssh". This is where you need to let SVN know where the SSH executable file is. If you are using TortoiseSVN then change the line to 'ssh = C:/Program Files/TortoiseSVN/bin/TortoisePlink.exe'. If you don't want to enter user name and password every time you use SVN then change the line to 'ssh = C:/Program Files/TortoiseSVN/bin/TortoisePlink.exe -l user -pw password'
Check out your SVN project in Eclipse again

If you have any questions please let me know and I will do my best to help you!

Where Can I Find Multi Language CD or DVD?

Background
When my cousin's wife's baby boy was just born I was brainstorming on what gift I should get them. They had absolutely everything - baby clothes, diapers, baby stroller, cradle, infant car seat, ... You name it and they got it!

Baby's brain
It is scientifically proven that when an infant is born they have up to 6 months for their brain to be fully developed. During this time whatever information their brain receives becomes part of their brain for eternity! Imagine how cool it is. What they learn during this period of time becomes part of them for the rest of their lives. The bad thing is if they learn something bad or get scared by something they may be scared by it for the rest of their lives..

I know what to get the baby boy!
Then I suddenly realized that I should take the direction where the gift would be educational and help the baby intellectually. Why not get them a set of multi language CDs or DVDs so that when he grows up he'll be able to speak 8 languages?

So where do I find CDs that speak multiple languages? More importantly how do I make sure the speaker does NOT speak improper content in those languages? It turns out it's extremely DIFFICULT to locate such CDs or DVDs! Do a search on Google and you'll see what I mean.

Solution - 1st part
One idea suddenly struck me - online radio stations. There are many English online radio stations that air popular channels' content 24/7! If such radio stations exist for English channels they must exist for Chinese, German, Japanese, Spanish, French, Russian channels!

Then I found this wonderful online radio website - http://tunein.com/. "TuneIn gives you access to over 50,000 of the world's radio stations so you can find and listen to unlimited music, sports and talk radio." You simply search for the language you want to find radios for and you see a list of relevant results! For example if you are looking for Spanish radios type 'Spanish' in the search box and Search and the URL will become http://tunein.com/search/?query=Spanish in which you'll see all the Spanish channels! Here's a list of radios of various languages all over the world (burn them on a CD or a DVD and you'll get a multi language CD or DVD):

English: http://tunein.com/search/?query=English
Chinese: http://tunein.com/search/?query=Chinese
Mandarin: http://tunein.com/search/?query=Mandarin
Spanish: http://tunein.com/search/?query=Spanish
Portuguese: http://tunein.com/search/?query=Portuguese
Hindi: http://tunein.com/search/?query=Hindi
Arabic: http://tunein.com/search/?query=Arabic
Japanese: http://tunein.com/search/?query=Japanese
German: http://tunein.com/search/?query=German
French: http://tunein.com/search/?query=French
Italian: http://tunein.com/search/?query=Italian
Russian: http://tunein.com/search/?query=Russian
Malaysian: http://tunein.com/search/?query=Malaysian
Taiwanese: http://tunein.com/search/?query=Taiwanese
Korean: http://tunein.com/search/?query=Korean
Turkish: http://tunein.com/search/?query=Turkish
Vietnamese: http://tunein.com/search/?query=Vietnamese
Polish: http://tunein.com/search/?query=Polish

Solution - 2nd part
However if I just email my cousin and his wife this list of online radio station URLs of different languages in the world it seems too shabby doesn't it? As I suggested earlier you can burn them on a CD or a DVD and you'll get a multiple language CD or DVD! The problem is there is no audio file that contains the radio station's content. Here are two ways you can solve it:

Play the radio and direct audio output to audio input of your computer via a wire while recording the audio content with such software as Audacity. Once you are done burn the audio content onto a CD.
Buy the audio content directly from Amazon and burn it onto a CD. Simply go to Amazon and select 'MP3 Downloads' in the Search drop down menu and search for the language you are interested in such as 'Spanish'.

When my cousin and his wife got my present they were ecstatic! Let's hope their baby will pick up all these languages when he grows up...

tutorial gratis

Minggu, 24 Juli 2011

Google Blogger Page Elements Tags For Layouts

Google Blogger HTML Template Syntax

Includes

Data

Loops

If / Else

Sabtu, 23 Juli 2011

Google Blogger Available Data Tags

Globally Available Data

Page Header

Blog Posts

Blog Archives

Profile Widget

Text / HTML / JavaScript Widget

Feed Widget

Picture Widget

Labels Widget

List Widget

Link List Widget

Logo Widget

How Google Blogger Data Tags Work

Reverse the Order Of Comments In Google Blogger

Minggu, 17 Juli 2011

Putty Session Times Out Too Fast! Let's NEVER time out!

Subclipse "SVN Cannot Create Tunnel" Error

Where Can I Find Multi Language CD or DVD?

Labels

Blog Archive

Pengikut

membo