m (→Anmeldung) |
m (→Links) |
||
| (21 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
''Bewertung:'' 6 [[ECTS]], 2 [[SWS]]<br/> | ''Bewertung:'' 6 [[ECTS]], 2 [[SWS]]<br/> | ||
''Termin:'' Mittwochs, 11:00 bis 12:30 Uhr <!-- [[Zeitraster]] beachten --><br/> | ''Termin:'' Mittwochs, 11:00 bis 12:30 Uhr <!-- [[Zeitraster]] beachten --><br/> | ||
''Ort:'' [[Bauhausstraße 11]], LiNT Pool | ''Ort:'' [[Bauhausstraße 11]], [[LiNT Pool]]<br/> | ||
''Erster Termin und Kick-Off-Veranstaltung mit Platzvergabe im Kurs'':<br/> | ''Erster Termin und Kick-Off-Veranstaltung mit Platzvergabe im Kurs'':<br/> | ||
<u>'''mit Aufgabenstellung am:<br/> | <u>'''mit Aufgabenstellung am:<br/> | ||
Mittwoch, den | Mittwoch, den 20.10.2010, 11 Uhr (könnte etwas länger dauern)<br/> | ||
in der Bauhausstr. 11, LiNT Pool'''</u><br/> | in der Bauhausstr. 11, LiNT Pool'''</u><br/> | ||
''siehe auch [[#Anmeldung]]'' | ''siehe auch [[#Anmeldung]]'' | ||
| Line 21: | Line 20: | ||
Folgende Themen werden behandelt: | Folgende Themen werden behandelt: | ||
* Einführung in die layoutbeschreibenden Formate HTML/CSS | |||
* Clientseitige Programmierung mit JavaScript | |||
* Einbinden von JS-Frameworks | |||
* Serverseitige Programmierung mit PHP | |||
Dabei steht nicht die Beherrschung komplexer proprietärer Anwendungsprogramme wie z.B. Dreamweaver im Vordergrund, sondern der Versuch, die Terminologie und Zusammenhänge soweit verständlich zu machen, dass die Teilnehmer anschließend mit jedem Programm ihrer Wahl arbeiten können. Ebenso wichtig ist die Fähigkeit, Dokumentationen verstehen und nutzen zu können. | Dabei steht nicht die Beherrschung komplexer proprietärer Anwendungsprogramme wie z.B. Dreamweaver im Vordergrund, sondern der Versuch, die Terminologie und Zusammenhänge soweit verständlich zu machen, dass die Teilnehmer anschließend mit jedem Programm ihrer Wahl arbeiten können. Ebenso wichtig ist die Fähigkeit, Dokumentationen verstehen und nutzen zu können. | ||
Gut gestaltete Webinterfaces beziehen technische Möglichkeiten mit ein und erfordern Optimierung für Endgeräte. Das beginnt bei unterschiedlichen Displaygrössen, geht über prinzipielle Fragen der Interaktion und Präsentation und endet bei grundsätzlichen Fragen der Bedienbarkeit, z.B. bei Geräten mit Touchscreen (kein Rollover, große Schaltflächen etc). | Gut gestaltete Webinterfaces beziehen technische Möglichkeiten mit ein und erfordern Optimierung für Endgeräte. Das beginnt bei unterschiedlichen Displaygrössen, geht über prinzipielle Fragen der Interaktion und Präsentation und endet bei grundsätzlichen Fragen der Bedienbarkeit, z.B. bei Geräten mit Touchscreen (kein Rollover, große Schaltflächen etc). | ||
Weitere Themen sind die Vorstellung von HTML5, CSS3 und JavaScript (Einführung in JS), hier insbesondere die Nutzung gängiger JavaScript Libraries wie z.B. jQuery. | Weitere Themen sind die Vorstellung von HTML5, CSS3 und JavaScript (Einführung in JS), hier insbesondere die Nutzung gängiger JavaScript Libraries wie z.B. jQuery. | ||
==English description== | ==English description== | ||
A | A variety of new technologies, the availability of open-source server applications (blogs, forums or even shop systems) and a valid design for a multitude of different terminals (eg. PCs, netbooks, mobile phones, netpads, TV-sets...) require a deep understanding of the underlying technology. | ||
We will first look at the layout description formats HTML/CSS, then concentrate on the usage of programs on the server (PHP). | We will first look at the layout description formats HTML/CSS, then concentrate on the usage of programs on the server (PHP). | ||
| Line 40: | Line 39: | ||
* Dynamic Web Content (CMS, Blog, Social Media...) | * Dynamic Web Content (CMS, Blog, Social Media...) | ||
This elementary course | This elementary course will lay the foundations for later advanced courses around web technologies, interactive systems and wireless communication (e.g. with mobile devices like the iPhone, Android or JAVA-enabled cell phones) and is open for all students from faculties M and G. | ||
To enroll, you have to come to the Kick-Off presentation and hand in a short concept of your idea (see [[#Anmeldung]]. The number of enrolled students for this course has a maximum of 20. | To enroll, you have to come to the Kick-Off presentation and hand in a short concept of your idea (see [[#Anmeldung]]. The number of enrolled students for this course has a maximum of 20. | ||
| Line 57: | Line 56: | ||
==Voraussetzungen== | ==Voraussetzungen== | ||
Aufgrund der eingereichten Konzepte wird | Aufgrund der eingereichten Konzepte wird entschieden, wer in den Kurs kommt. Es werden keine Teilnehmer aufgenommen, die nicht bei der Kick-Off Veranstaltung waren. | ||
Der Kurs kann mit 2 SWS kein umfassendes Wissen in allen speziellen Teilgebieten vermitteln, sondern soll einer schnellen Übersicht und groben Orientierung dienen. Deshalb ist die Bereitschaft der Teilnehmer, sich weitergehend und selbstständig (auch über die 2 SWS der Vorlesung hinaus!) in bestimmte Teilbereiche einzuarbeiten, von elementarer Voraussetzung! | Der Kurs kann mit 2 SWS kein umfassendes Wissen in allen speziellen Teilgebieten vermitteln, sondern soll einer schnellen Übersicht und groben Orientierung dienen. Deshalb ist die Bereitschaft der Teilnehmer, sich weitergehend und selbstständig (auch über die 2 SWS der Vorlesung hinaus!) in bestimmte Teilbereiche einzuarbeiten, von elementarer Voraussetzung! | ||
==Anmeldung== | ==Anmeldung== | ||
Aufgrund der | Aufgrund der zu erwartenden hohen Nachfrage, wird es eine Kick-Off Veranstaltung geben, die für alle Interessierten offen steht. Neben einer Vorstellung der Inhalte und Ziele, '''muss jeder am Ende der Einführungsveranstaltung ein Kurzkonzept seiner Arbeit einreichen, die er im Rahmen dieses Kurses umsetzen möchte!''' | ||
Kurz-Konzept (max. 2 DIN-A4 Seiten): | Kurz-Konzept (max. 2 DIN-A4 Seiten): | ||
| Line 70: | Line 69: | ||
* Technik (welche Technik / Software / Sprache soll zum Einsatz kommen?) | * Technik (welche Technik / Software / Sprache soll zum Einsatz kommen?) | ||
* Layout-Scribbles (ca. 2 bis 10 kleine Layout-Scribbles, ca. 5 cm breit) | * Layout-Scribbles (ca. 2 bis 10 kleine Layout-Scribbles, ca. 5 cm breit) | ||
* Name, Semester, Matrikel-Nummer, Prüfungsordnung (z.B. PV29), gültige E-Mail Adresse für die Antwort | |||
Diese Liste dient nur der Orientierung. Wir legen bei der Auswahl der Bewerber Augenmerk auf folgende Punkte: | |||
* Motivation | |||
* Idee (interessantes Projekt) | |||
* Bereitschaft zum Erlernen von Programmiersprachen | |||
* Grafische und designerische Fähigkeiten | |||
* Künstlerische Fragestellung und/oder kommerzielles Potential | |||
Die maximale Anzahl der Teilnehmer ist 20. | Die maximale Anzahl der Teilnehmer ist 20. | ||
| Line 78: | Line 85: | ||
* Eigenständiges Arbeiten und selbstständiges Anwenden der im Kurs vermittelten Themen | * Eigenständiges Arbeiten und selbstständiges Anwenden der im Kurs vermittelten Themen | ||
* Bereitschaft zur Auseinandersetzung mit Programmierung und Quellcode | * Bereitschaft zur Auseinandersetzung mit Programmierung und Quellcode | ||
* Umsetzung einer Projektidee (Anwendung gelernter Inhalte am Beispiel, also z.B. (Wordpress-)Template, Netzkunst-Projekt, WebApp, mobile WebApp ...). Eine Verknüpfung mit netzbasierten | * Umsetzung einer Projektidee (Anwendung gelernter Inhalte am Beispiel, also z.B. (Wordpress-) Template, Netzkunst-Projekt, WebApp, mobile WebApp ...). Eine Verknüpfung mit netzbasierten Projektmodulen ist möglich und erwünscht. | ||
* Zwischenabgabe (Working Dummy) | * Zwischenabgabe (Working Dummy) | ||
* Endabgabe (Umsetzung) | * Endabgabe (Umsetzung) | ||
| Line 84: | Line 91: | ||
Die Endabgabe wird laut Prüfungsordnung als "künstlerische Prüfung" vom Dozenten und einem Zweitprüfer bewertet. | Die Endabgabe wird laut Prüfungsordnung als "künstlerische Prüfung" vom Dozenten und einem Zweitprüfer bewertet. | ||
Die Gesamtbewertung setzt sich zusammen aus: | |||
* 20% Anwesenheit, Mitarbeit | |||
* 20% begleitende Dokumentation, Zwischendokumentation/-abgabe | |||
* 60% Abgabe mit folgenden Kriterien: | |||
** Mediale Relevanz (Relevanz des Projekts im Bezug auf das Medium Internet, Bildschirm, mobil, digital etc...) | |||
** Kommunikationsziel (inhaltliche, grafische und repräsentative Umsetzung in Bezug auf den Zweck der Seite) | |||
** Interaktion / Interface | |||
** Barrierefreiheit (hierzu zählt auch die Anzeige auf unterschiedlichen Endgeräten), bzw. mindestens Bewusstsein über möglicherweise auftretende Probleme | |||
** Technische Umsetzung | |||
** Anwendung gelernter Inhalte und Hilfe zur Selbsthilfe | |||
* + 10% Wiki-Bonus (bitte bei Michael kurz Bescheid geben) | |||
Hinweis: Manche der Kriterien können natürlich nur in Verbindung mit der begleitenden Dokumentation bewertet werden. | |||
<u>Nicht ausreichend</u> sind Abgaben, wie: | <u>Nicht ausreichend</u> sind Abgaben, wie: | ||
| Line 102: | Line 124: | ||
==Syllabus== | ==Syllabus== | ||
Vorläufiger Terminplan | Vorläufiger Terminplan | ||
# | # 20.10. KICK-OFF Veranstaltung | ||
# 27.10. [[HTML]] | |||
# 27.10. | # 03.11. [[CSS]] | ||
# 03.11. | # 10.11. [[CSS]] | ||
# 10.11. | # 17.11. [[JavaScript]] | ||
# 17.11. | # 24.11. JavaScript | ||
# 24.11. | # 01.12. JavaScript | ||
# 01.12. | # 08.12. Projektbesprechungen | ||
# 08.12. | # 15.12. Projektbesprechungen | ||
# 15.12. | # 05.01. jQuery, jQueryUI | ||
# 05.01. | # 12.01. [[AJAX]] | ||
# 12.01. | # 19.01. HTML5 & JavaScript, Canvas, processingjs | ||
# 19.01. | # 26.01. Zusammenfassung | ||
# 26.01. | # 02.02. Projektvorstellung (alle) | ||
# 15.03. Abgabe der Projekte (Dokumentation im Wiki, Link zur Seite bzw. Code-Abgabe) | |||
== Links == | == Links == | ||
| Line 125: | Line 148: | ||
* [[PHP]] | * [[PHP]] | ||
* [[Webapps|PHP/MySQL Webapplications]] | * [[Webapps|PHP/MySQL Webapplications]] | ||
* [[AJAX]] | |||
'''Allgemeines''' | '''Allgemeines''' | ||
| Line 132: | Line 156: | ||
* [[SCC-Services]] der Bauhaus-Universität (z.B. HTML Webspace!) | * [[SCC-Services]] der Bauhaus-Universität (z.B. HTML Webspace!) | ||
* [[Suchmaschinenoptimierung]] | * [[Suchmaschinenoptimierung]] | ||
* [[Webprogramming Tools]] | |||
* [[MySQL]] | * [[MySQL]] | ||
* [http://www.google.com/support/websearch/bin/answer.py?answer=136861 How to search Google] (or nearly any other search engine) | * [http://www.google.com/support/websearch/bin/answer.py?answer=136861 How to search Google] (or nearly any other search engine) | ||
| Line 141: | Line 166: | ||
'''Siehe auch''' | '''Siehe auch''' | ||
* [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html#web-technology Web-Technologien] - Lecture Notes (PDF) der Mediensysteme / Bauhaus Universität-Weimar | * [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html#web-technology Web-Technologien] - Lecture Notes (PDF) der Mediensysteme / Bauhaus Universität-Weimar | ||
* [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Excellent WebStandards Course on dev.opera.com] | |||
| Line 162: | Line 188: | ||
[[Category:Webdesign]] | [[Category:Webdesign]] | ||
[[Category:Webtechnologien]] | [[Category:Webtechnologien]] | ||
[[Category:Werkmodul]] | |||
Latest revision as of 10:51, 2 December 2011
Werkmodul
Lehrperson: Michael Markert
Bewertung: 6 ECTS, 2 SWS
Termin: Mittwochs, 11:00 bis 12:30 Uhr
Ort: Bauhausstraße 11, LiNT Pool
Erster Termin und Kick-Off-Veranstaltung mit Platzvergabe im Kurs:
mit Aufgabenstellung am:
Mittwoch, den 20.10.2010, 11 Uhr (könnte etwas länger dauern)
in der Bauhausstr. 11, LiNT Pool
siehe auch #Anmeldung
Beschreibung
Das Werkmodul richtet sich an Studierende gestaltender Studiengänge (künstlerische Prüfung, kein wiss. Modul), die eine Idee (gerne auch Teilbereich eines größeren Projektes) aus den folgenden Bereichen umsetzen möchten:
- Netzkunst (Interaktion, generative Gestaltung)
- WebApps (Applikationen für mobile Endgeräte)
- Dynamische Webseiten (CMS, Blog, Social Media ...)
Eine Vielzahl neuer Technologien, die Verfügbarkeit von Open-Source Server-Anwendungen (Blogsoftware, Foren, Shopsysteme usw.) sowie eine unüberschaubare Vielfalt an unterschiedlichsten Endgeräten (neben dem Desktop auch Netbooks, Mobiltelefone, PDAs, Netpads, TV-Geräte...) erfordern vom Gestalter ein Verständnis der zugrundeliegenden Technologien, um den Herausforderungen an dynamisch erzeugte Inhalte und unterschiedliche Darstellung in Endgeräten gerecht zu werden.
Folgende Themen werden behandelt:
- Einführung in die layoutbeschreibenden Formate HTML/CSS
- Clientseitige Programmierung mit JavaScript
- Einbinden von JS-Frameworks
- Serverseitige Programmierung mit PHP
Dabei steht nicht die Beherrschung komplexer proprietärer Anwendungsprogramme wie z.B. Dreamweaver im Vordergrund, sondern der Versuch, die Terminologie und Zusammenhänge soweit verständlich zu machen, dass die Teilnehmer anschließend mit jedem Programm ihrer Wahl arbeiten können. Ebenso wichtig ist die Fähigkeit, Dokumentationen verstehen und nutzen zu können.
Gut gestaltete Webinterfaces beziehen technische Möglichkeiten mit ein und erfordern Optimierung für Endgeräte. Das beginnt bei unterschiedlichen Displaygrössen, geht über prinzipielle Fragen der Interaktion und Präsentation und endet bei grundsätzlichen Fragen der Bedienbarkeit, z.B. bei Geräten mit Touchscreen (kein Rollover, große Schaltflächen etc).
Weitere Themen sind die Vorstellung von HTML5, CSS3 und JavaScript (Einführung in JS), hier insbesondere die Nutzung gängiger JavaScript Libraries wie z.B. jQuery.
English description
A variety of new technologies, the availability of open-source server applications (blogs, forums or even shop systems) and a valid design for a multitude of different terminals (eg. PCs, netbooks, mobile phones, netpads, TV-sets...) require a deep understanding of the underlying technology. We will first look at the layout description formats HTML/CSS, then concentrate on the usage of programs on the server (PHP).
This course (in German language) is intended for students of all design oriented study programmes, who are planning to work on:
- Net Art (Interaction, Generative Design...)
- WebApps (applications for mobile devices...)
- Dynamic Web Content (CMS, Blog, Social Media...)
This elementary course will lay the foundations for later advanced courses around web technologies, interactive systems and wireless communication (e.g. with mobile devices like the iPhone, Android or JAVA-enabled cell phones) and is open for all students from faculties M and G.
To enroll, you have to come to the Kick-Off presentation and hand in a short concept of your idea (see #Anmeldung. The number of enrolled students for this course has a maximum of 20.
Themen
- Terminologie (Client, Server, kryptische Akronyme wie UDP und TCP... HTML is not a programming language...)
- Clientseitige Technologie wie HTML, CSS, JavaScript
- Serverseitige Technologie wie PHP, Installation von Open Source Anwendungen (z.B. Wordpress...) und Templateerstellung
- Entwicklung via XAMP (Lokaler Server für X-Apache-MySQL-PHP)
- Grundlegende Einführung in Programmiersprachen anhand von JavaScript und PHP
- Trennung von Funktion und Layout
- Fluide Designs für die unterschiedlichsten Endgeräte
- Kommunikationsstrategien für interaktive Systeme
Dieser Einführungskurs bildet eine elementare und wichtige Grundlage für spätere Aufbaukurse zu fortgeschrittenen Themen rund um Webtechnologien (direkt/indirekt), interaktive Systeme und drahtlose Kommunikation (z.B. mit mobilen Endgeräten wie dem iPhone, Android oder Java-fähigen-Handys).
Voraussetzungen
Aufgrund der eingereichten Konzepte wird entschieden, wer in den Kurs kommt. Es werden keine Teilnehmer aufgenommen, die nicht bei der Kick-Off Veranstaltung waren.
Der Kurs kann mit 2 SWS kein umfassendes Wissen in allen speziellen Teilgebieten vermitteln, sondern soll einer schnellen Übersicht und groben Orientierung dienen. Deshalb ist die Bereitschaft der Teilnehmer, sich weitergehend und selbstständig (auch über die 2 SWS der Vorlesung hinaus!) in bestimmte Teilbereiche einzuarbeiten, von elementarer Voraussetzung!
Anmeldung
Aufgrund der zu erwartenden hohen Nachfrage, wird es eine Kick-Off Veranstaltung geben, die für alle Interessierten offen steht. Neben einer Vorstellung der Inhalte und Ziele, muss jeder am Ende der Einführungsveranstaltung ein Kurzkonzept seiner Arbeit einreichen, die er im Rahmen dieses Kurses umsetzen möchte!
Kurz-Konzept (max. 2 DIN-A4 Seiten):
- Kurzbeschreibung (worum geht es?)
- Ziel (was soll mit dem Projekt erreicht werden?)
- Inhalt (was wird kommuniziert?)
- Technik (welche Technik / Software / Sprache soll zum Einsatz kommen?)
- Layout-Scribbles (ca. 2 bis 10 kleine Layout-Scribbles, ca. 5 cm breit)
- Name, Semester, Matrikel-Nummer, Prüfungsordnung (z.B. PV29), gültige E-Mail Adresse für die Antwort
Diese Liste dient nur der Orientierung. Wir legen bei der Auswahl der Bewerber Augenmerk auf folgende Punkte:
- Motivation
- Idee (interessantes Projekt)
- Bereitschaft zum Erlernen von Programmiersprachen
- Grafische und designerische Fähigkeiten
- Künstlerische Fragestellung und/oder kommerzielles Potential
Die maximale Anzahl der Teilnehmer ist 20.
Leistungsnachweis
Zum Leistungsnachweis ist erforderlich:
- Regelmäßige(!) und aktive(!) Teilnahme
- Eigenständiges Arbeiten und selbstständiges Anwenden der im Kurs vermittelten Themen
- Bereitschaft zur Auseinandersetzung mit Programmierung und Quellcode
- Umsetzung einer Projektidee (Anwendung gelernter Inhalte am Beispiel, also z.B. (Wordpress-) Template, Netzkunst-Projekt, WebApp, mobile WebApp ...). Eine Verknüpfung mit netzbasierten Projektmodulen ist möglich und erwünscht.
- Zwischenabgabe (Working Dummy)
- Endabgabe (Umsetzung)
- Kurzdokumentation im Medien-Wiki
Die Endabgabe wird laut Prüfungsordnung als "künstlerische Prüfung" vom Dozenten und einem Zweitprüfer bewertet.
Die Gesamtbewertung setzt sich zusammen aus:
- 20% Anwesenheit, Mitarbeit
- 20% begleitende Dokumentation, Zwischendokumentation/-abgabe
- 60% Abgabe mit folgenden Kriterien:
- Mediale Relevanz (Relevanz des Projekts im Bezug auf das Medium Internet, Bildschirm, mobil, digital etc...)
- Kommunikationsziel (inhaltliche, grafische und repräsentative Umsetzung in Bezug auf den Zweck der Seite)
- Interaktion / Interface
- Barrierefreiheit (hierzu zählt auch die Anzeige auf unterschiedlichen Endgeräten), bzw. mindestens Bewusstsein über möglicherweise auftretende Probleme
- Technische Umsetzung
- Anwendung gelernter Inhalte und Hilfe zur Selbsthilfe
- + 10% Wiki-Bonus (bitte bei Michael kurz Bescheid geben)
Hinweis: Manche der Kriterien können natürlich nur in Verbindung mit der begleitenden Dokumentation bewertet werden.
Nicht ausreichend sind Abgaben, wie:
- reine HTML/CSS Seiten ohne Programmiereinsatz (also weder JavaScript noch PHP)
- reine Layouts oder Mockups
Zielgruppe
Bachelor-Studierende gestaltender Studiengänge sowie der Medieninformatik
Projekte
Laufende Dokumentation der Kursprojekte:
Archiv
Laufende Dokumentation der Kursprojekte der vergangenen Semester:
Syllabus
Vorläufiger Terminplan
- 20.10. KICK-OFF Veranstaltung
- 27.10. HTML
- 03.11. CSS
- 10.11. CSS
- 17.11. JavaScript
- 24.11. JavaScript
- 01.12. JavaScript
- 08.12. Projektbesprechungen
- 15.12. Projektbesprechungen
- 05.01. jQuery, jQueryUI
- 12.01. AJAX
- 19.01. HTML5 & JavaScript, Canvas, processingjs
- 26.01. Zusammenfassung
- 02.02. Projektvorstellung (alle)
- 15.03. Abgabe der Projekte (Dokumentation im Wiki, Link zur Seite bzw. Code-Abgabe)
Links
Hauptthemen
- HTML inkl. HTML5
- CSS inkl. CSS3
- JavaScript
- JavaScript Frameworks, Vorstellung von jQuery
- PHP
- PHP/MySQL Webapplications
- AJAX
Allgemeines
- Internet - Grundsätzliches, Terminologie
- Netzstrukturen
- Netzkunst
- SCC-Services der Bauhaus-Universität (z.B. HTML Webspace!)
- Suchmaschinenoptimierung
- Webprogramming Tools
- MySQL
- How to search Google (or nearly any other search engine)
- Was ist ein Hacker?
- Hacker-Ethik - Die goldenen Regeln für Administratoren und Hacker
- Recht und Internet - Urheberrecht, Impressumspflicht usw...
- HTML Hell - You know you're in Design Hell when you see...
Siehe auch
- Web-Technologien - Lecture Notes (PDF) der Mediensysteme / Bauhaus Universität-Weimar
- Excellent WebStandards Course on dev.opera.com
Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.