3 Sai lầm nghiêm trọng khi lập trình Web

Thỉnh thoảng, các lập trình viên thường quên rằng 99.9% người dùng ít quan tâm giao diện thế nào, kiểu chữ ra sao, button hay hình ảnh hiển thị thế nào. Gần như người dùng internet chỉ quan tâm nó có nhanh không, dễ dùng không và có đáp ứng đủ nội dung họ cần hay không. Bài viết sẽ thống kê ba lỗi mà lập trình viên thường mắc phải và cách giải quyết chúng.

1. Quên Convention

Ngay từ khi bắt đầu sử dụng Internet, người dùng đã được dạy cách để tương tác với một website. Do đó, họ thường sử dụng theo thói quen và rất ghét khi một website quá lạ lẫm. Dưới đây là vài ví dụ:

- Họ rê chuột lên một đối tượng mà họ nghĩ có thể click nhưng lại bị bối rối khi thấy con chuột hình mũi tên thay vì là một bàn tay.
- Họ click lên dòng text màu xanh có gạch dưới nhưng đó lại không phải là một đường link.
- Họ click lên Logo bên trái, tin rằng sẽ được chuyển về trang chủ, cuối cùng nó không hoạt động.

Đôi khi yêu cầu thiết kế Web không như mong đợi của chúng ta. Nhưng, lập trình viên và designer luôn phải giữ đúng nguyên tắc cơ bản để người dùng không cảm thấy bối rối. Đây là 3 nguyên tắc chính

Các đối tượng có thể click chuột phải được đổi kiểu con trỏ
Bất kỳ đối tượng nào có thể click chuột nên được chuyển kiểu trỏ thành bành tay khi người dùng rê chuột lên đó. Bạn có thể thực hiện điều này trong CSS. Đoạn code là:

div:hover {cursor:pointer;}



Chính xác phong cách của links
Các đường link nên khác biệt so với text thông thường, và được gạch chân trong nội dung chính của một trang. Bạn cũng nên đổi thành màu xanh để không nhầm lẫn với text thường

Logo
Logo phía trên đầu của website nên được click, và được chuyển về trang chủ. Đây là code cơ bản:

<a href=%u201Dhttp://www.example.com%u201D>
<img src=%u201Dlogo.gif%u201D alt=%u201DExample Company%u201D title=%u201DExample Company Logo%u201D height=%u201D100%u201D width=%u201D100%u201D />
</a>



2. Tăng tốc cho Website

Người dùng rất ghét những website load quá lâu. Nghiên cứu cho thấy 40% người dùng sẽ phàn nàn một website tốn thời gian load hơn 3 giây. Dười đây là vài mẹo để cải thiện

Thay đổi kích thước ảnh
Những lập trình viên mới thường dùng các bức ảnh lớn. Đó là điều sai lầm dẫn tới việc load rất chậm. Cách giải quyết là bạn nên dùng các công cụ chỉnh sửa ảnh như Photoshop để giảm dung lượng ảnh trước khi sử dụng chúng.

Load JavaScript ở Footer
Nhiều lập trình viên load tất cả file JavaScript không cần thiết trong tag <head>. Việc này cũng sẽ tốn thời gian khi trang đợi load. Trong hầu hết trường hợp, ngoại trừ JavaScript được yêu cầu để làm navigation, bạn nên đưa Script xuống phần footer.

Rest of the page%u2026
<script type=%u201Dtext/javascript%u201D src=%u201Djs/scripts.js%u201D></script>
</body>
</html>



Load CSS từ file bên ngoài
Sẽ thật sai lầm khi bạn để các mã CSS ngay trong trang web hoặc trong tag. Bạn nên dùng CSS từ các file bên ngoài như

<link rel="stylesheet" type="text/css" href=%u201Dcss/style.css" />



Khi bạn làm vậy sẽ có 2 lợi điểm. Một là máy tính sẽ không thể nào lưu stylesheet của bạn ở mỗi trang, vì vậy sẽ không có sự trùng lập stylesheet gây lãng phí. Hai là sẽ dễ dàng hơn cho việc bảo trì. Bạn có thể làm đồng bộ và nhanh hơn rất nhiều.

3. Không có sự chuẩn bị cho các thay đổi

Ngày nay hầu hết các lập trình viên đều sử dụng các framework thông dụng như Wordpress, Joomla hay Drupal để xây dựng website. Việc này rất tốt vì bạn sẽ dễ dàng thay đổi và cập nhật website.

Vấn đề là rất nhiều lập trình viên chỉ lập trình ngay lần đầu làm web mà không nghĩ đến việc sẽ có sự thay đổi. Ví dụ, tại thời điểm bắt đầu một lập trình viên chỉ tạo CSS cho phần header với h1,h2, và h3. Nhưng chuyện gì sẽ xảy ra nếu 2 tháng sau người chủ quyết định đổi thành 6? Bạn sẽ phải reset toàn bộ stylesheet và làm lại từ đầu. Vì vậy bạn nên sẵn sàng để tránh việc này

Chuẩn bị
Để đảm bảo rằng thiết kế của bạn có thể yên tâm khi có sự thay đổi, bạn nên chuẩn bị sẵn cho các tag thông dụng.

    -Body (<body>)
    -Heading 1, 2, 3, 4, 5, 6 (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
    -Link (<a>)
    -Paragraph (<p>)
    -Address (<address>)
    -Preformatted (<pre>)
    -Strong (<strong>)
    -Unordered list (<ul>)
    -Ordered list (<ol>)
    -Quotes (<blockquote>)

Nguồn:mashable.com


Comment

#650
15/12/2011 - 04:16:29
Phần chuẩn bị là làm như thế nào vậy, hướng dẫn củ thể dùm tôi với, thx.
#651
15/12/2011 - 05:48:03
phần đó có nghĩa là sử dụng một file css thông dụng dùng để reset các tính năng của các thẻ đã nêu. Đề phòng trường hợp những browser khác nhau sẽ thể hiện properties khác nhau

Đăng nhập đế gửi comment


Our Sponsor

BMW 320i * BMW 520i * BMW 720i