"Danke Sonja,
ich hatte mir von diesem Workshop einen Einblick in die Möglichkeiten von HTML5-Canvas erhofft, und diese Erwartungen hat der Workshop voll erfüllt.
Erstaunlich, was alles mit Canvas möglich ist, aber auch wo doch noch viele Probleme liegen, wenn unterschiedlichste Browser abgedeckt werden sollen."
ONLINE-WORKSHOPHTML5 Canvas - Webgrafik & Animation in HTML5
Auf einen Blick
|
Online-Workshop läuft.
3 Wochen
ca. 10 - 12 Std.
Grundkenntnissen im Bereich Webgestaltung und Webprogrammierung (z.B. HTML, JavaScript, Flash)
(mehr)
295 Euro / 245 Euro*
(* für Mitglieder von akademie.de) Alle Preise enthalten 19% MwSt. Wir akzeptieren Prämiengutscheine! Haben Sie noch Fragen? workshops@akademie.de |
Ihre Workshop-Leiterin: Sonja Vieten
arbeitet seit 1999 als Web- und Flash-Designerin. Das Spezialgebiet der zertifizierten Animatorin sind die Konzeption und Entwicklung interaktiver Designs. Dazu gehört ein tiefes Verständnis dafür, was "unter der Haube" passiert. Schließlich macht die Programmierung ca. 50 Prozent ihrer Arbeit aus. Faszinierend findet Sonja Vieten dabei gerade die Verbindung von Design und interaktiver Programmierung.
Das sagen die Teilnehmer
Teilnehmerstimmen
Hallo Sonja,
auch ich wollte mich noch sehr herzlich bei Dir bedanken - für Dein Know-how und Deine stets freundliche und hilfsbereite Verfügbarkeit. Ich fand den Kurs trotz mangelnder JS-Kenntnisse meinerseits sehr inspirierend und bin Dir für den gewonnenen Einblick in HTML5 Canvas sehr dankbar.
"Super Unterlagen und sehr gute Workshopleiterin.
Ich fand den Workshop sehr gut dank Deiner ausführlichen Beispieldateien und Unterlagen - eine ganz hervorragende Vorbereitung. Deine
Unterstützung war auch wieder 1A - wie gewohnt.
Für mich habe ich allerdings das Resümee gezogen, dass es noch ziemlich lange dauern würde, ehe ich mit Canvas so arbeiten würde, wie ich in Flash arbeiten kann. Flash ist für meine grafischen Projekte einfach erste Wahl."
Sonja Vieten hat durch Ihre zeitnahen und unterstützend-motivierenden Antworten viel Spass in den Kurs gebracht und uns besonders gut betreut. Ich möchte mich an dieser Stelle auch noch einmal herzlich dafür bedanken.
Hallo Sonja, hallo an Alle,
ich wollte mich auf diesem Wege nochmals bei allen bedanken die mir bei unserem Kurs mit Tipps zur Seite standen, was die ganze Sache für mich deutlich einfacher machte!
Ich habe mich wirklich sehr darüber gefreut wie schnell sich jemand meiner Probleme annahm und sich dann auch noch die Zeit nahm, mir eine Antwort zu schreiben.
Einfach spitze!
Auch dir Sonja ein dickes Dankeschön für deine Hilfe und dein gutes Zureden... Ich werde auf alle Fälle dran bleiben und vielleicht hört man sich in einem weiteren Kurs mal wieder!
Online-Workshop-Newsletter
Mit 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
P.S.: In unserer Teilnehmer-Galerie sehen Sie Screenshots der Canvas-Projekte ehemaliger Workshop-Teilnehmer.
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, CreateJS, EaselJS, TweenJS)
- und Sie erstellen frei eine Canvas Anwendung mit einem Framework Ihrer Wahl
Voraussetzungen
Vorkenntnisse:
Mitbringen sollten Sie Grundkenntnisse im Bereich Webgestaltung und Webprogrammierung (z.B. HTML, JavaScript, Flash).
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.)

