大风口 » markup language http://www.masterboke.com I want to change the world! Fri, 16 Sep 2011 09:41:27 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS优化 http://www.masterboke.com/2009/07/10/css-improve/ http://www.masterboke.com/2009/07/10/css-improve/#comments Fri, 10 Jul 2009 07:02:39 +0000 boke http://www.masterboke.cn/?p=553 本文总结了一些CSS优化的规则，包括一些简写技巧，选择器的使用，及其它注意事项。 css简写技巧 1、属性值为0，而非0px。如果属性值为0，那么可以不为其添加单位（如px、em等），例如： padding: 10px 5px 0px 0px;  可以写成： padding: 10px 5px 0 0; 2、背景属性合写。背景属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，可以将这些合并写到一句里，例如： background-image: url(bg.png); background-position: 0 0; background-repeat: no-repeat; 可以写成： background: url(bg.png) no-repeat 0 0; 4、文字属性合写。和背景一样，文字属性也有很多可能会用到的属性值，来个复杂的文字样式： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5; font-family:Arial, sans-serif;  可以写成： font:italic small-caps bold …

继续阅读 »

]]>

本文总结了一些CSS优化的规则，包括一些简写技巧，选择器的使用，及其它注意事项。

css简写技巧

1、属性值为0，而非0px。如果属性值为0，那么可以不为其添加单位（如px、em等），例如：

padding: 10px 5px 0px 0px;

 可以写成：

padding: 10px 5px 0 0;

2、背景属性合写。背景属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，可以将这些合并写到一句里，例如：

background-image: url(bg.png);
background-position: 0 0;
background-repeat: no-repeat;

可以写成：

background: url(bg.png) no-repeat 0 0;

4、文字属性合写。和背景一样，文字属性也有很多可能会用到的属性值，来个复杂的文字样式：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5;
font-family:Arial, sans-serif;

 可以写成：

font:italic small-caps bold 12px/1.5 Arial, sans-serif;

4、颜色简写。css里的颜色数值使用“#”加6个16进制数表示的。这6个数两个一组，分别表示red，green，blue的值，有人说如果每对的颜色值都是各自相等的，可以简写成一个数值。例如，#ff6600，可以简写成#f60。关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写字母及数字组成的六位数标注。在未知情况下不希望冒险而降低了渲染的效率，所以还是建议写成#FF6600。

5、margin、padding等的简写。有些人会这样声明边框：

margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;

可以这样简写：

margin:5px 10px 5px 10px;

css里，像margin、padding、border-width等在写属性值时都是按照上-右-下-左的顺时针方向来写的，不要弄混顺序。像上面的例子，上下边距，左右边距分别是相等的，还可以进一步简化：

margin:5px 10px;

同理，padding、border-width等也是如此。

6、border的简写。举个例子，声明一个1像素的黑色实线边框：

border-width:1px;
border-style:solid;
border-color:#000;

可以简写成：

border:1px solid #000;

有人可能会记不清顺序，我通常这样记，“数字靠两端，字母摆中间”。

7、列表样式。用的不多，一个例子：

list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

这样简写：

list-style:square inside url(filename.gir);

选择器使用

据说Mozilla样式系统的选择器是从右向左匹配的，这里有篇文章https://developer.mozilla.org/en/Writing_Efficient_CSS，看看就行，毕竟因为ie6的存在，像>，+这样的选择器我们是用不到的，关于浏览器对选择器的支持情况，可以看下http://www.masterboke.cn/2009/02/26/css-browser-support/。不管选择器是从左还是从右匹配，有三点注意一下：

1、避免使用通用选择符。想*{}，#test *{}这样的选择器还是不要用。

2、不要用标签修饰id选择器。不要出现div #test{}这样的选择器，id选择器直接单独使用就行，不用再画蛇添足。

3、不要使用标签修饰class选择器。不要出现div .test{}这样的选择器。

其它注意事项

1、对css代码进行压缩。不管开发时是啥样的，呈现到用户面前时必定是压缩过的。

2、应该将CSS 放置于结构的上方（一般放置于head 元素内）。CSS 是解释型语言，ff和ie在等待CSS 传输完成之前不会渲染任何东西。放在顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

3、尽量使用 <link rel=”stylesheet” href=”http://www.masterboke.cn/test.css” type=”text/css”> 的样式导入方式，而减少@import 的使用，更不要使用多层嵌套的@import 。因为在 IE 里，@import 相当于将<link> 放在页面尾部。

4、不要使用css表达式。CSS Expressions这个东西好像也只有ie里能用。

5、将css从页面里剥离，放在单独的文件里，这样能够使用缓存、压缩等策略，当然要注意不要引入过多的css文件，会增加http请求的。

