存档

文章标签 ‘网站’

【转载】从2到30万,一个小网站的成长故事

2011年7月16日 3 条评论

我想说一说扇贝网,一家致力于帮助英语学习者解决词汇问题的网站,我是创始人之一。

在创办扇贝网之前,我曾经花了几个月时间看完一本原版的达芬奇密码,期间最为纠结的无非是随处可见的英语生词,一开始我还能不厌其烦的查字典做记录,但是发现这些生词再次出现,我依然不记得是什么意思;屡经挫折后,我渴望能有一个网站让我在看书或者文章过程中把遇到的单词丢进去,而后我只要登录这一网站,它就能按照一定规律提醒我复习。想必这样一来我看完一本书后,上面的词也该会了七七八八。

而我的搭档呢,在他学习英语时,一直很想找个途径可以把属于某个话题的单词都组织在一起,譬如学finance这个词时,就可以顺藤摸瓜地接触到金融或者经济相关的其他词汇;这样词汇学习就不是面对几千上万个孤立的单词,而是一组一组有意义的专题。更有意思的是,还可以由多人来共同编撰这样的专题,添加相关的文章链接和评论,不断丰富专题内容。

于是我们一拍即合,决定融合彼此想法,把这样一个网站做出来。

但是摆在面前的是一个巨大的问题————我们不会做网站!

我自己有十多年编程经验,但是限于桌面(Delphi和VC)和服务器端(Java),HTML都不怎么熟;而我搭档则是从心理学专业毕业后一直从事数据分析工作,除了用于统计的R语言外,没有写过代码。但是无论怎样,我们就这样上路了,当时的想法是边学边做,哪怕做出来的东西只有我们自己用也不错,毕竟现有的英语学习网站都无法满足我们的需求。

我们的开发语言选用了Python,实际上我们差一点就选了Ruby,但是我写了两周的Ruby程序后就实在无法忍受 “===” 和 “=>;改了Python后,我花了一个多小时写了100来行代码完成了一个最简陋的中文分词程序,心想就是它了;为了省钱,我们选了Google App Engine作为平台,开发框架也自然就用了Django。

在此同时,我的搭档也从零开始学习HTML,CSS,JavaScript跟JQuery框架,大概在两个多月后我们拼凑成了一个能用的网站,放在GAE上,但很快由于某些大家都懂但又不是很明白的原因,GAE无法访问了,我无奈改写了数据访问层,改用MySQL,并买了一台国外的虚拟主机,把网站搬迁过去。

我们自娱自乐了几天,觉得还凑合,就想着去找用户了。我们在各类和英语学习相关的论坛上发贴,留言,还打印了传单去英语角发放。看到每天几个十几个新注册用户时很兴奋,原来还真有其他人也有一样的需要阿。但是过了几个月注册人数就达到了3万,网站也变得非常不稳定;于是我们再次迁移,换了VPS,和虚拟主机相比系统资源更有保障,同时我们也改用了Nginx作为HTTP服务器,uwsgi作为Web服务器;几个月后,我们的注册人数突破了10万,各种问题又接踵而至,好在届时我们对Nginx已经有了更多的了解,于是部署了更多的VPS来提供服务。

虽然上面只有短短的几句话,但是个中过程其实非常折腾,网站曾经三度濒临瘫痪而我们束手无策,无论重启系统还是加机器都不能立刻解决,只能被迫暂停新用户的注册。与此同时我们的网站程序也愈加复杂,开始引入各种粒度的静态化,Memcache, SSI,以及将一些访问放入队列消息系统进行异步处理。

相应的,我们在网站功能设计上也走过弯路,我们曾经有一次非常不成功的改版,那一段时间我们需要鼓起非常大的勇气才能打开网站论坛,因为上面尽是用户的咆哮;我们也开发过一个初衷很2.0,而结果很2的学习记录分享功能,2到我们突然将之从首页取消后,连一个抱怨的帖子都没有看到,仿佛它从未存在。

不过几经风雨,扇贝网依然发展到了现在,我们的注册用户也超过了30万,更令人欣慰的是,很多用户之前经历过单词忘了再背,背了又忘的挫折,自从开始使用扇贝网后,能坚持几十上百天每天学习,这让我们更加有信心自己在做一个有价值的产品。

今年年初我们接受了一笔投资,团队现在也由最初的两人变成了三人,有了自己的办公室和公司,但是这依然只是一个开始,我们还有很多很多东西没有实现,也面临很多难题尚待解决,譬如:

产品方面——

如何进一步提升学习效果;

如何进一步促成用户间的互相鼓励,督促和学习;

如何分析用户的学习行为以及结果,智能和动态的为其挑选合适的学习内容和方式;

系统方面——

如何优化应用程序,以及软硬件的配置,使其能够支撑更多人的同时在线学习;

如何优化数据库或者采用其他存储方案,来支持更海量的数据(我们的某些数据库表已经有了几千万的记录数)

差不多就说到这里,只是我们自己也只知道故事的开头,不知道故事的结尾。

如果你愿意成为故事的一部分,对我们的产品想要解决的问题有兴趣,欢迎看看我们的招聘启事,我们正在找Python工程师和前端工程师。

via: http://blog.shanbay.com/archives/821

分类: 分 享 标签: , ,

CSS clear 属性到底是什么?

2011年6月30日 1 条评论

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

浏览器支持

所有主流浏览器都支持 clear 属性。

via http://www.w3school.com.cn/css/pr_class_clear.asp

代码说明

<html>
<body>
<p style="float:left;width :200px;">这个是第1</p> 
<p style="float:left;width :400px;">这个是第2</p> 
<p style="clear:both;">这个是clear列</p>
</body>
</html>

试试把clear列的style去掉和不去的区别就知道了!

分类: Internet 标签: , , ,

DIV元素和SPAN元素的区别

2011年1月18日 2 条评论

标准布局中DIV元素和SPAN元素的区别和应用

首先讲两个概念,SPAN元素是行内元素,DIV元素是块级元素。行内元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作用;而DIV元素即块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

两者最明显的区别是:DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。DIV元素即块元素相当于内嵌元素在前后各加一个
换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。

代码示例:

