New swirl wallpaper

Ka ka, hum nay ngồi buồn lôi PTS vọc cái nì

Mới tập làm swirl, chưa hài lòng lắm

10 Usability Nightmares You Should Be Aware Of

along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true. Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site.

http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

R.I.P mah old blog!

Sau hơn 2 tháng xoay sở vẫn hem recover được database blog cũ …

RIP – My Old blog!

Crème de la crème of CSS: List of CSS Galleries

One can discuss whether numerous CSS-galleries challenge our creativity, however they can serve as a quite nice source for inspiration. The galleries of CSS-based designs showcase exemplary design practices, solutions, ideas and templates. Once you have no idea what you should do next with your web-site, it’s worth taking a look at some beautiful works – crème de la crème of CSS-designs – out there.

12 Breeds of Client and How to Work with Them

There are loads of different types of clients out there and chances are at some point you’ll get to meet all of them. So let’s take a look through some typical clients and see if you recognise a few of your own in there!

Read more!

5 Common Mistakes Made When Hiring a Web Designer

Finding and choosing the right web designer can be a confusing and frustrating process for many people. There are so many options and different factors to consider. When you are in the situation, here are 5 common mistakes that you’ll want to avoid.

1. Deciding on Price Alone.

While the cost of a designer is an important factor that should always be a factor in the decision making process, it shouldn’t dictate who you choose without also considering a number of other factors. If you are building a website for a business, that website will become a value-adding asset of the business. Try not to look at it as just a financial drain, but an asset that has a chance to bring new customers and opportunities.

By choosing the lowest-priced option you may not get a website that meets your needs. On the other hand, high price doesn’t necessarily equal high quality. Some lower-priced designers may give you a better end result and better service than some high-priced design firms.

You should make your decision based on a number of factors including price, the quality of their portfolio, their level of communication with you, the time line you’re working with, etc.

2. Not Considering Specialties.

If you are not very familiar with web design it may be easy to overlook the fact that there are several different areas or types of design that a particular designer may specialize in. Obviously, to get the best results you’ll want to find someone who specializes in, or at least has experience with, your type of project.

For example, if you are interested in a minimalistic design, don’t choose someone because they have a portfolio full of flash-based websites with lots of bells and whistles. Likewise, if you’re looking for bells and whistles, don’t choose someone who specializes in minimalistic design.

This sounds kind of obvious, but many times the specialization is ignored when trying to decide between a few different options. For the best results you should have a good idea of what style of website you want, and base your search on finding someone who meets your needs.

3. Not Considering Future Updates and Maintenance.

Regardless of how well your new website is built, it will require updates and maintenance from time-to-time. Most designers offer these services at an hourly rate or as part of a package, but this is something you shouldn’t assume. Talk to potential designers about the possibility of them performing maintenance and what charges would be involved.

Typically, you’ll get the best results by having the original designer also do the updates and maintenance. No one else will know the website as well as the designer. However, you may have someone in your office or on staff that is capable of making updates, which should also be considered in this case.

The costs of maintenance should always be considered, and just as important, the costs of not being able to perform maintenance should be considered. If you hire a designer and are then unable to get updates completed, your website may quickly become out of date and ineffective.

4. Hiring Someone Who Does Not Build Search Engine-Friendly Websites.

It’s possible to have a great-looking website that is built horribly for search engines. While search engine optimization involves much more than the structure of the site, starting with a solid foundation will give you the best chance to compete.

If you are not very familiar with web design or SEO it may be difficult for you to evaluate the structure of a website. In this case, the best thing to do is ask potential designers how search engines influence the decisions they make during the design process. Ideally, websites should be built for people (the real visitors) but it should not interfere with the search engine spiders/robots that come to crawl the site.

5. Being Overly Influenced by a Wow Factor.

Many designers use elements like Flash intros on their projects as wow factor for potential clients. While they may look great, in most industries they’ll annoy visitors and do more harm than good.

