nilclass.com, nilclass.com 交互式演示查看器的static 站点

分享于 

7分钟阅读

GitHub

  繁體 雙語
static site for nilclass.com interactive presentation viewer
  • 源代码名称:nilclass.com
  • 源代码网址:http://www.github.com/plusjade/nilclass.com
  • nilclass.com源代码文档
  • nilclass.com源代码下载
  • Git URL:
    git://www.github.com/plusjade/nilclass.com.git
    Git Clone代码到本地:
    git clone http://www.github.com/plusjade/nilclass.com
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/plusjade/nilclass.com
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    用于 nilclass.com的 static-站点

    colorful domo

    依赖项

    nilclass.com 是一个 static 网站。 在生产中,它只需要 HTML。CSS和 Javascript。

    然而,开发网站利用 Ruhoh,这是一个由 ruby 编写的static。 同时也使用了 包含所有的开发依赖项。 注释 aws-sdk 仅用于发布目的,可能会省略。

    图引擎是基于HTML5和客户端的。 但是,我并没有遵循javascript最佳实践,因为我不是那样的--,但我的background 在 ruby 中,但最终。

    图引擎只支持现代浏览器,它基于 d3.js。SVG和 HTML5.

    版本

    0.0.1 - 请考虑 API alpha和不稳定。

    本地安装和开发

    安装假定已经安装 ruby 和 bundler。 如果你不熟悉 ruby,请ping我,我将带你完成设置。 注意你实际上不必在 ruby 中编写代码来帮助或者使用 NilClass。

    Intall

    
    $ git clone git@github.com:plusjade/nilclass.com.git
    
    
    $ cd nilclas.com
    
    
    $ bundle
    
    
    
    

    启动本地服务器

    
    $ bundle exec ruhoh s
    
    
    
    

    开发服务器运行在 http://localhost:9292/服务器上。

    更新文件时,服务器应自动更新到最新的更改。 有时,它不存在,在这种情况下,你只需要重启服务器。

    编译NilClass到它的发布状态

    
    $ bundle exec ruhoh compile
    
    
    
    

    网站输出到 ./compiled

    警告

    NilClass使用 ruhoh 3.0的特殊分支。 ruhoh 3.0不是公开发布的,所以当前的 ruhoh文档可能会在某些情况下导致你误入歧途。 但是,你需要与ruhoh本身进行最小的交互。

    通常,ruhoh提供四个核心服务:

    • 使用 haml。sass和资产指纹轻松和自动实现的资产管道。
    • 解析特殊 Markdown 格式化文件(。扩展名为。NilClass的文件) 为一个JSON负载,供图引擎使用。
    • 将所有模板和文件编译为 100% static 网页。
    • 将 static 网站发布到 AmazonS3。

    NilClass应该被认为是不稳定的alpha软件。 我非常感谢和鼓励协作,但应该提供一个关于API的稳定性的警告。 事情一定会改变,也许大大的,因这里请随时开始对你的贡献的想法进行对话。 谢谢!

    按照分叉 repo的GitHub约定添加更改,提交更改,并在准备好时发出一个请求请求。

    请经常使用主题分支和变形,以便你的拉请求总是干净地应用。 如果你不知道我刚才说了什么,那很酷,只是请求请求,我会帮你的。

    图表工作原理的概念概述

    课程由两个文件组成: 图表文件和内容文件。

    图文件

    这个图文件是用JSON做的。 它包含构建实际图表可视化的指令。

    示例图文件

    图表是一种可视化;它从一种状态转换到另一种状态。 因此,图指令实际上定义了状态的array。 每个状态隐式地构建到另一个。 即状态 3隐式地从状态 1和状态 2的组合的结果开始。 这是一个方便的方法,因为每个状态都在最后一个状态中增加了一些元素。

    图表状态 API

    {
     "diagramState":"start",
     "actions": [
     {
     "method":"add",
     "items": [
     {
     "icon":"user-2",
     "id":"You" }
     ]
     }
     ]
    , 
     "positions": {
     "You": [100, 200]
     }
    }
    • diagramState - 状态的NAME。 这用作在内容文件中引用的id。
    • 为了构建实际图表而执行的动作动作。 ( 添加/删除项目)。
    • 位置 - 每个项目的x,y 坐标位置。 位置只需在位置上指定更改。

    请注意,所有项目在课程上下文中都需要唯一的ID。 身份证可以是任何东西现在我只是用名字。

    图画布和定位

    图是一个 SVG node,带有一个 [1200, 500] ( x,y )的viewBox。 这些是任意单位,不是像素。 任意的单位可以使图表的比例完全比例。 注意 conventual width 被指定为 100%,因此单位将转换为对浏览器窗口的给定宽度正确的任何像素比率。

    例如要将 node 放置在图表的中心,你应该给它一个 [600, 250] 位置。 viewport的实际像素宽度不重要。

    要了解 viewBox 1插件,2插件对于在SVG和NilClass中变得高效至关重要。

    最后,在"状态"对象中定义positions的位置时,只需要将项位置 changing changing或者更改项位置。 这些位置,就像状态一样,全部向下层叠。

    内容文件

    示例内容文件

    内容文件包含课程每一步提供的文本内容,以及覆盖的指示。 覆盖通常由 Highlight 现有图路径和节点的各种方式组成。 在这方面,覆盖被认为是内容,而不是实际图表结构的一部分,所以它们是在内容文件中指定的原因。

    请注意,内容不必用图表状态映射 1到 1. 这是因为不是所有的内容步骤都需要更改图状态。 有时内容步骤只是 Highlight 或者关注于不同的项目或者相同图表状态的路径。 因此,每个内容步骤都指定了通过 diagramState 引用的图表状态。

    请研究现有的内容文件,了解API的感觉。 编辑现有课程以查看如何更改,然后尝试创建自己的课程 !

    许可证

    Creative Commons License
    Nilclass由 Jade Dominguez 授权,是在一个 Creative Commons属性 ShareAlike 4.0国际许可证目录下许可的。
    基于在 的工作, https://github.com/plusjade/nilclass.com/。

    在教育内容的基础上,我认为教育内容的使用者更有价值,以便更好地选择教育内容。内容和概念,以便更好地选择教育。 此外,我还设想了一个迭代地改进。

    谢谢 !


    COM  STA  VIEW  PRE  交互  静态  
    相关文章