标签归档：timeline

时间线网站“似水流年”上线

网站地址： http://jstwind.com
在很早前就想做这么一个关于时间线的网站了，并在今天年初开始真正开始行动。中途因为各种原因将这件事情给搁置了，直到最近才重新启动。目前还只是完成了基础功能，细节方面也未能调教到自己满意的程度。不过不管怎么说，网站总算是基本可用了。欢迎大家上去看看，去制作自己感兴趣的时间线。
目前网站上只有一个关于 乔布斯 的时间线。事件的编辑比我预想的还要花时间，这也让我更希望能早些加入时间线的协作编辑功能。
这是我在继 LBForum 之后真正有在用心做的一个私人项目。项目后台代码方面的工作量倒还好，主要的工作都花在了前端上。事件的编辑是一项非常繁琐的工作，因此花费了不少时间来使用AJAX来提高事件编辑的易用性。项目代码托管在 github 上。项目地址在以前的博客里发布过，如果你感兴趣的话可以去找找。
最后把用到的主要技术和服务列一下，接下来一段时间可能会将其中用到一些技术写成博客：

  • 网站部署在 webfaction ，采用apache+mod_wsgi的方式进行部署。
  • 由于webfaction在国内的访问速度并不理想，静态资源托管在sina的 SAE 平台上。因为申请了SAE的开发者认证，每月有1.5w的免费云豆资源，闲着也是闲着。
  • 域名在 godaddy 购得。在使用优惠码后，一年的费用不足$2。
  • 域名的DNS解析用的是 DNSPod 。 DNSPod在易用性方面确实做的很不错。
  • 使用 腾讯企业邮箱 。 或许很多人对腾讯比较反感，但腾讯的产品确实都还做的不错。使用腾讯企业邮箱的重要原因之一是免费。
  • 服务端的开发技术依旧用的是 Django 。使用自己熟悉的技术可以大大的加快开发进度。
  • 前端用的是 twitter-bootstrap 。bootstrap目前已经有烂大街的趋势了，不过这东西确实好用。为减少bootstrap的痕迹，下一步考虑给jstwind换个配色方案。
  • JS的基础库用 JQuery 。现在JQuery基本上已经是JS标准的一部分了。
  • 时间线的JS控件用的是 Timeline JS 。虽然这个JS组件还有不少让我不太满意的地方，但这个组件胜在漂亮，而且作者非常勤奋，github上提的issue基本上在一天内就会有回复。
  • 文件上传用的是 jQuery-File-Upload 。纯JS实现，不依赖Flash即可实现文件的批量上传。缺点是如果客户用的浏览器版本太老就无法使用批量上传功能了。
  • Django的第三方APP方面用的就比较多了，其中包括 django-userena、django-taggit等，以及部分我自己写的与修改的APP。第三方APP的详细列表可以查看项目中的 requirements.txt 文件

timeline项目开发日志–登陆、注册模块

利用twitter/bootstrap，项目的基础模板算是顺利搞定。接下来开始处理用户中心。
用户中心主要包括用户登陆、注册以及头像等个人信息维护。此前，用户的注册管理我一直使用django-registration。只是这个APP有些不思进取，09年发布了0.8alpha版后就一直没什么动静。这次决定尝试另外一个用户模块组件django-userena。
相比django-registration，django-userena的功能要完善的多。除基础的登陆注册模块外django-userena甚至还带了站内消息功能。django-userena的易用性方面也做的非常的不错。django-userena自带了默认模板，并有提供一个完整的演示项目，让你可以轻松上手。这里有个官方的在线demo，感兴趣可以去看看。

django-userena同twitter/bootstrap的整合

我们自然是希望所有的APP不用做任何修改，拿来就能用了。不过事与愿违，在整合的过程中多多少少都会遇到一些问题。django-userena默认的模板在项目中显示的非常难看。我们需要重写django-userena的默认模板，并且用django-bootstrap来生成form。
forms.py

#为原始form添加BootstrapMixin
from bootstrap.forms import BootstrapMixin
class BsAuthenticationForm(AuthenticationForm, BootstrapMixin):
    def __init__(self, *args, **kw):
        super(BsAuthenticationForm, self).__init__(*args, **kw)
        self.__bootstrap__()

urls.py

#重写urls，指定使用的form
from django.conf.urls.defaults import *
from userena import views as userena_views
from profiles.forms import BsSignupForm, BsAuthenticationForm
urlpatterns = patterns('',
    url(r'^signup/

中文用户名问题

同django-admin一样，django-userena也无法使用中文进行注册。对于一个中文网站而言，不能使用中文注册ID似乎有些太不合理的。
django-userena使用正则表达式对用户名进行校验，重写注册form修改认证规则即可取消该限制。

USERNAME_RE = r'^\S+
, userena_views.signup,
        {'signup_form': BsSignupForm}, name='userena_signup'),
    url(r'^signin/

中文用户名问题

同django-admin一样，django-userena也无法使用中文进行注册。对于一个中文网站而言，不能使用中文注册ID似乎有些太不合理的。
django-userena使用正则表达式对用户名进行校验，重写注册form修改认证规则即可取消该限制。

USERNAME_RE = r'^\S+$'
attrs_dict = {'class': 'required'}
class BsSignupForm(SignupForm, BootstrapMixin):
    username = forms.RegexField(regex=USERNAME_RE,
                                max_length=30,
                                widget=forms.TextInput(attrs=attrs_dict),
                                label=_("Username"),
                                error_messages={'invalid': _('Username must contain only letters, numbers, dots and underscores.')})
    def __init__(self, *args, **kw):
        super(BsSignupForm, self).__init__(*args, **kw)
        self.__bootstrap__()

已在github上创建timeline项目

项目地址：https://github.com/vicalloy/timeline-site

感兴趣的朋友就过去关注下吧。

目前还只有一个项目框架，并对基础的模板做了一些调整。因为是自己一个人写，且没人督促，所以项目前期的重构会比较频繁，且项目进度不可控。

下面就是刚的工作成功，一个简单的首页框架。

timeline

timeline项目前期准备工作

前些天在日志里说想做个timeline相关的网站。由于最近的琐事较多，也是出于惰性，迟迟没有动手。想最近还是先将项目启动好了，然后在blog上记录项目的过程。记录的过程，一方面是方便日后的总结，令一方面多少也有些督促作用。

缘起

很早以前就想做一张古今中外的大事年表，看中国历史上的同时期国外都发生了些什么事。对于普通的文字列表而言，timeline的展现方式无疑要直观很多。在寻找timeline工具的时候没有发现好用的。到了现在，已经出现不少在线timeline工具了，不过中文的还没有，既然如此那就自己做一个吧。

网站定位、功能规划、前期推广方案

timeline功能有些过于单一，可发掘的余地不会太大。不过换个角度看，做一个有价值的小众服务也不错。
这会是一个类似维基百科的网站。大家可以在上面察看、制作自己感兴趣的timeline。网站支持多人协作，可以多人共同维护一个timeline。timeline支持评论。用户可以将自己感兴趣的timeline做个列表（类似豆瓣的豆单）。如果用户活跃的话甚至可以考虑增加小组的功能。
网站创建初期最需要的是基础内容以及第一批核心用户。内容方面会自己做几个timeline并进行社会化分享。针对目标人群的不同会将timeline分为明星偶像、社会化事件、历史、技术类（如js的演化）。然后看目标人群的接受程度再做适当的调整。

技术方案

服务端采用django。UI方面采用twitter出品的bootstrap。
除此之外令一个重要的问题是如何实现timeline的展示。网上不少timeline的js实现。经过调查后决定采用timeglider。下面是入围JS库的介绍。

参考网站

既然此类网站已经有了，必要的参考自然少不了。

  • http://www.xtimeline.com
    • UI不是很美观，功能方面和我的想法比较接近。
  • http://www.timerime.com/
  • http://www.tiki-toki.com/
  • http://delicious.com/search?p=timeline
    • delicious上可以找到很多有用的资料
  • http://www.douban.com/event/search?search_text=%E5%B0%8F%E7%BB%84&loc=china
    • 参考UI
  • http://www.timetoast.com/
    • 同xtimeline类似，UI更好些。

最近想做的一些东西

由于长期的挖坑不填，于是想做简单一些的东西，简单到一周之内可以完成。

WP7的虾米电台客户端

虾米的电台很不错，有多种风格的电台可以选择。选择一个自己喜欢的电台然后有啥听啥，比自己选歌来的方便的多。目前虾米有官方的ios、android的客户端，wp7的客户端暂时还没有。虽然手机可以用网页版的虾米，不过网页版无法后台播放将是一个很大的缺陷。

我还没有wp7的手机，想做着东西主要还是想体验一下wp7开发。

timeline在线制作

世界历学的很烂，完全不知道国外的重大历史事件对应到中国的朝代。想做这么一张历史年表，将国内外的大事件都标记在上面。顺带想做一个关于timeline的网站。用户可以制作自己的timeline并进行分享。最好还可以象wiki一样大家共同编辑同一个timeline。

前期会做的很简单，只有简单的创建和展示功能。评论功能直接使用disqus实现。

目前国外网站已经有一些提供在线timeline服务的网站。里面大多网站都面向企业用户提供收费服务。其中比较接近我想法的是xtimeline。