1. Color Scheme Designer
- CSD là 1 công cũ rất dễ sử dụng và hiệu quả giúp bạn chọn mầu sắc cho các thiết kế của bạn.
- Website: http://colorschemedesigner.com/

2. Kuler:
- Tương tự như CSD, Adobe Kuler là 1 website của Adobe cho phép bạn tạo và lưu các mã mầu khác nhau có thể dùng lại trong các thiết kế sau này.
- Website: http://kuler.adobe.com/

3. Typetester:
- Là ứng dụng trực tuyến để so sánh cách hiển thị của các phông chữ trên màn hình. Mục đích và vai trò chính của nó là làm cho bạn dễ dàng hiểu phông chữ của mình hiển thị như thế nào.
- Website: http://www.typetester.org/

4. Pixlr:
- Là trình biên tập ảnh trực tuyến miễn phí. Nếu bạn chỉ cần chỉnh sửa đơn giản, chỉnh bộ lọc thì pixlr là công cụ bạn nên biết.
- Website: http://pixlr.com/

5. Browsershots:
- Bạn thiết kế 1 trang web, và nếu bạn muốn kiểm tra trang web của bạn sẽ hiển thị như thế nào trên các trình duyệt? Bạn cài các trình duyệt ra? Browsershots sẽ giải quyết vấn đề này giúp bạn. Nó có thể chụp ảnh trang web của bạn trong các hệ điều hành và trình duyệt khác nhau. Chú ý: chỉ là vấn đề hiển thị, còn các chức năng khác như hỗ trợ JS, CSS3, HTML5 thì browsershots không giúp bạn được, phải cài thử thôi ^^
- Website: http://browsershots.org/

6. Pingdom:
- Công cụ giúp bạn kiểm tra thời gian tải của trang web, các yếu tố trong trang đó. Tất nhiên, chỉ tương đối vì còn phụ thuộc vào server, nhưng sẽ là công cụ cần thiết cho các bạn làm SEO.
- Website: http://tools.pingdom.com/

7. W3C Markup Validation Service:
- Không có quá nhiều điều để nói. W3C valid kiểm tra tính hợp lệ của các tài liệu HTML và CSS.
- Website: http://validator.w3.org/

8. IconFinder:
- Nó không thể coi là công cụ online, nhưng là 1 website khó có thể bỏ qua của web designer. Nó là 1 công cụ tìm kiếm số một để tìm các ICON.
- Website: http://www.iconfinder.com/

9. Code beautifier:
- Nó định dạng CSS của bạn và tối ưu hóa nó, rất ngắn để miêu tả.
- Website: http://www.codebeautifier.com/

10. CSS3 Please:
- Bạn chưa rõ về các chức năng mới của CSS3, đây là địa chỉ cho bạn, bạn có thể tìm hiểu hàm đó làm gì, làm như thế nào và đơn giản chỉ là “Toggle rule on/off” hàm đó. Very easy tool ^^
- Website: http://css3please.com/

Tất cả đều miễn phí, và, nếu bạn biết thêm, hãy giới thiệu qua chức năng comment ở blog.

0 to 255 http://0to255.com

Với website này, bạn sẽ dễ dàng chọn cho mình một màu thích hợp. Nó rất phù hợp nếu bạn muốn website dễ nhìn bởi việc tương đồng hoặc tương phản về màu sắc. Sử dụng bảng color từ đậm tới nhạt, bạn sẽ hài lòng và cảm thấy khó rời xa được nó mỗi khi bắt tay vào thiết kế.

Spritebox http://www.spritebox.net

Với website này, bạn có thể dễ dàng xây dựng class và id cho những bức ảnh bạn định đưa lên website – 2 yếu tố quan trọng để thiết lập giao diện cho website của bạn. Sử dụng những công nghệ hiện đại như JQuery, CSS3 và HTML5, nó sẽ giúp bạn lười hơn với chỉ một vài cái click là đã có thể yên tâm về những style cho các file ảnh của bạn.

