🧑🏿‍🤝‍🧑🏼 🌻 ✋🏽 仕組み：インタラクティブなオンラインコースの開発 🥨 👂 🍽️

私たちのブログでは、オンラインコースの何が問題なのか、それをどのように修正するのかについて既に書いています。今日はトピックを継続し、 HTML AcademyでHTMLとCSSに関するインタラクティブなオンラインコースがどのように開発されているかについてお話します。

誰がコースを思いつくか

まず、コース作成者（または開発チームのメンバー）が持つべき専門的スキルについて話す価値があります。以下は、このような品質のリストのバージョンです。

レイアウトをよく知る必要があります（HTMLおよびCSS）。
タスクのチェックを記述して「復活」させるためにJavaScriptを理解する（ここではCodepenのようなさまざまな「サンドボックス」の使用経験が望ましい）。
設計スキルと思考を書面で表現する能力も必要です。課題は、生徒が自分に必要なものを理解できるように記述できる必要があります。

これは、ITプロフェッショナルがスキルを活用し、絶えず改善することを可能にする興味深い作品です。トピックに関するコースを開発する過程で、著者はそれを徹底的に研究し、すべての落とし穴と微妙さに精通します。

さらに、人々が視野を広げ、新しい分野の知識を習得し、キャリアや人生を変えることさえできるようにする資料の作成（現在、ますます多くの非技術専門家がレイアウトを研究しています）は、単に有益で有益なビジネスです。

コース開発手順

コースの作成は、アイデアを考えることから始まります。この段階で、開発チームは、今回取り上げるHTMLおよびCSSテクノロジーの側面を決定し、最終バージョンでコースがどのように見えるかについても説明します。アカデミーには特別なドキュメントがあり、各チームメンバーは、以前のコースでまだ取り上げられていない、学生にとって非常に有益なトピックや質問の新しいアイデアを書き留めています。

次に、コースシナリオの開発があります。この段階で、著者は理論的な資料を説明するのに役立つメタファーを探しています。例えば、バイアスロンのターゲットと、セレクターの仕事を説明するカードのデッキ、または特異性を説明するための鶏の猫の戦いです。このような比phorは、新しい特性が研究される「理論的」コースでは優れていますが、より多くの応用コースでは、比phorではなく、一般的なアイデアや伝説がより適しています。ゲーム開発者との類推で「設定」と呼びます。

結果は、タスクが比phorまたは凡例によって結合されるコースのシナリオです。これにより、学習プロセスをより面白くすることができます。

このような伝説の使用例は、アニメーションのコースです（最後のトピックで説明しました）。その間に、学生は人間の文明が原始的な状態から宇宙への飛行に行くのを助けなければなりません。

興味深いストーリーラインを持つ別のコースは、変換（ブロックのサイズ変更、回転、変形、移動）のコースです。その中で、必要なアクションはマジシャンによって実行されます。マジシャンは最初に基本的なトリックの実行を訓練し、次に冒険に行き、敵と戦い、最終的に「メガボス」と出会います。

アクションを意味する凡例は常に使用されるとは限りません。より「穏やかな」方法で目的の結果を達成できる場合があります。たとえば、プロパティのスムーズな移行に関するコースの主なストーリーは、HTMLとCSSのトピックに関するクイズです。生徒は質問に答えて、マテリアルデザインを例に使用して、インターフェイスにスムーズな移行を適用する方法を学びます。

次は何ですか

将来、利用可能な資料のコレクションがあり、コースで使用され、タスクの「物理的な」開発が開始されます。「複雑なものから単純なものまで」という原則に従って進められます。最初に、トレーニング中に習得しなければならないすべての資料を組み合わせて、コースの最終タスクに取り組みます。そして、このセクションは、コースの特定の質問に関するタスクを含む小さなサブセクションに分割されます。

以下は、現在開発中のコースの1つのドラフトです。具体的な目標と目的をまだ詳しく述べていません。開発中に、すべての設計コードが外部設定ファイルに転送され、目標が作成され、チェックが書き込まれます。

コースの最終的な「洗練」の前の最終ステップは、その開発に関与しなかったチームメンバーの最終レビューです。タスクの数か月間の作業の直接の著者は「目をぼかす」ため、明らかな欠陥やエラーは確認できません。

最終段階で表示されたすべての編集が完了すると、コースは「事前販売準備」を経て発行されます。そして、学生からのフィードバックの収集が始まります。学生はすぐにさまざまなエラーを見つけ、自分の願いを表現します。したがって、コースでの作業はほとんど終わりません。

それほど単純ではない

理想的なコース開発プロセスは上記のとおりです。しかし、人生ではすべてがスムーズに進むことはめったになく、リストされた各段階でいくつかの困難がしばしば発生します。

実際、コースの最初のアイデアが最終製品に変更を加えることなく実現したことは決してありません。原則として、アイデア自体とストーリーラインは数回、時には劇的にさえ変化します。

コースの開発において、HTMLアカデミーではBlizzardアプローチを採用しています。この会社は、ゲームの開発に多くの時間とお金を費やし、その後、リリースすることはできませんでした。私たちの実践では、コースを開発する経験もありましたが、後で発行を拒否しました。なぜなら、私たちの意見では、学生が質の高い方法で資料を習得する機会を与えなかったからです。

さらに、コースは多くの場合、いくつかの部分で構成されます。最初に基本的なものと概念が明らかにされ、次に高度なテクニックに没頭します。トピックに関するコースの作業を開始するとき、作者はより自由になり、プロットの作成とタスク自体の精緻化を促進します。そして、「続編」に取り組んでいる間、彼はすでに以前に定義されたフレームワーク内にいます-そのような状況では、本当に興味深い伝説とタスクを考え出すことはより困難です。

