Query7 » Programming

Resources for Learning Vim

logan — Mon, 23 May 2011 09:48:38 +0000

Over the last few months I’ve found myself using the Vim text editor an increasing amount. Below are some resources that I found particularly useful.

Venturing Into Vim

Jeffery Way, editor and author of Nettuts, has released a 4 part video tutorial series called Learning Vim From The Ground Up. The 4 videos total over 2 hours playtime and cost just $5. They are recorded on Mac OS X at a screen resolution of 1280×720. Way’s experience in screencasting really shows in these videos. He clearly communicates all of his points, step by step, at a good speed. These videos start with the assumption you know absolutely nothing about Vim so they are a great resource for a Vim user of any level.

Vim Cheatsheet

The folks at ViEmu.com (who produce Vim keybindings for MS Office and Visual Studio) have produced a printable Vim cheatsheet. The cheatsheet clearly lays out the lower and upper case functionality for each key as well as some general Vim commands. The text size and colour contrast makes it easy to read from a distance, I recommend you print it out.

VimCasts.org

Drew Neil produces short, focused Vim screencasts and posts them at VimCasts.org. They are typically 5-10 minutes in length and each focus on how to achieve or learn a particular feature of Vim. My favourite VimCast is about Synchronizing plugins with git submodules and pathogen. In it Neil walks you through setting up a directory which holds the .vimrc file and all vim plugins. He then shows how you can install Vim plugins as git submodules using the pathogen plugin for Vim.

vimtutor

vimtutor is an interactive learning application that comes bundled with Vim. It can be started by entering the command vimtutor into the shell. It should take a beginner around 30 minutes to complete. I recommend doing vimtutor daily until you can comfortably complete it without needing to actively think about the keys you are pressing.

Additional Reading

Kohana 3.1 Wiki Tutorial Routes

logan — Mon, 16 May 2011 07:39:43 +0000

In the original Kohana wiki application the URLs in the views were hardcoded. If we wanted to change the domain name or restructure a route we would need to go through the application and change every single URL.

Thankfully the Kohana Route class comes with a method url() which allows us to generate URLs to routes we have specified in the application. In the first tutorial we defined the following routes in application/bootstrap.php:

Route::set('wiki-edit', 'wiki//edit')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'edit_page',
	));

Route::set('wiki-save', 'wiki//save')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'save_page',
	));

Route::set('wiki-page', 'wiki/')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'view_page',
	));

Route::set('default', 'wiki')
	->defaults(array(
		'controller' => 'wiki',
		'action'     => 'view_page',
		'id'		 => 'index',
	));

Before we can generate routes we need to set some configuration options in application/bootstrap.php (line ~82). We need to specify the base_url and index_file attributes in the array passed to Kohana::init(). The application on my local install is located at 127.0.0.1/query7kwiki/index.php, so my Kohana::init() statement would read:

Kohana::init(array(
	'base_url'   => '/query7kwiki/',
	'index_file' => 'index.php'
));

In application/views/edit.php the form action attribute was hardcoded to the value /query7kwiki/index.php/wiki/. That can be replaced by:

 $page)); ?>

In application/views/single.php there is a link to the edit that specific page. We can replace the href of the anchor tag with:

 $page)); ?>

In the view application/views/create.php change the href of the create page link to:

 $page)); ?>

The wiki application is now portable and can safely be moved to a different server without functionality breaking.

Kohana 3.1 Wiki Tutorial

logan — Mon, 09 May 2011 06:09:52 +0000

In this tutorial you will learn how to create a simple wiki using the PHP framework Kohana version 3.1. Several years ago Siddharta Govindaraj created a screencast demonstrating how to create a wiki using Django, this is essentially the Kohana version of that. It covers using Kohana’s Routing, ORM and MVC systems. Full source code of the application is available on github.

The wiki application has 3 different pages:

/wiki/somepage/save – handles the saving of the page
/wiki/somepage/edit – displays a form that allows the user to edit the page
/wiki/somepage – displays the page

Configuration

We will be using the ORM module to query the database for our wiki pages so we must load it in the application/bootstrap.php file (Line ~99).

