From Typography To Css Framework

Từ Web Typography đến CSS Framework

Nguyễn Đức Ban#webcamsaigon 23/05/2009

Sunday, May 24, 2009

Tự giới thiệuSunday, May 24, 2009

Nguyễn Đức Ban

Công việc: Software Design Manager tại công ty Cổ Phần Cung Sư Tử Á Châu (ASALEO jsc).

Chuyên môn: Interactive Designer.

Sở trường: HTML/CSS, JavaScript, PHP.


Đã có vợ và sắp có em bé :)


Lời ngỏ

Khi đưa tất cả các vấn đề của Web Design (thiết kế Web) về cơ bản, thì có thể nói là các Designer (nhà thiết kế) ở Việt Nam hoàn toàn xa lạ với những kiến thức cơ bản mà đáng ra họ phải biết từ lâu. Ví dụ như Web Color Theory (lý thuyết Màu cho Web), Web Typography (Typography cho Web) - gồm có Typography và Grid System (hệ thống Lưới).

Từ Web Typography đến CSS Framework là bài giới thiệu của về Web Typography và các vấn đề khi đưa nó vào công việc thiết kê Web thực tế, cụ thể là cách Blueprint CSS Framework đã giải quyết các vấn đề đó như thế nào.


Lời ngỏ

Typography

Typography là sự sắp xếp, tạo dáng và trình bày chữ và kiểu chữ. (Trích Basics Design - Typography).

Web Typography là sự kết hợp các kỹ thuật của Typography vào thiết kế Web.Chú ý: Trong nội dung Slide này, Chữ là Type, Kiểu chữ là Typeface, Font chữ là Font-family của một hệ font chữ.


Lời ngỏ

Grid System

Hệ thống Lưới là hệ thống của các vùng phân chia ngang và dọc để tổ chức và tạo ra mối quan hệ giữa các thành phần trong thiết kế. Hệ thống lưới thường được dùng để tạo ra trật tự của thiết kế. (Trích The Grid System - How to make a modular design framework).

Chú ý: Trong nội dung Slide này, Lưới là Grid, Hệ Thống Lưới là Grid System.


Lời ngỏ

CSS Framework

Là thư viện các chuẩn mực được chuẩn bị sẵn dùng để áp dụng để định dạng cho các trang web bằng Cascade Style Sheet. (Trích Wikipedia).


3 Chủ đề chính

Web Typography.

Grid System.

CSS Framework.


Phần 1

Web Typography


Web TypographyCác vấn đề của Web Typography

Quy ước đặt tên (naming convention).

Xác định đơn vị chuẩn.

Lựa chọn kiểu chữ (typeface).


Phần 1.1

Web Typography

Quy Ước đặt tên


Web Typography

Quy ước đặt tênTại sao phải sử dụng?

Để tạo ra được phong cách riêng, điều quan trọng nhất mà mỗi nhà thiết kế phải làm là tạo ra một quy luật riêng. Công việc đầu tiên của việc tạo ra quy luật là đặt tên cho tất cả các định nghĩa mà mình thường hay sử dụng.Bạn có thể không nhớ là ở mẫu design thứ 8 dành cho khách hàng thứ 5 của năm ngoái bạn đã gọi tên title của bài viết là gì...


Heading: Thường sử dụng cho tiêu đề.

Heading Caps: Khi tiêu đề cần được in hoa.

Content: Thường sử dụng cho nội dung.

Description: Thường sử dụng cho chú thích.

Description-smallcaps: Khi chú thích cần được sử dụng smallcaps.

Web Typography

Quy ước đặt tênMột số định nghĩa mẫu


Label: Thường sử dụng cho nhãn của các input trong form.

Cite: Thường sử dụng khi trích dẫn.

Ordered List: Thường sử dụng cho danh sách có đánh số thứ tự.

Unordered List: Thường sử dụng cho danh sách không thứ tự.

Definition List: Thường sử dụng cho danh sách các định nghĩa đồng cấp.

Web Typography



Container: Thường sử dụng cho layer chứa cả mẫu thiết kế.

Header: Thường sử dụng cho layer chứa phần tiêu đề mẫu thiết kế.

Body: Thường sử dụng cho layer chứa phần nội dung mẫu thiết kế.

Footer: Thường sử dụng cho layer chứa phần phụ chú mẫu thiết kế.

Paragraph: Thường sử dụng cho các đoạn văn bản.

Web Typography



Liệt kê tất cả các định nghĩa thường dùng.

Xác định tên cho các định nghĩa đã liệt kê.

Phân loại các định nghĩa để nhóm chúng vào các nhóm riêng.

Tạo ra một bảng tóm lược (cheatsheet) các định nghĩa đã đặt tên và phân nhóm để sử dụng khi cần.

Web Typography

Quy ước đặt tênNhững việc phải làm?


Phần 1.2

Web Typography

Xác định đơn vị chuẩn


Web Typography

Xác định đơn vị chuẩn4 đơn vị cơ bản sử dụng với Web

Có rất nhiều đơn vị được sử dụng trong Web Design, và các đơn vị như pixel, point, em, % vẫn được sử dụng vì những lý do tương ứng với trường hợp sử dụng chúng.Cần có sự tính toán, nghiên cứu để đưa ra được quy tắc sử dụng đơn vị hợp lý.

Các quy tắc phải quy định rõ đơn vị nào sẽ sử dụng trong trường hợp nào, và trong trường hợp tổng thể thì đơn vị chuẩn là gì?


Web Typography

Xác định đơn vị chuẩn3 trường hợp cần xác định đơn vị chuẩn

Font-size: em - pixel - point - %

Line-height: em - pixel - point - %

A layer’s font-size: em - pixel - point - %


Web Typography

Xác định đơn vị chuẩnTại sao phải quan tâm?

Vì trên các trình duyệt, hệ điều hành khác nhau, font sẽ hiển thị khác nhau.

Vì người dùng sẽ có cách sử dụng website khác chúng ta, ví dụ như zoom-in hoặc zoom-out website khi đọc...

Vì nhu cầu thừa kế và sử dụng lại các đơn vị ở các layer con nằm trong layer mẹ.

Vì sự tiện dụng dành cho người sẽ lập trình JavaScript dựa trên các đơn vị đó.

Vì chúng ta luôn muốn biết với một định nghĩa trên bảng tóm lược Quy Ước Đặt Tên, thì kích thước chữ của nó sẽ là bao nhiêu?


Web Typography

Xác định đơn vị chuẩnNhững việc phải làm?

Thử nghiệm đơn vị mình đang sử dụng với các trình duyệt, các hệ điều hành, ở các mức độ sử dụng khác nhau, ở các kích thước khác nhau, ở các font chữ khác nhau để tìm ra các khác biệt của chúng.

Áp dụng đơn vị chuẩn đã xác định vào bảng tóm lược Quy Ước Đặt Tên, tương ứng với các định nghĩa cụ thể đã có.

Đơn vị chuẩn của tôi:

Tham khảo: http://www.alistapart.com/articles/howtosizetextincss/

Body font-size: n %Body line-height: n/100 * 1.125 emA layer’s font-size: m em == m * n % * 16px

Chú thích:* 100% = 1em = 16pixel: Đây là mặc định của hầu hết các trình duyệt


http://www.alistapart.com/articles/howtosizetextincss/

http://www.alistapart.com/articles/howtosizetextincss/

Phần 1.3

Web Typography

Lựa chọn kiểu chữ


Web Typography

Lựa chọn kiểu chữKiểu chữ và hệ font chữ

Kiểu chữ (typeface) là thành viên của một hệ font chữ (font-family), việc sử dụng càng ít hệ font chữ và sử dụng hợp lý các kiểu chữ có trong hệ font chữ đó là một thách thức đối với người thiết kế.Có rất nhiều người không phân biệt được kiểu chữ và hệ font chữ, đây là ví dụ cụ thể: Một hệ font chữ là: Helvetica sẽ là hệ font của nhiều kiểu chữ là Helvetica, Helvetica Neue, Helvetica CY.


Web Typography

Lựa chọn kiểu chữCác kiểu chữ: Script, Roman, Serif, San-Serif...

Kiểu chữ cho tiêu đề (title)?

Kiểu chữ cho nội dung (content)?

Kiểu chữ cho các khối trích dẫn (blockquote)?

