9 tháng 1, 2010

Giá trị false trong javascript

The following values are always false:
* false
* 0 (zero)
* "" (empty string)
* null
* undefined
* NaN (a special Number value meaning Not-a-Number!)

All other values are truthy, including "0" (zero in quotes), "false" (false in quotes), empty functions, empty arrays, and empty objects.
-->đọc tiếp...

Lỗi chưa khởi tạo đối tượng trong javascript

Ví dụ:
// object constructor
function ObjectConstructor(a, b, c) {
 this.A = a;
 this.B = b;
 this.C = c;
 this.Total = a + b + c;
}
var obj = ObjectConstructor(1, 2, 3);
alert(obj.Total);
kết quả trả về không phải bằng 6 mà là chẳng có gì cả. Bởi đối tượng obj chưa được khởi tạo.
có 2 cách sửa lỗi này:
cách 1:
var obj = new ObjectConstructor(1, 2, 3);
cách 2:
// object constructor
function ObjectConstructor(a, b, c) {
if (!(this instanceof arguments.callee)) {
 return new ObjectConstructor(a, b, c);
}
 this.A = a;
 this.B = b;
 this.C = c;
 this.Total = a + b + c;
}
alert(obj.Total);
-->đọc tiếp...

Bài rất hay về thiết kế website sử dụng cho tất cả các trình duyệt

Xem <a href="http://www.tjkdesign.com/articles/branching.asp">chi tiết ở đây</a>
<h3>
The issue with hacks inside styles sheets</h3>
Embedding <acronym title="Cascading Styles Sheet">CSS</acronym> filters within a styles sheet may:
<dl>
<dt>- invalidate the sheet:</dt>
<dd>some hacks are "safe", but the validator chokes on more than a few.
</dd>
<dt>- create unecessary declarations:</dt>
<dd>a declaration that targets a <i>single</i> browser is served to <i>all</i> <acronym title="User Agent">UA</acronym>s.
</dd>
<dt>- create redundant declarations:</dt>
<dd>a same attribute is used more than once with <i> different values</i> (see below).
</dd>
<dt>- create cryptic declarations and rules:</dt>
<dd>For example, the <a class="outlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html" title="Visual representation">Box Model Hack</a> looks like this:
<pre><code>div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
html>body .content {
width:300px;
}</code></pre>
</dd></dl>
<h3>
The solution</h3>
By doing the branching <i>inside</i> the <acronym title="eXtensible HyperText Markup Language">(X)HTML</acronym> markup, it is possible to contain what I call "proprietary fixes" within specific files. The main advantage of this approach is that it dramatically improves maintainability.
<img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /><acronym title="For your information">FYI</acronym>: moving hacks from the styles sheets (the presentation layer) to the <acronym title="eXtensible HyperText Markup Language">(X)HTML</acronym> markup is considered bad practice by some (a very few).
<h3>
The workflow</h3>
Follow these steps to make your documents 99.99% <a class="outlink" href="http://centricle.com/ref/css/filters/?highlight_columns=true" title="Great collection"> hack</a> free:
<ol>
<li> Start with the <a class="outlink" href="http://www.alistapart.com/stories/doctype/" title="Fix Your Site With the Right DOCTYPE!">right <acronym title="Document Type Declaration">DTD</acronym></a>. Choose one of the Doctypes below to make sure your documents won't mix presentation markup with structural markup.


<dl>
<dt>HTML 4.01 Strict:</dt>
<dd><code> "http://www.w3.org/TR/html4/strict.dtd"></code>
</dd>
<dt>XHTML 1.0 Strict:</dt>
<dd><code> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>
</dd>
<dt>XHTML 1.1 DTD:</dt>
<dd><code> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></code>
</dd></dl>
<div>

<img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" />This first step is about creating well-formed documents and producing a clean markup, but it is not a requirement for this branching method to work. You can "downgrade" the <acronym title="Document Type Declaration">DTD</acronym> or even put <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6 into quirks mode if you want (or need) to.
</div>




