Chủ Nhật, 6 tháng 5, 2012

Tìm hiểu margin và padding

http://www.thuthuatblog.com/2007/08/tm-hiu-margin-v-padding.html

Để 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.

Margin


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ồ).

Padding

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ụ)

Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!
Read More

Thứ Ba, 3 tháng 4, 2012

FindIcons.com – Thư viện icon, vector khổng lồ cho nhà thiết kế



Khi bạn thiết kế một trang web, một ứng dụng hay một văn bản. Chắc chắn bạn sẽ cần những hình ảnh để mình họa và làm đẹp thêm cho sản phẩm của mình. Đó chính là lí do Findicons ra đời, Findicons.com với cở sở dữ liệu biểu tượng hình ảnh khổng lồ, tha hồ cho bạn thỏa sức sáng tạo.
Đây là một trang tìm kiếm hình ảnh vector, icon, … yêu thích của mình mà mình muốn giới thiệu đến bạn đọc.

Giới thiệu Findicons.com

Findicons.com là một website đã ra đời từ rất lâu, sau bao nhiêu năm phát triển, với thư viện icon không lồ chắc chắn sẽ làm hài lòng các designer khó tính nhất.

Whois của findicons
Whois của findicons

Hướng dẫn sử dụng Findicons.com

Hướng dẫn sơ lược cách tận dụng sức mạnh của findicons một cách tuyêt đối. :D

Findicon homepage
Giao diện chính của Findicons
Gõ từ khóa vào hộp tìm kiếm ở trên để tìm  những hình ảnh phù hợp nhất với yêu cầu của bạn. Ví dụ như ở đây mình muốn tìm hình cái tên lửa, mình gõ vào “rocket” -> enter. Lập tức các biểu tượng liên quan có đính từ khóa “rocket” sẽ đươc hiển thị ra trước mắt bạn:
Giao diện tìm hình ảnh của findicons
Giao diện tìm hình ảnh
Bên trái là thanh công cụ nhanh giúp bạn tìm kiếm hình ảnh được chính xác hơn, và gần hơn với yêu cầu của bạn.
Bên phải là các hình ảnh phù hợp với từ khóa ban đầu của bạn đề ra, và các thông số bên cột trái.
Nếu tìm đươc một hình ảnh ưng ý, click lên nó bạn sẽ đươc đưa đên một trang khác với đây đủ các thông tin về kích thước, bản quyền, …
Thông tin icon
Thông tin icon
Ngoài định dạng icon chuẩn là .ico, còn có nhiều định dạng khác để bạn lựa chọn sao cho tiện sử dụng và chỉnh sửa theo ý thích. Findicons còn cung cấp cho bạn các thông tin về bản quyền, kích thước, tên tác giả, … .
Nếu kích thước không hợp nhãn bạn có thể chuyển qua tab Other size để tìm hình ảnh tương tự với các size khác:
Other size findicons
Tab Other size
Mặc dù là tìm biểu tượng (icon), nhưng findicons càng ngày càng cung cấp nhiều hình ảnh đa dạng hơn, có cả những hình ảnh kích thước lớn có thể dùng để trang trí cho web rất đẹp. Chúc các bạn tìm được nhiều hình ảnh ưng ý!  :bye:

Read More

jsFiddle – Công cụ chỉnh sửa và test code HTML, CSS, Javascript trực tuyến


jsFiddle, một công cụ trực tuyến giúp bạn test và nghiên cứu các đoạn javascript mới trước khi đưa nó vào website. Điểm nổi trội mà công cụ trực tuyến này đem lại là tính tức thì, sau khi soạn thảo xong bạn có thể cho run code bất cứ lúc nào. Công việc chỉnh sửa trở nên đơn giản hơn bao giờ hết. Thay vì ta phải ngồi tạo một file .html và chạy nó thử bằng chương trình duyệt.

Tổng quan jsFiddle

