Medien Wiki - User contributions [en]

IFD:Server side technologies for web-development WS 13/Dokumentationen

2014-03-24T15:00:22Z

Johannes:

==Dokumentationen==

[[/Max Mustermann/]]

[[/Monika Schwarz/]]

[[/Matthias B./]]

[[/Dirk W./]]

[https://dl.dropboxusercontent.com/u/9344503/bauhaus/clp/clp-jl-2014-03-24.pdf Johannes L.]

IFD:Server side technologies for web-development WS 13/Dokumentationen/Johannes L.

2014-03-24T14:59:41Z

Johannes: Blanked the page

IFD:Server side technologies for web-development WS 13/Dokumentationen/Johannes L.

2014-03-24T14:59:14Z

Johannes: Created page with "[https://dl.dropboxusercontent.com/u/9344503/bauhaus/clp/clp-jl-2014-03-24.pdf Dokumentation]"

[https://dl.dropboxusercontent.com/u/9344503/bauhaus/clp/clp-jl-2014-03-24.pdf Dokumentation]

IFD:Server side technologies for web-development WS 13/Dokumentationen

2014-03-24T14:57:28Z

Johannes:

==Dokumentationen==

[[/Max Mustermann/]]

[[/Monika Schwarz/]]

[[/Matthias B./]]

[[/Dirk W./]]

[[/Johannes L./]]

IFD:ShowreelWS1314/Johannes Lerdon - Bauhaus Internationals App

2014-02-07T00:45:55Z

Johannes:

==Bauhaus Internationals App==
===Johannes Lerdon===
====Interaktive Bildmedien====

[[File:IFD-Johannes-L-BIA-1.png]]
[[File:IFD-Johannes-L-BIA-2.png]]
[[File:IFD-Johannes-L-BIA-3.png]]
[[File:IFD-Johannes-L-BIA-4.png]]
[[File:IFD-Johannes-L-BIA-5.png]]
[[File:IFD-Johannes-L-BIA-6.png]]
[[File:IFD-Johannes-L-BIA-7.png]]

IFD:ShowreelWS13

2014-02-07T00:43:16Z

Johannes:

[[File:Showreel_ss13_banner_20131017.png|link=IFD:ShowreelWS1314]]

'''Präsentation WS13/14'''<br>
Professur Interface Design<br>
Prof. Dr. Jens Geelhaar

'''07. Februar 2014'''
'''ab 9:00 Uhr'''<br>
VDV, Geschwister-Scholl-Straße 7, 1. OG, Raum 116

Die Präsentation der Professur Interface Design bietet die Möglichkeit,<br> einen Einblick in die Semesterarbeiten und die Inhalte der angebotenen Module zu<br> bekommen. Die Veranstaltung lädt nicht nur Studenten des Bereichs IFD <br>ein, sondern ist offen für alle Interessierten.

<h3 style="color:#009FE3;">How to add your project</h3>

[http://www.youtube.com/watch?v=8rtEZEOPACw How-To Videocast]<br>
[[IFD:Showreel/Wie_stelle_ich_mein_Projekt_ins_Wiki%3F|How-To Manual]]<br>
[http://www.uni-weimar.de/medien/interfacedesign/showreel_ws2013/ Test Your Presentation] (follow the link to our Showreel-WebApp and select your presentation)

<h3 style="color:#009FE3;">PROGRAMM</h3>

'''9:00 Block "Fach- und Werkmodule"'''

* Werkmodul 'Einführung in die be-greifbare Programmierung II'
** [[/Einführung in die be-greifbare Programmierung II/]]

* Werkmodul 'Human Centered Design Research'
** [[/Human Centered Design Research/]]

* Werkmodul 'Web Basics I'
** [[/Web Basics I/]]

* Fachmodule 'Collaborative Mobile Media'
** [[/Collaborative Mobile Media/]]

* Fachmodul / Werkmodul 'Eclectic_Electric!'
** [[/Eclectic_Electric/]]

* Werkmodul 'Generative Bauhaus Vorkurs'
** [[/Generative Bauhaus Vorkurs/]]

* Werk- und Fachmodul 'Mobile Web & Hybrid Apps with HTML5'
** [[/Mobile Apps With HTML5/]]

* Werk- und Fachmodul'Server side technologies for web-development'
** [[/Server side technologies for web-development/]]

* Fachmodule 'Tangible Programming - An Introduction II'
** [[/Tangible Programming - An Introduction II/]]

* Werk- und Fachmodul 'Three-Dimensional Web-Interfaces'
** [[/Three-Dimensional Web-Interfaces/]]

'''10:30 Block "Projektmodule"'''

* Media Art & Design (MFA) / MediaArchitecture (MSc) - (English): Interaction and Experimental Interfaces: "FutureLab 2013"
** [[/Project Documentation - PDF/]]
***Aidas Cergelis
***Jorgelina Garcia
***Mariam Giguashvili
***Jonas Lideikis
***Natalia Suárez Munevar
***Apasri Titatarn
***Reinaldo Verde
***Lei Zhang

* Medienkunst & Mediengestaltung (BFA) - (Deutsch): Interaktive Bildmedien: "UP-cycling"
** [[/Julia Nießlein - kostokoll/]]
** [[/Johannes Lerdon - Bauhaus Internationals App/]]
** [[/Tobias Wolf - Hidden Drops/]]
** [[/Heinrich Roolf - Ersti-app/]]
** [[/Amr Kamel - 'Forma' Fitness App/]]
** [[/Ditmar Funk - Weimarpedia Rallye-App/]]
** [[/Max Mustermann - Projektname/]]

IFD:ShowreelWS1314/Johannes Lerdon - Bauhaus Internationals App

2014-02-07T00:40:28Z

Johannes: Created page with "==Bauhaus Internationals App== ===Johannes Lerdon=== ====Interaktive Bildmedien===="

==Bauhaus Internationals App==
===Johannes Lerdon===
====Interaktive Bildmedien====

IFD:ShowreelWS13

2014-02-07T00:38:46Z

Johannes:

[[File:Showreel_ss13_banner_20131017.png|link=IFD:ShowreelWS1314]]

'''Präsentation WS13/14'''<br>
Professur Interface Design<br>
Prof. Dr. Jens Geelhaar

'''07. Februar 2014'''
'''ab 9:00 Uhr'''<br>
VDV, Geschwister-Scholl-Straße 7, 1. OG, Raum 116

Die Präsentation der Professur Interface Design bietet die Möglichkeit,<br> einen Einblick in die Semesterarbeiten und die Inhalte der angebotenen Module zu<br> bekommen. Die Veranstaltung lädt nicht nur Studenten des Bereichs IFD <br>ein, sondern ist offen für alle Interessierten.

<h3 style="color:#009FE3;">How to add your project</h3>

[http://www.youtube.com/watch?v=8rtEZEOPACw How-To Videocast]<br>
[[IFD:Showreel/Wie_stelle_ich_mein_Projekt_ins_Wiki%3F|How-To Manual]]<br>
[http://www.uni-weimar.de/medien/interfacedesign/showreel_ws2013/ Test Your Presentation] (follow the link to our Showreel-WebApp and select your presentation)

<h3 style="color:#009FE3;">PROGRAMM</h3>

'''9:00 Block "Fach- und Werkmodule"'''

* Werkmodul 'Einführung in die be-greifbare Programmierung II'
** [[/Einführung in die be-greifbare Programmierung II/]]

* Werkmodul 'Human Centered Design Research'
** [[/Human Centered Design Research/]]

* Werkmodul 'Web Basics I'
** [[/Web Basics I/]]

* Fachmodule 'Collaborative Mobile Media'
** [[/Collaborative Mobile Media/]]

* Fachmodul / Werkmodul 'Eclectic_Electric!'
** [[/Eclectic_Electric/]]

* Werkmodul 'Generative Bauhaus Vorkurs'
** [[/Generative Bauhaus Vorkurs/]]

* Werk- und Fachmodul 'Mobile Web & Hybrid Apps with HTML5'
** [[/Mobile Apps With HTML5/]]

* Werk- und Fachmodul'Server side technologies for web-development'
** [[/Server side technologies for web-development/]]

* Fachmodule 'Tangible Programming - An Introduction II'
** [[/Tangible Programming - An Introduction II/]]

* Werk- und Fachmodul 'Three-Dimensional Web-Interfaces'
** [[/Three-Dimensional Web-Interfaces/]]

'''10:30 Block "Projektmodule"'''

* Media Art & Design (MFA) / MediaArchitecture (MSc) - (English): Interaction and Experimental Interfaces: "FutureLab 2013"
** [[/Project Documentation - PDF/]]
***Aidas Cergelis
***Jorgelina Garcia
***Mariam Giguashvili
***Jonas Lideikis
***Natalia Suárez Munevar
***Apasri Titatarn
***Reinaldo Verde
***Lei Zhang

* Medienkunst & Mediengestaltung (BFA) - (Deutsch): Interaktive Bildmedien: "UP-cycling"
** [[/Johannes Lerdon - Bauhaus Internationals App/]]
** [[/Julia Nießlein - kostokoll/]]
** [[/Tobias Wolf - Hidden Drops/]]
** [[/Heinrich Roolf - Ersti-app/]]
** [[/Amr Kamel - 'Forma' Fitness App/]]
** [[/Ditmar Funk - Weimarpedia Rallye-App/]]
** [[/Max Mustermann - Projektname/]]

File:IFD-Johannes-L-BIA-7.png

2014-02-07T00:36:14Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:IFD-Johannes-L-BIA-6.png

2014-02-07T00:35:59Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:IFD-Johannes-L-BIA-5.png

2014-02-07T00:34:12Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:IFD-Johannes-L-BIA-4.png

2014-02-07T00:33:41Z

Johannes:

== Summary ==

== Copyright status: ==
Includes photo by Ralf Herrmann (http://en.wikipedia.org/wiki/File:Bauhaus_weimar.jpg)
== Source: ==

File:IFD-Johannes-L-BIA-3.png

2014-02-07T00:32:24Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:IFD-Johannes-L-BIA-2.png

2014-02-07T00:31:51Z

Johannes:

== Summary ==

== Copyright status: ==
Includes map data by © 2014 GeoBasis-DE/BKG (©2009), Google
== Source: ==

File:IFD-Johannes-L-BIA-1.png

2014-02-07T00:29:41Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2014-01-28T12:39:18Z

Johannes:

== Prototypes ==

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ 1)] HTML & CSS Assignment (Form)

[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ 2)] Javascript Assignment (Clock)

[http://www.uni-weimar.de/medien/wiki/images/Threehugger-Johannes-L-20-11-2013.pdf 3)] Project Research & Presentation (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype.jpg 4)] Canvas Prototype 0.1 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype-2.png 5)] Canvas Prototype 0.2 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-17-12-2013-Prototype-3.png 6)] Canvas Prototype 0.3 (Treehugger / New generating algorithm)

7) Presentation & Heliotropism implemented (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-21-01-2014-Prototype-4.png 8)] Canvas Prototype 0.4 (Treehugger / Increased branch quality & abstract leafs)

== Final Presentation ==

Tuesday January 28th, 2014 14:00

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-Presentation-Final.pdf Presentation PDF]

[http://webuser.uni-weimar.de/~soja7876/treehugger/ Treehugger Canvas 0.5]

File:Treehugger-Johannes-L-Presentation-Final.pdf

2014-01-28T12:38:34Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2014-01-28T12:26:50Z

Johannes:

== Prototypes ==

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ 1)] HTML & CSS Assignment (Form)

[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ 2)] Javascript Assignment (Clock)

