MIT Notes by Ron

中文

English

中文

English

Appearance

6.4500 Web设计：语言和用户接口 ​

https://designftw.mit.edu/

课程介绍 ​

先修课程 ​

6.1010 fundamentals of programming

课程描述 ​

你将学习用户界面设计核心原则：

  • 可学习性（learnability）
  • 效率（efficiency）
  • 安全性（safety）
  • 原型设计（prototyping）
  • 用户测试（user testing）

你会学习 Web 核心技术：

  • HTML
  • CSS
  • JavaScript

以及：

  • 它们各自的作用
  • 为什么设计差异很大

还会学习：

  • 前端框架：Vue.js（响应式编程）
  • 图形设计基础（设计与可用性密切相关）

参考资料 ​

作业 ​

Assignment 1

Assignment 2

Assignment 3

Assignment 4

Assignment 5

Assignment 6

Assignment 7

Assignment 8

Assignment 9

Assignment 10

Assignment 11

Assignment 12

Assignment 13

教程 ​

相关资源 ​

环境搭建 ​

启动一个本地服务器 ​

如果你双击一个本地的 .html 文件，默认浏览器会打开它并显示内容。但如果你查看地址栏。会看到 URL 以 file:// 开头，也就是使用的是 file URI scheme（文件协议）。这种 URI 协议本质上是不安全的，因为它没有明确的来源隔离，因此很多Web平台技术在file:// 是被禁用的。 在开发过程中你需要使用本地 Web 服务器。

有很多方法，这里说两个

  1. NPM 的 http-server， 默认同样使用 8000 端口，也可以用 -p 修改端口

    bash
    npm install -g http-server

  2. Vscode安装Live Server扩展，点击右下角的 “Go Live”，服务器会启动，并显示使用的端口。

实验 ​

Lec 1 介绍 & 总览 ​

主题：

  • 介绍
  • 可用性设计
  • Web技术

lec1.md

Lec 2 Web网页结构：HTML ​

主题：

  • HTML语义
  • 常见的HTML元素
  • DOM树
  • HTML的交互与用户输入
  • 响应式模板

lec2.md

Lec 3 易学性 ​

lec3.md

Lec 4 图形设计 ​

lec4.md

Lec 5 高效性 ​

lec5.md

Lec 6 CSS的基本概念 I ​

lec6.md

Lec 7 安全性 ​

lec7.md

Lec 8 CSS的基本概念 II ​

lec8.md

Lec 9 启发式评估 ​

lec9.md

Lec 10 布局 ​

lec10.md

Lec 11 原型和用户测试 ​

lec11.md

Lec 12 现代JS和DOM的介绍 ​

JavaScript for Python Programmers

lec12.md

Lec 13 统一Web设计 ​

lec13.md

Lec 14 事件 ​

lec14.md

Lec 15 设计范式 & 函数式JS ​

lec15.md

Lec 16 函数、类和this ​

lec16.md

Lec 17 字体 ​

lec17.md

Lec 18 异步编程 ​

lec18.md

Lec 19 色彩 ​

lec19.md

Lec 20 Web API ​

浏览器有UI让用于与文档交互，也有DOM API让你的代码与文档交互。

lec20.md

Lec 21 路由 & 数据可视化 ​

在引言部分，回答三个问题？

  • 为什么要将信息可视化？
  • 什么是可视化？
  • 为什么可视化有用？

后面正文部分，我们讲解可视化的形式，包括图表（charts）

lec21.md

Lec 22 动画 & 反馈 ​

本节主题关于

  • 何时以及为什么使用动画
  • 实现方式：如何实现？
  • 可访问性

lec22.md

Lec 23 Web标准 ​

本节关于几个问题的回答？

  • 今天的Web生态如何形成的？
  • Web 技术是如何被制定出来的？
  • 你又能够如何参与并做出贡献？

lec23.md

Lec 24 面向AI系统的设计 ​

lec24.md