IT牛人博客聚合

Phonegap相关

1. 隐藏顶部的状态栏

         在xxx-Info.plist中新增一项属性："Status bar is initially hidden" = YES；此外，还可以增加其他的属性，例如Launch image等。

2. 用户滑动Webview时，正常情况下会超出边界然后弹回来，也就是Bounce，可以通过以下方式禁止这种行为：

在AppDelegate.m中的webViewDidFinishLoad方法中添加：

    for (id subview in

查看全文: http://www.udpwork.com/item/6993.html

        去年曾对Phonegap做过一次调研，当时还是1.1版本，印象也一般。对他的性能以及真实的跨平台能力都不太确定。今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目，项目至今已经完成了一期的App Store提交，所以也正好能抽时间来小结一下。一个月左右的开发过程让我对这种开发模式有了更深的认识，这对于前端开发人员而言绝对是一个大的机会。Phonegap Native API + Plugin基本能访问移动设备绝大部分本地功能，除此之外就是HTML5了，迁移成本非常的低，而开发效率也是很高的。

  

查看全文: http://www.udpwork.com/item/6992.html

开发WebApp时，遇到一个问题：

如果把页面配置到服务器上，当服务器挂掉或者用户离线的时候，那这个App也就没法工作了。

而当我把页面打包进App里面，又有一个新问题，更新不方便。每次更新的时候都要重新提交。

部门就此组织了一次《application cache》的相关讨论。使用离线存储，来解决上述问题：

view-source:http://uicss.cn/test/coolcode.html

这是一个打包进App的应用地址，阅读源代码可以看到，html标记上给了一个manifest配置文件。里面列出了需要高速缓存的、用于离线访问的文件。在支持mime类型为.manifest的服务器上，它能够列出浏览器应该下载和保

查看全文: http://www.udpwork.com/item/6959.html

最近看到了js1k网站上的比赛，突然很有兴趣参加一把，于是写了一个自己的作品Save Messed Up Love放了上去。

所有提交的作品必须用小于1024B的javascript实现，我花了一些精力用一些变态技巧优化用工具精简过的代码体积，成功将代码从原来的1271B减到988B，空出的代码让我有空间增加一些额外的功能。在这里给大家分享一下这些变态技巧，注意，千万不要在实际项目中使用。

首先介绍一些不变态的技巧，算是入门级的内容，其要点是时间换空间，这是与jslint的原则背道而驰的，把下面每个点都反过来看可能就是正确的编程方法了……

尽量使用with

javascript的with关键字是神器，详见下面的代码：

//

查看全文: http://www.udpwork.com/item/6903.html

RT! 菜汤要写活动策划，里面有一个小节目，我出的鬼主意，也用到了这个小网页作为工具。

一开始不知道用啥工具写比较好，我会点VB，但是又不能在Linux写。.Net先排除了，发布了还要别人安装框架，更麻烦。Python嘛，对它的图形处理还不是很熟悉，写起来也不怎么容易。选什么GUI库也是一个难题。

所以，最后选择了一窍不通HTML5。用网页写比较容易跨平台，所以我在Linux下写好，别人也可以用她的Win7来用了。HTML5的入门也不难，花了一个小时看了一篇教程，就开始写了（因为我只用到Canvas）。

我的第一个HTML5写的网页哦。

展示地址：

http://xiaoxia.org/upfiles/2012/02/in

查看全文: http://www.udpwork.com/item/6785.html

一、什么是 Placeholder ？

在 HTML5 的 input 标签中新增了一个 placeholder 属性，作用是在输入框中默认显示一些提示文字，以创造更好的用户体验。

使用方法：

<input type="text" placeholder="Username" />

查看 Demo

该特性仅被现代浏览器支持，在旧版 IE 下我们可以使用 javascript 来模拟实现。

二、Placeholder 的 js 实现

var doc = document,
inputs = doc.getElementsByTagName('input')

查看全文: http://www.udpwork.com/item/6947.html

又好久没写博客，我必须凑数做到每个月至少一篇，不然破坏了这几年的传统感觉不太好。

最近HTML5太热门了，在微博上老是看到HTML5又能干嘛干嘛，又做出什么炫酷效果了，然后又跟FLASH对比，FLASH必被淘汰，这种论调出现得太频繁了，感觉挺无聊。用炫酷效果来宣传HTML5实在不是明智之举，现在HTML5能做到的任何效果除了WEBGL的硬件加速其他的5年前的FLASH就已经能很好地做到，而且性能更好得多，随便搜一下FLASH酷站，看看里面的交互，哪个不比目前纯WEB的方式强，感觉WEB使人机交互退步了10年。当然FLASH的优势是交互和效果强，HTML的优势是对内容处理能力强，现在互联网全是内容，一切以服务内容为主，强的交互和设计

查看全文: http://www.udpwork.com/item/5919.html

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。

关于通知的基础知识可以参考以下文档：

W3C标准:http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html

使用教程:http://www.html5rocks.com/en/tutorials/notifications/quick/

本文主要记录通知功能在Web IM中实际使用时的一些经验。

在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大

查看全文: http://www.udpwork.com/item/5605.html

在实际上项目当中，经常需要使用短轮询(每隔一定时间就向服务器发送一次请求，请求通常会立即返回)和长轮询(每次请求服务器会Hold一段时间直到有新数据或者超时，客户端收到数据后会立即进行下一次请求）来从服务器拉取数据，然后动态的更新页面。随着功能的增加，一个页面中往往存在不止一个这样的轮询请求，而且在用户开启多个Tab页面时，总得请求数会翻倍。而“请求同步”指的是在以上场景中，即使是开启多个Tab也只有一个Tab页面维持轮询连接，一旦数据返回后，就将数据同步到其他无连接的页面，最大程度的减少请求。实现的思路也很简单，先解决由谁来进行请求的问题，之后基于本地存储将数据进行同步即可。具体的实现则有不少细节需要注意的，以下详细阐明。

一、

查看全文: http://www.udpwork.com/item/5591.html

本文介绍Tab之间的操作同步的实现，所谓操作同步是指将用户在某个Tab窗口中的操作同步到所有其他同一站点得Tab中。例如IM窗口的操作（打开、最大化、最小化、关闭、设置等），由于很多用户会在多个Tab之间切换，而IM在每个页面中都存在，因此对于数据同步的要求是比较高的，以前的做法是使用服务器方式来同步，即所有操作都向服务器发请求，然后广播，Tab收到消息后再响应。缺点是比较浪费资源，另外延时也比较严重。

实现

在具体的实现上，只是给封装的Storage添加了一个sync接口，格式如下：

/*
跨页面同步指定的函数
@param {function} func 需要同步执行的函数(不允许重名，函数参数必须为string类型

查看全文: http://www.udpwork.com/item/5589.html

很早之前调研过HTML5的本地存储-《DOM Storage全解析》，大致上对localStorage、sessionStorage等API做了下了解，但是一直没有机会真正的在项目中使用。终于这次借重构Web IM的机会，对本地存储做了更深入的使用，除了基本的API使用之外还在次基础上封装了一些应用层的库，例如Tab之间的操作同步、Tab之间的请求同步等。本文主要做一个阶段性的经验总结。

一、localStorge onstorage事件的兼容性

1. 触发情况

IE8/IE9/Firefox3.6: 在页面A中注册onstorage事件，修改localStorage时，A页面和其他页面都能收到onstorage事件。因此，对

查看全文: http://www.udpwork.com/item/5588.html

随着XHTML的逐渐式微，Chrome，Safari，FireFox，Opera等现代浏览器正在积极完善HTML5实现，IE9也加入到标准的行列并将在今年上半年发布正式版，HTML5时代来临了。

在各种HTML5特性中，最吸引人的莫过于canvas标签，其提供的绘图API将颠覆以往web表现力匮乏的形象。随着浏览器对canvas的普遍支持，利用canvas实现的web应用会出现爆发性的增长。

本人尝试了使用canvas开发2d卷轴游戏，与大家分享。

本文将不介绍canvas2d API的用法，如果想了解canvas2d API请访问：https://developer.mozilla.org/cn/Canvas_tutoria

查看全文: http://www.udpwork.com/item/5339.html

HTML5 canvas让程序员自由的绘制想要的图形和动画，使得纯粹基于HTML/Javascript/CSS的游戏铺平了道路。只不过canvas最初并非为游戏而设计，而且除了绘图以外，做游戏还有不少其他事情要考虑，例如鼠标键盘事件、图层、动画等。为了方便程序员开发游戏，游戏框架/引擎陆续被开发出来，gin就是其中之一。

Project home: https://github.com/huandu/gin

Author: Huan Du (blog, twitter)

Samples: https://github.com/huandu/gin-samples

Live demo: simple sample mouse

查看全文: http://www.udpwork.com/item/4234.html

给iquery加了跟jquery差不多的动画接口animate，不过实现上是通过CSS3的transition。

效果点这里 (桌面浏览器只支持webkit内核，如chrome/safari)

iQuery源码

原理

研究了下CSS3的动画Transition，我想如果iphone上要做动画效果的话应该由CSS3实现，不再是传统用js间隔一定时间不断更改数值这样的方式，系统内置的动画实现方式毫无疑性能会高。

CSS3有两个实现动画的方式，Transitions和Animations，Animations自定义程度比较高，但理解起来和用起来会有点别扭，实际上普通动画效果只需要用Transitions就行了，Transitio

查看全文: http://www.udpwork.com/item/2454.html

HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化。都说html5+javascript是flash或者silverlight这类客户端执行环境的杀手，html5推出的最炫的一个功能是标签(cavans)，还有视频(video)和音频( audio)等。现在页面版的都还在用flash，flash对于手机来说，速度和资源消耗都成问题。但是利用html5，可以顺利地在iPhone等不支持Flash的平台上将swf显示了出来，尽管并不是所有Flash都能放，但足以证明javascript＋SVG的威力了吧。利用html5不但能够更好的完善微博的现有功能，还能结合其他的一些功能，进一

查看全文: http://www.udpwork.com/item/2154.html

图片上传在当今的Web应用中是一个非常常用的功能，如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实现，但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过，随着HTML5 File API的诞生这一状况终于有了改观，本文将介绍如何使用HTML5 File API快速的实现图片预览功能。

浏览器支持情况

本文实现的功能在以下浏览器中经过测试：IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中Firefox3.6与Chrome6.0已经实现了该标准（虽然并没有完全遵循标准），其他浏览器均未实现。关于具体的兼容性问题，后文将详细说明。

文件选择与

查看全文: http://www.udpwork.com/item/5205.html