pengxiao
d4665a362e
- 新增 officefile/latex/ 目录，包含 main.tex、preamble.tex 及 14 个章节 + 10 个附录 tex 文件 - md→tex 转换流程：pandoc 转换 + _postprocess.py 后处理（去编号、修破折号、清标签） - 修复 5 个 md 源文件的标题层级（H1→H2 降级，统一层级结构） - 配置 VS Code LaTeX Workshop（xelatex + ctexbook 编译链） - 新增 VS Code workspace 和 .gitignore（排除 LaTeX 编译产物） Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
452 lines
15 KiB
TeX
452 lines
15 KiB
TeX
\chapter{附录4：网络、网站与在线可视化}
|
||
|
||
本附录介绍网络基础知识、网站搭建入门，以及在线数据可视化的工具与方法。
|
||
|
||
\subsection{网络基础知识}
|
||
|
||
\subsubsection{互联网与Web}
|
||
|
||
互联网（Internet）是由全球计算机互相连接而成的网络。Web（万维网）是运行在互联网上的信息系统，通过浏览器访问网页来获取信息。
|
||
|
||
\textbf{核心概念}：
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.1617}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.6553}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
概念
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
说明
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
URL & 统一资源定位符，即网页地址（如 https://example.com/page） \\
|
||
HTTP/HTTPS & 浏览器与服务器之间传输数据的协议，HTTPS 为加密版本 \\
|
||
HTML & 网页的骨架，定义页面结构和内容 \\
|
||
CSS & 网页的样式，控制颜色、字体、布局等外观 \\
|
||
JavaScript & 网页的行为，实现交互功能和动态效果 \\
|
||
API & 应用程序接口，程序之间交换数据的标准方式 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\subsubsection{前端与后端}
|
||
|
||
一个完整的Web应用由前端和后端两部分组成：
|
||
|
||
用户浏览器（前端） ←→ 服务器（后端） ←→ 数据库\\
|
||
HTML/CSS/JS Python/Node.js MySQL/PostgreSQL
|
||
|
||
\textbf{前端}：用户在浏览器中看到和操作的界面，使用 HTML、CSS、JavaScript 构建。
|
||
|
||
\textbf{后端}：运行在服务器上的程序，处理数据逻辑、存储和检索，可以用 Python（Flask/Django/FastAPI）、Node.js、Java 等实现。
|
||
|
||
\subsubsection{API与数据交互}\label{apiux4e0eux6570ux636eux4ea4ux4e92}
|
||
|
||
API（Application Programming Interface）是程序之间通信的接口。在AI应用中，调用大语言模型、获取在线数据等操作都通过API完成。
|
||
|
||
\textbf{RESTful API 基本概念}：
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1134}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1185}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2835}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
方法
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
用途
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
示例
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
GET & 获取数据 & 获取模型列表 \\
|
||
POST & 提交数据 & 发送文本让模型生成回复 \\
|
||
PUT & 更新数据 & 更新模型参数 \\
|
||
DELETE & 删除数据 & 删除一条记录 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\textbf{调用API的Python示例}：
|
||
|
||
\textbf{import} requests\\
|
||
\strut \\
|
||
\emph{\# 调用一个公开API获取数据}\\
|
||
response = requests.get("https://api.example.com/models")\\
|
||
data = response.json() \emph{\# 将返回的JSON解析为Python字典}\\
|
||
print(data)\\
|
||
\strut \\
|
||
\emph{\# POST请求示例}\\
|
||
payload = \{"prompt": "设计一个现代风格的客厅", "model": "stable-diffusion"\}\\
|
||
response = requests.post("https://api.example.com/generate", json=payload)
|
||
|
||
\subsubsection{JSON数据格式}\label{jsonux6570ux636eux683cux5f0f}
|
||
|
||
JSON（JavaScript Object Notation）是Web上最常用的数据交换格式，几乎所有API都使用JSON传递数据。
|
||
|
||
\{\\
|
||
"model": "ResNet",\\
|
||
"accuracy": 0.96,\\
|
||
"layers": {[}64, 128, 256, 512{]},\\
|
||
"metadata": \{\\
|
||
"author": "He et al.",\\
|
||
"year": 2015\\
|
||
\}\\
|
||
\}
|
||
|
||
Python中读写JSON：
|
||
|
||
\textbf{import} json\\
|
||
\strut \\
|
||
\emph{\# Python字典 → JSON字符串}\\
|
||
data = \{"name": "Transformer", "year": 2017\}\\
|
||
json\_str = json.dumps(data, indent=2)\\
|
||
\strut \\
|
||
\emph{\# JSON字符串 → Python字典}\\
|
||
parsed = json.loads(json\_str)
|
||
|
||
\subsection{网站搭建入门}
|
||
|
||
\subsubsection{静态网站与动态网站}
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.1187}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.3546}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2633}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2366}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
类型
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
说明
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
技术栈
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
适用场景
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
静态网站 & 页面内容固定，无需服务器处理 & HTML/CSS/JS & 作品集、项目文档 \\
|
||
动态网站 & 内容根据请求动态生成 & 前端 + 后端 + 数据库 & 在线工具、数据平台 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\subsubsection{静态网站快速搭建}
|
||
|
||
对于设计专业的学生，最实用的方式是使用静态网站生成器搭建项目展示或文档站点。
|
||
|
||
\textbf{MkDocs}：用Markdown编写内容，生成美观的文档网站。
|
||
|
||
\emph{\# 安装}\\
|
||
pip install mkdocs mkdocs-material\\
|
||
\strut \\
|
||
\emph{\# 创建项目}\\
|
||
mkdocs new my-site\\
|
||
cd my-site\\
|
||
\strut \\
|
||
\emph{\# 本地预览（浏览器访问 http://127.0.0.1:8000）}\\
|
||
mkdocs serve\\
|
||
\strut \\
|
||
\emph{\# 构建静态文件}\\
|
||
mkdocs build
|
||
|
||
\textbf{GitHub Pages}：将静态网站免费部署到互联网。
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\arabic{enumi}.}
|
||
\item
|
||
在GitHub上创建仓库
|
||
\item
|
||
将网站文件推送到仓库
|
||
\item
|
||
在仓库设置中启用 GitHub Pages
|
||
\item
|
||
即可通过 https://username.github.io/repo 访问
|
||
\end{enumerate}
|
||
|
||
\subsubsection{HTML/CSS/JavaScript 速览}\label{htmlcssjavascript-ux901fux89c8}
|
||
|
||
\paragraph{HTML：页面结构}\label{htmlux9875ux9762ux7ed3ux6784}
|
||
|
||
\textless!DOCTYPE html\textgreater{}\\
|
||
\textless{}\textbf{html}\textgreater{}\\
|
||
\textless{}\textbf{head}\textgreater{}\\
|
||
\textless{}\textbf{title}\textgreater 我的设计作品集\textless/\textbf{title}\textgreater{}\\
|
||
\textless/\textbf{head}\textgreater{}\\
|
||
\textless{}\textbf{body}\textgreater{}\\
|
||
\textless{}\textbf{h1}\textgreater 设计作品集\textless/\textbf{h1}\textgreater{}\\
|
||
\textless{}\textbf{p}\textgreater 欢迎来到我的作品展示页面\textless/\textbf{p}\textgreater{}\\
|
||
\textless{}\textbf{img} src="design.jpg" alt="设计作品"\textgreater{}\\
|
||
\textless{}\textbf{a} href="https://example.com"\textgreater 了解更多\textless/\textbf{a}\textgreater{}\\
|
||
\textless/\textbf{body}\textgreater{}\\
|
||
\textless/\textbf{html}\textgreater{}
|
||
|
||
\paragraph{CSS：页面样式}\label{cssux9875ux9762ux6837ux5f0f}
|
||
|
||
body \{\\
|
||
\textbf{font-family}: "Helvetica", sans-serif;\\
|
||
\textbf{max-width}: 800px;\\
|
||
\textbf{margin}: 0 auto;\\
|
||
\textbf{padding}: 20px;\\
|
||
\}\\
|
||
\strut \\
|
||
h1 \{\\
|
||
\textbf{color}: \#2c3e50;\\
|
||
\textbf{text-align}: center;\\
|
||
\}
|
||
|
||
\paragraph{JavaScript：页面交互}\label{javascriptux9875ux9762ux4ea4ux4e92}
|
||
|
||
\emph{// 点击按钮时显示消息}\\
|
||
document.getElementById("myButton").addEventListener("click", \textbf{function}() \{\\
|
||
alert("按钮被点击了！");\\
|
||
\});
|
||
|
||
\subsubsection{前端框架简介}
|
||
|
||
对于更复杂的Web应用，可以使用前端框架提升开发效率：
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1107}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3071}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3379}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
框架
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
特点
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
适用场景
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
Vue.js & 渐进式框架，学习曲线平缓 & 交互式数据展示 \\
|
||
React & 组件化开发，生态最丰富 & 复杂单页应用 \\
|
||
Streamlit & Python编写Web应用 & AI模型展示、数据分析仪表板 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\textbf{Streamlit 示例}（用Python快速构建AI展示页面）：
|
||
|
||
\textbf{import} streamlit \textbf{as} st
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\arabic{enumi}.}
|
||
\item
|
||
title("图像分类演示")
|
||
\end{enumerate}
|
||
|
||
st.write("上传一张图片，AI将识别其中的内容")
|
||
|
||
\begin{verbatim}
|
||
\end{verbatim}
|
||
|
||
uploaded\_file = st.file\_uploader("选择图片", type={[}"jpg", "png"{]})
|
||
|
||
\textbf{if} uploaded\_file:
|
||
|
||
st.image(uploaded\_file, caption="上传的图片")
|
||
|
||
\begin{verbatim}
|
||
st.write("分类结果：建筑（置信度 95%）")
|
||
\end{verbatim}
|
||
|
||
\emph{\# 安装并运行}\\
|
||
pip install streamlit\\
|
||
streamlit run app.py
|
||
|
||
\subsubsection{网站部署方式}
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3137}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2835}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1185}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
方式
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
特点
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
费用
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
GitHub Pages & 适合静态网站，免费 & 免费 \\
|
||
Vercel / Netlify & 支持前端框架自动部署 & 免费额度 \\
|
||
云服务器（阿里云/腾讯云） & 完全控制，适合动态网站 & 按需付费 \\
|
||
Hugging Face Spaces & 适合AI模型演示 & 免费额度 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\subsection{在线数据可视化}
|
||
|
||
\subsubsection{为什么需要数据可视化}
|
||
|
||
设计领域的AI研究和实践经常涉及数据展示：训练损失曲线、模型性能对比、空间数据分析结果等。数据可视化将抽象的数字转化为直观的图形，帮助理解和决策。
|
||
|
||
\subsubsection{Python可视化库}\label{pythonux53efux89c6ux5316ux5e93}
|
||
|
||
Matplotlib：基础绑图
|
||
|
||
\textbf{import} matplotlib.pyplot \textbf{as} plt\\
|
||
\strut \\
|
||
\emph{\# 折线图}\\
|
||
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{]}\\
|
||
\strut \\
|
||
plt.figure(figsize=(8, 5))\\
|
||
plt.plot(epochs, train\_loss, \textquotesingle b-o\textquotesingle, label=\textquotesingle Train Loss\textquotesingle)\\
|
||
plt.plot(epochs, val\_loss, \textquotesingle r-s\textquotesingle, label=\textquotesingle Val Loss\textquotesingle)\\
|
||
plt.xlabel(\textquotesingle Epoch\textquotesingle)\\
|
||
plt.ylabel(\textquotesingle Loss\textquotesingle)\\
|
||
plt.title(\textquotesingle Training vs Validation Loss\textquotesingle)\\
|
||
plt.legend()\\
|
||
plt.grid(True, alpha=0.3)\\
|
||
plt.savefig(\textquotesingle loss\_comparison.png\textquotesingle, dpi=150, bbox\_inches=\textquotesingle tight\textquotesingle)\\
|
||
plt.show()
|
||
|
||
\paragraph{Seaborn：统计可视化}\label{seabornux7edfux8ba1ux53efux89c6ux5316}
|
||
|
||
基于Matplotlib，提供更美观的统计图表。
|
||
|
||
\textbf{import} seaborn \textbf{as} sns\\
|
||
\strut \\
|
||
\emph{\# 热力图：相关性矩阵}\\
|
||
\textbf{import} numpy \textbf{as} np\\
|
||
data = np.random.randn(10, 10)\\
|
||
corr = np.corrcoef(data)\\
|
||
\strut \\
|
||
sns.heatmap(corr, annot=True, cmap=\textquotesingle coolwarm\textquotesingle)\\
|
||
plt.title(\textquotesingle Feature Correlation Heatmap\textquotesingle)\\
|
||
plt.savefig(\textquotesingle heatmap.png\textquotesingle, dpi=150)
|
||
|
||
\paragraph{Plotly：交互式可视化}\label{plotlyux4ea4ux4e92ux5f0fux53efux89c6ux5316}
|
||
|
||
支持鼠标悬停、缩放、导出等交互操作，适合Web展示。
|
||
|
||
\textbf{import} plotly.express \textbf{as} px\\
|
||
\strut \\
|
||
\emph{\# 交互式散点图}\\
|
||
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") \emph{\# 导出为网页}\\
|
||
fig.show()
|
||
|
||
\subsubsection{在线可视化工具}
|
||
|
||
无需编程，通过网页界面即可创建可视化：
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1646}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3405}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2036}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
工具
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
特点
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
网址
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
Observable & JavaScript驱动的交互式笔记本 & \href{https://observablehq.com/}{observablehq.com} \\
|
||
Flourish & 拖拽式数据可视化，模板丰富 & \href{https://flourish.studio/}{flourish.studio} \\
|
||
Datawrapper & 适合制作新闻级图表 & \href{https://www.datawrapper.de/}{datawrapper.de} \\
|
||
Tableau Public & 强大的商业智能可视化 & \href{https://public.tableau.com/}{public.tableau.com} \\
|
||
ECharts & 百度开源的交互式图表库 & \href{https://echarts.apache.org/}{echarts.apache.org} \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\subsubsection{地理空间可视化}
|
||
|
||
设计领域经常涉及地理和空间数据的可视化：
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.1113}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.3837}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 4\tabcolsep) * \real{0.2364}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
工具
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
特点
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
适用场景
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
Folium & Python地图可视化库 & 在地图上标注数据点 \\
|
||
Kepler.gl & Uber开源的大规模地理数据可视化 & 城市数据分析 \\
|
||
Mapbox & 自定义地图样式 & 设计精美的交互地图 \\
|
||
QGIS & 开源GIS桌面软件 & 空间分析与制图 \\
|
||
\end{longtable}
|
||
}
|
||
|
||
\textbf{Folium 示例}（在地图上标记位置）：
|
||
|
||
\textbf{import} folium\\
|
||
\strut \\
|
||
\emph{\# 创建地图（以某坐标为中心）}\\
|
||
m = folium.Map(location={[}39.9, 116.4{]}, zoom\_start=12)\\
|
||
\strut \\
|
||
\emph{\# 添加标记}\\
|
||
folium.Marker(\\
|
||
{[}39.9, 116.4{]},\\
|
||
popup="设计学院",\\
|
||
icon=folium.Icon(color="blue", icon="info-sign")\\
|
||
).add\_to(m)\\
|
||
\strut \\
|
||
\emph{\# 保存为网页}\\
|
||
m.save("map.html")
|
||
|
||
\subsubsection{可视化设计原则}
|
||
|
||
{\def\LTcaptype{none} % do not increment counter
|
||
\begin{longtable}[]{@{}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.2361}}
|
||
>{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.6363}}@{}}
|
||
\toprule\noalign{}
|
||
\begin{minipage}[b]{\linewidth}\raggedright
|
||
原则
|
||
\end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright
|
||
说明
|
||
\end{minipage} \\
|
||
\midrule\noalign{}
|
||
\endhead
|
||
\bottomrule\noalign{}
|
||
\endlastfoot
|
||
选择合适的图表类型 & 比较→柱状图，趋势→折线图，占比→饼图，关系→散点图 \\
|
||
保持简洁 & 每张图只传达一个核心信息，避免过度装饰 \\
|
||
使用合理的色彩 & 同类数据用同色系，对比数据用对比色，注意色盲友好 \\
|
||
标注清晰 & 标题、轴标签、图例、数据来源缺一不可 \\
|
||
交互增强 & 在线可视化支持筛选、缩放、悬停查看详情 \\
|
||
\end{longtable}
|
||
}
|
||
|