Medien Wiki - User contributions [en]

FK:Kunst-Technik-Labor

2014-01-31T22:21:52Z

Eins78: /* Konvertieren */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Web-Bausteine==

All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01)

* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' HTML-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen).

* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für HTML-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch.

* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

==Audio/Video einbinden==

===Einfach===

Bei einem Dienst hochladen, dort den HTML-Code ('Embed') kopieren und in die eigene Seite einfügen. Am besten immer auch einen normalen, direkten Link zur entsprechenden Seite des Videos unter das eingebettete Video tun, auf manchen Geräten geht das Einbetten nicht zuverlässig oder es gibt eine extra App für den Dienst, ….

Beispieldienste Video: [http://youtube.com youtube], [http://vimeo.com vimeo]

Beispieldienste Audio: [http://soundcloud.com soundcloud], [http://mixcloud.com mixcloud]

'''Vorteil''': Zusätzliche Zuschauer durch eingebaute soziale Netzwerke

'''Nachteil''': Alle deine Besucher laden nicht nur von dir Daten, sondern auch von dem Videodienst, meist also aus den USA.

===DIY===

====Konvertieren====

Es gibt leider nicht 1 Format, das von allen Browsern unterstützt wird. Zur Zeit ist die beste Kombination jeweils:

Audio: '''OGG''', '''''AAC''' (optional)'', '''MP3'''

Video: '''MP4''' und '''WebM'''

* [http://www.mirovideoconverter.com Miro Video Converter (MiroVC) herunterladen]
* MiroVC installieren. ''Windows-User aufgepasst'': schön die Häkchen wegklicken, die eine "tolle" Browser-Toolbar installieren wollen

[[File:miro-video-converter_1-settings.png|500px]]
[[File:miro-video-converter_2-mp4.png|500px]]
[[File:miro-video-converter_3-clear.png|500px]]
[[File:miro-video-converter_4-webm.png|500px]]

====Einbetten (HTML)====

[https://developer.mozilla.org/docs/Web/HTML/Element/audio <'''audio'''> tag doku]

<source lang="html5">
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.aac" type="audio/aac"> 
<source src="audio.mp3" type="audio/mpeg"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</audio></source>

[https://developer.mozilla.org/docs/Web/HTML/Element/video <'''video'''> tag doku]

<source lang="html5">
<video controls>
<source src="video.ogg" type="video/ogg"> 
<source src="video.mov" type="video/quicktime"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</video>
</source>

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

File:Miro-video-converter 3-clear.png

2014-01-31T22:20:06Z

Eins78: uploaded a new version of "File:Miro-video-converter 3-clear.png": fix cropping error

== Summary ==

== Copyright status: ==

== Licensing ==
{{PD-ineligible}}
== Source: ==
own screenshot

FK:Kunst-Technik-Labor

2014-01-31T22:17:37Z

Eins78: /* Konvertieren */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Web-Bausteine==

All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01)

* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' HTML-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen).

* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für HTML-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch.

* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

==Audio/Video einbinden==

===Einfach===

Bei einem Dienst hochladen, dort den HTML-Code ('Embed') kopieren und in die eigene Seite einfügen. Am besten immer auch einen normalen, direkten Link zur entsprechenden Seite des Videos unter das eingebettete Video tun, auf manchen Geräten geht das Einbetten nicht zuverlässig oder es gibt eine extra App für den Dienst, ….

Beispieldienste Video: [http://youtube.com youtube], [http://vimeo.com vimeo]

Beispieldienste Audio: [http://soundcloud.com soundcloud], [http://mixcloud.com mixcloud]

'''Vorteil''': Zusätzliche Zuschauer durch eingebaute soziale Netzwerke

'''Nachteil''': Alle deine Besucher laden nicht nur von dir Daten, sondern auch von dem Videodienst, meist also aus den USA.

===DIY===

====Konvertieren====

Es gibt leider nicht 1 Format, das von allen Browsern unterstützt wird. Zur Zeit ist die beste Kombination jeweils:

Audio: '''OGG''', '''''AAC''' (optional)'', '''MP3'''

Video: '''MP4''' und '''WebM'''

* [http://www.mirovideoconverter.com Miro Video Converter (MiroVC) herunterladen]
* MiroVC installieren. ''Windows-User aufgepasst'': schön die Häkchen wegblicken, die eine "tolle" Browser-Toolbar installieren wollen

[[File:miro-video-converter_1-settings.png|500px]]
[[File:miro-video-converter_2-mp4.png|500px]]
[[File:miro-video-converter_3-clear.png|500px]]
[[File:miro-video-converter_4-webm.png|500px]]

====Einbetten (HTML)====

[https://developer.mozilla.org/docs/Web/HTML/Element/audio <'''audio'''> tag doku]

<source lang="html5">
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.aac" type="audio/aac"> 
<source src="audio.mp3" type="audio/mpeg"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</audio></source>

[https://developer.mozilla.org/docs/Web/HTML/Element/video <'''video'''> tag doku]

<source lang="html5">
<video controls>
<source src="video.ogg" type="video/ogg"> 
<source src="video.mov" type="video/quicktime"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</video>
</source>

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

File:Miro-video-converter 4-webm.png

2014-01-31T22:15:34Z

Eins78:

== Summary ==

== Copyright status: ==

== Licensing ==
{{PD-ineligible}}
== Source: ==
own screenshot

File:Miro-video-converter 3-clear.png

2014-01-31T22:15:08Z

Eins78:

== Summary ==

== Copyright status: ==

== Licensing ==
{{PD-ineligible}}
== Source: ==
own screenshot

File:Miro-video-converter 2-mp4.png

2014-01-31T22:14:38Z

Eins78:

== Summary ==

== Copyright status: ==

== Licensing ==
{{PD-ineligible}}
== Source: ==
own screenshot

File:Miro-video-converter 1-settings.png

2014-01-31T22:13:51Z

Eins78:

== Summary ==

== Copyright status: ==

== Licensing ==
{{PD-ineligible}}
== Source: ==
own screenshot

FK:Kunst-Technik-Labor

2014-01-31T22:12:42Z

Eins78: /* Einfach */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Web-Bausteine==

All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01)

* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' HTML-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen).

* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für HTML-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch.

* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

==Audio/Video einbinden==

===Einfach===

Bei einem Dienst hochladen, dort den HTML-Code ('Embed') kopieren und in die eigene Seite einfügen. Am besten immer auch einen normalen, direkten Link zur entsprechenden Seite des Videos unter das eingebettete Video tun, auf manchen Geräten geht das Einbetten nicht zuverlässig oder es gibt eine extra App für den Dienst, ….

Beispieldienste Video: [http://youtube.com youtube], [http://vimeo.com vimeo]

Beispieldienste Audio: [http://soundcloud.com soundcloud], [http://mixcloud.com mixcloud]

'''Vorteil''': Zusätzliche Zuschauer durch eingebaute soziale Netzwerke

'''Nachteil''': Alle deine Besucher laden nicht nur von dir Daten, sondern auch von dem Videodienst, meist also aus den USA.

===DIY===

====Konvertieren====

Es gibt leider nicht 1 Format, das von allen Browsern unterstützt wird. Zur Zeit ist die beste Kombination jeweils:

Audio: '''OGG''', '''''AAC''' (optional)'', '''MP3'''

Video: '''MP4''' und '''WebM'''

* [http://www.mirovideoconverter.com Miro Video Converter (MiroVC) herunterladen]
* MiroVC installieren. ''Windows-User aufgepasst'': schön die Häkchen wegblicken, die eine "tolle" Browser-Toolbar installieren wollen
* [[File:miro-video-converter_1-settings.png]]
* [[File:miro-video-converter_2-mp4.png]]
* [[File:miro-video-converter_3-clear.png]]
* [[File:miro-video-converter_4-webm.png]]

====Einbetten (HTML)====

[https://developer.mozilla.org/docs/Web/HTML/Element/audio <'''audio'''> tag doku]

<source lang="html5">
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.aac" type="audio/aac"> 
<source src="audio.mp3" type="audio/mpeg"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</audio></source>

[https://developer.mozilla.org/docs/Web/HTML/Element/video <'''video'''> tag doku]

<source lang="html5">
<video controls>
<source src="video.ogg" type="video/ogg"> 
<source src="video.mov" type="video/quicktime"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</video>
</source>

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T22:10:37Z

Eins78: /* Audio/Video einbinden */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Web-Bausteine==

All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01)

* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' HTML-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen).

* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für HTML-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch.

* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

==Audio/Video einbinden==

===Einfach===

Auf [http://youtube.com youtube] oder [http://vimeo.com vimeo] hochladen, dort den HTML-Code ('Embed') kopieren und in die eigene Seite einfügen. Am besten immer auch einen normalen, direkten Link zur entsprechenden Seite des Videos unter das eingebettete Video tun, auf manchen Geräten geht das Einbetten nicht zuverlässig oder es gibt eine extra App für den Videodienst, ….

'''Vorteil''': Zusätzliche Zuschauer durch eingebaute soziale Netzwerke

'''Nachteil''': Alle deine Besucher laden nicht nur von dir Daten, sondern auch von dem Videodienst, meist also aus den USA.

===DIY===

====Konvertieren====

Es gibt leider nicht 1 Format, das von allen Browsern unterstützt wird. Zur Zeit ist die beste Kombination jeweils:

Audio: '''OGG''', '''''AAC''' (optional)'', '''MP3'''

Video: '''MP4''' und '''WebM'''

* [http://www.mirovideoconverter.com Miro Video Converter (MiroVC) herunterladen]
* MiroVC installieren. ''Windows-User aufgepasst'': schön die Häkchen wegblicken, die eine "tolle" Browser-Toolbar installieren wollen
* [[File:miro-video-converter_1-settings.png]]
* [[File:miro-video-converter_2-mp4.png]]
* [[File:miro-video-converter_3-clear.png]]
* [[File:miro-video-converter_4-webm.png]]

====Einbetten (HTML)====

[https://developer.mozilla.org/docs/Web/HTML/Element/audio <'''audio'''> tag doku]

<source lang="html5">
<audio controls="controls">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.aac" type="audio/aac"> 
<source src="audio.mp3" type="audio/mpeg"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</audio></source>

[https://developer.mozilla.org/docs/Web/HTML/Element/video <'''video'''> tag doku]

<source lang="html5">
<video controls>
<source src="video.ogg" type="video/ogg"> 
<source src="video.mov" type="video/quicktime"> 

I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>?
</video>
</source>

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T21:01:57Z

Eins78: /* Web-Bausteine */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Web-Bausteine==

All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01)

* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' HTML-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen).

* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für HTML-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch.

* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T20:39:23Z

Eins78: /* Freies Material */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]]

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T17:27:57Z

Eins78: Undo revision 63743 by Max (talk)

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T14:29:06Z

Eins78: /* Hosting */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [[wikipedia:de:Versionsverwaltung|Versionskontrolle]] ([[Git]]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T14:28:33Z

Eins78: /* Hosting */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

Advanced und billigstmöglich:

* Domain extra kaufen
* [http://pages.github.com kostenlos bei github hosten]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [[wikipedia:de:Versionsverwaltung|Versionskontrolle]] ([[Git]]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T14:27:23Z

Eins78: /* Hosting */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

==Hosting==

Zwei Dinge sind zu tun:

a) Domain kaufen
b) Webspace kaufen

Der Einfachheit halber am besten beides bei einem Anbieter.

Empfehlungen:
* [https://www.hosteurope.de/ HostEurope]
* [https://www.gandi.net/ gandi.net]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [[wikipedia:de:Versionsverwaltung|Versionskontrolle]] ([[Git]]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-31T13:58:05Z

Eins78: /* Freies Material */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]. Hintergrund im Film [http://ripremix.com RIPit: A Remix manifesto]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [[wikipedia:de:Versionsverwaltung|Versionskontrolle]] ([[Git]]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

Sources/Images

2014-01-31T13:50:57Z

Eins78: /* Images under creative commons and roalty free licenses */

You need an image? Then it's the best option to take out your camera ant take one yourself. Then you are the author and you should choose a license you want to release the image under. If you don't choose one it will be © Copyrighted by you until 70 years after your death. Nobody will be able to use it without your consent or without a license.

So you need an image of something else where you can't get so easily? Then you can try different sources. There are commercial stock image providers where you must pay for using the image. Using the image without license may result in legal action against you. On the other hand there might be images which are licensed for you to use for free under some conditions. Make sure you read, understand and obey those conditions. The conditions may be very differently, for instance that you pay roayties, that you are giving credits to the source or mention the licence it is under. Here are a few links:

== Image search engines ==
* http://images.google.com
* http://www.picsearch.com
* http://tineye.com reverse image search

== Commercial Stock Images ==
* http://www.corbis.com
* http://www.gettyimages.com
* http://www.shutterstock.com

== Images under creative commons and roalty free licenses ==
* http://commons.wikimedia.org
* [http://unsplash.com/ public domain fotos!]
* [http://subtlepatterns.com freie Hintergrund-Muster]
* http://www.pixelio.de
* http://www.flickr.com/search/?l=commderiv search flickr for CC images

Sources/Images

2014-01-31T13:50:19Z

Eins78: /* Images under creative commons and roalty free licenses */

You need an image? Then it's the best option to take out your camera ant take one yourself. Then you are the author and you should choose a license you want to release the image under. If you don't choose one it will be © Copyrighted by you until 70 years after your death. Nobody will be able to use it without your consent or without a license.

So you need an image of something else where you can't get so easily? Then you can try different sources. There are commercial stock image providers where you must pay for using the image. Using the image without license may result in legal action against you. On the other hand there might be images which are licensed for you to use for free under some conditions. Make sure you read, understand and obey those conditions. The conditions may be very differently, for instance that you pay roayties, that you are giving credits to the source or mention the licence it is under. Here are a few links:

== Image search engines ==
* http://images.google.com
* http://www.picsearch.com
* http://tineye.com reverse image search

== Commercial Stock Images ==
* http://www.corbis.com
* http://www.gettyimages.com
* http://www.shutterstock.com

== Images under creative commons and roalty free licenses ==
* http://commons.wikimedia.org
* [http://unsplash.com/ public domain fotos!]
* http://www.pixelio.de
* http://www.flickr.com/search/?l=commderiv search flickr for CC images

FK:Kunst-Technik-Labor

2014-01-31T13:49:57Z

Eins78: /* Freies Material */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier]. Noch mehr bei [http://irights.info irights.info]

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind oder Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also:
* ''jemand anderes'' erstellt etwas und hat das Urheberrecht, und das Gesetz schützt ihn (vor uns) – du darfst es normalerweise nicht einfach nutzen.
* das, was ''du'' erstellst, unterliegt – automatisch! – auch dem Urheberrecht, und das Gesetz schützt dich davor, dass andere es ohne deine Einwilligung nutzen.

Es gibt allerdings die Möglichkeit für Urheber, Werke zur '''kostenlosen Verwendung''' freizugeben. Das heißt: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht, was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist [http://de.creativecommons.org/was-ist-cc/ '''Creative Commons'''], kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

[[Sources/Images|Quellensammlung]]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients an der Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [[wikipedia:de:Versionsverwaltung|Versionskontrolle]] ([[Git]]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-30T18:04:56Z

Eins78: /* Freies Material */ fixes

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier].

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind und Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht ''(aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt)''.

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also: jemand hat das Urheberrecht, und das Gesetz schützt ihn (vor uns).

Ein bisschen mehr Material gibt es zur '''kostenlosen Verwendung'''. Das heisst: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist '''Creative Commons''', kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''.

Quellensammlung:

* [http://unsplash.com public domain fotos]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients_an_der_Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-30T18:03:35Z

Eins78: /* Freies Material */

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

==Freies Material==

Ganz kurze Zusammenfassung zum Urheberrecht, [http://wiki.178.is/wiki/WTF-Copyright etwas längere Fassung hier].

'''Urheberrechts'''- (oder Copyright-)'''freies Material''' gibt es weniger als man glaubt. Prinzipiell sind das nur Werke, deren '''Autoren länger als 70 Jahre tot''' sind und Werke, die von Regierungen erstellt wurden (Gesetze, NASA-Fotos). Dieses Material nennt sich 'gemeinfrei' oder 'public domain' und darf uneingeschränkt verwendet werden.

Ein ganz kleines bisschen davon ist auch von Menschen, die ihre Werke einfach so in die 'public domain' stellen, indem sie das öffentlich sagen. Das kann man aber nicht in allen Ländern überhaupt tun. In den USA geht es, in Deutschland nicht (aus dem anderweitig noblen Grund, das per Gesetz der Urheberrecht immer bei dem Urheber liegt und nicht übertragen werden kann, weder verkauft noch verschenkt).

'''Merke:''' Das meiste interessante Material unterliegt dem Urheberrecht. Also: jemand hat das Urheberrecht, und das Gesetz schützt ihn (vor uns).

Ein bisschen mehr Material gibt es zur '''kostenlosen Verwendung'''. Das heisst: jemand hat zwar das Urheberrecht, aber er gibt jedem eine '''Erlaubnis''', es unter bestimmten '''Bedingungen''' (Einschränkungen) kostenlos zu '''nutzen'''. Diese Erlaubnis ist eine '''Lizenz''', also ein Dokument in dem genau steht was die Bedingungen sind und welche Nutzungen erlaubt sind.

Eine bekannte Lizenz ist '''Creative Commons''', kurz CC. Eigentlich ist es ein '''Baukasten''', in dem sich jeder die Bedingungen und erlaubten Nutzungen für sein eigenes Werk zusammenklicken kann, und so eine passende Lizenz erhält.

Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten (im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit das auch rechtlich gültig ist.

Quellensammlung:

* [http://unsplash.com public domain fotos]

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients_an_der_Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2014-01-17T20:12:37Z

Eins78: Links: Anonym etc

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 [https://www.youtube.com/watch?v=3oJF0G25q9Q Anmelden] und [https://www.youtube.com/watch?v=PVBOAyd_1Zw Editieren], [https://www.youtube.com/watch?v=hLoOpqCyos0 Formatieren] und [https://www.youtube.com/watch?v=P42Une7fC_g Unterseiten anlegen] könnt, lässt sich in den 3-5 minütigen Videos anschauen.

===Schnell im Etherpad===
Während der Veranstaltungen kannst du auch Code oder Probleme ins [http://m18.uni-weimar.de/pad/p/KTL Etherpad] schreiben/kopieren

==Software==
Bitte benutzt die hier vorgeschlagene Software, da ihr bei Dozenten und Kommilitonen schneller Hilfe findet. Ausprobiert und für gut bedienbar gefunden haben wir sie auch.
*'''Websites anzeigen mit [http://www.mozilla.org/en-US/firefox/all/ Firefox]''' Den [https://de.wikipedia.org/wiki/Browser "Browser"] Firefox gibt es für praktisch alle Systeme. [[File:3DViewFirefox.png|right|150px]]
** Mit der [http://en.wikipedia.org/wiki/Function_key f12-Taste] könnt ihr einen [http://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Entwicklermodus] aufrufen, der so wie die X-Ray-Googles (mit denen man Websites untersuchen und ändern kann) funktioniert.
** Ganz rechts in der Entwicklerleiste findet ihr ein Würfel/Kubussymbol, dass den 3D Modus für die Visualisierung der Tag-Verschachtelung anschaltet.

* '''Website veröffentlichen:''' Um deine Website auf den Uniwebspace hochzuladen, brauchst du ein sFTP-Programm ('''s'''ecure '''F'''ile '''T'''ransfer '''P'''rotocol).
** [http://cyberduck.io/ Cyberduck] ist einfach zu nutzen und für Mac und Windows verfügbar.
** Wer Linux benutzt, kann den [http://filezilla-project.org/ FileZilla-Client] nutzen.

* '''Code schreiben mit [http://download.brackets.io/ 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.
** Um die Vorschau zu in Brackets zu nutzen braucht ihr [https://www.google.com/intl/de/chrome/browser/ Chrome]. Solltet ihr nach eurem google-Passwort gefragt werden: könnt ihr überspringen. Auf Linux nehmt ihr "chromium" aus dem Paketmanager.
** Sollte euer Computer sehr alt sein und brackets nur sehr langsam laufen, nutzt [http://www.notepad-plus-plus.org/ notepad++] (Windows), gEdit (Linux)

* '''zum Lernen:'''
** [https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''': Links ist der "Quellcode", rechts sieht man die resultierende Website. (ist eine Website und muss nicht installiert werden)
** [http://goggles.webmaker.org/en-US 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)

=="Hardware": Minicomputer, Löten…==
* Der [https://de.wikipedia.org/wiki/Raspberry_Pi RasberryPi] ist ein Minicomputer zum Lernen und Experimentieren – für 30€. [http://googlecreativelab.github.io/coder/ Coder] ist ein Programm für den RasberryPi, das einfach Experimente mit Webentwicklung ermöglicht.

==Lernen==
[[File:MozillaGoggles_mini.png|150px|right]]
* '''Websites untersuchen und ändern''' [https://goggles.webmaker.org/en-US/|mit den XRay-Goggles] ([[/WebmakerXRay|Anleitung auf Deutsch]])
* '''Websites erstellen''': schrittweise und interaktiv [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1 in HTML] codecademy.
* '''Websites designen:''' [http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1 CSS lernen] bei codecademy.
* '''lieber was mit mehr lesen?''' (statt interaktiv und schrittweise mit codecademy) : [http://learn.shayhowe.com/html-css/ a beginners guide to HTML/CSS] und [http://de.html.net/tutorials/html/ HTML Tutorial] (auf deutsch)
* '''Programmieren lernen''' (das "richtige" Programmieren, bei dem Inhalte nicht nur dargestellt werden, sondern auch erzeugt):
** interaktiv und schritt für Schritt [http://www.codecademy.com/courses/getting-started-v2/0/1| Javascript Intro] ([http://www.codecademy.com/tracks/javascript| …und mehr]).
**…Oder eher in [http://eloquentjavascript.net/contents.html Textform].
** Wenn ihr Websites mit interaktiven Funktionen anreichern wollt, könnt ihr [http://jquery.com/ jquery] nutzen. Jquery ist eine Sammlung nützlicher Javascript-Funktionen und lässt sich [http://www.codecademy.com/tracks/jquery hier] lernen. Ein bisschen Javascript sollte man dazu schon können.

===Aufgaben zum Ausprobieren===
* ''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'': [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'': [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===
Obwohl wir versuchen, gut verständliches Lernmaterial zu geben, werden bestimmt Fragen aufkommen. In diesem Falle fragt eure Kommilitonen oder Dozenten – entwerder auf dem [http://m18.uni-weimar.de/pad/p/KTL Etherpad] oder per Mail (z.B. an Jan: jan PUNKT dittrich ÄT uni-weimar.de)

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==
* Bei [http://www.pearl.de/ Pearl.de] gibt es z.B. fertige [http://www.pearl.de/a-PX7226-5922.shtml Kapitalismuskritik]

==Projektbeispiele==
* [http://www.teleportacia.org/war/war.html My Boyfriend Came Back From War] Ein bekanntes Webkunstwerk. Technisch nicht kompliziert: Text, Bilder und Links
* [http://www.heise.de/tp/kunst/l_u_block/index.html largest unused block] Kunst über Benutzeroberflächen (?) ([http://www.heise.de/tp/magazin/nk/3241/1.html Erklärungsansatz])
* und nochmal Kunst über Computer: [http://www.heise.de/tp/kunst/nocache/nocache/index.htm content= no cache]
* Mit dem Unterschied zwischen Code und normalerweise sichtbarer Website spielt [http://wwwwwwwww.jodi.org/ http://wwwwwwwww.jodi.org/]. Drückt ''Ctrl+U'' um den Code der Website statt der normalen Ansicht zu sehen.
* Seltsames von [http://www.mouchette.org/ Mouchette], die Künstlerin ist und seit 1996 fast 13 Jahre alt.
* Die [https://en.wikipedia.org/wiki/The_Yes_Men Yes Man] bauen öfter mal [http://yeslab.org/museum Websites von großen Konzernen nach] …mit entscheidenden Unterschieden.
* Die Yes Man haben auch mal die Sprachchips von Barbie und CI Joe (Spielzeugsoldat) [https://en.wikipedia.org/wiki/Barbie_Liberation_Organization vertauscht]. Und dann wieder zurückgestellt. [https://www.youtube.com/watch?feature=player_detailpage&v=OVT4T7OR3iQ#t=120 Video hier] (Kommentar im Video: "[this is] terrorism on children". Barbie sagt dazu nur "vengeance is mine", CI Joe geht shoppen.)

==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==

===Folien===

* [http://txt.178.is/Talk/Was-ist-das-Internetz.html "Was ist das Internetz?"]



==Links==
===Nachschlagewerke===
''Hinweis: Die Nachschlagewerke sind natürlich gut zum Nachschlagen; Zum Lernen ist [http://codecademy.com/ Codecademy] besser geeignet, weil es didaktisch aufbereitet ist und in den Nachschlageseiten tlw. veraltete und/oder umständliche Wege beschreiben sind.

* [http://www.quackit.com/html_5/tags/ Schnellübersicht] HTML-Tags
* [https://developer.mozilla.org/en-US/docs/Web/HTML Mozilla Developer (English)]
* [http://de.selfhtml.org/html/index.htm SelfHTML (Deutsch)]

===Ideen und Vorschläge===
* [http://stackoverflow.com/questions/3981377/generate-sound-using-javascript mathematically Generate Sounds on the web]
* Auf Licht reagieren mit einer [https://en.wikipedia.org/wiki/Photodiode Photodiode] (eine elektronisches Bauteil)

===Anonymität/Privatsphäre===

Anonymität und Privatsphäre im Internet ist leider schwierig bis unmöglich, je nach Anspruch.
Es gibt aber trotzdem einige Maßnahmen, die man treffen kann:

* Bessere Online-Dienste und Programme nutzen. Liste unter https://prism-break.org
* TorBrowser herunterladen und relativ gut seine Herkunft verschleiern: https://www.torproject.org/download/download-easy.html (anonym = nur im TorBrowser, nicht in anderen Programmen die gleichzeitig laufen wie Mail oder Skype)
* DuckDuckGo als Default-Suchmaschine im Browser einrichten, um nicht alle Suchbegriffe nach google zu schicken: https://duckduckgo.com/about (Google ist trotzdem einfach zu erreichen, DuckDuckGo leitet die Anfrage weiter wenn "!g" drin steht. Das geht auch mit "!wiki", "!sc" für soundcloud u.s.w.)

Wer es wirklich versuchen will, hier ein paar Hardcore-Tipps in aufsteigender Reihenfolge:

* Extra Laptop pro "Identität" (Linux!)
* Extra Nur-Offline-Computer zum Arbeiten mit verschlüsselten Daten
* VPN-Zugang kaufen (am besten mit Bargeld), z.B. https://www.ipredator.se
* Alle Computer wegschmeißen und durch Open-Source-Hardware ersetzen: http://www.wired.com/wiredenterprise/2014/01/open-source-laptop/
* Alu-Hut (optional)

==Hilfe==

zur Hausaufgabe "Hello World"

'''Allgemein:'''
* Erstelle eine Textdatei (Rohtext, plain text) mit dem Namen index.html und dem Inhalt "hello world", z.B. mit dem Programm Notepad.exe (Windows) oder TextEdit.app (Mac)
* Wenn das Textprogramm Teile des Textes fett oder farbig o.ä. machen kann, '''ist es kein plain text''', sondern formatierter Text!
* Lade die Datei ins Internet, auf einen Web-Server (siehe folgende 2 Möglichkeiten)

==='''1. Möglichkeit:''' Uni Weimar Webspace===

* Wichtig: Zugang ist nur aus dem Uni-Netz möglich. Also entweder mit dem Uni-WLAN (eduroam) verbinden, einen Rechner in einem der Pools benutzen oder das [http://www.uni-weimar.de/medien/wiki/VPN-Clients_an_der_Bauhaus-Uni "VPN"] einrichten.
* Zum Hochladen der Datei wird ein Programm benötigt, das '''SFTP''' kann, z.B. [http://cyberduck.io/ Cyperduck] (Mac, Windows) oder [https://filezilla-project.org/ FileZilla] (alle Systeme) — beide kostenlos (Cyberduck ist einfacher zu bedienen)
* SFTP-Programm starten und eine neue Verbindung hinzufügen
* Nun bekommt ihr ein Fenster mit einigen (noch) leeren Textfeldern zu sehen. Wichtig sind folgende: '''Server:''' dort eintragen ''homepage.uni-weimar.de'', '''Name:''' ''euer Uni-Login'' (xuxo1253 oder sowas) und '''Passwort''': das ''Uni-Passwort''
* Ihr müsst auch ein ''' "Protokoll"''' oder eine "Übertragungsart" wählen: bitte '''SFTP''' wählen, ''nicht'' FTP, FTP-SSL o.ä.
* Wenn ihr Zuhause seid bzw. ''nicht'' in einem Uni-Netzwerk, müsst ihr euch vorher mit dem [[VPN-Clients_an_der_Bauhaus-Uni|VPN verbinden]]!
* Verbindung starten, es sollte eine Dateiliste erscheinen, in der mindestens der Ordner 'public_html' auftaucht
* Lade die Datei index.html in den Ordner 'public_html' hoch (z.B. drag and drop)
* Deine Website findet sich jetzt unter ''webuser.uni-weimar.de/~DeineNutzerkennung''. Wenn dein uni-login also "xolo1298" ist findet sich deine Website unter ''webuser.uni-weimar.de/~xolo1298''

==='''2. Möglichkeit:''' Github Pages===

'''Vorteile:'''
* Hat nichts mit der Uni (-server, -netz, -login) zu tun!
* benutzt im Hintergrund eine [https://de.wikipedia.org/wiki/Versionsverwaltung Versionskontrolle] ([https://de.wikipedia.org/wiki/Git git]), d.h. es gibt backups und eine Geschichte der Änderungen

'''Nachteile:'''
* etwas komplizierter einzurichten

Eine sehr gute '''Schritt-für-Schritt-Anleitung''' für alle Betriebssysteme gibt es hier: http://pages.github.com
* In der Anleitung wird auch genannt, an welcher Stelle die Datei 'index.html' erstellt wird und wo sie hinkommt
* Es kann das eigene Betriebssystem ausgewählt werden
* Mit Windows und Mac können alle Schritte im Webbrowser und einem Programm von Github selbst erledigt werden
* Für Linux wird leider das Terminal (die Shell) benötigt – wer das hinbekommt, dem spendiert Max einen Kaffee.

==="0. Möglichkeit:" DIY===

* Wichtig ist nur, das irgendwie eine Datei index.html auf einem Web-Server landet und sie vom eigenen Computer aus so bearbeitet werden kann, das nur "hello world" drinsteht.
* D.h. es gibt einen Link dahin und wenn dieser im Browser aufgerufen wird, steht dort NUR "hello world" (und sonst nichts).

Beispiele:
* diverse "kostenlose homepage" Online-Dienste (wenn sie das anlegen und bearbeiten von Dateien erlauben, geht teilweise auch im Browser)
* Advanced: eigener Server, eigener Webspace

Un-Beispiele (so geht es '''nicht'''):
* Blogs u.ä. Dienste: Wordpress.com, tumblr
* "hello world" twittern

[[Category:Jan Dittrich]]

FK:Kunst-Technik-Labor

2013-12-20T13:07:14Z

Eins78: /* Links */ Nachschlagewerke

FK:Kunst-Technik-Labor

2013-12-19T16:55:02Z

Eins78: /* Material */ - Software

FK:Kunst-Technik-Labor

2013-12-18T17:21:26Z

Eins78: /* 2. Möglichkeit: Github Pages */ links

FK:Kunst-Technik-Labor

2013-12-18T17:19:17Z

Eins78: /* "0. Möglichkeit:" DIY */

FK:Kunst-Technik-Labor

2013-12-18T17:18:19Z

Eins78: /* Hilfe */ formatting, details about DIY solutions

FK:Kunst-Technik-Labor

2013-12-18T16:58:22Z

Eins78: /* Hilfe */

FK:Kunst-Technik-Labor

2013-12-18T16:57:55Z

Eins78: /* Hilfe */

FK:Kunst-Technik-Labor

2013-12-18T16:57:20Z

Eins78: /* Hilfe */ Github Pages

FK:Kunst-Technik-Labor

2013-12-18T16:47:22Z

Eins78: /* Hilfe */

FK:Kunst-Technik-Labor

2013-12-13T22:39:15Z

Eins78: /* Material */

FK:Kunst-Technik-Labor

2013-12-13T22:38:59Z

Eins78: /* Material */

FK:Kunst-Technik-Labor

2013-12-13T22:37:40Z

Eins78: /* Material */ Folien Vortrag

FK:Kunst-Technik-Labor

2013-12-13T13:44:07Z

Eins78:

FK:Kunst-Technik-Labor

2013-11-26T11:39:40Z

Eins78: /* Lernen */

FK:Kunst-Technik-Labor

2013-11-18T10:38:41Z

Eins78: /* Termine */ neue Termine

JavaScript/AdvancedTopics

2013-02-03T21:36:09Z

Eins78: /* Server/Client */

==Variablen-Hoisting==
''Hoisting'' ist das "hochziehen" von Variablen an den Funktionsanfang; so als wären Variablen, die irgendwo in der Funktion deklariert worden, eigentlich Anfang der Funktion deklariert. Der Javascript-Interpreter macht dies automatisch. Von diesem Verhalten ist allerdings ''nur'' die Deklaration betroffen, nicht die Zuweisung eines Wertes zu der Variablen.

d.h., dass aus einem Code, der so geschrieben wurde:
<source lang="javascript" highlight="3,5">
function doCalc(){
console.log("Hello Programmer!");
var aNumber; //Deklaration
aNumber = 4; //Zuweisung
var anotherNumber = aNumber*2; //Deklaration und Zuweisung
console.log("Die andere Nummer ist:"+anotherNumber);
}
</source>

Bei der Ausführung vom Interpreter so "umgeschreiben" wird:

<source lang="javascript" highlight="2,3">
function doCalc(){
var aNumber; //Deklaration
var anotherNumber; //Deklaration
console.log("Hello Programmer!");
aNumber = 4; //Zuweisung
console.log("Die Nummer ist:"+aNumber);
anotherNumber = aNumber*2; //Zuweisung
console.log("Die andere Nummer ist:"+anotherNumber);
}
</source>

==Server/Client==

Mit node.js besteht die Möglichkeit, auch den Server-Teil einer Applikation in Javascript zu schreiben.
Nachteil: es muss entschieden werden, wieviel "Logik" jeweils auf dem Server und dem Client laufen soll.

Ein guter Überblick über die verschiedenen Denkmodelle und die entsprechenden Libraries, die diese implementieren:
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code

Übersicht anhand eines konkreter Code-Beispiele: http://todomvc.com
(hier wurde die gleiche simple ToDo-App in versch. Client-Frameworks implementiert, von "reinem" Javascript über jQuery bis zu backbone.js)

JavaScript/AdvancedTopics

2013-02-03T21:29:08Z

Eins78: Server/Client

IFD:Kolloq WS12

2012-11-15T10:57:25Z

Eins78: /* Syllabus */

[[:Category:Kolloquium|Kolloquium]] 
''Lehrperson:'' [[Jens Geelhaar]], [[Michael Markert]], [[Gabriel Rausch]], [[Martin Schied]], [[User:Joatan|Joatan Preis Dutra]], [[Johannes Deich]] 
''Bewertung:'' 0 [[ECTS]], ca. 3 [[SWS]] 
''Termin:'' Mittwochs, 10.15 Uhr 
''Ort:'' Marienstraße 7b, Raum 105 

''Erster Termin:'' Mittwoch, 17. Oktober 2012, 10:15 Uhr

==Beschreibung==
Das Interface-Design Kolloquium lädt jeden Mittwoch zu einem kleinen Vortrag aus der Praxis (von Studierenden, Gästen oder Mitarbeitern) ein. Im Anschluss wird über das Thema des Vortrags diskutiert.

==English description==
We are inviting students, guests and lecturers to present their works. There will be a brief discussion afterwards.

== Anmeldung ==
Der Besuch ist offen für alle und erfordert keine Anmeldung

==Zielgruppe==
Alle Bachelor- und Master-Studenten, Absolventen und Mitarbeiter der Professur Interface-Design.

== Hinweise für Vortragende ==

Übrigens: Wir freuen uns über Hinweise für interessante Vorträge!

Normalerweise gibt es zwei Redner pro Termin. Es gibt einen Beamer (VGA-Connector!), wenn Sie Sound oder einen Computer benötigen, melden Sie sich bitte bei [[User:Mm|Michael]]. Falls Sie die Präsentation auf einem USB-Stick mitbringen, dann bitte entweder als Mac-Keynote oder als PDF. Wir haben nur eventuell Zugriff auf einen Windows-PC mit Powerpoint.

Sie können Ihre Vortragssprache (Deutsch/Englisch) frei wählen. Es sind jedoch üblicherweise 5 bis 10% fremdsprachige Teilnehmer anwesend, die i.d.R. besser Englisch als Deutsch verstehen.

Die Präsentation sollte eine Dauer von etwa ~20 Minuten haben. Bitte haben Sie Verständnis dafür, wenn wir nach spätestens 30 Minuten abbrechen, denn wir möchten noch genügend Zeit für Feedback, Fragen und kurze Anschlussdiskussionen haben.

== Notes for Speakers ==

If you feel, you have something interesting to share, please contact us. We are always looking for interesting things to share and talk about.

Typically, we have two presentations per meeting. There is a projector with VGA Connector. If you need Sound or a Computer, please contact [[User:Mm|Michael]]. If you bring your presentation on a USB-Stick, please use either Mac-Keynote or PDF, because we may or may not find a Windows-PC with Powerpoint.

The language of your talk (German/English) is up to you to decide. Usually, there are about 5 to 10% Students that understand English better than German.

The presentation should have a duration of about ~ 20 minutes. Please understand that we need to stop the talk after 30 minutes latest, because there should be time for feedback, questions and short discussions.

==Syllabus==
Vorläufiger Semesterplan:
# <del>17.10.</del> no meeting yet…
# <del>24.10.</del> no meeting yet…
# <del>31.10.</del> no meeting! (Public Holiday)
# 07.11. Jan: Interfaces, Martin: ARS-Project
# 14.11. Matthias + Miriam (Exposé Masterarbeit - Bürgerbeteiligung, Stadtentwicklung, Medien), Jason (If You Have To Ask You Can't Afford It)
# 21.11. Marcel K. (HCI for Cultural Heritage Research and Museums, Patawat.P (IVIN)
# 28.11. Adriana (Interaktive Oberflächen), Max Albrecht ([https://github.com/papermill/documentation papermill])
# 05.12. tba
# 12.12. tba
# 09.01. tba
# 16.01. tba
# 23.01. tba
# 30.01. tba

== Siehe auch ==
*tba

[[Category:WS12]]
[[Category:Kollogium]]
[[Category:Interaktion]]
[[Category:Interface-Design]]
[[Category:Jens Geelhaar]]

IFD:Kolloq WS12

2012-11-15T10:33:06Z

Eins78: /* Syllabus */

[[:Category:Kolloquium|Kolloquium]] 
''Lehrperson:'' [[Jens Geelhaar]], [[Michael Markert]], [[Gabriel Rausch]], [[Martin Schied]], [[User:Joatan|Joatan Preis Dutra]], [[Johannes Deich]] 
''Bewertung:'' 0 [[ECTS]], ca. 3 [[SWS]] 
''Termin:'' Mittwochs, 10.15 Uhr 
''Ort:'' Marienstraße 7b, Raum 105 

''Erster Termin:'' Mittwoch, 17. Oktober 2012, 10:15 Uhr

==Beschreibung==
Das Interface-Design Kolloquium lädt jeden Mittwoch zu einem kleinen Vortrag aus der Praxis (von Studierenden, Gästen oder Mitarbeitern) ein. Im Anschluss wird über das Thema des Vortrags diskutiert.

==English description==
We are inviting students, guests and lecturers to present their works. There will be a brief discussion afterwards.

== Anmeldung ==
Der Besuch ist offen für alle und erfordert keine Anmeldung

==Zielgruppe==
Alle Bachelor- und Master-Studenten, Absolventen und Mitarbeiter der Professur Interface-Design.

== Hinweise für Vortragende ==

Übrigens: Wir freuen uns über Hinweise für interessante Vorträge!

Normalerweise gibt es zwei Redner pro Termin. Es gibt einen Beamer (VGA-Connector!), wenn Sie Sound oder einen Computer benötigen, melden Sie sich bitte bei [[User:Mm|Michael]]. Falls Sie die Präsentation auf einem USB-Stick mitbringen, dann bitte entweder als Mac-Keynote oder als PDF. Wir haben nur eventuell Zugriff auf einen Windows-PC mit Powerpoint.

Sie können Ihre Vortragssprache (Deutsch/Englisch) frei wählen. Es sind jedoch üblicherweise 5 bis 10% fremdsprachige Teilnehmer anwesend, die i.d.R. besser Englisch als Deutsch verstehen.

Die Präsentation sollte eine Dauer von etwa ~20 Minuten haben. Bitte haben Sie Verständnis dafür, wenn wir nach spätestens 30 Minuten abbrechen, denn wir möchten noch genügend Zeit für Feedback, Fragen und kurze Anschlussdiskussionen haben.

== Notes for Speakers ==

If you feel, you have something interesting to share, please contact us. We are always looking for interesting things to share and talk about.

Typically, we have two presentations per meeting. There is a projector with VGA Connector. If you need Sound or a Computer, please contact [[User:Mm|Michael]]. If you bring your presentation on a USB-Stick, please use either Mac-Keynote or PDF, because we may or may not find a Windows-PC with Powerpoint.

The language of your talk (German/English) is up to you to decide. Usually, there are about 5 to 10% Students that understand English better than German.

The presentation should have a duration of about ~ 20 minutes. Please understand that we need to stop the talk after 30 minutes latest, because there should be time for feedback, questions and short discussions.

==Syllabus==
Vorläufiger Semesterplan:
# <del>17.10.</del> no meeting yet…
# <del>24.10.</del> no meeting yet…
# <del>31.10.</del> no meeting! (Public Holiday)
# 07.11. Jan: Interfaces, Martin: ARS-Project
# 14.11. Matthias + Miriam (Exposé Masterarbeit - Bürgerbeteiligung, Stadtentwicklung, Medien), Jason (If You Have To Ask You Can't Afford It)
# 21.11. Marcel K. (HCI for Cultural Heritage Research and Museums, Patawat.P (IVIN), Max Albrecht ([https://github.com/papermill/documentation papermill]) -- wenn möglich, sonst die Woche drauf
# 28.11. Adriana (Interaktive Oberflächen)
# 05.12. tba
# 12.12. tba
# 09.01. tba
# 16.01. tba
# 23.01. tba
# 30.01. tba

== Siehe auch ==
*tba

[[Category:WS12]]
[[Category:Kollogium]]
[[Category:Interaktion]]
[[Category:Interface-Design]]
[[Category:Jens Geelhaar]]

IFD:Kolloq WS12

2012-11-15T10:21:47Z

Eins78: /* Syllabus */

[[:Category:Kolloquium|Kolloquium]] 
''Lehrperson:'' [[Jens Geelhaar]], [[Michael Markert]], [[Gabriel Rausch]], [[Martin Schied]], [[User:Joatan|Joatan Preis Dutra]], [[Johannes Deich]] 
''Bewertung:'' 0 [[ECTS]], ca. 3 [[SWS]] 
''Termin:'' Mittwochs, 10.15 Uhr 
''Ort:'' Marienstraße 7b, Raum 105 

''Erster Termin:'' Mittwoch, 17. Oktober 2012, 10:15 Uhr

==Beschreibung==
Das Interface-Design Kolloquium lädt jeden Mittwoch zu einem kleinen Vortrag aus der Praxis (von Studierenden, Gästen oder Mitarbeitern) ein. Im Anschluss wird über das Thema des Vortrags diskutiert.

==English description==
We are inviting students, guests and lecturers to present their works. There will be a brief discussion afterwards.

== Anmeldung ==
Der Besuch ist offen für alle und erfordert keine Anmeldung

==Zielgruppe==
Alle Bachelor- und Master-Studenten, Absolventen und Mitarbeiter der Professur Interface-Design.

== Hinweise für Vortragende ==

Übrigens: Wir freuen uns über Hinweise für interessante Vorträge!

Normalerweise gibt es zwei Redner pro Termin. Es gibt einen Beamer (VGA-Connector!), wenn Sie Sound oder einen Computer benötigen, melden Sie sich bitte bei [[User:Mm|Michael]]. Falls Sie die Präsentation auf einem USB-Stick mitbringen, dann bitte entweder als Mac-Keynote oder als PDF. Wir haben nur eventuell Zugriff auf einen Windows-PC mit Powerpoint.

Sie können Ihre Vortragssprache (Deutsch/Englisch) frei wählen. Es sind jedoch üblicherweise 5 bis 10% fremdsprachige Teilnehmer anwesend, die i.d.R. besser Englisch als Deutsch verstehen.

Die Präsentation sollte eine Dauer von etwa ~20 Minuten haben. Bitte haben Sie Verständnis dafür, wenn wir nach spätestens 30 Minuten abbrechen, denn wir möchten noch genügend Zeit für Feedback, Fragen und kurze Anschlussdiskussionen haben.

== Notes for Speakers ==

If you feel, you have something interesting to share, please contact us. We are always looking for interesting things to share and talk about.

Typically, we have two presentations per meeting. There is a projector with VGA Connector. If you need Sound or a Computer, please contact [[User:Mm|Michael]]. If you bring your presentation on a USB-Stick, please use either Mac-Keynote or PDF, because we may or may not find a Windows-PC with Powerpoint.

The language of your talk (German/English) is up to you to decide. Usually, there are about 5 to 10% Students that understand English better than German.

The presentation should have a duration of about ~ 20 minutes. Please understand that we need to stop the talk after 30 minutes latest, because there should be time for feedback, questions and short discussions.

==Syllabus==
Vorläufiger Semesterplan:
# <del>17.10.</del> no meeting yet…
# <del>24.10.</del> no meeting yet…
# <del>31.10.</del> no meeting! (Public Holiday)
# 07.11. Jan: Interfaces, Martin: ARS-Project
# 14.11. Matthias + Miriam (Exposé Masterarbeit - Bürgerbeteiligung, Stadtentwicklung, Medien), Jason (If You Have To Ask You Can't Afford It)
# 21.11. Marcel K. (HCI for Cultural Heritage Research and Museums, Patawat.P (IVIN), Max Albrecht (?)
# 28.11. Adriana (Interaktive Oberflächen)
# 05.12. tba
# 12.12. tba
# 09.01. tba
# 16.01. tba
# 23.01. tba
# 30.01. tba

== Siehe auch ==
*tba

[[Category:WS12]]
[[Category:Kollogium]]
[[Category:Interaktion]]
[[Category:Interface-Design]]
[[Category:Jens Geelhaar]]

Digital literacy

2012-04-09T19:21:37Z

Eins78: /* Kollaboration */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + [http://geizhals.de/486889 Router] oder [http://geizhals.de/?cat=hdxnas&xf=1169_1%7E2662_1x+Gb+LAN%7E1170_1000&sort=p ein kleines NAS]
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

* '''Anonym'''
** [http://retroshare.sourceforge.net/ RetroShare -- ein Netzwerk von Freigaben zwischen Freunden, sicher und verschlüsselt]

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

* Soziale/Medien-Netzwerke
** Kommen und gehen.
** Sind deshalb gut als Ergänzung zur eigenen (selbst kontrollierten) Präsentation, z.B. als Feedback-Kanal)
** Einige medien-spezifische Communitys lohnen sich allein des Netzwerkeffektes wegen, wenn der eigene Medientyp passt.

* '''Anonym'''
** [https://www.torproject.org/download/download-easy.html.en Be less traceable by browsing via TOR] [https://en.wikipedia.org/wiki/Tor_%28anonymity_network%29 Wikipedia: Tor]
** Host your own counterrevolutionary files via a [https://www.torproject.org/docs/tor-hidden-service.html TOR hidden service]. it will have a domain like <tt>abcedfghijlkmn.onion</tt>
** You can visit hidden sites without using for via [http://tor2web.org/ TOR2WEB]
** Or try to get an account at [http://xqz3u5drneuzhaeo.onion/ FreedomHosting]
** Or figure out how to get [https://en.bitcoin.it/wiki/Anonymity BitCoins] anonymously
** [http://dot-bit.org/Main_Page NameCoin -- Hosting based on bitcoin]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T19:17:49Z

Eins78: /* Kollaboration */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + Router oder ein kleines NAS
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

* '''Anonym'''
** [http://retroshare.sourceforge.net/ RetroShare -- ein Netzwerk von Freigaben zwischen Freunden, sicher und verschlüsselt]

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

* Soziale/Medien-Netzwerke
** Kommen und gehen.
** Sind deshalb gut als Ergänzung zur eigenen (selbst kontrollierten) Präsentation, z.B. als Feedback-Kanal)
** Einige medien-spezifische Communitys lohnen sich allein des Netzwerkeffektes wegen, wenn der eigene Medientyp passt.

* '''Anonym'''
** [https://www.torproject.org/download/download-easy.html.en Be less traceable by browsing via TOR] [https://en.wikipedia.org/wiki/Tor_%28anonymity_network%29 Wikipedia: Tor]
** Host your own counterrevolutionary files via a [https://www.torproject.org/docs/tor-hidden-service.html TOR hidden service]. it will have a domain like <tt>abcedfghijlkmn.onion</tt>
** You can visit hidden sites without using for via [http://tor2web.org/ TOR2WEB]
** Or try to get an account at [http://xqz3u5drneuzhaeo.onion/ FreedomHosting]
** Or figure out how to get [https://en.bitcoin.it/wiki/Anonymity BitCoins] anonymously
** [http://dot-bit.org/Main_Page NameCoin -- Hosting based on bitcoin]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T19:17:32Z

Eins78: /* Präsentation */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + Router oder ein kleines NAS
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

* Anonym
** [http://retroshare.sourceforge.net/ RetroShare -- ein Netzwerk von Freigaben zwischen Freunden, sicher und verschlüsselt]

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

* Soziale/Medien-Netzwerke
** Kommen und gehen.
** Sind deshalb gut als Ergänzung zur eigenen (selbst kontrollierten) Präsentation, z.B. als Feedback-Kanal)
** Einige medien-spezifische Communitys lohnen sich allein des Netzwerkeffektes wegen, wenn der eigene Medientyp passt.

* '''Anonym'''
** [https://www.torproject.org/download/download-easy.html.en Be less traceable by browsing via TOR] [https://en.wikipedia.org/wiki/Tor_%28anonymity_network%29 Wikipedia: Tor]
** Host your own counterrevolutionary files via a [https://www.torproject.org/docs/tor-hidden-service.html TOR hidden service]. it will have a domain like <tt>abcedfghijlkmn.onion</tt>
** You can visit hidden sites without using for via [http://tor2web.org/ TOR2WEB]
** Or try to get an account at [http://xqz3u5drneuzhaeo.onion/ FreedomHosting]
** Or figure out how to get [https://en.bitcoin.it/wiki/Anonymity BitCoins] anonymously
** [http://dot-bit.org/Main_Page NameCoin -- Hosting based on bitcoin]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T19:17:12Z

Eins78: /* Präsentation */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + Router oder ein kleines NAS
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

* Anonym
** [http://retroshare.sourceforge.net/ RetroShare -- ein Netzwerk von Freigaben zwischen Freunden, sicher und verschlüsselt]

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

* Soziale/Medien-Netzwerke
** Kommen und gehen.
** Sind deshalb gut als Ergänzung zur eigenen (selbst kontrollierten) Präsentation, z.B. als Feedback-Kanal)
** Einige medien-spezifische Communitys lohnen sich allein des Netzwerkeffektes wegen, wenn der eigene Medientyp passt.

* Anonym
** [https://www.torproject.org/download/download-easy.html.en Be less traceable by browsing via TOR] [https://en.wikipedia.org/wiki/Tor_%28anonymity_network%29 Wikipedia: Tor]
** Host your own counterrevolutionary files via a [https://www.torproject.org/docs/tor-hidden-service.html TOR hidden service]. it will have a domain like <tt>abcedfghijlkmn.onion</tt>
** You can visit hidden sites without using for via [http://tor2web.org/ TOR2WEB]
** Or try to get an account at [http://xqz3u5drneuzhaeo.onion/ FreedomHosting]
** Or figure out how to get [https://en.bitcoin.it/wiki/Anonymity BitCoins] anonymously
** [http://dot-bit.org/Main_Page NameCoin -- Hosting based on bitcoin]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T19:07:56Z

Eins78: /* Kollaboration */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + Router oder ein kleines NAS
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

* Anonym
** [http://retroshare.sourceforge.net/ RetroShare -- ein Netzwerk von Freigaben zwischen Freunden, sicher und verschlüsselt]

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T19:01:20Z

Eins78: /* Präsentation */

[[wikipedia:Digital literacy]] 
Andere Vorschläge für den Titel:
* Education of the NOOBZ (Newbies)
* Bist Du ein DAU?
* RTFM
* How to operate a machine without making other people cry
* Medien-Führerschein

== Internet? ==
* –> Max
** ist nicht gleich web!

== E-Mail ==
* –> Max
** [[SCC-Services#E-Mail|Client vs. Webmail]]
** IMAP/POP
** [[GMU:Mailinglist|Mailinglisten]], Threads, netiquette
** Signaturen
** Anhänge
** Digitale Signatur und Verschlüsselung
** Spam

== Sicherheit ==
** Sichere Passwörter, (Top 20 Passwords, social hacking)
** Backups, Inkrementell, Voll (Time-Machine, CCC)
**

== Web ==
** Wie bediene ich Suchmaschinen? Alternativen zu Google? (Scholar, Firefox Schlüsselwörter, ...) -> Frederic
** Browser: Cookies, Verlauf, Proxies, Firewalls, SSL
** Wikipedia –> Michi
** Medienwiki –> Michi

== Urheberrchte und Lizenzen ==
* –> Michi
** Was ist Urheberrecht? Mechanismen, Möglichkeiten, Probleme
** Rechte/Pflichten bei Abbildungen (Panoramafreiheit etc.)
** Was ist open source?
** creative commons

== Privatsphäre ==
** Anonymität im Netz
** Soziale Netzwerke

== Kommunikation ==
** Blogs, Pinnwand, Foren, IM, [[IRC]]

* Manipulation (wie erkenne ich:)
** Hoaxes
** Phishing
** Betrug

== Betriebssysteme ==
* Kompression
* Installation
* Viren/Trojaner/Spyware/Adware

== Dateiformate, Standards, Kompatiblität und Interoperabilität ==

* offene und geschlossene Formate –> Felix
** .txt
** .doc .otf .rtf
** .mp3 .wav
** .tiff .jpeg .png
** .pdf .ai .svg
** video codecs vs. container

== Kabel ==
** [[Standards/Video|Stecker und Kabel Erkennen]]
** [http://vimeo.com/videoschool/lesson/169/keeping-cords-in-order Aufrollen]

== Daten speichern und austauschen ==
* aka. WebDAV, FTP, Sharehoster, Dropbox, NAS
* Grundsätzliche Unterscheidung: Speicher zur '''Kollaboration''' und Speicher zur '''Präsentation'''.

http://imgs.xkcd.com/comics/file_transfer.png

Warum ist das so? Vor allem, weil wir Privatleute keine feste IP Adresse zu Hause haben und schon gar nicht mit uns umher tragen und weil unsere (Heim-)Interanschlüsse asymmetrisch sind, also langsamer Daten hochladen und schneller herunterladen. So entstand ein dezentrales Netzwerk, in dem man zentrale Dienste benötigt um ''komfortabel'' miteinender zu kommunizieren. Diese zentralen Dienste sind oft schlecht für die Privatsphäre und/oder töten Katzenbabys etc, aber für die Arbeit an eurem Semesterprojekt kann das irrelevant sein.

Deshalb ist die Regel #1: Private und Arbeitsdaten trennen. Und sich bewusst entscheiden, welche seiner Daten man wie und wo speichern möchte.

=== Kollaboration ===

* '''10GB''' Speicher von der Bauhaus-Uni: [[SCC#WebDAV]]
** für Arbeitsgruppen kann man zusätzlichen, gemeinsamen Speicher beantragen
** Alles wird für 120 Tage auf Magnetbändern gebackupt(!)
** Contra: Nur aus dem Uni-Netz erreichbar, also nur in Weimar oder mit VPN

* '''2GB''' Speicher bei Dropbox: [http://dropbox.com]
** Pro: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.
** Contra: Client für Win, Mac, Linux, der automatisch im Hintergrund deine Daten uploadet.

* '''1TB''' Speicher im Uni-Netz
** externe Festplatte + Router oder ein kleines NAS
** [http://www.uni-weimar.de/scc2/netze/f/netzantrag.html]
** zuhause ist die Leitung zu langsam (DSL1600 Rechenbeispiele: [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+1.5MB%2Fs Download] [http://www.wolframalpha.com/input/?i=data+transfer+time+1Gigabyte+100kB%2Fs Upload])

* für Kleinkram statt E-Mail-Anhängen eignet sich auch der www-Service des SCC, siehe nächster Abschnitt

=== Präsentation ===

Über den Ort und die Art und Weise seine Arbeiten zu präsentieren sollte man sich informieren und bewusst entscheiden. Auch hier sollte man wieder gut zwischen eigenen und fremden sowie zwischen sensiblen und öffentlichen Daten trennen.

* www-Service des SCC
** kostenlos und schon fertig eingerichtet
** super um statische Webseiten zu testen oder auch öffentliche Dateien wie Flyer hochzuladen (z.B. um diese in einer E-Mail zu verlinken statt anzuhängen)
** [http://www.uni-weimar.de/cms/universitaet/zentrale-einrichtungen/servicezentrum-fuer-computersysteme-und-kommunikation/service/www-seiten.html Anleitung des SCC]
** Hochladen (nur aus dem Uni-Netz): <tt>sftp://name1234@homepage.uni-weimar.de</tt>
** Anschauen: <tt>http://webuser.uni-weimar.de/~name1234</tt>

* Eigene Domain, Hosting
** Wichtig, wenn man es ernst meint. Sonst nur ein Kostenfaktor.
** Details [http://178.is/howto/linkliste-zum-vortrag-fur-kunstler-internet-von-links-und-recht/ hier]

== Siehe auch ==
* http://www.digitalliteracy.gov
* http://www.washingtonpost.com/blogs/answer-sheet/post/a-fourth-r-for-21st-century-literacy/2011/12/29/gIQAxx2BWP_blog.html?tid=sm_btn_tw

Digital literacy

2012-04-09T18:52:23Z

Eins78: /* Kollaboration */

Digital literacy

2012-04-09T18:51:16Z

Eins78: /* Präsentation */