6、避免使用滤镜。IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

]]> http://www.masterboke.com/2009/07/10/css-improve/feed/ 0 document.documentElement和document.body http://www.masterboke.com/2009/02/13/documentdocumentelementdocumentbody/ http://www.masterboke.com/2009/02/13/documentdocumentelementdocumentbody/#comments Fri, 13 Feb 2009 15:35:55 +0000 boke http://www.masterboke.cn/?p=298 昨天在试.xhtml时，看网上说要得到<html>节点，在xhtml里要用document.documentElement，而在html 4里要用document.body，以前虽然知道它俩之间的区别，但还真没仔细注意过。结果我一试，不管是用xhtml还是html，不管是加DOCTYPE还是不加，document.documentElement总是<html>节点，document.body总是<body>节点。 这是咋回事呢？后来找了半天，在一个博客里看到，好像只有在IE 4以前的浏览器才认为document.body是<html>节点，具体怎样说的我也忘了，现在再找那个博客也找不到了。我也没有IE 6以前版本的浏览器，没法试，算了，就这样吧，谁还会用IE 6以前的浏览器呢？ 所有的现代浏览器都认为document.documentElement可以得到<html>，document.body可以得到<body>。 不过我可没说在IE下，带DOCTYPE的文件和不带的，对documet.documentElement的解释是完全一样的。例如，我们要得到浏览器的显示区域大小，在带DOCTYPE的文件里，我们要用document.documentElement.clientWidth/document.documentElement.clientHeight来得到；而在不带DOCTYPE的文件里，这时documentElement.clientWidth/clientHeight都等于0，我们要用document.body.clientWidth/document.body.clientHeight来得到。 明白了吗？不明白的话，那咱就来点更糊涂的。 接着上面那个例子，我们现在通常使用的得到浏览器显示区域大小的函数通常可以简单的这样写： <script type="text/javascript"> function documentHeight() { var de = document.documentElement; return window.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight; } function documentWidth() { var de = document.documentElement; return window.innerWidth || …

继续阅读 »

]]>

昨天在试.xhtml时，看网上说要得到<html>节点，在xhtml里要用document.documentElement，而在html 4里要用document.body，以前虽然知道它俩之间的区别，但还真没仔细注意过。结果我一试，不管是用xhtml还是html，不管是加DOCTYPE还是不加，document.documentElement总是<html>节点，document.body总是<body>节点。

这是咋回事呢？后来找了半天，在一个博客里看到，好像只有在IE 4以前的浏览器才认为document.body是<html>节点，具体怎样说的我也忘了，现在再找那个博客也找不到了。我也没有IE 6以前版本的浏览器，没法试，算了，就这样吧，谁还会用IE 6以前的浏览器呢？

所有的现代浏览器都认为document.documentElement可以得到<html>，document.body可以得到<body>。

不过我可没说在IE下，带DOCTYPE的文件和不带的，对documet.documentElement的解释是完全一样的。例如，我们要得到浏览器的显示区域大小，在带DOCTYPE的文件里，我们要用document.documentElement.clientWidth/document.documentElement.clientHeight来得到；而在不带DOCTYPE的文件里，这时documentElement.clientWidth/clientHeight都等于0，我们要用document.body.clientWidth/document.body.clientHeight来得到。

明白了吗？不明白的话，那咱就来点更糊涂的。

接着上面那个例子，我们现在通常使用的得到浏览器显示区域大小的函数通常可以简单的这样写：

<script type="text/javascript">
function documentHeight() {
  var de = document.documentElement;
  return window.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight;
}

function documentWidth() {
  var de = document.documentElement;
  return window.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;
}
</script>

这里的window.innerWidth，document.documentElement.clientWidth，document.body.clientWidth都是啥意思呢？都是为了得到浏览器显示区域的宽，第一个是适用于非IE系的，第二个是适用于带有DOCTYPE的IE 浏览器的，第三个是适用于不带有DOCTYPE的IE 浏览器的。

怎么样？乱不？

感觉还行的话，还有更刺激的，加不加DOCTYPE，不同的浏览器，有没有设置margin，这么多种情况，排列组合一下，测试一下以上那三个值，绝对够你喝一壶的。

如果感觉乱，那就到此为止吧，我们按w3c那帮闲人的标准来，加上DOCTYPE。

]]> http://www.masterboke.com/2009/02/13/documentdocumentelementdocumentbody/feed/ 0 .xhtml扩展名 http://www.masterboke.com/2009/02/12/xhtml%e6%89%a9%e5%b1%95%e5%90%8d/ http://www.masterboke.com/2009/02/12/xhtml%e6%89%a9%e5%b1%95%e5%90%8d/#comments Thu, 12 Feb 2009 15:56:17 +0000 boke http://www.masterboke.cn/?p=291 今天在研究手机开发时的javascript应用时，不经意间发现了个小问题，现来看一下这两个文件： a.xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>1</title> <script type="text/javascript"> window.onload = function() { var pp = document.documentElement.childNodes; for (p in pp) { alert(pp[p]); } } </script> </head> <body> …

继续阅读 »

]]>

今天在研究手机开发时的javascript应用时，不经意间发现了个小问题，现来看一下这两个文件：

a.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>

b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>

发现两个文件的不同之处了吗？其实上面两个文件是完全一样的，除了扩展名。

由于要做手机开发，有人建议说用.xhtml这个扩展名更好一些，于是就用了。本想用js得到body这个节点，结果试了几次pp[0]都不对。

我用的是XHTML-MP 1.2的DOCTYPE，难道DOCTYPE不对？好，换成标准的xhtml的DOCTYPE，就是a.xhtml这样的，还是不对啊！

难道js代码写的有问题？（这里有段小插曲，在下篇文章详述）百度一下，再翻出以前写的看看，没问题啊！还有哪儿不对呢？

