php叠层技巧_产品经理从零到一技能进阶不懂代码也能愉快地与开拓人员相处

NEXT 本次活动收到了近 1000 多个报名，大家对周日线上和线下的互动学习反馈也不错。
因此我们将条记分享出来，希望让更多产品人、创业者够快速理解基本技能知识，更好地把握产品周期与项目进度。
当然，你也可以不雅观看网聚直播供应的视频回放：http://wangju.tv/live/3k562amaskvzg。

| 概览

以下这张图便是元一分享的干货内容，它基本涵盖了一个低级码农须要知道的所有根本入门知识。
但这张图的目的并非用来吓人，这个中的所有技能名词，将以最普通易懂的办法串联起来—— 即我们上网时的慢动作解析：打开一个网页或 App，这背后都利用了那些技能来让这个网页和 App 的内容呈现在浏览器和手机上；驱动这些动作背后的技能名词都是什么，各自有着若何的优缺陷，彼此间是如何协作和运转的，以及若何合理地评估技能能力和开拓难度。
当然，元一也推举了丰富的学习资料。

这中间涉及的技能知识，前端包括 HTML，CSS，JavaScript，jQuery 以及 Bootstrap ；后端包括 HTTP 做事器，后端编程措辞，数据库以及 Cookie 和 Session；移动开拓分为原生，稠浊式，HTML5，以及不同的移动端技能选择在功能和开拓本钱上的比较。

| 什么是前端？什么是后端？二者是如何合营运转的？

前后真个划分，可以大略地理解为凡是运行在用户设备上的技能都可以称为前端技能（ 比如 HTML / CSS / JS，乃至移动设备的 Obj-C / Swift ）；而后真个浸染便是卖力将这些东西封装在 HTTP 的数据包中然后通过网络传送到前端。
当然除了这些前端文件，后端还有一个更主要的职能，即保存和供应用户数据，比如移动端常见的 JSON 便是目前最盛行的在后端和前端之间传输的一个文件格式。

前端与后端是如何合营的？如上图，以 Web 端为例，在浏览器输入一个网址后，浏览器向做事器发送了一个 HTTP 要求；做事器通过一个 HTTP 相应，把显示这个网页所须要的资源传回给了浏览器。
而须要在浏览器中实行的技能，HTML / CSS / Javascript 等就叫做前端；须要在做事器端实行的、常日我们看不到技能就叫做后端。

| Web 前真个运行逻辑

假设我们要访问 Google，从我们在浏览器输入 Google.com 到末了这个页面涌如今面前，这个中涉及许多前真个技能反应和代码组合，总体而言可以简化为两步：

1/ 浏览器向 Google 的做事器发送了一个要求。

2/ 做事器收到了一个 HTTP 相应，这个相应中就包含了实行这个命令所须要的所有资源（注：可以通过 Chrome 浏览器的开拓者工具来进一步不雅观察 HTTP 协议的运行情形；下图为 Google 的 HTTP 协议运行情形）。

上图这个界面看起来很繁芜，但对付非程序员而言，HTTP 协议运行情形只要关注个中的几个关键部分：第一列，即资源的 URL；第四列是这个资源的类型。
在第一个要乞降后续的要求之间有一根蓝线，即进度条。
而 HTTP 协议中运行的项目越少，浏览器加载的速率越快。
图中 Google 就处理得很好，只有 10 个旁边的要求。

| Web 前端措辞

HTML 便是一组标签和文本的组合，是一个最基本的网页。
它已经包含了网页常见的元素，实际上在 Web 早期的很长一段期间内，网页都是这个样子。
后来随着利用网络的人群越来越广泛，在 HTML3.0 中引入了对网页样式的定义，某种程度上可以说，也是从这个时候开始产生了网页设计师的角色。

带样式的 HTML 也拥有一个缺陷，它须要为每个标题和笔墨都设定样式，事情量非常弘大。
CSS 便是在这样的情形下出身了。
CSS ，又称叠层样式表，简言之是一种用来表现 HTML 文件样式的样式设计措辞。
CSS 能够对网页中的工具的位置排版进行像素级的精确掌握，实现根本的静态的交互设计；而CSS 目前的最新版本 CSS3 能够真正做到网页表现与内容分离。

