Web Design Booth » Tutorial

Building Tabbed Navigation using SpryTabbedPanels

Dicky — Fri, 03 Jun 2011 16:06:02 +0000

The Tabbed Navigation is the latest trend while designing a Website. If it is blog then you can notice the content titled ‘Featured Content’ or ‘Latest’ arranged in tabs. If it is a Website then there are tabs on top replacing menu items. If coded correctly the tabs give a fresh outlook to your Website, save resources, and present maximum information in less area. In addition, almost every user is familiar with the tabs and their working. Tab, ALT+Tab, and Ctrl+Tab are the most pressed keys on any keyboard on this earth. Thinking to use the tabbed navigation in your Web design then we are here to help you out. Adobe Labs provide access to its SpryTabbedPanels without any cost. Here we’ll guide you how to use the SpryTabbedPanel code to create Tabbed Navigation.

An outer div contains – list of tabs, all panels, div container to have content panels, and div tag for each panel. The SpryTabbedPanels use JavaScript to toggle between the tabs. Therefore, we’ll include the JavaScript code within the HTML tag. To modularize the code, we’ll create a separate JS file and link it through script tag inside head tag. This js file will define the functions related to the Tabbed Panel. Before closing the body tag, we’ll define a script tag to use JavaScript to make Tabbed Panel interactive. We’ll also link a style sheet in the head tag.

Adobe Labs provide the SpryTabbedPanels.js to use with the HTML code. You can scroll down to bottom to download the source files used in this article. Before that, we’ll illustrate the code of HTML and CSS files in this article. We recommend you not to change the file name of js and css files. However, you can modify the code as per your convenience.

In our case, we’ve located JS, CSS and HTML files in the same folder. Please modify the path in code if you’re placing the CSS and JS files in other location.

CSS Code

.TabbedPanels {
	margin: 0px;
	padding: 0px;
	clear: both;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	list-style: none;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}
.TabbedPanelsTabHover {
	background-color: #CCC;
}
.TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #EEE;
}
.TabbedPanelsContent {
	padding: 4px;
}
.TabbedPanelsContentVisible {
}
/* Vertical Tabbed Panels */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

HTML Code


...
	
	
	
	


	
	
		
			Tab 1
			Tab 2
			Tab 3
			Tab 4
		
		
			Tab 1 Content
			Tab 2 Content
			Tab 3 Content
			Tab 4 Content

Categorizing the HTML code

Link the SpryTabbedPanels.js and SpryTabbedPanels.css file within the HTML code.
Add following code to create the SpryTabbedPanel.
Mention an ul class TabbedPanelsTab Group to create the tab inside above div.
```
	
		Tab 1
		Tab 2
		Tab 3
		Tab 4
	
```
Add a div ‘TabbedPanelsContentGroup, after the ul class to create a container for including the contents of each tab.
```
	
		Tab 1
		Tab 2
		Tab 3
		Tab 4
	
	
	
```

In TabbedPanelsContentGroup, include one div tag with class (TabbedPanelsContent) for each tab to have its content.


	
		Tab 1
		Tab 2
		Tab 3
		Tab 4
	
	
		Tab 1 Content
		Tab 2 Content
		Tab 3 Content
		Tab 4 Content

Include following code to initialize the SpryTabbedPanels object. Here, new operator will initialize the Tabbed Panels and transforms the div content with TabbedPanels1 ID into an interactive tabbed object.

What you can do more?

If you want to add more tab then add a li class in TabbedPanelsTabGroup and a div class in TabbedPanelsContentGroup. To remove a tab, you’ve to delete the li class and its relevant div class from both groups.

You can change the div class ‘TabbedPanels’ to ‘VTabbedPanels’ if you want to include the vertical tabs in your Web design.


	
		Tab 1
		Tab 2
		Tab 3
		Tab 4
	
	
		Tab 1 Content
		Tab 2 Content
		Tab 3 Content
		Tab 4 Content

Make use of tabIndex in li class ‘TabbedPanelsTab’ to enable keyboard navigation.
```
Tab 1
Tab 2
```

Tab 3

You can set the default tab to open on loading the page by defining defaultTab with new constructor.

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 2 });

Sample Output

We’ve run the code and got following output:-

We’ve changed the code to get Vertical Tab Panel and received following output

