小熊猫变大熊猫的故事
技术相关
正在缓慢发生的web变革
Aug 24th
在我刚用上电脑的时候,那时候还用着ie4.0和win98,页面全是静态的htm,flash已经有了,但是很少出现在网页里。
制作网页是用frontpage,定位一律用表格(我很奇怪为啥现在很多教材还是这么教的)。
javascript也有了。记得当时有一种类似“网页特效制作大师”之类的东西,就是一个小程序,然后通过一些参数的设置或者直接就可以给你一段javascript代码,贴到网页的源代码里就会有各种各样的效果了。比如什么鼠标边上跟着图片或者字啊,什么根据访客的时间显示不同的问候语之类的。当时玩这个乐此不疲,也许做好了还会传到当时的“网易免费个人主页”去和别人好好的炫耀一番。
由于动态的免费服务器资源很难找,所以呢会去申请那种免费的留言板啦,用户统计什么之类的东西;七拼八凑整合起来,看上去还像模像样了。
然后呢不知道什么时候,突然出现了很多比较完善的基于web的论坛程序了,印象最深的是当年的“动网bbs”;由于具有一些类似积分啦,权限啦之类的东西,就感觉很有趣,很好玩。于是乎似乎纯静态的页面就很少见了,在学会看url以后,就知道那些带问号的都是经过参数传递而现实的页面,特别是那些有.asp;.php后缀的。
flash技术应用的范围也广泛起来。一些flash小游戏出现,还有大量的应用于广告banner上。再然后就出现那种很惊艳的flash整站(记得印象最深的是2advancedstudio)。flash的actionscript也是从原来的没有一点点的进化到一门的语言(话说那时候你能在帧上写一个stop,在按钮上写个play就觉得很犀利了呢)。
说到flash的发展,有一个东西的出来让flash的发展有了质的飞跃,那就是flv视频的出现。这玩意儿催生了youtube,土豆,优酷这样的在线视频网站。以至于现在很大部分的互联网流量是被这些视频信息占用的。以前到处找不到什么看电影的站,现在满大街都是了。
由于开发者们发现用表格定位什么的对于页面维护的成本太高了,所以开始使用div+css的方法构建网页。这样能很方便的实现各个网页样式的统一。
于此同时,火狐和opera等其他浏览器的兴起,让人知道了原来除了ie还有其他选择(随之而来的是各种浏览器兼容问题)此时ie6.0正当鼎盛时期,开发者们发现ie6实在是太讨厌了(尤其对于css定位的网页更是如此),可是又对其表示无奈,谁叫大部分人还都在用它呢?
gmail的出现让大家眼前一亮,原来网页可以无刷新到这种程度。这就是ajax开始兴起的时候了。其实ajax实现的技术不是啥新鲜玩意儿,就是javascript,但是人们不知道原来javascript可以这么用;传统的js要实现ajax写起来特麻烦,于是出现了各种ajax框架;其中jquery以其易用和强大受到了广泛的使用。一个最简单的ajax范例就是表单的提前验证。以前申请用户名都要按一个按钮检查用户名是否已存在,现在你看谁家还要按个按钮的?ajax的出现改变了人们对于网页的体验。原来干啥都要刷个新的,现在很多地方都用不着了。网页变得更像是一个程序了。
手机等便携设备对web的访问也越来越受到人们的关注。
web2.0 用户创造内容普遍被实践,博客,sns,微博等形式被人们普遍的接受。互联网连接越来越多的东西,网络商业也越来越发达。
智能手机让手机也能体验到电脑般的浏览体验,同时手机的定位系统也催生了不少新的互联网应用。
flash的发展是飞快的,很重要的原因就是网页flash插件的自动升级使得flash可以一直有新的特性产生而不产生兼容问题。而到目前为止在纯html方面,从技术上几乎一直在吃老本,没有什么新的东西出来。
chrome的出现可以说是标志性的,除了其简洁高速的浏览体验备受赞誉外,其自动升级和对新的标准的支持对于开发者而言非常的重要,chrome的普及让一场以新技术为导向的web变革成为可能。比如HTML5。html5里面有一些非常好的特性比如说原生支持mp3和视频;还有就是websocket。
websoket很有可能就是下一个明显发生web变革的点。因为我们看到了一个趋势,网页变得越来越像程序了;然而传统ajax的性能并不能让人满意,虽然中间出现了类似comnet这样的长轮询但需要消耗更多不必要的服务器资源。websoket的双向通信非常的让人兴奋,因为终于服务端可以push东西到客户端了,网页更像一个程序了。
(这篇文章是我早上起太早睡不着的产物,可能逻辑上会有一些问题,语言也不怎么通顺,也没有揭示出什么很神奇的东西;大家随便看看吧。)
在非IE浏览器中实现”灰阶化”
Aug 15th
原文:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
这个问题看似简单,实际上要付出很大的努力[2]。要的结果很简单:在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale(灰度)滤镜。然而,它的解决方法并非你想得那么简单,这也让我着实大大地吃了一惊。
在 IE中,grayscale滤镜可以应用到任意一个元素中,它会很直观地将元素转变为灰度。可以使用下面这行复杂且专有的CSS来实现grayscale滤镜。
elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
如上所示,在IE中实现这种效果简单是小菜一碟;然而,在其他的浏览器中,需要引起很大的关注。 需要有两件情况值得考虑:图片元素和非图片元素。“非图片”类元素实现十分简单:在当前文档中遍历每个元素,寻找类似“backgroundColor”和 “color”的色彩属性,将它的RGB颜色值转换为灰度值。有不少方法可以实现;注意我们这里不是说降低图片的饱和度;“灰阶化”很明显跟它不一样。
// Desaturate:降低饱和度
function RGBtoDesat(r,g,b) {
var average = (r + g + b) / 3;
return {
r: average,
g: average,
b: average
};
}
// Grayscale:灰阶化
function RGBtoGrayscale(r,g,b) {
var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
return {
r: mono,
g: mono,
b: mono
};
}
因此,每个带颜色属性的元素要使用它来转为灰阶;初始颜色用来重置属性值。 我们的图片能否转为灰阶取决于两个因素;一是浏览器必须要支持HTML5 canvas元素和它getImageData方法,二是主机上的所有图片必须位于同一域名下;除此外,主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari(4以下版本)由于不支持getImageData,先不作讨论。其他的浏览器支持canvas元素,完全可以做到“灰阶化”图片。 实现这种方式是要“手工”遍历图片中的每一像素,并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话,浏览器绝对吃不消;除非有极其快速的Javascript引擎来承受大图片处理的压力。 鉴于上面提到的原因,因此在任一个元素需要“灰阶化”前,添加一个“预置”函数去运行显得尤为必要,这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话,不必使用“预置”函数,可以直接使用这种暴力转换。 为什么呢,这是为什么呢? 你肯定想知道在“灰阶化”会有哪些应用。那么,比如说:降低色彩以减少用户的视觉焦点,以此来减少用户对你网站上五颜六色东西的关注;比如说,光箱特效。像 vBulletin的论坛系统就使用了这种效果,它会你点击离开时,将页面变灰;然后会弹出确认框,这个确认框非很容易识别,因为它是页面中惟一的带色彩的东西。 “灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜,我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了,但这并不重要;我仅仅是对实现它很感兴趣。示例 我做了一个示例页面,上面有几个格斗士[5]的图片,功能已经在这篇文章中说过了。注意,在Safari(小于4)或才 Chrome(还有可能在Firefox老版本(V.2以前))不起作用;不要忘了它仅仅是一个试验。 http://james.padolsey.com/demos/grayscale/ 使用方法 要对一个元素实现“灰阶化”需要调用 grayscale()函数,并将元素作为参数传递,比如:var el = document.getElementById( 'myEl' ); grayscale( el ); // 也可以传递一个DOM集合 // (这样所有的元素都会得到“灰度效果”) grayscale( document.getElementsByTagName('div') ); //也可以在jQuery对象集合中使用 grayscale( $('div') );若要重置元素(返回到原来的颜色状态)必须调用grayscale.reset(),并将需要重置的元素作为参数传递: grayscale.reset( el ); // reset()同样可以接受DOM对象或jQuery对象集合参数 grayscale.reset( $('div') ); 其中的prepare函数,上面已经讲过了,在有大图片要处理的情况下需要使用到,或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理(一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间)。 grayscale.prepare( document.getElementById('myEl') ); // 同样可以接受DOM对象或jQuery对象集合参数 grayscale.prepare( $('.gall_img') ); [完]注: [1]:灰阶化:原文grayscaling,意为“采取灰度标准”,即灰阶化,将图片由彩色转为灰度; [2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“,可能存在翻译问题; [3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”,翻译存疑; [4]零超时递归技术:原文zero-timeout recursion technique,应为zero-time recursive technique;参见http://en.wikipedia.org/wiki/Recursion_(computer_science); [5]格斗士:原文blood-thirsty hunters,嗜血的猎人
如果有技术人员对网站变黑白有点技术上的困难的话可以参考下这一篇文章。
小更新
Aug 5th
熊猫养成计划的主页http://www.panlilu.cn/今天进行了一点小更新
推荐使用chrome浏览器获得最佳浏览体验
主页的版本号变成了v3
我在想,什么时候会变成v5呢?木哈哈哈哈~~~
解决ubuntu 10.04 chromium 下的字体锯齿问题
Jul 19th
配置完ubuntu10.04后,个方面都很不错,但是有一个问题很困扰,那就是chromium下的中文字体问题。在经过多次尝试配置后仍然解决不了问题,在配置过chromium下的字体设置后,大部分网页显示是正常的,但在一些网站则发现比较小的字体会出现严重的字体问题,非常影响美观。
经过一番寻找,终于在ubuntu论坛找到了解决的办法。
运行命令:
sudo gedit /etc/fonts/conf.d/66-wqy-zenhei-sharp.conf
把<test compare=”more_eq” name=”pixelsize”><double>12</double></test>中的12改为16
原理是禁用了文泉驿正黑的点阵,改完注销一下再打开chromium就可以看到效果了
据说chrome也有这个问题,方法一样。
Sql Server中的日期与时间函数
Jun 10th
最近需要使用数据库的很多关于时间的函数,整理一下放在这里备忘~
数据库能完成的,就不要再写多写程序完成啦~
Sql Server中的日期与时间函数
1. 当前系统日期、时间
select getdate()
2. dateadd 在向指定日期加上一段时间的基础上,返回新的 datetime 值
例如:向日期加上2天
select dateadd(day,2,’2004-10-15′) –返回:2004-10-17 00:00:00.000
3. datediff 返回跨两个指定日期的日期和时间边界数。
select datediff(day,’2004-09-01′,’2004-09-18′) –返回:17
4. datepart 返回代表指定日期的指定日期部分的整数。
SELECT DATEPART(month, ’2004-10-15′) –返回 10
5. datename 返回代表指定日期的指定日期部分的字符串
SELECT datename(weekday, ’2004-10-15′) –返回:星期五
6. day(), month(),year() –可以与datepart对照一下
select 当前日期=convert(varchar(10),getdate(),120)
,当前时间=convert(varchar(8),getdate(),114)
select datename(dw,’2004-10-15′)
select 本年第多少周=datename(week,’2004-10-15′)
,今天是周几=datename(weekday,’2004-10-15′)
函数 参数/功能
GetDate( ) 返回系统目前的日期与时间
DateDiff (interval,date1,date2) 以interval 指定的方式,返回date2 与date1两个日期之间的差值 date2-date1
DateAdd (interval,number,date) 以interval指定的方式,加上number之后的日期
DatePart (interval,date) 返回日期date中,interval指定部分所对应的整数值
DateName (interval,date) 返回日期date中,interval指定部分所对应的字符串名称
参数 interval的设定值如下:
值 缩 写(Sql Server) (Access 和 ASP) 说明
Year Yy yyyy 年 1753 ~ 9999
Quarter Qq q 季 1 ~ 4
Month Mm m 月1 ~ 12
Day of year Dy y 一年的日数,一年中的第几日 1-366
Day Dd d 日,1-31
Weekday Dw w 一周的日数,一周中的第几日 1-7
Week Wk ww 周,一年中的第几周 0 ~ 51
Hour Hh h 时0 ~ 23
Minute Mi n 分钟0 ~ 59
Second Ss s 秒 0 ~ 59
Millisecond Ms – 毫秒 0 ~ 999
access 和 asp 中用date()和now()取得系统日期时间;其中DateDiff,DateAdd,DatePart也同是能用于Access和asp中,这些函数的用法也类似
举例:
1.GetDate() 用于sql server :select GetDate()
2.DateDiff(‘s’,’2005-07-20′,’2005-7-25 22:56:32′)返回值为 514592 秒
DateDiff(‘d’,’2005-07-20′,’2005-7-25 22:56:32′)返回值为 5 天
3.DatePart(‘w’,’2005-7-25 22:56:32′)返回值为 2 即星期一(周日为1,周六为7)
DatePart(‘d’,’2005-7-25 22:56:32′)返回值为 25即25号
DatePart(‘y’,’2005-7-25 22:56:32′)返回值为 206即这一年中第206天
DatePart(‘yyyy’,’2005-7-25 22:56:32′)返回值为 2005即2005年
SELECT CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM
SELECT CONVERT(varchar(100), GETDATE(), 1): 05/16/06
SELECT CONVERT(varchar(100), GETDATE(), 2): 06.05.16
SELECT CONVERT(varchar(100), GETDATE(), 3): 16/05/06
SELECT CONVERT(varchar(100), GETDATE(), 4): 16.05.06
SELECT CONVERT(varchar(100), GETDATE(), 5): 16-05-06
SELECT CONVERT(varchar(100), GETDATE(), 6): 16 05 06
SELECT CONVERT(varchar(100), GETDATE(), 7): 05 16, 06
SELECT CONVERT(varchar(100), GETDATE(), 8): 10:57:46
SELECT CONVERT(varchar(100), GETDATE(), 9): 05 16 2006 10:57:46:827AM
SELECT CONVERT(varchar(100), GETDATE(), 10): 05-16-06
SELECT CONVERT(varchar(100), GETDATE(), 11): 06/05/16
SELECT CONVERT(varchar(100), GETDATE(), 12): 060516
SELECT CONVERT(varchar(100), GETDATE(), 13): 16 05 2006 10:57:46:937
SELECT CONVERT(varchar(100), GETDATE(), 14): 10:57:46:967
SELECT CONVERT(varchar(100), GETDATE(), 20): 2006-05-16 10:57:47
SELECT CONVERT(varchar(100), GETDATE(), 21): 2006-05-16 10:57:47.157
SELECT CONVERT(varchar(100), GETDATE(), 22): 05/16/06 10:57:47 AM
SELECT CONVERT(varchar(100), GETDATE(), 23): 2006-05-16
SELECT CONVERT(varchar(100), GETDATE(), 24): 10:57:47
SELECT CONVERT(varchar(100), GETDATE(), 25): 2006-05-16 10:57:47.250
SELECT CONVERT(varchar(100), GETDATE(), 100): 05 16 2006 10:57AM
SELECT CONVERT(varchar(100), GETDATE(), 101): 05/16/2006
SELECT CONVERT(varchar(100), GETDATE(), 102): 2006.05.16
SELECT CONVERT(varchar(100), GETDATE(), 103): 16/05/2006
SELECT CONVERT(varchar(100), GETDATE(), 104): 16.05.2006
SELECT CONVERT(varchar(100), GETDATE(), 105): 16-05-2006
SELECT CONVERT(varchar(100), GETDATE(), 106): 16 05 2006
SELECT CONVERT(varchar(100), GETDATE(), 107): 05 16, 2006
SELECT CONVERT(varchar(100), GETDATE(), 108): 10:57:49
SELECT CONVERT(varchar(100), GETDATE(), 109): 05 16 2006 10:57:49:437AM
SELECT CONVERT(varchar(100), GETDATE(), 110): 05-16-2006
SELECT CONVERT(varchar(100), GETDATE(), 111): 2006/05/16
SELECT CONVERT(varchar(100), GETDATE(), 112): 20060516
SELECT CONVERT(varchar(100), GETDATE(), 113): 16 05 2006 10:57:49:513
SELECT CONVERT(varchar(100), GETDATE(), 114): 10:57:49:547
SELECT CONVERT(varchar(100), GETDATE(), 120): 2006-05-16 10:57:49
SELECT CONVERT(varchar(100), GETDATE(), 121): 2006-05-16 10:57:49.700
SELECT CONVERT(varchar(100), GETDATE(), 126): 2006-05-16T10:57:49.827
SELECT CONVERT(varchar(100), GETDATE(), 130): 18 ???? ?????? 1427 10:57:49:907AM
SELECT CONVERT(varchar(100), GETDATE(), 131): 18/04/1427 10:57:49:920AM
对时间进行group by
select CONVERT(varchar(100), register_date()(注:表的一个属性名), 112)
from 表名
where 条件
group by CONVERT(varchar(100), register_date(),112)