Hello world!
February 10th, 2009 / No Comments » / by admin
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
CSS blueprint, essential css
December 25th, 2008 / No Comments » / by pisakec
reset.css This file sets sensible defaults across all browsers. I’m sure we are all familiar with starting a new project, going to our main CSS file and adding a few default styles to the body selector, such as ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something along those lines. This is what reset.css does, and more. It resets default styles for spacing, tables, fonts, etc. so you can work from a clean slate.
typography.css This file sets up some nice default typography. I won’t explain all of the styles but I will say that this is my favourite parts of Blueprint because, to me, there is nothing more discouraging than trying to lay out a page and seeing some black Times New Roman text jammed up into the top left corner of a page. Ugh. Blueprint’s typography.css keeps me from ever seeing that again. The typography.css also sets up some really nice styles around font sizes, line-heights, default styling of tables, etc.
grid.css This file handles the grid layout portion of blueprint. We will have a look at the classes that it uses in a bit. One important thing to note with the grid, by default it uses a width of 950px, with 24 columns each having a width of 30px and a 10px margin between columns. This may sound constrictive, but if this is not the layout you want, you can always use a Blueprint Grid CSS Generator to generate a custom grid layout. If this last paragraph completely confused you, please read on as we will build a layout using a grid in a bit. If you are not familiar with CSS grid layouts and want some background, Raj’s Which CSS Grid Framework Should You Use for Web Design? is a good intro.
ie.css Blueprint supports IE, so of course it needs it’s own specific stylesheet to take care of those little details that makes IE so special 
The nice thing is that Blueprint does handle this for you, so all of its core styles will work in all of the major browsers (I think it even supports IE 5).
print.css This file sets some default print styles, so that printed versions of your site looks better than they usually would. The print.css file also has an option where you can fill in your domain name so that relative links are shown in parentheses behind the text link in the printed version of your page. Without filling in this section only remote links will print properly. Check out the bottom of the print.css src file, linked above.
forms.css This file provides nice looking default forms as well as classes for error notifications or even flash notifications if you are using something like Rails. Since this is the only section I will not cover in more detail, here is some of the default form styles in use:
No. Blueprint comes with three compressed stylesheets for your HTML pages, screen.css which contains #’s 1-3 & 6 from above, print.css, and ie.css. The reason that I outlined the different parts of the framework above is because the framework is modular, each of those pieces works independently of each other. The nice thing about this is that if you decide that one aspect of Blueprint, such as a grid layout, doesn’t fit your project but you still want the benefits of reset.css and typography.css, you don’t have to use the the grid but the other styles will still work.
PNG transparent fix for IE 6
December 25th, 2008 / No Comments » / by pisakec
Unit PNG Fix
- Where do I Download It? : HERE
- Issues? : It doesn’t correctly tile transparent background images. Instead, it’ll will stretch your image. Not a huge issue, but beware. Other than that quirk, this method works perfectly. I find myself using it more than the others.
DD_BelatedPNG Fix
- Where do I Download It? : HERE
- Issues? : Nothing worth noting. Every fix has a few quirks, but this new fix might just prove to be the best so far.
IE7.js Fix
- Where do I Download It? : HERE
- Issues? : You’ll find that this file is larger than the others. That is because fixing the transparency issues is only part of what it does! It additionally brings many other IE6 deficiencies up to modern standards. Keep this in mind when choosing. If you only want to show transparency, this might not be the best choice.
Twin Helix Fix (from Angus Turnbull)
- Where do I Download It? : HERE
- Issues? : Angus has updated this file in the last six months; It now properly implements background-repeat/position! Rather than referencing a Javascript file, this fix requires the use of the “behavior” CSS property.
- if ($.browser.msie && $.browser.version == 6.0) {
- alert(“Upgrade your browser, you big dummy!);
- } else {
- document.write(‘this is just for testing. Remove the “else” statement.’);
- }
Some people might prefer to ignore IE6 all together – as a way of making a statement. I leave it up to you to use your judgment. However, your decision should reflect your audience. If you wish to show an alert to IE6 users, you could use jQuery’s browser() method to detect IE6.
view plaincopy to clipboardprint?
OR, you can drop IE6 off your chart.
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.