按网上和我以前的经验来说，pp[0]是<head>，pp[1]是<body>才正对呀！不管了，先把pp都alert出来看看是啥东西再说。这一alert发现问题了，多出三个[object Text]，分别位于<head>前面，<head>和<body>之间，<body>之后。这种情况，甭问肯定是换行符所致，删掉，果然没问题了。

记得以前没出现这种情况，那可能就是扩展名的问题了，另存为b.html，再试，没问题了，这才恍然大悟，怪不得年前看过一个手机页面，一个换行符也没有。

来个刨根问底，查查这个.xhtml到底咋回事，百度了半天，没找到，google了半天，好像（为什么加个好像呢?答案看我2月12号的饭否）也没找到。

哪位有缘人路过提点提点，期待ing！！！

]]> http://www.masterboke.com/2009/02/12/xhtml%e6%89%a9%e5%b1%95%e5%90%8d/feed/ 2 CSS选择器 http://www.masterboke.com/2009/02/07/cssselector/ http://www.masterboke.com/2009/02/07/cssselector/#comments Sat, 07 Feb 2009 09:31:37 +0000 boke http://www.masterboke.cn/?p=260 重学prototype，半道研究了一下css2.1和css3的选择器，整理整理： CSS 2.1 1. 通用选择器(Universal selector) 即星号”*”，匹配任何元素类型 2. 类型选择器(Type selectors) h1 {font-size:19px;} /*匹配文档中所有的h1元素*/ 3. 后代选择器(Descendant selectors) <h1>I <span>am <em>boke.</em></span></h1> h1 em {color:blue} /*匹配h1中的em元素*/ 4. 子选择器(Child selectors)  <h1>I <span>am <em>boke.</em></span></h1> span > em {color:blue} /*匹配span中的em元素。子选择器只对儿子辈的可用，对孙子、重孙子辈等都不可用，如h1 em{color:blue}将不起作用*/ 5. 相邻兄弟选择器(Adjacent sibling selectors) <span …

继续阅读 »

]]>

重学prototype，半道研究了一下css2.1和css3的选择器，整理整理：

CSS 2.1

1. 通用选择器(Universal selector)

即星号”*”，匹配任何元素类型

2. 类型选择器(Type selectors)

h1 {font-size:19px;} /*匹配文档中所有的h1元素*/

3. 后代选择器(Descendant selectors)

<h1>I <span>am <em>boke.</em></span></h1>

h1 em {color:blue} /*匹配h1中的em元素*/

4. 子选择器(Child selectors)

 <h1>I <span>am <em>boke.</em></span></h1>

span > em {color:blue} /*匹配span中的em元素。子选择器只对儿子辈的可用，对孙子、重孙子辈等都不可用，如h1 em{color:blue}将不起作用*/

5. 相邻兄弟选择器(Adjacent sibling selectors)

<span class=”abc”>I am Peter Petrelli.</span>

<h1>I am boke.</h1>

<span class=”abc”>I am Sylar.</span>

h1 + .abc {color:blue} /*匹配与h1紧邻的后一个，类名为abc的元素。注意是后一个，“I am Peter Petrelli”是不会变蓝的。*/ 

6. 属性选择器(Attribute selectors)

<span lang=”zh-cn” title=”heroes the 4400″>Super men?</span>

  • span[title] {color:red;} /*匹配含有title属性的span*/
  • span[title="heroes the 4400"] {color:red;} /*匹配title属性的值为“heroes the 4400”的span*/
  • span[title~="heroes"] {color:red;} /*匹配title属性中含有以空格分隔的，单词为“heroes”的span*/
  • span[lang|="zh"] {color:blue;} /*匹配lang属性中含有连字符且以“zh”开头的span*/

7. 类选择器和ID选择器(Class selectors and ID selectors)

不必多言。

8. 伪类

<div><p>I am boke.</p><p>I am Hiro Makamura.</p><a href=”">I am Matt Parkman.</a></div>

  • :first-child  例如：div > p:first-child {color:red;} /*匹配div下的第一个p元素*/
  • :link and :visited  例如a:link {color:blue;} /*匹配没有被访问的超链接*/ a:visited {color:yellow} /*匹配已经被用户点击的超链接*/ 
  • :hover,:active and :focus  例如：.b:hover {color:blue;} /*匹配class=”b”的元素鼠标放上时*/ .b:active {color:red;} /*匹配class=”b”的元素鼠标按下时*/ .b:focus {color:yellow;} /*匹配class=”b”的元素得到焦点时*/
  • :lang  例如：html:lang(zh-cn) {qutoes:’?’ ‘?’}

9. 伪元素

  • :first-line  例如：p:first-line {font-size:3em;} /*匹配p元素内的第一行，注意，只作用于块元素，内联元素要设定height或width属性，或设定position为absolute，或设定display为block*/
  • :first-letter  例如：p:first-letter{font-size;2em;} /*匹配p元素内的第一个字符，注意，同first-letter*/
  • :before and :after  例如：p:before {content:”nani?”} /*设置在p之前发生的内容，注意要和content配合使用*/

CSS 3

2.1中有的不再重复，将标注 “²  ”这个符号表示

1. 通用选择器(Universal selector)²

2. 类型选择器(Type selector)² 

3. 属性选择器(Attribute selector)²

