デザイナーのためのWebテクノロジー-負債の返済

私には、Habrに対する義務があります。 2年前、私は「 デザイナーのためのWebテクノロジー-理由と方法 」という記事を書きましたが、記事の続きはリリースしませんでした。



そして最後に、この借金の一部を返還することができます。 11月中、朝と週末に、デザイナー向けのJSに関するトレーニングビデオを録画しました。 プロジェクト中に、彼はさまざまなフォーマット、機器、および後処理を試しました。 この投稿では、コースの作業の月を要約し、それを書き留めながら私自身が学んだことについて話します。



コースは2つのタスクに直面しました。

1. 技術に関する知識が日常業務でどのように役立つかを設計者が理解できるようにします。
2. 技術を学びたいデザイナーのために、簡単に始められる場所を与えてください。

最初の問題を解決するために、デザイナーが作業するための新しいアプローチを理解できるように設計されたいくつかの短いビデオを記録しました。

1. KraftとJSONを使用したスケッチルーチンの戦い
2. サイトからデータを取得し、JSONに変換してSketchにフィードする方法
3. Stylishを使用して製品の新しいバージョンをプロトタイプする簡単な方法
4. ブラウザー拡張機能を作成する方法

人々はこれらのビデオを見て、気に入りました。 すべてが見えたので、トピックをより詳細に分解し始めることができます。 そのため、 データテンプレートを使用した例を作成し、それについての紹介ビデオ「 レッスンNo. − 1：デザイナーがWebテクノロジーを学べない理由 」を記録しました。 彼らはビデオを1296回、83回、7回嫌いで見ました。



この例が実際の例のように見えたかったのです。 しかし、ほとんどの視聴者にとって、彼は複雑すぎるように見えました。 その動作の原理を説明するために、簡単な例を記録しました：「 データテンプレートの簡単な例 」。



さらに、計画は次のとおりでした。この例に基づいてJSに関するさまざまなトピックを分解し、各レッスンで例がより明確になるようにしました。 そして、人々が基本を理解したら-純粋なJSからReactに例を書き換えて、それについてのコースを開始します。



そして、私は最初のビデオの録画を開始しました：

1. JS構文
2. 変数
3. 機能
4. オブジェクト
5. 配列
6. ジョンソン

ビデオは15分から20分と長く、最後まで見ることができる人はほとんどいませんでした。 それで、私はトピックをより小さなものに分割し始めました。 たとえば、条件文の解析は次のようになりました。

1. 条件演算子：基本
2. ブール値と比較演算子
3. ブールキャスト
4. 論理演算
5. 三項演算子
6. 条件付き割り当て
7. 宿題の分析

DOMの操作の基本についての同じビデオセットを記録しました。

1. DOM：基本
2. ページ上のノードを検索する
3. サイトのプロパティとそのコンテンツの読み取り
4. ノード編集
5. ノードツリートラバーサル
6. 宿題の分析

ビデオが短く、軽くなったという事実にもかかわらず、ビューの数は減少しました。 ビデオはまだ複雑すぎて、ケース間で見ることができません。 また、視聴に時間を割こうとする人にとっては、短い動画よりも1つの動画全体を視聴する方が簡単です。 さらに、ビデオは退屈になりました。



コースで次に何をするかは、まだ完全には明らかではありません。 一方では、多数の意見が、トピックへの関心が落ち着いていることを示しています。 一方で、入手した資料の品質と作成に費やす時間に満足していません。



いずれにせよ、コースの作成は私にとって興味深い経験であり、いくつかのことを学びました。

1. コードを操作するためのクールなサンドボックスcodesandbox.ioを見つけました。 その中で、 codepen.ioのように個々のピースだけでなく、ファイル構造を持つプロジェクト全体も作成できます。
2. Screencastの編集に非常に便利であることが判明したScreenFlowを使用することを学びました。
3. 家庭環境で音を書くことは、大きなマイクよりもループの方が優れています 。 壁からのエコーに対処する必要がないため、妥当な品質を達成するのははるかに簡単です。
4. 電話でビデオを作成できますが、少しスキルが必要です。 たとえば、最新のビデオでは、録画品質が非常に低く、画像は常にジャンプしています。 これは、Note 9の何らかのビデオ安定化機能のようです。
5. すぐにライトを購入する必要があります。 AliExpressの2つのソフトボックスの価格は3000ルーブルで、ビデオの品質は著しく向上しています。
6. 私は自分の人生のすべてを「ターナン」演算子を「トリナー」と誤って呼んでいることを知りました。
7. ビデオを録画する前に、すべての外国語の発音を確認することをお勧めします。そうしないと、残念です。 :)

最後まで読んでくれてありがとう。 このコースを改善する方法についてご意見がありましたら、ご意見をお寄せください。 このコースは、開発者ではなく設計者にテクノロジーを普及させるように設計されています。 したがって、パフォーマンスの問題を省略し、時には意図的に「悪いことを教える」こともあります。これは、プロトタイプではパフォーマンスとクリーンさが大きな役割を果たすことはめったにないからです。





PS：新しい読者が同じ質問をする必要がないように、投稿の更新でコメントに応答します。



PPS：コース、つまり電報チャネルdeteprに興味がある場合。 開発の基本についての記事でHabrを詰まらせる-手は上がりません。 それで、私は約半年でコースに関する次の記事を書きます。