Giao diện chính jsFiddle
Giao diện chính jsFiddle
Giao diện tương đối dễ sử dụng, bạn chỉ cần gõ code HTML, CSS, Javascript vào các ô tương ứng. Sau đó ấn nút Run trên thanh công cụ. Kết quả sẽ hiển thị ngay ở khung result, đây là kết quả khi code của bạn được thực thi.
Thanh công cụ
Thanh công cụ
Ngoài Run bạn còn có thể save lại để chia sẽ với người khác (sau khi save, xem địa chỉ trên thành url của trình duyệt)
Bên cạnh tính tức thì của jsFiddle, bạn còn thấy jsFiddle cung cấp cho ta rất nhiều thư viện Javascript nổi tiếng hiện nay như Jquery, MooTools, YUI, … . Rất tiện lợi để học Jquery nói riêng và Javascript nói chung.
Thay đổi framework để làm việc
Thay đổi framework cho Javascript
Ngoài dùng để test code, jsFiddle còn là một công cụ hữu hiệu để share code của bạn với người khác, làm việc nhóm dễ dàng, hoặc show hàng bản demo, .. v..v.. . Tùy vào cách sử dụng sẽ làm công cụ này trở nên có ích cho hành trình “vọc” code của bạn.

Một số chức năng khác của jsFiddle

Đăng nhập hoặc đăng kí
Đăng nhập/Đăng kí
Ngoài một số chức năng cơ bản của jsFiddle là chỉnh sửa và run, bạn có thể tạo cho mình một tài khoản để lưu lại những đoạn code mình đã soạn và chia sẽ nó với mọi người hoặc dễ dàng quản lí và phát triển lên sau này.
Quá trình đăng kí khá đơn giản, chỉ cần username password và địa chỉ email để nhận những thông tin mới từ jsFiddle.
Sau khi đăng nhập bạn sẽ thấy các code mà bạn đã tạo ngay tại dashboard mới hiện ra.
Dashboard
Dashboard
Hãy tạo cho mình một tài khoản riêng để dễ dàng quản lí những code mình đã tạo nhé. Trong hình là tài khoản của mình. Đây là toàn bộ code drop down menu đơn giản với Jquery mình từng trình bày trong bài viết trước:
Khi bạn xem một đoạn code, jsFiddle cung cấp một số nút lệnh nâng cao khác như trong hình dưới đây:
Thanh công cụ nâng cao
Thanh công cụ nâng cao
Update: cập nhật code hiện tại (nó phải được save trước đó)
Fork: sao chép code hiện tại ra thành một tài liệu mới (địa chỉ mới, không ảnh hưởng đến code hiện tại)
Set as base: Thiết lập code hiện tại là phiên bản đầu tiên, mặc định mỗi lần save jsFiddle sẽ tăng version của code lên 1, set as base sẽ đưa con số đó về thành 0. (Áp dụng được với code do bạn soạn)
TidyUp: Tự sắp xếp, làm cho code trong dễ nhìn hơn
JSLint: Kiểm tra cú pháp của Javascript, nếu nó nói là vaid tức code của bạn không có lỗi. Chú ý: chỉ kiểm tra cú pháp thôi nhé, lỗi phát sinh trong quá trình code thực thi thì chức năng này bó tay.
Nhìn tổng quát, jsFiddle thật sự là một công cụ tuyệt vời để chỉnh sửa javascript và chia sẽ code với mọi người.
Read More

Thứ Sáu, 23 tháng 3, 2012

Quy trình thiết kế website

1. Tiếp xúc khách hàng chúng tôi sẽ cử nhân viên tư vấn làm việc trực tiếp với với khách hàng. · Tư vấn cho khách hàng về công nghệ và giải pháp phù hợp để xây dựng hệ thống. · Trao đổi và lấy yêu cầu từ phía khách hàng, thu thập hình ảnh, tài liệu liên quan tới việc xây dựng và phát triển website...

Bấm xem ảnh ở cửa sổ mới



2. Phân tích yêu cầu

Toàn bộ thông tin yêu cầu của khách hàng sẽ được chuyển về phòng kỹ thuật của chúng tôi. Bộ phận phân tích yêu cầu sẽ đưa ra Bản đề xuất chức năng chi tiết về cấu trúc hệ thống cũng như những giải pháp công nghệ phù hợp, liệt kê toàn bộ chức năng của website một cách chi tiết để khách hàng dễ dàng nắm bắt và có thể bổ sung hoặc sửa đổi theo yêu cầu.

3. Thiết kế giao diện

Bản phân tích sẽ được chuyển đến phòng thiết kế, ở đây giao diện website sẽ được thiết kế hoàn thiện dựa trên những phân tích và yêu cầu của khách hàng

4. Demo giao diện

Tiếp theo chúng tôi sẽ tiến hành đưa giao diện lên internet để khách hàng tiện nhận xét và đưa ra những ý kiến chỉnh sửa. Giao diện sẽ không hoạt động như một website hoàn thiện mà chỉ đảm nhiệm chức năng giao diện trực quan người dùng.