</li>
<li>Mark up your document with <a class="outlink" href="http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html" title="Use tags that have specific meaning assigned to them.">semantic</a> in mind (you should read these entries too: <a class="outlink" href="http://mpt.net.nz/archive/2004/05/02/b-and-i" title="Semantic elements vs. presentational elements.">when semantic markup goes bad</a> and <a class="outlink" href="http://www.simplebits.com/bits/simplequiz/" title="When to P.">SimpleQuiz</a>). Make sure it includes all the necessary structural elements and hooks (IDs, classes, etc.).</li>


<li>Run your file through the <a class="outlink" href="http://validator.w3.org/" title="Check your markup.">validator</a>. Do <i>not</i> move to step #4 until it validates.</li>


<li>Congratulations! Now your file is ready for prime time.
In the markup, below the <code>title</code> element, write the following:

<pre><code><style media="screen, projection" type="text/css">
@import "/css/basic.css";
</style>
</code></pre>
About the media types:

<ul>
<li><code>screen</code> is to make sure we do not serve the style sheet to all <acronym title="User Agent">UA</acronym>s out there.</li>
<li><code>projection</code> will cause Opera to use the sheet in <a class="outlink" href="http://www.designdetector.com/archives/03/02/TamingOperasFullscreenMode.php">full screen mode</a>.</li>
</ul>




</li>
<li><a href="http://www.blogger.com/post-create.do" name="step5"></a>If you don't know about the <a class="outlink" href="http://www.w3.org/TR/REC-CSS2/box.html" title="Box Dimensions">box model</a> already, it is a good time to read the beginning of this <a href="http://www.tjkdesign.com/articles/boxmodel.asp" title="IE5 Win does its own maths">article</a>. If you're already aware of the issue, remember to style accordingly (do not mix border and/or padding declarations with dimensions on the same axis).
Now open "basic.css" in your favorite editor and create the rules that will style your document the way you want. Go through the whole process <i>only</i> using the browser you think is the best when it comes to web standards.</li>


<li>Before going any further, you must accept that it is perfectly OK for a web page to not look <i>exactly</i> the same in every browser.
Now open your document in <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6. How does it look? If it looks fine and appears to <i>function</i> properly, then skip to <a href="http://www.tjkdesign.com/articles/branching.asp#step9">step #9</a>.</li>


<li>To fix <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6 issues, you create a new <acronym title="Cascading Styles Sheet">CSS</acronym> file (msie6.css) that you import using a <a href="http://www.tjkdesign.com/articles/conditional_comments.asp" title="What you should know about Conditional Comments">Conditional Comment</a>, like this:

<pre><code>
</code></pre>




</li>
<li>You open "msie6.css" and you use the "usual suspects" to take care of layout and behavior issues:


<dl>
<dt><code>height:0</code></dt>
<dd>To give <a class="outlink" href="http://www.satzansatz.de/cssd/onhavinglayout.html" title="Find out how 'layout' can change the rendering of and the relationships between elements.">layout</a> to an element.
</dd>
<dt><code>display:inline</code></dt>
<dd>To prevent <acronym title="Microsoft Internet Explorer">MSIE</acronym> to double a margin value on float.
</dd>
<dt><code>cursor:hand</code></dt>
<dd>To force a change of the cursor's shape if needed. Note that such declaration is safe here, but would make the regular style sheet fail validation.
</dd>
<dt><code>#whatever {overflow-x:hidden}</code></dt>
<dd>When <i>italic</i> text "pushes the envelop".
</dd></dl>
Etc.



