Mybackupbox

backup-box-logo
官网:Mybackupbox.com
帮用户在云端进行数据转移服务的网站。以前如果网站要搬迁,把资料必须从FTP下到本地再用FTP把资料上传到新的服务器上(至少我是这么做的),这样就导致了重复操作。
而有了BackupBox之后,直接把两个空间的Ftp链接起来,让他去帮忙传输就好了,作为用户也不用让FTP长时间开着,干等着传。
特别是未来云端数据时代更有必要这样的服务,比如现在我的个人文件很多放在Drive,然后照片放在Flickr,那么以后不排除我需要把这些资料转移到另外的空间,那么我就需要这样的云端数据转移服务来帮我完成。不然数据太多,传完本地再传服务器,实在是浪费时间。

backup-box-website

BackupBox官网有个好用的功能是,注册框和登录框集成在一起了。
如上图的email和password输入框
1、如果数据库中没有该用户,则为立刻为用户创建新资料。
2、如果数据库中有用户资料,那么则再判断密码是否正确,正确则直接登录,错误则提示

好处是:方便了用户注册的过程
坏处:1、通常用户名密码输入框中,浏览器都会帮用户记住用户名密码(如下图淘宝登录框),但BackupBox的输入框就不具备这样的功能。
taobaopassword

2、如果用户输入了错误的油箱,比如输入xxx@gfmail.com 正常的应该是@gmail.com,系统就会为用户直接创见了这个帐户,导致数据库中有效油箱帐户数低。

CSS选择器

由于IE6的原因,之前很多CSS/HTML都直接略过。现在HTML5,Css的强大功能要好好重新学习下了。

————————————-

选择器是CSS的核心,从最初的元素、class/id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。

1、元素选择器

这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器:

p {line-height:1.5em; margin-bottom:1em;}

2、关系选择器

E F:后代选择器,该选择器定位元素E的后代中所有元素F:

ul li {margin-bottom:0.5em;}

E > F:子选择器,该选择器定位元素E的直接子元素中的所有元素F,它将忽略任何进一步的嵌套:

ul > li {list-style:none;} //仅限ul的直接子元素li,如果li里面还嵌套着另一个 ul 结构时,最里面的 li 将被忽略

E + F:相邻兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F:

li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一个li之外的所有li

E ~ F:一般兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中位于E之后的所有元素F:

h1 ~ p {color:#f00;} //定位具有相同父元素的,h1标签之后的所有p标签

3、属性选择器

E[attr]:该选择器定位具有属性attr的任何元素E:

input[required] {border:1px solid #f00;} //定位页面里所有具有必填属性"required"的input

E[attr=val]:该选择器定位具有属性attr且属性值为val的任何元素E:

input[type=password] {border:1px solid #aaa;} //定位页面里的密码输入框

E[attr|=avl]:该选择器定位具有属性attr且属性值为val或以val-开始的任何元素E:

p[class|=a] {color:#333;} //定位页面里所有的P段落里具有class属性且属性值为a或是a-开始的,比如class="a"以及class="a-b"

E[attr~=val]:该选择器定位具有属性attr且属性值为完整单词 val 的任何元素E:

div[title~=english] {color:#f88;} //定位页面里所有具有属性title且属性值里拥有完整单词english的div容器,比如title="english"以及title="a english"

E[attr^=val]:该选择器定位具有属性attr且属性值以val开头的任何元素E:

div[class^=a] {color:#666;} //定位页面里具有属性class且属性值以a开头的div容器,比如class="a"以及class="ab"

E[attr$=val]:该选择器与E[attr^=val]正好相反,定位具有属性attr且属性值以val结尾的任何元素E:

div[class$=a] {color:#f00;} //定位页面里具有属性class且属性值以a结尾的div窗口,比如class="nba"以及class="cba"

E[attr*=val]:该选择器与E[attr~=val]相似,但更进一步,定位具有属性attr且属性值任意位置包含val的元素E,val可以是一个完整的单词,也可以是一个单词中的一部分:

a[title*=link] {text-decoration:underline;} //定位所有title里具有link字符串的a链接

:link:未访问的链接;

:visited:已访问的链接,不建议使用;

:hover:鼠标移动到容器,不仅限于链接,可用于页面中的任何元素;

:active:被激活时的状态,不仅限于链接,可用于任何具有tabindex属性的元素;

:focus:获得焦点时状态,不仅限于链接,可用于任何具有tabindex属性的无线:

input:focus {border:1px solid #333;} //输入框获得焦点时的样式

:enabled:已启用的界面元素:

input:enabled {border:1px solid #899;}

:disabled:已禁用的界面元素:

input:disabled {background:#eee;}

:target:该选择器定位当前活动页面内定位点的目标元素:

#info:target {font-size:24px;} //当访问的URL网址为 123.html#info 时,id="info"将加载这个字体样式

:default:应用于一个或多个作为一组类似元素中的默认元素的UI元素;

:valid:应用于有效元素:

input:valid {border:1px solid #6a6;} //当输入框验证为有效时加载这个边框样式,基于type或pattern属性

:invalid:应用于空的必填元素,以及未能与type或pattern属性所定义的需求相匹配的元素:

input:invalid {border:1px solid #f00;} //当输入框为空且必填时,或已填写但验证无效时,加载此边框样式

:in-range:应用于具有范围限制的元素,其中该值位于限制内;比如具有min和max属性的number和range输入框;

:out-of-range:与:in-range选择相反,其中该值在限制范围外;

:required:应用于具有必填属性required的表单控件;

:optional:应用于没有必填属性required的所有表单控件

:read-only:应用于其内容无法供用户修改的元素;

:read-write:应用于其内容可供用户修改的元素,比如输入框;

:root:根元素,始终指html元素;

E F:nth-child(n):该选择器定位元素E的第n个子元素的元素F:

div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3个元素p,如果第3个子元素不是p,此样式将失效

E F:nth-last-child(n):该选择器定位元素E的倒数第n个子元素的元素F;

E:nth-of-type(n):该选择器定位元素E的第n个指定类型子元素;

E:nth-lash-of-type(n):该选择器定位元素E的导数第n个指定类型子元素:

.class p:nth-child(2) 与 .class p:nth-of-type(2) 的区别在于,如果.class里的第2个子元素不是P元素时,.class p:nth-child(2) 的样式将无效,而.class p:nth-of-type(2) 将定位在 .class 里的第2个p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n),这其中的 n 可以使用数字静态式,比如 .nth-child(2n+1) 将匹配第1、3、5...个元素

E:first-child:父元素的第一个子元素E,与:nth-child(1)相同;

E:last-child:父元素的倒数第一个子元素E;

E:first-of-type:与:nth-of-type(1)相同;

E:last-of-type:与:nth-last-of-type(1)相同;

E:only-child:父元素中唯一的子元素E;

E:only-of-type:父元素中唯一具有该类型的元素E;

E:empty:没有子元素的元素,没有子元素包括文本节点;

E:lang(en):具有使用双字母缩写(en)表示的语言的元素;

E:not(exception):该选择器将选择与括号内的选择器不匹配的元素:

p:not(.info) {font-size:12px;} //匹配所有class值不为info的p元素

5、伪元素

伪元素可用于定位文档中包含的文本,为与伪类进行区分,伪元素使用双冒号 :: 定义,但单冒号 : 也能被识别。

::first-line:匹配文本首行;

::first-letter:匹配文本首字母;

::before 与 ::after :使用 contnet 属性生成额外的内容并插入在标记中:

a[href^=http]::after {content:"link"} //在页面的a链接的后面插入文字link

::selection:匹配突出显示的文本:

::selection {background:#444; color:#fff;} //定义选中的文本颜色与背景色

转自https://reader.mx/p/10698

个性化拜年短信

过年给朋友拜年,一般都会亲自编写短信祝福,虽然简单,但让人看着是自己亲自编写的,都会感觉比较特别.
而联系人一多,这短信就有点麻烦了,于是就想是否有款应用,根据联系人信息自动编辑短信。

解决方案:
1、一般的操作系统,都开放有底层一些数据接口,如联系人信息等等,第三方应用是可以获取到手机的联系人信息的。
2、如下图,iPhone的联系人信息默认已经存储多项数据,如姓氏、名等等,可方便用于数据分析


3、如上图所示,iOS甚至还内置有更多的选项,供手机主人来定义电话簿的每个人。
4、结合手机本身的联系人资料,欲开发的发短信App可以内置更多的信息,以便区分辨别联系人。

技术实现:
1、可以根据用户信息,优先是根据姓名,其次男女属性,其次是否单身,第三婚否…..
比如姓张,性别为男,再判断用户的年纪,一般男性就称呼为”x哥”,接着添加祝福语,新年快乐…如果数据能判断用户是否单身,那么还可以写上”来年祝找个漂亮老婆“等等..

2、根据双方联系频率(及联系人分组等等信息),判断出是否好友,发送不一样的的内容。
根据双方的信息频率或是拨打频次(这个目前手机好像还没相关的数据接口),如不是很熟,就直接称呼名字,再添祝福语。很熟再加一些其他的昵称、等等数据。

如果是微博,微信上面呢?
简单的步骤,就如手机联系人的执行方式。如果想稍微复杂,那么就数据分析互粉的用户的发帖记录,那么理论上是可以根据发帖数据判断出用户是是否单身、兴趣爱好等等。那么祝福的短信就更加简单了。===只是数据分析毕竟是大项目,会复杂很多。

商用
给亲人送祝福,那么其实也就是给客户送祝福。根据客户的一些信息(结合客户的来往资料),分析客户喜好,发送特定的祝福短信。
淘宝店家可以基于这一套系统,定期给顾客发送祝福短信,而不是天天的商品销售。

市场已有
豆豆短信 http://www.anzhi.com/soft_622247.html
瓦力短信 http://news.newhua.com/news/2011/1224/140193.shtml

创业系列之:前端设计师

现在的所说的前端,一般只Html+Css+js
在10年之前,前端几乎是程序员都不愿意去做的工作,基本都是选择做后端。
原因:
1、很鸡肋的工种,10年之前前端基本都是分派给美工,美工兼任设计+html+css
2、JS当时还达不到Flash的效果,强大效果基本用Flash来做。

直到乔布斯宣布在移动端不支持Flash之后,前端的技术工作才慢慢被热捧,因为很多移动端效果,只能用JS来实现。

而多年过去,前端越来越热门,特别是HTML5的各种特性逐渐发挥出来。

前端的工作,不仅涉及到html+css+js,还需要了解一点点的交互知识,更好完成项目。

通讯录同步的问题

iCloud-sync
使用黑莓前,我用Google Sync把黑莓的通讯录同步到Gmail上
有了iPhone之后,就利用内置的邮件客户端同步通讯录。
同步功能的好处是不用为搬迁通讯录而麻烦,而一旦设置的同步之后,这个数据随时根据用户的情况及时更新到云端服务器。
但是,如果今天我的手机突然不用了,给了身边的亲人用,而对方由于不懂得机器,也不理解机器可以同步这件事情,他就把我的手机通讯录统统换成他的,而随着对方更新手机通讯录,那么我服务器端的数据也会随之消失了。

通常的解决办法是,定期备份,但感觉还不够智能。

撇开其他数据的同步不说,单单就联系人的同步功能是否有更加优化的措施呢?
了下面几个方法。
1、是否可以对数据进行监控,当多条数据在一天内(或几个小时内)同时被删除,就需要自动禁止同步机制,在用户完全确认后方可进行同步。-当然用户可以进行当前页面的补充,或是修减,只是后台被禁止了同步。
2、对联系人进行数据分析,可以基于联系人的对话(短信/其他方式)频次来标记某个联系人是否是重要人物,而当好几个重要人物同时被删除(或替换),就需要让删除人确认是否真的删除。

信息提示的触发,最好能在后台运行,且不知不觉的帮助用户当发生以上两种情况时,自动备份当前的数据。

 

Gdgt

90291
120932

 

非常不一样的电子产品社区网站,http://gdgt.com/
1、用户可以注册,分享自己用户的产品,同时点评其他的产品(必须拥有过)
2、以链接的方式罗列各大评测网站的信息,让这些信息变成自己的参考数据。

主要的部分是产品页面,其他的项目基本都是围绕产品页来做延展或是完善其功能。
如下图,每个产品上半部分都有名称、图片集、一段WeLikeIt的正面评论,同时数据显示当前网站内有多少人有用了该产品。产品的互动(评论)被隐藏在菜单中(ANSWERS、Discussios),下面会分析到。

gdgt_01
每件产品的各项数据指标,很直观,分为专家的数据和用户的数据
gdgt_02

最有趣的部分是如下图,来自各大网站(如engedget、Techcrunch等)的点评,及评分。
不太清楚这个数值是怎么算出来的,也许是编辑看了文章之后手动添加的。至少给用户很直观的文章点评数据。这也是上面不优先显示站内互动的原因,因为毕竟消费者比较相信专业媒体的数据点评。
gdgt_03

网站的盈利方式:
gdgt_04
网站品类几乎囊括了所有点子产品,盈利方式在最后的 top Recommendations!
罗列出网站最多点评、最高分数等等的电子产品、App等等,用户通过链接购买,网站即可获利。如下图,还帮用户列出当前产品在各大电商的销售价格,方便用户参考。
gdgt_05

另外一种方式就是,用户在上面用的越多,时间越久,那么网站基于用户的兴趣数据越准确,那么可能就是向用户推荐【可能感兴趣的产品】进行销售获利。