差不多在 CSS 出身的同一韶光，大家开始以为这样静态的网页彷佛略显无聊，能不能给网页加入一些可以动起来的元素？比如点击一个按钮之后变个颜色。
当时网景公司的工程师Brendan Eich 就给他们自家的浏览器引入了这种实现动态效果的脚本措辞，这便是 Javascript（简称 JS）的出身。
以是普通来说，Javascript 便是用来给 HTML 网页增加动态功能，实现更炫酷的交互。

提到 Javascript ，就得提一下 jQuery 。
jQuery 是一个精良的 Javascript 库。
jQuery 利用户能更方便地处理 HTML ，它能够利用户的 HTML 页面保持代码和 HTML 内容分离,通过 jQuery ，可以不用在 HTML 里面插入一堆 JS 来调用命令，只须要定义 ID 即可。
此外，由 Twitter 设计师 Mark Otto 和 Jacob Thornton 互助开拓的 Bootstrap 也是一个受欢迎的前端框架。

| HTML5 简史和相应式设计

HTML 在刚出身的前 10 年景长是非常迅速的，在 1999 年，我们现在常说的 HTML5 的上一个版本 HTML4.0.1 就已经发布了，那么为什么从 4.0 到 5.0 会拖了 15 年之久？

首先，HTML4 的发布韶光和门户时期（即 Web 1.0 时期）是基本吻合的，也便是说 HTML4 实际上是为门户型网站设计的。
在门户网站经历的 4，5 的年景长之后，大家开始以为只是单一接管信息的互联网太过无聊呆板了，差不多 2004、2005 年开始，大家希望在网页中加入更多的互动元素，也便是我们常说的 Web 2.0。

但是这个时候大家创造，为 Web 1.0 设计的 HTML4 无法胜任这个事情，但是有其余一个技能却非常适宜，那便是 Flash。
以是在 Web 2.0 的早期，当时最炫酷的网站有很多是完备用 Flash 开拓的，在往后的很长一段韶光里，有很多网站都是 HTML 和 Flash 的稠浊式网站。
以是在 2005 - 2010 年这段韶光，HTML5 中的新标准紧张是为了取代 Flash。

刚刚搞定了 Flash，又进入了移动开拓时期，以是 HTML5 又花了 5 年韶光制订各种针对移动平台的标准。
但是到目前为止，虽然 HTML5 已定定稿，但是对移动平台的适应实在还在进行中，以是在未来很长一段韶光内，就像当初的 Flash 一样，我们会看到越来越多的稠浊式运用。

在 iPhone 涌现之前，大家访问 Web 的紧张办法还是通过桌面浏览器，以是设计网页时只要考虑桌面浏览器的显示效果就足够了。
但是在 iPhone 和 iPad 涌现之后，就须要考虑同一个网页在不同设备上的显示效果，第一个问题的答案便是相应式，相应式的核心便是让同一个网页可以在不同设备上呈现出不同的显示效果，紧张是通过CSS来实现的。

除了相应式设计，HTML 在移动端碰着的其余两个问题便是如何利用移动设备的各种传感器，比如 GPS，摄像头等等；以及性能问题。
为理解决这些问题，HTML5中添加了地理位置，拍照，3D 动画加速等等 API，可以部分的利用手机设备的一些新硬件，并且新的 API 还在不断的加入进来，这也是为什么现在的 HTML5 运用可以越来越炫酷的缘故原由。
但是，HTML5 并不是专为移动设备设计的，它是由 HTML5，CSS3 以及大量的 Javascript API 共同组成的一个标准合集，微信中的 HTML5 运用只是 HTML5 运用处景中的很小一部分。

| 如何判断一个前真个能力？

关于前端，可以大略的把它理解为，凡是在我们的电脑，手机上运行的技能，HTML，CSS，Javascript，这些都属于前端技能，利用这些技能的我们就称为前端工程师。
如何判断一个前真个能力呢？下面是一个大略的前端能力链：

1/ 只会 HTML/CSS 的，这种我们俗称切图的，基本上便是淘宝几十块切一张图的；

2/ 懂一些大略的 Javascript，紧张是利用一些现成的框架，比如 jQuery，bootstrap 等等；

3/ 知道 jQuery 和 Bootstrap 的局限，必要时能写一些原生的 JS/CSS 代码；