<a href=”" title=”copyright boke”>sa ku sha.</a>

  • a[title]²
  • a[title="copyright boke"]²
  • a[title~="copyright"]²
  • a[lang|="zh"]²
  • a[title^="copy"] /*匹配有title属性且属性值以“copy”开头的a元素*/
  • a[title$="ke"] /*匹配有title属性且属性值以“ke”结尾的a元素*/
  • a[title*="right"] /*匹配有title属性且属性值中包含“right”字符串的a元素*/

4. 类选择器和ID选择器(Class selectors and ID selectors)²

5. 伪类(Pseudo-classes)

  1. 动态伪类(Dynamic pseduo-classes)
    • :link and :visited²
    • :hover, :active and :focus² 
  2. 目标伪类(Target pseduo-class) :target /*简单理解成匹配被从URI中定位的锚点*/
  3. 语言伪类(Language pseudo-class)²
  4. UI元素状态伪类(UI element states pseudo-classes)
    • :enabled and :disabled  例如：.urt:disabled {color:#333;} /*匹配类为.urt且被设置成不可用(disabled)的元素*/
    • :checked  /*匹配被设置成checked的元素*/
    • :indeterminate  /*匹配checked状态不确定的元素，CSS 3还没加入，将来可能加入*/
  5. 结构伪类(Structural pseudo-classes)
    • :root  /*匹配文档的根元素，在html 4 中这个总是匹配*/
    • :nth-child() and nth-last-child()  /*按索引值匹配子元素。例如：li:nth-child(3) 匹配在ul中排第3个位置的li，li:nth-child(2n+1)和li:nth-child(odd)匹配所有奇数位置的li，li:nth-child(2n)和li:nth-child(even)匹配所有偶数位置的li。当然4n+1，4n+2，4n+3，4n+4可以四行匹配，类推。注意，第一个元素的索引是1而不是0。倒数的:nth-child()*/
    • :nth-of-type() and :nth-last-of-type() /*匹配某种类型的同级兄弟元素，括号里的参数同:nth-child()。倒数的:nth-of-type()*/
    • :first-child and :last-child /*匹配第一个和最后一个元素，例如：ul li:first-child {color:red}*/
    • :first-of-type and :last-of-type /*匹配第一个和最后一个某种类型的元素*/
    • only-of-type /*匹配一个元素其在这个元素的父元素中再也没有和它同名的元素*/
    • :empty /*例如，p:empty，匹配一个<p></p>*/
  6. 否定伪类(Negation pseudo-class) :not() /*匹配除了括号里规定的之外的元素，例如：button:not([disabled])，匹配除了属性设置为disabled之外的所有button，*:not(p)，匹配除了p元素之外的所有元素*/

6. 伪元素

  • ::first-line² /*不过这里是两个“:”*/
  • ::first-letter² /*不过这里是两个“:”*/
  • ::selection /*匹配元素中被用户选中的部分，例如span::selection {color:red}*/
  • ::before and ::after² /*两个“:”*/

7. 组合选择器

<div><p class=”god”>I am boke.</p><p>I am Isaac Mendez.</p><p>I am Nathan Petrelli.</p></div>

  • 后代(Descendant combinator)² /*同2.1里的后代选择器，例如：div p {color:red;}*/
  • 子代(Child combinators)² /*同2.1里的子选择器，例如div>p{color:blue;}*/
  • 相邻兄弟(Adjacent sibling combinator)² /*同2.1里的相邻兄弟选择器，例如：.god+p{font-size:2em;}*/
  • 通用兄弟(Genetal sibling combinator) /*可以选择普通的兄弟了，例如：.god~p{color:yellow;}*/

终于写完了，等发现那里有问题再改正。有种感觉，w3c那帮闲人弄这么多东西干嘛，实际应用中真的都会用到吗，想让css取代js吗？南哈蒙理工学院（=S H I T）！

过两天再整理个Mobile Profile的。

]]> http://www.masterboke.com/2009/02/07/cssselector/feed/ 0 手机使用AJAX http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/ http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/#comments Wed, 21 Jan 2009 07:06:44 +0000 boke http://www.masterboke.cn/?p=177 测试一下手机浏览器对AJAX的支持： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <title>title</title> </head> <body> <div id="a"></div> <div id='b'></div> <input type="button" onclick="startXMLHttp();" value="发送GET" /> <div id="a1"></div> <div id='b1'></div> <input type="button" onclick="startXMLHttp1();" value="发送POST" …

继续阅读 »

]]>

测试一下手机浏览器对AJAX的支持：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>title</title>
</head>
<body>
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="发送GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="发送POST" />

<script type="text/javascript">
 //<![CDATA[
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }
  
  function startXMLHttp()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t1 = document.createTextNode(sendStr);
    document.getElementById('a').appendChild(t1);
    xmlHttp.onreadystatechange = doSomething;
    xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
    xmlHttp.send(null);
  }
  
  function doSomething()
  {
    
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
    var t2 = document.createTextNode(xmlHttp.responseText);
        document.getElementById('b').appendChild(t2);
    //document.getElementById('b').innerHTML = xmlHttp.responseText;
      }
    }
  }
  
  function startXMLHttp1()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t3 = document.createTextNode(sendStr);
    document.getElementById('a1').appendChild(t3);
    xmlHttp.onreadystatechange = doSomething1;
    xmlHttp.open('POST','ajaxtest1.php',true);
    xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlHttp.send(sendStr);
  }
  
  function doSomething1()
  {
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
        var ret = eval('('+xmlHttp.responseText+')');
        var t4 = document.createTextNode('你的名字是'+ret.name+'，年龄是'+ret.age); 
        document.getElementById('b1').appendChild(t4);
        //document.getElementById('b1').innerHTML = xmlHttp.responseText;
      }
    }
  }
 //]]>