Kiểu chữ cho các câu trích dẫn (cite)?

Kiểu chữ cho các ghi chú (description)?

Kiểu chữ cho các đoạn code (code view blockquote)?


Web Typography

Lựa chọn kiểu chữCách thể hiện: Upper case, Lower case, Capitalize, Regular

Cách thể hiện tiêu đề (title)?

Cách thể hiện nội dung (content)?

Cách thể hiện các khối trích dẫn (blockquote)?

Cách thể hiện các câu trích dẫn (cite)?

Cách thể hiện các ghi chú (description)?

Cách thể hiện các đoạn code (code view blockquote)?


Web Typography

Lựa chọn kiểu chữĐịnh dạng Chữ: Bold, regular, italic, bold-italic, underline...

Định dạng tiêu đề (title)?

Định dạng nội dung (content)?

Định dạng các khối trích dẫn (blockquote)?

Định dạng các câu trích dẫn (cite)?

Định dạng các ghi chú (description)?

Định dạng các đoạn code (code view blockquote)?


Web Typography

Lựa chọn kiểu chữNhững việc phải làm?

Xác định ra các kiểu chữ, cách thể hiện và các định dạng phù hợp cho kiểu chữ đó.

Hạn chế sử dụng nhiều các hệ font chữ, các kiểu chữ.

Dùng các đơn vị chuẩn vào các hệ font chữ, các kiểu chữ đã lựa chọn để thẩm định.

Áp dụng các lựa chọn hệ font chữ, các kiểu chữ đã xác định vào bảng tóm lược Quy Ước Đặt Tên, tương ứng với các định nghĩa cụ thể và đơn vị chuẩn đã có.


Web TypographyKết luận

Quy ước đặt tên (naming convention)Tạo ra danh sách các định nghĩa mà cá nhân thường sử dụng.

Xác định đơn vị chuẩnSử dụng bảng danh sách trên để thêm vào đơn vị chuẩn sẽ sử dụng với các định nghĩa.

Lựa chọn kiểu chữ (typeface)Sử dụng bảng danh sách trên để thêm vào quy tắc sử dụng hệ font chữ và kiểu chữ tương ứng với các định nghĩa và các đơn vị chuẩn sẽ sử dụng.


Phần 2

Grid System


Grid SystemCác vấn đề của Grid System

2 Lợi ích chính của hệ thống Lưới.

3 Thành phần của hệ thống Lưới.


Phần 2.1

Grid System

2 Lợi ích chính


Grid System

2 lợi ích chínhCó 2 lợi ích chính của hệ thống Lưới

Quản lý bề mặt của mẫu thiết kế và tạo ra tính hệ thống cho mẫu thiết kế.

Tạo ra sự tương tác vô hình của thiết kế lên người dùng, giúp họ định hướng được cách sử dụng của mẫu thiết kế.


Phần 2.2

Grid System

3 Thành phần


Grid System

3 thành phần3 thành phần của một hệ thống Lưới được áp dụng trong thiết kế Web

Độ rộng (Canvas): Là tổng chiều rộng của cả hệ thống Lưới, bao gồm các Đơn vị và khoảng cách giữa chúng.

Đơn vị (Unit): Là độ rộng của một vùng bị chia cắt bởi các khoảng cách ngang và dọc.

Khoảng cách (Gutter) giữa các Đơn vị: Là độ rộng của các khoảng cách giữa các đơn vị

Grid System áp dụng trên Web chỉ quản lý chiều ngang của bề mặt thiết kế.

Công thức tính của một hệ thống Lưới: Độ rộng = (Đơn vị x Tổng số Đơn vị) + [Khoảng cách x (Tổng số Đơn vị - 1)]


Grid System

3 thành phần3 thành phần trong việc hỗ trợ 2 lợi ích chính của hệ thống Lưới

Quản lý bề mặt của mẫu thiết kế và tạo ra tính hệ thống cho mẫu thiết kế.

Hệ thống Lưới trong thiết kế Web được sử dụng để quản lý chặt chẽ từng Đơn vị của mẫu thiết kế, qua đó kiểm soát được độ rộng của mỗi thành phần được sử dụng trên mẫu thiết kế.

