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ệu Sunday, 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. Sunday, May 24, 2009

Đã có vợ và sắp có em bé :) Sunday, May 24, 2009

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. Sunday, May 24, 2009

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ữ. Sunday, May 24, 2009

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. Sunday, May 24, 2009

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). Sunday, May 24, 2009

3 Chủ đề chính Web Typography. Grid System. CSS Framework. Sunday, May 24, 2009

Phần 1 Web Typography Sunday, May 24, 2009

Web Typography Cá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). Sunday, May 24, 2009

Phần 1.1 Web Typography Quy Ước đặt tên Sunday, May 24, 2009

Web Typography Quy ước đặt tên Tạ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ì... Sunday, May 24, 2009

Web Typography Quy ước đặt tên Một số định nghĩa mẫu 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. Sunday, May 24, 2009

Web Typography Quy ước đặt tên Mộ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ự. Deﬁnition List: Thường sử dụng cho danh sách các định nghĩa đồng cấp. Sunday, May 24, 2009

Web Typography Quy ước đặt tên Một số định nghĩa mẫu 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. Sunday, May 24, 2009

Web Typography Quy ước đặt tên Những việc phải làm? 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. Sunday, May 24, 2009

Phần 1.2 Web Typography Xác định đơn vị chuẩn Sunday, May 24, 2009

Web Typography Xác định đơn vị chuẩn 4 đơ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ì? Sunday, May 24, 2009

Web Typography Xác định đơn vị chuẩn 3 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 - % Sunday, May 24, 2009

Web Typography Xác định đơn vị chuẩn Tạ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? Sunday, May 24, 2009

Web Typography Xác định đơn vị chuẩn Nhữ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 em A 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 Sunday, May 24, 2009

Phần 1.3 Web Typography Lựa chọn kiểu chữ Sunday, May 24, 2009

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. Sunday, May 24, 2009

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) ? Sunday, May 24, 2009

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) ? Sunday, May 24, 2009

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) ? Sunday, May 24, 2009

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ó. Sunday, May 24, 2009

Web Typography Kế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ẩn Sử 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. Sunday, May 24, 2009

Phần 2 Grid System Sunday, May 24, 2009

Grid System Cá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. Sunday, May 24, 2009

Phần 2.1 Grid System 2 Lợi ích chính Sunday, May 24, 2009

Grid System 2 lợi ích chính Có 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ế. Sunday, May 24, 2009

Phần 2.2 Grid System 3 Thành phần Sunday, May 24, 2009

Grid System 3 thành phần 3 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)] Sunday, May 24, 2009

Grid System 3 thành phần 3 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. Sunday, May 24, 2009

Grid System 3 thành phần 3 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ó. Sunday, May 24, 2009

Grid System Kế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. Sunday, May 24, 2009

Phần 3 CSS Framework Sunday, May 24, 2009

CSS Framework Cá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 Sunday, May 24, 2009

Phần 3.1 CSS Framework HTML/CSS Sunday, May 24, 2009

CSS Framework HTML/CSS Nhữ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? Sunday, May 24, 2009

Phần 3.2 CSS Framework Công dụng Sunday, May 24, 2009

CSS Framework Công dụng Các công dụng của CSS Framework Giải quyết tất cả các vấn đề của HTML/CSS Cuộ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... Sunday, May 24, 2009

Phần 3.3 CSS Framework Blueprint CSS Framework Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Giớ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. Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Giớ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. Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Nhữ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 Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Những ưu điểm cần lưu ý Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Những ưu điểm cần lưu ý 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 Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Những điểm mạnh cần lưu ý Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Nhữ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 (ﬂuid layout) theo màn hình trình duyệt. Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Những nhược điểm cần lưu ý 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 Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Những nhược điểm cần lưu ý 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> Sunday, May 24, 2009

CSS Framework Blueprint CSS Framework Kế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. Sunday, May 24, 2009

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. Sunday, May 24, 2009

Các tài liệu tham khảo Sách: - Basics Design: Typography - Typographic Systems Website: - Wikipedia.org - Ilovetypography.com - Webtypography.net Sunday, May 24, 2009

Câu hỏi và liên hệ Mọi câu hỏi xin liên hệ: - Email: me@nguyen.ducban.com - Twitter: @ducban - Website: http://www.ducban.com Sunday, May 24, 2009

From Typography To Css Framework

0 comments

Notes on slide 1

9 Favorites