ONLINE-WORKSHOP

HTML5 Canvas

Webgrafik & Animation in HTML5

Auf einen Blick

03.05.2012
23.05.2012
Internet
3 Wochen
ca. 10 - 12 Std.
Grundkenntnissen im Bereich Webgestaltung und Webprogrammierung (z.B. JavaScript, ActionScript, PHP, Perl ...) (Details)
Sonja Vieten
295 Euro / 245 Euro*

(* für Mitglieder von akademie.de)

Alle Preise enthalten 19% MwSt.

10% Frühbucher-Rabatt noch bis 12.04.
  • Anmeldung über SSL-Server, keine Weitergabe Ihrer Daten. Wir nehmen Datensicherheit ernst.

  • Eine Stornierung ist vor Beginn des Online-Workshops jederzeit kostenlos möglich.

  • Die Teilnahmegebühr wird erst zu Beginn des Online-Workshops fällig.

Haben Sie noch Fragen? workshops@akademie.de
+49(0)30-616 55 0

Ihre Workshop-Leiterin: Sonja Vieten

bild105750

arbeitet seit 1999 als Web- und Flash-Designerin, zunächst in einem renommierten Online-Software-Unternehmen, seit 2005 freiberuflich. Das Spezialgebiet der zertifizierten Animatorin sind die Konzeption und Entwicklung professioneller 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.

Aus Begeisterung für das Programm Flash und seine kreativen Möglichkeiten betreibt Sonja Vieten seit 2000 die Flash E-Cards Website freaky-flash.de. Auf ihrem Google Plus Profil finden Interessierte Anregungen zum Thema Web- und Interactive Design.

Ihr Fachwissen gibt Sonja Vieten seit 1995 als Dozentin in Trainings, Coachings, Beratungen, Tutorials und Fachveröffentlichungen weiter.

Beiträge des Autors als Atom-Feed Atom-Feed: Neues von akademie.de

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

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*