我想网 » HTML

Iframe自适应高度

seasun — Thu, 29 Jul 2010 14:06:08 +0000

同域、子页面高度不会动态增加

这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可。但有二点必须注意：

如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括Webkit内核的浏览器，具体请看这个Demo。所以你要么进行浏览器检测，要么用Math.max计算一个最大值，要么你想别的方法。
iframe所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是，IE下必须使用微软事件模型obj.attachEvent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。


(function(){
    var frame = document.getElementById("frame_content_parent"),
        setIframeHeight = function(){
            var frameContent = frame.contentWindow.document,
                frameHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);

            frame.height = frameHeight;
        };
    if(frame.addEventListener){
        frame.addEventListener("load",setIframeHeight,false);
    }else{
        frame.attachEvent("onload",setIframeHeight);
    }
})();

同域、子页面高度会动态增加

原理与第一种情况一样，多一个计时器，一直检测字页面高度，当子页面高度和iframe的高度不一致时，重新设置iframe的高度。这边也可以加一个try在js出错时，加一个足够的高度。


(function(){
    var _reSetIframe = function(){
        var frame = document.getElementById("frame_content_parent")
        try {
            var frameContent = frame.contentWindow.document,
                bodyHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);
            if (bodyHeight != frame.height){
                frame.height = bodyHeight;
            }
        }
        catch(ex) {
            frame.height = 1800;
        }
    }
    if(frame.addEventListener){
        frame.addEventListener("load",function(){setInterval(_reSetIframe,200);},false);
    }else{
        frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
    }
})();

同域、子页面高度会动态增加、脚本可能完全失效

第二个例子中，考虑到了脚本出错的情况，但是万一脚本根本不执行了呢，那iframe中的内容就会因为iframe的高度不够而显示不了。为此我们通常事先设置一个足够的高度，为了前端控制方便，我觉得写在CSS文件中比较合适，需要修改时只改CSS就行了。这里我设置了selector{ height:1800px; }。需要注意的是，写在样式表里的样式，不能直接用node.style[property]来取，对于微软模型，要用node.currentStyle[property]（题外话：悲剧的IE模型不支持CSS伪类），对于W3C模型，要用window.getComputedStyle(node,null)[property]来取。我这里图方便直接用了YUI。

这里又有一个问题，设置iframe的高度大于其包含页面的高度时，各个浏览器的处理不一样。例如在Firefox下，必须计算body元素的高度，而html元素的高度等于iframe的高度，然而当恰巧这个页面又有绝对定位、未清浮动元素时，又不能通过body元素来取，显然第一种方法缺点更小一些。具体请看这个Demo。

从上面这个Demo可以看到，除IE浏览器外，别的浏览器计算出来的都是iframe的高度，即CSS里设置的#frame_content_parent{ height:1800px; }。而IE计算出来的是iframe所引用页面的实际高度。


#frame_content_parent{ height:1800px; }


(function(){
    var $ = YAHOO.util.Dom,
        frame = $.get("frame_content_parent");
    function reSetIframe(){
        var frameContent = frame.contentWindow.document,
            bodyHeight = Math.max(frameContent.documentElement.scrollHeight,frameContent.body.scrollHeight);
        if (bodyHeight != $.getStyle(frame, "height")){
            $.setStyle(frame, "height", bodyHeight + "px");
        }
    }
    if(frame){
        $.setStyle(frame,"height","auto");
        setInterval(reSetIframe,300);
    }
})();

跨域

这里提供一个Iframe代理的方法，简单地说一下原理。假设有3个页面，分别是主页面A.html，字页面B.html，代理页面C.html。其中A与B是跨域的，而A和C是同域的。它们的关系：A包含B，B包含C。很显然A和B，以及B和C，因为跨域不能相互通信，而A和C同域，可以相互通信。为此我们就想到让C页面告诉A页面，B页面到底有多少高。因为B和C也是跨域的不能相互通信，所以想在C页面中，直接window.parent.document.body.scrollHeight这样是行不通的，所以我们只能让B页面自己计算自身的高度，然后通过某种方法告诉C页面，再由C页面告诉A页面。这里的一个方法就是在B页面生成一个Iframe节点，然后设置它的src属性，在这个地址上附加一个参数，即B页面计算出来的高度，然后C页面就可以通过window.location获取这个地址栏中的地址，提取出高度值，通过window.top找到A页面，设置A页面的Iframe的高度。基本的原理就是这样，看代码吧：