Kohana::modules(array(

	'database'   => MODPATH.'database',   // Database access
	'orm'        => MODPATH.'orm',        // Object Relationship Mapping

	));

We also need to specify our database configuration settings. This is done in application/config/database.php.

 array
  	(
  		'type'       => 'mysql',
  		'connection' => array(
  			'hostname'   => '127.0.0.1',
  			'username'   => 'root',
  			'password'   => 'root',
  			'persistent' => FALSE,
  			'database'   => 'query7kwiki',
  		),
  		'table_prefix' => '',
  		'charset'      => 'utf8',
  		'caching'      => FALSE,
  		'profiling'    => TRUE,
  	),
  );

  ?>

Model

Compared to most ORMs (Django, Doctrine, Propel), Kohana’s ORM is relatively light. You don’t need to specify the fields of your table as the Kohana ORM doesn’t attempt to generate the tables for you. It simply maps attribute names of the model object to field names in the database table. Be sure to check the Kohana Documentation for a detailed explanation of the ORM.

application/classes/model/page.php

class Model_Page extends ORM
{

	protected $_table_name = 'page';

	public function rules()
	{
		return array(

			'title' => array(
						array('not_empty')
							)

		);
	}

}

Execute the following SQL:

CREATE TABLE `page` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) NOT NULL ,
`content` TEXT NOT NULL
) ENGINE = MYISAM ;

Routing

I define all routes at the bottom of application/bootstrap.php, however if you are working on a large application it may beneficial in the long run to define them in a separate file and then include them into the bootstrap file.

Route::set() accepts 2 parameters. The first is the name of the route and the second is the URI pattern it should match. Because Route::set() returns an instance of Kohana_Route, we can chain the defaults method onto it. There we specify the controller and action that should be executed if the route is matched.

The section of the URI pattern is captured from the URI and automatically passed to the controller method as an argument.

Route::set('wiki-edit', 'wiki//edit')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'edit_page',
	));

Route::set('wiki-save', 'wiki//save')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'save_page',
	));

Route::set('wiki-page', 'wiki/')
	->defaults(array(
		'controller'=> 'wiki',
		'action'	=> 'view_page',
	));

Route::set('default', 'wiki')
	->defaults(array(
		'controller' => 'wiki',
		'action'     => 'view_page',
		'id'		 => 'index',
	));

Views

Read this tutorial on generating domain-independent, non hardcoded URLs

application/views/single.php


	
		<?php echo $page; ?>
	

	

		
		
			
		
		
		
			Edit

application/views/create.php


	
		<?php echo $page; ?> - Create
	

	

		
		This page does not exist. Create?

application/views/edit.php


	
		<?php echo $page; ?> - Edit
	

	

		 - Edit
		
			


				<?php echo $content; ?>

Controller

The wiki only has one controller, Controller_Wiki, located in application/classes/controller/wiki.php. All of the methods accept one parameter, the name of the page which is automatically passed by the URL Router.

The action_view_page() method will display the wiki page if it exists or a ‘create’ page if it does not exist. $single->loaded() will return true if the ORM returned a result, so if the page exists we load the ‘single’ view and attach the appropriate variables to the view, if it does not exist then we load the ‘create’ view.

public function action_view_page($page)
{

	$single = ORM::factory('page')
			->where('title', '=', $page)
			->find();

	if($single->loaded())
	{
		$v = View::factory('single');
		$v->page = $page;
		$v->content = $single->content;
				}
	else
	{
		$v = View::factory('create');
		$v->page = $page;
	}

	$this->response->body($v);

}

action_edit_page() returns the ‘edit’ page with the correct content field.

public function action_edit_page($page)
{
	$single = ORM::factory('page')
			->where('title', '=', $page)
			->find();

	if($single->loaded())
	{
		$content = $single->content;
	}
	else
	{
		$content = '';
	}

	$v = View::factory('edit');
	$v->page = $page;
	$v->content = $content;

	$this->response->body($v);
}

action_save_page() handles saving the page after the user submits the edit form. It first checks to see if the page exists. If it does exist then we update the content attribute of the model with whatever was posted in the form. If it doesn’t exist then we make a new page by instantiating a new model, assigning the title and content attributes and saving it.

