网页编程入门, 提纲

网页绘图的技术

• HTML/CSS 网页
• SVG 矢量图
• Canvas 画布
• WebGL 图形语言

技术实现

• masterial-ui http://material-ui.com/
• d3 https://github.com/mbostock/d3/wiki/Gallery
• paper.js http://paperjs.org/
• three.js http://threejs.org/

---

CSS(层叠样式表)

内容

• 元素的基本样式 http://getbootstrap.com/css/#buttons
• 流式布局
• 盒子模型 http://www.w3.org/TR/CSS2/box.html
• Flexbox 布局 https://bocoup.com/weblog/dive-into-flexbox/

开发工具

• Brackets http://brackets.io
• Chrome/Workspace
  http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

---

Script(脚本)

语言的基本内容

• 数据
• 变量
• 过程(函数)

代码的执行过程

• 语法树
• 图形化

http://chengyichao.info/learnable-programming/
https://www.khanacademy.org/computing/computer-programming

---

程序

程序的构造

• 数据抽象
• 过程抽象
• 模块抽象
• 语言抽象
• 层级抽象

架构图:

http://segmentfault.com/a/1190000002992542#articleHeader2