Prower - 记录成长过程

iOS中为网站添加图标到主屏幕以及增加启动画面

摄氏度 — Wed, 16 May 2012 22:12:16 +0800

虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。

既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。

添加图标到主屏幕是Web App的第一步：

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">
添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在，图标的尺寸就需要做4个：144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes尺寸来告诉设备该调用哪个图标。

有了图标还不够像，还需要加上启动画面：

启动画面的图片尺寸并非完全等于设备的尺寸，比如iPad2的尺寸是1024×768，但它的启动画面尺寸横向是1024×748，竖向尺寸是768×1004，因为需要减去系统状栏的高度20px，而使用的Retina屏幕的iPhone4以及iPad3则需要减去状态栏的高度40px。

Web App运行起来要像Native App，那么就要去掉Safari的一些默认控件，比如地址栏、状态栏之类的。

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
apple-mobile-web-app-capable是用来定义应用全屏展示的；在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效；format-detection的值用于启用或禁用自动检测在网页中可能出现的电话号码；

viewport并非Safari的私有属性，width用于指定宽度，initial-scale指定初始化的缩略比例，minimum-scale指定缩小的比例，而maximum-scale则是放大的比例，当然这些缩放都取决于user-scalable——决定用户是否能缩放页面。

iOS电子书阅读页面截图

摄氏度 — Tue, 01 May 2012 18:11:55 +0800

在iBookstore未正式进入中国的前提下，国内的电子书出版商们纷纷搞起了单行本，将每一本图书做成一个APP以便于在App Store销售。

毫无疑问，唐茶计划是目前国内在iOS电子书阅读领域做得最好的，不管是内容选题、视觉设计还是操作流畅上，都做得很棒，尤其值得一提的是内置的“信黑体”字体。

因为唐茶版的电子书都是双版本的（iPhone和iPad），所以内置了帐户登录进行数据同步。最早时唐茶推出的电子书正文段落是很诡异的空一格的形式，这个引起过一些探讨，后续更新的版本里提供了空一格还是空两格的设置切换。

另外，唐茶前不久推出了书城项目——字节社，完全放弃单行本的模式，便于书籍管理。

多看的电子书是我看过的几本里面最花哨的，看看各种颜色的字体，又是讨论，又是搜索，又是微博的，又是内容推荐，里面竟然还有双指横向移动操作！

磨铁数盟的iOS版本图书并不是磨铁自己的团队出的，至少目前不是，是跟脉望图书团队合作的，我猜应该是脉望图书团队提供技术，而磨铁提供内容吧。

磨铁虽然也提供了双版本，但不同版本之间的内容不能同步，虽然功能比较精简，但并没有做到精益，功能上，侧边的那个目录列表尤其难以拉出，内容上，每小节都会出现的那无意义的摘要内容。在阅读的过程中，竟然还出现了一次丢失阅读进度。

当然，从这个截图里也可以看出，标题的阴影非常的难看，实际比截图更难看。

南周新媒体出的《三体》是读过的几本里面唯一支持白天黑夜模式的电子书，整个APP做得跟内容比较贴切，科幻感很强。界面上提供帮助，内容上内置了实时更新，每一次打开都会弹出提示是否更新修正的内容，但这个提示太过于频繁。

内置更新的好处是，订正内容时可以随时发布，不需要等积累到一定程度然后发布APP更新。

云中书城的iOS电子书价格是最不稳定的，每次新书上线时，都会有短时间的限免，然后时不时再限免一下之类的。云中书城的电子书，也是唯一在iOS上是单版本，也就是只有iPhone版本。

翻页的时候，偶尔会有轻微的卡顿现象，不过据Twitter上一些同学反应，在阅读韩寒的《1988：我想和这个世界谈谈》时，翻两页就直接卡死的现象频发。

DFP广告管理系统的一些使用经验

摄氏度 — Sat, 28 Apr 2012 14:09:26 +0800

不得不说，Google的DFP广告管理系统是个很牛逼的产品，对于需要进行站内广告管理的网站主来说，这是一件得心应手的武器。多种广告模式设置，再配合Adsense广告联盟，使得站内的广告位置得到最佳的利用，还有广告客户管理，提供广告数据给客户查看等。不管是管理多个网站，还是只有一个网站，网站主们都不应该错过这个工具。

虽然DFP是一个非常强大的广告管理工具，但新手刚接触这个系统时，操作逻辑上会存在一些绕弯（也许是我理解能力有差异），所以说一说我之前在DFP广告管理系统标准版上的操作错误以及经验。

1、可用广告资源不足

