Một số kinh nghiệm trên dự án Tolinen



ADMIN / 16-08-2017

AMP

– Một số quy tắc bắt buộc phải tuân thủ AMP cơ bản :
+ Size của css < 50kb
+ Không chứa script bên ngoài
+ Không chứa style trên thẻ html
+ Không dùng “!important” trong css
+ Tuân thủ chuẩn html của amp : <html amp>, amp-img, amp-video, amp-iframe, amp-form, …..

– Tag link [amphtml] và [canonical]
Nếu trang web có sử dụng AMP cho smartphone để các công cụ kiểm tra và google nhận diện chính xác hơn.
+ Thêm vào trang nếu trang đó không sử dụng AMP
<link rel=”amphtml” href=”[LINK]”>
[LINK] là link của trang AMP
+ Nếu trang đó là AMP
<link rel=”canonical” href=”[LINK]”>
[LINK] là link của trang không phải AMP
=> Trường hợp web chỉ có 1 page duy nhất. Thì [LINK] là link của trang đó.

– Một số thư viện của AMP 
+ Tạo menu bằng : amp-sidebar
+ Tạo slider : amp-carousel
+ Google analytics : amp-analytics
+ Nhúng một số chức năng mạng xã hội : amp-facebook, amp-twitter, …
………… và còn nhiều nữa !

 

Những lưu ý khi code giao diện hay găp:

  • Viết dư hoặc thiếu các thẻ đóng mở (thông thường là thẻ <div>).
  • Không dùng cặp thẻ <center>, nên dùng CSS để thay thế.
  • Nếu dùng thẻ section thì phải có các thẻ tiêu đề (h2-h6) để thêm tiêu đề xác định cho từng section.
  • Chú ý khi code các phần tử thường gặp như <span> và <p>, cặp thẻ <span> không được bao ngoài cặp thẻ <p>.
  • Mỗi trang HTML chỉ nên sử dụng 1 cặp thẻ <h1>.
  • Có thể thêm thuộc tính vào phần tử HTML nhưng phải thêm vào -data phía sau thuộc tính đó, ví dụ <a my-attribute-data=”2″ href=”#”></a>.
  • Khi dùng đến thẻ img thì phải thêm thuộc tính alt.
  • Đối với <table>, không nên dùng các thuộc tính như width, cellpadding, cellspacing, border, valign,… mà hãy sử dụng CSS thay thế những thuộc tính trên.
  • Không để trống các cặp thẻ, ví dụ <li></li>, có thể thay thế bằng <li>&nbsp;</li>.
  • Không viết CSS trực tiếp vào source HTML.
  • Kiểm tra kĩ để tránh trùng lặp thuộc tính ID
  • Về việc sử dụng các tools check online, sau khi chỉnh sửa giao diện phải chú ý check lại 1 lần nữa để tránh lặp lại các lỗi đã sửa trước đó.

Một số lưu ý khác:

  • Khi hiển thị dữ liệu từ database nên chú ý việc xuống dòng, có thể fix lỗi này một cách đơn giản bằng cách gọi hàm nl2br() [PHP function] bao ngoài dữ liệu (đối với dữ liệu lấy trực tiếp từ database hoặc từ form) hoặc sử dụng hàm wpautop() [Wordpress function] bao ngoài dữ liệu (đối với dữ liệu lấy ra từ những hàm wordpress khác, ví dụ get_posts()).

……………..sẽ tiếp tục update trong thời gian tới.


to-top