微软今天在博客编撰了一篇有关HTML5开发Metro应用的文章,介绍了HTML5的技术意义以及应用程序开发人员如何用它来创建一个新的Metro7应用。微软的IE10已经完整支持HTML5,对于用惯了Visual Studio 2010和Expression Web等工具的开发者来说用这种技术来进行开发可以让自己的程序更轻量且更广泛地支持其它平台。
Author Archives: H
为程序员和设计师准备的10个流程图
流程图是一样很有用的工具。它可以用来帮助你做决策,给你一步一步的引导。对于很多复杂的设计和流程来说,流程图是必不可少的。和其他图形一样,流程图让你直观的理解一个流程,甚至有可能帮助你找出流程中的问题或者瓶颈。 这篇文章介绍了10个非常有用的流程图,可以帮助程序员和设计师来做决定。你可以点击放大这些图片。
1. 如何使用 HTML5 标签?
这个流程图可以帮助你决定什么时候使用什么HTML5标签。

2. 你需要一个新的LOGO吗?
这个流程图可以帮助你决定是否需要重新设计LOGO,以及如何重新设计LOGO。

3. 如何判断是否要在Twitter上关注一个人?
这个流程图教你是否应该在Twitter(景德镇人民可以同理到微博)关注某个人。

4. 如何选择字体?

5. 你是否应该成为自由职业者?

6. 程序员该如何加入创业公司?

7. 网站制作和上线流程

8. 你可以成为一个网页设计师吗?

9. 你的想法确实是一个好想法吗?
这个流程可以帮助你判断你认为激动人心的想法是否是一个好想法。

10. 如何判断一个网页是不是做的很烂?

( via 10 Useful and Hilarious Flowcharts for Web Designers and Developers & oschina )
微软Internet Explorer团队发布情人节HTML5页面
微软Internet Explorer团队今天发布了一个基于HTML5构建的站点”Love is in the Air”,这是去年冬天Let it snow网站后又一个炫技版网页。它运用了目前最顶尖的各种Web技术:HTML5 canvas, SVG, CSS transforms & transitions, WOFF和声音,实现了大量的心形标记展示,并提供计数(最多可实现4000个),该网站不但传递了浪漫,还展示了IE和HTML5的强大性能。