[http://www.uni-weimar.de/medien/wiki/images/Threehugger-Johannes-L-20-11-2013.pdf 3)] Project Research & Presentation (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype.jpg 4)] Canvas Prototype 0.1 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype-2.png 5)] Canvas Prototype 0.2 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-17-12-2013-Prototype-3.png 6)] Canvas Prototype 0.3 (Treehugger / New generating algorithm)

7) Presentation & Heliotropism implemented (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-21-01-2014-Prototype-4.png 8)] Canvas Prototype 0.4 (Treehugger / Increased branch quality & abstract leafs)

== Final Presentation ==

Tuesday January 28th, 2014 14:00

[http://webuser.uni-weimar.de/~soja7876/treehugger/ Treehugger Canvas 0.5]

IFD:Mobile Apps with HTML5/JohannesL

2014-01-21T12:14:06Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ 1)] HTML & CSS Assignment (Form)

[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ 2)] Javascript Assignment (Clock)

[http://www.uni-weimar.de/medien/wiki/images/Threehugger-Johannes-L-20-11-2013.pdf 3)] Project Research & Presentation (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype.jpg 4)] Canvas Prototype 0.1 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype-2.png 5)] Canvas Prototype 0.2 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-17-12-2013-Prototype-3.png 6)] Canvas Prototype 0.3 (Treehugger / New generating algorithm)

7) Presentation & Heliotropism implemented (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-21-01-2014-Prototype-4.png 8)] Canvas Prototype 0.4 (Treehugger / Increased branch quality & abstract leafs)