4/ 对JS/CSS非常理解，执着于利用浏览器的各种最新特性来实现各种炫酷效果，这种我们成为炫技派；

5/ 可以自己写出类似 jQuery / Bootstrap 这样的前端框架供其他人利用。

| 前端学习资料

http://www.w3schools.com

http://onemonth.com

http://www.codecademy.com/

https://github.com/alex/what-happens-when

https://qdan.me/list/VNBugw7ObupFRdlE

大家可能比较关心如果我要开拓一个网站须要多少韶光？这个问题虽然很难回答，元一还是来试着回答了。
现在前端有了 jQuery，bootstrap 这样的框架，后端又有了 Ruby on Rails 这样的快速 Web 开拓框架，如果从头学的话，像是一个大略单纯的 Pinterest，大概一个月就可以了。
如果是一个有履历的程序员，可能 1 个星期就可以开拓出一个大概的原型出来。

| 后端做事器

后真个任务实际上便是向前端供应须要显示网页和 APP 内容的数据，可能是 HTML，也可能是JSON 数据，也可以是音视频或者 PDF 文件。
大略的来划分，一个做事器包含3个部分：

1/ HTTP 做事器

2/ 运用做事器

3/ 数据库

HTTP 做事器的唯一任务便是把须要返回给客户真个资源文件封装在 HTTP 数据包里，这个资源有可能是它后面的运用做事器动态天生的，也有可能是保存在硬盘上的静态文件。
这是所有后端程序都必须有的，也是直接和我们的浏览器通信，返回给我们数据的程序。
它的浸染便是把它后面的编程措辞天生的各种 HTML/CSS/Javascript，打包成一个 HTTP 要求，然后再封装到一个 TCP/IP 的数据包里发回给我们。
而最常用的两个 HTTP 做事器叫做 Apach 和 Nginx。

运用做事器便是常日意义上所说的码农卖力的部分。
他们的职责便是天生前端须要的HTML/CSS/JS 交给浏览器。

| 后端措辞

1/ .net/java

弘大，繁芜。
但 Java 的优点便是适宜处理特殊大的数据量，如果你的项目会很快实现大爆发，须要处理海量的要求，那么 Java 是一个不错的选择。

2/ PHP

可以快速上手，比较其他措辞，可以更快的为运用添加各种新功能。
当然，可掩护性就另当别论了。

3/ Ruby

非常靠近自然措辞，基本上纵然不懂编程，也能看明白 70% 或 80%。
04 年涌现了一个用 Ruby 编写的 Web 开拓框架 Ruby on Rails，当时的效果是非常震荡的，以前须要一个团队才能搞定的事情，利用 Ruby on Rails 后 1 个人就可以胜任了，以是 Ruby on Rails 在极短的韶光内就成为了 Ruby 的代名词，也成为了新手学习 Web 开拓的不二选择，但是 Ruby 措辞也并非十全十美，快的同时，他的最大短板便是性能。
Twitter 最早便是利用 Ruby on Rails 开拓的，但是随着用户数的逐步增长，Twitter 的宕机开始变得非常频繁，后来他们迫不得已将全体系统从 Ruby 迁移到到了一个从 Java 派生出来的措辞 Scala。

4/ node.js

大略来说，可以把 node.js 理解为跑在做事器上的 javascript，再直白一点，便是一个跑在做事器上的浏览器，由于 node.js 最早便是从 chrome 浏览器的Javascript 引擎 V8 中剥离出来的。
比较 Ruby，Node.js 程序可以得到更高的并发性能，这在一些高并发的场景下（比如群聊，多人协作等）会很有上风。

5/ 其它（python，closure 等）

6/ 无后端（leancloud）

无后端编程是最近的一个新趋势，但她并非说是真的没有后端，而只是把后端交给一些第三方的云平台，比如 Leancloud，Firebase 等。
如果你开拓一个手机 App，这样的好处便是你可以在早期没有后端程序员的情形下快速开工，像Leancloud 这样的云平台已经可以胜任大部分的运用处景，如果后期业务逻辑繁芜之后再探求得当的后端工程师迁移也不迟。

7/ 最强编程措辞 Lisp