This all goes back to knowing what you want in a website and finding someone who can deliver. Try not to be wowed or swayed by an impressive piece of work that has nothing to do with your type of project.

http://www.vandelaydesign.com/blog/design/5-common-mistakes-made-when-hiring-a-web-designer/

From a Design to Page

Chúng ta sẽ bắt đầu với mẫu design trên . Hãy quan sát 1 lượt layout này, ta thấy nó khá là simple ( I like this)

• Chia các phần chính của layout:

Đầu tiên ta hãy quan sát sơ qua để có đánh giá chung về giao diện. Ta thấy nó được chia thành những phần chính như sau:

• Header
• Main content
  • Left
  • Center
  • Right
• Footer

Ta sẽ tạo các đường guide chính như sau:

Lưu ý là bề rộng của trang ta sẽ xác định vào khoảng 990px (đường guide bên cùng tay phải)

• HTML cho layout chính:

Sau khi đã có được các đường guide ta sẽ bắt tay vào viết sườn HTML cho trang, dựa trên những gì ta đã có ở phía trên.

   1: <div id="wrap">

   2:     <div id="header">

   3:         header

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             left

   8:         </div>

   9:         <div id="main-col">

  10:             main

  11:         </div>

  12:         <div id="right-col">

  13:             right

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         footer

  18:     </div>

  19: </div>

Preview ta sẽ thấy giao diện của chúng ta chạy 1 hàng từ trên xuống dưới trông khá là ngộ . Và tiếp theo … Hãy bắt nó làm theo ý chúng ta. Nhưng trước tiên ta hãy làm 1 bước nhỏ nữa để preview cho chính xác.

Hãy cắt mẫu design của chúng ta theo những đường guide ở trên và insert các part đó vào.

 

   1: <div id="wrap">

   2:     <div id="header">

   3:         <img src="header.jpg" alt="header" />

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             <img src="left.jpg" alt="left" />

   8:         </div>

   9:         <div id="main-col">

  10:             <img src="center.jpg" alt="center" />

  11:         </div>

  12:         <div id="right-col">

  13:             <img src="right.jpg" alt="right" />

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         <img src="footer.jpg" alt="footer" />

  18:     </div>

  19: </div>

Preview and U’ll c wat happen

• CSS cho Layout chính:

Ta đã có khung sườn cho giao diện của chúng ta, vấn đề còn lại bây giờ là dùng CSS để control các box vào đúng vị trí của nó.

 

Để dễ hiểu ta hãy nhìn vào hình trên:

A : Giao diện hiện nay chúng ta có

B : Hãy đẩy các phần tương ứng qua đúng vị trí của nó

C : Almost done!

D : Final result !

Bắt tay vào nào !

