Aisin Von:记录我的互联网生活！

EDM开发注意事项

前端集合 — Fri, 17 May 2013 23:47:01 +0800

前不久开始负责公司的EDM模板前端开发.

看了下公司以前同事制作的EDM模板, 代码真是不敢恭维. 最明显的错误居然在页面上用<style>.

做了几个EDM下来, 也积累了点经验. 除了网上常见的那些注意事项, 还有下面这些. 写下来, 对自己对别人都会有用:

1. 所有图片设置border=”0″;

2. 所有链接设置text-decoration:none;

3. 所有空行, 线条最好用table元素表示;

4. 所有table把cellspacing, cellspadding设置为0;

5. 当需要限制行文字高度时, 须同时设置max-height, height, line-height. 这里max-height很重要:

因为gmail会自动把height改成min-height, 这时候你如果不设max-height在gmail里达不到overflow hidden的效果.

6. 内容中包含email地址时, 须设置下颜色, 因为有些邮件系统会加上默认样式. 比如QQ mail会加上蓝色带下划线的链接;

后面如果有新的, 会再补充进来…

Ubuntu 13.04双系统硬盘安装的一点经验记录

前端集合 — Sat, 04 May 2013 16:29:08 +0800

今天给笔记本装了Ubuntu 13.04. 用惯了windows, 再用Ubuntu挺新鲜的, 最明显的感觉是Ubuntu的字体更好看.

关于Ubuntu双系统的硬盘安装, 网上教程一堆, 但里面很多内容都过时了, 还有一些关键步骤都没交代清楚, 今天在在这里梳理一下安装过程:

一. 安装背景

笔记本已安装win7, 准备安装Ubuntu 13.04, 并把硬盘空出了一个50G的分区.

二. 安装过程

1. 预留空白分区

开始程序 –> 在 ‘计算机’ 上右键, ‘管理’ –> 在你的分区列表里找一个100%空白的分区 –> 右键’删除卷’,

如图所示, 我是空出了一个E盘用来安装ubuntu, 这里你看不到我的E盘了.

2. 使用EasyBCD加载ubuntu系统的iso

这里所有的步骤请参考这2个教程即可:

Ubuntu安装基础教程

Ubuntu 11.04在Win7下无损硬盘安装双系统图文教程

3. 创建分区

这里是最令人困惑的地方, 因为我安装Ubuntu 12或Ubuntu 13.04的时候碰到的手动分区界面和网上所有教程都不一样, 估计那些教程都过时了.

由于没有教程可参考, 只能自己摸索了:

在一番搜索之后, 决定为ubuntu分3个区:

/ 10G

/swap 512M

/home 默认使用剩余容量即可

在这个界面可以看到你一开始预留的空白分区, 图中白色的柱状部分就是:

点击’添加’按钮

或者 + 号按钮

a. / 分区

分区容量大概10G, 选’逻辑分区’, 然后选’ReiserFS’ 文件系统(大家推荐这个, 所以我就选了这个, 我也不懂), ‘挂载点’选 ‘/’

b. /swap

大小填写512M或更大, 日志文件系统那个下拉框选择 ‘交换分区’ 即可

c. /home

分区容量使用空白分区剩余容量即可, 选’ReiserFS’ 文件系统, 挂载点选 ‘/home’

这里完成设置后, 就可以进入下一步正式开始安装ubuntu系统了.

系统安装完了, 继续体验去咯…

2013第一次骑行: 第四次短途骑行

前端集合 — Thu, 02 May 2013 22:30:38 +0800

车子放家里都堆满了灰尘, 天气也慢慢热了起来, 是时候出去骑一骑了.

说行动就行动, 在陌陌上找了同一个小区的骑友, 越好了时间地点, 就出发了.

这次骑行共55公里. 去的时候骑得挺快. 一路上碰到不少骑友.

到了目的地, 随便逛了逛, 吃了个饭, 然后就返回了. 返回的时候最苦逼了, 一路都是逆风, 骑都骑不动, 估计速度也就10多千米.

