Webtechnologien für Designer - ich gebe die Schuld zurück

    Was macht die Orangen?  Sie sind nur orangeIch habe eine Pflicht gegenüber Habr. Vor zwei Jahren schrieb ich den Artikel " Webtechnologien für Designer - warum und wie ", aber ich habe die Fortsetzung des Artikels nicht veröffentlicht.

    Und jetzt kann ich endlich einen Teil dieser Schulden zurückzahlen. Den ganzen November, morgens und am Wochenende, habe ich Lehrvideos über JS für Designer aufgenommen. Im Laufe des Projekts wurde mit verschiedenen Formaten, Geräten und Nachbearbeitungen experimentiert. In diesem Beitrag werde ich den Monat der Arbeit am Kurs zusammenfassen und Ihnen erzählen, was ich während der Aufnahme selbst gelernt habe.

    Der Kurs hatte zwei Aufgaben:

    1. den Konstrukteuren zu zeigen, wie ihr technologisches Wissen in ihrer täglichen Arbeit nützlich sein kann;
    2. Geben Sie denjenigen Designern, die Technologie erlernen möchten, eine einfache Plattform, um anzufangen.

    Um die erste Aufgabe zu lösen, habe ich ein paar kurze Videos aufgenommen, mit denen Designer neue Arbeitsweisen erkennen können:

    1. Eine Routine in Sketch mit Crafting und JSON bekämpfen
    2. So übernehmen Sie Daten von der Site, wandeln Sie sie in JSON um und füttern Sie die Skizze
    3. Ein einfacher Weg, um mit Stylish einen Prototyp einer neuen Version des Produkts zu erstellen
    4. So erstellen Sie eine Browsererweiterung

    Diese Videos haben die Leute gesehen und gemocht. Alles sah so aus, dass Sie das Thema detaillierter zerlegen können. Deshalb habe ich ein Beispiel mit Vorlagendaten erstellt und dazu ein Einführungsvideo aufgenommen :Lektion 1: Warum Designer es nicht schaffen, Web-Technologien zu erlernen “. Die Videos wurden 1296 mal angesehen, 83 mal sie mögen und 7 mal waren sie deaktiviert.

    Ich wollte, dass das Beispiel wirklich aussieht. Aber für die meisten Zuschauer schien es zu kompliziert. Um die Prinzipien seiner Arbeit zu erläutern, habe ich die Analyse eines vereinfachten Beispiels niedergeschrieben: "Ein vereinfachtes Beispiel für die Datenvorlage ".

    Der Plan sah außerdem Folgendes vor: verschiedene Themen zu JS anhand dieses Beispiels zu sortieren, so dass mit jeder Lektion das Beispiel klarer wird. Und dann, wenn die Menschen die Grundlagen verstehen, das Beispiel von pure JS in React umschreiben und einen Kurs darüber beginnen.

    Und ich fing an, das erste Video aufzunehmen:

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

    Die Videos waren lang und dauerten jeweils 15 bis 20 Minuten. Nur wenige konnten sie den ganzen Weg sehen. Daher begann ich, die Fäden in kleinere zu zerlegen. Zum Beispiel sah die Analyse bedingter Operatoren so aus:

    1. Bedingte Operatoren: Grundlagen
    2. Boolesche Werte und Vergleichsoperatoren
    3. Typumwandlung in logisch
    4. Logische Operationen
    5. Ternärer Operator
    6. Bedingte Zuordnung
    7. Hausaufgabenanalyse

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

    1. DOM: Grundlagen
    2. Suchknoten auf der Seite
    3. Knoteneigenschaften und deren Inhalt lesen
    4. Knoten bearbeiten
    5. Baumknoten durchlaufen
    6. Hausaufgabenanalyse

    Trotz der Tatsache, dass die Videos kürzer und leichter geworden sind, ist die Anzahl der Aufrufe zurückgegangen. Die Videos sind immer noch zu komplex zum Anschauen. Und die Leute, die bereit sind, Zeit zu verbringen, ist es einfacher, ein Video vollständig anzusehen als ein paar kurze. Außerdem sind die Videos nur langweiliger geworden.

    Was weiter mit dem Kurs zu tun ist, ist noch nicht ganz klar. Auf der einen Seite zeigen Dutzende Ansichten, dass das Interesse an dem Thema sich setzt. Auf der anderen Seite bin ich nicht zufrieden mit der Qualität dieser Materialien und der Zeit, die für ihre Herstellung benötigt wird.

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

    1. Fand ein cooles Sandox für die Arbeit mit dem Code: 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 dem Programm ScreenFlow zu arbeiten , das sich beim Editieren von Screencasts als sehr praktisch erwiesen hat.
    3. Es ist besser, einen Sound unter Lebensbedingungen auf ein Knopfloch zu schreiben , als auf ein großes Mikrofon. Eine erträgliche Qualität zu erreichen ist viel einfacher, da Sie sich nicht mit dem Echo der Wände beschäftigen müssen.
    4. Sie können Videos mit dem Telefon schreiben, aber Sie benötigen etwas Geschick. Zum Beispiel habe ich im letzten Video eine sehr schlechte Aufnahmequalität und das Bild springt ständig. Es scheint, dass dies eine Art Videostabilisierungsfunktion in Anmerkung 9 ist.
    5. Wir müssen sofort das Licht kaufen. Zwei Soft-Boxen mit AliExpress kosten 3000 NZ, und die Videoqualität ist deutlich besser geworden.
    6. Ich habe herausgefunden, dass ich den Operator "Ternanny" unkorrekt als "Trinary" bezeichnet habe.
    7. Bevor Sie ein Video aufnehmen, ist es besser, die Aussprache aller Fremdwörter zu überprüfen, und dann ist es eine Schande. :)

    Danke, dass Sie bis zum Ende gelesen haben. Wenn Sie sich Gedanken machen, wie Sie diesen Kurs verbessern können, freue ich mich über Kommentare. Der Kurs soll die Technologie bei Designern fördern, nicht bei Entwicklern. Daher verzichte ich auf Leistungsprobleme und lerne manchmal absichtlich „schlecht“, da Leistung und Sauberkeit bei Prototypen selten eine große Rolle spielen.


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

    PPS: Wenn es für Sie interessant ist, die Entwicklung des Kurses zu verfolgen, das heißt, Telegrammkanal detepr . Habr mit Artikeln über die Grundlagen der Entwicklung zu streuen - die Hand erhebt sich nicht. Also den nächsten Artikel über den Kurs werde ich irgendwo in einem halben Jahr schreiben.

    Jetzt auch beliebt: