RSS
 

手机页面小贴士

19

1、分享到腾讯微博后的页面,使用手机版访问页面地址时,QQ会先抓取一下原内容地址,进行排版后返回。排版过程,是黑盒子。表现会过滤掉按钮,不过滤链接。但不支持链接地址为market链接。

2、uc8.0,页面不支持外链样式表。

3、uc8.0以下的uc版本不支持css3属性,处理过程也为黑盒,会对页面内容进行排版。建议对uc浏览器都使用基础的html页面和内嵌样式表。

4、android系统默认浏览器打开的页面,支持链接为market的(即android市场软件下载)。

5、uc低版本浏览器中,只支持input的type类型为button的按钮。不支持<button></button>这种类型的按钮。

例:<input name=”down” type=”button” value=”下载客户端”>

 
 

photoshop切图之正片叠底问题

19

切图时遇到一个问题,在设计图中看到一片logo是透明的,移动到其他位置都没有背景,就是切出来的时候,会变成白色背景。

没有遇到过这个问题,请教同事后,隐藏其他图层后,发现此图层是有白色背景的。

呈透明展现的原因,是使用了“正片叠底”。正片叠底简单的理解就是白色变透明,其它不变。至此告一段落。

 注:正片叠底模式。考察每个通道里的颜色信息,并对底层颜色进行正片叠加处理。其原理和色彩模式中的“减色原理”是一样的。这样混合产生的颜色总是比原来的要暗。如果和黑色发生正片叠底的话,产生的就只有黑色。而与白色混合就不会对原来的颜色产生任何影响。

 
 

absolute和margin-top负值实现垂直水平居中

13

问题及思路:

原来做页面为了速度,没有对图片进行处理。一些地方直接使用了背景图片,其他包括一些箭头图标。这次做优化要把这些图标都拼合在一起,来减少大小及http请求数。在对箭头图标进行sprite处理时遇到一个问题,列表项的高度不固定,原来的实现方式不能使用css sprite,要想使用就要改变。

由于箭头的大小已知,就在页面上添加钩子来实现,使用position:absolute来实现。

代码如下:

.icon{position:absolute;top:50%;right:15px;margin-top:-9px;background-position:0 0;}

原理解释:

top:50%,让icon层的位置从父层中间开始,icon层的高度为18px,使用-9px将icon层自身的位置相对于中线居中。

扩展:此例实现垂直居中,同理可实现水平居中。

参考:www.jquerymobile.com

 

2012年给网络工作者的几点建议

02

  2011年过去了,在2012年到来的第一天里,作为网络工作者的我收集整理了一些健康的工作心得发给广大网络工作者们:

  第一、适量

  每个人遇到感兴趣的事物,总是产生强烈的求知欲,恨不能在一朝一夕就将其全部掌握。但是人对事物接受程度确类似于一个抛物线。例如:某人阅读10篇文章能清晰地记忆其中3篇文章的内容;阅读20篇文章则能清晰记忆其中的5篇文章;当阅读了30篇文章时,就会产生记忆疲劳,工作效率反而下降,只记忆了3篇。因此,每个人的工作强度都不要超越自己的承受极限,这样做既保持了较高的工作效率,又有利于健康。培养良好的适量能力就是强有力的保证。

  第二、交流

  交流不仅可以互通有无,还可起到开阔眼界,触类旁通的作用。交流可以分为三个层次:线上交流、线下交流、自身交流。广阔的互联网,为线上交流提供了便利的条件,我们可以与世界任何角落志趣相投的朋友即时沟通,交流学习、增进友谊。线下交流多为朋友、同事、家人之间的交流,话题可以海阔天空,对于网络工作人员来说,这种交流方式除了增进情感,最重要的是可以休闲放松,对保持健康的心态有积极作用。自身交流也可以叫做自省,论语云:吾日三省吾身。可以静心反省自己工作中的得失,可以任思绪自由驰骋……

  第三、有序

  任何一支强有力的成功团队都有赖于每一位成员的步调一致、井然有序,这是一切成功的基本保障!无论是做为一个团队成员,还是单独的网络工作者,我们都要把自己的工作和生活安排的井然有序。例如:年工作目标是什么,近期要实现的目标是什么,每天如何有序地实现这些目标。

  第四、健康

  健康是一个永恒的话题,是事业成功、生活幸福的基本前提。作为网络工作者,工作强度有时甚至要高于传统的线下工作。因此,我们更要注重保持自己的身心健康平衡!

  适量、交流、有序、健康就是我认为网络工作者应该具备的基本素质。希望我们在新的一年里事业进步、生活舒心、家庭美满!

  转自:http://home.donews.com/donews/article/1/165651.html

 
 