一路我都用咕咚运动做了记录, 这APP不错, 推荐爱好运动的朋友下载. 作为数码爱好者, 干啥事都得好好利用数码:

最后, 贴上2张图吧:

中国联通 – 的确是扶不起的阿斗

前端集合 — Mon, 01 Apr 2013 20:58:06 +0800

以前老是看到网上说中国联通是扶不起的阿斗, 心里也就’呵呵’一声, 没太在意.

直到上个月我开始用中国联通的3g号码, 才有了切身的体会. 为什么这么说呢? 且听缘由:

1. 服务垃圾, 客服水平奇差

移动:

打移动的人工客服时, 一拨就通. 而且移动客服非常有礼貌, 业务掌握良好, 水平高.

联通:

而打联通的人工客服, 每次都要等待2到3次才能接通客服. 更离谱的是问联通客服问题, 不是说不清楚就说要查查资料, 让我在电话里等. 而且联通客服的语气和水平, TMD一听就跟完全没接受过培训一样. 我TMD的这是在上海啊, 上海的都是这水平, 无语…….

2. 信号差

移动:

不管是在公司还是家里, 手机基本都是满格5格信号

联通:

不管是公司还是家里, 大部分时间都只有4格信号, 有时有5格.

如果在公司厕所里蹲坑时上上网就更悲催了: 3g信号直接由H变成GPRS, 那个速度就跟没有联网一样样的. 移动的GPRS都比它快很多. 真的无法想象春节回家上网会是什么状况. 我TMD的这是在上海啊, 上海的都是这水平, 无语…….

关键是联通3g上网我也没感觉比移动2g快多少.

Disqus正进行新盈利模式的测试?

前端集合 — Tue, 26 Mar 2013 23:37:47 +0800

最近在访问一些英文网站时, 发现disqus有了一些小变动, 这个变动难道就是disqus的盈利新模式或者商业化之路?

1. 为什么这么说?

在这个页面(链接)的disqus评论附近, 会看到4条第三方网站文章的链接, 如图:

点击右上角的’what’s this?’ 看了一下, 是这么解释的:

Disqus helps you find new and interesting content, discussions and products. Some sponsors and ecommerce sites may pay us for these recommendations and links. Learn more or give us feedback.

Disqus帮助你发现新的有趣的内容, 观点和产品. 我们的赞助商会为这些推荐链接付费.

我第一反应就是, 这不是adsense的模式吗? 发布商付费推广, 网站主可以以此赚钱.

然后我看了上面那个learn more的链接, 果然网站主是可以赚钱的.

为了印证这点, 我登录了我的disqus, 果不其然:

其实这和无觅显示第三方网站的相关文章功能很类似, 只不过无觅的这个功能是免费的.

2. 一点疑问

很多网站都用了disqus, 但是我只在这个页面看到了disqus推荐链接的展示.

而像最著名的科技博客http://thenextweb.com/的文章页面都没有显示这个东西.

难道这个功能还只在小范围的测试吗?

这个世界就是有那么些人那么无聊

前端集合 — Tue, 19 Mar 2013 23:12:43 +0800

这个世界就是有那么些人那么龌龊, 那么无聊.

为什么这么说呢? 我的一个小站点(不是这个博客, 这个博客没有广告), 流量不大, 也不知道惹着什么人, 页面上的广告老是被人恶意点击.

有人问, 你怎么知道是恶意点击? 请看数据:

第一列是日期

第二列是 pv

第三列 ip

第四列是点击数 (问题就出在这里, 1000多的pv居然有高达50%的点击数, 几十pv更离谱的是有1000多的点击数. 亲哪,明显我投放的是CPS广告嘛, 您难道不知道CPS和CPC的区别吗? 你点击再多有毛用啊, 对我一点害处都没).

这也是我几年前就不在我的网站投放google adsense的原因, 有这样一帮淫存在, 我的Google adsense分分钟可能被封.

解决QQ邮箱收不到Gmail自动转发邮件的问题

前端集合 — Sat, 16 Mar 2013 22:58:28 +0800

