前端部分

html

1、Html声明以及作用-----浏览器的容错------跨域的set header-----xhtml与html-----html5以人为本

2、Meta标签-----viewport------移动浏览器的layout

3、Html结构的语义化------css裸奔------table布局时代

4、DOM树----渲染树----重绘----重排

5、Html SEO优化----动态页面静态化

6、Gzip------资源压缩--------(CDN静态资源部署)-----云存储---v2ex-----

7、浏览器http连接数限制-------多域名资源服务器------加速页面加载

8、预加载-----------懒加载

9、浏览器的兼容性以及工作原理-----pdf-----

http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

css

1、禅意花园 css zen garden，------《CSS禅意花园》《超越CSS:WEB设计艺术精髓》---------IE6的贡献

2、Css基础与标准，css2.1------css3----------行内元素-------块级元素-----display---垂直居中-----position文档流

3、盒子模型BOX model-------灵活的盒子模型(Flexible Box Module）

4、媒体查询css media queries

5、Css 单位----相对单位 px----em----vh------vw 绝对单位mm等

6、浮动溢出

7、伪类伪元素----------css函数counter()------无dom节点

8、css优先级

9、less ，SAAS

10、css3的一些效果，例如圆角，阴影等，最重要的还有动画CSS3 Transition
CSS3 Animation。CSS3 Transform 用来做形状，空间等变化
Perspective 激活父元素的3D空间 ,IE浏览器目前不支持。
Animation和transition一样都可以定义开始和结束状态，但是animation还可以指定更确定的中间状态

javaScript

1、ECMAScript262，ECMAScript5（严格模式，json方法，Object.create），ECMAScript6-----nodejs部分实现，DOM，BOM

2、构造函数------new---对象----实例属性+实例方法
原型链-- prototype（原型对象）--constructor---指向继承---共享原型属性+原型方法+数据共享
构造函数的“prototype”属性值是一个原型对象，它用来实现继承和共享属性。

3、作用域----------函数作用域-----------作用域链---------函数作用域的嵌套关系是在定义时决定的，而不是在调用时决定的。

4、javascript 中定义和声明的区别：
定义：指定初始值，为变量分配存储空间,如 var a = 10;可以说定义了一个变量a
声明：向程序表明变量的标示符,如 var a;可以说声明了一个变量a

JavaScript执行，首先预编译，创建一个当前执行环境下的活动对象，并将那些用var申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。
在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）。

函数也是一个变量

5、javaScript中的this，闭包，setTimeout中的this指向了windows。apply，call方法。

6、Javascript单线程----回调----webwork-----

7、同源策略

8、http://javascript.ruanyifeng.com 可以当科普看

四、javaScript库与js模板引擎

1、jquery-----ready与load-------选择器与反向设置------选择的全是集合------Deferred对象-------promiseA+规范------绑定与事件委托。

2、Highcharts----amcharts--- D3----svg
Chartjs------canvas
D3除了普通的图表外，还有弦图、树图、地图等等，但是比较繁琐，需要做数据计算和处理。

3、iScroll4以及5，css3D变换处理滚动=====为什么要滚动

4、主要有mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars，Underscore等模板引擎。-----------单向绑定---------
模板引擎的基本机理就是替换（转换），将指定的标签转换为需要的业务数据；
首先利用正则等方法去解析分割字符串或者匹配标签，js语言部分则会将其转化为js执行代码，然后利用+=或数组的push方法将这些字符串拼接成最后解析完成的视图字符串，并返回。
好处是不再进行频繁地dom操作，并且实现html与逻辑的分离，尤其是局部刷新的时候。

5、webapp框架以及要解决的问题------zepto-----jquerymobile等等

6、CoffeeScript

7、Bootstrap栅格系统与less

五、javaScript模块化

1、AMD规范---commonjs---https://github.com/seajs/seajs/issues/588

2、模块加载------Requirejs------Seajs---文件加载---labjs

六、前端MVC框架

1、angulrajs------backbone-----Ember------spine-----CanJS----MVC-----MVVM----model驱动

2、解决的问题----javaScript模块化组织----作用域可视化------前端路由------双向绑定模板引擎-----前端渲染或者后端渲染------restful API前后端分离---前端优先数mock-------controller去dom操作----公共服务数据池管理------结合设计

七、nodejs与mongodb

1、全栈工程师---------前后端分离------无后端开发模式noBackEnd------facebook
http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
http://www.infoq.com/cn/news/2013/06/wangtao-on-nobackend
2、npm包管理--------插件管理

3、Buffer(二进制)--chunk（buffer对象）---Stream（流）-----pipe(管道)------文件系统---

4、Websocket------socket.io-------

5、Mongoose-----Mongodb------express

八、前端工作流

1、gulp构建

2、Bower依赖管理

3、Karma E2E和unit测试 jasmine等

4、Phantomjs浏览器接口

设计

设计是什么

1、设计是解决方案，不是形式与内容。--------广义设计---------广义界面-------方案的承载--------了解到手的原型界面

2、设计是再创造，--------现有问题分析------竞品分析-----其他相近场景分析-------思考--------

设计的目标

首先完成战略目标（商业价值）-----------界面+交互---主观要求（用户价值）------业务逻辑---业务要求------扩展要求

设计的流程

----交互-----

1、获取需求-----需求书-----------直接甲方-------直接客户------技术部为客户
分清需求，不是为解决问题而想出来的所需，直接了解问题

2、竞品分析--------得到解决方法----------分解模块---------划分利弊-----结论（必须要有）

3、模块组合-------业务逻辑（符合）------寻求其他价值（商业）

4、打散再重构----------重新审视需求---------需求再次提炼其他价值--------加入闪光点

5、平台特点-------平台规范---------各种情况完善业务逻辑流程

---------UI-----------

1、用户调查-------用户类型特征-------竞品特征（颜色，风格）---------甲方主观需求-------界面标准+项目规范

2、信息整理-------------概念设计（整体）-----关键场景设计用例-----（局部）-----整体局部互相转化

3、完善场景用例-------完善关键场景设计---------评审--------对比竞品------商业价值+用户体验--------------创新--------

4、详细设计-----------技术可行性

http://www.zhihu.com/question/20952073

设计要素

1、设计原则，有着自己的设计原则，才能不同。-----------------同质化（失败）----------

少即多-------------简洁干净-------------唯一中心点----------------------

2、留白-------轻松------心理舒适度-------高逼格（橱窗）----------亲密性------信息的模块化区域化----------获取感知-----

3、对齐-------信息结构-------视觉联系统一调理-----------

4、色彩（调色工具）---------三色（主辅基）------------多彩-------------实际情况

5、字体-----------webfont-------

6、《写给大家看的设计书》

7、沟通--------转变为owner

设计规范与趋势

IOS6拟物化--------独领风骚----------智能机初期-------------低学习成本

win8 Metro风格----------ios7扁平化------------AndroidL Material--------

http://design.1sters.com/

扁平化---------简约化---------动画核心----有意义----数据可视化-----------数据来源与去向------有排序的数据（列表）

规范的意义在于适应设备和os，保证产品适合大众使用，开发可以选用合适的控件、

遵循规范--------创新-----------

自己整理的一些前端和设计的东东，不太让人注意的

前端部分

html

css

javaScript

四、javaScript库与js模板引擎

五、javaScript模块化

六、前端MVC框架

七、nodejs与mongodb

八、前端工作流

设计

设计是什么

设计的目标

设计的流程

设计要素

设计规范与趋势