Parallel Processing / Computing

Good old math!!! If it takes one person 10 days to do one job, how long will it take for 2 people of the same working caliber to do that same job? This is the thrust of parallel processing. Strictly speaking, parallel processing is the simultaneous processing of the same task on two or more microprocessors in order to obtain faster results. Computer resources can include a single computer with multiple processors, or a number of computers connected by a network, or a combination of both. The processors access data through shared memory. Some supercomputer parallel processing systems have hundreds of thousands of microprocessors.

A successful implementation of parallel computing involves two things apart from having a strong distributed processing system:

• Tasks should be structured in such a manner that they can be executed at the same time.
• The sequence of tasks which must be executed one after the other should be maintained.

Parallel processing can substantially reduce the time required to complete a project, coming in particularly handy for projects requiring complex computations such as weather modeling and digital special effects.

A few years ago people were remarking about how parallelism “is the future of computing,” and it’s safe to say this has now come to pass. Parallel processing has not just taken off among the geek fringe and supercomputing crowd. Commercial software engineers have begun taking advantage of the multiple processor cores increasingly found in consumer level machines, so while the average user may not be aware of it, parallel computing is quickly entering the mainstream.

Concurrent Computing

This is not so different from parallel processing. Essentially, concurrent computing is a collection of processes that can interact with each other and run in parallel. Potentially more powerful the parallel processing, the implementation can be rather more complicated. The biggest concern when writing concurrent programs is to make sure that the sequence and the interaction between programs are happening properly. By properly we mean 1) in the correct order and at the correct time, 2) with appropriate concurrent processes, and 3) allowing appropriate access to shared resources.

To maximize the computational power of parallelism, concurrent programs should be run on machines with multiple core processors or across networked machines, but concurrent programs can also be executed on machines with single core CPUs. We can think of concurrent computing as a kernel core performing several things simultaneously and seamlessly, despite being run under even a single core CPU. Therefore single core CPUs will be able to perform the same types of tasks as multi-core CPUs, just they’ll take (potentially much, much, much) more time.

Along with single versus multiple core CPUs, several other factors play a vital role in determining computational power, such as shared memory / message passing (for communication between concurrent threads / processes / pieces of code).

Application throughput and high responsiveness are the key pain points addressed when opting for concurrent computing. But while parallel and concurrent computing may be fascinating to study and offer incredibly powerful programming opportunities, they’re terrifically complex and hard to implement for the uninitiated. I would strongly suggest exploring parallelism only after determining that you can’t make do with traditional techniques.

Distributed Processing / Computing

Distributed processing / computing is much the same as parallel and concurrent processing, the only difference being multiple computers connect through a network to achieve the goal.

Google File System (GFS)

Google File System (GFS) is a proprietary technology designed by Google to meet their ever-increasing data processing demands. Without GFS, Google wouldn’t be able to crawl the Internet, index it, do keyword/content analysis, run website analytics, perform search, all the while knowing who is searching for what and smart-linking to advertising. GFS is what lets us run a Google search for, say, “Google File System” and get about 57,000,000 results in 0.13 seconds!!!  (YMMV.)

In fact it’s not much different than its predecessors (distributed file systems) in terms of performance, scalability, reliability and of course data redundancy.

Imagine the scale of the job: getting an application to process at speeds of around 800 to 1000 requests per second: database designing, caching, indexing, memory leaks, architectural constraints, horizontal and vertical scaling, code optimizations, server tweaking, and for sure a few hundred other things. How they can process this kind of load, all on the fly – nearly instantaneously – is a testament to the power of GFS. In terms of systems architecture, here is how they do it: Google File System, Big Table, and Map Reducer.

In order to digest the rest of this explanatory section on GFS, you’ll need a basic familiarity with the Master-Slave computing concept, in-memory database structures, metadata, data replication, GC (Garbage Collection), balancing and fault tolerance.

GFS has a Single Master and multiple chunk servers that will be accessed by several clients. Generally these machines/servers are made up of inexpensive commodity hardware, based on the capacity of the system, the chunk server, and whether the client can run on the same system.

Below is an extract from Google’s own paper detailing the Google File System.

Master will take care of assigning an immutable and globally unique 64 bit chunk handle at the time of chunk creation. Chunk servers store chunks on local disks as Linux files and read or write chunk data specified by a chunk handle and byte range. For reliability, each chunk is replicated on multiple chunk servers. By default, GFS stores three replicas, though users can designate different replication levels for different regions of the file namespace.

