Archive for the ‘ Thiết kế web ’ Category

Safari hiển thị khác biệt trên Mac và Windows

June 14th, 2007 | Posted in Lập trình Web, Thiết kế web 4 Comments »

Trình duyệt Safari mới thử nghiệm (beta) trên Windows đã thu hút sự chú ý rất lớn từ giới thiết kế web, lập trình web. Và ngay sau vài ngày phát hành bản Beta thì Safari bắt đầu có… vấn đề. Ở đây là vấn đề sự khác biệt trong việc hiển thị website trên Windows và Mac. Dưới đây là hình ảnh hiển thị của website với Safari trên Windows và Mac.

Kiếm tra với trang web University of Michigan kết quả Windows (bên trái) và mac (bên phải) như sau:

sph_safari_win.png sph_safari_mac.png

Sự khác biệt: trên windows trang web có thêm thanh kẻ màu xanh ngay dưới banner của trang web khi hiển thị với Safari. Thanh kẻ này không hiển thị nếu bạn dùng bất kì trình duyệt nào khác thậm chí là Safari trên nền Mac.

Tiếp theo là một trang web khác cũng của University of Michigan kết quả Windows (bên trái) và mac (bên phải) như sau: Đọc tiếp »

Quảng bá website hiệu quả với sitemap.xml

June 8th, 2007 | Posted in Lập trình Web, SEO/SEM, Thiết kế web 7 Comments »

Sitemap.xml là file lưu trữ các thông tin về cấu trúc và thông tin khác của website được những nhà phát triển web sử dụng để tạo điều kiện cho các công cụ tìm kiếm (Google, Yahoo, MSN,…) thuận lợi hơn trong việc thu thập dữ liệu của mình. Phương pháp này mới chỉ được áp dụng trong một vài năm gần đây.

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site

Các trang tìm kiếm thường thu thập thông tin theo các links (liên kết) được cung cấp trên những trang web đó, nhưng giả sử thông tin đó rất hay nhưng lại không có liên kết thì gần như chúng sẽ không được thu thập. Và sitemap.xml giải quyết vấn đề đó. Chỉ cần cung cấp địa chỉ trang web vào sitemap.xml, sau đó, bạn có thể ăn ngon ngủ yên và chắc chắn rằng các trang tìm kiếm sẽ thu thập thông tin ở trang web đó. Đặc biệt, trang web của bạn sau khi thiết kế xong sitemap.xml sẽ xuất hiện trên các trang tìm kiếm rất nhanh. Và một điều nữa là có thể đôi khi bạn không tin nhưng sitemap.xml có thể giúp trang web của bạn có thứ hạng tốt hơn so với việc không có đấy!

Lợi ích của sitemap.xml là vậy nhưng bắt đầu từ đâu để làm sitemap.xml?

Chắc hẳn, ai cũng sẽ hỏi điều này nếu như đây là lần đầu nghe đến cụm từ “sitemap.xml”. Trước hết, bạn phải tạo cho trang website của mình một file sitemap.xml với cấu trúc như sau:
Đọc tiếp »

Kiểm tra website sau khi thiết kế

June 3rd, 2007 | Posted in Lập trình Web, CSS, Thiết kế web 1 Comment »

Đây là công đoạn khá quan trọng trong toàn bộ quá trình thiết kế web. Có rất nhiều cách để kiểm tra, thử nghiệm website sau khi được thiết xong. Bạn có thể mở chúng trên tất cả những browser mà máy mình có thể cài đặt như Opera, Firefox (FF), Internet Explorer (IE),… Thế nhưng vẫn chưa đủ vì vẫn còn những browser khác hoạt động trên những hệ điều hành khác như Safari, Camino trên Mac OSX hay một số browser hoạt động trên linux.

Bài viết này sẽ cung cấp cho bạn 3 cách để bạn có thể kiểm tra website sau khi thiết kế được tốt nhất.

1. Sử dụng dịch vụ hiển thị website trên nhiều browser và hệ điều hành.

Giải pháp này có lẽ là dễ làm nhất. Rất đơn giản, bạn chỉ việc cung cấp cho các dịch vụ trên địa chỉ website của bạn mà thôi. Sau đó, bạn chỉ việc chờ nhận được những hình ảnh được chụp của website khi hiển thị trên nhiều browser và hệ điều hành khác nhau. Bạn chỉ có thể xem được một số trang của mình mà thôi và thường là trang chủ. Nếu bạn muốn xem những trang tiếp theo bạn sẽ lại phải nhập địa chỉ và chờ… Mặc dù vậy, đây là lựa chọn hoàn hảo cho những trang web chỉ gồm một trang.

Dịch vụ trên được cung cấp tại Browsershot, BrowserCam. Tuy nhiên, đây vẫn chưa phải là cách duy nhất… Đọc tiếp »

Những điều cần biết khi viết mã CSS

