Recently in WebApplication Category

2008年10月 3日

swfUpload与Codeigniter整合以及#2038错误解决方法

关于Codeigniter整合swfUpload,官方WIKI里面已经说很明白了,不过上传之后发现无法获取Image_width属性,想来应该是is_image判断出问题了.
Upload.php(library)第500行,is_image函数:

$jpeg_mimes = array('image/jpg', 'image/jpe', 'image/jpeg', 'image/pjpeg');

增加一个 'application/octet-stream' 数组子项即可.


使用swfupload2.1版本的时候遇到#2038 IO读取错误,狗狗搜索了一下没发现什么特别的解决方法.
琢磨了半天,发现如下:

假定IE设置了代理,swfupload 100%会出现#2038错误.

So.取消IE的代理就OK了.原因不得而知.


2008年8月 4日

使用Gmail为Discuz论坛发送激活邮件

使用gmail作为discuz论坛的邮件发送必须要apache/php支持OpenSSL.使用phpinfo()便可以看到PHP是否支持openSSL.

openssl
OpenSSL support   enabled
OpenSSL Version   OpenSSL 0.X.XX 23 Feb 2008

打开discuz论坛(6.1)的/include/sendmail.inc.php
54行改为:
fsockopen('ssl://' .$mail['server'], $mail['port'], $errno, $errstr, 30))

再参照Gmail帮助系统的设置一下Discuz的邮件发送参数即可.
Gmail的SMTP必须要通过SSL来连接,SMTP端口号是465.

邮件发送必须选择"通过 SOCKET 连接 SMTP 服务器发送(支持 ESMTP 验证)"

值得注意的是,apache支持ssl还不够,必须要php支持openssl才行,需要修改php.ini的设置.

上网搜索了一下,很多人发送不成功.反正我是成功了,呵呵~~




2008年7月18日

TinyMCE在线编辑器取值的问题

TinyMCE初始化之后,通过其他的方法都无法取到它的值.也无法用js来判断它是否为空.
通过查询手册,找到方法,特此记录一下:

var myContent = tinyMCE.get('editorArea').getContent();


2008年7月16日

Mootools-字符匹配与搜索

在用海内的时候,输入好友名字的时候会由一个自动提示的功能,在加入班级时,按照省份列出学校也会有一个搜索框,输入一个汉字就可以将含有这个汉字的大学名字列出来.并且将该关键词高亮. 如:输入"美"字,将会列出"中央美术学院","北京美国英语语言学院"等搜索结果.

搜索结果奇快,完全不需要查询数据库.只是事先必须将所有数据以JSON格式存在页面上.

按照这个思路,我用Mootools实现了一个这样的实例. 主要用到了Javascript的indexOf()和Mootools的Event和JSON相关的函数.

核心代码如下:(点这里看实例)




2008年6月27日

Google Gears 初体验

最近抽空研究了一下Google Gears的API,并动手写了一个小玩意.感觉很不错,特别是因为之前没有接触过SQLite,没有想到数据库还可以这样玩,Gears提供了一个接口可以使用javascript直接操作数据库.在本地存点东西还是很方便的.

Google Gears是一个浏览器增强软件包,它可以让您的Web Application在离线的情况下也可以使用,并且内置了一个SQLite数据库,提供数据存储,还支持HttpRequest和Worker Pool,对于在线软件来说,是一个非常有用而且很有意思的玩意.

Gears推出有快一年了,最近正在大量装配Google系的产品,如Google calendar, Google reader, Google Docs等.连WordPress都要使用Gears来作为离线功能的支持了.我非常看好类似的产品,最近在Apple推出的Snow leopord内包含的Safari 4貌似也有类似的功能.可以想象,SAAS时代,离线应用是多么广泛.我也在考虑是否给BBCASH也装配上Gears和AdobeAIR,那可就好玩了.

著名的GTD工具Rememberthemilk的产品就使用了Google gear作为他离线使用的功能支撑,可以说应用得非常不错.我也尝试着为自己写了一个TodoList工具,方便自己的日常事物管理.