DEMO


//B页面脚本
//任务：计算其实际高度，然后生成一个iframe节点，将高度作为代理页面C的地址的一部分赋值给Src属性
(function(){
    var agent_iframe = document.createElement("iframe"),
        b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
    document.body.appendChild(agent_iframe);
    agent_iframe.style.display = "none";
})();


//C页面脚本
//任务：获取请求地址中的高度值，将其赋值给A页面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

跨域、字页面高度动态变化

这里结合了第2、第4两种方法，我的想法是在B页面通过一个计时器，不停计算B页面的高度，一但变化，马上修改iframe标签的src属性，而C页面也有计时器不断监听src的变化，改变Aiframe标签的高度。需要注意的是仅仅修改src属性后面的锚点值（如“#1234”），页面并不会刷新，不会重新请求，这也是在C页面增加计时器的原因。

DEMO


//B页面脚本
(function(){
    var getHeight = function(){
        return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    };

    var preHeight = getHeight(),
        agent_iframe;

    var createIframe = function(height){
        agent_iframe = document.createElement("iframe");
        agent_iframe.style.height = "0";
        agent_iframe.style.width = "0";
        agent_iframe.style.border = "none";
        agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height;
        document.body.appendChild(agent_iframe);
    }

    createIframe(preHeight);

    var checkHeight = function(){
        var currentHeight = getHeight();
        if(currentHeight != preHeight){
            agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight;
            preHeight = currentHeight;
        }
        setTimeout(checkHeight,500);
    }

    setTimeout(checkHeight,500);
})();


//C页面脚本
(function(){
    var preHeight = parseInt(window.location.hash.substring(1),10),
        ifrmae = window.top.document.getElementById("frame_content_parent");

    ifrmae.height = preHeight;
    setInterval(function(){
        var newHeight = parseInt(window.location.hash.substring(1),10);
        if (newHeight !== preHeight){
            ifrmae.height = newHeight;
            preHeight = newHeight;
        }
    },500);
})();

这里还有另一种方案，就是让iframe每一次都重新请求，这样C页面就不需要计时器了，但是如果2次计算高度重复的话，就会导致src属性的值相同，这样浏览器就很可能不重新请求该页面了，那么C页面中的脚本也就不运行了。要修复这个问题很简单，只要在每次计算出来的src属性上增加一个随机数的参数就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563


//B页面关键脚本
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;


//C页面脚本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

标签：HTML, HTML

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

HTML代码的美感

seasun — Thu, 29 Jul 2010 05:02:12 +0000

每当我访问精美的网站，我都情不自禁地会去查看源代码。这就好比你拥有一副X光眼镜，能够看到任何人——甚至透视他们的遮羞布。这简直是天经地义的事情嘛！我迫不及待地想了解，这个精美的网站，是不是由同样具有美感的代码所写成，而或者只是金玉其外败絮其中。代码？美感？当然！归根结蒂，代码如诗。（译注：“Code is poetry”为著名博客系统 Wordpress 的宣传语。）这仅仅是最基础的 HTML 而已，自然不如其它动态语言般复杂而优雅，但它依旧保持了它的创造者所赋予的艺术笔触。

这就让我不禁开始思考，如何让代码具有美感？对于 HTML 而言，这一切都是手工活。让我们看看标记语言如何能达到具有美感的境界。

图片有足够大（译注：2000×2000），你大可以把它打印出来并贴在你的个人储物箱中，并让你的朋友留下深刻印象。话说回来，这的确是个令人纠结的大小。我会放出 PSD 原图方便大家修改。

