LuoYe » HTML http://www.luoye.org/blog 又一个 WordPress 博客 Wed, 11 Jan 2012 05:51:01 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 5个让网页设计师更有价值的方法 http://www.luoye.org/blog/2011/01/5webdesingerjiazhibanfa/ http://www.luoye.org/blog/2011/01/5webdesingerjiazhibanfa/#comments Tue, 04 Jan 2011 01:44:05 +0000 admin http://www.luoye.org/blog/?p=269 5 Ways to Add Value to Your Work as a Web Designer

曾经作为独立的设计师工作过，深刻体验过国内设计行业市场的种种恶劣环境，低价竞争，套模板欺骗客户，抄袭现象，欺负客户不明真相等现象，真是深恶痛绝，在这样的恶劣环境下，设计师们怎么会有好作品的出现？恰巧看到篇《5 Ways to Add Value to Your Work as a Web Designer》，正是讲的是此情况，所以特地将里面的5个方法直接提取过来，希望同行们能够互勉。若能体会原汁原味请点击下面查看原文。

1. 停止恶劣的价格竞争 Stop Racing to the Bottom

现在开始你可以停止考虑你眼前的那“几毛钱”了，试试着眼于那些更愿意为好东西买单的人。他们可以给你更好的利润，同时你也可以有足够的空间选择你喜欢的客户。不过这一切有个最重要的前提，那就是你是否是个“腕”。

前些日子正好我和几个行业内比较优秀的设计师交流中发现，无论市场景不景气，他们都可以获得一份行业内比较不错的收入，而且持续的增长。

这听起来还是挺刺激人的吧，但这恰恰说明了一点，就是如果你始终是在剩菜剩饭中捞，那么最终的结果就是你除了剩菜就是剩饭。不如放弃这些“菜饭”？不要再花精力在打价格战上了，把你的客户筛选一下，把你的全部精力都集中在作品上，给出更棒的作品岂不是更好的吗？

2. 差异化服务 Cater to a Specific Demographic

大家都知道，如果你的价高，对应的你也必须提供等价的设计/服务（坑人的设计公司无视），让人信服的最好的方法之一,就是你是某个设计领域的专家。

如果你擅长做mini-sites迷你站(例如:专题页或vCard站)，那就尝试变成一个专业的mini-sites迷你站设计师，如果你擅长于Blog设计，不如把你自己营销成一个Blog设计专家。如果你更精于企业站，那么就赶快积极向企业客户推销你自己吧。

你是不是在想，若能提供很多服务，大家的岂不是可以都在我这设计？没错，但这只是你的想法，真正的客户并不是你所想的，他们更希望找到更专业的设计，并非全能，就像如果我需要设计一个logo，我更像找到专业的logo设计师，如果我需要设计一个blog，我会找专业的blog设计师。

所以，如果你擅长于某个领域，不如把你精于那个领域，这远比通才要好，这样在你的目标市场，你会受到的关注也会变的更多。

3. 关心市场需要什么 Know What Your Market Wants

如果你现在正准备动手去找你的客户，那你必须得提前知道如何提供好服务，这非常重要。比如对硅谷创业的人来说，必须了解集中精力于高转化率和优化上，比如对作家来说，必须让书变的更好看。

还有个很让我很惊讶的事情，那就是我看到有些设计师，他们追求的是更多的“邮件订阅数”，“买家数”，“RSS订阅数”，而不是竭尽所能的进行设计。我想说的是，数据并不一定能给你带来客户。

还有一点，你得客户并不一定认识所有设计师，他们会向你咨询一些事情，你不应该拒绝他们，不要怕分享你的知识，有许多案例告诉我们，这样往往会让你的客户更加信任你，即使不是这样，你也得记住“你是专家 – 保持你的风度”。

4. 注意细节 Don’t Forget the Little Things

在我的正职之外，我还拥有几家卖各种电子书和学习教程的网店，当我在策划这些店铺的时候，我很关心产品,logo，是否和整体的网站相配。但我在想有多少设计师在接到设计电子书的时候，还会考虑到与网站相配的细节。长此以来，大多数设计师都只会设计客户安排的东西，而往往忽视了客户并非专业。

ebooks