照例使用CodeIgniterMootools作为开发工具,SQLite管理工具SQLite Expert Personal,外加Google Gears API文档,写了两个晚上,基本上实现了在线存储、离线存储和数据同步功能.不过现在还没考虑用户管理模块,等更完善一点后挂上来再请高手指点,截图如下:

mpo.gif

如果在升级中遇到问题,比如1603错误之类的,建议使用微软出品的Windows Install Clean up工具先清除安装数据和记录再行升级.

BTW:
1.Dojo已经开始支持Gears了.推出了一个Offline模块,跟进速度真快.啥时候Mootools也有就好了.
2.有人写了一个Gears的ORM,很牛,还没用过
3.Gears最新版本已经支持Firefox 3.0了. 非常推荐使用.



2008年6月18日

看Google中国的生活搜索的产品细节

Google生活搜索是Google中国公司新推出的一个产品.

生活搜索集合了G家的搜索和地图两大拳头产品,是一个交集,也是一个很好的衍生案例.不过,在使用过程中,对这个产品还是有点失望的,Google因为其首页的设计,被成为是用户体验大师.但我们不能过分的神话Google,毕竟事情也是人做出来的.人的因素在产品设计和实施的过程中的影响是非常显著的,我认为在这个过程中,应该将设计人员的个体影响缩小到最少,而为用户的考虑放大到最大.

好话就不说了,下面说说我觉得还可以改进的地方:
1.粘性表单
在生活搜索的搜索表单上,并没有使用粘性表单的设计,而在google.cn首页是使用的.如果说是因为房屋、工作、票务、餐饮不适用与使用的话,那么切换城市总应该要"黏"一下吧? 我觉得这样会让用户行为更为流畅.

2.首页布局
延续google.cn首页的简介布局当然是不错的,不过生活搜索的首页下方文字确然人有点迷糊,我们来看看:
gs_1.gif

搜索1000多个网站的房源信息.与切换城市、热点业务和地域快速选择的区块中间莫名的插了一个地震寻亲.

由此可以看出,google的工程师文化对用户体验的影响是如此严重,设计师在Google肯定是超级没地位的^_^

在如此简洁的页面,却没有一行引导用户快速选择地区的文字.切换城市的链接使用10px的文字,目的是让人看不清楚?搜索框上方的提示性文字使用灰色就很好,有层次,也能起到作用.这样的细节在其他地方怎么就得不到延续呢?

BTW: Google生活搜索的前端页面技术其实也不怎么讲究,表格和div混用.CSS也有点乱,缺少美感:)


3.用户最关心什么?
gs_2.gif在搜索页面的右侧,由一个这样的图表,工作搜索结果页出现的是行业分布,餐饮搜索结果页出现的是菜系分布,房屋搜索侧边出现的是地图和租房价格走势.很有意思,也很值得思考.

为什么会是这样的内容?还跟随页面滚动而滚动,应该是和用户相当有关联的内容了.但普通消费者真的会对行业或者菜系分布有兴趣吗?恐怕这也是数据挖掘或研究的结果,只是想表示一下google知道这些数据?

工程师文化对用户体验和运营的影响又出来了:)这样的例子下面我们还有.

这个地方适合放什么,我想得仔细考虑考虑用户的心理和阶段生命周期了.呈现热门搜索结果、相关职位或供求关系比例数据也比这个来得更有用.

产品设计的各个细节如果不随时考虑用户或运营的需求和方针,做出来的产品可能真只是产品了.

BTW: 租房价格走势不怎么准确,至少长沙的不太准确.



4.手机短讯
gs_3.gif昨天测试了一下免费发送到手机的功能,结果收到的是这样的(如图).

很显然,参考价值不大.还不如生成RSS添加到Google reader. 有点类似Google alert那种关键词监测并通知的意思.

很奇怪的是,Google为什么用的是腾讯科技的短信通道呢?

难道Google就不打算自己申请一个SP执照或收购一家SP公司嘛.


