WebSlides简介

by José Luis Antúnez

通过何塞·路易斯·安图斯

WebSlides：一种新的开源方式，用于构建可在浏览器中运行的精美演示文稿 (WebSlides: a new open source way to build beautiful presentations that run in your browser)

Everyone loves stories. People share content that makes them feel inspired. We need stories to know we’re not alone.

每个人都喜欢故事。 人们共享的内容使他们感到鼓舞。 我们需要故事来知道我们并不孤单。

Slide decks are an excellent way to tell these stories. And there are already plenty of great tools out there for this like Powerpoint and Keynote.

滑台是讲这些故事的绝妙方法。 而且已经有很多很棒的工具，例如Powerpoint和Keynote。

But nobody loves HTML presentations. Literally, no one. “I love HTML presentations” returns zero results in Google search. ?

但是没有人喜欢HTML演示文稿。 从字面上看，没有人。 “我喜欢HTML演示文稿”在Google搜索中返回零结果 。 ？

I’m a designer and developer who works all day on top of the giant platform that is the web. It always felt awkward and old-fashion for me to load up a separate program on my computer and use Powerpoint and Keynote — with their strange proprietary formats — then have to email it to someone.

我是一名设计师和开发人员，整天都在庞大的网络平台上工作。 对于我来说，在计算机上加载一个单独的程序并使用Powerpoint和Keynote(具有奇怪的专有格式)然后将其通过电子邮件发送给他人，总是让我感到尴尬和过时。

So I built WebSlides.

所以我建立了WebSlides 。

WebSlides are all about telling a story, then sharing it in a beautiful way: hypertext, clean markup, and lovely CSS as narrative elements.

WebSlides都是讲述一个故事，然后以一种优美的方式分享它：超文本，干净的标记和可爱CSS作为叙述元素。

Designing in WebSlides can be just as fast as with Powerpoint. You can get by with a basic understanding of HTML and CSS. Just choose a demo and customize it in minutes.

WebSlides中的设计可以与Powerpoint一样快。 您可以基本了解HTML和CSS。 只需选择一个演示并在几分钟内对其进行自定义。

Designers, developers, marketers, and journalists now have a web-native presentation tool with:

设计师，开发人员，营销人员和新闻工作者现在拥有一个基于Web的演示工具，其中包括：

• Quick navigation keyboard shortcuts such (and both horizontal and vertical sliding).
  快速导航键盘快捷键，例如(以及水平和垂直滑动)。
• Permalinks that take you directly to a specific slide.
  固定链接可直接将您带到特定幻灯片。
• A slide counter.
  滑动计数器。

• +40 components including covers, cards, quotes, and forms

  +40个组件，包括封面，卡片，报价和表格

• A wide variety of backgrounds: colors, gradients, images, and videos.
  各种各样的背景：颜色，渐变，图像和视频。
• Flexible blocks with auto-fill and equal height.
  具有自动填充和相等高度的柔性块。
• 500+ SVG icons thanks to Font Awesome
  超过500个SVG图标，归功于Font Awesome

代码诗 (Code Poetry)

Here’s some HTML source code that shows you how it’s done. This code is clean, scalable, and well-documented. It uses intuitive markup with popular naming conventions. There’s no need to overuse classes or nesting.

这是一些HTML源代码 ，向您展示了它是如何完成的。 此代码干净，可伸缩且有据可查。 它使用带有流行命名约定的直观标记。 无需过度使用类或嵌套 。

Each parent <section> in the #webslides element is an individual slide:

n the #web slides元素中的每个父<secti on>都是单独的幻灯片：

<article id="webslides"&gt;  <!-- Slide 1 -->  <section>    <h1>Design for trust</h1>  &lt;/section>  <!-- Slide 2 -->  <section class="bg-primary aligncenter">    <div class="wrap">      <;h2>.wrap = container 1200px</h2>    </div>  </section></article>

有目的的设计 (Designing with purpose)

WebSlides is free and open source. I built it because we need a platform for beautiful storytelling. Let’s look at what is happening:

WebSlides是免费的开放源代码 。 之所以创建它，是因为我们需要一个用于讲故事的平台。 让我们看看发生了什么：

• Medium = Beautiful articles.

  中 =精美的文章。

• Typeform = Beautiful forms.

  Typeform =漂亮的表格。

• WebSlides = Beautiful presentations and longforms.

  WebSlides =美丽的演示文稿和长格式 。

I welcome pull requests to WebSlides so we can keep improving and expanding this tool.

我欢迎向WebSlides请求请求，因此我们可以继续改进和扩展此工具。

Please share this post to anyone you think might be interested in using this tool. I’ll look forward to reading your comments. Feel free to email me if you have any questions.

请将这篇文章分享给您认为对使用此工具感兴趣的任何人。 我期待着您的评论。 如有任何疑问，请随时给我发送电子邮件 。

Special thanks to Luis Sacristán and Jenn Schiffer (SimpleSlides was a revelation). ? You can also follow updates on Twitter, Dribbble, and Github.

特别要感谢LuisSacristán和Jenn Schiffer ( SimpleSlides是一个启示)。 ？ 您还可以关注有关T witter， D ribbble和G ithub的更新。

翻译自: https://www.freecodecamp.org/news/introducing-webslides-fa7a9e37ff97/