public function action_save_page($page)
{
	$single = ORM::factory('page')
			->where('title', '=', $page)
			->find();

	$content = $this->request->post('content');

	if($single->loaded())
	{
		$single->content = $content;
		$single->save();
	}
	else
	{
		$new_single = new Model_Page();
		$new_single->title = $page;
		$new_single->content = $content;
		$new_single->save();
	}

	$this->request->redirect('http://127.0.0.1/query7kwiki/index.php/wiki/' . $page);

}

Full source code of the application is available on Github.

Tutorial Django Dojo DataGrid

logan — Mon, 18 Apr 2011 10:03:57 +0000

Dojo is an open source Javascript toolkit. It provides an easy way to access and modify the DOM as well as a rich user interface widget library. One of the most powerful widgets in the Dojo toolkit is DataGrid. It provides an easy way to represent what is essentially a cross between a spreadsheet and a table. In a recent Django project I needed to output the contents of a model into the DataGrid. Thanks to django-dojoserializer this is very easy.

Setup

We need the Python package django-dojoserializer. This can be installed by downloading the source and running

python setup.py install

or with setuptools using

easy_install django-dojoserializer

or with pip using

pip install django-dojoserializer

Then add django-dojoserializer to the INSTALLED_APPS tuple in settings.py.

Dojo will need to be linked correctly in the Django template. We need to require the dojox.grid.DataGrid and dojo.data.ItemFileReadStore classes.

Django Model

PROXY_TYPE_CHOICES = (

	('SOCKS4', 'SOCKS4'),
	('SOCKS5', 'SOCKS5'),
	('HTTP', 'HTTP'),

)

class Proxy(models.Model):
	ip = models.CharField(max_length=50)
	type = models.CharField(max_length=6, choices=PROXY_TYPE_CHOICES)
	alive = models.BooleanField(default=False)
	added = models.DateTimeField(auto_now=False, auto_now_add=True)
	last_checked = models.DateTimeField(auto_now=True, auto_now_add=False)

	def __unicode__(self):
		return self.ip

Django View

The view needs to display data from our model as JSON which is correctly formatted for the Dojo DataTable. Simply encoding the Django queryset as a JSON object would not work. Thankfully django-dojoserializer provides the dojoserializer.serialize() method which correctly formats our the queryset in a format the DataTable can read. The route /render/proxies maps to the following view:

from django.http import HttpResponse
from proxies.models import Proxy
from dojoserializer import serialize

def render_json(request):

	proxies = Proxy.objects.filter(alive=True)

	json_data = serialize(proxies)

	return HttpResponse(json_data, mimetype="application/json")

This gives the following output:

Defining the DataTable

We define the Dojo DataTable in two parts. The first is a Javascript representation of the structure of the DataTable, the second part is a

for where the DataTable will sit in markup. Note that each field attribute is the exact name of the corresponding field from the Django model. If the names do match the data will not display in the table.

var layoutProxies = [
            [{
                field: "ip",
                name: "IP",
                width: 'auto'
            },
            {
                field: "type",
                name: "Type",
                width: 'auto'
            },
            {
                field: "last_checked",
                name: "Last Checked",
                width: 10
            },
            {
                field: "alive",
                name: "Alive",
                width: 'auto'
            }

            ]];

Note the structure attribute of the div is set to the value of our structure. We will define proxyStore, the value of the store attribute below.

Connecting the DataTable to The Proxy Data

Finally we need to specify the proxyStore variable for the table to pull its data from. proxyStore is an instance of dojo.data.ItemFileReadStore(). We pass the URL of our JSON file and set urlPreventCache to true.

proxyStore = new dojo.data.ItemFileReadStore({url: '/render/proxies', urlPreventCache: true});

Which gives the final product:

NodeJS cURL Tutorial

logan — Mon, 28 Mar 2011 01:34:25 +0000

NodeJS is a powerful evented Javascript platform running on top of Google’s V8 javascript engine. Over the last year the popularity of NodeJS has increased greatly, as shown by the number of discussions on programming forums such as Hacker News, Reddit and Stackoverflow. Despite this NodeJS is still young and it falls short to Python and Ruby when it comes to the number and range of libraries and modules available.

