Git Befehle

git cheat sheet als PDF

https://education.github.com/git-cheat-sheet-education.pdf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
% git clone https://github.com/your-ount-name/reopo_name.io.git

% git add --all
% git commit -m 'initial commit'
% git push -u origin master


% git init // neues Repositorium
% git status //aktuellen Status prüfen
% rm -rf .git // lokanes Repo löschen
% rm -rf .git*

% git config --global user.name
% git reset
% git reset --hard
% git remote -v
% git remote set-url origin https://github.com/your-ount-name/reopo_name.io.git

%rm -rf drhuva.io
% git init
% git remote add origin https://github.com/your-ount-name/reopo_name.io.git
% git pull origin master

% git status //aktuellen Status prüfen
% git add .// alle Dateien einfügen
% git add index.html // index.html einfügen
% git add /logs //Ordner "log" einfügen
% git rm --caсhed <Deiteiname>

Bild als Background anbinden

Bild als Background anbinden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/background_image.jpg'), // Pfad zu Ihrem Bild
            fit: BoxFit.cover, // Anpassen, um den Bildschirm zu füllen
            ),
        ),
        child: // Ihr weiterer Inhalt hier
        Center(
             child: Text('Ihr Inhalt hier',
            style: TextStyle(color: Colors.white),
        ),
    ),
),

UX Design (mit Links)

UX Design (User Experience Design) bezieht sich auf den Prozess der Gestaltung von Produkten, Systemen oder Dienstleistungen, um eine positive und effektive Erfahrung für die Nutzer sicherzustellen. Ziel ist es, die Interaktion zwischen dem Nutzer und dem Produkt so nahtlos, effizient und angenehm wie möglich zu gestalten. Dabei werden Aspekte wie Benutzerfreundlichkeit, Zugänglichkeit, Ästhetik und die Gesamtzufriedenheit des Nutzers berücksichtigt. UX Designer analysieren die Bedürfnisse und Verhaltensweisen der Nutzer, um Produkte zu entwickeln, die deren Erwartungen erfüllen und eine positive Gesamterfahrung bieten.

Artikel

What Is a UX Designer and What Does He/She Do?

What is UX?

Dos and Don’ts of UX Design

UX Fundamentals 101 guide

Einzelne  LinkedIn-Learning Videos:

  1. Methoden der UX(Nutzer kennenlernen) https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/methoden-der-ux-die-nutzer-kennenlernen?resume=false&u=36053084
  2. Methoden der UX (Ideen entwickeln) https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/methoden-der-ux-ideen-entwickeln-und-testen?resume=false&u=36053084
  3. Analytische Methoden https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/analytische-methoden?resume=false&u=36053084
  4. Creating the journey map https://www.linkedin.com/learning/learning-design-thinking-lead-change-in-your-organization/creating-the-journey-map?u=36053084

Oder ganze Video-Kurse, es gibt auf LinkedIn Learning mehrere, z.B.:

Grundlagen der User Experience: Usability-Tests
https://www.linkedin.com/learning/grundlagen-der-user-experience-usability-tests/willkommen-zu-grundlagen-der-user-experience-usability-tests?u=36053084
Grundlagen der User Experience für Entscheider:innen
https://www.linkedin.com/learning/grundlagen-der-user-experience-fur-entscheider-innen/ux-mythen-und-fehleinschatzungen?u=36053084

Zusätzlich hier sind ein paar Artikel zum Thema aus Online Magazin „Medium“:
(im Brauser kan man die Artikel auch auf Deutsch übersetzen)

Create Customer Journey Maps That Don’t Suck
https://medium.com/r-before-d/create-customer-journey-maps-that-dont-suck-337e62eb39d1
The Importance of Customer Journey Mapping: Optimizing Touchpoints for Enhanced Experiences
https://medium.com/@alexanderizryadnov/the-importance-of-customer-journey-mapping-optimizing-touchpoints-for-enhanced-experiences-7f53bc52bd29


Übung: Custom Journey Map

(1) Eine Methode für Kaffee-Zuberatung auswählen:

