飞纯技术
  • 主页
  • 相册
  • 关于我
KEEP IN TOUCH

Posts in category Web开发

火车余票查询的RESTful API

四27
2011
Leave a Comment Written by Filia.Tao

前几天出去玩, 做了几次火车。用来几次 12306.cn 。 余票查询还是挺有用的。 作为API控,花一点时间写了个查询余票的Web API 。
用法: http://trans.labs.ftao.org/api/yupiao.json?date={date}&start={start_station}&arrive={arrive_station}
比如4.29日上海到南京的余票

curl "http://train.labs.ftao.org/api/yupiao.html?date=2011-04-29&start=%E4%B8%8A%E6%B5%B7&arrive=%E5%8D%97%E4%BA%AC"

存在的问题:很慢,数据不稳定(同一个查询会有短时间内会有不同的结果)。不过这都是 12306.cn 的问题。
简单的界面: http://train.labs.ftao.org/ui/
有空用JQuery Mobile 写一个适合移动设备的界面。 (这个才是我真正的需求)

代码: https://github.com/ftao/cn-train-tool

Posted in python, 编程开发 - Tagged api, python, RESTful, 余票

S5Creator – 架构与设计模式(1)

十23
2007
1 Comment Written by Filia.Tao

S5Creator 是我最近在做的一个项目.

基于Web的S5 幻灯片创作工具
主页: http://code.google.com/p/s5-creator/
演示: http://dev.filia.cn/S5-Creator/HTML/editor.htm
该项目仍在开发中.

最近开发停滞不前了,除了时间上的原因, 另外就是技术上有一些问题. (编辑器器啊……)
决定先总结一下这个项目的架构,也给自己理一下思路.

整个S5Creator 我将它划分为如下几个组件.

  • 编辑器 编辑单张幻灯片
  • 缩略图 缩略图,同时用于不同幻灯片的切换
  • 主题选择器 选择主题
  • 工具列 提供对一些常用功能 (保存,新建,加载等)
  • 预览器 现在的实现是打开一个新的窗口
  • IO接口 配合不同的后端, 比如本地Javascript,PHP,Python

通过一个singleton 的 S5Creator对象来访问这些这些组件.

上面的前4个都是UI 组件, 我都是使用下面这样的思想来设计的.

  1. View 手工写的 HTML 和 CSS +基于模板生成的元素.(比如新建了一张幻灯片)
  2. Controller 通过CSS Selector 对元素附加事件处理函数, 同时这些CSS Selector 是可配置的.
  3. Model  使用 DOM元素本身,必要时添加定制的属性. (比如在按钮上添加action属性)
    再比如选中选中某一个幻灯片时, 我直接在该幻灯片上添加一个CSS Class.
    当然我也使用javascript对象来作模型,在不同组件之间传递时封装成一个slide对象。

代码说话, 下面缩略图视图组件的代码. (还有点乱, 不过基本成形了. 注意我使用了jquery 框架, 里面使用了一些jquery 扩展)
// 还是不贴了, 太长了. 看这里吧. thumbView.js

Posted in javascript, 编程开发 - Tagged design-pattern, javascript, S5Creator

再谈在线幻灯片服务-编辑器

十02
2007
Leave a Comment Written by Filia.Tao

主要是谈谈编辑器的问题. 主要有两类, 基于Flash / 基于HTML/AJAX 的, 基于Flash 的我不懂, 就不说了.
我尝试了很多现有的在线幻灯片服务, 比如Zoho , Google Presentation 等, 发现

  • 编辑器都没有使用document 的designMode 来实现.
  • 都没有查看/编辑源码功能.
  • 都提供可改变大小的文本框来输入文字
  • 都提供类似层的概念, 内容可以层叠.

这样做的原因我想大概是符合传统的桌面软件的使用风格. 但是这样的情况下, 不能使用很多现成的WYSIWYG 编辑器(都是基于designMode 的), 自己设计这样的一个编辑器会比较复杂.

现在比较迷茫, 到底是使用那种方式呢?

Tagged editor, slide

放弃WYMEditior,改用TinyMCE

九17
2007
Leave a Comment Written by Filia.Tao