The Problem

I wanted to convert one of my web scraping applications I made in PHP to NodeJS. The application interacts with SOCKS4 and SOCKS5 proxies using PHP’s cURL bindings. Unfortunately there are no cURL bindings (or SOCKS protocol wrappers) written for NodeJS. NodeJS does come with an HTTP client module that can issue web requests, however it doesn’t support SOCKS proxies.

The Solution

Although there are no specific NodeJS bindings for cURL, we can still issue cURL requests via the command line interface. NodeJS comes with the child_process module which easily allows us to start processes and read their output. Doing so is fairly straight forward. We just need to import the exec method from the child_process module and call it. The first parameter is the command we want to execute and the second is a callback function that accepts error, stdout, stderr.

The Code

var util = require('util');
var exec = require('child_process').exec;

var command = 'curl -sL -w "%{http_code} %{time_total}\\n" "http://query7.com" -o /dev/null'

child = exec(command, function(error, stdout, stderr){

	console.log('stdout: ' + stdout);
	console.log('stderr: ' + stderr);

	if(error !== null)
	{
		console.log('exec error: ' + error);
	}

});

This returns the HTTP code and time it took for the request to be issued:

stdout: 200 0.710

Conclusion

Although NodeJS is still young and bindings haven’t been made for alot of C libraries, the code above shows how you can still interact with the functionality they provide. That being said, the number of NodeJS modules is growing weekly. Be sure to keep an eye on the module wiki and npm registry for a list of modules.

Titanium Mobile Android Development: First Application

logan — Mon, 28 Feb 2011 08:35:39 +0000

In this series of tutorials we use Appcelerator’s Titanium Mobile platform to create Android applications. This tutorial walks you through developing and packaging your first Titanium application. Full source and packaged application is available on github.

The Application

The application itself is fairly basic but incorporates many techniques that you may need to use in your own apps. It fetches the latest 10 items off the Query7.com RSS feed and displays them in a TableView. If you click on one of the items Android will open the link in a web browser (Internet, Opera Mini, Firefox etc, whatever your default Android browser is).

The User Interface

The user interface has two Titanium view elements – a Window and a TableView. After creating both views we need to call the add method on the instance of Window to ensure the TableView shows on the page. Doing so is fairly straight forward:

Titanium.UI.setBackgroundColor('#000');

var win = Titanium.UI.createWindow({
    title:'Query7 RSS Feed',
    backgroundColor:'#000'
});

var data = [];

var tableview = Titanium.UI.createTableView({
	data:data,
	headerTitle: 'Query7 RSS',
	backgroundColor:'#000'
});

win.add(tableview);
win.open();

HTTP Requests

The next step is to retrieve the RSS feed from the Query7 blog. Titanium has a very nice HTTPClient object that allows us to perform requests similar to the way we would using Ajax/JS in the web browser. We specify an onload method that handles the response of the request and an open method in which we specify the type of request (GET/POST/PUT/DELETE) and the URL we are requesting. Finally we initiate the request by calling the send method.

var xhr = Titanium.Network.createHTTPClient();

xhr.onload = function()
{

	try
	{
		// manipulate response data here

	}
	catch(E)
	{
		alert(E);
	}

};

xhr.open('GET', 'http://feeds.feedburner.com/query7blog.rss');
xhr.send();

Parsing XML using Titanium

Even though we are coding in Javascript, we are not in a web browser environment, so the usual document and window objects do not exist. This means frameworks which make XML manipulation easy, such as jQuery and Mootools, will not work. Luckily Titanium offers us the DOMDocument object, which acts and has a similar API to the web browser document object.

In the code below we can get the output of the HTTP request and automatically turn it into a DOMDocument object by accessing it as this.responseXML.documentElement. If you just wanted to get the output as plain text, you would access it by this.responseText. Now that the DOMDocument instance is set up, we do a simple XPath query to get the title and iterate over the items to get the data about the individual posts.

// manipulate response data here

var doc = this.responseXML.documentElement;
var items = doc.getElementsByTagName('item');
var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;

var urls = new Array();

