Zum Inhalt springen

JavaScript-Entwickler berichtet über den Ablauf einer Javascript-Programmierung

JavaScript-Entwickler berichtet über den Ablauf einer Javascript-Programmierung für Adobe Illustrator, InDesign, Photoshop & Co.

(Info:) In diesem Artikel »JavaScript-Entwickler berichtet über den Ablauf einer Javascript-Programmierung« für Adobe Illustrator, InDesign, Photoshop und andere Adobe Programme. Dabei werden alle Schritte vorgestellt und mit einem Beispiel konkret beleuchtet.

(Hilfe:) Sie wollen oder können nicht selbst programmieren? Sie brauchen kurzfristig ein Javascript für eine Automatisierung für ein aktuelles Problem in Illustrator oder einem anderen Adobe Programm? Dann helfe ich Ihnen gerne als JavaScript-Entwickler mit meiner jahrzehntelang Programiererfahrung.
Schreiben Sie mir einfach und unverbindlich per Kontaktformular.

Inhaltsverzeichnis

Wunsch oder Problem beim Kunden

Die Entwicklung eines Javascripts für die Automatisierung von Illustrator oder einem anderen Adobe Programme beginnt mit dem Wunsch oder Problem beim Kunden. Eine lästige Handarbeit, die immer wieder vorkommt und vielleicht auch noch fehleranfällig ist, soll per Knopfdruck vom Computer erledigt werden. Das kann das Platzieren von Etiketten in Illustrator sein, das Korrigieren von Preisen in einem InDesign-Dokument oder das Anpassen von Bildern auf die gleiche Größe in Photoshop.

(Beispiel:) Der Wunsch: Der Kunde möchte nur mit Illustrator eine Animation ähnlich wie in Photoshop aus gezeichneten Einzelbildern erstellen.

Beschreibung und Beispiele

Der Kunde beschreibt seinen Wunsch oder Problem und liefert aussagekräftige Beispiele, damit der dem JavaScript-Entwickler versteht, um was es geht.

(Beispiel:) Die Beschreibung: Aus mehreren Illustrator-Zeichnungen soll eine Animation entstehen, die auf unsere Website laufen sollten. Einfaches Beispiel: Eine Ampel, die von Rot auf Grün springt (2 Bilder).

Das Pflichtenheft

Nachdem der Kunde sich an einen JavaScript-Entwickler gewandt hat, erstellt dieser ein Pflichtenheft. In diesem wird festgelegt, was das Javascript leisten muss. Dies folgt dem E-V-A-Prinzip (Eingabe, Verarbeitung und Ausgabe). Welche Arten von Objekten oder Dateien sollen wie verarbeitet werden und was soll am Ende daraus entstehen.

(Beispiel:) Das Pflichtenheft: Voraussetzung (Eingabe) für das Javascript ist, dass die Zeichnungen im Illustrator auf gleichgroßen Zeichenflächen liegen. Für das einfache Beispiel zeigt die erste Zeichenfläche die rote Ampel und die zweite Zeichenfläche die grüne Ampel. Außerdem muss der Benutzer eingeben, wie lange ein Bild in der Animation gezeigt werden soll. Bei der Verarbeitung nimmt das Javascript die Zeichenflächen und der Zeitinformationen und erstellt daraus eine Bild-für-Bild-Animation. Das Ergebnis (Ausgabe) ist eine SVG-Datei, die im Internet leicht eingebunden werden kann.

Die Planung und Abschätzung des Aufwands

Kunde und JavaScript-Entwickler wollen natürlich vorab wissen, wie groß der zeitliche Aufwand für die Programmierung ist. Daher zerlegt der JavaScript-Entwickler die oben definierte Verarbeitung in Arbeitsschritte.

(Beispiel:) Die Arbeitsschritte für die Bild-für-Bild-Animation:

  1. Prüfe, ob das offene Illustrator-Dokument genutzt werden kann.
  2. Per Dialog wird der Benutzer gefragt, wie lange jedes Bild gezeigt werden soll.
  3. Erzeuge auf dem Schreibtisch temporär einen Ordner, in dem jede Zeichenfläche als eigene SVG-Datei gespeichert wird.
  4. Setze die Einzeldateien zu einer SVG-Datei zusammen.
  5. Speichere die SVG-Datei mit der Animation mit dem Namenszusatz »_anim.svg« in den gleichen Ordner der Originaldatei.
  6. Lösche den temporären Ordner aus Schritt 3.

Die Hauptarbeit liegt in Schritt 4, der geschätzte 60 min dauern wird. Die anderen Schritte dauern 10 min. Somit beträgt die Summe 110 min, also 2 Stunden. Neben der reinen Programmierung muss auch das Testen des Javascripts berücksichtigt werden sowie das Schreiben des Handbuchs. Rechnet man noch 20 % Zeit für Unvorhergesehenes dazu, so kommt man auf ca. 5 Stunden.

Die Auftragserteilung

Wenn der Kunde mit dem Pflichtenheft und dem Zeitaufwand einverstanden ist, dann wird der Auftrag an den JavaScript-Entwickler erteilt.

Die Programmierung

Der JavaScript-Entwickler macht sich an die Programmierung. Dabei folgt er den Arbeitsschritten, die ggf. noch feiner unterteilt werden müssen (Top-Down-Strategie).

(Beispiel:) Der Arbeitsschritt 4 besteht auf folgenden Unterpunkten:
4a. Lese die Namen der SVG-Dateien im temporären Ordner.
4b. Öffne die erste SVG-Datei und lese deren Inhalt als Text ein.
4c. Schreibe den Inhalt in eine Variable.
4d. Wiederhole Schritte 4b und 4c, bis alle SVG-Dateien eingelesen sind.
4e. Erstelle den Code für eine animierte SVG-Datei mit der Zeiteingabe.
4f. Setze die eingelesenen Einzel-SVG-Dateien in den Code.

Testen und nochmals Testen

Auch wenn das Javascript für das erste Beispiel (die Ampel mit 2 Zeichenflächen) gut funktioniert, so kann es für andere Fälle zu Problemen kommen. Diese müssen beim Testen erkannt und durch die Ergänzung der Programmierung abgefangen werden.

Das Handbuch schreiben

Nicht jedes Javascript wird täglich benutzt oder es soll von einem neuen Mitarbeiter benutzt werden, daher ist es wichtig, dass der JavaScript-Entwickler ein Handbuch schreibt. Diese Anleitung erklärt die Funktionen und Möglichkeiten des Javascripts. Neben dem Text sind dabei Bildschirmfotos (Screenshots) wichtig, um schneller zu verstehen, was möglich ist oder wie es gemacht wird.

Die Rückmeldung des Kunden

Der Kunde, der das Javascript und das Handbuch erhalten hat, kann dieses nun in seinem Betrieb ausprobieren. Dabei tauchen gerne Sonderfälle auf, an die der Kunde vorher nicht gedacht hatte. Diese Rückmeldung sendet der Kunden an den JavaScript-Entwickler.

Die Fehlerbeseitigung oder Erweiterung

Je nach Art der Rückmeldung muss die Programmierung aufgrund einer Fehlerbeseitigung verbessert werden. Dies geht zulasten des JavaScript-Entwicklers. Sollte der Kunde Erweiterungen, sprich neue Fähigkeiten des Javascripts wünschen, so muss er dafür die Kosten tragen.

Der Auftragsabschluss

Der Auftragsabschluss ist erreicht, wenn das Javascript das tut, was der Kunde gewünscht hat. Der Kunde erhält neben dem Javascript mit dem Quellcode (Programmierung) und dem Handbuch zum Schluss auch eine Rechnung.

Beispiel »Javascript SVG-Animation aus Illustrator«

Das Beispiel gibt es schon heute. Besuchen Sie einfach die Seite »Javascript SVG-Animation aus Illustrator«.

ENDE

(Hilfe:) Wenn Sie eine Funktion zum Automatisieren in (AI:), (PS:), (IC:), (ID:) oder (FM:) benötigen, jedoch nicht selbst programmieren, dann sprechen Sie mich an. Ich übernehme gerne kleine Aufträge: zum Kontaktformular.