这里就有通常会忽视的小细节（机会往往来自于细节）：

  • 网页banner
  • sns中的营销(Twitter的背景板和自我介绍页)
  • 对外使用的头像
  • 产品的Icon设计
  • 电子书，信纸等模板设计

你得客户一定无法专业到知道这些地方也会需要设计，所以你应该积极主动帮助他们考虑并且完成这些事情。
我并不是请求你这样做，但说实话，若你把你的位置摆放在客户的角度，你就会知道他们需要什么？这远远比你能提供什么重要的多。

5. 跟进 Follow Up

不知道有多少设计师错过了整个流程中最重要的环节。当你完成了所有的工作，设计好了很棒的作品，赚到了钱，但你忘记了去跟进。

为什么？

因为客户就是你的资产，他们不仅会给你反馈，而且还会成为你最棒的回头客。

在你的email list里是否有你客户的联系方式？如果没有，他们如何知道你的新生意和新业务呢？

你的老客户或许会来咨询，提一些关于他们网站的问题，这个一定要重视，给他们积极的提供帮助。不管相信与否，好的设计师除了好作品，也是需要慢慢用心经营出来的，人们也愿意和同样好的人打交道。

咨询，售后服务就是这样一条不错的建立口碑营销的途径，你的客户满意了，还会带来口碑，甚至在他们的Blog上说不定会有你一笔了。

记住，口碑除了让你能够等着生意上门，还能够让你赢得好顾客。

]]> http://www.luoye.org/blog/2011/01/5webdesingerjiazhibanfa/feed/ 3 CSS hack:区分IE6，IE7，firefox http://www.luoye.org/blog/2010/12/css-hack-ie678firefox/ http://www.luoye.org/blog/2010/12/css-hack-ie678firefox/#comments Wed, 22 Dec 2010 07:11:13 +0000 admin http://www.luoye.org/blog/?p=249 区别IE6与FF：
background:orange;     *background:blue;

 区别IE6与IE7：

background:green !important;    background:blue;

 区别IE7与FF：

background:orange;    *background:green;

 区别FF，IE7，IE6：

background:orange;     *background:green !important;      *background:blue;

 注：IE都能识别*              标准浏览器(如FF)不能识别*；

IE6能识别*                       但不能识别 !important,
IE7能识别*                       也能识别!important;
FF不能识别*                   但能识别!important;
  IE6 IE7 FF
* √ √ ×
!important × √ √

另外再补充一个，下划线”_“,

IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox

: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

]]> http://www.luoye.org/blog/2010/12/css-hack-ie678firefox/feed/ 0 css中IE下判断IE版本的语句 css hack http://www.luoye.org/blog/2010/12/css-ie-hack/ http://www.luoye.org/blog/2010/12/css-ie-hack/#comments Wed, 22 Dec 2010 06:55:19 +0000 admin http://www.luoye.org/blog/?p=239

<!–[if lte IE 6]>……<![endif]–>
Ite：less than or equal to意思是小于或等于IE6浏览器，用于IE浏览器的条件注释，常用于CSShack，针对IE的JS等。
    在进行WEB标准网页的学习和应用过程中，网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山，此外还有Firefox、Opera等。需要对这些浏览器进行兼容。
    同时，单就IE而言，因IE版本的升级更替，目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页（XHTML+CSS）解释执行的显示状况不尽相同。并且，其他非IE浏览器与IE对某些CSS解释也不一样。所以，通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义。
    条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的IE为标准（目前为IE 7）。
    条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。
通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，比如：
<!–[if IE]>
    这里是正常的html代码
<![endif]–>

1、条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2、IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3、条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。
    可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）
<!–[if IE]>
       <h1>您正在使用IE浏览器</h1>
       <!–[if IE 5]>
           <h2>版本 5</h2>
       <![endif]–>
       <!–[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]–>
       <!–[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]–>
       <!–[if IE 6]>
           <h2>版本 6</h2>
       <![endif]–>
       <!–[if IE 7]>
           <h2>版本 7</h2>
       <![endif]–>
<![endif]–>
   那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–[if ls IE 5]>根本不会被执行。
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同
Conditional comments属于CSS hack? 条件判断属于CSS hack吗？
    严格地说是属于CSS hack。因为就好象其他真正的css hack一样，它使得我们可以给一些浏览器赋予特殊的样式，再则它不依赖于某个浏览器的BUG来控制另外一个浏览器（的样式）。除此之外，条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。
    因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能，所以我相信它是可以被放心地使用的。当然，其他浏览器也有可能支持条件判断（到目前为止还没有），但是看起来，他们应该不会使用如<!–[if IE]>这样的语法。
