Bezago.com

More than coding...

Entries (RSS)

Archive for the ‘Web’ Category

Past work experience with XHTML, CSS – first week

Posted by: Nuwan Sameera Hettiarachchi on: January 29th, 2012

In: CSS,Web Comments (0)

I am working with Web for almost three years now. I have experience in HTML and CSS by developing many web sites and web applications. Everyone knows that CSS and HTML is very simple and has small learning curve. Actually simplicity may cause some difficulties when your are working on the larger web applications.

I know, your are very much in CSS and HTML, But you may get more complex situation when project is getting bigger. Basically your styles sheet is getting larger and it may difficult to manage. This may also effect scalability into your project. If you have a team and work with front-end development, you should have a well defined process and procedures. If not, you may get trouble in future, when you are going to improve your project.

Also web page rendering speed is another matter to subject from a Web developer perspective. The front-end developer should suggest, how to improve the user experience by adding some performance best practices into the web pages.

How we can identify this situation.

1. When new features add into a project, stylesheet get larger because we couldn’t reuse style rules for new elements added.
2. Lack of well-defined documentations for HTML layouts and CSS may waste your time and new updates may conflict from old styles rules.
3. We have to spend more time to communicate within team to do small updates.
4. Basically CSS and HTML files maintainability is more difficult within the team.
5. Lack of scalability

Finally we have to learn how to structure our CSS to allow for flexibility and maintainability as our project and team grows.

Here is what we did for overcome to this situation,

The main purpose was to identify how to organize CSS, flexibility, scalability and maintainability when the our project and our team grows. The following resources were found in initial research.

• Object Oriented CSS Framework by Nicole Sullivan
• Sass – is a web-framework plugin/ command line tool which can be translated to well-formatted in adding nested rules, variables, mixins, selector inheritance, and more.
• Kss – is a methodology for documenting CSS and generating style guides

In addition to great set articles for Scalable and Modular Architecture for CSS in advance reading.

The Principles Of OOCSS

The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

KSS

Documentation is a must when you work on a project as a team. This will give more understanding among the team, it will save more time as well. KSS is great small library to provide a methodology for writing maintainable, documented CSS within a team. KSS only generate well-define documents your project.

KSS is built on Sinatra ruby framework. You can enhance the documentation by adding more simple helper. It basically support Sass to parsing the CSS documented with KSS guidelines.

The first week we try to collect the resources above. So by next week we will try to implement the thing using above tools.

I wanted to special thanks Lakshan (Initiate the concept behind this project) and Amila (work on HTML and CSS)

PyroCMS can cvertake WordPress?

Posted by: Nuwan Sameera Hettiarachchi on: January 29th, 2012

In: Web Comments (0)

Recently I was looking into alternative for WrodPress. PyroCMS is one of my best choice when I familiar with it. PyroCMS has great looks and feel than WordPress. Most of the web developer has at least small knowledge of how to install WordPress CMS and create blog or web site by adding one more plugin. But WordPress doesn’t support fully customization for Admin view and overwrite the core. But PyroCMS is great to have those features in built. PyroCMS has developed upon the CodeIgniter open source PHP web application framework.

I like to Theme System in PyroCMS.

PyroCMS has two main theme systems for “Front-end Theme” and “Admin Theme”. This is the great feature in this system, so that create our own professional “Control Panel” for my clients. As well as front-end theme system is so easy to understand what you are having the HTML knowledge by using the WordPress system.

WordPress system is build on for only blogs, But eventually lot of web developers tried to create much advance website also. Currently wordpress has more than 18,000 plugins their repository and lot of custom themes. This is the power of WordPress. But back-end customization is not easy as PyroCMS. PyroCMS admin control panel is separate from the website. So regular users cannot see the admin view, but we can provide a better dashboard view for each users by extending role management system. This is one of main point to use this CMS for my future developments.

Widgets, Plugins, and Modules

If you need to get more complex functionality into your website, you can install custom widgets, plugins and modules or you can create your own widgets, plugin and modules. In addition to you can download free and paid third party ones for their “add-on” store.

If you are interesting to develop, PyroCMS provide lot of customization other than creating new modules. In my first installations I need Faqs module to be installed. But I needed to change the presentation view into the webpage. I am lucky to using such a advance system provide to overwrite the Module view in your template.

Finally I can says, PyroCMS is easy to use, it has a smart caching system to keep everything running smoothly. It can be easily extended with Modules, Widgets, and Plugins which are easily as you like.

HTML Standard Module Format

Posted by: Nuwan Sameera Hettiarachchi on: January 28th, 2012

In: CSS,Web Comments (0)

The “Standard Module Format” is represent the modular content structure on the page. This provide a some basic container objects including the head, body and foot sections separately. Also this simple structure maintains the flexibility, accessibility and performances into the page. You can find more details from Modules – Container Objects and YUI Library Examples -The Module Control.

