Powerusers » Nikhil

10 Super Cool Web Interfaces at deviantArt

Nikhil — Tue, 15 May 2012 20:53:44 +0000

deviantArt is and always have been best place of inspiration for me. Some time ago, I compiled a post for Beautiful Texture Packs available at deviantArt. Today I am having super cool web interface concepts.

I was taking a look at digital art gallery and found some very good web designs. So I made a list of some of my favourite designs and thought to share it with you. Check out following design and share your thoughts on the same.

1. Planet NexGen – Web Design

2. Tivoli

3. Personal Portfolio

4. Dimensions xtreme 2010 folio

5. Some Web

6. Imago

7. Where the chubs live

8. Finestate

9. New Valentin

10. Eye For Art

9 Tutorials to Get Started with Custom Post Types in WordPress

Nikhil — Tue, 13 Mar 2012 21:45:16 +0000

Custom post types is widely accepted feature of the WordPress which have pushed boundaries to much more extent.
Now if you want to deal with the considerable amount of data on website, then WordPress can become your friend in need.

Post Types & Custom Post Types
Post types are available in WordPress for publishing your content like Post and page. While in custom, we can create our own content publishing type.

Lets get some more idea and hands on custom post type with the help of some awesome tutorials.

1. Create a WordPress custom post type

2. WordPress Custom Post Types Guide

3. How to display custom post types on your WordPress blog homepage

4. How To Use Custom Post Types To Organize Online Marketing Campaigns

5. Custom post types in WordPress

6. Using Custom Post Types to Create a Killer Portfolio

7. Custom Types – Codex

8. Custom Post Types in WordPress 3.0

9. Create your first WordPress Custom Post Type

How useful is Custom Post Type for you? Share your ideas below!

Learning JSP (Part 1) – Introduction

Nikhil — Sun, 05 Feb 2012 12:14:50 +0000

Hello everyone! We are starting a new series for exploring well popular server side technology called ‘JSP’ (Java Server Pages). We will focus on learning this technology from very basic.
Today we will be covering following topics:

What is JSP?
How does it looks like?
Where can we use it?
Things required to get started.

1. What is JSP?

JSP is a server side technology like ASP and PHP. This technology allows us to use Java code with static markup language. It is useful for development of web based application independent of server and platform. JSP page is compiled and executed on the server and the resulting HTML or XML page is delivered to the client side. The compiled pages on server uses Java bytecode and this bytecode can be executed by Java Virtual Machine (JVM).

Java bytecode – It is a form of instruction that Java Virtual Machines executes. Having knowledge of java bytecode is same as having knowledge of assembler for C or C++ programmer.

2. How does it look like?

The use of jsp is same as that of php. We can use jsp tags along with the regular HTML tags. See the following example for getting clear idea.



    JSP Demo Page


    <% out.println("This Line is in JSP tag."); %>

As you can see, I have used jsp tag along with html tags. We can use jsp tags wherever we want to show the dynamically generated content.

3. Where can we use it?

JSP can be used anywhere where dynamic nature is required for your application or website. If you want to show data from database, jsp is the best choice. It is secured technology since every jsp page is compiled into the bytecode on the server and no human being can read it. You can separate design view and business logic of your application to make it more defensive. As jsp requires JVM for execution and JVM is available for all platforms so it becomes platform independent too. It can be used for creating Web Sites, Web Services, Online Shops, Content Management Systems and much more.

4. Things required to get started!

For getting started with jsp you will require following tools/application.
a. Java Runtime Environment (JRE) depending upon your OS.
b. Apache Tomcat Server
c. Any text editing software you love.

For today, this will be enough. In next post we will setup environment for running jsp and write first jsp page.

If you like this article and want to continue learning more about jsp then please give your feedback and comments.

Reviewed: depositphotos.com Affordable Place for Royalty Stock Images

Nikhil — Wed, 12 Oct 2011 20:54:00 +0000

Thinking to launch website for your organization or just entering into the blogging world??? You may face lot of troubles searching for quality images on the internet. There are many resources available for Royalty Free images but amongst them only few stands tall. Depositphotos.com is one of the best resources available for Royalty free images and vectors.

Pros:

Free Trial Subscription – You can enjoy free subscription for 7 days and download 5 images per day. This means you can enjoy 35 images absolutely free.
Pay per Credit – You can pay for the images depending upon its size. Depositphotos follow credit base currency. So can buy an image in exchange of credits.
Various Subscription Plans – There are various subscription plans available ranging from 3 days to 12 months.
Loads of images – Lots of images are available to choose your favorite one.

Cons:

I searched for keyword ‘color’ on Depositphotos.com and Shutterstock.com and got following result.

Depositphotos.com

Shutterstock.com

Noticed any difference?

Conclusion:

Depositphotos.com is a good place where loads of Royalty free images and vectors are available to choose a best one for yourself at descent price.

Rating:

3.5/5

No Related Posts

10 Beautiful Texture Packs

Nikhil — Wed, 13 Apr 2011 20:51:31 +0000

Hello everyone! I have compiled a nice set of beautiful texture packs. I found these textures while searching for bokeh texture on deviantArt.

What is deviantArt?
deviantART is the largest online social network for artists. It was created to entertain, inspire, and empower the artist in all of us. You can register for deviantART for free and exhibit, promote, and share your works within a peer community dedicated to the arts.

I have added these textures to my library and thought that you might also like to include in your library too. So have a look at these texture beauties!

1. Raining Light Bokeh Pack

2. Heart Bokeh Textures

3. Dark Symphony Textures

4. Painted Textures Vol. 10

5. Woodwork Texture Pack

6. Colorful Grunge Pack

7. Big Pack of Light Textures

8. Glitter Bokeh Texture Pack

9. The Ice Texture Pack

10. Natural Paper Texture Pack

These textures can also be used for postcard printing wherein you can incorporate it with the appropriate design to convey the meaning you want to say.

Create Simple Random Color Generator using JavaScript

Nikhil — Mon, 14 Mar 2011 12:00:40 +0000

Hello everyone! I am writing a post after long time since I was busy in 12 hours a day tight schedule for almost Six months. Although the experience was very awesome.

So today, we are going to create a very simple Random Color Generator using JavaScript. Some of you guys might think it as very very simple but it’s really fun to create. If you haven’t created yet by yourself then I would suggest trying it. It actually takes 2-3 minutes for creating.

Here we are going to generate Hex Number. For this we will create an Array which will contain numbers ‘0’ to ‘9’ and characters ‘a’ to ‘f’ as the range of the Hex Number is from 0×000000 to 0xFFFFFF. Then we will pick an element from an array randomly and place it in the Hex Number.

Step1:

Create an Array


var hexno=new String;
arr=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

Step 2:

We will select an element randomly from array. Math.random() generates random number from 0 to 1 which will be multiplied by 15 (since our array contains 16 elements with base 0). Math.round() will round the number to its nearest natural number.


var n1=Math.round(Math.random()*15);

var n2=Math.round(Math.random()*15);

var n3=Math.round(Math.random()*15);

var n4=Math.round(Math.random()*15);

var n5=Math.round(Math.random()*15);

var n6=Math.round(Math.random()*15);

Step 3:

Get a corresponding number for all the six elements and put it in the string.


hexno="#"+arr[n1]+""+arr[n2]+""+arr[n3]+""+arr[n4]+""+arr[n5]+""+arr[n6];

Step 4:

Use the string to apply the color.

window.document.bgColor=hexno;

That’s it. Random Color Generator is ready. Try it out.
Final Code:

var hexno=new String;
arr=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

var n1=Math.round(Math.random()*15);
var n2=Math.round(Math.random()*15);
var n3=Math.round(Math.random()*15);
var n4=Math.round(Math.random()*15);
var n5=Math.round(Math.random()*15);
var n6=Math.round(Math.random()*15);

hexno="#"+arr[n1]+""+arr[n2]+""+arr[n3]+""+arr[n4]+""+arr[n5]+""+arr[n6];

document.write("<div id='tag'>");

document.write("<h2>Hex Color</h2>"+"<h3>"+hexno+"</h3>");

document.write("</div>");

window.document.bgColor=hexno;

Concept Wallpaper Pack #3

Nikhil — Wed, 06 Oct 2010 20:52:04 +0000

Hello everyone! Its been a long time since I have written a post. Anyways, today I have motivating and beautiful wallpapaer for you.

The motivation behind behind this wallpaper is the following line.

Bugs are in the Codes, Not in the Concepts!

- Dr. Vijay Gokhale

I hope this will inspire you all, so go and get it.

The wallpaper is available in different sizes including for Widescreen and iPad.

How to Create Coda Slider in Minutes

Nikhil — Sun, 25 Jul 2010 20:29:01 +0000

Slideshow is great way of displaying contents to your readers. And the use of jQuery in creating these awesome sliders or slideshows is easy to implement and modify.

Today in this tutorial we are going to create very easy Slider using Coda javascript library.

So before going to the first step you can view the working demo of tutorial and download the source code below.

Step 1: XHTML

<div id="content">
<h1>Coda Slider | DEMO
<div class="wrapper">
<div id="coda-slider-1" class="coda-slider preload">

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Welcome!
<p>Hello, welcome to the working demo of Coda Slider. You can see how image, lists or text looks or works on various tabs. I hope you like this tutorial. Enjoy great sliding effect and try out with the above tabs.</p>
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Images can go Like this!
<img src="images/demo.jpg" alt="demo image" />
Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Recent Articles
<ul>
<li><a title="15 Must Read Articles for Web Developers" href="http://nikhilmisal.com/15-must-read-articles-for-web-developers/">15 Must Read Articles for Web Developers</a></li>
<li><a title="Why these 31 Blogs Rock (Always)?" href="http://nikhilmisal.com/why-these-31-blogs-rock-always/">Why these 31 Blogs Rock (Always)?</a></li>
	CSS3 Styling" href="http://nikhilmisal.com/create-simple-navigation-using-css3-styling/">Create Simple Navigation using CSS3 Styling
<li><a title="30 Superbly Done Creative Ads" href="http://nikhilmisal.com/30-superbly-done-creative-ads/">30 Superbly Done Creative Ads</a></li>
</ul>
</div>
</div>

<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Thank You</h2>
This tutorial is created by Nikhil Misal for Powerusers.
<p>Thanks for visiting this demo! If you like this tutorial then please share and comment on it.</p>
<p>You can freely use this slider for your future projects so go ahead and download the <a href="#">Source Code</a>.</p>
</div>
</div>

</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<h3><a title="Go Back to Tutorial" href="#">Go Back to Tutorial</a></h3>
Created By: Nikhil Misal
</div>

Here the content of each slide is include in panel-wrapper and each panel is included in panel. And all these panels are included in coda-slider.

Step 2: CSS

Lets add some styling to the above file.

/*Page Styling */
body {
margin: 0;
padding: 0;
background: url(images/back.jpg);
}

#content {
width: 940px;
margin: 0 auto;
padding-bottom: 50px;
font: 1.5em Keffeesatz, Verdana, Geneva, sans-serif;
}

@font-face { font-family: Keffeesatz; src: url(fonts/YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(fonts/YanoneKaffeesatz-Bold.otf) format("opentype") }

h1 {
color: #ddd;
text-align: center;
padding-top: 20px;
font: 2.5em KeffeesatzBold, Verdana, Geneva, sans-serif
}

h2 {
font: 2em KeffeesatzBold, Arial, Helvetica, sans-serif;
color: #999;
text-shadow: 1px 1px 2px #000;
}

/* Coda Bar */
.coda-nav {
height: 30px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
width: 700px !important;
margin: 0 auto;
border: 5px solid #aaa;
border-bottom: none;
}

.coda-nav ul {
clear: both;
display: block;
margin: auto;
overflow: hidden;
}

.coda-nav ul li {
display: inline;
overflow: hidden;
}

.coda-nav ul li a {
background: url(images/button.jpg) top center no-repeat;
color: #fff;
display: block;
float: left;
margin-right: 1px;
text-decoration: none;
width: 30px;
height: 30px;
text-indent: -999px;
}

.coda-nav ul li a.current {
background: url(images/button-active.jpg) top center no-repeat;
}

.coda-nav ul li a:hover {
background: url(images/button-active.jpg) top center no-repeat;
}

/* Slider Styling */
.coda-slider {
display: block;
width: 700px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 50px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
border: 5px solid #aaa;
border-top: none;
}

.panel-container {
position: relative;
}

.coda-slider .panel {
float: left;
width: 700px;
}

.panel-wrapper {
margin: 0 20px;
overflow: hidden;
padding: 20px 0;
}
.panel-wrapper img {
float: left;
margin: 0 20px 20px 0;
border: 5px solid #999;
}
.panel-wrapper ul li {
margin: 10px 0;
}

We are using some CSS3 properties here. Like Gradient background and external fonts embedding @font-face. You can learn more about these properties here:

1. Speed Up with CSS3 Gradients

2. The Essential Guide to @font-face

Step 3: jQuery


$().ready(function() {
$('.coda-slider').codaSlider({
autoHeightEaseDuration: 2500,
autoHeightEaseFunction: "easeInOutElastic",
slideEaseDuration: 2500,
slideEaseFunction: "easeInOutElastic"
});

});
</script>

Add the above script in the tag. This will initiate the slider operation. You can change above value and play with some functions.

I hope you like this tutorial. If you enjoyed it then please put your comments below and don’t forget to download the source code.

Enjoy the real success with testking 70-640 and 70-652 online training programs and latest HP2-Z18. Also prepare for next level with quality 000-115 dumps questions and answers of 642-654 exam.

15 Must Read Articles for Web Developers

Nikhil — Thu, 08 Jul 2010 17:59:53 +0000

Hello everyone, it’s being nearly a month since I have written a post. But once again here I am with little different look of the blog, hope you don’t hate it.

Anyways. Today web development has crossed many heights. HTML5 and CSS3 have really changed the face of web and developers approach towards creating it. If you want to develop a perfect website then the knowledge of basic things and some advanced tools is must. You cannot stop just making website cross browser compatible. Now we cannot ignore the increasing market of portable devices such as iPhones or iPads and their compatibility issues.

Also todays web developer is considered to be aware of application development (like for Facebook or Twitter), widget development, e-commerce websites, web typography, content management systems and other related technologies. So where will you find about all these stuff? Here! Following articles will help you to excel in web development and will also teach you about latest technology and requirements.

1. Five Goals to Strive for with Every Site You Design

Goals are important to have in life. They are especially important for website design, because without any goals, you have nothing to shoot for in the end and nothing to measure your success by. Goals help designers focus on the important things and not lose sight of what you want in the end; goals are what help designers deliver outstanding sites every time.

2. Improving The User Experience Of Your Website With Modal Windows

With new elements of design trending the web it’s no surprise a large portion of these aim towards enhancing the user experience. What better way to help create a more usable environment then to start by properly structuring the way your users interact with key aspects of your websites (i.e. the login process)? This is where the use of Modal Windows steps in.

3. Cross-Browser Testing: A Detailed Review Of Tools And Services

As you probably know, cross-browser testing is an important part of any developer’s routine. As the number of browsers increase, and they certainly have in recent years, the need for automatic tools that can assist us in the process becomes ever greater. In this article, we present an overview of different cross-browser testing applications and services. Surely, you are already familiar with some of them, and you may have even stumbled across another overview article, but this one takes a different approach.

4. Planning your E-Commerce Website

Whether theming an e-commerce website or doing a full-scale build, one of the most important parts in the whole process is the planning. Planning a build before you start can sometimes seem like a bit of a tedious and time-consuming task, but not only will it make everything run a lot smoother, it will also save a lot of time.

5. 10 Most Sought-after Skills in Web Development

In a time of economic crisis, web developers and freelancers everywhere have started chewing their fingernails. However, no matter how bad the economy worsens, there will always be work in certain booming fields of web development.

6. 10 Steps To A More Usable Ecommerce Website

The ecommerce marketplace is a very competitive one and a rival site is never more than a click away. If you want to attract and retain customers, you need to make sure that your site is as usable as possible.

7. Responsive Web Design

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.

8. 18 Dos and Don’ts Of Usability On The Web

Are you a web designer or do you run a website? Good, because this article is for you. If you’re designing websites for a living or running your business online, there are 18 tips in this article that you should definitely read and remember.

9. Web Designers, Don’t Do It Alone

Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.

10. The Importance and Different Types of Community Driven Websites

Ever since the web began to evolve out of its infancy from the mid to late 90′s online communities in one form or another have existed and flourished. Today we’ve taken the very same fundamental concepts of our ancestry and we have managed to build socially thriving networks that cater to a variety of individuals.

11. On Web Typography

There are many books and articles on typography, but considerably few explore typeface selection and pairing. With the floodgates poised to open and the promise of many typefaces being freed up for use on websites, choosing the right face to complement a website’s design will need to become another notch in the designer’s belt. But where do we start?

12. The Principles Of Cross-Browser CSS Coding

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.

13. The Essential Guide to @font-face

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

14. What NASA Can Teach You About Web Design

What does space have to do with becoming a better web designer? Actually, the real connection here is the folks who look at space. The people of NASA are brilliant when it comes to publishing content to the internet.

15. How To Engage Customers In Your E-Commerce Website

One of the most influential factors in our buying decisions is the opinions of our friends and relatives. Likewise, a large majority of online shoppers now trust what other customers say about the products they buy more than the e-tailers themselves. The reason is that we trust people who are “on our side,” even if we do not know them personally.

Why these 31 Blogs Rock (Always)?

Nikhil — Tue, 01 Jun 2010 09:34:47 +0000

What makes a good and impressive blog? Quality of content or the frequency of posting? Color scheme or the ease of use? Confused! Let’s find out the answers to these questions.

Focus on What?

The first question you have to ask yourself is; what are you writing for? Good ranking/PR, getting sponsors and earning money, providing information or teaching. Whatever you do; you have to be best in your field. As this blog is about design and web related contents so I will talk about this niche.

I have categorized the blogs in three fields.

1) Tutorial Blogs:

These are the blogs which provide tutorials and how to guides. Making a great tutorial blog depends on the way of writing tutorial and demonstrating it. While writing a tutorial following points should always keep in mind.

Write it in STEPS
Introduce with tools and basic idea behind the tutorial
Include illustrative images wherever necessary
Include Final product at the start and end

wprecipes.com

Net.tutsplus.com

Perishablepress.com

Line25.com

Tutorial9.net

Tutorialzine.com

Blog.echoenduring.com

Css-tricks.com

Sohtanaka.com/web-design-blog

Blog.spoongraphics.co.uk

2) Informative Blogs:

A good informative blog can be made with the quality of contents. You should be able to provide unique and complete information of the topic to your readers. Keep following points in hand while writing informative post.

Always focus on content
Use appropriate images and illustration for better explanation
Include further resources or readings at the end of post

Bonfx.com

Sixrevisions.com

Webdesignledger.com

Webdesignerdepot.com

Designinformer.com

Thedesigncubicle.com

Smashingmagazine.com

Spyrestudio.com

Buildinternet.com

Uxbooth.com

Onextrapixel.com

Designshack.co.uk

Carsonified.com/blog

Webdesignerwall.com

Inspiredm.com

3) Roundup Blogs:

Many of the today’s blog falls under this category. Writing a good roundup post requires immense web browsing and finding quality contents. Following points can help you build a good roundup.

Grab only quality content
Don’t repeat or copy
Provide link back to source
Unique idea for roundup

Devsnippets.com

Noupe.com

1stwebdesigner.com

Speckyboy.com

Designm.ag

Hongkiat.com

Check out our latest testking 640-802 dumps & 646-364 written by our 642-467 certified teams to help you in pass real C-TFIN52-64 dumps exam & 646-671 exam.

Powerusers » Nikhil

10 Super Cool Web Interfaces at deviantArt

1. Planet NexGen – Web Design

2. Tivoli

3. Personal Portfolio

4. Dimensions xtreme 2010 folio

5. Some Web

6. Imago

7. Where the chubs live

8. Finestate

9. New Valentin

10. Eye For Art

Related Posts:

9 Tutorials to Get Started with Custom Post Types in WordPress

1. Create a WordPress custom post type

2. WordPress Custom Post Types Guide

3. How to display custom post types on your WordPress blog homepage

4. How To Use Custom Post Types To Organize Online Marketing Campaigns

5. Custom post types in WordPress

6. Using Custom Post Types to Create a Killer Portfolio

7. Custom Types – Codex

8. Custom Post Types in WordPress 3.0

9. Create your first WordPress Custom Post Type

Related Posts:

Learning JSP (Part 1) – Introduction

1. What is JSP?

2. How does it look like?

3. Where can we use it?

4. Things required to get started!

Related Posts:

Reviewed: depositphotos.com Affordable Place for Royalty Stock Images

Pros:

Cons:

Related Posts:

10 Beautiful Texture Packs

1. Raining Light Bokeh Pack

2. Heart Bokeh Textures

3. Dark Symphony Textures

4. Painted Textures Vol. 10

5. Woodwork Texture Pack

6. Colorful Grunge Pack

7. Big Pack of Light Textures

8. Glitter Bokeh Texture Pack

9. The Ice Texture Pack

10. Natural Paper Texture Pack

Related Posts:

Create Simple Random Color Generator using JavaScript

Step1:

Step 2:

Step 3:

Step 4:

Related Posts:

Concept Wallpaper Pack #3

Bugs are in the Codes, Not in the Concepts!

Related Posts:

How to Create Coda Slider in Minutes

Step 1: XHTML

Step 2: CSS

Step 3: jQuery

Related Posts:

15 Must Read Articles for Web Developers

1. Five Goals to Strive for with Every Site You Design

2. Improving The User Experience Of Your Website With Modal Windows

3. Cross-Browser Testing: A Detailed Review Of Tools And Services

4. Planning your E-Commerce Website

5. 10 Most Sought-after Skills in Web Development

6. 10 Steps To A More Usable Ecommerce Website

7. Responsive Web Design

8. 18 Dos and Don’ts Of Usability On The Web

9. Web Designers, Don’t Do It Alone

10. The Importance and Different Types of Community Driven Websites

11. On Web Typography

12. The Principles Of Cross-Browser CSS Coding

13. The Essential Guide to @font-face

14. What NASA Can Teach You About Web Design

15. How To Engage Customers In Your E-Commerce Website

Further Reading:

Related Posts:

Why these 31 Blogs Rock (Always)?

Focus on What?