我们的故事 » w3c http://blog.ihandu.com i Hand u - dUcky's Blog Sat, 13 Aug 2011 04:21:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 手机网站开发笔记2 – 完整的头部声明 http://blog.ihandu.com/2010/04/mobile-website-step2/ http://blog.ihandu.com/2010/04/mobile-website-step2/#comments Fri, 09 Apr 2010 02:48:28 +0000 dUcky http://blog.ihandu.com/?p=535 接上一篇概述，说一说手机网站网页的头部声明。

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset=utf-8" />
<meta http-equiv="Cache-Control" content="must-revalidate,no-cache" />
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=2.0;user-scalable=1" />
<title>我们的故事 iHandu.com - dUcky</title>
<link href="style/mobile.css" rel="stylesheet" type="text/css" />
</head>

上面的代码就是一个完整的手机网页的头部，解释几个比较特别的：

line 1: xml 的声明并不是必要的，但是听说会影响某些 wap 浏览器，比如 Sony Ericsson 的一些型号，“ 当接收到的 MIME 类型为 text/html 时, 会利用 XML 声明来区分 XHTML MP 和 IHTML（一个 NTT DoCoMo 定义的有专利的标记语言）文档；如果文档包含 XML 声明，它就是一个 XHTML MP 文档，否则它就是一个 IHTML 文档。”

line 2: 定义 DTD 的名字，声明了使用 XHTML Mobile 1.0 为内容格式。

line 5: “由OMA 定义的 XHTML MP 内容的首选 MIME 类型为：‘application/vnd.wap.xhtml+xml’ 。这一类型可以用于向 XHTML 用户代理提供 XHTML MP 文档支持。另外，也可使用 ‘application/xhtml+xml’ 。在一些 Symbian Series 60 浏览器上，必须使用 MIME 类型 ‘application/vnd.wap.xhtml+xml’ 以确保正确的 XHTML MP 内容视图。”

line 6: 设置浏览器缓存，这里是禁止缓存， must-revalidate 是针对某些浏览球通过返回按钮回到上一个标签而不重新装载。

line 7: 针对 iphone 的设置。width: 宽度；height: 的高度；initial-scale: 初始的缩放比例；minimum-scale: 允许用户缩放到的最小比例；maximum-scale: 允许用户缩放到的最大比例；user-scalable: 用户是否可以手动缩放。

其他都是最基本的，当然你也可以加上 keywords 或者 description 的 meta 标签。

（文中一些打双引号引用的文字都来源于网上的资料，但是我找不到源头了，感谢那些分享的人）

最后是 W3C 提供的移动网页使用的 XHTML 验证工具，它会对你做的页面提出建议和不符合标准的地方。

相关文章

]]> http://blog.ihandu.com/2010/04/mobile-website-step2/feed/ 1 手机网站开发笔记1 – 概述 http://blog.ihandu.com/2010/04/mobile-website-step1/ http://blog.ihandu.com/2010/04/mobile-website-step1/#comments Tue, 06 Apr 2010 12:03:54 +0000 dUcky http://blog.ihandu.com/?p=523 手机网站由于大家都是起步不久，所以网上有用公开的资料并不是很多，特别是国内。下面从头说起。

什么是 wap2.0 ？

wap 是无线应用协议（Wireless Application Protocol）。wap2.0 就是 wap 的第二个版本。
wap1.X 规定无线设备访问的页面是用 WML 语言编写的，但是 WAP2.0 将 XHTML MP 做为主要内容格式。
via 中文 wikipedia

什么是 XHTML MP ？

XHTML MP 是 XHTML 的子集，因此继承了它的语法。用 XHTML MP 构建的页面，以供手持设备的访问，如手机、PDA等。

页头声明：

1

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

XHTML Mobile Profile (XHTML MP) via wikipedia

这样看来，其实与我们平时用的 xhtml 差别不是很大，但是与一般网站用的 xhtml、css、js 还是有很多不一样的地方，从之前的实践者我们就可以看到。

感谢淘宝的设计师以及工程师的分享精神，让我们少走不少路。更提醒我们兼容性是一个很大的问题。下面的这张表是在 twitter 上 follow 前端大师 @ppk 的同学们的手机浏览器环境调查：

看花了眼吧…所以兼容性从前期规划到后期测试都非常重要。