Filterkaffee: Das ist eine der gebräuchlichsten Methoden, bei der gemahlener Kaffee in einen Filter gegeben wird, durch den heißes Wasser langsam hindurchfließt.
Espressomaschine: Diese Maschinen pressen heißes Wasser unter Druck durch fein gemahlenen Kaffee, um einen starken, konzentrierten Kaffee zuzubereiten.
French Press (Pressstempelkanne): Gemahlener Kaffee wird mit heißem Wasser in einer French Press gebrüht. Nach einer Brühzeit wird der Kaffeesatz durch Drücken eines Kolbens nach unten von der Flüssigkeit getrennt.
Perkolator: Ein perkolierender Kaffeekocher zirkuliert heißes Wasser durch Kaffeesatz in einem Behälter, bis die gewünschte Stärke erreicht ist.
Türkischer Kaffee: Fein gemahlener Kaffee wird mit Zucker und Wasser gekocht und in speziellen kleinen Pfannen serviert.
Cold Brew: Kaffee wird über einen längeren Zeitraum in kaltem Wasser eingeweicht, was einen milderen, weniger sauren Kaffee ergibt.
Mokkakanne (Bialetti): Diese Methode verwendet Dampfdruck, um Wasser durch Kaffeepulver zu pressen und Kaffee zuzubereiten.
Aeropress: Ein Gerät, das Kaffee unter Druck durch ein Filtersystem drückt, ähnlich einer Spritze, um Kaffee zuzubereiten.
Siphon/Vakuumkaffeebereiter: Hier wird Wasser durch Erhitzen in einem unteren Behälter nach oben in einen oberen Behälter gezogen, wo es mit Kaffeesatz vermischt wird. Nach dem Entfernen der Hitze fließt der Kaffee zurück in den unteren Behälter.
Kaffeepads/Kapseln: Verwendet spezielle Kaffeepads oder Kapseln, die in dafür vorgesehenen Maschinen für eine schnelle Zubereitung eingesetzt werden.
Pour-over/Kaffeetropf: Heißes Wasser wird manuell über gemahlenen Kaffee in einem Filter gegossen, um langsam Kaffee aufzubrühen.
Kaffeekocher aus Edelstahl oder Keramik: Spezielle Kocher, in denen Kaffee direkt über einem offenen Feuer oder Herd zubereitet wird.

(die Liste ist mit GPT-Chat erstellt)

(2) Mit der Eingabe customer journey map template in Google-Bilder sich über Vielfalt der CJM-Ausführungen inspirieren lassen.

(3) Ein FigJam-Dokument erstellen.
Die Möglichkeiten Des Tools erforschen und
eine CJM für eine Kaffee-Zuberatung-Methode eurer Wahl erstellen.

Es muss nicht perfekt sein. Ihr könnt erst eine“nicht-perfekte“ CJM bauen, basierend auf ersten Eindruck, was eine CJM ist. Und später, für einen anderen nach Ihrem Auswahl Produkt oder Anwendung eine bessere CJM erstellen. Wichtig ist, das ihr nicht zu lange überlegt, sonder FigJam gleich benutzt.

Jeder Prozess der Kaffee-Zuberatung  besteht aus Aktionen vom Ausgangs- bis zu Endpunkt, wo man eine Tasse Kaffee geniesst (oder nicht). Dieser Prozess im Bezug zu Nutzer versucht als CJM darzustellen. Das ist eine klassische UX-Übung.

Nützliche Links zur Übung:

– Erklärung über CJM: https://www.figma.com/de/templates/customer-journey-map/
– ein Workflow, wie eine CJM zu erstellen: https://www.figma.com/de/resource-library/what-is-a-customer-journey-map/
– ein Video-Tutorial „Creating the journey map“: https://www.linkedin.com/learning/learning-design-thinking-lead-change-in-your-organization/creating-the-journey-map?u=36053084


CJM

Customer Journey Map („Kundenreise“) – ist ein UX-Instrument zur Analyse des Benutzerverhalten im Bezug zu einem Produkt.
CJM hilft zu verstehen, wie ein Nutzer einen Produkt/Anwendung /Marke/Service benutzt, welche Entscheidungen kann er in diesem Prozess treffen und was er dabei fühlen kann.
Die Interaktionen und Erfahrungen mit einem Produkt können auf verschiedene Weise visualisiert werden.
Als Ergebnis entsteht eine „Karte“,  die hilft, den gesamten Verlauf der Kundeninteraktionen zu analysieren, von Anfang – bei der ersten Kontaktaufnahme – bis zum Abschluss einer Transaktion und darüber hinaus.

Mit der Eingabe customer journey map template in Google-Bilder gibt uns eine Vielfalt, wie eine CJM aussehen kann.

Verschiedene Whiteboards-Anwendungen wie Miro oder FigJam sind dazu gedacht Ideen zu sammeln und Projekte in einem Team zu planen. Die Benutzerfläche der Miro, sowie FigJam ist minimalistisch und intuitiv. Sie sind ein guter Werkzeug, um CJMs schnell zu erstellen.
FigJam-Webseite erklärt sogar, was eien CJM ist : https://www.figma.com/de/templates/customer-journey-map/ und gibt dazu ein Workflow, wie eine CJM zu erstellen: https://www.figma.com/de/resource-library/what-is-a-customer-journey-map/.


