FK:Kunst-Technik-Labor: Difference between revisions

From Medien Wiki
Line 10: Line 10:
===Werkzeuge zum Lernen===
===Werkzeuge zum Lernen===
'''[https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''':  
'''[https://thimble.webmaker.org/en-US Thimble Live Editor für HTML]''':  
[[File:MozillaThimble.png|none|400px]]
[[File:MozillaThimble.png|300px|right]]
Links ist der "Quellcode", rechts sieht man die resultierende Website  
Links ist der "Quellcode", rechts sieht man die resultierende Website  
 
<div style="clear:both"></div>




'''[https://goggles.webmaker.org/en-US Websites untersuchen]'''  
'''[https://goggles.webmaker.org/en-US Websites untersuchen]'''  
[[File:MozillaGoggles.png|none]]
[[File:MozillaGoggles.png|300px|right]]
 
mit den goggles für den Webentwickler-Röntgenblick. Einfach anschalten, Elemente anklicken und ändern. Auf der Website ist eine kleine Anleitung, wie man ein Bild in der Website "austauscht"
mit den goggles für den Webentwickler-Röntgenblick. Einfach anschalten, Elemente anklicken und ändern. Auf der Website ist eine kleine Anleitung, wie man ein Bild in der Website "austauscht"
<div style="clear:both"></div>


===Werkzeuge für Fortgeschrittene===
===Werkzeuge für Fortgeschrittene===

Revision as of 18:03, 15 November 2013

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

Informationsaustausch

…Im Wiki

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

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

Werkzeuge

Werkzeuge zum Lernen

Thimble Live Editor für HTML:

MozillaThimble.png

Links ist der "Quellcode", rechts sieht man die resultierende Website


Websites untersuchen

MozillaGoggles.png

mit den goggles für den Webentwickler-Röntgenblick. Einfach anschalten, Elemente anklicken und ändern. Auf der Website ist eine kleine Anleitung, wie man ein Bild in der Website "austauscht"

Werkzeuge für Fortgeschrittene

Adobe Brackets, ein "Editor", also ein Schreibprogramm für Code. Frei und einfach zu bedienen, mit Vorschaufunktion (Strg+Alt+P)

Lernen

Aufgaben zum Ausprobieren

  • Einfach: http://wwwwwwwww.jodi.org/ spielt mit dem Unterschied von Code und angezeigter Website. Kannst du erklären, was der Zeichensalat auf der angezeigten Website ist und warum der entstanden ist? (Tip: Ctrl+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?
  • Schwierig Die Barbie-Liberation-Front hat Sprachchips in Spielzeugen vertauscht. Kannst du ein Spielzeug oder ein anders Gerät, das Geräusche macht kreativ nutzen, indem du den Knopf, der das Geräusch auslöst, durch etwas anderes ersetzt? Die Knöpfe überbrücken meist nur eine Lücke im Stromkreis. Du könntest z.B. beim Öffnen einer Tür den Stromkreis schließen um den Ton auszulösen.
  • Schwierig: "My Boyfriend came back from War" nutzt Frames – eine veraltete Technik. Kannst du die Mechanismen ohne Frames implementieren?

Zeug a.k.a. Readymades

Projektbeispiele

Termine

  • 28.11 Vortrag
  • 29.11 Intro (vorläufiger Termin)
  • 12.12 Vortrag