</li>
<li><a href="http://www.blogger.com/post-create.do" name="step9"></a>Now we move to <acronym title="Microsoft Internet Explorer">MSIE</acronym> 5/Win (if you don't know how to run <acronym title="Internet Explorer">IE</acronym> 5 versions along with <acronym title="Internet Explorer">IE</acronym> 6, then read this great <a class="outlink" href="http://www.positioniseverything.net/articles/multiIE.html" title="Taming Your Multiple IE Standalones">article</a> by <a href="http://free.pages.at/staudinger/">Manfred Staudinger</a>). If you have styled your elements following my advice in <a href="http://www.tjkdesign.com/articles/branching.asp#step5" title="You shall not mix border and padding with dimensions on the same axis!">step #5</a>, you should not have too many problems related to box model. But in any case, Conditional Comments are there to help you out again. This time we use the following:

<pre><code>
</code></pre>




</li>
<li>Same thing again, you use "ie5win.css" to fix what needs to be fixed.</li>


<li>At this point, you can check your document in any other <acronym title="Internet Explorer">IE</acronym> versions you want, using extra Conditional Comments to target any specific vector version. On the other hand, depending on the fixes needed to cater various <acronym title="Internet Explorer">IE</acronym> builts, it is possible to implement Conditional Comments in a different way. For example <code> <style media="screen" type="text/css">
@import "/css/msie6.css";
</style> <link href="/css/print.css" media="print" rel="stylesheet" type="text/css"></link> <style media="handheld" type="text/css">
@import "/css/handheld.css";
</style> <script src="/js/styles.js" type="text/javascript">
</script> </code> <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /> Dreamweaver users may download this <a href="http://www.tjkdesign.com/misc/downloads/TJKCSSBranching_v11.mxp" title="Dreamweaver Extension (MXP file)">Snippet</a> (version 1.1 - 2kb) that will write all of the above for them. <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /> Make sure "basic.css" comes before other sheets served to the same media type. The script can go anywhere within the <code>head</code> element. <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" />Note that there are more media types than the ones I'm using here. The complete list of media types in HTML4 is:

<ul id="mediaType">
<li><code>aural</code>,</li>
<li><code>braille</code>,</li>
<li><code>handheld</code>,</li>
<li><code>print</code>,</li>
<li><code>projection</code>,</li>
<li><code>screen</code>,</li>
<li><code>tty</code>,</li>
<li><code>tv</code>.</li>
</ul>
CSS2 defines the same list with the addition of <code>embossed</code> to differentiate between braille tactile feedback devices and braille printers. Also, <code>all</code> is used to indicate that the style sheet applies to <i>all</i> media types.

<h3>
But what about Safari, Opera, Camino, Konqueror, etc.?</h3>
Our styles sheets are designed for:

<ol>
<li>"good" browsers with solid <acronym title="Cascading Styles Sheet">CSS</acronym> support.</li>
<li>"bad" browsers with weak <acronym title="Cascading Styles Sheet">CSS</acronym> support, but a decent market share.</li>
<li>"old" browsers with poor <acronym title="Cascading Styles Sheet">CSS</acronym> support used by people stuck with out-of-date <acronym title="Operating System">OS</acronym>es or machines.</li>
</ol>
My take on this is that if a <acronym title="User Agent">UA</acronym> doesn't fit in one of these three categories, then there should be no need to worry about it.


</li>
</ol>
-->đọc tiếp...

8 tháng 1, 2010

BackGround trong suốt cho IE

Khai báo css:

* html img, * html .png

/* Tên class của div có background là ảnh png trong suốt */

    position:relative;

    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

        this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)

    );

}

Sử dụng:

<div
class="png" style="width: 920px; height: 120px; background: url(footer.png) no-repeat;">
</div >

<img src="footer.png" />
-->đọc tiếp...

The Underscore Hack

  1. The underscore ("_") is allowed in CSS identifiers by the CSS2.1 Specification
  2. Browsers have to ignore unknown CSS properties
  3. MSIE 5+ for Windows ignores the "_" at the beginning of any CSS property name
Therefore, a CSS definition, e. g. _color:red is:
  1. Correct, for CSS 2.1 specification allows it (even if software validators, knowing only older version CSS 2.0, say it's a bug: they are wrong, it's correct).
  2. Ignored in any browser but WinIE
  3. Treated as color:red in WinIE
-->đọc tiếp...

Khai báo file Robots.txt giúp website bạn có số má cao trong bộ máy tìm kiếm

