Webスライドを使用してHTMLプレゼンテーションを作成する方法

の世界で インターネット上で私たちのアイデアを示す ますます必要になり、ツールの多様性が私たちに素晴らしいプレゼンテーションを作成するように導いたところで、多くの場合、間違いなく、いくつかのメディアと互換性がなくなります。 HTMLプレゼンテーション これらは、この分野での普遍的な代替手段であり続けます。

しかし、美しいHTMLプレゼンテーションの作成には長い時間がかかり、HTML、CSS、場合によってはJavaScriptの高度な知識が必要になることは誰にとっても秘密ではありません。 これらの問題から、と呼ばれる優れたツールが出現します ウェブスライド。

ウェブスライドとは何ですか?

それをどういうわけかオープンソースの「フレームワーク」と呼ぶことです。 ホセ・ルイス・アンチューンズ、それは私たちを可能にします HTMLプレゼンテーションを作成する すばやく簡単に。 このツールには、独自のプレゼンテーションを作成するための基本機能があります。同様に、デモプレゼンテーションのいずれかを使用して、数分で好みに合わせてカスタマイズできます。

このツールを使用して作成したHTMLプレゼンテーションは、印象的な美学を備えています。 このツールにはHTMLとCSSの非常に基本的な知識が必要であるため、コンテンツのみに焦点を当て、プレゼンテーションの準備方法にはほとんど焦点を当てるべきではないすべてのタイプのユーザーにとって理想的です。

ウェブスライドをダウンロードする方法は?

Webスライドをダウンロードするには、お気に入りのディレクトリから次のコマンドを実行するだけです。

wget https://github.com/jlantunez/webslides/archive/master.zip

公式リポジトリのクローンを作成することもできます

git clone https://github.com/jlantunez/webslides.git

プロジェクトフォルダ内には、独自のHTMLプレゼンテーションの作成を簡単に開始するために必要なjs、css、およびデモが含まれています。

ウェブスライドの使い方は?

Webスライドの最大の利点は、その使いやすさです。このツールを使用すると、さまざまな目的でプレゼンテーションを簡単に作成でき、デモシリーズではプレゼンテーションの作成プロセスが非常に高速になります。

ウェブスライドをダウンロードすると何が得られますか?

ウェブスライドをダウンロードするとき、デモや画像(デバイスやロゴ)を含むさまざまなフォルダにアクセスします。

  • cssフォルダーには、プレゼンテーションのスタイルが保存されます
  • jsフォルダーには、ほとんどの魔法が行われる基本的なwebslide.jsを含め、必要なjavascriptが保存されます。
  • デモの画像とhtmlファイルは、それぞれ画像フォルダとデモフォルダに保存されます。
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Webスライドを使用したHTMLプレゼンテーションの作成

ウェブスライドを使用する場合、2つの基本的な利点があります。これについては以下で説明します。

  • コードはクリーンでスケーラブルです。 また、最も人気のある命名法を使用した直感的なマークアップも含まれています。 クラスを使用したり、ネストを使いすぎたりする必要はありません。
  • 各 <section> #webslidesでは、スライドを表します。 したがって、ページネーションは非常に簡単です。
スライド1  スライド1

同じように、垂直方向のスライドを作成して、垂直方向のスタイルを追加できます


WebsidesCSSを構成するクラス

  • タイポグラフィ:.text-landing、.text-data、.text-intro..。
  • 背景色:.bg-primary、.bg-apple、.bg-blue..。
  • 背景画像:.background、.background-center-bottom…
  • カード:.card-50、.card-40..。
  • フレキシブルブロック:.flexblock.clients、.flexblock.metrics..。

ウェブスライドへの拡張

webslidesを使用すると、新しいスタイルや機能を追加できます。たとえば、次のリソースのいくつかを追加できます。

Webスライドで作成されたHTMLプレゼンテーションのデモ

Webスライドで作成されたHTMLプレゼンテーションの一連のデモを見ることができます ここで。 同様に、フレームワークをダウンロードすると、これらの各デモのエンコーディングにアクセスできます。

デモHTMLプレゼンテーション

デモポートフォリオ2 これは、HTMLプレゼンテーションをすばやく、優れた仕上がりで作成できるツールですが、コンテンツに集中して、これまで想像もしなかった結果を達成するのにも役立ちます。


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

3コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   アランフェンテス

    非常に良いです。このツールは非常に興味深いものですが、私の好みでは、reveal.jsはHTML、CSS、JSなどのWebテクノロジに基づいたツールであり、これらのテクノロジの基本的な知識があり、すでにプレゼンテーションを作成できます。もっと面白くなります。

    ご挨拶。

  2.   匿名

    たくさんのオリジナルコンテンツを祝うのはいいことです
    https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides

    1.    ラガルト

      匿名のプロフィールに隠れることは非常に批判し、あなたが望むことを言うのは簡単ですが、残念ながらあなたの係数があなたの目が見えるところを超えて見えないことは理解できます、この記事は公式文書とレビューに基づいて完全に私によって書かれました私はツールでやりました。 どちらがあなたにアイデアを与えるか、それがgithubで最近最も投票されたアプリケーションであるという事実のおかげで私はそれを知るようになりました https://github.com/jlantunez/webslides…しかし、私たちと同じように書いている他のサイトを探すのに時間をかけたことは私たちにとって非常に重要です。そうすれば、私が応募者のままでいると思うレビュアーの欠員に応募することができます。適切なものを決定するための基準があるかどうか疑問に思います。