Skeuomorphismus

Skeuomorphismus ist eine Design-Stilrichtung, die vertraute reale Objekte oder die Optik realen Texturen nachahmt.
Vergleichsweise wirkt derzeit diese Stilrichtung unmodern.
Doch überall, wo Transfer von Produkten in die digitale Welt gefragt wird (z.B. in Musik-Apps), ist Skeuomorphismus berechtigt verwendet.
Gegeteil des Skeuomorphismus ist dann das Flat Design.

Arten der Prototypen

Es gibt verschiedene Arten von Prototypen, die bei der Entwicklung und dem Design von Anwendungen verwendet werden können. Hier sind einige gängige Arten von Prototypen:

  1. Papierprototypen: Diese werden auf Papier gezeichnet oder ausgedruckt, um grundlegende Benutzeroberflächen darzustellen.
  2. Wireframes: Diese sind statische, schematische Darstellungen von Benutzeroberflächen, die die grundlegende Struktur und Platzierung von Elementen zeigen.
  3. Interaktive Prototypen: Sie ermöglichen es Benutzern, durch die Anwendung zu navigieren, grundlegende Aktionen auszuführen und Interaktionen zu simulieren, jedoch ohne die Funktionalität der tatsächlichen Anwendung.
  4. HTML-Prototypen: Diese werden mithilfe von HTML, CSS und manchmal einfachem JavaScript erstellt, um eine realistischere Vorstellung der Benutzeroberfläche zu vermitteln.
  5. Visuelle Prototypen: Sie fokussieren sich stark auf das visuelle Design und zeigen das Aussehen der Anwendung mit besonderem Augenmerk auf Farben, Schriften, Bilder usw.
  6. Funktionsprototypen: Diese enthalten grundlegende Funktionalitäten der Anwendung, um spezifische Aktionen oder Prozesse zu demonstrieren.
  7. Prototypen mit hoher und niedriger Fidelity: Prototypen mit hoher Fidelity sind detaillierter und näher an der endgültigen Anwendung, während Prototypen mit niedriger Fidelity grobe Darstellungen sind, die sich auf Struktur und Funktion konzentrieren.
  8. Prototypen für verschiedene Plattformen: Prototypen, die speziell für verschiedene Plattformen wie Web, mobile Anwendungen (iOS, Android) oder Desktop-Anwendungen entwickelt wurden.
  9. Storyboard-Prototypen: Diese erzählen eine Geschichte über den Ablauf der Anwendung und wie der Benutzer damit interagieren könnte.
  10. Animationen und Bewegungsprototypen: Diese zeigen, wie Elemente sich innerhalb der Anwendung bewegen oder verändern könnten, um die Benutzererfahrung zu verbessern.

Die Wahl des Prototyps hängt von den spezifischen Anforderungen des Projekts, dem Entwicklungsstadium und den Zielen ab. Oftmals werden verschiedene Arten von Prototypen in verschiedenen Entwicklungsphasen verwendet, um eine umfassende und nutzerzentrierte Anwendung zu erstellen.

[ Chat GPT ]

mentale Modelle

„Oft werden sogenannte »mentale Modelle« verwendet, um technische Geräte zu verstehen und zu nutzen. Das mentale Modell bezieht sich auf die Art und Weise, wie sich ein Nutzer in einer bestimmten Situation verhält, wenn er versucht, eine bestimmte Aufgabe zu vervollständigen. Anders gesagt: Der Nutzer glaubt bereits vor der Nutzung zu wissen, wie etwa das User Interface einer Applikation funktioniert und wie er Aufgaben damit meistern kann. Im Idealfall entspricht das mentale Modell eines Nutzers der Funktionalität eines technischen Geräts.
Ein Beispiel dazu: Stellen Sie sich vor, Sie händigen einem guten Freund ein Tablet aus, der zuvor noch niemals dieses Gerät gesehen und genutzt hat, und sagen ihm, dass er darauf Bücher lesen kann. Noch bevor er das Gerät eingeschaltet hat, wird er sich im Geiste den Prozess des Bücherlesens auf diesem Gerät vorstellen. Er wird mutmaßen, wie wohl die Bildschirmanzeige aussehen wird, wie man Buchseiten umblättern kann, und sich vielleicht fragen, ob es auch so etwas wie Lesezeichen gibt und wie diese realisiert sind. Diese bereits im Vorfeld getroffenen Annahmen über das User Interface beeinflussen den Nutzer anschließend auch bei der Nutzung.“

