HTML5 und CSS3: Die neuen Webstandards

Die neuen Web-Standards aus erster Hand erklärt
4.9 (4 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
39 students enrolled
$120
Take This Course
  • Lectures 109
  • Contents Video: 16 hours
    Other: 0 mins
  • Skill Level Intermediate Level
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 German

Course Description

Der Bestseller in aktueller Neuauflage – mit 100% neuen Videos und neuen Beispielen! Peter Kröner zeigt Ihnen in diesem Video-Training, wie Sie HTML5 und CSS3 schon jetzt für Ihre Projekte einsetzen, um standardkonforme und zukunftssichere Webseiten sowie innovative Web-Apps zu entwickeln. Lernen Sie live am Bildschirm vom HTML5-Profi und Experten für Webstandards!

- Webseiten gestalten und Webapps entwickeln

- Schriften, Farbverläufe & Animationen mit CSS3

- Alle Videos auch lauffähig auf iPad und iPhone

Peter Kröner ist einer der bekanntesten Experten für Webstandards. Als Trainer, Autor und selbstständiger Webentwickler publiziert er in Fachmagazinen und spricht regelmäßig auf Entwickler-Konferenzen zu den neuesten Web-Technologien. In zahlreichen Schulungen gibt er sein Praxiswissen zu HTML5 und CSS3 weiter. Daneben moderiert er den Podcast »Working Draft« und bloggt unter www.peterkroener.de/weblog zu allen Themen rund um die Webstandards von morgen.

What are the requirements?

  • Teilnehmer sollten Grundkenntnisse in HTML und CSS mitbringen, um schnell in die Materie einsteigen zu können.
  • Eigene Projekte sind von Vorteil, damit das neue Wissen sofort umgesetzt werden kann.

What am I going to get from this course?

  • Peter Kröner stellt Ihnen alle HTML5-Elemente direkt im Einsatz vor und zeigt Ihnen, wie Sie damit moderne Webseiten erstellen und eigene Webanwendungen programmieren.
  • Mit den neuen CSS3-Techniken sind grafische Effekte, Farbverläufe und Animationen nur noch eine Sache von wenigen Zeilen Code. Diese erlauben es Ihnen, auf Grafiken zu verzichten und somit die Ladezeiten Ihrer Website zu verringern.
  • Dank HTML5 können Webbrowser heute Dinge, die man früher nur von Smartphone-Apps kannte. Lernen Sie anhand praktischer Beispiele, wie Sie GPS- und Offline-Funktionen programmieren und dabei auf bewährte JavaScript-Bibliotheken zurückgreifen.

What is the target audience?

  • Entwickler, die mehr über die neuen Webstandards rund um HTML5 lernen möchten
  • Jeder, der Animationen und Layouts mit CSS3 erstellen will
  • Alle, die Web-Apps mit JavaScript entwickeln wollen

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Einführung in HTML5 & CSS3
00:17

n diesem Video erhalten Sie einen Überblick über das Kapitel, das die Geschichte der Webstandards von den Anfängen bis zum heutigen Praxiseinsatz behandelt.

18:15

In diesem Video erhalten Sie einen Überblick über die Ursprünge von HTML. Sie erfahren, welche Rolle das W3C bei den aktuell gültigen Webstandards spielt und welche unterschiedlichen HTML5-Spezifikationen miteinander konkurrieren.

11:47

Peter Kröner stellt Ihnen in diesem Video die Bestandteile des HTML5-Universums vor. Sie lernen die wesentlichen Module und Techniken von HTML5 kennen und erfahren, wie es derzeit um den Einsatz von XHTML steht.

09:07

HTML5 ist kein Webstandard für sich, sondern vielmehr ein Technologie-Ökosystem zur Umsetzung von Web-Applikationen. Peter Kröner erläutert Ihnen in diesem Video, wie Sie die heutigen Browser als HTML5-Applikationsplattform einsetzen.

11:47

In diesem Video erfahren Sie, warum sich die Lücke zwischen Web- und Desktop-Applikationen dank HTML5 immer weiter schließt und wie der Konkurrenzkampf auf dem Browsermarkt Ihre Arbeit als Webentwickler beeinflusst.

13:17

Ihr Trainer zeigt Ihnen in diesem Video, wie sich die Gestaltung mit CSS über die Jahre entwickelt hat. Sie erhalten dabei auch eine Übersicht über die verschiedenen CSS-Versionen und deren Funktionsumfang.

11:08

CSS3 bedeutet einen Bruch mit dem bisherigen Entwicklungsmodell von CSS, da neue Versionen nicht mehr monolithisch aufgebaut sind. Peter Kröner erläutert Ihnen, welche Vorteile das neue modularisierte Modell mit sich bringt.

12:47

HTML5 und CSS3 entwickeln sich rasant weiter. Peter Kröner stellt Ihnen in diesem Video die Features vor, die Sie bereits jetzt in der Praxis einsetzen können. Darüber hinaus erfahren Sie, wie Sie fehlende Techniken in alten Browsern nachrüsten.

Übungsdateien zu den einzelnen Abschnitten
Article
Section 2: Audio- und Video-Elemente
00:23

In diesem Einleitungsvideo erhalten Sie einen Überblick über die Inhalte des Kapitels. Darin lernen Sie, wie Sie die neuen Audio- und Video-Elemente von HTML5 effektiv einsetzen, um einen eigenen Videoplayer zu programmieren.

08:03

Dank HTML5 benötigen Sie keine Plug-ins mehr, um Medien auf Ihrer Webseite einzubinden. In diesem Video erklärt Ihnen Peter Kröner, wie Sie Audiodateien mit dem neuen Audio-Element einbinden und abspielen.

11:24

Peter Kröner zeigt Ihnen, wie Sie Videos auf Ihren Seiten einbinden. Sie lernen, wie Sie Standbilder als Platzhalter einfügen und den Benutzern Ihrer Webseite mehrere Auflösungen eines Videos zur Verfügung stellen.

13:33

Wenn Ihnen der Standardplayer für Multimedia-Inhalte nicht gefällt, können Sie sich mit JavaScript einen eigenen Player bauen. In diesem Video lernen Sie, wie Sie Klick-Events auf Buttons abfangen, eine Pause-Funktion programmieren und die Lautstärke regulieren.

08:35

Peter Kröner zeigt Ihnen in diesem Video, wie Sie Ihren Videoplayer um die Möglichkeit einer Zeiteingabe erweitern. Damit können Sie gezielt an eine bestimmte Stelle im Video springen und den Film von dort an abspielen.

15:20

Zu einem benutzerfreundlichen Player gehört auch ein Fortschrittsbalken. In diesem Video erfahren Sie, wie Sie mit dem Progress-Element die aktuelle Lauflänge anzeigen und die Navigation über den Fortschrittsbalken ermöglichen.

05:55

Die Unterstützung der Audio- und Video-Elemente ist bereits in fast allen Browsern gegeben. Peter Kröner erläutert Ihnen in diesem Video, was Sie dennoch bei der Codec-Wahl beachten sollten und wie Sie Audio-Codecs per JavaScript nachrüsten.

Section 3: Semantisches HTML5
00:15

In diesem Video erhalten Sie eine Übersicht über die Inhalte des Kapitels. Peter Kröner erklärt Ihnen im Folgenden alles zu den neuen semantischen Elementen von HTML5 und ihren konkreten Einsatzmöglichkeiten.

02:48

Peter Kröner erläutert Ihnen in diesem Video, welche Unterschiede zwischen XHTML und den Standards der HTML5-Arbeitsgruppen existieren, und bietet eine nützliche Begriffsdefinition für HTML5, die sich in der Praxis bewährt hat.

05:10

In diesem Video zeigt Ihnen Ihr Trainer den grundlegenden Aufbau eines HTML5-Dokuments. Sie lernen, wie Sie den Doctype definieren und das Grundgerüst Ihrer Webseite anlegen.

10:40

Sie erfahren in diesem Video, wie Sie XHTML 5-Dokumente erstellen. Peter Kröner zeigt Ihnen, was es dabei zu beachten gibt und warum Sie den Einsatz dieser Technik mit Bedacht wählen sollten.

12:08

Peter Kröner zeigt Ihnen in diesem Video, wie Sie Ihre XHTML-Dokumente erfolgreich in HTML5 umwandeln. Sie erfahren, welche Tags optional sind und automatisch vom Browser ergänzt werden und wie Sie den Quellcode weiter aufräumen.

09:03

In diesem Video stellt Ihnen Ihr Trainer die neuen semantischen Elemente von HTML5 vor, mit denen Sie Ihre Seiten sinnvoll strukturieren können. Dabei lernen Sie, wie Sie Artikel, Hauptinhalte und Seitenleisten definieren und voneinander abgrenzen.

15:13

Peter Kröner zeigt Ihnen hier, wie Sie die neuen semantischen Elemente praktisch anwenden. Sie erfahren, wie Sie Artikel im Hauptinhaltsbereich einbinden und anschließend strukturieren.

06:44

Mit HTML5 können Sie beliebig viele Überschriftsebenen definieren. Peter Kröner erläutert Ihnen in diesem Video, wie die Berechnung mit dem Outline-Algorithmus funktioniert und was Sie bei der Verschachtelung von Sektionen beachten müssen.

06:21

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie Fortschrittsbalken und Zustandsanzeigen im Browser realisieren. Sie lernen dabei auch, wie Sie Wertebereiche automatisch formatieren und den optimalen Zustand markieren.

06:38

Peter Kröner stellt Ihnen in diesem Video weitere HTML5-Features vor. Sie lernen unter anderem die Data-Attribute kennen, mit denen sich unsichtbare Informationen einbetten lassen, und erfahren, wie Sie externe Suchinhalte hervorheben.

08:05

Mit HTML5 sind Sie in der Lage, Grafiken oder Schaubilder direkt mit Beschreibungen zu verknüpfen. Sie lernen in diesem Video außerdem die Mikroformate kennen, mit denen Sie strukturierte Auszeichnungen für Suchmaschinen erstellen können.

07:57

Barrierefreiheit ist auch im Web ein wichtiges Thema. Peter Kröner zeigt Ihnen in diesem Video, wie Sie Screenreadern durch semantische Auszeichnungen die Arbeit erleichtern und somit Ihre Webseiten für Menschen mit Sehbehinderung zugänglich machen.

09:53

In diesem Video erläutert Ihnen Peter Kröner, mit welchen Problemen Sie beim Einsatz der semantischen HTML5-Elemente zu rechnen haben. Außerdem erfahren Sie, wie Sie mithilfe von JavaScript auch älteren Browsern die neuen Elemente beibringen können.

Section 4: Neue CSS3-Selektoren
00:18

In diesem Video stellt Ihnen Ihr Trainer die Inhalte des Kapitels vor, mit dem Sie in CSS3 einsteigen und die neuen Selektoren und Pseudoklassen direkt im Einsatz erleben.

10:39

In diesem Video erläutert Ihnen Peter Kröner die Grundlagen von CSS3. Sie lernen, wie Sie mit den Attributselektoren Klassen und IDs einsparen, um so schneller und übersichtlicher arbeiten zu können.

11:03

Pseudoklassen erlauben es, Elemente anhand Ihrer Stelle im Dokument auszuwählen. In diesem Video erfahren Sie, wie Sie Pseudoklassen praktisch einsetzen und dadurch zahlreiche neue Gestaltungsmöglichkeiten erhalten.

10:10

Peter Kröner zeigt Ihnen in diesem Video, wie Sie mit »an+b«-Ausdrücken Elemente nach bestimmten Mustern auswählen. Sie erfahren außerdem, welche nth-Pseudoklassen Ihnen CSS3 zur Verfügung stellt und wie Sie diese praktisch anwenden.

08:42

In diesem Video zeigt Ihnen Peter Kröner, welche Selektoren CSS3 sonst noch für Sie bereithält. Darüber hinaus lernen Sie, wie Sie mithilfe von Pseudoelementen einen zusätzlichen Formatierungskontext erzeugen.

02:45

Peter Kröner zeigt Ihnen in diesem Video, welche Browser die Pseudoklassen und Attribut-Selektoren bereits unterstützen und wie Sie fehlende Features in älteren Browsern nachrüsten.

Section 5: Farben und Farbverläufe
00:25

Viele Designeffekte sind mit CSS3 nur noch eine Sache von wenigen Zeilen Code. In diesem Einleitungsvideo gibt Ihnen Peter Kröner eine Übersicht über die Möglichkeiten, die Ihnen CSS3 hinsichtlich der Gestaltung von Farben und Farbeverläufen bietet.

08:15

Mit dem neuen HSL-Farbmodell können Sie den Farbwert eines Elements auf einfache und benutzerfreundliche Weise anpassen. Das HSLA-Farbmodell ermöglicht es Ihnen sogar, zusätzlich noch einen Wert für die Transparenz anzugeben.

10:04

Mit CSS3 erzeugen Sie im Handumdrehen einen linearen Farbverlauf, der direkt vom Browser berechnet wird. In diesem Video lernen Sie, wie Sie Farbpunkte im Verlauf definieren, die Verlaufsrichtung ändern und Farbverläufe wiederholen.

10:40

In diesem Video zeigt Ihnen Peter Kröner, wie Sie radiale Verläufe mit CSS3 erstellen. Sie lernen, wie Sie den Mittelpunkt frei positionieren, Grenzpunkte einfügen und radiale Verläufe wiederholen, um Muster zu erzeugen.

12:12

Farbverläufe können in CSS3 so angelegt werden, dass sich damit selbst komplexe Muster erstellen lassen. In diesem Video lernen Sie, wie Sie Streifen- und Schachbrettmuster mit wenigen CSS-Angaben gestalten.

10:24

In diesem Video erfahren Sie, welche Farb- und Verlaufsfeatures Sie bereits jetzt problemlos einsetzen können. Peter Kröner zeigt Ihnen außerdem, wie Sie sich die Arbeit mit Vendor-Präfixen sparen und stattdessen Online-Generatoren für sich arbeiten lassen.

Section 6: HTML5-Formulartechnik
00:16

In diesem Einleitungsvideo erhalten Sie einen Überblick über die Inhalte des Kapitels, dessen thematischer Schwerpunkt die Erstellung und Validierung von Formularen mit HTML5 ist.

13:59

Peter Kröner stellt Ihnen in diesem Video die neuen Formularelemente von HTML5 vor. Damit können Sie in Ihrem HTML5-Formular explizit angeben, ob ein Eingabefeld zum Beispiel für Telefonnummern, Webadressen oder als Suchfeld vorgesehen ist.

09:34

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie Datums- und Zeitangaben über Eingabefelder realisieren. Sie lernen außerdem, wie die internen Zeit- und Datumsformate von HTML5 funktionieren.

13:53

Die Validierung, also das Überprüfen der Daten vor dem Versenden, ist in HTML5 integrierter Bestandteil der Formulartechnik. In diesem Video lernen Sie, wie Sie eigene Validierungsregeln definieren und Pflichtfelder festlegen.

08:51

Wenn Ihnen die integrierten Validierungsregeln nicht ausreichen, können Sie mit JavaScript auch komplexere Regeln festlegen. Peter Kröner zeigt Ihnen in diesem Video, wie Sie Eingaben per Klick auf ihre Gültigkeit überprüfen.

07:10

In diesem Video zeigt Ihnen Peter Kröner, wie Sie die Inhalte zweier Felder miteinander vergleichen. Auf diese Weise können Sie Passwortabfragen erstellen und es Ihren Nutzern ermöglichen, neue Passwörter zu definieren.

06:46

Die Standard-Fehlermeldung der Formularvalidierung ist nicht immer aussagekräftig. In diesem Video lernen Sie daher, wie Sie eigene Validierungsnachrichten erstellen und die Standardmeldung unterdrücken können.

13:09

Peter Kröner zeigt Ihnen in diesem Video, wie Sie Eingabefelder auch außerhalb eines Formulars platzieren, Platzhaltertexte einfügen und Felder abhängig von ihrer Gültigkeit unterschiedlich formatieren.

07:49

In diesem Video gibt Ihnen Peter Kröner einen Überblick über die aktuelle Unterstützung der HTML5-Formulartechniken und zeigt, an welchen Stellen es derzeit noch zu Problem kommen könnte.

Section 7: Schriftgestaltung mit CSS3
00:15

Sie erhalten in diesem Einleitungsvideo eine Übersicht über die Inhalte des Kapitels. In den folgenden Videos dreht sich alles um den Einsatz von Webfonts und die Gestaltung von Schriften.

11:44

In diesem Video erfahren Sie, wie Sie externe Schriften mit @font-face einbetten, um nicht mehr auf die Standard-Schriftarten früherer Webseiten beschränkt zu sein. Dank HTML5 steht Ihnen die ganze Welt der Typografie endlich auch online offen.

07:12

In diesem Video erläutert Ihnen Peter Kröner, was es beim Einsatz von Webfonts juristisch zu beachten gibt. Sie erfahren außerdem, welche Probleme die unterschiedliche Schriftglättung der Betriebssysteme mit sich bringen.

13:49

In diesem Video stellt Ihnen Peter Kröner einige nützliche Online-Tools vor, mit denen Sie Schriftarten in webtaugliche Formate konvertieren können. Sie lernen außerdem, wie Sie Schriftarten komprimieren, um die Ladezeit Ihrer Webseite zu verringern.

05:11

Wenn Sie Webfonts nicht auf dem eigenen Server bereitstellen wollen, können Sie auch externe Webfont-Services nutzen. In diesem Video stellt Ihnen Ihr Trainer einige praktische Bezugsquellen für Webfonts vor.

08:55

Peter Kröner zeigt Ihnen, wie Sie Icons, Symbole und Piktogramme zu eigenen Schriftsammlungen zusammenfassen. Sie lernen außerdem, wie Sie nicht benötigte Zeichen aus Schriftdateien entfernen, um die Dateigröße zu reduzieren.

07:19

CSS3 bietet Ihnen viele Möglichkeiten, Texte ansprechend zu formatieren. In diesem Video lernen Sie, wie Sie Schatteneffekte oder brennende Texte gestalten, und erfahren, wie Sie Auslassungspunkte anzeigen, wenn der Platz auf einer Seite mal nicht ausreicht.

15:25

In diesem Video zeigt Ihnen Peter Kröner, wie Sie das Optimum aus Ihren Schriften herausholen. Sie lernen, wie Sie das Textrendering festlegen, das Aspektverhältnis beeinflussen und sogar Ligaturen oder Brüche darstellen.

Section 8: Die neuen CSS3-Layouts
00:18

Peter Kröner führt Sie in diesem einleitenden Video in das folgende Kapitel ein, in dem sich alles um die neuen CSS3-Layoutmodelle dreht.

06:12

Die tatsächliche Breite einer Box ist nicht immer leicht zu bestimmen, weil oft noch Rahmen und Innenabstände hinzugerechnet werden müssen. Mit dem Box-Sizing von CSS3 gehört dieses Problem endlich der Vergangenheit an.

09:08

In diesem Video lernen Sie, wie Sie ein flexibles, mehrspaltiges Layout erzeugen. Peter Kröner zeigt Ihnen dabei, wie Sie neben der Spaltenanzahl auch den Abstand zwischen den Spalten einstellen und ungewollte Umbrüche in Überschriften verhindern.

06:20

Das Flexbox-Layout sorgt dafür, dass Container-Elemente wie zum Beispiel Boxen ihr Elternelement automatisch ausfüllen. Damit brauchen Sie keine absoluten Breitenangaben mehr, sondern definieren lediglich das Größenverhältnis der Elemente zueinander.

13:18

In diesem Video zeigt Ihnen Peter Kröner, wie Sie Flexboxen unterschiedlich ausrichten. Sie erfahren, wie Sie Elemente sowohl an der Haupt-, als auch an der Kreuzachse ausrichten und die Inhalte gleichmäßig verteilen.

13:13

Natürlich können Sie Flexboxen auch einzeln bearbeiten und neu sortieren. In diesem Video zeigt Ihnen Ihr Trainer, wie Sie Wachsstums- und Schrumpffaktor einer Flexbox festlegen und die Boxen unabhängig voneinander einrichten.

12:19

In diesem Video zeigt Ihnen Peter Kröner, wie Sie das Flexbox-Layout in der Praxis anwenden. Sie werden staunen, wie problemlos sich ein flexibles, mehrspaltiges Layout dank Flexbox umsetzen lässt.

15:11

Die Unterstützung der CSS3-Layouttechniken ist derzeit noch nicht flächendeckend gegeben. Ihr Trainer zeigt Ihnen deshalb einige Generatoren, die viele Kompatibilitätsprobleme lösen. Sie lernen außerdem Layout-Module kennen, die in Zukunft eine große Rolle spielen könnten.

Section 9: Responsive Webdesign
00:18

In diesem Einleitungsvideo stellt Ihnen Peter Kröner die Inhalte des Kapitels vor. Die folgenden Videos behandeln die Optimierung von Webseiten für mobile Endgeräte.

09:57

Die mobile Internetnutzung wird immer wichtiger. Ein flexibles Layout, das sich der immensen Gerätevielfalt auf dem Markt automatisch anpasst, ist daher heutzutage ein absolutes Muss. In diesem Video lernen Sie, was Responsive Design ausmacht.

07:30

Mit Media Queries sind Sie in der Lage, Ihre CSS-Parameter an verschiedene Ausgabemedien anzupassen. Mit Media Types optimieren Sie dabei die Ausgabe für verschiedene Gerätetypen oder für die Druckausgabe.

10:56

Mit Media Features können Sie die Eigenschaften eines Geräts abfragen und die CSS-Stile daran anpassen. Peter Kröner zeigt Ihnen in diesem Video, wie Sie die Display-Breite und die Ausrichtung eines Geräts abfragen

22:05

In diesem Video zeigt Ihnen Peter Kröner, wie Sie Responsive Design in der Praxis umsetzen. Sie lernen, wie Sie Navigation und Spaltenanzahl mit Media Queries flexibel gestalten und wie Sie Bilder geräteabhängig skalieren.

10:07

Leider stimmen die Display-Angaben bei Mobilgeräten oft nicht mit der Realität überein, da die Seiten erst noch auf den Viewport gerendert werden. Peter Kröner zeigt Ihnen hier, wie Sie den Viewport so konfigurieren, dass Ihr Responsive Design fehlerfrei funktioniert.

11:47

Peter Kröner zeigt Ihnen in diesem Video, wie Sie Media Queries in älteren Browsern nachrüsten. Sie erfahren außerdem, wie Sie Responsive Design im Browser testen und verschiedene Viewports mit Online-Tools simulieren.

Section 10: APIs für mobile Webapps
00:19

Dieses Einleitungsvideo verschafft Ihnen einen Überblick über die Inhalte des Kapitels. In den folgenden Videos lernen Sie nützliche APIs für die mobile Entwicklung kennen.

08:26

Mit der Geolocation-API lassen sich bei einem Webzugriff die genauen Standortdaten des Benutzers abfragen. In diesem Video lernen Sie, wie Sie die Positionsortung einrichten und den aktuellen Standort ermitteln.

10:28

Peter Kröner zeigt Ihnen in diesem Video, wie Sie die Genauigkeit von Geolocation erhöhen und einen Timeout festlegen. Sie erfahren darüber hinaus, wie Sie Positionsdaten zwischenspeichern und eine kontinuierliche Überwachung einrichten.

06:49

In diesem Video lernen Sie, wie Sie Lagesensoren auslesen und die Geräteausrichtung bestimmen. Peter Kröner zeigt Ihnen zudem, wie Sie Sensordaten generieren, um die Lagesensoren an stationären Geräten zu simulieren.

10:56

Sie brauchen eine kurze Pause von all der Theorie und möchten eine Runde spielen? Kein Problem, denn in diesem Video zeigt Ihnen Peter Kröner, wie Sie die Bewegungssensoren nutzen können, um ein Geschicklichkeitsspiel zu programmieren.

04:38

Mobile Geräte verfügen in der Regel nicht nur über Bewegungs-, sondern auch über Beschleunigungssensoren. In diesem Video lernen Sie, wie Sie Beschleunigungsdaten abfragen und auswerten.

05:59

Peter Kröner gibt Ihnen in diesem Video einige nützliche Ratschläge, wie Sie mobile Seiten testen können. Sie haben dabei nicht nur die Möglichkeit, auf Simulatoren zuzugreifen, sondern können mithilfe von Open Device Lab viele Geräte sogar tatsächlich verwenden.

05:30

Damit Sie bei der Programmierung Ihrer Webseiten nicht ständig den Browser manuell aktualisieren müssen, zeigt Ihnen Ihr Trainer in diesem Video, wie Sie automatische Reloads einrichten, um somit noch effizienter arbeiten zu können.

12:58

Webseiten auf mobilen Geräten zu debuggen ist gar nicht so einfach. Peter Kröner stellt Ihnen in diesem Video das »weinre«-Tool vor, mit dem Sie Quellcode, der auf mobilen Endgeräten ausgeführt wird, auf Ihrem Desktop-Rechner bearbeiten und auf Fehler hin überprüfen können.

05:51

Peter Kröner wagt in diesem Video eine Prognose zur Zukunft der mobilen APIs und zeigt, welche Browser die beste Unterstützung für die vorgestellten Techniken bieten.

Section 11: HTML5-Grafikprogrammierung
00:18

In diesem Einleitungsvideo gibt Ihnen Peter Kröner einen Überblick über die Inhalte des Kapitels. In den folgenden Videos lernen Sie, welche Möglichkeiten Ihnen HTML5 für die Grafikprogrammierung zur Verfügung stellt.

12:15

Das neue Canvas-Element rendert Grafiken im Browser. In diesem Video lernen Sie, wie Sie eine Zeichenfläche im Browser anlegen, die 2D-Zeichenschnittstelle laden und geometrische Formen zeichnen.

10:27

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie mit dem Canvas-Element Pfade und Linien erstellen. Auf diese Weise haben Sie am Ende der Übung ein kleines Strichmännchen gezeichnet.

13:22

So aufwändig das Zeichen mit dem Canvas-Element ist, so einfach ist das Manipulieren bestehender Grafiken. In diesem Video zeigt Ihnen Peter Kröner, wie Sie Bilder auf die Leinwand laden, Bildausschnitte anzeigen und Farben invertieren.

04:55

Um die Arbeit mit dem Canvas-Element zu erleichtern, stehen Ihnen im Web viele Bibliotheken zur Verfügung. Peter Kröner stellt Ihnen einige davon vor, mit denen sich unter anderem die Objektorientierung von Canvas implementieren lässt.

06:36

Peter Kröner stellt Ihnen in diesem Video den 3D-Kontext WebGL vor, mit dem sich hardwarebeschleunigte Grafiken auf Canvas zeichnen lassen.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course