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先。还有一些页面的构架和工具的使用和整理。比较多。整理起来好有点混乱了。