HTML5 – HTML5 及其新元素带来了前所未有的美感。
DOCTYPE – HTML5 拥有最佳的文档类型。
Indentation – 制表符与空格用于缩进代码，以正确显示标签之间的父子关系，强调层级结构。
Charset – 在所有内容之前，必须在头部进行字符集声明。
Title – 网站标题简单而清晰。首先表述该页面的功能，在分隔符之后，用网站标题结尾。
CSS – 只用了一个简单的样式表（媒体类型已在样式表中声明），并且仅面向于优良的浏览器。IE6 及更低版本将获取通用的样式表。
Body – 为主体赋予 ID，便能在无需更多标记的情况下，给不同页面设定独有的样式。
JavaScript – 从 Google （谷歌）调用了 jQuery（最具美感的 JavaScript 脚本库）。仅加载了单个 JavaScript 文件。各脚本都在页面底端进行引用。
File Path – 为提高效率，站点资源使用相对路径。从适应转载的角度考虑，内容性文件（如图片）则采用绝对路径。
Image Attributes – 图片包含替换文字，主要是为图片缺失情况而服务的，但同时也可用于验证。为了提高渲染效率，图片的宽度与高度最好也要说明。
Main Content First – 页面的主要内容应在，基本的标示及导航之后，而在任何辅助内容（如：边栏）之前。
Appropriate Descriptive Block-Level Elements – HEADER、NAV、SECTION、ARTICLE、ASIDE ……这些新出现的“描述区段”，都将比从前的 DIV 更好地描述内容。
Hierarchy – 大写标题标签将起到实效，并跟随着清晰的“层级结构”。
Appropriate Descriptive Tags – 根据不同的需要，列表被标记为：未排序、已排序，以及并不常用的自定义列表。
Common Content Included – 在不同页面所出现的相同内容，最好能从服务器端包含到页面中。（无论通过任何对你行之有效的方式、语言、CMS，等等。）
Semantic Classes – 不仅需要设立正确的元素名称，还更应做到类和 ID 的命名符合语意：即使没有特定说明，它们也能起到描述的作用。（如“col”比“left”更好）
Classes – 当多个元素需要用到类似样式的时候，尽量为它们定义相同的类。（重用性）
IDs – 当页面中该元素仅出现一次的时候，尽量为它们定义 ID，而请勿为不同元素定义相同 ID。
Dynamic Elements – 动态效果仅在确实所需的时候加入。
Characters Encoded – 当出现特殊字符的时候，请注意字符编码。
Free From Styling – 页面上的一切无关样式，甚至无需指明需要怎样的样式。页面上的一切仅限以下三项：所需的站点资源、内容、描述。
Comments – 在查看代码的时候，那些并不需要特别强调，或者不是格外明显的内容，将会被包括在评论之中。
Valid – 全站的标记符合 W3C 验证。注意标签闭合，保证必要属性，避免废弃方法，等等。

【相关资料】 1、原文 2、原 PNG 3、原 PSD 4、原 HTML

标签：HTML, HTML

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

HTML5如何改变互联网

seasun — Tue, 27 Jul 2010 14:01:08 +0000

HTML5，下一代用来制作网页的标记语言，它能不借助插件（如Adobe的Flash）的情况下在浏览器中播放视频的能力已引起人们的关注。但是其鲜为人知的那些特性最终或许会对互联网体验起到巨大的影响。

专家说HTML5在屏幕背后处理的事情——如网络通信和浏览程序储存特性——能让网页加载更快（特别是在速度比较慢的移动设备上），能让互联网应用运行的更流畅，甚至能让浏览器更容易的读取旧的网页。

如今许多网站就像桌面应用——如网络Offce套件，图片编辑工具。但是这些网站应用的许多高科技的特性是开发者运用不同互联网开发技术的结合开发出来的，如HTML，Javascript,和CSS——但这些技术的结合并不总是运行得完美。因此，网站变得很慢，在不同的浏览器上也许表现得不同，并且很容易被攻击。

在Opera软件上传播开放性互联网标准的BruceLawson曾说要让网站运行那些本不是互联网原本设计中的功能，开发人员就要编辑非常复杂的代码，这些代码很容易出现错误导致应用失败。

Lawson说，开发HTML5的小组被任命了很高的要求，需要让HTML5比其前身更加兼容以至于老版本或者编码不正确的网站也能在HTML5为核心的浏览器上运行良好。他们也希望拓展这些特性来支持目前主流的趋势如富应用。他还说：“HTML5的基础是非常务实，它是为人们正在做什么而设计的。”

专家指出，其中一个特性互联网通信接口就是一个HTML5可以提供的改进方案。互联网通信接口为网站提供API来打开一个页面和服务器端正在通信的连接使得信息可以实时的在其中进行传递。通常情况下，每次需要更新的时候浏览器需要发出一个请求。

互联网开发网站Ajaxian.com联合创始人，Palm开发关系总监BenGalbraith说，互联网通信接口的效果就好像把通过e-mail进行的对话变成了一个即时的消息。e-mail，每条消息通过单独的事件进行发送，然而即时消息允许流畅的持续不断的对话。

互联网开发人员先前设计了许多方法使得浏览器和服务器端保持通信，但是Galbraith把这些技术称为“设计独特的破解”，他们运行起来非常复杂并且延展性不佳。他说，互联网通信接口可以为开发者提供一个简单的方法来帮助他们创建那些即时改变的页面——随着越来越多的即时信息的传递这个变得更加重要，如来自于社交网络用户即时的状态更新。用户可以看到即时信息传递的互联网应用运行得更加流畅并且无误。

CarbonFive（一家旧金山专门开发应用的公司）的拥有者，AlonSalant说，当设备与互联网断开连接或间歇性连接时（智能手机环境下非常普遍），HTML5可以帮助互联网应用运行的更加出色。互联网存储这个特性可以使互联网应用在浏览器中存储更多的数据，智能地获取这些数据并且控制浏览器如何来存储这些数据来加快页面的重新加载

Gallbraith对于几个与HTML5共同工作的最新设计的CSS特性兴奋不已。这些特性使得网页对于用户更加具有交互性并且允许高质量的图形界面——这个是目前网页不擅长的地方。HTML5允许开发者在页面中内嵌动画，但是，Galbraith说新的CSS将会工作的更加出色

Lswson说用户将会看到HTML5其他的一些特性所带来的性能的改善。例如，在浏览器处理表单方面的改善将减少大量的Javascript代码来加快页面的加载，特别在移动设备中。

Mozillar首席传播者，ChrisBlizzard指出HTML5分析器的重要性。一个浏览器的分析器读取制造网页的标记来算出如何展现它。Blizzard说这是标准说明的最重要的一个部分之一。它意味着能让浏览器更加具有可操作性，特别在处理拙劣代码的方法上，解析器定义了应该如何响应错误来代替让各个浏览器制造者决定如何来处理这些不完美的代码，这让用户不论在使用哪个浏览器，都可以获得相同的用户体验

如今许多网站就像桌面应用——如网络Offce套件，图片编辑工具。但是这些网站应用的许多高科技的特性是开发者运用不同互联网开发技术的结合开发出来的，如HTML，Javascript,和CSS——但这些技术的结合并不总是运行得完美。因此，网站变得很慢，在不同的浏览器上也许表现得不同，并且很容易被攻击。

在Opera软件上传播开放性互联网标准的BruceLawson曾说要让网站运行那些本不是互联网原本设计中的功能，开发人员就要编辑非常复杂的代码，这些代码很容易出现错误导致应用失败。

Lawson说，虽然看上去HTML5好像呈现了非常多的巨大的改变，但是其主要目的是为开发者正在做的事情提供一个更加容易的解决方法，使得错误减少。程序越是简单，它就越是健壮，因此终端用户体验也就越佳，这个就是我的感受。

标签：HTML, HTML, Internet

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

使用框架建立富联网应用

seasun — Tue, 27 Jul 2010 13:41:38 +0000

JavaScript库，ICEfaces，Adobe Flash，微软Silverlight，现在还有HTML5，全球性的网络支配地位的竞争已经进入了崭新的时代——一个富网络应用（简称RIA，中文也有叫富互联网应用）的时代。本文目的是界定什么是RIA，解释为何网络已经开始向RIA靠拢，探索今天已经存在的不同RIA框架，对每个框架作出一些优点和缺点的概述，并讨论这些新技术在未来将是怎么样的生存态。

RIA是何物?

所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意，你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多共存的技术组成，就像现在。

标签：Adobe, Adobe, Ajax, Ajax, Flash, Flash, Flex, HTML, HTML, JavaScript, JavaScript, JQuery, MooTools, RIA, Silverlight, Technology, YUI

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

15 个非常值得收藏的 HTML5 资源

seasun — Tue, 20 Jul 2010 13:40:58 +0000

HTML5 越来越引起人们的关注，苹果甚至将 HTML5 视为 Flash 的掘墓人。然而，作为一种尚未成型的技术，HTML5 对很多人来说仍然是陌生的。本文收集了 15 个非常值得收藏的 HTML5 资源，这些资源可以让你同 HTML5 的发展保持一致，并始终处于这门技术的最前沿。

1. WTF is HTML5

这是一个关于 HTML5 Infographics 的站点，包含诸如 HTML5 同 Flash 的对比，HTML5 不同浏览器支持情况，HTML5 最受欢迎的功能等资料。
2. Dive Into HTML 5

Mark Pilgrim 是知名软件开发师与博客作者，他在线编写了一本有关 HTML5 的书，侧重 HTML5 的编程方面的功能。
3. HTML5 Doctor

发布 HTML5 相关的文章，介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目，也是 HTML5 相应技术的最佳注解，如 dl element ，article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design 大会相遇相识的开发人员共同创办。
4. When Can I Use…

这个简单的单页式站点是一份 HTML5 各种功能同当前主流浏览器（以及它们的不同版本）的兼容清单。
5. HTML5 W3C Specifications (Editor’s Draft)

这是 HTML5 的最新的草案，由 W3C 起草，如果你想对 HTML5 的方方面面有个权威的了解，这是最好的资源。
6. Yes, You Can Use HTML 5 Today!

SitePoint 有一篇非常出色的文章，鼓励开发和设计者现在就开始部署使用 HTML5，还讲述了改如何编写代码，以适应那些尚不支持 HTML5 的浏览器，如 IE8。
7. Coding A HTML 5 Layout from Scratch

这是来自 Smashing Magazine 的一篇文章，讲述了如何使用 HTML5 的新元素进行页面布局设计。
8. HTML5 presentation

这是一份关于 HTML5 的演示，是一份有关 HTML5 非常超前的资料，原本是为 Google Chrome用户设计，因此，在某些浏览器上可能无法观看。
9. HTML5 Gallery

这是一个 HTML5 站点展示站点，定期推出一些基于 HTML5 的站点介绍，你可以藉此借鉴先行者们的技巧和经验。
10. A Web Developer’s Guide to HTML 5

这篇来自 W3C 的文章面向 Web 开发者，介绍了HTML5 的语法，API，术语以及各种开发者们关心的资源和技术。
11. HTML5 Demos and Examples

Remy Sharp 是一位来自英国的 web 开发者，他编译了这套 HTML5 演示，包括简单的，基于浏览器的聊天程序，地理位置信息程序等等。
12. Web Designer’s Checklist: HTML5 Support Tables

一份非常全面的 HTML5 和 CSS3 浏览器兼容清单。
13. HTML 5 differences from HTML 4

HTML5 和 HTML4 到底有什么区别，这是 W3C 官方对比清单。
14. HTML5 – Wikipedia

维基百科上有关 HTML5 的词条，非常权威，文章下方还提供了大量 HTML5 的权威资源。
15. The HTML5 test

这个站点可以帮您测试你的浏览器对 HTML5 的支持情况，并为你打出分数。

标签：HTML, HTML

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

13个利用CSS3+HTML5实现的令人惊叹的例子

seasun — Sun, 18 Jul 2010 14:36:49 +0000

基本介绍

如果你错过了我以前的职位对CSS和HTML5的，你可以读它之后。如果你拥有更多的例子来分享，请让我放弃我所知道的评论！

演示使用HTML5+CSS3实现所展示的强大的力量。现实中的新案例又有出现了不少，于是我又再次发布了该类主题的这篇文章！请确保您的浏览器最好是最新的版本，最好是Safari或者Chrome。如果您错误了我以前介绍的关于HTML5+CSS3实现的案例，那么千万不要再错过本文，如果您有好的案例，那么就请分享给我们吧，请留下您宝贵的评论！

Slidenafill
GoogleBox
Page Flip
Bar Chart
Solar System
Colourful Clock
CoverFlow
Leaves
Bokeh
3D Bar Chart
A Tribute to the Beatles
Pacman
Coke Can

This isn’t made with CSS3 nor HTML5, it’s CSS1/2! Pretty amazing concept.

标签：CSS, CSS, HTML, HTML, Translate, Translate, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

开发者:HLML5非常适于移动设备(应用程序)开发

seasun — Mon, 28 Jun 2010 14:47:07 +0000

对于IPad各种新特性及APPLE在促进AR(Augmented Reality)技术革新上失败的积极讨论已使它成为本周媒体的新宠,当然还有今早的开发者基金发布.从消费者的角度来看多平台很让人兴奋.但应用程序开发者会在IPHONE,Android,黑莓直至现在的IPad之间移植他们的app.当大量消费者转移至其他品牌,通过APPLE审批进程锁定更多开发者在IOS平台的意愿可能会是开发者的炼狱,结果只有一个:无人受益.

Palm开发者关系经理Dion Almaer, 在给出(在移动设备)没有现在流行的”一次编写,到处运行”APP开发方案告诫的同时,打赌基于WEB的APP和HTML5将会解决一些我们所关注的问题.

Almaer 说:通过WEB我们可以分享更多.拿GMail来说,它并不是一个专门为IPhone编写的应用.诸如此类使用本地数据的丰富HTML5应用非常棒.用户体验略微被削弱了.但是对我来说App和商店的概念被限制了并且可能是错误的.我希望我们能绕过这种可以预见其未来发展的APPStore模式.

有许多原因让开发者Kevin Systrom选择用HTML5来编写他的隐形程序.除了可以在多种平台的设备上运行,事实上HTML5还可以提供在无APPSTORE的情况下即时发布程序.Kevin 力挺HTML5说:HTML/JS开发者社区轻而易举地达到10倍于APPSTORE的规模并且没有下载消耗(时间).你只需简单地告诉人们一个URL(统一地址),然后链接就可以了–程序已经被安装好了.APP在线直接安装而不是从APPSTORE下载意味着减少了开发者进行病毒式营销(指互联网用户自发转送广告的行为)的障碍.至于其他方面,虽然有许多方法可以让你加速APP,当涉及到响应等等情况,写一个原生程序总是会有其优点.然而,我们不应该忘记在桌面市场曾经发生过这样的情况,到适当时机,随着技术发展,当消费者和开发商认识到浏览器内建程序的优点,他们可能会全部转移到WEB应用上来.

GOOGLE开发者关系经理Patrick Chanezon 列举了大量使用HTML5开发移动设备的优点,亦即你可以在所有支持HTML5的电话上部署同样的代码并且不会被苹果的审批程序减速发布.然而HTML5 APIS 还没有完全标准化,同时还有很多电话不支持HTML5.不管怎样当更多设备将WEB开发环境作为他们的选择,Chanezon相信HTML5会保持其发展势头.

HTML5并不是完美的,它可能只是你消减设备开发成本和周期的步骤之一.

更多HTML5和移动开发信息请查看:

Peter Paul Koch’s Mobile Compatibility Tables

the Google Code Chrome page,

the Ajaxian blog, Mozilla Developer Center,

Mark Pilgrim’s Dive Into HTML 5,

The Surfin’ Safari WebKit Blog and JQTouch.

同时, Chanezon’s own Delicious account 有许多演示和文章.

标签：HLML, HTML

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

前端开发常见图片格式详解

seasun — Mon, 21 Jun 2010 13:40:24 +0000

前端开发设计，打交道最多的就是图片啦~今天就来个图片格式讲解，也许一些围绕你的问题可以在这篇文章中找到答案

Gif格式图片的特点

透明性

Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。

动画

Gif这种格式支持动画。

无损耗性

Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。

水平扫描

Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

Jpeg格式图片特点

透明性、动画

它并不支持透明，也不支持动画。

损耗性

除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

隔行渐进显示

它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全到达的时候显示）。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

Png格式图片分析

Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png（PNG8）和全色的png（PNG24、 PNG32），你完成可以用256色的png代替gif，用全色的png代替jpeg

透明性

Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)

动画

它不支持动画

无损耗性

png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式
水平扫描像GIF一样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示

它支持间隔渐进显示，但是会造成图片大小变得更大

其它图片格式与PNG比较

众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。

相比GIF：PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用 PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。
相比JPEG：JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG 适合作为编辑JPEG的过渡格式.

Png8的在ie中的怪异表现:

半透明的png8在ie6以下的浏览器显示为全透明。
Alpha透明的全色PNG(png32）在ie6中会出现背景颜色(通常是灰色)。

由上面可以总结:

全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。
第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。

因此得出结论就是:请使用PNG8。

Png8的软件问题

Photoshop只能导出布尔透明的PNG8。

Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.

pngquant与pngnq这两个命令行软件可以转换全色png为 256色的png8。

标签：CSS, CSS, HTML, HTML, 前端开发

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

10个绝妙的HTML5，CSS和Javascript示例

seasun — Tue, 15 Jun 2010 17:26:07 +0000

Introduction

I haven’t really digging into HTML5 yet, but it’s so hot right now I can’t even avoid it. I thought it would take a while to adopt it by web community and I think Apple has play a role in it. Apple’s iPad has stimulate the acceptance of HTML5! Alright, I haven’t got an iPad yet because I think I don’t need it YET. Okay, back to HTML5, HTML5 has changed the game of web development and it’s so exciting. I have collected 10 awesome html5, css and javascript demonstrations that show you the power of them combined together!

[我还没有深入研究HTML5，但是它太热了，我没法忽略它的存在。 HTML5已经改变了web开发的游戏规则，这里我收集了10个绝妙的HTML5，CSS和Javascript示例。]

提醒：下面的例子需要在支持HTML5的浏览器里运行，比如：Firefox最新版，Chrome。

Blob

Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity.[可爱的小圆球人物，用到了HTML5的canvas和javascript。]
Bubble

Generate colorful bubbles using HTML5 and of course with a magic touch of javascript.[使用HTML5和javascript生成的彩色泡泡]
jParallax

Awesome jParallax. I have been wanted to use this in my projects, but still haven’t got the chance yet. It’s a plugin and it’s free.[不可思议的jParallax.我一直想在自己的项目里用这个，但是一直没有机会，这是一个免费插件]
Firework

Never thought we can make firework with Javascript and html5.[从来没想过我们可以用JavaScript和html5做烟花.]
Canvas Photo

Create polaroid photo effect with HTML5 canvas. It also come with the export tool.[用HTML5的canvas创建的拍立得效果的相册.]
Video showcase from Apple

Apple has a sweet demonstration of video masking, scaling and changing perspective of the video.[苹果的例子,可以缩放和改变视频角度。]
Photo Gallery

Another awesome demonstration. You can change the layout of the photo gallery and it has a nice blur effect.[另一个不可思议的DEMO。您可以更改照片库布局，它有一个很好的模糊效果。]
Particle Animation

Using 300 sprites to spell out the word. It’s the demonstration of canvas particle animation.[使用300个粒子拼写单词。这是 canvas的动画效果显示。]
Spread
Block based destruction of HTML5 Canvas Video

If you think apple’s canvas video is awesome, check this out. Recommended to use webkit based browsers.[如果你感觉苹果的canvas视频非常不可思议，看看这个吧，这个太牛X了！]

标签：CSS, CSS, HTML, HTML, JavaScript, JavaScript

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

从HTML5的角度重新思考表单元素

seasun — Sat, 12 Jun 2010 13:24:08 +0000

这是一篇我在nettuts上看到的一篇文章，写得挺不错的。原文在这里：Rethinking Forms in HTML5 最近网上HTML5和Flash的口水战也不少，做为一个合格的前端了解些新知识还是很有必要的。

先来看一个传统的表单：

这个表单看起来相当臃肿，而且不利于特殊人群阅读网页内容。在新的HTML5规定中会有一些增加一些新的属性来完美它们，如：autofocus, autocomplete, list, required, multiple等。

自动聚焦（autofocus）

这些新属性的作用就是让它们相对的好理解。例如：

autofocus>

这种情况的要点就在于一旦页面加载，这个文本输入框就自动聚焦，使用户的输入更加便捷。

autocomplete=”off”>

这种情况，通过关闭表单自动完成功能让浏览器无法显示自动完成的效果。这就避免了因自动完成功能而输入错误内容的情况。

数据表(list)

list=”url_list”>
<datalist id=”url_list”>

这个list属性的确很酷，当你用鼠标点击这个输入框时下面会自动显示出datalist的内容，通过点击它可以将内容自动添加到上面的输入框。这个效果如果要用JS制作的话就会相当麻烦了。注：建议使用新版的opero浏览些效果，如下：

多选框(multiple)

multiple>

multiple属性让大家可以调用页面中datalist中的内容(如上)，这双节省了我们用JS去写此功能的时间。

必填项(required)

required>

此属性表明该项目为必填项目，提交表单时如果为空则自动给出提示！完全不需要另写JS。

正则(RegEx)

pattern=”[0-9][A-Z]{3}”>

此属性会检查输入内容和目标正则表达式的匹配情况。

验证(Validation)

range” min=”1″ max=”10″ step=”.5″ value=”5″ >

当输入框类型为range时就可以定义内容的范围等相关项目。

当然以上提到的这些属性并不是每个浏览器都支持的，具体情况看下图：

更多精彩内容请阅读原文，这里只做抛砖引玉的介绍。

标签：HTML, HTML

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

HTML 5 Video概述

seasun — Thu, 10 Jun 2010 15:07:30 +0000

1 Video介绍

引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字：

“当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到的唯一可靠方法是使用Flash。这需要Adobe Flash插件，并且结合和标签。

大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。

不幸的是，视频并非那么简单。不仅仅是浏览器需要理解标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。

总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。

面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码解码器。”好吧，引用到这儿。

如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、 Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。

苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。

说了这么多，其实说到底就是，现在如果要在页面中使用标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。

好吧，现在让我们从技术层面来认识HTML 5的视频，包括标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

2 Video标签的使用

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签。

Video标签内除了可以包含标签外，还可以包含当指定的视频都不能播放时，返回的内容。

2.1 src属性和poster属性

你能想象src属性是用来干啥的。跟标签的一样，这个属性用于指定视频的地址。

而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。

2.2 preload属性

这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。

Auto：全部预加载。

2.3 autoplay属性

又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字（此处，自动播放为或者）；而在标签中不使用此属性表示false（此处不进行自动播放为）。

2.4 loop属性

一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。

2.5 controls属性

Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。

控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video不正常，所以这两个只能在网上找截图了。

2.6 width属性和height属性

属于标签的通用属性了，这个不用多说。

2.7 source标签

Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

此标签包含src、type、media三个属性。

src属性：用于指定媒体的地址，和video标签的一样。

Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见W3C的文档。

Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到