Webテクノロジーを使用してプレゼンテーションを作成する方法

誰もがオフィスモンスターPowerPointとKeynoteを知っていますが、何らかの理由で喜んで作業している人はほとんどいません。 本当に、あなたがまったく会計士ではなく、開発者または単なるオタクであり、オフィススイートよりもコードの方がはるかに快適だと感じたらどうでしょうか。 非常に長い間、プレゼンテーションはブラウザで直接作成でき、HTML、CSS、Markdownなどのシンプルで馴染みのあるものを使用して作成できます。



私たちはそれぞれ、自分の考えを他の人に伝える必要がある瞬間を持っています。 同僚に逸話を伝えるだけでなく、嵐の暗闇について韻をたたくのではなく、根本的に重要なことを伝え、複雑なアイデアを説明し、経験を共有します。 そして、TEDの参加者がそうであるように、最も才能のある人がステージに上がって自分自身になるだけで十分であれば、ほとんどの人がスライドに頼る必要があります。 ホワイトボードでマーカーを使って初めて忘れたのは、CSSブロックモデルに関するレポートの重要な考えを誤って解釈したことだけです。

仕組み

Webテクノロジーの開発により、長い間、青いリンクをたどるだけの娯楽があったドキュメントサイトから離れました。 現在、HTML、CSS、およびJavaScriptを使用して、アプリケーションを作成できるだけでなく、Firefox OSの場合のように、本格的なオペレーティングシステム用のインターフェイスを作成することもできます。



プレゼンテーションに適用する方法は？ プレゼンテーションをHTML、Markdown、またはYAML形式で記述し、ブラウザで結果を起動し、フルスクリーンモードに戻ってストーリーを開始するだけです。 このようなプレゼンテーションは、リモートを完全にリッスンし、トランジションをアニメーション化し、通常のテキストとリストに加えて写真とビデオを挿入できます。

オペラショー

Opera Showは、ブラウザでプレゼンテーションを作成するための最初の形式です。 Haakon Wium Leeのプレゼンテーションジェネレーターを試すことができます。 OSF 1.0形式のドキュメントも利用できます。



ブラウザで直接プレゼンテーションを作成しようとした最初の試みは、2000年にリリースされたOpera Showシステムでした。 このシステムは、Opera 4.0ブラウザーが全画面モードに切り替えたときに画面メディアを投影に切り替えるという事実に基づいていました。 これにより、新しいスタイルを記事に追加し、スライドに分割し、およびボタンでスライドを切り替えるのは非常に簡単でした。

<link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="projection.css" media="projection">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Projection.cssファイルは、フルスクリーンモードでのみ接続します。 さらに、Opera Show形式は、JavaScriptを1行も使用せずに動作してスタイルまたはスライドを切り替え、CSSのすべてのパワーとブラウザーの魔法を示しました。 これは偶然ではありません。この形式の主なイデオロギーは、Opera Softwareのテクニカルディレクターであり、CSSの発明者であるHaakon Wiom Leeでした。

S5

S5 -Eric MeyerによるOpera Showアイデアのクロスブラウザ開発、プレゼンテーションの一例。 「S5」。これは、5文字全体のフルネームであるためですS：シンプルな標準ベースのスライドショーシステム。



数年後、別のCSSの族長エリック・メイヤーがOpera Showの機能を拡張し、2004年に発表されたプレゼンテーションエンジンの最初のバージョンを公開しました。 Operaが提案したブラウザを全画面モードでプレゼンテーションモードに切り替えるというアイデアは、他のブラウザではサポートされていなかったため、S5システムでは、MeyerはJavaScriptを使用してプレゼンテーションスタイルを切り替えました。



S5システムは、ウィンドウのサイズに応じてスライド上のフォントを段階的にスケーリングし（CSSメディア式を使用）、同じスライド内のリストやその他の要素をナビゲートできるようにし、プレゼンテーションのプレゼンテーションテーマを接続するシステムを提案しました。



その後、S5システムはjQueryで書き直され、 S6という名前が付けられ、 S9と呼ばれるRuby wikiスライドジェネレーターが作成されました。 しかし、S5に基づくこれらのプロジェクトやその他のプロジェクトは、開発と人気を獲得しませんでした。

ラルと爆発

S5システムの登場後、ブラウザで機能するプレゼンテーションの歴史に小康状態がありました。 誰もがオフィススイートに移動したか、ブラウザの機能だけでは本当に印象的なものには不十分でした。



そして、CSS3とHTML5が腕を組んで地球上で勝利の行進を始めたときのみ、カンブリアの爆発が起こりました。ブラウザのプレゼンテーションエンジンが、最も単純な著作権のものから企業のものまで、次々と現れ始めました。

CSSS

CSSSは、CSSの力を活用するLeah Verowのスライドショーシステムです。 S5のように、CSSベースのスライドショーシステムのフルネームにも多くのSがあります。



