qunpin.net 静态页面

[Peiwen Lu]

大家好，静态页面来晚了不好意思，想做的再精细些的，时间不够，权当线框图吧

展示地址： http://epub-cn.tk/qunpin/

写了 robots.txt，搜索引擎应该搜不到吧

页面的设计，主要采用黑白配色，想营造一种书本白纸黑字的感觉，风格上向现在流行的简洁风靠拢，多使用 css3 js
等打造一个现代感强的网站。响应式设计，包括智能手机竖版、横版，平板电脑竖版、横版（桌面版），以及 retina
版。现在只有桌面版本，而且效果很差，远不是理想中的。

因为要用到 css3，ie8 以下不能完美兼容，可能要另作一些样式，这个最后再定吧。

细节地方请忽略，请大家考虑下每个页面上显示的内容合理不合理，哪里需要添加新功能，哪里需要出修改等等。这方面我没有什么经验，第一次合作，考虑不周到的地方，还请大家不要介意，多提醒下我。

自己本身学商，html css js
都是自学的，所以不满意的地方都可以直接提出来，我会很高兴接受，并找到解决办法。另外，不知道第一版网站要开发多久，怕自己耽误了大家进度。

几点需要说明的：

1. 登陆框想做成 twitter 下拉菜单式（twitter 账户登出后那个页面）；

2. 首页 slider 部分随机显示图书封面，鼠标移动到封面上，图片放大突出，并显示图书信息。这样是为了看起来整齐，并节省空间，掌上书院和万卷书，首页显示的图书并不多，看上去也有点乱。还可以根据选项，选择“最新上传”，“热门图书”，“推荐图书”
等等；

3. 图标字体用的是 http://fontello.com/

4. 方便整理 css，展示页用的 less，网站完成后导出为 css 既可。

其他页面上都有一点说明，请大家看过后给我反馈。我对前台，后台的技术完全不懂，需要什么，不妨直接给我留言，不要客气，尽可能跟大家配合好。

@张经纬 兄，以上很多东西在之前已经思考过，所以没跟你商量就先做出来了，更希望多听听你的感觉、回馈，然后我们一起完善这些效果。另外，我不擅长
js，虽然也能写一点，速度很慢，也不够熟练，js 的部分可能要多靠你了。

祝大家周末愉快！
Peter

[madawei]

Thanks @Peter for great jobs!

1、关于浏览器的支持：chrome 18以上，firefox 10以上，IE 8以上，opera 10以上（主要是支持手机版本的opera），safari。一个主要规则就是我们要打造极具现代感的页面风格，主要使用html5与css3，任何不支持html5或css3的都可以不用考虑，例如IE6，你做一个这样的提示：当IE6或者其他旧版本的浏览器访问我们网站的时候，可以弹出一个层，提升他如果要获得最佳体验，请安装最新版的chrome或firefox等现代浏览器，可以做个链接转向浏览器下载地址。

2、页面最好先按照你的理解来做出一套，然后细微之处修改的咱们完了讨论，有何短缺的页面我们需要的时候给你发邮件。现在我们还短缺后台管理系统的界面，就是后台管理员登录后对图书管理的界面，类似与wordpress的后台管理界面，可以查询到所有的图书，并对图书审核，上下架，对用户与管理员管理等，具体的需求在我们前台github的wiki上有，你去看一下需求，有何问题给我发邮件。

3、写robots，我们不允许搜索引擎搜索我们的信息。

4、在线编辑器的事，请@张经纬来做一套出来，我们做好后讨论。最好是可视化的。可支持markdown语法的。

5、关于首页，首页做的很漂亮，可以做个滑动的效果，按版块（最新上传，精校版本，最受欢迎）来滑动，滑动按钮可以做在两边，点击两侧就可以滑动，类似与chrome的常去网站和应用程序的切换效果。首页每个版块的图书为20本，图片在弄大点，我看你现在有30本，有点小，看不清楚。现在就是我不知道怎么解决图片大小的问题，这图书图片的大小必须得一样才行？那图片我们是不是可以使用豆瓣图书的大小？还有你首页地下区域的主要功能是做什么用的？是不是显示图书分类等其他信息？请说出你的理解。还有我们的所有提示信息最好都使用弹出div层来提示用户，不能使用js的alter。请你仿照Google的弹出层效果做一个demo来，然后写在wiki上，好让我们前台开发人员能使用这个弹出层。