如果要评比一个最强的编程措辞，该是哪个呢？答案便是Lisp。
为什么是 Lisp？Lisp 的作者在很早以前就从数学的层面总结了一个完美的编程措辞该当具备的 9 种能力，而 Lisp 便是为了合营他的这个理论而产生出来的措辞。
Hacker News 是由 YC 的创始人 Paul Graham 开拓的，而 Paul Graham 本身便是一个 Lisp 程序员，他为了开拓 Hacker News，专门发明了一种新措辞叫做 Arc，但由于它是基于 Lisp 的，以是也被归为了 Lisp 的方言之一。

| 数据库

我们平常访问的大部分网站都是须要登录操作的，登录之后我们看到的便是只和自己干系的那部分内容。
这些用户信息是保存在什么地方的呢？这就须要用到数据库。
关于数据库，代表性的有两个：

1/ MySQL

2/ MongoDB

MySQL 是最常用的构造化数据库，也是大多数创业公司的选择。
为什么是构造化的？便是说它的表的构造是固定的，比如我们常见的 User 表在 MySQL 中便是这样的：

如果我们须要取得一条用户记录来检讨他输入的密码是否精确，这时我们就须要利用 SQL，SQL 便是构造化查询措辞。

大略来说，SQL 数据库保存的是构造化数据，NOSQL 数据库则可以保存非构造化数据。
举个例子，还拿上面的用户表来举例，如果我们现在想要给产品集小妹增加一些额外的属性，比如她给某个产品点赞可以效果 x2，那么如果是 SQL 数据库，我们就须要给数据库增加一个新的字段来保存这个属性：

但是如果是 MongoDB 这样的 NOSQL 数据库，我们就不须要给所有用户都增加一个x2的属性，只须要给产品集小妹单独增加就可以了，NOSQL 中保存到数据是如下这个样子的：

| Cookie 和 Session

做事器要处理成千上万用户的要求，那么他是如何区分每个用户，并返回给每个用户他所须要的内容的 ？这就要涉及到 Cookie 和 Session。
我们可以将 Cookie 理解为是做事器给每个用户分配的唯一 ID，这个 ID 由用户浏览器保存，而 Session 则是做事器为了掩护这个会话在做事器端保存的与 cookie 对应的用户数据。

| 移动开拓

移动端和浏览器的差异就在于，大部分 App，我们打开的一瞬间，就已经看到了它的界面，而不用再去向做事器来拿显示界面的 HTML 等文件。
以是移动端，开拓原生运用所利用到的技能（比如 Objective C，swift）就相称于前真个 HTML，只不过它是直接保存在运用本地的。
这样就产生了一个问题：如何来获取运用数据？如果是网页运用，我们可以直接将数据包含在HTML 中一并反馈给浏览器；但是对付移动运用就须要有一个专门的协议来传送运用须要的数据，这便是 JSON。

移动运用的前端技能，目前来说紧张有以下三种：

1/ 原生

2/ 稠浊式

3/ HTML5

HTML5 必经要经由浏览器这个中间层，以是在性能上多少会有些丢失，以是如果你的运用对性能特殊敏感，原生就会是比较好的选择；对付普通的性能哀求没那么严格的运用来说，HTML5是完备可以知足的。
而如果已经有了一个移动真个网站，这种情形下稠浊式就会是一个比较好的选择，它可以最大程度的利用已有的资源。
如果说你是从头开拓一个移动运用，并且这个运用对用户体验的哀求也不是特殊严格，那么 HTML5 就会是一个很好的选择，HTML5 移动运用比较显著的运用便是 Dailycost 。

如果说开拓一个原生运用须要 4-6 周，那么同样功能的运用如果我们把个中的一部分用 HTML来实现，那么可能就只须要 3-4 周的韶光，但是如果我们全部利用 HTML ，可能就只须要1-2 周。

活动另一位高朋、 bearchat 工程师 Loddit 分享了关于数据抓取的干货知识和 tips ，感兴趣可前往 http://36kr_data_capture.meteor.com下载 PPT。
如果你有产品与创业干系的、想要通过线下磋商的话题或学习的主题，欢迎邮件xinyuan@36kr.com。
如果你是一位技能宅，也欢迎邮件指示。
最主要的是，欢迎加入 NEXT社区，不错过任何一款新产品和酷趋势的同时，也不错过与一批精良产品人、创业者的碰撞与谈论。