Khi sử dụng hệ thống lưới, việc kiểm tra kết quả HTML/CSS với mẫu thiết kế sẽ dễ dàng hơn.

Khi tiếp tục công việc của mẫu thiết kế, cái người thiết kế thừa hưởng không phải là mẫu thiết kế, mà là hệ thống các mối quan hệ giữa các thành phần trên mẫu thiết kế, với một đơn vị chuẩn có thể nhìn thấy được.


Grid System

3 thành phần3 thành phần trong việc hỗ trợ 2 lợi ích chính của hệ thống Lưới

Tạo ra sự tương tác vô hình của thiết kế lên người dùng, giúp họ định hướng được cách sử dụng của mẫu thiết kế.

Chính vì tính hệ thống, nên người dùng sẽ dễ dàng hình dung ra được vị trí và chức năng của các thành phần theo một suy nghĩ logic, nhờ đó họ định vị được vai trò và chức năng của các thành phần đó để làm việc với nó.


Grid SystemKết luận

2 Lợi ích chính của Grid System.Lý do để áp dụng Grid System vào thiết kế Web.

3 Thành phần của một Grid System.Công thức để xây dựng một hệ thống Lưới.


Phần 3

CSS Framework


CSS FrameworkCác vấn đề của CSS Framework

Những vấn đề của HTML/CSS.

Công dụng của CSS Framework?

Giới thiệu Blueprint CSS Framework


Phần 3.1

CSS Framework

HTML/CSS


CSS Framework

HTML/CSSNhững vấn đề cần quan tâm của HTML/CSS

Cuộc chiến Trình duyệt (Browsers Wars): Các trình duyệt có một số quy chuẩn của riêng nó trong quá trình diễn dịch HTML/CSS.

Cấu trúc HTML tốt: Web Standard là việc tách Lớp Trình bày (Presentation layer) ra khỏi Lớp Cấu trúc (Structure layer) của Văn bản HTML (HTML Document).

Các @media rule: screen, print, presentation...

Hệ font chữ của các trình duyệt.

Hệ thống Lưới? Làm sao để áp dụng?


Phần 3.2

CSS Framework

Công dụng


CSS Framework

Công dụngCác công dụng của CSS Framework

Giải quyết tất cả các vấn đề của HTML/CSSCuộc chiến Trình duyệt: Hầu hết các CSS framework đều RESET các quy chuẩn sẵn có của trình duyệt cho đúng quy chuẩn của Web Standard.

Cấu trúc HTML tốt: Bằng việc định nghĩa sẵn các style trong CSS, CSS framework đã góp phần tách bạch rõ ràng công việc của lớp Trình bày với lớp Cấu trúc.

Hầu hết các CSS Framework đều định nghĩa sẵn các style dành riêng cho các @media rule, typography, hệ thống Lưới...


Phần 3.3

CSS Framework

Blueprint CSS Framework


CSS Framework

Blueprint CSS FrameworkGiới thiệu về Blueprint CSS Framework

Trang chủ: http://www.blueprintcss.org

Giới thiệu: Blueprint là một CSS framework, được xây dựng với mục tiêu giảm thiểu thời gian làm việc với HTML/CSS. Nó cung cấp cho bạn một một nền móng vững chắc để xây dựng dự án của bạn với một hệ thống Lưới rất dễ sử dụng, các định nghĩa về typography phù hợp và rất nhiều các plugin... và các định dạng CSS dành cho việc in ấn.


CSS Framework

Blueprint CSS FrameworkGiới thiệu về Blueprint CSS Framework

Các tính năng:CSS Reset để reset các thuộc tính có sẵn của trình duyệt về mặc định.

Hệ thống Lưới vững chắc hỗ trợ cho các gia diện phức tạp nhất.

Typography được xây dựng dựa trên các nguyên lý căn bản của Web Typography.

Các định dạng dành cho form nhằm tạo ra các giao diện người dùng đẹp.

Các định dạng In ấn để giúp việc in ấn bất cứ trang web nào.

Các Plugins và các công cụ hỗ trợ cho việc sử dụng Blueprint CSS tốt hơn.


CSS Framework

Blueprint CSS FrameworkNhững ưu điểm cần lưu ý

