2014年学习目标计划大纲+资料整理+个人总结

快过年了,把学习大纲和资料列表,个人总结写在一起,到时候可以看哪些学了,哪些学得不够好...嗯,可以借鉴.不过分享的学习网站可能比较多,有收藏资料的强迫症... ^_^!

把好的经验记录下来,少走弯路.

目标:web移动开发
涉及得比较广,也有很多资料.但web移动是根据HTML5,CSS3 进行开发的.还是从基础开始学起.[学习列表不一定按照顺序]

可能有漏,这里列出常用和重点的,那些渣渣,略过!

1.HTML5

 1.新增元素标签、新增属性与及结构意义

 1.2 新增DOM API

 2.canvas [重要]

 3.存储数据

 4.上传

2.CSS3

推荐到这个网站学习：

http://www.w3cplus.com/

css3在线动画手册和代码生成器,对理解代码有很大的帮助!

http://ecd.tencent.com/css3/guide.html

一图看CSS3主要学习内容

2.0 自适应窗口 @Media [重要]

   实现自适应,响应式布局的重要属性

http://www.w3cplus.com/content/css3-media-queries
2.1 选择器

一图看重要选择器

红色快建议优先学习。

      1.基本选择器[css2以前的吧，没多少新内容]

 http://www.w3cplus.com/css3/basic-selectors

      2.属性选择器[注意这2个就好,也没太多心内容]

 1.Ｅ[attr="value"]

 2.E[attr*="value"]

http://www.w3cplus.com/css3/attribute-selectors

      3.伪类选择器[新东西比较多，几个比较常用的就好，其他过眼就好。]

   重点[nth选择器]

http://www.w3cplus.com/css3/pseudo-class-selector

     
2.2 文本处理
  2.2.1 字体@font-face

@font-face和其他字体替换方案

http://www.jsmix.com/blog/css/font.html

  2.2.2文字阴影

2.3 盒子阴影
2.3.1 渐变
2.4 背景图
2.5 边框、圆角
2.6 css3动画核心[重点] 移动端2D动画效果不够流畅，我们通过过伪3D来加速，但不可滥用！
2.6.1 transform[变形] 2D,3D[比较难理解，需要想象空间]

   分别为 移动,缩放,旋转,变形

2.6.2 transitions [执行过渡动画] 

    共同点: transitions 与 animations 都是用于产生动画效果的!

    transitions 只做简单的动画效果,从某一个值到另一个值,可以简单说是过滤,A->B ,前后变化得2个不同的属性值!

    而且该属性写在初始化的元素里面,当元素的定义动画的属性值发生变化,就产生过渡动画!

   CSS 中可以通过伪类实现:一般最常用的是 :hover ,但也可以通过JS 控制,添加class,当然这个class里面的属性是跟初始化不一样的,添加这个class之后也会产生过渡动画!

小文参考:http://www.jsmix.com/blog/css/approach-to-css3-animation.html

2.6.3 animations [定义动画]

  animations 动画比 transitions 更加复杂好用,实现复杂多一点的动画!

  动画效果可以:A -> B - >C - > A  可以实现多个属性的变化. 

 需要定义一个关键帧动画,跟flash 一样的,

触发动画的属性可以写在元素上[被动触发]或伪类上触发[主动触发]

参考以下一篇文章,方便你的理解

http://www.jsmix.com/blog/css/css3-keyframes-breathing-light.html

推荐:http://beiyuu.com/css3-animation/ 

3.jQuery

3.1 熟练运用jquery

 1.选择器

 2.筛选

不错的jQuery 学习：http://www.cnblogs.com/studynote/p/3472017.html

 3.ajax

3.2 插件编写

 jQuery 的插件有2个结构,

 1.一种是在jQuery.fn 原型上添加 方法名称

 2.另外一种是jQuery 的$ 上添加,为全局方法属性[jQuery 的工具类就是这种方式,如:$.trim() //去掉字符串前后空格 ]

3.3 编写技巧提升

3.4 读jQuery 源码

3.5 读常用jq插件功能代码

3.6 编写自己的DOM库

4.移动框架ui

最好的前端css框架的集合
http://usablica.github.io/front-end-frameworks/compare.html

1.bootstrap 

http://getbootstrap.com/

2.Semantic UI

http://semantic-ui.com/

5.其他MVC,MVVC js前端框架

异步模块定义[Require.JS] and 通用模块定义sea.js

Require.JS

http://www.requirejs.org/

SeaJS
http://seajs.org/docs/
https://github.com/seajs

yepnope.js [压缩：yepnope.1.5.4-min.js  3.67K] 最近用这个来异步加载js文件。也比较好用。
http://yepnopejs.com/
https://github.com/SlexAxton/yepnope.js

MVC前端框架合集:

http://todomvc.com/

http://sproutcore.com/

http://www.javascriptmvc.com/

文章系列

七天学会NodeJS
http://nqdeng.github.io/7-days-nodejs/#5.2

 专栏名：Vue.js 中文入门 【http://vuejs.org】
http://www.html-js.com/article/column/99

web前端开发分享-目录系列
http://www.cnblogs.com/jikey/p/3613082.html

深入理解JavaScript系列
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

设计模式总结
http://www.cnblogs.com/chenssy/p/3357683.html

深入理解JavaScripts设计模式系列：
http://bbs.html5cn.org/forum.php?mod=viewthread&tid=3335

CSS基础知识之精简代码
http://bbs.html5cn.org/thread-80239-1-1.html

你真的了解 console 吗
http://blog.segmentfault.com/classicemi/1190000000481884

另附[web设计指南]网站一枚(设计师):

http://hao.uisdc.com/ps/

谷歌工具栏模拟手机端设置
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

 -----------------------------资料--------------------------

 我百度网盘分享的资料：

书籍：http://pan.baidu.com/s/1l5ygm

 最近搞的这是什么鸟玩意。。。擦。。。各种坑爹

web app 的一点都不知道怎么开始，各种头晕。又要学各种前端mvc mvvm ，感觉用不上，还有js模板，也不知道什么情况用。

还是老老事实去学好jq和css3先。还有一些页面的构架和工具的使用和整理。比较多。整理起来好有点混乱了。