File:Treehugger-Johannes-L-21-01-2014-Prototype-4.png

2014-01-21T12:12:16Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2014-01-07T12:38:23Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins] HTML & CSS Assignment (Form)

[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ Zwei] Javascript Assignment (Clock)

[http://www.uni-weimar.de/medien/wiki/images/Threehugger-Johannes-L-20-11-2013.pdf Drei] Project Research & Presentation (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype.jpg Vier] Canvas Prototype 0.1 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-25-11-2013-Prototype-2.png Fünf] Canvas Prototype 0.2 (Treehugger)

[http://www.uni-weimar.de/medien/wiki/images/Treehugger-Johannes-L-17-12-2013-Prototype-3.png Sechs] Canvas Prototype 0.3 (Treehugger / New generating algorithm)

Sieben Presentation & Heliotropism implemented (Treehugger)

IFD:Mobile Apps with HTML5/JohannesL

2013-12-17T11:33:51Z

Johannes:

File:Treehugger-Johannes-L-17-12-2013-Prototype-3.png

2013-12-17T11:31:56Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2013-12-10T11:42:26Z

Johannes:

File:Treehugger-Johannes-L-25-11-2013-Prototype-2.png

2013-12-10T11:41:34Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2013-11-26T12:07:20Z

Johannes:

File:Threehugger-Johannes-L-20-11-2013.pdf

2013-11-26T12:06:10Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:Treehugger-Johannes-L-25-11-2013-Prototype.jpg

2013-11-26T12:03:56Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Mobile Apps with HTML5/JohannesL

2013-11-19T10:56:56Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins] HTML & CSS Assignment (Form)

[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ Zwei] Javascript Assignment (Clock)

IFD:Mobile Apps with HTML5/JohannesL

2013-11-19T10:56:30Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins] HTML & CSS Assignment (Form)
[http://webuser.uni-weimar.de/~soja7876/webapps/zwei/ Zwei] Javascript Assignment (Clock)

IFD:Mobile Apps with HTML5/JohannesL

2013-11-19T10:13:58Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins] HTML & CSS Assignment

IFD:Mobile Apps with HTML5/JohannesL

2013-11-19T10:07:22Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins] (Login form example)

IFD:Mobile Apps with HTML5/JohannesL

2013-11-19T10:07:02Z

Johannes:

[http://webuser.uni-weimar.de/~soja7876/webapps/eins/ Eins]

IFD:Mobile Apps with HTML5/JohannesL

2013-11-11T22:45:51Z

Johannes: Created page with "[http://webuser.uni-weimar.de/~soja7876/webapps/assignment-1.html Eins]"

[http://webuser.uni-weimar.de/~soja7876/webapps/assignment-1.html Eins]

IFD:Mobile Apps with HTML5

2013-11-11T22:39:01Z

Johannes: /* Student Projects */

[[Image:ProcodingMobile.png|right|400px]]
[[:Category:Werkmodul|Werkmodul]] | [[:Category:Fachmodul|Fachmodul]] <br/>
''Lecturer:'' [[Michael Markert]]<br />
''Credits:'' 6 [[ECTS]], 3 [[SWS]]<br />
''Date:'' Tuesdays, 13:30 until 16:00 h<br />
''Venue:'' [[Marienstraße 7b]], Room 105<br />
''First meeting:'' Tuesday, 22. October 2013

==Beschreibung==

Wolltest du schon immer eine App für dein iPhone erstellen? Oder hast du eine tolle Idee für ein "''Creative Coding Experience''" auf deinem iPad? Hast du ein neues Android Tablett und möchtest etwas schickes damit machen? Das ist deine Chance!

Wir werden mit den neuesten cross-platform HTML5 Web-Technologien arbeiten (hauptsächlich mit der ECMA Scriptsprache, besser bekannt als JavaScript; inklusive CSS3), um Apps zu erstellen, die auf deinem internetfähigen mobilen Endgerät laufen.

Themen:
* siehe englische Auflistung

Dieser Kurs wird je nach Bedarf höchstwahrscheinlich auf Englisch abgehalten.

'''Hinweis:''' Wer mit mehreren Endgeräten und Web-Synchronisation arbeiten will, dem wird der gleichzeitige Besuch des Werk-/Fachmoduls von Kollege Gabriel Rausch empfohlen, das auch auf Serverseitige Programmierung eingeht. Aus zeitlichen Gründen können wir das in diesem Kurs nicht tun.

==English description==

Did you ever wish to design an app for your iPhone? Or do you have an idea for this nice creative coding experience on your iPad? Do you have a new Android Tablet and want to make something cool with it? This is your chance!

We will work with the latest cross-platform HTML5 web technologies (mainly the ECMA scripting language, better known as JavaScript; including CSS3) to create applications that will run on your mobile device.

Topics will be:
* Creative Coding on mobile devices
* Introduction to Programming
** Variables
** Functions / Methods
** Objects
** Events
** Best practices and Software Design Patterns (Accessors: Getters/Setters, Creating Objects, Modules…)
* ECMA Script (JavaScript)
* CSS3 (Design, Animation, Transition…)
* HTML5 (Multitouch, Geolocation, Device Orientation, Local Storage, Canvas, WebAudio, SVG...)
* Communication Protocols (JSON, AJAX with XMLHttpRequest), using the API of WebServices (Google, FlickR, Twitter, Yahoo Pipes, Facebook...)
* JavaScript Libraries (Processing.js, Paper.js, D3.js, jQuery Mobile and many more…)
* Webapps and Hybrid Apps (that's a webApp that is wrapped in a native application that you can download from an app store)

This course will most likely be held in English

==Requirements==
* Your own computer (Laptop) with a proper plain text code editor
* Your own mobile device that's capable of browsing the internet
* If you have a computer running Mac OS X 10.7 or newer, you'll get a free copy of [http://procoding.audiocommander.de Procoding]
* If you have an iPhone, iPad or iPod Touch running iOS 7 or newer, you'll get a free copy of [http://procoding.audiocommander.de Procoding Mobile]
* Procoding is not required, if you have another system, you'll get a starter package that you can edit with the code editor of your choice.

== Registration Procedure ==


THE COURSE IS FULL. NO MORE REGISTRATIONS ACCEPTED.

== Assignment ==
* Regular and active participation
* Working on the weekly assignments and documenting them in this Wiki
* Presentation of your work in progress in the course
* Presentation of your work at the [[IFD:Showreel]]
* Final hand-in (in this Wiki) with short documentation at the end of the term

== Student Projects ==
Please copy this first entry (NameOrPseudonym) and make your own subpages:
* That's what the Wiki-Code means:
** The first two brackets create a infernal link in this wiki (this creates a new page).
** The slash "/" makes the page a subpage of this page

* [[/NameOderPseudonym]] <-- Please '''''copy''''' this link and use your own name (this is a public wiki!).
* [[/Charlotte]]
* [[/mantik]]
* [[/Anastasiya Pavelchuk]]
* [[/Sabina]]
* [[/Xianzhi]]
* [[/MartinMelcher]]
* [[/NataSuu]]
* [[/YorGarcia]]
* [[/AndrésArteaga]]
* [[/Bastiny]]
* [[/Julia]]
* [[/Jano]]
* [[/ElMerino]]
* [[/Apasri]]
* [[/Alex]]
* [[/JohannesL]]

'''Btw:'''<br/>
[[Help:Editing|Help]] shows how to edit in this wiki; [[Help:Images|How to upload and use images]]. Please do not upload content that you did not create.

== Eligible participants ==
* Bachelor Students Media Art & Design
* Master Students Media Art & Design
* Master Students MediaArchitecture
* All others: if you're interested, get in contact with Michael!

==Syllabus==
Preliminary schedule:
# 22.10. First meeting, Intro & Showcase
# 29.10. HTML, CSS & jQuery Mobile
# <del>05.11. no class</del> due to an excursion!
# 12.11. CSS, JavaScript (ECMA): Variables & Functions
# 19.11. Objects
# 26.11. Event Handlers (Drawing with a Touch)
# 03.12. Networking (XMLHttpRequest), Yahoo Pipes (XML to JSON)
# 10.12. Geolocation & Device Orientation
# 17.12. Communication Part II (FlickR API)
# 07.01. SVG
# 14.01. JS Libs Part I
# 21.01. JS Libs Part II
# 28.01. Hybrid Apps Part I
# 04.02. Hybrid Apps Part II
# 31.03. tba

== Links ==

* [http://procoding.audiocommander.de Procoding]

== Literature ==
Beginners:
* Marijn Haverbeke: Die Kunst der JavaScript Programmierung (DE) / Eloquent JavaScript (EN), ISBN 9873898647878, http://marijnhaverbeke.nl
* Florian Franke: Apps mit HTML5 und CSS3: für iPad, iPhone und Android (DE), ISBN 978-3836218481

Advanced:
* Stoyan Stefanov: O'Reilly JavaScript Patterns, ISBN 978-0596806750

Processing and Processing.js:
* Daniel Shiffman: Pixels, Patterns, and Processing: A Beginner's Guide to Programming Images, Animation, and Interaction, ISBN 978-0123736024
* Daniel Shiffman: The Nature of Code: Simulating Natural Systems with Processing, ISBN 978-0985930806, http://natureofcode.com

[[Category:Courses]]
[[Category:CSS]]
[[Category:Cocoa]]
[[Category:Computer graphics]]
[[Category:Design]]
[[Category:GPS]]
[[Category:GUI]]
[[Category:Generative Gestaltung]]
[[Category:Gestaltung]]
[[Category:Grundlagen]]
[[Category:HTML]]
[[Category:IDE]]
[[Category:IFD]]
[[Category:IOS]]
[[Category:IPad]]
[[Category:IPhone]]
[[Category:IPodTouch]]
[[Category:Interaktion]]
[[Category:Internet]]
[[Category:Michael Markert]]
[[Category:Mobile Development]]
[[Category:Mobile Interfaces]]
[[Category:Objective-C]]
[[Category:Processing]]
[[Category:Programmiersprachen]]
[[Category:WS13]]
[[Category:Webtechnologien]]
[[Category:Werkmodul]]
[[Category:Xcode]]
[[Category:Javascript]]
[[Category:Fachmodul]]

IFD:ShowreelWS1112/Johannes - Museum

2012-02-02T22:31:43Z

Johannes: Created page with "==Digitales Osmantinum== ===Johannes Lerdon=== ====iOS Development II==== File:Johannes_ldn_osm_1.png File:Johannes_ldn_osm_2.png File:Johannes_ldn_osm_3.png [[File:..."

==Digitales Osmantinum==
===Johannes Lerdon===
====iOS Development II====

[[File:Johannes_ldn_osm_1.png]]
[[File:Johannes_ldn_osm_2.png]]
[[File:Johannes_ldn_osm_3.png]]
[[File:Johannes_ldn_osm_4.png]]
[[File:Johannes_ldn_osm_5.png]]
[[File:Johannes_ldn_osm_6.png]]

File:Johannes ldn osm 6.png

2012-02-02T22:28:57Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Johannes ldn osm 5.png

2012-02-02T22:28:23Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Johannes ldn osm 4.png

2012-02-02T22:27:34Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Johannes ldn osm 3.png

2012-02-02T22:26:59Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Johannes ldn osm 2.png

2012-02-02T22:26:00Z

Johannes: /* Source: */

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}

File:Johannes ldn osm 2.png

2012-02-02T22:25:06Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

File:Johannes ldn osm 1.png

2012-02-02T22:22:11Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

IFD:Designing For Action/Carlo, Johannes, Sven

2011-04-22T16:23:42Z

Johannes: /* Questions */

This project is presented by '''[[User:Carlo Enke|Carlo Enke]] ● Johannes Lerdon ● [[User:Sven|Sven Sommerlatte]]'''.

==Concept==

[[File:plain_bookmarks.png|right]]

===Which problem did you identify?===

There is no simple, quick-to-use solution that allows average web users to sort their bookmarks by relevance (rating,visits).

===Why are current systems unable to solve this problem?===

They are unable to solve this problem because they are not as practicable and efficient as they should/could be. Most systems solving special cases but no one is combining current systems to get a real useful 'built-in toolbar'. Another big fail is the design of the current ones - it's not really intuitive and much too interlaced.

===Interviewing results===

Users...
* predominantly using the bookmark-toolbar
* arrange their bookmarks on-the-fly
* propose a relevance ranking
* want a clearly design

Only a few of them use folders and those who do not use bookmarks, close the browser and “Save and Exit”.

===What research findings led you to your first concept?===

In our reseach we figured out that most users don't use 'advanced' bookmarking (e.g. tags) to increase their workflow. In fact of this, we can say it's quite bad arranged/implemented. So we wanted to merge our ideas of a new toolbar with newly-arranged advance functions.

===In 140 characters, what is the essence of your project/solution?===

Our solution intends to help average web users better organize, arrange and re-find bookmarks as easy and fast as possible.

==Implementation==

===How did you ensure that a beginner can use your solution?===

The most important thing of our plannings was that we wanted not to implemet any new standards, because these can easily become confusing. Therefore we tried to assume and combine all known systems and automate advanced functions as much as possible.

A bookmark consists of a screenshot of the page, its title, URL, favicon, current date and the relevance to the user - rated by the user. The clou is, most data will automatically be added. Last visit, visits and frequency of use will be updated over time.

===What makes your solution more useful or efficient than current products?===

Our product will not reinvent bookmarking, but combine existing products and optimize them in combination to obtain an easy-to-use toolbar.

===Our solution in comparison to other ones===

..coming soon

===Questions===

'''What happens if there is a very long list of bookmarks in a given folder?'''<br>
'''Does the menu extend beyond the page fold at the bottom of the browser?'''

No. There is a given padding between browser window and bookmark list. The list will automatically fit to the screen. If there are more bookmarks, than can be showed on the screen arrows will be displayed to navigate (horizontally) through the list.

'''What are the limits to the number of bookmarks that can put in a folder?'''

There is no limitation.

'''Did you consider filtering bookmarks in addition to just sorting them?'''

This would be a nice feature. After your proposal we are about to implement such a feature in a suitable way.

''(Essential: Sketches and/or Video to illustrate the interaction)''

[http://drop.st/8kWXMG 01/02/2011] The live search function has been implemented within the address input field.

[http://drop.st/F6FndZ 19/01/2011] Short demonstration video of how the bookmarks live search is working.

[http://drop.st/n38r5b 15/12/2010] A video showing the first version of a partly functioning prototype built using HTML, CSS, Javascript (JQuery), PHP and MySQL.

<videoflash type=youtube>f_zAZgPOanI</videoflash>

[[File:Jl_prototype_3_mockup.png‎]]

[[File:Sketch-Johannes.png|400px]]

==User tests==

===How did you test your design?===

Our prototype has been tested by about 10 people - our class and circle of acquaintances. We provided them a limited prototype created with PHP, SQL and jQuery. So they were able to use the protoype straightforward. Furthermore each tester has been introduced briefly to the prototype.

===What new problems did you identify?===

While testing the prototype some of the testers claimed that it would be much easier to have only one textfield. Furthermore the prototype does not have a history function so a switch would be necessary. So the user could choose which database should be searched on keydown.

===What did you change following your user tests?===

We've merged the live search with the address bar as shown in the third demonstration video.

==Mentor Comments==

===James Kalbach===

'''Concept'''
* In larger projects teams and within organizations, the ability to communicate design clearly and succinctly is very important. The problem definition for this project is unclear and includes many different aspects: bookmark toolbar, relevance, clear design, using folders. I’d like to hear a more focused statement about the issue you’re addressing.
* What type of “research” did you conduct, with how many people, and with whom?
* The essence of your project statement is more than 140 characters. It should just include who, what, where, why, when and how. Perhaps something like: “Our solution intends to help average web users better organize, arrange and re-find bookmarks they’ve created in a local browser.”

'''Implementation'''
* The explanation of the solution is well done. The video in particular is very good and goes a long way in illustrating the intent of your project.
* I would have liked to have heard more about existing solutions for bookmarking and a comparison of their capabilities and shortcomings against your idea.
* The sorting features are good on the folders.
* What happens if there is a very long list of bookmarks in a given folder? Does the menu extend beyond the page fold at the bottom of the browser? What are the limits to the number of bookmarks that can put in a folder?
* Did you consider filtering bookmarks in addition to just sorting them?
* What alternative directions did you explore before arriving at this solution?

'''User tests'''
* Please describe more about the tests you conducted, including an indication of the method, users, and findings.

Overall, this is a well-thought-out project that really shows you paid attention to the detail of interaction design and the overall experience.

Excellent work.

===Cennydd Bowles===

I'm impressed. It's a solution that shows clear, detailed thought.

I too think you could be more precise with your definition of the problem, since it jumps around a little and lacks the precision we see in your prototypes. A little more detail about the research you've conducted would help make a stronger case for your work.

I think you're wise to adopt the approach that existing convention matters and that there is value in recombining and improving existing solutions. Due to the mass audience for this sort of system, there's definitely a MAYA principle thing going on here (see cennydd.co.uk/2008/maya-principle/) and it would be easy to detract from the system's usability and UX by going too far in the quest for perfection.

Your prototypes are impressive and well executed, and I'd say you're very close to a real breakthrough - although I must confess that the third version doesn't convince me, mostly since the user's attention is required in two locations simultaneously; the URL and the search function. Is there yet a simpler solution that recombines the visual focus in an elegant way?

===Eric Reiss===

To continue the discussion we started when I visited you in Weimar, the problem you set out to solve is unclear. The description of the problem actually describes the current usage pattern, but doesn't identify the problem. Hence, the ultimate success of your project is unclear as I am still uncertain as to what your goals were - the essence of innovation: solving a problem.

In general, the more time you spend discussing and defining the problem, the easier it is to create a solution and critique it internally within the design team. I just don't feel you spent enough time on this. Instead, I suspect you took the assignment and immediately started sketching stuff.

I do like that you build on existing best-practices. I am unsure (like Jim) as to how your proposed solution will scale (a problem, I might add, that you share with several of the other project groups).

The prototype is indeed impressive. Nicely done. It gives a much clearer picture of what you want to achieve - for me, it seems to help the user recall WHICH site they bookmarked and WHY they did so. And although you didn't state this clearly, it IS a problem and your attempt to solve it is excellent. Well done, gentlemen!

IFD:Designing For Action/Carlo, Johannes, Sven

2011-02-01T19:23:58Z

Johannes: /* Prototype */

<span style="font-size: 40px;">Plain Bookmarks</span>

This project is presented by '''[[User:Carlo Enke|Carlo Enke]] ● Johannes Lerdon ● [[User:Sven|Sven Sommerlatte]]'''.

http://i.creativecommons.org/l/by-sa/3.0/88x31.png

==Description==

[[File:Sketch-Johannes.png|300px|right]]

The main focus was to ease the arrangement of bookmarks and an auto-complete-like search through saved bookmarks. In addition to the auto-completion there will be the possibility to rank each page by their relevance to the user.

A bookmark consists of a screenshot of the page, its title, URL, favicon, current date and the relevance to the user - rated by the user. The clou is, most data will automatically be added. Last visit, visits and frequency of use will be updated over time.

<br clear="all" />

==Prototypes==

===Prototype #1 (Johannes)===

[http://www.lerdon.com/downloads/plain_bookmarks_prototype_3.mov 01/02/2011] The live search function has been implemented within the address input field.


[http://www.lerdon.com/downloads/plain_bookmarks_prototype_2.mov 19/01/2011] Short demonstration video of how the bookmarks live search is working.


[http://www.lerdon.com/downloads/plain_bookmarks_prototype.mov 15/12/2010] A video showing the first version of a partly functioning prototype built using HTML, CSS, Javascript (JQuery), PHP and MySQL.

====Test Results====

While testing the second version of the prototype some of the testers claimed that it would be much easier to have only one textfield so I've merged the live search with the address bar as shown in the third demonstration video. However, my prototype does not have a history function so a switch would be necessary so the user could choose which database should be searched on keydown.

[[File:Jl_prototype_3_mockup.png‎]]

===Prototype #2 (Carlo, Sven)===

[[File:prototype2.gif|420px]]

====Test Results====

All users appreciate the application quite good. Marking of individual images, textsamples or just a word causing confusion firstly. But after a short instruction most of the tester became familiar with it and finally liked it.

====Problems====

* Add bookmarks:
** the fields "type" and "size" in the box "Adding Bookmarks" were not coherent enough ''(prototype #1)''

* Find bookmarks:
** finding with live search - no list of all bookmarks ''(prototype #2)''

==Interviews==
===Result===
Respondents...
* predominantly using the bookmark-toolbar -> most practicable and efficient
* arrange their bookmarks on-the-fly
* propose a relevance ranking
* want a clearly design -> overlay should be visible

Only a few of them use folders and those who do not use bookmarks, close the browser and “Save and Exit”.

===Problems===

Respondents...

* feel ill-informed of other useful plug-ins
* do not care about "advanced" bookmarking (e.g. tags)

The bookmark-toolbar is width-delimited by the users display and its resolution.

==Goals==
* enable a fast access to bookmarks
* automation of arranging/storing via meta-data
* focussing on usability
* sort bookmarks by relevance and the frequency of use
* no data loss

==Non-Goals==
* focussing on graphic fooling
* complicate bookmarking
* removal of the bookmark function

File:Jl prototype 3 mockup.png

2011-02-01T19:19:23Z

Johannes:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:Designing For Action/Carlo, Johannes, Sven

2011-01-19T03:12:32Z

Johannes: /* Prototype */

==Description==
===“Plain Bookmarks”===

[[File:Sketch-Johannes.png|300px|right]]

This project is presented by '''[[User:Carlo Enke|Carlo Enke]] ● Johannes Lerdon ● [[User:Sven|Sven Sommerlatte]]'''.

http://i.creativecommons.org/l/by-sa/3.0/88x31.png

The main focus was to ease the arrangement of bookmarks and an auto-complete-like search through saved bookmarks. In addition to the auto-completion there will be the possibility to rank each page by their relevance to the user.

A bookmark consists of a screenshot of the page, its title, URL, favicon, current date and the relevance to the user - rated by the user. The clou is, most data will automatically be added. Last visit, visits and frequency of use will be updated over time.

==Prototype==

01/19/2011 [http://lerdon.com/downloads/plain_bookmarks_prototype_2.mov plain_bookmarks_prototype_2.mov]
Short demonstration video of how the bookmarks live search is working. ''(Johannes)''

12/15/2010 [http://lerdon.com/downloads/plain_bookmarks_prototype.mov plain_bookmarks_prototype.mov]
A video showing the first version of a partly functioning prototype built using HTML, CSS, Javascript (JQuery), PHP and MySQL. ''(Johannes)''

==Interviews==
===Result===
Respondents...
* predominantly using the bookmark-toolbar -> most practicable and efficient
* arrange their bookmarks on-the-fly
* propose a relevance ranking
* want a clearly design -> overlay should be visible

Only a few of them use folders and those who do not use bookmarks, close the browser and “Save and Exit”.

===Problems===
'' In analysing problems you should concentrate on things that are bad for the users right now and perceived as a problematic thing by them. It is not a problem that users think they have if they don't care about bookmarking. Its a problem of the people who designed the current thing that is not used though. A problem from that area would be that they want save things but are frustrated because they don't know how. But I don't know if the interviews revealed that, so don't write it if you don't have it as result. '' --[[User:JanD|JanD]] 14:48, 3 December 2010 (CET)
Respondents...

* feel ill-informed of other useful plug-ins
* do not care about "advanced" bookmarking (e.g. tags)

The bookmark-toolbar is width-delimited by the users display and its resolution.

==Goals==
* enable a fast access to bookmarks
* automation of arranging/storing via meta-data
* focussing on usability
* sort bookmarks by relevance and the frequency of use
* no data loss

==Non-Goals==
* focussing on graphic fooling
* complicate bookmarking
* removal of the bookmark function

GMU:Basic Kinetics/projekte/Johannes Lerdon

2010-12-21T01:16:57Z

Johannes: /* Der automatisierte Cajon */

== Der automatisierte Cajon ==

'''Entwurf und Ideenfindung'''

[[File:Jl_cajon_sketch.jpg|thumb|140px|right]]

Um der [[GMU:Basic_Kinetics/projekte#Die_Sound-Maschine|kinetischen Musikmaschine]] einen perkussiven Aspekt zu verleihen, entschloss ich mich ein Element auf Basis eines Cajons, eines auch Kistentrommel genanntes Instrument aus Peru, aufzubauen. Hierbei sollte zuerst der Cajon im Eigenbau entstehen und darauf dann das Konstrukt zum Anschlagen der Schlagplatte gesetzt werden.

Das Anschlagen soll durch eine Welle erreicht werden, dessen Frequenz modular verändert werden kann und die jeweils einen der drei unabhängig voneinander agierenden Schlägern von der Schlagplatte wegdrückt (Hebelkraft). Alleine durch die Schwerkraft und das Gewicht der Schläger wird dann ein Ton erzeugt. Durch die unterschiedliche Platzierung der Schläger im Verhältniss zu der Schlagplatte variieren dann zudem die Töne.

<br clear="all" />

'''Funktionsmodell'''

Um die Funktionalität des Anschlagmechanismus zu testen, wurde ein vereinfachtes 1:1 Modell aus Pappe mit nur einem Schläger erstellt.

[[File:Jl_cajon_front.jpg|thumb|300px|left]]
[[File:Jl_cajon_back.jpg|thumb|300px|left]]

<br clear="all" />

'''Der Bauprozess'''

Nach dem erfolgreichen Testen des Modells wurde nun das eigentliche Instrument aus Multiplex und Birkenholz gebaut. Um dieses besser transportieren zu können und den eigentlichen Klangkörper und dessen Resonanz zu schützen, wurde der Anschlagmechanismus nicht wie zuvor geplant direkt auf den Cajon gesetzt, sondern mit einem Rahmen verbunden, der bei Bedarf jederzeit wieder entfernt werden kann. Der Welle wurde zudem eine Kurbel für den Handbetrieb hinzugefügt, um diese auch außerhalb der Maschine betreiben zu können und das Gewicht des Zahnkranzes auszugleichen.

[[File:Jl_cajon_001.jpg|thumb|300px|left]]
[[File:Jl_cajon_002.jpg|thumb|300px|left]]
[[File:Jl_cajon_003.jpg|thumb|300px|left]]
[[File:Jl_cajon_004.jpg|thumb|300px|left]]
[[File:Jl_cajon_005.jpg|thumb|300px|left]]
[[File:Jl_cajon_006.jpg|thumb|300px|left]]

<br clear="all" />

'''Der fertige Cajon im Zusammespiel mit der Maschine'''

[[File:Jl_cajon_final_1.jpg|thumb|300px|left]]
[[File:Jl_cajon_final_2.jpg|thumb|300px|left]]
[[File:Jl_cajon_final_3.jpg|thumb|300px|left]]
[[File:Jl_cajon_final_4.jpg|thumb|300px|left]]
[[File:Jl_cajon_final_5.jpg|thumb|300px|left]]

<br clear="all" />

'''In Bewegung'''

<videoflash type=vimeo>17919683</videoflash>

<br clear="all" />

''Basic Kinetics / Sebastian Hundertmark / Wintersemester 2010''

GMU:Basic Kinetics/projekte/Johannes Lerdon

2010-12-20T02:06:04Z

Johannes: /* Der automatisierte Cajon */

File:Jl cajon sketch.jpg

2010-12-20T00:59:26Z

Johannes:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==