最新发表

jQuery Image 缩放特效

DM作为一种常见的商业推广媒体,主要是使用图像作为产品推广模式。这一点和电子杂志的图文混排有所不同。

目前,对于前端技术的选择,我还没有特别的头绪。面前有许多互相竞争的技术。

曾经一度非常流行的电子杂志基本采用Flash技术,观察Flash电子出版系统中,仅有一种是以JPG/PDF作为批量出版的可以作为借鉴。但是是否可以在Linux服务端进行自动批量处理,我还没有找到方法。但我相信可以找到一些许可证相对宽松的制作软件。尽管Flash是行业标准,但是我觉得采用公开标准HTML+CSS+JS会比较友好,至少对SEO来说非常重要。

看了看Walmart/Carrefour的电子DM,都是以Flash为主体制作,不仅仅是图片缩放,已经包含了大量的对象选择之后的操作,如打印,转发等等。效果很好,就是加载速度慢。都需要30秒以上。所以,我希望能够以JavaScript作为替代技术。简单功能要求:

用户前端:

  • Thumbnail,将所有DM彩页做概览鸟瞰;
  • 被选中的DM可以按照对开(50%)、单页放大(100%,可拖动)进行查看;
  • DM中被选中的商品可以展开,并呈现各种操作和信息。

制作前端:

  • 后台产生Thumbnail,所有彩页有足够小的图;
  • 后台产生50%图,并和原图一起进行自动切割;
  • 批量上传商品信息(CSV/Google Docs);
  • 手工对照片进行多边形选中,并输入(或从CSV文件匹配)信息;
  • 后台根据用户坐标对100%原图进行切割,更名,复制。

Google/Bing/Yahoo地图API可以很好地支持图形缩放,加载速度很快。是一种可供选择的方式。但是将DM投影在地图中,必须产生对应的URL,并支持用户在图上点选操作,这些都已经实现。但是这些地图操作都是以点为基础,而不是以矩形或者多边形为基础(尽管也可以实现,相对复杂些)。操作起来不太优雅。但是可以实现批量处理。

jQuery作为Web前端特效的主流框架,可以实现诸多功能。其中使用ImageMap可以实现对于目标的选中和操作。但是背景图往往作为一个整图加载。速度很受影响。如果背景图片(即使是50%中等图片)能够按照HTML Table方式切割,才可以加快速度。

最关键的一点,谁来做商品的手工选择和录入?唯有超市管理方或者商品供应商。在一切没有想清楚之前,先采用GIS方式+Flash用户定制的方式。

免费资源依然可用,只是方法不同

由于GAE的DataStore限制,我原来设想将GAE和DataStore和LAMP服务器中MySQL通过API互连。但是这样将问题复杂化了。尤其是许多数据库表都需要索引,而在服务器之间寻找外键实在不是一件安全的事情。

所以,我现在重新构建的网站结构将使用单一LAMP服务器保存关键代码和数据,另一服务器作为图片服务器(许多IDC提供每月高达10GB-250GB的带宽和1GB存储空间),而GAE只是作为前端推广使用,所以GAE负责前端代码(JavaScript)和用户AAA,而基本不保留任何数据。

Mercator Projection 最终算法和代码

根据Mercator Projection的原理,最终算式是:

输入参数:Latitude, Longitude, Zoom

输出参数:X, Y, Z

X = (Longitude + 180) x 2zoom / Π

Y比较复杂些,首先需要将Latitude转化为弧度:

Latitude’ = Latitude ( Π / 180),