Khi khách hàng chưa chấp nhận bản thiết kế, chúng tôi sẽ trao đổi lại với khách hàng và gửi những yêu cầu bổ sung về cho bộ phận thiết kế, các yêu cầu sẽ được thực hiện lại cho tới khi có sự thống nhất của hai bên.

5. Lập trình hệ thống

Sau khi thống nhất về giao diện website, chúng tôi sẽ chuyển toàn bộ yêu cầu của khách hàng:

bản phân tích hệ thống, bản đề xuất chức năng và giao diện website đến bộ phận lập trình, ở đây hệ thống sẽ được xây dựng theo các phần tách biệt, sau khi các thành phần được xây dựng xong, hệ thống sẽ được lắp ghép thành một website hoàn chỉnh và đưa lên mạng chạy thử.

Sau khi website được đưa lên mạng, bộ phận kỹ thuật sẽ đảm nhiệm kiểm thử dự án và kiểm soát lỗi phát sinh của hệ thống, trong giai đoạn này hệ thống sẽ được đảm bảo hoàn thiện cơ bản.

6. Demo website

Sau khi website được chạy thử trên mạng internet, hai bên sẽ gặp nhau trực tiếp để thực hiện cập nhật với dữ liệu thực và thực hiện tất cả các thao tác từ cơ bản đến phức tạp, để kiểm tra lỗi hoặc các tính năng chưa đạt yêu cầu với bản đề xuất chức năng. Chúng tôi sẽ đảm bảo tinh chỉnh website cho phù hợp với yêu cầu đề ra. Khi khách hàng cần sửa đổi hay bổ sung các tính năng chưa hoàn thiện, BTS sẽ gửi những yêu cầu về cho bộ phận lập trình, các yêu cầu sẽ được thực hiện lại cho tới khi website hoàn thiện và hai bên đi đến thống nhất..

7. Bàn giao và nghiệm thu

Sau khi website được xây dựng hoàn chỉnh và khách hàng không có ý kiến sửa đổi hay bổ sung gì khác. Chúng tôi sẽ trực tiếp đào tạo kỹ thuật viên, bảo đảm chất lượng đào đào tạo đáp ứng yêu cầu về mặt kỹ thuật trong việc quản trị website và sử dụng thành thạo các phần mềm hỗ trợ do BTS cung cấp.

Sau khi hoàn tất công việc đào tạo hai bên sẽ đi đến ký kết bản nghiệp thu và thanh lý hợp đồng. Tất cả các tính năng bổ sung hoặc phát sinh trong hệ thống hai bên sẽ đi đến thống nhất thời gian và chi phí để thực hiện.

8. Bảo trì và chính sách sau dự án


Sau khi ký kết bản nghiệm thu và thanh lý hợp đồng chúng tôi sẽ có trách nhiệm bảo hành toàn bộ hệ thống theo thời gian quy định và hỗ trợ khách hàng quản trị, cập nhật thông tin và sao lưu, khôi phục dữ liệu trong toàn bộ thời gian bảo hành. 
Read More

Thứ Năm, 22 tháng 3, 2012

Các Blogspot Templates được đánh giá cao về khả năng SEO Read more: Các Blogspot Templates được đánh giá cao về khả năng SEO | Đồ họa Việt Nam, Thiết kế Logo, Thiết kế Brochures, Thiết kế Quảng cáo

Blogspot là một platform blog rất mạnh, chỉ xếp sau WordPress. Nhiều blogger đã và đang dùng Blogspot để kiếm tiền, chia sẻ kinh nghiệm, tư liệu...vv. Đối với các blog chuyên nghiệp, họ thường sử dụng các Template có tính năng SEO tốt, nhằm mang lại nhiều traffic và thu nhập. Dưới đây là một trong số các Templates được đánh giá cao về khả năng SEO.


Thesis Blogger Template by Hack Tutors



Flash News Blogger Template




Platinum Blogger Template

 Demo | Download

Social Eyes Blogger Template


Blogussion Blogger Template



Read more: Các Blogspot Templates được đánh giá cao về khả năng SEO | Đồ họa Việt Nam, Thiết kế Logo, Thiết kế Brochures, Thiết kế Quảng cáo 

Read More

Web Development

Được tạo bởi Blogger.