jsFiddle http://jsfiddle.net

Để xây dựng một website trên nền tảng HTML, CSS và Javascript, hẳn bạn sẽ phải rất vất vả để mọi thứ trở nên hoàn hảo và thân thiện. Khi đó, hãy sử dụng jsFiddle.
Nó sẽ phân tích các mã, nén hay làm gọn nó lại và chuẩn hóa các mã. Như vậy, tốc độ load, khả năng xử lý và sửa chữa các file giao diện hay index sẽ được cải thiện một cách đáng kể.

Frame Box http://framebox.org

Nếu bạn muốn xây dựng một trang nào đó thực sự đơn giản để nhúng (embed) vào website chính của mình, hãy thử cảm nhận với FrameBox. Nhờ nó, bạn có thể có mọi thứ: không chỉ là nội dung nhàm chán, mà bạn có thể điền thêm vào button, form upload, form nhập liệu, tạo khung, tạo hình nền. Hẳn là những ai ghé thăm website của bạn sẽ ngạc nhiên lắm đấy!!!

CSS3 Generator – http://css3generator.com

Bạn đã nghe nói về CSS3, nhưng chưa rõ nó ra sao, cách thức hoạt động như thế nào. Không khó lắm đâu, nếu bạn biết CSS3 Generator. Website này sẽ giúp bạn xem những mẫu CSS3 để có thể ứng dụng vào website của bạn. Nói cách khác, nó như một cách bạn học mò từng thành phần của CSS3.

ProCSSor - http://procssor.com

Tối ưu hóa CSS là một trong những điều nên làm để việc SEO trở nên hiệu quả. Bạn có cách nào khác ngoài việc thu gọn các khoảng trống hay gộp các mã định dạng lại với nhau không? Câu trả lời là có. Với ProCSor, bạn sẽ tối ưu hóa được file giao diện CSS của website và đạt được hiệu suất cao hơn nhiều.

Super Conversion Button – http://www.performable.com/buttons/

Những button (nút ấn) ngày nay không chỉ còn là mơ ước đối với ai ít biết về Photoshop. Hãy thử tạo một nút ấn đơn giản với Super Conversion Button.

Nguồn: Internet

Lời đầu tiên, /me xin gửi lời cám ơn tất cả mọi người đã ghé hăm blog của /me. Các bài viết trên blog của /me sẽ liên quan nhiều đến web-dev, một niềm đam mê của /me.

[php]<?php
echo "Hello world";
?>[/php]

Uhmmm, thế viết gì nhỉ? Aboutme có rất nhiều ý tưởng, nhưng năng lực thì không đủ, phew và cả thời gian nữa chứ, công việc trên công ty của Aboutme chiếm mất 60% quỹ thời gian, 30% quỹ thời gian để ngủ, 5% để ăn uống và làm việc linh tinh khác, vậy là thời gian để Aboutme được làm Mr.Info cũng như viết bài chỉ còn .. 5%, quả là tuyệt ^_^.

Ngày trước, khi mới bắt đầu vào thế giới mạng, bỡ ngỡ, bơ vơ vì cũng chẳng có ai chỉ, Aboutme chỉ biết vơ những tờ báo ( echip, làm bạn, pcWorld ) về đọc, vọc về phần mềm. Rồi bắt đầu rẽ vào các diễn đàn, và luôn tự đặt câu hỏi “Quái, sao họ làm được vậy nhỉ?”. Thế là Aboutme bắt đầu tìm hiểu về web, và đó, vấn đề bắt đầu phát sinh vấn đề khác -> học web bắt đầu từ đâu, cần những công cụ gì …

Thật sự, thời điểm này web đã trở nên quá phổ biến với mọi người, công cụ cũng đã đầy rẫy, nhưng ở bài viết này Aboutme sẽ giới thiệu một số công cụ mà Aboutme hay sử dụng cho công việc làm Web của mình.

1. Trình duyệt web:

- Hix, nếu có ai hỏi trình duyệt để làm gì thì Aboutme bó tay mất thôi. Nếu như làm ra website, vậy mà khách hàng không có trình duyệt thì .. họ vào website kiểu gì? <<<— Câu hỏi và cũng là trả lời cho câu hỏi luôn đấy nhỉ.

- Mọi người có thể dùng IE ( vẫn chiếm thị phần lớn nhất trên thế giới ) nhưng bạn là 1 web developer thì sử dụng IE quả thật là .. thảm hại. Mình sử dụng 2 trình duyệt chính trên máy là Firefox và Google Chrome.

- Firefox: Trình duyệt của Mozilla, mạnh mẽ, được nhiều người yêu thích vì số lượng add-on, themes lớn, sự hỗ trợ tuyệt vời của cộng đồng  ( OpenSource mà ) …

- GoogleChrome: Mình mới sử dụng, nhưng theo quan điểm cá nhân mình, Google Chrome là 1 trình duyệt đáng để sử dụng, tốc độ, bảo mật .. và ngay cả giao diện, rất google.

2. Addon cho Firefox:

- Firebug:  một addon không thể nào thiếu cho Firefox nếu bạn là 1 web-dev. Với firebug bạn có thể chỉnh sửa, gỡ lỗi, giám sát HTML, CSS, javascript làm gì trên trang web của bạn … rất nhiều chức năng trong 1 addon. Để tìm hiểu thêm chức năng của Firebug, bạn có thể truy cập vào đây WHAT-IS-FIREBUG.

- FirePHP: một addon để làm việc với các script PHP, yêu cầu Firefox cần cài đặt addon Firebug trước.

- Web Developer: với addon này, bạn có thể “soi, chọc, ngoáy” trang web của bạn một cách rất cụ thể, addon sẽ tạo 1 toolbar trên firefox và việc sử dụng thì .. hãy khám phá nhé.

3. Editor, IDE:

- Không thể thiếu 2 món này nhỉ, chẳng lẽ viết code bằng … notepad , đó là điều Aboutme không thích 1 chút chút nào ^_^ và có lẽ bạn cũng vậy. Mình giới thiệu 3 software trên windows mà mình thường xuyên sử dụng.

- IDE Adobe Dreamweaver: Không thể thiếu cái tên “đại gia” này được, nhưng quan điểm cá nhân mình là không lạm dụng  IDE này, có thể dùng nó nhiều, thay vì giao diện trang web bằng DIV bạn lại làm bằng .. frame chẳng hạn, quen, thì khó mà phá bỏ được.

- PHP Designer 7: phiên bản mới nhất của nó, tác giả là Micheal Phạm, một Việt kiều Đan Mạch ( nếu mình không nhầm ).

- Notepad ++: đơn giản, ngọn nhẹ, miễn phí, hỗ trợ hightlight code… nói chung là tất cả những gì cần có của 1 text-editor, và cá nhân mình, Notepad ++ là 1 công cụ không thể thiếu.

4. Bonus:

- Uhmm, Aboutme muốn có những bài viết cụ thể về ưu, nhược, cách sử dụng  (basic) của các phần mềm trên, nhưng có lẽ không cần thiết. Các bạn sẽ tìm hiểu được mà.

- Nhưng có 1 website ngày xưa, lâu lắm rồi mà Aboutme muốn giới thiệu với các bạn, đó là trang web hướng dẫn sử dụng  Dreamweaver MX, các bạn có thể đọc online ở đây, Hướng dẫn sử dụng  Dreamweaver MX.

- Phew, giới thiệu chừng đó có lẽ cùng là đủ rùi nhỉ, tạm thời thế nhé, hẹn gặp mọi người trong những bài viết đầu tiên, cơ bản về thế giới Web của Aboutme

PS: Mọi người có thể follow Aboutme trên twitter để có thể dễ dàng cập nhập thông tin tại twitter của Aboutme

Chào mọi người đến với thế giới web của Aboutme.