</script>
</body>
</html>

由于是xhtml，如果服务器返回的数据里面有“&”，“<”等特殊字符，以及html标签等，就会提示解析错误，所以我们不能使用document.getElementById(‘b1′).innerHTML = xmlHttp.responseText了，这里需要注意。
推荐在服务器端将数据组装成JSON格式，然后在客户端使用createElement()，appendChild()等DOM方法生成所需的样式。

]]> http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/feed/ 0 xhtml mp的事件支持测试 http://www.masterboke.com/2009/01/20/xhtml-mp%e7%9a%84%e4%ba%8b%e4%bb%b6%e6%94%af%e6%8c%81%e6%b5%8b%e8%af%95/ http://www.masterboke.com/2009/01/20/xhtml-mp%e7%9a%84%e4%ba%8b%e4%bb%b6%e6%94%af%e6%8c%81%e6%b5%8b%e8%af%95/#comments Tue, 20 Jan 2009 08:49:18 +0000 boke http://www.masterboke.cn/?p=158 以下是xhtml mp支持的事件，其中onload和onclick事件是规范规定浏览器必需支持的，其它为可选。具体哪种元素支持哪些事件，因浏览器不同而不同，可以修改以下代码进行测试。还附加了个XMLHttpRequest对象检测。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <title>DOM Events Test For XHTML Mobile Profile</title> </head> <body> ajax:<label id="ajax"></label><br /> onload:<label id="load"></label><br /> onunload:<label id="unload"></label><br /> onclick:<label …

继续阅读 »

]]>

以下是xhtml mp支持的事件，其中onload和onclick事件是规范规定浏览器必需支持的，其它为可选。具体哪种元素支持哪些事件，因浏览器不同而不同，可以修改以下代码进行测试。还附加了个XMLHttpRequest对象检测。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>DOM Events Test For XHTML Mobile Profile</title>
</head>
<body>
ajax:<label id="ajax"></label><br />
onload:<label id="load"></label><br />
onunload:<label id="unload"></label><br />
onclick:<label id="click"></label><br />
ondblclick:<label id="doubleclick"></label>
onmousedown:<label id="mousedown"></label><br />
onmouseup:<label id="mouseup"></label>
onmouseover:<label id="mouseover"></label><br />
onmousemove:<label id="mousemove"></label>
onmouseout:<label id="mouseout"></label><br />
onfocus:<label id="focus"></label>
onblur:<label id="blur"></label><br />
onkeypress:<label id="keypress"></label>
onkeydown:<label id="keydown"></label><br />
onkeyup:<label id="keyup"></label>
onsubmit:<label id="submit"></label><br />
onreset:<label id="reset"></label>
onselect:<label id="select"></label><br />
onchange:<label id="change"></label><br />

<form action="" method="get" id="f1">
  <input type="button" value="点击我" id="b1" />
  <input type="text" value="点击我" id="t1" />
</form>
<script type="text/javascript">
//<![CDATA[
  /**
   * Ajax支持判断
   */
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }
  createXMLHttp();
  if (xmlHttp)
  {
    document.getElementById('ajax').innerHTML = "支持";
  }
  else
  {
    document.getElementById('ajax').innerHTML = "不支持";
  }
  /**
   * 从这里开始
   */
  function $(id)
  {
    return document.getElementById(id);
  }
  window.onload = function()
  {
    $('load').innerHTML = "支持";
    if (window.onresize)
    {
      $('resize').innerHTML = "支持";
    }
  }
  $('b1').onclick = function()
  {
    $('click').innerHTML = "支持";
    $('f1').onsubmit();
    $('f1').onreset();
  }
  $('b1').ondblclick = function()
  {
    $('doubleclick').innerHTML = "支持";
  }
  $('b1').onmousedown = function()
  {
    $('mousedown').innerHTML = "支持";
  }
  $('b1').onmouseup = function()
  {
    $('mouseup').innerHTML = "支持";
  }
	$('b1').onmouseover = function()
  {
    $('mouseover').innerHTML = "支持";
  }
	$('b1').onmousemove = function()
  {
    $('mousemove').innerHTML = "支持";
  }
	$('b1').onmouseout = function()
  {
    $('mouseout').innerHTML = "支持";
  }
	$('t1').onkeydown = function()
  {
    $('keydown').innerHTML = "支持";
  }
	$('t1').onkeypress = function()
  {
    $('keypress').innerHTML = "支持";
  }
	$('t1').onkeyup = function()
  {
    $('keyup').innerHTML = "支持";
  }
	$('t1').onfocus = function()
  {
    $('focus').innerHTML = "支持";
  }
	$('t1').onblur = function()
  {
    $('blur').innerHTML = "支持";
  }
	$('t1').onselect = function()
  {
    $('select').innerHTML = "支持";
  }
	$('t1').onchange = function()
  {
    $('change').innerHTML = "支持";
  }
	$('f1').onsubmit = function()
	{
		$('submit').innerHTML = "支持";
		return false;
	}
	$('f1').onreset = function()
  {
    $('reset').innerHTML = "支持";
    return false;
  }