Files

Click here to download zip archive having following source files used in this article:

SpryTabbedPanels.css – has the source code of styles used to design tabs.
SpryTabbedPanels.js – has the source code of scripts used to create tabs.
SampleHorizontalTabs.html – has the code to show Horizontal Tabbed Panels.
SampleVerticalTabs.html – has the code to show Vertical Tabbed Panels.

Conclusion

Tabbed Navigation is the easiest way to demonstrate the large and similar content in less space. SpryTabbedPanels make is very easy for you to include the Tabbed Navigation in your code. Is this article helpful? Inform us through your valuable comments. We’ll keep you posted with more such interactive articles in the future, stay tuned.

Prepare Yourself For The After Effects of Guest Post

Editorial Staff — Fri, 03 Dec 2010 13:28:01 +0000

It feels great once you get a confirmation that your post will be published on a Pro Blog. Hours of hard work finally getting paid off. Isn’t it a feeling of accomplishment? But wait your job is not done yet. There are things you must do even after your post has been published on a pro blog if you really want to succeed in the blogosphere. I have listed down few things in this article. What you need to do can primarily be categorized into these 3 “what to do” sections listed below:

On blog Work

There are several daily weekly and monthly chores you do on your blog. But believe me there’s more when you have lot of traffic to handle. Once your guest post is published you will get overwhelmed by the amount of traffic you get on your blog; which, if not utilized properly can mean no benefit from the guest post. Some of the things you must take care before your guest posts are published on other blogs are:

RSS subscription Setup – One main reason why people do guest bogging is to increase their own blog’s subscriber count. So once you’ve bagged a guest post on a popular blog make sure you have all the possible ways to let your visitors subscribe to RSS setup on your blog. There are many ways people can subscribe to your RSS but there is nothing like email subscription. Work on that before you get your guest post published on other blog.
Bring your best content forward – One other very good reason of guest blogging is making aware of your blog to new readers of the world. You may have been working on your blog for long time and would have got some really nice posts so far. Make sure you highlight those posts to the new visitors. There are many ways to do that but I would recommend two below:
Have a popular posts widget setup on your blog. It shows all the popular posts within your blog.
Most people like associate images with posts because pictures speak thousand words. Setup a rotating banner for posts on your blog. It helps reduce the bounce rate on your blog. One fine plugin to do that is Sponsor Slide Show. I have used it and it’s simply amazing.
Showcase your other Blog Posts – You may have worked with other bloggers and might have published some posts there as well. Its good to have your readers make aware of such work of yours. It increases your credibility in your blog community. People get to know about you more.
Write about your guest post – You have a readership. People read your content so ideally they should read whatever you write and wherever you write. It’s advisable to write about your guest post on your blog. Make your readers read what you are writing. Create a backlink to the original post on your blog with some thoughts on the article you wrote on the other blog.
Blogroll other Blogs – Make sure you have all your and your friends’ blogs linked in the Blogroll. Visitors coming to your blog would want to see what you link to. It also increases your chance to exchange link in your niche. Because they know you can be approached for that.
Social You: In the last 1-2 years social networking has become talk of the town. Every 2nd person you meet is either talking about Facebook, Twitter or LinkedIn. And these websites drive traffic, heavy traffic. A survey conducted by Technorati confirms that twitter and Facebook are the most used social networking site to drive traffic. So you would want to make sure you don’t left out in getting those extra fans and followers. Setup your blog with twitter and Facebook fan page with their links on your blog.
Update your Posts – There will be some articles on your blog which will be near to your heart. You’d remember them your entire life. Update them.

On Guest Blog Work

Getting a post published on a high ranking pro blog is not the end of the story. It’s the beginning. This is where you are supposed to work hard. I have certain points in my mind about that which I have listed down below.

Comment on your post – This is the most important aspect of guest blogging. Its like the holy grail of your personality development on the blogosphere. So make sure you make every effort to reply to all the comments on your guest posts.
Comment on other Authors’ Posts – Commenting on your posts is not the only thing you should be doing on your guest blog. It is advisable to interact with other authors on the blog you got your guest post published. It will build your relationship with other bloggers and increases your chance of getting more and more guest posts. People realize and appreciate your work and invite you to write on your blog. And most important thing, when they see you commenting on their post they come and comment on your guest post. It eventually increases the pageview of your guest post.

