BÀI 23 - CHUẨN BỊ XÂY DỰNG TRANG WEB (KNTT

Bài 23 - Chuẩn bị xây dựng trang web (kntt)

Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này thuộc định hướng Tin học ứng dụng (ICT). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Những đặc điểm chung của trang web
a) Phần đầu trang
b) Phần thân trang
c) Phần chân trang
2. Các bước chuẩn bị để xây dựng trang web
a) Định hình ý tưởng
b) Thiết kế
c) Lựa chọn phần mềm, chuẩn bị tư liệu

1. NHỮNG ĐẶC ĐIỂM CHUNG CỦA TRANG WEB

Dễ nhận thấy mỗi trang web đầy đủ nhất đều có cấu trúc gồm 3 phần chính:
• Phần đầu trang (header) với những thông tin chung nhất về trang.
• Phần phân trang (body) chứa nội dung của trang.
• Phần chân trang (footer) chứa các thông tin ngắn gọn về chủ thể, bản quyền.

a) Phần đầu trang

Phần đầu trang có vai trò như trang bìa thu gọn của một cuốn sách hay là phần trình bày đầu mỗi chương sách: Có hình nền và những thông tin nổi bật trên đó như logo, tên trang, thanh điều hướng (thanh này sẽ bao gồm bảng chọn các chức năng; chức năng tìm kiếm có thể được tách riêng ra khỏi bảng chọn), tiêu đề và thông tin tóm tắt của trang hay là thông tin mới cập nhật.
Lưu ý:

- Khi trang web được tải lên bởi một trình duyệt web, tên của nó sẽ được hiển thị tại tiêu đề của tab, phía sau một logo nhỏ gọi là favicon (viết tắt của favorite icon). Favicon có thể không phải được thu gọn từ logo của trang mà được tạo dựng riêng, không phải chỉ cho một trang mà cho cả website, chứa nhiều trang web liên quan đến nhau.
- Mỗi trang web hay website trên Internet có một địa chỉ truy cập dạng URL (Uniform Resource Locator) để người dùng Internet có thể đọc chúng qua một trình duyệt web như Firefox, Chrom, Edge hay Safari,...
- Tùy theo thiết kế mà đôi khi người ta dành ra một vài dòng trước phần đầu trang để đưa ra những thông báo quan trọng ví dụ như trang đang được xây dựng hay bảo trì,…; phần này gọi là phần thông báo.

b) Phần thân trang

Thân trang là phần chứa nội dung của trang web, thường được bố cục thành các khối hình chữ nhật (Hình 23.2), mỗi khối trình bày một nội dung với tiêu đề riêng.

Mỗi khối nội dung có thể chứa các thông tin dạng văn bản, hình ảnh, âm thanh, biểu mẫu nhập dữ liệu hay là các ứng dụng nhúng khác nhau (ví dụ: ứng dụng bản đồ, ứng dụng dự báo thời tiết,...).

c) Phần chân trang

Phần này có thể bao gồm những thông tin về thương hiệu, bản quyền, bảo mật, tóm tắt những thông tin cần nhấn mạnh thêm, thông tin liên hệ và những liên kết tới các trang mạng xã hội liên quan.

2. CÁC BƯỚC CHUẨN BỊ ĐỂ XÂY DỰNG TRANG WEB

Việc xây dựng trang web cần bắt đầu với việc phân tích, xác lập định hướng về mục đích của trang web và đối tượng người dùng. Mỗi trang web phải bắt nguồn từ một nhu cầu cụ thể. Trang web được xây dựng cho những người đọc nó, vì vậy cần phải xác định được đối tượng người đọc (người dùng), khả năng và mong muốn của họ. Từ đó xác định được mục đích, đối tượng, các yêu cầu về trang web trước khi đi vào các chi tiết thiết kế nội dung và hình thức. Trình tự các bước chuẩn bị cần phải thực hiện có thể tóm tắt như sau:

• Định hình ý tưởng:
- Xác định mục đích và đối tượng phục vụ của trang web.
- Thiết lập các yêu cầu cần đạt được cả về nội dung và hình thức.
• Thiết kế:
- Xây dựng dàn ý.
- Xây dựng kiến trúc nội dung, thiết kế mĩ thuật, chọn bảng màu, phông chữ,...
• Lựa chọn phần mềm chuẩn bị tư liệu:
- Lựa chọn phần mềm để xây dựng trang web.
- Chuẩn bị thông tin cho phần đầu trang: Làm logo, favicon, ảnh nền và đặt tên trang web.
- Chuẩn bị tư liệu cho phần thân và chân trang.