June 2nd, 2007 | Posted in Lập trình Web, CSS, Thiết kế web 11 Comments »

Như chúng ta đã biết ở bài viết trước mình đã có lần để cập đến vấn đề “làm việc tốt với các trình duyệt (browser)” bằng cách sử dụng CSS để xóa đi những định dạng mặc định của từng browser. Lần này, các bạn sẽ được biết đến những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.

1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)

Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là “Box Model Bug” hình dưới là một hình ảnh minh họa cho lỗi này.

box-model-bug.png

Bạn có thể thấy rằng độ rộng của đối tượng “được” cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width). Đọc tiếp »

Những sai lầm khi viết mã HTML cho Email

May 30th, 2007 | Posted in Lập trình Web, Microsoft, SEO/SEM, CSS No Comments »

Việc quảng bá sản phẩm qua email đến khách hàng là một trong những chiến lược hàng đầu của bất cứ công ty nào trên thế giới. Điều này sẽ giúp bạn giữ được liên lạc với khách hàng của mình đồng thời gia tăng số lượng sản phẩm được tiêu thụ. Vậy làm thế nào để hiệu quả công việc quảng bá qua email đạt được kết quả tốt nhất? Sau đây là những sai lầm thường mắc phải khi gửi email quảng bá sản phảm đến khách hàng.

1. Gửi một email chỉ toàn là… hình ảnh.

Đây là một sai lầm rất dễ thấy và hay xảy ra với những người làm công việc thiết kế web hoặc thiết kế hình ảnh (graphic designer) đôi khi là từ những người… lười biếng. Ưu điểm và cũng là duy nhất của cách thức này là dễ làm và nhanh chóng. Nhưng nhược điểm thì vô kể, đầu tiên phải kể đến việc email của bạn sẽ bị chặn bới bộ lọc spam của nhiều dịch vụ email như Yahoo, Hotmail, Gmail hay bất kì dịch vụ email nào khác mà khách hàng của bạn đang sử dụng. Bên cạnh đó, hầu hết các dịch vụ webmail đều chặn việc hiển thị hình ảnh. Một điều đáng lưu ý nữa là khách hàng thường dành rất ít thời gian đọc email, và nhất là email quảng cáo sản phẩm. Hãy chắc chắn rằng bạn sẽ không bao giờ có kết quả cao trong việc quảng bá sản phẩm qua email với cách thức trên.

2. Không kiểm tra Email kĩ lưỡng khi gửi đi

Mỗi khách hàng có thói quen đọc email bằng nhiều phần mềm khác nhau. Cũng sẽ không có vấn đề gì nếu như mỗi phần mềm hay dịch vụ webmail đều đọc email theo cách của… riêng mình. Nếu bạn thường xuyên làm công việc gửi email cho khách hàng qua email, hẳn bạn sẽ nhận thấy rằng email xem ở Yahoo! Webmail sẽ khác khá nhiều so với email được xem ở Gmail. Và thông thường những người viết mã cho email hay quên mất đi vấn đề quan trọng này.

Vậy, trước khi gửi email quảng bá sản phẩm, hãy kiểm tra email đó bằng cách gửi đến nhiều dịch vụ trước và xem bằng những phần mềm thông dụng khác nhau như Yahoo! Webmail, Gmail, Outlook Express, Thunderbird… Đọc tiếp »

Lập trình với CSS

May 22nd, 2007 | Posted in Lập trình Web, CSS 10 Comments »

1. Định dạng chữ mà không cần dùng đơn vị pixel.

Đôi khi, bạn tự hỏi làm sao những người thiết kế web lại dùng đơn vị em thay vì px? Rất đơn giản, chỉ với một thủ thuật nhỏ bạn cũng có thể làm được với đơn vị em thay vì px. Hãy thêm đoạn mã sau vào CSS.

CSS:
  1. body { font-size: 62.5% }

Với đoạn mã trên thì 1.0em sẽ tương đương với 10px và sẽ hoàn toàn dễ hơn cho bạn khi tính toán kích thước font chữ hơn. Và khi đó bạn có thể định dạng như sau:

CSS:
  1. p { font-size: 1.2em; line-height: 1.5em; }

2. Trình bày CSS sáng sủa hơn

Trình bày CSS một cách khoa học sẽ giúp việc phát triển, sửa chữa dễ dàng hơn bao giờ hết. Hãy chia các định dạng (styles) ra thành các block riêng biệt và trình bày chúng như những ngôn ngữ lập trình bạn vẫn thường làm.

CSS:
  1. h1 {}
  2.     h1#logo { font-size: 2em; color: #000; }
  3. h2 {}
  4.     h2.title { font-size: 1.8em; font-weight: normal; }

Bạn có thể tham khảo chi tiết hơn về cách vết mã CSS tại bài viết Phương pháp viết mã CSS

Đọc tiếp »