On the web Work

Socialize – As per the State of the Blogosphere 2010 50% of the top bloggers around the world use 3 sites (Facebook, LinkedIn and Twitter) to drive traffic to their blogs/sites. Posting is a guest post should not be the end of it. People talk about your content on internet if it’s really good. So responding to them should be your primary goal to earn that credibility in blogosphere.
Forums Posts – A place where everyone can shout their mind out loud. No need to wait for anyone to approve my thoughts. If used properly forums drive immense amount of traffic to your blog. Create a thread about your guest post and discuss it on a relevant forum that you visit regularly. Most forums have a general talk section where you can create thread if the topic of your article is not relevant to the niche of the forum.
Monitor your Blog – Check the referral logs, bounce rate, overall visitors, page views/visit and time spent on site. There is a saying in corporate world. You need to measure things to control them. So start measuring them first to control the matrices on your blog.

No Related Post

Choosing a Hosting Company? Use The Following Criterias

Editorial Staff — Mon, 08 Nov 2010 13:29:28 +0000

Choosing your web hosting company is a crucial decision. There is no perfect web hosting company. The most important is you choose a web hosting company that works best with you.

It is very hard to find good hosting advice these days. Forums and blogs are filled with paid reviews. Reading reviews on forums doesn’t help much for 2 reasons:

People who have negative experience with the company tend to post way more than people who had a positive experience. It’s a natural inclination, some psychologists call it the ‘negativity bias’ and estimate the impact of a negative experience is 5 times greater than the impact of a positive one. So going by this logic, you are 5 times more likely to tell others (online or offline) if you’ve had a negative experience with a hosting company than a positive one.
Companies pay people to go and post positive reviews on forums. Trust me, I’ve been fooled a lot by unreliable companies who incentivized established users on forums to post positive reviews on them.

Fortunately, there are some good ways to check whether a web hosting company is reliable or not. 3 ways to be exact. The first way will help you quickly get rid of companies who haven’t been long enough on the market (we want to deal with hosting companies that are operating more than 2-3 years and are popular enough). The second tip should help you see the reliability of a hosting company in terms of server uptime. The third tip will help you see how good that company is business-wise (handling customer complains etc.). Let’s get started!

Use Alexa.com ranking to see how popular the website is

You can install a free Firefox plugin called SearchStatus to see the Alexa rank for every website you visit.

See the company’s website Alexa rank to get a feel for its popularity. If the website is ranked below 200.000 that mean it isn’t visited a lot. If you asked me, I would avoid these types of site. If a hosting site has a ranking above 10.000 that means it’s really popular on the internet. That’s the type of host you should consider.

The Alexa ranking of a hosting website is far from enough though. There are a lot of popular but unreliable hosting services. We need to dig deeper.

See how reliable a hosting company is using NetCraft

Netcraft is a company that provides web hosting reliability and market-share analysis. Netcraft is the most reliable source I know of to examine how good a particular hosting company is (it was founded in 1994).

Netcraft can help you choose a reliable web hosting service because it provides monthly reports on companies that had the best uptime. They measure things like outage, failed requests, response time and so on.

The latest report for September 2010 features the top 10 most reliable companies for the month.

Upon further analysis I discovered that most of the sites are in Alexa top 100.000.

One trick: if you want to discover a good hosting company, see previous Netcraft reports and see which companies have been consistently in the top 10.

NetCraft reports seem to have some cons, though. I haven’t seen Rackspace and ThePlanet in their top 10 services for a while, probably because these are some of the biggest hosting companies and managing all servers without experiencing a small downtime. So there’s a big probability small companies are given an advantage over big ones in NetCraft reports because of this reason.

Check the BBB ranking for the hosting company

You can search for a company on Better Business Bureau and check its ‘grade’ which is determined by several factors. Some of the factors are: how many complains does the company receive from unsatisfied customers and most importantly, how it handles these complains. You’ll be surprised at the amount of popular web hosting companies that have an extremely bad grade. I don’t recommend dealing with them.

BBB is limited to only US and Canada though, don’t expect to find European hosting companies there. I assume you’ll need a company with the servers in US though, most people primary audience are visitors from US/Canada.

