HTML: Difference between revisions

HTML (view source)

Revision as of 15:08, 15 January 2011

2,271 bytes added , 15 January 2011

m

HTML5

Mm

emailconfirmed, nsInternRO, nsInternRW, Administrators

3,356

edits

@@ Line 60: / Line 60: @@
 == HTML5==
+HTML5 und [[CSS#CSS3|CSS3]] bringen in Verbindung mit [[JavaScript]] einige interessante Neuerungen, vor allem im Hinblick auf die Erweiterung von HTML5 als Programmierungebung für Browser-basierte Apps.
+Die aufregendsten Neuerungen sind in Kürze:
+=== Canvas ===
+Das Canvas-Element kann mit JavaScript "bemalt" werden. Der Canvas Kontext ist in 2D und 3D verfügbar, 3D wird allerdings noch von sehr wenigen Browsern unterstützt. Das Zeichnen in 2D funktioniert ähnlich wie in anderen Sprachen (z.B. Java, Processing, Quartz). Man holt sich zuerst den Kontext und kann dann Basis-Shapes, Bilder, Text u.v.m. auf diesen Kontext zeichnen. Das Canvas-Element ist Pixel-basiert.
+<source lang="HTML4strict">
+<html>
+<canvas id="canvas" width="800" height="600"></canvas>
+<script>
+	// get the context
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext('2d');
+	context.fillStyle = "rgba(200,0,0, 1.0)";
+	context.fillRect(40,60,250,100);
+	context.fillStyle = "rgba(0,200,0, 0.5)";
+	context.fillRect(140,100,250,100);
+</script>
+</html>
+</source>
+Es gibt mittlerweile sehr interessante Projekte rund um das canvas Element:
+* [http://www.processingjs.org processing.js] - JavaScript Library, (fast) voll kompatibel zur Java-basierten [[Processing]] Programmierumgebung
+* [http://visitmix.com/labs/ai2canvas/documentation.html Ai->Canvas] exportiert Illustrator Dokumente in HTML-Dateien mit Canvas-Element
+Siehe auch:
+* [http://billmill.org/static/canvastutorial/ Interactive Canvas Tutorial]
+* [https://developer.mozilla.org/en/canvas_tutorial Mozilla Canvas Tutorial]
+=== SVG ===
+HTML5 unterstützt das Zeichnen von [[SVG]] (Scaleable Vector Graphics). SVG-Grafiken können entweder in einem Grafikprogramm (wie z.B. Illustrator) gezeichnet und als SVG exportiert oder per Code gezeichnet werden:
+<source lang="HTML4strict">
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="100" cy="50" r="40"
+			stroke="black" stroke-width="2" fill="red"
+			onmousedown="alert('Hello World!');"/>
+</svg>
+</source>
+Siehe auch:
+* [http://www.w3.org/TR/SVG/ W3C SVG Reference]
+=== Weitere Ressourcen ===
 * [http://www.w3schools.com/html5/html5_reference.asp HTML5 Referenz]
-* [https://developer.mozilla.org/en/canvas_tutorial HTML5 Canvas Tutorial] (for modern browsers)
-* [http://www.youtube.com/watch?v=EdDc7sWjCL4 Brad Neuberg from Google: Learn About HTML5 and the Future of the Web]
-* [http://www.youtube.com/user/ThytOS#grid/user/0DBF8EC1B953D567 Mehrstündiger Vortrag über HTML5, CSS3]
 * [http://dret.typepad.com/dretblog/html5-api-overview.html The HTML 5 APIs summed up]
+* [http://dev.w3.org/html5/spec/Overview.html W3C HTML5 Reference]
 * [http://dev.w3.org/html5/html4-differences/ Differences between HTML 4 & 5 (W3C)]
 * [http://html5doctor.com/article-archive/ HTML 5 Doctor]
 * [http://www.feierfeil.at/html/index_html.htm HTML-Übersicht]
+* [http://www.youtube.com/watch?v=EdDc7sWjCL4 Brad Neuberg from Google: Learn About HTML5 and the Future of the Web]
+* [http://www.youtube.com/user/ThytOS#grid/user/0DBF8EC1B953D567 Mehrstündiger Vortrag über HTML5, CSS3]
 == Ressourcen ==