6、图书信息页名的左侧是显示图片的？我看很宽啊，这和正常图书封面不符啊，而下面的章节信息是不是点击一个章节就可以编辑它了，就跳入了编辑器的界面了，进入编辑器，编辑好了后点击保存，然后就变成结果页面了，就是调用后台生成的html页面了？下载界面可以有两个按钮，一个是epub的，一个是mobi的。社交分享可以使用各种现有的东西么。

7、等@张经纬做好编辑器是不是还要和你的图书内容页面要合并？我们好像也没有在线阅读界面么？就是点击一本书，然后就可以在线阅读图书了。在线阅读图书的页面可以参考豆瓣读书的方法，见豆瓣读书，进去后点击免费书就可以阅读了。豆瓣读书的效果很好，可以使用了js技术，那在线阅读界面，你可以和@张经纬一起去研究下，看容易实现不，到是给我们一个消息。

8、登录界面的字段有用户名、密码、邮件，注册页面多了个确认密码框，这些输入框你也加上去，有啥修改的我们开发的可以模仿着改。

9、上传页面，拖拽的效果，需要js来实现，请@张经纬研究下。我们的上传页面也可以模仿Google的上传页面，就一个上传层弹出。

ps：有何问题，回复本邮件。

在 2012年10月6日星期六UTC+8下午5时39分32秒，lvpeiwen写道：

[madawei]

@Peter 我们还缺少一个前台个人中心页面，类似豆瓣登录后显示你的一些信息，下载过的书，编辑过的书等信息。

在 2012年10月7日星期日UTC+8上午11时50分31秒，madawei写道：

[Peiwen Lu]

感谢回复

1. 不兼容 ie8 以下浏览器就好说了，弹出层告诉访客浏览器不支持，请使用最新浏览器，这个也很好做

2. 仿照 wordpress 做个后台管理系统的界面框架，这个没有问题

3. robots.txt 已写，放在 epub-cn.tk 根目录下，请看下面的写法没问题吧，没经验不太肯定

User-agent: *
Disallow: /qunpin/

4. 

5. 首页上 30 张图书封面考虑了美观性，或者 21 张图片排三排也可以，效果还没做出来，鼠标 hover 在任意一张图片上的时候，都会自动弹出一个层，显示放大的图片和图书信息，这里有两种方法：

一种是，图片本身是大尺寸（同图书信息页的尺寸），首页里用 css 写成小尺寸，鼠标 hover 时，再显示原尺寸

另一种，一个原始尺寸，一个缩略图，鼠标 hover 小图时显示大图

但是，图片比例要控制好，不然被拉伸后不协调

关于主页下方的地方，现在这种布局，一般会在这个部分展示 这个网站的优势、或者合作方、或者 用户的推荐理由，等等等等

6. 那个图片暂时表示这里有张图片。社交分享 我的理解是内容类似于 “我在 群品 读到一本好书”，以分享图书为主，让大家一起来这里读书。按钮可以自己根据 api 做；也可以用 加网的，也就是现在宣传页上用的那个，我倾向于用前者。另外，我担心轻易提供全文的下载链接，反而大家都不会在线阅读，编辑错误的用户也就少了

7. 关于在线阅读图书，可能我对要实现的功能理解还不到位。我的理解是 图书内容页就 是 在线阅读页，在线阅读与即时编辑是在一起的。豆瓣的阅读器效果非常好，这个要做到兼容 手机 和平板电脑，个人感觉难度系数有点高，这要向 @张经纬 兄请教了。 用 css3 写的话，可以多美化一下图书的样式，兼容 手机和平板电脑也更轻便 灵活。

8. 刚刚有点事情，现在回来马上开始做