Y = | 0.5-log((1+sin(Latitude’)/(1-sin(Latitude’)) | x 2zoom

至于为何是这个表达式,请参阅此文。我的Python代码如下:

#coding = utf-8
#filename: gmap_url.py

import cmath, os, math, random, sys

if __name__ == '__main__':
    lat = float(sys.argv[1])
    lng = float(sys.argv[2])
    zoom = int(sys.argv[3])

    x = (180+lng)*pow(2,zoom)/360
    sinLat = cmath.sin(lat * cmath.pi/180)
    temp = cmath.log((1+sinLat)/(1-sinLat))
    y = abs((0.5- temp/(4*cmath.pi))*pow(2,zoom))
    print int(x),int(y)

Google 地图的墨卡托投影的算法

Mercator 投影是将地球表面映射在围绕赤道的圆柱体上的一种投影方式。谷歌地图就是采用的此种投影方式,由于谷歌地图等系列产品都将投影地图切片,所以通过经纬度获取谷歌地图的切片坐标就可以获取谷歌的图片信息,也可以自己进行定制地图。用处很大。但是我将它想简单了。所以出来的结果X轴上的经度切片位置都对,但是Y轴上的纬度计算总是错误。后来我发现我受了一些网络广泛传抄的代码误导。属于典型的立体几何领域问题。

Mercator Projection

Mercator Projection

以下这篇文章简单地介绍了在Y轴计算上的问题:

http://www.97sky.com/article/2010/0419/article_156.html

也没有功夫再计算了,只想获得最简单的方式:将俺家的X/Y/Z坐标作为原点,所有的海报在规定缩放技术平铺开来,这就是最简单的方式。

加载大图浏览器

在谷歌地图中加载自己的图片,可以实现巨大图形的浏览。在线演示:http://www.ennovation.org/test/imagemagick-crop/

新地址:http://www.ennovation.org/test/dm-crop/

目前主要作为超市海报浏览器,之后将针对医用和专业目的的图片浏览器使用。本服务器速度一般,但是加载图片的速度尚可。

更新,超市海报阅览器虽然可以用谷歌地图API来做,但是有缺陷。拟采用微软DeepZoom/SeaDragon来做,原理类似,但是效果更加顺滑。演示网址删除。

Scrapy 爬虫测试记录二

今天在Ubuntu 10.04上再度测试Scrapy,主要因为大部分的工具都集中在Linux下,所以Linux下需要调通所有脚步。

没有想到Ubuntu下的Python2.6安装库名字该了,路径为: /usr/local/lib/python2.6/dist-packages,而不是site-pacakges。

设置了$PYTHONPATH,而Scrapy下Python库中使用default_settings.py,不是settings.py,复制一个即可。

另外,教程中的pipelines.py是最简单的CsvWriter,而且没有遍历返回Item的内容,比较粗超,而且也没有考虑Unicode转换问题,总是出错。相比之下,这篇博文给出的例子比较详细。可以将结果直接包存在Sqlite3数据库中。

Anyway,针对wal-martchina.com网址中的爬虫初步定制完毕。也算迈出实际第一步。

Scrapy爬虫框架测试

Scrapy 项目文档非常齐全,按照它的指示一步步走下来,对AOL的DMOZ黄页进行抓取,没有特别的问题。是一个非常实用的工具。

Windows下安装需要注意自己的 Python 版本,我的是2.5,并且需要设置系统路径和PYTHONPATH路径。此外需要安装如下组件:

  • Twisted:Python语言编写的事件驱动型网络引擎;
  • Zope Interface:Python对象接口;
  • pywin32:Python for Windows 扩展
  • libxml2:Python XML 解析库;
  • pyopenssl:HTTPS支持,高度推荐;
  • simplejson:JSON序列化和反序列化,选装;

Ubuntu 下很简单:

apt-get install python-twisted python-libxml2
apt-get install python-pyopenssl python-simplejson

使用过 Django 框架的人很熟悉 startproject 指令建立项目,Scrapy 照搬了这个核心逻辑。Web框架使用MVC,而Scapy框架也可以套用,只不过M是在根据目标网站建模,V采用Pipeline变成CSV/XML结构化数据,而C就是Scapy内核和控制逻辑了。

按照教程一步步走,然后找一个网站抓取。项目中还内置了一个针对谷歌的抓取样本项目。

采用 Scrapy 框架抓取网页数据

啧啧,现在连爬虫都有框架了。

Scrapy Project

Scrapy Project

Scrapy 是一种 Python 应用框架。该框架在使用上吸取了 Django 框架的某些结构。当然了,我相信 Perl 等脚本语言也应该有此类开源爬虫框架。

看了看它的文档说明,主要具备了以下的功能:

  • 内置对于HTML/XML源文件内容的选择和提取(好像基于BeautifulSoup);
  • 内置多种数据输出格式,如XML,CSV和JSON;
  • 媒体流水线,可以抓取和捕获数据相关的图像文件和其他媒体文件;
  • 支持对于该框架的扩展,可以开发自己的中间件、扩展件和流水线;
  • 内置大量中间件和扩展,处理压缩格式,快取,Cookie,用户认证,代理spoofing,robots.txt处理,统计,抓取深度限制等等;
  • 交互式抓取Shell终端,有助于编写和调试爬虫脚本;
  • Web管理终端,主要用来监视和控制爬虫;
  • Telnet终端,在Scapy进程中无限制访问Python终端,可以检视和调试爬虫(这一点没有理解)
  • 内置的记录,收集统计和发送电邮通知功能;

很强大吧,就是需要安装一大堆的其他库和组件,建议直接在Linux上,尤其是Ubuntu上比较省心,在Windows上要设置一大堆东西。

又看了看它的使用者,有一些网站专门就是收集家具类供应商的数据和图形,每天要扫描多达1000多家网站数据。绝对是搜索引擎专用的工具。

利用 Python BeautifulSoup 抓取网页表格数据库

传统Web1.0设计中,往往将数据库表通过HTML表格暴露给外部,这就是公开信息的重要来源。但是HTML表格属于半结构化数据,需要通过网络爬虫和解析来进行数据提取(Data Extraction / Data Harvest)。

目前我在收集各类连锁超市信息,免不了针对连锁超市网站进行抓取。如农工商超市集团下属四个业态品牌总计3200家门店。我一开始采用wget + DOS批处理方式来下载160个网页到本地硬盘。然后将该网页加载到我的localhost服务器,再利用 Python BeautifulSoup 进行解析。解析其实仅仅进行到一半,因为其中的URL我未能够顺利抓取。需要另外写一个脚本。

BeautifulSoup 其实是针对HTML/XML的分析脚本模块。

道理很简单,基本上和DOM模型很像,但是相较 Perl 天书一样的正则表达式,Python 比较容易些。Python / Perl 都是网页抓取和分析的重要工具,但是到目前为止,我尚未找到一个能够兼顾多方抓取需求的工具,雅虎的Pipe是很牛叉,但是,我觉得它不能够支持命令行模式,是一个重大遗憾。它适合哪种需要定时抓取 Delta 数据的服务。如果利用 Python/Perl 的可视化方式开发一个通用目的的,可抓取一定深度的网络爬虫,并利用GUI方式提取其特定内容的工具,应该是很有应用价值的。

检索大型超市网站记录

早晨开始对目前所了解的35家连锁超市品牌网站进行检索,主要收集如下信息:

  1. DM彩页广告网址
  2. 连锁店地址信息

其中DM广告彩页将被加工为Tile,而连锁店地理位置信息将进行地理检索和匹配。因为初期,我仅仅希望新的项目成为一种混合雅虎黄页、谷歌搜索和维基百科的新设计。但是,检索下来的结果体现了不同品牌对于其信息的处理态度。这里列举一些:

  1. 沃尔玛旗下主要是沃尔玛购物过程,山姆会员,沃尔玛社区、惠选以及好又多TrustMart,所有沃尔玛门店信息公开,彩页公开,并按照地区进行打包;
  2. 家乐福大型超市门店信息采用AJAX表格,我不得不手动下载,彩页采用Flash包装,要获取彩页图片必须使用Flash反编译工具。这种方式不利于彩页分发,但是它提供了电邮进行补足,但是可以看出家乐福对于信息采取的是保护方式;
  3. 迪亚天天,同为家乐福集团品牌,但是所有网站设计采用原生态Web1.0,彩页和门店信息均公开;
  4. 好又多,除了在沃尔玛网站上有彩页,其自己服务器上只有一个Flash Demo。好在门店信息是公开的;
  5. 华润集团下属多个业态品牌,彩页公开,但是没有分类,有些混乱,门店信息找不到;
  6. 德国麦德龙,彩页和门店公开,但是麦德龙的业态不太适合普通消费者;
  7. 英国易购,彩页和门店信息公开;
  8. 法国欧尚,门店信息采用地图显示,彩页设计使用简单的JS放大镜,算是公开的;
  9. 泰国正大集团的卜蜂莲花,有公开门店信息,但是根本没有彩页;
  10. 韩国新世界下属易买得,完全采取了信息封闭式的设计,不提供在线彩页和可以简单获取的门店信息,其中门店信息采用文字转换为图片的方式防止第三方获取。无语……,虽然我可以OCR,但是我讨厌这么麻烦的供应商;
  11. 农工商超市集团下属农工商、好德、可的、五元,全部迁移至便利通网,采用Web2.0,我不得不采用wget把所有信息下载后,用脚本进行表格解析;
  12. 华联吉买盛,门店信息公开,彩页广告早已过时;
  13. 世纪联华,采用谷歌地图呈现门店,无彩页信息;
  14. 罗森便利,门店信息公开,但是缺乏精确地址;
  15. 台湾润泰集团下属大润发,无自有网站;

目前,我收集到的门店信息主要就是以上几家,大约在1500家门店。而国内几大超市集团如华润集团、百联集团、农工商集团下属应该平均有3000家门店。再加上香港、台湾和日本系统的便利连锁(屈臣氏、福满家、7-11等),基本上收集完毕之后会在13000家店面左右。

设计中将采用网络爬虫方式定时去下载彩页信息,并切割上传到网站,提供给消费者做购物参考。当然需要鼓励连锁超市管理方、产品供应商和消费者共同参与到这个超市信息结构化数据库和搜索引擎的信息提供中来。

这里面我主要利用wget, curl, imagemagick, bash, perl, python, php, regrex, flash decompiler, jQuery, Google map等使能技术。

其中,利用wget和DOS batch批处理下载便利通网站上的农工商超市门店信息的方式是:

for /l %%i in (1,1,160) do wget http://pay.chblt.com/Content/OutletsSearch.aspx?pid=%%i -O outlets\outlets_%%i.html

由于wget可以下载带HTTP GET参数字符串的URL,但带参数存储有些问题,所以,我采用了10多年前的DOS批处理解决问题,当然Bash Shell 脚本也可以。如果加上Python/Perl的HTML Table Parser脚本,就可以一次性全部抓取所有的信息。其实,这个工具值得作为一个商业软件推广。加上简单的UI就好了。

目前,越来越多网站采用AJAX方式,所以日后可能需要采用Java/Python等可以支持JavaScript的程序来做下载爬虫。