Một trang web nên giúp đúng đối tượng độc giả
Báo cáo vận tải trường học có thể chứa phương pháp chi tiết và bảng số liệu. Trang web của nó có thể cung cấp tóm tắt ngắn gọn cho bạn bè cùng lớp. Trang web này cần giúp họ tìm thấy kết quả chính, xem xét phương pháp và truy cập báo cáo đầy đủ đã được phê duyệt.
Những ghi chú riêng biệt này bổ sung công việc GAC011 mang tính thực tiễn. Hãy giữ tài liệu gốc bên cạnh các ghi chú này. Tuân thủ yêu cầu trung tâm hiện tại về các công cụ cần thiết, độ sâu và bằng chứng nộp bài.
Yêu cầu thực hành gốc. Xây dựng một trang dễ đọc dành cho bạn bè cùng lớp sử dụng số liệu vận tải giả định. Thêm thanh điều hướng, bảng và bộ lọc danh mục. Lên kế hoạch cách trang này hỗ trợ báo cáo và bài thuyết trình ngắn. Không thu thập phản hồi thật. Xem trước cục bộ chỉ mang tính chất thực hành; đây không phải là xuất bản công khai.
Vẽ khung wireframe với tiêu đề, phần giới thiệu, liên kết mục, kết quả, phương pháp và chân trang. gán mỗi khu vực một mục đích rõ ràng. Người truy cập không nên phải đoán xem nút bấm sẽ thay đổi trang hay mở tài liệu khác. Sử dụng văn bản có ý nghĩa như “Phương pháp và giới hạn”, thay vì “Nhấp vào đây”.
Xây dựng một trang HTML hoàn chỉnh
Mã ký tự chỉ cho trình duyệt biết cách đọc văn bản trong file. UTF-8 hỗ trợ nhiều hệ thống chữ viết. Thiết lập viewport giúp trình duyệt di động sử dụng chiều rộng thiết bị. Tiêu đề mô tả giúp người dùng nhận diện trang trong tab.
Lưu ví dụ hoàn chỉnh dưới đây thành transport.html. Mở file đó trong trình duyệt. Nó hoạt động mà không cần thư viện, tài khoản hoặc yêu cầu mạng. Khối style tích hợp giữ bài tập đầu tiên này trong một file duy nhất. Một dự án sau có thể di chuyển các styles này sang một file CSS riêng và liên kết từ thẻ head.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>School transport: practice report</title>
<style>
:root { --page: #ffffff; --text: #172033; --line: #637083; --link: #164db2; }
body.dark { --page: #080d17; --text: #e9eef7; --line: #8392a8; --link: #a8d2ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font: 1.1rem/1.6 sans-serif; }
header, main, footer { max-width: 48rem; margin: auto; padding: 1rem; }
a { color: var(--link); }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
section { margin-block: 2rem; padding-block: 1rem; border-top: 1px solid var(--line); }
button, select { font: inherit; padding: .4rem; background: var(--page); color: var(--text); border: 1px solid var(--line); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; margin-block: .5rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
[hidden] { display: none !important; }
</style>
</head>
<body>
<header>
<h1>School transport</h1>
<p>An original practice example. All counts are invented.</p>
<nav aria-label="Report sections">
<a href="#findings">Findings</a>
<a href="#method">Method and limits</a>
</nav>
<div id="controls" hidden>
<button id="theme" type="button">Use dark theme</button>
<label for="mode">Show transport category</label>
<select id="mode">
<option value="all">All categories</option>
<option value="walk">Walking</option>
<option value="bus">Bus</option>
<option value="cycle">Cycling</option>
</select>
</div>
</header>
<main>
<section id="findings" aria-labelledby="findings-title">
<h2 id="findings-title">Findings</h2>
<p>In this invented group of 36 responses, bus travel has the largest count.</p>
<table>
<caption>Practice counts, not research findings</caption>
<thead><tr><th scope="col">Main mode</th><th scope="col">Responses</th></tr></thead>
<tbody>
<tr data-mode="walk"><th scope="row">Walking</th><td>12</td></tr>
<tr data-mode="bus"><th scope="row">Bus</th><td>18</td></tr>
<tr data-mode="cycle"><th scope="row">Cycling</th><td>6</td></tr>
</tbody>
</table>
<p id="status" role="status">3 transport categories shown.</p>
</section>
<section id="method" aria-labelledby="method-title">
<h2 id="method-title">Method and limits</h2>
<p>Each invented response has one main mode. The counts sum to 36.</p>
<p>The table does not explain choices, travel distance or the whole school's habits.</p>
<p>This page is a short companion to a report and oral presentation. An actual project should link its approved report and sources here.</p>
</section>
</main>
<footer><p>GAC011 practice: no responses are collected or sent.</p></footer>
<script>
const controls = document.querySelector("#controls");
const mode = document.querySelector("#mode");
const rows = [...document.querySelectorAll("tbody tr")];
const status = document.querySelector("#status");
const theme = document.querySelector("#theme");
mode.addEventListener("change", () => {
let shown = 0;
rows.forEach(row => {
row.hidden = mode.value !== "all" && row.dataset.mode !== mode.value;
if (!row.hidden) shown += 1;
});
status.textContent = `${shown} transport ${shown === 1 ? "category" : "categories"} shown.`;
});
theme.addEventListener("click", () => {
const dark = document.body.classList.toggle("dark");
theme.textContent = dark ? "Use light theme" : "Use dark theme";
});
controls.hidden = false;
</script>
</body>
</html>
HTML cung cấp nội dung dễ đọc trước khi JavaScript chạy. Liên kết href="#method" trỏ đến phần tử có id="method". ID phải duy nhất trên trang. Một ID sai sẽ làm hỏng liên kết đó ngay cả khi nhãn hiển thị đúng.
Tiêu đề của bảng giải thích ý nghĩa của các con số. Heading cột và hàng mô tả các ô. Các giá trị giả định là 12, 18 và 6, tạo ra 36 phản hồi. Xe buýt có số lượng lớn nhất. Những số liệu này không nói lên lý do tại sao mọi người chọn phương tiện.
Giải thích và tùy chỉnh CSS
Thuộc tính CSS tùy chỉnh lưu trữ một giá trị có thể tái sử dụng, chẳng hạn như màu sắc. Ví dụ sử dụng các màu chung cho trang, văn bản, viền và liên kết. Class dark thay đổi các giá trị này cùng lúc. Khu vực văn bản và điều khiển sử dụng cùng màu trang ở chế độ tối. Viền và khoảng cách phân tách các phần.
Quy tắc universal box-sizing khiến kích thước được chỉ định bao gồm cả padding và border. Khu vực đọc sẽ mở rộng theo cửa sổ nhưng dừng lại ở 48rem. Thanh điều hướng có thể xuống dòng khi không gian bị giới hạn. Chiều rộng linh hoạt thường giải quyết vấn đề bố trí đầu tiên mà không cần media query.
:focus-visible outline giúp người dùng bàn phím tìm thấy điều khiển đang hoạt động. Đừng loại bỏ nó chỉ vì nó đã hiển thị. Liên kết vẫn giữ gạch chân. Heading bảng và độ tương phản đủ giúp người đọc hiểu dữ liệu. Một hình ảnh thực tế cần văn bản phù hợp với mục đích: thông tin có ý nghĩa cần mô tả hữu ích; hình ảnh thuần túy trang trí có thể dùng alt text trống.
Tùy chỉnh. Thay đổi tiêu đề trang và phần giới thiệu cho một chủ đề học thuật được chấp thuận khác. Giữ thứ tự heading rõ ràng. Thử nghiệm cửa sổ hẹp và phông chữ lớn. Nếu sau này bạn thêm hai cột, hãy quyết định vị trí sắp xếp và thử nghiệm media query phù hợp. Đừng thêm chiều rộng cố định khiến điện thoại cuộn ngang.
Theo dõi tương tác JavaScript
Event listener chạy mã khi sự kiện xảy ra. Ví dụ lắng nghe sự thay đổi lựa chọn. mode.value trả về giá trị đã chọn. Thuộc tính data-mode của mỗi hàng trở thành row.dataset.mode trong JavaScript.
Một hàng bị ẩn khi một danh mục cụ thể được chọn và hàng đó không khớp. Chọn all sẽ hiển thị mọi hàng. Bộ đếm bắt đầu từ không cho mỗi lần thay đổi. Nó tăng lên một lần cho mỗi danh mục hiển thị, không phải một lần cho mỗi phản hồi. Do đó, chọn Xe buýt sẽ hiển thị một danh mục, không phải mười tám danh mục.
Trace. Chọn Xe buýt. Đi bộ và Đạp xe bị ẩn. Xe buýt vẫn hiển thị và trạng thái ghi “1 danh mục vận tải được hiển thị.” Chọn Tất cả các danh mục. Điều kiện ẩn là sai với mọi hàng, nên trạng thái trở lại ba danh mục.
Nút chủ đề thêm hoặc xóa class tối. Nhãn của nó mô tả hành động tiếp theo. Cập nhật textContent thay đổi văn bản; nó không xử lý văn bản đó như HTML. Khu vực trạng thái có thể thông báo số lượng đã thay đổi cho phần mềm hỗ trợ. Kiểm tra hành vi thực tế bằng các công cụ có sẵn tại trung tâm của bạn.
Tăng cường dần có nghĩa là nội dung cơ bản hữu ích hoạt động trước khi thêm tính năng bổ sung. Ví dụ này giữ các điều khiển tương tác ẩn cho đến khi người nghe (listeners) được gắn vào. Không có JavaScript, bảng đầy đủ, các phương thức và liên kết mục vẫn hoạt động. Bộ lọc thay đổi cách xem, không phải số lượng nền tảng hay giới hạn nghiên cứu.
Kiểm tra, xuất bản và duy trì trang web
Trước bất kỳ đợt phát hành nào được ủy quyền, hãy ghi lại kết quả kiểm tra thực tiễn. Mở từng liên kết, sử dụng bàn phím, phóng to chữ và thử các bố cục kích thước điện thoại. Kiểm tra cả hai giao diện và một trình duyệt hoặc thiết bị khác. Xác minh nội dung hoàn chỉnh vẫn hoạt động nếu tập tin tùy chọn không khả dụng. Đọc lỗi thay vì ẩn chúng đi.
Đường dẫn tương đối có nghĩa là vị trí tập tin được mô tả từ một vị trí khác. Đối với báo cáo được phê chuẩn được lưu bên cạnh trang của bạn dưới dạng report.pdf, một liên kết HTML có thể sử dụng href="report.pdf". Sử dụng nhãn có ý nghĩa và xác định PDF. Thêm báo cáo thực tế chỉ khi bạn có nó; đừng để lại liên kết mẫu bị hỏng. Kiểm tra tên tập tin và chữ hoa/chữ thường trên máy chủ.
Một trang web tĩnh có thể phục vụ HTML, CSS, tập tin mã và hình ảnh được lưu trữ. Trình duyệt vẫn có thể chạy JavaScript tương tác. Tên miền là địa chỉ mà mọi người sử dụng; dịch vụ lưu trữ cung cấp dịch vụ giao tập tin. Một tên miền đơn lẻ không tự động tải lên trang web của bạn.
Sử dụng quy trình xuất bản được phê chuẩn của trung tâm. Kiểm tra giấy phép truyền thông và xóa nháp riêng tư hoặc thông tin người tham gia. Tải lên các tập tin yêu cầu cùng nhau. Mở URL công khai thực tế và xác minh đường dẫn, hiển thị và điều khiển ở đó. Một bản xem trước thành công trên máy cá nhân không phải là chứng minh cho một đợt phát hành thành công.
Giữ các tập tin nguồn có thể chỉnh sửa và một bản sao đã biết hoạt động tốt. Khi chỉnh sửa, hãy kiểm tra sự thay đổi và các liên kết bị ảnh hưởng. Ghi lại phiên bản và ngày tháng. Sửa tập tin cục bộ không cập nhật bản lưu trữ cho đến khi quy trình xuất bản được phê准 giao nó.
Kết nối trang web với học thuật và quảng bá
Trang web nên bổ sung cho báo cáo và bài thuyết trình của bạn. Phần tổng quan đưa ra câu hỏi rõ ràng, một kết quả hữu ích và các giới hạn của nghiên cứu. Báo cáo đầy đủ chứa bằng chứng chi tiết và tài liệu tham khảo. Một slide trong bài thuyết trình có thể hiển thị địa chỉ trang hoặc mã QR được phê chuẩn. Kiểm tra xem liên kết có dẫn đến phiên bản dự định hay không. Đừng claiming rằng số liệu thực hành là những phát hiện thực tế.
Đối với việc quảng bá, hãy xác định đối tượng và mục tiêu trước. Ví dụ: giúp bạn bè cùng lớp tìm thấy báo cáo được phê chuẩn trong tuần dự án. Lên kế hoạch cho một bài đăng được phép với mô tả ngắn gọn chính xác, văn bản liên kết có ý nghĩa và chủ sở hữu được đặt tên. Tuân thủ quy tắc trung tâm và yêu cầu của nền tảng. Việc lên kế hoạch đăng bài không chứng minh rằng việc quảng bá thực sự đã diễn ra.
Lượt hiển thị đếm các lần hiển thị theo định nghĩa của nền tảng. Phạm tiếp cận thường đề cập đến các tài khoản riêng biệt theo định nghĩa của nó. Neither không tự động là số người đọc báo cáo. Tỷ lệ nhấp chuột qua cần tử số và mẫu số được nêu rõ.
Ví dụ giả định. Bài đăng A nhận được 400 lượt hiển thị và 20 lần nhấp liên kết. Bài đăng B nhận được 250 lượt hiển thị và 25 lần nhấp liên kết. Sử dụng số lần nhấp liên kết chia cho số lượt hiển thị, A có $20/400=5\%$ và B có $25/250=10\%$. B có nhiều lần nhấp liên kết hơn dù ít lượt hiển thị hơn.
Những con số này không chứng minh rằng văn phong của B gây ra sự khác biệt. Thời điểm, đối tượng và các lần nhấp lặp lại có thể khác nhau. Các lần nhấp liên kết cũng không chứng minh rằng báo cáo đã tải lên hoặc được đọc. Hãy chọn một thay đổi, ghi lại ngữ cảnh của nó và so sánh một chỉ số phù hợp với mục tiêu. Giữ các theo dõi cá nhân không cần thiết ra khỏi nhiệm vụ.
Thực hành và lời giải thích
Câu hỏi. 1. Liên kết Phương pháp dẫn đến phần tử nào? 2. Bộ lọc nên hiển thị gì cho Đạp xe? 3. Lọc có thay đổi tổng ban đầu là 36 không? 4. Những gì vẫn có thể sử dụng được mà không có JavaScript? 5. Tại sao việc mua tên miền là không đủ để phát hành? 6. Bài đăng C có 600 lượt hiển thị và 24 lần nhấp liên kết. Tìm tỷ lệ của nó. 7. Tỷ lệ cao hơn của B có chứng minh văn phong của nó tốt hơn không? 8. Nêu bằng chứng về một nhiệm vụ trang web đã hoàn tất.
Giải thích câu trả lời. 1. Phần tử có ID là method; fragment và ID phải khớp. 2. Chỉ hàng Đạp xe, với sáu phản hồi và một danh mục được hiển thị. 3. Không; nó thay đổi các hàng có thể nhìn thấy, không phải bộ dữ liệu gốc. 4. Văn bản, bảng đầy đủ, phương pháp và liên kết mục; các điều khiển tùy chọn vẫn bị ẩn. 5. Tập tin vẫn cần dịch vụ lưu trữ và giao tiếp được phê chuẩn, sau đó kiểm tra tại URL thực tế. 6. $24/600=4\%$. 7. Không; các khác biệt khác và giới hạn đo lường vẫn còn. 8. Hiển thị kế hoạch, nguồn, trang làm việc, kiểm tra và bằng chứng xuất bản, học thuật và quảng bá cần thiết.