解决由ie6事件引起的页面无响应问题

30 十二

处理一个文本框验证,验证逻辑为:文本框获得焦点时,保存按钮点亮;文本框失去焦点时,验证格式,格式不对时,显示错误信息,保存按钮置灰,格式正确进行保存验证。

问题描述:

在ie6下,当鼠标离开文本框,验证错误时,点击保存按钮,页面无响应,其他浏览器正常。

解决流程:

初步判定为ie6事件问题,当发生blur事件时,保存按钮应为不可点。但是有了保存事件,此时又验证到blur事件,又变回了不可点的状态,导致事件混乱,出现问题。
确定问题后,进行解决。
1、增加标识符判断,在离开文本框时添加状态符。在表单提交验证时,根据状态符进行后续操作,若为false时,不执行保存事件。
2、在验证不通过发生时,使用setTimeout进行延时处理,解决ie6执行顺序问题。

延时代码:

viewErr : function(subBut, dl, msg){
    setTimeout(function(){
        if(subBut) subBut.attr('disabled',"disabled").addClass('disabled');
        dl.find('p.t').hide();
        dl.find('p.e').html('<img src="imgv2/ico_2.png">'+msg).show();
    }, 500);
},

设置标识符:

input.blur(function(){
    suc = false;
    var in_text = input.val();
    var sum = NJS.textL(in_text);
    if (sum > 0 && iName != 'signature' && !NJS.isText(in_text)){
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][1]);
    }else if(minL && sum >= 0 && sum < minL){
        //姓名过短的错误提示
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][2]);
    }else if(sum > maxL){
        //姓名过长的错误提示
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][0]);
    }else{
        suc = true;
    }
});
 
