web2022 slide 1
DESCRIPTION
Kĩ Thuật Trình Bày Nội Dung Web(Typography) - Giáo Trình FPTTRANSCRIPT
![Page 1: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/1.jpg)
BÀI 1GIỚI THIỆU NHỮNG KHÍA CẠNH TỔNG QUAN VỀ
THIẾT KẾ WEB
![Page 2: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/2.jpg)
MỤC TIÊU BÀI HỌC
Các khía cạnh thiết kế webNhững kỹ năng thiết yếu trong thiết kế websiteQuy trình thiết kế websiteMột số vấn đề trong thiết kế websiteMột số website có thiết kế tiêu biểu
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 2
![Page 3: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/3.jpg)
Các khía cạnh thiết kế web
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 3
Trình bàygiao diện
Nội dung
Yếu tố khác
![Page 4: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/4.jpg)
Nội dung
Nội dung là phần thiết yếu tạo nên trang web, bao gồm:
Văn bảnHình ảnh đồ họa & multimediaCác thành tố khác
Nội dung cần được cân nhắc kỹ theo mục đích sao cho phù hợp với độc giả
Website chỉ là phương tiện để đưa nội dung tới độc giả/khách hàng
![Page 5: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/5.jpg)
Trình bày giao diện
Trình bày nội dung (HTML, màu sắc, typography)Bố cục giao diện (layout, CSS)Thiết kế các thành phần đồ họa
GraphicFlash
![Page 6: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/6.jpg)
Các yếu tố khác
Cách tổ chức và truyền tải nội dungThiết kế sáng tạoTính tiện dụng (Usability)
![Page 7: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/7.jpg)
KỸ NĂNG THIẾT YẾU TRONG THIẾT KẾ WEBSITE
![Page 8: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/8.jpg)
KỸ NĂNG THIẾT YẾU TRONG THIẾT KẾ WEBSITE
Kết quả điều tra trong cộng đồng chuyên gia thiết kế web về các kỹ năng thiết yếu trong nghề TKW
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 8
http://teachtheweb.com/monograph.php
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
CSS HTML Layout Typography Flash Color XHTML
% đồng tình
% đồng tình
![Page 9: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/9.jpg)
QUY TRÌNH THIẾT KẾ WEBSITE
![Page 10: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/10.jpg)
QUY TRÌNH THỰC HIỆN 1 WEBSITE
Quy trình thiết kế web
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 10
Quy trình thiết kế
Tìm hiểu
Khảo sátThực hiện
Đây là quá trình gặp khách hàngvà xem họ muốn làm gì
Đưa những thông tin đã thu thập từ phía khách hàng để phân tích, thử nghiệm
Bắt tay thực hiện layout
![Page 11: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/11.jpg)
QUY TRÌNH XÂY DỰNG WEBSITE
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 11
Phân tích yêu cầu, nội dung
Website
Thiết kế Prototype (Mockup)
Thiết kế Graphic
(Photoshop,..)
Dàn trangHTML/ CSS/ Js
Viết Code cho website
Upload website lên mạng
Update nội dung cho website
![Page 12: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/12.jpg)
MỘT SỐ VẤN ĐỀ CẦN QUAN TÂM TRONG THIẾT KẾ WEBSITE
(BEST PRACTICES)
![Page 13: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/13.jpg)
KINH NGHIỆM THIẾT KẾ WEB TỐT
Một website chất lượng phải thỏa mãn một số yêu cầu:
Nội dung hấp dẫn, đầy đủ, hợp với chủ ý của việc xây dựng websiteĐược sắp xếp, bố cục một cách hợp lý, tạo điều kiện cho người đọc/khai thác dễ định hướng trong website.Hình thức đẹp, phù hợp với chủ đề nội dungCó khả năng truy cập trên nhiều loại thiết bị
Hãy làm sao để người xem chỉ cần nhấn chuột không quá 3 lần để thấy thông tin cần tìm…
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 13
![Page 14: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/14.jpg)
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
Thiết kế web:Resolution (độ phân giải)Thiết kế phù hợp với trình duyệtMàu sắc trên webChế độ nén hình ảnh khi sử dụng trên webText (một trong số nguyên liệu tạo nên typography trên web)Khả năng truy cập (Accessibility)Tính tiện dụng (Usability)
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 14
![Page 15: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/15.jpg)
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 15
Resolution
(độ phân giải)
Độ phân giảihình ảnh
Độ phân giảimàn hình
![Page 16: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/16.jpg)
Độ phân giải màn hình:Hầu hết màn hình máy tính đều hiển thị với độ phân giải 72-96 ppi (pixels per inch)Khi nói tới độ phân giải màn hình, thường được tham chiếu tới kích thước màn hình, số lượng pixel được hiển thị trên màn hìnhKích cỡ màn hình chi phối trên web ngày nay: 800 600 và 1024 768
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 16
Độ phân giải màn hình 2005 2004
Lớn hơn 11% 10%
1024x768 56% 50%
800x600 28% 35%
Nhỏ hơn 5% 5%
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 17: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/17.jpg)
Độ phân giải hình ảnh:Là kích thước toàn vẹn và tổng thể của hình ảnhThường được sử dụng để định nghĩa kích thước pixel và độ phân giải không gian:
• Kích thước pixel (Pixel dimensions): là số lượng pixel tạo nên hình ảnh. Megapixel là một triệu điểm ảnh, có thể được hiểu (width height / 1,000,000)
• Độ phân giải không gian: số lượng điểm ảnh trên inch. Độ phân giải không gian phổ biến là 72ppi (độ phân giải cho màn hình) và 300ppi (độ phân giải cho in ấn)
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 17
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 18: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/18.jpg)
Thiết kế phù hợp với trình duyệt:Trình duyệt là giao diện người sử dụng tương tác với thông tin trên webCung cấp framework để hiển thị thông tin và các công cụ điều hướng cho sự tương tácĐiều chỉnh mã hoặc sử dụng Cascading Style Sheets (CSS) để đưa ra các thiết kế phù hợp với trình duyệt
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 18
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 19: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/19.jpg)
Thiết kế phù hợp với trình duyệt:Kích thước trình duyệt thực sự: kích thước màn hình của người dùng xác định số lượng thông tin được hiển thị trong một thời điểm. Nên khi thiết kế cần xem xét không gian trình duyệt, và trừ đi kích thước màn hình tổng thể để đưa ra kích thước web chính xác
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 19
Kích thướcmàn hình
IE 6 Firefox Opera Netscape
800x600 779x400 781x434 777x427 781x389
1024x768 1003x568 1005x602 1001x595 1005x557
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 20: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/20.jpg)
Màu sắc trên web:Là tập hợp màu sắc sẽ làm web nhất quán trên các trình duyệt trên cả hai hệ điều hành (Windows và OSX)
Chế độ nén hình ảnh khi sử dụng trên web:GIF (Graphics Interchange Format):
• Độ sâu màu từ 1-bit (2 colors) to 8-bit (256 colors)• Hỗ trợ trong suốt• Hỗ trợ ảnh động• Kích thước tập tin: 20%-90% kích thước ban đầu
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 20
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 21: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/21.jpg)
JPEG (Joint Photographic Experts Group):• Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216
colors)• Cho phép thiết lập và kiểm soát chất lượng theo tỷ lệ
phần trăm• Kích thước tập tin là 5%- 20% kích thước ban đầu
PNG (Portable Network Graphics):• Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216
colors)• Hỗ trợ các kênh màu alpha và độ trong suốt• Thông thường nén hình ảnh 5% - 25% tốt hơn GIF
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 21
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 22: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/22.jpg)
Text:Một trong số nguyên liệu tạo nên typography trên webĐể font chữ hiển thị chính xác trên trình duyệt thì font đó phải được cài đặt trên máy người dùng. Để hỗ trợ việc này nên sử dụng họ fontMột số họ font thường sử dụng:
• Arial, Helvetica, sans-serif• Times New Roman, Times, serif• Courier New, Courier, mono• Georgia, Times New Roman, Times, serif• Verdana, Arial, Helvetica, sans-serif• Geneva, Arial, Helvetica, sans-serif
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 22
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 23: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/23.jpg)
Khả năng truy cập (Accessibility): Hỗ trợ việc tiếp cận thông tin trên web dành cho mọi đối tượng, đặc biệt là người khuyết tậtĐây là vấn đề quan trọng cần được xem xét trong mọi dự án thiết kế
Tính tiện dụng (Usability):Website đáp ứng được mục tiêu của người sử dụng mà lại sử dụng thuận tiện nhấtĐang dần trở thành khái niệm chuẩn, liên quan tới sự thành công của web ngày nay
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 23
VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE
![Page 24: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/24.jpg)
TRAO ĐỔI MỘT SỐ VÍ DỤ WEBSITE CÓ THIẾT KẾ
ĐIỂN HÌNH
![Page 25: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/25.jpg)
WEBSITE CÓ THIẾT KẾ ĐIỂN HÌNH
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 25
http://www.bbc.co.uk/
![Page 26: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/26.jpg)
WEBSITE CÓ THIẾT KẾ ĐIỂN HÌNH
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 26
http://www.csszengarden.com/
![Page 27: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/27.jpg)
WEBSITE CÓ THIẾT KẾ ĐIỂN HÌNH
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 27
http://www.microsoft.com/en-us/default.aspx
![Page 28: Web2022 slide 1](https://reader037.vdocuments.mx/reader037/viewer/2022103001/559114e01a28abf6158b4649/html5/thumbnails/28.jpg)
TỔNG KẾT
3 khía cạnh trong thiết kế web:Nội dungTrình bàyYếu tố khác (tổ chức và truyền tải nội dung, usability,…)
Các kỹ năng thiết yếu trong thiết kế web: CSS, HTML/XHTML, layout, typography, flash, colorNên chú ý cách sử dụng những thành phần trên web để đạt hiểu quả tốt nhất: text, hình ảnh, tính tiện dụng,….Cập nhật thường xuyên các best practices về thiết kế web từ sách và Internet
Slide 1 - Giới thiệu những khía cạnh tổng quan về thiết kế trang web 28