Manifest的应用过程（Windows & Apache)

Posted on by
4

1、让本地APACHE服务器支持.htaccess

查找：
Options FollowSymLinks
AllowOverride None

改第二行为：AllowOverride All

2、在.htaccess中添加对manifest类型文件的支持(命令模式)

D:\>cd D:\Program Files2\phpfile\phphtml\test\html5

D:\Program Files2\phpfile\phphtml\test\html5>copy con .htaccess
AddType text/cache-manifest manifest^Z
已复制         1 个文件。

3、创建manifest类型文件

CACHE MANIFEST
#VERSION 0.0.1

#要缓存的文件
CACHE:
test/time.js
test/reset.css

#在线时访问的文件
NETWORK:
index.php

#替补文件
FALLBACK:
test/index.php      backup/index.php

4、添加manifest属性到html标签中

<html manifest='test.manifest'>

5、开始测试你的离线应用程序^_^

CSS的渲染效率 – 高效的CSS优化

Posted on by
Reply

总结了部分所学、所听、所看、所问的一些CSS写作经验，CSS的渲染效率 – 高效的CSS优化，它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写，不排除会有错漏，欢迎提供更好的意见。

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;

4、不宜过小的背景图片平铺

一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片

5、IE的滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 - button#backButton { }
* 不赞成 - .menu-left #newMenuIcon { }
* 建议用 - #backButton { }
* 建议用 - #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 - treeitem[mailfolder="true"] > treerow > treecell { }
* 建议用 - .treecell-mailfolder { }

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 - treehead treerow treecell { }
* 好一点，但还是不行(参照下一条) - treehead > treerow > treecell { }

10、标签类中不要包含子选择符

不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）
* 不赞成 - treehead > treerow > treecell { }
* 建议用 - .treecell-header { }

11、留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。
* 不赞成 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
* 建议用 - .tree-folderpane-icon[IsImapServer="true"] { }

Link：文章转自jeff-chen

jQuery Tools介绍

Posted on by
1

jQuery Tools是一组基于jQuery构建的用户界面常用组件的集合。通过使用jQueryTools，网站前端开发无疑会变得更加高效。值得注意的是，jQueryTools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。下面是官方主页对它的一个描述： 

jQuery Tools包含如今网站六个最有用的javascript工具。它的一个优点是所有这些工具可以一起使用、扩展、配置和样式化。
最终，通过它你可以制作出众多不同的网站部件，或用个人的方式创造新的应用。（This library contains six of themost useful JavaScript tools available for today’s website. The beautyof this library is that all of these tools can be used together,extended, configured and styled. In the end, you can have hundreds ofdifferent widgets and new personal ways of using the library. ）

下面是jQuery UI包含的工具列表：

  • 选项卡功能(Tabs)
  • 提示工具条功能(ToolTips)
  • 信息滚动功能(Scrollable)
  • 遮罩效果(overlay)
  • 突出效果(expose)
  • Flash嵌入

Link：文章摘自博客园

借助3×4的栅格进行页面布局

Posted on by
Reply 
3×4格形成的矩形，可以划分出892中不同的单元形式。多年来，设计人员使用网格，使得内容的呈现方式不重样——书籍，杂志，屏幕以及其它很多领域都是这样的，同时变化多样的布局也非常美观。 3×4格是一种常见的例子。然而，即使在这个简单的例子中，也能生成令人难以想象的多种形式。

点击查看源图像

Link：更多可参考UCDChina

W3C技术架构介绍

Posted on by
Reply 

图例说明：

W3C技术架构图描绘了一个两层的模型：万维网体系结构（被标注为“One Web”）建立在互联网(Interner)体系结构之上。图中丰富的Web层显示了W3C关心的领域和发展的技术。

Web体系结构被描绘成一系列的层，每一层都建立在另一层之上。从底至顶依次为：

    

  • URI/IRI, HTTP

    • 

  • Web Architectural Principles

    • 

  • XML Infosets; RDF(S) Graphs

    • 

  • XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer, RDF/XML, SPARQL 
    • 



在顶层包含着六个框，分别与W3C主要的活动组相对应：Web Applications, Mobile, Voice, Web Services, Semantic Web, and Privacy。

    

  • "Interaction"（“交互”）框中罗列着：XHTML, SVG, CDF, SMIL, XForms, CSS, 和 WCID.

    • 

  • "Mobile"（“移动”）框中罗列着 XHTML Basic, Mobile SVG, SMIL Mobile, XForms Basic, CSS Mobile, MWI BP.

    • 

  • "Voice"（“语音”）框中罗列着 VoiceXML, SRGS, SSML, CCXML, and EMMA

    • 

  • "Web Services"（“Web服务”）框中罗列着 SOAP, XOP, WSDL, WS-CDL, and WS-A.

    • 

  • "Semantic Web"（“语义的Web”）框中罗列着 OWL, SKOS, and RIF.

    • 

  • "Privacy"（“保密”）框中罗列着 P3P, APPEL, XML Encryption, XML Signature, and XKMS 
    • 



一个橙色的横条把这些领域联系在一起：Web Accessibility（Web可访问性）, Internationalization（国际化）, Mobile Access（移动访问）, Device Independence（设备独立）, and Quality Assurance（质量保证）。

这个例图展示了万维网的基础框架及 W3C 的工作重点 。

URI、HTTP、XML 和 RDF 的基础支持著五个方面的工作。无障碍网页、国际化、设备无关和质量管理等主题已融入了 W3C 的各项技术之中。 

W3C正致力把万维网从最初的设计 (基本的 HTML、URIs 和 HTTP) 转变为未来所需的模式。 W3C 的技术将帮助未来万维网成为信息世界中有高稳定性、可提升和强适应性的基础框架。

Link：文章原文w3c

基于jQuery的上下无缝滚动

Posted on by
Reply

测试结构：

<ul class="line" style='display:inline-block; height:63px; overflow:hidden;'>
    <li style='height:21px;'>这里是文字1</li>
    <li style='height:21px;'>这里是文字2</li>
    <li style='height:21px;'>这里是文字3</li>
    <li style='height:21px;'>这里是文字4</li>
    <li style='height:21px;'>这里是文字5</li>
    <li style='height:21px;'>这里是文字6</li>
</ul>

源代码：

jQuery(function($){
    var _wrap=$('ul.line');//定义滚动区域
    var _h = 21; //li的高度
    var _interval=2000;//定义滚动间隙时间
    var _moving;//需要清除的动画

    _wrap.hover(function(){
        clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
    },function(){
        _moving=setInterval(function(){
            var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
            var _=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)

            _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
                _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
            })
        },_interval)//滚动间隔时间取决于_interval
    }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});

Link：文章转自李涛

让底部内容始终停留在页面的最底部

Posted on by
Reply

结构：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

样式：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

Link：解决方法源自ryanfait

Js中的clientHeight，offsetHeight和scrollHeight等介绍

Posted on by
Reply 

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   (包括边线的宽);
网页可见区域高： document.body.offsetHeight  (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop; 在ie5之后不用它了。应该用document.documentElement.scrollTop;
网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

offsetTop 指元素距离上方或上层控件的位置，整型，单位像素。
offsetLeft 指元素距离左方或上层控件的位置，整型，单位像素。
offsetWidth 指元素控件自身的宽度，整型，单位像素。
offsetHeight 指元素控件自身的高度，整型，单位像素。

Link：文章摘自js_css