├── README.md ├── SA指引.md ├── UI-level-up.md ├── web-new-comer.md └── 产品经理的基本知识.doc /README.md: -------------------------------------------------------------------------------- 1 | # 星辰新人培训仓库 2 | 3 | 为使工作室新人可以尽快了解工作室，有明确的学习目的和学习目标，特此总结各个方向的学习路线。也欢迎工作室成员向本仓库添加内容，让工作室越来越好。如需加入团队，请将姓名与邮箱填写在issue中交由管理员审核。（项目灵感源自[@SysLab-newcomer](https://github.com/Sys-Lab/SysLab-newcomer)） 4 | 5 | ## 工作室简介 6 | 7 | 星辰工作室建于1998 年，隶属于网络文化建设办公室，主要从事软件开发，网站建设与维护等信息化工作，曾先后开发和维护了以下项目：成电导航网，电子科技大学清水河畔官方论坛，学生信息管理系统，电子科大学生之家网站，电子科大就业网，勤工助学网，学工部网站，学工部办公平台，部分部门及学院官网等。“我们年轻，我们执著，我们奋斗，我们走向卓越！” 星辰工作室成员信心满怀的走向成功。 8 | 9 | ## 主要工作 10 | 11 | 1. 开发及维护学工部、部分学院、就业网等网站 12 | 2. 运营电子科技大学清水河畔官方论坛 13 | 3. 规划设计校园网络产品，技术推进校园网络文化建设 14 | 15 | ## 特色成绩 16 | 17 | 清水河畔官方论坛；名师博客群；成电导航网；学生之家系列网站；贷款系统；电子科技大学就业网；学工部网站；学工部办公平台；奖贷助勤网；学风督查系统；优班创建系统；学生学习与发展指导中心；国资处、审计处、纪检委等部门网站；通信学院等学院网站。 18 | 19 | ## 学习准备 20 | 21 | 掌握GitHub工作流。 22 | 23 | ## 准备启程 24 | 25 | - 学会翻墙、使用 Google 26 | - [WEB开发新人指南](./web-new-comer.md) 27 | - [提问的智慧](http://lilydjwg.vim-cn.com/articles/smart-questions.html) 28 | - [Git教程（廖雪峰）](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) 29 | - [基于git的源代码管理模型——git flow](http://www.ituring.com.cn/article/56870) 30 | - [Commit message 和 Change log 编写指南](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html) 31 | - 掌握 [markdown](https://guides.github.com/features/mastering-markdown/) 32 | - [List of Free Learning Resources](https://github.com/vhf/free-programming-books) 33 | - [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN) 34 | - 相关网站推荐 35 | * [新浪SAE](http://sae.sina.com.cn/) 36 | * [TaoCode](http://code.taobao.org/) 37 | * [stackoverflow](https://stackoverflow.com/) 38 | * [伯乐在线](http://blog.jobbole.com/) 39 | 40 | ## 产品设计方向 41 | 42 | 详见：产品经理的基本知识.doc 43 | 44 | ## 界面设计方向 45 | 46 | [UI养成计划](./UI-level-up.md) 47 | 48 | ## 前端开发方向 49 | 50 | - html/css/js基础，推荐[w3school在线教程](http://www.w3school.com.cn)和[MDN](https://developer.mozilla.org/zh-CN/) 51 | - [JavaScript秘密花园](https://github.com/StarStudio/stepByStep) 52 | - 代码规范：[AlloyTeam](http://alloyteam.github.io/CodeGuide/) 53 | - [前端工作面试问题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) 54 | - [前端资料收集](https://github.com/jsfront/front-end-collect) 55 | - 推荐订阅[奇舞周刊](http://old.75team.com/weekly/) 56 | - UESTC前端交流群：225843473 57 | 58 | ## 后端开发方向 59 | ### 学习资料： 60 | * html/css基础，推荐[w3school在线教程](http://www.w3school.com.cn) 61 | * php基础，推荐书目《细说PHP》lamp兄弟连著，看到高级开发之前就行 62 | * 博客园 63 | 64 | ### 需要了解的知识： 65 | * 了解html/css,以及熟悉javascript 66 | * “黄金搭档”mysql与php的结合 67 | * php常用模块，如：登陆，验证码，分页类 68 | * php框架,建议CI以及ThinkPHP、yii 69 | 70 | ### 安全开发： 71 | * 书籍推荐
72 | 基础：《黑客攻防技术宝典web实战篇》、《sql注入攻击与防御》
73 | 进阶（需要一定基础）：《白帽子讲web安全》、《web前端黑客技术揭秘》 74 | * 推荐网站：
75 | [乌云知识库](http://drops.wooyun.org)
76 | [Freebuf](http://www.freebuf.com)
77 | [91ri安全攻防指南](https://www.91ri.org/) 78 | 79 | ### 其他 80 | * [python教程](http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/) 81 | * [javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000) 82 | * [Linux私房菜](http://vbird.dic.ksu.edu.tw/) 83 | * [《Node.js 包教不包会》](https://github.com/alsotang/node-lessons) 84 | 85 | ## 移动开发方向 86 | 学习资料： 87 | - 《java jdk7学习笔记》看到多线程就行 88 | - 《android第一行代码》拿着看，仔细了解作者的意图，也可以看郭霖在csdn上的博客 89 | - developer.android.com 已墙，自备翻墙工具 90 | 要了解的知识： 91 | - 数据库原理，起码要搞清楚sql到底是什么，怎么写，关系型数据库系统的原理 92 | - 计算机网络的基本原理，传输层之上的，了解面向字节的套接字通信，http请求的格式，json，xml的解析 93 | - 操作系统的基础知识，linux系统是什么回事，android系统到底是怎么回事，是怎样的架构 94 | - 怎么看前后台接口文档，怎么写需求文档 95 | 96 | ## 系统运维方向 97 | 98 | [SA指引](./SA%E6%8C%87%E5%BC%95.md) 99 | 100 | - [linux常用命令的使用](http://vbird.dic.ksu.edu.tw/linux_basic/linux_basic.php) 101 | - vim编辑器 103 | - 账号与组的管理 105 | - 进程管理 106 | - [熟悉网络结构](http://vbird.dic.ksu.edu.tw/linux_server/0110network_basic.php) 107 | - [shell编程](http://man.lupaworld.com/content/develop/advance_bash_scriipt_progaming_guide.pdf) 108 | - [正则表达式](http://pan.baidu.com/wap/link?uk=2769149005&shareid=603381&third=0) 109 | -------------------------------------------------------------------------------- /SA指引.md: -------------------------------------------------------------------------------- 1 | # 星辰 2016 SA 养成指引 2 | > author:joker、starduster 3 | 4 | 5 | 6 | 了解 Unix,Linux 操作系统 和计算机网络基础 7 | - 8 | **目标：** 9 | 10 | 1. 我们为什么要使用 Unix/Linux 11 | 2. 了解 Unix/Linux 基本结构 12 | 3. 了解我们的互联网的基本结构，尤其是分层模型，这对我们管理服务器至关重要 13 | 14 | **参考资料** 15 | 16 | 1. [维基百科](https://zh.wikipedia.org/wiki/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F) 17 | 2. [操作系统原理及应用](http://c.biancheng.net/cpp/u/xitong/) 18 | 3. [如何成为一名黑客](http://translations.readthedocs.io/en/latest/hacker_howto.html)（这篇文章告诉你我们为什么要使用 Unix 系统） 19 | 4. 20 | 5. 《图解 TCP/IP》 21 | 6. 任意版本的《计算机网络》 22 | 23 | Linux 系统安装 24 | - 25 | 26 | **目标:** 27 | 28 | 1. 熟悉常用linux系统的安装 29 | 30 | **测试方向:** 31 | 32 | 1. Virtual Box 安装CentOS/Debian(Desktop/Server) 33 | 2. 尝试安装 Gentoo、Arch 等没有自带安装引导的发行版（可选） 34 | 35 | **时长: 1~2周** 36 | **参考资料:** 37 | 38 | 1. 谷歌 39 | 2. [Archwiki](https://wiki.archlinux.org/) 40 | 41 | 包管理器及常用命令 42 | - 43 | **目标:** 44 | 45 | 1. `ls`,`mv`,`useradd`,`usermod` 等命令 46 | 2. `vim`,`nano`,`emacs` 编辑器 47 | 3. Linux 权限 48 | 4. CentOS/Debian 系的 `yum`/`apt` 包管理器 49 | 50 | **测试方向:** 51 | 52 | 1. 了解更新源原理,熟悉管理器的常用操作,如`apt-cache search`，了解什么是依赖，怎么处理依赖关系，了解`yum`和`apt-get`使用上的一些区别 53 | 2. 文件/用户权限管理 54 | 55 | **时长: 2~4周** 56 | **参考资料:** 57 | 58 | 1. 《鸟哥的私房菜(基础篇)》 59 | 2. man手册 60 | 61 | 环境搭建 62 | - 63 | **目标:** 64 | 65 | 1. Apache/Nginx 66 | 2. PHP/Python 后端服务 67 | 3. MySQL 68 | 69 | **测试方向:** 70 | 71 | 1. LNMP/LAMP 环境搭建（重点了解配置文件格式） 72 | 2. MySQL数据库安装配置及基本操作 73 | 3. PHP 和 Apache/Nginx 如何交互（fastcgi、uwsgi、mod_php） 74 | 75 | **时长: 4周** 76 | **参考资料:** 77 | 78 | 1. 《鸟哥的私房菜(服务器篇)》 79 | 2. 《深入理解 Nginx》 80 | 3. 《MySQL 必知必会》 81 | 4. 官方文档：nginx.org，中文翻译：[淘宝 tengine 项目文档翻译](http://tengine.taobao.org/nginx_docs/cn/) 82 | 83 | Shell 脚本编程和 Linux 环境进阶 84 | - 85 | **目标:** 86 | 87 | 1. Shell 脚本入门 88 | 2. crontab 及进程机制 89 | 3. 学习如何管理服务器 90 | 91 | **测试方向:** 92 | 93 | 1. 了解 bash 的基本语法和一些保留字如反引号`、中括号[等 94 | 2. 使用管道(`|`)和重定向(`>`、`>>`)传递参数和信息，使用`find`、`grep`、`xargs`进行信息处理 95 | 2. 分支判断和条件、循环的语法 96 | 3. 使用`awk`和`sed`输入输出流和文本处理 97 | 4. 使用`netstat`等判断服务器网络状态、使用`ps``top`进行进程管理， 98 | 5. 使用`iptables`对网络进行基本管理 99 | 6. 使用`cron`定时任务处理 100 | 101 | 102 | **时长: 4~6周** 103 | **参考资料:** 104 | 105 | 1. 《高级 Bash 脚本编程指南》（[HTML version on TLDP](http://tldp.org/LDP/abs/html/)） 106 | 2. 《Linux 命令行与 Shell 脚本编程大全》 107 | 3. [极客学院 Wiki](http://wiki.jikexueyuan.com/project/shell-tutorial/shell-brief-introduction.html) 108 | 4. [Linux 工具快速教程](http://linuxtools-rst.readthedocs.org/zh_CN/latest/index.html) 109 | 5. [Google shell style guide](http://zh-google-styleguide.readthedocs.io/en/latest/google-shell-styleguide/background/) 110 | 111 | Python 入门 112 | - 113 | **目标:** 114 | 115 | 1. Python 基础语法 116 | 2. Python 常见库的使用 117 | 3. 开发(爬虫,数据处理,后台开发,CUDA等方向) 118 | 119 | **测试方向:** 120 | 121 | 1. Python 实现 Linux 服务监控及数据存取 122 | 2. 开发方向任选,成品展示 123 | 124 | **时长: 3~6周** 125 | **参考资料:** 126 | 127 | 1. 《Python cookbook》,python 标准库 128 | 2. 官方手册 129 | 3. [廖雪峰的网站](http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000) 130 | 4. [深入 Python3](http://www.ttlsa.com/docs/dive-into-python3/) 131 | 5. [Googel python style guide](http://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/contents/) 132 | 133 | What's more? 134 | - 135 | 一开始我是想把标题写成入门指南的，实际上写的并不只是入门的内容，关键在于动手去做，走过上面这些，可能已经半年、一年或者更长时间过去，接下来有什么发展方向，相信到时候自己自有体会，在这里列出一些可以参考的方向： 136 | 137 | * Nginx 高级应用（负载均衡、反向代理），了解 HAProxy、Squid、Redis 等工具—— Web 方向 138 | * 深入了解数据库结构，了解关系型之外的数据库如 Mongodb —— DBA（数据库管理员）方向 139 | * 了解 KVM OpenVZ Docker —— 虚拟化方向 140 | * ······ 141 | 142 | 如果你想作为一个 SA 走出校园，这些网站可能帮得到你： 143 | 144 | * [UC 技术博客](http://tech.uc.cn) 145 | * [百度运维组博客](http://op.baidu.com) 146 | * [小米运维组博客](http://noops.me) 147 | 148 | Happy coding~ 149 | -------------------------------------------------------------------------------- /UI-level-up.md: -------------------------------------------------------------------------------- 1 | ## 星辰UI养成计划 2 | 3 | ### 工具篇： 4 | 5 | 1. PS入门，如果你觉得你会扣图，调一点颜色就算PS入门的话我也没有话说。就个人理解而言PS真正的精髓在于各种各样神奇的滤镜以及图层的叠加效果。也没什么多说的，你可以自己去网上找教程，或者是图书馆借书，像《野生设计师的成长之路》里面说的去看Adobe出的标准教材也是可以的。吐槽一下啊，我觉得国内网看官方教程反正是挺卡的。 6 | 2. AI入门，就AI这个工具来说，就是一个简单粗暴的矢量图设计工具，主要使用的地方在LOGO设计，图标制作，以及一些个需要很强的分辨率适应性的图片的制作。不过你也可以用PS或者Coreldraw来进行你的矢量图设计。有必要强调的是PS和AI主要的矢量图绘制方式是使用钢笔工具，一个学起来很复杂但是会用了相当爽的工具，你可以适当了解一下。Coreldraw的话你在街边的打印店什么的应该会经常见到，比较实用的一个矢量图设计工具，经常用来做海报和宣传横幅。 7 | 3. Sketch，这个也得稍微提一下，挺牛逼的设计软件，在《野生设计师的成长之路》上也是有提到的，不过据我所知这东西只有MAC版的，windows上没有，我在MAC虚拟机上用过，确实牛逼，资源很多，做扁平设计的话很好用。 8 | 4. Axure，这个工具我也不知道到底该不该讲，非常强大的一个原型设计工具而且是有WINDOWS版的，但是就是要用好这个工具比较难，如果你只是要做一个网站的用户界面设计的话这个软件没有什么必要。可是深层次的交互设计上这个东西相当有用，在一个web/app开发团队，一个能熟练使用Axure进行产品原型设计的UI/产品经理可以减少整个团队很大的开发负担。（这里吧UI/产品经理的界限画得比较模糊，严格来说，产品原型设计应该是产品经理的工作，但是不是所有的产品经理都会熟练的使用原型设计软件，所以有时候需要UI来协助产品经理进行原型设计。且在产品经理提出了原型设计初稿之后，设计师可以细化原型的具体内容，做出网站的DEMO）总而言之，这个工具一般只有做大项目的时候才用，而且要用好这个，你的PS，AI还有设计功底一定要够。学好了这个工具，你对网站的交互设计会有更深的认识。悄悄说一句，这东西也可以用来制作静态网站，就是这么叼…… 9 | http://www.myaxure.cn/ 这里有个免费的教程网站，不得不说，这种生产力工具的免费教程就是少，都是收费的。 10 | 11 | 工具用得再好也只是工具，做设计关键还是想法，有了想法之后，多做多练。工具就这么多，如何创造性地使用有限的工具，做出最炫的效果，靠得还是想法，怎么组合使用各种效果，看得都是设计师的实力。大家可以多去看看国外的优秀UI设计，http://www.egouz.com/creative/ 这里有个网址，多看，多悟，先是模仿，再是升华，最后才是做出自己的设计风格。 12 | 13 | ### 基础知识： 14 | 15 | #### 视觉 16 | 17 | 不要说你不是艺术专业的，也不要说你要做交互设计这些不重要。没有美感的设计谁敢要，以后出的设计稿别人都不想看还怎么一稿过？ 18 | 19 | 有时间去了解一下设计史，至少知道各种设计风格，推荐一下网易中国大学的课程《设计的力量》。知道现代美学理论的基础—包豪斯理论—点线面理论。 20 | 21 | 举个例子，说一下这些理论的运用。在做设计的时候，常说视觉焦点，明显“点”用来吸引人视觉，“线”用来引导视线，“面”则用来划分内容。如果没有点线面意识的话，经常你做出来的东西会给人很散的感觉。 22 | 23 | 下面介绍两本比较好的书吧，（排版居多） 24 | 25 | - 《写给大家看的设计书》入门，轻松。 26 | - 《认知与设计—UI设计准则》 升级版，里面介绍的格式塔是很经典的，不用完全记住，理解就行，设计不是记住过去，是要创造未来。 27 | 28 | 颜色方面的东西我看的不多，知道色彩模式，记住色环就行了。《色彩心理学》可以看看，比较有用。通常配色的话要善于从生活中发现，比如好看的家具，好看的风景图，拿过来取几个色配一配就行了。 29 | 30 | 当然，你要是觉得你是不适合读书的人，以上都可以忽略。去dribbble多下载点psd文件，每天临摹一张。就算你看了那些书，平时也要多临摹，不做怎么会有提高。 31 | 32 | #### 交互 33 | 34 | 在这个阶段，不要想得太复杂。把各个平台的设计规范熟悉了。各个平台的人机交互指南，理解他们的设计思路。书的话后面有个链接，你们自己去看吧，我也忘了。 35 | 36 | 懂得基本的信息架构，流程图旅程图等的作用。推荐《web信息架构》。刚开始学习交互，有个比较好的方法：积累交互模式。看到比较好的设计，就截图整理到一起，分析它的适用场景，优缺点。最好是把同类相关的整理到一起，比如搜索框的交互或者登陆界面。 37 | 38 | *推荐书籍《网站UI设计之道》和《设计心理学》。* 39 | 40 | ### 设计思维 41 | 42 | 通常，这才是重点。为什么这么设计，为什么用这个颜色，为什么用圆角不用直角，信息架构为什么要这样等等。你的设计得有根据。 43 | 44 | 先祭出大招《about faces》，我看了三遍，非常有用。用户体验（交互）设计的经典教材。情景思维和同理心，算是设计最重要的东西了，慢慢去感受吧。虽然介绍的方法不多，但每一个思考方式或者设计模式都能延伸很多。千万不要被高端的词汇吓到，不懂的找度娘。 45 | 46 | 《用户体验要素》又一本大书。更多的是教你怎么样从整个产品去思考用户体验。设计师其实很多时候做的是平衡的工作。用户体验和商业策略的平衡，视觉表达和开发难度的权衡等等。怎样去理解需求，怎样去迎合市场，怎么讨好用户，这是你需要思考的。 47 | 48 | 当然，设计师要产出很多产出物，《设计高效沟通之道》里面比较详细的介绍了很多各种文档，图表的规范。 49 | 50 | 除了这些理性的东西，平时也注意多积累。形成自己的设计风格。看看《设计中的设计》，《设计与死》什么乱七八杂偏文艺的东西也不错。 51 | 52 | ### 设计管理 53 | 54 | 怎么样的开发流程会适合你的团队，怎样的设计过程才会更高效。 55 | 56 | 介绍一下一般简单的用户体验设计流程吧. 57 | 58 | 1. 拿到需求，分析验证需求（用研配合） 59 | 2. 整理需求，排优先级 60 | 3. 制作信息架构 61 | 4. 交互原型制作 62 | 5. 测试demo 63 | 6. 修改，再测 64 | 7. 视觉敲定 65 | 8. 高保真demo制作 66 | 9. 测试（ABtest，用户测试，可用性测试等等） 67 | 10. 开发 68 | 11. 编写规范文档 69 | 70 | 当然，并不是所有的流程都长一样。怎么样的流程适合你的团队，又能达到提升用户体验的效果，那才是适合你的。 71 | 72 | 就我个人而言，我觉得设计是心理学的一个延伸，每个设计，都是根据用户的心理感触以及直观体验来做的。而设计的又一个关键就是，根据不同的用户需求和使用场景，使用不同的设计思路。就是说考虑不同用户在各种极端状况下的体验。还有就是要在开发难度，和用户体验方面做好权衡，有可能某个功能确实能提高用户体验，但是代价太大，这种时候就需要慎重考虑。 73 | 74 | 感觉这些东西说起来有点苍白无力，但是很多事用语言着实很难描述，我觉得在做过一些项目之后，可能你们会对这东西有自己的理解。 75 | 76 | 设计流程这东西多说无益，每个团队都有不同的风格，体验下就知道，习惯就是好的。 77 | 78 | ### 提高篇： 79 | 在前面的知识已经基本掌握的情况下，可以进入提高篇的学习。这个阶段中，UI设计其实和前端已经不分家了。CSS和HTML的基础知识，对于一个优秀的网页UI设计师来说，是必须要做到了解的。在你设计网页的时候，你要考虑某个设计要靠什么东西来实现，实现起来难度如何，更重要的是，很多网页前端工程师并不会按照你的设计稿一尘不变的写出来，或者说，当网站成型之后，有一些小的细节需要改动，这时候，HTML和CSS的知识会显得尤为重要，设计师并不是不需要写代码的。（很多网络公司招收设计师的时候也要求掌握基本的HTML/CSS知识） 80 | 81 | HTML: 超文本标记语言，标准通用标记语言下的一个应用。 82 | 83 | “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 84 | 85 | 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。(构建网页框架的基本语言结构，其实就是个标记，很好学的) 86 | 87 | CSS: 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。(构建网页样式的语言，也很简单，并不存在逻辑结构，只是类似标记的东西) 88 | 89 | *推荐入门书籍：《HEAD FIRST HTML》这本书简单易懂，用一个个实例串联起每个需要学习的知识点，很适合入门初学者学习。* 90 | 91 | 在读完此书之后，推荐大家去下载一本CSS 3.0参考手册，腾讯ISD版的就不错，方便在平时使用中查找需要使用的标记。而HTML/CSS之后的深入学习基本上就是需要在实战中联系了，没事可以看看前端非JS之外的代码。 92 | 93 | 总结： 94 | 95 | 1. PS的深入学习 96 | 2. Axure的了解和使用 97 | 3. 《认知与设计—UI设计准则》，《设计心理学》，《网站UI设计之道》，《写给大家看的设计书》这些书可以选几本来看。 98 | 4. 浏览一些好的设计网站，分析一下这些设计好在哪里 99 | 5. 试着模仿一些好的网站设计 100 | 6. 搜集整理一些设计资源: 101 | 7. 自己试着编写一个静态页面 102 | 103 | PS:资源整理 104 | 105 | - 设计网站集合：[http://hao.uisdc.com/](http://hao.uisdc.com/) 106 | - 设计相关书籍：[http://hao.uisdc.com/book/#0-tsina-1-45066-397232819ff9a47a7b7e80a40613cfe1](http://hao.uisdc.com/book/#0-tsina-1-45066-397232819ff9a47a7b7e80a40613cfe1) 107 | - 灵感：pinterest 108 | - 临摹or资源：dribbble，365psd 109 | - 相关社区：behace dribbble 站酷 ui中国（懂得利用这些平台，让别人看到你） 110 | - 设计尺寸：[http://chicun.in/](http://chicun.in/) 111 | - 一个icon网站 http://www.iconfont.cn/ 挺好用的~ 112 | -------------------------------------------------------------------------------- /web-new-comer.md: -------------------------------------------------------------------------------- 1 | # WEB开发新人指南 2 | 3 | 写给母校UESTCweb开发方向的同学。 4 | 5 | ## 一、首先要知道的 6 | 7 | 如今我们使用的互联网，客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页，浏览器就是客户端，将网页数据发过来的也就是服务器。其实服务器，并没有什么特别的，也就是一台昼夜不停运转的电脑罢了。每一台入网的机器，都会被分配一个ip，我们可以通过ipconfig / ifconfig这样的命令，知道我们电脑的ip地址。服务器本身，运行着服务器程序，他们监听着来源于网络的请求，并对请求进行响应。 8 | 9 | 比较常见的服务器程序，比如apache / Nginx / IIS等等，我们可以通过以下这样的一个小的实验，来了解网络中的客户端与服务器，是如何进行交互的。 10 | 11 | ### 实验：一个小的局域网 12 | 13 | 第一步：运行你电脑上的服务器程序（以apache为例，建议使用xampp / wamp这样的软件包，win下一键安装，能省不少事。当然，喜欢折腾的同学和SA们肯定要一个一个装啦），在apache的www目录下放入一些网页文件，然后在浏览器的localhost下浏览网页。 14 | 15 | 第二步：在电脑上打开wifi共享软件，通过ipconfig / ifconfig命令查看本机在内网的ip，让手机连接电脑共享的wifi（或者是两者同连一个路由器的wifi），在手机浏览器的地址栏输入电脑的ip，进入电脑的服务器并浏览网页。 16 | 17 | 上面的小实验的第二步，就模拟了一个简单的浏览器+服务器系统（BS系统），也在一定程度上反映了网站基本的访问原理。同时，这也是Web前端开发中真机测试移动端页面的一个行之有效的方法；当然，你也可以通过这种方式，实现局域网络的文件共享。 18 | 19 | 继续深入一步，我们在浏览网站的时候很少使用ip直接访问的，而是用www.baidu.com这样的域名，域名与提供对应服务的服务器的ip地址通过DNS服务器相互对应。我们可以通过ping命令，也可以通过一些在线的工具，如 http://ping.chinaz.com 来获取一个网站的ip地址，有时候ping出来的ip是不一样的，一般和你使用网络的地点有关，这主要是为了将对服务器的请求分流，减轻服务器的压力，保证网站的访问速度（比如可以了解一下CDN）。 20 | 21 | ## 二、开发的过程与设计的艺术 22 | 23 | 如何从0建立一个网站，这就涉及到软件产品的开发了。一般，会有以下几个职位。产品（PM）：负责对软件产品的功能，目标用户等许多部分，进行一个详细的归纳整理，包括前期的功能地位和后期的功能修缮；设计（UE）：对用户使用的产品界面、交互方式进行统筹和设计；前端（FE）：活跃于客户端的程序员，负责使用代码实现设计师的设计，并与后端协调数据在客户端的渲染工作；后端（BE）：活跃于服务器端的程序员，为前端的渲染提供所需的数据；系统（SA）：保证开发过程中，对于服务器权限的管理与协调，以及服务器运行环境的提供，同时保证网站在生产环境中的平稳运行。 24 | 25 | 限于个人能力，我在此仅从前端和后端这两个角度，探讨网站实现的技术细节，其中会涉及许多具体的解决方案，供大家参考。 26 | 27 | 现在我们从这样的角度去看一个网站，我将他分为三层，视图层，数据层，以及控制数据在视图上的显示方式的控制器。举个例子，一个留言板，他的数据层会包括留言者的留言内容、留言时间、留言者的信息等内容。这些数据，就像一张excel表格一样，存储在我们的服务器。而我们的用户肯定不希望看到一个简陋的表格，他们希望看到的至少是一个界面，数据内容被清新美观的显示在我们的浏览器上，而这个界面，也会随着数据内容的增删修改而做出相应的调整。存储表格数据的，就是数据层；用户看到的，就是视图层；让界面随数据产生改变，则是控制器的使命。 28 | 29 | 现在，从技术的角度我们去实现他。首先，前端工程师根据设计师的设计，做出视图层的模板，后端工程师也做好相应的数据存储工作，包括设计创建数据库、数据表等等。现在，基本的工作完成。继续下去，我们则有很多的选择。 30 | 31 | ### 选择一：后端渲染数据到视图。 32 | 33 | 这种方法，就是前端将模板交给后端，告诉后端具体在哪个位置放什么样的数据，放的时候有什么具体的要求，剩下的渲染工作完全交给后端处理。这样的方法实现起来门槛低，而且由于服务器计算性能一般情况下强于客户机，后端来刷模板简单粗暴速度快，没有任何争议。缺点是后端工程师由于处理了数据填写的工作，相当于涉及了视图层（即前端）的工作内容，导致分工不够明确；同时，由于是后端更新数据，而后端代码是运行在服务器上的，每次要更新都要刷新页面重新请求一个完整的页面，某种意义上来说，用户体验相对较差。 34 | 35 | ### 选择二：后端将数据生成为小的数据文件，前端获取数据并由前端更新视图。 36 | 37 | 这种方法，涉及到前端的Ajax。说白了就是在后台异步加载另外一个页面，在加载过程中用户不会看到任何变化，而加载完成后，相当于在前端程序里获取了一个字符串，剩下的任务就是将这个字符串解析取出里面的数据并将对应内容渲染到相应的位置上。通过这种方式，首先可以保证视图层显示的内容都完全由前端工程师负责，分工明确，实现了一定程度上的前后端分离；同时，与服务器交互的文件大小，从一整个页面缩小到了一个仅仅包含要更新的数据的小文件，交互的量减小，带来性能上的提升；另外，由于交互文件一般使用json这种多数编程语言都可以解析的数据格式，不仅可以给网页前端使用，也可以给移动端app的前端开发使用，统一了接口，扩展时减小了工作量。 38 | 39 | ### 选择三：单页应用（SPA） 40 | 41 | 我先解释一下单页应用，和传统网站相比，他更接近于移动端应用程序，其核心就是将路由控制在前端工程师的手里。核心技术除了上面的Ajax，还有pushState，又有人将两者合称为PJAX。 42 | 43 | 先说什么是路由，路由可以理解为你网站域名后面的内容，比如www.abc.com/p/123这样的网址，后面的/p/123就标明了一个路径。可以类比于我们电脑的磁盘，当我在路径的位置输入C:/p/123的时候，我希望看到C盘下p文件夹下123文件夹的内容，当123变成了456，显示的内容应该有些变化。如果456文件夹存在，显示该文件夹的内容；如果不存在，则会弹出错误信息提示不存在。对应我们的网站，如果当/p/123变成/p/456的时候，也应该给出对应的显示。路由由前端控制的含义，就是说，网站url的变化与对应的显示由前端处理。你的整个网站实际上只有一个页面，前端根据url的变化，通过Ajax异步加载需要的数据，然后通过pushState操作浏览器的历史记录，达到与浏览普通网站同样的效果。 44 | 45 | SPA最大的优点，大概就是响应速度了。当然，使用SPA对前端的技术提出了相对比较高的要求。使用SPA的一般情况，是你要做一个类似于安卓app的网站，如淘宝的手机站和Gmail，都是相当典型的SPA。不过，虽然现在SPA很多，并不是所有的场景都适合使用SPA的。 46 | 47 | ### 淘宝收藏夹的架构： 48 | 49 | 作为访问量如此高的网站，淘宝是怎么做的。（首先，php的后台肯定是担负不起这样的访问量的。）在淘宝UED，他们介绍了“中途岛”项目，基本架构是：前端工程师使用Node.js进行模板渲染，保证模板的渲染由服务器完成提高效率；Node.js访问由java后台封装的高级数据接口，而java在访问数据库的时候，则是使用C语言来实现最有效率的访问。技术细节可以参考淘宝UED的博客。 50 | 51 | ## 三、项目开发中值得一提的点 52 | 53 | ### 关于查阅资料和提问： 54 | 55 | 遇到问题先问搜索引擎，这我想应该都没有什么意见。用不了谷歌，可以从[laod.cn](http://laod.cn/)下个hosts，翻出去的话，方法太多，不废话了。 56 | 57 | 当然了，找不到具体问题问人是不可避免的。但是当问题比较复杂的时候，比如前端这边处理浏览器兼容问题的时候，一定要有在线demo，一定要把问题描述的很清楚并且真的是自己解决不了了再问。关于提问的艺术，可以看看张鑫旭大神的博客（个人非常喜欢，强烈推荐前端同学关注），[如何提问才能进阶成为前端大神？](http://www.zhangxinxu.com/wordpress/?p=4772)，这篇文章对提问需要注意的点说的非常明确，请大家，无论是不是做前端，最好都看看。 58 | 59 | ### 任务进度管理： 60 | 61 | 虽然在学校里做东西，很少会有严格的工期安排、进度计划这些，但是在公司里，这些问题肯定是会遇到的。推荐几个工具，大家可以了解一下：tower和微软的project。 62 | 63 | ### 版本控制： 64 | 65 | 几乎没有任何成功的软件项目，是一个敲代码敲出来的，况且，就算是一个人敲代码，也应该对自己所做的改动有所记录和备份。在这里，我将介绍两种使用git进行版本控制的方式，供大家参考。 66 | 67 | ### 分支管理： 68 | 69 | 整个项目是一个大的仓库，这个大的仓库由于不同的修改而有不同的分支。一般来说，有master（稳定发布版本） / dev（开发中的相对稳定版本） / 开发人员个人分支（集中个人的修改）这些。一般的工作过程为，个人会在个人的分支上修改，然后push到dev分支，稳定下来的dev分支作为新的版本再合并到master分支。那一部分出了问题，就在哪一部分进行修改。git在你每次更新分支的内容时都要求你输入一段描述修改的文字，这在将来的版本控制和回退上都会很有帮助。 70 | 71 | ### 仓库管理： 72 | 73 | 个人理解其实是扩大化的分支管理，项目负责人建立项目仓库，项目开发人员fork母仓库，做了自己的修改后，对母仓库发出pull request，申请合并到母仓库。这一方法最大的优点，就是方便负责人进行code review，保证代码质量；同时也可以方便对开发人员的贡献度进行考核。通常公司里会选取这种方式。 74 | 75 | ### 项目的持续集成： 76 | 77 | 持续集成大家在学校也很少会接触到，但是当你在公司里，遇到大项目的时候，就肯定会接触到持续集成这方面的需求和工具。个人认为持续集成更像是一种思想，在项目的开发过程中，前端和后端在开发过程中不断的对接，测试样例提前都做好，然后自动化构建项目，自动化测试等等。每当代码库更新（当然，本地构建失败的代码是不允许提交到仓库的）的时候，自动构建脚本、自动测试脚本都会跑出一个更新后的产品给大家看，方便团队中的每一个人掌握项目的情况和目前的进度。 78 | 79 | 实现这种思想，就需要与之配合的工具，关于持续集成这方面现在在企业中目前还没有“最佳实践”，不过确实有很多前人的经验供咱们借鉴。[《持续集成最佳实践》](http://leuisken.github.io/data/best_practice_C.I.pdf)里面对于持续集成实践进行了思考，欢迎点击。（感谢原作者高磊的无私分享。） 80 | 81 | ## 四、几点建议 82 | 83 | 在学习开发技术的过程中，个人给大家一点建议： 84 | 85 | ### 前期初学的时候，千万不要求多 86 | 87 | 道理大家都明白，什么都想学肯定什么都学不好。如果一个人都能学过来，那么我们还搞这么多方向做什么。有些东西，当你需要的时候，自然就会接触到；而那个时候你再学，你肯定是在实际项目中遇到了什么问题。有问题导向的学习是非常有效率的，所以千万不要求多，稳住。 88 | 89 | ### 千万不要刚刚入门就觉得自己什么都会了 90 | 91 | 这是我经历过的阶段，当时被一位学长拉了回来，也是非常幸运。这个阶段你觉得自己清楚很多东西了，感觉只要查查资料自己什么都能解决。其实想一想，这么多人研究这个领域，你怎么可能马上就看透了他呢。每个领域，都有很多坑，每一个坑也都会有至少一个与之对应的解决方案，而处理项目和解决方案，是一条漫长的道路。知识是越学越细的，本来你以为前端只能写写页面，深入学习以后，你才会发现，js可以写机器人；可以调系统API做桌面应用；哪怕只是在写页面这部分也有着页面渲染时间、内存泄漏等各种各样的问题和与之对应的层出不穷的解决方案。所以，低调，前面的路还很长。 92 | 93 | ### 学到一定程度，可以多去看看 94 | 95 | 我们知道书本上的知识肯定不是最新的，技术在不断的发展。可能你现在用的书上的代码都已经过时到运行不了了。这个，其实很正常，毕竟做网络这方面，怎么可能光靠书来追踪技术呢。所以多去看吧，github，各种社区、论坛，线下的技术交流，这些可以给你带来最新鲜的养分。所以，世界这么大，出去多看看。 96 | 97 | ## 五、结语： 98 | 99 | 还记得在看松本行泓的《代码的未来》的时候，里面提到的程序员“无所不能”的自由给我留下了很深的印象。写代码，按照自己的意愿去构建一个产品，一个项目，哪怕再小，依然是自由的。哪怕是在实现别人的需求，可以做好，做精，做出一套最佳的解决方案（没有最佳，只有最适合项目），给别人留下轮子去做好二次开发，依然是自由的，是有意义的。 100 | 101 | 其实个人觉得，单纯作为新人入门的话，本文的第三部分并没有太大的意义。之所以提及，是希望新人们能够更注重代码之外的效率，从团队合作、项目管理、利于维护和二次开发的角度去反思自己的代码，自己的解决方案，有时候会有更多收获。于是多加一笔，虽然限于个人水平，说的不详细，但也希望抛砖引玉，对大家能有些帮助。 -------------------------------------------------------------------------------- /产品经理的基本知识.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StarStudio/stepByStep/e665b01329cb18535b147dbcb0cf96495d5e26e3/产品经理的基本知识.doc --------------------------------------------------------------------------------