I hope you liked this article. These 3 metrics are not perfect for checking the reliability of a hosting company, but they’re far better from listening to contradicting experiences on forums.

No Related Post

Pricing Page And Plan Comparison Tables: Tips, Tricks, Advices and Showcases

Dicky — Mon, 21 Jun 2010 14:36:01 +0000

Pricing and signup page is the key factor to your sales. Pricing pages normally give details on various packages/options and the differences within them. They are there to make visitors clear about the product. Therefore, the design of the pricing page is very important.

Modern sites for web applications, web services and web hosting providers tend to decorate their pricing and signup pages attractive as possible. Tables are being used to compare and shows the various options available. Table is good for comparison purpose and it helps potential customers to make better decision.

Different approaches are being implemented on pricing page. Here, we are going to look into some of the creative approaches for pricing page and product comparison table designs. Also, we will be discussing about tips and advices for designing a creative pricing page. Let’s start with the tips & advices. After all, we will proceed to the showcase.

1. Comparison Tables With Detailed Feature

If you are offering multiple options for your product, and there are significant differences within each package, it is advisable to have a table and clearly list down the detailed features and differences within them.

The table should helps users spot the differences and help them to make decision.

Example: Expression Engine

Expression Engine has three different type of packages: Core(free), Personal and Commercial. The pricing table clearly explains the modules included, and also term of use for each option.

2. Uses Of Icons/Images To Represent Different Options

An image speaks a thousand of words. Images are easy to remember and understandable. Make sure the images that you use are related and clearly represent the options. Also, the images should follow the conventional, don’t be too creative on choosing the images.

Example: Squarespace

There are 5 different options available to choose from. Each of them is represented by an image. The “Advanced” option is represented by a “settings” icon while “Community” option is represented by icon with multiple persons. They are understandable, even though just look at the images/icons.

3. Uses Of Column Height To Represent The Price

You could also use the column height to significantly tell potential customers the differences in prices. The lower column will have cheaper price and less features, while the highest column will have most features with the most expansive price.

Example: 2large2email

They have 4 different options: Free, Basic, Business and Premium, with each of them having different prices and features.

4. Different Colors For Different Options

It is good if you have multiple colors for different options or columns. The more expansive option will have darker color while cheaper option will have lighter color.

Example: CrazyEgg

Crazy Egg effectively use gray color as the background color, with darker for more expansive option. They also emphasize the “standard” plan with the use of green as the background. Probably this option is the most popular choice.

5. Make The Emphasize Option Stand Out

If you offer multiple options for your service, and want to let users know which the most popular package is, you should make it standing out on top of other options. You could add border, increase the column size or use different color to emphasize it.

Example: Big Commerce

Big Comerce has 5 different packages and they are recommending the “Gold” package to their potential customers. The uses of red border and higher column effectively send this message to the potential customers.

6. Offer A Plan Recommender

Sometimes, users are unable to make decision. A plan recommender can helps user to choose. Although the plan recommender wizard is hard to code and involve a lot of algorithm, but I am sure you can easily beat your competitors with this helpful feature.

Example: Digi Internet

Digi is one of the Malaysia Telco and the competition within telcos in Malaysia is huge. They offer different packages for broadband and mobile internet plans. The Digi’s plan recommender wizard help potential customers to choose within various packages.

Showcase

Clutterpad

site5

eNom

FormAssembly

Clicky

Mollom

ClickTale

SlideRocket

Soocial

SlideDeck

Codebase

WebNotes

Donut Chat

Lighthouse

Timetonote

Rypple

Coaches Central

SPBAS

Clockspot

DropSend

Auctiva

SurveyMonkey

Huddle

WorkingPoint

Kareo

CacheFly

Scout

Setster

Usabilla

Zencoder

EquiPass Road Service

Transparency in Internet Explorer: 6 Simple Solutions

Dicky — Mon, 15 Mar 2010 14:41:33 +0000

Transparency in Internet Explorer is always a big issue for all Web Designers. There are a lot of compatibility problems with Internet Explorer 6. We have to design our website base on Firefox/Opera/Chrome, and then try it with Internet Explorer.

One of the major concern about IE6 is the transparency problem. IE6 can’t render transparent PNG image properly. As the result, your transparent and glassy design will become messy in IE6.

