Nofollow và Follow, những điều cần biết

Trong khi SEO và nhất là Off-page SEO, chúng ta vẫn thường được cảnh báo với nofollow, external nofollow hay đại loại, vậy, nofollow là gì và webmaster cần chú ý gì đến nofollow trong khi xây dựng liên kết.

Google nói về rel=”nofollow”

Nofollow, External Nofollow, Thẻ Nofollow

Nofollow hay External nofollow (không theo) là một trong các thuộc tính trong thẻ a href (xác định bằng rel=”..”). Theo google, bằng việc đặt rel nofollow trong đường dẫn, webmaster nói cho các spider biết rằng đây là một liên kết không đáng tin cậy và xin đừng đặt độ tin cậy lên nó và dĩ nhiên, sẽ không có pagerank (hay tính backlink) cho các đường dẫn với rel nofollow. Về cơ bản thì nofollow và external nofollow cũng giống nhau nhưng External nofollow để nhắc google phân biệt giữa các link cùng trang với các link không thuộc trang đó.

<a href='URL trang web' rel='nofollow'>Tiêu đề link</a>

Follow và dofollow

Follow và Dofollow là các tùy chỉnh ngược lại với nofollow, nó đồng nghĩa với việc cho phép spider đặt độ tin cậy và cho điểm liên kết

Cách phân biệt các site nofollow với liên kết

Các webmaster có thể chuột phải vào trang cần xem, chọn view source để xem có thẻ nofollow trong link hay trong meta tag hay không:

<meta name=”robots” content=”nofollow” /> (Meta tag nofollow)
<a href=”SEO..” rel=”nofollow”> (Nofollow ở đường dẫn)

Hoặc sử dụng công cụ kiểm tra follow, dofollow Tại đây

Là Webmaster, tôi nên để nofollow hay dofollow

Nếu là liên kết link, hãy công bằng và để follow (hay dofollow), đối với các comment và bài viết mà không qua kiểm soát của bạn, cách tốt nhất là nofollow all vì bạn khổng thể kiểm soát hết được các liên kết do người dùng tạo, có thể là những website cạnh tranh và nếu để dofollow all thì website của bạn rất có thể thành bãi chiến trường cho những SEOer cày backlink !

Thêm nữa, nên nofollow với các link trang đăng kí, đăng nhập hay các trang mà bạn cảm thấy không có giá trị tìm kiếm!

Lời khuyên đối với các SEO

Trước khi khai thác liên kết tại những trang mà bạn cho là tiềm năng, nên cẩn thận với nofollow, đừng để công dã tràng và cũng đừng tưởng bở với những nguồn cày backlink ngon hơn cả cút nướng !

More about →

Tìm hiểu margin và padding trong blogspot

Để có một blog đẹp chúng ta phải chỉnh sửa mã nguồn cho các thành phần trở nên cân đối và hài hòa. Bài viết này sẽ hướng dẫn các bạn làm quen với margin và padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.

MARGIN
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.

Bốn giá trị:

margin 10px 5px 0 5px;

Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px

Ba giá trị:

margin: 30px 20px 70px;

Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px

Hai giá trị:

margin: 30px 20px;

Lề trên và dưới: 30px
Lề trái và phải: 20px

Một giá trị:

margin: 100px;

Tất cả các lề đều được canh một khoảng cách 100px

Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

(Các con số ở đây là ví dụ)

PADDING

Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó . Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.

Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).

Ví dụ:

padding: 15px 30px 25px 0;

Trên 15px, phải 30px, dưới 25px, trái 0px

Ngoài ra người ta có thể dùng:

padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;

(Các con số ở đây là ví dụ)

More about →

Hiệu ứng phóng to ảnh khi dê chuột vào với Hover Image Gallery

Hôm nay JM sẽ giới thiệu cho các bạn một hiệu ứng phóng ảnh hoàn toàn mới. Khi bạn dê chuột vào ảnh. Nếu các bạn còn nhớ thì mình đã từng giới thiệu cho các bạn Hiệu ứng thay đổi ảnh khi dê chuột vào .Hiệu ứng này còn một nhược điểm là hoạt động không tốt trên IE.

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Thêm đoạn Code sau trước thẻ:</head>

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

Tùy chỉnh:

• opacity: 0.7; độ mờ của anh khi chưa dê chuột lên.
• opacity: 1; Độ mờ của anh khi dê chuột vào (Ảnh mờ nhất là 0 và nét nhát là 1)
• box-shadow:0px 0px 30px gray; Hiệu ứng đổ bóng của anh khi dê chuột vào.
• Các tiền tố -webkit, -moz, -o để hiệu ứng chạy tốt trên nhiều lọa trình duyệt khác nhau là Opera, Safari, Moliza.
• 
  
• Nếu muốn tăng/giảm kích cỡ hình ảnh thu nhỏ bạn thay đổi thông số 0.8

Code khi chèn ảnh:

Khi đăng bài viết bạn check vào HTML và dán code bên dưới vào.

