∪∩deniable Design

背景：http://www.travelog.me/ 上的背景图片是高斯模糊的效果，而他们用的库就是Pixastic。 Pixastic 是一个强大的图片处理JavaScript库，可以让你轻易的对图片执行各种处理，无论是滤镜还是各神奇的效果只需要几行JS代码即可以做到。 仅需要浏览器支持Canvas。 阅读全文 http://www.iunbug.com/2012/06/07/pixastic%E5%BC%BA%E5%A4%A7%E7%9A%84%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86js%E5%BA%93%EF%BC%8C%E6%94%AF%E6%8C%81%E6%BB%A4%E9%95%9C%E7%AD%89%E8%B6%85%E8%BF%8728%E7%A7%8D%E5%A4%84%E7%90%86%E6%95%88/

到目前，本系列文章集中讲了File对象能在用户参与下对操作文件的产生的积极效果。事实上File对象是Blob的特殊类型。即大块的二进制数据，File对象的大水的类型等属性都继承自Blob。 大多时候， Blob 的 File是可以同时使用的。例如，可以用FileReader从Blob中读取数据，可以通过URL.createObjectURL()来创建一个URL对象。 阅读全文 http://www.iunbug.com/2012/06/06/%E8%AF%91javascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C5-bolb%E7%B1%BB%E5%9E%8B%EF%BC%88%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%A4%A7%E5%AF%B9%E8%B1%A1%EF%BC%89/

从这系列的以上文章中，你已经学到以传统的方式使用文件。你可以上传文件到服务器，可以从硬盘中读取文件。这些都是最普遍的操作文件的方式。然而，还有一个全新的方式让你能简化任务，就是使用 URL 对象。 何为 URL对象? URL对象是硬盘上指向文件的URL。例如，你想在页面上显示用户系统里的一张图片，服务器不必知道对应文件，当然也不用上传它。你只需在页面中加载它即可。是的，前面的文章中提到，获取文件的引用，读取 data URI，然后赋值给一个 元素。不过细想其中多浪费：图片原本就在硬盘上，还要转换成另一个格式再用之？如果你创建一个URL对象，你可以直接赋值给 元素而后直接加载文件。 阅读全文 http://www.iunbug.com/2012/06/05/%E8%AF%91file-api%E4%B9%8Bjavascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C4-url%E5%AF%B9%E8%B1%A1/

在上篇文章中,我介绍了在JavaScript操作文件，重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。 FileReader FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。 FileReader 可以返回几种格式来文件数据的格式， 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕： readAsText() – 返回文件内容的纯文本格式 readAsBinaryString() –返回文件内容的二进制格式 (不推荐– 推荐使用 readAsArrayBuffer()) readAsArrayBuffer() – 返回文件内容的 ArrayBuffer 格式(图片文件推荐使用) readAsDataURL() – 返回文件内容的 data URL格式 阅读全文 http://www.iunbug.com/2012/06/04/%E8%AF%91javascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C2-filereader/

浏览器通过FileReader 对象从文件中读取数据比较好理解。在上篇文章中， 你学到如何轻松的使用 FileReader 的各种格式从文件中读取数据。FileReader 在很多方面与 XMLHttpRequest 非常相似。 进度事件 进度事件虽如此普遍事实上它们是在另外的规范中提出的[1]。 这些事件是专门为展示数据的传输过程而设计的。比如使用FileReader 从服务器或者硬盘中读数据的过程。 六个进度事件如下： loadstart – 表明进度开始。这是第一个触发的事件。 progress – 数据加载过程中不停觖发. error – 数据加载失败触发. abort –当调用 abort()来取消数据加载时触发 (XMLHttpRequest和FileReader通用). load – 全部数据成功加载完毕触发。 loadend – 加载结束时触发，无论是error, abort, 或者 load都触发。 阅读全文 http://www.iunbug.com/2012/06/05/%E8%AF%91html5%E4%B9%8Bjavascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C3-%E8%BF%9B%E5%BA%A6%E4%BA%8B%E4%BB%B6%E5%92%8C%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86/

多年前,我在Goolge面试中被问及哪些改变会能使我得以提高Web的用户体验的。 在我的心目中的第一位是有不用 控件实现文件操作的办法。尽管Web的多数部分已经改变，但操作文件还是最原始落后的方式。终于，HTML5新的API到来了，在较新的桌面浏览器中我们有更多操作文件的方式了 (iOS 暂时不支持)。 文件类型 文件类型定义在 File API[1] 的规范里，并且是File的抽象. 每个File实例都有以下属性: name – 文件名 size – 文件的大小字节数 type – 文件的MIME type 一个File对象给出了一个文件的基本信息而无需直接访问文件内容。这点很重要，因为读取文件需要进行磁盘操作，文件的大小直接影响了读取过程消耗的总时间。一个File对象实是一个文件的引用，而获取文件的内容则是另一个完全不同的过程。 阅读全文 http://www.iunbug.com/2012/06/04/%E3%80%90%E8%AF%91%E3%80%91javascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C%EF%BC%881%EF%BC%89-%E5%9F%BA%E7%A1%80/

背景概述

Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是Google的Fixed position的最佳实践之一. iPad上的基于两栏的Gmail也运用了这种实现机制.

桌面浏览器本身就支持 position: fixed. 但 mobile Safari在iOS5之前不支持, 我们只能定制一个模拟滚动的工具来替代原生的滚动.

本教程就是在Mobile Web App上如何实现position: fixed的,就以下几点来讲:

• 如何布局
• 通过transforms实现滚动的动画效果
• 通过 transitions实现滚动的惯性冲力
• 触摸屏幕时中止滚动,即在打断 transitions的执行

跳转看详情

http://www.iunbug.com/2012/06/03/%E7%BF%BB%E8%AF%91%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%BC%96%E5%86%99ios%E4%B8%8Amobile-web-app%E5%AE%9E%E7%8E%B0fixed-position%E5%92%8C%E6%A8%A1%E6%8B%9F%E6%BB%9A%E5%8A%A8/