Ojisan.Me 终于做好了,正式上线!

Ojisan.Me 终于做好了,正式上线!

来源:Meon@Ojisan.Me@2015-4-20分类:學
Like55
扫描二维码分享
分享

Oh yeah,网站终于上线了。从开始制作到正式上线差不多用了一个月左右的时间,中间遇到了很多的问题,但是总体来说实验还是很成功的。

网站制作目的:测试横屏网站的可行性以及制作成本

制作时间:预计一个月,实际差不多也就用了一个月吧

主要实现的目标:

  1. 后台的图片上传组件的编写,包括上传,裁切图片,上水印
  2. 后台二维码生成,附带水印功能(使用了ThoughtWorks.QRCode.dll)
  3. 制作了tag标签系统
  4. 前台全页面横向滚动显示,目的是提高页面使用效率,提高预读体验
  5. 缩放自适应浏览器大小,保持高度100%
  6. 手机端自适应
  7. 异步加载更多列表
  8. 图片lazyload(感觉没用,放弃掉了)
  9. 文章的横向显示(比想象的容易太多了)

实际实现的目标基本上全部实现了,我感觉最难的文章横向显示实际操作中比想象的容易很多

直接利用css3的 column 属性就可以实现,然后同步计算document的宽度给body赋个宽度即可,相对列表页的计算量来说还是小了很多,只需要算高度即可,比想象的简单太多。最早的设计方案是根据body的高度叠加分列的数量,实际上没用到这段代码(虽然写了)

尚未完成的部分:

  1. LOGO,白白和凯东求给力啊!我的棒棒糖啊
  2. 文章页面点击图片弹出放大图(懒的要死,这两天做好吧)
  3. 手机搜索页继续适配
  4. 搜索列表页的重新制作(现在偷懒直接用的list页的布局,无法凸显搜索内容)
  5. 加入一些表情
  6. 文章内容tag高亮
  7. 暂时还没想到

总结一下:

横向页面很好做。。。。真的不难。。。。主要还是利用css3和html5的便利(也就是说本站不支持ie6-8,部分支持9,xp用户再见)

横向页面虽然在浏览上我觉得更舒服了,但是最大的缺点就是。。。。。长图片显示出来就跟面条似的。。。需要切分,不过长图片浏览起来也不友好,而且一般 都是长微博转过来的,实际上文章的话横向浏览还是优势很大的。

宽图片支持好像也就那样,因为我设置的列宽是720,其实一般的图片都够放了。。。比720还宽放他干啥,传统网站模式估计也要缩小的(960-240=720 我还没算中间的10margin呢)

好了 基本就这些,庆祝一下上线好了

撒花~