以前Gmail访问没有抽风问题的时候, Gmail是我的常用邮箱. 后来Gmail一搞抽风登陆不了, 我就开始使用QQ的foxmail.com作为常用邮箱. 但是因为Gmail用得太久, 如果贸然弃用, 可能会丢失一些重要邮件. 正好Gmail可以自动转发邮件到其他邮箱, 可以满足我的需求.

可是设置后, Gmail自动转发到QQ邮箱的邮件没有一封能收到. 我测试了下发送到163, 没有任何问题. 一番股沟后, 原来需要把Gmail加入QQ邮箱的白名单, 晕. 解决方案如下:

在QQ邮箱的设置中, 分别添加下面2个:

设置邮件地址白名单: 填写你的Gmail地址;

设置域名白名单: 填写’gmail.com’.

如此设置了以后, QQ邮箱就可以收到Gmail自动转发过来的邮件了.

如何让Evernote支持代码高亮

前端集合 — Sun, 03 Mar 2013 13:06:59 +0800

最近把一些有用的代码整理近evernote, 但是发现evernote不支持插入代码或代码高亮. 于是股沟之, 得到解决方案如下:

1. 安装Notepad++

2. 把代码复制到Notepad+++

3. 然后如下操作 (copy all formats to clipboard也可以)

4. 效果

话说国内的笔记软件在这些小功能上还是做得好些, 比如麦库记事按这个按钮可直接插入代码 .

如何使用AdSense移动内容广告

前端集合 — Mon, 25 Feb 2013 23:01:44 +0800

前几天把我一个网站做了移动设备的访问优化. 做这个优化一是为了更好的访问体验, 二是为了能体验体验adsense移动内容广告.

下面讲讲如何开启adsense移动内容广告:

1. 进入google adsense后台:

点击’我的广告’, 进入如下界面,

这里本来是有一个申请adsense移动内容广告的选项的, 因为我已经申请了, 所以这里看不到了.

2. adsense移动广告设置

广告格式: 选’单’或’双’都可以, 但是我从手机上访问没有看出什么区别

标记语言: 选’xhtml’

编码: 选’自动检测’即可

脚本语言: 因为我用的是php, 所以选’php’

3. 将代码放入网站

第3步这里是重点, adsense移动广告和常规内容广告不一样. 常规内容广告是javascript代码, 直接复制插入页面即可.

我的做法是, 把adsense移动广告的代码放入一个单独的php文件, 如googleAdsense.php, 然后在页面中你需要广告出现的地方引用这个php文件即可, 如

        <?php
            if(is_mobile()){//只在移动设备显示此广告
                include(‘GAmobile.php’);
            }
        ?>

不知道is_mobile()怎么来的, 请看这里.

4. 如何在pc浏览器查看并调试移动广告效果

Chrome浏览器有一个User Agent模拟功能, 可以模拟mobile tablet. 我收集的几个php移动设备检测方法都是检测User Agent.

使用方法如下:

1). 在Chrome按f12

2). 在右下角点击按钮

3). 选中 User Agent 和 Device metrics, 然后再刷新页面, 你就可以看到你页面在mobile中的效果了

5. 遇到的问题

在使用adsense移动广告的时候, 发现一个页面上好像不能同时存在2个移动广告单元. 不知道什么原因.

所以, 如果你想在移动网页上放2个adsense单元, 你可以有2个选择:

1). 放1个adsense移动广告和1个常规的adsense 320×50广告

2). 放2个常规的adsense 320×50广告

最后, 来个实际效果预览:

Hope this helps.

基于PHP的移动设备网站优化

前端集合 — Fri, 22 Feb 2013 08:00:00 +0800

上上篇文章收集了一些基于PHP的移动设备检测方法, 我可不是凭空收集这个, 而是真正要运用到网站中的.

这不, 这几天利用下班时间对自己一个网站进行了移动设备的访问优化. 之所以下决心优化一下, 是因为访问统计显示移动设备的访问量几乎占到了总访问量的50%. 优化迫在眉睫啊…