Đầu tiên copy hết đoạn CSS sau bỏ vào file CSS của bạn:

   1: /***** Global Settings *****/

   2:  

   3: html, body {

   4: border:0;

   5: margin:0;

   6: padding:0;

   7: }

   8:  

   9: body {

  10: font:100%/1.25 arial, helvetica, sans-serif;

  11: }

  12:  

  13: /***** Common Formatting *****/

  14:  

  15: h1, h2, h3, h4, h5, h6 {

  16: margin:0;

  17: padding:0;

  18: font-weight:normal;

  19: }

  20:  

  21: h1 {

  22: padding:30px 0 25px 0;

  23: letter-spacing:-1px;

  24: font:2em arial, helvetica, sans-serif;

  25: }

  26:  

  27: h2 {

  28: padding:20px 0;

  29: letter-spacing:-1px;

  30: font:1.5em arial, helvetica, sans-serif;

  31: }

  32:  

  33: h3 {

  34: font:1em arial, helvetica, sans-serif;

  35: font-weight:bold;

  36: }

  37:  

  38: p, ul, ol {

  39: margin:0;

  40: padding:0 0 18px 0;

  41: }

  42:  

  43: ul, ol {

  44: list-style:none;

  45: padding:0 0 18px 40px;

  46: }

  47:  

  48: blockquote {

  49: margin:22px 40px;

  50: padding:0;

  51: }

  52:  

  53: small {

  54: font-size:0.85em;

  55: }

  56:  

  57: img {

  58: border:0;

  59: }

  60:  

  61: sup {

  62: position:relative;

  63: bottom:0.3em;

  64: vertical-align:baseline;

  65: }

  66:  

  67: sub {

  68: position:relative;

  69: bottom:-0.2em;

  70: vertical-align:baseline;

  71: }

  72:  

  73: acronym, abbr {

  74: cursor:help;

  75: letter-spacing:1px;

  76: border-bottom:1px dashed;

  77: }

  78:  

  79: /***** Links *****/

  80:  

  81: a, a:visited {

  82: text-decoration:none;

  83: }

  84:  

  85: /***** Forms *****/

  86:  

  87: form {

  88: margin:0;

  89: padding:0;

  90: display:inline;

  91: }

  92:  

  93: input, select, textarea {

  94: font:1em arial, helvetica, sans-serif;

  95: }

  96:  

  97: textarea {

  98: line-height:1.25;

  99: }

 100:  

 101: label {

 102: cursor:pointer;

 103: }

 104:  

 105: /***** Tables *****/

 106:  

 107: table {

 108: border:0;

 109: margin:0 0 18px 0;

 110: padding:0;

 111: }

 112:  

 113:     table tr td {

 114:     padding:2px;

 115:     }

 116:  

 117: /***** Global Classes *****/

 118:  

 119: .clear             { clear:both; }

 120:  

 121: .float-left     { float:left; }

 122: .float-right     { float:right; }

 123:  

 124: .text-left         { text-align:left; }

 125: .text-right     { text-align:right; }

 126: .text-center     { text-align:center; }

 127: .text-justify     { text-align:justify; }

 128:  

 129: .bold             { font-weight:bold; }

 130: .italic         { font-style:italic; }

 131: .underline         { border-bottom:1px solid; }

 132: .highlight         { background:#ffc; }

 133:  

 134: .img-left         { float:left;margin:4px 10px 4px 0; }

 135: .img-right         { float:right;margin:4px 0 4px 10px; }

 136:  

 137: .nopadding         { padding:0; }

 138: .noindent         { margin-left:0;padding-left:0; }

 139: .nobullet         { list-style:none;list-style-image:none; }

Các bạn có thể download ở đây.

Đâu tiên là “wrap”, như ta đã xác định trang chúng ta sẽ cố định ở 990px. Ta sẽ có:

   1: #wrap {

   2:     width:990px;

   3:     margin:0 auto; /*For center alignment*/

   4: }

Tiếp theo là “mainpage”, đây là div lớn chưa cả 3 div “left-col”, “main-col” và “right-col” :

   1: #mainpage {

   2:     width:100%;

   3:     position:relative;

   4: }

Cả 2 phần này đều khá đơn giản và dễ hiểu, nên không cần giải thích gì thêm.

Phần tiếp theo khá khó, đó là 3 div con của “mainpage”

Đầu tiên ta nhận định ta sẽ cần kéo 2 cột left và main sang trái và cột right sang phải.

   1: #left-col{

   2:     float:left;

   3: }

   4: #main-col{

   5:     float:left;

   6: }

   7: #right-col{

   8:     float:right;

   9: }

Preview! Excellent!! Right ??

To be continue ……!!!

• Header:
  • Topnav:
  • Menu nav:
  • Banner – logo:
• Left:
• Main:
• Right:
• Footer:

Freelancing Mistakes: Don’t Give Your Clients What They Want

The customer is always right, right? Wrong. Clients can make insistent requests that would actually be detrimental to their business or intention. This usually happens if the client is inexperienced or misinformed in your field of work. Sometimes the cause is simply bad taste. Most of us have probably encountered more than our share of these clients. You can recognize this type of client easily, especially when they’re telling you the following things:

“Can we put frames and flashing images on my website? I like the way they look.”

“Maybe if you use red, orange, and purple on my logo it’d look more harmonious and professional.”

