Nffish's Blog http://nffish.com 好记性不如烂笔头 Sat, 17 Jul 2010 05:37:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 http://creativecommons.org/licenses/by/2.5/ 后移动时代的 Web 设计 http://feedproxy.google.com/~r/Nffish/~3/vtZDUTGBQo0/461 http://nffish.com/archives/461#comments Sat, 17 Jul 2010 05:37:43 +0000 Nffish http://nffish.com/?p=461

还记得 Wap 吗，现在还有多少人使用 Wap？后移动时代，随着浏览器技术的进步，为移动设备设置特殊站点已经不再必要。作为 Web 设计师，如果你能遵循一些基本的设计与布局原则，你的站点将能被多数移动设备更轻松地访问。本文讲述的是后移动时代的 Web 设计原则。

移动浏览技术现状

当今最受欢迎的手机系统包括 Android，BlackBerry 与 iPhone。虽然这些手机系统中的浏览器都支持 HTML + CSS + JavaScript，但它们仍然存在某些局限。

Flash

Flash

现阶段，用手机访问 Flash 站点，除了一个黑屏幕，什么都不会显示，而且手机也不会提示说无法加载 Flash，因此，Flash 站点应该通过浏览器探测技术，在不支持 Flash 的客户端上输出替代内容。尽管 Flash 在众多平台上都能输出漂亮的内容，但在手机上运行 Flash 就像在 Mac 上运行 Windows 一样，不过，业 界已经出现一些技术来解决这个问题 ，但不要指望太多。

Silverlight

Windows Mobile 7 将支持 Silverlight，那将是唯一一款支持该技术的移动浏览器。不过，既然微软已经向 HTML 5敞开大门，因此，也不要指望微软在移动平台上会为 Silverlight 做多少努力，因此，底线是，不要在你的移动站点中过于依赖 Silverlight。

JavaScript

Javascript

过去5年，移动平台对 JavaScript 的支持势不可挡，其体验已经接近桌面，但不能支撑过于复杂的功能，这里有一个关于这个问题的案例分析 。至 于那些比较老的手机，虽然也支持 JavaScript，但多数都是默认关闭的。当你需要为移动设备编写 JavaScript 的时候，需要对代码进行验 证和检查 ，以免用户的设备崩溃，另外记住，将 JavaScript 脚本放到页面底部，这样，不至于在页面还没加载前就崩溃。

CSS 3

移动平台对 CSS 的支持已经很久了，如今，大量基于 Webkit 开源项目 的手机开始支持 CSS 3，CSS3 拥有更好的视觉体验，支持降级使用，还能加速页面加载，你在使用 CSS3 的时候，只需要注意其中的某些属性在旧的手机上可以降级使用。

设计感与易用性之争

流行的 Web 技术并非都是你的最佳选择，你需要对使用的各种技术进行测试，事实证明，在移动浏览领域，诸如 Lightbox，视频，鼠标盘旋一类的技术存在问题，需要避开，我们将在这一节中对各种 Web 设计元素进行讲述。

Design Considerations and Usability Battles

为什么视频不能播放？

前面提过，不同移动平台对 Flash 和 Silverlight 的支持很不一致。目前，像 Vimeo 及 YouTube’s 一类的站点在移动设备上访问还存在各种问题，YouTube 比 Vimeo 略好一些，而内嵌视频支持目前则好像只限于 Google Android 平台。

移动平台的视频，是通过 HTML5 实现的，然而，到目前为止，HTML5 视频的许可问题仍不明朗 ，不过 Google 一直在这个问题上走在最前面，希望他们能最终使这个问题免于重蹈 DVD 解码器许可的覆辙。

文字缩放

希望你的文字最多使用的是相对位置而不是绝对位置，否则，Android 平台的浏览器会将你页面的文字扔到屏幕之外的某个地方。

在小屏幕上的显示清晰度问题

在手机的小屏幕上看网页，就像你隔着一个房间看电脑屏幕那样，结果是什么看不清晰，你需要将重要的页面元素加深对比度以便用户能看得清楚点。

Lightbox 技术

Lightbox

Lightbox 是最受欢迎的 JavaScript 技术，也是最容易让手机用户抓狂的地方，在很多时候，手机屏幕上的 Lightbox 只显示一个角落，而大部分内容则被扔到屏幕外的某个地方。另外，在某些时候，Lightbox 还让手机的 Web 页面崩溃，导致任何东西都无法点用。这并不意味着你不能使用 Lightbox，诸如登陆框一类的地方还是可以使用（登陆框可以做得比较小一些 – 译者注），但不管怎样，最好同时提供一个传统的登录方式，以免 Lightbox 显示到屏幕之外。

浏览器探测

很多年前， Web 开发与设计者需要借助浏览器探测技术，为不同浏览器，或者不同版本的浏览器输出不同内容，随着 Web 标准的深入人心，为不同浏览器输出不同内容已经不可取。浏览器嗅探可以通过诸如 jQuery 一类的 JavaScript 库轻松实现，还有一些可以嗅探 flash 支持情况的库可以使用，然而现实是，除非你有大量 Flash 应用，否则很少会用到这个，事实上，现在的很多移动浏览器在遇到不支持的内容时会悄然掠过，而不会像 IE6 那样弹一堆错误。

鼠标盘旋

很多站点的导航使用鼠标盘旋并下拉子菜单的方式，然而移动浏览器没有鼠标盘旋一说，虽然有的手机支持这一操作，但和桌面方式有很大的差异。应该避免 将重要的信息放到需要鼠标盘旋才能显示的状态。

下拉菜单导航

Sencha

下拉菜单需要鼠标盘旋才能打开，前面说过，在手机上，这无法实现，另外，下拉菜单的尺寸往往超过手机屏幕尺寸，即时用户打开了下拉菜单，也很有可能 无法完全访问。你应当始终在侧边栏保留子菜单，不管是针对手机站点还是桌面站点。

缓慢的加载速度

手机浏览器加载速度非常慢，你需要压缩自己的数据，甚至使用 CDN 加速网络。在 WordPress 一类的 CMS 中可以启用数据压缩，你可在在这个站点测试 你的数据是否经过了压缩 ，如果你使用静态设计的页面，可以使用 Minify 对你设计的网页代码进行净化。

加载进度提示

Loading

你应当使用加载进度图标，告诉用户现在正在加载，对于手机浏览器这种 Internet 连接不很稳定的情形尤其重要，在一些 Ajax 应用场合，如果不显示加载进度，用户会以为你的站点已经失去反应。

记忆用户的数据

手机用户打字很不方便，应该尽可能使用 Cookie 记忆用户的数据。

侧边栏放在左边还是右边？

应该是右边，因为手机屏幕很小，用户阅读你的网页的时候，如果左边显示侧边栏，他们要看真正的内容，就不得不左右滚动，放在右边，用户就可以直接向 下滚动看具体内容，需要看侧边栏的时候再左右滚动。

小屏幕

早期的 Web 设计师提起当年的 800×600 屏幕就一肚子怨气，好在现在的桌面屏幕都足够大了，然后移动设备的屏幕比这个更小。你所能做的，尽可能不要把网站的 Header 或 Logo 做得太大。

移动站点适合你吗？

很多公司花费大量金钱部署专门的移动站点，事实上，这并不必要，如果你有个电子商务站点，而手机用户存在访问问题，这种情况，也许才值得专门部署一 个移动站点。

单列布局

Single Column

要想让你的站点更好地支持移动浏览器，你或许需要扔掉侧边栏，因为侧边栏对移动用户来说毫无疑义，Facebook 以及 Amazon 一类的站点使用这种方法改善用户体验。

图片缩放

很多基于博客系统的站点都包含移动版，实现更简单的导航，问题是，这些站点同时会像文字那样缩放它们页面上的图片，那些被缩小的图很难看清楚，更甚 的是，你没有办法改变图片的显示尺寸。应当允许用户点击一个图片以显示其完整尺寸版。

简单导航

与其让移动用户像在桌面上那样显示站点中的所有内容，不如只为他们显示最基本的内容，免得到处滚动，YouTube 在这方面做得最好，页首的那些干净，简单的按钮非常好用。

Simple Navigation

广告

去掉侧边栏之后，你的站点中的大部分广告位就没有了，一个不错的方法是将广告放到页尾。

页尾的完整站链接

虽然你拥有一个移动版本的站点，但用户可能希望看到完整的站点内容，多数移动站点的做法是在页尾放上完整版站点的链接。

结论

以上讲述了现代移动 Web 站点设计中的各种问题，下面是创建移动 Web 站点的一些资源和工具：

Tools

原文作者
Ashton Blue

Ashton (Ash) Blue 是 Ash Blue Web 设计公司的创办者，他的公司网站是 www.ashbluewebdesign.com ，Twitter 账户是 http://twitter.com/ashblueWD

本文国际来源：onextrapixel.com Designing For The Modern Day Mobile Market

中文翻译来源：锐商企业CMS 网站内容管理系统 官方网站

相关日志
]]> http://nffish.com/archives/461/feed 0 http://nffish.com/archives/461 腾讯微博邀请数枚 http://feedproxy.google.com/~r/Nffish/~3/RGKb3IYvl_o/459 http://nffish.com/archives/459#comments Mon, 28 Jun 2010 07:59:00 +0000 Nffish http://nffish.com/?p=459

腾讯微博，又是一个twitter的copy

邀请自取

http://t.qq.com/invite/ba3a651a02bebff39c7f

http://t.qq.com/invite/b7a554175c284c778b63

http://t.qq.com/invite/77f8ca4e31eca659282d

http://t.qq.com/invite/8f4f9898bf6358c8ff41

http://t.qq.com/invite/cf072dba79154365bbf1

我的腾讯微博地址:http://t.qq.com/nffishx 欢迎成为我的听众
我的twitter地址:http://twitter.com/nffish 欢迎follow

相关日志
]]> http://nffish.com/archives/459/feed 1 http://nffish.com/archives/459 房产税 http://feedproxy.google.com/~r/Nffish/~3/QB36k-q6rwI/457 http://nffish.com/archives/457#comments Sat, 12 Jun 2010 09:01:35 +0000 Nffish http://nffish.com/?p=457

一个城市里有三个人，甲有5套房，不上班，靠收房租生活；
乙有一套房，上班赚工资；
丙是卖菜的，没有房，租房住。
忽然有天要收房产税了，丙说：“太好了，我没房，收那帮炒房人得税，我全力支持，房价大跌了，我就可以买房了。”；
乙说：“没关系，我只有一套，收那帮炒房人得税，我支持，房价大跌了，我可以再买一套。”；
甲说：“哦，房产税收多少？1%对吧，下个月房租涨5%。”
房租上涨了，丙很郁闷，想换个房子，发 现大家房租都涨了，只好忍。不过也不能吃亏，明天菜价也涨5%，恩，就这么干。
乙和甲去买菜，发现菜价涨了，很郁闷，想换个菜场，发现菜价都涨了，只好少吃点了。
于是乎，生活水平就这样下降了，CPI就这样升高了。

随机日志
]]> http://nffish.com/archives/457/feed 2 http://nffish.com/archives/457 8×8×21 http://feedproxy.google.com/~r/Nffish/~3/EfTHcEtx0cU/455 http://nffish.com/archives/455#comments Fri, 04 Jun 2010 11:44:41 +0000 Nffish http://nffish.com/?p=455

第21个5月35日
foursquare 被G.F.Wed

随机日志
]]> http://nffish.com/archives/455/feed 2 http://nffish.com/archives/455 取消自动挂载windows分区 http://feedproxy.google.com/~r/Nffish/~3/drFGVOg7sXQ/453 http://nffish.com/archives/453#comments Wed, 02 Jun 2010 12:46:39 +0000 Nffish http://nffish.com/?p=453

安装Ubuntu 10.04时自动挂载了一个windows分区，现在觉得这个挂载分区蛮别扭的，所以准备给它取消挂载。但是用unmount取消不了。
所有的挂载信息都存放在fstab里。不想挂载某些分区，把fstab中对应的代码屏蔽/删除了就好了。
下面就是操作步骤：
1.打开fstab
sudo vi /etc/fstab

2.找到类是下面的一行，将其删除或者在前面加“#“注释
UUID=8E93-B1DE /windows vfat utf8,umask=007,gid=46 0 1

3.保存退出

相关日志
]]> http://nffish.com/archives/453/feed 1 http://nffish.com/archives/453 [iPhone开发]完成输入后关闭键盘的方法 http://feedproxy.google.com/~r/Nffish/~3/IH6UYqfcgMA/450 http://nffish.com/archives/450#comments Tue, 18 May 2010 03:16:46 +0000 Nffish http://nffish.com/?p=450

iPhone的键盘是基于软件，而不是物理键盘的，因此需要一些额外的步骤来确保用户在完成输入后关闭键盘。
1.通过点击Done按钮关闭键盘
当用户按下Done按钮式，将触发“did end on exit”事件，我们可以在此时间中加入关闭键盘的操作。
在头文件中加入

-(IBAction)textFieldDoneEditing:(id)sender;

在实现文件中添加

-(IBAction)textFieldDoneEditing:(id)sender
{
[sender resignFirstResponder];
}

在Interface Builder中按command+2 选择文本字段的Did End on Exit事件，拖动到File’s Owner图标，并选择TextFieldDoneEditing。保存，完成。

2.通过触摸背景关闭键盘
这个方法是添加一个不可见的按钮，来激活触摸背景的事件。
在头文件中加入

-(IBAction)backgroundClick:(id)sender;

在实现文件中添加

-(IBAction)backgroundClick:(id)sender {
[nameField resignFirstResponder];
[numberField resignFirstResponder];
}

在Interface Builder 的库拖一个Round Rect Button到View中。拉伸按钮，填充整个视图屏幕。按command+1，将按钮类型改为Custom。按command+2，从Touch Up Inside事件拖到File’s Owner图标并选择backgroundClick:。保存xib文件，完工。

随机日志
]]> http://nffish.com/archives/450/feed 1 http://nffish.com/archives/450 Dropbox不能登录问题 修改hosts方法 http://feedproxy.google.com/~r/Nffish/~3/7bbufPQR9B0/447 http://nffish.com/archives/447#comments Sat, 15 May 2010 02:13:04 +0000 Nffish http://nffish.com/?p=447

最近使用Dropbox的朋友可能有疑问了，为什么一直都显示正在连接。很遗憾这么好的服务被有关部门qj了

在hosts文件用加入一行
174.36.30.71 www.dropbox.com

hosts 文件路径
Windows c:\windows\system32\drivers\etc\hosts
Mac/Linux/iphone: /etc/hosts

温馨提醒：外链dropbox最好使用https方式

没有Dropbox的朋友，可以是使用这个邀请链接注册

随机日志
]]> http://nffish.com/archives/447/feed 1 http://nffish.com/archives/447 Site5 WordPress博客主机合租计划（会员招募中） http://feedproxy.google.com/~r/Nffish/~3/wtnkBnnaLMc/440 http://nffish.com/archives/440#comments Thu, 13 May 2010 06:42:34 +0000 Nffish http://nffish.com/?p=440

主机简介：
1.每个人都独立拥有中英文的cpanel操作管理，完美支持WordPress，并且有SSH帐号。
2.最好是安装WordPress、Drupal程序，垃圾站请绕道。拒绝消耗主机资源比较大的网站，严禁使用dabr和twitter API proxy等代理程序
3.不能发布任何违反中国和美国法律的任何内容，不能发布任何有版权争议，色情和政治敏感的内容。禁止存放mp3、视频文件、软件下载文件。
4.合租的人一起共用一个独立的IP，如果发生主机IP被封，需共同承担换IP的成本。

如果你愿意遵守上面条款，欢迎您加入。

对于新手我们提供免费的Wordpress安装服务。

空间规格
空间:600M
月流量:8GB (一般博客用户够用了,如果不够的话可以酌情增加到10G)
独立Cpanel控制面板
FTP账号:10个
MYSQL数据库:3个
子域名:10个
域名绑定:3个
停靠域名:3个

探针：http://playapple.com/iProber.php
测试网站 http://playapple.com

价格:
每份90元/年
淘宝链接

支付方式：
支付宝：nffish@gmail.com
Paypal：nffish@gmail.com （个人用户，仅支持paypal余额付款）
其它支付方式，请与我们联系。

我的联系方式：
Email/QQ/gtalk : nffish@gmail.com

QQ群:15976544

暂时就这些,有意见或建议请与我联系

随机日志
]]> http://nffish.com/archives/440/feed 4 http://nffish.com/archives/440 It’s time for a change http://feedproxy.google.com/~r/Nffish/~3/u5dDy3lMQig/438 http://nffish.com/archives/438#comments Fri, 30 Apr 2010 05:08:18 +0000 Nffish http://nffish.com/?p=438

It’s time for a change. Your computer can be better – It can be faster, fun and easier to use.
这是Ubuntu 10.04 LTS的标语。
不必多说赶快下载吧
不知道Ubuntu是什么？你out了!
Ubuntu 是一个由全球化的专业开发团队建造的操作系统。它包含了所有您需要的应用程序：浏览器、Office 套件、多媒体程序、即时消息等。

Ubuntu 将永远免费，连同定期发布的企业版和安全更新
Ubuntu 由 Canonical 公司和世界各地数百家公司提供完整的商业支持
Ubuntu 有自由软件社区提供的最好的翻译和易用性
Ubuntu所有核心应用程序都是自由和开源的。我们希望你使用自由和开源软件，改善它和传递它。

英文官方
UbuntuChina

相关日志
]]> http://nffish.com/archives/438/feed 1 http://nffish.com/archives/438 反转数组 Reverse Array http://feedproxy.google.com/~r/Nffish/~3/QPnCNXvl4Ak/431 http://nffish.com/archives/431#comments Thu, 29 Apr 2010 07:21:57 +0000 Nffish http://nffish.com/?p=431

补习一下基础算法；
把{ 1, 2, 3, 4, 5 } 输出为 { 5 ,4 ,3 ,2 ,1 } ；
原理:把第一个数和最后一个数交换，第二个和最后第二个交换，以此类推，也就是（第i个索引）和（数组长度-1-i）交换。交换的次数为：数组长度/2

  1. int[] arr = { 1, 2, 3, 4, 5 };
  2.         int len = arr.length;
  3.         for (int i = 0; i < len / 2; i++) {
  4.             //三步交换法
  5.             int t;
  6.             t = arr[i];
  7.             arr[i] = arr[len - i - 1];
  8.             arr[len - i - 1] = t;
  9.         }
  10.         for (int i = 0; i < len; i++) {
  11.             System.out.println(arr[i]);
  12.         }
相关日志
]]> http://nffish.com/archives/431/feed 0 http://nffish.com/archives/431