Making of my project calculator (1/3)

Nein, das ist kein Turial sondern eher ein „Making of“, um etwas Einsicht in Umsetzung zu geben und warum welche Entscheidungen getroffen wurden. Diese kurze Artikel-Serie ist gemischt-sprachig, Teil 1 ist in Deutsch, Teil 2 in Englisch, Teil 3 wieder in Deutsch.

No, this is not a coding tutorial, more of a „making of“ to give some insight behind the scenes and into decisions made. This short article series is multilingual, Part 1 is in German, part 2 is English, part 3 is again in German.


Ich fing an mit einem Wireframe-Entwurf in Affinity Designer, in dem ich auch die ersten paar Daten beispielhaft notierte. Danach suchte ich nach einem statischen Template, um etwas Zeit zu sparen. Das Gratis-Template für die 3 Preis-Boxen war nicht besonders gut programmiert, ich musste unmittelbar CSS korrigieren. Prinzipiell kann man das so beibehalten oder besser machen, die Zeitersparnis liegt bei etwa 2h. Wahrscheinlich werde ich entweder beim Umsetzen der Funktionen, in deren Zuge auch das HTML zum Teil automtisch generiert wird, oder spätestens bei der Mobil-Version eine Neuprogrammierung vornehmen.


Ich baute es als temporäre Version in meine Webseite ein, um Kunden ein „Coming Soon“ zu bieten und weil ich fand, dass auch die statische Liste bereits einen guten Eindruck bietet, wie viel Dynamik und welchen Umfang Webprojekte haben können, so wie die Möglichkeiten zeigt, wie man zwischen Günstig und Hochwertig im Projektmanagement navigieren kann.

Da ich Quasi „Fabrikverkauf“ anbiete, ohne zwischengeschaltete Agentur oder Berater, bleibt es meinen Kunden überlassen, viele dieser Entscheidungen zu treffen.

Dazu brachte ich die Daten in einer ersten Version in’s JSON Format und lud das JSON-File via JavaScript in’s separate JavaScript-Dokument. Zum Testen wurde es auf der Konsole ausgegeben. Wie man sieht, habe ich den einzelnen Posten verschiedene Werte zugewiesen, hierbei handelt es sich um eine grobe Schätzung der Arbeitsstunden, ausserdem meinen Stundenlohn und diverse Multiplikatoren. So hat zum Beispiel der Multiplikator „Deadline“ beinhaltet, dass ich an Wochenenden und nach Feierabend weiterarbeiten muss. In der Vergangenheit hatte ich dies als direkten Kostenfaktor („Nachtzuschlag“) auf meiner Webseite gelistet, es kam bei den Kunden jedoch nicht gut an. Fakt ist trotzdem, dass ich für Nachtschichten einen Zuschlag verdiene, so wie jeder andere Arbeiter auf der Welt auch. Natürlich ist klar, dass ich die einzelnen Schätzungen noch auspendeln muss. Wer sich über teils hohe Stundenzahlen wundert: Hierbei wurde nicht einfach die Sache ansich geschätzt, sondern der Zeitaufwand im Projekt. Wie sonst sollte ich z.B. „WordPress“ schätzen? Was ist „WordPress“? Die Installation? Die Konfiguration? Dies ist eine Schätzung, zwar aus dem Bauch heraus, aber auch mit 20 Jahren Erfahrung, wie viel mehr Arbeit es mir macht, ein durchschnittliches Projekt, also eine Firmenwebseite, als reine HTML-Seite oder als WordPress-Seite umzusetzen. Prinzipiell wird der Calculator nur als Guideline dienen, über die am Ende immer ein Mensch entscheidet.


In Bild 3 habe ich die JSON-Daten etwas weiter angepasst und alles auf den Webserver, unabhängig von meiner Hauptwebseite, hochgeladen. Dabei habe ich angefangen, die 3 Beispielpakete als eigene JSON-Objekte einzugeben, so dass diese im nächsten Schritt dynamisch geladen werden können.

Für die entgültige WordPress-Implementation werde ich am Ende das ganze in ein eigenes Plugin packen. Es ist vorstellbar, für die Daten ein WordPress User-Interface zu schreiben, und es so in Zukunft universell zu benutzen oder zu verkaufen. Im Moment reichen mir die Möglichkeiten.


Noch etwas mehr Arbeit, und ich hatte auch die Beispielpakete im JSON-Format. JSON eignet sich hervorragend für derartige Datenstrukturen, da vieles einfache Key-Value Paare sind, manches aber verschachtelt ist und / oder Daten-Arrays benötigt, so z.B. die Zusatzleistungen.


Als nächstes habe ich das statische HTML gelöscht und nur noch eine einzelne Box mit einem einzelnen Listenpunkt übrig gelassen. Hier wird nun HTML dynamisch von JavaScript anhand der Daten aus dem JSON-Objekt erstellt werden.


Der <body> ist weiter geschrumpft, die Liste habe ich aufgeteilt in zwei kleine Custom-Templates. Ich habe das JavaScript „Templating ohne Engine“ bei meinem letzten Node.js Projekt gelernt, bei dem mir ursprünglich Angular zu bulkig war (am Ende aber dann doch gefehlt hat). Für so etwas wie unseren Projekt-Rechner ist es jedoch die beste aller Lösungen, in meinen Augen. Damit geht auch Tag 1 zuende, ich mache morgen weiter.

Wir machen weiter in Teil 2, auf English.

We’re going to continue in part 2, in English.

 

Manuel Geissinger, zertifizierter IT-Sicherheitsexperte, Webedesigner aus Freiburg, Webentwickler, Administrator und Digitalkünstler.
Ihr freiburger Webentwickler Nr. 1 auf LinkedIn Zertifizierter IT Sicherheits-Experte & Webdesigner auf Xing