“I want my business press release to start with a poem my 5 year old son wrote.”

Sounds familiar, right? Due to the destructive nature of these requests, I’ve learned to call these types of clients “Self-Destructing Clients”. They want us to deliver the best results, but their requests are preventing their own success. My experience with these clients taught me so many lessons that I now know how to nip the problem in the bud, fix existing problems, and communicate better. Hopefully, you can learn from my own experiences rather than going through that difficult road yourself.
Go Media Arsenal

Recognize these clients before you sign the contract

The first thing you can do is to recognize the Self-Destructing Client the minute they walk into the door. If you do most of your work online, you need to do this within a couple of emails. For example, you may receive a query about your web design services. Your potential client might say “I want you to make me a page that looks like this”, with a link to a website that looks like it was made in 1997. It has a background MIDI file playing, flashing bright yellow cursive text, and frames. It would’ve given anyone conjunctivitis. Apparently, this is what your potential client wants.

Now, this request wouldn’t be a big deal if your potential client wanted a page where design wasn’t very important. However, design will be the primary factor if the client also wants a “professional look” that would make their business look established, as if it were a Fortune 500 company.

Obviously, either this prospect has bad taste or hasn’t been looking at websites of Fortune 500 companies. This person is obviously a Self-Destructing Client.

As you’ve probably noticed, it’s easy to spot Self-Destructive Clients based on their examples of the desired finished product. You can automate this step by including it in your standard client questionnaire. (You have one, right?) Apart from basic contact information, it should also include the following: “List down 3 websites/ illustrations/ articles that best represent what you want me to do:” Your potential client’s answers will give you a better look at their expectations and their understanding of what you can do for them.

Now that you have a Self-Destructing Client on your hands, what do you do?

If you haven’t signed the contract yet, it helps to educate the client about what’s best for her needs. You don’t do this by writing her a lengthy email that resembles a college course for your field. Here are some tips on how to show a Self-Destructing client that her requests are bad for business:

• Give it a polite start. Try to give your message in the most tactful way possible. “Although the examples you listed are great, they don’t seem to be the best solution for you right now.”
  List the reasons why you think that your client’s examples aren’t ideal, and support your statements. Don’t just say “Because yellow text on black background hurts my eyes”. Not only is that insulting, but you’re also implying that she has bad taste. Instead, say “Other design options are better” and link to a study or news item that shows research about blue (or some other color) being the optimal choice if you want to give a professional impression.
• Give your own examples of what would work best. At the end of the email, make your own example list of what will work better as a finished product (preferably, use similar companies or organizations).
• Make it short. Your client probably doesn’t have the time or patience to read a lengthy email. Plus, writing lengthy explanations can sound self-indulgent.

Doing this will gain your potential client’s trust, especially since you’ve just displayed that you are truly knowledgeable in your field. If she still hesitates, you can show her the work you’ve done for previous clients as “case studies” – and make them sound as good as they really are. “ABC Company wanted the same things you did at first, but I just applied my expertise and they’ve just told me a month ago that my redesign caused a 200% increase in sales.” Sometimes, educating the client and showing case studies is enough for them to go from self-destruct to success.

What if my Self-Destructing Client is very insistent on these absurd requests?

One thing you can do for stubborn Self-Destructing clients is to make them a deal. Tell them that you’re a real expert in your field and that you’ve seen good results repeatedly come out of your efforts. If they let you do it your way and they get the results they want – whether it’s sales, comments from visitors, etc. – then they get to keep the work you made. If they don’t get the results that they wanted, then you promise to redo everything their way, no matter how absurd the outcome (of course you don’t tell them the part about absurdity). Of course, this requires you to have the following things: a concrete way to measure results, unbreakable confidence in your own work, and the luxury of time to redo the project should they be unhappy with the results. If you’re delivering a high quality product, odds are they’d be happy with your work and recommend you to friends.

Making this kind of deal is only a great solution if you really know, whether from experience or hard facts, that you can deliver the results they want. Otherwise, this would be a very risky move. Be sure that you are informed, skilled, and determined enough to make it work.

