Web产品的一些技术知识

作者: 唐杰 分类: 产品设计 发布时间: 2012-12-10 01:31

不懂技术的产品经理不是一位好设计!前两天发布了一个原创WordPress主题,有位PM朋友下载研究了一下,并问了一些问题,结合他的提问我决定写一篇Web产品的相关技术知识。

今天我要讲的内容基本上都是技术原理的一些知识,主要是罗列出来并做一些简单的介绍,更深入的研究推荐Google一下,看看相关的百科介绍,作为产品经理如果能够知道这些知识,那么基本上算是马步扎稳了。

1、B/S结构

首先要讲到是Web产品的结构,Web产品是属于B/S结构(Browser/Server,浏览器/服务器),这种结构我们只需要考虑到服务器的负载而不用担心用户设备的性能,因为很多事浏览器已经帮我们解决了,当然这种结构模式拥有一个无比头疼的问题,那就是跨浏览器的兼容,当然这是前端工程师的事了(嘿嘿),不过,作为产品经理,必须要知道哦,例如有些功能特效在IE6浏览器里,那就…

补充:对于B/S,是要考虑浏览器和服务器两端的性能的。在浏览器上跑JS,载入瀑布流页面,大量图片等都可能过多的消耗资源,逻辑不合理的页面甚至会不断消耗导致浏览器崩溃。产品经理在制定性能规格的时候,页面打开时间其实是B和S双方的考核,所以现在有lazy loading这样的技术从用户体验上加速。(撰写者:jwings)

2、技术框架(PHP框架)

技术框架太偏向于技术层面的知识了,不过对于产品经理来说,如果能够掌握相关原理,那么在以后的产品规划中,能够帮助我们做很多资源整合和资源复用的工作,减少技术资源成本,当然这些更多是技术负责人考虑的问题了,但是如果我们PM也懂原理知识的话,在沟通上就方便多了。

3、模板引擎

模板引擎最典型的案例就是CMS系统的架构,通过模板引擎让我们实现了前端界面和系统架构分离,无论任何一方的升级改良都不会影响到另一方。WordPress主题就是模板文件,由模板文件定义前端界面的展现风格,模板标签调用数据,实现数据内容的显示。

通常最基本的模板引擎文件分为:首页、列表页、内容页。由于每一页的头部和尾部是一样的,所以这三页又拆分成:头部、中间内容、尾部。三页共用头尾部,只是中间内容不一样。如果你了解Axure软件的话,应该能够明白,这和Axure软件中的Masters是一样的原理。

TangStyle主题的结构如下:
首页组成部分:
header.php 头部
index.php 中间左侧(列表)
sidebar.php 中间右侧(Widgetable侧栏区)
footer.php 尾部

分类列表页组成部分:
header.php 头部
category.php 中间左侧(内容列表)
sidebar-category.php 中间右侧(Widgetable侧栏区)
footer.php 尾部

内容页组成部分:
header.php 头部
single.php 中间左侧上(内容)
comments.php 中间左侧下(评论)
sidebar-single.php 中间右侧(Widgetable侧栏区)
footer.php 尾部

由于我每一页都重新定义了一次Widgetable侧栏区,为的是分开管理首页、列表页和内容页的侧栏,当然他们也可以和首页共用一个侧栏。

以上就是我写的TangStyle主题的模板文件,由WordPress模板引擎索引并显示。(当然这只是简单的描述,模板文件里还有其他的一些文件,这里就不多介绍了。)

4、插件扩展

一般情况下,技术框架都会有一套内在的API接口,用于实现一些相对独立的技术功能,例如计划任务。这个技术知识没有统一的理解,也会根据不同的产品需求有不一样的结构规划,主要应用在平台级产品中,例如WordPress就有一套系统插件的机制,如果有兴趣可以看看官方的相关介绍,这里我就不多介绍了。

5、CMS

我个人觉得,每一位产品经理都应该非常了解CMS系统的架构,因为这是一套最基本且可扩展性很强的平台级产品架构。推荐PM们在自己的电脑里配置一个PHP环境,多多下载体验一些Web产品,多了解各种类型的产品结构,这对我们以后规划产品时非常有帮助的。这篇文章里讲到的所有知识在CMS系统里都有体现。

6、开源程序

开源的英文是Open Source,意思是开放源码,也就是说开源程序是一个开放源代码的程序,技术框架就是一种开源的项目,很多热心的个人或组织将自己积累的技术框架开源出来,提供给大家使用。

之所以我提到开源程序,是因为上一条我推荐大家多多使用开源的Web产品,了解更多的产品结构,所以这里我介绍几个比较知名的开源Web产品,当然都是PHP语言开发的。

Discuz(被腾讯收购)、PHPWind(被阿里巴巴收购)、PHPCms(被盛大收购)、ThinkSNS(功能类似新浪微博,但是开发出来比新浪微博早)、WordPress(应用最多的Blog系统,国内各大公司的UED团队博客都是使用的这套系统)、EmpireCMSDedeCMS(国内知名的CMS系统)

就介绍这几个了,国内外开源的程序挺多的,基本上B2B、B2C、C2C、BBS、SNS、O2O等等模式的开源程序都有。

7、Rewrite

