View source for Tutorials / Workshop - Dokumentationen

== Online-Workshop-Tools ==

Web-Apps

* '''This-is-Sandbox''' - [http://www.this-is-sandbox.org www.this-is-sandbox.org]
* '''P5js-OnlineEditor''' - [https://alpha.editor.p5js.org/ editor.p5js.org]
* '''Slack''' (Workshop-Timeline-Plattform mit Messaging und Sharing Funktion) - [http://www.slack.com www.slack.com]
* '''WickEditor''' - Kostenloses Online-Tool für Animationen (Adobe Flash ähnlich) mit der Möglichkeit zur Programmierung und Interaktion - [http://wickeditor.com/# wickeditor.com]
* '''Udemy''' - Kommerzielle Tutorials - [https://www.udemy.com/ www.udemy.com]
* '''How to run a Digipool-Workshop''' — [[How to run a Digipool-Workshop|Anleitung]]

<br>

= Foto Video Digitales Kino =


== Video Postproduktion ==

* [[DaVinci Resolve]]

<br>

== Digitale Cinematographie Workshop ==

Siehe Link:
* [[Digitale Cinematographie Workshop]]

<br>

== DSLR-Setup ==

Seihe Link:
* [[5D Mark II Setup]] Anleitung von Ben Brix

<br>

== Canon C300 ==

* [[Canon C300 YouTube-Tutorials]]

<br>

== Video Installations Setup ==

* Brightsign-Video-Sync-Scripts
** [https://www.zachpoff.com/software/brightsign-video-sync-scripts/ A good guide from Zach Poff]
** [[BrightSign-Tutorial]] — What can you do with the Bright players? Video- and audio-loop, video synchronization ...
* ([[Sync-Player|DIY-Lösungen für Raspberry-Pi und Mac]])
* '''Video Formats''' — How do I convert my video to the matching format? — [[Video Formats|LINK]]

<br>

= SOUND =


== Sound-Lab-Guid ==

Informationen und eine Anleitung zur Nutzung des Sound-Labs:

[[Arbeitsplätze#Sound-Lab|Sound-Lab]]

<br>

== Ableton-Live ==

[https://www.youtube.com/playlist?list=PLbxljZNyo3szaafCBhNnIfKOhlTwCUHB1 YouTube-Playlist]

<br>

== How to Start Your Podcast ==

Eine Sammlung von Anregungen, Tipps und Tutorials rund um das Thema Podcast-Produktion: 

[[How to Start Your Podcast]]

<br>

= Webdesign =

<br>

== 1-Euro-Homepage ==

[[File:Bludit-Typerite-2-Euro-Homepage.jpg|400px|right]]

''Bludit! einfach, schnell und sicher.''

Erstelle in wenigen Minuten deine Website oder Blog mit dem open source Flat-File-CMS '''Bludit'''.

'''Video-Tutorial: "How to — Einrichtung von Webhosting + Bludit" [https://vimeo.com/427813510/0213512ed0 Vimeo-LINK]'''


'''Konzept'''
* '''Bludit CMS''' [https://www.bludit.com www.bludit.com]
* Günstige Webhosting Pakete (unter 1€ / Monat)
** Zum Beispiel [https://www.rainbow-web.com/webhosting-weblux-hosttest www.rainbow-web.com]


'''Anleitung-Webhosting'''
# Mietet ein Webhosting-Paket mit Domain und Webspace
# Melde deine Wunsch-URL an und stelle sicher, dass sie mit deinem Webspace verknüpft ist
# Finde einen Weg um via FTP-Zugang Daten auf deinen Webspace hochladen zu können
#* zB mit [https://cyberduck.io/ Cyberduck]
#* Eine Anleitung für den FTP-Zugang sollte dein Webhoster bereitstellen
#* FTP steht für File Transfer Protocol


'''Anleitung Bludit CMS'''
# Ladet das aktuelle Bludit CMS als Zip-Datei herunter - [https://www.bludit.com LINK]
# Entpackt das Zip auf eurem Computer
# Upload die Bludit-CMS-Dateien auf deinen Webspace
# Rufe deine URL auf, dort sollte nun deine Bludit-Webpage erscheinen
# Wenn du an deine URL "/admin" anhängt, gelangst du in das Backend zum Bearbeiten der Seite


'''Anleitung Bludit Themes'''
# Leid ein Theme deiner Wahl von der Bludit Homepage herunter - [https://themes.bludit.com/de/ LINK]
# Entpacke das Zip auf deinem Computer und kürze ggf. den Ordnernamen auf den Namen der Themes
# Uploade deine Ordner in den Ordner "bl_themes"
# Aktiviere im Backend unter Themes dein neues Theme


'''Anleitung Link zu Bludit entfernen'''
# Ich kann gerne beim Entfernen des Bludit-Links behilflich sein 
# Bitte spendet Bludit einen kleinen Geldbetrag, spätestens wenn ihr den Link entfernt — [https://pro.bludit.com/de/ Link]
# Öffnet eure Bludit-Seite und aktiviert an eurem Browser den Inspektor 
# Klickt mit Inspektor Werkzeug auf den Bludit-Link im Footer-Bereich und merkt euch die genau Bezeichnung des Footer
# Öffnet den Theme-Ordner, des Themes, das ihr verwendet und sucht darin nach der Footer-Bezeichung. Auf diese Weise findet ihr die Stelle, an der ihr den Bludit-Link löschen oder durch euer eigenes Copyright ersetzten könnt 

<br>

==Ältere Web und Coding Tutorials ==

* Processing Workshop [[MY TAMAGOTCHI]] 
* Web-Design [[CSS]] und weitere Informationen im [[Internet_1_-_Zeitplan]]
* [[Javascript for Artists]]

<br>

= Code & Tinker =

== P5*JS ==

Digipool Tutorials für [[p5*js]]

<br>

== Interface Design ==

Tools
* '''Figma''' — Die neue Herausforderung für den "Platzhirsch" Sketch mit einer brauchbaren Free-Version und für 100% online Kooperation — [https://www.figma.com/ www.figma.com]
* '''Adobe Xd''' - Neu und vermutlich das beste Tool - zur Zeit als BETA sogar noch kostenlos! [http://www.adobe.com/de/products/experience-design.html Adobe-Xd]
* '''Bootstrap''' - Bibliothek mit Interface Elementen (Ursprünglich von Twitter) - [http://bootstrapuikit.com/ www.bootstrapuikit.com] und den CSS Code gibt es bei [http://getbootstrap.com/ www.getbootstrap.com]
* '''Sketch''' - Das Interface Design Tool (besser als Photoshop, Illustrator, tec ...)  - [http://bohemiancoding.com/sketch/ www.bohemiancoding.com/sketch]
* '''Invision''' - Das Demo-Tool! Eine Web App mit der Du aus dem Design einen Prototypen für jedes Endgerät bauen kannst.  - [http://www.invisionapp.com/ www.invisionapp.com] 

<br>

Tipps
* Speicher dein Sketch Projekte in der Dropbox und importiere sie von dort zu Invision, dann können die Daten mit einer '''Sync-Funktion''' von Invision bequem ausgetauscht werden.


Free Tutorials
* Gestalterische Grundlagen
** Studiere die '''Designrichtlinien''' von [https://developer.apple.com/design/ Apple] und [http://www.google.com/design/ Google]
** '''Atomic Design: So funktioniert kleinteilige Web-Gestaltung und deshalb ist sie sinnvoll''' von Dieter Petereit von t3n [https://t3n.de/news/atomic-design-baukastensystem-721010/ LINK]
** '''Atomic Design''' Das komplette Buch kostenlos auf Englisch von Josh Clark und Dan Mall [https://atomicdesign.bradfrost.com/table-of-contents/ LINK]
* Figma
** '''Figma Tutorial Deutsch - Einfaches Prototyping/UI Tool''' von Indra Burkart — [https://www.youtube.com/watch?v=5jHTdapObRk LINK]
** '''Figma in 40 Minutes''' by Dev Ed — [https://www.youtube.com/watch?v=4W4LvJnNegA LINK]
** '''Figma: 5 Tipps für Anfänger und leicht Fortgeschrittene''' von Druck- und Medientechnik Berlin — [https://www.youtube.com/watch?v=v4oc0nlYmko LINK]


<br>

== Unity3D-Crashkurs ==

Unity3D ist eine professionelle und leistungsfähige Plattform zur Entwicklung von Games und anderen Anwendungen, die sich auf alle denkbaren Plattformen (Mobil, Desktop und Web ohne Plugin) Exportieren lassen. 

* Kostenlos für Projekte mit einem Umsatz unter 100.000,- € 
* Plattformübergreifend für Win und Mac - [http://www.unity3d.com www.unity3d.com]
* '''Jasper Meiners & Isabel Paehr haben ein sehr gutes Tutorial für den Einstig in Untity entwickelt: [[Media:Unitycrashkurs.pdf|Unitycrashkurs.pdf]]'''

<br>

== This is Sandbox ==

Der Sandbox Workshop lässt sich ganz einfach veranstalten.
# '''Playground''' - Auf dem Beamer folgende URL full Screen öffnen: [http://this-is-sandbox.org/playground/ www.this-is-sandbox.org/playground] 
# '''Editor''' - Die Workshop Teilnehmerinnen und Teilnehmer öffnen: [http://this-is-sandbox.org/code/ www.this-is-sandbox.org/code]
# '''SEND''' - Auf der Linken Seite kann nun zum Beispiel eine Cartoon Figur programmiert werden, die mit dem SEND Button auf den Playground geschickt wird.

<br>

'''Tipp zum Timing:''' <br>
Die draw funktion hat eine Framerate von 25 frames pro Sekunde.

Zum Timing (zur Verlangsamung) baut man sich einfach selbst System Ticks: 

<pre>
var myTicks = 0;

function draw() {
        myTicks++;
}
</pre>

<br>

Volles Beispiel zur Verwendung des Timers:
<pre>
var myTicks = 0;
var myTimer = 0;
var mySpeed = 10;

var r = 0;

function draw() {
    myTicks++;
    
    
    if(myTicks > myTimer + mySpeed){
        myTimer = myTicks;
	    r = random(100);
    }
    
    ellipse(100, 100, 150, r );
}
</pre>

<br>

'''Tipp: Bewegung im Playground''' <br>
Um Bewegung in den Play zu bringen, benötigt man den THRUST Befehl im Idealfall mit einem Random Winkel. 

<pre>
function draw() {
    fill(0);
    ellipse(100, 100, 150, 150);
    thrust(random(TWO_PI));
}
</pre>

<br>

== Physical Computing-Tutorials ==

Physical Computing bezeichnet die das Arbeiten mit Elektronik und Programmierung meist auf den Plattformen [https://www.arduino.cc/ Arduino], [https://www.raspberrypi.org/ Raspberry Pi] und [https://processing.org/ Processing] 

Arduino 
* Anleitung PDF (Englisch, 93 Seiten, viele Bilder) Intro to Arduino by Sparkfun [http://www.robosail.org/uploads/2/5/5/8/25586003/intro_to_arduino_-_v22_1.pdf LINK]
* Digipool >>>>> [[DIY-Wiki#DIY-Tutorials|DIY-Tutorials]]

<br>

== Raspberry Pi ==
 

=== Hostname ändern ===


Zuerst rufen wir den aktuellen Hostname auf.

 hostname

Dann setzen wir einen neuen Hostname.

 sudo hostname -b {NEUER_NAME}

Danach kurz prüfen:

 hostname

Danach muss der Hostname noch in zwei Datein eingetragen werden, die man mit dem Nano Editor öffnet.

 sudo nano /etc/hosts

Nano Editor Speichern: Strg + O, Return
Nano Editor Schließen: Strg + X

Jetzt sollte der neue Hostname gesetzt sein.

Den Raspberry-Pi neu starten

 sudo reboot

Anschließend müssen wir noch den SSH-Schlüssel erneuern. Ganz wichtig!

Zuerst löschen wir die alten Schlüssel.

 sudo rm /etc/ssh/ssh_host_*

Anschließend führen wir eine Rekonfiguration des SSH-Servers durch:

 sudo dpkg-reconfigure openssh-server

Die Erstellung der Schlüssel-Dateien erfolgt automatisch.  Jetzt noch den SSH-Server neu starteten — fertig!

 sudo service ssh restart

Am Mac muss nun noch der alte SSH-Key gelöscht werden, damit man sich wieder via SSH Verbindung auf dem Raspberry-Pi einloggen kann. 

 ssh-keygen -R {RPi-IP-Address}

Bei der nächsten Verbindung wird dann wieder nach dem Passwort gefragt

<br>

== Gibber ==

* Gibber Home Page: http://gibber.mat.ucsb.edu/
* Gibber Keys: [[Media:Gibber-Keys.rtf]]

<br>

= System Admin Tutorials =
  

== Mac USB Medium Formatieren ==

Wenn man einen USB-Stick, eine externe Festplatte oder Speicherkarte am Mac formatieren möchte ist folgendes zu beachten:
* Speicherkarten für Kameras oder Audiorecorder immer im jeweiligen Gerät via Menü formatieren
* '''MS-DOS (FAT)''' - Das alte FAT16 und FAT32 kann nur Dateien unter 4GB speichern - Win Mac kompatibel
* '''ExFat''' ist neu und wird nicht von jedem (älterem) Gerät unterstützt  - Win Mac kompatibel
* '''Mac OS X Extended''' kann nur von Appel Geräten gelesen werden

Anleitung zum Formatieren am Mac

# Das Laufwerk anschließen 
# Das '''Festplatten Dienstprogramm''' (Disk Utillity) öffnen
# Auf der linken Seite das Laufwerk auswählen, das formatiert werden soll - Achtung! Nicht das falsche löschen! 
# Oben auf auf '''LÖSCHEN''' (ERASE) klicken
# Einen Namen eingeben und das gewünschte Format wählen (siehe oben)
# Für Mac OS X Extended (Journaled) '''Guid Partition Map''' und für MS-DOS '''Master Boot Record''' wählen
# Auf LÖSCHEN (ERASE) klicken - warten - fertig!

<br>

== Mac Neu Aufsetzten ==
 
# USB-Stick - Im Digipool gibt es USB-Sticks mit älteren und mit dem aktuellen Mac-OS zur Ausleihe.
# Falls gewünscht, das alte System via Time-Machine Backup sichern.
# Den Rechner ausschalten
# Den USB Stick einstecken, die ALT-Taste gedrückt halten und den Rechner anschalten.
# Es sollte ein Auswahlmenü erscheinen, dort den USB-Stick auswählen und mit Doppelklick von USB booten. 
# Mit dem Festplatten- Dienstprogramm die Systemplatte formatieren (löschen)
# Oben im Menü unter Werkzeugen das Termin öffnen und dort "date 1111111111" eingeben.
# Das Termin schließen und das Mac OS ganz normal installieren

<br>

== Mac OS High Sierra ohne APFS installieren ==
<br>
'''''Bevor man dieses Tutorial befolgt, sollte man unbedingt ein Backup seiner Daten machen, da alle Daten auf der Festplatte in diesem Prozess verloren gehen!'''''<br><br>

'''High Sierra ohne APFS!'''

Zunächst braucht man einen USB-Stick/externe Festplatte mit dem Installations-Paket für High Sierra, worüber man booten kann. Beim Starten des iMacs "alt" gedrückt halten, um wählen zu können, wie man bootet. Das externe Speichermedium auswählen. Danach geht man zu “Disk Utility”, wählt die interne Festplatte aus (Macintosh HD) und geht auf "Partition". Dort das Format "Mac OS Extended (Journaled)” auswählen und ”Apply” klicken. Wenn man damit fertig ist, verlässt man “Disk Utility" wieder und geht zu “Terminal”.<br>
Hier dann eintippen:

<pre>
ls
cd..
</pre>

Solange, bis man den Ordner "Volumes" findet. Dann:

<pre>
cd Volumes
ls
cd Image Volume
ls
</pre>

Dort sollte man ”Install macOS High Sierra.app" finden. Danach eingeben:

<pre>
Install\ macOS\ High\ Sierra.app/Contents/Resources/startosinstall --volume/Volumes/Macintosh\ HD --converttoapfs NO --agreetolicense
</pre>
Und Enter drücken... fertig!

<br>