外包成功案例展示, 给设计世博会大楼的公司做的官网

[sdjl]

客户网站: http://teamminus.com
客户是做建筑设计的, 在五道口, 代表作有世博会的大楼等

由我们团队设计+开发, 设计费用1w, 开发费用1w, 一共2w

提供完整的后台编辑和管理功能, 所有文案和内容都可以自行修改, 比如导航中的title, 以及按钮的文案, 甚至背景图的切换速度和时间等.

整站使用单页面多个div切换的方式设计, 不刷新页面(除了换语言), 且考虑了图片的加载优化.

我们坚持网站外包是一种服务, 而不是贩卖商品, 优质的服务才会有优质的成品, 感谢你对我们团队的支持, 我们就是那个喋喋不休的~~ sparker5 :)

[shuaige]

@sdjl 发邮件没回。有个外包，留下你QQ，详谈~

[passluo]

这。。。。不好评价啊。。。。

呵呵后。。

[thinkif]

挺好的，没感觉到卡

不过，就是腾讯分析的按钮有点。。。

[izon90]

好静态

[bzw875]

楼主 ie8 分辨率1440*900下图片的宽被压缩了一些，感觉有些模糊.

[moxuanyuan]

我想知，你们开发后台编辑和管理功能，是不是专门为这个网站开发，还是本来就有一套现成的？

[Maninlab]

建筑设计公司都喜欢这么干。以为都是艺术家。：（

[sdjl]

@mlc880926 刚才在线调试了一下

@est 嗯, 这个不行, 因为不能要求客户自己去压缩, 我用convert压缩了

@shuaige 好的, 我看邮件回你, 最近几天比较忙, 接了一个口袋购物app的相关的外包

@bzw875 谢谢, 我刚才用convert把图片质量压缩到50%, 尺寸也改小了一些, 可能影响到了图片质量. 估计只有同时压缩图片+优化图片加载顺序

@moxuanyuan 我们有自己的基于webpy开发的代码库, 也算是一个可以重复使用的框架, 对于这个网站的后台, 只需要写一个配置文件就可以自动生成了, 配置文件大概如下:


可以在配置文件中设置数据的添加,删除,修改,图片裁剪,搜索,提示,验证,布局,排序,过滤,隐藏数据等等功能, 这些功能都是预先写好根据model文件中mysql表定义生成的, 只需要在配置中说需要什么功能, 后台就有了, 后台的大概样子是:



这是我们自己开发的python建站框架, 叫做zarkpy

[sdjl]

我们每个项目的代码都差不多, 思路差不多, 方法差不多, 部署等程序都一样.

后台一样, 只是配置不一样, 主要工作在于与客户沟通, 设计, 以及前端开发

[skyahead]

iPhone 上从欧洲访问，2分钟左右才能load完首页。然后图片切换的时候好像重新load，结果就是不停的load，load，load。。。。建议对手机优化？

mac上访问很卡（图片切换的时候）。

[sdjl]

@skyahead 我们不打算对手机优化, 因为客户不买这个单 :)

背景图片切换的时候么? 谢谢提醒

[skyahead]

背景图片切换再macbook上有明显的停顿感。

[sdjl]

@skyahead 我缩短了背景图片切换的速度, 再看一下是不是有好转?

[skyahead]

感觉不明显。我觉得让图片渐进效果会很好。google了一个，下面两个plugin感觉不错。。。

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/

http://www.htmldrive.net/items/demo/914/Nice-jquery-full-background-image-slider

[sdjl]

其实, 这里有一定的难度, 首先每张背景图片的尺寸是不一样的, 设计上要求每张图片都能竟可能的在不同尺寸上满屏显示, 也就是不同的设备和浏览器尺寸都要满屏显示, 同时还不能让图片变形

且此功能要兼容ie6, 因此使用了我们的bgimage的fx, 大概代码如下

<div>
<img src='a.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
</div>

另外, 这里要求背景图片实现hover按钮时切换, 因此又使用了一个fx: cycle

代码大概变成这样:
<div fx="cycle">
<img src='a.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
<img src='b.jpg' fx='bgimage'/>
</div>

这是一个成本问题, 如果以上两个功能自己重写, 工作量就会很大, 特别是要兼容ie6的话


大家反应的切换时卡和闪的问题, 暂时没有找到确切的原因, 猜测可能主要是因为网速较慢, 导致图片还没有加载好就开始切换导致看到了空白

我们先通过下面几个小办法优化一下:


1 添加默认的背景平铺, 弱化"闪"的感觉
2 给第一张图片添加先隐藏, load完成后再fadeIn
3 适当延长第一次图片切换的时间, 给出更多时间来预加载图片
4 延迟"项目"图片的加载
5 适当压缩图片质量, 减少图片文件

[sdjl]

@skyahead
@eary
@GinoSin
@spark

之前有一个bgimage fx的功能, 就是在改变浏览器尺寸的时候调整背景图的显示, 保持完整图片显示, 这个功能估计比较占用cpu资源, 我已经去掉了, 请帮忙看看是不是有好转?

[jjplay]

@sdjl 看着不错,一开始以为 都是纯AJAX的额,仔细一看都是页面里的,我两年前做过一个 http://www.egrid2000.com/,根据不同的localtion.hash ajax切换,我看着也以为你是呢,呵呵

[sdjl]

@jjplay 额 , 没有必要做ajax, 文字本身没有多少, 主要是图片比较占用带宽, ajax就增加复杂度了, 做好图片仅需要的时候显示就可以了