Web-Technologien für Designer - Schuldentilgung

Ich habe eine Pflicht gegenüber Habr. Vor zwei Jahren schrieb ich den Artikel „ Webtechnologien für Designer - Warum und Wie “ und veröffentlichte die Fortsetzung des Artikels nicht.

Und schließlich kann ich einen Teil dieser Schulden zurückzahlen. Den ganzen November über habe ich morgens und am Wochenende Schulungsvideos über JS für Designer aufgenommen. Während des Projekts experimentierte er mit verschiedenen Formaten, Geräten und Nachbearbeitung. In diesem Beitrag werde ich den Monat der Arbeit an dem Kurs zusammenfassen und darüber sprechen, was ich selbst beim Aufschreiben gelernt habe.

Der Kurs stand vor zwei Aufgaben:

1. den Designern zeigen, wie nützlich technologisches Wissen im Arbeitsalltag sein kann;
2. Geben Sie den Designern, die Technologie studieren möchten, einen einfachen Einstieg.

Um das erste Problem zu lösen, habe ich mehrere kurze Videos aufgenommen, die Designern helfen sollen, neue Arbeitsansätze zu erkennen:

1. Kampfskizzenroutine mit Kraft und JSON
2. So übernehmen Sie Daten von einer Site, wandeln sie in JSON um und geben Sketch ein
3. Eine einfache Möglichkeit, mit Stylish eine neue Version eines Produkts zu erstellen
4. So erstellen Sie eine Browser-Erweiterung

Die Leute haben diese Videos gesehen und gemocht. Alles sah so aus, dass Sie beginnen können, das Thema detaillierter zu zerlegen. Aus diesem Grund habe ich ein Beispiel mit Datentemplatisierung erstellt und ein Einführungsvideo dazu aufgenommen: " Lektion Nr. 1: Warum Designer keine Webtechnologien lernen können ". Sie haben das Video 1296 Mal gesehen, 83 Mal mögen und 7 Mal nicht mögen.

Ich wollte, dass das Beispiel wie ein echtes aussieht. Aber für die meisten Zuschauer schien er zu kompliziert. Um die Funktionsprinzipien zu erläutern, habe ich ein vereinfachtes Beispiel aufgezeichnet: „Ein vereinfachtes Beispiel für eine Datenvorlage “.

Außerdem war geplant, anhand dieses Beispiels verschiedene Themen zu JS zu zerlegen, damit das Beispiel mit jeder Lektion verständlicher wird. Und wenn die Leute die Grundlagen verstehen, schreiben Sie das Beispiel von reinem JS in React um und beginnen Sie den Kurs darüber.

Und ich fing an, die ersten Videos aufzunehmen:

1. JS-Syntax
2. Variablen
3. Funktionen
4. Die Objekte
5. Arrays
6. Json

Die Videos waren lang, jeweils 15 bis 20 Minuten, und nur wenige konnten sie bis zum Ende ansehen. Deshalb begann ich, Themen in kleinere aufzuteilen. Das Parsen von bedingten Anweisungen sah beispielsweise folgendermaßen aus:

1. Bedingte Operatoren: Grundlagen
2. Boolesche Werte und Vergleichsoperatoren
3. Boolesches Casting
4. Logische Operationen
5. Ternärer Operator
6. Bedingte Zuordnung
7. Analyse der Hausaufgaben

Ich habe die gleichen Videos über die Grundlagen der Arbeit mit dem DOM aufgenommen:

1. DOM: Grundlagen
2. Suchen Sie auf einer Seite nach Knoten
3. Lesen der Site-Eigenschaften und ihrer Inhalte
4. Knoten bearbeiten
5. Knotenbaumdurchquerung
6. Analyse der Hausaufgaben

Trotz der Tatsache, dass das Video kürzer und heller geworden ist, ist die Anzahl der Aufrufe gesunken. Die Videos sind immer noch zu komplex, um sie zwischen den Fällen anzusehen. Und für diejenigen, die bereit sind, Zeit zum Anschauen zu verwenden, ist es einfacher, ein Video als Ganzes anzusehen als eine Reihe von kurzen. Außerdem wurden die Videos noch langweiliger.

Was als nächstes mit dem Kurs zu tun ist, ist noch nicht ganz klar. Einerseits deuten Dutzende von Ansichten darauf hin, dass das Interesse an dem Thema nachlässt. Andererseits bin ich nicht zufrieden mit der Qualität der erhaltenen Materialien und der Zeit, die für deren Herstellung aufgewendet wird.

In jedem Fall war das Erstellen eines Kurses für mich eine interessante Erfahrung, die mir verschiedene Dinge beigebracht hat:

1. Ich habe eine coole Sandbox für die Arbeit mit Code gefunden: Codesandbox.io . Darin können Sie nicht nur einzelne Teile wie in codepen.io erstellen , sondern auch ganze Projekte mit einer Dateistruktur.
2. Ich habe gelernt, mit ScreenFlow zu arbeiten, was sich als sehr praktisch für die Bearbeitung von Screencasts herausstellte.
3. Das Schreiben von Ton in einer häuslichen Umgebung ist auf einer Schleife besser als auf einem großen Mikrofon. Das Erreichen einer angemessenen Qualität ist viel einfacher, da Sie nicht mit Echos von den Wänden umgehen müssen.
4. Sie können Videos auf dem Telefon schreiben, benötigen jedoch ein wenig Geschick. Zum Beispiel habe ich in den neuesten Videos eine sehr schlechte Aufnahmequalität und das Bild springt ständig. Es scheint, dass dies eine Art Videostabilisierungsfunktion in Anmerkung 9 ist.
5. Sie müssen sofort das Licht kaufen. Zwei Softboxen mit AliExpress kosten 3.000 Rubel, und die Videoqualität ist spürbar besser geworden.
6. Ich habe gelernt, dass ich mein ganzes Leben lang fälschlicherweise den "Ternan" -Operator "Trinar" genannt habe.
7. Bevor Sie ein Video aufnehmen, ist es besser, die Aussprache aller Fremdwörter zu überprüfen, sonst ist es eine Schande. :) :)

Vielen Dank für das Lesen bis zum Ende. Wenn Sie darüber nachdenken, wie Sie diesen Kurs verbessern können, freue ich mich über Kommentare. Der Kurs wurde entwickelt, um Technologie bei Designern und nicht bei Entwicklern bekannt zu machen. Daher lasse ich Leistungsprobleme aus und unterrichte manchmal absichtlich „schlecht“, da Leistung und Sauberkeit bei Prototypen selten eine große Rolle spielen.


PS: Ich werde auf Kommentare mit Post-Updates antworten, damit neue Leser nicht dieselben Fragen stellen müssen.

PPS: Wenn Sie daran interessiert sind, dem Kurs zu folgen, dh dem Telegrammkanal detepr . Habr mit Artikeln über die Grundlagen der Entwicklung zu verstopfen - die Hand erhebt sich nicht. Also werde ich in ungefähr einem halben Jahr den nächsten Artikel über den Kurs schreiben.