Auszug aus „App-Design“ (Jan Semler, Kira Tschierschke)

Cognitive Load

Jede Plattform ist anders. Die Erwartung des Nutzers sind es auch, je nach Plattform.

Der Cognitive Load beschreibt die Menge an Informationen, die sich ein Nutzer merken muss, um ein System vollständig oder zum Grad der Nutzbarkeit zu erlernen. Je mehr der Nutzer über ein System und die Controls lernen muss, desto schwieriger ist es zu bedienen.

Usability Guidelines

„Greifen Sie wenn möglich auf die Richtlinien und Controls des jeweiligen Betriebssystems zurück. Scheuen Sie sich aber nicht, auch individuelle Lösungen für Bedienelemente oder Funktionen zu entwickeln. Wichtig ist dabei aber, den Nutzer nicht zu verwirren oder ihn ratlos allein zu lassen. Führen Sie neue Funktionen und Bedienelemente also bewusst ein. Haben Sie immer im Auge, ob der Nutzer auch versteht, wofür das jeweilige Bedienelement eingesetzt wird.“ [Auszug aus „App-Design“, Jan Semler, Kira Tschierschke]

Design Guidelines für Android, IOS und WEB

Die offizielle Design Guide-Leitlinien, die von jeweiligen Unternehmen eingeführt wurden, helfen Entwicklern und Designern eine konsistente und intuitive Benutzererfahrung zu schaffen. Dabei sind diese Design-Systeme ein leistungsstarke Werkzeug für das Prototyping und machen es einfacher Apps zu erstellen, die gut auf verschiedenen Geräten und Bildschirmgrößen funktionieren.

Für Android gibt es das Material Design System von Google, LINK!

für IOS das Human Interface Guidelines System von Apple, LINK!

für Webanwendungen gibt es verschiedene Systeme wie das Bootstrap Framework LINK!

und das Material Design Lite von Google. LINK!


Durch die Einhaltung der Design-Richtlinien können sie schneller und effizienter arbeiten, da es ist nicht jedes Mal von Grund auf neu gestalten werden muss.   

Heuristik

Heuristik bezeichnet im Allgemeinen eine Methode oder eine Technik, die zur Problemlösung oder zur Entdeckung neuer Ideen verwendet wird. Diese Herangehensweise basiert oft auf Erfahrungswerten, Intuition und Regeln, die nicht zwangsläufig garantiert die optimale Lösung bieten, sondern eher eine schnelle, praktische Lösung ermöglichen.

Heuristiken kommen in verschiedenen Bereichen wie der Psychologie, Informatik, Mathematik und anderen Wissenschaften zum Einsatz, um komplexe Probleme zu vereinfachen und Lösungen zu finden, ohne alle möglichen Optionen durchzugehen. Sie dienen als Richtlinien oder Faustregeln, um Entscheidungsfindungsprozesse zu unterstützen.

Stoffplan: Adobe XD

Stoffplan
1. Einführung in das Prototyping 1.1. Arten von Prototypen 1.2 Grundelemente eines Interface Designs 1.3 Lofi- oder Hifi-Fidelity 1.5 Arbeitsablauf der Prototypenproduktion im Überblick 1.6 Tools zur Erstellung von Prototypen
2. Gestaltung in Figma 2.1 Arbeitsflächen, Menüs und Tools 2.2 Frame Set-up und Rasterformate 2.3 Layers, Gruppen, Pages und Assets 2.4 Farben und Hintergrunde 2.5 Text- und Schifteinstellungen 2.6 Vektorgrafiken und Pixel-Bilder 2.7 Device Preview
3. Zusammenarbeit in FigJam 3.1 Ideen sammeln und festhalten 3.2 Phasen nutzerorientierten Designs 3.3 UX-Technicken im Überblick
4. Designprozess in Figma 4.1 Das Moodboard, Wireframes und Mock-ups 4.2 Styleguide (Gestaltungsrichtlinien) 4.3 Entwurfsvorbereitung
5. Fortgeschrittene Techniken in Figma 5.1 Verwendung von Komponenten und Stilen 5.2 Arbeiten mit Instanzen 5.3 Fonts importieren 5.4 Arbeiten mit Masken 5.5 Plugins und Erweiterungen 5.6 Parent-Frames und Child-Frames 5.7 Nested Auto-Layout 5.8 Assets in Bibliotheken organisieren 5.9 Erstellung von Design-Systemen 5.10 Automatisierung von Arbeitsabläufen 5.11 Templates finden und installieren
6. Den Schnitt verfeinern 6.1 Singe-roller und dual-roller Trims anwenden 6.2 Editieren mit slip and slide 6.3 Sync verstehen und reparieren
7. Erstellung von interaktiven Prototypen 7.1 Einen Prototype einrichten 7.2 Navigationsstruktur für den Prototypen entwickeln 7.3 Screens verbinden 7.4 Overflow Verhalten 7.5 Horizontales Scrollen 7.6 Elemente fixieren 7.7 Smart Animate 7.8 Validierung und Test
8. Grundlagen Audio 8.1 Audio Levels, Panning und Multichannel verstehen 8.2 Audio Mixer verwenden 8.3 Audio Keyframes 8.4 Video und Audio synchronisieren
9. File Sharing im Figma-Teamprojekt 9.1 Erstellung von einem Teamprojekt 9.2 Erstellen einer Teambibliothek 9.3 In einem Team Designs teilen 9.4 Assets exportieren und herunterladen 9.5 Exportieren eines Figma-Projekts

