小故事的概念

小故事是什么

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

  • 示例

开发小故事前期准备 - 图1

小故事产品构成

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

小故事面向人群

​  小故事采用开放的MIP技术,能让站长、自媒体、开发者、商家等各种可以提供优质有创意内容的人群使用工具或MIP技术进行小故事创作。

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

搜索结果页展示

起步教程

技术储备

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

  1. HTML,CSS和JavaScript的基本知识;
  2. 对MIP的基础原理和规范,请参考MIP 的开发文档

开发环境和demo

1、下载代码;

  • 下载本教程的代码,下载地址如下:oscar-demo
  • 提取zip文件的内容,减压后在story-demo目录下的oscar-story.html是完整小故事demo的入口。

2、运行示例页面

​  运行示例代码的方法和访问一个MIP页面的方法一样,MIP 页文件可以直接运行,您可以选择如下方式,像预览普通 HTML 文件一样预览 MIP-HTML 页面:

  • 直接在浏览器中打开(由于 XML HTTP Requests 失败可能会导致某些元素预览失败)。
  • 在本地部署一个服务,如 Apache,Nginx 等。
    使用 MIP-CLI 辅助预览,使用方法见 MIP 博客:开发教程一

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

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

​  完成了以上准备工作,接下来,开始开发属于您自己的小故事。

下一节:小故事的组织结构

小故事开发系列教程

一、开发小故事前期准备

二、小故事的组织结构

三、为小故事创建一个封面

四、为小故事添加更多的内容段落

五、为小故事段落中的元素添加交互动画

六、为小故事添加背景音乐

七、为小故事添加封底页面

八、为小故事添加页面统计

九、对小故事进行页面代码规范校验