Luckily, there are a few solutions which can help web designer overcome the IE6 transparency problem. Each of them uses different method. Today, we are going to briefly look into these 6 methods. Please read the documentation while you are considering which method to use.

1. jQuery.pngFix.js

This solution requires jQuery and ables to work with CSS Backgrounds. To use this method, simple add both jQuery and pngFix plugin at your header section and then activate pngFix on document.ready.

2. DD_belatedPNG

DD_belatedPNG is another Javascript solution for youe IE6/PNG problem. In order to use this solution, simply add it to your document, call DD_belatedPNG.fix togother with the CSS selector.

3. TwinHelix IE PNG Fix
TwinHelix’s solution requires the use of behavior CSS property. You are required to upload a “iepngfix.htc” and a “blank.gif”. More configurations needed compare to the earlier solutions.

4. IE7.js

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

5. Unit PNG Fix

Unit PNG Fix will run automatically and make all PNGs transparent by default. It does not work with background-repeat.

6. PNG In Windows IE

Simply include 3 lines of code and you will get transparency for all your PNG files. This method uses the “defer” keyword, this trick causes the images to be replaced before they are rendered.

No Related Post

Manage Your Blog’s Content with Two Simple WordPress Hacks

Editorial Staff — Sun, 13 Dec 2009 14:40:11 +0000

It’s amazing that in my own non-scientific poll, half of those who work in some technology field still get the term hacker confused. A hacker is not someone who is leering in cyberspace ready to infiltrate their unsuspecting victim’s computer and pillage any information of use from its hard drive. A hacker is someone who looks for ways to manipulate things to make them work better. So when I speak of hacks for WordPress, I am looking at ways to change the code to make the application work better for us, not how to scrape content or steal log in information.

Hacks vs. Plug-ins

There are many different plug-ins available to help manage content on a WordPress blog so why would we want to mess with the code?

For starters, getting our hands dirty with the code of WordPress gives us a much better insight as to how the software works. As we become more comfortable with the source that powers our blog, we gain a better understanding of how to secure it from malicious attacks.

A second reason to avoid turning to a plug-in as a first resort is that an accumulation of plug-ins causes your blog to become bloated. Eventually, this bloat may begin to affect the way your blog loads and delivers to your audience.

Finally, if you pride yourself on going green or you just want to do what you can for the environment, you may be interested to know that code bloat can unnecessarily burden your server’s CPU. Making your server work harder uses more energy. Cooling a hard working CPU uses even more energy. Reducing code bloat saves energy.

Instead of relying on plug-ins, we are going to look at a few hacks that can help better manage a blog’s content. Each one of these hacks requires a bit of PHP knowledge and the ability to upload to your server.

Display a List of Future Posts

One of the most successful techniques television news uses is the teaser. Right before commercial break, they leak bits of information about upcoming stories to keep the viewers interested and glued to their television sets. You can do the same with your blog by letting your audience know about some of the upcoming posts that will soon be published displayed right in your blog’s sidebar.

Create a new post but instead of posting it immediately, schedule it for another date.
From your Dashboard, navigate to Appearance | Editor. From the list of files on the right hand side of your screen, select sidebar.php.
Where ever you would like your future posts to appear, paste the following code:
```
No future events scheduled.
```
Click on Update File.

Now your blog’s front page will display any future posts. There is one parameter, showposts, that you can change to the number you choose.

Tell Your Posts When to Expire

Just like any food in the cupboard, your posts might get stale after a little while. This next hack allows you to set an expiration date on your posts so that when the time comes, they leave your blog gracefully.

Locate the WordPress loop that begins here:
And ends here:

Replace your loop with the following code:


$expirationtime = get_post_custom_values('expiration');
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}
$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween > 0 ) {
// For example…
the_title();
the_excerpt();
}
endwhile;
endif;
?>

Save your changes.
Write your post and from the custom fields, select the key expiration. Set the expiration date in the following format: mm/dd/yyyy 00:00:00.

Now, when your post hits the expiration date, it will be not be displayed in the loop, therefore, your audience will no longer see it.
In addition to trimming stale posts from your blog, this can be a great solution if you are running a contest and only want content posted for a short time, or if you are advertising a sale and want the related posts cleared from your blog when it is over.

50+ Awesome Photoshop Poster Design Tutorials

Dicky — Mon, 30 Nov 2009 15:09:26 +0000

We use posters at a lot of places. For example, we have posters for movies, games, events and books. Photoshop is a great application for poster design. With the help of Photoshop actions, filters, powerful features and tutorials from community, we can easily create beautiful poster.

If you are looking for tutorial to design your poster, then you had came to the right place. Today, we are going to share 50+ awesome Photoshop tutorials for designing and creating poster.

Awesome Snowboard Poster

Blend Photos Like A Hollywood Movie Poster In Photoshop

Create incredible B-movie poster art

Create B-movie poster art

Design a vintage film poster

Create a Constructivist Inspired Poster

Create a Dark and Grungy Poster in Photoshop

Create a dark, creepy movie poster

Create a Furious Pink Panther Poster

Create a Mock-Retro Poster Concept

Create a Pop Art Style Poster with Urban City Background in Photoshop

Create a Space Invaders Poster

Create a Trendy Typographic Poster Design

Create a Vibrant Drinks Ad

Create an Awesome Grunge Poster in Photoshop

Create an Intense Movie Poster in Photoshop

Creating A Retro Grunge Poster

Creating an Old-Collage Effect Poster

Design a Retro Summer Poster Illustration

How to Design a Rockin 80s Party Poster

Design a Stylish Fashion Advert

Designing a Portable Gaming Device Poster

Designing a Typographic Concept Poster

Designing a war movie poster

Dirty Grunge Poster

Gigposter Design: The New Sex

How to Create a Retro Boxing Poster in Photoshop

How to Create an Ice-cold Poster with 3D Text

How to Design a Vintage Horror Movie Poster in Photoshop

How to Design an Authentic Rock Poster

How to Make an Old Western Wanted Poster in Photoshop

Making a Anti-Terrorism Poster

Lord Of The Rings Poster Adobe Photoshop Tutorial

Love Poster

Make a Turn of the Century Vaudeville Poster

Make an Inspiring Artistic Poster with Drawn Elements

Mercedes Benz Poster and Postcard Design in Photoshop

Create a Vintage Horror Movie Poster for Halloween

Poster From the Words

Water Drops

WWII Airplane

John Rambo Movie-Poster Tutorial

Create a Grungy Poster In Photoshop

Skateboarding Poster

Soul Rebel Poster Tutorial

Step Up 2 Poster

Create sci-fi poster art

Political poster art

Stencil poster effects

Wonder Woman Movie Poster

X-MEN movie poster

7 Areas Of PHP You Might Want To Optimize

Editorial Staff — Fri, 16 Oct 2009 16:30:30 +0000

PHP is undoubtedly one of the preferred development methods chosen by many to create dynamic web pages. As contents get bigger, there is a real need to manage our PHP codes so that it runs faster. Unfortunately for many beginners, designers and enthusiasts, making PHP codes run faster requires intricate knowledge of the overall infrastructure around PHP. It could be your Apache settings, your operating system, or even the memory of your machine.

But we can start from somewhere. Here are 7 areas of your own PHP code that you can modify for performance.

PHP static Keyword

Usage of the static keyword on functions is often programmer’s first choice for optimization. It allows methods within a PHP class to be accessed without the need to instantiate it.

The process of instantiating an object is always expensive and as we can see here, the function staticMethod() can be called without creating a new Foo object. This optimization could lead almost up to 4 times speed improvement.

PHP switch Statements

Most programmers prefer the general if-statements, but some performance gains can be achieved if we use the more specific switch-statements, especially when we have to deal with a lot of conditions.

String Manipulation

Many casual programmers interchangeably use the single and double quotation marks in PHP. Knowing when and where to use them not only encourages proper coding technique but also faster execution in the long run. All you need to know is this, single quotation marks between a string mean that the PHP interpreter doesn’t have to scan the string for variables, as opposed to double quotation marks.

Another frequent string manipulation practice happens when we want to replace a string with another string. There are about 4 ways a programmer could achieve this, using functions sprintf, preg_replace, str_replace or strtr, albeit different low-level implementations between them. It is enough for us to know that using strtr whenever possible takes lesser time to complete than the other three, almost by a factor of 4.

Data Structures

With PHP 5 comes support for Object Oriented Programming (OOP). While OOP does promote scalability while minimising the amount of code you write, not everything has to be in OOP. Often these OOP practices, such as creating a new object or calling methods within it take a massive overhead and a lot of memory. For example, lists might be useful to store data, but arrays in PHP work the same way too. Assess how big your PHP project would be – my bet is if it is just for your personal website, you might want to stick to simpler methods.

Variables

Variables in a PHP code can be declared in many places within the entire scope, some can be a local variable contained within a method or a global variable, declared outside of the scope of methods within a PHP class. When it is not required of you to use global variables, change them as local variables as this could bring almost as much as double speed improvements.

Remember OOP? Incrementing an object property for example, is 3 times slower than a local variable.

PHP Output

Like string manipulation, there are multiple ways to output results. The general consensus point that echo is faster than print. Although the justification is pretty academic, it comes down to the design between echo and print in PHP. The former does not return a value while the latter does.

Error Handling

Although error handling could promote robustness, it is better to ensure that such erroneous outcomes never happen. Error handling, mostly used during debugging purposes, is an expensive process within PHP. For instance, avoid using the @ operator to suppress errors.

Extremely Simple Way To Display Delicious Counts For WordPress Users

Dicky — Thu, 03 Sep 2009 13:44:18 +0000

Delicious is the most popular social bookmarking service. If you pay attention on WDB, then you may notice that most of WDB’s articles are being saved more than 100 times by Delicious users.

There are a lot of ways for you to display your Delicious saved counts. But today we are going to show you how to use Delicious API together with WordPress custom field to save and display the Delicious saved counts.

What you need to know before start writing the code?

MD5 – You need the URL’s Md5 hash value in order to lookup its Delicious saved counts. You can read more by reading the PHP md5() function.
serialize() and unserialize(). We will need to serialize the data before storing to the database, and then unserialize them after retrieve from database.
Custom field. We use the custom field to store the Delicious saved counts to the database. By saving the Delicious saved counts to the database, we can reduce the number of calls to Delicious’s API and also drastically speed up your post loading speed. Imagine, if you have 1k visitors per hour, then you will have 1000 requests sent to Delicious per hour. So, we have to save the counts in our database in order to reduce our server load too.

Step by step to create your plugin

We will have a function called delicious_count() and everything will be inside this function. We need the global $post variable and also another variable $count to store the Delicious saved counts.This is the initial setup for the function, which will return the saved counts when being called.
```
function delicious_count() {
global $post;
$count = 0;

return $count;
}
```
Here, we would like to introduce another variable called $old_del, which is an array that will contains the Delicious saved counts together with the “lastcheck” timestamp. We will look into more details about $old_del later.
As i explain before, we save everything in the custom field called “_delicious”. The reason why i include the “_” in front of the custom field is to make it “invisible” so that nobody can go and edit the value, unless you login to your database server.
```
$old_del = unserialize(get_post_meta($post->ID, '_delicious', true));
```
After retrieve the value from database, we need to unserialize it into an array and pass to $old_del.
Now, let’s look into the details of $old_del. It is a key-value pair array with 2 elements inside. the first one is “count” and the second one is “lastcheck”. The “lastcheck” indicates the time (in Unix timestamp) before the array being serialize and saved into the database. We will then use the mktime() method to get the current timestamp, and then subtract 600(600 seconds). This is to make sure we will not call the Delicious API within next 10 minutes.
```
if($old_del == null || $old_del['lastcheck'] < (mktime() - 600)) {
}
```
Now, we reach the most important part – how to get the Delicious saved counts from the API.
```
$jsonurl  = "http://feeds.delicious.com/v2/json/urlinfo/" . md5(get_permalink());
$json = file_get_contents($jsonurl,0,null,null);
$json_output = json_decode($json, true);
$del_count =  $json_output[0]['total_posts'];
$del['count'] = $del_count;
$del['lastcheck'] = mktime();
<$del = serialize($del);
```
The first line is to construct the JSON URL while the lines 2-4 will retrieve the counts and saved into the variable $del_count. After that, we save both the Delicious counts and “lastcheck” into the variable $del and serialize it.
After we get everything, it is the time for us to save them into the database. Here, we will need both update_post_meta() and add_post_meta(). You can refer them through WordPress Codex if you don’t know how to use.
```
if($old_del != null) {
update_post_meta($post->ID, '_delicious', $del);
}
else {
add_post_meta($post->ID, '_delicious', $del, true);
}
```