//]]>
</script>
</body>
</html>
]]> http://www.masterboke.com/2009/01/20/xhtml-mp%e7%9a%84%e4%ba%8b%e4%bb%b6%e6%94%af%e6%8c%81%e6%b5%8b%e8%af%95/feed/ 2 手机页面设计及编写的建议规则（一） http://www.masterboke.com/2009/01/19/%e6%89%8b%e6%9c%ba%e9%a1%b5%e9%9d%a2%e8%ae%be%e8%ae%a1%e5%8f%8a%e7%bc%96%e5%86%99%e7%9a%84%e5%bb%ba%e8%ae%ae%e8%a7%84%e5%88%99%ef%bc%88%e4%b8%80%ef%bc%89/ http://www.masterboke.com/2009/01/19/%e6%89%8b%e6%9c%ba%e9%a1%b5%e9%9d%a2%e8%ae%be%e8%ae%a1%e5%8f%8a%e7%bc%96%e5%86%99%e7%9a%84%e5%bb%ba%e8%ae%ae%e8%a7%84%e5%88%99%ef%bc%88%e4%b8%80%ef%bc%89/#comments Mon, 19 Jan 2009 08:01:16 +0000 boke http://www.masterboke.cn/?p=107 我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。 1. 设计相关 1.1 硬件限制 手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。 手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵） 在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。 版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。 1.2 用户输入 手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。 例如：不推荐使用这样的URI “http://www.example.org/index.html”， 推荐使用这样的 “http://example.org”。 1.3 用户目标 用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。 同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。 2. 代码相关 2.1 文件总体结构应遵循以下样式。 xhtml mp使用: <?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//OMA//DTD XHTML Mobile …

继续阅读 »

]]>

我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。

1. 设计相关

1.1 硬件限制

推荐结构

推荐结构

手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。

手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵）

在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。

版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。

1.2 用户输入

手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。

例如：不推荐使用这样的URI
“http://www.example.org/index.html”，
推荐使用这样的
“http://example.org”。

1.3 用户目标

用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。

同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。

2. 代码相关

2.1 文件总体结构应遵循以下样式。
xhtml mp使用:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//OMA//DTD XHTML Mobile 1.2//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<title>公交搜索</title>
</head>
<body>

</body>
</html>
xhtml basic使用：

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=utf-8″ />
<title>公交搜索</title>
</head>
<body>

</body>
</html>

2.2 去掉不必要的空格和换行

不必要的空格和换行会增大文件大小，去掉空格及换行对浏览器解析来说没有不好的影响，因此推荐在编写完成上传服务器时去掉不必要的内容。

2.3 尽量避免使用Cookie

不是所有的浏览其都支持Cookie，即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL中传递相关信息，当然，要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。

2.4 不要使用<table>标签

<table>在小屏幕上表现不佳，解析难度较大，大多数手机浏览器对<table>都支持不佳。

2.5 图片或其它嵌入对象要添加必要属性

在使用图片或flash等元素时，要添加alt属性，以便在元素不能加载时给用户相应的提示，添加width，height属性，防止发生不可预期的版式破坏，添加id属性以替代name属性。

2.6避免使用绝对度量单位

推荐使用em，ex或者百分比等相对单位替代px，这样便于浏览器对网页的自动缩放。

2.7 把需要共享的样式和脚本通过外部链接引入

推荐把样式和脚本写在文件里通过外部链接引入，这样可以减少解析难度和出错几率。

如果客户端支持缓存就可以不再向服务器发送请求，如果不支持，那么每次都要从服务器取这个文件，不相关的内容也在这个文件里，将额外增加不必要的流量；网页里的每个外部链接都会单独从服务器请求一次，如果内容过于分散，请求次数就会很多。

因此，尽量把可以共享的样式或脚本写在单一的文件里，减少不必要的请求和流量。

]]> http://www.masterboke.com/2009/01/19/%e6%89%8b%e6%9c%ba%e9%a1%b5%e9%9d%a2%e8%ae%be%e8%ae%a1%e5%8f%8a%e7%bc%96%e5%86%99%e7%9a%84%e5%bb%ba%e8%ae%ae%e8%a7%84%e5%88%99%ef%bc%88%e4%b8%80%ef%bc%89/feed/ 0 HTML 4与XHTML 1.0区别 http://www.masterboke.com/2009/01/19/html-4%e4%b8%8exhtml-10%e5%8c%ba%e5%88%ab/ http://www.masterboke.com/2009/01/19/html-4%e4%b8%8exhtml-10%e5%8c%ba%e5%88%ab/#comments Mon, 19 Jan 2009 06:13:36 +0000 boke http://www.masterboke.cn/?p=99 翻译w3c的http://www.w3.org/TR/xhtml1/ 第四部分，具体的不同还要参考DOM（不是很喜欢DOM的个别地方，用JS操作一个元素时，原本简单的东西往往得很多句才能搞定，再次抱怨一下，呵呵）和XML。 编写手机页面时所用的xhtml mp和xhtml basic 依照xhtml标准，虽然浏览器一般都较宽容，但不推荐旧的写法。 XHTML文档必须具有良好完整的排版(well-formed) 编排良好性(Well-formedness)是XML引入的一个新概念.从本质上说,元素必须有结束标签,或者必须以特殊方式书写,而且元素必须嵌套. 尽管SGML规定重叠(overlapping)是非法的,但现有的浏览器普遍允许重叠. 正确:嵌套元素(nested elements) <p>梦之都 <em>XHTML教程</em>.</p> 不正确:层叠元素(overlapping elements) <p>梦之都 <em>XHTML教程</p>.</em> 元素和属性名必须小写 对于所有HTML元素和属性名, XHTML文档必须使用小写. 因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签. 对非空元素,必须使用结束标签 在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签. 正确:结束的元素(terminated elements) <p>梦之都的XHTML教程.</p><p>梦之都的CSS教程.</p> 不正确:未结束的元素(unterminated elements) <p>梦之都的XHTML教程.<p>梦之都的CSS教程. 属性值必须在引号中 所有的属性值必须在引号中,即使是以数字形式的属性值 正确:在引号中的属性值(quoted attribute values) <table rows="3"> …