2010年、Leah VerouはFront-Trendsカンファレンスでプレゼンテーションを行い、Web開発オリンパスへの登山を開始しました。このプレゼンテーションでは、CSSSエンジンを特別に作成しました。 聴衆はプレゼンテーションを非常に気に入ったため、Leahは即座に技術会議で最も人気のある講演者になり、CSSエンジンはGitHubで公開されました。



CSSSは、プレゼンテーションを機能させるためにCSSのパワーを最大化するというS5のアイデアを継承していますが、LeahのJavaScriptエンジンは新しいレベルに上昇しています。 JavaScriptプラグインはエンジン用に作成されました。1つはコードを強調表示するためのもので、もう1つはスライド上でコードを直接編集するためのものです。 プラグインの2番目のグループにより、Leahはスライド自体のすぐ上にあるスライドのサンプルコードを編集することで、拍手breakを破ることができました。 今では、画面上の写真だけでなく、実験用のライブインターフェイスでもありました。



この波のプレゼンテーション用の他のエンジンと同様に、CSSSはブラウザーの最新バージョンとのみ互換性があり、最初はLeahのエンジンは、お気に入りのFirefoxブラウザーのナイトリービルドでのみ正常に機能しました。 しかし、Leahが書いているように、会議の技術的環境には常に、自分のコンピューターを接続するか、ブラウザーの最新バージョンを接続することが含まれます。

Reveal.js

Reveal.jsはHakim El-Khattabaのプレゼンテーションエンジンであり、そのシンプルさ、3D効果、およびプレゼンテーションrvl.ioを作成するための特別なオンラインサービスに惹かれます。



2011年、スウェーデンの開発者Hakim El-Khattabは、ローカル会議用にSVGに関するレポートを準備していました。CSSの3D機能を使って、シンプルなプレゼンテーションエンジンを構築しました。 彼はそれを単にCSS 3D Slideshowとも呼びました。 3次元効果と2レベルナビゲーションは一般の人に愛されているため、このエンジンは新しい名前Reveal.jsで開発されました。 このプロジェクトは、新しい名前だけでなく、ドキュメント、コミュニティサポート、GitHubのリポジトリなどの他の深刻なものも取得しましたが、元のシンプルさを失いませんでした：中央にハイライト、中央に白い文字、印象的な3Dスパンを備えた暗いフィールド。 しかし、Hakimはこれに落ち着かず、Reveal.jsエンジンでプレゼンテーションを作成してサイトに保存できるサービス全体を作成しました。



このエンジンの興味深い機能の1つは、Markdown形式でスライドコンテンツを作成できることです。 このテキストをその場でHTMLに変換することは特別なスクリプトです。

Impress.js

Impress.jsは、Bartek Shopkaのプレゼンテーションエンジンであり、3Dスパンを備えており、ブラウザ内でオープンテクノロジーを使用してPreziの「アイデアのあるサーフェス」アプローチを開発しています。



impress.jsエンジンBartek Shopkiのプレゼンテーションは挑発的に始まります。退屈な白いスライドが表示され、「同じプレゼンテーションにうんざりしていませんか？」という質問が表示されます。1つ目のスライド、2つ目、3つ目... プレゼンテーションを構成するすべてのアイデアがunningな方法で散らばっており、次への移行には複雑なスパンが伴い、息をのむような広い面にいることに気づきます。



2011年に登場したimpress.jsエンジンは、 Preziプレゼンテーション作成サービスの 「アイデアのあるサーフェス」アプローチを開発し、アニメーションとReveal.jsなどの3D CSS機能を使用するブラウザーで利用可能な新しいテクノロジーと組み合わせます。 Preziが閉じたFlashプラットフォームの商用サービスである場合、impress.jsはプラグインや料金プランなしでブラウザで直接動作するオープンライブラリです。

Googleテンプレート

Google I / Oのテンプレートは、Googleの企業プレゼンテーションエンジンであり、慎重に設計されたスタイル、スピーカーノート用の別ウィンドウがあります。 テクニカルレポートに最適です。 このテンプレートの以前のバージョンは 、企業的ではありません。



ブラウザーでのプレゼンテーションが、新しいテクノロジーに対する熱意と愛情で互いに競い合う多くの独身の技術者であるとまだ考えているなら、あなたは間違っています。 GoogleがブラウザにGoogleドキュメントという形で本格的なオフィスをもたらした世界最大の企業の1つであるGoogleは、プレゼンテーションエンジンの実験を長年行ってきました。 そして、大衆ユーザーにとって、これがブラウザで直接Googleドキュメントからプレゼンテーションを作成して表示する機会であることが判明した場合、Googleの技術者はGoogle Developer DayおよびGoogle I / O会議で話すために独自のエンジンのいくつかのバージョンを使用しました。



Googleプレゼンテーションの「企業」エンジンの最新バージョンは、主要なGoogle I / O 2012会議でのスピーチに備えたテンプレートでした。このテンプレートを使用すると、単純なテキストやコードスニペットから複雑なテーブル、共有チャートまで、考えられるすべての種類のコンテンツを使用できます。 大人のデスクトップシステムと同じように、2番目のモニターに別のブラウザーウィンドウを表示して、スライドに関するメモと、現在のスライドと次のスライドの概要を取得することもできます。