9. 上传的例子已经找了几个：

http://html5doctor.com/drag-and-drop-to-server/

http://www.profilepicture.co.uk/ajax-file-upload-xmlhttprequest-level-2/

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

大家请一下用哪个跟后台衔接比较好？还是都一样？

以上，请帮忙列个优先级，先从需要的入手开始做

另外，问一下有没有 图书评分，或者评论方面 部分？

前台个人页面好的，没问题

祝好！

[madawei]

Thanks for replying!

1、（解决）

2、（解决）

3、（没问题，具体上线时服务器端需要重新设置，解决）

4、（待解决，负责人：@张经纬）

5、 首页需要静态化，所以页面的大小要控制在500KB内，加载速度要控制在3S内，所以不能有很多信息，图书可以显示21本吧，真要什么书，读者可以搜索（书名、作者、isbn）。图书都比较长，所以整个图书框可以做的长点，每本书的间距可以加大些，看起来简洁些。我建议可以像豆瓣那样，图书框上显示的图书图片默认就是最大的（具体大小参考豆瓣的，我看都不的图书大小都不一样，但看起来不别扭，是因为他们图书的列间距比较大，所以看不出来，我们也可以列间距放大点。我们的图书信息准备使用豆瓣的，我已申请了App key，以后我们会把这些信息存到我们的图书信息库中的，不过开始还是使用豆瓣的api，豆瓣的图书也有缩略图，不过缩略图也是不一样大小的，有的小，他们的图书层大小都一样，小的图片左侧都是留白占据的，我们的图书在的区域也统一大小，小的图片可以留白占据，缩略图后台会有相关服务来裁剪的，按比例裁剪。），所以首页框里显示的是最大图片，鼠标移到时显示图书名、作者、简介的信息。因为如果要显示大图和信息的话，首页存储的信息就很大了，或者需要加载的信息会比较大，而且小图上显示大图感到设计的不简洁，看起来会乱的。主页下方可以放我们的一些功能特色之类的信息，具体以后商讨。

6、社交分享 我的理解是内容类似于 “我在 群品 读到一本好书”，以分享图书为主，让大家一起来这里读书。我同意这么做，就是分享图书的短链接（short url）。按钮可以用加网的，看起来美观就行（加载速度要快）。关于你说的用户下载的问题，我要在这讨论一下：

http://www.zhihu.com/question/19550309 这是我在知乎上看到的关于dropbox，qq，flickr的免费的设计理念。所以结论就是：

肯定可以给用户免费下载的权限，但没有贡献的用户肯定存在，一般在一个社区里，20%的用户创造80%的内容（2/8定律），有很多围观的，但很正常，我们要引导用户的行为。默认一个无贡献用户一天可以下载2本书，下多了他也看不了么。但贡献高的用户可以得到更多的配额（下载权限）。我们可以在编辑图书历史中记录显示下每一个编辑的用户，然后在那个用户旁边放置一个感谢（不是支持按钮，因为编辑是平等的，不能因为编辑的多就认为他贡献高，需要看用户感谢的次数，如果用户感谢的次数多说明他编辑的贡献被大家认可了，不过实现起来比较复杂，如果你看到mediawiki的编辑历史的显示你就会认为很乱了，根本格式很乱，你也不想大谁编辑了啥，所以我们的难点在于如果将两个版本的diff的差异能以美观的形式显示出来，就像知乎的每一个答案一样让人看的爽，用户才想感谢他。）按钮，得到感谢次数越多的我们可以认为他的贡献越多。这些贡献都是可以在用户个人中心看到的，都是可以被其他人看到的么。这样用户参与编辑的兴趣也会越大的么。而参与分工输入的用户的贡献也可以这么计算么，同理上传书籍的用户的贡献也需要看用户的感谢率了，不过问题时，这会不会太复杂了？不过我们可以顺便加个没有帮助的按钮，如果一个用户得到没有帮助的次数多的话，我们就能冻结他的帐号，或者警告他，因为他具备了破坏行为！

