项目管理

个人作业

学习成果：

你是否：

使用的软件

学生协议

点这里下载。

实用链接

制作网站

实用提醒

我老是忘记 HTML 编辑的基础东西，所以为了让生活轻松一点，我先列出一些有用的代码，以及我的模板页面之类东西的位置：

HTML 给每个条目用标签，比如一个段落或一个按钮，所以我列出编辑页面时最常用的标签：

PS：打开标签要用 <some tag inside here>，关闭标签则用 </same tag inside here>

调研

为了大致了解我的网站会是什么样子，我去了 2016 Fab Academy 学生档案，看看别人做了什么，还用了随机学生按钮。

随机学生

看了几个页面后，我找到了 Yuji OKI 的页面，它把我引向了 Massimo Menichinelli 的 Fab Academy Template。

Yuji OKI 的页面 Yuji OKI 的页面

Massimo Menichinelli 的 Fab Academy Template Massimo Menichinelli 的 Fab Academy Template

使用 Massimo 的模板

在 GitHub 上，我把 Massimo 的模板页面仓库克隆到我的硬盘。然后把它里面的内容复制到一个以我名字命名的目录。

编辑

我选择使用的代码编辑器是 Sublime_text3 和 Brackets。

关于 Sublime_text3：

Sublime 很适合写代码、对比（diff）和合并（merge）两段代码。我特别喜欢用插件 "Sublimerge3"。它可以让我比较 2 个文件，然后合并部分代码。

关于 Brackets：

大多数时候，我就在那里写 HTML。Brackets 的一大功能是它会把你写的东西实时更新到浏览器页面里。这样每个修改都能看到，不用刷新。

要在 macOS 上安装它们，我只需在终端里运行以下命令：

$ brew install --cask sublime-text
$ brew install --cask brackets

Brackets 截图 Brackets 截图

自定义模板的 CSS

CSS 让你给 HTML 设置样式。这可以用 3 种方式完成：内联、内部和外部。

因为当前模板用的是外部方式，而且这非常省时间，所以我就用了它。在我网站的一些地方，由于对 CSS 的工作原理理解不够，我可能用了内联样式。

外部样式文件是 bootstrap.css 和 fabacademy.css。这些文件在每个 HTML 文件开头的 <head> 部分被引用。

到目前为止，我只改了几个设置来得到现在的样子，它们都在 fabacademy.css 文件里：

在 bootstrap.css 里我也做了一些修改，如下所示：

因为我对 HTML 编辑或 CSS 几乎一无所知，为了在上述修改之前更好地理解 HTML，我看了 Massimo 关于 HTML 和 CSS 的讲座。

Massimo 关于 HTML 和 CSS 的讲座

我也用了 w3schools.com 上的 HTML 参考。

W3Schools

网站文件夹结构

目前文件夹结构相当简单，还需要整理一下。

文件夹结构：

当前文件夹结构当前文件夹结构

安装 ncdu 并用它检查大文件

为了节省服务器空间，也让网站加载更快，我们需要经常确认没有漏掉大的未压缩图片和视频文件。

  1. 在 Linux 终端里输入： 
    sudo apt install ncdu

    安装 ncdu

  2. 在 Linux 终端里输入下面的命令启动 ncdu： 
    ncdu

    ncdu 会打开，用上下箭头和回车键就能浏览你的目录。

    用 ncdu 浏览

    ncdu 会把最大的文件排在前面，并给最大的文件夹或文件显示更多的井号字符 "#"。

    用 ncdu 找最大的文件

    在这个例子里，最大的文件是我最终项目草图的一个视频文件。

压缩最大的文件

对于视频文件，我们会用 ffmpeg。

  1. 先在 Linux 终端里安装 ffmpeg： 
    sudo apt install ffmpeg
  2. 接着，像我的例子那样对大的视频文件运行 ffmpeg： 
    ffmpeg -i input_video -vcodec libx264 -b:v 1000k -vf scale=-2:720 -an output_video.mp4

上面的代码应该能给你一个没有音频的 720p 视频。更多例子可以看 Neil 的 ffmpeg 速查表。

对于图片，你可以用一个叫 Gimp 的软件和一个叫 bimp 的插件。

我用一个叫 Chocolatey 的包管理器来安装一些 Windows 软件。

