Visual Jquery
December 17th, 2008 / No Comments » / by pisakec
I found this code somewhere over the net while I research on Jquery. you can check it out here
Usability Mistakes
November 5th, 2008 / No Comments » / by pisakec
1. Inconsistent site-wide navigation
Site-wide navigation should do two things: show a list of locations you can use to browse the site and show your current location. It should remain the same throughout the site because it is an anchor — it must be familiar so people know what it is and feel in control because they know where they are and how to keep browsing. Changing the navigation will only create confusion, so keep it simple and consistent.
2. Links not identified by color and/or underline
Links are the key elements on a website — they’re the building blocks of the Web. Be sure to make them identifiable. The convention is to make your links blue and underlined. You don’t have to follow this if it clashes with your site’s style, but you do need to make links stand out in some way. I would stay away from making links black unless they’re located in the right context, i.e. a navigation bar.
3. Registration required to view content
Ever been in a situation where you’re searching for something on Google and after finding a good link and clicking through you’re met with a registration request? Hiding away valuable content for registered users only is a serious and frustrating barrier for your visitors and is a great method of driving away traffic.
4. Long registration forms
And not even forms that are too long — anything that’s even remotely long is bad. Registration forms are a serious barrier — you’re forcing your visitors to do some work. People hate filling in forms, so remove anything that’s not absolutely necessary and anything optional off the form. Even if the form looks long, people will be put off. Remember that your users can fill out optional stuff later.
5. Too much pagination
Remember reading an interesting article, then getting to the bottom of the page to find a set of pagination links? It’s frustrating because you now have to load several other pages to finish reading the article. This may drive pageviews up so you can charge more for advertising, but it is really worth it? Not only is it annoying for your visitors, it’s also bad for search engine optimization (SEO) because you’re separating valuable content into other pages. This makes it more difficult for search engine crawlers to understand what each page is about.
6. Text that is too long and un-scannable
Good copywriting is part of web design. Your visitors aren’t going to read your whole page of text because usually they’re looking for something specific or something of interest to them. They do this by scanning the whole page very quickly and looking for things to focus on — so give them those focus points. Use bold text, large headlines and images to provide a scannable structure to your content.
7. No contact information or contact form
Last but not least, if you visitors have a problem with your service (or perhaps want to give you their positive feedback) there should be a way to get in touch. You don’t necessarily need to go all the way and post your email and telephone number on the site, but there should be at least an easy to find contact form. There are sites out there that don’t even have that.
SEO tool for dummies
October 15th, 2008 / 2 Comments » / by pisakec
If a client has made better search engine ranking a key requirement of a redesign, or if you’ve decided your own site isn’t getting the amount of traffic you think it deserves, there really is no alternative—you need to think about SEO. Some of the tools can be a bit overwhelming, and if you’re just getting started you might not be sure what to make of all the data something like Google Analytics is giving you. It’s hard to be a skilled SEO surgeon from the outset, and sometimes what you really need is just some basic tools to get you started.
Google ranks a web page’s importance from 0 (not important) to 10 (very important). The higher the PageRank, the more likely a page will show up in a search. Enter a URL at PageRank Checker to get the current details of a single web site, web page or a domain name.
Technorati indexes over 112 million blogs and tracks which sites are being linked to most often. Use the site to see which blogs are linking to your site, and how your site compares to the rest of the blogosphere.
Search engines can’t “see” the beautiful design of your website and all the great photos and graphics that you’re using. When a search engine spider visits your page it has many of the same requirements as someone using a screen reader. This makes an accessible website a more search engine friendly website (the excellent article High Accessibility is Good Search Engine Optimization explains this is more detail). A good first step in making your site more accessible is ensuring it doesn’t contain any coding errors. Use the w3c’s online validation tool to test for errors.
Checking and improving the HTML for your webpage can help improve a sites SEO. Look through your HTML and watch for the following:
- fix any errors reported by the validation tool
- make sure you are using Header tags (eg. h1, h2, h3 etc) for headings, and not just paragraphs with styling applied to them
- make sure those headings are descriptive about the content of your page
- every image element on your page should have a descriptive ALT attribute – don’t forget that a search engine can’t see the image and relies on this text to make sense of the content of your page
- get rid of any empty or unnecessary html tags. The higher the ratio of good content on your page to overall page size, the better the page will perform
- ensure your page has a meaningful title attribute within the head of the document – this will become the text of the link to the page in any search engine results, so it’s very important.
eg<title>Design Meme</title> - make sure you also have a good concise description of the content of the page (or site) in your meta data. This will become the text shown alongside the link to your site in search engine results pages.
eg<meta name="description" content="Design Meme - A Resource for Web Designers and Developers created by Stuart Robertson with Tools, Tutorials, and Resources to Help You Build a Web Site." />
If you find looking at raw HTML a bit overwhelming you can also try using these 2 Firefox extensions to help: X-Ray for revealing the tags within the body of the page, and Professor X for displaying the content of tags within the head of a document.
There is a lot more you can do to improve the SEO of a website, but I’ve seen quite a few sites that would benefit greatly from this small amount of SEO First Aid. If you’ve done all these basic steps and you’d like to do a bit more work on improving how your site performs in search engines, then it’s time to move on to some of the more advanced tutorials and tools.
Hopefully some of the SEO experts who stop by the site will be able to offer some suggestions for which articles and tools to check out next!
thanks to http://www.designmeme.com/
Promote your website (DIY)
October 9th, 2008 / No Comments » / by pisakec
1. Write a Page Title.
2.Write a Description and Keyword META Tag.
3. Include Your Keywords in Header Tags H1, H2, H3
4. Make Sure Your Keywords Are in the First Paragraph of Your Body Text. Search
Google might expect a keyword density in the entire body text area of maybe 1.5% to 2% for a word that should rank high, so don’t overdo it. Other places you might consider including keywords would be in ALT tags and perhaps COMMENT tags, though few search engines give these much if any weight.
5. Make Your Navigation System Search Engine Friendly.
Make sure that a chain of hyperlinks exists that take a search engine spider from your home page to every page in your site. A site map with links to all your pages can help, too
6.Develop Several Pages Focused on Particular Keywords
7. Submit Your Webpage URL to Search Engines
8. Fine-tune with Search Engine Optimization
9. Promote Your Local Business on the Internet
11. Submit Your Site to Key Directories
12. Submit Your Site to Industry Sites and Specialized Directories.
Request Reciprocal Links
14. Write Articles for Others to Use in their Newsletters.
This will dramatically increase your visibility when you write articles in your area of expertise and distribute them to editors as free content for their e-mail newsletters or their websites.
15. Begin a Business Blog.
Want links to your site? Begin a business blog on your website, hosted on your own domain. If you offer excellent content and regular industry comment, people are likely to link to it, increasing your site’s PageRank.
site of the week 092608
September 26th, 2008 / No Comments » / by pisakec
Jquery sliding navigation integrated shopping with blog
The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.
advanced adding signature in outlook 2007
September 17th, 2008 / No Comments » / by pisakec
When you create a signature in Outlook 2007 it creates 3 files (.htm, .txt and .rtf). You can replace the .htm file with your own html file.
To create a signature in Outlook 2007:
Go to Tools / Options / Mail Format.
Click on Signatures.
Click on New.
Give your signature a name eg. My_Signature
Click on OK
You don’t need to add any content to the signature file. Outlook creates the files it needs. Click OK and close Outlook
Locate your signature folder:
In the "Run" prompt ("Run" in the Start Menu or Windows Key+R):
In Vista, type: %userprofile%\AppData\Roaming\Microsoft\Signatures
In XP, type: %userprofile%\Application Data\Microsoft\Signatures
You should see 3 files created for your My_Signature file (in .htm, .txt and .rtf formats). If you can’t see the file extensions, go to Tools / Folder Options / View and untick ‘Hide extensions for known file types’, or right-click the file and select ‘Properties’ to determine the file type.
Replace the HTML file created by Outlook:
Take your HTML signature file and use it to replace the .htm file in your signature folder (i.e. save it as in this system folder, using the same filename as the .htm signature file created by Outlook ).
To start using your new signature:
Restart Outlook.
Click on New
Click on Signature and select your signature from the list. Your signature will now be added to your mail.
N.B. YCTO found problems in Outlook 2007 with an image file in the .html signature file being reduced in size. This was solved by using the Outlook 2007 Edit facility in the Signatures window itself, i.e. by deleting the image in the html file and reinserting it using Outlook 2007’s Edit facility in Signatures. A hyperlink can also be assigned to the image, if required, in Outlook
site of the week , 090808
September 8th, 2008 / No Comments » / by pisakec
Viget Labs
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.
Lucuma
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.
youlove.us
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.
MelissaHie.com
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.
Sound Provisions
Amazing Flash shopping site with flash shopping cart
Logo trend
September 2nd, 2008 / No Comments » / by pisakec
Flourish 
Fibrous 
Doodles 
Amoeba
Loops 
FoldOver 
Site of the week, 082008
August 20th, 2008 / No Comments » / by pisakec
this is a first week that I add site of the week hopefully I can make it every week.
ralphlauren
simple and eleglant in design since the brand itself is groovy
pink frosting
simply pink…I wish I can control myself working with 2 or 3 color tone
Border, books, Music and Movies
hey, it’s a book store!
Seattle’s Music & Arts Festival
Always miss this Festivals at this time of the year
Urban outfitters
Horizontal navigation
jQuery From Scratch Resources
August 14th, 2008 / No Comments » / by pisakec
http://nettuts.com/javascript-ajax/15-resources-to-get-you-started-with-jquery-from-scratch/
Introduction to jQuery
August 14th, 2008 / No Comments » / by pisakec
Learning jQuery in 30 minutes
August 14th, 2008 / No Comments » / by pisakec
http://www.slideshare.net/simon/learning-jquery-in-30-minutes
Conditional-CSS
August 14th, 2008 / No Comments » / by pisakec
Any CSS statement or block can be prefixed by a conditional statement, of which there are three basic types:
- [if {!} browser]
- [if {!} browser version]
- [if {!} condition browser version]
1. // Conditional-CSS syntax examples
2. [if IE] - Used if the browser is IE
3. [if ! Opera] - Used if the browser is not Opera
4. [if IE 5] - Used if browser is IE 5
5. [if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc)
6. [if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6
Jquery For Dunmmies
August 8th, 2008 / 1 Comment » / by pisakec
What Exactly Is jQuery?
According to jQuery.com, jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
In simpler terms, jQuery allows you to turn ten lines of traditional Javascript code into two! Combine an enormous range of features with cross-platform compatibility and you have one robust framework. Before you know it, you’ll be creating everything from rich forms to Flash-like menus. Don’t worry if the task of learning yet another new framework seems daunting. These resources will take you step by step.
Why Would I Use This Library Over The Others?
Ultimately, it comes down to preference. Each framework has its own specific advantages. But, there is a reason why jQuery is the most popular framework available.
Cross-Browser Compatibility. With any Javascript implementation, a web developer can expect to spend a large portion of his or her time compensating for each browser’s quirks. Luckily, the jQuery library neutralizes these browser inconsistencies, thus allowing developers more time to work on their code.
CSS Selectors. By utilizing the CSS syntax, developers can use their existing knowledge to traverse their documents. With the addition of many CSS 3 and XPATH selectors, jQuery provides you with a wonderful mechanism for manipulating the elements on your page.
Chaining. jQuery uses a pattern called “chaining” for its methods. Every time you run a method on a jQuery object, the method returns that very same jQuery object. Consequently, you won’t have to retype your selectors for each method. Using such a “.NET” type of functionality allows for lower file sizes and greater code readability.
If you’re intrigued, you should be! Let’s get started.
Step 1: Download The Library
The first step on your journey will be to download the library. Visit jQuery.com and scroll down to the “Download jQuery” section. Choosing one of the listed links will download the library to your computer. Next, you’ll need to import the .js file into your solution.
Recommended Reading
CSS-Tricks.com : Introduction To jQuery
In his jQuery screencast, Chris Coyier, over at CSS-Tricks, will give you a basic introduction to including jQuery on your web page and writing a few functions.
Digital-Web.com : jQuery: A Crash Course
Here’s a crash course in jQuery written with code-savvy web designers in mind.
Slideshare.net : “Learning jQuery In 30 Minutes”
If you enjoy slideshows, this tutorial will teach you the fundamentals of jQuery in thirty minutes.
Step 2: Create Your First Function
Within five minutes of learning jQuery, you’ll be creating functions. Your first stop should be John Resig’s introductory article, “How jQuery Works”. He’ll show you many easy to understand methods that you can use in your web applications – including adding and removing classes, chaining, and calling the “document.ready” method.
Recommended Reading
jQuery.com : “How jQuery Works”
In his introductory article, John Resig – the creator of jQuery – will take you from the basics to creating animations. This is an essential read if you’re just getting started.
FifteenDaysOfJquery.com : Day 1
In a brave attempt to cover many of jQuery’s features in two weeks, “15 Days Of jQuery” goes over one topic per day. In this specific article, you’ll learn how to use the “document.ready()” method.
VisualJquery.com : “Your jQuery Dictionary”
Think of VisualjQuery.com as your digital dictionary. It will show you the syntax and definition for every jQuery method available. Keep this site bookmarked.
Step 3: Animate Your Elements
This is a controversial topic for many developers. In group number one, there are people who insist on “zero animation”. Give the users what they need as fast as possible, and let them be on their way. Don’t treat them as if they’re chipmunks searching for the next shiny toy. But, there are people in group number two as well. They look at a site, which has some tastefully implemented animation, as a site worthy of their user base. When used correctly, they believe that animation can greatly improve usability. You’ll have to decide for yourself which one you are. Never-the-less, jQuery makes animating elements on your page as easy a task as it can possibly be.
Recommended Reading
jQuery.com : “Animations”
This should be your first stop when learning about jQuery’s animation abilities. It will detail the parameters needed when using this method.
Detached Designs : Learning About The Animation Abilities Of jQuery
Are you a complete novice when it comes to animation? This tutorial will assume that you have no knowledge. Topics covered are increasing and decreasing text, moving elements, chaining animations, and more.
Web Designer Wall : jQuery Tutorials For Designers
Still confused about jQuery’s power? This site will list ten examples ranging from menus to image replacements.
Step 4: Plugins
The wonderful thing about jQuery is that, when being initially developed, John Resig and his team ensured that expanding its functionality through the use of plugins could be accomplish with only a few additional lines of code. You’ll be writing custom methods in no time! By keeping these plugins separate from the main library (only 16kb, by the way), we can then implement specific plugins only when necessary. As a result, this will allow the size of your javascript files to remain as small as possible.
Recommended Reading
jQuery Corner Gallery
Looking for a way to easily add rounded corners to your elements? With corners ranging from rounded to dog-eared, this plugin may find a permament spot in your “toolbox”.
Enhance The User Experience : 10 Useful jQuery Plugins
In this article, James Padolsey details his top ten favorite plugins.
jQuery.com : “Plugins”
As always, jQuery.com proves to be a valuable resource. This article will give you step by step instructions when it comes to creating your first plugin.
Step 5: Implementing AJAX Functionality
Feeling confident with your jQuery skills yet? Are you ready to take things to the next level? Why not begin implementing some Ajax functionality into your scripts? Through the use of the “load()” and “.get()” methods, jQuery makes it extremely easy to load data. The following resources will be vital for your education.
Recommended Reading
Sitepoint.com : Easy AJAX With jQuery
In his article for Sitepoint, Akash Mehta will show you how to simplify the process of adding Ajax to your applications with the help of jQuery.
jQuery For Designers: Using AJAX To Validate Forms
Remy will show us how we can use AJAX, along with the jQuery library, to add some server-side validation to our forms.
Nettuts.com : How To Load In And Animate Content With jQuery
Always remember to browse NETTUTs “Javascript” category when searching for jQuery tutorials. In this tutorial, we’ll show you how you can load and animate data using jQuery.
Most influential web developer
August 8th, 2008 / No Comments » / by pisakec
Eric Meyer: http://www.meyerweb.com
Eric Meyer is best known for his web standards work and for the many books that he has written over the years – most notably on Cascading Style Sheets. Currently, Eric works as a consultant for Complex Spiral Consulting
Molly Holzschlag: http://www.molly.com
olly is best known for her work on the “Web Standards Project”.
John Resig: http://www.jquery.com
jQuery a great deal. Why shouldn’t it? It is easily the most popular Javascript framework available; no doubt due to its wonderful implementation of CSS selectors. Are you familiar with its creator? Meet John Resig.
Andy Budd: http://www.andybudd.com
“CSS Mastery” – written by Andy
Jeffrey Zeldmanhttp://www.zeldman.com
SEO resource
August 6th, 2008 / No Comments » / by pisakec
Google Webmaster Tools allow you check the crawl statistics of your site. If you haven’t been using this great tool yet, login to the Google Webmaster Tools, then add and verify your site.
After you’ve verified your site, you can find out:
- When was the last time Googlebot crawled your site
- HTTP errors
- 404 Not Found errors
- External link counts
- What keywords people are using to link to your site
- What are the top search queries to your site
- And more.
Free SEO Tools
Here are some online SEO tools that you can use to check your PageRank, Link Popularity, Search Engine Position, Keyword Density, etc.
SEO Resources
Here are some external links where you can learn more about SEO:
Your Job As a Search Engine Optimizer
August 6th, 2008 / No Comments » / by pisakec
Each search engine has its own algorithm in ranking web pages. Understanding the general factors that influence the algorithm can affect your search result position, and this is what SEO experts are hired for. An SEO’s job has two aspects: On-Site and Off-Site.
On-Site SEO: are the things that you can do on your site, such as: HTML markups, target keywords, internal linking, site structure, etc.
Off-Site SEO: are the things that you have much less control of, such as: how many backlinks you get and how people link to your site.
This is a guide for designers and developers. The main concern is the On-Site aspects. Secretly though, if you do your job right… and design a beautiful site… and/or produce useful content… you’ll get Off-Site backlinks and social bookmarks without even lifting a finger.
Search Result Position
August 6th, 2008 / 1 Comment » / by pisakec
Coding and setting up your site to be SEO friendly can improve how well a search engine can access your website, it doesn’t guarantee you’ll end up at the top of the search engine result page (SERP). There are many factors in determining the search result position, but here are the basics:
PageRank
Some professional SEO’s pay attention to Google’s PageRank and some don’t. In my experience it doesn’t hurt to have a high Google PageRank. It’s a nice little benchmark to let you know how important Google sees your web page as. You can improve your PageRank by following the tips above and building-up quality backlinks. If you want to learn how PageRank works, Smashing Magazine has a very good article.
Domain Age Before Beauty
You might be surprised to learn that domain age is also a factor in the search engine algorithm. Older domains have a history, and their content is looked at as more credible than the website that got started last week. Older domains sometimes get the edge in search results.
Be Patient
You may have done every single thing right., but your site is still not showing up in the search engines for your target keywords. Why? Because everything takes time. It takes time for the search engines to index and rank your site (especially for new domains). So, be patient.
Another reason — it could be the keywords that you’re trying to target are very competitive. Try altering the keywords on the page and you may have different results. Remember, you are competing with millions of web pages on the internet.
SEO Mistakes Made by Designers and Developers
August 6th, 2008 / 1 Comment » / by pisakec
Splash Page
I’ve seen this mistake many times where people put up just a big banner image and a link "Click here to enter" on their homepage. The worst case — the "enter" link is embedded in the Flash object, which makes it impossible for the spiders to follow the link.
This is fine if you don’t care about what a search engine knows about your site; otherwise, you’re making a BIG mistake. Your homepage is probably your website’s highest ranking page and gets crawled frequently by web spiders. Your internal pages will not appear in the search engine index without the proper linking structure to internal pages for the spider to follow.
Your homepage should include (at minimum) target keywords and links to important pages.
2. Non-spiderable Flash Menus
Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.
3. Image and Flash Content
Web spiders are like a text-based browser, they can’t read the text embedded in the graphic image or Flash. Most designers make this mistake by embedding the important content (such as target keywords) in Flash and image.
4. Overuse of Ajax
A lot of developers are trying to impress their visitor by implementing massive Ajax features (particularly for navigation purposes), but did you know that it is a big SEO mistake? Because Ajax content is loaded dynamically, so it is not spiderable or indexable by search engines.
Another disadvantage of Ajax — since the address URL doesn’t reload, your visitor can not send the current page to their friends.
5. Versioning of Theme Design
For some reason, some designers love to version their theme design into sub level folders (ie. domain.com/v2, v3, v4) and redirect to the new folder. Constantly changing the main root location may cause you to lose backlink counts and ranking.
6. “Click Here” Link Anchor Text
You probably see this a lot where people use "Click here" or "Learn more" as the linking text. This is great if you want to be ranked high for "Click Here". But if you want to tell the search engine that your page is important for a topic, than use that topic/keyword in your link anchor text. It’s much more descriptive (and relevant) to say “learn more about {keyword topic}”
Warning: Don’t use the EXACT same anchor text everywhere on your website. This can sometimes be seen as search engine spam too.
Common Title Tag Mistakes
Same or similar title text:
Every page on your site should have a unique <title> tag with the target keywords in it. Many developers make the mistake of having the same or similar title tags throughout the entire site. That’s like telling the search engine that EVERY page on your site refers to the same topic and one isn’t any more unique than the other.
One good example of bad Title Tag use would be the default WordPress theme. In case you didn’t know, the title tag of the default WordPress theme isn’t
that useful: Site Name > Blog Archive > Post Title. Why isn’t this search engine friendly? Because every single blog post will have the same text "Site Name > Blog Archive >" at the beginning of the title tag. If you really want to include the site name in the title tag, it
should be at the end: Post Title | Site Name.
Exceeding the 65 character limit:
Many bloggers write very long post titles. So what? In search engine result pages, your title tag is used as the link heading. You have about 65 characters (including
spaces) to get your message across or risk it getting cutoff.
Keyword stuffing the title:
Another common mistake people tend to make is overfilling the title tag with keywords. Saying the same thing 3 times doesn’t make you more relevant. Keyword stuffing in the Title Tag is looked at as search engine spam (not good). But it might be smart to repeat the same word in different ways:
"Photo Tips & Photography Techniques for Great Pictures"
“Photo” and “Photography” are the same word repeated twice but in different ways because your audience might use either one when performing a search query.
8. Empty Image Alt Attribute
You should always describe your image in the alt attribute. The alt attribute is what describes your image to a blind web user. Guess what? Search engines can’t see images so your alt attribute is a factor in illustrating what your page is relevant for.
Hint: Properly describing your images can help your ranking in the image search results. For example, Google image search brings me hundreds of referrals everyday for the search terms "abstract" and "dj".
Unfriendly URLs
Most blog or CMS platforms have a friendly URL feature built-in, however, not every blogger is taking advantage of this. Friendly URL’s are good for both your human audience and the search engines. The URL is also an important spot where your keywords should appear.
Example of Friendly URL: domain.com/page-title
Example of Dynamic URL: domain.com/?p=12356