新建的广告订单时，可能会提示“可用广告资源不足”的提示，但明明是可以确定有空置的广告位的。其实这个并非真正的可用广告资源不足，而是DFP的一个问题，不知是BUG还是特意为之的，新订单在刚添加的时候基本都会提示这个，这个时候就要勾选“超量预订此订单项”，保存就可以成功了。据说这个提示在订单刚添加好的前几天，如果检查广告资源的时候都会提示这个，大概过七天之前就会提示正常。

2、广告单元与展示位置

比如说同一个侧边栏有两个相同尺寸的广告位置，那么新建一个”Sidebar”的展示位置，然后在建两个”Sidebar-Top”、”Sidebar-Bottom”的广告单元，这两个广告单元属于这一个展示位置。

似乎这样的描述是正常的逻辑行为，但这样做的结果就是，两个不同广告单元里的广告会互串，无法固定A广告显示在”Sidebar-Top”，而B广告显示在”Sidebar-Bottom”，展示位置才是唯一固定的地方。也就是说展示位置不能往大了写，如果要固定某个广告的显示位置的话，只能建”Sidebar-Top”跟”Sidebar-Bottom”两个展示位置。

广告单元与展示位置是两个相对的属性，一个广告单元可以从属于几个展示位置，一个展示位置也可以包含几个广告单元。

3、生成广告代码

广告要在页面里显示，就需要在页面里植入广告代码，每个广告单元都是单独的代码。代码分为两段，一段在<head>标签里，另一段则是在具体的广告位置所在。但与Adsense的广告代码里ID是固定不同的是，DFP的广告单元代码，每点一次“生成代码”，代码里的ID数值都会变化，所以两段广告代码一定要在同时植入到页面代码里。

如果第一次生成的代码里只复制了<head>部分，第二次生成再复制具体位置的代码，那么就会造成两次广告代码里的ID不一样。

4、订单状态

新添加的订单并非实时生效的，添加完新订单项后还需要审核才能生效，即使页面里已经显示出广告内容了，订单里的状态可能还需要一点时间才能正常显示“正在投放”。

5、广告类型

如果是按时间买断的广告位置，广告类型一定要选择“赞助”，才能在目标那里设置100%展示。

6、报告

报告不像AdSense的效果报告那样，每天自动生成，DFP里的报告需要手动生成才能显示。

7、关于展示次数

这一点，到现在我也还疑惑着。

DFP的广告展示次数似乎并不是由具体的展示位置那里的代码来统计的，而是由添加到<head>标签里的那段代码来统计的，这也就意味着如果在首页跟内容页各添加一个展示位置，这两个展示位置里各有一个类型为“赞助”的广告内容，那么这两个广告内容的展示次数将是完全一样的。

显然，首页跟内容页的PV值是不太可能完成一样的。

创业观——《创业36条军规》

摄氏度 — Wed, 25 Apr 2012 13:30:34 +0800

每一次搬家时都要丢弃一些书，所以几次搬家下来，就开始尽量避免再买实体书箱，最近则改为购买电子书。这本《创业36条军规》是购买的多看的iOS版本，在iTouch上断断续续的翻看完了。

购买移动端的电子图书的好处就是，随时可以带在身边，想看的话随时可以拿出来看，当然论阅读体验的话，还是不能跟纸质书比较的，毕竟阅读纸质书有一种“感觉”上的优势。

随着近几年移动互联网的爆发，似乎“创业”这个词也随之火热起来，各种创业的宣传，甚至于鼓励大学生去创业之类的事情层出不穷。但是，创业真的没有这么风光。也许在外人看起来带个“创业”两字就风光牛逼起来，但事实真不是这样，创业过程中的种种困难阻碍，只有创过业的人才深有体会。

与其说，创业是一种职业历练，不如说是一种人生历练，甚或者说是一种心理锤炼。

当越来越多的人踏上创业这条路，并不能证明创业这个事情越来越容易，相反失败的人也愈发的多了起来。只能说创业开头也许是容易的，但结局并不一定能让人容易起来，甚至大部分的结局都是沉重的。

在创业这个事情上，心态是关键。

反过来说，创业其实是一种心态，不管是身在哪里。

如果还没有开始自己创业，但创业之心已萌生已久，那么推荐阅读《创业36条军规》，也许读完第一部分《创业是怎么回事》，兴许你会改变想法，踏上另一条光明之路也是好事；如果已经走上了创业之路，那么更应该阅读本书，也许不经意间能解开心里存在已久的迷结。