它的工作原理和 apt 类似，不过是给 Windows 用的。

  1. 在 Windows 管理员 shell 里运行： 
    choco install gimp
  2. 然后从它的网站下载 bimp 并安装，这样就能在 gimp 里运行它。
  3. 安装完成后，运行 gimp 并选择 Batch Image Manipulation 插件

    BIMP：开始

  4. 要加载之前的一组设置或保存新的设置，你得按 Add 按钮，然后选择想要的操作

    BIMP：添加

  5. 在我的例子里，因为我已经保存了那组设置，所以我选了 "load set"

    BIMP：加载设置

  6. 然后选择那组设置，在我的例子里是 "readyforweb.bimp"

    BIMP：选择设置

  7. 要创建或修改插件的行为，点 Add 添加一个处理步骤，或者点你之前保存过的其中一个

    BIMP：编辑属性

  8. 在缩放设置里，我选了我想要的选项，具体是把宽度设为 800px

    BIMP：编辑文件大小

  9. 然后我去了另一个处理步骤，选了 75 的压缩质量，还把格式转换成 jpeg

    BIMP：编辑压缩

  10. 然后我一次选中了所有需要转换的图片，并应用了这些修改

    BIMP：选择图片

  11. 接着，如果你之前没有指定文件夹，就把转换后的图片复制到你的文件夹。

安装和使用 git

首先，我用的是 macOS。考虑到这一点，而且有很多可能的终端应用要安装，有个 Brew 很有用。它帮助完成在终端和桌面上需要做的所有安装。

要安装它，打开终端并运行：

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

警告： Homebrew 已经停用了这个 Ruby 安装器。现在来自 brew.sh 的安装命令是 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"。

接着，安装 Cask。它帮助安装桌面应用。

$ brew tap caskroom/cask

警告： brew tap caskroom/cask 不再有效。Cask 现在已经内置在 Homebrew 里，所以跳过这一步，直接用 brew install --cask <app> 安装桌面应用。

接着，安装 GitHub Desktop，它也会包含 Git。

$ brew install --cask github

Github 截图 Github 截图

使用你的仓库

现在网站已经在本地搭好了，是时候把它上传到 Fab Academy 仓库了。

要做到这一点，我得把我的公共 ssh 密钥保存到 Fab Academy 的 gitlab 网站上。这样我就能用 git 访问它，不用每次输入密码。之后，需要把你的 repo 克隆到本地硬盘才能开始在上面工作。

关于怎么做的一个信息来源是 gitlab 的 ssh 帮助。下面是我怎么做的。

分步说明：
  1. 因为我之前已经安装了 git，我直接进入想工作的目录，用下面的命令创建一个 ssh 密钥： 
    ssh-keygen -t rsa -b 4096 -C "your_email@domain.com"

    这会生成 SSH 密钥，密钥的标签就是你放在引号里的内容

    Generating public/private rsa key pair.
Enter file in which to save the key (/Users/someone/.ssh/id_rsa):
  2. 过了一会儿，会出现一条消息，问你是让新 SSH 密钥的位置和名称保持默认，还是新建一个。我选了新建，输入了一个位置和一个新文件名。 
    Enter file in which to save the key (/Users/someone/.ssh/id_rsa): /Users/someone/.ssh/id_rsafab
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/someone/.ssh/id_rsafab.
Your public key has been saved in /Users/someone/.ssh/id_rsafab.pub.
The key fingerprint is:
SHA256:IheXdVbB4DChb7Lyo5nJPHhNyExDKAFw5kADUTMR7MU your_email@domain.com
The key's randomart image is:
+---[RSA 4096]----+
|XBX= .    =.++o. |
| =+oE .  + *  .  |
| ..o .. +   .    |
|  .   oo .       |
|    .+ooS o      |
|     o+..+       |
|     ..o.        |
|    .oo*o        |
|     .Bo..       |
+----[SHA256]-----+
  3. 运行下面的命令来显示你的 ssh 密钥 
    $ cat ~/.ssh/id_rsafab.pub
  4. 接着你可以选中屏幕上的文字，它会像这样 
    ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDRdz+KsRwD2jgojGESZzVQNtFT0uWLGZAieKRNMy4ytav//ABgEB5eAWFTU/YfjQn2apnt+YgXC7aWfjk8Ta5/AQblQ2r/randomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekey+rEk6OvIq5F46sKZclXdCLFbj4b9CP5wlFVWm/vq/tgeEbc701587xVCSq/7Ssqv5GNbipbq8eGElKiM4J7h1xlEJmSb06uuqk7PswQjDhV2RFHTl6sNM45qJw30y9O3WkfddFmW5nQ8roP880ef0rvvWK51nvUpmm37rIrHa+rdFpPc9U0bRZ5BhYpp/wMnVHLmZB8W/9Wf2TN0TD/H1AWjvQ1O2EJxKn7GStVGUzopCcIwt+jEjcMZRC/pRZnvEjH30FAFv5F+kYQwmsKcNuZz+qLWF8D5sjVySHSdERLJ3Y7h4ObCJt0ll5+NJ7syf1S7gCotvT910Evorq1f2jb4l6Lt1gJz7uXA03va0HhaBGTKTB0mF7NRJusotyhGWncXgNTkZOkfFQ5Ps1xAcLRmB0uMt0/3MnS7ONu/TfJVuSqYqUuuUtz9hqbke4I4JsD+X7e1a4gAvsFK/nv6Usf0m8aQ== your_email@domain.com
  5. 因为我的密钥不是默认的那个，我需要输入下面的命令，让 SSH agent 知道它在哪里： 
    $ eval $(ssh-agent -s)
