小奈：我想学习写代码？
大仁：为什么？
小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
小奈：他是不是骗我？
大仁：我等下和你解释，不过非要学也可以。
大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。
村姑：html
html是个乡下来的的丫头，她有基本的骨架和血肉。至于它的结构，我们可以把它想像成盒子，盒子套着盒子。
image.png
html非常单纯，比如说<h1>表示大标题，<p>表示段落，<img>表示段落。
html还有个非常有趣的标签，<a href='url'>某个链接</a>, 链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。
在互联网早期，网页都十分简陋。
禁用css后
在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。
好吧，后来浏览器大叔劝福它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。
化妆后
村姑后来就发脾气了，妈呀，天天出门都要打扮，很累耶。
化妆师 ：css
没办法，只能请专门的化妆师了。css真的是很神奇，把html打扮的美轮美奂的。
法宝1:选择器
面对着一个村姑，化妆师开始想办法了，首先是把整个html的结构定位出来。例如要找标题，html>head>title这样子才找到，化妆师直接规定 html head title 以后就是定位title了，类似的其它部件的定位也是如此。
image.png
部件都可以定位到了，定位到了之后就开始化妆了，例如把这个变成红色，字体20。
h1 {color:red;size:20}
法宝2:盒子
上面我们看到，盒子都是倒在这边去了，盒子和盒子间的距离不行，这样子排版很丑耶，所以给这些盒子添加了支架，固定它们的位置。
- 边框（border）： 可以设定宽窄，样式，颜色
- 内边距(padding)： 内容到边框的间距
- 外边距(margin)： 边框到相邻元素的间距
image.png
我是邪恶的代码分割线
简单例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品经理的技术课堂</title>
</head>
<body>
<h1>产品经理的技术修养</h1>
<p>产品经理的第一行代码</p>
</body>
</html>
用代码做自己介绍
<!DOCTYPE html>
<html>
<head>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<pre id="jack" class="saying"></pre>
<div style="display:none" id="w">
hello 大家好 我是jack，我想让技术变得有趣，
今天教大家用代码介绍自己。
首先要先介绍几个东西，html标签，
大家可以把它想像成箱子套箱子。html 它本身最大的箱子
head 它的头部
body 它的身体
div 这个就是真正的箱子，可以一个套一个经常有产品新人问我技术问题。
像是前后端的区别？数据库是怎么样的？如何和研发沟通？
回答的多了，就想系统化的回答，写一本书，
让技术变得通俗易懂、有趣。
6年间，从技术小白到工程师再到后台、数据产品经理，
2000多个日夜，为代码、需求绞尽脑汁、也在创业路上走过，
百感交集。
本书以小说故事的形式、场景化讲解技术，让枯燥的技术变得有趣。
/div> 这个箱子需要用这个来启动<>
</div><script language="javascript">
var index=0;
var word;
function type(){
var typePanel = document.getElementById("jack");
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = "";
}else if(index % 3 == 1){
typePanel.className = "saying";
}
}
window.onload=function(){
word=document.getElementById("w").innerHTML;
setInterval(type, 200);
}</script>
<style>
.saying:after {
content: "|";
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 0;
display: inline-block;
vertical-align: baseline;
opacity: 1;
animation: caret 500ms infinite;
}
</style>
</body>
如何与开发沟通？
小奈：产品经理面对开发时，需要懂技术到什么程度，怎么样才能合理沟通？
大仁:和你说实际案例吧，有两个技术出身转的产品，一个是我，一个是某大公司的。我刚转产品的时候，很自然的会想技术细节，这时候其实开发是反感的，有种侵犯他们领域的感觉。
另一个的那位产品经理则是装不懂，实际上他技术比开发还牛。所以还是尊重开发、相信他们的专业能力（菜鸟除外）。
小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
大仁：这个还是沟通问题，其它平台和自家平台，在架构以及阶段等很多方面可能不一样，开发能力也不一样，你是想知道他有没有骗你？你可以问另一个开发，但我建议你和他搞好关系。
建议
1、产品经理要懂技术，这样才能理解开发，在一些功能实现可能性做取舍，和开发无障碍协作，顺利推进工作。
2、产品经理的沟通能力很重要，入职第一件事是融入团队，有点像地头蛇，大家都比较喜欢她/他。
3、提出清晰明确需求，与开发沟通好进度。
4、非要写代码的话建议从html和js学起，会技术的产品经理可以随时验证自己的想法
网友评论