for(var c=0; c>items.length;c++)
{

	urls[c] = items.item(c).getElementsByTagName('link').item(0).text;

	postName = items.item(c).getElementsByTagName('title').item(0).text;
	postUrl = items.item(c).getElementsByTagName('link').item(0).text;

}

Populating the TableView

Now that we have the data from the RSS feed we can populate the TableView. To do this we create several Titanium.UI.TableViewRow objects and then append them to our TableView.

row = Titanium.UI.createTableViewRow({
			title: postName,
			backgroundColor:'#000',
			color: '#FF0'
		});

tableview.appendRow(row);

Click events, Intents

Now that we have data in the TableView we want to add functionality so that when an item in the TableView is clicked, the Android web browser will open to that specific post. Our code needs to listen for a click event on a TableViewRow and then launch a Titanium.Android.Intent.

row.addEventListener('click', function (e){

	var intent = Titanium.Android.createIntent({

			action: Titanium.Android.ACTION_VIEW,
			data: urls[e.index],

		});

	intent.addCategory(Titanium.Android.CATEGORY_BROWSABLE);
	Ti.Android.currentActivity.startActivity(intent);

});

Packaging

Now all we need to do is package our application into a .apk file so that it can be distributed among Android devices. We need to generate a key to sign our Android app. Run the command below in the MSDOS prompt. You will be asked some additional information such as your name or country. None of it is really important unless you intend to put this app on the Android Market. Remember the KEYALIASNAME and password you set as Titanium requires you enter them.

keytool -genkey -v -keystore KEYSTORENAME -alias KEYALIASNAME -keyalg RSA -validity 11000

After clicking package Titanium will compile your app into .apk format. From there you can put it on your phone’s SD card and install it. If you intend to publish an app you create onto the Android Market then be sure to give this and this a good read.

And thats it, your first Android application is now complete. Next week we will look at creating a Soundboard application using Titanium Mobile. As always if you have any comments, questions or requests for tutorials, please ask below.

Getting started with Python

Adit Gupta — Mon, 13 Dec 2010 11:24:12 +0000

I’ve been writing programs in Python for the past 3 years and I must accept that I am a big fan of its no-nonsense approach towards programming and it’s clean and easy to understand syntax. It was recently chosen as the best programming and scripting language by Linux Developers and is also considered as the Holy Grail of programming by CERN. It is perhaps the best language for beginners as it lets you focus on programming without worrying much about syntax.

Today, Python is being extensively used at Google, Yahoo, CERN, NASA and ITA. It has been successfully embedded in a number of software products as a scripting language including Maya,MotionBuilder, SoftImage, Cinema4D, Blender, GIMP and Paint Shop Pro. Python has also been actively used for writing web applications. Some of the most sophisticated Python web frameworks include Django, Pylons, TurboGears and Web2Py.

In this article, I’ll provide you some resources, which will help you get started with Python:

Google Code: Getting Started – Python
Python Programming Tutorials
A Gentle Introduction to Programming Using Python
Dive Into Python
How to think like a computer scientist – Learning with Python

I hope these resources will give you a hang of Python.We would be soon starting a series on web application and blog development using the Django framework. I hope you would be pretty much familiar with Python by that time! See you soon with more Python awesomeness!

Scrape the First Paragraph & Image from a Wikipedia Entry

Cary F — Mon, 26 Jul 2010 14:10:40 +0000

by Kannan Ramakrishnan

One day, while you’re organizing the content for your latest and greatest website, you may find yourself wishing for an automated way to fetch a description for some of that content. Perhaps an image, too, to pull into a header or elsewhere on your page. And since you’ve got 100 other things on your plate, you’d like this content to be implemented automatically, dynamically appearing on certain pages based on a few keywords. For novice Web developers, this sounds impossible, I know. But… it’s totally doable.

So off you go in search of good, usable, public content. Before long you’ll probably realize it yourself, but I’ll save you an hour of digging with this quick pro tip: Wikipedia is your friend. The bottomless content at Wikipedia is a perfect match for what we want to do. The caveat, though, is it’s so vast we might scrape the wrong content. And especially if you’re automating a task like this, constantly looking over your shoulder to confirm the content would defeat the entire purpose. So relying soley on the Wiki gremlins is not the best way to go.