7、在线编辑只对计算机用户才可以使用，移动与平板设备不具备编辑功能，所以只需要给他们阅读体验即可。如果做不了豆瓣的那种效果，那就按你的想法来，即每一章节的右上角放一个编辑按钮，类似与wikipeida一样，用户可以阅读每章内容，也可以编辑他，目录也可以编辑的。@张经纬 可以看下豆瓣读书效果，看JS是否可以实现这效果，不需要考虑移动设备和平板（这些设备的阅读体验体现在便捷上，所以阅读体验也不差，kindle阅读器的纸质效果更是加分项，所以和计算机的体验不同），如果计算机用户能达到这种体验（实际上计算机的阅读体验和移动设备相比更差），读书也会变成更美的一种体验！@Peter 可以考虑图书样式的美化，就是看怎么套用你现在设计的那几套模板，这样你的研究就和我们做的结合在一起了么，手机和平板的阅读体验你负责设计。

9、上传我看第一个效果不错，不过你也可以自己做出来你认为好的，大家再讨论。

优先级的问题：我们现在在弄登录、注册、个人中心，然后准备弄首页、在线阅读、在线编辑、后台管理员登录及后台管理系统界面。这个看你自己的时间了，时间不忙，你可以慢慢设计，我们这也刚开始开发么。

图书评分准备调用豆瓣的数据，评论我们现在不做（当然也可以调用豆瓣的，不过那样会影响系统加载速度的），等以后系统实现了，可以外加用户的评论（这个评论是关于图书质量的，用户可以评论图书的排版质量，也可以是图书的评论等，还没考虑好），当然我们也可以搞个图书排版质量的评分，不知道这样设计会有什么影响。我认为可以加，用户可以看到两个评分，一个是图书的好坏，一个是阅读体验的好坏，用户当然可以对图书排版质量进行评分了么。

Best wishes！

在 2012年10月7日星期日UTC+8下午5时44分05秒，lvpeiwen写道：

[madawei]

@peter 刚突然想到，每个图书可否做成圆角的？效果看起来比较圆润，轻微的圆角即可，不知是否可以实现？

在 2012年10月7日星期日UTC+8下午11时35分53秒，madawei写道：

[Peiwen Lu]

圆角很简单，css3 一行代码就够了

我下午写了一个新页面，方便静态页面与前台功能之间沟通，还没有写完，明天早上再修改下，发出来

祝好！！

[Dawei Ma]

@Peter：关于引导用户行为的方法，需要建立一个页面帮助用户使用EPUB或Mobi（因为很多人虽然使用智能设备，但大多还停留在Txt的层面上，他们不知道也不会用这些设备来获得良好的用户体验），问题是这个页面怎么放置或提示可以使用户印象深刻呢？

在 12-10-8，Peiwen Lu<lvpe...@gmail.com> 写道：

> 圆角很简单，css3 一行代码就够了
>
> 我下午写了一个新页面，方便静态页面与前台功能之间沟通，还没有写完，明天早上再修改下，发出来
>
> 祝好！！
>

> --
> 感谢您为群品，为简体中文电子书作出的每一分贡献！
> ---
> 您收到此邮件是因为您订阅了 Google 网上论坛的“群品「群英荟萃，品书真味」”论坛。
> 要向此网上论坛发帖，请发送电子邮件至 qun...@googlegroups.com。
> 要取消订阅此网上论坛，请发送电子邮件至 qunpin+un...@googlegroups.com。
> 通过以下网址访问此论坛：http://groups.google.com/group/qunpin?hl=zh-CN。
>
>
>

[Peiwen Lu]

如果要一步一步提示，引导用户使用网站的各种功能，有个付费的 jq 插件可以做到。

单独做个页面介绍 epub 、 mobi 的优势，推进高级的电子书格式的普及，也是一件很有意义的事情，我觉得可以在网站的页面上涉及到这两种格式的地方，都附上链接 “为什么使用 epub/mobi 格式?” ，可以做成动画效果，即便是没有图片，幻灯片样的效果也是很吸引人的，毕竟国内应用这些新技术的网站还不多，但是国外已经比较成熟了，相应的教程和案例都不少。

