Summary

本次会议（FIT5032 第3讲：Front-end Design）明确了学期任务与技术路线：项目主题为“IT for Social Good”，面向非营利组织，核心目标是提升公众健康与教育认知；A0 eFolio用于练习与反馈，每两周提交，学期共24项建议完*≥50%；A1分两版迭代（V1 第5周末、V2 第7周末），A2为第12周线上测验（周一10:00–12:00），A3高阶应用第11周末截止、第12周演示面谈。技术栈以Vue 3为前端基座（5–6周起引入Firebase后端），并强调响应式设计（推荐 Bootstrap）、表单校验与动态数据。A1.1 设计报告包含描述、人物画像、站点图、线框/模型；提醒私有 Git 仓库、学术诚信、禁止接入支付与显著免责声明。课堂同时回顾了可访问性（WAI-ARIA / WCAG 2.2）、CSS 基础与响应式网格等内容。

1) 主题与定位

• 年度主题：IT for Social Good；与非营利合作，重在提升认知/教育，目标群体可自定（多元人群与场景）。
• 内容准确性只需达到基础研究水平，但必须致谢来源；评估以是否完成业务需求为准。

2) 评估结构与时间线

• A0 eFolio：工作室活动产出；不计入总评，用于反馈与技能提升；每两周提交，建议完成24项中的≥12项。
• A1 基础/进阶版本：V1覆盖前四项能力，第5周末提交；V2在此基础上扩展，第7周末提交。
• A2 测验：第12周周一10:00–12:00，e-Assessment 平台。
• A3 高阶应用：第11周末截止；第12周进行演示面谈。

3) A1.1 设计报告交付

• 四件套：Descriptions、Personas、Sitemaps、Mockups。
• 站点图：树形层级清晰，并为每个主版块写出简要说明（用途/目标）。
• 线框/模型：低保真；总计2–3页，覆盖2个业务需求；可选展示移动端，但以Web 版为主（响应式延展）。
• 质量加分：在线框/模型中体现表单校验与错误提示。

4) 技术与实现要求

• 框架：必须使用 Vue.js 3；如用其他响应式框架需自证合理。后端自第5–6周起引入 Firebase。
• V1 能力点：响应式布局（推荐 Bootstrap）、校验、动态数据/绑定（可复用上周 JSON 练习）。
• 响应式原则：同一 Web 版本适配移动端（非两套站点）。

5) Vue.js 回顾要点

• 组件结构（Template/Script/Style）、Composition API（<script setup>）、defineProps/defineEmits、事件/绑定简写（@/:）。

6) 前端设计与可访问性

• 设计起步：情绪板、灵感收集、页头/主体/页脚框架；可选组件式或工具类框架思路。
• WAI-ARIA 属性与 WCAG 2.2 标准作为无障碍基线。

7) CSS 与响应式

• CSS 基础：选择器、声明、盒模型、伪类/伪元素、优先级与 !important。
• 响应式：Mobile-first；Grid 适结构、Flexbox 适流式；Bootstrap 栅格（容器/行/列，6 个断点）。

8) 合规与提交要求（强提醒）

• Git 仓库必须私有，个人作业；严格学术诚信，任何非自有内容/开源资产需致谢；禁止用 LLM 生成整份作业。
• 免责声明必加：仅供 FIT5032 评估使用，非生产网站；不得接入支付网关。