PunyPNG - Tối ưu & Tiết kiệm dung lượng ảnh

Hình ảnh là yếu tố quan trọng không thể thiếu để trang trí cho Blog và bài viết. Tuy vậy, những hình ảnh chất lượng tốt thường chiếm dung lượng khá cao, ảnh hưởng đến tốc độ load trang Blog. Chính vì thế mà ta cần phải tối ưu chúng bằng cách giảm dung lượng mà vẫn giữ được chất lượng ảnh.

PunyPNG là một ứng dụng web chạy trên nền Flash giúp bạn nén các file ảnh với mức độ cao nhằm giảm bớt dung lượng cho chúng. Nếu bạn thích dùng định dạng ảnh .PNG nhưng ngại về size của chúng, ứng dụng này sẽ khắc phục tình trạng đó dùm bạn. Rất đơn giản, bạn chỉ việc truy cập vào PunyPNG , chọn file ảnh muốn được nén, click OK để hệ thống làm việc rồi download kết quả về PC, thế là xong.
Hiện PunyPNG hỗ trợ 3 định dạng là .PNG .GIF và .JPG với dung lượng upload tối đa là 500KB, dịch vụ này hoàn toàn miễn phí nên bạn không cần lo bị giới hạn số lượt sử dụng.

Qua vài lần sử dụng, mình nhận thấy rằng PunyPNG hoạt động tối ưu nhất với định dạng .PNG, cho ra kết quả khá hợp ý; 2 định dạng còn lại thì rất khó sửa đổi, và cho ra kết quả không cao. Chính vì thế, mình khuyên bạn nên dùng .PNG là tốt nhất. Ngoài ra, bạn cần download ảnh đã được hiệu chỉnh rồi upload lên host riêng, vì PunyPNG chỉ lưu tạm thời ảnh trong 15 phút.

Thực ra, cơ cấu hoạt động của PunyPNG chủ yếu dựa trên thủ thuật có tên là Dirty Transparency do SmashingMagazine giới thiệu . Tuy nhiên, không phải ai cũng rành về PTS để có thể thực hiện thủ thuật nên tiện ích PunyPNG được tạo ra nhằm thay thế bạn thực hiện.
Hy vọng dịch vụ này sẽ trở thành một địa chỉ hữu ích dành cho bạn. Chúc vui !

Đọc thêm »

Win Toolbox - Công cụ hữu ích cho Windows

Win Toolbox là một tiện ích vô cùng nhỏ gọn, hữu ích và hoàn toàn miễn phí dành cho Windows. Có thể ví nó như tiện ích 'Tất cả trong 1' do tổng hợp nhiều tính năng khác nhau vào một chương trình duy nhất. Đây là một software cần có trong USB của bạn.

Các tính năng mà Win Toolbox hỗ trợ gồm có Program Launcher (chạy chương trình), Screen Capture (chụp screenshot), Color Picker (chọn màu), Fonts viewer (xem trước font) và nhiều chức năng khác. Ngoài ra, chương trình có thể chạy trực tiếp mà không cần cài đặt, rất thuận tiện cho việc 'xách đi' khi bạn sử dụng PC khác.
Vì tính đa chức năng và cách sử dụng đơn giản của Win Toolbox, nên ở đây mình chỉ giới thiệu sơ về chức năng cũng như giao diện của chúng. Bạn hoàn toàn có thể tự nghiên cứu rõ hơn tiện ích này.

  

Mục Capture (Chụp screenshot với nhiều tùy chọn)

  

Mục Picker (Tìm mã màu)

  

Mục Fonts (Cho phép xem trước kiểu font chữ)

Mục About (Thông số PC, cài Win Toolbox vào Startup, transparent thanh Taskbar)

Nào, hãy download ngay Win Toolbox để thử nghiệm các tính năng hữu ích của nó nhé !

Đọc thêm »

Tạo tính năng Link-Thumbnail cho Blog

Chắc các bạn Blogger cũng đã từng biết qua Websnapr, công cụ giúp người đọc xem trước nội dung của liên kết. Tuy nhiên, do công cụ đó được Websnapr mặc định và không thể sửa đổi nên khiến một số bạn không ưng ý. Vì thế mà một blogger trên Internet - arc90 đã tự tùy chỉnh lại mã JS của công cụ với một số ưu điểm sau :

• Chỉ hiển thị ảnh thumbnail.
• Không có link quảng cáo.
• Có thể sử dụng với từng link riêng biệt hoặc tất cả .
  
• Tốc độ load nhanh.
• Dung lượng file JS khá nhẹ (~5.4 KB).
  