//表单提交的校验
form.submit(function(){
    if(!suc){
        return false;
    }
}
 
 

CSS伪类(CSS – Pseudo Classes)使用

28 十二

前段做页面时用到组合伪类,开始的写法是li:first-child.selected,没有起作用。发问后,得知要li.selected:first-child 这样写才是正确的。

今天查询一个东西看到相关的说明,明白正确的原因。

CSS伪类是用来添加一些选择器的特殊效果。您不需要使用JavaScript或任何其他脚本使用这些效果。一个伪类的简单语法如下:

selector:pseudo-class {property: value}

CSS类也可以使用伪类:

selector.class:pseudo-class {property: value}

 
 

支付宝前端样式解决方案Alice开源

26 十二

经过1年的探索,新的样式方案Alice已经于2011年12月15日开始在支付宝大大小小的项目中部署,今天,官方开源了这个样式方案。

Alice 是支付宝前端样式解决方案小组的项目代称,其包括构建样式库的样式库解决方案、帮助团队理解新技术的 W3C 标准文档库和正在进行中的实验项目等。目前 Alice 团队的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。

Alice的源码基于MIT License许可发布在Github中,源码组成:

  • base.css文件:Alice 的基础,所有样式均基于它
  • solutions文件夹:浏览器兼容解决方案
  • plugins文件夹:浏览器兼容解决方案对应的编辑器插件
  • tpl文件夹:参考的模板文件
  • w3c文件夹:HTML5/CSS3 标准文档

官方展示网站http://aliceui.com

Github地址https://github.com/sofish/Alice

Via ued.alipay.com

 

轻松搞定xampp apache端口配置

16 十二

XAMPP 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。XAMPP 的确非常容易安装和使用:只需下载,解压缩,启动即可。优点:免费易用,适合在本地建设php运行环境,调试wordpress/ecms/dedecms等开源网站程序。

官网:http://www.apachefriends.org/zh_cn/xampp.html

安装后默认文件存放目录为:xampp\htdocs下。但有时程序的目录是在深层目录时,不在表面级目录就会遇到一些问题,这个时候需要指定程序访问路径。可以简单的修改apache\conf目录下的httpd.conf文件进行修改,这个经过同事指点,自己在网站看教程折腾了半天,没有搞好,表示感谢。

首先找到80,将端口号进行设置。比如我本机是三个端口,除了默认的htdocs之处,还需要的分别指向两个不同的目录,就又添加了两个端口号。

#Listen 0.0.0.0:80
#Listen [::]:80
Listen 80
Listen 8090
Listen 9000

然后搜索NameVirtualHost,会看到类似如下的文本块,

####################################################
NameVirtualHost *:80
ServerName localhost
DocumentRoot “E:/xampp/htdocs”
DirectoryIndex index.php
ErrorLog “E:/xampp/apache/logs/error.log”

OptIons Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
复制后,修改端口号,修改指定的目录。得用xampp控制器重启Apache关闭、重启后,就大功告成了。

 
 

chorme生成的select和firefox/ie的顺序相反

12 十二

问题:做年份的的下拉列表(倒序)时遇到在chorme生成的select和firefox/ie的顺序相反。

测试发现,chorme对for in的执行顺序和firefox不同

var o = {'2011':'2011年','2010':'2010年'};
var b = [];
for(var i in o){
    alert(i);
    b.push('' + o[i] + '');
}

firefox输出2011/2010
chorme输出2010/2011

原因:
ECMAScript第三版中描述,for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的。
ECMAScript第五版规范中,对 for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的。
Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范,而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范,对属性的遍历顺序存在不一致的问题。

解决方案:
for-in语句无法保证遍历顺序,应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据,请使用数组并使用for语句遍历。

//存储时保存为对象的同时,建立一个数组存储
function array2Obj(s, e, str){
	var o = {};
	var a = [];
	str = str || '';
	var j = 0;
	for(var i = s; i <= e; i++){
		a[j] = i;
		o[i] = i + str;
		a[j++];			
	} 
	return [o,a];
}
 
 
//a 用于对显示顺序有要求的情况,a为key数组
function options(o, d, a){
	var b = [];
	var i;
	if(a){
		for(i = 0; i < a.length; i++) bp(a[i], o[a[i]]);  //100   a[i]=2011 o[a[i]]=2011年  a[0]=2011  o[a[0]]=2011年 
	}else{
		for(i in o) bp(i, o[i]); //2011 2011年..  2010 2010年 
	}
	function bp(k, v){
		b.push('<option value="' + k + '"');
		if(k == d) b.push(' selected="selected"');
		b.push('>' + v + '</option>');
	}
	return b.join('');
}

参考:

http://www.w3help.org/zh-cn/causes/SJ9011

http://mbn.iteye.com/blog/999204

 
 

与狼共舞的十大法则

10 十二

今天就是我的生日了,不知道送自己一个什么样的生日礼物比较好。最终,在 @米聊 vs @微信 的灵感刺激下,我选择了总结出 “与狼共舞十大法则” 作为送给自己的生日礼物,很特别对吧:-)

最特别的是,这份送给我自己的生日礼物可以无限次与大家共享,这些已经发布在我个人微博 @王利杰LEO 的法则每一个字都是我仔细斟酌过的,希望对大家有所启发。

移动互联网俨然已经发展成为了没有硝烟的战场,很多创业者输给了来自巨头的不公平竞争。在抱怨之前,我们有没有想过,如果你是巨头的CEO,你手里 有一副好牌,你真的不会用吗?消极的抱怨是没有用的,大自然的竞争法则本来就不保护弱者。但是也别灰心,我已经总结了多条与狼共舞的法则与创业者分享!