Figma-Lernquellen

Lernquellen

Erste Woche: Crash-Kurs auf Udemy Lerne FIGMA: UX UI Design Masterclass – Der Weg zum Experten // Sinan Yurttadur

Zusätzliche Quellen:

  1. Figma Learn Center auf der offiziellen Figma Webseite
  2. LinkedIn Learning: Figma Grundkurs // Kerstin Müller
  3. LinkedIn Learning: Figma Grundkurs // Maureen Herben
  4. LinkedIn Learning: Grundlagen der User Experience // Jens Jacobsen
  5. LinkedIn Learning: UX Prototyping Grundkurs // Jens Jacobsen
  6. Kapitel Grundlagen des Webdesigns aus dem LinkedIn Learning Kurs „Grundlagen der Webprogrammierung: Meine erste Website“ // Florence Maurice
  7. LinkedIn Learning: Interaction Design: Flow // Diane Cronenwett
  8. LinkedIn Learning: Wie Entwickler von UX profitieren // Jens Jacobsen

Stoffplan: Figma

Stoffplan
1. Einführung in das Prototyping 1.1. Arten von Prototypen 1.2 Grundelemente eines Interface Designs 1.3 Lofi- oder Hifi-Fidelity 1.4 Arbeitsablauf der Prototypenproduktion im Überblick 1.5 Tools zur Erstellung von Prototypen
2. Gestaltung in Figma 2.1 Arbeitsflächen, Menüs und Tools 2.2 Frame Set-up und Rasterformate 2.3 Layers, Gruppen, Pages und Assets 2.4 Farben und Hintergrunde 2.5 Text- und Schifteinstellungen 2.6 Vektorgrafiken und Pixel-Bilder 2.7 Device Preview
3. Zusammenarbeit in FigJam 3.1 Ideen sammeln und festhalten 3.2 Phasen nutzerorientierten Designs 3.3 UX-Technicken im Überblick
4. Designprozess in Figma 4.1 Das Moodboard, Wireframes und Mock-ups 4.2 Styleguide (Gestaltungsrichtlinien) 4.3 Entwurfsvorbereitung
5. Fortgeschrittene Techniken in Figma 5.1 Verwendung von Komponenten und Stilen 5.2 Arbeiten mit Instanzen 5.3 Fonts importieren 5.4 Arbeiten mit Masken 5.5 Plugins und Erweiterungen 5.6 Parent-Frames und Child-Frames 5.7 Nested Auto-Layout 5.8 Assets in Bibliotheken organisieren 5.9 Erstellung von Design-Systemen 5.10 Automatisierung von Arbeitsabläufen 5.11 Templates finden und installieren
6. Erstellung von interaktiven Prototypen 6.1 Einen Prototype einrichten 6.2 Navigationsstruktur für den Prototypen entwickeln 6.3 Screens verbinden 6.4 Overflow Verhalten 6.5 Horizontales Scrollen 6.6 Elemente fixieren 6.7 Smart Animate 6.8 Validierung und Test
7. File Sharing im Figma-Teamprojekt 7.1 Erstellung von einem Teamprojekt 7.2 Erstellen einer Teambibliothek 7.3 In einem Team Designs teilen 7.4 Assets exportieren und herunterladen 7.5 Exportieren eines Figma-Projekts

Schnitt Arten