更多的东西还要在自己的实践中去总结，最后推荐的是：PPK 关于手机网站开发的研究，以及在蓝色理想找到 W3C 在移动 web 设计和用户体验的推荐标准：W3C移动web最佳实践1.0中文版.pdf，叙述了 60 条有关手机网站需要注意的地方。

相关文章

]]> http://blog.ihandu.com/2010/04/mobile-website-step1/feed/ 1 html5 带来了什么？ html5 与 css3 http://blog.ihandu.com/2010/03/html5-css3/ http://blog.ihandu.com/2010/03/html5-css3/#comments Wed, 03 Mar 2010 14:46:26 +0000 dUcky http://blog.ihandu.com/?p=458 html5

html5 已经被热议了很久，什么是 html5 以及它发展的情况不去赘述，要强调的是 html5 工作组得到了 Apple 以及 Google 两巨头的支持。详细可以查看维基百科关于 html5 的描述。

html5 的标签

与 html4 或者 xhtml1 相比，html5 带来了新的标签，废弃了一些旧的。举个例子，现在我们写一个普通的新闻页面里 <body> 的内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="header">ihandu.com 我们的故事</div>
 
<div class="content">
    <div class="news">
        <h1>dUcky的blog: ihandu.com 我们的故事</h1>
        <div class="detail">
            <p>i,dUcky</p>
            <p>Bio:交互设计 前端 Gfans html5 带来了什么？ html5 与 css3</p>
        </div>
    </div>
</div>
 
<div id="footer">2010 ihandu.com 我们的故事 版权所有</div>

那么用 html5 该怎么写呢？

1
2
3
4
5
6
7
8
9
10
11
12
13

<header>ihandu.com 我们的故事</header>
 
<section>
    <article>
        <h1>dUcky的blog: ihandu.com 我们的故事</h1>
        <section>
            <p>i,dUcky</p>
            <p>Bio:交互设计 前端 Gfans  html5 带来了什么？ html5 与 css3</p>
        </section>
    </article>
</section>
 
<footer>2010 ihandu.com 我们的故事 版权所有</footer>

终于，我们可以真正的摆脱所谓 “div+css” 的标准化了，省去了很多 class 以及 id …

html5 提供了更多的语义化标签，比如：

1
2
3
4
5
6

<header>页头</header> 
<footer>页脚</footer> 
<section>文档中的区块章节</section> 
<article>文章</article> 
<video>视频内容</video> 
<audio>声音内容</audio>

等等……

当然，html5 也抛弃了一些标签：
center, font, u, strike, s, frameset, frame, applet

我们看到 frameset 和 frame ，那么框架结构在 html5 里就不复存在了，在我看来，这是个好事情。

关于 html5 标签的详细可以参考：html5 参考手册

css3 高级选择器

那么 html5+css3 会是什么样呢？看代码：

1
2
3
4
5
6
7
8
9

<section>
    <section> -------------------------------- 1
        <section></section> ------------ 3
        <section></section> ------------ 4
    </section>
    <section> -------------------------------- 2
        <section></section> ------------ 5
    </section>
</section>

CSS3 提供了很多高级选择器：

1
2
3
4
5
6
7
8
9

section>section{}  section 直属下级的 section (编号1和编号2)
 
section>section:nth-child(1){}  二级 section 中第一个 section (编号1)
section>section:nth-child(2){}  二级 section 中第二个 section (编号2)
 
section>section:nth-last-child(1){}  二级 section 中最后一个 section (编号2)
section>section:nth-last-child(2){}  二级 section 中倒数第二个 section (编号1)
 
section>section:only-of-type{}  section 下只出现一次的 section (只能定位到编号5)

要弄清关系必须多用，我项目中会用到 css3 的选择器来 hack ，因为现在 IE 看不懂…

CSS3 选择器相关的可以参考：css_3_selectors_explained

html5 与 css3 的浏览器兼容性

上面说到浏览器兼容性，那么哪些浏览器支持 html5 以及 css3 呢？

Safari 4+, Firefox 3.5+, Chrome 3+ 已经支持
Opera 10.5 已经部分支持
ie9 支持 css3 ，有可能支持 html5 …

html5 更多的亮点

html5 还有更加强大的其他属性，比如：canvas、本地存储和 web socket 等等。

Google 已经宣布放弃 gears 而用 html5 作为离线存储方案；youtube 以及用 html5 架构页面等等，相信未来会有更多关于 html5 的惊喜。

相关文章

]]> http://blog.ihandu.com/2010/03/html5-css3/feed/ 1