If you are trying to think the content objects as modules format structure, definitely your will get more benefit for more dynamic behavioral pages in your web application.

What are the major advantages,

1. You will able to increase your rate of development process.
2. This module format structure provide accessibility and performance.
3. Naming convention is fit into Yahoo’s Standard Module Format and it became standard across all JavaScript libraries as well.
4. Simple to make it up (Skin)
5. Facilitate reuse the CSS styles
6. Flexibility to add element objects into the separate sections in the module

The standard module format is based on the YUI module control.

<div class="mod">
	<div class="inner">
		<div class="hd">head</div>
		<div class="bd">body</div>
		<div class="ft">foot</div>
	</div>
</div>

Find more details from Modules – Container Objects of the OOCSS project.

Ajax Pagination (Twitter old Style) – WordPress plugin

Posted by: Nuwan Sameera Hettiarachchi on: January 23rd, 2012

In: Web,WordPress Comments (0)

The pagination of a web site gives to view more old posts of the blog or specific content of the website. There are lot of WordPress plugins to enable the pagination in different styles, eg: WP-Paginate. When I was developing new website using WordPress, I wanted to have the pagination just looks like Twitter old styles. The Twitter pagination styles is quite more fast and it gives good end user experience.

The Ajax Pagination plugin is to convert WordPress default pagination behavior into the Twitter style (old) using Ajax functionality. You can use this plugin to where the pagination is available in your template. You can check demo on Vesess blog also using this plugin.

Features

1. Load posts in Ajax functionality
2. Twitter pagination style
3. The default pagination where the functionality is available in your template can be replaced
4. Custom post type post pagination support
5. Javascript “callback” function after one page is loaded

Download and Installation

Download the plugin and install using correct with guidance.

How to use this plugin in your template
After you install the plugin, insert following code into your index.php file.

<?php 
     if(function_exists('genarate_ajax_pagination')) 
         genarate_ajax_pagination('Read More', 'blue');  
?>

The “genarate_ajax_pagination($btn_name, $color_name, $loop, $query)” function has four parameters may help to you get more functionality from the pagination button.

$btn_name is string (optional). The button name default value is “Read More”

$color_name is string (optional). The button background color names. by default “blck” is applied and you can use following colors, or your custom colors.

1. blue
2. red
3. magenta
4. orange
5. yellow

Note: this plugin is used CSS3 functionality buttons. The original credits to Super Awesome Buttons with CSS3 and RGBA

$loop – string (optional). The default is ‘content’

Note:
The ‘twentyeleven’ theme support ‘content’
The ‘twentyten’ theme support ‘loop’

The loop file is where the posts/content will be loaded. The default value is (if you don’t set $loop variable) ‘loop’. This usage is that, the plugin load your post content template, eg: get_template_part($loop). Advantage of this parameter is that you can use the pagination in several places in your WordPress theme to load the posts/content from.

$query – array (optional), the default is array()

If you are using custom query to display posts, pagination plugin also need the custom query array to run loop. The advantage of this parameter, you can use any Custom Post Type Template. eg: array(‘post_type’ => ‘custom’)

How to handle the callback function

This plugin is used jQuery javacript framework to handle the AJAX functionality on client side. So this plugin is triggered a customer event name called ‘complete-paginate’ once complete the next page append to the page.

The important of the custom event in client side is that you may have twitter or Facebook button or a specific bound event in the loaded posts content. This custom event may help you to re-assign events any effect.

The custom event can be bound into the button (id=”ajax_pagination_btn”). eg:

$('#ajax_pagination_btn').bind('complete-paginate', function(event) {
  console.log('update other Js functionality');
});

Creating WordPress 3.0 themes including new features

Posted by: Nuwan Sameera Hettiarachchi on: July 15th, 2010

In: Web,WordPress Comments (3)

WordPress 3.0 was released couple of weeks ago. It is included lot of new features and functionality updates. With new features the WordPress seems to be a grate CMS among others CMSs. Actually WordPress templating is so easy when compare other major CMSs.

Before released WordPress 3.0, it had only one Post type to add article. But 3.0 has grate feature Custom Post Type . This feature will easy to hold and display many different types of content.

As well as another main issue also was solved with this introducing by Custom Post Types. The problem was URL suture of web site. Most of time post URL was Base_URL/blog/%date%/%post_name%/. But my opinion is URL should be best way to have as following
Base_URL/blog/%post_name%/ . Your know this format can be enabled old system. But we couldn’t set different kind of URL formats to the post. But this feature is come with Custom Post Type. We can have different kind of post urls. For examples you have a Magazine and Project in your organization. Now you can separately maintain two Post Type and you can assign the URL format for each post type.

I developed a new web site using WordPress 3.0 with new features. I created new two Custom Post Type for pages name called Magazine and Project.

You can create Custom Post type as Follows, Note: Let’s create Custom Post Type name as “Project”

<?php
	register_post_type( 'projects',
                array('label' => __('Projects'),
			'public' => true,
			'show_ui' => true,
			'supports' => array('title','editor','author','thumbnail','excerpt','comments', 'custom-fields'),
			'menu_position' => 5
			)
              );
?>

And you can taxonomy for each Custom Post Types.

function create_my_taxonomies(){
    register_taxonomy( 
                          'projects-category', 
                          'projects', 
                          array( 'hierarchical' => true, 
                                   'label' => 'Categories', 
                                   'query_var' => true, 
                                   'rewrite' => array( 'slug' => 'projects/category' ) 
                       ));
 
   register_taxonomy( 
                         'projects-tags', 
                         'projects', 
                         array( 'hierarchical' => false, 
                                  'label' => 'Post Tag', 
                                  'query_var' => true, 
                                  'rewrite' => array( 'slug' => 'projects/tags' ) 
                        ));
}
//create taxomony
add_action( 'init', 'create_my_taxonomies',0 );

Above code will create a Custom Post Type and you can see it at backend in WordPress. Now you can create post under the “Project” post type as default “post” main type used by the blog in WordPress.

I will provide more details about complete WordPress 3.0 template creating on next posts.

I addition to WordPress having grate ability to change admin interface, just like organize Main menu order and remove some component without directly editing the core of WordPress.

Here is one of tip I just used today. Let’s think you don’t need WordPress default the Blog post type in your developed theme. As I shown above the codes, you have create your own Custom Post Types and you have a fully control of the web site with them. But you may not need default Post type anymore. So you can remove it form back-end main menu.

Just add hooks to the functions.php

function remove_menu() {
	global $menu;	
	$menu[0] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu-top', 'menu-posts', 'div' );
	//remove post top level menu
	unset($menu[0]);
}
 
add_action('admin_head', 'remove_menu');

I think this will help to understand backend configuration using simple and smart hooks of WordPress

A grate Firefox plugin to Notify new mails at Gmail

Posted by: Nuwan Sameera Hettiarachchi on: August 8th, 2009

In: Tips and IT,Web Comments (1)

Gmail is the grate web application which is a free webmail, POP3, and IMAP service provided by Google among the other free webmail application such as Yahoo! Mail, Hotmail, and AOL. And most of Freelancers are using Gmail for day to day activities with projects and private usage.

I am not going to talk about Gmail and other applications. But I am also using Gmail. And I was a problem to notifying a new mails which come Gmail inbox. Sometime I am late to check the new important mails. Meantime I go to check new mails very often. But it was very time consuming task when I work projects. And I was finding a solution to avoid this problem. Finally I found a Firefox plugin named Gmail Notifier. It is very useful plugin if you are wasting time on Gmail.

It Supports:

• Mozilla 1.4+ (all platforms)
• Firefox 1.0+ (all platforms)
• Seamonkey 1.0+ (all platforms)
• Flock 0.7+ (all platforms)

Features:

• Monitor multiple Gmail accounts from within your Mozilla-based browser.
• Statusbar item available for all browsers, and Firefox users get a toolbar item as well.
• Supports Gmail Hosted accounts. Simply use username@hosteddomain.tld as the username in the notifier.

In addition can play a nice notify sound track when new mail receive. I think this is very good plugin for you and get a experiance with Gmail Notifier plugin.

Essential email newsletter tips and designs

Posted by: Nuwan Sameera Hettiarachchi on: May 25th, 2009

In: Web Comments (3)

If you are running business on the web, you really want to talk to your client. Newsletter is very essential and many business use as cost-effective marketing tools very often. This enables to you to communicate with your client, visitor on a more privately and keep your visitors up to date. On the other hand all messages and details should be included Newsletter itself. So the Newsletter must be carefully planned, organized and creatively designed.

Following tips are very useful to creating an email newsletter.

1. Make sure the information is well-structured.
2. Remove high score spam words.
3. Make sure the first paragraph is effective, as they are the most important.
4. Keep it simple.
5. Represent includes in graphically as possible.
6. Email template design is very creative and use relevant Colors.
7. Provide as much contact information as possible individual to contact, address, phone, fax, email, Web site address.
8. Provide to shorter summaries of your content, but link to more complete place in context.
9. Try to build up trust from the beginning.
10. Send Email at the right time

I have found some excellent email templates.

Skype email template form Skype

Curdbee template form Curdbee

Backpack template form Backpack

Xero template form Xero

Beanstalk template form Beanstalk

Shopify template form Shopify