Khi một search engine tìm đến (nguyên văn Crawler) Website nào đó, nó sẽ tìm một file đặc biệt trước tiên, đó là file robots.txt. File robots.txt cho search engine đó biết rằng, Website này có thể index hoặc không (tùy theo lệnh được viết trong file robots.txt).
Ví dụ:
User-agent: *
Disallow: /support
Disallow: /cgi-bin/
Disallow: /images/
 ----------------------------------------
User-agent: *
Disallow: /images/
Disallow: /cgi-bin/
 ----------------------------------------
User-agent: Googlebot-Image
Disallow: / 
Disallow: /images/mymugshot.jpg

+Phải chắc chắn các mệnh đề, từ sử dụng trong lệnh là đúng. Ví dụ  thư mục là "image" (viết thường), nhưng khí vào lệnh, bạn lại viết là "Image" (Viết hoa chữ I) thì các spider sẽ không hiểu. Nói chung phải chính xác tuyệt đối. Xem thêm ở search engine of google để biết nhiều hơn.
-->đọc tiếp...

6 tháng 1, 2010

Thiết kế giao diện cho website

Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.

But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:

* When IE 7 comes out, your site will need to be redesigned.
* People who use other browsers won't get a good experience.
* If new browsers come out and gain popularity, chances are your site won't be able to support them.


Standards-Based Web Design Is Best

If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.

But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.
How to Design for Internet Explorer

1. Build your site for Firefox or Safari first.
Build your site and test it using Firefox or Safari first. This will insure that your Web pages look good in standards compliant browsers. And it's actually fairly easy to do.
2. Use a DOCTYPE.
I prefer to use XHTML 1.0 Transitional, but another good one is HTML 4.01. By using a DOCTYPE, you insure that your page isn't displayed in quirks mode, and the browsers act the same.
3. Once you've got it looking perfect for Firefox, then start editing for IE 6 or 5.
IE 6 or 5 should come last because it's not standards compliant. When IE 7 comes out, your page will look correct because it looks correct in the other standards compliant browsers.
4. Don't use hacks to design for IE.
Instead, use the cascade and valid CSS properties and selectors that IE 6 and 5 don't recognize to hide styles for standards compliant browsers. Put the IE 6 styles first in the cascade - then the standard-compliant properties.

Hiding Styles from IE 6

It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.

In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:

div#nav { width: 150px; margin-left: 20px; }

This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.

So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:

body > div#nav { width: 150px; margin-left: 20px; }

Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:

#nav { width: 150px; margin-left: 10px; }

The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.

By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.

Cascading Style Sheets Child Selectors
In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.

