IPhone WebApp 设计开发工具与资源

IPhone 的 App 固然有很多吸引人的地方,然而Web毕竟是大势所趋,已经有越来越多应用用 WebApp 的方式来实现了。所谓 WebApp,说白了就是Web应用而已,只不过是专门对手机尤其是IPhone的特点来定制界面,更有甚者,把界面做的跟本地IPhone App一摸一样,以至于我们都难以区分它是一个App还是一个Web。

优秀的WebApp

先来看看各种漂亮的WebApp,除了用IPhone上的safari里面的默认书签,进到IPhone 的 WebApp 列表http://www.apple.com/webapps/, 还有不少地方能看到WebApp的展示,如http://cssiphone.com/ 汇集了各种优秀的IPhone站点,这些优秀的CSS设计可以给你不少灵感

IPhone 设计素材

WebApp开发框架

IPhone App第三方库

其他IPhone资源站点

为iPhone优化网页的技巧

为了使得网页看上去更像native的程序,我们需要对网页进行一些优化

本文包含一些小的技巧:
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置

为iPhone优化网页,最需要了解的应该是下面这个属性
viewport: 可见窗口

可见窗口在iPhone Safari上和桌面Safari略有不同,iPhone上默认没有滚动条,默认的实际的可见大小在竖屏状态下,如下图是320*356,地址栏占据了60像素的高度,稍后我们有办法将其隐藏,得以使用这宝贵的60像素。

Continue reading →

解剖Twitter 【1】万事开头易

时常听到“浮躁”这个词,批评现代人不求甚解,缺乏严谨踏实的作风。这种批评有狭隘之嫌。每代人所处的环境不同,面临的问题不同,所以逐渐养成一种风气,去适应新的环境,解决新的问题。

几百年前,人们读长篇小说,看歌剧,听交响乐。到了二十世纪,大家读杂志报纸,看电影电视,听流行歌曲。信息时代,人们上网,读博客,看视频。在这些表象的背后,促成这些风气进化的,是信息的产量与传播速度的激增。面对海量而且迅速更新的信息,人人捧读红楼梦,一唱三咏的局面是难以想象的。取而代之的,是要求信息的篇幅简短,而重点突出。

随着信息爆炸的加剧,微博客网站Twitter横空出世了。用横空出世这个词来形容Twitter的成长,并不夸张。从2006年5月Twitter上线,到2007年12月,一年半的时间里,Twitter用户数从0增长到6.6万。又过了一年,2008年12月,Twitter的用户数达到5百万。[1]

Twitter用户数的急剧攀升,与几次重大事件有关,2007年3月美国SXSW音乐节,2008年11月印度孟买的恐怖事件,2009年1月奥巴马总统就职,2009年6月伊朗选举危机等等。重大事件的报导,特点是读者多,更新快。所以,Twitter网站的成功,先决条件是能够同时给千万用户提供服务,而且提供服务的速度要快。 [2,3,4]

有观点认为,Twitter的业务逻辑简单,所以竞争门槛低。前半句正确,但是后半句有商榷余地。Twitter的竞争力,离不开严谨的系统架构设计。

Continue reading →

紧追iPad Windows Phone 7平板机概念设计现身

似乎苹果与微软两家公司的众多硬件产品均有重合现象出现,无论是iPod、iPhone,现在苹果平板机iPad受到了消费者的欢迎,微软会不会也推出一款平板电脑产品呢?来自国外媒体报道,近日有设计师为微软设计出一款平板机概念产品。

这款平板机拥有8寸的触摸屏,配有一个可翻转的键盘,既能当做键盘使用又能当做支架,这个键盘还支持模拟操纵杆。屏幕上方左边和右边设计有两个摄像头,能达到3D摄像的效果,让用户尝试3D视频聊天。

webpage_02

与iPad安装iPhone OS一样的是,这款平板机将安装微软最新的Windows Phone 7手机操作系统,不知道微软会不会真的推出这样的产品。

微软最新技术演示:云计算与自然用户界面

Windows Phone 7 SDK 放出,系统支持较广泛的视频格式

MIX10

刚刚开幕的 MIX 大会上,微软出人意料地直接发布了 Windows Phone 7 SDK,包括以下内容:

  • Microsoft Visual Studio 2010 Express for Windows Phone
  • Windows Phone 7 Series add-in to use with Visual Studio 2010 RC
  • XNA Game Studio 4.0
  • Windows Phone 7 Series Emulator for application testing
  • Expression Blend for Windows Phone Community Technology Preview

现在已经下载(发布会视频和 SDK 下载地址)。

支持开发者调用的部分功能:

  • 重力加速器
  • 微软的定位服务
  • Microsoft Notification Servic,类似 iPhone 的推送通知
  • 视频支持硬件加速和 DRM 数字版权保护
  • IIS Smooth Streaming 视频流
  • 多点触摸
  • 相机和麦克风

较广泛的视频格式

MSDN Library 也新增了 Windows Phone 7 开发内容,其中的多媒体编码支持信息和终端用户息息相关,除了微软自家的 WMA/WMV、已成新一代智能手机标准的 H.264 以外,Windows Phone 7 还支持 Divx 编码和 avi 封装。虽然没有 N900 那么强大,但比起 iPhone、Android、webOS 还是方便了很多。

视频编码 视频封装
WMV (VC-1) – Simple Profile / Main Profile / Advanced Profile ASF (WMV)
WMV v9 ASF (WMV)
MPEG-4 Part 2 – Simple Profile 3GP, 3G2, MP4, AVI
MPEG-4 Part 2 – Advanced Simple Profile AVI, MP4
DivX 4.x/5.x/6.x AVI
MPEG-4 Part 10 (MPEG-4 AVC, H.264) – Baseline Profile/Main Profile/High Profile 3GP, 3G2, MP4, M4V
H.263 3GP, 3G2

浏览器缓存机制

文章转自: http://harry.javaeye.com/blog/605749

Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。

cache-control 定义是:Cache-Control = “Cache-Control” “:” cache-directive。表 1 展示了适用的值。

表 1. 常用 cache-directive 值
Cache-directive 说明
public 所有内容都将被缓存
private 内容只缓存到私有缓存中
no-cache 所有内容都不会被缓存
no-store 所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation 如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric) 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

表 2 表明在不同的情形下,浏览器是将请求重新发送到服务器还是使用缓存的内容。

Continue reading →

iPhone的Push(推送通知)功能原理浅析

文章转载自:http://xiaolife.com/wordpress/an-introduce-to-iphone-push/

QQ发布了3.3.0,主要增加了对iPhone Push功能的支持。但是,由于blacksn0w解锁软件的缺陷,用其解锁激活的iPhone无不出现了Push的缺陷。鉴于国内许多人对iPhone 的Push功能的误解,并导致很多匪夷所思的言论,晓晓决定写一篇文章,对iPhone的Push功能,进行一次科普,顺便为各位分析下目前存在的几种补丁的原理。

敬告小白:本文理论内容来自iPhone官方参考文件,涉及破解的内容来自dev team和ih8sn0w。如果你认为你对iPhone的理解比Apple还要正确,请直接向Apple指出文档中的错误之处。本人无责任翻译概括。
注意:blackra1n越狱本身并不会导致不能Push的缺陷,导致缺陷的是用于解锁的blacksn0w。如果你想争论,请先阅读完本篇文章,再自己好好想想。

第一部分:Push原理

(以下绝大多数内容参考自、图片来自iPhone OS Reference Library)

机制简介

Push的工作机制可以简单的概括为下图

Push基本原理

图中,

  • Provider是指某个iPhone软件的Push服务器。

Continue reading →

关于Fireworks 和Photoshop两者之间图片优化的比较

原创地址:http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
具体不翻译细节,本人英文一般凑合着看,对于英文稍微鸟一点,技术鸟一点的同学们简单解释一下
,另外,应该说我不是在翻译这篇文章,而是共同探讨,加入了很多我自己的想法,有很多注解
Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的,无论做网页设计还是图片优化都是如此,但作者经实验实际发现fireworks在图片优化上有很好的性能

Continue reading →

css Nuggets

Css Nuggets 是一个CSS3指导的趣味性的ppt,建议前端开发人士学习研究。