Hệ thống Lưới: Hệ thống lưới của Blueprint được xây dựng để hiển thị tốt nhất ở độ phân giải 1024 x 768, với các thông số sau: - Độ rộng (Canvas) = 950px- Đơn vị (Unit) = 30px- Khoảng cách (Gutter) = 10px.

Demo: http://www.blueprintcss.org/tests/parts/grid.html


http://www.blueprintcss.org/tests/parts/grid.html

http://www.blueprintcss.org/tests/parts/grid.html

CSS Framework



CSS Framework


Typography: Blueprint thực sự đã giúp chúng ta giải quyết 3 vấn đề của Web Typography ở phần 1.1 mà tôi nói ở trên:

Quy ước đặt tên (naming convention).

Xác định đơn vị chuẩn.

Lựa chọn kiểu chữ (typeface).

Demo: http://www.blueprintcss.org/tests/parts/sample.html


CSS Framework

Blueprint CSS FrameworkNhững điểm mạnh cần lưu ý


CSS Framework

Blueprint CSS FrameworkNhững nhược điểm cần lưu ý

Hệ thống Lưới:

Vì hệ thống Lưới của Blueprint có độ rộng 950 pixel và được xây dựng để hiển thị tốt ở độ phân giải 1024 x 768, nên không thể ứng dụng hệ thống Lưới này vào việc xây dựng các giao diện co giãn (fluid layout) theo màn hình trình duyệt.


CSS Framework


Thay đổi cấu trúc văn bản HTML:Vì xây dựng các định dạng của Lưới bằng các class có sẵn, nên khi thay đổi cấu trúc giao diện, ví dụ từ 2 cột sang 3 cột, bắt buộc phải tác động vào Lớp cấu trúc, nghĩa là tác động vào cấu trúc của văn bản HTML.

<div id=”body”> <div id=”left-sidebar” class=”span-6”></div> <div id=”main” class=”span-18”></div></div

Chuyển thành

<div id=”body”> <div id=”left-sidebar” class=”span-6”></div> <div id=”main” class=”span-12”></div> <div id=”right-sidebar” class=”span-6”></div></div


CSS Framework


Quy cách viết HTML rườm rà: Vì để đảm bảo hệ thống Lưới hoạt động tốt, quy cách viết HTML đôi khi sẽ rườm rà hơn bình thường. Ví dụ dưới đây là một đoạn code khi muốn canh giữa nội dung header, việc thêm <div class=”span-24”> làm cấu trúc HTML dư ra một thẻ rỗng chỉ để phục vụ cho Lưới, không hợp lý.

<div id=”header-wrapper”> <div id=”header” class=”container”> <div class=”span-24”> ... </div> </div></div>


CSS Framework

Blueprint CSS FrameworkKết luận

Hiện tại, việc thiết kế và xây dựng các Website ngày nay không chỉ cần các kỹ năng kỹ thuật, mà còn cần các kiến thức cơ bản và cách thức làm việc có tổ chức. Blueprint không chỉ là nền tảng giải quyết tốt các vấn đề cơ bản, mà còn có sự tổ chức tốt.

Blueprint CSS Framework là cung cấp cho người thiết kế Web các định nghĩa và định dạng có sẵn để thiết kế, sau đó thực hiện “cắt” HTML/CSS dựa vào các định dạng đó.

Blueprint CSS Framework không chỉ là một công cụ, mà còn là một nền tảng. Dựa vào nền tảng đó, chúng ta có thể xây dựng các plugins để “vá” lỗi, hoặc để sử dụng framework theo cách riêng của mình.


3 Chủ đề chính

Web Typography:Kiến thức cơ bản và tổ chức công việc.

Grid System:Định hướng làm việc có hệ thống.

CSS Framework:Công cụ áp dựng thực tế của Web Typography và Grid System.


Các tài liệu tham khảo

Sách:- Basics Design: Typography- Typographic Systems

Website:- Wikipedia.org- Ilovetypography.com- Webtypography.net


Câu hỏi và liên hệ

Mọi câu hỏi xin liên hệ:- Email: [email protected] Twitter: @ducban- Website: http://www.ducban.com


mailto:[email protected]

mailto:[email protected]

http://www.ducban.com

http://www.ducban.com