Agent pid 9284

$ ssh-add ~/.ssh/id_rsafab
Identity added: /Users/someone/.ssh/id_rsafab (/Users/someone/.ssh/id_rsafab)
  6. 接着是把公钥加载到 gitlab，并复制你 repo 的 ssh 地址，以防你不知道。去 gitlab.fabcloud.org
  7. 登录就用 fablabs.io
  8. 找到你的 lab，然后找到你的学生名字；
  9. 在那里你可以通过从 HTTPS 切换到 SSH 来复制你 repo 的 ssh 地址。

    GitLab SSH 地址

  10. 接着，把你的密钥添加到你的用户资料里

    GitLab 用户资料

  11. 现在该克隆你的 repo 并开始念 "mantra" 了……那么，用你之前复制的 ssh 地址，输入下面的命令 
    git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/yourlab/students/yourname.git
  12. 现在你的 repo 已经克隆到本地了，你可以就在那里开始编辑 HTML，或者把你已经编辑好的网站或模板粘贴到创建好的目录里。
  13. 现在念 "MANTRA" 
    git pull
git add --all
git commit -m yourmessagehere
git push

    这一系列命令会确保：

    1. 第一（git pull），你与 origin 保持最新
    2. 第二，你把所有新改动添加到本地分支（git add --all）
    3. 第三，你提交所有改动（git commit -m yourmessagehere）
    4. 最后，你把提交发送到你的 origin（git push）

Git 和 Bash 笔记：

（这里的笔记会在课程进行中陆续添加，作为 git 命令的速查表）

创建一个新 Repo

我想把如何创建一个新 repo 并上传到 GitHub 的说明写进来，供以后参考，尽管我自己不是这么做的

  1. 首先，需要在工作目录里，然后用下面的命令把它变成一个 git 目录： 
    git init
  2. 接着，把所有文件添加到本地 repo，这会把它们暂存起来准备提交 
    git add .
  3. 接着，需要用下面的命令提交它们： 
    git commit -m "First commit"
  4. 现在在 GitHub 上创建一个新仓库

    GitHub 新仓库

    GitHub 新仓库

  5. 然后复制远程仓库地址

    GitHub 远程地址

  6. 现在用复制来的地址添加一个 remote 
    git remote add origin copied_address_here
  7. 最后，用下面的命令推送所有内容： 
    git push -u origin master

    这样就完成了

  8. git 笔记：
  9. ffmpeg 笔记：
    • 从 ??:??:?? 开始剪出视频的 ??:??:??（-ss 是剪切的起点，-t 是持续时长，不是结束时间） 
      ffmpeg -i videoinput.mp4 -ss 00:00:11 -t 00:00:22 -async 1 videooutput.mp4
    • 用类似的代码也能得到同样类型的剪切 
      ffmpeg -ss 00:00:00 -to 00:00:37 -i videoinput.mp4 -c copy videooutput.mp4
    • 创建一个 gif 并剪切视频 
      ffmpeg -i input.mp4 -ss 00:00:00.000 -pix_fmt rgb24 -r 10 -s 320x240 -t 00:00:10.000 output.gif
    • 压缩音频和视频 
      ffmpeg -i input.mp4  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 output.mp4
    • 压缩某个目录里所有文件的音频和视频，并把压缩后的文件写到另一个目录。 
      for i in *.mp4; do ffmpeg -i "$i"  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 "./1/${i%.*}.mp4"; done
    • 压缩视频并用 -an 去掉音频 
      ffmpeg -i input.mp4  -vcodec libx264 -crf 25 -preset medium -vf scale=-2:360 -an output.mp4

      （后来更正：这个命令当时还有音频选项 -q:a 4 -ar 48000 -ac 2，当 -an 去掉音频时它们不起作用，所以我把它们去掉了。）

    • 把视频顺时针旋转 90 度 
      ffmpeg -i input.mp4 -vf "transpose=1" output.mp4

← (2月5日) 原则与实践 · 所有周 · 计算机辅助设计 (2月12日) →