Difference between revisions of "Tutorials / Workshop - Dokumentationen"
(→Mac Neu Aufsetzten) |
(→P5*JS) |
||
(45 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | == Workshop-Tools == | + | == Online-Workshop-Tools == |
Web-Apps | Web-Apps | ||
Line 6: | Line 6: | ||
* P5js-OnlineEditor - [https://alpha.editor.p5js.org/ editor.p5js.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] | * Slack (Workshop-Timeline-Plattform mit Messaging und Sharing Funktion) - [http://www.slack.com www.slack.com] | ||
+ | * Kommerzielle Tutorials - [https://www.udemy.com/ www.udemy.com] | ||
+ | <br> | ||
<br> | <br> | ||
Line 43: | Line 45: | ||
Tools | Tools | ||
− | * '''Bootstrap''' - Bibliothek mit Interface Elementen (Ursprünglich von Twitter) - | + | * '''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] | * '''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] | + | * '''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> | <br> | ||
Line 51: | Line 54: | ||
Tipps | 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. | * 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. | ||
− | |||
* Studiere die '''Designrichtlinien''' von [https://developer.apple.com/design/ Apple] und [http://www.google.com/design/ Google] und ... | * Studiere die '''Designrichtlinien''' von [https://developer.apple.com/design/ Apple] und [http://www.google.com/design/ Google] und ... | ||
Line 66: | Line 68: | ||
<br> | <br> | ||
− | == | + | == This is Sandbox == |
− | Physical Computing | + | 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> | ||
+ | |||
+ | == P5*JS == | ||
+ | |||
+ | * Online-Editor: [https://alpha.editor.p5js.org/ https://alpha.editor.p5js.org/] | ||
+ | * P5*JS Setup mit dem Texteditor: "Sublime Text" auf der lokalen Festplatte mit Safarie - [[P5*JS Sublime Setup]] | ||
+ | * [[P5JS look like an mobil app|Make your P5JS sketches look like an app on mobile devices]] | ||
+ | * Einfache Interfaces mit der [[p5.gui Librarie]] | ||
+ | * [[FaceTracking with clmtrackr and P5JS]] | ||
+ | * Einfaches Button Interfaces mit der einer eigenen Funktion [[p5Button]] | ||
+ | * Einfaches Questionnaire Interfaces mit der einer eigenen Funktion [[qFunction]] | ||
+ | * Kalender Datum mit Wochentagen setzen - [[p5js-calendar-weekday]] | ||
+ | * add a App-Icon to a p5js sketch - [[p5js-App-Icon]] | ||
+ | |||
+ | <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] | ||
+ | |||
+ | <br> | ||
Seihe Link: | Seihe Link: | ||
* [[DIY-Wiki#DIY-Tutorials|DIY-Tutorials]] | * [[DIY-Wiki#DIY-Tutorials|DIY-Tutorials]] | ||
+ | |||
+ | <br> | ||
+ | |||
+ | |||
+ | == Gibber == | ||
+ | |||
+ | * Gibber Home Page: http://gibber.mat.ucsb.edu/ | ||
+ | * Gibber Keys: [[Media:Gibber-Keys.rtf]] | ||
<br> | <br> | ||
Line 82: | Line 171: | ||
<br> | <br> | ||
− | |||
= System Admin Tutorials = | = 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 == | == Mac Neu Aufsetzten == | ||
Line 97: | Line 205: | ||
# Oben im Menü unter Werkzeugen das Termin öffnen und dort "date 1111111111" eingeben. | # Oben im Menü unter Werkzeugen das Termin öffnen und dort "date 1111111111" eingeben. | ||
# Das Termin schließen und das Mac OS ganz normal installieren | # 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> | <br> |
Revision as of 20:00, 7 June 2018
Contents
Online-Workshop-Tools
Web-Apps
- Sandbox - www.this-is-sandbox.org
- P5js-OnlineEditor - editor.p5js.org
- Slack (Workshop-Timeline-Plattform mit Messaging und Sharing Funktion) - www.slack.com
- Kommerzielle Tutorials - www.udemy.com
Foto Video Digitales Kino
Digitale Cinematographie Workshop
Siehe Link:
DSLR-Setup
Seihe Link:
- 5D Mark II Setup Anleitung von Ben Brix
Videoinstallationen Setup
Video-Player
Sync-Player
- MSA QT Player - Verteilt ein Video auf mehrere Videoausgänge (für Mac und free) - LINK
- ArraySync (Quick and easy App for Mac and Win for 30,- $) - LINK
Code & Tinker
Interface Design
Tools
- Adobe Xd - Neu und vermutlich das beste Tool - zur Zeit als BETA sogar noch kostenlos! Adobe-Xd
- Bootstrap - Bibliothek mit Interface Elementen (Ursprünglich von Twitter) - www.bootstrapuikit.com und den CSS Code gibt es bei www.getbootstrap.com
- Sketch - Das Interface Design Tool (besser als Photoshop, Illustrator, tec ...) - 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. - www.invisionapp.com
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.
- Studiere die Designrichtlinien von Apple und Google und ...
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 - www.unity3d.com
- Jasper Meiners & Isabel Paehr haben ein sehr gutes Tutorial für den Einstig in Untity entwickelt: Unitycrashkurs.pdf
This is Sandbox
Der Sandbox Workshop lässt sich ganz einfach veranstalten.
- Playground - Auf dem Beamer folgende URL full Screen öffnen: www.this-is-sandbox.org/playground
- Editor - Die Workshop Teilnehmerinnen und Teilnehmer öffnen: 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.
Tipp zum Timing:
Die draw funktion hat eine Framerate von 25 frames pro Sekunde.
Zum Timing (zur Verlangsamung) baut man sich einfach selbst System Ticks:
var myTicks = 0; function draw() { myTicks++; }
Volles Beispiel zur Verwendung des Timers:
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 ); }
Tipp: Bewegung im Playground
Um Bewegung in den Play zu bringen, benötigt man den THRUST Befehl im Idealfall mit einem Random Winkel.
function draw() { fill(0); ellipse(100, 100, 150, 150); thrust(random(TWO_PI)); }
P5*JS
- Online-Editor: https://alpha.editor.p5js.org/
- P5*JS Setup mit dem Texteditor: "Sublime Text" auf der lokalen Festplatte mit Safarie - P5*JS Sublime Setup
- Make your P5JS sketches look like an app on mobile devices
- Einfache Interfaces mit der p5.gui Librarie
- FaceTracking with clmtrackr and P5JS
- Einfaches Button Interfaces mit der einer eigenen Funktion p5Button
- Einfaches Questionnaire Interfaces mit der einer eigenen Funktion qFunction
- Kalender Datum mit Wochentagen setzen - p5js-calendar-weekday
- add a App-Icon to a p5js sketch - p5js-App-Icon
Physical Computing-Tutorials
Physical Computing bezeichnet die das Arbeiten mit Elektronik und Programmierung meist auf den Plattformen Arduino, Raspberry Pi und Processing
Arduino
- Anleitung PDF (Englisch, 93 Seiten, viele Bilder) Intro to Arduino by Sparkfun LINK
Seihe Link:
Gibber
- Gibber Home Page: http://gibber.mat.ucsb.edu/
- Gibber Keys: Media:Gibber-Keys.rtf
Links zu weiteren Tutorials
- German Processing Workshop MY TAMAGOTCHI
- Web-Design CSS und weitere Informationen im Internet_1_-_Zeitplan
- Javascript for Artists
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!
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
Mac OS High Sierra ohne APFS installieren
Bevor man dieses Tutorial befolgt, sollte man unbedingt ein Backup seiner Daten machen, da alle Daten auf der Festplatte in diesem Prozess verloren gehen!
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”.
Hier dann eintippen:
ls cd..
Solange, bis man den Ordner "Volumes" findet. Dann:
cd Volumes ls cd Image Volume ls
Dort sollte man ”Install macOS High Sierra.app" finden. Danach eingeben:
Install\ macOS\ High\ Sierra.app/Contents/Resources/startosinstall --volume/Volumes/Macintosh\ HD --converttoapfs NO --agreetolicense
Und Enter drücken... fertig!