叙情的な余談

個人的な経験を共有する時が来ました。 あなたの謙虚な僕は、2007年のRITカンファレンスで彼の最初のレポートを読み、Adobe Illustratorで作成しました。数分間開いた1600 x 7800ピクセルの巨大なドキュメントで、容赦なく遅くなり、最終的にPDFで印刷されました。 確かに、Illustratorは私が今まで使った中で最も不快なプレゼンテーションツールでした。 ここでは、悲しげなポーズを取る必要があります。



次に、PowerPointのテンプレートを使用する試みがありました。そこから、彼らは歯を曲げて、Keynoteとの短い関係を築きました（Appleはひどいことはできませんよね？） そして最後に、私は単純な考えに至りました。もし私が技術者であり、技術について、その途方もない力と可能性について語るなら、自分の考えに矛盾するツールを使用する価値はありません。

情報

Web Standards Daysは、フロントエンドテクノロジーに関する無料のカンファレンスです。2009年以降、ミンスク、キエフ、サンクトペテルブルク、モスクワなどのWeb Standardsコミュニティによって開催されています。



2009年に、Web StandardsコミュニティはMinskで最初のWeb Standards Days会議を開催しました。この会議では、Webフォントについての講演を行いました。 試みは成功しましたが、このプレゼンテーションはOpera Showシステムで動作しましたが、もちろんOperaブラウザでのみ動作しました。 このエンジンが非常に興味深いものに発展する前に2年が経過したので、他の人と共有したいと思いました。

シャワー

シャワーは、スライドショーモードを備えたプレゼンテーションエンジンであり、テーマはエンジンとは別のものであり、ブラウザ間を広くアクセスできます。 名前は言葉の遊びです。ロゴはシャワーを表しますが、「シャワー」は「見せるもの」でもあります。



2011年、同じRITで、「意味のあるレイアウト」というレポートの初演が行われ、新しいシャワープレゼンテーションエンジンが最初に公開されました。 エンジンの主な機能は2つのモードでした。1つはスライドのリスト、もう1つはプレゼンテーションです。 シャワーは、スライドのエンジンとテーマを基本的に分離しているため、テーマの助けを借りて、見た目以上に見た目を変えることができます。







シャワーには2つのリボンとブライトのテーマが含まれていますが、Impress.jsの範囲よりも効果は低くなりますが、プレゼンテーションの質が低下するのが難しくなる状況を作り出します。スライドにテキストが多く配置されず、大きくて対照的です。写真はスライドのサイズ全体に快適に収まります。 ここでのクロスブラウザアクセスは、他の多くのエンジンとは異なり、最高です。テーマは、人気のあるブラウザーの最新の安定バージョンでサポートされていない機能を使用しないだけです。



シャワーは、Fandeersカンファレンスで、Yandex開発者、クラスメート、Evil Martiansなどの多くのプレゼンテーションですでに見られています。 しかし、著者としての私にとっての本当の認識は、SXSW 2012カンファレンスでのOpera Showの著者であるHaakon Wium Leeのパフォーマンスでした。HaakonはプレゼンテーションにShowerを使用しました。

おわりに

長年にわたるカンファレンスの人気の高まりは、大規模なだけでなく小規模な非営利団体でもあり、スピーカーのツールに新たな機会をもたらしました。 巨大なオフィススイートはその地位を放棄しませんが、特にテクニカルレポートでは、ブラウザプレゼンテーションの人気が高まっていることは明らかです。



最新のテクノロジー、そのようなエンジンをニーズに合わせて簡単にカスタマイズできること、プラットフォームに依存しないこと、デモンストレーションへの根本的に新しいアプローチにより、ブラウザープレゼンテーションは、従来のプログラムにあるかもしれない新鮮なアイデアの出現の中心になります。



eGelを完全に置き換えるのではなく、Webテクノロジーの理解、実験、新しい試みに興味がある場合は、ブラウザープレゼンテーションを試す機会をお見逃しなく。 そして、あなた自身のエンジンをより良く書きましょう-全世界をvyませるために。

WWW

ウィキペディアには、ブラウザで動作するすべてのプレゼンテーションシステムの概要を含むWebベースのスライドショーの記事全体があります。 Luis Lazarisの記事とSitePointの5つの最高のHTMLプレゼンテーションシステムの概要に特に注意を払う必要があります 。

2013年5月5日付のHacker誌に最初に掲載されました。

投稿者：Vadim Makeev、オペラの伝道者、 pepelsbey



ISSUU.comに公開する



ハッカーを購読する

• 1 999 p。 12枚の用紙オプション
• 1249 RUR iOS / iPadの年間サブスクリプション（Androidリリースは近日公開予定！）
• Androidのハッカー

PS []のために書いて、知識と興味深いアイデアを共有できますか？ 教えてください:)。 私たちは手数料を支払いますが、これが主な動機であってはなりません。