【总结】IGEM wiki

IGEM即International Genetically Engineered Machine Competition。我有幸在去年参加了学校参赛队的网页(wiki)编写,自己确实没有经验,刚开始甚至还不知道网页编写的方式,不熟悉Wiki的基本要求,又有在本地写的部分网页上传并不能在平台上正常显示的问题;之后由于自己的实习与比赛时间上的冲突,部分工作内容不能及时和其他成员及时交流反馈。希望以后团队的Wiki编写过程能少踩一些坑,所以我粗略写一写一些东西。

Wiki编写前

*

01

网页编写要求须知

*

由于网页运行在IGEM官方服务平台上,编写的网页需要符合相关要求,在编写网页之前要对其有所了解,在实践之后要对照分析是否存在不符合要求的问题。

基本要求(必看):http://2018.igem.org/Competition/Deliverables/Wiki

基本操作帮助(必看):http://2017.igem.org/Resources/Wiki_Editing_Help

如何使用csshtml和js(必看):http://2015.igem.org/Wiki_Requirements/Using_HTML,_CSS,_and_Javascript

官方模板说明:http://2018.igem.org/Resources/Template_Documentation

模板使用说明:http://www.mediawiki.org/wiki/Help:Templates。

*

02

往届队伍Wiki页面参考*

根据往年队伍的wiki,把握哪些页面是重点,一般需要那些元素模块,在网站上,网页代码的模式是什么样的。同时需要调研其他获奖网页内容,借鉴优雅的部分。

2017年所有的wiki列表,可以作为搜索参考的wiki

http://igem.org/Team_Wikis?year=2017

一些风格和体验感不错的wiki:

http://2017.igem.org/Team:Vilnius-Lithuania

http://2017.igem.org/Team:TUDelft

*

03

用户注册

*

注册并审核通过之后才能修改相关页面,在注册之后等待队伍的队长通过验证即可。

前端网页编写

*

01

框架使用

*

建议使用框架,因为只是写前端,在网络框架基础上编写上手比较快,bootstrap之类的都行,这样在排版和编程的时候,自己方便调整,其他上传的同学也能直接根据框架的文档(一般是基于模块来讲)更好避开从HTML和CSS一步步学习的繁琐信息。

*

02

本地测试

*

使用框架在本地测试好后再上传,可以考虑使用谷歌浏览器的F12功能,查看元素大小,位置,直接调整元素样式(可以减少反复上传预览的动作,特别是网络不佳的时候更需要),注意代码中不能有文件外链,css与js文件根据要求上传和引用。

为了使得本地的显示效果和网站上的一样,需要上传好需要的css与js内容,并成功加载到网页上。

*

03

模板使用

*

建议使用模板http://2018.igem.org/Template:Team_name/PageName,使用时为{},将导航栏,footer(可以没有),正文基本样式,单独拎出来。

新建一个网页:直接在队伍名后添加URL名称,将会出现没有内容但可以编辑的提示,点击edit就可以书写代码。注意URL里不要用特殊字符如单引号,也可以新建模板。

除此之外,根据不同的模块如,图片,段落,轮播图,视频,表格等等单独写出来,建议使用空格隔开(防止代码结构混乱和其他复制时候出现标签不闭合的问题),并使用alt进行注释,方便其他上传同学根据需求选择。

(最终的目标是能满足word文档内容可以简易地迁移到网页上)。

*

04

平台的限制

*

原IGEM的模板有一些style样式很烦人,为了能自己设定的样式生效,样式值的末尾添加!important 如:font-weight: 300 !important;,这样才能屏蔽原属性。

在测试中发现代码量在一个页面过多时会出现代码截断(即最后的代码部分被强制删除),单个界面内容太多时,考虑将其分成两个页面。

不要覆盖禁用iGEM登录栏,不要使用flash,iframe,所有页面要全在igem平台上,不能有其他服务器的外链。

*

05

其他技巧

*

了解官方给的哪些链接是必须的,特别是judging form里列出来的,优先使用官方给的url名。

元素的样式属性使用相对数值如100%或函数来实现,避免使用绝对值,这样可以适应不同的屏幕大小。屏幕高度可以用CSS函数动态获取,如 height: calc(100vh)。

不要等到最后几天工作和/或完成wiki,在最后一周完成的编辑应该是非常小的编辑(拼写错误,更新图像等),wiki冻结之后页面就不能更改了,心里要有个时间安排

history里有以前的网页版本信息,如果发现改错了可以考虑undo去恢复原内容。

文件或图片上传时间是波士顿时间,比北京时间晚12小时左右,在upload log查询的时候要注意。

复制代码的时候,一定要保证标签闭合

网页图片相关

*

01

图片比例统一

*

图片与网页内容分开上传,不用集中到Wiki编写的人这上传,但是图片设计者需要和Wiki代码编写者沟通好图片格式和大小,有些模块中,需要图片有一样的比例大小,如team中的人像图片,一般是4:3的比例;比例可以调整,但需要统一。

*

02

图片格式

*

图片建议使用svg格式,其可以自动调整大小,如官方的图标,每个图片大小不能过大,否则会有加载页面过慢甚至加载不出来的情况,一般需要进行初步压缩。

*

03

模板使用

*

根据官方的规则编写图片上传路径,确保路径不要有特殊字符如 ' 单引号:T--OFFICIAL_team_name--PageName。

图片要是本队伍的,不能使用有版权的图片,更不能使用其他队伍Wiki上的。

*

04

其他技巧

*

可以在里面放一些gif动图,更加形象展示内容信息。

图片居中放置时注意图片的宽度,一般div需要加入align="center",需要旋转图像:style = "transform: rotate(180deg);" 生成翻转180之后的图像。

一些复杂的排版和内容网页不便于代码实现,可以考虑图片绘制后,以插入图片的方式代替。

交流与合作

*

01

确定风格

*

Wiki 的风格设定是交流内容中第一位的,确定完网页风格和基本色调后,再去选择参考的内容,风格一般与主题相适应。

*

02

增加交流

*

各组的文字内容最好要建立在定的网页风格基础上去排版。各组需要的一些特殊的模块,最好提前的、集中的向Wiki编写者提出。

*

03

调整内容

*

现场交流如何调整Wiki网页中的某些东西,效果更好。最后一两天不建议再改风格,优先上传图片,再上传内容,最后调整不对的排版。

建议使用公共在线编辑器(如https://shimo.im/),老师可以实时修改内容,相互在文档上的交流会很快

*

04

分项验证

*

多人检查存在的显示与用户体验的问题:

1.是否符合网页编写要求

2.是否有外链,是否使用了任何受版权保护的材料,包括图像

3.是否上传完毕

4.是否排版不当

5.是否有多余内容

附其他资料

*

01

wiki经验

*

其他人的一些wiki经验(链接可能失效了):

https://www.quora.com/How-do-I-make-a-team-Wiki-page-for-iGEM

*

02

网页结构

*

(1)主页Home:简短的项目摘要,要求——前几句就让人有读下去的兴趣,之后需要简介背景、队伍、项目目的、核心突破,两段以内。

(2)队伍介绍Team:具体的队伍介绍,要求——队伍历史、参谋(教授、研究生)、核心(本科生)(照片)、贡献清单。

(3)项目介绍Project:具体的项目介绍,要求——摘要(Overall)、具体内容(模块分级叙述,细到每个关键实验)、项目结果。

(4)Modeling:具体的建模史

(5)项目进展史Notebook:列出重要突破的日期

(6)项目安全Safety:呈示项目的安全性,针对此项目有据回答iGEM官方关于安全的三个问题。

(7)工作来源Attributions:澄明哪些工作是核心们干的,哪些工作是其他人帮助的,声明帮助者。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190111G05ISX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券