应该如何应用条件注释
    本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：
<!– 默认先调用css.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

    这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。
    注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。
    比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。
<style type=”text/css”>
body{
background-color: #000;
}
</style>
<!–[if IE]>
<style type=”text/css”>
body{
background-color: #F00;
}
</style>
<![endif]–>
    同时，有人会试图使用<!–[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。
    正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。在HTML文件里，而不能在CSS文件中使用。

]]> http://www.luoye.org/blog/2010/12/css-ie-hack/feed/ 0 用html5 的video标签嵌入视频 兼容ie6+浏览器 http://www.luoye.org/blog/2010/12/html5-video-ie6/ http://www.luoye.org/blog/2010/12/html5-video-ie6/#comments Thu, 16 Dec 2010 01:09:46 +0000 admin http://www.luoye.org/blog/?p=203 The Problem
•<video> doesn’t work in old browsers
•Browsers support different video codecs
•Browsers have inconsistent player UI
•H.264 doesn’t work in Firefox & Opera Note: MediaElement.js also supports Ogg and WebM (even FLV and WMV) if you want to use multiple <source> elements
The Solution: MediaElement.js
You use the <video> tag with one H.264 file (you can also include Ogg or WebM, but you don’t need to). If the browser doesn’t support it, then MediaElement.js replaces <video> with either Silverlight or Flash and returns a wrapper object that matches the HTML5 Media Element API. This lets you code to MediaElement.js as if it were a native <video>.

Better Still: MediaElementPlayer.js
MediaElementPlayer.js uses MediaElement.js and jQuery to build the complete working player you see here. The same HTML/CSS controls show up for everyone on any browser with any media type (use a single H.264 or include WebM, Ogg, WMV, FLV). It even works on iPhones, iPads, and Andriods.

Browser support (using H.264)
•Safari: native HTML5
•Chrome: native HTML5
•Internet Explorer 9: native HTML5
•Internet Explorer 6,7,8: Silverlight/Flash
•Firefox: Silverlight/Flash
•Opera: Silverlight/Flash
•iPhone, iPad: native HTML5
•Andriod: native HTML5

   
 
The Code

<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />

<!-- Preferred: Use one H.264 file for everyone (with silverlight fallback) -->
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>

<!-- OR use multiple codecs, your choice -->
<video width="640" height="360">
        <source src="myfile.mp4" type="video/mp4" >
        <source src="myfile.ogg" type="video/ogg" >
        <source src="myfile.webm" type="video/webm" >
</video>

<script>
jQuery(document).ready(function($) {
        $('video').mediaelementplayer();
});
</script>
]]> http://www.luoye.org/blog/2010/12/html5-video-ie6/feed/ 0 使IE6下PNG背景透明的七种方法任你选 http://www.luoye.org/blog/2010/11/ie6-png/ http://www.luoye.org/blog/2010/11/ie6-png/#comments Wed, 24 Nov 2010 04:13:59 +0000 admin http://www.luoye.org/blog/?p=147

PNG图像格式介绍：

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。

IE6下PNG背景透明的显示问题

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。

IE6下PNG背景透明的解决办法

.pngImg { background:url(image.png); _background:url(image.gif);}

注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。

二.滤镜filter解决IE6下背景灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”a.png” ,sizingMethod=”crop”);

上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

解决IE下的链接无效可用最后面的方法：

三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段js即可。原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。

<!–[if IE 6]>

<script>

function correctPNG()

{

for(var i=0; i<document.images.length; i++)

{

var img = document.images[i];

var imgName = img.src.toUpperCase();

if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)

{

var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”;

var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”;

var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ “;

var imgStyle = “display:inline-block;” + img.style.cssText;

if (img.align == “left”) imgStyle = “float:left;” + imgStyle;

if (img.align == “right”) imgStyle = “float:right;” + imgStyle;

if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle;

var strNewHTML = “<span “+ imgID + imgClass + imgTitle + “style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”

+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” + “(src=’” + img.src + “‘, sizingMethod=’scale’);\”></span>”;

img.outerHTML = strNewHTML;

i = i-1;

}

}

}

