1sters / material_design_zh Goto Github PK
View Code? Open in Web Editor NEWMaterial Design 中文协同翻译 - design.1sters.com
Home Page: http://design.1sters.com
Material Design 中文协同翻译 - design.1sters.com
Home Page: http://design.1sters.com
markdown 在 标题标签(#、## 等)下会自动将其添加为锚点,并且锚点的 id 就为标签的内容;然而,我们的内容大多是中文,就会被转化成 Unicode,可读性较差。
直接添加标题标签自动生成的锚点 id,形如:#%E6%94%AF%E6%8C%81-android-21-%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC
举例:
https://github.com/vincent4j/android-training-course-in-chinese/blob/gh-pages/SOURCE/basics/actionbar/setting-up.md#%E4%BB%85%E6%94%AF%E6%8C%81-android-30-%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC
不使用 标题标签,直接通过 html 语言替代,如此锚点 id 就可以自行指定。
效果:http://daringfireball.net/projects/markdown/syntax#overview
源码:http://daringfireball.net/projects/markdown/syntax.text
提示:此方法在 github 上不可行,但在 Jekyll 上是可行的。原因应该是,github 上的 markdown 语法是对标准 markdown 语法有过优化。所以对我们的工程来说,这样写是完全没问题的,因为我们最终跑在 Jekyll 上。
示例效果:
http://design.1sters.com/material_design/components/menus.html#menus_behavior
示例源码:
https://github.com/1sters/material_design_zh/blob/master/SOURCE/components/menus.md
what ?
我选择用jekyll来生成页面,jekyll里面有个烦人的配置,需要在每个文件最上面加上如下信息:
---
layout: page
title: 布局模板
permalink: layout-templates.html
---
其中:
layout:全部page
(对应布局模板 page)
title:写你这个页面的标题(基本上就是第一行字,不要#)
permalink: 写你的文件名.html
(扩展名是 html,而不是 md,Jekyll 会自动将 md 文件编译成静态的 html)
参考:
https://github.com/1sters/material_design_zh/blob/master/SOURCE/material-design/introduction.md
ps.
本来打算写个脚本自动处理的,4j说写脚本时间还不如让大家手工修改下~
如果大家有空就顺手修改下,如果没空,今天晚上我自己苦力一下~
用firefox和Chrome浏览器都没办法播放
刚才 @Jingsha 反馈,在「Meaningful Transitions 」章节中插入视频存在问题:
尝试了一下在页面里面插入视频的代码,但是preview的时候没有显示
答复:
视频不能显示的问题,先放不放,等后期找到方案了,改改就好啦。别为了搞这东西,浪费掉时间,不值得。
稍后等 @IceskYsl 找到解决方案之后,大家统一修改就可以了;当前再碰到视频的问题,先往后放一放,继续下面的翻译。
update at 2014.06.30 12:22
视频添加已经搞定,具体如何添加看工程的 Readme 文件
示例效果:
http://design.1sters.com/material_design/components/menus.html
示例源码:
https://github.com/1sters/material_design_zh/blob/master/SOURCE/components/menus.md
当前 @DonLiangGit 翻译的是繁体中文,后期用 google 转为简体。
目前我是这么做的:
有部分兄弟反应他的章节翻译起来比较吃力,需要能力强点的校对者,特别需要具备一定的专业知识。
现在对这些章进行统计:
好九不见 11:57:25
提个小建议——咱们翻译的时候专业名词以括号形式保留原英语名词吧,比如「导航(navigation)」这种,因为咱们平时用的时候不管设计师还是开发进行控件标注的时候大多习惯用原来的英文名词...
东西比较多,部分文件也比较大。
能打个包么?
跟谷歌官方原版相比有点滞后了
大家付出这么多,唯一能回报大家的就只能是通过文章底部署名。署名的式样全部统一成:
代码:> 原文:[章节名](链接) 翻译:[昵称](链接) 校对:[昵称](链接)
(全角冒号,「翻译」、「校对」前面是2个空格)
效果:
原文:Authentic Motion 翻译:vincent4j 校对:iceskysl
默认的昵称就是 GitHub 的用户名,链接就是 GitHub 的个人主页。如果在这个统计列表里未找到,就直接写默认的。
大家如果需要额外定制的,请按照 2楼 同样的方式申请:第一行,昵称(可以是中文);第二行,链接(必须带 http://
)。
我们翻译的是markdown格式的文档,发布的时候需要自动发布成网页和ebook,试了很多个可行的方案,比如非常流行的https://www.gitbook.io/ , https://github.com/fnando/kitabu 等,但是其都有一定的局限性(必须按照他的风格和样式,生成出来的也都一个模样)~
于是寻找其他的解决方案,最终锁定https://github.com/ruby-hacking-guide/ruby-hacking-guide.github.com 这样的方案,GitHub + Jekyll + Github Page + Calibre + Script来做~
其中:
目前正在Script编写,统一处理图片,页面目录结构,css改写等~
1、在原始文章中找到视频的原始地址
例如「Authentic Motion」章节的第一个视频地址为:
http://material-design.storage.googleapis.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm
2、修成改「七牛」对应的地址
因为 google 服务器过慢,所以将所有的视频都传到「七牛」,只需将前面的「域名」更换即可。
由
http://material-design.storage.googleapis.com
换成
http://materialdesign.qiniudn.com
3、查看网页源码,找到 width 和 height
4、往翻译稿中添加代码
假定上一步中查找的值为:width="740" height="270"
<video crossorigin="anonymous" loop controls width="740" height="270">
<source src="http://materialdesign.qiniudn.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm" type="video/webm">
</video>
其中,仅以下三个值需要指定,其他保持不变:
项目是否停止维护了,http://design.1sters.com 能打开,但是资源已经访问不到。
很多 5、6秒的视频,每次都要手动去点击 ~ 很麻烦的。
统一转为 gif 自动循环播放多好。
文档里的视频是放在Google服务器上的,访问起来不是很顺畅,需要全部下载一份到本地~
回头一并放到七牛里去~
http://design.1sters.com/的页面下加入评论功能~
让读者可以反馈问题,讨论等~
字体排版 - Typography 1% by @IceskYsl
滑块 - Sliders 1% by @IceskYsl
Snackbars 与 Toasts - Snackbars and Toasts 1% by @poppinlp
选择 - Selection 1% by @poppinlp
》这两个同学可以放心
按钮 - Buttons 1% by @Siton
》联系过了,最近就可以给出。
文本框 - Text fields 1% by @hyaocuk
手势 - Gestures(难) 1% by @cxytomo
影像处理 - Imagery Treatment 1% by @wanningliu
》7.25 号认领的,时间还可以缓缓。
图像 - Imagery(难)1% by @chenyusi
》已经改好了,最近会发 pull request
结构 - Structure 1% by @Courtneychow88
》8.1 号,才认领的
列表控制 - List controls 1% by @EflakeEver
菜单 - Menus 1% @xieweiqi1860
》这两个认领很久很久了,也一直联系不上,如果到周一还联系不上,就移除了,让其他人来认领。
当「目录」显示状态时,想要隐藏它,当前只能点击右上角的「目录」菜单。
希望:点击任何空白区域即可隐藏。
前往 校对认领章节记录 选取自己钟意的章,然后在本 issue 评论,@vincent4j 会第一时间收到邮件提示,并更新 readme
提示:
(难)
的代表本章翻译起来困难,当然校对起来也会困难**提示:**大家记得在每篇文章底部加上署名,署名内容来自于:#148
标题 + 内容 的形式,140 个字以内
Material Design 中文版 (Google I/O 2014 最新推出的全平台设计指南)
Google I/O(2014) 最新推出的 Material Design 势必会成为全平台设计规范,其适配包括 Android Mobile, Android Table, Desktop Chrome 在内的所有平台;design.1sters.com 采用高效的 GitHub 协同翻译模式在一周之内全部译完,希望能帮助到国内的设计师和开发者!
字体排版 - Typography 1% by @IceskYsl(已经校对完成 2014.08.28)
滑块 - Sliders 1% by @IceskYsl(已经校对完成 2014.08.28)
》时间老长啦
按钮 - Buttons 1% by @Siton(已经校对完成 2014.08.20)
》联系过了,最近就可以给出。
文本框 - Text fields 1% by @hyaocuk(已经校对完成 2014.08.19)
影像处理 - Imagery Treatment 1% by @wanningliu
》7.25 号认领的,时间还可以缓缓。
结构 - Structure 1% by @Courtneychow88(已经校对完成 2014.08.28)
列表控制 - List controls 1% by @cxytomo(已经校对完成 2014.08.19)
菜单 - Menus 1% @poppinlp(已经校对完成 2014.08.21)
》8 月份,才认领的
处理方案:在 footer 加个「chrome 下查看」等字样的提示。
chrome 没问题,好像就 Firefox 不行~
点击之后会打开一个空的新标签页~
http://design.1sters.com/material_design/animation/responsive-interaction.html
看这个里面的视频,我一屏幕基本上还显示不下一个。我说的是电脑上的,不是手机。
建议:能不能通过 css 控制 video 的长高,但又不能写死,因为每个视频的长高本来就不一样,能不能按照百分比,比如说都缩小到现在的 50%
在 google 原始页面中的图片都是 xhdpi 尺寸的,超级大;那如何变小呢?
操作:
将最后的 xhdpi 改成 mdpi,形如:
http://material-design.storage.googleapis.com/images/components-switches-checkbox-switches_07b_large_mdpi.png
也就是说,google 服务器上存放了多套尺寸的图片。
修改对部分句子还有标点
最主要的关键字定位为「Material Design 中文」,其他次之的关键字如下:
这个项目是停更了吗。。。☹
在校对过程中,有些目录翻译被修改过了,要重新全部核对。
刚才已经将我下载的所有资源文件(视频、ai、zip)上传到七牛,可能有遗漏,大家在此统计下
提示:如何知道原文的字体大小?在浏览器里查看源码,是不是位于 h 标签之下。
问:原图太大,如何处理?
答:#57
问:如何添加视频?
答:#90
在每章的头部,大概应该是第一段之后都会有个本章目录 Contents
,我们舍弃这一部分,也就是在翻译稿里不要这部分。出发点,单章的内容不会太多,再就是写这部分还要加 锚点
比较费时。
原文中每个章节内部的二级标题之后都会人为的加入一条分割线(对应 markdown 中的连续三个等于号),而我们使用的 markdown 语法的 h2,默认就会在标题下一行加入分割线,导致重复;所以翻译稿里不保留 h2 标题上方的分割线。
因为工程最终运行在 Jekyll 之下,所以必须按照其要求添加头部信息。
操作如下:#81
色样 - 0.13 MB(.zip)
,给「名称」添加链接,不是给整体。A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.