虽然本书里并没有提供多少案例，还有些比较深奥的理论点，但仍不失为一本创业指导书。当然，指导旨在提供一份经验参考，没有人会比你自己更了解自己的事业所出现的问题，只要你认真的思考过。

经验可以传递，但不能传承。经验只能靠自己去积累，别人能给予的只是别人积累下来的经验，对于你来说，只能提供一个参考。

我们之所以会失败，是因为没有经验；我们之所以没有经验，是因为我们还没有失败过。

人生那么长，去感受几次失败又如何？

亚马逊购买：创业36条军规

iOS版购买：iTunes

图片主题ReeooV3发布

摄氏度 — Wed, 18 Apr 2012 20:35:45 +0800

随着屏幕的分辨率越来越大，之前ReeooV2版的呈现方式已经有些浪费了，特别是1366×768的分辨率已经超越1024×768成为使用最广的屏幕分辨率，所以对Reeoo.com进行一次整体的改版。

首页截图：

内容页截图：

ReeooV3版相较于ReeooV2版，除了版式呈现方面的改进之外，还有一些功能上的改进，主要功能点：

屏幕分辨率自适应，当然这个自适应只是根据分辨率来决定一行内容显示的多少；
支持自定义菜单；
支持小工具；
评论功能；
文章页显示6个随机文章；
自带AddThis的社会化分享（如何修改ReeooV3自带的AddThis社会化分享？）；
自动获取文章第一个图片并使用timthumb.php函数来获取缩略图（如果对主题使用timthumb.php函数来获取缩略图有不同看法，或者主机不支持这个缩略图函数的方法，可以查看这个问题进行修改：如何更改ReeooV3主题的缩略图为特色图像方式？）；
增加了Pagebar插件的CSS样式；

更多的功能需要你自己来体验。

推荐使用Pagebar插件来做分页，Pagebar的插件设置那里，开启自动插入即可，或者使用手动代码载入效果更好。同时推荐对于“上一页”以及“下一页”的内容设置使用“^”以及”V”来替代，然后“Leading text”处留空，形式更好看。

再配合之前的Reeoo移动版主题来使用，iOS、Android用户访问效果更佳。

主题支持最新版的WordPress程序，同时测试了IE7～IE10，基本没有问题，当然使用Chrome、Firefox等浏览器的最新版访问效果更好。

有任何关于ReeooV3主题的使用问题，欢迎在 WordPress问答里以 ReeooV3 的标签进行提问，我会尽可能尽快的回答你，更多关于ReeooV3主题的使用帮助：http://faq.wopus.org/tag/reeooV3/ 。

几个可能会用到的问题解答：

老规矩，使用主题请保留底部主题链接，这是对劳动成果最起码的尊重！

主题下载：ReeooV3

Wopus下载：ReeooV3

游济南

摄氏度 — Thu, 12 Apr 2012 14:18:40 +0800

与泰山的干涸相反的是，泉城济南却是一派江南景色，绿荫垂柳、流水潺潺。尤其是大明湖里，当轻风吹过时满天飞舞的花瓣，还有在水面上摇曳着倒影的垂柳，这个时候应该是最适合游济南的季节了。

可惜声名在外的趵突泉，却已几不可见，其它小一点的泉眼更是犹如鱼吐泡一般。据说现存的泉涌比较“猛”的是黑虎泉了，不过没有去一睹真容。

虽然大明湖畔没有了夏雨荷，不过各色繁花、飞舞柳枝、青翠枝叶，却是相当好看。

树上绑满了许愿带，某人也写了一条，上书“2B青年欢乐多”…

芙蓉美食街，貌似济南人都吃得比较咸一些。

据说是济南百年名吃——油旋：

登泰山

摄氏度 — Thu, 12 Apr 2012 13:49:28 +0800

这个季节的泰山似乎还没有到最佳的旅游时间，但也正是如此，登山的游客很少，相对而言可以慢慢的观赏，而不是观赏满是人头的场景。虽然之前登过海拔1900多米的武功山，也登过海拔接近1500米的庐山和天柱山，虽然之前登过的这些山们基本都只要三个小时以内，但泰山的确目前为止我登过最困难的山，距离远、阶梯陡，尤其是最后阶段的“十八盘”！

因为没有准备看日出，所以也没有住在山上也没有夜登泰山，住在火车站边上的快捷酒店里，然后在清晨开始登山，在山顶做了短期逗留，然后又接着下山，全程步行耗时9个多小时，个中艰难登过的人才知道。因为缺水，景色不是非常好，但乐在登山的过程。

迎着朝阳就开始了登山的行程：

登山路上，有很多这样的庙或祠：

可惜了这老树，已然死去：