Bạn có thể xem screenshot dưới đây để thấy kết quả :

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ </head> và dán đoạn code dưới đây vào ngay bên trên :
   
   <style type='text/css'>
       .arc90_linkpic {
           display: none;
           position: absolute;
           left: 0;
           top: 1.5em;
           width: 160px;
           height: 120px;
       }
       .arc90_linkpicIMG {
           padding: 0 4px 4px 0;
           background: transparent url(http://boyprodx.googlepages.com/linkpic_shadow.gif) no-repeat bottom right;
           width: 160px;
           height: 120px;
       }           
   </style>
3. Tiếp theo, dán đoạn code dưới đây ở phía trên thẻ </body>
   
   <script src='http://boyprodx.googlepages.com/arc90_linkthumb.js' type='Text/JavaScript'/>
4. Save lại template.
5. Tới đây bạn có 2 lựa chọn :
   - 1 là sử dụng Link-Thumbnail cho từng link riêng biệt với cú pháp :
   
   <a class="linkthumb" href="Đường Link">Tên hiển thị</a>
   - 2 là sử dụng Link-Thumbnail cho toàn bộ link bằng cách dán kèm đoạn code này vào ngay bên dưới file JS ở bước 3 :
   
   <script type='text/javascript'>
   arc90_linkThumbUseClassName = false;
   </script>

Vậy là bạn đã tạo được chức năng Link-Thumbnail cho Blog của mình rồi đấy. Khuyến khích các bạn đang dùng công cụ của Websnapr cũng như các bạn chưa dùng nên sử dụng tính năng này, đảm bảo sẽ vừa ý hơn.
Hy vọng thủ thuật này sẽ giúp ích cho bạn. Thân !

Đọc thêm »

Những screenshots của Google Chrome OS

Như các bạn đều biết, thông tin về hệ điều hành của Google đã được các tờ báo công nghệ đưa tin từ vài tuần qua. Mặc dù chưa công bố chính thức, nhưng có vẻ Chrome OS này được fan của Google khá quan tâm.

"Mã nguồn mở, dung lượng nhẹ, thích hợp cho netbooks và yếu tố 3S (Speed, simplicity, security - Tốc độ, đơn giản và bảo mật)" - đó là những đánh giá của Google về OS này. Dự kiến OS sẽ được ra mắt trong vài năm tới. Liệu trong lúc đó, Google có thể biến hệ điều hành của mình đạt chất lượng như đánh giá không, và Microsoft có thể cải tiến Windows OS của mình để vượt qua đối thủ không? Hãy cùng chờ nhé !

Mời bạn xem qua những screenshots của Google Chrome OS bên dưới đây và chia sẻ cảm nhận !

 

Giao diện của Google Chrome OS ...

  

... phiên bản 0.2.5 Alpha

  

Shortcut truy cập vào dữ liệu (?)

  

Các logo Google, Adobe, FSF (Cộng đồng mã nguồn mở), Linux và (?)

  

Trình duyệt quen thuộc - Chrome ...

... phiên bản 3.5 Beta

  

Giao diện trang chủ Google trên trình duyệt

  

Các nút lệnh điều khiển trang

  

Các lệnh điều khiển cửa sổ được thay bằng Text

  

Thanh Bookmark nằm theo chiều dọc của trình duyệt

  

Thanh cuộn

  

Tốc độ kết nối

 

Tổng quát giao diện Google Chrome OS

[Nguồn : www.downloadsquad.com]

Đọc thêm »

Tạo tính năng Tooltips với CSS

Tooltips là công cụ nhỏ gọn cho phép Blogger có thể chèn một đoạn thông tin ngắn vào bất kì nội dung nào trong Blog, giúp người đọc có thể hiểu rõ hơn về giao diện của mình. Có khá nhiều cách để tạo Tooltips như JS, jQuery ... ; tuy nhiên do các cách trên hơi dài dòng nên trong bài viết này, mình sẽ hướng dẫn các bạn tạo Tooltips bằng ngôn ngữ CSS nhỏ gọn.

Toàn bộ code của thủ thuật này chỉ chiếm dung lượng <1KB nên bạn không phải lo ảnh hưởng đến tốc độ truy xuất Blog. Đồng thời nó hoạt động tốt trên mọi trình duyệt, kể cả IE6 lỗi thời. Bạn có thể xem screenshot của Tooltips ngay bên dưới đây:

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ a:hover trong template như hình dưới:
   
   
   rồi dán đè lên nó bằng đoạn code dưới đây :
   
   a:hover {background:#ffffff; text-decoration:none;}
   a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:150px;}
   a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
3. Save lại template. Vậy là bạn đã thiết lập được tính năng Tooltips cho Blog.
4. Để sử dụng chức năng này, bạn sử dụng cú pháp :
   
   <a class="tooltip" href="#">Tiêu đề<span>Nội dung hiển thị trong Tooltips</span></a>

Vậy là bạn đã tạo được chức năng Tooltips cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !

Đọc thêm »

Get-link MediaFire một cách dễ dàng

MediaFire là một địa chỉ khá nổi tiếng trong lĩnh vực hosting mà chắc hẳn các bạn đều biết. Nhờ cung cấp những tính năng hữu ích (chỉ có trong tài khoản Premium ở các dịch vụ hosting khác) cho người dùng miễn phí và chất lượng ổn định, MediaFire dần chiếm được lòng tin ở người sử dụng.

Tuy vậy, do người dùng VN thường sử dụng dịch vụ ở loại tài khoản miễn phí nên cũng bị giới hạn một số tính năng, dễ thấy nhất là Direct-Link. Để khắc phục tình trạng đó, một số website đã được tạo ra với mục đích get-link trực tiếp từ MediaFire. Mình cũng đã test một số site nhưng vẫn chưa ưng ý lắm (do phải vào trang chủ của các site mới get-link được) , nên đã search thêm trên Google và vô tình biết đến site MediaFireGet.

Website cho phép người dùng có thể get-link trực tiếp mà không cần vào trang chủ. Bạn chỉ việc copy link download ban đầu của MediaFire, rồi dán vào hộp thoại download và thêm từ GET, vậy là có thể download ngay. Ngoài ra, bạn còn có thể sử dụng tính năng Get-link Folder (lấy tất cả link download từ URL Sharekey) tại trang chủ MediaFireGet.

Copy link download ban đầu của dịch vụ MediaFire.

Dán vào hộp thoại Download, đồng thời thêm từ GET trước .com rồi click OK

 Sau đó, chờ vài giây để hệ thống tự get-link. Khi thấy size của file xuất hiện thì Download.

Nếu bạn biết dịch vụ tương tự khác, hãy chia sẻ cho mọi người thông qua comment nhé. Hy vọng bài viết này sẽ giúp ích cho các bạn. Thân !

Đọc thêm »

Những hình ảnh đầu tiên về FireFox 4.0

Vài hôm trước, các bạn đã được xem qua thông tin về phiên bản 3.7 của trình duyệt 'Cáo lửa'. Thế nhưng không lâu sau, nhóm phát triển Firefox lại tiếp tục khiến người dùng bất ngờ khi đăng tải những hình ảnh về thiết kế mới nhất của Firefox 4.0 trên trang Wiki của mình.

Firefox Screenshots: Thanh Tabs ở vị trí Top hay Bottom ?

Những hình ảnh của Firefox trên Windows OS phía dưới đây có thể cho bạn thấy rằng, Mozilla đang băn khoăn giữa 2 thiết kế chính cho phiên bản 4.0 : Thanh Tabs ở vị trí Top (Trên cùng) và Bottom (Phía dưới). Vị trí phía dưới là thiết kế quen thuộc ở Firefox, trong khi ở vị trí trên cùng lại khiến Firefox mang chút dáng vẻ của trình duyệt Google Chrome.

Vị trí thanh Tabs quen thuộc trên Firefox ...

... và vị trí dự kiến sẽ được thay thế.

Ngoài ra, Mozilla còn tóm tắt những ưu và nhược điểm của hai mẫu thiết kế này khá chi tiết :

Ưu điểm :

    - Tiết kiệm không gian theo chiều dọc.

    - Hiệu quả / Loại bỏ tính phức tạp - Các tab cần được kết nối tới một phần tử nào đó khi sử dụng. Vì vậy, họ có thể thêm một phần tử trực quan khác để chúng liên kết đến.

    - Rút ngắn khoảng cách đến chức năng Page Controls.

Nhược điểm :

    - Mất sự quen thuộc - Người sử dụng sẽ cảm thấy không quen khi giao diện bị xáo trộn.

    - Thanh tiêu đề bị loại bỏ - Bạn chỉ còn thấy được đoạn rút gọn của tiêu đề trên tab.

    - Tăng khoảng cách đến thanh Tabs.

    - Mất đi khoảng trống giữa icon của trình duyệt và widgets trên cửa sổ.

Tính năng mới của Firefox 4.0: Nút tích hợp Stop/Refresh/Go.

Ngoài việc thay đổi toàn bộ thiết kế đặc trưng, Firefox 4.0 còn có tính năng mới : Đó là Tích hợp Stop/Refresh/Go vào 1 nút duy nhất.

Thay vì tách ra thành các nút riêng biệt, chúng được tổ hợp thành nút '3 trong 1' nằm ở góc phải thanh Address. Nó cũng đồng thời thay đổi màu sắc dựa trên các hoạt động. Chẳng hạn nếu như bạn gõ địa chỉ web, nó sẽ biến thành nút Go màu lục ; Còn trong quá trình load trang, một nút Stop màu đỏ sẽ thay thế.

Thêm vào đó, do thanh trạng thái cũng bị lược bỏ, nên dòng đo quá trình load trang cũng được đem lên trên cùng và nằm dưới thanh địa chỉ.

Tích hợp 3 chức năng Stop/Refresh/Go trong 1 nút.

[Nguồn : www.mashable.com]

Đọc thêm »