We almost reach the final stage. Before we see how to use this function, let’s see the complete code here.


function delicious_count() {
global $post;
$count = 0;
$old_del = unserialize(get_post_meta($post->ID, '_delicious', true));

if($old_del == null || $old_del['lastcheck'] < (mktime() - 600)) {
$jsonurl  = "http://feeds.delicious.com/v2/json/urlinfo/" . md5(get_permalink());
$json = file_get_contents($jsonurl,0,null,null);
$json_output = json_decode($json, true);
$del_count =  $json_output[0]['total_posts'];
$del['count'] = $del_count;
$del['lastcheck'] = mktime();
$del = serialize($del);

if($old_del != null) {
update_post_meta($post->ID, '_delicious', $del);
}
else {
add_post_meta($post->ID, '_delicious', $del, true);
}
$count = ($del_count == null) ? 0 : $del_count;
}
else {
$count = ($old_del['count'] == null) ? 0 : $old_del['count'];
}

return $count;
}

?>

Ok, now you have the complete code.Simply call delicious_count() within the WordPress loop and you will have your Delicious saved counts. I hope you enjoy this tutorials as i think this method is pretty helpful and it demonstrates how to make use of the WordPress custom field.

No Related Post

Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

Dicky — Wed, 17 Jun 2009 15:31:10 +0000

News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

Step 2

In the same document, create a

and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another

class name “newsticker-jcarousellite”. Remember, this is very important and you will need to use the same class name when you configure jCarousel Lite.

Step 3

In the “newsticker-jcarousellite”

, create an

element. In this example, i had created 6 news, so i will have 6
elements(but i am not going to show all). We will have the thumbnail float to the left, while the title and other information float to the right.
```
    
        
    
    
        The Knight and the Lady
        Category: Illustrations
    
    
```
Step 4

After you created your

element, it is the time for us to configure the jCarousel. Under the , add these scripts:

The script itself is pretty straight forward. The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options which you can configure easily. Refer the documentation for more information.

Step 5

Basically you had done everything, except styling your content. So, just copy and paste the scripts below in your style.css file.

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

.clear { clear: both; }

Finish!

That’s all! You can view the demo here, or download the source code for your own project.

Web Design Booth » Tutorial

Building Tabbed Navigation using SpryTabbedPanels

CSS Code

HTML Code

Categorizing the HTML code

What you can do more?

Sample Output

Files

Conclusion

Related Posts

Prepare Yourself For The After Effects of Guest Post

On blog Work

On Guest Blog Work

On the web Work

Related Posts

Choosing a Hosting Company? Use The Following Criterias

Use Alexa.com ranking to see how popular the website is

See how reliable a hosting company is using NetCraft

Check the BBB ranking for the hosting company

Related Posts

Pricing Page And Plan Comparison Tables: Tips, Tricks, Advices and Showcases

1. Comparison Tables With Detailed Feature

2. Uses Of Icons/Images To Represent Different Options

3. Uses Of Column Height To Represent The Price

4. Different Colors For Different Options

5. Make The Emphasize Option Stand Out

6. Offer A Plan Recommender

Showcase

Related Posts

Transparency in Internet Explorer: 6 Simple Solutions

1. jQuery.pngFix.js

2. DD_belatedPNG

4. IE7.js

5. Unit PNG Fix

6. PNG In Windows IE

Related Posts

Manage Your Blog’s Content with Two Simple WordPress Hacks

Hacks vs. Plug-ins

Display a List of Future Posts

Tell Your Posts When to Expire

Related Posts

50+ Awesome Photoshop Poster Design Tutorials

Related Posts

7 Areas Of PHP You Might Want To Optimize

PHP static Keyword

PHP switch Statements

String Manipulation

Data Structures

Variables

PHP Output

Error Handling

Related Posts

Extremely Simple Way To Display Delicious Counts For WordPress Users

What you need to know before start writing the code?

Step by step to create your plugin

Related Posts

Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

Step 1

Step 2

Step 3

Step 4

Step 5

Finish!

Related Posts