因为我那个网站比较简单, 主要就2, 3个页面, 所以我只要针对这2, 3个页面进行优化就行了.

如果是大型复杂的网站, 由于页面众多, 如果每个页面的模块都去写2个版本, 无疑是不合理的, 后期维护也是个大麻烦, 这个时候就应该单独搭建一个针对移动设备的版本, 比如现在很多网站都提供的m.abc.com.

下面讲讲大概过程:

1. head部分优化

要想网站在移动设备有良好的访问效果, 最重要的是在head使用viewport, 然后宽度设成device-width, 比如:

<?php if(is_mobile()){?>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<link rel=”stylesheet” type=”text/css” href=”css/mobile.css” />
<?php } else{ ?>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/style.css” />
<?php } ?>

通过这一段, 就可以让pc和移动设备访问不同的css, 然后通过不同的css来实现不同访问设备下的效果. 如果不知道上面的 if(is_mobile()) 怎么来的, 请看这里.

上面的meta是最基本的一个属性. 移动端网站制作中, 还有很多属性可以利用, 每行代码的意思都可以在网上轻松查到, 如下:

<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”>
<link rel=”apple-touch-icon-precomposed” href=”../1.png”/>
<link rel=”apple-touch-startup-image” href=”../2.png”/>

2. 页面内容部分优化

比如页面上有一个广告模块, 在电脑上显示728×90的广告大小. 在手机上, 就不能使用这个大小的广告模块了, 所以需要针对移动设备再写一个合适的模块, 如:

<?php
    if(is_mobile()){
        echo ’320×50′;
    }else{
        echo ’728×90′;
    }
?>

大概思路就这样. 下一篇我再介绍下如何在移动网站上投放AdSense 移动内容广告.

您可能也喜欢：
防止Godaddy自动扣费：Godaddy 域名购买前后注意事项	前端开发工具之网页Resize工具: Viewport resizer	WebStorm – 前端开发最强利器	XHTML+CSS设计注意事项	F5 – 前端开发又一利器
无觅

您可能也喜欢：
phpnow在windows7中无法成功安装的解决办法	说说社会化评论系统--多说, 评论啦和友言	5大最流行网络硬盘大比拼	windows live writer 快捷键	Google Chrome v0.4.154.31 绿色免安装版
无觅

您可能也喜欢：
第三次短途骑行	拥有美利达	第二次小长途骑行	最近好忙, 无法骑行	夜袭三甲港
无觅

您可能也喜欢：
Some Chinese Please！最方便有效的wordpress反垃圾评论插件	“应聘【见习网站编辑管理员】之观“中国小姐”大赛心得体会”	失去才知珍惜，病一次才体会到健康的重要	史上最lj的播放器	鄙视一下国内某主机公司糟糕的用户体验
无觅

您可能也喜欢：
说说社会化评论系统--多说, 评论啦和友言	试用灯鹭denglu社会化评论	让wordpress最新评论不显示管理员评论的简单方法	为博客添加了Ajax评论效果	还是 [多说] 更好用,更易用
无觅

您可能也喜欢：
如何使用AdSense移动内容广告	由于没有收到Adsense pin码，网站的广告变成公益广告啦应该怎么办？	Google广告在自己电脑不显示但在其他电脑能显示的原因及解决办法	如何解决博客被嵌入恶意代码问题	google Adsense 西联收款单
无觅

您可能也喜欢：
新版微软邮箱真不错	利用stylish去除126邮箱界面广告	想知道你的Google是何时注册的吗?	最终，我选择了QQ拼音输入法	如何解决wordpress is_home()不起作用的问题
无觅

您可能也喜欢：
如何解决博客被嵌入恶意代码问题	那些年, 我用过的代码编辑器	好用的视频切割软件——ExtraCut	F5 – 前端开发又一利器	更简单的获取div块Height高低并赋值代码
无觅

您可能也喜欢：
3种检测移动设备的方法	我的网站收藏	代推—让网站流量提升变得简单	国外创业公司精美网站欣赏	推荐2款好用的免费网站监控服务
无觅