FK:Kunst-Technik-Labor: Difference between revisions

From Medien Wiki
Line 24: Line 24:
* ''Einfach'': [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/] spielt mit dem Unterschied von Code und angezeigter Website. Kannst du erklären, was der Zeichensalat auf der angezeigten Website ist und warum der entstanden ist? (Tip: Strg+U drücken)
* ''Einfach'': [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/] spielt mit dem Unterschied von Code und angezeigter Website. Kannst du erklären, was der Zeichensalat auf der angezeigten Website ist und warum der entstanden ist? (Tip: Strg+U drücken)
*''Mittel'': Die Yes-Man bauen Seiten bekannter Organisationen nach. Zum Einstieg könnten wir mal eine Website verändern. Gehe auf die Uni Website und speichere sie ab (Datei/Speichern, "komplette Website" auswählen). Öffne die HTML-Datei dann mit einem Editor und mache Änderungen: Was bedeutet das »Bauhaus« im Uninamen für dich? Wie wäre es mit einer zusätzlichen Fakultät? Neuen Werbebanner mit Stipendien für alle?
*''Mittel'': Die Yes-Man bauen Seiten bekannter Organisationen nach. Zum Einstieg könnten wir mal eine Website verändern. Gehe auf die Uni Website und speichere sie ab (Datei/Speichern, "komplette Website" auswählen). Öffne die HTML-Datei dann mit einem Editor und mache Änderungen: Was bedeutet das »Bauhaus« im Uninamen für dich? Wie wäre es mit einer zusätzlichen Fakultät? Neuen Werbebanner mit Stipendien für alle?
*''Mittel'': [http://webuser.uni-weimar.de/~fudo5114/bildwechsel/Bilderwechsel.html Hier] findest du ein Bild, das bei jedem Laden der Website (dazu F5 drücken) etwas anders ist. Wie funktioniert das? (Hinweis: Dazu vielleicht Seite Speichern mit Strg+S) Kannst du selber etwas ähnliche bauen? (Das Beispiel ist aus einem komplexeren Projekt, bei dem noch weit mehr Variation möglich war)
*''Mittel'': [http://webuser.uni-weimar.de/~fudo5114/bildwechsel/Bilderwechsel.html Hier] findest du ein Bild, das bei jedem Laden der Website (dazu F5 drücken) etwas anders ist. Wie funktioniert das? (Hinweis: Dazu vielleicht Seite Speichern mit Strg+S) Kannst du selber etwas ähnliches bauen? (Das Beispiel ist aus einem komplexeren Projekt, bei dem noch weit mehr Variation möglich war)
* ''Schwierig'' Die [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization Barbie-Liberation-Front] hat Sprachchips in Spielzeugen vertauscht. Kannst du ein Spielzeug oder ein anders [https://en.wikipedia.org/wiki/Circuit_bending Gerät, das Geräusche macht] kreativ nutzen, indem du den Knopf, der das Geräusch auslöst, durch etwas anderes ersetzt? Die Knöpfe überbrücken meist nur eine Lücke im [https://de.wikipedia.org/wiki/Stromkreis Stromkreis]. Du könntest z.B. beim Öffnen einer Tür den Stromkreis schließen um den Ton auszulösen.  
* ''Schwierig'' Die [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization Barbie-Liberation-Front] hat Sprachchips in Spielzeugen vertauscht. Kannst du ein Spielzeug oder ein anders [https://en.wikipedia.org/wiki/Circuit_bending Gerät, das Geräusche macht] kreativ nutzen, indem du den Knopf, der das Geräusch auslöst, durch etwas anderes ersetzt? Die Knöpfe überbrücken meist nur eine Lücke im [https://de.wikipedia.org/wiki/Stromkreis Stromkreis]. Du könntest z.B. beim Öffnen einer Tür den Stromkreis schließen, um den Ton auszulösen.  
* ''Schwierig'': [http://www.teleportacia.org/war/war.html "My Boyfriend came back from War"] nutzt Frames – eine veraltete Technik. Kannst du die Mechanismen ohne Frames implementieren?
* ''Schwierig'': [http://www.teleportacia.org/war/war.html "My Boyfriend came back from War"] nutzt sogenannte »Frames« – eine veraltete Technik. Kannst du die Mechanismen, die das Kunstwerk nutzt ohne Frames implementieren?


===Fragen Fragen===
===Fragen Fragen===

Revision as of 10:00, 17 December 2013

Das Kunst-Technik-Labor wird als Ergänzung zum Projekt„Jugend Forscht“ als eine Einführung zu Internet, Web und anderen neueren Medien angeboten.

Informationsaustausch

…Im Wiki

Ein Wiki ist eine Website, die ihr einfach ändern könnt. Sollte ich z.B. einen Rechtschreibfehler machen, könnt ihr den einfach korregieren.

Wie ihr euch in diesem Wiki Anmelden und Editieren, Formatieren und Unterseiten anlegen könnt, lässt sich in den 3-5 minütigen Videos anschauen.

Software

  • zum Lernen: Thimble Live Editor für HTML: Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
  • Zum Lernen: Websites untersuchen und ändern Einfach die "X-Ray-Googles" anschalten, Elemente anklicken und ändern. Auf der Website ist eine kleine Anleitung, wie man ein Bild in der Website "austauscht"
    (ist eine Website bzw. ein kleines Programm darauf und muss nicht installiert werden)
  • Websites anzeigen mit Firefox Den "Browser" Firefox gibt es für praktisch alle Systeme – so können wir alle das gleiche Programm benutzen und uns einfacher gegenseitig helfen.
    Mit der f12-Taste könnt ihr einen Entwicklermodus aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
  • Website veröffentlichen: Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm (secure File Transfer Protocol).
    Cyberduck ist einfach zu nutzen und für Mac und Windows verfügbar. Wer Linux benutzt kann den FileZilla-Client nutzen.
  • Code schreiben mit Adobe Brackets, ein "Editor", also ein Schreibprogramm für Code. Frei und einfach zu bedienen, mit Vorschaufunktion (Strg+Alt+P) Für Mac, Windows und Linux.
    Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt notepad++ (Windows), gEdit (Linux)

Lernen

MozillaGoggles mini.png
  • Websites untersuchen und ändern den XRay-Goggles (Anleitung auf Deutsch)
  • Websites erstellen: schrittweise und interaktiv HTML und CSS bei codecademy.
  • Programmieren lernen (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt): Javascript Intro (…und mehr).
  • Der RasberryPi ist ein Minicomputer zum Lernen und Experimentieren – für 30€. Coder ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

Aufgaben zum Ausprobieren

  • Einfach: http://wwwwwwwww.jodi.org/ spielt mit dem Unterschied von Code und angezeigter Website. Kannst du erklären, was der Zeichensalat auf der angezeigten Website ist und warum der entstanden ist? (Tip: Strg+U drücken)
  • Mittel: Die Yes-Man bauen Seiten bekannter Organisationen nach. Zum Einstieg könnten wir mal eine Website verändern. Gehe auf die Uni Website und speichere sie ab (Datei/Speichern, "komplette Website" auswählen). Öffne die HTML-Datei dann mit einem Editor und mache Änderungen: Was bedeutet das »Bauhaus« im Uninamen für dich? Wie wäre es mit einer zusätzlichen Fakultät? Neuen Werbebanner mit Stipendien für alle?
  • Mittel: Hier findest du ein Bild, das bei jedem Laden der Website (dazu F5 drücken) etwas anders ist. Wie funktioniert das? (Hinweis: Dazu vielleicht Seite Speichern mit Strg+S) Kannst du selber etwas ähnliches bauen? (Das Beispiel ist aus einem komplexeren Projekt, bei dem noch weit mehr Variation möglich war)
  • Schwierig Die Barbie-Liberation-Front hat Sprachchips in Spielzeugen vertauscht. Kannst du ein Spielzeug oder ein anders Gerät, das Geräusche macht kreativ nutzen, indem du den Knopf, der das Geräusch auslöst, durch etwas anderes ersetzt? Die Knöpfe überbrücken meist nur eine Lücke im Stromkreis. Du könntest z.B. beim Öffnen einer Tür den Stromkreis schließen, um den Ton auszulösen.
  • Schwierig: "My Boyfriend came back from War" nutzt sogenannte »Frames« – eine veraltete Technik. Kannst du die Mechanismen, die das Kunstwerk nutzt ohne Frames implementieren?

Fragen Fragen

Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten. Um Hilfe zu bekommen ist es gut, folgendes der Frage mitzugeben:

  • Was ist das Ergebnis, das ihr erreichen wollt?
  • Was habt ihr versucht, um das Problem zu lösen?
  • Was ist statt des erwünschten Ergebnisses passiert?
  • Gebt Beispiele: z.B. den Code den ihr geschreiben habt, eine Skizze vom "Wunschergebnis" oder die Webaddresse eines Beispiels, bei dem es funktioniert und/oder Skizze und Adresse, auf der man das Problem sehen kann.

Zeug a.k.a. Readymades

Projektbeispiele

Termine

  • Do. 12.12., 10h: KTL Fachkurs Introduction Teil I: „Have you tried turning it off and on again?“ - Max F. Albrecht (+ Film*: Kraftwerk) (für Projekt- & Fachkursteilnehmer)
  • Do. 19.12., 10h: KTL Fachkurs Introduction Teil II: „Have you tried turning it off and on again?“ - Max F. Albrecht (+ Film*: RiP) (für Projekt- & Fachkursteilnehmer)
  • Ab 20.12. Wöchentliches Treffen an folgende Freitage von 14-17h Fachkurs Kunst-Technik-Labor im Projektraum 005 im VdV Eckgebäude (KTL Pool) (für Fachkursteilnehmer)


Material

Links