<div class="hovergallery">
<img src="Link ảnh 1" />
<img src="Linh ảnh 2" />
<img src="Link ảnh 3" />
</div>

Chúc thành công!

More about →

Tối giản Javascript

Tôi thường hay theo dõi tin từ Javascript Weekly, nơi thường gửi các email thông báo các tin tức về Javascript được cập nhật trong tuần. Chủ yếu xoay quanh các vấn đề: các bài hướng dẫn, các library mới, và 1 số tin tức.Tuần vừa rồi, họ có gửi cho tôi 1 email (các bạn có thể xem phiên bản on webtại đây), trong đó có 1 topic khá thú vị, chính là tiêu đề của post này.

Trước khi vào nội dung chính, xin nhấn mạnh 1 chút là 'tối giản' khác với tối ưu. Thực ra thì có thể hiểu tối giản là 1 dạng tối ưu về kích thước. VD bạn có 1 file JS cỡ 10KB, sau đó bạn làm cách nào đó để nó còn 8KB mà hoàn toàn giữ nguyên chức năng, thì việc làm đó gọi là tối giản. Tối ưu thông thường được hiểu theo nghĩa về hiệu suất, nghĩa là cùng với file JS đó, bạn thực hiện 1 phương pháp nào đó khiến cho nó chạy nhanh hơn 30%, ngốn CPU ít hơn 10% thì đó gọi là tối ưu. Thông thường thì tối ưu không đồng nghĩa với tối giản, nghĩa là có lúc bạn phải chấp nhận kích thước file lớn để cho nó chạy nhanh hơn (như kiểu xe máy với xe đạp). Nhưng đôi khi các biện pháp tối giản cũng có ý nghĩa về mặt tối ưu hiệu suất.

Các phương pháp tối giản mã Javascript

Tôi điểm qua 2 phương pháp chính:

• Minifying
• Compression

Minifying

Minify nghĩa là làm cho nó 'mini' đi. Thông thường quá trình minify sẽ loại bỏ các ký tự xuống dòng, tab, khoảng trắng thừa và các comment. Các khoảng trắng có thể nằm giữa các dấu gán (=) hay cuối câu lệnh. Đôi khi nó cũng loại bỏ 1 số dấu chấm phẩy (;) không cần thiết, VD của câu lệnh cuối trong block if then, while, ...

Công cụ để minify nổi tiếng nhất là của Douglas Crockford, 1 guru hàng đầu về JS hiện nay. Tool online ở đây. (đừng quên Google để biết thêm vài tool nữa nhé)

Vì việc minify thường chỉ đơn thuần là việc xóa bỏ các ký tự thừa, nên nếu code javascript không chuẩn thì sẽ bị lỗi. Lỗi phổ biến nhất là do thiếu dấu chấm phẩy cuối câu lệnh (JS chấp nhận điều này, nhưng khi minify sẽ biến 2 câu lệnh thành 1). Để kiểm tra xem mã JS có chuẩn không, cách tốt nhất là dùng JSLint, một công cụ khác cũng của Douglas Crockford (tất nhiên là không phải quy tắc nào của JSLint bạn cũng nên tuân theo).

Về khả năng tối giản của minifying thì có thể nhận thấy rằng nó không được nhiều lắm.

Compression

Compression nghĩa là nén. Ở đây hiểu nén khác với đóng gói có mã hóa (pack). Pack có thể đem lại kích thước nhỏ hơn nén, nhưng hiệu suất sẽ bị thiệt, vì browser cần thời gian để giải mã (unpack). Hiện nay tôi thấy ít người dùng pack, trừ phi muốn bảo vệ code cho người khác khỏi xem, còn phần lớn đều dùng nén.

Các công cụ nén JS và pack JS có khá nhiều (bạn google nhé), nhưng nối tiếng nhất có lẽ là YUI Compressor của Yahoo (tôi thường dùng cái này nên gọi nó là nổi tiếng nhất, bạn có thể phản đối tôi ở comment). Gần đây Google có nhảy vào lĩnh vực này với Google Closure Compiler, và thực tế thì nó tối giản tốt hơn YUI Compressor, nhưng để lát nữa tôi sẽ nói kỹ hơn về Google Closure Compiler.

Khi nén JS, phần công việc đầu tiên mà các công cụ này làm là minify code (nghĩa là bạn hoàn toàn có thể quên các tool minify đi, chỉ cần nén là đủ, cũng như việc bạn đọc đoạn trước là không có ý nghĩa lắm :D). Nhưng không chỉ vậy, nó còn thay đổi tên các biến, function, methods (nhưng vẫn đảm bảo các biến global được giữ nguyên) thành dạng 1-2 chữ cái như function a(){};.

Quá trình đổi tên này tất nhiên phức tạp hơn nhiều, vì nó phải đảm bảo tất cả mọi liên kết đến các lời gọi hàm, biến vẫn phải được bảo toàn và hoạt động tốt; bất kể lời gọi đó từ nội bộ script hay từ 1 script khác.