Even if you offer potential clients this deal, some of them won’t want any part of it. In the end, either of you has to give in. At this point, it’s your call whether to accept the job or to tell your client that you obviously can’t give them what they want from you and that they should look for other freelancers who can. If you need the extra income, doing the job won’t hurt – just don’t add it to your portfolio if you don’t think it’s your best work. However, if you can afford to walk away from the job, I suggest that you do. Obviously, this person won’t trust your decisions and expertise. Accepting the job means encountering multiple frustrations along the way. In the end it’s a choice between money and your sanity.

Những thắc mắc thường gặp về Mash

1. Làm thế nào để tạo thanh cuộn (scrollbar) trong about me và guestbook ?

   1: #ypf-profile,#ypf-guestbook {

   2:     height:500px;

   3:     overflow:auto;

   4: }

Bạn cũng có thể chỉnh lại độ cao, hoặc sử dụng đoạn code này cho các box khác:

2.Làm sao để tạo background cho 1 box nào đó khác với các box khác :

Bạn dùng selector để trỏ tới box mà bạn muốn change background:

#ypf-profile : About me

#ypf-guestbook

#ypf-blurt

#ypf-contacts : Friends list

#ypf-tags

#ypf-pet

#ypf-style

Ngoài ra các modules khác sẽ có 1 dãy số đằng sau, bạn cần view source để tìm đúng ID của nó:

VD: #ypf-mosh-blob-1192302472 : Content mob blog

Cách tìm như sau, bạn viewsource (FF ctrl_U) bấm ctrl_F để tìm kiếm và ghõ : ypf-mosh-blob sau đó copy cả dãy số phí sau nó.

RSS cũng tìm tương tự như vậy

Sau đó bạn dùng đoạn code như sau:

   1: #id {

   2:     background: #mã màu /*nếu bạn muốn vừa có màu nền vừa có hình nền*/ url('link hình') left /*có thể dùng center,right*/ top /*Có thể dùng center, bottom*/ repeat /*Có thể dùng repeat-x(lặp theo chiều ngang) repeat-y(lặp theo chiều dọc) no-repeat (không lặp)*/ fixed /*có hoặc không, nếu có fixed hình nền sẽ đứng im tại 1 vị trí khi bạn kéo thanh cuộn*/

   3: }

3.Làm thế nào để ẩn 1 box nào đó:

   1: #id{display:none}

ID xin xem phía trên.

Trong trường bạn ẩn box style bạn cần phải bấm vào “This í fugly” ở bên cạnh avatar của bạn, sau đó vào box style dòng đó đi là ok

Ngôi sao …

Ngôi sao gần nhất cách Trái Đất 4.3 năm ánh sáng. Như vậy tương đương với 40 triệu triệu kilometers. Gần mà sao em chẳng bao giờ nhìn thấy được ngôi sao đó nhỉ L. Nhưng hằng ngày, em luôn thấy 1 ngôi sao tỏa sáng, dù sáng hay tối, ngôi sao ấy vẫn hiện diện. Ngôi sao ấy xa với mọi người nhưng thật gần với em. Và anh biết không? Ngôi sao ấy rất đặc biệt vì chẳng ai nhìn thấy được ngoại trừ em :”>. .

 

Magic huh? Ngôi sao đó là món quà bí mật mà thượng đế đã dành tặng cho em đó. Em giấu ngôi sao ấy ở 1 nơi cũng rất bí mật :”>… Trong time em đó J. Để mỗi khi em gục ngã, ngôi sao ấy lại tỏa sáng soi lối cho em. Để mỗi khi em cô đơn, ngôi sao ấy lại tỏa sáng sưởi ấm trái tim em. Để mỗi khi em hạnh phúc, ngôi sao ấy lại tỏa sáng chia sẻ cùng em. Ngôi sao của em. Ngôi sao ngốc nghếch của em…

From my lil fox … luv you so much … mah lil baby candy