<style> 
div,span{border:1pxsolid#000;margin:2px;}  
</style> 
<div>div1</div><div>div2</div> 
<span>span1</span><span>span2</span> 
<br> 
<divstyledivstyle="display:inline">div3</div> 
<divstyledivstyle="display:inline">div4</div> 
<spanstylespanstyle="display:block">span3</span> 
<spanstylespanstyle="display:block">span4</span>

技巧:有些朋友会说DIV是层标签,其实HTML里是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以成为“层”,只需要给对象定义position属性(值为absolute或relavite)。例如,要让图片成为“层”,可以这样写代码:

<imgsrcimgsrc="demo.gif" style="posibion:absolute;left:20px;top:20px">

特别提示

为了更能说明问题,这里给块元素和内嵌元素都加了1像素宽的黑色实线边框,DIV元素默认为块元素,定义display属性值为inline后以内嵌元素显示,而SPAN默认为内嵌元素,定义display属性值为block后则以块元素显示。

SPAN元素标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。

分类: wordpress 标签: , , , ,

WordPress注册后直接显示密码

2011年1月17日 1 条评论

WordPress 的用户注册机制是,填写用户名、邮箱,由 WordPress 生成随机密码,并发送到用户注册时填写的邮箱地址。但很多人的服务器并没有配置邮件服务或者邮件发送会长时间延迟(比如我正在使用的GoDaddy主机),或者由于邮件运行商的反垃圾邮件功能等原因,导致注册之后收不到WordPress发送的密码邮件,无法完成注册。

既然如此,不如我们 hacks 一下 WordPress。让 WordPress 注册后直接显示密码。

怎么改呢?很简单,只需改动 WordPress 根目录下的 wp-login.php 即可。

1、搜索下面这句,位于 register_new_user 函数中。用于注册成功后发送通知。找到后把它注释掉(当然如果你希望保留邮件发送功能则无须注释掉)。

wp_new_user_notification($user_id, $user_pass);

2、并在上面这句的下一行加上两句:

setcookie("u", $user_login);
setcookie("user_pass", $user_pass);

这两行的目的是把注册时填写的用户名,以及 WordPress 随机生成的密码写入cookies,以便在后面调用。

3、搜索下面这句

$errors->add('registered', __('Registration complete. Please check your e-mail.'), 'message');

并把它替换为

$errors->add('registered', __('Registration complete!<br />Username: '.$_COOKIE['u'].'<br />Password: '.$_COOKIE['user_pass'].'<br />(You can modify your password after you login)'), 'message');

中文版:

$errors->add('registered', __(' ^__^ 注册成功!<br />用户名:'.$_COOKIE['u'].'<br />密码:'.$_COOKIE['user_pass'].'<br />(登录后可以修改为便于记忆的密码)'), 'message');

注:文件包含有中文,需要另存为utf8的格式。

到此,就修改完成了。保存,上传。

注:本文基于 WordPress 2.6.1,在3.0.4版本上测试可用。

分类: wordpress 标签: , , , , ,

WordPress 短代码的使用

2010年11月29日 3 条评论

WordPress 的短代码功能在 WP 2.5 以后就存在了,只是因为需要预先自定义代码功能,所以很多朋友并没有很关注它,根据自己的网站类型和功能,如果有时候需要频繁使用某一代码功能框架,还是推荐大家使用短代码功能,能够大大节省你的代码输入和维护时间。

比如:使用短代码在WP博客任意位置添加广告

WordPress Codex: http://codex.wordpress.org/Shortcode_API

添加使用短代码功能的代码很简单:

function NAME($atts, $content=null){
	return 'CODE';
}
add_shortcode('SHORTCODE','NAME');

解释:
NAME - 设定代码名字
CODE - 代码主体框架
SHORTCODE - 要使用的短代码

延伸阅读:http://www.wheatnotes.com/2010/11/wordpress-shortcode-api/

最近……

2010年11月24日 9 条评论

忙着一个新的英语学习网站,我想以后可能会花很大一部分时间在上面,因为毕竟是自己喜欢的,自己在英语学习上付出了很多的精力,所以,我也觉得有必要把所有各方面的内容做一个总结,不为别的,只为了进一步的完善和分享。

每个人对语言学习都会有不同的认识和见解,不同的人,不同的方法。而我希望能够总结提炼出一些放之四海而皆准的观点,能够贯穿英语学习的始终,能够对任何的语言学习起到指导作用的核心和精髓。

对于任何一门语言,学习的目的和宗旨无非就是交流。而学习的过程也少不了刻苦的努力,任何短期内的突破课程,可能会对你的短期目标有所帮助,但是我相信具备了交流的真功夫之后,其余的问题都会迎刃而解。所以从方法论角度来说,苦练+巧练是永远的真理。

而正确的观点和原则是真理的准绳,它会指导你的过程和方向,让你始终在正确的轨道上高速前进!

每天的日子很普通,但是相信大家都一样,希望能够在一个自己钟情的领域,博得精彩!共勉!

分类: 随 笔 标签: , , ,

WP提速 - “化解”HTML中的小图标

2010年10月5日 4 条评论

HTTP 请求是很费时间的,主要花费在建立连接的过程中。其实真正传输 1K 和 10K 数据的时间相差无几,但哪怕你请求的是一个仅有几字节的小文件,一样需要花费一定的连接时间。

这个时候 CSS Sprites (tools via1 via2) 和 Inline Images with Data URLs 就可以帮上大忙了。

CSS Sprites 的思想是把很多张小图片(如:图标)整合为一张大图,再利用 CSS 的 background-position 属性在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。

Inline Images with Data URLs 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中,不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101,但经过 base64 编码后就可以了。基本的用法是:

data:[<mediatype>][;base64],<data>

例:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGvSURBVDjLpZO7alZREEbXiSdqJJDKYJNCkPBXYq12prHwBezSCpaidnY+graCYO0DpLRTQcR3EFLl8p+9525xgkRIJJApB2bN+gZmqCouU+NZzVef9isyUYeIRD0RTz482xouBBBNHi5u4JlkgUfx+evhxQ2aJRrJ/oFjUWysXeG45cUBy+aoJ90Sj0LGFY6anw2o1y/mK2ZS5pQ50+2XiBbdCvPk+mpw2OM/Bo92IJMhgiGCox+JeNEksIC11eLwvAhlzuAO37+BG9y9x3FTuiWTzhH61QFvdg5AdAZIB3Mw50AKsaRJYlGsX0tymTzf2y1TR9WwbogYY3ZhxR26gBmocrxMuhZNE435FtmSx1tP8QgiHEvj45d3jNlONouAKrjjzWaDv4CkmmNu/Pz9CzVh++Yd2rIz5tTnwdZmAzNymXT9F5AtMFeaTogJYkJfdsaaGpyO4E62pJ0yUCtKQFxo0hAT1JU2CWNOJ5vvP4AIcKeao17c2ljFE8SKEkVdWWxu42GYK9KE4c3O20pzSpyyoCx4v/6ECkCTCqccKorNxR5uSXgQnmQkw2Xf+Q+0iqQ9Ap64TwAAAABJRU5ErkJggg==" />

可以借助 Motobit Software 在线生成 base64 的图片内容。

Inline Images with Data URLs 的局限:

1. IE 5-7 不支持,IE 8 支持。为了兼容 IE,可以把这些部分单独写入 IE 专用的 CSS 文件中。
2. 文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%,在 gzip 压缩后,这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。
3. 浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节,Firefox 最大支持 100K。所以最好只应用在小图片上。

补充一点:CSS SpritesInline Images with Data URLs 是可以同时使用的。

SSH快速搬家

2010年10月4日 1 条评论

一般我们安装或者迁移 WordPress 博客,我们都需要把 WordPress 安装包或者资料下载到本地,然后上传到新的服务器,再进行安装或者迁移,这样不仅耗时费力,如果主机在国外的话,传送几百兆数据将会是一场噩梦。其实如果你的主机支持 SSH 的话,这一切都会变得很简单并且可以迅速完成。(via Fairyfish

1. SSH登陆旧主机,登录成功会提示:  

bash-3.2$ 

要想查看当前目录完成路径,就输入: 

pwd 

然后会提示如: 

/var/www/vhosts/wheatnotes 

要看看当前目录有什么文件就输入: 

ls

 

2. 进入网站文件目录(如html目录),输入: 

cd html 

 

3. 导出数据库,命令格式为: 

mysqldump -user=[数据库用户名] -p [数据库名] > [备份文件名].sql 

例如: 

mysqldump -u wheat -p wheat_db > wheat.sql 

输入上面的命令之后,它会提示你输入数据库密码。 

ls 

一下应该能看到多出来的 wheat.sql 文件,即我们导出的数据库。

 

4. 打包并压缩所有文件 

tar -czvf wheat.tar.gz * 

不要关闭SSH,等到滚屏完毕后 

ls   

应该就可以看到 wheat.tar.gz 这个压缩包了 

 

20101012 update: 使用tar进行排除一个目录的备份 

例如打包&压缩html这个目录,html/FTP/是不想打包&压缩的目录: 

tar czvf wheat.tar.gz html --exclude html/FTP

若需要排除多个目录则连续输入 --exclude 1 --exclude 2 --exclude 3 即可。

 

或者直接进入html目录: 

tar -czvf wheat.tar.gz --exclude=FTP --exclude=wheat.tar.gz ./ 

其中./即为要打包压缩的目录。--exclude=wheat.tar.gz 为了排除备份过程中建立的 wheat.tar.gz 空文件。该方法参考 man tar (via) : 

 -exclude FILE     exclude file FILE 

SYNOPSIS
tar [ - ] A --catenate --concatenate | c --create | d --diff --compare | --delete | r --append | t --list | u --update | x --extract --get [ options ] pathname [pathname ... ]

--exclude=PATTERN
exclude files matching PATTERN

 

5. 旧主机的操作到此为止,接下来SSH登陆新主机,进入网站目录(html),获取旧主机的打包文件

wget http://www.wheatnotes.com/wheat.tar.gz

  

6. 解开压缩包

tar -xzvf wheat.tar.gz

 

7. 再次使用 MySQLDump 导入数据库

mysqldump -user=[数据库用户名] -p [数据库名] < [备份文件名].sql

 

:如果新老数据库信息不一致,需要更新 wp-config.php

安全问题:删除导出的数据库文件 wheat.sql 和 wheat.tar.gz

删除命令 rm 文件名

如:rm wheat*

 

延伸阅读……
SSH 是什么?http://zh.wikipedia.org/zh-cn/SSH
如何用 SSH 搬家 (plesk cpanel 互搞) http://ooxx.me/transfer-with-ssh.orz
SSH 入门教程(常用命令) http://ooxx.me/common-ssh-commands.orz
使用 SSH 安装和迁移 WordPress 博客 http://fairyfish.net/2009/11/20/ssh-wordpress/
博客如何快速搬家?http://liucheng.name/1034/
Google 搜索 SSH 命令详解

调用WP热评文章

2010年9月16日 4 条评论

答小小童鞋的问题,在调用WP热评文章的时候如果没有相关文章,则显示“当前无热评文章”。

以前的代码是直接调用其SQL语句,今天新分享一段PHP代码,更为简洁,效率更高。只需要在合适的地方插入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount = 0) { ?>
<li>当前无热评文章</li>
<?php } } ?>
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?>