Lưu ý: Cần phân biệt việc xây dựng trang web đơn giản với xây dựng website. Công việc chuẩn bị xây dựng website có thể đòi hỏi thêm một số bước khác, đặc biệt là cách tổ chức vận hành và quản trị website.

a) Định hình ý tưởng

Nội dung chính của bước này là xác định mục đích, đối tượng và các yêu cầu cần đạt được; nói cách khác là tìm được câu trả lời tường minh cho các câu hỏi:

• Mục đích của trang web là gì? Lớp người dùng nào hay là những ai sẽ quan tâm thường xuyên đến trang web này?
• Để đạt được mục đích và đáp ứng được nhu cầu của người dùng thì trang web phải đạt được những yêu cầu như thế nào về nội dung, kiến trúc và mĩ thuật?

Để có thể xác định được rõ mục đích cũng như các yêu cầu cần đặt ra với trang web, cần khảo sát, phân tích các nhu cầu cũng như những đặc điểm của người dùng một cách cẩn thận kĩ lưỡng. Càng hiểu được nhu cầu của người dùng thì sẽ càng xác định được rõ hơn mục đích cũng như các yêu cầu cần đặt ra về nội dung và hình thức của trang web.
Để biết được rõ nhu cầu người dùng, cần phải đặt ra và trả lời những câu hỏi như: Người dùng mong muốn biết những thông tin gì? Những gì sẽ làm nên sự thu hút và gây hứng thú đối với họ? Những gì là đặc điểm văn hóa và thị hiếu của người dùng?
Ví dụ: Dự án xây dựng trang web với chủ đề “Việt Nam - Vẻ đẹp tiềm ẩn” của một nhóm thiện nguyện tâm huyết mong muốn quảng bá những nét đẹp của thiên nhiên, văn hóa, con người Việt Nam.

• Xác định mục đích của trang web và đối tượng sử dụng:
- Mục đích: Giới thiệu vẻ đẹp của thiên nhiên, văn hóa, con người Việt Nam.
- Đối tượng sử dụng: Tất cả những người yêu thích phong cảnh thiên nhiên, những nét đẹp về văn hóa nghệ thuật cũng như ẩm thực các vùng miền Việt Nam.
- Những điều làm nên sức hấp dẫn, thu hút đối với lớp đối tượng này là những bức ảnh đẹp về thiên nhiên, về cuộc sống lao động của người dân, những bài viết và hình ảnh về lịch sử, văn hóa, đặc điểm ẩm thực địa phương. Là những người thích khám phá, họ sẽ muốn biết vị trí trên bản đồ, cách tự đi đến đó, mùa hay thời gian đẹp nhất để đến tham quan mỗi danh lam thắng cảnh,...
- Nếu xác định trang web phục vụ cho cả người nước ngoài thì cần lưu ý những nội dung giúp họ tìm hiểu và khám phá những đặc điểm văn hóa truyền thống dân tộc cùng những vẻ đẹp độc đáo của thiên nhiên và con người Việt Nam.
• Yêu cầu về nội dung và hình thức:
- Những nội dung được giới thiệu phải phản ánh được nét đẹp riêng của thiên nhiên, văn hóa, con người ở mỗi vùng miền.
- Định dạng thông tin đa dạng sinh động: Văn bản, hình ảnh, âm thanh,...
- Những thông tin khác nên được giới thiệu kèm theo như bản đồ, đường đi, mùa thời/ gian đẹp nhất, đặc điểm thời tiết,...
- Hình thức của trang web phải dễ theo dõi, sinh động, đẹp và trang nhã về màu sắc.
- Trang web cũng cần có tương tác với người dùng để biết thêm nhu cầu của họ, từ đó có thể từng bước bổ sung, điều chỉnh nội dung và hình thức cho phù hợp hơn.

b) Thiết kế

Bước này cần phải được bắt đầu với việc xây dựng dàn ý tổng thể, từ đó xây dựng bố cục của trang và đưa ra những chỉ định về thiết kế mĩ thuật.

• xây dựng dàn ý và bố cục:
- Việc xây dựng dàn ý sẽ giúp hình dung toàn bộ về những nội dung sẽ được giới thiệu trong trang web và cách sắp xếp các nội dung này sao cho ấn tượng, mạch lạc, dễ tiếp cận và dễ hiểu nhất.
- Trang web “Việt Nam - Vẻ đẹp tiềm ẩn” sẽ giới thiệu các cảnh đẹp tiềm ẩn ở các vùng miền khác nhau, chẳng hạn Tây Bắc, Đông Bắc, Miền Trung, Tây Nguyên, Miền Đông, Miền Tây. Vì vậy, ở thanh điều hướng cần tạo bảng chọn gồm danh sách các vùng miền và thông tin liên hệ/phản hồi. Phần thân trang sẽ là một số bài viết mới nổi bật về một số địa danh có thể tham khảo một mẫu bố cục như Hình 23.5.