技術的な問題

純粋に組織的な困難に加えて、コース開発者が直面する大きな階層と純粋に技術的な問題があります。最も明白なのは、CSSを使用する場合、さまざまなブラウザーがさまざまなスタイルとプロパティをさまざまな方法でサポートし、時にはそれらを巧妙に解釈するという事実を考慮する必要があります。この点に関して、同じChromeブラウザーの複数のバージョンの動作でさえ、非常に異なる場合があります。

特に、変換に関するコースを作成するときに同様の違いが現れました。実際、ブラウザーは変換をマトリックスに変換します。たとえば、変換はtrans transform: scaleX(1)

をmatrix(1, 0, 0, 1, 0, 0)

transform: scaleX(1)

にtransform: scaleX(1)

ます。

ただし、変換関数に角度が関係している場合、異なるブラウザーは異なる方法でマトリックス値を丸めます。たとえば、変換transform: translate(198px, 210px) scale(0.6)

または同一transform: translate(-198px, -210px) rotate(180deg) scale(0.6)

は、次のマトリックス値に変換できます。

 "matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198, 210)" "matrix(0.6, 0.00000000000000007347880794884119, 0.00000000000000007347880794884119, 0.6, 198.00000000000003, 209.99999999999997)" "matrix(0.6, 0, 0, 0.6, 198, 210)"

そして、これは最も人気のあるブラウザーの動作の違いにすぎません。

角度と変位値を計算するために、マトリックスの逆変換で解決策が見つかりました。

 function(transform) { var values = transform.split('(')[1]; values = values.split(')')[0]; values = values.split(','); var a = values[0]; var b = values[1]; return Math.round(Math.atan2(b, a) * (180/Math.PI)); }

勾配のコースを開発するとき、すべてが簡単ではありませんでした。事実、歴史的には、構文のいくつかの異なるバリエーションが最終的に解決される前に置き換えられました。さらに、最新の構文でも同じ効果を設定するさまざまな方法があり、コース内のすべての可能な値を確認する必要があります。

以下は、同じ結果をもたらすいくつかのコードオプションです。

 linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); linear-gradient(rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30)); linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30)); -webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30) 100%); -webkit-linear-gradient(top, rgb(255, 255, 255) 25%, rgb(17, 153, 255) 50%, rgb(0, 57, 166) 75%, rgb(213, 43, 30));

autoprefixerを使用してこの問題を解決することができました。ユーザーのブラウザのバージョンが古い場合（または特定の学生がタスクをチェックで提供しないと判断した場合）、最新の構文のバリエーションがブラウザでチェックされます。その後、ユーザーは[チェック]ボタンを手動でクリックする必要があります。その後、サーバーでコードがチェックされます。そこで、autoprefixerを使用するコードは、ブラウザエンジンに必要な形式に変換されます。ファントムで使用されているWebkitのバージョンを知っており、コードが変換される値を正確に決定できます。

エンゲージメントの増加

学習プロセスをさらに刺激的で興味深いものにするために、HTMLアカデミーコースではゲーミフィケーションが積極的に使用されています。アチーブメントの標準的な「アチーブメント」に加えて、タスク自体は特定のゲームメカニクスを使用して開発されます。これについては、このトピックで詳しく説明しました。

さらに、学習への関心はボーナスタスクの存在によって促進されます-特定のタスクのテキストでは、多くの場合、追加の「レベル」を開く方法に関するヒントを見つけることができます（特定のコースの「ファン」は、より多くのトレーニングの機会を本当に感謝しています）。これもすべてゲーミファイドです-隠されたレベルを完了すると、学生はさらに成果を上げます。

ボーナスタスクの1つの例を次に示します。目標のあるブロックには、特定の値ではなく一般的な形式で記述された追加のタスクが表示されます。ここで、生徒はそれを達成するために実験を行い、成績と評価のポイントを個別に受け取る必要があります。

ところで、多くの多方向コース（基本コースと上級コースの両方）を接続するプロット要素がいくつかあります。たとえば、さまざまなタスクでは、カップケーキという名前のアカデミーAlexPershinの創設者の猫の画像がよく使用されます。

たとえば、これは、学生が<video>

を追加する必要があるタスクの1つです。挿入されたビデオは、彼がまだ子猫だった当時のKeksだけを示しています。

すべてのコースでこのような共通の「猫」ストーリーラインが存在すると、ユーザーをさらに魅了し、コースを楽しく思い出深いものにします。

やってみたい

ご覧のとおり、コースを作成するプロセスは一見簡単に思えませんが、この方向で作業を成功させるには、専門家チーム全体が必要です。

タスクとチェックを開発するには、強力なJavaScriptプログラマが必要です。また、プロットを作成するスクリーンライターと、プロットを視覚化できるデザイナー（これらの品質を組み合わせた専門家がどこかにいるかもしれません）が必要です。プロットは、コンテンツの専門家が処理する必要があります。

そのような専門家を見つけるのは容易ではありませんが、彼らは高価であるだけでなく、コースを修復する必要があります（そして、非常に高価にすると、誰もそれを勉強しません）。

したがって、トレーニングコースの作成を開始する準備ができているが、アカデミーでまだ発表されていないトレーニング資料（およびストーリーライン）を作成するためのアイデアを持っているおなじみのスペシャリストがいない場合は、私たちに書いてください。あなたのアイデアが実現される可能性は十分にあります。

今日は以上です。見てくれてありがとう！

仕組み：インタラクティブなオンラインコースの開発