Blog

Git & Github Anfänger Tutorial
Übersicht
wie Git funktioniert

Git ist ein Versionierung Werkzeug, mit solch einem Werkzeug ist es möglich, Versionen von Dateien zu erstellen und in einer Datenbank zu hinterlegen. Praktisches Beispiel: Du hast keine Ordner mehr mit den Namen V1, V2 usw., mit Git ist es möglich in einem Ordner mehrere Versionen von einer Datei zu speichern und zu verwalten. Git ist nicht nur für Softwareentwickler geeignet, sondern auch für Designer, da mit Git auch Bilder gut verwaltet werden können. Du bekommst eine History für deine Dateien und kannst auch nach mehreren Änderungen die Dateien wieder auf den alten Stand setzen.

Arbeiten mit anderen

Des weiteren gibt es ein weiteren großen Vorteil bei Git, das Arbeiten mit anderen wird viel einfacher. Es ist möglich einen Git Server zu erstellen, auf diesen Server werden dann die Änderungen hochgeladen und jeder (der Zugriffsrechte hat) kann sich die aktuelle Änderung runterladen. Das charmante an der Sache ist, dass nicht jedesmal das komplette Projekt runtergeladen werden muss, sondern nur die Änderung wird runtergeladen. Des weiteren wird der Git Server auf den lokalen Maschienen von den Designern und Programmieren gespiegelt. Das hat den Vorteil, dass bei einem Serverausfall, jeder weiter arbeiten kann. Falls der Git Server ein Festplattenfehler hat, sind die Daten auch nicht weg, da ja jeder ein Backup von diesem Server bei sich hat und aus diesem Backup wieder ein neuer Server erstellt werden kann.

Wie GIT Dateien speichert

Wenn du eine neue Version von dem Quellcode hast und den Code dann auf Git ablegst, wird nicht jedes mal der komplette Code gespeichert. Es wird nur die geänderte Datei gespeichert und auf die nicht geänderten Dateien wird in der neusten Version deines Quellcodes nur gezeigt. Sprich es werden Snapshots von denen Quellcode erstellt und diese ergeben dann die aktuelle Version.

die 3 Datei Status

Jetzt kommt ein wichtiger Part, diesen solltest du dir einprägen! Bei Git gibt es 3 Status, modified , staged, committed. Modified ist eine Datei, wenn sie bearbeitet wurde aber noch nicht in der Datenbank hinterlegt ist. Staged ist eine Datei, wenn sie als fertig markiert wurde und in den Commit rein kann. Committed ist eine Datei, wenn sie lokal in der Datenbank abgelegt wurde. Das bedeutet, du bearbeitest eine Datei, dann ist sie modified. Danach markierst du diese Datei und sie ist staged. Dann erstellst du ein commit mit allen staged Dateien und diese rutschen dann in die Datenbank.

Video Tutorial

SSH Einrichten

In disem Tutorial werde ich nur mit der Konsole arbeiten, sprich du brauchst erstmal die Git Bash. Auf die Installation gehe ich nicht weiter ein, da es hier sehr gut erklärt wird: https://git-scm.com/downloads.Um zu testen ob Git richtig installiert wurde, öffnest du Git Bash und gibst folgenden Befehl ein:
```
git --version
```
Bei mir kommt dann folgende Meldung:
```
git version 2.13.0.windows.1
```
Es ist kein Problem wenn du eine höhere Version hast, da die Git Entwickler auf Abwärtskompatibilität achten.

Es ist wichtig Git mitzuteilen wer man ist, da dies bei den Commits mitgespeichert wird. Dies hat den Vorteil, dass im Verlauf der Programmierer angezeigt wird und dadurch der passende Ansprechpartner für Änderungen am Code zur Verfügung steht. Um das zu machen, in der Konsole folgende Befehle eingeben:
```
git config --global user.name "Snowflame"
git config --global user.email github@boolie.org
```
Um deine Einstellungen zu prüfen gibst du folgenden Befehl ein:
```
git config --list
```
```
core.symlinks=false
core.autocrlf=true
core.fscache=true
color.diff=auto
color.status=auto
color.branch=auto
color.interactive=true
help.format=html
rebase.autosquash=true
http.sslcainfo=C:/Program Files/Git/mingw64/ssl/certs/ca-bundle.crt
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.required=true
filter.lfs.process=git-lfs filter-process
credential.helper=manager
user.email=github@boolie.org
user.name=Snowflame
credential.helper=manager
```
Jetzt brauchst du noch ein Server, zum testen und ausprobieren, ich empfehle dir GitHub. Sicherheit geht vor! Deswegen sichern wir die Kommunikation mit GitHub erstmal ab. Dafür brauchst du ein rsa Schlüssel, den kannst du in der Konsole generieren.
```
ssh-keygen -t rsa -f ~/.ssh/id_rsa_github -C "github@boolie.org"
```
Jetzt musst du ein Passwort eingeben, mit diesem schaltest du später immer dein privaten Schlüssel frei, also gut merken. Jetzt sollte der Schlüssel generiert worden sein, schaue im .ssh Ordner nach, ob dort 2 Schlüssel (id_rsa_github und id_rsa_github.pub) liegen

.ssh Config anlegen

Damit dein Rechner auch weiss, welcher Key verwendet werden soll, kannst du ein Config Datei anlegen mit einem Host.
~/.ssh/config:
```
Host github.com
    IdentityFile ~/.ssh/id_rsa_github
```
Verbindung aufbauen

Bei mir wird der id_rsa_github.pub als Libre Office Dokument angezeigt da die Endung dort verwendet wird. Jetzt öffnest du id_rsa_github.pub mit dem Texteditor und kopierst den kompletten Inhalt. Jetzt gehst du auf https://github.com/settings/keys und trägst dort unter „new SSH Key“ deinen Schlüssel ein. Um zu testen ob der Schlüssel funktioniert, gibst du in der Konsole folgendes ein:
```
ssh -T git@github.com
```
„Are you sure you want to continue connecting (yes/no)?“ mit yes bestätigen und dein Passwort eingeben. Danach sollte „Hi [USERNAME]! You’ve successfully authenticated, but GitHub does not provide shell access.“ kommen und auf der Github Seite https://github.com/settings/keys ist das Schlüssel Symbol von schwarz auf grün geändert.
FERTIG! Du hast dein Git und Github erfolgreich konfiguriert.

die Git Basics (init, status, add und commit)

Zuerst wollen wir ein Projekt anlegen

git init

Git speichert Projekte in Repositorys, übersetzt heißt das Lager, Depot oder Quelle. Es gibt 2 Varianten eine Repository zu erhalten:
- clonen einer existierenden Repository
- eine lokale Repository erstellen
Jetzt erkläre ich erstmal wie du eine lokale Repository erstellst und später wie du eine existierende clonst.

initialisieren einer lokalen Repository

Öffne deine Konsole und steuer mit cd dein Zielordner an, Beispiel:
```
cd Desktop\Projekte\boolie
```
Jetzt brauchst du noch ein Unterordner, den erstellst du mit mkdir:
```
C:\Users\Marc\Desktop\Projekte\boolie> mkdir gittut
```
Jetzt wechselst du, mit cd, in den Ordner:
```
C:\Users\Marc\Desktop\Projekte\boolie> cd gittut
```
Und nun tippst du git init in die Konsole.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git init
Initialized empty Git repository in C:/Users/Marc/Desktop/Projekte/boolie/gittut/.git/
```
Datei anlegen und git status

Jetzt wurde die Datenbank erstellt, sie liegt im Ordner „.git“. Dort werden jetzt deine Snapshots gespeichert. Jetzt öffne deinen bevorzugten Editor, in meinem Fall ist das Atom, und erstelle eine Datei namens README.md. Schreibe noch nichts rein erstmal nur erstellen und in den Ordner speichern. In der Konsole gibst du jetzt den Git Status befehl ein:
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        README.md

nothing added to commit but untracked files present (use "git add" to track)
```
git add

Jetzt wird die README.md angezeigt, eine „untracked“ Datei, das bedeutet das Git diese Datei ignoriert und sie nicht in die Repository speichert. Das soll jetzt geändert werden, mit dem add Befehl kannst du die Datei in den staged Status versetzen.
```
git add README.md
```
git commit

Jetzt muss die README.md Datei noch in die Datenbank eingetragen werden, da ja mit staged nur eine Markierung gesetzt wurde. Um die Datei jetzt in die Datenbank zu schieben muss ein commit gemacht werden:
```
git commit -m "README erstellt"
```
Jetzt ist die Datei in der Datenbank. Das -m steht für message, sprich ein Kommentar in dem stehen sollte was geändert würde. Später kann man dann im Verlauf nachschauen, was für Änderungen am Projekt vorgenommen wurde. Mit dem Befehl log kannst du dir die Änderungen an der Repository anschauen.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git log
commit 3612a834ae48596e0cdf697a82c823a037b90efa (HEAD -> master)
Author: Marc <borkowskiberlin@gmail.com>
Date:   Sat Jul 28 10:35:41 2018 +0200

    README erstellt
```
mehrere Dateien ändern

Um diesen Prozess einzuprägen, werden wir jetzt mehrere Dateien in die Datenbank eintragen. Erstelle in deinem Editor die Datei license.txt und bearbeite die README.md, trage einfach ein Hinweis auf die Lizenz ein.

Nun schaue dir die Änderungen in Git, mit dem Befehl status an.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        license.txt

no changes added to commit (use "git add" and/or "git commit -a")
```
Wie du siehst, werden beide Dateien angezeigt. Die README.md als modified und die license.txt als untracked. Setze beide Dateien jetzt in den staged Modus. Wieder mit dem Befehl add. Danach schaue dir die Änderungen wieder mit status an.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add README.md
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add license.txt
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   README.md
        new file:   license.txt
```
Gut, beide Dateien sind im staged Modus, jetzt der commit. Wieder mit dem Befehl commit -m „added a license“.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git commit -m "added a license"
[master 6c5b8f4] added a license
 2 files changed, 1 insertion(+)
 create mode 100644 license.txt
```
Repository auf Github schieben mit git push

Repository erstellen

Öffne github.com, und klicke auf „New Repository“.

Jetzt hast du eine Repository auf einem Server. Nun werden wir die lokal erstellte Repository auf den Server schieben. Wechsel wieder in die Konsole und setze, mit dem Befehl „remote add origin“, die URL für deine lokale Repository.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git remote add origin https://github.com/Snowflame/GitTutorial.git
```
Jetzt haben wir der lokalen Repository gesagt, dass es ein Server für dich gibt und du den unter der Adresse „https://github.com/Snowflame/GitTutorial.git“ findest. Jetzt müssen noch die Dateien hochgeladen werde, mit dem Befehl „push“, kannst du Dateien auf den Server schieben.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git push -u origin master
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (6/6), 481 bytes | 0 bytes/s, done.
Total 6 (delta 0), reused 0 (delta 0)
To https://github.com/Snowflame/GitTutorial.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.
```
Wenn du jetzt wieder die GitHub Seite öffnest, siehst du, dass deine Dateien auf dem Server liegen.

Dateien auf den Server pushen

Jetzt bearbeiten wir die README.md und schieben die Änderungen auf den Server. Zuerst die Änderung, in deinem Editor, die README.md Datei bearbeiten, schreibe z.B. GitHub Tutorial, als Überschrift, rein. Wenn du dein Text schön machen willst, kannst du Markdown verwenden, hier ein schönes Markdown Tutorial. Nachdem du jetzt deine RADME.md bearbeitet hast, musst du diese auf den Server schieben. Zuerst status, dann add, dann commit und push.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git commit -m "Headline to README"
[master 5655f58] Headline to README
 1 file changed, 1 insertion(+)

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git push
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 320 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/Snowflame/GitTutorial.git
   6c5b8f4..5655f58  master -> master
```
Fertig du hast die Änderungen auf den Server geladen.

Passwort speichern

Wenn du nicht immer dein Passwort eingeben möchtest, trage eine remote URL ein.
```
git remote set-url origin git@github.com:Snowflame/GitTutorial.git
```
Dateien vom Server holen mit git pull

Wenn du jetzt auf einem Anderen Computer deine Dateien vom Server laden möchtest, musst du zuerst deine Repository clonen. Wechsel zuerst in ein anderes Verzeichnes. Mit „cd ..“ wechselst du in das dadrüber liegende Verzeichnis. Dann erstellst du wieder ein Ordner mit „mkdir“, schreibe einfach eine 2 hinter den Namen und wechsle in den Ordner.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>cd ..
C:\Users\Marc\Desktop\Projekte\boolie>mkdir gittut2
C:\Users\Marc\Desktop\Projekte\boolie>cd gittut2
C:\Users\Marc\Desktop\Projekte\boolie\gittut2>
```
Nun clonst du die Repository von Github auf dein lokalen Rechner. Gebe in die Konsole „git clone RepositoryURL“ ein, die URL findest du auf der GitHub Seite.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut2>git clone https://github.com/Snowflame/GitTutorial.git
Cloning into 'GitTutorial'...
remote: Counting objects: 9, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 9 (delta 0), reused 9 (delta 0), pack-reused 0
Unpacking objects: 100% (9/9), done.
```
Wechsel jetzt mit „cd“ in die Repository:
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut2>cd GitTutorial
```
Jetzt musst du auch in deinem Editor den Ordner wechseln, achte darauf, das du nicht das Oberverzeichnis auswählst, sondern die Repository. Änder jetzt die README.md und lade sie auf den Server hoch.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut2\GitTutorial>git add README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut2\GitTutorial>git commit -m "new line of nothing"
[master 412ffc4] new line of nothing
 1 file changed, 1 insertion(+)

C:\Users\Marc\Desktop\Projekte\boolie\gittut2\GitTutorial>git push
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 336 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/Snowflame/GitTutorial.git
   5655f58..412ffc4  master -> master
```
Jetzt wechsel wieder mit „cd“ in den orginalen Ordner und lade dir die Dateien mit pull runter.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut2\GitTutorial>cd ../../

C:\Users\Marc\Desktop\Projekte\boolie>cd gittut

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git pull
remote: Counting objects: 3, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 3 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
From https://github.com/Snowflame/GitTutorial
   5655f58..412ffc4  master     -> origin/master
Updating 5655f58..412ffc4
Fast-forward
 README.md | 1 +
 1 file changed, 1 insertion(+)
```
Fertig, deine beiden Ordner sind jetzt identisch. Wenn du jetzt 2 Computer hättest, könntest du über Git deine Daten immer synchronisieren.

Dateien aus der Datenbank ausschließen

Um eine Datei dauerhaft aus GIT auszuschließen, musst du eine „.gitignore“ Datei anlegen und den Dateipfad dort eintragen. Öffne deinen Editor und lege 2 Dateien an. Zum einen die Datei „.gitignore“ und zum anderen eine Datei die du ausschließen möchtest.

In der „.gitignore“ Datei „/geheim/geheim.txt“ eintragen, um die Datei geheim.txt von der Datenbank auszuschließen.

[inline_infobox]Mit * kannst du einen ganzen Ordner ausschließen, schreibe z.B. „/geheim/*“ um alle Dateien im Ordner geheim auszuschließen. Damit ist es auch möglich bestimmte Dateiendungen aus der Datenbank auszuschließen z.B. „*.log“[/inline_infobox]
Wenn du jetzt „git status“ in deine Konsole eingibst, siehst du, dass die geheim Dateien nicht angezeigt werden und somit von Git ignoriert werden.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore

nothing added to commit but untracked files present (use "git add" to track)

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add .

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   .gitignore


C:\Users\Marc\Desktop\Projekte\boolie\gittut>git commit -m "ignoreing secret Files"
[master 252281b] ignoreing secret Files
 1 file changed, 1 insertion(+)
 create mode 100644 .gitignore

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git push
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 337 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/Snowflame/GitTutorial

.git
   412ffc4..252281b  master -> master
```
Datei Änderungen rückgängig machen

Mit dem „checkout“ Befehl lassen sich Dateien wieder auf den Uhrsprung zurück setzen. Ändere die Datei die Datei README.md, trage eine Textstelle ein. Jetzt gibst du in der Konsole „git checkout README.md“ ein, danach wird die Änderung rückgängig gemacht und die Datei ist wieder auf dem Stand des letzten pulls.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git checkout README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean
```
[inline_infobox]Wenn du eine Dateiänderung mit „checkout“ rückgängig machst, ist die Änderung weg, sei also vorsichtig![/inline_infobox]

Staged Markierung entfernen

Falls du schon eine Datei mit „git add“ markiert hast, aber diese doch nicht in den Commit soll, kannst du die Datei mit „git reset DATEI“ wieder aus dem staged Modus herausholen. Falls du die Datei bearbeitest und speicherst, wird die Datei automatisch aus dem staged genommen.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   README.md


C:\Users\Marc\Desktop\Projekte\boolie\gittut>git reset README.md
Unstaged changes after reset:
M       README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")
```
Stash

Der Stash ist eine Art Zwischenablage, du kannst deine Änderungen in den Stash legen und z.B. ein pull machen. Nach dem pull machst du ein apply und deine Änderungen sind wieder da. Schreibe eine Zeile in die README.md.

Jetzt gibst du in der Konsole „git stash“ ein.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git stash
Saved working directory and index state WIP on master: 252281b ignoreing secret Files

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean
```
Bearbeite jetzt die license.txt, schreibe z.B. deinen Namen rein.
[inline_infobox]Um es einfach zu halten, bearbeite nicht die README.md, da sonst Probleme beim zusammenfügen der Dateien kommen wird.Dieses Theme kommt erst später.[/inline_infobox]

Jetzt führe den Befehl „git stash apply“ in der Konsole aus.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   license.txt

no changes added to commit (use "git add" and/or "git commit -a")

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git stash apply
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md
        modified:   license.txt

no changes added to commit (use "git add" and/or "git commit -a")
```
Jetzt ist die Änderung in der REAME.md wieder da!

Branches

Ein Branch ist eine Sammlung von Commits, die wiederum eine neue Funktion in deiner App darstellen. Sprich jede neue Funktion in deiner App sollte eine eigene Branch besitzen. Wenn Entwickler 1 an der Branch „bezahl Funktion“ arbeitet und Entwickler 2 an „Produktauswahl“, kommen die beiden sich nicht in die Quere, da die beiden in unterschiedlichen Branches arbeiten. Später werden beide Branches dann merged und ergeben ein Paket aus neuen Funktionen für die App.

Um eine Branch zu erstellen musst du „checkout -b [NAME]“ in die Konsole eingeben. Mit dem Befehl erstellst du die Branch und wechselst gleich in die Branch. Mit dem Befehl „git branch“ kannst du dir alle Branches anzeigen lassen.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git checkout -b "README_Info"
Switched to a new branch 'README_Info'

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git branch
* README_Info
  master
```
Wenn du jetzt in der Brnach README_Info arbeitest, werden keine Änderungen im master vorgenommen. Ändere jetzt in der REAME.md wieder eine Zeile bzw. füge eine neue Zeile ein.
Schiebe jetzt deine Branch auf den Server. Aber diesmal musst du bei deinem push ein Upstream setzen. „git push –set-upstream origin README_Info“ sagt dem Server eine neue Branch wurde erstellt und füge diese auf dem Server hinzu.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git status
On branch README_Info
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git add README.md

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git commit -m "new working Branch"
[README_Info 4ceb2aa] new working Branch
 1 file changed, 3 insertions(+)

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git push --set-upstream origin README_Info
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 416 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/Snowflame/GitTutorial.git
 * [new branch]      README_Info -> README_Info
Branch README_Info set up to track remote branch README_Info from origin.
```
Jetzt zeigt GitHub auch die Branch an, öffne deine Branch und klicke auf „branches“.

Du kannst mit dem „git checkout [BRANCHNAME]“ Befehl zwischen den Branches wechseln. Wechsel jetzt zurück auf den Master Branch.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git branch
* README_Info
  master

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git checkout master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.

C:\Users\Marc\Desktop\Projekte\boolie\gittut>git branch
  README_Info
* master
```
Jetzt siehst du in deinem Editor, dass die Änderungen weg sind. Aber die Änderungen sind nicht weg, die liegen nur in der anderen Branch.

Branches mergen

Ein merge ist eine Zusammenfügung von 2 Branches, dabei wird der angegebene Branch in den aktuellen Branch eingefügt. Bei Git machst du das mit dem Befehl „git merge [BRANCH]“. Wechsle also in den Master Brnach und merge README_Info. Der Befehl sieht dann folgendermaßen aus: „git merge README_Info“.
```
C:\Users\Marc\Desktop\Projekte\boolie\gittut>git merge README_info
Updating 323f602..4ceb2aa
Fast-forward
 README.md | 3 +++
 1 file changed, 3 insertions(+)
```
Fertig, die beiden Branches sind jetzt zusammen gesetzt worden und der master Branch hat den Code vom README_Info mit drin.

GitHub Pages erstellen
Oktober 4, 2022
Limesurvey auf dem Server installieren (Manitu)

Limesurvey ist eine Umfrage-Software. Mit der kannst du eine große Anzahl an Menschen befragen, von Kunden bis zu deinen Followern. Es gibt eine Cloud-Version und eine Open Source Version. In diesem Beispiel zeige ich dir, wie du die Community Version auf einem einfachen Server installierst. Als Beispielserver habe ich ein Webspace von Manitu verwendet.

Limesurvey Community Downloaden

Lade dir auf Limesruvey die Software runter.

Download entpacken

Entpacke den runter geladene zip Datei.

Webspace einrichten

In einem anderen Tutorial habe ich schon bereits erklärt, wie man den Webspace einrichtet. Das Tutorial findest du hier: Website ins Internet laden (Hoster: Manitu).

Dateien hochladen via FTP

Lade nun die entpackten Dateien auf den Webspace via Filezilla.

Rechte setzen

Um die Installation durchzuführen, musst du die Rechte auf die Ordner: „tmp“, „upload“, „application/config“ auf 777 setzen. Dafür musst du in Filezilla rechtsklick auf den Ordner machen und Rechte setzen.

Datenbank anlegen

Logge dich in den Adminbereich von Manitu ein und lege eine MySQL kompatible Datenbank an.

Jetzt musst du nur noch die Formulare ausfüllen und du hast es geschafft.

Fertig

Fertig, jetzt kannst du die Umfragen anlegen und deine Leute befragen

Oktober 3, 2022
WordPress lokal installieren

Es ist ratsam WordPress lokal zu installieren, da du Plugins und Themes vorher testen kannst. Wenn du am Theme Änderungen vornimmst, solltest du das vorher lokal testen, da sonst Fehler auf dem Livesystem hast. Der Vorteil vom lokalen testen von Plugins ist, dass du vorher weißt was das Plugin kann und wie es sich anfühlt. Wenn du auf deinem Livesystem deine Plugins testet und diese dann löschst, können Reste von dem Plugin in der Datenbank bleiben und diese verlangsamen deine Seite.

Video-Tutorial

lokalen Webserver installieren

Geh auf https://www.apachefriends.org/de/index.html und lade dir XAMPP für Windows runter. Nach dem du die .exe runtergeladen hast, startest du wieder die Installation per klick auf die .exe. Bei der Installation muss nichts geändert werden, die Standardeinstellungen könnt ihr beibehalten.

Mit „Finish“ schließt du dann die Installation erfolgreich ab, lass das Häkchen bei „Do you want to start the Control Panel now?“ drin.
Nun öffnet sich der Control Panel, bei dem ihr den Server starten und stoppen könnt. Zuerst sollte nur der Apache Server gestartet werden. Einfach hinter Apache auf starten klicken.

Nach dem klick auf starten, sollte die Apache Anzeige grün hinterlegt werden. Nun kannst du den Server im Browser öffnen, in der URL Zeile „http://localhost/“ eingeben. Nun öffnet sich die XAMPP Übersichtsseite, das ist die Bestätigung, dass der Server läuft und Einsatzbereit ist.

Starte jetzt die Datenbank, klicke dazu auf Starten in der Zeile mit MySQL.

Fertig, der Webserver mit MySQL läuft.

WordPress installieren

Lade dir jetzt unter https://de.wordpress.org/download/ WordPress runter und entpacke den ZIP Ordner. Ich benutze dafür 7zip, du kannst es dir hier runterladen: https://www.7-zip.org/.
Kopiere den wordpress Ordner aus der entpackten zip Datei. Klicke auf Explorer im XAMPP Kontrollfenster, der Button fürht dich in einem Ordner in dem der „htdocs“ liegt, in den „htdocs“ Ordner speicherst du den wordpress Ordner.

Lege jetzt eine Datenbank an, öffne wieder dein XAMPP Kontrollzentrum und klicke bei MySQL auf Admin. Jetzt öffnet sich PHPMyAdmin, erstelle eine neue Datenbank mit dem Namen wordpress, Kollation kannst du auf Standard lassen.

Öffne jetzt http://localhost/wordpress/ um die WordPress Installation zu starten. Nachdem du mit Los gehts bestätigt hast, dass du starten möchtest, kommt die Datenbank Eingabe. Datenbank-Name ist der NAme der gerade erstellten Datenbank, in diesem Beispiel „wordpress“. Der Benutzername ist „root“. Passwort ist leer sprich einfach alles rauslöschen. Datenbank-Host ist „localhost“ da die Datenbank auf dem eigenen Computer läuft. Tabellen-Präfix ist ein bei jeder Tabelle in der Datenabnk vorangestellte Tabellennamenzusatz, lasse dies einfach auf Standard „wp_“.
Fertig, WordPress ist jetzt lokal auf deinem Computer installiert.

[inline_infobox]Wenn du das nächste mal mit WordPress arbeiten möchtest, musst du XAMPP starten und den Webserver sowie MySQL starten.[/inline_infobox]

Voriger Schritt: Bloggen für Anfänger – wie du startest
Übersicht: Blog Tutorial
Nächster Schritt: Content planen – der Redaktionsplan

September 4, 2022
Vodafone Kommunikation – Gedächtnisprotokoll
Ein Gedächtnisprotokoll, wie ich von einer Umzugsanfrage zu ??? gekommen bin.

10.05.2021 – Hotline Gespräch

Ich habe bei der Vodafone Service-Hotline angerufen und wollte mich über ein Umzug erkundigen, da ich in ein anderen Bezirk ziehe. Bei dem netten Gespräch hat mir der Nette Herr, angeboten ein neuen Vertrag abzuschließen und den alten über das Sonderkündigungsrecht zu beenden. Für mich war das ein Top Angebot, Gutschrift und die ersten 12 Monate weniger bezahlen. Bei der Tonbandaufnahme hatte ich unter Vorbehalt zugestimmt, wenn die Sonderkündigung funktioniert.

11.05.2021 – Feedback auf die Sonderkündigung

Mir wurde leider mitgeteilt, das der Hotline-Mitarbeiter mich falsch beraten hat und die Sonderkündigung nicht greift. Sie würden mir gerne ein Angebot für den Umzug machen. Ich habe zugestimmt und habe noch dazu geschrieben, dass ich vom Neuvertrag zurücktreten möchte.

12.05.2021 – Umzugsangebot

Mir wurde angeboten, den Vertrag in die neue Wohnung zu übernehmen, dafür fallen 39,99 € an. Als alternative kann ich den Vertrag um 24 Monate verlängern und muss nicht die 39,99 € zahlen.

meine Antwort war: (Kurzform)
- Umzugsservice in Anspruch nehmen und 39,99€ zahlen
- aktuellen Vertrag kündigen
- vom Neu-Vertrag zurücktreten
Dafür eine schriftliche Bestätigung.

13.05.2021 – Feedback auf das zurücktreten des Vertrags

Ich konnte Erfolgreich vom Neu-Vertrag zurücktreten, dies wird mir demnächst in einer separaten E-Mail bestätigt. Des weiteren ist der Umzug in Auftrag und es werden, nächsten oder übernächsten Monat, die Kosten von meinem Konto abgebucht, dies wird mir auch demnächst per E-Mail bestätigt. Das ich meinen Vertrag kündigen möchte wurde leider ignoriert. (Werde die Bestätigungsmails abwarten)

14.05.2021 – anderes Produkt verkaufen

Heute wurde ich von Vodafone angerufen, sie wollten mir Internet über TV Anschluss andrehen. Hatte ihn genervt abgewürgt. Ich vermute mal, dass die mich länger im Vertrag halten möchten, weil Neuvertrag = 24 Monate. Damit ist meine Entscheidung endgültig gefallen, ich werde nicht nur DSL kündigen, sondern auch mein Otelo Vertrag.
PS: Bestätigungsmails sind noch nicht angekommen.

17.05.2021 – Stornierung

Habe eine E-Mail erhalten. In der wird bestätigt, dass der Neu-Vertrag storniert wurde. Des weiteren Habe ich eine E-Mail von DHL bekommen, mit einem Retoure-Schein für das Vodafone Paket (Router).

18.05.2021 – Router verschickt

Habe eine Bestätigung-E-Mail von Vodafone erhalten, dass der Router verschickt wurde. Danach kam eine E-Mail von GLS, dass das Paket unterwegs ist.

Bin mir nicht sicher ob ich eine Bestätigungsmail für den Umzug bekomme, obwohl es hieß: „Ihren Vertrag unter der Kundennummer XXX habe ich umziehen lassen. Auch darüber erhalten Sie in einer separaten Mail die Umzugsbestätigung, sowie weitere Informationen zur Anschaltung.“.

19.05.2021 – Techniker

Habe noch ein Anschalttermin erhalten, für den 02.06.2021. Da bin ich mir jetzt auch nicht sicher, ob das für den Neu-Vertrag oder für den Umzug ist. (Oder ist das egal?)

Ich habe über Twitter Kontakt mit Vodafone aufgenommen:

17.08.2022 – Wofür wollen die Geld?

Mittlerweile habe ich geschafft mein Vertrag zu kündigen. Es wird zwar noch ein kleiner Betrag vom Konto abgebucht, für ein nicht erhaltenden Router, aber dies ignoriere ich gekonnt. Heute wurden wieder 35€ vom Konto abgebucht und ich weiß nicht warum. Ich habe versucht mich einzuloggen um nachzuschauen und es hat nicht funktioniert. Danach habe ich versucht über ein Kontaktformular den Service zu erreichen, dort brauch ich ein Kontakt-Passwort, kenne ich nicht, funktioniert auch nicht. Danach habe ich angerufen, ein Bot hat gesagt ich soll mich einloggen, ich merke schon, Vodafone will kein Kundenkontakt. Sollte nächsten Monat wieder Geld abgebucht werden, werde ich das Geld zurück buchen lassen und eine Kommunikation auf Augenhöhe zukommen lassen.

Werde das Protokoll hier öffentlich und bis zum Ende dokumentieren.
August 17, 2022
Instagram Werbung – Der erste Anfänger-Fehler [+Artikel]

Ich habe die letzten 5 Tage eine Werbekampange auf Instagram gestartet und war ein wenig enttäuscht, wie wenig Einfluss, dass auf mein Account genommen hat. Mitten in der Kampange habe ich dann meine eigene Anzeige entdeckt und war erschrocken, wie beschissen diese aussieht. Der Feed-Beitrag war einfach in einer Story eingeblendet und man konnte auf den Link klicken. Dies bedeutete, schnelles werben über die App ist eine Katastrophe und sollte nicht gemacht werden.

Schnellschuss

Wie im Intro erwähnt habe ich einfach mal ein Beitrag beworben und angeschaut wie viele Klicks auf mein Blog kommen. Ich habe 10€ ausgegeben [um_loggedin]und 90 mal wurde auf den Link auf meine Website geklickt. Da am Ende des Artikels noch mein Instagram Account verlinkt war, haben dadurch noch Menschen mein Profil gefunden und haben ein follow da gelassen. Dies hat mir gezeigt, dass auf meinem Blog, die Social Buttons getrackt werden sollten. Der Feed-Beitrag wurde auch als Story beworben, hatten die wenigsten eine Chance mein Profil genauer zu betrachten. Durch das tracking auf meiner Seite habe ich gesehen, dass 83% über den Story Link kamen, dies sagt mir, das die Anzeige überwiegend in Storys beworben.

erstes learning

Nach kurzer recherche habe ich festgestellt, dass man über den Facebook Werbemanager die Anzeigen detailreich einstellen kann und z.B. nur im Feed beworben werden kann. Dies werde ich als nächstes testen, die nächste Anzeige werde ich nur im Feed bewerben und prüfen ob dadurch mehr Follower erreicht werden kann.

Idee hinter dieser Reihe

Statt 1.000€ in ein Kurs für Werbeanzeigen zu stecken, dachte ich mir, ich investiere das Geld direkt in Anzeigen und lerne dadurch. Deswegen werde ich in den nächsten 12 Monaten, 1.000 € investieren.

nächstes Experiment

Als nächstes werde ich ein Video Promoten, genauer gesagt ein Standbild mit Audiounterlegung. Eine lokale Nachricht, über die Hafenentwicklung in Rostock, ein Interview mit Sasha von Rostdock. Zielgruppe werde ich auf Rostock beschränken, aber ansonsten keine weitere Einschränkungen. Voraussichtlich werde ich 4€ am Tag, 14 Tage lang die Kampagne schalten. Dadurch will ich mir meine potenzielle Zielgruppe definieren, beobachten wer mit dem Video interagiert und statistisch betrachtet, welche zukünftige Zielgruppen angesprochen werden sollten.

aktueller Stand

22 Follower

[/um_loggedin]

August 1, 2022
Suchmaschinenoptimierung (SEO) Informationsquellen
Liste mit den besten Suchmaschienen Informationen die man online finden kann. Suchmaschinenoptimierung (SEO = Search Engine Optimization) für deine Website bzw. Shop ist ein Langzeitprojekt, deswegen sollte man auch regelmäßig Nachrichten zu diesem Thema lesen. Auf dieser Seite findest du Quellen, auf denen ich mich informiere und auf aktuellen Stand bleibe. Diese Liste wird regelmäßig aktualisiert und erweitert.

SEO-Südwest

Eine Nachrichtenseite die den Google Algorithmus im Auge behält und auf Sozialen Kanälen die großen Konzerne im Blick behält. Des weiteren findet man dort gute Informationen aus den USA über SEO. Es erscheinen Insights, Gespräche und Analysen mit Fachexperten. Die Seite betreibt den Podcast SEO im Ohr.

www.seo-suedwest.de

Website Boosting

Das Print Magazin Website Boosting versammelt 300 Experten rund um Traffic-Generierung, von SEO bis Social Media werden qualitativ Hochwertige Inhalte veröffentlicht. Aktuelle Inhalte werden als Print verkauft und die älteren Artikel kann man kostenlos online lesen.

www.websiteboosting.com

YouTube Kanal von Evergreen Media

Der YouTube Kanal von Evergreen Media erklärt in kurzen Videos das Basiswissen der Suchmaschinenoptimierung. Geeignet ist der YouTube Kanal besonders für Beginner um sich die sich ein allgeminen Überblick verschaffen wollen, aber für Fortgeschrittene ist auch ein haufen an guten Inhalt verfügbar.

Evergreen Media YT Kanal

Onlinemarketing.de

Regelmäßig Updates zur Google-Suche erhalten und immer aktuell bleiben, das geht mit onlinemarketing.de. Die qualitativ hochwertigen Artikel erscheinen regelmäßig und gehen auch mal in die Tiefe. Auf den anderen Ressorts findest du auch noch zu anderen Marketing Bereichen top Informationen.

www.onlinemarketing.de/seo

SEO Inhalt von mir
Juli 27, 2022
CSS Klassen kombinieren
Übersicht
.box.content

Bei dieser Kombination, muss das Element beide Klassen besitzen.
```
.box.content {
  color: #009ee0;
}
```
```
<div class="box content"></div>
```
.box > .content

Das Element mit der Klasse Content, muss ein direkt untergeordnetes Element von Box sein.
```
.box > .content {
  color: #009ee0;
}
```
```
<div class="box">
  <div class="content"></div>
  <div class="content"></div>
</div>
```
Dabei erhalten beide Div-Elemente, mit der Klasse Content, den Farbwert Schwarz.
```
<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
</div>
```
Hier würde kein Element den Color Wert erhalten.

.box .content

Das Element mit der Klasse Content, muss ein untergeordnetes Element von Box sein.
```
.box .content {
  color: #009ee0;
}
```
```
<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>
```
Die beiden Elemente mit der Klasse Content erhalten den Color Wert.

.box + .content

Das Element mit der Klasse Content, muss das nächste anliegende Element von Box sein. Es darf dabei nicht von einem anderem Element unterbrochen werden.
```
.box + .content {
  color: #009ee0;
}
```
```
<div class="box"></div>
<div class="content"></div>
```
Das anliegende Div-Elemnt mit der klasse Content erhält den Wert.
```
<div class="box"></div>
<div class="header"></div>
<div class="content"></div>
```
Hier würde kein Element den Color Wert erhalten.

Teaser Beispiel

2 verschiedene Teaser-Bild-Formate. Die P Tags sollen bei den anliegenden Teaser-Bildern unterschiedliche Formate erhalten.
```
.teaser {
  width: 100%;
  float: left;
}
.teaser .image{
  width: 75px;
  height: 75px;
  margin: 25px 15px 0 25px;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser .imagebig{
  width: 100px;
  height: 100px;
  margin: 0 15px 0 0;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser p{
  font-size: 16px;
  color: #333333;
}
.teaser .image + h4 + p{
  font-size: 16px;
  color: #666666;
}
.teaser .imagebig + h4 + p{
  font-size: 14px;
  color: #333333;
}
```
```
<div class="teaser">
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div><div class="teaser">
  <div class="image">
    225 x 225
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="teaser">
  <div class="imagebig">
    250 x 250
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
```
Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

225 x 225

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

250 x 250

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Wenn das Element die Klassen Box und Content hat, bekommt es den Farbwert zugewiesen. Beim Hover-Event wird der Farbwert überschrieben.

Box Content
```
.box.content {
  color: #009ee0;
}
.box.content:hover {
  color: #000;
}
```
```
<div class="box content">Box Content</div>
```
.box:hover > .content

Bei dem Hover-Event über das Element, mit der Klasse Box, wird das Element, mit der Klasse Content, verbreitert.
```
.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover > .content {
  width: 150px;
}
```
```
<div class="box">
  <div class="content"></div>
</div>
```
.box:hover .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, werden alle Elemente mit der Klasse Content im Box Element verbreitert.
```
.box {
  height: 100px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover .content {
  width: 150px;
}
```
```
<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>
```
.box:hover + .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, wird das anliegende Elemente mit der Klasse Content verbreitert.
```
.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover + .content {
  width: 150px;
}
```
```
<div class="box">
  <div class="content"></div>
</div>
<div class="content"></div>
```
CSS Tutorial

Voriger Schritt: CSS Styles definieren

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Flexbox Tutorial
Juli 12, 2022
JS ES6 Tutorial
ES6 ist die Abkürzung für ECMAScript 6, ES6 ist der Standard für die Ausführung von JavaScript in aktuellen und kommenden Browsern und Servern. ES6 wurde 2015 entwickelt und hat neue Arbeitsweisen in Java Script implementiert. Alle gänigen Browser/NodeJs Server unterstützen ES6. In diesem Artikel findest du eine Übersicht von allen neuen Arbeitsweisen.

Übersicht
let und const

ES6 bringt 2 neue Datentypen mit, einmal let und zum anderen const.

let

Der Datentype let ist für Variablen, die nur im aktuellen Block verarbeitet werden sollen. Es ist zu beachten, dass let in einem verschachtelten Block auch verfügbar ist, da sich ja der verschachtelte Block auch im aktuellen Block befindet. Kurz zur Klärung, ein Block ist z.B. eine if Bedingung, eine Funktion oder eine Schleife.
```
if(true){
  let a = 1;
  console.log(a);
}
console.log(a);
```
```
1
Uncaught ReferenceError: a is not defined
```
Zum vergleich dazu ein Beispiel mit var:
```
if(true){
  var a = 1;
  console.log(a);
}
console.log(a);
```
```
1
1
```
Let überschreibt nicht die Variablen die im Block dadrüber liegen. Sprich du kannst eine Variable mit var deklarieren und den gleichen Variablennamen, mit einer let deklaration, in einer if Bedingung benutzen.
```
var a = 0;
console.log(a);
if(true){
  let a = 1;
  console.log(a);
}
console.log(a);
```
```
0
1
0
```
Des weiteren ist zu beachten, das z.B. in einer For Schleife der Kopf mit zum Block gehört.
```
let a = 10;
for(let a = 5; a > 0; a--){
  console.log(a);
  
}
console.log(a);
```
```
5
4
3
2
1
10
```
const

Const steht für Konstante, eine Konstante darf nur einmal definiert werden und danach nicht mehr verändert werden, da sonst ein Fehler zurückgegeben wird. Es ist zu beachten, dass bei const immer der Name von der Konstante groß geschrieben wird.
```
const CONFIG_CONNECTION_IP = "127.0.0.1";
```
Arrow Funktionen

Vorab erstmal zeige ich dir die „alten“ Varianten Funktionen zu definieren.
```
function consoleHello() {
  console.log("Hello World");
}
consoleHello();

var consoleBye = function(){
  console.log("Bye World");
}
consoleBye();
```
Diese Definitionen sollten dir bekannt sein. Mit der Arrow Funktion kommt eine dritte Möglichkeit hinzu.
```
var newConsole = () => {
  console.log("new World");
}
newConsole();
```
„var newConsole“ definiert den Funktionsnamen, „()“ die Parameter und „=>“ definiert den Übergang zum Funktionsbody. Einer der Vorteile bei dieser Variante ist die Möglichkeit die Funktion zu kürzen. Da wir nur ein Befehl in der Funktion haben, verhält sich das ähnlich wie mit einer if Bedingung, man kann die geschweiften Klammern weg lassen.
```
var newConsole = () => console.log("new World");
newConsole();
```
Des weiteren kann man sich bei einer einzeiligen Funktion den return sparen.
```
var newConsole = () => "new World";
console.log(newConsole());
```
Bei den Parametern gibt es auch eine kleine Besonderheit. Wenn du mehrere Parameter hast, schreibst du diese einfach mit einem Kommer getrent in die Klammern „= (parm1,parm2,parm3) =>“. Falls du nur ein Parameter hast , kannst du dir die Klammern sogar sparen „= parm1 =>“. Jetzt zeige ich dir, ein praktisches Beispiel dafür indem ich eine Variable mit einem festen Wert addieren mächte.
```
var addToBasis = basis => basis+5;
console.log(addToBasis(5));
```
```
10
```
Diese Schreibweise macht sich gut bei kurzen Callback Funktionen, z.B. bei diesem Timeout.
```
setTimeout(() => console.log("1 Sekunde vergangen"), 1000);
```
Vorteil bei Klassen beim Zugriff auf „this“

Arrow Funktionen unterscheiden sich zu normalen Funktionen in einer riesigen Sache, es verarbeitet „this“ anders. Bei Arrow Funktionen wird das this Objekt von der aktuellen deklarationspunkt benutzt. Das wird in einer Klasse am besten sichtbar.
```
class TestKlasse {
  constructor() {  
    
    let thisTestArrowFunc = () => this.test();
    
    function TestFunktion() {
      this.test();
    }
    
    thisTestArrowFunc();
    TestFunktion();
    
  }
  
  test(){ console.log(this) };
}

let TestObjekt = new TestKlasse();
```
```
thisTestArrowFunc: TestKlasse {}
TestFunktion: Uncaught TypeError: Cannot read property 'test' of undefined
```
in JSBin öffnen

Aber die normale Funktion kann auch Vorteile haben, z.B. wenn wir einen Button haben und dieser gedrückt wird, möchte man gerne in der Funktion mit dem Buttonobjekt über this arbeiten. Dies ist mit einer Arrow Funktion kompliziert zu bewerkstelligen.
```
<!DOCTYPE html>
<html>
<head>
  <title>Button</title>
</head>
<body>
  <button>klick mich</button>
</body>
</html>
```
```
var button = document.querySelector("button");

function showButtonInfo(){
  console.log(this);
}
button.addEventListener('click', showButtonInfo);
```
Wenn jetzt der Button gedrückt wird, wird in der Konsole das Button-Objekt ausgegeben. in JSBin öffnen
```
var button = document.querySelector("button");

var showButtonInfo = () => {
  console.log(this);
}

button.addEventListener('click', showButtonInfo);
```
Die Arrow Funktion gibt das Window Objekt zurück. in JSBin öffnen

Standardwerte bei Funktionen

Mit ES6 können Funktionen jetzt auch default Werte gegeben werden, sprcih wenn der Parameter nicht mitgegeben wird, wird der Standard Wert verwendet.
```
var istGleich = (zahl, vergleich = 10) => zahl === vergleich;
console.log(istGleich(10));

function istGleich2(zahl, vergleich = 10){
  return zahl === vergleich;
}
console.log(istGleich2(8));
console.log(istGleich2(8,8));
```
```
true
false
true
```
in JSBin öffnen

Objekterweiterungen

Objekterweiterungen ist das automatische verwenden von Variablen. Wenn du eine Variable mit dem Namen „name“ definierst und danach ein Objekt mit dem Feld „name“, wird die erstellte Variable automatisch in das Objekt gespeichert.
```
let name = "Marc";

let person = {
  name,
  nachname: "Borkowski"
}

console.log(person);
```
```
[object Object] {
  nachname: "Borkowski",
  name: "Marc"
}
```
Es ist natürlich möglich das Objektelement zu überschreiben bzw. nicht die Variable zu benutzen.
```
let name = "Marc";

let person = {
  name: "Max",
  nachname: "Borkowski"
}

console.log(person);
```
```
[object Object] {
  nachname: "Borkowski",
  name: "Max"
}
```
Jetzt kommt der große Vorteil in der Sache, dies funktioeniert auch mit Funktionen, sprich du erstellst eine Funktion (ES5) und in dieser Funktion kannst du über this auf die einzelnen Elemente zugreifen. Hierdran siehst du auch das Arrow Funktionen Nachteile haben können. Benutze Arrow Funktionen nicht immer, diese können auch Nachteile haben.
```
let name = "Marc";

function sagHallo() {
  return "Hallo " + this.name;
}

let person = {
  name: "Max",
  nachname: "Borkowski",
  sagHallo
}

console.log(person.sagHallo());
```
```
"Hallo Max"
```
dynamisches erstellen von Objektelmenten

Es ist möglich Objektelemente über Variableninhalte zu erstellen, dazu musst du einfach den Variablenname in Eckige Klammern beim Objekt setzen.
```
let name = "Marc";
let NachnamenFeld = "nachname"

let person = {
  name: "Max",
  [NachnamenFeld]: "Borkowski"
}

console.log(person);
```
```
[object Object] {
  nachname: "Borkowski",
  name: "Max"
}
```
Rest Operator

Der Rest Operator transformirt eine Liste von Parametern in ein Array. Das hat den Vorteil, dass die Parameter dynamisch verarbeitet werden können. Der Nachteil ist, dass als Parameter immer eine Liste und kein Array übertragen werden sollte, da sonst das Array wieder in ein Array gepackt wird.
```
let summeArray = (...nummern) => {
  console.log(nummern);
}

summeArray(1,2,3);
summeArray([1,2,3]);
```
```
[1, 2, 3]
[[1, 2, 3]]
```
Als praktisches Beispiel nehme ich eine Funktion die alle Parameter summieren soll, Dies ist ohne Rest Operator äußerst schwierig, da wir erst alle möglichen Parameter prüfen müssen.
```
let summeArray = (...nummern) => {
  let summe = 0;
  for(let i = 0; i < nummern.length; i++)
    summe += nummern[i];
  
  return summe;
}

console.log(summeArray(1,2,3));
```
```
6
```
in JSBin öffnen

Spread Operator

Der Spread Operator ist das Gegenteil zum Rest Operator, es wandelt ein Array in eine Liste um. Dies ist ein Vorteil, wenn du zum Beispiel die max Methode verwendest, aber ein Array hast. Der Spread Operator wird diesmal beim Funktionsaufruf verwendet, nicht beim Funktionskopf.
```
let nummern = [1,2,3];

console.log(Math.max(nummern));
console.log(Math.max(...nummern));
```
```
NaN
3
```
in JSBin öffnen

Beim Spread Operator ist auch möglich noch weitere Parameter hinzuzufügen. Man kann sogar mehrere Spread Operatoren hintereinander verwenden.
```
let nummern = [1,2,3];
console.log(Math.max(...nummern, ...[4,5,6], 9));
```
```
9
```
For of Loop

For of Loop ist eine For Schleife, in der ein Array einfacher verarbeitet werden kann. Jedes Array Element wird temporär, für den einen Intervall, in eine Variable gespeichert.
```
let nummern = [1,2,3,4];

for(nummer of nummern) {
  console.log(nummer);
}
```
```
1
2
3
4
```
Dies ist natürlich auch mit einer Schleife machbar, aber diese kürzere Schreibweise macht den Code leserlicher.

Templates

Erstmal möchte ich dir das nach links gedrehte Anführungszeichen vorstellen. Neben Backspace mit gehaltener Shift Taste kannst du das Zeichen tippen -> „. Mit diesem Anführungszeichen ist es möglich Strings über mehrere Zeilen zu schreiben.
```
let name = "Marc

du"; // geht nicht

let name = 'Marc

du'; // geht nicht

let name = `Marc 

du`; // geht
```
Mit den nach links gedrehten Anführungszeichen, ist es möglich Variablen mit einzubetten. Das machst du mit ${variablenname}.
```
let name = "Marc";

let willkommen = `Herzlich
Willkommen
${name}`;

console.log(willkommen);
```
```
"Herzlich
Willkommen
Marc"
```
Um ${} zu schreiben ohne das eine Variable ausgegebn werden soll, kannst du die Stelle mit \ maskieren.
```
let name = "Marc";

let willkommen = `Herzlich
Willkommen
\${name}`;

console.log(willkommen);
```
```
"Herzlich
Willkommen
${name}"
```
Es ist auch möglcih in den geschweiften Klammern Code auszuführen, als Beispiel möchte ich eine Zahl ausgeben und diese in der Ausgabe immer + 1 rechnen.
```
let alter = 29;
let ausgabe = `Du bist ${alter + 1}`;
console.log(ausgabe);
```
```
"Du bist 30"
```
Destructuring Arrays

Mit Destructuring Arrays kann man Arrays auseinandernehmen bzw. einfacher mit den Werten arbeiten. Wenn du auf der linken Seite der Variablendefinition eckige Klammern schreibst, kannst du auf einzelne Elemente von einem Array zugreifen. Das klingt zwar kompliziert, aber am Code Beispiel wirst du es schnell verstehen.
```
let nummern = [1,2,3];
let [a,b] = nummern;
console.log(a);
console.log(b);
```
```
1
2
```
Es werden 2 Variablen erstellt und diesen werden die Werte von den ersten beiden Elementen des Arrays zugewiesen. Du kannst auch den Rest Operator mit einbauen falls du alle Elemente eines Arrays haben, mit der Außname vom ersten.
```
let nummern = [1,2,3];
let [a, ...b] = nummern;
console.log(b);
```
```
[2, 3]
```
Destructuring Arrays hat noch ein großen Vorteil, Variablen vertauschen, früher brauchte man noch eine dritte Variable in den man den Wert zwischen gespeichert hat. Jetzt ist dies mit dieser Technik einfacher zu lösen.
```
let a = 1;
let b = 2;

console.log(a);
console.log(b);

[b, a] = [a,b];

console.log(a);
console.log(b);
```
```
1
2
2
1
```
Destructuring Objekte

Was mit Arrays funktioniert, klappt auch mit Objekten. Nur der Unterschied ist, dass geschweifte Klammern verwendet werden, um Objektelemente aus dem Objekt zu „ziehen“.
```
let objekt = {
  name: 'Marc',
  alter: 29,
  ort: 'Rostock'
}
let {name} = objekt;
console.log(name);

let {alter, ort} = objekt;
console.log(alter, ort);
```
```
"Marc"
29
"Rostock"
```
Des weiteren kannst du bei Objekten noch ein Alias mithinzufügen. Wenn ein ALias angegeben ist, wird der Variablenname überschrieben. Alias werden nach dem Objektnamen mit einem Doppelpunkt geschrieben.
```
let objekt = {
  name: 'Marc',
  alter: 29,
  ort: 'Rostock'
}
let {ort:stadt} = objekt;
console.log(stadt);
```
```
"Rostock"
```
Juni 23, 2022

responsive Navigation mit Burgermenü

Mit diesem Tutorial lernst du, wie du mit HTML/CSS eine responsive Navigation baust. Zum ein- und ausklappen der mobilen Navigation hast du ein Burger-Icon.

einfache Navigation bauen
responsive Navigation Design anpassen
Burger-Icon einbauen
Burgermenü interaktiv gestalten
kompletter Code

Demo

einfache Navigation bauen

Ein nav Element anlegen und eine Liste eintragen

HTML Code

<nav>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS Code

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}

responsive Navigation Design anpassen

Damit auf dem Handy die Navigation gut klickbar ist, machen wir die Einträge auf volle Breite und etwas höher. Des Weiteren entfernen wir die Abstände links und rechts, da sonst die Navigation breiter als der Bildschirm ist.

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}	
}

Burger-Icon einbauen

Jetzt wollen wir noch die Navigation ein- und ausklappbar machen. Dafür benötigen wir ein Bürger-Icon. Ich baue dies selber mit HTML/CSS.

HTML

<div class="burgericon">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}

Burgermenü nur mobile anzeigen

@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}

Burgermenü interaktiv gestalten

Damit die Seite auch ohne JavaScript funktioniert, habe ich mich für eine unsichtbare Checkbox entschieden. Das Bürger-Icon muss noch mit einem Label umfasst werden.

<input type="checkbox" id="navigation">
<label for="navigation" title="Navigation öffnen">
	<div class="burgericon">
		<div></div>
		<div></div>
		<div></div>
	</div>
</label>

Navigation mobile ausbleneden

Wenn man auf die Seite kommt, soll die Navigation eingeklappt sein, deswegen verstecken wir diese.

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}

auf Statuswechsel reagieren

Damit die Navigation ein- und ausklappt, muss auf den Status der Checkbox reagiert werden. Des Weiteren blende ich die Checkbox aus.

#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}

Burger zum Kreuz drehen

Jetzt muss noch der Burger zu einem X gedreht werden, bzw. der mittlere Balken ausblenden.

#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

Animation

Wenn du das Burgermenü noch annimieren möchtest, kann ich dir meine Übungsaufgaben empfehlen: CSS Übungsaufgaben [Animation & Verlauf].

kompletter Code

HTML

<nav>
	<input type="checkbox" id="navigation">
	<label for="navigation" title="Navigation öffnen">
		<div class="burgericon">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</label>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}
@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}
.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}
@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}
#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}
#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

CSS Tutorial

Voriger Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Zur Turtorial-Reihe: CSS Tutorial

April 12, 2022

Wenn Copyright wichtiger ist als Privatsphäre

Das Heise Magazin hat Heute über Googles Algorythmen in Google Drive berichtet. Professorin Emily Dolson von der Michigan State University wollte ihren Studenten Dateien zur verfügung stellen, in der Beispieldatei Stand die Ziffer 1. Google hat die Datei gesperrt, da die Datei angeblich das Copyright verstöst.

Was ich in der Meldung lese

Mal abgesehen von den Skandal, dass die Dateien von Wissenschaftler:innen wegen einer 1 gesperrt wird. Zeigt mir wieder wie kaputt das Internet ist. Warum nimmt sich Google das Recht meine privaten Daten zu lesen und zu scannen? Daraus lese ich wiederum, dass Lizenzen an Daten wichtiger eingestuft wird als das Recht auf Privatsphäre.

der Skandal

Der eigentliche Skandal ist doch, dass wir in einem Überwachungskapitalismus leben. Ich will nicht wissen wo Google noch aus Gründen des Copyright schnüffelt, vielleicht deine E-Mails? Ich würde sogar behaupten, das andere Tech-Firmen es genauso handhaben. War nicht letztens die Meldung, das Apple Dateien auf dem lokalen Gerät durchsuchen möchte, wegen Schutz der Kinder? Wenn man jetzt noch weiter spinnt, welche Daten erhebt Microsoft für Daten auf deinem PC? Die Suchfunktion links unten, mit der automatischen online Suchfunktion, wird auf jedenfall getrackt.

Lösung

Es muss auf jedenfall die ganze Gesellschaft dran arbeiten diese Entwicklung rückgängig zu machen. Der erste Schritt wäre ein E-Mail Postfach auf dem eigenen Server, bzw. bei einem Datenschutzfreundlichem Dienst. Danach folgt Dateienaustausch über z.B. Nextcloud.

ich bin nicht unschuldig

Dieser Blog verwendet auch ein Google Dienst, Analytics (ohne Cookies). Ich habe mir aber fest vorgenommen, diesen zu entfernen. Es werden aber nicht viele Seiten diesen Schritt gehen, deswegen solltest du dir für dein Browser ein ADBlocker installieren, da die meisten auch Tracking-Scripte blocken. Ich verwende UBlock für Firefox.

Quellen

https://www.heise.de/news/Googles-Algorithmen-stufen-Ziffern-als-Copyright-Verletzung-ein-6338468.html
https://www.derstandard.de/story/2000128738941/apple-scannt-iphones-kuenftig-auf-darstellungen-von-kindesmissbrauch

Januar 26, 2022

Blog

Übersicht

wie Git funktioniert

Arbeiten mit anderen

Wie GIT Dateien speichert

die 3 Datei Status

Video Tutorial

SSH Einrichten

.ssh Config anlegen

Verbindung aufbauen

die Git Basics (init, status, add und commit)

git init

initialisieren einer lokalen Repository

Datei anlegen und git status

git add

git commit

mehrere Dateien ändern

Repository auf Github schieben mit git push

Repository erstellen

Dateien auf den Server pushen

Passwort speichern

Dateien vom Server holen mit git pull

Dateien aus der Datenbank ausschließen

Datei Änderungen rückgängig machen

Staged Markierung entfernen

Stash

Branches

Branches mergen

GitHub Pages erstellen

Limesurvey Community Downloaden

Download entpacken

Webspace einrichten

Dateien hochladen via FTP

Rechte setzen

Datenbank anlegen

Jetzt musst du nur noch die Formulare ausfüllen und du hast es geschafft.

Fertig

Video-Tutorial

lokalen Webserver installieren

WordPress installieren

10.05.2021 – Hotline Gespräch

11.05.2021 – Feedback auf die Sonderkündigung

12.05.2021 – Umzugsangebot

13.05.2021 – Feedback auf das zurücktreten des Vertrags

14.05.2021 – anderes Produkt verkaufen

17.05.2021 – Stornierung

18.05.2021 – Router verschickt

19.05.2021 – Techniker

17.08.2022 – Wofür wollen die Geld?

Schnellschuss

erstes learning

Idee hinter dieser Reihe

nächstes Experiment

aktueller Stand

SEO-Südwest

Website Boosting

YouTube Kanal von Evergreen Media

Onlinemarketing.de

SEO Inhalt von mir

Übersicht

.box.content

.box > .content

.box .content

.box + .content

Teaser Beispiel

Title

Title

Title

.box:hover > .content

.box:hover .content

.box:hover + .content

CSS Tutorial

Übersicht

let und const

let

const

Arrow Funktionen

Vorteil bei Klassen beim Zugriff auf „this“

Standardwerte bei Funktionen

Objekterweiterungen