DruckversionMit HTML5 kommt das neue spannende Canvas-Element in die Webgestaltung.
Canvas, englisch für "Leinwand", ist genau das: eine Fläche, auf der man dynamisch Grafiken darstellen, zeichnen und animieren kann. Auch interaktive Anwendungen sind möglich, wie sie in der HTML5 Canvas Galerie von Sonja Vieten zu sehen sind.
Der Clou dabei: all das geschieht allein mit HTML und JavaScript. Denn Canvas ist als Teil von HTML5 nativ - also ohne zusätzliche Plugins wie Flash oder Java - im Browser implementiert. Canvas wird also von allen aktuellen Browsern - auch auf mobilen Geräten - unterstützt!
In diesem Online-Workshop gibt Sonja Vieten Ihnen mit vielen Praxisbeispielen, Vorlagen und praktischen Übungen einen verständlichen und praxisbezogenen Einstieg in Canvas und seine neuen Möglichkeiten.
Durch den Einsatz von JavaScript Frameworks, die Ihnen einen großen Teil der Programmierarbeit abnehmen, wird der Einsatz und die Anwendung von komplexen Canvas Anwendungen erheblich vereinfacht. Sie lernen im Workshop deshalb auch verschiedene JS Frameworks für Canvas kennen und erfahren, wie Sie mit ihnen schneller zu Ergebnissen kommen.
Am Ende des Canvas-Workshops
wissen Sie, wie Sie auf Canvas zeichnen, Text darstellen und Bilder anzeigen und manipulieren
haben ein einfaches Canvas Malprogramm erstellt
kennen die Animationsmethoden per Canvas
haben ein kleines interaktives Canvas Spiel erstellt
wissen, wie Sie mit JavaScript Frameworks das Programmieren erheblich vereinfachen
und mit einer JavaScript Bibliothek auch komplexe Anwendungen in Canvas erstellen
Themen im Detail
-
Woche 1: Das HTML5 Canvas Element
In der ersten Woche lernen Sie das HTML5-Element Canvas und seine neuen Möglichkeiten kennen, wir schauen uns den Zusammenhang zwischen Canvas, Javascript und HTML5 an und Sie erfahren, wie das Canvas Elements in HTML eingebunden wird.
Dann geht es auch schon in die Praxis:
- Wir zeichnen auf Canvas (geometrische Grundformen, Pfade)
- Sie erfahren, wie Sie Text darstellen
- Wir transformieren Objekte
- zeigen Bilder an und manipulieren sie
- und Sie erstellen ein einfaches Canvas Malprogramm -
Woche 2: Interaktivität und Animation
Die zweite Woche ist den Themen Interaktivität und Animation mit Canvas gewidmet:
- Sie lernen die Animationsmethoden per Canvas kennen
- Wir beschäftigen uns mit den Grundlagen der Interaktivität: der Keyboardsteuerung
- und Sie erstellen ein einfaches Canvas Spiel mit Audio Integration -
Woche 3: JavaScript Frameworks
Bisher haben wir unsere Canvas-Applikationen per Hand erstellt. Doch es geht auch einfacher: mit JavaScript Frameworks, die Ihnen eine visuelle Umgebung bieten, in der Sie schnell und umkompliziert auch komplexe Canvas Anwendungen (Webgrafiken/Animationen) erstellen können.
In dieser Woche
- verschaffen wir uns einen Überblick über verschiedene JavaScript Frameworks und ihre Funktionsweise (Paper.js, Processing, RGraph, EaselJS, TweenJS)
- und Sie erstellen frei eine Canvas Anwendung mit einem Framework Ihrer Wahl
Voraussetzungen
Vorkenntnisse:
Mitbringen sollten Sie Grundkenntnissen im Bereich Webgestaltung und Webprogrammierung (z.B. JavaScript, ActionScript, PHP, Perl ...).
Abgesehen davon, ist der HTML5 Canvas-Workshop so konzipiert, dass Einsteiger ebenso mit Gewinn teilnehmen, wie Fortgeschrittene im Bereich HTML, JavaScript und/oder ActionScript von ihm profitieren. Die Aufgabenstellungen werden flexibel dem jeweiligen Kenntnisstand entsprechend umgesetzt.
Insbesondere in der dritten Workshop-Woche können Sie Ihr freies Canvas-Projekt in Komplexität und Umfang Ihren eigenen Vorkenntnissen und Interessen entsprechend anpassen.
Notwendige Programme:
Sie können Canvas mit einem einfachen Textbearbeitungsprogramm schreiben.
Komfortabler ist die Arbeit mit einem HTML-Editor, wie z.B. Dreamweaver oder einem kostenlos im Internet erhältlichen Editor wie Phase5. (Weitere Editoren finden Sie z.B. in der Übersicht von Chip online.)
Online-Workshop: HTML5 Canvas
|
03.05.2012
295 Euro
/
245 Euro*
(* für Mitglieder von akademie.de) |