Ngoài ra, YUI Compressor còn gán các biến, hàm, constant hay dùng vào 1 biến để tham chiếu nhanh, và thực hiện 1 số biện pháp tối giản khác. Slide này sẽ cho phép bạn có cái nhìn tổng quan về YUI Compressor.

Các công cụ nén JS khác cũng làm các công việc tương tự. Vấn đề là cái nào làm tốt hơn thôi. Không như minify, vốn gần như chỉ có 1 cách làm duy nhất, việc nén JS khá đa dạng và phụ thuộc nhiều vào thuật toán nén. Để so sánh phương pháp nào tốt hơn đối với mã JS của bạn, công cụ này sẽ hữu ích.

Một vài kỹ thuật tối giản mã JS

Đọc qua phần trên, bạn có thể nắm được phần nào các kỹ thuật tối giản mã JS (nếu không nắm được, bạn rất nên đọc lại). Tuy vậy, các kỹ thuật ấy thường do các tool tự thực hiện và bạn ít phải bận tâm. Nhưng có những thứ mà tool không làm giúp bạn được, và bạn cần phải tự làm bằng tay.

(Bạn rất không nên thực hiện các công việc tối giản ở trên bằng tay, như việc xóa các ký tự thừa, đổi tên, ... vì nó sẽ làm cho đoạn mã của bạn trở nên khó hiểu, rối rắm và sau 1 thời gian nữa, bạn có thể tự hỏi là ai đã viết ra đoạn mã khó chịu như vậy. Hãy để các công cụ tự động làm việc đó thay bạn)

Bây giờ tôi xin quay trở lại với Javascript Weekly đã nói lúc đầu. Newsletter kỳ này có giới thiệu đến trang web 140byt.es, vốn lấy ý tưởng từ Twitter. Website này (hiện đang trong trứng, chưa chính thức hoạt động) nhằm thu thập các đoạn mã JS cực nhỏ, không quá 140 ký tự (là số ký tự tối đa Twitter hạn chế, cũng là số ký tự tối đa mà bạn nhắn tin SMS) nhằm thực hiện 1 việc gì đó.

Do chưa chính thức hoạt động nên tất nhiên chưa có script nào cho chúng ta chiêm ngưỡng. Thế nhưng những người làm ra site này đã viết khá kỳ công 1 trang wiki hướng dẫn những kỹ thuật phổ biến cho việc tối giản mã JS cho những người chuẩn bị submit. Đây là hướng dẫn tốt nhất mà tôi có về lĩnh vực tối giản mã JS này (nếu bạn có 1 hướng dẫn khác hãy cho tôi biết ở comment).

Để tham khảo các kỹ thuật khác có giá trị, hãy xem thêm phần 'Other resources' ở cuối trang wiki đó nhé.

Google Closure Compiler

Nói thêm 1 chút về Google Closure Compiler. Sở dĩ đặt nó ở đây vì Google Closure Compiler có kết hợp 1 số kỹ thuật tối giản mã JS trong phần này. Bạn có thể chạy công cụ này online tại đây.

Cá nhân tôi nhận thấy Google Closure Compiler cho ra kết quả nhỏ gọn hơn YUI Compressor. Có thể do Google Closure Compiler đã làm luôn cả công việc tối giản chính nội dung đoạn mã JS mà chúng ta phải làm bằng tay. Tuy vậy, khó mà khẳng định được nó hơn YUI ở mọi mặt. Tốt nhất mỗi khi có ý định tối giản mã JS, chúng ta cứ thử cả 2 công cụ, cái nào cho kết quả tốt hơn (kích thước nhỏ hơn) thì ta lấy kết quả đó.

Lưu ý nhỏ là Google cũng có những hướng dẫn của riêng mình về việc viết code JS, rất đáng tham khảo.

Showcase những tiny script

Mặc dù chúng ta chưa được xem các script tại 140by.es, nhưng có 1 trang khác cho phép chúng ta coi các demo bằng javascript chỉ với 1KB. Ở đây có rất nhiều (tôi cũng không biết là bao nhiêu, chưa xem được hết) các demo thú vị như hiệu ứng đồ họa, chơi cờ vua, xếp hình, ... chỉ với 1KB JS! Có cả source code cho bạn xem nữa.

Nếu chưa đã mắt, bạn có thể xem thêm các demo với kích thước file tối đa 10KB tại trang web này.

Kết luận

Bài viết này không nhằm trình bày 1 cách chi tiết hay đưa ra các giải pháp copy & paste hoặc step-by-step guide. Nó chỉ là 1 bài tổng hợp các thứ liên quan đến tối giản JS mà thôi. Nếu bạn thực sự quan tâm tới vấn đề này thì việc đơn giản nhất mà bạn có thể làm là follow các link trong bài viết và ngâm cứu chúng. Không dễ dàng lắm đâu ;) 

Tham khảo: hontap.blogspot.

More about →