Rewrite在IIS和Apache中的手法是不一样的,但是实现的结果是一样,当然这个我们就不需要深入了解了,我们首先需要知道,Rewrite是一种服务器的重写脉冲技术,它使得服务器可以支持 URL 重写,是一种很流行的服务器技术。

这是偏向于服务器技术的知识了,之所以拿出来介绍,是因为很多程序都运用了这项技术,在SEO方面最常见的称呼是:伪静态

真静态就是程序生成真实存在的html静态文件,而伪静态就是利用Rewrite技术实现静态需求。像我的博客文章:https://tangjie.me/blog/64.html 实际服务器上并没有真实存在blog这个文件夹,也没有64.html这个静态文件,他是由Rewrite技术实现的URL重写功能,重新定义了URL的请求。https://tangjie.me/tangstyle 在服务器上也是没有tangstyle这个文件夹的。

伪静态的好处就是重写了URL,方便搜索引擎索引,也方便用户记忆,因为URL简化了。

8、API(应用程序编程接口)

随着移动互联网和开放平台的发展,产品的多方面拓展需求增强,因此产品规划中对API的需求也会更加重要,因此API的相关知识对于PM也是相当重要的。
这里推荐一篇我之前写的文章:产品规划中的后端规划,后端规划中的API规划

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

24条评论
  • 大卫先生

    2014年4月11日 11:57

    受教。目前在研究中。

  • 绍兴租车

    2013年9月30日 08:23

    杰哥,能推荐几本打基础的书不?万分感谢

    1. 唐杰

      2013年10月1日 08:49

      我不是学技术的,所以看技术书少,没有技术方面的书推荐。

  • 儿童手机

    2013年8月1日 10:42

    你的这个主题模板就不错 就是太白了呀

  • Pingback: 写给PM新人的一堆话 - 产品经理@唐杰
  • Pingback: 博客总结,文章汇总:产品经理的成长之路 - 产品经理@唐杰
  • CHS

    2013年1月4日 19:26

    你好,感谢你的主题,经过一个下午的调试,满足了我99%的要求。 有个困扰的地方是: 你的博客中,边栏的分类目录,后面括号里有该分类文章数的统计, 请问这个是如何实现的? 我找遍了WP中的设置也没找到。打扰了。

    1. CHS

      2013年1月4日 19:29

      你好,已经解决了。在你这发完评价后,突然灵光一闪,找到设置了。呵呵。其实很简单的一个设置,居然找了一下午。

    2. 唐杰

      2013年1月4日 20:11

      哈哈,就是一个选项,打个勾

  • CHS

    2013年1月4日 15:55

    你的设计不错,很简约很干练。 请问你的文章编辑器用的是哪个?WP自带的吗? 我想实现你博文中的标题高亮(有点像代码高亮的那种效果),也就是你文章里标题”1、B/S结构“的那种效果,请问如何实现? 谢谢了。

    1. 唐杰

      2013年1月4日 15:59

      自带的编辑器,这个高亮是h5标签

    2. CHS

      2013年1月4日 16:14

      谢谢你的及时回复。已经解决。谢谢你的主题哦。真的很好。

  • 高高

    2012年12月30日 21:36

    请问你的空间是国内的还是国外的呢?很快哦,想向你咨询下,我的qq是277591234.望不吝赐教。谢谢

    1. 唐杰

      2012年12月31日 10:53

      香港的

    2. gaogao614

      2013年1月4日 17:32

      我觉得挺快的哦,能否推荐使用呢

  • W3Cshare

    2012年12月25日 16:32

    我已订阅,得多学学产品这一块,题外话:北京是个好地方,一定要去

  • zeroten

    2012年12月20日 19:58

    由于我每一页都重新定义了一次Widgetable侧栏区,为的是分开管理首页、列表页和内容页的侧栏,当然他们也可以和首页共用一个侧栏。

    请问如何共用?

    1. 唐杰

      2012年12月20日 20:27

      后台小工具里,你分别增加侧栏,如果一样,就放置一样的小工具

  • Jerry

    2012年12月17日 17:39

    好主题,赞一个!

  • 小森

    2012年12月12日 10:19

    杰哥,能推荐几个圈内的群加一下吗

    1. 唐杰

      2012年12月12日 16:56

      PMcaff达人群:120085602

      我在里面灌水中,其他群没什么好推荐的,群基本上都是闲聊,想学东西还是看看博文和看几本书,博文可以订阅各大公司的UED团队博客,书可以系统化的梳理一下知识。

  • 唐杰

    2012年12月11日 14:02

    文章补充:对于B/S,是要考虑浏览器和服务器两端的性能的。在浏览器上跑JS,载入瀑布流页面,大量图片等都可能过多的消耗资源,逻辑不合理的页面甚至会不断消耗导致浏览器崩溃。产品经理在制定性能规格的时候,页面打开时间其实是B和S双方的考核,所以现在有lazy loading这样的技术从用户体验上加速。(撰写者:jwings)

  • 邹小阳

    2012年12月10日 16:49

    博客没有订阅功能,能订阅,可否加上

    1. 唐杰

      2012年12月10日 16:52

      右上角的“关注我”里面有订阅

回复 邹小阳 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注