博客园_mrfangzheng

苹果(iOS), Google(Android)和微软(Windows Phone)之比较

2012-02-28T02:20:00Z

苹果(iOS), Google(Android)和微软(Windows Phone)之比较

苹果(iOS)

优势:
苹果无疑是智能手机和平板电脑的领导者和霸主, 其独特的优势在于:
1.非常有艺术感的UI设计
2.更难得的是, 还拥有极佳的UI性能
第1点比较容易被抄袭, 但第2点就很难被拷贝了.
我们知道, 苹果大量使用的UI元素如圆角, 半透明, 渐变, 模糊, 特别是动画, 对软件的渲染性能要求是非常高的.
很多山寨机, 能够山寨iPhone的外形和界面, 却怎么也山寨不了那种流畅的感觉. (微软的XP也达不到, Win7接近了.)
这并不是偶然, 要知道苹果在UI上的花的时间已经超过了20年了.

劣势:
1.价格昂贵
国内5000左右的价格有点偏贵, 2000-3000的android手机在这点上有明显的优势.

2.技术封闭
尽管和自家的i系列集成不错, 但和市场占有率最大的PC交互不是很好.
某种技术能否使用, 苹果一家说了算.

Google(Android)

优势:
1.品种和价格
最大的优势无疑是品种的多样性和较低的价格.
不同厂商的手机有着多种的外观和尺寸, 不同人可以有不同的选择.
低廉的价格也会吸引很多普通消费者.

2.技术开放.
相对iOS, 开发Android程序的限制很少.

劣势:
1.UI性能不足
软件UI流畅度不如iOS, 即使硬件配置很高. 这是最大的劣势, 和iOS相比, Android的动画卡得明显.

微软(Windows Phone)

优势
1.和PC会有很好的集成
毕竟很多事情在PC上比较方便, 如果手机, 平板和PC之间能够很好的共享和交互, 这是非常大的优势.

2.技术实力雄厚
UI的性能和iOS会很接近. 微软的DirectX技术应该不差.
开发工具(Visual Studio)和支持(MSDN)是最好的.

劣势
1.Metro的不确定性
Metro风格独特, 能否被市场接受很难确定.

本文链接

设计的几个总结

2011-11-28T09:49:00Z

名词化 : 名词容易管理

分类, 列表, 编辑
添加, 删除; 可用, 禁止
开始, 停止, 继续
复制, 粘帖, 发送
查看状态
Undo, 回滚

范围 Scope

哪些在范围内, 哪些在范围外

共享/私用
数据空间
性能: IO, 集合(大量元素)

如何同步集合?

本文链接

任何成功不能只靠自己一个人

2011-11-28T07:15:00Z

一个人再怎么聪明和努力, 也赶不上一群人.

所以, 能够成功的人都善于团结一群人, 说服他们向着一个目标, 并激发他们的想象力, 创造力, 热情和干劲.

本文链接

不要追求完美, 要能够忍受不是致命的错误

2011-11-28T07:07:00Z

不要追求完美, 要能够忍受不是致命的错误

人类自身以及人类社会都是不完美的. 任何人都会说错话, 做错事; 人性有贪婪, 懒惰等阴暗的因素; 任何社会也都会有犯罪, 阴暗面.
关键看正面和负面的加权比(数学期望), 不是简单的概率比.
然而要特别注意那些概率小但是非常致命的事件

本文链接

jQuery selectors

2011-11-05T12:42:00Z

jQuery Selectors and Attribute Selectors
Selector	Example	Description
List accurate as of jQuery 1.3
*	$(‘*’);	This selector is a wild card method and will select all elements in a document.
#id	$(‘#id’);	This selector selects an element with the given ID.
.class	$(‘.class’)	The class selector will gather all elements in the document with the given class name
element	$(‘element’)	This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc.
a, b, c. … n	$(‘th, td, .class, #id’)	This method can use multiple selection patterns to collect elements.
parent child	$(‘li a’)	This will select all “a” elements that are a descendant of “li”
a > b	$(‘table > tr’);	This will select all b elements which are a child element of a or in our example all tr elements in a table or tables.
a + b	$(‘li + a’);	This will select all “a” elements that are an immediate descendant of “li” in our example.
a ~ b	$(‘p ~ ul’);	This selector will select all “ul” elements that are a sibling of “p”
:first	$(‘ul li:first’);	Returns the first element in a result set
:first-child	$(‘ul li:first-child’);	Returns the first child element of the parent element.
:last	$(‘ul li:last’);	Returns the last element in a result set
:last-child	$(‘ul li:last-child’);	Returns the last child element of the parent element.
nly-child	$(‘div p:only-child’);	Returns elements which are the only child of the parent element.
:not(a)	$(‘input:not(:checked)’);	Returns all elements that are not “a” on in our example all input elements that are not checked
:has(a)	$(‘div:has(p)’);	Returns all elements with a descendant that matches a in out example a “div” that contains a “p”.
dd	$(‘ul li:odd’);	Returns all odd elements in a result set (zero based)
:even	$(‘ul li:even’);	Returns all even elements in a result set (zero based)
:eq(n)	$(‘ul li:eq(n)’);	Returns a numbered element identified by n (zero based)
:gt(n)	$(‘ul li:gt(n)’);	Returns all elements in a result set greater than n (zero based)
:lt(n)	$(‘ul li:lt(n)’);	Returns all elements in a result set less than n (zero based)
:nth-child(n)	$(‘ul li:nth-child(n)’);	Returns the nth child in a result set (one based)
:nth-child(odd)	$(‘ul li:nth-child(odd)’);	Returns all odd numbered elements in a result set (one based)
:nth-child(even)	$(‘ul li:nth-child(even)’);	Returns all even numbered elements in a result set (one based)
:nth-child(formula)	$(‘ul li:nth-child(3n)’);	Returns every nth child in a result set. In our example every third child (one based)
:header	$(‘:header’);	Returns all heading elements e.g. h1, h2, etc.
:animated	$(‘ul:animated’);	Returns elements with an animation currently in progress
:contains(text)	$(‘:contains(hello)’);	Returns all elements containing the passed string
:empty	$(‘:empty’);	Returns all elements that contain no child nodes
:parent	$(‘li:parent’);	Returns all elements that a parent nodes to any other DOM element including text nodes.
:hidden	$(‘ul:hidden’);	Returns all hidden elements that are hidden with CSS or input fields of the type “hidden”
:visible	$(‘ul:visible’);	Returns all visible elements
[attribute]	$(‘[href]‘);	Returns all elements that contain the passed attribute in our example any element with a “href” attribute
[attribute=value]	$(‘[rel=external]‘);	Returns all elements that the passed attribute value is equal to the passed value. In our example ant element with a “rel” attribute equal to “external”
['attribute!=value']	$(‘[rel!=external]‘);	Returns all elements that the passed attribute value is not equal to the passed value. In our example ant element with a “rel” attribute that is not equal to “external”
[attribute!=value]	$(‘[class^=open]‘);	Returns all elements that the passed attribute value start with the passed value. In our example any element thats “class” attribute value begins with “open”
[attribute$=value]	$(‘[id$=-wrapper]‘);	Returns all elements that the passed attribute value ends with the passed value. In our example any element whos “id” ends with “-wrapper”
[attribute*=value]	$(‘[class*=offer]‘);	Returns all elements that the passed attribute value contains the passed value. In our example any element whos “class” contains the string “offer”
:input	$(‘:input’);	Returns only input elements of the tag name input, select, textarea and button
:text	$(‘:text’);	Returns only input elements of the type “text”
:password	$(‘:password’);	Returns only input elements of the type “password”
:radio	$(‘:radio’);	Returns only input elements of the type “radio”
:checkbox	$(‘:checkbox’);	Returns only input elements of the type “checkbox”
:submit	$(‘:submit’);	Returns only input elements of the type “submit”
:image	$(‘:image’);	Returns only input elements of the type “image”
:reset	$(‘:reset’);	Returns only input elements of the type “reset”
:file	$(‘:file’);	Returns only input elements of the type “file”
:button	$(‘:button’);	Returns only input elements of the type “button”
:enabled	$(‘:enabled’);	Returns all enabled input elements
:selected	$(‘:selected’);	Returns the selected element in a select list.
:disabled	$(‘:disabled’);	Returns disabled input elements
:checked	$(‘:checked’);	Returns checked input elements of the type radio or checkbox.

本文链接

CSS position: 一张图搞定absolute和relative

2011-09-23T07:51:00Z

红色表示 absolute块
- 父容器必须是relative, 否则这些块就以整个网页为参照物
- 定位和比例都是以参照物(父容器)计算, 比如: 100%指的是父容器的尺寸
- absolute的体积不计算到父容器中
蓝色表示 relative块
- 参照物为自身
- 占位不变(如图: 蓝色div和随后的绿色div之间有空隙, 后者仍用前者定位之前的所占位置计算)
- 体积计算到父容器中
修正了一个IE6的bug (container要加上 'zoom:1;')

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout Example</title>
    <style>
        #divContainer
        {
            border: solid red 2px; color: Red;

            position: relative;
            zoom: 1; /*IMPORTANT: IE6 bug fix: force to re-layout*/
        }
        #divA
        {
            width: 400px; height: 100px; background-color: LightGreen; color: Black;
        }
        #divB
        {
            width: 300px; background-color: blue; color: White;

            position: relative;
            left: -30px;
            top: -10px;
        }
        #divC
        {
            width: 200px; height: 100px; background-color: limegreen; color: White;
        }
        #divD
        {
            width: 200px; color: white; background-color: OrangeRed; padding: 10px;

            position: absolute;
            left: 100%;
            top: -10px;
        }
        #divE
        {
            width: 200px; background-color: Brown; color: White;

            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #divF
        {
            width: 200px; background-color: red; color: white;

            position: absolute;
            right: 100%;
            top: 250px;
        }
        #divG
        {
            width: 200px; height: 100px; background-color: green; color: White;
        }
    </style>
</head>
<body>
    Layout example:
    <div style="padding: 300px;">
        <div id="divContainer">
            container (position: relative to make the children's 'absolute' work)

<div id="divA">content A without any position</div>

            <div id="divB">
                Content B with relative position. It moves to left and above (according to itself)
                but its space remains. The height is caculated by its parent.
                <ol>
                    <li>position: relative (to itself)</li>
                    <li>left: -30px</li>
                    <li>top: -10px</li>
                </ol>
            </div>

<div id="divC">content C without any position</div>

            <div id="divD">
                <div style="margin: 10px; border: solid 1px white">
                    content D with Absolute position. It moves to left and above (according to its parent)
                    and its height won't be calcuated by its parent.
                    <ol>
                        <li>position: absolute</li>
                        <li>left: 100% (to its parent)</li>
                        <li>top: -10px (to its parent)</li>
                    </ol>
                </div>
            </div>

            <div id="divE">
                content E with Absolute position, to its parent's bottom right.
                <ol>
                    <li>position: absolute</li>
                    <li>right: 10px (to its parent)</li>
                    <li>bottom: 10px (to its parent)</li>
                </ol>
            </div>

            <div id="divF">
                content F with Absolute position. It moves to right and above (according to its
                parent) and its height won't be calcuated by its parent.
                <ol>
                    <li>position: absolute</li>
                    <li>right: 100% (to its parent)</li>
                    <li>top: 250px (to its parent)</li>
                </ol>
            </div>

            <div id="divG">content G without any position</div>
        </div>
    </div>
</body>
</html>

本文链接

ORM vs SQL

2011-09-19T07:24:00Z

	ORM	SQL
开发速度	快	慢
运行性能	慢	快
方便修改
可维护性	高	低

ORM

最大的问题是复杂查询

2者同时使用?

简单地方用ORM

复杂地方用SQL

本文链接

Web项目的技术和要注意的问题

2011-09-15T01:24:00Z

业务技术:

前端业务
1. 用户
  1. 注册/激活/登录/注销
  2. 找回密码
  3. 用户选项
2. 最近历史, 最近浏览过 ...
3. 商务
  1. 推荐
  2. 购物车
4. 交互
  1. 留言, 评论
  2. 打分
  3. 论坛
5. 导航
  1. MasterPage
  2. Tab
  3. Menu
  4. Tree (with checkbox)
6. 站内搜索
7. 文本
  1. 文本自动补全
  2. 富文本编辑 (安全性)
8. Form/实体编辑器(创建,编辑,保存更新,删除)
  1. 输入验证(客户端) + AJAX服务端验证
  2. 验证码
  3. 重复提交
9. 表格
  1. 直接编辑/更新/删除
  2. 翻页
  3. 排序
  4. 分组
  5. Master/Details
10. 图表: 折线图,饼图 ...
11. Calendar/日期选取
12. 音乐/视频播放
13. 上传下载
  1. 进度条
  2. 多个上传
14. 地图
15. 分享到...
16. SEO
17. 遮罩
18. 图片
  1. 放大
  2. 阴影
  3. 滤镜
19. 用户体验
  1. 换肤
  2. 过渡动画
20. 多语言
前端技术
1. JQuery
2. CSS
3. AJAX
4. Flash
5. Silverlight
6. HTML5
后端
1. ASP.NET MVC 3
2. WCF/WebService
3. NHibernate/EntityFramework

问题:

前端
1. 浏览器兼容
  1. DIV布局
  2. PNG半透明(IE6)
2. 安全性 (JS)
后端
1. 安全性(SQL注入)
2. ORM or SQL?

设计:

映射
模型
1. 数据结构描述
2. 数据存取器
3. 实际数据
流程
1. 参数传递

本文链接

中土翻译大全

2011-09-05T01:04:00Z

都说Pearl harbour是“ 珍珠港”的意思，其实还有更中土的翻译：蚌埠。

都说Greenland是“格陵兰”的意思，其实还有更中土的翻译：青岛。

都说Deep River是宇多田光的专辑，其实它还有另外一个神奇的名字叫＂深圳＂。

都说Newfoundland是纽芬兰，其实有更北京的翻译：新发地。

都说rock hometown是“摇滚之乡”的意思，其实还有更中土的翻译：石家庄。

都说New York是“纽约”的意思，其实还有更中土的翻译：新乡。

都说RedRiverValley是“红河谷”的意思，其实还有更中土的翻译：丹江口。

都说Table mountain 叫桌山，其实还有个更土的名字叫平顶山

都说Phoenix是“凤凰城”的意思，其实还有更中土的翻译：宝鸡。

都说Portsmouth是“ 朴茨茅斯”的意思，其实还有更中土的翻译：浦口。

都说open horizon是“一望无际的原野”的意思，其实还有更社会主义的翻译：平壤。

都说Broadway是百老汇，其实还有还有更中土的翻译：宽街。

都说西方姓Downer 的人叫唐纳，其实他们还有个更土的名字，叫衰人。

—————————————～～我是分割线～～—————————————

都说gunman是枪手，其实还有更中土的翻译：武汉。

都说Tiger Woods是老虎伍兹，其实还有更中土的名字：林彪。

都说5th Avenue是第五大道的意思，其实还有更中土的翻译：五道口。

都说a land of infertility是不毛之地的意思，其实还有更中土的翻译：中关村。（想想“中关”二字的意思……内涵不解释）

都说Mont Blanc是万宝龙，其实有更中土的翻译：长白山。

都说 Wolfsburg是沃尔夫斯堡，其实还有更中土的翻译：狼窝铺（中国河北省滦县杏山乡）

都说Queensland是昆士兰，其实还有还有更中土的翻译：秦皇岛。

都说Westfield是韦斯特菲尔德，其实还有更中土的翻译：西单

———————————————————————————————————

Evergreen不是常青树……是长春

以后见到Kingston一律译成皇上屯！

Double Tree Hotel：双榆树宾馆

The Whitehouse:白家大院

Wall Street：大栅栏

本文链接

弱类型+单元测试

2011-09-01T05:21:00Z

前台UI和后台数据库之间传递参数, 用强类型好呢? 还是用弱类型好呢?

强类型的好处:

参数名称, 类型在代码中定义的很清楚, 前台和后台有一个成文的协议
有IDE的帮助, 参数名字自动补全

强类型的坏处:

修改不方便, 至少要修改参数定义文件, 前台文件, 后台文件

弱类型的好处和坏处和强类型正好相反, 前台和后台之间的协议只是口头上的.

不过, 可用单元测试来保证前台和后台遵守相同的参数协议

本文链接