The master will maintain all file system metadata. This includes the namespace, access control information, the mapping from files to chunks, and the current locations of chunks. It also controls system-wide activities such as chunk lease management, garbage collection of orphaned chunks, and chunk migration between chunk servers. The master periodically communicates with each chunk server in HeartBeat messages to give it instructions and collect its state.

GFS client code linked into each application implements the file system API and communicates with the master and chunk servers to read or write data on behalf of the application. Clients interact with the master for metadata operations, but all data-bearing communication goes directly to the chunk servers.

Neither the client nor the chunk server caches file data. Client caches offer little benefit because most applications stream through huge files or have working sets too large to be cached. Not having them simplifies the client and the overall system by eliminating cache coherence issues. (Clients do cache metadata, however.) Chunk servers need not cache file data because chunks are stored as local files and so Linux’s buffer cache already keeps frequently accessed data in memory.

(click -> big)

Image Credit: gfs-sosp2003.pdf

GFS faces several challenges, such as enabling concurrent appends to the files, reading large sets of streaming data, random reads and processing huge data/storing huge data in sequential manner.

In-memory data structure was required to achieve faster garbage collection and load balancing. Master will take care of scanning the state of each chunk server periodically and take care of Garbage Collection and load balancing. These smaller chunks reduce the amount of metadata required to be stored.

Activities of a Master include Namespace management locking, replica management replacements, rebalancing, Garbage Collection, stale replica deduction and management.

To sum up, GFS offers:

• Fast recovery – but how? Using checkpoints.
• Chunk replications – to achieve high availability.
• Master replications – for reliability.

But enough about GFS for now. For further details, please take the afternoon and study Google’s GFS overview: gfs-sosp2003.pdf

BigTable

BigTable is a distributed storage system for managing structured data. It’s been designed to scale to a very large size (call it zeta bytes of data across several thousands of commodity servers). It’s a database management system (DBMS), yet does not follow the principles of traditional DBMS concepts; it has millions of columns that can differ depending on context.

BigTable uses the GFS distributed File System to store data files. BigTable was designed with the thought in mind that even hundreds of thousands of servers might not be sufficient so it should be easy to scale horizontally by just adding more servers when required.

BigTable serves over 60 of Google’s own products and projects, including Analytics, Indexing, and Google Earth, each requiring their own massive databases, latency, high performance, etc.

BigTable’s characteristics are detailed in the official BigTable document, but in a nutshell it’s a sparse, distributed, persistent multi-dimensional sorted map. It has a row-key, column-key and timestamp.

It’s hard to think in terms of a column-oriented database after using traditional DBMS systems. New users will need to get familiar with Row Key, Column Families, Timestamps and flush out their existing DBMS knowledge to start designing DBMS for column-oriented databases.

Figure 2. (row:string, column:string, time:int64) → string

Image Credit: bigtable-osdi06.pdf

Rows in a BigTable are uniquely identified by the row key. BigTable maintains data in lexicographic order by the row key. The row range is dynamically partitioned. Each range is called a tablet (used for the load balancing). Tables are split into multiple tablets – which can be thought of as segments of the table. Each tablet will be around 200MB approximately. When the size grows beyond the specified limit, compression takes place. There are multiple level hierarchies (analogous to a B+ tree) that store the Tablet information itself.

The first level is known as the Chubby file, which contains the location of the Root tablet. The Root tablet contains the location of all tablets in a special METADATA tablet, which in turn contains the location of a set of user tables. (Since the Root tablet is the first tablet among METADATA tablets, it gets special treatment.)

Column keys are grouped into sets known as column families, forming the basic unit of access control. A column family has to be created before the data is stored into the family. Column keys are named as in ColumnFamily:Qualifier.

Each column key in an anchor family (as shown in the Figure 3) represents a single anchor. Qualifier is the name of the referring site, and cell content is the link text.

Timestamps are used for versioning the data in a specific table in BigTable. Each cell in BigTable can contain multiple versions of some specific data. These are distinguished by the timestamp.

Finally, BigTable also provides an API to create, delete and look up values.

MapReduce

MapReduce is a programming model for processing and generating large datasets in a distributed processing environment.