To select all paragraphs that are children of the tag, you would write:
body > p { background-color : #00f; }

This is similar to the decendant selector but can only define children, not grandchildren or lower.

You can combine the child selector with other selectors, such as decendants:
div ul>li p { background-color : #00f; }
This affects a p element that is a decendent of li which is a child of ul which is a decendant of div.
Browser Support: Internet Explorer 6 and lower (Windows) and 4.5 and lower (Macintosh) don't support this selector. Netscape 4 and lower don't support this selector.
-->đọc tiếp...

Giảm dung lượng RAM sử dụng của Firefox

(TNO) Firefox tuy là trình duyệt rất mạnh mẽ nhưng một bất tiện đối với rất nhiều người dùng đó là dung lượng RAM sử dụng tăng lên rất cao sau một khoảng thời gian sử dụng.

Điều này làm hiệu suất hoạt động của máy tính bạn giảm hẳn nhưng một số người dùng không hề biết đó là do Firefox. Việc chiếm dụng RAM này do Firefox cache nhiều thông tin vào RAM và cũng do bạn mở quá nhiều thẻ. Vậy làm cách nào để làm Firefox nhẹ nhàng trở lại?

1. Gỡ bỏ bớt các Add-ons:

Việc hỗ trợ các Add-ons giúp Firefox có thêm nhiều tính năng mạnh mẽ. Tuy nhiên, càng nhiều Add-ons cài vào thì Firefox càng chiếm dụng ổ cứng và càng chậm chạp.

Đó là lý do bạn nên gỡ bỏ các Add-ons không thực sự cần thiết bằng cách vào Tools > Add-ons > Extensions > Uninstall. Nếu bạn không muốn gỡ bỏ hoàn toàn một Add-ons nào đó thì chỉ cần vô hiệu hóa nó với tùy chọn Disable. Nó cũng sẽ giúp Firefox bạn nhẹ hơn và khởi động nhanh hơn.



2. Vô hiệu hóa các Plugins không cần thiết:

Bên cạnh các Add-ons, các Plugins cũng là các thành phần sử dụng nhiều RAM mà bạn cần phải vô hiệu hóa. Một số Plugins bạn có thể vô hiệu hóa như: Java, Google Update, QuickTime, RealPlayer và Adobe Reader.

Để vô hiệu hóa, bạn hãy vào Tools > Add-ons > Plugins > Disable. Khác với Add-ons, Plugins có thể bật/tắt mà không cần khởi động lại trình duyệt.

3. Khởi động lại Firefox:

Khởi động lại là phương pháp đơn giản và hiệu quả nhất để lấy lại lượng RAM đã hao phí cho Firefox. Bạn có thể dùng Add-on QuickRestart (https://addons.mozilla.org/en-US/firefox/addon/3559) để làm việc này tốt hơn. Chỉ cần bấm nút Ctrl + Alt + R, Firefox sẽ được khởi động lại mà vẫn giữ nguyên các thẻ đang mở.



4. Sử dụng Safe Mode:

Nếu bạn chỉ cần một trình duyệt cơ bản thì hãy dùng chế độ Safe Mode của Firefox. Ở chế độ này, toàn bộ Add-ons sẽ bị vô hiệu hóa. Khởi động Safe Mode từ Shortcut ở Start menu hoặc thêm tham số Safe-mode ở Shortcut Properties.

Khi khởi động, bạn hãy chọn Disable all add-ons rồi bấm Continue in Sade Mode.

5. Cài mới hoàn toàn:

Sử dụng một Firefox mới hoàn toàn thực sự cải thiện rất nhiều tốc độ. Bạn cần phải xóa toàn bộ thư mục Profile của Firefox. Hoặc đơn giản hơn là gỡ bỏ và cài đặt lại.

Để tránh mất mát các bookmarks, password, history, add-ons… đã được lưu lại, bạn nên sử dụng add-ons FEBE để sao lưu các thông tin này, tải tại: https://addons.mozilla.org/en-US/firefox/addon/2109.

6. Xóa lịch sử Download:

Để xóa, bạn hãy vào Tools > Downloads > bấm vào Clear List.

7. Giảm dung lượng RAM Firefox dùng để cache:

Bạn gõ vào thanh địa chỉ about:config rồi enter. Tìm giá trị browser.cache.memory.capacity, bấm đôi vào để thay đổi giá trị. Bạn có thể giảm con số mặc định xuống còn phân nửa, hoặc theo công thức cộng thêm 4096 cho mỗi 256 MB RAM, ví dụ 1 GB RAM bạn cần điền 4096x4 = 16384.

8. Sử dụng Firefox Portable:

Firefox Portable thực sự sử dụng ít RAM hơn so với bản cài đặt thông thường. Bạn có thể tải Firefox Portable bản mới nhất tại: http://portableapps.com/apps/internet/firefox_portable.

Lưu Nhật Nam
-->đọc tiếp...
BlogWeb: tạo từ Blog của Google
Nội dung: lấy từ nhiều Nguồn khác nhau.
Mục đích: note lại bài Hướng dẫn hay và Đáng đọc.
Kết quả: nghiện Internet Nặng.
Tương lại: xuống lỗ Vẫn Nghiện nếu không có ai giúp.
Blog Web của: Trí Dũng đến từ Việt Nam - Liên kết đến trang Blog Cá Nhân
Tôi biết (^_^)
Thông tin về Tác giả. Chi Tiết
Sử dụng (FireFox | Google Chrome on Ubuntu) để xem tốt nhất. Học Nhiều Hơn Tại Đây
©2009 Google Blogger - HuuNguyen's Home