产品经理技术进阶丨学习笔记_html/css_WEB-ITnose

【文章摘要】知乎上很火的一个问题是：『 产品经理 需不需要懂技术？需要懂到什么程度？』

答案显而易见，当然需要懂。懂到产品经理能够顺畅地与技术人员沟通，正确评估一个功能的技术实现难度，合理地向提出开发需求，准确把握、推进项目进度为止。

还有一个误区是：产品经理懂技术就是要去写代码，会写代码=懂技术。事实上，一个懂技术的产品经理需要了解的是：技术名词、开发流程、开发逻辑、开发系统、开发成本、开发人员分工。

小喵正好这两天看了36氪的「产品经理从零到一技术进阶：不懂代码也能愉快地与开发相处」（链接见文末）。故写此文，总结元一老师提到的知识点，并结合小喵自身在技术领域的学习经验，梳理用户行为背后的技术名词和原理，以及如果产品经理希望进一步学习相应的技术知识可以从哪些网站获得资源和指导。

上图基本涵盖了一个产品经理需要知道的所有基础技术入门知识。

前后端的划分，可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术；而后端就是负责将这些东西封装在 HTTP 的数据包中然后通过网络传送到前端。前端包括 HTML，CSS，JavaScript，jQuery 以及 Bootstrap ；后端包括 HTTP 服务器，后端编程语言，数据库以及 Cookie 和 Session。

前端与后端

前端

• HTML : 网页的名词
• CSS：网页的形容词
• Javascript：网页的动词

一个完整的HTML页面的代码框架中，CSS文件和JS文件是单独存在的。如下图：

• 响应式：

响应式的核心就是让同一个网页可以在不同设备上呈现出不同的显示效果，主要是通过 CSS 来实现的。如下图：

意思是如果屏幕宽度大于480px，则颜色显示为红色，否则为绿色。

• jQuery与Bootstrap

jQuery 是一个优秀的 Javascript 库。jQuery 使用户能更方便地处理 HTML ，它能够使用户的 HTML 页面保持代码和 HTML 内容分离,通过 jQuery ，可以不用在 HTML 里面插入一堆 JS 来调用命令，只需要定义 ID(类似js的选择器) 即可。

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它是一个CSS/HTML框架。

前端学习资源：

初学地址： w3schools

简单实战： Code Academy

开始驾驭： One Month

Javascript： JavaScript教程-廖雪峰的官方网站

后端

后端包括HTTP服务器、应用服务器和数据库。

HTTP 服务器的唯一任务就是把需要返回给客户端的资源文件封装在 HTTP 数据包里，这个资源有可能是它后面的应用服务器动态生成的，也有可能是保存在硬盘上的静态文件。它的作用就是把它后面的编程语言生成的各种 HTML/CSS/Javascript，打包成一个 HTTP 请求，然后再封装到一个 TCP/IP 的数据包里发回给我们。

应用服务器就是通常意义上所说的码农负责的部分。他们的职责就是生成前端需要的 HTML/CSS/JS 交给浏览器。

静态后台：

后端语言：

如果要学的话，Ruby和PHP比较好学。

学习资源：

• Code Academy
• 《七周七语言》- 图灵出版社

数据库：

1） MySQL：关系型数据库

数据库定义了存储信息的结构。

在数据库中，存在着一些表。类似 HTML 表格，数据库表含有行、列以及单元。

在分类存储信息时，数据库非常有用。

下面是一个名为 “Persons” 的表的例子：

学习资源：《MySQL必知必会》

2） MongoDB: 非结构化数据库

学习资源：

• Coursera课程
• mongoDB中文社区
• 《七周七数据库》- 图灵出版社

区分用户并返回信息：Cookie和Session

我们可以将 Cookie 理解为是服务器给每个用户分配的唯一 ID，这个 ID 由用户浏览器保存，而 Session 则是服务器为了维护这个会话在服务器端保存的与 cookie 对应的用户数据。Cookie保存在浏览器端，Session保存在服务器端。

移动端

移动应用的前端技术：

• 原生：适合对速度、性能特别敏感的应用，如拍照、视频类应用（4-6周）
• 混合式：适合已有Web端，可以以最低成本将Web端内容迁移到移动端（3-4周）
• 纯HTML5：除了以上两种，其他情况均适用（1-2周）

本文由 产品100 为你推荐并呈现

文章来源：简书

文章作者：粽小喵 

友情提示：

若出处标注错误，请联系QQ：2977686517及时更正，感谢理解和支持！

少年关注我们的官方微博@产品100和微信订阅号：chanpin100ghsd，有惊喜哦！