The underlying architecture in systems like GFS and Hadoop are capable enough to make this kind of program (MapReduce) run in a parallel mode on a large number of computers (known as clusters). GFS and Hadoop take care of splitting the input data and creating as many mapper and reducer steps as required (self-configuring the number of mappers and reducers is also possible), schedules the program executions, handling machine failures, and inter-machine communications. The terms Map and Reduce come from the primitives present in Lisp (and other functional languages).

Input for the MapReduce programs is by way of a set of key/value pairs, which in turn produces a set of output key/value pairs.

Map: a piece of a program written by the user that takes an input pair and produces an intermediate key/value pair output. The Library takes care of splitting the huge data file into smaller chunks and sending it to different machines and receiving the intermediate outputs and combining them with other intermediate outputs of the same Key. The master node handles sending the data to worker nodes (until all the data is processed).

Reduce: another piece of a program written by the user, which takes the intermediate key and a set of values for that key and merges them together to form a smaller set of values. Aggregating all these output values (combined ones) will form the final output of the problem for the given data.

The big advantage of MapReduce is that it allows distributed processing of mappers and reducers. The MapReduce library (provided by GFS / Hadoop) will take care of the situation when a processing node (map or reduce) fails; it automatically reschedules the map and reduce task.

Following is a sample pseudo-code for map-reducer:

Lets count the number of occurrences of each word in a large collection of documents.

The Map function emits each word and a number (the count). Reducer simply receives the word and adds the count to the total count for each word. In the case of Map output, key is the word and count is the value.

The Reducer simply gets the key and the value and keeps adding to the value associated with the key, as in:

map (k1, v1) -> list (k2, v2)

reduce(k2, list(v2)) -> list (v2)

Figure 4

Figure 5, showing the execution flow of a typical MapReduce program (in terms of GFS).

Step1: MR Library splits the huge data file into multiple chunks of 16 to 64 MB of data and starts as many copies of programs as required on the cluster.

Step2: One Copy acts as the Master. The rest are workers. The master has the information about which machine is idle and which is getting processed.

Step3: Get the input content, which is allocated to the worker.

Step4: Store the output into the local disk.

Step5: The master notifies the reducer whether the map output is available.

Step6: The reducer iterates the sorted intermediate data and produces an output that is appended to the final output file.

Step7: Master wakes up the user program when all the map/reduce programs are completed.

The Master node:

The Master node keeps track of each map and reducer and the tasks assigned to them, intermediate outputs, the states of tasks assigned to each map/reduce instance (forks) and the status of the worker machines.

The good thing about these MR libraries is that even if the Master task dies, it has created several checkpoints for a given job, so at next launch it won’t start a fresh job but rather pick up from the last checkpoint.

Phew!! All right, we’ve seen enough to lay the groundwork for more in depth discussion of Hadoop, so let’s take a breather before posting up the 2nd article in the Hadoop series.  Until then, if you’d like more information be sure to check out the following links or post a question in the comments.

Kannan R.
Sourcebits Project Manager

http://en.wikipedia.org/wiki/Distributed_computing

http://en.wikipedia.org/wiki/GoogleFS

http://en.wikipedia.org/wiki/Concurrent_computing

http://en.wikipedia.org/wiki/Parallel_computing

http://en.wikipedia.org/wiki/Hadoop

http://en.wikipedia.org/wiki/MapReduce

http://en.wikipedia.org/wiki/BigTable

http://en.wikipedia.org/wiki/HBase

http://en.wikipedia.org/wiki/Google_File_System

http://labs.google.com/papers/gfs.html

http://storagemojo.com/google-file-system-eval-part-i/

http://storagemojo.com/google-file-system-eval-part-ii/

http://www.baselinemag.com/c/a/Infrastructure/How-Google-Works-1/

http://queue.acm.org/detail.cfm?id=1594206

If you’re going to be developing a multi-language site, then when you’re setting up your CMS, from the beginning be sure to go for a CodeIgniter CMS like CI-CMS or Pyro CMS in order to minimize languages issues down the road. {The Zend framework, with its strong partial rendering, may seem like a better option in a pinch, but CodeIgniter trumps Zend in other crucial areas, so it’s worth sticking with.}

With CodeIgniter it makes great sense to build in modular separation (you can find the library here), though at first glace I’ll agree it looks like a tough implementation.

As you scan the library article, the lines to put most emphasis on will naturally deal with switching languages.