window.attachEvent(“onload”, correctPNG);

</script>

<![endif]–> ​

四.调用iepngfix.htc解决IE6PNG背景灰及拉伸问题

此方法来自：http://www.twinhelix.com/css/iepngfix/ 此方法基于Winodws平台，在Linux下不支持htc,没有验证过，但有网友发文证实。

以下片段添加至css文件

<div>PNG背景图片</div> <img src=”png图片” alt=”">

详细的应用方法这里就不介绍啦。

在逼不得已且身不由己必须使用PNG的情况下，这种方法应该是比较优秀的，虽然不能完美的解决IE6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在

五.让“块”透明的方法

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。

六.DD_belatedPNG,解决IE6不支持PNG绝佳方案

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

看Demo: http://dillerdesign.com/experiment/DD_belatedPNG/#examples原理

这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法

1.在这里下载DD_belatedPNG.js文件.

http://dillerdesign.com/experiment/DD_belatedPNG/#download

2.在网页中引用,如下:

<!–[if IE 6]>

<script src=”DD_belatedPNG.js” mce_src=”DD_belatedPNG.js”></script>

<script type=”text/javascript”>     /* EXAMPLE */   DD_belatedPNG.fix(‘.png_bg’);   /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的’.trans’*/   </script> <![endif]–>  

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

使用a:hover请留意

5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!–[if IE 6]>

<script type=”text/javascript” src=”js/DD_belatedPNG.js” ></script>

<script type=”text/javascript”>   DD_belatedPNG.fix(‘.trans,.box a:hover’);   </script>

<![endif]–>  

七.通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题

<script type=”text/javascript” language=”javascript”>

      function enablePngImages()

      { var imgArr = document.getElementsByTagName(“IMG”);

        for(i=0; i<imgArr.length; i++){   

        if(imgArr[i].src.toLowerCase().lastIndexOf(“.png”) != -1)

        {    

          imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + imgArr[i].src + “‘, sizingMethod=’auto’)”;    

          imgArr[i].src = “spacer.gif”;   

        }      

          if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)

          {    

            var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);

            imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+img+”‘, sizingMethod=’crop’)”;    

            imgArr[i].style.backgroundImage = “url(spacer.gif)”;   

          }

        }

    }

      function enableBgPngImages(bgElements)

      {

      for(i=0; i<bgElements.length; i++)

        {   

        if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)

        {     //alert(bgElements[i]);    

        var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);    

        bgElements[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+img+”‘, sizingMethod=’crop’)”;    

        bgElements[i].style.backgroundImage = “url(spacer.gif)”;   

    }

      }

      }

        </script>

        <img src=”pngpic.png” alt=”" border=”0″ />

        <!–[if lt IE 7]>

        <script type=’text/javascript’>

        var bgElements; enablePngImages(); if(bgElements){    enableBgPngImages(bgElements); }

        </script>

        <![endif]–>

    .pngImg {behavior: url(iepngfix.htc);}

以下片段添加至html文件一.IE6使用gif，其他则使用png来解决PNG背景灰

]]> http://www.luoye.org/blog/2010/11/ie6-png/feed/ 0 wap2.0从xhtml 移动概要(XHTML MP)开始 http://www.luoye.org/blog/2010/11/wap2-0-xhtml/ http://www.luoye.org/blog/2010/11/wap2-0-xhtml/#comments Tue, 02 Nov 2010 02:19:40 +0000 admin http://www.luoye.org/blog/?p=107 HTML

HTML (超文本标记语言) 用于万维网 (WWW) 的标记语言. WAP 开发的主要目标之一是将万维网带到移动电话和 PDA 等无线设备上. 因此, 无线世界标记语言的许多特征都借鉴了 HTML. 这也是 WAP 标准 (WML and XHTML 移动概要) 指定的标记语言与 HTML 如此类似的原因.

WML 1.x

WML (无线标记语言) 是 WAP 1.x 说明中定义的标记语言. 它是无线设备的第一个标记语言标准. 在引入它之前, 无线领域的主要玩家们, 如 Openwave, Nokia 和 Ericsson 都有它们自己的标记语言. WML 说明是 WAP 论坛创建的. 该论坛由 Ericsson, Motorola, Nokia 和 Openwave 于1997年合建而成. 目前, 许多 WAP 网站仍然使用 WML 作为标记语言.