另，首页已经更新，做了个简陋的 slider、和浮动图书资料，能力有限，js 方面还请 @张经纬 兄有时间帮忙。

首页的 slider 我期望中是类似 bbc 的新 slider 样式 ( http://www.bbc.co.uk)，选几个热门分类做 tabs， 然后跟 slider 结合，所以用户看到的并不仅仅是全站的最新上传和最受欢迎的图书，而是某几个热门分类下的最新上传，和最受欢迎图书。虽然有点麻烦，但是多了点人性化，我相信正是这些细节让我们与众不同。借助 ajax，首页需要下载的东西并不多。然后考虑增加键盘翻页或者鼠标滚轮翻页，可能后者在操作上更灵活一点。

确认一下，我们的图书可以根据首字的拼音顺序排序吗？因为我在设计图书分类页面的时候，想让用户通过字母顺序查看某一分类下的图书。掌上书院那里，一页显示10本书，一下子几十页，只能说是完成了任务，却没有为用户着想。如果先选择类别，再根据字母顺序找书，鼠标 hover over 在图书标题的时候，浮动框显示封面和图书信息是一件很 cool 的事情。 这一段只是设计时的设想，我不清楚可行性，大家也可交流一下这个设计的合理性。

祝好！

2012/10/9 Dawei Ma <madaw...@gmail.com>

[madawei]

1、关于所有静态页面底部的设计，我觉得可以模仿一下上面这两个网站的底部，可以放很多信息，关于引导用户的页面的链接也可以防止底部，看起来很大气。这两个网址的地址：pearl.com，www.firefox.com。如果把这种引导用户的页面做成动画页面，我希望能有html5做，不要用flash，flash太麻烦了，可以做出幻灯片的。但最好不要使用付费的jq插件，开源的加上付费的不太好。

2、浮动的效果，我希望做出和豆瓣一样的，现在这个看起来还是很别扭。slider可以模仿BBC的。如果你在JS方面做不来，请@张经纬（休假到14号）和@yanyaoer（我们新的UI，会js和python模板等）来协助你完成。现在做的看起来不错，就是没有键盘响应，如果能成BBC这种更好，上面那两个字也最好放到中间，按我昨天那份邮件里提到的那样，你有时间重新设计下。

3、十分赞同你的：正是这些细节让我们与众不同，我们前台可以做成几个热门分类下的最新上传和最受欢迎，这只需要执行不同的SQL语句即可。鼠标事件和键盘事件最好都支持。我们鼠标移在封面上浮动层显示的信息可以通过Ajax来实现数据传输，但如果全部数据下载下不是很大的话，我们也可以直接把这些信息放在页面里，这样速度快么。

4、关于拼音排序的事，这个提议很好，很多英文书籍就可以这样分类排序，很方便，但中文由于数据库存放的都是中文，这些技术原因我也不知道怎么解决，等后期功能实现后，我们可以考虑添加这个人性化的功能。

5、关于首页图书封面标题在图片上的显示：这个是我在专业问答网站pearl.com上看到的，我们可不可以在首页图书封面上显示图书的标题（加一个浅灰色的背景，白色的字体，就像上面图片一样）？这样用户就可以知道这是什么书了，效率高，而且看起来很酷！不知道容易实现不？

--Best wishes！--

在 2012年10月10日星期三UTC+8上午6时54分03秒，lvpeiwen写道：

[madawei]

关于页面底部footer的附加意见：如果我们采用了firefox和pearl网站的这种底部，不仅可以放很多信息，而且看起来大气，可以和我们的网站风格融合，我们同时也不需要那三个主要功能的区域和地下那个大框了，我们的信息都可以放到这种新的footer里，而且颜色块看起来很柔和，或者颜色块可以和咱们背景色一样，这样首页的主题只显示图书封面，看起来更简洁集中。底部也看起来很丰满么。

在 2012年10月11日星期四UTC+8上午12时07分28秒，madawei写道：

[madawei]

不好意思，我没能一次把意思表达完，总觉得需要补充点：如果底部采用这种风格的话，顶部也要和这两个网站一样，做的更厚（宽）一点，和底部一样，都很丰满和大气，pearl.com的顶部看起来就比较好看么。具体你可以看看这两个网站的风格。

在 2012年10月11日星期四UTC+8上午12时15分34秒，madawei写道：

[Peiwen Lu]

多谢兄在设计方面的建议，我都记下了，将来会做重要的参考！

其实现在阶段还不算正式在做“群品网”的前端页面，重点是网站将包含的功能，也就是说先准备网站将要展示给用户的内容，当静态网页能够模拟“群品网”的主要功能的时候，然后再对样式做大规模的更改，这样更改空间更大，灵活性更高，效率也更快一些。bu不方便掌控全局，比如说深色厚底的设计，如果页面不够高的话，反而凸显了页面的“矮”，让用户有种空的感觉。 正常过程应该是画 psd 或者 wireframe，但是我不会用 photoshop，画 wireframe 效果也单薄了一些，所以用 html 形式表现出来（之前也说过权当wireframe看），只用最基础的形式表达所含有的功能，那些方框也只表达这里会放点东西，最后的成品肯定会跟现在有很大的差别。不过，兄之前提过的意见我都留存了，整理起来留备参考。平时在底下做一点点，周末一般能拿出时间来做一个较大的更新。可能还要写更多的模拟页面，把“群品网”从概念转化成更直观的页面效果，还请开发的朋友多提醒一下功能方面的可行性。

Kind regards,

2012/10/10 madawei <madaw...@gmail.com>

[madawei]

Thanks for replying！

我说的这些细节都可以以后做，现在只是做个记录，你现在的重点将未完成的页面大致做出来，然后和前台开发人员讨论一些可行性，细节部分最好在整体页面做完后做，我担心现在做出页面开发的直接用这些页面编写模版，如果后续有变化，这些模版都要改，所以我们等你大体页面完成后，然后确定每个页面的最终版，每确定一个页面最终版后，前台开发人员就可以编写模版了，现在你已经做了不少页面了，我们前台现在还处于抓数据的阶段，所以页面的事不急，你先把大体做完我们一起讨论细节的事。但是我们一定要在细节上下功夫，因为我们首先要做能打动自己的产品，然后才能吸引更多的人来为这个生态圈做努力！

在 2012年10月11日星期四UTC+8上午7时46分10秒，lvpeiwen写道：

[sillyousu]

hi，我回来了。 拖了很久不好意思。。

先约定一下：
静态页面 -> Peter做好的，那种包含漂亮style的html
模板 -> jinja模板，程序用于生成html文件的东东。
（术语不太清楚，先这样说吧。）

我看了一下github那边，模板和静态页面混合在一起了。 ( dev_*.html那几个文件)
我想已完成的静态页面和模板最好先分开一下。
因为模板里面可能有少量业务逻辑(就是可能有模板语句) ，然后开发的时候可能需要调试更改。
如果能越简单越好，我想在dev_*.html文件里面只放实现业务功能的东西。
然后测试完成之后再和静态页面整合，得到最终的模板。

例如:
注册页面的开发模板
#dev_register.html
<form>
--<input>
--<input>
</form>

而注册页面的静态页面包含更多关注样式风格的内容
#
<html>
--<head>
----css
----title
----jacascript
--</head>

--<body>
----<form class="blabla">
------ ……
----</form>
--</body>
</html>

[madawei]

欢迎回来！前台开发这边，真正在做的开发者比较少，目前还处于刚开始的阶段。

模板现在可以写，等@Peter的静态页面做好后再整合了。另外@张经纬 现在的事比较多，在前端这块可能没什么时间来做了。@Photon现在的环境还是因为种种原因没搭好。所以现在前台的开发进度比较慢。请后台的同学知悉，不过不影响后台的开发，如果后台有同学对python web开发感兴趣也可以做前台的开发。

在 2012年10月28日星期日UTC+8下午1时57分41秒，sillyousu写道：