最后还是决定放弃WYMEditor , 使用TinyMCE. 可惜了很多花在放在改造WYMEditor上的时间.
放弃的原因,简单来说它还不够成熟, 一些特性不是我需要的. 具体来说:

  • 浏览器支持问题. jquery 支持opera ,但是它不完全支持.
  • 发现我要的还是WYSIWYG , 不是 WYMIWYG. 它的一些特性用不到.
  • TinyMCE 更成熟, 文档详细. 而且也能产生高质量的代码. 除了大了一点, 不是用jquery 写的 (应该也不会有冲突)外, 完全符合我的需要.

开始转换成TinyMCE.

Tagged web-tinymce-wymedtior-S5-Creator

WYSIWYG 编辑器的原理

八25
2007
1 Comment Written by Filia.Tao

以前写过这篇文章, 几个WYSIWYG编辑. 一致很好奇, 这样的可视化编辑器是如何实现? 功能那么多. 做了一点研究,发现事情并非如有原来所想. WYSIWYG编辑功能其实不是由这些编辑器来实现的,而是由浏览器自己实现, 这些编辑器只是进行了一些封装. (屏蔽不同浏览器的不同实现, 提供工具栏等等.)

  • 打开浏览器的编辑模式, 只要将要编辑的文档设置为 document.designMode = “On” .
    访问这里 ,添加启用designMode的书签, 访问页面是点击书签就可以编辑页面了.
  • 大部分WYSIWYG 编辑器的功能, 比如自动加入回车自动加入<p>.列表下回车, 新增项目等都是浏览器实现的. 这就解释了为什么几乎所有的编辑器都是同样的行为.
  • IE可以实现仅对某一个元素进行编辑.
  • IE在designMode 下所有元素都可见 , 也就是 display:none不会有效果. (这个昨天折腾了我一个晚上, 测试页面(当然请用IE打开测试))
  • IE 中指定了高度(宽度?)的元素会出现边框, 可以调整大小.

我现在在研究WYMeditor (What You See is What You Mean ), 这个编辑器可以产生质量比较好的代码, 不会插入font 那种垃圾代码, 通过添加className 的方式格式化文本.

Posted in javascript, 编程开发 - Tagged design-mode, IE, javascript, WYSIWYG, WYSIWYM, 所见即所得编辑器, 编程开发
« Older Entries

授权方式

Creative Commons License
本站作品采用
知识共享署名-非商业性使用-相同方式共享 3.0 许可协议
进行许可。

最近评论

  • carlos 发表在《yacc,ast and graphviz》
  • xiang 发表在《关于我》
  • healthy green tea 发表在《debian 同步系统时间》
  • Filia.Tao 发表在《Kinper – A Kindle Helper Service》
  • pensz 发表在《厦门行简单记录》

My Tweets

RSS My KnowHowSpot

标签

指令 汇编 算法 计算机科学 2008 amazon android ast boto C++ C/C++ compiler Computer design-pattern DFA Django ezengage Firefox github google GSoc http imagedownload iterator javascript jquery kindle kinper lex life Linux locationbar Mix opensource proxy python s3 S5Creator shanghai slide STL vector vista web Web开发

分类

  • ideas (2)
  • job (2)
  • life (2)
  • notes (1)
  • opensource (38)
    • Firefox (17)
    • GSoc (7)
    • Linux (13)
  • project (3)
  • 生活 (3)
  • 编程开发 (67)
    • C/C++ (4)
    • GAE (1)
    • http (2)
    • javascript (24)
    • python (20)
    • Web开发 (12)
    • 端口映射工具的实现 (6)
  • 计算机科学 (23)
    • compiler (17)
      • lex (11)
    • 算法 (5)
  • 随便写写 (67)

文章归档

Blogroll

  • 11′s SKY
  • 86's world
  • Filia’s Summer Of Code
  • limodou的学习记录
  • Loki
  • MyAllBlue
  • perol’s blog
  • Realazy
  • 一个藏袍
  • 人猿星球
  • 冰古Blog
  • 刀枪Blue
  • 懶懶喵日記
  • 桑林志
  • 白菜
  • 车东[Blog^2]
  • 释翼的天空
  • 阿文的自留地

开源网站

  • beagle
  • linuxsir
  • sourceforge
  • 中国Linux 公社
  • 啄木鸟社区

我的项目

  • ezEngage
  • KnowHowSpot

EvoLve theme by Theme4Press  •  Powered by WordPress 飞纯技术