整个泰山几近干涸，乱石之中没有潺潺细流，瀑布也成了小水滴：

泰山的几大景观，比如迎客松、飞来石，这个也许怪我拍得不够好，跟以前图片所见相差太多：

我一直在怀疑这些所谓的“情人锁”还没有生锈，也许锁上刻的名字的两人早已分飞：

没进岱庙，来张岱庙的城墙：

JavaScript Slider效果实现思路

摄氏度 — Fri, 30 Mar 2012 16:17:28 +0800

有些事现在不做，以后就不会做了。这句话被我在N种场合下用了N次之后，我终于重新翻开4年前买的《JavaScript DOM编程艺术》了，老老实实的开始重头学JavaScript了。

写JavaScript的思维与CSS相差太大了，以至于现在还是云里雾里的，运用这些天学的粗浅的JavaScript和DOM知识绞尽脑汁写个轮播图，回顾一下整个思路，路过的高手请多多指点。

先出个网页的基本HTML结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Javascript Sliders Demo</title> </head> <body> <header> <h1>JavaScript Sliders</h1> </header> <article> <div id="slider_box"> <button id="prev"> « </button> <button id="next"> » </button> <ul id="slider"> <li><img src="images/1.jpg" width="600" height="400" alt="1" title="1"></li> <li><img src="images/2.jpg" width="600" height="400" alt="2" title="2"></li> <li><img src="images/3.jpg" width="600" height="400" alt="3" title="3"></li> <li><img src="images/4.jpg" width="600" height="400" alt="4" title="4"></li> <li><img src="images/5.jpg" width="600" height="400" alt="5" title="5"></li> </ul> </div> </article> <footer>2012 © prower.cn</footer> </body> <html>

再填入相应的CSS样式，以让页面更好看些：

这样一个静态的HTML页面就好了，结构层跟表现层都具备了，接下去是需要加入JavaScript，赋予它行为层。

因为轮播图是想要滚动的效果，而非隐现的效果，所以需要将图片列表使用绝对定位一字排开来，通过getElementById以及getElementsByTagName遍历出图片列表的HTML结构，并通过for循环为每个li标签追加上样式。为避免浏览器不支持预留退路，在声明函数的同时先加一个判断：