XHTML

XHTML (可扩展超文本标记语言) 是用 XML (可扩展标记语言) 对 HTML 的重新格式化. XHTML 中的标签与 HTML 中的相同. 你可以将 XHTML 视为用 XML 语法写出来的 HTML. XHTML 比 HTML 有更简洁更严格的结构, 从而使得对文档的解析更为容易. 这对移动电话等无线设备尤为重要, 因为它们的解析能力有限. 所有主流 Web 浏览器都支持 XHTML. XHTML 将逐渐替代 HTML.

XHTML 基础 (Basic)

XHTML 基础是 XHTML 的简化版. 它被设计用于处理能力受限的设备, 如移动电话, PDA, 智能手表, 无线传呼机, 等等. XHTML 基础不包含在这些设备上难以支持的 XHTML 特征. 例如, 级联样式表, 框架, 和脚本在 XHTML 基础中都得不到支持. XHTML 基础是 W3C (万维网联盟) 定义的.

XHTML 移动概要

XHTML 移动概要是前 WAP 论坛定义的最新 WAP 说明 2.0 版的官方标记语言. WAP 论坛基于 XHTML 基础创建了 XHTML 移动概要, 从 XHTML 完全版中增加了一些元素和属性, 如 <i>, <b>, <hr>, <small> 和 <big>. XHTML 移动概要支持级联样式单的简化版 (被称作 WCSS 或 WAP CSS).

WCSS 或 WAP CSS

CSS (级联样式单) 广泛用于万维网, 用来定义 Web 页面在浏览器中展现效果. WCSS 或 WAP CSS 是 CSS2 的简化版, 添加了一些对于 WAP 的专门扩展. WAP CSS 是在 WAP 2.0 说明中定义的. 由于? WAP CSS 是为在无线设备上使用而设计的, 因此, CSS2 的对无线设备不适合的或不必要的特征都没在 WAP CSS 中包含. WAP CSS 将展现效果从内容中分离了出来. 如果你想更改一个 XHTML MP 页面的展现效果细节, 你只须修改样式单. 有了 WAP CSS, 你可以轻松改变你的 XHTML MP 页面的布局和风格来适应不同的用户代理 (User Agent).

WML 2.0

WAP 网站开发人员不需要关心 WML 2.0. WML 2.0 的创建目的是向后兼容, 而不是供 WAP 网站开发人员使用的. 要想用 WAP 2.0 标准开发开发 WAP 网站, 就用 XHTML 移动概要吧

]]> http://www.luoye.org/blog/2010/11/wap2-0-xhtml/feed/ 0 XHTML MP (XHTML Mobile Profile) 简介 http://www.luoye.org/blog/2010/11/xhtml-mp/ http://www.luoye.org/blog/2010/11/xhtml-mp/#comments Tue, 02 Nov 2010 02:18:04 +0000 admin http://www.luoye.org/blog/?p=105 什么是 XHTML MP?

XHTML MP (可扩展标记语言移动概要) WAP 2.0 中定义的标记语言. WAP 2.0 是 WAP 论坛 (现为开放移动联盟 [OMA]) 创建的最新的移动服务说明. 对 WAP CSS (WAP 级联样式单或 WCSS) 的说明也在 WAP 2.0 中作了定义. WAP CSS 是 XHTML 移动概要的伴侣, 二者常被一起使用. 有了 WAP CSS, 你可以轻松地改变与格式化 XHTML MP 页面的展现.

XHTML 移动概要是 XHTML 的子集, 是 HTML 的更严格的版本. XHTML 移动概要是 XHTML 基础 (Basic, 也是 XHTML 的一个子集) 加上了 XHTML 完全版中一些额外的元素和属性.

XHTML 移动概要的目标, 是把移动因特网浏览和万维网浏览的技术结合起来. 在 XHTML 移动概要产生之前, WAP 开发人员用 WML 和 WMLScript 创建 WAP 网站, 而 Web 程序员用 HTML / XHTML 和 CSS 开发 Web 网站.

