一个专注于技术的IT男
WebDev
link的地址以斜线开头完全没有道理啊
八 25th
在内部搭一个类stackoverflow的系统，选了个基于django的开源的osqa，部署的时候陆陆续续发现源码里有点小问题，比如用户相关的很多link是这样写的:
<a href="/users/{{ user.id }}/{{ user.username|slugify }}/">{% gravatar user 32 %}</a>
这么搞的话link就指向了服务器的documentRoot，但是我不会把osqa这个应用直接挂在根域名下，这样的hard code我觉得挺愚蠢的。
其实同样的问题也存在我们的jsp里面，这个编程习惯不好，要改正其实也不难，手工做的话可以取得app的rootPath就行了，或者用url标签来帮我们自动搞定。（django&jsp都有的）
另一个Note：osqa第一次装的时候会把配置信息写到forum_keyvalue表里面，后面修改上传路径等的配置没有用，必须到数据库修改。
mysql> update forum_keyvalue set value="S'/upfiles/logo.png'
"> p0
"> ." where id=26;
mysql> update forum_keyvalue set value="S'/var/lib/osqa/forum/upfiles'
"> p0
"> ." where id=33;
Query OK, 1 row affected (0.00 sec)
Rows matched: 1 Changed: 1 Warnings: 0
mysql> select * from forum_keyvalue where id=33;
+----+----------------+-------------------------------------+
| id | key | value |
+----+----------------+-------------------------------------+
| 33 | UPFILES_FOLDER | S'/var/lib/osqa/forum/upfiles'
p0
. |
+----+----------------+-------------------------------------+
Something more:
Larry wrote 2 useful CSS related posts:
CSS – small tips (设置图像最大宽度，打印分页)
CSS – sprites, manage images (图像合并切割)
END
Cool demo with jQuery plugin FancyBox
五 21st
代码如下：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#login").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#flash").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
<div>
<h1><a id="login" href="#register-form" title="This is the title for register form">猛击我吧!</a></h1>
<div style="display:none">
<!-- Registration -->
<div id="register-form" style="width: 500px; height: 300px; margin:auto;">
<h1><a id="flash" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">A Flash Demo</a></h1>
</div>
</div>
<!-- /Registration -->
</div>
为iPhone优化网页的技巧
二 7th
为了使得网页看上去更像native的程序，我们需要对网页进行一些优化
本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置
为iPhone优化网页，最需要了解的应该是下面这个属性
viewport: 可见窗口
可见窗口在iPhone Safari上和桌面Safari略有不同，iPhone上默认没有滚动条，默认的实际的可见大小在竖屏状态下，如下图是320*356，地址栏占据了60像素的高度，稍后我们有办法将其隐藏，得以使用这宝贵的60像素。
iPhone的Safari在显示传统的web网页时（未做优化的网页），viewport会被设置成显示网页宽度的980像素，即在320*356的大小内显示原网页980像素的内容，做了适当的缩放等调整。
所以我们做网页优化的时候，可以通过设置这个meta属性，更多细节可以参考： “Safari Web Content Guide.pdf”
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"/>
width=device-width, //设备宽度
height=device-height, //设备高度
initial-scale=1.0, //初始的缩放比例
user-scalable=no //是否允许用户缩放
小技巧
1. 如何隐藏iPhone Safari的地址栏
设置这个属性(文档里面说有用，但是好像不太成功)
<meta name="apple-mobile-web-app-capable" content="yes" />
还有一种办法，页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够长，我一般设成device-height就没问题了:
<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
2. 如何设置网页的桌面快捷方式图标
这个其实不算技巧，只是从Apple文档里找到这一项罢了
<link rel="apple-touch-icon" href="apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/>
第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个
放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标
第二行是设置启动画面（没看到成功效果）
3. 如何为网页设置iPhone的样式
这个是CSS media selector的一点小技巧
<!--[if !IE]>--> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css"/> <!--<![endif]-->
4. 如何在网页中检测屏幕的方向
<script type="text/javascript">
function updateOrientation()
{
var displayStr = "Orientation : ";
switch(window.orientation)
{
case 0:
displayStr += "Portrait";
break;
case -90:
displayStr += "Landscape (right, screen turned clockwise)";
break;
case 90:
displayStr += "Landscape (left, screen turned counterclockwise)";
break;
case 180:
displayStr += "Portrait (upside-down portrait)";
break;
}
document.getElementById("output").innerHTML = displayStr;
}
</script>
<body onorientationchange="updateOrientation();">
5. 如何在网页中检测当前的位置
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
}
//Register for location changes
var watchId = navigator.geolocation.watchPosition(scrollMap,handleError);
function scrollMap(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
document.getElementById("latitude").innerHTML = "scrollMap->"+latitude;
document.getElementById("longitude").innerHTML = "scrollMap->"+longitude;
}
function handleError(error) {
document.getElementById("error").innerHTML = error;
}
function buttonClickHandler() {
// Unregister when the user clicks a button
navigator.geolocation.clearWatch(watchId);
}
</script>
</head>
<body>
<div id="location">
latitude:<p id="latitude">null</p>
longitude:<p id="longitude">null</p>
</div>
<div>
<input type="button" value="clearWatch" onclick="buttonClickHandler();"/>
</div>
<div id="error"></div>
</body>
炫酷CSS超链接按钮一
一 27th
上一篇文章提到用CSS分割图片的技巧，例子中也展示了一个很漂亮的CSS按钮，今天在tutorialzine看到这篇教程 Sweet AJAX Tabs With jQuery 1.4 & CSS3的按钮也很漂亮，把demo代码下载下来之后，看了一下也是用CSS定位分割图片的技巧做出来的，和上一篇文章中按钮实现略有不同，下面就来解析怎么做出如下的效果:
首先按钮的HTML代码,
<a class="green" href="#">Tab two <span class="left"></span><span class="right"></span></a>
这个按钮的图片由左中右三部分构成，两边的图片是做好了边框效果的，中间的图片可以无限扩展。即下图显示的效果（注：图像来源于tutorialzine原教程）
源图像是这样的，其实还分成了亮度有区别的上下两部分，使用上文中已经介绍过的CSS技巧达到鼠标移上去高亮的效果。
->
->
->
让我们来看看实现一个按钮核心的CSS代码:
a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#03426e;}
a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}
然后是定义按钮size、边框、边距等的CSS代码:
a,a:visited{
/* Styling the hyperlinks of the tabs as colorful buttons */
float:left;
font-size:18px;
/* display:block allows for additinal CSS rules to take effect, such as paddings: */
display:block;
padding:7px 16px 1px;
margin:4px 5px;
height:29px;
/* Giving positioning */
position:relative;
/* CSS3 text-shadow */
text-shadow:1px 1px 1px #CCCCCC;
}
.left{
/* The left span in the hyperlink */
height:37px;
left:0;
position:absolute;
top:0;
width:10px;
}
.right{
/* The right span in the hyperlink */
height:37px;
right:0;
position:absolute;
top:0;
width:10px;
}
CSS分割背景图片的技巧
一 24th
因为我也不是CSS高手，所以本文的目的是写清楚如何弄明白CSS中分割图片的技巧，说到分割其实并不是真正意义上的剪裁图片，只是已经流行多年了的一种CSS best practise，用一个拼接起来的大的图片资源替代加载多个小图片的一种方法，优点是节约页面的加载速度，不会出现有的图片能显示有的还在加载的情况，这个效果或者性能用firebug可以测试出来。
当然用这个技巧也要选对地方用才行，要是经常需要改动的图像用这个技术还是有点折腾的。
核心的属性是这个：background-position 参数值从w3schools找出来的
Property Values
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the second value will be “center”. Default value is: 0% 0% |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| inherit | Specifies that the setting of the background-position property should be inherited from the parent element |
这里有篇不错的文章描述的是下面这个例子，将原图竖着的1234显示成横着的4个盒子
CSS: Using Percentages in Background-Image
.box1
.box2
.box3
.box4
下面这个例子也是常用到的：
鼠标移到按钮上，用稍微亮一点点的图片显示的悬停效果。
用到的green.png原图：
按钮的代码:
<a class="green" href="#">Green<span> </span></a>
按钮的CSS:
a {
/* The section titles */
display:block;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
a {
text-decoration: none;
}
a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}
a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
a.green span{ background:url(img/green.png) repeat-x top right;}
/* The hover effects */
a:hover{ background-position:bottom left;}
最重要的一行，鼠标移上去的时候设置图像的位置为bottom left，而下半部分的图像比上半部分亮一点。
效果如下:
最后一个按钮样式和第一个其实是一样的，只不过最后是从sprite.png加载过来的，我使用了CSS 图片拼合生成器将四张图拼接起来了，然后再用CSS去定位。
拼接完成之后的图：
[WebDev]有用的http-equiv属性
十二 28th
作为一个web开发人员，特别是在AJAX流行的时代，必须要熟悉这个http-equiv属性，这是w3school的一个参考表
| Value | Description |
|---|---|
| Allow | Defines the methods supported by the server |
| Content-Encoding | Defines additional content-encoding for the document |
| Content-Length | Defines the size of the document (in bytes) |
| Content-Type | Defines the MIME type of the document (like text/html) |
| Date | Defines when the document was created |
| Expires | Defines when the document will be considered obsolete |
| Last-Modified | Defines when the document was last modified |
| Location | Defines an absolute URL for the document |
| Refresh | Defines a time interval for the document to refresh itself |
| Set-Cookie | Defines a cookie-value |
| WWW-Authenticate | Defines authentication rules returned by the server |
对于开发人员最实用的小技巧
1. 设置页面的自动刷新时间或者自动跳转时间
例如：著名的struts2的blank example就使用了这个小技巧，进行index页面的跳转
<META HTTP-EQUIV=”Refresh” CONTENT=”0;URL=example/HelloWorld.action”>
2. 关于页面缓存的设置
<meta http-equiv=”pragma” content=”no-cache”>
禁止浏览器访问本机缓存的页面，这对于AJAX应用程序的调试来说绝对需要
<meta http-equiv=”expires” content=”Thu, 29 Nov 2007 16:18:42 GMT”>
设置页面的过期时间，所以设置一个过去的值当然页面一直是过期的，那就要求浏览器再去请求服务端的页面
3. 编码
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
其他一些小花稍的功能
如：页面进入和退出的特效 （貌似IE支持，FF不支持，其余浏览器未测试）
<meta http-equiv=”Page-Enter” content=”revealTrans(duration=seconds, transition=type)”>
<meta http-equiv=”Page-Exit” content=”revealTrans(duration=x, transition=type)”>
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
参考：
javascript-lyrics-show
十二 26th
这是一个简单的在网页中使用MediaPlayer（仅支持IE）播放音乐，并且同步显示歌词的小实验。
因为看到公司同事在做一个菜谱的widget，有个类似于同步显示歌词的功能，所以一时手痒痒，也想自己实现一个，今天花了一天的时间，差不多搞定了，现在只是显示当前这句的歌词，即卡拉OK效果。
现在看来能改进的地方是，加上全文歌词的预览和滚动的特效，当然在这个基础之上做不难，主要是细节的处理。
效果截图（点击下图可进入测试页面，有兴趣的自行查看网页源码，思路清楚了其实比较简单）
实现思路:
1. 页面加载完成之后，ajax请求加载对应的歌词文件
2. 播放事件触发之后，开始定时播放歌词
3. 暂停事件触发之后，暂停播放歌词的定时器
技术细节:
1.歌词文件加载成自定义的类，这个在类在自定义的lyrics.js文件中，可被重用
2. MediaPlayer的PlayStateChange事件处理
MediaPlayer的相关参考:
http://www.w3schools.com/media/media_playerref.asp
使用AJAX集成Gravatar头像到自己的评论系统
一 20th
由Jacky发表在JavaScript
没有评论
无图无真相，点击下图可以去测试页面查看源码
集成Gravatar头像的核心是构造一个图像的URL地址，Gravatar的最简单的头像URL地址是这样生成的
1. 用MD5Hash算法加密你的邮箱地址
2. 头像 URL= http://www.gravatar.com/avatar/+第一步加密后的值
当然Gravatar还提供了几个有意思的参数，如?d=monsterid加上这个参数，如果邮箱地址未在Gravatar注册过，则动态生成一个小怪兽的头像（例子：左图的右下头像）
JavaScript的MD5Hash所幸也有人早就写过了，到这里下载一个。
现在我们需要关心的就是页面怎么写了，左图的评论表单是从wordpress里抠出来的，CSS我不是高手，简单的弄了下不至于太难看。
AJAX的标题有点噱头啦，但是在这个例子的基础上做成AJAX评论也只剩下一小步了。
其实测试页面值得一提的代码是这一段，用户输入完email地址之后，这个输入框失去焦点，这个时候我们动态加载其头像，这样一来用户体验能够得到明显提升，不要看是个小小的功能，有时候就是这些细节才抓住了你的目标客户。
//jQuery的blur事件 ("#email").blur(function(event){ //清空上一个头像 $("#ajaxgravatar").html(''); $email = $.trim($("#email").val()).toLowerCase(); //调用MD5 JavaScript文件的API $gavatar = hex_md5($email); //构造URL $gavatar_url = "http://www.gravatar.com/avatar/"+$gavatar; //动态修改头像 $("#ajaxgravatar").html('<img id="ajaxgravatar" alt="Gravatar" src="'+ $gavatar_url +'?d=monsterid"/>') });