pengxiao
a90f7adfa1
将 Markdown 源文件移入 md/，LaTeX 工作目录保留在 latex/， Word 导出移入 word/；删除临时脚本、调试截图和空 stub。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
326 lines
9.2 KiB
Markdown
326 lines
9.2 KiB
Markdown
# 附录5：网络、网站与在线可视化
|
||
|
||
本附录介绍网络基础知识、网站搭建入门，以及在线数据可视化的工具与方法。
|
||
|
||
## 1 网络基础知识
|
||
|
||
### 1.1 互联网与Web
|
||
|
||
互联网（Internet）是由全球计算机互相连接而成的网络。Web（万维网）是运行在互联网上的信息系统，通过浏览器访问网页来获取信息。
|
||
|
||
**核心概念**：
|
||
|
||
| 概念 | 说明 |
|
||
|------|------|
|
||
| URL | 统一资源定位符，即网页地址（如 `https://example.com/page`） |
|
||
| HTTP/HTTPS | 浏览器与服务器之间传输数据的协议，HTTPS 为加密版本 |
|
||
| HTML | 网页的骨架，定义页面结构和内容 |
|
||
| CSS | 网页的样式，控制颜色、字体、布局等外观 |
|
||
| JavaScript | 网页的行为，实现交互功能和动态效果 |
|
||
| API | 应用程序接口，程序之间交换数据的标准方式 |
|
||
|
||
### 1.2 前端与后端
|
||
|
||
一个完整的Web应用由前端和后端两部分组成：
|
||
|
||
```
|
||
用户浏览器（前端） ←→ 服务器（后端） ←→ 数据库
|
||
HTML/CSS/JS Python/Node.js MySQL/PostgreSQL
|
||
```
|
||
|
||
**前端**：用户在浏览器中看到和操作的界面，使用 HTML、CSS、JavaScript 构建。
|
||
|
||
**后端**：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用 Python（Flask/Django/FastAPI）、Node.js、Java 等实现。
|
||
|
||
### 1.3 API与数据交互
|
||
|
||
API（Application Programming Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。
|
||
|
||
**RESTful API 基本概念**：
|
||
|
||
| 方法 | 用途 | 示例 |
|
||
|------|------|------|
|
||
| GET | 获取数据 | 获取模型列表 |
|
||
| POST | 提交数据 | 发送文本让模型生成回复 |
|
||
| PUT | 更新数据 | 更新模型参数 |
|
||
| DELETE | 删除数据 | 删除一条记录 |
|
||
|
||
**调用API的Python示例**：
|
||
|
||
```python
|
||
import requests
|
||
|
||
# 调用一个公开API获取数据
|
||
response = requests.get("https://api.example.com/models")
|
||
data = response.json() # 将返回的JSON解析为Python字典
|
||
print(data)
|
||
|
||
# POST请求示例
|
||
payload = {"prompt": "设计一个现代风格的客厅", "model": "stable-diffusion"}
|
||
response = requests.post("https://api.example.com/generate", json=payload)
|
||
```
|
||
|
||
### 1.4 JSON数据格式
|
||
|
||
JSON（JavaScript Object Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。
|
||
|
||
```json
|
||
{
|
||
"model": "ResNet",
|
||
"accuracy": 0.96,
|
||
"layers": [64, 128, 256, 512],
|
||
"metadata": {
|
||
"author": "He et al.",
|
||
"year": 2015
|
||
}
|
||
}
|
||
```
|
||
|
||
Python中读写JSON：
|
||
|
||
```python
|
||
import json
|
||
|
||
# Python字典 → JSON字符串
|
||
data = {"name": "Transformer", "year": 2017}
|
||
json_str = json.dumps(data, indent=2)
|
||
|
||
# JSON字符串 → Python字典
|
||
parsed = json.loads(json_str)
|
||
```
|
||
|
||
## 2 网站搭建入门
|
||
|
||
### 2.1 静态网站与动态网站
|
||
|
||
| 类型 | 说明 | 技术栈 | 适用场景 |
|
||
|------|------|--------|---------|
|
||
| 静态网站 | 页面内容固定，无需服务器处理 | HTML/CSS/JS | 作品集、项目文档 |
|
||
| 动态网站 | 内容根据请求动态生成 | 前端 + 后端 + 数据库 | 在线工具、数据平台 |
|
||
|
||
### 2.2 静态网站快速搭建
|
||
|
||
对于设计专业的学生，最实用的方式是使用静态网站生成器搭建项目展示或文档站点。
|
||
|
||
**MkDocs**：用Markdown编写内容，生成美观的文档网站。
|
||
|
||
```bash
|
||
# 安装
|
||
pip install mkdocs mkdocs-material
|
||
|
||
# 创建项目
|
||
mkdocs new my-site
|
||
cd my-site
|
||
|
||
# 本地预览（浏览器访问 http://127.0.0.1:8000）
|
||
mkdocs serve
|
||
|
||
# 构建静态文件
|
||
mkdocs build
|
||
```
|
||
|
||
**GitHub Pages**：将静态网站免费部署到互联网。
|
||
|
||
1. 在GitHub上创建仓库
|
||
2. 将网站文件推送到仓库
|
||
3. 在仓库设置中启用 GitHub Pages
|
||
4. 即可通过 `https://username.github.io/repo` 访问
|
||
|
||
### 2.3 HTML/CSS/JavaScript 速览
|
||
|
||
#### HTML：页面结构
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>我的设计作品集</title>
|
||
</head>
|
||
<body>
|
||
<h1>设计作品集</h1>
|
||
<p>欢迎来到我的作品展示页面</p>
|
||
<img src="design.jpg" alt="设计作品">
|
||
<a href="https://example.com">了解更多</a>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
#### CSS：页面样式
|
||
|
||
```css
|
||
body {
|
||
font-family: "Helvetica", sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
h1 {
|
||
color: #2c3e50;
|
||
text-align: center;
|
||
}
|
||
```
|
||
|
||
#### JavaScript：页面交互
|
||
|
||
```javascript
|
||
// 点击按钮时显示消息
|
||
document.getElementById("myButton").addEventListener("click", function() {
|
||
alert("按钮被点击了！");
|
||
});
|
||
```
|
||
|
||
### 2.4 前端框架简介
|
||
|
||
对于更复杂的Web应用，可以使用前端框架提升开发效率：
|
||
|
||
| 框架 | 特点 | 适用场景 |
|
||
|------|------|---------|
|
||
| Vue.js | 渐进式框架，学习曲线平缓 | 交互式数据展示 |
|
||
| React | 组件化开发，生态最丰富 | 复杂单页应用 |
|
||
| Streamlit | Python编写Web应用 | AI模型展示、数据分析仪表板 |
|
||
|
||
**Streamlit 示例**（用Python快速构建AI展示页面）：
|
||
|
||
```python
|
||
import streamlit as st
|
||
|
||
st.title("图像分类演示")
|
||
st.write("上传一张图片，AI将识别其中的内容")
|
||
|
||
uploaded_file = st.file_uploader("选择图片", type=["jpg", "png"])
|
||
if uploaded_file:
|
||
st.image(uploaded_file, caption="上传的图片")
|
||
st.write("分类结果：建筑（置信度 95%）")
|
||
```
|
||
|
||
```bash
|
||
# 安装并运行
|
||
pip install streamlit
|
||
streamlit run app.py
|
||
```
|
||
|
||
### 2.5 网站部署方式
|
||
|
||
| 方式 | 特点 | 费用 |
|
||
|------|------|------|
|
||
| GitHub Pages | 适合静态网站，免费 | 免费 |
|
||
| Vercel / Netlify | 支持前端框架自动部署 | 免费额度 |
|
||
| 云服务器（阿里云/腾讯云） | 完全控制，适合动态网站 | 按需付费 |
|
||
| Hugging Face Spaces | 适合AI模型演示 | 免费额度 |
|
||
|
||
## 3 在线数据可视化
|
||
|
||
### 3.1 为什么需要数据可视化
|
||
|
||
设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。
|
||
|
||
### 3.2 Python可视化库
|
||
|
||
#### Matplotlib：基础绑图
|
||
|
||
```python
|
||
import matplotlib.pyplot as plt
|
||
|
||
# 折线图
|
||
epochs = range(1, 11)
|
||
train_loss = [0.9, 0.6, 0.4, 0.25, 0.15, 0.1, 0.07, 0.05, 0.04, 0.03]
|
||
val_loss = [0.85, 0.65, 0.45, 0.35, 0.28, 0.25, 0.24, 0.23, 0.23, 0.24]
|
||
|
||
plt.figure(figsize=(8, 5))
|
||
plt.plot(epochs, train_loss, 'b-o', label='Train Loss')
|
||
plt.plot(epochs, val_loss, 'r-s', label='Val Loss')
|
||
plt.xlabel('Epoch')
|
||
plt.ylabel('Loss')
|
||
plt.title('Training vs Validation Loss')
|
||
plt.legend()
|
||
plt.grid(True, alpha=0.3)
|
||
plt.savefig('loss_comparison.png', dpi=150, bbox_inches='tight')
|
||
plt.show()
|
||
```
|
||
|
||
#### Seaborn：统计可视化
|
||
|
||
基于Matplotlib，提供更美观的统计图表。
|
||
|
||
```python
|
||
import seaborn as sns
|
||
|
||
# 热力图：相关性矩阵
|
||
import numpy as np
|
||
data = np.random.randn(10, 10)
|
||
corr = np.corrcoef(data)
|
||
|
||
sns.heatmap(corr, annot=True, cmap='coolwarm')
|
||
plt.title('Feature Correlation Heatmap')
|
||
plt.savefig('heatmap.png', dpi=150)
|
||
```
|
||
|
||
#### Plotly：交互式可视化
|
||
|
||
支持鼠标悬停、缩放、导出等交互操作，适合Web展示。
|
||
|
||
```python
|
||
import plotly.express as px
|
||
|
||
# 交互式散点图
|
||
df = px.data.iris()
|
||
fig = px.scatter(df, x="sepal_width", y="sepal_length",
|
||
color="species", size="petal_length",
|
||
title="Iris Dataset Scatter Plot")
|
||
fig.write_html("scatter.html") # 导出为网页
|
||
fig.show()
|
||
```
|
||
|
||
### 3.3 在线可视化工具
|
||
|
||
无需编程，通过网页界面即可创建可视化：
|
||
|
||
| 工具 | 特点 | 网址 |
|
||
|------|------|------|
|
||
| Observable | JavaScript驱动的交互式笔记本 | [observablehq.com](https://observablehq.com/) |
|
||
| Flourish | 拖拽式数据可视化，模板丰富 | [flourish.studio](https://flourish.studio/) |
|
||
| Datawrapper | 适合制作新闻级图表 | [datawrapper.de](https://www.datawrapper.de/) |
|
||
| Tableau Public | 强大的商业智能可视化 | [public.tableau.com](https://public.tableau.com/) |
|
||
| ECharts | 百度开源的交互式图表库 | [echarts.apache.org](https://echarts.apache.org/) |
|
||
|
||
### 3.4 地理空间可视化
|
||
|
||
设计领域经常涉及地理和空间数据的可视化：
|
||
|
||
| 工具 | 特点 | 适用场景 |
|
||
|------|------|---------|
|
||
| Folium | Python地图可视化库 | 在地图上标注数据点 |
|
||
| Kepler.gl | Uber开源的大规模地理数据可视化 | 城市数据分析 |
|
||
| Mapbox | 自定义地图样式 | 设计精美的交互地图 |
|
||
| QGIS | 开源GIS桌面软件 | 空间分析与制图 |
|
||
|
||
**Folium 示例**（在地图上标记位置）：
|
||
|
||
```python
|
||
import folium
|
||
|
||
# 创建地图（以某坐标为中心）
|
||
m = folium.Map(location=[39.9, 116.4], zoom_start=12)
|
||
|
||
# 添加标记
|
||
folium.Marker(
|
||
[39.9, 116.4],
|
||
popup="设计学院",
|
||
icon=folium.Icon(color="blue", icon="info-sign")
|
||
).add_to(m)
|
||
|
||
# 保存为网页
|
||
m.save("map.html")
|
||
```
|
||
|
||
### 3.5 可视化设计原则
|
||
|
||
| 原则 | 说明 |
|
||
|------|------|
|
||
| 选择合适的图表类型 | 比较→柱状图，趋势→折线图，占比→饼图，关系→散点图 |
|
||
| 保持简洁 | 每张图只传达一个核心信息，避免过度装饰 |
|
||
| 使用合理的色彩 | 同类数据用同色系，对比数据用对比色，注意色盲友好 |
|
||
| 标注清晰 | 标题、轴标签、图例、数据来源缺一不可 |
|
||
| 交互增强 | 在线可视化支持筛选、缩放、悬停查看详情 |
|