XHTML 移动概要发布后, 无线世界和有线世界的标记语言最终汇聚到了一起. XHTML 移动概要 和 WAP CSS 赋予了无线因特网应用开发人员更多更好的展现控制. 然而, 最大的优点, 是你的 Web 版和无线版因特网网站可以用同样的技术开发. 你可以在原型化和开发过程中用任何 Web 浏览器查看你的 WAP2.0 应用程序.

WAP 的早些版本是 1.2.1. WAP 1.2.1 网站是用 WML 和 WMLScript 开发的. WAP 2.0 向后兼容 WAP 1.x. 因此, WAP 2.0 无线设备对 XHTML MP / WCSS 和 WML / WMLScript 网站都可以访问. 如果你对学习 WML 或 WMLScript 有兴趣, 请阅读相关 WML 和 WMLScript 教程.

XHTML MP 优点

XHTML MP 所带来的最大优点是, 开发人员可以用相同的技术开发 Web 和 WAP 站点. 这给 WAP 应用开发带来的好处有:

  • 如果你对诸如 HTML, XHTML, 和 CSS 技术很熟悉, 你几乎可以立即开始开发 WAP 站点. 如果你对上述 Web 技术而言是新手, 并且你现在正在学习 XHTML MP, 那么你同时也是在学习如何编写 Web 代码.
  • 开发 Web 和 WAP 站点可以用同样的开发工具. 你可以用你的 Web 开发工具创建你的移动因特网应用. 这使得开发成本得以降低 (不需要购买新的开发工具), 并且投资时间也得以缩短 (不需要学习使用新的开发工具).
  • 在开发过程中你可以用普通 Web 浏览器查看你的 Web 站点. (在最终发行前, 你应该用模拟器和实际移动电话测试你的 WAP 网站, 因为实际移动设备的特征 [例如, 屏幕大小, 支持的色彩像素] 差异很大.)
  • 你的 Web 站点上的 HTML/XHTML 页面只须很少改变甚至无须改变就可以转化为 XHTML MP 文档. (然而, 你得确保 HTML/XHTML 页面布局在小屏幕上看上去也很美观, 并且文件大小不超过目标移动设备所允许的最大页面大小.)
  • 找开发人员加入你的移动因特网应用开发团队变得更为容易, 因为市场上有大量 web 开发人员.

这些是 XHTML MP 的一些其它优点:

  • XHTML MP 支持 WAP CSS, 实现了把内容和展现效果分离到不同的文件中. 大家都知道, 移动设备的特征, 如屏幕大小, 很不相同. 把内容和展现效果分离开来意味着你只须一次性编写内容, 然后用各种各样的 WAP CSS 文件修改样式和布局以适应不同的移动设备.
  • 有了 XHTML MP 和 WAP CSS, 你就可以更好地控制展现效果. 例如, 你可以控制边框, 背景, 边界, 内边距, 等等. 你还可以指定字体大小, 字体和字体颜色. 这些特征在 WML 1.x 中是无效的.

XHTML MP 所失去的 WML 的特征

一些 WML 1.x 中可用的特征在 XHTML MP 中已经不存在了. 在这一部分中, 你将学到 WML 1.x 与 XHTML MP 之间的这些区别. 这一部分对于那些熟悉 WML 但对于 XHTML MP 来说是新手的人, 或者那些想把他们的移动因特网应用从 WML 1.x 迁移到 XHTML MP的人来说, 特别有用.

尽管失去了 WML 的一些特征, 在 XHTML MP 中还是有实现类似效果的方法的. 应该注意到, WAP 2.0 对 WML 1.x 是后向兼容的, 这就意味着 WAP 2.0 移动设备能够显示 WML 1.x 文档. 如果你必须要使用一个在 WML 中有效但在 XHTML MP 中无效的特征, 那么你可以考虑用 WML 1.x 开发你的 WAP 应用.

这些是 XHTML MP 所丢失的主要的 WML 语言的特征:

  1. XHTML MP 不支持 Deck 与 Card
  2. XHTML MP 不支持计时器
  3. XHTML MP 不支持事件
  4. XHTML MP 不支持变量
  5. XHTML MP 不支持客户端脚本
  6. XHTML MP 不支持对软键 (accesskey) 编程
  7. XHTML MP 不支持 <u> 标签
  8. XHTML MP 的输入字段不支持格式化属性
  9. XHTML MP 不支持用锚链接发送数据
]]> http://www.luoye.org/blog/2010/11/xhtml-mp/feed/ 0