For example, you’ll find in the Notes section of the above library site:

<?php

anchor($this->lang->switch_uri('fr'),'Display current page in French');
$lang['about.gender'] = "Je suis un homme";

?>

Plug the lines below into your route.php and config.php files.

In config/route.php :

<?php

$route['^fr/(.+)$'] = "$1";

$route['^en/(.+)$'] = "$1";

// '/en' and '/fr' URIs -> use default controller

$route['^fr$'] = $route['default_controller'];

$route['^en$'] = $route['default_controller'];

?>

In config/config.php,

$config['base_url']  must correspond to your configuration. For example,

<?php

$config['index_page'] = "";

?>

Creating the language file in system/application/language/english/about_lang.php was already clear to you.

<?php

$lang['about.gender'] = "I'm a man";
$lang['about.gender'] = "Je suis un homme";

?>

The controller part at

system/application/controllers/about.php should also be clear to you.

In the index function

<?php

$this->load->helper('language');

$this->load->helper('url');

// load language file‚

$this->lang->load('about');

$this->load->view('about');

?>

Once you’re done with these, browse to the welcome module on your local machine at http://localhost/ci/fr/welcome/test.
You should find the language lines show up as expected.

Be sure to hit the CodeIgniter resource site for some really useful, ready made down loadable translation files in zip format. This’ll save you heaps of time and work. Once you’ve extracted these zip archives, you’ll find files named as in the about_lang.php as above.

Next, while looking into partial rendering, we come across this site, which brings us more clarity.

<?php

$this->view->layout = 'master_layout_file'; // or leave this empty to render partials only

//Add a partial file and (optional) $data‚

$header = $this->view->load('header','header_file',$data);

// subheader‚

$header->load('sub_header','sub_header_file',$data);

$header->set($data);

$this->view->render();

?>

Now let’s render the partials in our master template:

<?php $header->render();?>;

And that’s about it. Pretty simple, right?

Before closing, just a brief note: PyroCMS is a multilingual CodeIgniter CMS with built-in language configuration options you can tailor to your site. You can find language settings inside the admin panel, and while the implementation will be similar to the approach we’ve outlined above it may not be an exact match.

Well, that’s it!  Thanks for reading, and I hope this helps.  If you have any questions about this specific tutorial or any other issues re: web development with CodeIgniter, Zend, or whatever else, drop us a line any time from our contact page!

Prakash R. Mohanty

Senior Software Engineer
Sourcebits Technologies

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:

• 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 <Your Template name>.xml.

Now add the following code to your XML document:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

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

Generally, Blogger code starts with <b:

<b:include data='blog' name='all-head-content'/>

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

<title><data:blog.pageTitle/></title>

Referencing the blog skin:

<b:skin>

And template details:

<![CDATA[/*
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Name: MacDevelopmentBits
Blogger template by Sourcebits Technologies
Author: Sourcebits Technologies
Author URL: 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;
}

]]></b:skin>

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:

<script type='text/javascript'>

function rp(json){ document.write(&#39;&lt;ul&gt;&#39;);for(var i=0;i&lt;numposts;i++){document.write(&#39;&lt;li&gt;&#39;);var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);var readmorelink=&quot;(more)&quot;;readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]=&quot;Jan&quot;;monthnames[2]=&quot;Feb&quot;;monthnames[3]=&quot;Mar&quot;;monthnames[4]=&quot;Apr&quot;;monthnames[5]=&quot;May&quot;;monthnames[6]=&quot;Jun&quot;;monthnames[7]=&quot;Jul&quot;;monthnames[8]=&quot;Aug&quot;;monthnames[9]=&quot;Sep&quot;;monthnames[10]=&quot;Oct&quot;;monthnames[11]=&quot;Nov&quot;;monthnames[12]=&quot;Dec&quot;;if(&quot;content&quot;in entry){var postcontent=entry.content.$t}else if(&quot;summary&quot;in entry){var postcontent=entry.summary.$t}else var postcontent=&quot;&quot;;var re=/&lt;\S[^&gt;]*&gt;/g;postcontent=postcontent.replace(re,&quot;&quot;);document.write(posttitle);if(showpostdate==true)document.write(&#39; - &#39;+monthnames[parseInt(cdmonth,10)]+&#39; &#39;+cdday);if(showpostsummary==true){if(postcontent.length&lt;numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(&quot; &quot;);postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+&#39;...&#39;+readmorelink)}}document.write(&#39;&lt;/li&gt;&#39;)}document.write(&#39;&lt;/ul&gt;&#39;)}

var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 40;

</script>

You can also insert external JavaScript files:

<script language='javascript' src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
//your code here
</script>

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

<link href='path to favicon' rel='shortcut icon' type='favicon'/>
</head>
<body>

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

<b:section id='top35' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MacDevelopmentBits (Header)' type='Header'>

<b:includable id='title'>
<A expr:href='data:blog.homepageUrl'><div class='logo'><data:title/></div></A>
</b:includable>

<b:includable id='description'>
<h1 class='slogan'><data:description/></h1> <!-- It fetches the description from basic settings page. -->
</b:includable>

<b:includable id='main'>
<div class='slogan1'>
<b:include name='title'/>
</div>
<b:include name='description'/>
</b:includable>

</b:widget>
</b:section>

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:

<b:include name='nextprev'/>

And the conditional statement to show/hide navigation is:

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>

</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>

</b:if>

And include feed links:

<b:include name='feedLinks'/>

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

<MainOrArchivePage>
<1-- Your Content for Home and Archive Page-->
</MainOrArchivePage>
</body>
</html>

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!

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.

<table cellspacing="0" cellpadding="0" bgcolor="#6b6f7a">
    <tr>
        <td width="55" height="53" valign="top">
            <img src="http://domainname/media/mail/header_01.jpg" alt="" width="78" height="53" />
        </td>
        <td style="font-family: Arial,sans-serif;" width="546" bgcolor="#ffffff"></td>
        <td style="border-bottom: 1px solid #ffffff; padding: 0pt 15px; background-color: #b6d354; color: #ffffff; text-transform: uppercase; height: 43px; vertical-align: middle; font-size: 12px;"></td>
    </tr>
</table>

CSS style property -

word-wrap: break-all;

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

<table>

and

<td>

tags.

Happy HTML email  coding!!

The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

:

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY,  See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.

All of following points are optional and one can modify them according to needs and/or simply drop the idea.

Big Picture:

Planning is a must for mid or big projects…for small projects one can instantly start coding.

While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.

e.g.

• What portion of design mock can be translated by using CSS rules instead of image?
• Whether background is repeating? Design is fixed width or liquid?
• What element of design is going to change dimension dynamically?
• Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
• Sliced images need to save as optimized for  web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.

CSS Reset:

Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.

Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).

In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.

/* Common CSS and CSS reset Start */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*links*/
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/*List*/
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* Common Display Rules*/
.block{
display:block;
}
.none{
display:none;
}
.inline{
display:inline;
}
.clear{
clear:both;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
.center_div{
margin:0 auto;
}
.bold{
font-weight:700;
}
.normal{
font-weight:normal !important;
}
.underline, .underline:hover{
text-decoration:underline;
}
/* Headings*/
h1, h2, h3, h4, h5, h6{
font-family:Arial, HelveticaNeue, Helvetica, sans-serif;
font-weight:700;
}
h1{
font-size:18px;
}
h2{
font-size:17px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5{
font-size:15px;
}
h6{
font-size:13px;
}
/* Font Size */
.fs8{
font-size:8px;
}
.fs9{
font-size:9px;
}
.fs10{
font-size:10px;
}
.fs11{
font-size:11px;
}
.fs12{
font-size:12px;
}
.fs13{
font-size:13px;
}
.fs14{
font-size:14px;
}
.fs15{
font-size:15px;
}
.fs16{
font-size:16px;
}
.fs17{
font-size:17px;
}
.fs18{
font-size:18px;
}
.fs19{
font-size:19px;
}
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.fs22{
font-size:22px;
}
.fs23{
font-size:23px;
}
.fs24{
font-size:24px;
}
.fs25{
font-size:25px;
}
.fs26{
font-size:26px;
}
.fs27{
font-size:27px;
}
.fs28{
font-size:28px;
}
.fs29{
font-size:29px;
}
.fs30{
font-size:30px;
}
/* Remove Inherited Style*/
.no_margin{
margin:0 !important;
}
.no_padding{
padding:0 !important;
}
.no_border{
border:none !important;
}
.no_dec{
text-decoration:none !important;
}
/* Common CSS and CSS reset End */

Hmm…I think its a good breakfast.

So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .