Tag Archives: timeline

vicalloy的庄家 编程

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

网站地址: 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 文件
vicalloy的庄家 编程

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

urls.py

中文用户名问题

同django-admin一样,django-userena也无法使用中文进行注册。对于一个中文网站而言,不能使用中文注册ID似乎有些太不合理的。

django-userena使用正则表达式对用户名进行校验,重写注册form修改认证规则即可取消该限制。

vicalloy的庄家

已在github上创建timeline项目

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

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

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

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

timeline

vicalloy的庄家

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更好些。
vicalloy的庄家

最近想做的一些东西

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

WP7的虾米电台客户端

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

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

timeline在线制作

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

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

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