function sliderShow() { if(!document.getElementById && !document.getElementsByTagName) return false; var slide = document.getElementById("slider"); var slideli = slide.getElementsByTagName("li"); for(var i=0; i<slideli.length; i++) { slideli[i].style.left += i * 600 + "px"; }

如果滚动时是修改li的left的值的话，那么滚动一次就要把所有的li的left值都修改一遍，这样太复杂了。既然li已经通过JavaScript分别追加了样式上去，并且都是绝对定位，那么滚动的时候只需要滚动ul这个元素就可以了。

先将HTML里的两个button元素以及ul元素赋值给变量以方便操作，同时为ul元素追加用于滚动时的样式，并通过parseInt将这个字符串转换成数值以便于操作：

var prev = document.getElementById("prev"), next = document.getElementById("next"); var sli = document.getElementById("slider"); sli.style.marginLeft = "0"; var xpos = parseInt(sli.style.marginLeft);

根据li元素的宽度，要显示滚动的话，等于是点击一下button需要滚动相应的正负600px，而当超出最大或最小值时，这个函数就要停止，否则会陷入一直滚动且这个值越来越大不会被清除，然后将每一点点击所获得的最新值传递给ul：

next.onclick = function() { if(xpos < = -2400) { return false; } else { xpos -= 600; sli.style.marginLeft = xpos + "px"; } } prev.onclick = function() { if(xpos >= 0) { return false; } else { xpos += 600; sli.style.marginLeft = xpos + "px"; } }

最后，当网页载入的时候，执行这个函数：

window.onload = sliderShow;

这样一个简单的轮播图效果就做好了，但是当点击button切换图片时，却一点没有滚动的效果！因为每一次Button的点击都是以600px做为一个单位，而并非是以600px做为一个区间，有一个渐加或是渐减的行为。

于是再写一个有一个逐步过程的moveElement()函数：

function moveElement(elementID,gap,interval) { var elem = document.getElementById(elementID); var xpos = parseInt(elem.style.marginLeft); if(xpos == gap) return true; if(xpos > gap || xpos < gap) { var glist = Math.floor((gap - xpos)/10); xpos = xpos + glist; } elem.style.marginLeft = xpos + "px"; var move = "moveElement('"+elementID+"',"+gap+","+interval+")"; movement = setTimeout(move,interval); }

同样需要对之前的sliderShow()函数里点击的部分进行一些修改，当产生点击行为时运行moveElement()函数，并且每运行一次对ul的margin-left属性值进行一个600px的加或减，当margin-left的值位于位移的位置之间时函数才执行：

var elem = document.getElementById("slider"); if(!elem.style.marginLeft) { elem.style.marginLeft = "0"; } var xpos = parseInt(elem.style.marginLeft); next.onclick = function() { if(xpos > 0 || xpos <= -2400) return false; moveElement("slider",xpos -= 600,20); } prev.onclick = function() { if(xpos >= 0 || xpos < -2400) return false; moveElement("slider",xpos += 600,20); }

这里的渐进效果是有一个累加的过程，所以使用Math对象的floor属性来调整输出为“小于”方向的整数，但只有当点击Next的按钮时，使用Math.floor取出来的值才是正确的，而点击Prev按钮时，这个值就不正确，因为这之间有一个大与小的区别，于是对这里再做一些修正：

if(xpos > gap) { var glist = Math.floor((gap - xpos)/10); xpos = xpos + glist; } if(xpos < gap) { var glist = Math.ceil((gap - xpos)/10); xpos = xpos + glist; }

这样有一个缓冲滚动效果的轮播就做好了，但是，每一次点击都要小心翼翼的，因为如果当上一次的点击触发的moveElement()函数还没有执行完的话，再进行一次点击，就会导致函数的计算出错，就永远也到不了想到的位置。于是需要使用clearTimeout()函数清除积累在setTimeout队列里的事件：

if(elem.movement) { clearTimeout(elem.movement); }

这个的前提是将全局变量movement转变成elem的属性

elem.movement = setTimeout(move,interval);

这样一个基本款的轮播功能就实现了，演示地址及全部源码看这里：JavaScript Slider

路过的高手请指点一下思路里的不周之处以及更优雅的实现方法，谢谢！

Reeoo移动版主题

摄氏度 — Thu, 22 Mar 2012 19:36:24 +0800

移动设备多了，直接访问网页的机会也多了，而Reeoo.com做为一个纯图片的博客，网页版上略显饱满的布局方式显然不太适合移动端的浏览，于是准备做一版专门用来给移动设备访问的主题。

当然其实这并不是一个基于WordPress的真正完整的主题，这个主题其实是基于WPTouch插件的（所以要先在博客上安装WPTouch插件哟），但是由于使用的是免费版本的，所以不能自己另外新增主题，但直接拿默认主题进行修改也是可行的。

WPTouch插件默认的主题，功能比较完整也很强大，但Reeoo.com所使用到的WordPress功能是有限的，比如没有留言本没有侧边栏等，所以对WPTouch插件的默认主题进行了比较大的修改，包括去掉了一些比较基础的但Reeoo使用不到的功能，所以这是一个阉割版的主题，但我认为这个对于移动端的浏览已经够用了。

因为是删减版，所以以下功能不具有：

留言；
搜索；

由于WPTouch插件免费版本的功能限制，iPad访问时仍然是显示正常的网页版本，当然，我觉得iPad显示正常的网页版本也很正常。

列表页样式，主题会自动获取文章内容里的第一张图片显示成为缩略图：

内容页与列表页变化不大，只是增加了标签这一项内容：

因为是针对Reeoo.com做的版本，并不具有全适用性，而且是功能删减版，WPTouch设置里的显示作者、显示分类等信息都无法使用，请“谨慎”下载使用：WPTouchThemes

安装方法：先安装WPTouch插件，然后下载修改版的WPTouchThemes主题文件，将解压出来的themes文件夹替换掉插件默认的themes文件夹，是直接替换整个themes文件夹哦。

注意：如果博客安装了pagebar插件，且使用自动插入的方式，请关闭自动插件的方式，而改为直接在原主题里代码插入的方式，否则会导致分页样式在移动端显示。

另外，Android上的浏览器貌似对CSS3的支持还不很完善，比如渐变、多重阴影等，所以浏览时时样式可能要差于iOS设备，当然我测试的是Android 2.3的版本，更新版本的没有测试过。

有关这个主题或是插件的使用设置问题，都可以在http://faq.wopus.org进行提问，我会尽量的回答。

Reeoo.com第三批网页截图分享

摄氏度 — Mon, 12 Mar 2012 21:21:24 +0800

再次放出 Reeoo.com 的精美网页截图200张，这是第三批的截图分享了，距离下一次分享还需要点时间积累，当然，欢迎订阅 Reeoo.com 博客，可以及时的欣赏到设计精美的网页截图。

115下载地址：http://115.com/file/bepcadjf