Filed under: Articles

Tìm hiểu về Responsive Web Design (WWWH)

Thế giới web đã thay đổi rất nhiều dựa trên rất nhiều yếu tố. Một khía cạnh về vấn đề thiết kế giao diện người dùng – chúng ta có thể gọi là VIEW hoặc frontend. Bạn đã bao giờ nghe tới khái liệm Responsive Web Design (tạm gọi là RWD)? Nếu chưa hãy cùng tìm hiểu những yếu tố đơn giản của RWD – What? Why? When? How? Update 6-7-2012: Google cũng đã khuyên nên sử dụng  Responsive để tối ưu hóa cho mobile – đọc tại đây: Recommendations for building smartphone-optimized websites 1. [What] Responsive Web Design là cái chi chi? Tôi không đi sâu hay nói rông dài vài những định nghĩa khó hiểu mà chỉ muốn nói một cách đơn giản rằng “Responsive Web Design” dùng để chỉ định nghĩa thiết kế giao diện người dùng cho nhiều Devices – Monitors size trên cùng một giao diện.
* Trên một giao diện người dùng hỗ trợ tối ưu hóa cho các loại thiết bị truy vấn vào website như SmartPhone – Tablet – Laptop/Notebook – Smart TV …
* Hỗ trợ đa thiết bị và nhiều loại màn hình không có nghĩa rằng tất cả chúng đều có một giao diện nhất định. RWD sẽ quy định những thuộc tính riêng cho chúng dựa vào CSS gọi là Responsive layout. Làm thế nào để biết một website có hỗ trợ đa thiết bị (Responsive layout) hay không? a. Thu nhỏ trình duyệt web của bạn lại sẽ ra ngay kết quả. b. Test trên một số tools như:

  • http://www.responsinator.com
  • http://resizemybrowser.com
  • http://mattkersley.com/responsive/
  • http://responsivepx.com
  • http://quirktools.com/screenfly/
  • http://www.jamus.co.uk/demos/rwd-demonstrations/
  • Google Chrome plugin
  • Demo: http://www.responsinator.com/?url=leduyquang.com
    2. [Why] Tại sao lại cần thiết kế web theo chuẩn Responsive? Đầu tiên phải nói rằng **Responsive **không phải là điều bắt buộc, chúng ta có nhiều lựa chọn trong việc giải quyết này.
    * Không hỗ trợ đến các devices ta không quan tâm
    * Viết riêng giao diện cho chúng.
    * Viết Apps cho chúng. Hiện nay người dùng không chỉ ngồi những chiếc máy tính để lướt web mà còn sự dụng nhiều thiết bị của hiện tại và trong tương lai sẽ là điều tất yếu. SmartPhone, Tablet là những ví dụ điển đình. Lựa trọn để giải quyết vấn đề kinh tế và tài nguyên là Responsive layout.

    3. [When] Khi nào nên quan tâm đến RWD? Hãy bắt đầu ngay bây giờ, hỗ trợ nền tảng di động có thể là ưu tiên cho những năm tới. Với việc HTML5 và CSS3 đi tiên phong, chúng ta cũng sử dụng chúng để hỗ trợ tốt hơn cho những thiết bị di động thiết yếu. Bản thân tôi rất quan tâm đến vấn đề này, vì biết rằng chính chúng ta cũng sử dụng những thiết bị di động để lướt web và thật khó chịu khi dùng trên nền tảng giao diện người dùng thông thường cho PC. 4. [How] Làm thế nào để thiết kế giao diện chuẩn Responsive? Ở một khía cạnh nào đó, viết thêm một dòng lệnh cũng là tổn hao nhân lực và thời gian. Nhưng dựa trên những tools khiến công việc đơn giản hóa hơn rất nhiều.

    Multi monitors size
    Ở mức độ đơn giản, người ta thường hỗ trợ một số kích cỡ màn hình như sau:
    * 320px
    * 480px
    * 600px
    * 768px
    * 900px
    * 1200px Ở điểm bắt đầu, chúng ta cần viết VIEW dựa trên HTML5 với một metatag bắt buộc là “

    viewport“.

    <meta name="viewport" content="width=device-width; initial-scale=1">
    

    Định hướng monitor size với css, lấy ví dụ để quy định layout cho kích cỡ màn hình lớn nhất là 480px (iPhone 4+ ngang)

    @media screen and (max-width: 480px) {
    
    body {
    //css
    }
    
    #content {
    //css
    }
    
    // and so on…
    
    }
    

    Kích cỡ màn hình nhỏ nhất với 480px và lớn nhất với 767px :

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    body {
    width: 436px;
    padding: 36px 22px 48px;
    }
    
    }
    

    Như vậy, để quy định bất cứ kích thước nào muốn chúng ta đều dùng condition tag:

    @media only screen and (min-width: px) {
    
    }
    
    Hoặc:
    
    @media screen and (max-width: px) {
    
    }
    

    Hoặc:

    @media only screen and (min-width: px) and (max-width: px) {
    
    }
    

    Lưu ý: Với IE chưa hỗ trợ CSS5 chúng ta cần sử dụng response.js html5.js library. Một số RWD CSS framework tham khảo:
    * Less Framework
    * Zurb Foundation
    * MQFramework
    * Golden Grid System
    * Fluid Baseline Grid
    * Columnal
    * The Semantic Grid System
    * The 1140px CSS Grid System
    * Skeleton
    * 320 and Up
    * The Goldilocks Approach
    * inuit.css
    * BluCSS
    * Frameless
    * Gridless
    * Amazium
    * Twitter Bootstrap
    * Gridpak Rất mong nhận được sự đóng góp!

    Filed under: Tutorials

    Cài đặt WordPress cho người mới bắt đầu

    Bài viết này sẽ hướng dẫn những bước cài đặt đơn giản cho người mới bắt đầu sử dụng WP lần đầu (Chúng ta sẽ quy ước viết tắt WordPress là WP cho ngắn gọn dễ hiểu).

    Phần nào khi bắt đầu những cái mới chúng ta không ai không bỡ ngỡ, WP là một nguồn mở đơn giản từ khâu cài đặt. Nào chúng ta cùng bắt đầu.

    Đầu tiên chúng ta cần biết những yêu cầu để chạy WP được giới thiệu tại đây. Sau khi đã có đầy đủ thông tin về database, đã upload source lên host chúng ta tiến hành cài đặt :

    Install WP step 1
    Gõ địa chỉ cài đặt WP để bắt đầu cài đặt, ví dụ: wordpress.com.vn

    Lưu ý: Với các host đã có cơ chế read-write (CHMOD) chúng ta không cần tự tạo file config. Còn với các host có cấu hình đòi hỏi chúng ta bắt buộc phải tự tạo file wp-config.php bằng việc đổi tên file wp-config-sample.php trên thư mục gốc.

    Install WP step 2
    GUI sau khi đã tạo file config

    Tiếp tục chúng ta điền đầy đủ thông tin SQLdatabase như yêu cầu:

    Install WP step 3
    Điền thông tin đầy đủ theo yêu cầu cấu hình

    Lưu ý: Một số hosting sử dụng sql server không phải là localhost mà là một server SQL riêng biệt như Godaddy hoặc MT là ví dụ.

    install wp step 4
    Thông báo kết nối thành công đến database

    Bước tiếp theo chúng ta điền thông tin site và administrator:

    Install wp step 5
    Thông tin website và admin

    Cuối cùng là thông báo cài đặt thành công WP:

    Install wp step 6
    Success

    Như vậy chúng ta đã hoàn thành các bước cài đặt thành công một website sử dụng WP.

    Filed under: Articles, Codex

    Tối ưu hóa excerpt và read more khi sử dụng excerpt

    Như chúng ta đã biết, khi viết theme hoặc tối ưu hóa theo ý muốn excerpts bằng function đơn giản là

    <?php the_excerpt(); ?>
    

    Mặc định, WP sẽ đưa ra 55 ký tự đầu tiên trong nội dung đại diện teasers cho the_excerpt. Vậy nếu chúng ta muốn nhiều hơn, ít hơn 55 ký tự thì sao?

    Một cách đơn giản là viết một function sử lý lại the_excerpt theo ý muốn. Mở functions.php để thêm hàm sau:

    function new_excerpt_length($length) {
    return 100;
    }
    add_filter('excerpt_length', 'new_excerpt_length');
    

    Như vậy chúng ta sẽ có teasers là 100 ký tự được lấy tự động trong nội dung.

    Tiếp theo, để kết thúc teaser WP sẽ đưa ra read more link tới permalink của bài viết một cách mặc định là […]. Không được thẩm mỹ lắm phải không? Bằng một function mới chúng ta sẽ tối ưu hóa read more theo ý muốn:

    function new_excerpt_more($more) {
    return '<a href="'. get_permalink($post->ID) . '">' . ' [Read More]' . '</a>';
    }
    add_filter('excerpt_more', 'new_excerpt_more');
    

    Sửa return theo ý mà bạn muốn. Bài sau tôi sẽ giới thiệu những cách sâu hơn để sử lý teaser.

    Codex: http://codex.wordpress.org/Customizing_the_Read_More

    Filed under: Articles

    WordPress 3.4 “Green” đã về!

    Như vậy là sau một thời gian dài phát triển từ Beta đến RC, hôm nay WP 3.4 đã chính thức trình làng với cái tên “Green”. Green lấy từ tên của tay chơi guitar Grant Green.

    Đây là phiên bản có nhiều cải tiến rất mới và được đánh giá là có giá trị gần gũi với người dùng đầu cuối hơn như chức năng tùy biến theme, header, twitter được nhúng sẵn và nhiều chức năng khác. Dưới là clip ngắn giới thiệu những tính năng chính được cập nhập:

     

    Xem qua clip giới thiệu ta thấy có một số nâng cấp chính đó là:

    • Visual theme customization – Có vẻ khá giống với những chức năng mà HeadwayThemes đã và đang phát triển. Việc WP lấy những ý tưởng hay từ các nhà phát triển để tích hợp vào core không phải là chuyện lạ, đơn cử như chức năng Menu được lấy từ Woolabs.
    • Twitter embeds – Tự động nhúng tweet vào nội dung một cách đơn giản là copy và paste tweet url (ví dụ: https://twitter.com/WPvietnam/status/213003633703403520). Chức năng này rất tiện cho các podcaster.
    • HTML Captions – chức năng này giúp chúng ta không phải vất vả để stying captions cho những blog có lượng ảnh lớn và yêu cầu cần thiết về caption nữa.

    Nguồn: http://wordpress.org/news/2012/06/green/

    Codex: http://codex.wordpress.org/Version_3.4