• Thiết kế mĩ thuật: Thiết kế mĩ thuật trang web là việc thiết kế hình thức của trang web sao cho có vẻ đẹp phù hợp với thẩm mĩ của người dùng và phù hợp với nội dung, góp phần gây ấn tượng và tăng sức thuyết phục của nội dung. Vì vậy, về chi tiết, công việc này được tiến hành với từng nội dung, từng bài viết của trang web. Ở mức thiết kế chung, sẽ chỉ giới hạn trong phạm vi lựa chọn các định dạng chữ và bảng màu.
- Định dạng chữ: Cần lựa chọn nhất quán và hài hòa giữa phông chữ, kiểu chữ (nghiêng, đậm,…) và cỡ chữ dùng cho mỗi phần của trang web. Ví dụ:
+ Phông chữ dùng cho các bảng chọn trên thanh điều hướng, nên là các phông Sans Serif (không có chân), hẹp ngang, dễ đọc và tiết kiệm diện tích hiển thị như phông Arial Condensed.
+ Các phông Serif (có chân), như Times New Roman rất ít được dùng để trình bày nội dung của trang web do khó nhận diện trên màn hình và chỉ dùng trong các trường hợp cỡ chữ lớn như tiêu đề. Phần nội dung bài viết nên chọn một không Sans Serif như calibria, Ariral, Verdana, Tahoma,…
+ Kiểu chữ đậm có ý nghĩa nhấn mạnh, thường dùng cho các tiêu đề. Kiểu chữ nghiêng có ý nghĩa phân biệt, thường dùng khi muốn phân biệt từ ngữ, câu chữ hay phần chú thích.
+ Cỡ chữ có thể quy định tối thiểu 4 cỡ: cỡ nhỏ nhất chỉ dùng cho chú thích không cần nhấn mạnh như chân trang; cỡ thường dùng cho phần nội dung bài viết; cỡ lớn cho tiêu đề và cỡ rất lớn cho những tiêu đề nổi bật.
- Bảng màu:
+ Một trang web với những màu sắc tương phản quá gắt hay không hài hòa sẽ gây phản cảm với người đọc. Vì vậy, để gây cảm xúc tốt và thu hút người đọc cần phải chọn một số màu có độ tương phản nhẹ nhàng và hài hòa. Mỗi bảng màu thường có 5 màu pha trộn giữa các màu gam ấm, lạnh và trung bình, chưa kể hai màu trắng và đen (Hình 23.6).
+ Hình 23.7 là một ví dụ về phông chữ, bảng màu trong một trang web của VnExpress. Phông chữ có chân chỉ được dùng ở vòng tiêu đề. Tất cả các phần khác đều dùng phông không chân. Có bốn cỡ chữ khác nhau, kết hợp với các kiểu chữ thường, đậm hay nghiêng; bảng màu gồm 5 màu tương phản vừa phải chuyển dần từ màu ấm đến màu lạnh.

c) Lựa chọn phần mềm, chuẩn bị tư liệu

Hiện nay, có nhiều phần mềm hỗ trợ làm trang web một cách trực quan, nhưng hầu hết chúng là những phần mềm thương mại. Tuy nhiên, Google có cung cấp miễn phí, trong hệ sinh thái của họ, một phần mềm làm trang web với giao diện hoàn toàn trực quan. Phần mềm này có điểm rất mạnh là dễ sử dụng và kết nối một cách dễ dàng với những phần mềm khác của Google như Docs, Sheets, Slides, Maps, Photos, YouTube,… Các trang web sau khi làm xong sẽ được lưu trữ trên Google Drive và có thể chia sẻ, xuất bản ngay trên Google với một địa chỉ URL hỗ trợ bởi Google. Yêu cầu cần có chỉ là người dùng đăng ký để có tài khoản Google Mail.
Vì vậy, sách này sẽ chọn giới thiệu phần mềm làm web của Google và hướng dẫn từng bước tạo dựng trang web với ví dụ cụ thể là làm trang web “Việt Nam - Vẻ đẹp tiềm ẩn”.
Việc chuẩn bị tư liệu cho trang web là việc kéo dài suốt thời gian thực hiện dự án, bắt đầu từ việc thiết kế favicon, logo, lựa chọn hình nền cho phần đầu trang, thực hiện các bài viết cho từng nội dung, lựa chọn hình ảnh minh họa,...

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH