Wie drag & drop in GitPitch funktioniert

Ich hatte ja schon im vorherigen Beitrag erklärt, warum ich GitPitch so interessant finde. In diesem Posting gehe ich mehr auf die Basics ein.

Seit der Version 4 hat GitPitch eine neue Art der Positionierung von Elementen. Der Entwickler nennt es das GitPitch-“Grid-System”. Bei mir hat es eine Weile gedauert, bis ich es verstanden habe. Wenn das aber einmal sitzt, dann ist es eine große Freude damit zu arbeiten.

Genial einfach - wenn man es verstanden hat

Starten wir also von ganz vorne. In GitPitch kannst du Elemente und deren Größe definieren. Stell dir also vor, du würdest gerne auf der linken Seite der GitPitch-Folie einen Block haben, in dem du ein Bild oder einen Text positionieren möchtest. Dieser Block heißt bei GitPitch “drag”. Damit hatte ich zunächst die größten Probleme. Denn allein das Wort hört sich für mich nicht besonders intuitiv an, bei drag habe ich einfach andere Assoziationen.

Um das besser zu verstehen, teilen wir die Folienseite einfach in ein Raster ein, prozentual von 0-100. Damit die Präsentation auf allen Anzeigegeräten perfekt skaliert wird, solltest du bei prozentualen Angaben bleiben. In unserem Beispiel haben wir eine Box, die 50 % der Breite und 50 % der Höhe der gesamten Folie ausmacht.

Diese Box, oder sagen wir diesen Bereich, können wir nun auf der gesandten Folie positionieren. Stellt euch also vor, ihr würdet eine Box in einer bestimmten prozentualen Größe mit der Hand aufnehmen und dann auf der gesamten Spielfläche (der Folie) hinstellen (also schlimmdeutsch “droppen”). Das ist ao mit “drop” gemeint.

Also kurz:

  • Drag: Die Größe des Bereichs auf der Folie (in Breite x Höhe) - prozentual.
  • Drop: An welcher Stelle der Bereich auf der Folie platziert werden soll (ebenfalls: relativ/prozentual). Von links oben gerechnet: Plus-Werte. Von rechts unten: Minus-Werte.

Damit das etwas klarer wird, Hier noch eine kleine Zeichnung.

/images/drag-and-drop.jpg

Ich hatte auch zunächst einige Schwierigkeiten das zu verstehen. Wie so oft muss man sich ein wenig damit beschäftigen und danach ist das total klar. Damit ich es nicht vergesse und vielleicht jemand anders sich nicht dadurchwühlen muss, habe ich ein kleines Erklärvideo dazu gemacht.

Zur Berechnung der richtigen Angaben für drag und drop gibt es zwei Herangehensweisen. Einmal von links oben (dann sind die Angaben Positiv) und einmal von rechts unten (dann sind die Angaben im minus). Es zählt immer die äußerste Ecke des Bereichs.

Ein Beispiel:

[drag=50 50, drop=10 10]

…. platziert ein Rechteck links oben mit einem Rand von 10 % oben und 10 % zur linken Seite.

Und so habe ich ein rotes Rechteck mit weißer Schriftfarbe erstellt:

[drag=50 50, drop 10 10, bg=red, set=text-white]

Der Entwickler stellt noch einige andere spannenden Möglichkeiten der Platzierung bereit, die ich entweder hier hinzufüge oder in einen separaten Post packen werde.

Ich habe mir sowieso vorgenommen, schrittweise und in unberechnbarer Frequenz eine kleine GitPitch-Serie zu veröffentlichen. Also, stay tuned…