IE7、IE8、IE9、IE10后各版本的更新内容和各版本的差别
在程序员的眼里,万恶的IE6的结束对他们而言是一种解脱,IE7首次开始完整支持W3C标准,从此之后IE的标准化之路就开始越走越顺,以下总结了IE7以后各版本的更新内容,和各版本的差别,作为Web开发人员解决浏览器兼容性问题的参考。
IE7更新
- 解决了IE6的一个float bug,见http://www.positioniseverything.net/explorer/peekaboo.html
- 增强了CSS选择器支持
- 内置AJAX
- 透明PNG图片支持
微软官方更新说明http://www.microsoft.com/china/msdn/library/webservices/WebApp/IE7_RevGd.mspx?mfr=true
IE8更新
- 解决了所有浮动bug(可能是所有CSS Bug都解决了),完全支持CSS2.1规则和选择器(这个是亮点,至少在CSS上完全符合W3C标准了) 具体见http://msdn.microsoft.com/library/cc304082.aspx
- 去掉了CSS 表达式 使用 -ms-厂商前缀表示IE专有属性,这一点向webkit和firefox学习了,值得表杨
- 修正了一系列DOM错误,更符合标准,但并没有新增支持 如getElementById的时候ID区分大小写,不会错把Name当ID,详细列表见 http://msdn.microsoft.com/library/dd433047.aspx
- 支持link标签的charset属性 AJAX支持增强
- 支持HTML5中的本地存储(挺先进的
- 本地JSON对象支持(这个也挺先进)
- 增加UA兼容模式
- 增加了almost Stardards渲染模式
- 然而IE8仍然没有实现DOM L2,DOM L3和DOM L2 和 L3 事件处理(包括冒泡模型)的完整支持
微软官方更新说明
http://msdn.microsoft.com/library/cc288472%28VS.85%29.aspx#html
IE9更新
- 实现DOM L2,DOM L3和DOM L2 和 L3 事件处理(包括冒泡模型)的完整支持
- HTML5和CSS3支持 opacity透明属性的支持
- CSS3 2-D transforms
- Canvas,video之类,等等
- Web 开放字体格式 (WOFF) 的支持 SVG原生支持 一系列JS Bug的修复(Jscript更符合ECMAScript标准 见http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more.aspx
和http://blogs.msdn.com/b/ie/archive/2010/03/26/standards-documentation-for-ie7-and-ie8.aspx - ECMAScript 5支持 在DOM中空白字符也作为独立的文本节点以保持与其它浏览器一致 见http://www.w3school.com.cn/xmldom/dom_mozilla_vs_ie.asp
未知标签也能使用CSS样式 支持application/xhtml+xml的MIME
微软更新说明
http://msdn.microsoft.com/zh-cn/ie/ff468705
IE10更新
- ECMAScript 5 Strict 模式支持 HTML5和CSS3增强 CSS3 3-D transforms(需要-ms-前缀,因为W3C还未定稿)
- Websocket,webwork,file api等等
- SVG改进和增强 SVG滤境
- DOM增强 大多是带ms前缀的增强(也是就IE专有的)
- 如触屏操作,手势事件,等等
- 不再支持IE10的UA兼容设置(因为从IE9开始已经完全符合W3C标准),但仍支持IE9和之前的UA兼容设置
微软更新说明
http://msdn.microsoft.com/en-us/ie/gg192966
概括的说IE7只是对IE6的小小增强,IE8完全支持CSS2.1和选择器,DOM操作更符合W3C标准,但DOM支持仍不完整IE9 完全支持DOM L1,DOM L2,Jscript更符合标准,ECMAScript5支持,HTML5,CSS3支持,SVG支持。
解决Mac OS X上PhpStorm不能输入中文
看到Netbeans上类似问题的解决办法:
/Applications/netbeans/NetBeans 6.7.1/Content/Resource/netbeans/etc/netbeans.conf
netbeans_default_options 里加入
-J-Djava.awt.im.style=on-the-spot
类似,找到PhpStorm的启动文件:/Applications/PhpStorm 2.1.2.app/bin/idea.sh
在 REQUIRED_JVM_ARGS 参数里同样加上 -J-Djava.awt.im.style=on-the-spot
REQUIRED_JVM_ARGS="-J-Djava.awt.im.style=on-the-spot -Xbootclasspath/a:../lib/boot.jar $IDEA_PROPERTIES_PROPERTY $REQUIRED_JVM_ARGS"
可以输入中文了!(via)
PHP导出Excel
方法一:使用制表符、换行符模拟Excel导出
$filename="ExportExcel.xls";//定义一个excel文件
header("Content-Type: application/vnd.ms-execl");
header("Content-Type: application/vnd.ms-excel;charset=UTF-8");
header("Content-Disposition: attachment; filename=$filename");
header("Pragma: no-cache");
header("Expires: 0");
//设置excel输出表头,当然这不是必须的
echo iconv("UTF-8", "gb2312", "ID")."\t";
echo iconv("UTF-8", "gb2312", "Col1")."\t";
echo iconv("UTF-8", "gb2312", "Col2")."\t";
echo iconv("UTF-8", "gb2312", "Col3")."\t";
echo iconv("UTF-8", "gb2312", "Col4")."\n";//注意这个要换行
//连接数据库
mysql_query("SET NAMES utf8");
$result="SELECT * FROM");
while($row =mysql_fetch_array($result)){
echo iconv("UTF-8", "gb2312", $row[0])."\t";
echo iconv("UTF-8", "gb2312", $row[1])."\t";
echo iconv("UTF-8", "gb2312", $row[2])."\t";
echo iconv("UTF-8", "gb2312", $row[3])."\t";
echo iconv("UTF-8", "gb2312", $row[4])."\n";
}
这个方法最简单,但是导出的文件并不是真正的Excel,无法设置格式,而且在Mac版的MS Office上无效。
php-excel
简单小巧的Excel类库,可自行修改相关代码设置单元格格式,导出的实际上市XML格式的电子表格,相关属性可参考MSDN文档。小技巧:可以先建一个Excel并将相关格式设置好,另存为XML,用文本编辑器打开XML即可查看相关格式的设置方法,其实和HTML、CSS差不多。
PHPExcel
功能强大、全面,支持office2003、office2007与之相应的是过于臃肿。
个人觉得一般应用的话,第二种方法就足够了,毕竟PHP处理office这些东西并非PHP的长项,在相关软件里点几下鼠标就能调整好的格式,又何必用PHP费大劲设置呢?
用javascript替换URL中的参数
//分析url
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':', ''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function () {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length, i = 0, s;
for (; i < len; i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
//替换myUrl中的同名参数值
function replaceUrlParams(myUrl, newParams) {
/*
for (var x in myUrl.params) {
for (var y in newParams) {
if (x.toLowerCase() == y.toLowerCase()) {
myUrl.params[x] = newParams[y];
}
}
}
*/
for (var x in newParams) {
var hasInMyUrlParams = false;
for (var y in myUrl.params) {
if (x.toLowerCase() == y.toLowerCase()) {
myUrl.params[y] = newParams[x];
hasInMyUrlParams = true;
break;
}
}
//原来没有的参数则追加
if (!hasInMyUrlParams) {
myUrl.params[x] = newParams[x];
}
}
var _result = myUrl.protocol + "://" + myUrl.host + ":" + myUrl.port + myUrl.path + "?";
for (var p in myUrl.params) {
_result += (p + "=" + myUrl.params[p] + "&");
}
if (_result.substr(_result.length - 1) == "&") {
_result = _result.substr(0, _result.length - 1);
}
if (myUrl.hash != "") {
_result += "#" + myUrl.hash;
}
return _result;
}
//辅助输出
function w(str) {
document.write(str + "<br>");
}
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
w("myUrl.file = " + myURL.file) // = 'index.html'
w("myUrl.hash = " + myURL.hash) // = 'top'
w("myUrl.host = " + myURL.host) // = 'abc.com'
w("myUrl.query = " + myURL.query) // = '?id=255&m=hello'
w("myUrl.params = " + myURL.params) // = Object = { id: 255, m: hello }
w("myUrl.path = " + myURL.path) // = '/dir/index.html'
w("myUrl.segments = " + myURL.segments) // = Array = ['dir', 'index.html']
w("myUrl.port = " + myURL.port) // = '8080'
w("myUrl.protocol = " + myURL.protocol) // = 'http'
w("myUrl.source = " + myURL.source) // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
var _newUrl = replaceUrlParams(myURL, { id: 101, m: "World", page: 1,"page":2 });
w("<br>新url为:")
w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top
雅虎发布WebPlayer 可简便嵌入媒体到网页
雅虎面向网站开发者提供了一个beta版本的WebPlayer应用,它是一个可以内嵌在网页中的媒体播放器,支持各种视频和音频格式,只需要提供媒体文件地址就可以轻松地像YouTube的嵌入代码一样形成一个网页中的播放器,包含播放列表和控制功能。
访问:WebPlayer
PHP获取文件扩展名的方法
推荐的方法:
echo pathinfo('/www/htdocs/your_image.jpg', PATHINFO_EXTENSION);
pathinfo详解:
<?php
$file_path = pathinfo('/www/htdocs/your_image.jpg');
echo "$file_path ['dirname']\n";
echo "$file_path ['basename']\n";
echo "$file_path ['extension']\n";
echo "$file_path ['filename']\n"; // only in PHP 5.2+
?>
以上将输出
- /www/htdocs
- your_image.jpg
- jpg
- your_image
注意: pathinfo 支持第3个参数
- PATHINFO_DIRNAME – 目录
- PATHINFO_BASENAME – 文件名(含扩展名)
- PATHINFO_EXTENSION – 扩展名
- PATHINFO_FILENAME – 文件名(不含扩展名)
其它不推荐的写法:
你可能会这样写
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
或这样写
function file_extension($filename) {
return end(explode(".", $filename));
}
之所以不推荐以上两种方法,主要基于效率考虑。
IE10采用新的HTML5解析规则
如果开发人员在不同的浏览器中使用相同的标记和代码可以得到相同的效果,这会让Web开发变得更简单有效。IE10在这方面的取得进展,完全支持 HTML5的标准化解析规则。HTML 5的重要变化之一便是引入了针对非标准HTML特别是错误格式HTML的标准化解析规则。浏览器在遇到存在错误的HTML如缺少结束标记时通常表现得很宽 松。这种大度被广受赞誉,因为相比对手XHTML来说,HTML在此种情况下会继续正常处理。 HTML最新待定标准提到:
本规范定了HTML文档的解析规则,无论它们语法是否错误。解析算法中的某些地方被视为解析错误。针对解析错误的处理明确定义:用户代理(浏览器)在遇到这些问题时要么按照如下描述处理,要么必须在遇到第一个不想遵循如下处理规则的错误时终止处理。
下面的示例说明某些情况下的改进:
互操作的innerHTML
这些改进也适用于innerHTML。代码模式就像现在这些工作,你会期待IE10:
var select = document.createElement("select");
select.innerHTML = “<option>one</option><option>two</option>”;
var table = document.createElement(”table”);
table.innerHTML = “<tr><td>one</td><td>two</td></tr>”;
更好的错误报告
HTML5确保标记将始终解析。它还是一个帮助开发人员一开始便避免无效标记的方法。编写有效的标记可以使您的网站按照期望的方式工作,并更好的与旧版浏览器兼容。
为了在这方面帮助开发人员,IE10现在可以通过F12开发人员工具报告HTML解析错误。
删除旧特性
因为某些在早期IE浏览器版本中的特性已不符合HTML5解析,我们已经将他们从IE10模式中删除。这些过时的特性在传统模式下仍然有效。
1、条件注释
<!–[if IE]> 在IE10和其他的浏览器中,此内容被忽略。 在旧版本的IE浏览器中,它呈现为页面的一部分。 <![endif]–>
这意味着仍然可以使用条件注释,但将只针对旧版本的IE浏览器 。如果你需要区分较新的浏览器,请使用功能检测。
2、元素行为
<html xmlns:my> <?import namespace=”my” implementation=”my.htc”> <my:element> 在IE10和其他的浏览器中,这解析为未知的元素 在旧版本的IE浏览器中,它绑定到 “my.htc” </my:element> </html>
<xml> 在IE10和其他的浏览器中,这解析为<b>HTML</b> 在旧版本的IE浏览器中,它解析为XML </xml>


