Giao diện
Buổi 2 — Đọc công thức của một website
Lesson 2 — Reading a website’s recipe · WebAI Builder
Guiding Question (Compelling)
Nhìn một website đẹp, làm sao em “đọc” ra công thức của nó để AI làm theo?
Looking at a beautiful website, how do I “read” its recipe for AI to follow?
1. Learning Outcomes (Backward Design — bước 1)
| ID | Outcome | Performance Task trong khung / Framework task |
|---|---|---|
C3.3 | Mô tả được các đặc điểm của một sản phẩm mẫu để AI có thể tham khảo. Describe the features of a sample product so AI can reference it. | Cho một website mẫu, học sinh mô tả được bố cục, màu sắc, các thành phần và cách tương tác. Given a sample website, the learner describes its layout, colours, components and interactions. |
Hỗ trợ / Supporting: C3.2
Performance Task của buổi / Lesson performance task: Mô tả bố cục, màu sắc, thành phần và tương tác của một website mẫu.
Describe the layout, colours, components and interactions of a sample website.
2. Evidence & Assessment (bước 2)
2 bước đánh giá tổng kết (assess) · 16 màn hình · mọi tương tác đều ghi evidence.
2 summative steps · 16 screens · every interaction leaves evidence.
| Bước / Step | LO | Loại / Type | Nội dung / Prompt |
|---|---|---|---|
s13 | C3.3 | Tự luận Text | Mở sutucon.com và mô tả bố cục của trang chủ. |
s14 | C3.3 | Tự luận Text | Mô tả màu sắc, các thành phần và cách tương tác của sutucon.com. |
3. Learning Plan — 120 phút (bước 3)
| Chặng / Phase | Phút | CRA | Hoạt động của mentor / Mentor activity | Màn hình / Screens |
|---|---|---|---|---|
| Gợi mở Wonder | 10 | C | Học sinh nói “làm giống trang này” với AI; thảo luận vì sao điều đó chưa đủ. A learner tells AI “make it like this page”; discuss why that is not enough. | 3 |
| Khám phá Explore | 35 | C | Tìm 2–3 website mẫu phù hợp ý tưởng (C3.2); xem qua 4 lăng kính. Find 2–3 samples matching the idea (C3.2); view them through 4 lenses. | 4 |
| Biểu diễn Represent | 25 | R | Vẽ wireframe: hộp = thành phần, mũi tên = tương tác. Draw a wireframe: boxes = components, arrows = interactions. | 2 |
| Khái quát Abstract | 20 | A | Rút ra thế nào là mô tả cụ thể. Derive what a concrete description looks like. | 3 |
| Thiết kế lại Redesign | 20 | A | Performance Task: mô tả website sutucon.com theo 4 lăng kính. Performance Task: describe sutucon.com through the 4 lenses. | 2 |
| Nhìn lại Reflect | 10 | A | Em sẽ dùng mẫu nào cho dự án và vì sao? Which sample will you use for your project, and why? | 2 |
4. IB
| Key concepts | Hình thức / Form · Giao tiếp / Communication |
| Global context | Biểu đạt cá nhân & văn hóa / Personal & cultural expression |
| ATL skills | Nghiên cứu / Research · Giao tiếp / Communication |
| Learner profile | Người hay hỏi / Inquirers · Người giao tiếp / Communicators |
5. Vật liệu / Materials
- Danh sách 5 website mẫu
A list of 5 sample websites - Giấy phác (wireframe)
Wireframe paper - Website mẫu chung cho cả lớp: sutucon.com
A shared sample for the class: sutucon.com
6. Màn hình học viên / Learner screens
Xem toàn bộ 16 màn hình / Show all 16 screens
| # | Chặng | Loại | Nội dung |
|---|---|---|---|
| 1 | Gợi mở | Thông tin | Em thích một trang portfolio và nói với AI: “Làm giống trang này.” AI trả về một thứ chẳng giống chút nào. |
| 2 | Gợi mở | Chọn đáp án | Vì sao AI không làm giống được? |
| 3 | Gợi mở | Biểu mẫu nhiều ô | Em thấy gì trên trang portfolio đó? Ghi hai điều cụ thể. |
| 4 | Khám phá | Thông tin | Tìm 2–3 website mẫu hợp với ý tưởng của em, rồi chọn một. |
| 5 | Khám phá | Liên kết/sản phẩm | Dán link website mẫu em chọn và nói vì sao nó hợp. |
| 6 | Khám phá | Thông tin | Nhìn mẫu qua bốn lăng kính: bố cục, màu sắc, thành phần, tương tác. |
| 7 | Khám phá | Chọn đáp án | “Nút đổi màu khi rê chuột vào” thuộc lăng kính nào? |
| 8 | Biểu diễn | Thông tin | Vẽ wireframe: mỗi hộp là một thành phần, mũi tên là một tương tác. |
| 9 | Biểu diễn | Chọn đáp án | Wireframe giúp gì cho việc nhờ AI? |
| 10 | Khái quát | Chọn đáp án | Mô tả nào giúp AI hiểu hơn? |
| 11 | Khái quát | Thông tin | Nói gọn: mô tả tốt có chi tiết em chỉ ra được trên màn hình: vị trí, số lượng, màu, cách phản ứng. |
| 12 | Khái quát | Điền chỗ trống | Điền vào chỗ trống để có một mô tả tốt. |
| 13 ★ | Thiết kế lại | Tự luận | Mở sutucon.com và mô tả bố cục của trang chủ. |
| 14 ★ | Thiết kế lại | Tự luận | Mô tả màu sắc, các thành phần và cách tương tác của sutucon.com. |
| 15 | Nhìn lại | Tự luận | Mẫu nào em sẽ dùng cho dự án của mình và vì sao? |
| 16 | Nhìn lại | Mức tự tin | Em tự tin mô tả một website mẫu cho AI đến mức nào? |
★ = bước đánh giá tổng kết / summative step