5.关于地图
地图功能很好很强大,但有几个小细节需要优化.框选搜索和点选搜索按钮离地图远了点吧?左文右图的布局让人感觉有点别扭.不太习惯.
点选搜索的示例关键词"王府井",搜索结果为0,这会让人质疑点选搜索的有效性和准确性.

从Googlechinablog了解到,生活搜索目前也只是一个Beta版本,不过比其他产品的Beta水平来看,确实还不够Google水准, 不过Gfans们也不要迷信Google.


今天太晚了,下次有时间接着写.





2008年6月14日

基于Mootools的图片标注

用过FlickrYupoo的童鞋可能都知道图片标注的功能,其实就是可以在图片上直接发表评论或者留言.因项目需要,用Mootools写了一个图片标注的功能,目前功能还比较简单,很多小的细节还可以优化!

CSS写得比较乱,局部也用了些表格,这都不是重点,关键是Javascript的实现.这个示例中主要用到了MootoolsEvent / Element 类和 Drag 插件。

演示页面请点这里


附图一张,就是这种效果~
photo_tag_demo.jpg

可以扩充的细节和功能:
1.用ajax保存Note.并在图片载入完成之后,再载入Note数据.
2.图片太大的话,可以做一个loading动画
3.删除Note.


2008年6月11日

Mootools Update to 1.2 !

Mootools 1.2 Dev 了很长时间,终于迫不及待的发布了.连新版本的demo都还在编写中.

官网同时也改版了.Mootools的Logo有些小的改动,事实上我觉得原来那个黑色版本挺裤的,干嘛要改成白色呢?

1.2版本提供了不少新东西,最爱的就是集成了SwfUpload,什么时候可以像Dojo一样搞一个Offline模块呢...

顺手做了个Mootools 1.2 的文档镜像到本地,供国内开发者和我自己查阅.

Mootools 1.2 文档/手册


上次做的Mootools范例依然有效。


2008年5月19日

FireFox 3.0 对CSS解析的18项改善

FireFox3 Beta了5个版本,终于RC1了,自从Beta4之后,对内存泄露的问题的改善以及Javscript解析速度的提升确实给人感觉不错.因为遇到一些FF2和FF3在CSS表现细节上的不同,于是查阅了一下FF3对于CSS解析带来的改变.本人粗糙翻译,原文链接在此.

FireFox 3 对CSS解析的18项改善:

  • Display属性的inline-block和inline-table已经被支持
  • font-size-adjust属性已经可以在全部平台上使用(之前值支持Windows)。
  • rgba()和hsla()这两种色彩描述方式已经可以在color属性中使用
  • 开始支持:default伪类
  • -moz-max-content, -moz-min-content, -moz-fit-content和-moz-available 已经 加入到Width,min-width,max-width属性中
  • HTML的软联字符(­)已经被支持
  • 在等宽字符的环境内,预格式化tabs在FF3内可以工作得更好(依据CSS2.1规范)
  • ime-mode已经被支持
  • text-rendering已经被支持.
  • -moz-border-*-start and -moz-border-*-end等CSS属性已经被支持
  • -moz-initial 已经可以在全部的CSS属性内使用 (除 quotes 和 -moz-border-*-colors 之外)
  • window.getComputedStyle()支持所有被支持的CSS属性
  • 无内容的content已被支持
  • 空关标属性cursor:none已被支持.
  • 背景图在 -moz-border-radius 下已经可以被正确的裁剪.
  • white-space属性已经支持pre-wrap.
  • 选择器类似first-child,:only-child,:last-child,:empty和 + 号连接符可以被动态更新.
  • z-index的负值已被支持.



2008年5月14日

Adobe Air !

Adobe AIR是个很奇妙的东西,通过Air SDK,前段工程师可以很轻易的编写基于AIR技术的桌面应用,发布的文件包是air格式的,运行的机器上必须安装有Adobe AIR.

测试了一下,可以说Adobe AIR颠覆了我对桌面软件开发的概念.