Bewegungsschnitt Das erste Prinzip ist, innerhalb einer Szene in die Bewegung hinein zu schneiden. Wenn Sie also beispielsweise eine Nah- und eine Groß-Einstellung gedreht haben, wie jemand ein Glas zum Mund führt und trinkt, so schneiden Sie den Bildwechsel mi!en in der Bewegung, während sich der Arm hebt. Sinn dieses Prinzips ist es, den Schnitt möglichst unauffällig zu halten. Während der Bewegung erkennt der Zuschauer bereits das Ziel der Bewegung und nimmt ihr Ende gleichsam vorweg. Der Zuschauer ist auf die Anschluss-Einstellung vorbereitet; er ahnt bereits, dass das Glas den Mund erreichen wird. Er kennt die Handlung. Wenn dann in der Bewegung geschnitten wird, ist das Folgebild weniger auffällig, als wenn erst die Bewegung komplett ausgeführt wird und mit dem Schnitt ein neuer, unbekannter Handlungsbogen beginnt. Keine leeren Bilder Einstellungen innerhalb einer Szene sollten geschnitten werden, bevor die Darsteller aus dem Bild gegangen sind, die Szene also verlassen daliegt. Es sei denn, es gibt einen besonderen Grund. Bei Übergängen zwischen den Szenen kann ein leeres Szenenbild im Gegenteil angebracht sein, um den Spannungsbogen der Szene zu einem Ende zu führen. Aber innerhalb der Szene sollten leere Bilder vermieden werden. Beide Prinzipien sind im Grunde Varianten desselben Prinzips: Szenen werden als einheitliche Handlungsbögen behandelt, und ein leeres Szenenbild oder eine vollendete Bewegung deuten auf ein Ende des Handlungsbogens hin. Schnitt/Gegenschnitt Schnitt/Gegenschnitt ist das häufigste, einfachste und zugleich wirkungsvollste Montageprinzip, das Sie überall in Film und Fernsehen wiederfinden. Denken Sie an jemanden, der auf der Straße steht und in ein Haus gehen will. Er nähert sich der Haustür und schließt auf. Beim Eintreten wird geschnitten; als Gegenschnitt erscheint eine Innenaufnahme, wie derselbe Mann von innen die Haustür schließt, seinen Mantel auszieht und an den Garderobenhaken hängt. Wenn diese beiden Einstellungen aneinander montiert sind, ergibt sich eine natürliche Handlung, bei der niemand daran zweifelt, dass der Flur, in dem der Mann gerade den Mantel auszieht, ebenderselbe Flur ist, der sich hinter der Haustür befindet, die der Mann vorher in der Außenaufnahme aufgeschlossen hat. Obwohl dies in der Wirklichkeit von Filmstudios sehr zweifelhaft ist. Oder denken Sie an einen Dialog in einem Film: Sie sehen und hören einen Akteur in naher Einstellung sprechen, und während er spricht, wird plötzlich das Gesicht eines Zuhörers eingeschnitten. Eigentlich sieht man ja etwas völlig anderes, was gar nicht dem Gehörten auf der Tonspur entspricht, nämlich ein unbewegtes Gesicht. Die Aufmerksamkeit des Zuschauers macht aus dem neuen, stummen Gesicht den Zuhörer der Rede. Ohne Montage wäre die Aufnahme des Zuhörers einfach nur ein Gesicht. Als Gegenschnitt in einem Dialog wird dieses Gesicht zu einem Zuhörer. Vielleicht zeigt das eigentlich ausdruckslose Gesicht in diesem Zusammenhang sogar eine bestimmte Reaktion: Aufmerksamkeit, Skepsis, vielleicht Ablehnung… Das Verständnis der gesamten Filmhandlung entsteht „Schnitt für Schnitt“ aus den Montagen solcher bedeutungserzeugenden Mini-Sequenzen. Die montierten Szenen werden vom Zuschauer in einen filmischen Zusammenhang gerückt. Neben Schnitt/Gegenschnitt gibt es noch viele andere Montagetechniken, die sich teilweise auch als Varianten der Schnitt/ Gegenschnitt-Technik auffassen lassen: Kausal-Schnitt Hierbei hängen die aneinander montierten Einstellungen ursächlich (= kausal) voneinander ab. Ohne die erste Einstellung wäre die zweite nicht zu verstehen. Beispiele: Man sieht zwei Personen lautstark streiten und in der nächsten Einstellung verschwindet die eine Person durch eine Tür und lässt die Tür ins Schloss knallen. Oder jemand legt einen Revolver an und schießt, und in der nächsten Einstellung fällt jemand anderes tot um. Parallel-Schnitt Zwei Handlungen werden parallel gezeigt; zwischen den Handlungen wird hin und her geschnitten. Durch schrittweises Verkürzen der Einstellungen lässt sich die Spannung auf einen Höhepunkt hin aufbauen. Stellen Sie sich zum Beispiel zwei Autos vor, die von verschiedenen Seiten auf eine Kreuzung zurasen. Wenn Sie die Zeit zwischen den Parallel-Schnitten verkürzen, erhöhen Sie die Spannung vor dem Crash (falls es einen gibt). Assoziativ-Schnitt Durch die Anordnung der Szenen kann beim Betrachter eine bestimmte Assozia“on ausgelöst werden. Die assoziierte Aussage wird jedoch nicht direkt gesagt bzw. gezeigt. Beispiel: Ein Mann spielt Lo!o und lässt sich in der nächsten Einstellung bei einem Autohändler teure Neuwagen vorführen. Ersatz-Schnitt Ereignisse, die nicht direkt dargestellt werden können oder sollen, werden durch bildliche Entsprechungen ersetzt. Beispiele: Ein Kind wird geboren, aber statt der schmerzhaften Geburt im Krankenhaus wird das Aufblühen einer Knospe gezeigt. Oder ein Liebespaar wälzt sich im Be!, und als Ersatzschnitt platzen Feuerwerksraketen. Kontrast-Schnitt Auffallend unterschiedliche Einstellungen werden per Kontrast-Schnitt zusammen geschnitten, zum Beispiel um die Aufmerksamkeit des Betrachters auf einen Widerspruch zu lenken. Beispiel: Ein Tourist sitzt gelangweilt an der Hotelbar und in der nächsten Einstellung werden Bettler gezeigt. Der Kontrast-Schnitt wird auch oft im Anschluss an eine lange, ruhige Szene eingesetzt, um eingelullte Zuschauer aufzuwecken und zu zeigen, dass jetzt die Handlung weitergeht. Denken Sie an einen Darsteller, der lange versonnen ein Foto betrachtet, und im nächsten Bild donnert plötzlich ein Zug überlaut in einen Bahnhof. Formal-Schnitt Hierbei werden Einstellungen zusammen geschnitten, weil sie einen formalen Aspekt gemeinsam haben, zum Beispiel gleiche Bildinhalte, Farben, Formen oder Bewegungen (rotes Hemd und rotes Auto, Fußball und Erdball, Fenstersturz und herabfallende Feder). Der berühmteste Formal-Schnitt dürfte die Anfangsszene von Stanley Kubricks „2001: Odyssee im Weltraum“ sein, bei der ein Menschenaffe einen Knochen in die Luft wirft und im nächsten Schnitt ein Satellit in der Umlau(ahn dieselbe Bewegung fortsetzt, wobei vier Millionen Jahre vergangen sind. Die beiden montierten Einstellungen haben zunächst nur die Bewegung gemeinsam. Über die Montage wird beim Zuschauer eine Suche nach inhaltlichen Zusammenhängen in Gang gesetzt, die zum Beispiel zu der Idee führt, dass mit dem Knochenwurf die Menschwerdung begonnen hat und sich bis ins Satellitenzeitalter fortsetzt. Quelle: https://www.magix.com/de/videos-bearbeiten/videotechniken-schnitttechniken/

Navigation

Die Flutter Anwendungen zeigen ihre Inhalte in einer Art „Fullscreen-Containers“ auf einem Bildschirm – pages (oder screens, oder views).
Diese pages und screens werden in Flutter als Routs (Routen) bezeichnet.
In Android werden diese pages/screens als Activity bezeichnet, und in iOS als ViewController. Aber im Flatter sind die Routen auch Widgets.
Ein einzelnes Widget kann Route sein, wenn er einen vollständigen Layout darstellt.

Eine Route (ein Bildschirm) kann in Dart – im Sinne des OOP-Konzeptes – als eine „Klasse“ beschrieben werden.
Deswegen kann jede Route – als eine separate Klasse – über eigene Inhalte und eine eigene UI (Benutzeroberfläche) verfügen.

Möglichkeiten für Navigation in Flutter:
(A) einfache Navigation zwischen zwei Routen (push & pop)
(B) Navigation zwischen zwei benannten Routen (named Routs)
(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links

Link zu offizieller Documentation –> über Navigation in Flutter
Link zum thematischen Artikel —> Navigation System in Flutter

(A) einfache Navigation zwischen zwei Routen:
1. Erstellen Sie zwei Routen.
2. Navigieren Sie mit der Methode Navigator.push() zur zweiten Route.

1
2
3
4
5
6
7
8
onPressed: () {
    Navigator.of(context).push(
            context,
            MaterialPageRoute(
                builder: (context) => SecondScreen();
            ),
    ),
}

3. Kehren Sie mit der Methode Navigator.pop() zur ersten Route zurück.

1
onPressed: () => Navigator.pop(context)

Ein weiteres Beispiel für Verwendung des Navigator-Widgets ist hier: https://www.geeksforgeeks.org/routes-and-navigator-in-flutter/?ref=rp

(B) Navigation zwischen zwei benannten Routen:
1. Erstellen Sie zwei Routen.
2. Die Eigenschaft home des Widgets MaterialApp mit der Eigenschaft initialRoute (mit dem Wert ‚/‘) ersetzen . Darunter eine weitere Eigenschaft route mit Wert verwenden:

1
2
3
4
5
6
//alternativ:
initialRoute: 'A',
    routes: {
      'A': (context) => const FirstScreen(),
      'B': (context) => const SecondScreen(),
    },

3. Im Navigator mit benannten Routen rufen wir MaterialPageRoute nicht mehr auf, sondern verwenden direkt die Methode .pushNamed(context, ‚route‘).

onPressed: () => Navigator.pushNamed(context, ‚/second‘),
// alternativ: Navigator.of(context).pushNamed(‚B‘);

4. Und wie bei einfachen Navigator mit Navigator.pop() zur ersten Route zurückkehren.

onPressed: () => Navigator.pop(context),

 

 

comming soon:

(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links

Projekt erstellen

Projekt erstellen

  1. VS Code öffnen
  2. Commando-Zeile öffnen –> „CTRL+SHIFT+P“ (Mac users replace CTRL with CMD)
  3. „Flutter“ eintippen
  4. Die Option „Flutter: New Project“ auswählen
  5. „Application“-Option aus der Liste auswählen
  6. Ordner für Projekt auswählen –> Enter
  7. Namen für Projekt geben (kleine Buchstaben und Unterstriche) –> Enter

Stoffplan: Dart&Flutter 2

1. OOP mit Dart und Flutter 1.1 Klassen, Objekte und Widgets 1.2 Komposition und Wiederverwendbarkeit 1.3 Vererbung und Polymorphy (inherited Widgets) 1.4 Verkapselung (private Variablen und Methoden) 1.5 Abstrakte Klassen und Interfaces
2. Responsive und Adaptive Design in Flutter 2.1 Single-Child-Layout-Widgets 2.2 Multi-Child-Layout-Widgets 2.3 Größen für responsiven Layouts 2.4 Visuelle Dichte in daptiven Design
3. Screenstruktur organisieren 3.1 Verwendung von Widgets 3.3 Navigator-Objekt 3.4 Navigation durch Routing
4. Asynchrone Programmierung 4.1 Async und Await 4.2 Futures und Promises 4.3 Streams
5. Zeichnen und Rendering von Grafiken 5.1 Canvas-Widget und Paint-Objekt 5.2 Zeichnen von Formen, Linien und Kurven 5.3 Anpassen von Farben, Pinsel und Stilen 5.4 Hinzufügen von Text und Bildern zum Canvas 5.5 Transformationen und Animationen mit dem Canvas
6. Architekturmuster in Flutter 6.1 Provider 6.2 MVC (Model-View-Controller) 6.3 BLoC (Business Logic Component)
7. Datenverarbeitung in Flutter 7.1 JSON-Serialisierung und -Deserialisierung 7.2 Lokaler Cache 7.3 Datenaggregation 7.4 Datenbankintegration
8. Testen und Debuggen 8.1 Debugging-Tolls 8.2 Unit-Tests 8.3 Widget-Tests 8.4 Integrationstests

Playing Video to a Full-Screen Monitor

Playing Video to a Full-Screen Monitor

To enable/disable full screen playback –> Shift+Ctrl+F

If doesn’t function or not as expected:

  1. Make sure your system is properly set up for full-screen monitor play.
    For more information, see “Understanding Full Screen Playback Options” in the Help.
  2. File > Settings > User tab > Full Screen Playback –> The Full Screen Playback dialog box opens.
  3. Check the Full Screen Playback Settings to ensure you have them set properly, and close the dialog box when you are done.
  4. Select Composer > Full Screen Playback to view the video on a full screen monitor.

Weitere Infos –> MC Editing Guide S. 411

(–> “Full Screen Playback Settings” S. 1281)

      Using the Tool Palette

      Using the Tool Palette

      You can map different functions and buttons to the Tool palette for easy access.

      File > Settings > User tab > Tool Palette

        To display labels on the Tool palette buttons:

        1. Select File > Settings > User tab > Interface
          The Settings dialog box appears.
        2. Select Show Tooltips.
        3. Click OK. Labels appear on the buttons under the icons.

        weitere Infos –> „Media Composer Editing Guide“ S.413