Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: 增加开发一个小故事的介绍 #89

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs: 增加开发一个小故事的介绍 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f65a5ab
docs: 增加开发一个小故事的介绍
Espoir-L May 21, 2018
0a0755a
docs: 增加开发一个小故事的介绍2
Espoir-L May 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions source/doc/story/create1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
title: 创建小故事-小故事的概念
layout: doc
---

## 小故事的概念

### 小故事是什么

​ 小故事是一种可交互的多媒体卡片，是由多元化内容组成的媒体形态，可带来沉浸式、多媒体、可交互的浏览体验，如图，是一个小故事的示例；

- 示例

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/oscar5.gif" width="276" height="494" />

### 小故事产品构成

​ 每个小故事（Story）下有多个段落（View），每个段落（View）可自由组合音频、视频、图片、GIF、文字等富媒体元素(Element)。

<!-- - 示例 -->

<!-- ![intro-view-layer-element (1)](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/intro-view-layer-element.jpg) -->

### 小故事面向人群

​ 小故事采用开放的[MIP技术](https://www.mipengine.org/)，能让站长、自媒体、开发者、商家等各种可以提供优质有创意内容的人群使用工具或MIP技术进行小故事创作。

​ 在百度搜索结果页的呈现形式如图：

![搜索结果页展示](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C%E9%A1%B5%E5%B1%95%E7%A4%BA.png)

## 起步教程

### 1. 技术储备

开发一个小故事的技术储备：

1. HTML，CSS和JavaScript的基本知识；
2. 对MIP的基础原理和规范，请参考[MIP 的开发文档](https://www.mipengine.org/doc/00-mip-101.html) ；

### 2、开发环境准备，Run起示例Demo

1、下载代码；

- 下载本教程的代码，下载地址如下：[oscar-demo](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/story-demo.zip)；
- 提取zip文件的内容，减压后在story-demo目录下的oscar-story.html是完整小故事demo的入口。

2、运行示例页面

​ 运行示例代码的方法如同启动MIP页面的服务，MIP 页文件可以直接运行，你可以选择如下方式，像预览普通 HTML 站点一样预览 MIP-HTML 页面：

- 直接在浏览器中打开（由于 XML HTTP Requests 失败可能会导致某些元素预览失败）。
- 在本地部署一个服务，如 Apache，Nginx 等。
使用 MIP-CLI 辅助预览，使用方法见 MIP 博客：[开发教程一](http://www.cnblogs.com/mipengine/p/mip_cli_1_install.html)。

设置完本地的web服务，通过访问一下URL，可查看小故事的Demo示例：

```
http://localhost:8000/oscar-story.html
```

完成了以上准备工作，那么接下来，让我们开始开发属于你自己的小故事。


## 我的标签

[第一篇、开发小故事前期准备](https://www.mipengine.org/doc/story/create1.html)

[第二篇、小故事的组织结构](https://www.mipengine.org/doc/story/create2.html)

[第三篇、创建小故事的封面](https://www.mipengine.org/doc/story/create3.html)

[第四篇、开发更丰富的小故事段落](https://www.mipengine.org/doc/story/create4.html)

[第五篇、小故事内置动画](https://www.mipengine.org/doc/story/create5.html)

[第六篇、创建小故事的封底页面](https://www.mipengine.org/doc/story/create6.html)

[第七篇、小故事的添加统计](https://www.mipengine.org/doc/story/create7.html)

[第八篇、小故事的MIP规范校验](https://www.mipengine.org/doc/story/create8.html)


110 changes: 110 additions & 0 deletions source/doc/story/create2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@

title: 创建小故事-小故事的组织结构
layout: doc
---

## 小故事的组织结构

​ 本篇主要讲解小故事的结构划分和代码结构；

## 知识储备

​ 在阅读本篇前，您需要了解什么小故事，如果您还不了解什么是小故事，可以查看[开发小故事前期准备](https://www.mipengine.org/doc/story/create1.html)了解基础信息；


## 小故事的组织结构介绍

​ 小故事主要由 [mip-story 组件](/examples/mip-extensions/mip-story.html) 承载，充当小故事中所有段落的容器，按照段落个数自动生成段落导航，返回链接，段落播放完的重播和分享功能。

小故事具有三个基本概念：段落（view），层（layer）和元素（element）.

- 每个小故事可以包含多个段落（view），每个段落充满屏幕。用户操作翻页后，会看到下一个段落。
- 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。
- 元素（element）是资源素材，如背景图，主标题，详细描述等。在 `<h1>`、`<p>`、`<mip-img>` 等标签中声明。

![intro-view-layer-element (1)](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/intro-view-layer-element.jpg)

​ 这里的每一个组件都是一个mip组件，其中故事组件为`mip-story`，段落为`mip-story-view`，层为`mip-story-layer`，元素为资源素材，如背景图，主标题，详细描述等。在 `<h1>`、`<p>`、`<mip-img>` 等标签中声明。

![mip-story-tag-hierarchy](http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/demo-story1.png)

## 开发小故事

开发一个小故事，只需要简单的三部：

1. 创建封面以及段落；
2. 为段落添加丰富内容；
3. 为小故事添加封底；

下面请跟随详细步骤教程开始制作你的第一个小故事吧！

​ 小故事由`mip-story`组件表示，它作为故事中所有页面的容器。该`mip-story`组件还负责创建UI外壳，包括处理手势和导航。

​ `mip-story`组件是一个自定义的MIP组件，与所有自定义组件一样，您必须要将该组件的关联脚本添加到MIP文档；在一个标准的 [MIP HTML 页面](https://www.mipengine.org/doc/01-mip-demo.html)的`<script>`标签中添加依赖脚本：

```html
<!DOCTYPE html>
<html mip>
<head>
....
</head>
<body>
<!-- MIP 运行环境 -->
<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
<!-- 小故事依赖脚本 -->
<script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-story/mip-story.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js"></script>
</body>
</html>
```

​ 添加好依赖后，需要把`mip-story`元素添加到`<body>`文档中，如下所示：

```html
<!DOCTYPE html>
<html mip>
<head>
....
</head>
<body>
<!-- 组件使用 -->
<mip-story id="story-demo">
...
</mip-story>
<!-- MIP 运行环境 -->
<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
<!-- 小故事依赖脚本 -->
<script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-story/mip-story.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js"></script>
</body>
</html>
```

​ 在此需要重点注意的是，要想获得有效的MIP故事，在`<body>`元素中必须只有一个`<mip-story>`组件，所有其他元素（除`<script>`中添加的依赖）都要包含在`<mip-story>`组件中。

​ 在完成以上工作，我们拥有了一个小故事的外壳，但是此时的故事是无效，因为它需要有一个段落，那么接下来让我们创建该段落。


## 我的标签

[第一篇、开发小故事前期准备](https://www.mipengine.org/doc/story/create1.html)

[第二篇、小故事的组织结构](https://www.mipengine.org/doc/story/create2.html)

[第三篇、创建小故事的封面](https://www.mipengine.org/doc/story/create3.html)

[第四篇、开发更丰富的小故事段落](https://www.mipengine.org/doc/story/create4.html)

[第五篇、小故事内置动画](https://www.mipengine.org/doc/story/create5.html)

[第六篇、创建小故事的封底页面](https://www.mipengine.org/doc/story/create6.html)

[第七篇、小故事的添加统计](https://www.mipengine.org/doc/story/create7.html)

[第八篇、小故事的MIP规范校验](https://www.mipengine.org/doc/story/create8.html)


163 changes: 163 additions & 0 deletions source/doc/story/create3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
## 小故事的封面的开发

​ 本篇主要提讲解如何创建一个小故事的封面；

## 知识储备

​ 在阅读本篇前，您需要了解什么小故事，如果您还不了解什么是小故事，可以查看[开发小故事前期准备](https://www.mipengine.org/doc/story/create1.html)、[小故事的组织结构](https://www.mipengine.org/doc/story/create2.html)了解基础信息；

## 小故事的封面的开发介绍

###1、在`mip-story`中添加一个封面

​ MIP小故事中的页面由`<mip-story-view>`组件表示。在一个`<mip-story>`，你可以有一个或多个`<mip-story-view>`组件，包含故事的每个单独的屏幕。您在开发一个小故事时候，第一页是显示在故事的第一页。要创建该页面，请将`<mip-story-view>`组件**添加**到`<mip-story>`。为页面**分配**一个唯一的ID。对于封面，分配唯一的ID `cover`：

```html
<mip-story id="story-demo">
<mip-story-view>
...
</mip-story-view>
</mip-story>
```

​ 现在我们有了我们封面的外壳。但是，我们的故事仍然无效。在我们的页面中，我们需要指定至少一个**图层**。

### 2、在封面中添加一个图层

​ 像下图中的图层一样，您可以在MIP故事页面中使用图层来创建视觉效果。层层叠在一起，因此，第一层是底层，下一层在顶层，依此类推。

我们的封面实际上由两层组成：

- **第1层**：用作背景的图像
**第2层**：故事的标题和副标题

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/story-layer.png" width="350" height="494" />

##### 2.1 创建第一层

​ 我们将第一层添加到封面上。该图层包含填充屏幕的图像。

​ 通过将`<mip-story-view>`元素添加为子元素来创建图层`<mip-story-layer>`。由于是封面，我们希望图像填充屏幕，可以设置`<mip-story-layer>`中的`template`属性为`fill`，指定该`template="fill"`。在图层内部，`<mip-img>`为`cover.jpg`文件添加一个元素，并确保它对`layout="responsive"`图像尺寸为720 x 1280像素的响应（即）。以下是我们的图层：

```html
<mip-story>
<mip-story-view>
<mip-story-layer template="fill">
<mip-img src="cover.jpg"></mip-img>
</mip-story-layer>
</mip-story-view>
</mip-story>
```

​ 通过以上代码，可以实现封面的显示，它的图形化界面如下：


<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-0.png" width="276" height="494" />

##### 2.2 创建第二层

​ 在完成第一层的情况下，我们开始完成第二层，它在背景之上，包含主标题和副标题。要添加第二层，首先需要完成与第一层相同的任务，但是此处的`template`不使用`fill`模板，此处我们使用`vertical`模板。

​ 大家肯定会对`template`属性很迷惑，这个属性到底是干啥的，都有什么取值，为什么封面需要使用`fill`模板，那么接下来，我们了解下`template`属性的简单用法；`template`属性是`<mip-story-layer>`组件的一个属性，用来设置该层的整体布局结构；

- `template`属性

- `template="fill"`：填充布局，该布局方式会将当前 `<mip-story-layer>` 中的第一个元素进行填充布局，其他元素均隐藏。适合于将图片、视频作为背景展示的场景。如图：

```html
<mip-story-layer template="fill">
<mip-img src="cover.jpg)"></mip-img>
</mip-story-layer>
```

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-2.png" width="276" height="494" />

- `template="vertical"`：`<mip-story-layer>` 中的元素沿 `y` 轴排列，`x` 轴方向填充布局。

```html
<mip-story-layer template="vertical">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</mip-story-layer>
```
<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-3.png" width="276" height="494" />

- `template="horizontal"`：`<mip-story-layer>` 中的元素沿 `x` 轴排列，`y` 轴方向填充。

```html
<mip-story-layer template="horizontal">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</mip-story-layer>
```

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-4.png" width="276" height="494" />

- `template="thirds"`：支持上中下三列布局，在使用该布局时，内部的元素需要同时加入对应的属性，包括：

- `flex-area='upper-third'`: 元素位于三等分布局的上部；

- `flex-area='middle-third'`: 元素位于三等分布局的中部；

- `flex-area='lower-third'`: 元素位于三等分布局的下部；

```html
<mip-story-layer template="thirds">
<h1 flex-area="upper-third">element 1</h1>
<p flex-area="middle-third"></p>
<p flex-area="lower-third">element 2</p>
</mip-story-layer>
```

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-5.png" width="276" height="494" />

现在您已经了解一个层中的模板布局，现在让我们完成封面的第二层。

对于第二层，我们需要添加主标题和副标题，我们希望这些元素依次排列，所以使用`vertical`模板。如下：

```html
<mip-story>
<mip-story-view>
<mip-story-layer template="fill">
<mip-img layout="responsive" width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/mip-story/p1.png" layout="responsive"></mip-img>
</mip-story-layer>
<mip-story-layer>
<div class="page1-wrap">
<span>第90届奥斯卡</span>
<span>The 90th Oscar</span>
<span class="line"></span>
<span>颁奖典礼回顾</span>
</div>
</mip-story-layer>
</mip-story-view>
</mip-story>
```

​ 刷新浏览器我们发现，我们已经开发完完整的封面。

<img src="http://mipstatic.baidu.com/static/mip-static/mip-story/demo/static/cover-6.png" width="276" height="494" />

​ 在完成了小故事封面的基础上，我们需要更多的段落来丰富我们的小故事内容，以达到好的用户体验，那么接下来我们讲介绍如何[开发更丰富的段落内容](https://www.mipengine.org/doc/story/create4.html)。


## 我的标签

[第一篇、开发小故事前期准备](https://www.mipengine.org/doc/story/create1.html)

[第二篇、小故事的组织结构](https://www.mipengine.org/doc/story/create2.html)

[第三篇、创建小故事的封面](https://www.mipengine.org/doc/story/create3.html)

[第四篇、开发更丰富的小故事段落](https://www.mipengine.org/doc/story/create4.html)

[第五篇、小故事内置动画](https://www.mipengine.org/doc/story/create5.html)

[第六篇、创建小故事的封底页面](https://www.mipengine.org/doc/story/create6.html)

[第七篇、小故事的添加统计](https://www.mipengine.org/doc/story/create7.html)

[第八篇、小故事的MIP规范校验](https://www.mipengine.org/doc/story/create8.html)


Loading