下面是两个基于AIR技术开发的桌面软件:
1.桌面版的Google analytics

google analytics desktop a

google analytics desktop b

 

2.桌面版的Twitter软件

twhirl

要使用这种软件,你需要下载Adobe AIR,一种类似于JAVA虚拟机的东东,不过似乎比JAVA虚拟机要小,只有十来MB.

getAir

 

 

2008年5月13日

Google Analytics 跟踪代码更新了!

今天去Google analytics看统计报表的时候,偶尔发现Ga的统计代码有新版本了.javascript主文件名由urchin.js改为了ga.js
大致的看了一下.据google说是文件体积减小了,而且可以有更多更灵活的方式来进行更丰富的统计分析.

原来的形式:


新的代码:


建议站长去更新一下代码!





2007年10月18日

钱宝宝网络账本技术细节

钱宝宝网络账本是我使用LAMP平台做的第一个相对完整的网络应用,有不少朋友问及其中的一些技术细节,其实我在PHP编程这块经验还不是很多,大致说说钱宝宝的开发过程。

钱宝宝网络账本最初的出发点是因为我和我老婆想使用可以自动统计的账本,找不到一个适合我自己使用的记帐程序,理财软件太复杂,一些记帐网站的功能又莫明其妙,不适合我这种70年代的人。于是就想到自己写一个。

理所当然,我采用了我相对熟悉的Codeigniter framework来进行开发,数据库采用Mysql,事实上Codeigniter兼容sqllite/oracle/mysql,但相对现在的数据量来说,mysql显然是最好的选择。

开发的过程中使用到了Pear,ajax等第三方库,方便了不少,节约了不少时间。整个网站采用xhtml标准,在Firefox/IE6下面测试基本上非常接近。

下一步的开发计划已经定下来了,正在实施过程中,不久后,大家会看到一个功能更强大,更容易使用的网络账本程序。



2007年7月15日

关于CSS代码重用的可能性

最近和火星同志在做项目的时候,发现,一旦设计发生改动,之前写的上千行CSS代码全部要废弃,于是产生了一种想法,能否让CSS代码重用率增加?

我的想法是:
1.写一个PHP程序来进行代码管理.所有的CSS属性值全部入库,通过这个程序来管理曾经写过的N多CSS代码,需要的时候,在程序里面选择,重新将以前的CSS代码进行重新组合。

2.对CSS命名和包容结构进行模块化设计,形成自己的规范和标准。然后按照模块来编写相关的CSS,编写的时候,定位与视觉表现分开。比方说命名为:modelName-layout.css 和 modelName-visual.css,然后有选择的Import到页面 .


Google了一下,没发现此类软件或者管理CSS代码的工具,不知道那位同行有好的解决方案,请不吝赐教。

2007年4月 1日

湖南卫视.快乐阳光旗下金鹰网视觉设计

从新年开始.我们便开始参与金鹰网的建设.主要从事视觉设计方面的工作.经过一段时间的努力.网站于今天凌晨上线了.

金鹰网目前是湖南卫视旗下唯一具有节目合法版权的网站.此次改版是因为快乐男声网络海选活动的需要.

参与建设的还有康盛(Discuz)微视(Movivi).分别为金鹰网提供社区产品和视频产品.
作为长沙本土设计团队,我们很荣幸能参与此次项目,对我们的设计/执行以及协同能力也是一次非常的考验和锻炼.

网站终于上线了,工作也即将告一段落.很感谢各位朋友对我们的支持.

hifly_1.jpg

hifly_3.jpg

hifly_2.jpg

 

2007年1月26日

祝福我吧网站PVC卡面设计与网站设计

关键词: PVC卡、设计
zhufu58_pvc.jpg

zhufu58_web_page_design
“祝福我吧”网页设计!

关于本页归档

This page is a archive of recent entries in the WebApplication category.

上一类别:Software Review

您可以在首页找到我最近发表的文章.或在归档页查看全部的文章标题.

Powered by Movable Type 4.0