继续阅读 »

]]>

翻译w3c的http://www.w3.org/TR/xhtml1/ 第四部分，具体的不同还要参考DOM（不是很喜欢DOM的个别地方，用JS操作一个元素时，原本简单的东西往往得很多句才能搞定，再次抱怨一下，呵呵）和XML。

编写手机页面时所用的xhtml mp和xhtml basic 依照xhtml标准，虽然浏览器一般都较宽容，但不推荐旧的写法。

XHTML文档必须具有良好完整的排版(well-formed)

编排良好性(Well-formedness)是XML引入的一个新概念.从本质上说,元素必须有结束标签,或者必须以特殊方式书写,而且元素必须嵌套.

尽管SGML规定重叠(overlapping)是非法的,但现有的浏览器普遍允许重叠.

正确:嵌套元素(nested elements)

<p>梦之都 <em>XHTML教程</em>.</p>

不正确:层叠元素(overlapping elements)

<p>梦之都 <em>XHTML教程</p>.</em>

元素和属性名必须小写

对于所有HTML元素和属性名, XHTML文档必须使用小写. 因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签.

对非空元素,必须使用结束标签

在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签.

正确:结束的元素(terminated elements)

<p>梦之都的XHTML教程.</p><p>梦之都的CSS教程.</p>

不正确:未结束的元素(unterminated elements)

<p>梦之都的XHTML教程.<p>梦之都的CSS教程.

属性值必须在引号中

所有的属性值必须在引号中,即使是以数字形式的属性值

正确:在引号中的属性值(quoted attribute values)

<table rows="3">

不正确:不在引号中的属性值(unquoted attribute values)

<table rows=3>

属性最小化

XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.

正确:非最小化属性(unminimized attributes)

<input checked="checked">

不正确:最小化属性(minimized attributes)

<input checked>

空元素

空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>.参看HTML兼容性指导HTML Compatibility Guidelines中的信息,以保证向后兼容HTML 4用户代理程序.

正确:结束的空元素(terminated empty elements)

<br/><hr/>

错误:未结束的空标签(unterminated empty elements)

<br><hr>

属性值中的空白字符处理

  • 删去引导和后序空白符
  • 将一个或多个空白符(包括换行)转换成单个字符间空间

Script and Style 元素

XHTML中,script和style元素被声明为#PCDATA内容形式,因此,<和&被看作是标识的开始,&lt和&amp等HTML实体将被XML处理器看作为实体引用而分别被认为是<和&.将script和style元素的内容隐蔽在CDATA标记中避免了这些实体的扩张.

<script>
<![CDATA[
... unescaped script content ...
]]>
</script>

CDATA部分被XML处理器识别,表现为文档对象模型中的一个结点.替代的方式是使用外部script和style文档.

SGML排斥

SGML给作者的DTD可以指定在一个元素内部禁止出现的元素.这样的禁止在XML中是不可能的.

例如,严格的HTML 4 DTD”禁止”任何深度的’a'元素对另一’a'元素的嵌套.在XML中无法写出这些的”禁止”.虽然这些禁止不能被定义在DTD中,但是一些元素不应该被嵌套.对不能被嵌套的元素Element Prohibitions的总结.

具有’id’和’name’属性的元素

HTML4定义了name属性的元素有a,applet,form,frame,iframe,img and map.HTML4还引入了id属性.这两个属性都是被设计用为片段标识符.

在 XML中,片段标识符是ID,每个元素只能有一个ID类型的属性.因此,在XHTML1.0中,id属性被定义为ID类型.为保证XHTML1.0文档是 结构良好(well-structured)的XML文档,在定义一个片段标识符时,XHTML文档必须使用id属性,即使是对那些以前用name属性的 元素.参看 HTML Compatibility Guidelines,确保XHTML文档以text/html媒体类型使用时,这些”锚(anchors)”能向后兼容.

注意,在XHTML 1.0中,name属性是不赞成使用的,在以后的XHTML版本中将被删除。

有预定义值的属性

在HTML 4和XHTML都有一些属性，它们有预先确定且有限的值（例如， type属性的input元素） 。在SGML和XML中 ，这些被称为枚举属性。在HTML 4中 ，这些值是不区分大小写的，所以TEXT和text是一样的。在XML中，这些值是区分大小写的，而在XHTML 1所有这些值都应该是小写的。

]]> http://www.masterboke.com/2009/01/19/html-4%e4%b8%8exhtml-10%e5%8c%ba%e5%88%ab/feed/ 0 mobile ok checker http://www.masterboke.com/2009/01/18/mobile-ok-checker/ http://www.masterboke.com/2009/01/18/mobile-ok-checker/#comments Sun, 18 Jan 2009 08:21:49 +0000 boke http://www.masterboke.cn/?p=80 http://validator.w3.org/mobile/ 检查所写的mobile web page 是否符合标准。其实我觉得不用完全符合，呵呵。]]>

http://validator.w3.org/mobile/ 检查所写的mobile web page 是否符合标准。其实我觉得不用完全符合，呵呵。

]]> http://www.masterboke.com/2009/01/18/mobile-ok-checker/feed/ 0 手机web开发资料 http://www.masterboke.com/2009/01/18/%e6%89%8b%e6%9c%baweb%e5%bc%80%e5%8f%91%e8%b5%84%e6%96%99/ http://www.masterboke.com/2009/01/18/%e6%89%8b%e6%9c%baweb%e5%bc%80%e5%8f%91%e8%b5%84%e6%96%99/#comments Sun, 18 Jan 2009 07:44:59 +0000 boke http://www.masterboke.cn/?p=74 3G牌照发了，近期要开始仔细研究手机端的web开发了，在网上找了找资料，中文的真不是一般的少，简直就是没有，唉，还是看E文的吧。 把找到的网站整理一下，以便查找。 1. http://www.openmobilealliance.org/ OMA，WapForum与前OMA合并后的组织，WML及XHTML MP的制订者。不过我在者没找到啥东西，http://www.openmobilealliance.org/Application/Search/?search=xhtmlmp 这个链接是关于xhtml mp的pdf文档。 2. http://www.w3c.org W3C，XHTML Basic 制定者，http://www.google.com/custom?q=XHTML+Basic+1.1&sitesearch=www.w3.org&domains=www.w3.org 这个链接可以找到w3c上关于xhtml basic的内容。http://www.w3.org/TR/mobileOK-basic10-tests/ ，http://www.w3.org/TR/mobile-bp/ .当然，还有更多内容，http://www.w3.org/TR/ ，http://www.w3.org/Mobile/ 3. http://www.developershome.com/ Developers’ Home ，网站上有些关于手机web开发的教程和文章，http://www.developershome.com/wap/xhtmlmp/ 这个链接是关于xhtml mp的部分。 4. http://dev.opera.com/articles/mobile/ Opera，上面有些Opera提供的关于mobile的内容，http://dev.opera.com/articles/view/mobile-markup-xhtml-basic-1-1/ 这是一篇讲XHTML Basic 1.1的。 5. http://en.wikipedia.org/wiki/XHTML_Mobile_Profile ，http://en.wikipedia.org/wiki/XHTML ，维基百科上关于xhtml mp，xhtml，xhtml basic的部分。 6. http://www.passani.it/gap/ Global …

继续阅读 »

]]>

3G牌照发了，近期要开始仔细研究手机端的web开发了，在网上找了找资料，中文的真不是一般的少，简直就是没有，唉，还是看E文的吧。

把找到的网站整理一下，以便查找。

1. http://www.openmobilealliance.org/ OMA，WapForum与前OMA合并后的组织，WML及XHTML MP的制订者。不过我在者没找到啥东西，http://www.openmobilealliance.org/Application/Search/?search=xhtmlmp 这个链接是关于xhtml mp的pdf文档。

2. http://www.w3c.org W3C，XHTML Basic 制定者，http://www.google.com/custom?q=XHTML+Basic+1.1&sitesearch=www.w3.org&domains=www.w3.org 这个链接可以找到w3c上关于xhtml basic的内容。http://www.w3.org/TR/mobileOK-basic10-tests/ ，http://www.w3.org/TR/mobile-bp/ .当然，还有更多内容，http://www.w3.org/TR/ ，http://www.w3.org/Mobile/

3. http://www.developershome.com/ Developers’ Home ，网站上有些关于手机web开发的教程和文章，http://www.developershome.com/wap/xhtmlmp/ 这个链接是关于xhtml mp的部分。

4. http://dev.opera.com/articles/mobile/ Opera，上面有些Opera提供的关于mobile的内容，http://dev.opera.com/articles/view/mobile-markup-xhtml-basic-1-1/ 这是一篇讲XHTML Basic 1.1的。

5. http://en.wikipedia.org/wiki/XHTML_Mobile_Profile ，http://en.wikipedia.org/wiki/XHTML ，维基百科上关于xhtml mp，xhtml，xhtml basic的部分。

6. http://www.passani.it/gap/ Global Authoring Practices for the Mobile Web

7. http://developer.openwave.com/documentation/xhtml_mp_css_reference/index.html openwave上关于xhtmlmp的文档。

8. http://mobilewebbook.com/ Cameron Moll的一本书，有预览版，没找着下载的地方，先放在这，以后再找。http://cameronmoll.com/ ，他的网站。
另一本书Mobile Web Development

9.  http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ 闲人们组织了个大会，讨论了一下09年手机web的发展趋势。

10. http://mobiforge.com/

先这些，找着新的再补。

]]> http://www.masterboke.com/2009/01/18/%e6%89%8b%e6%9c%baweb%e5%bc%80%e5%8f%91%e8%b5%84%e6%96%99/feed/ 1