Let’s take for example a Wiki search for a popular technology company, say, Apple. For a Web-savvy person like yourself, a Wiki search for ‘Apple’ turns up what you probably expect: the entry for a scrumptious kind of fruit. And as Web developers, we should be more astute in our search terms, but sometimes yes, well, there are those gremlins.

So… to cut the risk of unwanted fruit creeping onto your page, we’re going to combine a Wiki search with a Google search.

Following is the code for scraping the first paragraph and image of the entry from a page in Wikipedia. As long as your keywords aren’t really crazy, this should get the job done!

Finally, make sure you don’t forget to credit Wikipedia on your page… and if you have any questions, drop us a line here any time!!

Here’s the code:

require  'hpricot'
require 'open-uri'

def fetch_description(query_item)
    page_title, uri_title = get_wiki_name(query_item)
    return get_wiki_description(page_title, uri_title)
end

def upload_photo(wiki_photo)
    begin
      base_uri = URI.parse(wiki_photo)
      uploaded_data = open(base_uri)
      def uploaded_data.original_filename; base_uri.path.split('/').last; end
      return uploaded_data.original_filename.blank? ? nil : uploaded_data
    rescue
      return nil
    end
end

#Method to fetch wiki page and strip first two

 Tags
def get_wiki_description(page_title, uri_title)
    url =  uri_title
    final_content = ""
    if url.size > 10
      buffer = Hpricot(open(url, "UserAgent" => "reader"+rand(10000).to_s).read)
      #Capture first two paragraphs of text
      content = buffer.search("//div[@id='content']").search("//div[@id='bodyContent']").search("//p")[0..2]

      #Remove the extra spaces and strip html tags from the fetched content
      content.each do |c|
        final_content+=c.inner_html.gsub(/< \/?[^>]*>/, '').gsub(/&#\d+;/,'').gsub(/\([^\)]+\)/,'').gsub(/\[[^\]]+\]/,'').gsub(/ +/,' ')+"\n"
      end
    end
    return final_content
end

#Method to get the link for wikipedia from google search results
def get_wiki_name(query_item)
    search_keywords = query_item.strip.gsub(/\s+/,'+')
    url = "http://www.google.com/search?q=#{search_keywords}+site%3Aen.wikipedia.org"
    begin
      doc = Hpricot(open(url, "UserAgent" => "reader"+rand(10000).to_s).read)
      result = doc.search("//div[@id='ires']").search("//li[@class='g']").first.search("//a").first unless doc
    rescue
      return '',''
    end
    if result
      return result.inner_html.gsub(/< \/?[^>]*>/,"").gsub(/./,""),result.attributes["href"]
    else
      return '',''
    end
end

wiki_description, wiki_photo = fetch_description("Apple")
upload_photo(wiki_photo)

And this is how it looks implemented live, in context:

Blogger Template Wizardry

Chinmay Chiranjeeb — Fri, 04 Jun 2010 03:46:49 +0000

Google’s Blogger is the eighth most popular site on the entire Web today, and by far the most popular free blogging site. According to Google, Blogger now hosts over 300 million blogs and publishes 388 million words per day – simply staggering figures. Let’s look at some of the more compelling reasons for Blogger’s popularity.

Google’s services are ubiquitous, and you’ve probably already got an account for say, Gmail, Docs, YouTube or Calendar. So when you land on the Blogger homepage, all you need to do is enter your login info and off you go! No registration required.
It’s powered by Google, so there’s a better chance of placing high on search engine rankings. From an SEO/SEM (search engine optimization / search engine marketing) point of view, that’s quite the big deal.
Users can create multiple blogs. For Web developers or designers with diverse portfolios it’s easier than ever to start your own blogging network.
Blogger has a limited but respectable directory of templates with plenty of options for customization. Inveterate tweakers should clear the afternoon.
Users can create and configure their own templates for upload, or download an existing template, customize it, then re-upload and use it.
Rather than keeping the off-the-shelf yourname.blogspot.com domain, users can register their own custom domain and point their Blogger page to that.

Sure enough, there are plenty of good reasons Blogger’s gained traction the past few years, but it’s become a hell of a crowded field and for anyone looking to grow their audience it’s increasingly hard to stand out.

The fact is, even if you’re posting killer, must-read content you’ve lost the lion’s share of readers before their first click with a page designed from a yawn-inducing Blogger template.

So besides great content, you’re going to want a template with distinctive design. Read on to follow this basic tutorial and create your own fresh Blogger template.

Create an HTML Template for Your Blog

Go to the Blogger homepage and log in with your Google info to create a new blog. With or without a Google account the signup is pretty painless.

If you’re an existing user, you’ll also get the status of your current blogs.

Head to Layout and then Edit HTML

Developers love code, but sometimes even laymen want a peek under the hood. If you’re up for it, just scroll down and click View Classic Template.

Keep in mind that Blogger can only use XML-formatted templates, so you’ll need to create a blank XML file on your hard drive as .xml.

Now add the following code to your XML document:


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Let’s start with the Blogger code to add a header element.

Generally, Blogger code starts with

Now we’ll add the title of the blog and post:

<data:blog.pageTitle/>

Referencing the blog skin:

And template details:

http://www.sourcebits.com
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- */

Now let’s hide the default navigation bar.

/*-- (Hiding the navbar) --*/
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

And add some custom CSS to stylize the blog.

/*-- (CSS for Blog ) --*/
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
margin:0px;
padding:0px;
background:#dedede;
}

:focus {
outline: 0;
}

.clr{
clear:both;
}

.wrap{
margin:0 auto;
padding:0px;
min-width:1200px;
}

.head{
background:#cde3e4 url(your path to header image) repeat-x;
margin-top:-1px;
}

]]>

If you don’t have a domain to host images then you can use Picasa, Flickr or any other image hosting services. Just make sure that image viewing permissions are set to public.

To generate feeds and archives for your blog:

You can also insert external JavaScript files:

Now let’s replace the default Blogger favicon with a custom jobbie that suits our taste.

Include your HTML code from the blog template created earlier and let’s add a widget to your header.

Note that you can use multiple widgets in the template but they should have unique id= ‘Your Unique ID’ and maxwidgets=’No of widgets’

Now add navigation:

And the conditional statement to show/hide navigation is:

And include feed links:

To display content only on the main and archive pages, include this tag with your content:


<1-- Your Content for Home and Archive Page-->

Phew! Almost there. Now after saving the XML file, it’s time to upload to Blogger.

Back on the Layout tab, under Edit HTML, you’ll find:

After uploading, save the template so now you can edit the file online and preview changes as you go.

And feel free to experiment! You can always hit the Clear Edits button to revert to the last saved version.

Let’s take a look at an outline of the page elements used in the template:

We can also place widgets with just a few clicks.

Clicking one of the Add a Gadget links drops you into a vast pool of Blogger and third party gadgets. Pick a gadget and add it by clicking the +, however many suit your needs.

And… VOILA!

Here’s a sample template we did up awhile ago with a basic but unique design, just FYI.

http://macdevelopmentbits.blogspot.com/

Feel free to drop us a line with any of your Blogger templating issues. We’re happy to lend a hand. For that matter, we’re keen to discuss any Web development projects you’re interested in. Get in touch any time!

HTML Email Compatibility Across Mail Clients

Prakash Mohanty — Mon, 17 May 2010 00:29:25 +0000

Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web. On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags. Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness. But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales. Perhaps thousands of people – from prospective clients to the media – will view mail on this template and associate it with your corporate brand, so perfection is key.

Now let’s focus on the background image. Many HTML developers will begin by putting CSS styles in the header of the HTML email directly, or when that fails try working around the problem using div tags and inline CSS. But either way the results are borked. Why? Because Outlook ignores the CSS property “background-image”.

After so much trial and error, the solution we finally decided on was a pure table-based layout with inline CSS – with the CSS being restricted to each individual table cell since Outlook does not ignore those. We’ve found this not only renders properly in Outlook, but all the other major desktop and Web clients, too.

And here’s how good it can look.

For your reference, here are few examples of HTML tags that are compatible with almost all desktop and Web-based mail clients.

CSS style property -

word-wrap: break-all;

With the absence of a background tag, images can be used inside the

and

tags.

Happy HTML email coding!!