#与狼共舞法则# 一:保持童真! 如果没有童真,怎会与狼共舞?请相信世界的美好,相信你可以与狼共舞,和谐共存。最怕的就是创业者失去信心,丧失斗志,一切美好的破灭都源于童真不在。互 联网和IT领域很多伟大的公司都是年轻的辍学生创办的。要想投资人,员工和用户相信你,首先要自己相信自己!

#与狼共舞法则# 二:卖白粉,而不是止疼药!产品可以分为1)卖给患者的止疼药;2)卖给健康者的白粉!第一种是满足刚性需求,对于这种“美味”,狼的鼻子更灵,动作更 快,出手更恨;第二种是创造快乐体验,在引爆流行之前狼闻不到,通常后知后觉,为时已晚。如Twitter,植物大战僵尸,愤怒的小鸟等

#与狼共舞法则# 三:提高产品的艺术含量!过去五千年由工程师驱动的科技进步已经让这个世界很完善,人类很多潜在需求都已被挖掘并得到了充分的满足;当代的产品竞争,艺术 含量要比技术含量更重要!因为,对于艺术品来说,无论别人怎么模仿,真品永远只有一个!所以,请尽快补充产品团队的艺术家比重!

#与狼共舞法则# 四:宁为鸡头不为凤尾!要想与狼共舞,就要避免在正面战场与狼夺食,要选择狼无暇顾及或者不屑一顾的细分领域觅食,这方面也有很多成功案例:好123网址 导航、UCWeb浏览器、360安全卫士、乐淘/麦包包/京东等垂直电商;不过饿狼越来越多,所以保持童真的草根需要向更加细分的领域进军!

#与狼共舞法则# 五:了解谁是你真正的竞争对手!我们在致力于为用户创造快乐体验的时候,我们的对手通常不是狼,而是用户自身根深蒂固的消费理念和行为习惯。就像游戏运营 商,面临的是很多用户认为打游戏浪费时间的观点。而微博产品也在挑战人们的隐私观念。所以,在这个前提下,要与狼共同培育市场。

#与狼共舞法则# 六:最彻底的革命是商业模式的革命!技术的超越永无止境,与巨头拼技术就好比与狼正面交锋,久战必败。釜底抽薪才是王道,彻底破坏其赖以生存的供给线。互 联网在线服务领域,免费是王,谷歌,腾讯,Facebook,Android 等等都是最佳案例。今天巨头还在收费的业务就是你创业切入的方向。

#与狼共舞法则# 七:好产品和服务是运营出来的!产品是壳,运营是魂。与狼共舞,你不会有金刚不坏的壳,但可以有不卑不亢的魂。没有深耕细作的运营,再好的产品创意也会成 为他人的嫁衣。如果你在「追求」用户,那运营就是在传递你的爱。执着,执着,再执着,投入你的全部心血去爱你的用户,无怨无悔。

#与狼共舞法则# 八:站在狼的肩膀开始你的战斗!要注意到一个现实,狼和狼也在斗,现代的互联网、移动互联网以及通信产业都已升级到了“生态链”竞争的战“国”时代。苹 果、谷歌、微软、腾讯、新浪微博、电信运营商,开放平台无处不在。是寄人篱下?还是暗度陈仓?区别只在你的心态,以逸待劳何不为?

#与狼共舞法则# 九:天下武功,唯快不破!速度、速度、速度真的是生命。狼群能否追的上你,不取决与狼的数量,而在于其中是否有比你快的“出头狼”。不过也不必过分担心, 狼群作为一个整体,求稳重于求快,所以你不侵犯狼的老巢,狼也未必看得上你的微领地。再者还有古语“枪打出头狼(鸟)”保护你!

#与狼共舞法则# 十:坚信,酒好不怕巷子深!在社会化媒体成熟发展的时代,忘记传统的营销和推广,学会让产品说话;不会说话的产品没有灵魂,没有灵魂的产品“推”给用户又 如何?庞大的“用户数量”只能用来歪歪,用户忠实的“品牌拥护”才是无价之宝。把营销的预算,投资到产品的优化和精细化运营中!

@王利杰LEO

移动2.0论坛创办人;
移动互联网@PreAngel 投资人;
@Cohubit 开放式咖啡&办公项目发起人;