journalism-toolbox
📰 新闻与数据素养互动教学平台
50 个纯前端互动教学工具 · 浏览器打开即用 · 数据不离开本地 · 100+ 学术引用
1. 项目背景
在 AI 深度嵌入新闻生产流程的今天，新闻传播专业学生面临一个悖论：他们需要理解 AI 的能力边界，但传统课堂缺乏动手实践的环境。本项目旨在填补这一空白——通过 50 个可交互的前端工具，让学生在”做中学”（Learning by Doing）的过程中掌握：
- AI 工具的批判性使用（P01-P10）：理解 LLM 的幻觉、检测 AIGC、对比模型差异
- 数据新闻的完整工作流（P11-P20）：数据清洗 → 本福特检验 → 可视化叙事
- 开源情报（OSINT）调查技术（P21-P30）：EXIF 分析 → 阴影定位 → 交叉核验
- 批判性思维与伦理训练（P29-P39）：逻辑谬误 → 信息茧房 → 沉默螺旋
- 数字新闻出版技术（P40-P50）：Newsletter → 播客 → RSS → 作品集
教学理念
本项目的设计遵循 建构主义学习理论（Constructivism）和 体验式学习循环（Kolb, 1984）：
具体体验 → 反思观察 → 抽象概念化 → 主动实验
(工具操作) (反思问题) (背景知识) (任务链)
每个工具配备四层教学支架（Scaffolding）：
- 🎯 学习目标 — 明确的能力预期
- 📖 背景知识 — 原理与理论解释
- 📚 学术参考 — 可溯源的文献引用
- 🤔 反思问题 — 促进深层理解的开放思考
2. 快速开始
在线使用（推荐）
直接访问学习中枢：🎓 学习中枢
或从工具目录中选择任意工具开始。
本地部署
# 克隆任意工具仓库
git clone https://github.com/Yuuqq/P12-benford-checker.git
cd P12-benford-checker
# 用任意 HTTP 服务器启动（以下任选其一）
python -m http.server 8080
npx serve .
所有工具均为纯静态页面（HTML + CSS + JS），无需 Node.js 或后端服务。
3. 工具目录
🤖 AI 与自然语言处理
| # | 工具 | 核心技术 | 学术根基 |
|---|---|---|---|
| P01 | 多模型对比台 | LLM API 横向对比 | Zhao et al. (2023) LLM Survey |
| P02 | 离线情感分析 | Transformers.js 浏览器推理 | Liu (2012) Sentiment Analysis |
| P03 | 语音转文字 | Web Speech API | Radford et al. (2023) Whisper |
| P04 | 术语粉碎机 | 术语词典 + 替换引擎 | Kimble (2006) Plain Language |
| P05 | 可读性检测 | Flesch Reading Ease | Flesch (1948) Readability |
| P06 | 提示词构建 | Prompt Pattern Catalog | White et al. (2023) |
| P07 | 微信排版器 | MD → 内联 HTML 转换 | Newman et al. (2023) Digital News |
| P09 | SSML 编辑器 | W3C SSML 1.1 标准 | W3C (2010) |
| P10 | AIGC 探测器 | Perplexity + Burstiness | Gehrmann et al. (2019) GLTR |
📊 数据分析与可视化
| # | 工具 | 核心技术 | 学术根基 |
|---|---|---|---|
| P11 | CSV 清洗工坊 | Papa Parse + 异常检测 | Meyer (2002) Precision Journalism |
| P12 | Benford 检测 | 首位数字卡方检验 | Benford (1938); Nigrini (2012) |
| P13 | 桑基图看板 | D3 Sankey 布局 | Riehmann et al. (2005) |
| P14 | 新闻时间轴 | 时间序列可视化 | Brehmer et al. (2017) |
| P15 | 故事地图 | Leaflet 交互地图 | Segel & Heer (2010) |
| P16 | 预算树图 | Shneiderman Treemap | Shneiderman (1992) |
| P17 | 前后对比 | Canvas 滑块对比 | Bostock et al. (2011) D3 |
| P18 | 竞速柱图 | requestAnimationFrame | Cairo (2019) How Charts Lie |
| P19 | 调色板测试 | WCAG 2.1 对比度算法 | W3C (2018) WCAG 2.1 |
| P20 | 情感词云 | 词频 + 情感极性映射 | Hearst & Rosner (2008) |
| P40 | S 曲线模拟 | Logistic 函数 | Rogers (2003) Diffusion |
| P47 | 漏斗计算 | 多层转化率分析 | Croll & Yoskovitz (2013) |
🔍 事实核查与 OSINT
| # | 工具 | 核心技术 | 学术根基 |
|---|---|---|---|
| P21 | EXIF 检测 | EXIF 元数据提取 | Bellingcat (2021) Toolkit |
| P22 | 阴影验证 | SunCalc 天文算法 | Meeus (1998) Algorithms |
| P23 | Dork 构建 | Google 高级搜索语法 | Bazzell (2023) OSINT |
| P24 | 反向搜图 | 多引擎反向搜索 | Silverman (2014) Verification |
| P25 | 时光机 | Internet Archive API | Kahle (2007) Universal Access |
| P26 | 水军雷达 | 网络拓扑 Bot 检测 | Varol et al. (2017) ICWSM |
| P28 | Deepfake 放大 | 像素级伪影检测 | Tolosana et al. (2020) |
| P30 | 交叉核验 | 多源三角验证 | Kovach & Rosenstiel (2014) |
| P50 | OSINT 书签 | 工具分类索引 | Higgins (2021) Bellingcat |
🧠 批判性思维训练
| # | 工具 | 核心技术 | 学术根基 |
|---|---|---|---|
| P08 | 幻觉错题本 | 本地题库 + 错题记忆 | Ji et al. (2023) Hallucination |
| P29 | 谬误连连看 | 自适应难度算法 | Hamblin (1970) Fallacies |
| P33 | 主编审稿 | Swipe UI 决策 | Toff et al. (2021) |
| P35 | 信息茧房 | 多样性指数衰减 | Sunstein (2001); Pariser (2011) |
| P37 | 沉默螺旋 | 250 Agent ABM | Noelle-Neumann (1974) |
| P39 | 打字防御 | 游戏化学习 | Roozenbeek & van der Linden (2019) |
| P48 | 闪卡训练 | 间隔重复 SRS | Ebbinghaus (1885); Kang (2016) |
🎨 多媒体与出版
| # | 工具 | 核心技术 | 学术根基 |
|---|---|---|---|
| P27 | 隐私高亮 | NLP 条款分类 | Nissenbaum (2010) Privacy |
| P31 | 伦理分叉 | 分支叙事引擎 | Ward (2011) Ethics |
| P32 | 滚动叙事 | Intersection Observer | Dowling & Vogan (2015) |
| P34 | 聊天报告 | 对话式 UI | Dale (2016) Chatbots |
| P36 | 视障模拟 | CSS Filter 模拟 | WHO (2019) Vision Report |
| P38 | VR 新闻 | WebXR 全景 | de la Peña et al. (2010) |
| P41 | Agent 门户 | AI Agent 可视化 | Wang et al. (2024) Agents |
| P42 | 作品集 | 响应式网格布局 | Molyneux (2015) |
| P43 | 播客页面 | Web Audio API | Berry (2016) Podcasting |
| P44 | 翻页杂志 | CSS 3D Transform | Tufte (2001) |
| P45 | 简报引擎 | Email HTML 模板 | Schmidt et al. (2023) |
| P46 | FOIA 生成 | 法律文书模板 | Cuillier & Davis (2019) |
| P49 | RSS 报纸 | RSS/Atom 解析 | Winer (2002) RSS 2.0 |
4. 技术架构
┌─────────────────────────────────────────────────┐
│ P00 学习中枢 (Dashboard) │
│ 任务链 · 模块进度 · 学习画像 · 数据导出 │
└────────────────────┬────────────────────────────┘
│ global-nav.js
┌────────────────────┼────────────────────────────┐
│ ┌─────────┐ ┌────┴────┐ ┌─────────────────┐ │
│ │教学面板 │ │全局导航 │ │ design-tokens │ │
│ │pedagogy │ │面包屑 │ │ dark-toggle │ │
│ │-data.js │ │前后链接 │ │ .css │ │
│ └─────────┘ │工具推荐 │ └─────────────────┘ │
│ └─────────┘ │
│ shared/ 共享组件层 │
└──────────────────────────────────────────────────┘
│
┌──────┬──────┬────┴───┬──────┬──────┐
│ P01 │ P02 │ ... │ P49 │ P50 │
│ │ │ │ │ │
│ HTML │ HTML │ HTML │ HTML │ HTML │
│ CSS │ CSS │ CSS │ CSS │ CSS │
│ JS │ JS │ JS │ JS │ JS │
└──────┴──────┴────────┴──────┴──────┘
50 个独立部署的工具仓库
设计原则
- 零依赖优先：核心功能使用 Vanilla JS，仅在必要时引入轻量库
- 隐私优先：所有数据处理在浏览器本地完成，不发送任何请求到外部服务器
- 渐进增强：基础功能不依赖 JavaScript 框架，确保可访问性
- 共享组件：通过
shared/仓库统一管理设计令牌、暗色模式、教学面板和全局导航
CSS 质量标准
经过 CSS 教授三轮审查（Round 20-22），全部 51 个项目达到以下基线：
| 特性 | 覆盖率 |
|---|---|
var() Design Tokens |
98% |
@media 响应式断点 |
100% |
transition 过渡动效 |
100% |
@keyframes 入场动画 |
100% |
box-shadow 层次感 |
100% |
:focus-visible 无障碍焦点 |
100% |
prefers-reduced-motion |
100% |
5. 引用本项目
如果本项目对你的教学或研究有帮助，欢迎引用：
@misc{journalism-toolbox-2026,
title = {新闻与数据素养互动教学平台：50个前端工具的设计与实践},
author = {Yuuqq},
year = {2026},
url = {https://yuuqq.github.io/P00-dashboard/},
note = {50 browser-based interactive tools for journalism and media literacy education}
}
6. 参考文献（精选）
- Benford, F. (1938). The Law of Anomalous Numbers. Proceedings of the APS, 78(4), 551-572.
- Cairo, A. (2019). How Charts Lie. W.W. Norton.
- Gehrmann, S. et al. (2019). GLTR: Statistical Detection and Visualization of Generated Text. ACL 2019.
- Higgins, E. (2021). We Are Bellingcat. Bloomsbury.
- Kolb, D.A. (1984). Experiential Learning. Prentice-Hall.
- Kovach, B. & Rosenstiel, T. (2014). The Elements of Journalism (3rd ed.).
- Noelle-Neumann, E. (1974). The Spiral of Silence. Journal of Communication, 24(2), 43-51.
- Rogers, E.M. (2003). Diffusion of Innovations (5th ed.). Free Press.
- Shneiderman, B. (1992). Tree Visualization with Tree-Maps. ACM TOG, 11(1), 92-99.
- Sunstein, C. (2001). Republic.com. Princeton UP.
- Tufte, E.R. (2001). The Visual Display of Quantitative Information (2nd ed.).
7. 许可证
MIT License. 详见 LICENSE。
用技术赋能新闻素养，用工具守护信息真实。