diff options
Diffstat (limited to 'files/de/web/guide')
30 files changed, 5974 insertions, 0 deletions
diff --git a/files/de/web/guide/ajax/erste_schritte/index.html b/files/de/web/guide/ajax/erste_schritte/index.html new file mode 100644 index 0000000000..011696a2cd --- /dev/null +++ b/files/de/web/guide/ajax/erste_schritte/index.html @@ -0,0 +1,338 @@ +--- +title: Erste Schritte +slug: Web/Guide/AJAX/Erste_Schritte +tags: + - AJAX + - API + - JavaScript + - XMLHttRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div> + +<p class="summary">Dieser Artikel führt Sie durch die AJAX-Grundlagen und gibt einige einfache praktische Beispiele für den Einstieg.</p> + +<h2 id="Was_ist_AJAX">Was ist AJAX?</h2> + +<p>AJAX steht für <strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML. Kurz gesagt ist es die Verwendung des XMLHttpRequest-Objekts zur Kommunikation mit Servern. Es kann Informationen in verschiedenen Formaten senden und empfangen, darunter JSON, XML, HTML und Textdateien. Das ansprechendste Merkmal von AJAX ist seine "asynchrone" Natur, d.h. es kann mit dem Server kommunizieren, Daten austauschen und die Seite aktualisieren, ohne die Seite aktualisieren zu müssen.</p> + +<p>Die zwei Hauptmerkmale von AJAX ermöglichen Folgendes::</p> + +<ul> + <li>Anfragen an den Server stellen, ohne die Seite neu zu laden</li> + <li>Daten vom Server empfangen und mit ihnen arbeiten</li> +</ul> + +<h2 id="Schritt_1_–_Wie_man_eine_HTTP-Anfrage_stellt">Schritt 1 – Wie man eine HTTP-Anfrage stellt</h2> + +<p>Um mit JavaScript eine HTTP-Anfrage an den Server zu stellen, wird eine Instanz eines Objekts mit der notwendigen Funktionalität benötigt. An dieser Stelle kommt XMLHttpRequest ins Spiel. Sein Vorgänger entstand im Internet Explorer als ein ActiveX-Objekt namens XMLHTTP. Dann folgten Mozilla, Safari und andere Browser, die ein XMLHttpRequest-Objekt implementierten, das die Methoden und Eigenschaften des ursprünglichen ActiveX-Objekts von Microsoft unterstützte. In der Zwischenzeit implementierte Microsoft auch XMLHttpRequest.</p> + +<pre class="brush: js notranslate">// Old compatibility code, no longer needed. +if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... + httpRequest = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE 6 and older + httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> + +<div class="note">Hinweis: Zur Veranschaulichung ist die obige Abbildung eine etwas vereinfachte Version des Codes, der für die Erstellung einer XMLHttp-Instanz zu verwenden ist. Ein realistischeres Beispiel finden Sie in Schritt 3 dieses Artikels.</div> + +<p>Nachdem die Anfrage abgesandt wurde, kommt eine Antwort zurück. Jetzt muss dem XMLHttp-Anfrageobjekt mitteilt werden, welche JavaScript-Funktion die Antwort behandeln wird, indem die <code>onreadystatechange</code> -Eigenschaft des Objekts gesetzt und nach der Funktion benannt wird, die aufgerufen werden soll, wenn sich der Status der Anfrage ändert, etwa so:</p> + +<pre class="brush: js notranslate"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre> + +<p>Beachten Sie, dass hinter dem Funktionsnamen keine Klammern oder Parameter stehen, da Sie der Funktion eine Referenz zuweisen, anstatt sie tatsächlich aufzurufen. Anstatt einen Funktionsnamen anzugeben, können Sie alternativ auch die JavaScript-Technik verwenden, Funktionen on the fly zu definieren (so genannte "anonyme Funktionen"), um die Aktionen zu definieren, die die Antwort verarbeiten, wie z.B:</p> + +<pre class="brush: js notranslate">httpRequest.onreadystatechange = function(){ + // Process the server response here. +}; +</pre> + +<p>Nachdem Sie erklärt haben, was passiert, wenn Sie die Antwort erhalten, müssen Sie als Nächstes die Anfrage tatsächlich stellen, indem Sie die open()- und send()-Methoden des HTTP-Anfrageobjekts aufrufen, und zwar wie folgt::</p> + +<pre class="brush: js notranslate">httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(); +</pre> + +<ul> + <li> + <p>Der erste Parameter des Aufrufs von open() ist die HTTP-Anforderungsmethode - GET, POST, HEAD oder eine andere von Ihrem Server unterstützte Methode. Behalten Sie die Methode in Großbuchstaben gemäß dem HTTP-Standard bei, da sonst einige Browser (wie Firefox) die Anfrage möglicherweise nicht verarbeiten. Weitere Informationen zu den möglichen HTTP-Anforderungsmethoden finden Sie in den <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a>.</p> + </li> + <li>Der zweite Parameter ist die URL, an die Sie die Anfrage senden. Als Sicherheitsfunktion können Sie standardmäßig keine URLs auf 3rd-Party-Domains aufrufen. Stellen Sie sicher, dass Sie den genauen Domainnamen auf allen Ihren Seiten verwenden, sonst erhalten Sie beim Aufruf von <code>open()</code> einen "permission denied"-Fehler. Ein häufiger Fallstrick ist der Zugriff auf Ihre Website über <code>domain.tld</code>, aber der Versuch, Seiten mit www.domain.tld aufzurufen. Wenn Sie wirklich eine Anfrage an eine andere Domain senden müssen, siehe <a href="/en-US/docs/Web/HTTP/CORS">HTTP access control (CORS)</a>.</li> + <li>Der optionale dritte Parameter legt fest, ob die Anforderung asynchron ist. Wenn dies der <code>true</code> ist (Standardeinstellung), wird die JavaScript-Ausführung fortgesetzt, und der Benutzer kann mit der Seite interagieren, solange die Serverantwort noch nicht eingetroffen ist. Dies ist das erste A in AJAX.</li> +</ul> + +<p>Der Parameter der send()-Methode kann jede Form von Daten beinhalten, die Sie beim <code>POST</code>-ing der Anfrage an den Server senden möchten. Formulardaten sollten in einem Format gesendet werden, das der Server parsen kann, wie ein Abfrage-String:</p> + +<pre class="notranslate"><code>"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"</code></pre> + +<p>oder andere Formate wie <code>multipart/form-data</code>, JSON, XML, etc.</p> + +<p>Beachten Sie, dass Sie möglicherweise den MIME-Typ der Anforderung angeben müssen, wenn Sie Daten <code>POST</code>-en wollen. Verwenden Sie beispielsweise Folgendes, bevor Sie <code>send()</code> für Formulardaten aufrufen, die als Abfragezeichenfolge gesendet werden::</p> + +<pre class="brush: js notranslate">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> + +<h2 id="Schritt_2_-_Behandlung_der_Server-Antwort">Schritt 2 - Behandlung der Server-Antwort</h2> + +<p>Als Sie die Anfrage abgeschickt haben, haben Sie den Namen einer JavaScript-Funktion zur Behandlung der Antwort angegeben:</p> + +<pre class="brush: js notranslate">httpRequest.onreadystatechange = nameOfTheFunction; +</pre> + +<p>Was soll diese Funktion tun? Zunächst muss die Funktion den Status der Anfrage überprüfen. Wenn der Status den Wert <code>XMLHttpRequest.DONE</code> (entsprechend 4) hat, bedeutet dies, dass die vollständige Serverantwort empfangen wurde und Sie mit der Verarbeitung fortfahren können.</p> + +<pre class="brush: js notranslate">if (httpRequest.readyState === XMLHttpRequest.DONE) { + // Everything is good, the response was received. +} else { + // Not ready yet. +} +</pre> + +<p>Die vollständige Liste <code>readyState</code> -Werte ist unter <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a> dokumentiert und lautet wie folgt:</p> + +<ul> + <li>0 (uninitialized) or (<strong>request not initialized</strong>)</li> + <li>1 (loading) or (<strong>server connection established</strong>)</li> + <li>2 (loaded) or (<strong>request received</strong>)</li> + <li>3 (interactive) or (<strong>processing request</strong>)</li> + <li>4 (complete) or (<strong>request finished and response is ready</strong>)</li> +</ul> + +<p>Überprüfen Sie als Nächstes die <a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes</a> der HTTP-Antwort. Die möglichen Codes sind beim <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> aufgelistet. Im folgenden Beispiel unterscheiden wir zwischen einem erfolgreichen und einem nicht erfolgreichen AJAX-Aufruf, indem wir nach einem <code>200 OK</code>-Antwort-Code suchen.</p> + +<pre class="brush: js notranslate">if (httpRequest.status === 200) { + // Perfect! +} else { + // There was a problem with the request. + // For example, the response may have a 404 (Not Found) + // or 500 (Internal Server Error) response code. +} +</pre> + +<p>Nachdem Sie den Status der Anfrage und den HTTP-Statuscode der Antwort überprüft haben, können Sie mit den vom Server gesendeten Daten tun, was Sie wollen. Sie haben zwei Möglichkeiten, auf diese Daten zuzugreifen:</p> + +<ul> + <li><code>httpRequest.responseText</code> – gibt die Server-Antwort als eine Zeichenkette aus Text zurück</li> + <li><code>httpRequest.responseXML</code> – gibt die Antwort als ein XMLDocument-Objekt zurück, das Sie mit JavaScript-DOM-Funktionen durchlaufen können</li> +</ul> + +<p>Beachten Sie, dass die obigen Schritte nur gültig sind, wenn Sie eine asynchrone Anforderung verwendet haben (der dritte Parameter von <code>open()</code> war nicht spezifiziert oder auf true gesetzt). Wenn Sie eine synchrone Anforderung verwendet haben, brauchen Sie keine Funktion anzugeben, aber davon wird dringend abgeraten, da dies eine schlechte Benutzerführung zur Folge hat.</p> + +<h2 id="Schritt_3_–_Ein_einfaches_Beispiel">Schritt 3 – Ein einfaches Beispiel</h2> + +<p>Lassen Sie uns das alles mit einer einfachen HTTP-Anfrage zusammenfassen. Unser JavaScript wird ein HTML-Dokument, <code>test.html</code>, anfordern, das den Text "Ich bin ein Test" enthält. Dann <code>alert()</code> wir den Inhalt der Antwort. Beachten Sie, dass dieses Beispiel <a href="https://wiki.selfhtml.org/wiki/Vanilla-JS">Vanilla JavaScript</a> verwendet - es handelt sich nicht um jQuery. Außerdem sollten sich die HTML-, XML- und PHP-Dateien im selben Verzeichnis befinden.</p> + +<pre class="brush: html notranslate"><button id="ajaxButton" type="button">Make a request</button> + +<script> +(function() { + var httpRequest; + document.getElementById("ajaxButton").addEventListener('click', makeRequest); + + function makeRequest() { + httpRequest = new XMLHttpRequest(); + + if (!httpRequest) { + alert('Giving up :( Cannot create an XMLHTTP instance'); + return false; + } + httpRequest.onreadystatechange = alertContents; + httpRequest.open('GET', 'test.html'); + httpRequest.send(); + } + + function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } +})(); +</script> +</pre> + +<p>In this example:</p> + +<ul> + <li>Der Benutzer klickt auf den "Make a request"- Button;</li> + <li>Der Ereignisbehandler ruft die <code>makeRequest()-</code>Funktion auf;</li> + <li>Die Anfrage wird gestellt und dann (<code>onreadystatechange</code>) zur Ausführung an <code>alertContents()</code> übergeben;</li> + <li><code>alertContents()</code> prüft, ob die Antwort empfangen wurde und OK ist, dann <code>alert()</code> den Inhalt der <code>test.html</code>-Datei.</li> +</ul> + +<div class="note">Hinweis: Wenn Sie eine Anfrage an ein Stück Code senden, das XML statt einer statischen HTML-Datei zurückgibt, müssen Sie die Antwortheader so einstellen, dass sie im Internet Explorer funktionieren.. Wenn Sie den Header Content-Type <code>Content-Type: application/xml nicht angeben</code>, gibt IE nach der Zeile, in der Sie versucht haben, auf ein XML-Element zuzugreifen, einen JavaScript-Fehler " Object Expected " aus.</div> + +<div class="note"><strong>Hinweis 2</strong>: Wenn Sie den Header <code>Cache-Control: no-cache</code> nicht setzen, wird der Browser die Antwort zwischenspeichern und die Anfrage nie erneut senden, was das Debugging erschwert. Sie können auch einen immer unterschiedlichen GET-Parameter hinzufügen, wie einen Zeitstempel oder eine Zufallszahl (siehe <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div> + +<div class="note"><strong>Hinweis 3</strong>: Wenn die <code>httpRequest</code>-Variable global verwendet wird, können sich konkurrierende Aufrufe von <code>makeRequest()</code> gegenseitig überschreiben und eine Wettlaufsituation auslösen. Wird der <code>httpRequest </code>lokal ain einer <a href="/en/JavaScript/Guide/Closures">closure</a> Umgebung mit einer AJAX-Function deklariert, so wird dies vermieden.</div> + +<p>Im Falle eines Kommunikationsfehlers (z. B. bei einem Serverausfall) wird beim Zugriff auf den Antwortstatus in der Methode <code>onreadystatechange</code> eine Ausnahmemeldung zurückgegeben. Um dieses Problem zu beheben, könnten Sie Ihre <code>if...then</code>-Anweisung in a <code>try...catch</code> packen:</p> + +<pre class="brush: js notranslate">function alertContents() { + try { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } + catch( e ) { + alert('Caught Exception: ' + e.description); + } +} +</pre> + +<h2 id="Schritt_4_–_Arbeiten_mit_der_XML-Antwort">Schritt 4 – Arbeiten mit der XML-Antwort</h2> + +<p>Im vorherigen Beispiel haben wir nach dem Empfang der Antwort auf die HTTP-Anforderung die Eigenschaft <code>responseText</code> des Anforderungsobjekts verwendet, die den Inhalt der Datei <code>test.html</code> enthielt. Lassen Sie uns nun die <code>responseXML</code>-Eigenschaft ausprobieren.</p> + +<p>Lassen Sie uns zunächst ein gültiges XML-Dokument erstellen, das wir später anfordern werden. Das Dokument (<code>test.xml</code>) enthält Folgendes:</p> + +<pre class="brush: html notranslate"><?xml version="1.0" ?> +<root> + I'm a test. +</root> +</pre> + +<p>Im Skript brauchen wir nur die Anforderungszeile zu ändern:</p> + +<pre class="brush: html notranslate">... +onclick="makeRequest('test.xml')"> +... +</pre> + +<p>In <code>alertContents()</code> müssen wir die Zeile <code>alert(httpRequest.responseText);</code>ersetzen mit:</p> + +<pre class="brush: js notranslate">var xmldoc = httpRequest.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> + +<p>Dieser Code nimmt das von <code>responseXML</code> übergebene <code>XMLDocument</code>-Objekt und verwendet DOM-Methoden, um auf einige der im XML-Dokument enthaltenen Daten zuzugreifen. Sie können <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">here</a> das <code>test.xml</code> and<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html"> here</a> das aktualisierte test script aufrufen.</p> + +<h2 id="Schritt_5_–_Arbeiten_mit_Daten">Schritt 5 – Arbeiten mit Daten</h2> + +<p>Zum Schluss senden wir einige Daten an den Server und erhalten eine Antwort. Unser JavaScript wird diesmal eine dynamische Seite <code>test.php</code> anfordern, die die von uns gesendeten Daten entgegennimmt und einen "computed" string - "Hello, [user data]!" - den wir <code>alert()</code>-en werden.</p> + +<p>Zuerst fügen wir unserem HTML ein Textfeld hinzu, damit der Benutzer seinen Namen eingeben kann:</p> + +<pre class="brush: html notranslate"><label>Your name: + <input type="text" id="ajaxTextbox" /> +</label> +<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> + Make a request +</span></pre> + +<p>Wir fügen auch eine Zeile zu unserem Event-Handler hinzu, um die Daten des Benutzers aus dem Textfeld zu holen und sie zusammen mit der URL unseres serverseitigen Skripts an die Funktion <code>makeRequest()</code> zu senden:</p> + +<pre class="brush: js notranslate"> document.getElementById("ajaxButton").onclick = function() { + var userName = document.getElementById("ajaxTextbox").value; + makeRequest('test.php',userName); + }; +</pre> + +<p>Wir müssen <code>makeRequest()</code> so modifizieren, dass es die Benutzerdaten akzeptiert und an den Server weiterleitet. Wir werden die Anfragemethode von <code>GET</code> auf <code>POST</code> ändern und unsere Daten als Parameter in den Aufruf von <code>httpRequest.send()</code> aufnehmen:</p> + +<pre class="brush: js notranslate"> function makeRequest(url, userName) { + + ... + + httpRequest.onreadystatechange = alertContents; + httpRequest.open('POST', url); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.send('userName=' + encodeURIComponent(userName)); + } +</pre> + +<p>Die Funktion <code>alertContents()</code> kann auf die gleiche Weise wie in Schritt 3 geschrieben werden, um unsere Zeichenfolge zu <code>alert()</code>-en, wenn das alles ist, was der Server zurückgibt.. Nehmen wir jedoch an, der Server wird sowohl die berechnete Zeichenkette als auch die ursprünglichen Benutzerdaten zurückgeben. Wenn also unser Benutzer "Jane" in das Textfeld eingibt, würde die Antwort des Servers wie folgt aussehen::</p> + +<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p> + +<p>Um diese Daten mit <code>alertContents()</code> zu nutzen, können wir nicht einfach den <code>responseText</code> ausgeben, sondern wir müssen ihn parsen und die gewünschte Eigenschaft <code>computedString</code> <code>alert()</code>-en:</p> + +<pre class="brush: js notranslate">function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + var response = JSON.parse(httpRequest.responseText); + alert(response.computedString); + } else { + alert('There was a problem with the request.'); + } + } +}</pre> + +<p>Die <code>test.php</code>-Datei sollte folgendes enthalten:</p> + +<pre class="brush: php notranslate"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; +$computedString = "Hi, " . $name . "!"; +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array);</code></pre> + +<p>Weitere Informationen zu DOM-Methoden finden Sie unter <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a>.</p> + +<h2 id="Einfaches_zeitgesteuertes_XHR-Beispiel">Einfaches zeitgesteuertes XHR-Beispiel</h2> + +<p>Es folgt ein weiteres einfaches Beispiel - hier laden wir eine Textdatei über XHR, deren Struktur wie folgt angenommen wird:</p> + +<pre class="notranslate">TIME: 312.05 +TIME: 312.07 +TIME: 312.10 +TIME: 312.12 +TIME: 312.14 +TIME: 312.15</pre> + +<p>Sobald die Textdatei geladen ist, <code>split()</code>-en wir die Elemente an jedem Zeilenumbruchszeichen (<code>\n</code> - im Grunde genommen dort, wo jeder Zeilenumbruch in der Textdatei steht) in ein Array auf und geben dann die vollständige Liste der Zeitstempel und den letzten Zeitstempel auf der Seite aus.</p> + +<p>Dies wird alle 5 Sekunden wiederholt, unter Verwendung eines <code>setInterval()</code> Aufrufs. Die Idee wäre, dass eine Art serverseitiges Skript die Textdatei kontinuierlich mit neuen Zeitstempeln aktualisiert, und unser XHR-Code verwendet wird, um den neuesten Zeitstempel auf der Client-Seite zu melden.</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>XHR log time</title> + <style> + + </style> + </head> + <body> + <p id="writeData" class="data">Off-Line</p> + <p id="lastStamp">No Data yet</p> + + <script> + + const fullData = document.getElementById('writeData'); + const lastData = document.getElementById('lastStamp'); + + function fetchData() { + console.log('Fetching updated data.'); + let xhr = new XMLHttpRequest(); + xhr.open("GET", "time-log.txt", true); + xhr.onload = function() { + updateDisplay(xhr.response); + } + xhr.send(); + } + + function updateDisplay(text) { + fullData.textContent = text; + + let timeArray = text.split('\n'); + + // included because some file systems always include a blank line at the end of text files. + if(timeArray[timeArray.length-1] === '') { + timeArray.pop(); + } + + lastData.textContent = timeArray[timeArray.length-1]; + } + + setInterval(fetchData, 5000); + </script> + </body> +</html></pre> diff --git a/files/de/web/guide/ajax/index.html b/files/de/web/guide/ajax/index.html new file mode 100644 index 0000000000..e6106c0cb5 --- /dev/null +++ b/files/de/web/guide/ajax/index.html @@ -0,0 +1,83 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +<div class="callout-box"><strong><a href="/de/AJAX/Einführung" title="de/AJAX/Einführung">Einführung</a></strong><br> +Erste Schritte in AJAX.</div> + +<p><strong>AJAX (Asynchronous JavaScript and XML)</strong> ist für sich selbst keine eigene Technologie, sondern beschreibt ein "neuen" Ansatz verschiedene vorhandene Technologien zu nutzen wie <a href="/de/HTML" title="de/HTML">HTML</a> oder <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/CSS" title="de/CSS">Cascading Style Sheets</a>, <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a>, das <a href="/de/DOM" title="de/DOM">Document Object Model</a>, <a href="/de/XML" title="de/XML">XML</a>, <a href="/de/XSLT" title="de/XSLT">XSLT</a> und das <a href="/de/docs/Web/API/XMLHttpRequest" title="de/XMLHttpRequest">XMLHttpRequest Objekt</a>.<br> + Kombiniert man diese Technologien zum AJAX-Modell, können Web-Anwendungen schnell und schrittweise Updates an der Webseite vornehmen, ohne jedes Mal die gesamte Seite neu zu laden. Dadurch können Web-Anwendungen schneller auf Benutzereingaben reagieren.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Dokumentaion"><a href="/Special:Tags?tag=AJAX&language=de" title="Special:Tags?tag=AJAX&language=de">Dokumentaion</a></h4> + + <dl> + <dt><a href="/en-US/docs/Web/Guide/AJAX/Getting_Started">Einführung</a> (en)</dt> + <dd><small>Dieser Artikel zeigt Grundlagen von AJAX und gibt zum Einstieg zwei einfache Beispiele.</small></dd> + <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Alternative AJAX Techniken</a> (en)</dt> + <dd><small>Viele Artikel über Ajax fokussieren sich auf die Verwendung von XMLHttp, Ajax Techniken beschränken sich jedoch nicht nur auf XMLHttp. Es gibt weitere, unterschiedliche Methoden.</small></dd> + <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">AJAX: Ein neuer Ansatz für Web-Anwendungen</a> (en)</dt> + <dd><small>Jesse James Garrett, von <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, schrieb diesen Artikel im Februar 2005 und liefert eine Einführung in AJAX und die dahinter stehenden Konzepte.</small></dd> + <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">Ein einfacherer AJAX Weg</a> (en)</dt> + <dd><small>"Es hat sich herausgestellt, dass es sehr einfach ist, die Vorteile vom XMLHttpRequest Objekt zu nutzen, eine Web-Anwendung wie eine Desktop-Anwendung reagieren zu lassen und immer noch die traditionellen Werkzeuge wie Formulare für Benutzereingaben zu verwenden. Ich habe außerdem gute Wege gefunden um serverseitig Fehler zu behandeln, um das Debugging einfacher zu gestalten."</small></dd> + <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Den Zurück-Knopf wiederherstellen und Lesezeichen für AJAX Anwendungen ermöglichen</a> (en)</dt> + <dd><small>Dieser, von Mike Stenhouse verfasste Artikel, zeigt Methoden wie man die Funktionalität des Zurück-Knopfs wiederherstellen kann und die Probleme für Lesezeichen in AJAX-Anwendungen löst.</small></dd> + <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">AJAX Fehler</a> (en)</dt> + <dd><small>Alex Bosworth hat einen Artikel geschrieben, der einige Fehlerquellen mit der AJAX-Programmierung aufzeigt. "Sicherlich ist AJAX cool, und Entwickler lieben es mit coolen Technologien zu spielen. Jedoch ist AJAX ein Werkzeug und kein Spielzeug. AJAX ist außerdem eine gefährliche Technologie, die mit ihrer Mächtigkeit UI Probleme sowie Serverseitig Probleme verursacht. Also habe ich eine liste der möglichen Fehler, die AJAX-Prorammieren häufig machen, zusammengestellt."</small></dd> + <dt><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest Spezifikation</a> (en)</dt> + <dd><small>W3C Working draft</small></dd> + </dl> + + <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&language=de" title="Special:Tags?tag=AJAX&language=de">Alle zeigen...</a></span></p> + </td> + <td> + <h4 id="Community">Community</h4> + + <ul> + <li>Mozillas AJAX Foren:</li> + </ul> + + <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p> + + <ul> + <li><a href="/en/AJAX/Community" title="en/AJAX/Community">AJAX community links</a></li> + </ul> + + <h4 id="Tools">Tools</h4> + + <ul> + <li><a class="external" href="http://www.ajaxprojects.com">Toolkits und Frameworks</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li> + <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> + <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> + <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">XMLHTTP Interface Library</a></li> + <li><a href="/Special:Tags?tag=AJAX:Tools&language=de" title="Special:Tags?tag=AJAX:Tools&language=de">weitere...</a></li> + </ul> + + <h4 id="Beispiele">Beispiele</h4> + + <ul> + <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li> + <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> + <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker mit AJAX</a></li> + <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System mittels XMLHttpRequest</a></li> + <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Eigene Ajax Effekte erstellen</a></li> + <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Bookmarklets</a></li> + <li><a class="external" href="http://www.hotajax.org">Hot Ajax</a></li> + </ul> + + <h4 id="Verwandte_Themen">Verwandte Themen</h4> + + <dl> + <dd><a href="/de/HTML" title="de/HTML">HTML</a>, <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/CSS" title="de/CSS">CSS</a>, <a href="/de/DOM" title="de/DOM">DOM</a>, <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a>, <a href="/de/XML" title="de/XML">XML</a>, <a href="/de/XMLHttpRequest" title="de/XMLHttpRequest">XMLHttpRequest</a>, <a href="/de/XSLT" title="de/XSLT">XSLT</a>, <a href="/de/DHTML" title="de/DHTML">DHTML</a>, <a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}</p> diff --git a/files/de/web/guide/css/getting_started/farbe/index.html b/files/de/web/guide/css/getting_started/farbe/index.html new file mode 100644 index 0000000000..a3e7d6a4eb --- /dev/null +++ b/files/de/web/guide/css/getting_started/farbe/index.html @@ -0,0 +1,332 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Farbe +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.</p> + +<h2 class="clearLeft" id="Information_Farbe">Information: Farbe</h2> + +<p>In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:</p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primär</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>sekundär</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="tuto_details"> +<div class="tuto_type">Details</div> + +<p>Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:</p> + +<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> +</table> + +<p>Mehr Details zur erweiterten Liste finden Sie unter <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.</p> +</div> + +<p>Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei <em>hexadezimalen</em> Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>schwarz</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>reines rot</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>reines grün</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>reines blau</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>weiß</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p><br> + Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>schwarz</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>reines rot</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>reines grün</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>reines blau</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>weiß</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p>Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:</p> + +<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>Starten Sie mit reinem rot:</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu:</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu:</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>Um es dunkler zu machen, reduzieren sie alle Farbkomponenten:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an:</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau:</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> +</table> + +<p>Für einen Pastellton wie ein blasses blau:</p> + +<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>Starten Sie mit reinem weiß:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>Reduzieren Sie die anderen Farbkomponenten ein wenig:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.</p> + +<p>Das ist zum Beispiel Kastanienbraun (dunkles rot):</p> + +<pre class="brush:css">rgb(128, 0, 0) +</pre> + +<p>Alle Details zur Angabe von Farben finden sie unter <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in der CSS Spezifikation.</p> + +<p>Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in der CSS Spezifikation.</p> +</div> + +<h3 id="Farbeigenschaften">Farbeigenschaften</h3> + +<p>Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.</p> + +<p>Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.</p> + +<p>Hintergründe können auf <code>transparent</code> gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Die <strong>Beispiel-</strong>Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:</p> + +<pre class="brush:css">background-color: #fffff4; +</pre> + +<p>Die <strong>Mehr Details</strong>-Boxen verwenden dieses blasse grau:</p> + +<pre class="brush:css">background-color: #f4f4f4; +</pre> +</div> + +<p> </p> + +<h2 id="Aktion_Farbcodes_verwenden">Aktion: Farbcodes verwenden</h2> + +<ol> + <li>Bearbeiten Sie Ihre CSS Datei.</li> + <li>Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.) + <pre class="brush:css;highlight:[13]">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphs */ +p {color: blue;} +#first {font-style: italic;} + +/* initial letters */ +strong { + color: red; + background-color: #ddf; + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> + </li> + <li>Save the file and refresh your browser to see the result.</li> +</ol> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">Herausforderung</div> + +<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p> + +<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>The following values are reasonable approximations of the named colors:</p> + +<pre class="brush: css">strong { + color: #f00; /* red */ + background-color: #ddf; /* pale blue */ + font: 200% serif; +} + +.carrot { + color: #fa0; /* orange */ +} + +.spinach { + color: #080; /* dark green */ +} + +p { + color: #00f; /* blue */ +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Sehen Sie sich die Lösung an.</a></div> + +<h2 id="What_next">What next?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p> diff --git a/files/de/web/guide/css/getting_started/index.html b/files/de/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..3629de6539 --- /dev/null +++ b/files/de/web/guide/css/getting_started/index.html @@ -0,0 +1,59 @@ +--- +title: Einführung +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Einführung' +translation_of: Learn/CSS/First_steps +--- +<h3 id="Einleitung">Einleitung</h3> +<p>Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.</p> +<p>Die Führung durch die grundlegenden Möglichkeiten von CSS ist mit einigen praktischen Beispielen zum Testen auf dem eigenen Computer untermalt. Das Tutorial gliedert sich in zwei Teile:</p> +<ul> + <li>Der erste Teil verdeutlicht die grundlegenden Möglichkeiten von CSS, die in Mozilla Browsern und in den meisten anderen modernen Browsern funktionieren.</li> +</ul> +<ul> + <li>Der zweite Teil beinhaltet einige Beispiele über spezielle Möglichkeiten, die in Mozilla Browsern funktionieren, aber nicht unbedingt von anderen Browsern unterstützt werden.</li> +</ul> +<p>Diese Einführung basiert auf der <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Spezifikation</a>.</p> +<h4 id="An_wen_richtet_sich_dieses_Tutorial">An wen richtet sich dieses Tutorial?</h4> +<p>Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.</p> +<p>Anfänger, die noch wenig über CSS wissen, sollten den ersten Teil dieses Tutorials lesen, um CSS zu verstehen und zu lernen wie man es benutzt. Danach bietet sich der zweite Teil an, um die Möglichkeiten in Mozilla Produkten kennen zu lernen.</p> +<p>Fortgeschrittene, die schon etwas über CSS wissen, können einfach die Teile überspringen, die sie schon kennen und nur die Teile lesen, die sie interessiert.</p> +<p>Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.</p> +<h4 id="Was_braucht_man_bevor_man_anfängt">Was braucht man bevor man anfängt?</h4> +<p>Am Besten versteht man dieses Tutorial, wenn man die Beispiele direkt nachvollzieht. Benötigt wird dazu ein Editor für Textdateien und der Mozilla Firefox mit dem man grundlegend umgehen sollte.</p> +<p>Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.</p> +<p>Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.</p> +<p><strong>Hinweis: </strong> CSS ermöglicht das Arbeiten mit Farben. Einige Teile dieses Tutorials sind von Farben abhängig. Diese Teile können nur benutzt werden, wenn ein Farbdisplay mit normalen Farbeinstellungen verfügbar ist.</p> +<h4 id="Wie_man_dieses_Tutorial_benutzen_sollte">Wie man dieses Tutorial benutzen sollte</h4> +<p>Um dieses Tutorial zu verwenden, sollten die Seiten sorgfältig und der Reihe nach, gelesen werden. Wird eine Seite ausgelassen, könnte es schwierig werden die nachfolgenden Seiten zu verstehen.</p> +<p>Auf jeder Seite gibt es einen <em>Informationsbereich</em>, um zu verstehen wie CSS funktioniert und einen <em>Aktionsbereich</em>, um CSS auf dem eigenen Computer selbst auszuprobieren.</p> +<p>Um das Wissen zu überprüfen, gibt es am Ende jeder Seite eine Aufgabe. Die Lösungen einiger Aufgaben ergeben sich aus den nachfolgenden Seiten des Tutorials.</p> +<p>Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter <em>Weite Details</em> zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.</p> +<h3 id="Erster_Teil">Erster Teil</h3> +<p>Eine Schritt für Schritt Einführung in CSS:</p> +<ol> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">Was ist CSS</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Warum CSS</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Wie CSS funktioniert</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Kaskade und Vererbung</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selektoren</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Lesbares CSS</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Textformatierung</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Farbe</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Inhalt Boxen</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabellen</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Medien</a></li> +</ol> +<h3 id="Zweiter_Teil">Zweiter Teil</h3> +<p>Beispiele, die die Anwendung von CSS in Mozilla zeigen:</p> +<ol> + <li><a href="/de/docs/Web/Guide/CSS/Getting_started/JavaScript" title="de/CSS/Einführung/JavaScript">JavaScript</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_started/XBL_bindings" title="de/CSS/Einführung/XBL_bindings">XBL bindings</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XUL" title="de/CSS/Einführung/CSS_in_XUL">CSS in XUL</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_SVG" title="de/CSS/Einführung/CSS_in_SVG">CSS in SVG</a></li> + <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XML" title="de/CSS/Einführung/CSS_in_XML">CSS in XML</a></li> +</ol> diff --git a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html new file mode 100644 index 0000000000..8ebc7fe0cc --- /dev/null +++ b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html @@ -0,0 +1,159 @@ +--- +title: Kaskadierung und Vererbung +slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}<span class="seoSummary">Das ist der vierte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.</span></p> + +<h2 class="clearLeft" id="Information_Kaskadierung_und_Vererbung">Information: Kaskadierung und Vererbung</h2> + +<p>Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.</p> + +<p>Drei Hauptquellen von Styleinformationen bilden eine <em>Kaskade</em>. Diese sind:</p> + +<ul> + <li>Die standardmäßigen Styles des Webbrowsers für die Markup Language.</li> + <li>Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.</li> + <li>Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden: + <ul> + <li>In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.</li> + <li>In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.</li> + <li>Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.</li> + </ul> + </li> +</ul> + +<p>Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.</p> + +<p>Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei <code>userContent.css</code> innerhalb Ihres Browserprofils an.</p> + +<p>Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.</p> +</div> + +<p>Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.</p> + +<p>Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.</p> + +<p>Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.</p> + +<p>Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.</p> + +<p>Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.</p> + +<p>Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>CSS ermöglicht es auch mit dem Schlüsselwort <code>!important</code> die Styles vom Autor zu überschreiben.</p> + +<p>Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.</p> + +<p>Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in der CSS Spezifikation auf.</p> +</div> + +<h2 id="Aktion_Vererbung_verwenden">Aktion: Vererbung verwenden</h2> + +<ol> + <li>Editieren Sie Ihre CSS Datei.</li> + <li>Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist: + <pre class="brush:css">p { + color: blue; + text-decoration: underline; +} +</pre> + </li> + <li>Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.<br> + + <p>Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.</p> + </li> +</ol> + +<h2 id="Before" name="Before">Davor</h2> + +<h3 id="HTML_Inhalt">HTML Inhalt</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h3 id="CSS_Inhalt">CSS Inhalt</h3> + +<pre class="brush: css">strong { + color:red +} +</pre> + +<p>{{ EmbedLiveSample('Before') }}</p> + +<h2 id="After" name="After">Danach</h2> + +<h3 id="HTML_Inhalt_2">HTML Inhalt</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p></pre> + +<h3 id="CSS_Inhalt_2">CSS Inhalt</h3> + +<pre class="brush:css" dir="rtl">p { + color:blue; + text-decoration:underline; +} + +strong { + color:red; +}</pre> + +<p>{{ EmbedLiveSample('After') }}</p> + +<p> </p> + +<div class="tuto_example"> +<div class="tuto_type">Herausforderung</div> +Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind: + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Mögliche Lösung</div> + +<p>Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:</p> + +<pre class="brush: css">p { + color: blue; +} + +strong { + color: red; + text-decoration: underline; +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div> +<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div> + +<p> </p> + +<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2> + +<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <code><p></code> und <code><strong></code>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch <a href="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren" title="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren">selektivere Art</a> angeben können.</p> diff --git a/files/de/web/guide/css/getting_started/lesbares_css/index.html b/files/de/web/guide/css/getting_started/lesbares_css/index.html new file mode 100644 index 0000000000..460d137c59 --- /dev/null +++ b/files/de/web/guide/css/getting_started/lesbares_css/index.html @@ -0,0 +1,165 @@ +--- +title: Lesbares CSS +slug: Web/Guide/CSS/Getting_started/Lesbares_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}<span class="seoSummary">Das ist der sechste Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.</span></p> + +<h2 class="clearLeft" id="Information_Lesbares_CSS">Information: Lesbares CSS</h2> + +<p>Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.</p> + +<h3 id="Leerstellen">Leerstellen</h3> + +<p>Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.</p> + +<p>Im Kontext eines Seitenlayouts und -zusammenstellung sind <strong>Leerstellen</strong> die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.</p> + +<p>Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.</p> + +<p>Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiele</div> + +<p>Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:</p> + +<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + +<p>Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:</p> + +<pre class="brush: css">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + +<p>Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:</p> + +<pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + +<p>Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):</p> + +<pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + +<p>Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.</p> + +<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } +.vegetable.carrot { color: orange; height: 90px; width: 10px } +.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } +</pre> +</div> + +<p>Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.</p> + +<h3 id="Kommentare">Kommentare</h3> + +<p>Kommentare in CSS beginnen mit <code>/*</code> und enden mit <code>*/</code>.</p> + +<p>Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke <em>auskommentieren</em>.</p> + +<p>Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<pre class="brush: css">/* style for initial letter C in first paragraph */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> + +<h3 id="Gruppierte_Selektoren">Gruppierte Selektoren</h3> + +<p>Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.</p> + +<p>An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.</p> + +<p>Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.</p> + +<pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> + +<h2 id="Aktion_Kommentare_hinzufügen_und_das_Layout_verbessern">Aktion: Kommentare hinzufügen und das Layout verbessern</h2> + +<ol> + <li>Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li>Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.</li> + <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details"> +<div class="tuto_type">Herausforderung</div> + +<p>Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>(Es gibt mehrere Wege dies zu erreichen.)</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Mögliche Lösung</div> +Eine mögliche Lösung wäre das Auskommentieren der Regel <code>.carrot</code>: + +<pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> +<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div> +<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div> + +<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2> + +<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles" title="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles">das Aussehen von Text</a> in Ihrem Dokument zu spezifizieren<strong>.</strong></p> diff --git a/files/de/web/guide/css/getting_started/selektoren/index.html b/files/de/web/guide/css/getting_started/selektoren/index.html new file mode 100644 index 0000000000..cd9115477c --- /dev/null +++ b/files/de/web/guide/css/getting_started/selektoren/index.html @@ -0,0 +1,429 @@ +--- +title: Selektoren +slug: Web/Guide/CSS/Getting_started/Selektoren +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung & Vererbung")}}<span class="seoSummary">Das ist der fünfte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.</span></p> + +<h2 class="clearLeft" id="Information_Selektoren">Information: Selektoren</h2> + +<p>CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p>In der CSS Terminologie ist die gesamte Zeile eine <em>Regel</em>. Diese Regel beginnt mit <code>strong</code>, welches ein <em>Selektor</em> ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Der Teil innerhalb der geschwungenen Klammern ist die <em>Deklaration</em>.</p> + +<p>Das Schlüsselwort <code>color</code> ist eine <em>Eigenschaft (Property)</em> und <code>red</code> is ein <em>Wert (value)</em>.</p> + +<p>Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.</p> + +<p>Dieser Tutorial bezeichnet einen Selektor wie <code>strong</code> als einen <em>Tag</em>-Selektor. Die CSS Spezifikation bezeichnet es als <em>Type</em>-Selector.</p> +</div> + +<p>Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.</p> + +<p>Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.</p> + +<p>Zwei Attribute haben einen speziellen Status in CSS. Diese sind <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> und <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Class_Selektoren">Class Selektoren</h3> + +<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.</p> + +<p>Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.</p> + +<h3 id="ID_Selektoren">ID Selektoren</h3> + +<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a> Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.</p> + +<p>Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> +Dieser HTML Tag hat ein <code>class</code> Attribut und ein <code>id</code> Attribute: + +<pre class="brush: html"><p class="key" id="principal"> +</pre> + +<p>Der <strong>id</strong> Wert, <code>principal</code>, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben K<strong>lassennamen</strong>, <code>key</code>, haben.</p> + +<p>In einem CSS Stylesheet macht diese Regel alle Elemente mit der class <code>key</code> grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)</p> + +<pre class="brush: css">.key { + color: green; +} +</pre> + +<p>Diese Regel macht das eine Element mit der <strong>id</strong> <code>principal</code> fettgedruckt:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<p>Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.</p> + +<p>Der Selektor <code>.key</code> zum Beispiel selektier alle Elements mit der Klasse <code>key</code>. Der Selektor <code>p.key</code> selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse <code>key</code> haben.</p> + +<p>Sie sind nicht auf die zwei speziellen Attribute <code>class</code> und <code>id</code> eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor <code>[type='button']</code> zum Beispiel selektiert alle Elemente, die ein <code>type</code> Attribut mit dem Wert <code>button</code> haben.</p> +</div> + +<p>Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.</p> + +<p>Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.</p> + +<h3 id="Pseudo-classes_Selektoren">Pseudo-classes Selektoren</h3> + +<p>Eine CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="/de/docs/Web/CSS/Pseudo-classes">pseudo-class</a> ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.</p> + +<p>Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> zu finden.</p> + +<div class="tuto_example"> +<div class="tuto_type">Syntax</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Liste_von_pseudo-classes">Liste von pseudo-classes</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="Information_Selektoren_basieren_auf_Beziehungen">Information: Selektoren basieren auf Beziehungen</h2> + +<p>CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.</p> + +<table id="relselectors"> + <caption>Gängige Selektoren basierend auf Beziehungen</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selektor</strong></td> + <td><strong>Selektiert</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Jedes E Element, das ein <em>Nachfolger</em> eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Jedes E Element, das ein Kind eines A Elements ist</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Jedes E Element, das das erste Kind seines Parent ist</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Jedes E Element, das das nächste S<em>ibling</em> eines B Elements ist (das heißt: das nächste Kind von demselben Parent)</td> + </tr> + </tbody> +</table> + +<p>Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.</p> + +<p>Sie können auch das Symbol <code>*</code> (asterisk) verwenden, welches "jedes Element" bedeutet.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Eine HTML Tabelle hat ein <code>id</code> Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:</p> + +<pre class="brush:css">#data-table-1 td:first-child { + font-weight: bolder; +} + +#data-table-1 td:first-child + td { + font-family: monospace; +} +</pre> + +<p>Das Ergebnis sieht so aus:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.</p> + +<p>Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein <code>class</code> oder ein <code>id</code> Attribut zu geben. Stattdessen erledigt CSS die Arbeit.</p> + +<p>In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.</p> + +<p>Mehr Beispiele zu <a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="/de/docs/Web/Guide/CSS/Getting_Started/Tables">Tabellen</a> finden Sie auf der CSS Referenzseite.</p> +</div> + +<h2 id="Aktion_class_und_ID_Selektoren_verwenden">Aktion: class und ID Selektoren verwenden</h2> + +<ol> + <li>Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.</li> + <li>Danach setzen Sie ein <strong>id</strong> und <strong>class</strong> Attribut auf den ersten Absatz und ein <strong>id</strong> Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + <pre class="brush:css">strong { + color: red; +} + +.carrot { + color: orange; +} + +.spinach { + color: green; +} + +#first { + font-style: italic; +} +</pre> + </li> + <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.</p> + + <p>Die class Selektoren <code>.carrot</code> und <code>.spinach</code> haben Priorität gegenüber dem tag Selektor <code>strong</code>.</p> + + <p>Der ID Selektor <code>#first</code> hat Priorität gegenüber den class und den tag Selektoren.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Herausforderungen</div> + +<ol> + <li>Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Mögliche Lösung</div> + +<ol> + <li>Fügen Sie eine Regel mit dem ID Selektor <code>#second</code> und einer Deklaration <code>color: blue;</code> wie unten dargestellt hinzu: + + <pre class="brush: css">#second { + color: blue; +} +</pre> + Ein noch spezifischerer Selektor <code>p#second</code> funktioniert auch.</li> + <li>Ändern Sie den Selektor der neuen Regel auf <code>p</code>, damit er ein Tag-Selektor ist: + <pre class="brush: css">p { + color: blue; +} +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div> +<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div> + +<h2 id="Aktion_pseudo-classes_Selektoren_verwenden">Aktion: pseudo-classes Selektoren verwenden</h2> + +<ol> + <li>Erstellen Sie eine HTML Datei wie folgt: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Aktion_Selektoren_basierend_auf_Beziehungen_und_pseudo-classes_verwenden">Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden</h2> + +<p>Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel <strong>reine CSS Dropdown Menüs</strong> zu erstellen (die nur aus CSS ohne <a href="/de/docs/Web/JavaScript" title="de/docs/Web/JavaScript">JavaScript</a> bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p>Angewendet auf eine HTML Struktur wie die folgende:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>Sehen sie in das komplette <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basierte Dropdown Menü Beispiel</a> für mögliche Hinweise.</p> + +<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2> + +<p>Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS" title="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS">CSS leichter lesbar</a> zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}</p> diff --git a/files/de/web/guide/css/getting_started/textstyles/index.html b/files/de/web/guide/css/getting_started/textstyles/index.html new file mode 100644 index 0000000000..d03bea91e6 --- /dev/null +++ b/files/de/web/guide/css/getting_started/textstyles/index.html @@ -0,0 +1,151 @@ +--- +title: Textstyles +slug: Web/Guide/CSS/Getting_started/Textstyles +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}<span class="seoSummary">Das ist der siebte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.</span></p> + +<h2 class="clearLeft" id="Information_Textstyles">Information: Textstyles</h2> + +<p>CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.</p> + +<p>Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:</p> + +<ul> + <li>Fettgedruckt, kursiv und kleine Großbuchstaben</li> + <li>Schriftgröße</li> + <li>Zeilenhöhe</li> + <li>Schriftart</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<pre class="brush:css">p { + font: italic 75%/125% "Comic Sans MS", cursive; +} +</pre> + +<p>Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.</p> + +<p>Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.</p> + +<p>Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.</p> + +<p>Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf <code>normal</code> zurückgesetzt werden.</p> +</div> + +<h3 id="Schriftarten">Schriftarten</h3> + +<p>Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.</p> + +<p>Beenden Sie die Liste mit einer eingebauten Standardschriftart: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> oder <code>monospace</code>.</p> + +<p>Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.</p> + +<p>Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.</p> + +<h3 id="Schriftgrößen">Schriftgrößen</h3> + +<p>Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.</p> + +<p>Sie können die bereits vordefinierten Werte wie <code>small</code>, <code>medium</code> und <code>large</code> verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie <code>smaller</code>, <code>larger</code>, <code>150%</code> oder <code>1.5em</code> verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind <code>1.5em</code> eineinhalb Mal so groß als die Schrift im Elternelement.</p> + +<p>Wenn nötig können Sie eine genaue Größe wie <code>14px</code> (14 Pixel) für einen Bildschirm oder <code>14pt</code> (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.</p> + +<p>Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.</p> + +<h3 id="Zeilenhöhe">Zeilenhöhe</h3> + +<p>Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.</p> + +<p>Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.</p> + +<h3 id="Textdekoration">Textdekoration</h3> + +<p>Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie <code>underline</code> oder <code>line-through</code> definieren. Sie können sie auf <code>none</code> setzen, um explizit jede Textdekoration zu entfernen.</p> + +<h3 id="Andere_Eigenschaften">Andere Eigenschaften</h3> + +<p>Um nur kursiv anzugeben, verwenden Sie {{ cssxref("font-style") }}<code>: italic;</code><br> + Um nur fettgedruckt anzugeben, verwenden Sie <code>{{ cssxref("font-weight") }}: bold;</code><br> + Um nur kleine Großbuchstaben anzugeben, verwenden Sie <code>{{ cssxref("font-variant") }}: small-caps;</code></p> + +<p>Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert <code>normal</code> oder <code>inherit</code> angeben.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mehr Details</div> + +<p>Sie können Textstyles auf viele andere Wege angeben.</p> + +<p>Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.</p> + +<p>Vermeiden Sie in einem komplexen Stylesheet die abgekürzte <code>font</code> Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).</p> + +<p>Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> + +<p>Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.</p> +</div> + +<h2 id="Aktion_Schriftart_angeben">Aktion: Schriftart angeben</h2> + +<p>Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.</p> + +<ol> + <li>Bearbeiten Sie Ihre CSS Datei.</li> + <li>Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: + <pre class="eval">body { + font: 16px "Comic Sans MS", cursive; +} +</pre> + </li> + <li>Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.</li> + <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Wählen Sie <strong>Ansicht > Schirftgröße > Vergrößern</strong> (oder <strong>Ansicht > Zoom > Vergrößern</strong>) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Herausforderung</div> + +<p>Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Mögliche Lösung</div> + +<p>Fügen Sie die folgende Style Deklaration zur <code>strong</code> Regel hinzu:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +Wenn Sie getrennte Deklarationen für <code>font-size</code> und <code>font-family</code> verwenden, dann wird die <code>font-style</code> Einstellung auf dem ersten Absatz <em>nicht</em> überschrieben. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div> + +<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2> + +<p>{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der <a href="/de/docs/Web/Guide/CSS/Getting_Started/Farbe" title="/de/docs/Web/Guide/CSS/Getting_Started/Farbe">nächste Teil</a> listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können<strong>.</strong></p> diff --git a/files/de/web/guide/css/getting_started/was_ist_css/index.html b/files/de/web/guide/css/getting_started/was_ist_css/index.html new file mode 100644 index 0000000000..47b52a99be --- /dev/null +++ b/files/de/web/guide/css/getting_started/was_ist_css/index.html @@ -0,0 +1,112 @@ +--- +title: Was ist CSS +slug: Web/Guide/CSS/Getting_started/Was_ist_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<div>{{CSSTutorialTOC}}</div> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} <span class="seoSummary">Das erste Kapitel von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS für Einsteiger</a> erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.</span></p> + +<h2 class="clearLeft" id="Was_ist_CSS">Was ist CSS</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.</p> + +<p>Ein <em>Dokument</em> ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer <em>Auszeichnungssprache</em> <em>(Markup Language)</em> strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.</p> + +<p>Ein solches Dokument einem Benutzer zu <em>präsentieren</em> bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.</p> + +<div class="tuto_example"> +<p><strong>Beispiele</strong></p> + +<ul> + <li>Eine Webseite, wie diese hier, ist ein Dokument.<br> + Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.</li> + <li>Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.</li> +</ul> +</div> + +<p>In dieser Anleitung gibt es Boxen mit der Beschriftung <strong>Weitere Details</strong>, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.</p> + +<div class="tuto_details"> +<div class="tuto_type">Weitere Details</div> + +<p>Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.</p> + +<p><span style="line-height: 1.5;">Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.</span></p> + +<p><span style="line-height: 1.5;">Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.</span></p> + +<p>Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> + <td>für Webseiten</td> + </tr> + <tr> + <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> + <td>allgemein für strukturierte Dokumente</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> + <td>für Grafiken</td> + </tr> + <tr> + <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> + <td>für Userinterfaces in Mozilla</td> + </tr> + </tbody> +</table> + +<p>Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Weitere Details</div> + +<p>In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt <em>user agent (UA)</em> genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.</p> + +<p>Für korrekte Definitionen der CSS-Terminologie sehen Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.</p> +</div> + +<h2 id="Action_Ein_Dokument_erstellen">Action: Ein Dokument erstellen</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + +<p>{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}</p> + +<ol> + <li>Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.</li> + <li>Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.</li> + <li>Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen <code>doc1.html</code></li> + <li>Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:</li> +</ol> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.</p> + +<h2 id="Was_nun">Was nun?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">nächsten Abschnitt</a> werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.</p> diff --git a/files/de/web/guide/css/getting_started/why_use_css/index.html b/files/de/web/guide/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..f0b8dc7a7e --- /dev/null +++ b/files/de/web/guide/css/getting_started/why_use_css/index.html @@ -0,0 +1,105 @@ +--- +title: Why use CSS? +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.</span></p> + +<h2 class="clearLeft" id="Warum_CSS">Warum CSS ?</h2> + +<p>Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den <Kopfbereich> (head) Ihres Dokumentes einbetten (<em>eingebettetes Stylesheet</em>) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (<em>externes Stylesheet</em>). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den <Kopfbereich> Ihres Dokumentes einbauen.</p> + +<p><span style="line-height: 16.7999992370605px;">Die Trennung von Inhalt und Form mithilfe eines</span> externen Stylesheets hat viele Vorteile:</p> + +<ul> + <li>Sie müssen nicht alles doppelt und mehrfach tun</li> + <li>Die Wartung wird vereinfacht</li> + <li>Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.</p> + +<p>Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.</p> + +<p>Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.</p> +</div> + +<p>Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.</p> + +<div class="tuto_details"> +<div class="tuto_type">Weitere Details</div> + +<p>Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.</p> + +<p>Beispielsweise können Sie in HTML einen <b>Tag verwenden um Text <strong>fett</strong> darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des <body>Tags festlegen.</p> + +<p>Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.</p> +</div> + +<h2 id="Action_Ein_CSS-Stylesheet_anlegen">Action: Ein CSS-Stylesheet anlegen</h2> + +<ol> + <li>Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.</li> + <li>Speichern Sie Ihre datei als: <code>style1.css</code>. Das wird nun Ihr Stylesheet.</li> + <li>Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses. + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Verknüpfung_von_Dokument_und_Stylesheet">Verknüpfung von Dokument und Stylesheet</h3> + +<ol> + <li>Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei. Fürgen Sie die unten hervorgehobene Zeile hinzu: + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Challenge</div> + +<p>Außer rot (red) erlaubt CSS noch andere Farbnamen.</p> + +<p>Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="Was_nun">Was nun?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Wie CSS funktioniert.")}}Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">lernen</a> Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.</p> diff --git a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html new file mode 100644 index 0000000000..64dc94541b --- /dev/null +++ b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html @@ -0,0 +1,122 @@ +--- +title: Wie CSS funktioniert +slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.</span></p> + +<h2 class="clearLeft" id="Wie_CSS_funktioniert">Wie CSS funktioniert</h2> + +<p>Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:</p> + +<ol> + <li>Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.</li> + <li>Der Browser stellt den Inhalt des DOM dar.</li> +</ol> + +<p>Eine Auszeichnungssprache verwendet <em>Elemente</em> um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von <em>Tags</em>. Das sind Schlüsselworte zwischen zwei '<' spitzen Klammern '>'. Die meisten Elemente haben <em>paarweise Tags</em> - einen Start-Tag <schluesselwort> und einen End-Tag </schluesselwort>, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.</p> + +<p>Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. <schluesselwort/>.</p> + +<p>Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem <em>Container</em>. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!</p> + +<p>Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein <em>Knoten</em> (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.</p> + +<p>Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.</p> + +<div class="tuto_example"> +<div class="tuto_type">Beispiel</div> + +<p>In Ihrem Beispieldokument erzeugen der <p>-Tag und sein End-Tag </p> einen Container:</p> + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="Live_Beispiel">Live Beispiel</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die <small>STRONG</small>- und die nachfolgenden Knoten. Der <small>STRONG</small> Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Action_Ein_DOM_analysieren">Action: Ein DOM analysieren</h2> + +<h3 id="Den_DOM_Inspector_verwenden">Den DOM Inspector verwenden</h3> + +<p>Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).</p> + +<ol> + <li>Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .</li> + <li>Wählen Sie <strong>Tools > DOM Inspector</strong> aus der Menüleiste oder <strong>Tools > Web Development > DOM Inspector</strong>. + <div class="tuto_details"> + <div class="tuto_type">Weitere Details</div> + + <p>Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">Add-ons Seite installieren</a> und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.</p> + + <p>Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.</p> + </div> + </li> + <li>In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken. + <p><strong>Anmerkung:</strong> Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.</p> + + <p>Je nachdem welche Knoten Sie expandiert haben könnte ein Teil des Ergebnisses so aussehen:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.</p> + + <p>Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Challenge</div> + +<p>Klicken Sie in DOMi auf einen <small>STRONG</small> Knoten.</p> + +<p>Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Lösung.</a></div> + +<h3 id="Web_X-Ray_Goggles">Web X-Ray Goggles</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.</p> + +<ol> + <li>Gehen Sie auf die Seite <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> + <li>Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.</li> + <li>Öffnen Sie Ihr HTML Dokument.</li> + <li>Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.</li> + <li>Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.</li> +</ol> + +<h2 id="Was_nun">Was nun?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p> diff --git a/files/de/web/guide/css/scaling_background_images/index.html b/files/de/web/guide/css/scaling_background_images/index.html new file mode 100644 index 0000000000..e260667670 --- /dev/null +++ b/files/de/web/guide/css/scaling_background_images/index.html @@ -0,0 +1,111 @@ +--- +title: Hintergrundbilder skalieren +slug: Web/Guide/CSS/Scaling_background_images +tags: + - CSS Hintergrundbild + - Skalierung Hintergrundbild +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +<p><span class="seoSummary">Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.</span>Man kann das Bild nach Wunsch nach oben oder unten skalieren.</p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Kacheln eines großen Bildes</h2> + +<p>Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p> + +<p>Das wird erreicht, indem wir folgendes CSS verwenden:</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(firefox_logo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} +</pre> + +<p>Man braucht für {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">Dehnen eines Bildes</h2> + +<p>Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>So sieht das Ergebnis aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">Hochskalieren eines Bildes</h2> + +<p>Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Spezielle Werte: "contain" und "cover"</h2> + +<p>Neben den {{cssxref("<length>")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, <code>contain</code> und <code>cover</code>. Sehen wir uns diese an.</p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p>Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B. Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.</p> + +<figure> +<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p> +</figure> + +<pre class="brush:html"><div class="bgSizeContain"> + <p>Try resizing this window and see what happens.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeContain { + height: 200px; + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: contain; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +}</pre> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p>Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist. </p> + +<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure> + +<p>Das Beispiel verwendet folgendes HTML & CSS:</p> + +<pre class="brush:html"><div class="bgSizeCover"> + <p>Try resizing this window and see what happens.</p> +</div></pre> + +<pre class="brush:css;highlight:[4]">.bgSizeCover { + height: 200px; + background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png'); + background-size: cover; + border: 2px solid darkgray; + color: #000; text-shadow: 1px 1px 0 #fff; +</pre> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> +</ul> diff --git a/files/de/web/guide/dom/index.html b/files/de/web/guide/dom/index.html new file mode 100644 index 0000000000..997730a412 --- /dev/null +++ b/files/de/web/guide/dom/index.html @@ -0,0 +1,21 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<p>{{draft}}</p> +<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> +<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> +<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> +<h2 id="More_about_the_DOM">More about the DOM</h2> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/de/web/guide/dom/manipulating_the_browser_history/index.html b/files/de/web/guide/dom/manipulating_the_browser_history/index.html new file mode 100644 index 0000000000..6f59cbbdc3 --- /dev/null +++ b/files/de/web/guide/dom/manipulating_the_browser_history/index.html @@ -0,0 +1,227 @@ +--- +title: Manipulieren des Browser-Verlaufes +slug: Web/Guide/DOM/Manipulating_the_browser_history +tags: + - Verlauf +translation_of: Web/API/History_API +--- +<p>Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren</p> + +<h2 id="Durch_den_Verlauf_gehen">Durch den Verlauf gehen</h2> + +<p>Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden <code>back()</code>, <code>forward()</code> und <code>go()</code>.</p> + +<h3 id="Vor_und_zurück_bewegen">Vor und zurück bewegen</h3> + +<p>Um im Verlauf zurück zu navigieren, nutze:</p> + +<pre class="brush: js">window.history.back(); +</pre> + +<p>Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.</p> + +<p>Auf ähnliche Weise kann so vorwärts navigiert werden: </p> + +<pre class="brush: js">window.history.forward(); +</pre> + +<h3 id="An_einen_bestimmten_Punkt_im_Verlauf_springen">An einen bestimmten Punkt im Verlauf springen</h3> + +<p>Mit der Methode <code>go()</code> ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.</p> + +<p>Um eine Seite rückwärts zu gehen (äquivalent zu <code>back()</code>):</p> + +<pre class="brush: js"><code>window.history.go(-1);</code> +</pre> + +<p>Um eine Seite vorwärts zu gehen (äquivalent zu <code>forward()</code>):</p> + +<pre class="brush: js"><code>window.history.go(1);</code> +</pre> + +<p>Gleichermassen ist es möglich, 2 Seiten vorwärts mit <code>go(2)</code> zu gehen, 3 rückwärts mit <code>go(-3)</code> und so weiter.</p> + +<p>Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft <code>length</code> bestimmt werden:</p> + +<pre class="brush: js">var <code>numberOfEntries</code> = window.history.length; +</pre> + +<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für <code>go()</code>; dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.</div> + +<h2 id="Hinzufügen_und_Ändern_von_Verlaufseinträgen">Hinzufügen und Ändern von Verlaufseinträgen</h2> + +<p>{{ gecko_minversion_header("2") }}</p> + +<p>Mit HTML5 wurden die Methoden <code>history.pushState()</code> und <code>history.replaceState()</code> eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.</p> + +<p>Wenn <code>history.pushState()</code> benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster <code>this</code> zur Zeit der Erstellung des <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objektes ist.</p> + +<h3 id="Beispiel_für_die_pushState()-Methode">Beispiel für die pushState()-Methode</h3> + +<p>Angenommen, <span class="nowiki">http://mozilla.org/foo.html</span> führt folgendes JavaScript aus:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "seite 2", "bar.html"); +</pre> + +<p>Das ändert die angezeigte URL zu <span class="nowiki">http://mozilla.org/bar.html</span>, bringt den Browser aber nicht dazu, <code>bar.html</code> zu laden oder überhaupt dessen Existenz zu überprüfen.</p> + +<p>Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein <code>popstate</code>-Event mit einem <em>Status-Objekt</em>, das eine Kopie von <code>stateObj</code> darstellt. Die Seite selbst wird aussehen wie <code>foo.html</code>, aber während dem <code>popstate</code>-Event kann der Inhalt bearbeitet worden sein.</p> + +<p>Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu <span class="nowiki">http://mozilla.org/foo.html</span>, und die Seite erhält ein weiteres <code>popstate</code>-Event, dieses Mal mit einem <code>null</code> <em>Status-Objekt</em>. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im <code>popstate</code>-Event vollzogen wird.</p> + +<h3 id="Die_pushState()-Methode">Die pushState()-Methode</h3> + +<p><code>pushState()</code> übernimmt drei Parameter: ein <em>state</em> Objekt, einen <em>title</em> (welcher aktuell noch ignoriert wird), und (optional) eine <em>URL</em>. Betrachten wir die einzelnen Parameter genauer:</p> + +<ul> + <li> + <p><strong>state-Objekt</strong> — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per <code>pushState()</code> neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein <code>popstate</code>-Event ausgelöst. Die <code>state</code>-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.<br> + <br> + Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an <code>pushState()</code> übergeben, gibt die Methode eine <em>Exception</em> aus. Wenn mehr Speicherplatz benötigt wird, sollte <code>sessionStorage</code> und/oder <code>localStorage</code> verwendet werden.</p> + </li> + <li> + <p><strong>title</strong> — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.</p> + </li> + <li> + <p><strong>URL</strong> — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von <code>pushState()</code> diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt <code>pushState()</code> eine <em>Exception</em> zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des <em>documents</em> gesetzt.</p> + </li> +</ul> + +<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div> + +<p>In gewissem Sinne ist der Aufruf von <code>pushState()</code> ähnlich dem Setzen von <code>window.location = "#foo"</code>, insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber <code>pushState()</code> hat ein paar Vorteile:</p> + +<ul> + <li>Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.<br> + Im Gegensatz dazu bleibt <code>window.location</code> nur dann im selben {{ domxref("document") }} selbst wenn man nur den <em>hash</em> ändert.</li> + <li>Man muss nicht die URL ändern, wenn man nicht will. <br> + Im Gegensatz dazu erzeugt <code>window.location = "#foo";</code> nur dann einen neuen history-Eintrag, wenn der aktuelle <em>hash</em> nicht <code>#foo</code> ist. + <ul> + <li>Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem <em>hash</em>-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.</li> + </ul> + </li> +</ul> + +<p>Man beachte, dass <code>pushState()</code> niemals das Auslösen eines <code>hashchange</code>-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren <em>hash</em> unterscheidet.</p> + +<h3 id="Die_replaceState()-Methode">Die replaceState()-Methode</h3> + +<p><code>history.replaceState()</code> arbeitet genauso wie <code>history.pushState()</code>, abgesehen davon, dass <code>replaceState()</code> den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.</p> + +<p><code>replaceState()</code> ist insbesondere nützlich, um das <em>Status</em>-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.</p> + +<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div> + +<h3 id="Beispiel_für_die_replaceState()-Methode">Beispiel für die replaceState()-Methode</h3> + +<p>Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:</p> + +<p> </p> + +<pre class="brush: js"><code>var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html");</code></pre> + +<p>Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:</p> + +<pre class="brush: js"><code>history.replaceState(stateObj, "page 3", "bar2.html");</code></pre> + +<p>Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht <code>bar2.html</code> laden oder auch nur prüfen, ob <code>bar2.html</code> existiert.</p> + +<p>Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.</p> + +<p> </p> + +<h3 id="The_popstate_event">The popstate event</h3> + +<p>A <code>popstate</code> event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p> + +<p>See {{ domxref("window.onpopstate") }} for sample usage.</p> + +<h3 id="Reading_the_current_state">Reading the current state</h3> + +<p>When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts her browser. When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span> However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p> + +<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p> + +<pre class="brush: js">var currentState = history.state; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>history.state</td> + <td>18</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>history.state</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p> diff --git a/files/de/web/guide/events/creating_and_triggering_events/index.html b/files/de/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..06a765d3c0 --- /dev/null +++ b/files/de/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,135 @@ +--- +title: Erstellen und Auslösen von Ereignissen +slug: Web/Guide/Events/Creating_and_triggering_events +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +<p>Dieser Artikel zeigt, wie man DOM-Ereignisse erstellt und versendet. Solche Ereignisse werden allgemein als <strong>synthetische Ereignisse</strong> bezeichnet, im Gegensatz zu den Ereignissen, die vom Browser selbst ausgelöst werden.</p> + +<h2 id="Erstellen_von_benutzerdefinierten_Ereignissen">Erstellen von benutzerdefinierten Ereignissen</h2> + +<p>Ereignisse können mit dem <code>Event</code>-Konstruktor wie folgt erstellt werden:</p> + +<pre class="brush: js">var event = new Event('build'); + +// Listen for the event. +elem.addEventListener('build', function (e) { /* ... */ }, false); + +// Dispatch the event. +elem.dispatchEvent(event);</pre> + +<p>Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().</p> + +<p>Dieser Konstruktor wird in den meisten modernen Browsern unterstützt (mit Ausnahme des Internet Explorers). Für einen ausführlicheren Ansatz (der mit dem Internet Explorer funktioniert) siehe den altmodischen Weg unten.</p> + +<h3 id="Hinzufügen_von_benutzerdefinierten_Daten_-_CustomEvent()">Hinzufügen von benutzerdefinierten Daten - CustomEvent()</h3> + +<p>Um weitere Daten zum Ereignisobjekt hinzuzufügen, existiert die CustomEvent-Schnittstelle und die <strong>Detail</strong>eigenschaft kann zur Übergabe von benutzerdefinierten Daten verwendet werden.<br> + Beispielsweise könnte das Ereignis wie folgt angelegt werden:</p> + +<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre> + +<p>Auf diese Weise können Sie dann auf die zusätzlichen Daten im Event-Listener zugreifen:</p> + +<pre class="brush: js">function eventHandler(e) { + console.log('The time is: ' + e.detail); +} +</pre> + +<h3 id="Auf_die_altmodische_Art_und_Weise">Auf die altmodische Art und Weise</h3> + +<p>Der ältere Ansatz zur Erstellung von Ereignissen verwendet APIs, die von Java inspiriert sind. Im Folgenden ist ein Beispiel dargestellt:</p> + +<pre class="brush: js">// Create the event. +var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); + +// Define that the event name is 'build'. +event.initEvent('build', true, true); + +// Listen for the event. +elem.addEventListener('build', function (e) { + // e.target matches elem +}, false); + +// target can be any Element or other EventTarget. +elem.dispatchEvent(event); + +</pre> + +<h3 id="Ereignisbubbling">Ereignisbubbling</h3> + +<p>Es ist oft wünschenswert, ein Ereignis aus einem untergeordneten Element auszulösen und von einem Vorfahren abfangen zu lassen; optional mit Daten:</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property +const eventAwesome = new CustomEvent('awesome', { + bubbles: true, + detail: { text: () => textarea.value } +}); + +// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method +form.addEventListener('awesome', e => console.log(e.detail.text())); + +// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point +textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); +</pre> + +<h3 id="Dynamisches_Erstellen_und_Versenden_von_Ereignissen">Dynamisches Erstellen und Versenden von Ereignissen</h3> + +<p>Elemente können auf Ereignisse warten, die noch nicht erstellt wurden:</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +form.addEventListener('awesome', e => console.log(e.detail.text())); + +textarea.addEventListener('input', function() { + // Create and dispatch/trigger an event on the fly + // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element + this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) +}); +</pre> + +<h2 id="Auslösen_von_eingebauten_Ereignissen">Auslösen von eingebauten Ereignissen</h2> + +<p>Dieses Beispiel demonstriert die Simulation eines Klicks (d.h. das programmgesteuerte Erzeugen eines Klickereignisses) auf einem Kontrollkästchen mit Hilfe von DOM-Methoden.</p> + +<p><a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Sehen Sie sich das Beispiel in Aktion an.</a></p> + +<pre class="brush: js">function simulateClick() { + var event = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + var cb = document.getElementById('checkbox'); + var cancelled = !cb.dispatchEvent(event); + if (cancelled) { + // A handler called preventDefault. + alert("cancelled"); + } else { + // None of the handlers called preventDefault. + alert("not cancelled"); + } +}</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> + <li>{{domxref("document.createEvent()")}}</li> + <li>{{domxref("Event.initEvent()")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li>{{domxref("EventTarget.addEventListener()")}}</li> +</ul> diff --git a/files/de/web/guide/events/index.html b/files/de/web/guide/events/index.html new file mode 100644 index 0000000000..9fbfac8b89 --- /dev/null +++ b/files/de/web/guide/events/index.html @@ -0,0 +1,53 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub + - events +translation_of: Web/Guide/Events +--- +<p> </p> + +<p>Events bezieht sich sowohl auf ein Entwurfsmuster, das für die asynchrone Behandlung verschiedener Vorfälle, die während der Lebensdauer einer Webseite auftreten, als auch auf die Benennung, Charakterisierung und Verwendung einer großen Anzahl von Vorfällen unterschiedlicher Art.</p> + +<p>Die Übersichtsseite bietet eine Einführung in das Entwurfsmuster und eine Zusammenfassung der Arten von Vorfällen, die von modernen Webbrowsern definiert werden und darauf reagieren.</p> + +<p>Auf der Seite <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Benutzerdefinierte Ereignisse</a> wird beschrieben, wie das Ereigniscode-Entwurfsmuster in benutzerdefiniertem Code verwendet werden kann, um neue Ereignistypen zu definieren, die von Benutzerobjekten ausgegeben werden, Listener-Funktionen zum Behandeln dieser Ereignisse zu registrieren und die Ereignisse im Benutzercode auszulösen.</p> + +<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> + +<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> + +<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p> + +<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> + +<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p> + +<ul> + <li>the original 'click' event,</li> + <li>mouse events,</li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> + <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li> +</ul> + +<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> + +<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> + +<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> + +<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> + +<div class="note"> +<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> +</div> + +<h2 id="Docs">Docs</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/de/web/guide/graphics/index.html b/files/de/web/guide/graphics/index.html new file mode 100644 index 0000000000..f97b79a18e --- /dev/null +++ b/files/de/web/guide/graphics/index.html @@ -0,0 +1,51 @@ +--- +title: Grafiken im Internet +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Grafiken + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Moderne Websites und Webanwendungen müssen oft Grafiken darstellen.</span> Statische Bilder können leicht mit einem {{HTMLElement("img")}}-Element oder als Hintergrund eines Elements mit der {{cssxref("background-image")}} Eigenschaft angezeigt werden. Oft will man aber Grafiken auf die Schnelle erzeugen oder Bilder im Nachhinein manipulieren. <span class="seoSummary">Diese Artikel bieten einen Einblick, wie das erreicht werden kann.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D-Grafiken</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd><em>Das {{HTMLElement("canvas")}}-Element bietet </em><em>APIs zum Zeichnen von 2D-Grafiken mithilfe von JavaScript.</em></dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><em>Mit skalierbaren Vektorgraphiken (SVG) kannst du Linien, Kurven und andere geometrische Figuren anzeigen. Durch Vermeidung von Pixelgrafiken sind diese in jeder Größe gestochen scharf.</em></dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Alle Themen...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D-Grafiken</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><em>Eine Anleitung für den Einstieg in WebGL, die API für 3D-Grafiken im Internet. Mit dieser Technologie kannst du Standard OpenGL ES in Webinhalten nutzen.</em></dd> +</dl> + +<h2 id="Video">Video</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 Audio und Video</a></dt> + <dd><em>Videos in HTML-Dokumente einbetten und die Wiedergabe kontrollieren.</em></dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd><em>Das RTC aus WebRTC steht für "Real-Time Communications", eine Technologie zum Streamen von Audio, Video und anderen Daten zwischen Browser-Clients (Peers).</em></dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..10c4a7650c --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Fortgeschrittene Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations +tags: + - Canvas + - Graphics + - Tutoria +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> + +<div class="summary"> +<p>In dem vorherigem Kapitel machten wir einige <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Basisanimationen</a> und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.</p> +</div> + +<h2 id="Einen_Ball_zeichnen">Einen Ball zeichnen</h2> + +<p>Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.</p> + +<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> +</pre> + +<p>Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein <code>ball</code> - Objekt erstellen, welches Eigenschaften und eine <code>draw()</code> - Methode enthält, um es in die Canvas zu zeichnen.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var ball = { + x: 100, + y: 100, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +ball.draw();</pre> + +<p>Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.</p> + +<h2 id="Geschwindigkeit_hinzufügen">Geschwindigkeit hinzufügen</h2> + +<p>Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">vorherigen Kapitel</a> von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.</p> + +<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw(); +</pre> + +<h2 id="Gebundenheit">Gebundenheit</h2> + +<p>Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die <code>x</code> - und <code>y</code>position von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.</p> + +<pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; +} +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; +}</pre> + +<h3 id="Erste_Demo">Erste Demo</h3> + +<p>Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Erste_Demo", "610", "310")}}</p> + +<h2 id="Acceleration">Acceleration</h2> + +<p>Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:</p> + +<pre class="brush: js">ball.vy *= .99; +ball.vy += .25;</pre> + +<p>Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.</p> + +<div class="hidden"> +<h6 id="Nächste_Demo">Nächste Demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Acceleration", "610", "310")}}</p> + +<h2 id="Spureneffekt">Spureneffekt</h2> + +<p>Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.</p> + +<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)'; +ctx.fillRect(0,0,canvas.width,canvas.height);</pre> + +<div class="hidden"> +<h6 id="Dritte_Demo">Dritte Demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.fillStyle = 'rgba(255,255,255,0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Spureneffekt", "610", "310")}}</p> + +<h2 id="Mauskontrolle_hinzufügen">Mauskontrolle hinzufügen</h2> + +<p>Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> - Ereignis benutzen. Das <code><a href="/en-US/docs/Web/Events/click">click</a></code> - Ereignis lässt den Ball wieder hüpfen.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; +var running = false; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 1, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function clear() { + ctx.fillStyle = 'rgba(255,255,255,0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); +} + +function draw() { + clear(); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mousemove', function(e){ + if (!running) { + clear(); + ball.x = e.clientX; + ball.y = e.clientY; + ball.draw(); + } +}); + +canvas.addEventListener("click",function(e){ + if (!running) { + raf = window.requestAnimationFrame(draw); + running = true; + } +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); + running = false; +}); + +ball.draw(); +</pre> + +<p>Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.</p> + +<p>{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}</p> + +<h2 id="Breakout">Breakout</h2> + +<p>Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein <a href="http://de.wikipedia.org/wiki/Breakout(Computerspiel)">Breakout</a> - Spiel zu verwandeln? Schauen Sie sich unseren <a href="/en-US/docs/Games">Spieleentwickelungsbereich</a> an für mehr auf Spiele bezogene Artikel.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("window.requestAnimationFrame()")}}</li> + <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Effiziete Animation für Webspiele</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..6caa27b3ef --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,785 @@ +--- +title: Stile und Farben verwenden +slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> + +<div class="summary"> +<p class="Normal">Im Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">Zeichnen von Formen</a> haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.</p> +</div> + +<h2 id="Colors" name="Colors">Farben</h2> + +<p class="Normal">Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: <code>fillStyle</code> und <code>strokeStyle</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> + <dd> + <p class="Normal"> Bestimmt den Stil in dem die Form gefüllt wird.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> + <dd> + <p class="Normal">Bestimmt den Stil der Umrandungslinien.</p> + </dd> +</dl> + +<p class="Normal"><code>color</code> steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).</p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Nach dem Setzen von <code>strokeStyle</code> und/oder <code>fillStyle</code> wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen <code>fillStyle</code> bzw. <code>strokeStyle</code> neu definiert werden.</p> +</div> + +<p class="Normal">Der String <code>color</code> sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.</p> + +<pre class="brush: js">// these all set the fillStyle to 'orange' + +ctx.fillStyle = "orange"; +ctx.fillStyle = "#FFA500"; +ctx.fillStyle = "rgb(255,165,0)"; +ctx.fillStyle = "rgba(255,165,0,1)"; +</pre> + +<h3 class="Normal" id="Beispiel_für_fillStyle">Beispiel für <code>fillStyle</code></h3> + +<p class="Normal">In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.</p> + +<pre class="brush: js;highlight[5,6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ',0)'; + ctx.fillRect(j*25,i*25,25,25); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"> </pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>Das Ergebnis:</p> + +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Beispiel für <code>strokeStyle</code></h3> + +<p class="Normal">Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die <code>strokeStyle</code> Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode <code>arc()</code> zeichnen wir Kreise an Stelle der Quadrate.</p> + +<pre class="brush: js;highlight[5,6]"> function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ')'; + ctx.beginPath(); + ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); + ctx.stroke(); + } + } + } +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Transparency" name="Transparency">Transparenz</h2> + +<p class="Normal">Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft <code>globalAlpha</code> oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> + <dd> + <p class="Normal">Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.</p> + </dd> +</dl> + +<p class="Normal">Die Eigenschaft <code>globalTransparency</code> ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.</p> + +<p class="Normal">Die Eigenschaften <code>strokeStyle</code> und <code>fillStyle</code> akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:</p> + +<pre class="brush: js">// Assigning transparent colors to stroke and fill style + +ctx.strokeStyle = "rgba(255,0,0,0.5)"; +ctx.fillStyle = "rgba(255,0,0,0.5)"; +</pre> + +<p class="Normal">Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Beispiel für <code>globalAlpha</code></h3> + +<p class="Normal">In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft <code>globalAlpha</code> wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der <code>for</code>-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.</p> + +<pre class="brush: js;highlight[15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + // draw background + ctx.fillStyle = '#FD0'; + ctx.fillRect(0,0,75,75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75,0,75,75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0,75,75,75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75,75,75,75); + ctx.fillStyle = '#FFF'; + + // set transparency value + ctx.globalAlpha = 0.2; + + // Draw semi transparent circles + for (i=0;i<7;i++){ + ctx.beginPath(); + ctx.arc(75,75,10+10*i,0,Math.PI*2,true); + ctx.fill(); + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba()" name="An_example_using_rgba()">Beispiel für die Verwendung von <code>rgba()</code></h3> + +<p class="Normal">Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von <code>globalAlpha</code> erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.</p> + +<pre class="brush: js;highlight[16]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Draw background + ctx.fillStyle = 'rgb(255,221,0)'; + ctx.fillRect(0,0,150,37.5); + ctx.fillStyle = 'rgb(102,204,0)'; + ctx.fillRect(0,37.5,150,37.5); + ctx.fillStyle = 'rgb(0,153,255)'; + ctx.fillRect(0,75,150,37.5); + ctx.fillStyle = 'rgb(255,51,0)'; + ctx.fillRect(0,112.5,150,37.5); + + // Draw semi transparent rectangles + for (var i=0;i<10;i++){ + ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; + for (var j=0;j<4;j++){ + ctx.fillRect(5+i*14,5+j*37.5,14,27.5); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + +<h2 id="Line_styles" name="Line_styles">Linienstile</h2> + +<p class="Normal">Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> + <dd>Setzt die Breite später gezeichneter Linien.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> + <dd>Definiert die Form der Linienenden.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> + <dd>Definiert die Form der „Ecken“, an denen sich Linien treffen.</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> + <dd>Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.</dd> +</dl> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> + <dd> + <p class="Normal">Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> + <dd> + <p class="Normal">Definiert das aktuelle Strichlierungsmuster.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> + <dd> + <p class="Normal">Beschreibt wo das Strichlierunsmuster startet.</p> + </dd> +</dl> + +<p class="Normal">Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.</p> + +<h3 id="A_lineWidth_example" name="A_lineWidth_example">Beispiel für <code>lineWidth</code></h3> + +<p class="Normal">Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.</p> + +<p class="Normal">Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.</p> + +<p class="Normal">Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 10; i++){ + ctx.lineWidth = 1+i; + ctx.beginPath(); + ctx.moveTo(5+i*14,5); + ctx.lineTo(5+i*14,140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> + +<p class="Normal">Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> + +<p class="Normal">Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.</p> + +<p class="Normal">Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.</p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom <code>lineCap</code>-Stil abhängt, der standardmäßig auf <code>butt</code> eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den <code>lineCap</code>-Sti auf <code>square</code> setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)</p> + +<p class="Normal">Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit <code>closePath() </code>geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen <code>lineJoin</code>-Stil verbunden; dessen Standardwert ist <code>miter</code>, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.</p> +</div> + +<p class="Normal">Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.</p> + +<p class="Normal">Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example">Beispiel für <code>lineCap</code></h3> + +<p class="Normal">Die Eigenschaft <code>lineCap</code> bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: <code>butt</code> (Standardwert), <code>round</code> und <code>square</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>butt</code></dt> + <dd> + <p class="Normal">Glatte Enden an den Endpunkten.</p> + </dd> + <dt><code>round</code></dt> + <dd> + <p class="Normal">Abgerundete Enden.</p> + </dd> + <dt><code>square</code></dt> + <dd> + <p class="Normal">Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.</p> + </dd> +</dl> + +<p class="Normal">In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für <code>lineCap</code>. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.</p> + +<p class="Normal">Die linke Linie verwendet die Option <code>butt</code>. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option <code>round</code>, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option <code>square</code>. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineCap = ['butt','round','square']; + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10,10); + ctx.lineTo(140,10); + ctx.moveTo(10,140); + ctx.lineTo(140,140); + ctx.stroke(); + + // Draw lines + ctx.strokeStyle = 'black'; + for (var i=0;i<lineCap.length;i++){ + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25+i*50,10); + ctx.lineTo(25+i*50,140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example">Beispiel für <code>lineJoin</code></h3> + +<p class="Normal">Die Eigenschaft <code>lineJoin</code> bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).</p> + +<p class="Normal">Diese Eigenschaft kann drei mögliche Werte annehmen: <code>round</code>, <code>bevel</code> und <code>miter</code> (Standardeinstellung). Beachten Sie, dass die <code>lineJoin</code>-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd> + <p class="Normal">Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.</p> + </dd> + <dt><code>bevel</code></dt> + <dd> + <p class="Normal">Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.</p> + </dd> + <dt><code>miter</code></dt> + <dd> + <p class="Normal">Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft <code>miterLimit</code> beeinflusst, welche später erklärt wird.</p> + </dd> +</dl> + +<p class="Normal">Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von <code>lineJoin</code> anhand von drei Linienzügen; das Ergebnis sehen Sie oben.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineJoin = ['round','bevel','miter']; + ctx.lineWidth = 10; + for (var i=0;i<lineJoin.length;i++){ + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5,5+i*40); + ctx.lineTo(35,45+i*40); + ctx.lineTo(75,5+i*40); + ctx.lineTo(115,45+i*40); + ctx.lineTo(155,5+i*40); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Beispiel für die Eigenschaft <code>miterLimit</code></h3> + +<p class="Normal">Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option <code>miter</code> die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. <em>miter</em>) aber exponentiell.</p> + +<p class="Normal">Die Eigenschaft <code>miterLimit</code> bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung <code>bevel</code>. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von <code>miterLimit</code> (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann <code>miterLimit</code> unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.</p> + +<p class="Normal">Präziser gesagt ist beschreibt <code>miterLimit</code> das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.</p> + +<ul> + <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> + <li>Der Standardwert von <code>miterLimit</code> = <code>10.0</code> schneidet alle Überhänge von Winkeln kleiner als 11° ab.</li> + <li>Ein Wert von √2 ≈ 1.4142136 (aufgerundet) stutzt Überhänge bei spitzen Winkeln, und belässt nur bei stumpfen und rechten Winkeln zusätzlich Raum für die Gehrung.</li> + <li>Ein Wert von 1.0 ist erlaubt, schneidet aber alle Überhänge ab.</li> + <li>Werte kleiner als 1.0 sind nicht erlaubt.</li> +</ul> + +<p class="Normal">In dieser einfachen Demonstration können Sie den Wert für <code>miterLimit</code> dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.</p> + +<p class="Normal">Stellen Sie in diesem Programm ein <code>miterLimit</code> kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist <code>miterLimit</code> größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Clear canvas + ctx.clearRect(0,0,150,150); + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5,50,160,50); + + // Set line styles + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // check input + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // Draw lines + ctx.beginPath(); + ctx.moveTo(0,100); + for (i=0;i<24;i++){ + var dy = i%2==0 ? 25 : -25 ; + ctx.lineTo(Math.pow(i,1.5)*2,75+dy); + } + ctx.stroke(); + return false; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table></pre> + +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + +<h2 class="Normal" id="Strichlierte_Linien_verwenden">Strichlierte Linien verwenden</h2> + +<p class="Normal">Die Methode <code>setLineDash</code> und die Eigenschaft <code>lineDashOffset</code> definieren die Strichlierung von Linien. <code>setLineDash</code> akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei <code>lineDashOffset</code> einen Versatz am Start des Musters definiert.</p> + +<p>In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">einfache Animationen</a> zu erzeugen.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> +</div> + +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10,10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> + +<h2 id="Gradients" name="Gradients">Gradienten</h2> + +<p class="Normal">Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zu.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> + <dd> + <p class="Normal">Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (<code>x1</code>, <code>y1</code>) und Zielpunkt (<code>x2</code>, <code>y2</code>).</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> + <dd> + <p class="Normal">Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (<code>x1</code>, <code>y1</code>) und einem Radius von <code>r1</code>, der zweite mit Mittelpunkt (<code>x2</code>, <code>y2</code>) und demRadius <code>r2</code>.</p> + </dd> +</dl> + +<p>For example:</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +</pre> + +<p class="Normal">Sobald wir ein <code>canvasGradient</code>-Objekt erzeugt haben, können wir mit der Methode <code>addColorStop()</code> Farben zuordnen.</p> + +<dl> + <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> + <dd> + <p class="Normal">Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.</p> + </dd> +</dl> + +<p class="Normal">Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black'); +</pre> + +<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Beispiel für <code>createLinearGradient</code></h3> + +<p class="Normal">In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl <code>strokeStyle</code> als auch <code>fillStyle</code> ein <code>canvasGradient</code>-Objekt als Eingabe.</p> + +<p> </p> + +<pre class="brush: js;highlight[5,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var lingrad = ctx.createLinearGradient(0,0,0,150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#26C000'); + lingrad.addColorStop(1, '#fff'); + + var lingrad2 = ctx.createLinearGradient(0,50,0,95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); + + // assign gradients to fill and stroke styles + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; + + // draw shapes + ctx.fillRect(10,10,130,130); + ctx.strokeRect(50,50,50,50); + +} +</pre> + +<p> </p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p class="Normal">Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.</p> + +<p class="Normal">Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.</p> + +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> + +<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Beispiel für <code>createRadialGradient</code></h3> + +<p class="Normal">In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.</p> + +<pre class="brush: js;highlight[5,10,15,20]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1,159,98,0)'); + + var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); + + var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); + + var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); + + // draw shapes + ctx.fillStyle = radgrad4; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,150,150); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p class="Normal">Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.</p> + +<p class="Normal">Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf <code>#019F62</code> auch als <code>rgba(1,159,98,1)</code> geschrieben werden könnte.</p> + +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> + +<h2 id="Patterns" name="Patterns">Muster</h2> + +<p class="Normal">In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: <code>createPattern()</code></p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> + <dd> + <p class="Normal">Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. <code>image</code> ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String <code>image</code> gibt an wie das Bild benutzt wird.</p> + </dd> +</dl> + +<p class="Normal"><code>type</code> enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.</p> + +<dl> + <dt><code>repeat</code></dt> + <dd> + <p class="Normal">Wiederhole („kachle“) das Bild horizontal und vertikal.</p> + </dd> + <dt><code>repeat-x</code></dt> + <dd> + <p class="Normal">Wiederhole das Bild nur horizontal.</p> + </dd> + <dt><code>repeat-y</code></dt> + <dd> + <p class="Normal">Nur vertikale Wiederholung.</p> + </dd> + <dt><code>no-repeat</code></dt> + <dd> + <p class="Normal">Keine Wiederholung, das Bild wird nur einmal benutzt.</p> + </dd> +</dl> + +<p> </p> + +<p class="Normal">Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zuordnen.</p> + +<pre class="brush: js">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img,'repeat'); +</pre> + +<p> </p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Wie bei <code>drawImage()</code> müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.</p> +</div> + +<h3 id="A_createPattern_example" name="A_createPattern_example">Beispiel für <code>createPattern</code></h3> + +<p class="Normal">Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem <code>fillStyle</code> zuzuordnen. Bemerkenswert ist hierbei die Verwendung des <code>onload()</code>-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.</p> + +<pre class="brush: js;highlight[10]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // create new image object to use as pattern + var img = new Image(); + img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; + img.onload = function(){ + + // create pattern + var ptrn = ctx.createPattern(img,'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0,0,150,150); + + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> + +<p>The result looks like this:</p> +</div> + +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> + +<h2 id="Schatten">Schatten</h2> + +<p class="Normal">An der Erzeugung von Schatten sind vier Eignschaften beteiligt:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> + <dd> + <p class="Normal">Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> + <dd> + <p class="Normal">Wie <code>shadowOffsetY</code>, aber in vertikaler Richtung.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> + <dd> + <p class="Normal">Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> + <dd> + <p class="Normal">Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.</p> + </dd> +</dl> + +<p class="Normal">Die Eigenschaften <code>shadowOffsetX</code> und <code>shadowOffsetY</code> bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.</p> + +<p class="Normal">Die Eigenschaft <code>shadowBlur</code> definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.</p> + +<p class="Normal">Die Eigenschaft <code>shadowColor</code> ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.</p> + +<div class="note"> +<p><strong>Note:</strong> Schatten werden nur bei <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a> gezeichnet.</p> +</div> + +<h3 id="Beispiel_für_Text_mit_Schatteneffekt">Beispiel für Text mit Schatteneffekt</h3> + +<p class="Normal">Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.</p> + +<pre class="brush: js;highlight[4,5,6,7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; + + ctx.font = "20px Times New Roman"; + ctx.fillStyle = "Black"; + ctx.fillText("Sample String", 5, 30); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> + +<p>Wir werden uns die <code>font</code>-Eigenschaft und die <code>fillText</code>-Methode im nächsten Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Zeichnen von Text</a> genauer ansehen.</p> + +<h2 id="Canvas_Füllregeln">Canvas Füllregeln</h2> + +<p class="Normal">Bei der Verwendung von <code>fill</code> ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.</p> + +<p>Zwei Werte sind möglich:</p> + +<ul> + <li><code><strong>"nonzero</strong></code>": Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, der Standardwert.</li> + <li><code><strong>"evenodd"</strong></code>: Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd rule</a>.</li> +</ul> + +<p>In diesem Beispiel verwenden wir die <code>evenodd</code>-Regel.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.beginPath(); + ctx.arc(50, 50, 30, 0, Math.PI*2, true); + ctx.arc(50, 50, 15, 0, Math.PI*2, true); + ctx.fill("evenodd"); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html new file mode 100644 index 0000000000..78ca0ac2fc --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html @@ -0,0 +1,307 @@ +--- +title: Einfache Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div> + +<div class="summary"> +<p>Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.</p> +</div> + +<p>Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.</p> + +<h2 id="Basic_animation_steps" name="Basic_animation_steps">Grundlagen der Animation</h2> + +<p>Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:</p> + +<ol> + <li><strong>Bereinigen Sie die Zeichenfläche <em>(canvas)</em></strong><br> + Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.</li> + <li><strong>Sichern Sie den Canvas-Zustand</strong><br> + Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die <code>save()</code>-Methode.</li> + <li><strong>Zeichnen Sie die animierte Form</strong><br> + Hier erzeugen Sie nun endlich die eigentliche Animation.</li> + <li><strong>Setzen Sie den Canvas-Zustand zurück.</strong><br> + Mit der <code>restore()</code>-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.</li> +</ol> + +<h2 id="Controlling_an_animation" name="Controlling_an_animation">Steuerung einer Animation</h2> + +<p>Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine <code>for</code>-Schleife zu erzeugen.</p> + +<p>Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:</p> + +<h3 id="Updates_nach_Zeitplan">Updates nach Zeitplan</h3> + +<p>Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.</p> + +<dl> + <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt> + <dd>Ruft die unter <code>function</code> spezifierte Funktion wiederholend nach der in <code>delay</code> (Milisekunden) definierten Zeitspanne auf.</dd> + <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt> + <dd>Ruft die spezifizierte Funktion nach der unter <code>delay</code> festgelegten Zeitspanne einmalig auf.</dd> + <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt> + <dd>Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.</dd> +</dl> + +<p>If you don't want any user interaction you can use the <code>setInterval()</code> function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use <code>setTimeout()</code>. By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.</p> + +<div class="note"> +<p>In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The <code>requestAnimationFrame</code> method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article <a href="/en-US/docs/Games/Anatomy">Anatomy of a video game</a> in our <a href="/en-US/docs/Games">Game development zone</a>.</p> +</div> + +<h2 id="An_animated_solar_system">An animated solar system</h2> + +<p>This example animates a small model of our solar system.</p> + +<pre class="brush: js">var sun = new Image(); +var moon = new Image(); +var earth = new Image(); +function init() { + sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; + moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; + earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; + window.requestAnimationFrame(draw); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.globalCompositeOperation = 'destination-over'; + ctx.clearRect(0, 0, 300, 300); // clear canvas + + ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; + ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; + ctx.save(); + ctx.translate(150, 150); + + // Earth + var time = new Date(); + ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); + ctx.translate(105, 0); + ctx.fillRect(0, -12, 50, 24); // Shadow + ctx.drawImage(earth, -12, -12); + + // Moon + ctx.save(); + ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); + ctx.translate(0, 28.5); + ctx.drawImage(moon, -3.5, -3.5); + ctx.restore(); + + ctx.restore(); + + ctx.beginPath(); + ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit + ctx.stroke(); + + ctx.drawImage(sun, 0, 0, 300, 300); + + window.requestAnimationFrame(draw); +} + +init(); +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> + +<h2 id="An_animated_clock">An animated clock</h2> + +<p>This example draws an animated clock, showing your current time.</p> + +<pre class="brush: js">function clock() { + var now = new Date(); + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.save(); + ctx.clearRect(0, 0, 150, 150); + ctx.translate(75, 75); + ctx.scale(0.4, 0.4); + ctx.rotate(-Math.PI / 2); + ctx.strokeStyle = 'black'; + ctx.fillStyle = 'white'; + ctx.lineWidth = 8; + ctx.lineCap = 'round'; + + // Hour marks + ctx.save(); + for (var i = 0; i < 12; i++) { + ctx.beginPath(); + ctx.rotate(Math.PI / 6); + ctx.moveTo(100, 0); + ctx.lineTo(120, 0); + ctx.stroke(); + } + ctx.restore(); + + // Minute marks + ctx.save(); + ctx.lineWidth = 5; + for (i = 0; i < 60; i++) { + if (i % 5!= 0) { + ctx.beginPath(); + ctx.moveTo(117, 0); + ctx.lineTo(120, 0); + ctx.stroke(); + } + ctx.rotate(Math.PI / 30); + } + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr >= 12 ? hr - 12 : hr; + + ctx.fillStyle = 'black'; + + // write Hours + ctx.save(); + ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec); + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20, 0); + ctx.lineTo(80, 0); + ctx.stroke(); + ctx.restore(); + + // write Minutes + ctx.save(); + ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28, 0); + ctx.lineTo(112, 0); + ctx.stroke(); + ctx.restore(); + + // Write seconds + ctx.save(); + ctx.rotate(sec * Math.PI / 30); + ctx.strokeStyle = '#D40000'; + ctx.fillStyle = '#D40000'; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30, 0); + ctx.lineTo(83, 0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0, 0, 10, 0, Math.PI * 2, true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95, 0, 10, 0, Math.PI * 2, true); + ctx.stroke(); + ctx.fillStyle = 'rgba(0, 0, 0, 0)'; + ctx.arc(0, 0, 3, 0, Math.PI * 2, true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0, 0, 142, 0, Math.PI * 2, true); + ctx.stroke(); + + ctx.restore(); + + window.requestAnimationFrame(clock); +} + +window.requestAnimationFrame(clock);</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> + +<h2 id="A_looping_panorama">A looping panorama</h2> + +<p>In this example, a panorama is scrolled left-to-right. We're using <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">an image of Yosemite National Park</a> we took from Wikipedia, but you could use any image that's larger than the canvas.</p> + +<pre class="brush: js">var img = new Image(); + +// User Variables - customize these to change the image being scrolled, its +// direction, and the speed. + +img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; +var CanvasXSize = 800; +var CanvasYSize = 200; +var speed = 30; // lower is faster +var scale = 1.05; +var y = -4.5; // vertical offset + +// Main program + +var dx = 0.75; +var imgW; +var imgH; +var x = 0; +var clearX; +var clearY; +var ctx; + +img.onload = function() { + imgW = img.width * scale; + imgH = img.height * scale; + + if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas + if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas + else { clearX = CanvasXSize; } + if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas + else { clearY = CanvasYSize; } + + // get canvas context + ctx = document.getElementById('canvas').getContext('2d'); + + // set refresh rate + return setInterval(draw, speed); +} + +function draw() { + ctx.clearRect(0, 0, clearX, clearY); // clear the canvas + + // if image is <= Canvas Size + if (imgW <= CanvasXSize) { + // reset, start from beginning + if (x > CanvasXSize) { x = -imgW + x; } + // draw additional image1 + if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); } + // draw additional image2 + if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); } + } + + // if image is > Canvas Size + else { + // reset, start from beginning + if (x > (CanvasXSize)) { x = CanvasXSize - imgW; } + // draw aditional image + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); } + } + // draw image + ctx.drawImage(img, x, y,imgW, imgH); + // amount to move + x += dx; +} +</pre> + +<p>Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the <code>CanvasXZSize</code> and <code>CanvasYSize</code> variables in the JavaScript code.</p> + +<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> + +<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p> + +<h2 id="Other_examples" name="Other_examples">Other examples</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> + <dd>A good example of how to do animations using keyboard controls.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt> + <dd>We will have a look at some advanced animation techniques and physics in the next chapter.</dd> +</dl> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/bilder/index.html b/files/de/web/guide/html/canvas_tutorial/bilder/index.html new file mode 100644 index 0000000000..b636807f97 --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/bilder/index.html @@ -0,0 +1,324 @@ +--- +title: Bilder +slug: Web/Guide/HTML/Canvas_Tutorial/Bilder +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +<p>{{CanvasSidebar}}</p> + +<p>Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.</p> + +<p>Um Bilder zu importieren bedarf es bloß zwei Schritte:</p> + +<ol> + <li>Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.</li> + <li>Das Bild mithilfe der <code>drawImage()</code> Funktion zeichnen.</li> +</ol> + +<h2 id="Bilder_importieren">Bilder importieren</h2> + +<p>Die canvas API unterstützt folgende Typen als Bilder:</p> + +<dl> + <dt>{{domxref("HTMLImageElement")}}</dt> + <dd>Diese Bilder können mithilfe des <code>Image()</code> Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.</dd> + <dt>{{domxref("HTMLVideoElement")}}</dt> + <dd>Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.</dd> + <dt>{{domxref("HTMLCanvasElement")}}</dt> + <dd>Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.</dd> + <dt>{{domxref("ImageBitmap")}}</dt> + <dd>Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.</dd> +</dl> + +<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p> + +<p>There are several ways to get images for use on a canvas.</p> + +<h3 id="Bilder_von_derselben_Seite">Bilder von derselben Seite</h3> + +<p>Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:</p> + +<ul> + <li>Die {{domxref("document.images")}} Sammlung</li> + <li>Die {{domxref("document.getElementsByTagName()")}} Methode</li> + <li>Die {{domxref("document.getElementById()")}} Methode, wenn eine Id festgelegt worden ist</li> +</ul> + +<h3 id="Bilder_von_anderen_Seiten_nutzen">Bilder von anderen Seiten nutzen</h3> + +<p>Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F">"getaintes Canvas"</a>.</p> + +<h3 id="Andere_Canvas_Elemente_benutzen">Andere Canvas Elemente benutzen</h3> + +<p>Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.</p> + +<p>Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.</p> + +<p>Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.</p> + +<h3 id="Ein_Bild_von_Grund_auf">Ein Bild von Grund auf</h3> + +<p>Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den <code>Image()</code>-Konstruktor verwenden:</p> + +<pre class="brush: js"><code>var img = new Image(); // Erstelle neues Image-Objekt +img.src = 'myImage.png'; // Setze den Pfad zum Bild</code></pre> + +<p>Wird dieses Skript ausgeführt, fängt das Bild an zu laden.</p> + +<div class="note"> +<p><strong>Achtung</strong>: Wenn <code>drawImage()</code> vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.</p> +</div> + +<pre class="brush: js"><code>var img = new Image(); // Erstelle neues Image-Objekt +img.addEventListener("load", function() { + // füge hier den drawImage()-Befehl ein +}, false); +img.src = 'myImage.png'; // Setze den Pfad zum Bild +</code></pre> + +<p>Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir <a href="http://www.webreference.com/programming/javascript/gr/column3/">JavaScript Image Preloader</a> angucken (ist leder auf Englisch).</p> + +<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3> + +<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p> + +<pre class="brush: js">var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +</pre> + +<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p> + +<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p> + +<h3 id="Using_frames_from_a_video">Using frames from a video</h3> + +<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p> + +<pre class="brush: js">function getMyVideo() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + return document.getElementById('myvideo'); + } +} +</pre> + +<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p> + +<h2 id="Drawing_images">Drawing images</h2> + +<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>)</code></dt> + <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd> +</dl> + +<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3> + +<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function(){ + ctx.drawImage(img,0,0); + ctx.beginPath(); + ctx.moveTo(30,96); + ctx.lineTo(70,66); + ctx.lineTo(103,76); + ctx.lineTo(170,15); + ctx.stroke(); + }; + img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; +}</pre> + +<p>The resulting graph looks like this:</p> + +<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> + +<h2 id="Scaling">Scaling</h2> + +<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt> + <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd> +</dl> + +<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3> + +<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p> + +<div class="note"> +<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function(){ + for (var i=0;i<4;i++){ + for (var j=0;j<3;j++){ + ctx.drawImage(img,j*50,i*38,50,38); + } + } + }; + img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +}</pre> + +<p>The resulting canvas looks like this:</p> + +<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> + +<h2 id="Slicing">Slicing</h2> + +<p>The third and last variant of the <code>drawImage()</code> method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>sx</em>, <em>sy</em>, <em>sWidth</em>, <em>sHeight</em>, <em>dx</em>, <em>dy</em>, <em>dWidth</em>, <em>dHeight</em>)</code></dt> + <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p> + +<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p> + +<h3 id="Example_Framing_an_image">Example: Framing an image</h3> + +<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +</pre> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + // Draw slice + ctx.drawImage(document.getElementById('source'), + 33, 71, 104, 124, 21, 20, 87, 104); + + // Draw frame + ctx.drawImage(document.getElementById('frame'),0,0); +}</pre> + +<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p> + +<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> + +<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p> + +<h2 id="Art_gallery_example">Art gallery example</h2> + +<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn arround it.</p> + +<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p> + +<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <table> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +</pre> + +<p>And here's some CSS to make things look nice:</p> + +<pre class="brush: css">body { + background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; + margin: 10px; +} + +img { + display: none; +} + +table { + margin: 0 auto; +} + +td { + padding: 15px; +} +</pre> + +<p>Tying it all together is the JavaScript to draw our framed images:</p> + +<pre class="brush: js">function draw() { + + // Loop through all images + for (var i=0;i<document.images.length;i++){ + + // Don't add a canvas for the frame image + if (document.images[i].getAttribute('id')!='frame'){ + + // Create canvas element + canvas = document.createElement('canvas'); + canvas.setAttribute('width',132); + canvas.setAttribute('height',150); + + // Insert before the image + document.images[i].parentNode.insertBefore(canvas,document.images[i]); + + ctx = canvas.getContext('2d'); + + // Draw image to canvas + ctx.drawImage(document.images[i],15,20); + + // Add frame + ctx.drawImage(document.getElementById('frame'),0,0); + } + } +}</pre> + +<p>{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}</p> + +<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2> + +<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p> + +<pre class="js">ctx.mozImageSmoothingEnabled = false; +</pre> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html new file mode 100644 index 0000000000..fc1678c71a --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html @@ -0,0 +1,118 @@ +--- +title: Canvas optimieren +slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren +tags: + - Canvas + - Fortgeschritten + - Grafik + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. <span class="seoSummary">Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.</span></p> +</div> + +<h2 id="Tipps_zur_Performance">Tipps zur Performance</h2> + +<p>Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.</p> + +<h3 id="Vorrendern_von_ähnlichen_oder_sich_wiederholenden_Objekten_auf_einem_Offscreen-Canvas">Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas</h3> + +<p>Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.</p> + +<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas'); +myEntity.offscreenCanvas.width = myEntity.width; +myEntity.offscreenCanvas.height = myEntity.height; +myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d'); + +myEntity.render(myEntity.offscreenContext); +</pre> + +<h3 id="Vermeiden_Sie_Gleitkomma-Koordinaten">Vermeiden Sie Gleitkomma-Koordinaten</h3> + +<p>Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}</span> runden, zum Beispiel mit Hilfe von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{jsxref("Math.floor()")}}.</span></p> + +<h3 id="Skalieren_Sie_keine_Bilder_in_drawImage">Skalieren Sie keine Bilder in <code>drawImage</code></h3> + +<p>Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.</p> + +<h3 id="Benutzen_Sie_mehrere_Canvas-Ebenen_für_komplexe_Szenen">Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen</h3> + +<p>Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.</p> + +<p>Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.</p> + +<pre class="brush: html"><div id="stage"> + <canvas id="ui-layer" width="480" height="320"></canvas> + <canvas id="game-layer" width="480" height="320"></canvas> + <canvas id="background-layer" width="480" height="320"></canvas> +</div> + +<style> + #stage { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black + } + canvas { position: absolute; } + #ui-layer { z-index: 3 } + #game-layer { z-index: 2 } + #background-layer { z-index: 1 } +</style> +</pre> + +<h3 id="Nutzen_Sie_CSS_für_große_Hintergrundbilder">Nutzen Sie CSS für große Hintergrundbilder</h3> + +<p>Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.</p> + +<h3 id="Skalieren_Sie_das_Canvas_mit_CSS-Transformationen">Skalieren Sie das Canvas mit CSS-Transformationen</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS-Transformationen</a> sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="Nutzen_Sie_das_moz-opaque_Attribut_(nur_Gecko)">Nutzen Sie das <code>moz-opaque</code> Attribut (nur Gecko)</h3> + +<p>Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das <code>moz-opaque</code> Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.</p> + +<pre class="brush: html"><canvas id="myCanvas" moz-opaque></canvas></pre> + +<h3 id="Weitere_Tipps">Weitere Tipps</h3> + +<ul> + <li>Bündeln Sie Canvas-Aufrufe (Zeichnen Sie zum Beispiel eine Linie mit mehreren Knotenpunkten, anstatt einzelne Linien).</li> + <li>Vermeiden Sie unnötige Zustandsänderungen des Canvas.</li> + <li>Rendern Sie nur die Unterschiede, nicht den ganzen neuen Zustand.</li> + <li>Vermeiden Sie die {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}-Eigenschaft, soweit möglich.</li> + <li>Vermeiden Sie <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">das Zeichnen von Text</a>, falls möglich.</li> + <li>Versuchen Sie verschiedene Wege, das Canvas zu leeren ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} oder Größenänderung des Canvas)</li> + <li>Bei Animationen, nutzen Sie {{domxref("window.requestAnimationFrame()")}} anstatt {{domxref("window.setInterval()")}} .</li> + <li>Seien Sie vorsichtig mit schwergewichtigen Physik-Bibliotheken.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html new file mode 100644 index 0000000000..1cd3f0bfc6 --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html @@ -0,0 +1,165 @@ +--- +title: Text zeichnen +slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text +tags: + - Canvas + - Fortgeschritten + - Grafik + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>Nachdem wir im vorigen Kapitel gesehen haben, wie man <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Gestaltung und Farben anwendet</a> , werden wir nun einen Blick darauf werfen, wie man Text auf ein <code>canvas</code> zeichnet.</p> +</div> + +<h2 id="Text_zeichnen">Text zeichnen</h2> + +<p>Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd> +</dl> + +<h3 id="ein_fillText-Beispiel">ein <code>fillText</code>-Beispiel</h3> + +<p>Der Text wird mit dem aktuellen <code>fillStyle</code> gefüllt.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="ein_strokeText-Beispiel">ein <code>strokeText</code>-Beispiel</h3> + +<p>Der Text wird mit dem aktuellen <code>strokeStyle</code> umrandet.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Text_gestalten">Text gestalten</h2> + +<p>In den obigen Beispielen nutzen wir bereits die <code>font</code>-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem <code>canvas</code> zu beeinflussen:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>Einstellung der Text-Ausrichtung. Mögliche Werte: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>. Der Standard-Wert ist <code>start</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd> +</dl> + +<p>These properties might be familiar to you, if you have worked with CSS before.</p> + +<p>The following diagram from the <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstrates the various baselines supported by the <code>textBaseline</code> property.<img alt="The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="A_textBaseline_example">A textBaseline example</h3> + +<p>Edit the code below and see your changes update live in the canvas:</p> + +<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Advanced_text_measurements">Advanced text measurements</h2> + +<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd> +</dl> + +<p>The following code snippet shows how you can measure a text and get its width.</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText('foo'); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<p>In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a> were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html new file mode 100644 index 0000000000..f23e7664b5 --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html @@ -0,0 +1,453 @@ +--- +title: Formen zeichnen mit Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<p>{{CanvasSidebar}}</p> + +<h2 id="Koordinatensystem">Koordinatensystem</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Bevor wir mit dem Zeichnen beginnen können, müssen wir über das <em>canvas grid</em> oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.</p> + +<h2 id="Rechtecke_zeichnen">Rechtecke zeichnen</h2> + +<p>Nicht wie in <a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.</p> + +<div id="section_3"> +<p>Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:</p> + +<dl> + <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>breite</em>, <em>höhe</em>)</code></dt> + <dd>Zeichnet ein gefülltes Rechteck</dd> + <dt><code>strokeRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt> + <dd>Zeichnet den Rahmen eines Rechteckes</dd> + <dt><code>clearRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt> + <dd>Der Bereich des Rechteckes wird transparent</dd> +</dl> + +<p>Alle drei Funktionen benötigen die selben drei Argumente. <code>x</code> und <code>y</code> beschreibt die Position (<em>siehe Koordinatensystem</em>). <code>breite</code> und <code>höhe</code> beschreiben die Größe des Rechteckes.</p> + +<h3 id="Beispiel_mit_Rechtecken">Beispiel mit Rechtecken</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100); + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>Die <code>fillRect()</code>-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die <code>clearRect()</code>-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die <code>strokeRect()</code>-Methode einen 50px großen schwarzen Rahmen in der Mitte.</p> + +<p>Später werden wir zwei alternative Methoden für <code>clearRect()</code> behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.</p> + +<p>Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.</p> + +<h2 id="Pfade_zeichnen">Pfade zeichnen</h2> + +<p>Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:</p> + +<dl> + <dt><code>beginPath()</code></dt> + <dd>Erstellt einen Pfad und beendet ggf. einen älteren.</dd> + <dt><code>closePath()</code></dt> + <dd>Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.</dd> + <dt><code>stroke()</code></dt> + <dd>Zeichnet die Kontur des Pfades.</dd> + <dt><code>fill()</code></dt> + <dd>Zeichnet die Füllung des Pfades.</dd> +</dl> + +<p>Zuerst wird also die <code>beginPath()</code>-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode <code>beginPath()</code> oder ein Aufruf der Methode <code>closePath()</code> löscht die Pfadanweisungen. Optional kann nun <code>closePath()</code> ausgeführt werden.</p> + +<div class="note"><strong>Hinweis:</strong> Wenn <code>fill()</code> ausgeführt wird, wird automatisch der Pfad beendet, sodass <code>closePath()</code> nicht mehr ausgeführt werden muss. Da ist <strong>nicht</strong> der Fall wenn <code>stroke()</code> ausgeführt wird.</div> + +<h3 id="Ein_Dreieck_zeichnen">Ein Dreieck zeichnen</h3> + +<p>So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75, 50); + ctx.lineTo(100, 75); + ctx.lineTo(100, 25); + ctx.fill(); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}</p> + +<h3 id="Stift_bewegen">Stift bewegen</h3> + +<p>Eine sehr sinnvolle Methode ist <code>moveTo()</code>. Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.</p> + +<dl> + <dt><code>moveTo(<em>x</em>, <em>y</em>)</code></dt> + <dd>Bewegt den Stift zu der Koordinate (x , y).</dd> +</dl> + +<p>Meist wird direkt nach dem Aufruf von <code>beginPath()</code> <code>moveTo()</code> ausgeführt. Außerdem kann man <code>moveTo()</code> für nichtverbundene Pfade benutzen. Beispiel (<code>moveTo()</code>-Aufrufe sind rote Linien):</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle + ctx.moveTo(110, 75); + ctx.arc(75, 75, 35, 0, Math.PI, false); // Mund + ctx.moveTo(65, 65); + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Linkes Auge + ctx.moveTo(95, 65); + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Rechtes Auge + ctx.stroke(); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>arc()</code> zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.</p> +</div> + +<h3 id="Linien">Linien</h3> + +<p>Für Linien verwendet man die <code>lineTo()</code>-Methode:</p> + +<dl> + <dt><code>lineTo(<em>x</em>, <em>y</em>)</code></dt> + <dd>Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).</dd> +</dl> + +<p>Diese Methode erwartet wie <code>moveTo()</code> zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.</p> + +<p>Beispiel mit zwei Dreiecken:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(105, 25); + ctx.lineTo(25, 105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125, 125); + ctx.lineTo(125, 45); + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } +}</code></pre> + +<p>Es beginnt mit der Ausführung von <code>beginPath()</code> um eine neue Form zu beginnen. Danach wird mit <code>moveTo()</code> der Startpunkt festgelegt. Danach werden die Linien gezeichnet.</p> + +<p>{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<h3 id="Kreisbögen">Kreisbögen</h3> + +<p>Um Kreise oder Kreisbögen zu zeichnen, benutzt man die <code>arc()</code>-Methode.</p> + +<dl> + <dt><code>arc(<em>x</em>, <em>y</em>, <em>radius</em>, <em>startWinkel</em>, <em>endWinkel</em>, <em>uhrzeigersinn</em>)</code></dt> + <dd>Zeichnet einen Kreisbogen.</dd> +</dl> + +<p>Diese Methode benötigt sechs Parameter: <code>x</code> und <code>y</code> sind die Koordinaten des Mittelpunktes des Kreisbogens. <code>radius</code> ist der Radius des Kreisbogens. <code>startWinkel</code> und <code>endWinkel</code> definieren die Punkte auf dem Kreis in rad. Der <code>uhrzeigersinn</code>-Parameter ist <code>true</code>, wenn der Kreisbogen gegen den Uhrzeigersinn und <code>false</code> wenn er im Uhrzeigersinn gezeichnet werden soll.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: <code>rad = (Math.PI / 180) * deg</code>.</p> +</div> +Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:<br> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.beginPath(); + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle + var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +}</code></pre> +{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} + +<h3 id="Bezier_und_quadratische_Kurven">Bezier und quadratische Kurven</h3> + +<p><a class="external" href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézierkurven</a> sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.</p> + +<dl> + <dt><code>quadraticCurveTo(cp1x, cp1y, x, y)</code></dt> + <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe des Kontrollpunktes mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>).</dd> + <dt><code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code></dt> + <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe der Kontrollpunkte mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>) und (<code>cp2x</code>, <code>cp2y</code>).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.</p> + +<p>Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.</p> + +<h4 id="Quadratische_Bézierkurven">Quadratische Bézierkurven</h4> + +<p>Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100); + ctx.quadraticCurveTo(125, 100, 125, 62.5); + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); + } +}</code></pre> + +<p>{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Kubische_Bézierkurven">Kubische Bézierkurven</h4> + +<p>Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Cubic curves example + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); + } +}</code></pre> + +<p>{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Rechtecke">Rechtecke</h3> + +<p>Es gibt auch eine Rechtecksmethode für Pfade:</p> + +<dl> + <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt> + <dd>Zeichnet ein Rechteck.</dd> +</dl> + +<p>Nachdem diese Methode ausgeführt wurde, wird automatisch <code>moveTo(0, 0)</code> ausgeführt.</p> + +<h3 id="Kombinationen">Kombinationen</h3> + +<p>Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + roundedRect(ctx, 12, 12, 150, 150, 15); + roundedRect(ctx, 19, 19, 150, 150, 9); + roundedRect(ctx, 53, 53, 49, 33, 10); + roundedRect(ctx, 53, 119, 49, 16, 6); + roundedRect(ctx, 135, 53, 49, 33, 10); + roundedRect(ctx, 135, 119, 25, 49, 10); + + ctx.beginPath(); + ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); + ctx.lineTo(31, 37); + ctx.fill(); + + for (var i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 35, 4, 4); + } + + for (i = 0; i < 6; i++) { + ctx.fillRect(115, 51 + i * 16, 4, 4); + } + + for (i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 99, 4, 4); + } + + ctx.beginPath(); + ctx.moveTo(83, 116); + ctx.lineTo(83, 102); + ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); + ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); + ctx.lineTo(111, 116); + ctx.lineTo(106.333, 111.333); + ctx.lineTo(101.666, 116); + ctx.lineTo(97, 111.333); + ctx.lineTo(92.333, 116); + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = 'white'; + ctx.beginPath(); + ctx.moveTo(91, 96); + ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); + ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); + ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); + ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); + ctx.moveTo(103, 96); + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); + ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); + ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); + ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); + ctx.fill(); + + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(101, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.arcTo(x, y + height, x + radius, y + height, radius); + ctx.lineTo(x + width - radius, y + height); + ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius); + ctx.lineTo(x + width, y + radius); + ctx.arcTo(x + width, y, x + width - radius, y, radius); + ctx.lineTo(x + radius, y); + ctx.arcTo(x, y, x, y + radius, radius); + ctx.stroke(); +}</code></pre> + +<div id="section_18"> +<p>Demo:</p> + +<p>{{EmbedLiveSample("Kombinationen", 160, 160)}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p> +</div> +</div> diff --git a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html new file mode 100644 index 0000000000..f89af7fa04 --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html @@ -0,0 +1,154 @@ +--- +title: Grundlagen Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen +tags: + - Canvas + - Graphics + - HTML + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"> +<p>Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.</p> +</div> + +<h2 id="Das_<canvas>-Element">Das <code><canvas></code>-Element</h2> + +<p>Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:</p> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<p>Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute <code>src</code> und <code>alt</code> nicht besitzt. Das <code><canvas></code>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-<a href="/de/docs/Web/API/HTMLCanvasElement">Eigenschaften</a> gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von <strong>300px</strong> und eine Höhe von <strong>150px</strong>. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute <code>width</code> und <code>height</code> explizit im <code><canvas></code> und nicht über CSS.</p> +</div> + +<p>Das <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute#id">id</a>-Attribut ist eines der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a> in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine <code>id</code> zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.</p> + +<p>Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei <a href="https://developer.mozilla.org/de/docs/SVG">SVG</a>)</p> + +<div id="section_2"> +<h3 id="Fallback">Fallback</h3> + +<p>Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.</p> + +<p>Beispiele:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + aktueller Wechselkurs: $3.15 +0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<h3 id="Benötigter_<canvas>-Tag">Benötigter <code></canvas></code>-Tag</h3> + +<p>Im Unterschied zu dem {{HTMLElement("img")}}-Element, <strong>benötigt</strong> das {{HTMLElement("canvas")}}-Element den Endtag (<code></canvas></code>).</p> + +<p>Wenn kein Fallback definiert wird, reicht ein <code><canvas id="foo" ...></canvas></code> völlig aus.</p> + +<h2 id="Der_Kontext">Der Kontext</h2> + +<p>{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> (3D context) basierend auf <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> + +<p>Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">Methode</a> <code>getContext()</code>, mit der der Kontext definiert wird. <code>getContext()</code> benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".</p> + +<pre class="brush: js">var canvas = document.getElementById("tutorial"); +var ctx = canvas.getContext("2d"); +</pre> + +<p>Die erste Zeile speichert in der Variablen <code>canvas</code> den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die <code>getContext()</code>-Methode aufgerufen, um den Kontext in der Variablen <code>ctx</code> zu speichern.</p> + +<div id="section_5"> +<h2 id="Browserkompatibilität_prüfen">Browserkompatibilität prüfen</h2> + +<p>Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der <code>getContext()</code>-Methode überprüft wird. Beispiel:</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + // weiterer Code +} else { + alert("Dein Browser unterstützt das <canvas> Element nicht") +} +</pre> +</div> +</div> + +<h2 id="HTML-Struktur">HTML-Struktur</h2> + +<p>Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById('tutorial'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Das Skript enthält eine Funktion <code>draw()</code>, die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.</p> + +<p>So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.</p> + +<p>{{EmbedLiveSample("HTML-Struktur", 160, 160)}}</p> + +<h2 id="Einfaches_Beispiel">Einfaches Beispiel</h2> + +<p>Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect(10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect(30, 30, 55, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p> diff --git a/files/de/web/guide/html/canvas_tutorial/index.html b/files/de/web/guide/html/canvas_tutorial/index.html new file mode 100644 index 0000000000..487f5b7984 --- /dev/null +++ b/files/de/web/guide/html/canvas_tutorial/index.html @@ -0,0 +1,51 @@ +--- +title: Canvas Tutorial +slug: Web/Guide/HTML/Canvas_Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p> + +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> ("Leinwand") ist ein <a href="/en-US/docs/HTML" title="HTML">HTML</a> Element, auf das man mit Hilfe von Skripten (normalerweise <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a>) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <code><canvas></code>-Element erstellen lassen.</p> + +<p><code>Das <canvas>-</code>Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <code><canvas></code>-Element ist Teil der <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> Spezifikation (HTML5).</p> + +<p><span class="seoSummary">Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.</span></p> + +<h2 id="Before_you_start" name="Before_you_start">Vorbereitung</h2> + +<p>Das <code><canvas></code>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von <a href="/de/docs/HTML" title="HTML">HTML</a> und <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a> voraus. Einige ältere Browser unterstützen das <code><canvas></code>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute <code>height</code> und <code>width</code> oder mit Hilfe von <a href="/de/docs/CSS" title="HTML">CSS</a> ändern. Um auf dem <code><canvas></code>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">In diesem Tutorial</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen" title="Canvas_tutorial/Basic_usage">Grundlagen</a></li> + <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen" title="Canvas_tutorial/Drawing_shapes">Formen zeichnen</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Bilder</a></li> + <li><a href="/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Stile und Farben verwenden</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> + <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li> + <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li> + <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li> + <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li> + <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li> + <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li> + <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li> + <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas tutorials and reference</a></li> +</ul> + +<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div> diff --git a/files/de/web/guide/html/content_editable/index.html b/files/de/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..03ab2fdfe0 --- /dev/null +++ b/files/de/web/guide/html/content_editable/index.html @@ -0,0 +1,52 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - HTML5 Inhalt ändern editierbar +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.</span></p> + +<h2 id="Kompatibilität">Kompatibilität</h2> + +<p>Content editable ist kompatibel mit folgenden Browsern.</p> + +<ul> + <li>Firefox 3.5+</li> + <li>Firefox for Android 19+</li> + <li>Chrome 4.0+</li> + <li>Internet Explorer 5.5+</li> + <li>Safari 3.1+</li> + <li>Opera 9+</li> + <li>iOS Safari 5.0+</li> + <li>Android Browser 3.0+</li> + <li>Opera Mobile 12.1+</li> + <li>Chrome for Android 25+</li> +</ul> + +<p>Keine Unterstützung in Opera Mini.</p> + +<h2 id="Wie_funktioniert_es">Wie funktioniert es?</h2> + +<p>Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu <code>true</code> in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Ein einfaches Beispiel:</p> + +<pre class="brush: html"><div contenteditable="true"> + This text can be edited by the user. +</div></pre> + +<p>Das obige Beispiel kann direkt ausprobiert werden:</p> + +<p>{{ EmbedLiveSample('Beispiele') }}</p> + +<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2> + +<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<p><a href="/en/Midas" title="en/Midas">How to interact with the content </a> (old IE style API) and <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">here</a></p> diff --git a/files/de/web/guide/html/inhaltskategorien/index.html b/files/de/web/guide/html/inhaltskategorien/index.html new file mode 100644 index 0000000000..03687c47af --- /dev/null +++ b/files/de/web/guide/html/inhaltskategorien/index.html @@ -0,0 +1,153 @@ +--- +title: Inhaltskategorien +slug: Web/Guide/HTML/Inhaltskategorien +tags: + - Anleitung + - HTML + - HTML5 + - NeedsTranslation + - Web + - erweitert +translation_of: Web/Guide/HTML/Content_categories +--- +<p><span class="seoSummary">Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.</span></p> + +<p>Es gibt drei Typen von Inhaltskategorien:</p> + +<ul> + <li>Hauptinhaltskategorien(engl. <code>main content categories</code>), welche Inhaltsregeln beschreiben, welche bei vielen Elementen gültig sind;</li> + <li>Formzusammenhängende Inhaltskategorien(engl. <code>form-related content categories</code>), welche Inhaltsregeln beschreiben, welche für formzusammenhängende Elemente gelten;</li> + <li>Spezifische Inhaltskategorien(engl.<code> specific content categories</code>), welche seltene Kategorien beschreiben, welche nur für wenige Elemente gelten, manchmal nur in einem spezifischen Context.</li> +</ul> + +<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> + +<h2 id="Hauptinhaltskategorien">Hauptinhaltskategorien</h2> + +<h3 id="Metadateninhalt">Metadateninhalt</h3> + +<p>Elemente, welche zu der <em>Metadata</em>inhaltscategorie(engl.<em>metadata content category</em>) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere <em>out-of-band</em>-Information.</p> + +<p>Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.</p> + +<h3 id="Fließender_Inhalt"><a name="fließender_Inhalt">Fließender Inhalt</a></h3> + +<p>Elemente, die zu der Kategorie des fließenden Inhaltes(engl.<em>flow content category</em> gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.</p> + +<p>Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:</p> + +<ul> + <li>{{HTMLElement("area")}}, falls es ein Nachfolger eines {{HTMLElement("map")}}-Elementes ist</li> + <li>{{HTMLElement("link")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li> + <li>{{HTMLElement("meta")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li> + <li>{{HTMLElement("style")}}, falls das {{htmlattrxref("scoped","style")}}-Attribut geschrieben ist</li> +</ul> + +<h3 id="Unterteilender_Inhalt">Unterteilender Inhalt</h3> + +<p>Elemente, die zu dem <em>sectioninig-content</em>-Modell gehören, erstellen eine <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Section in der laufenden Outline</a>, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und <a href="#Heading_content" title="#heading content">Überschrifteninhaltes</a> definiert.</p> + +<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. </p> + +<div class="note"> +<p><em>Notiz:</em> Nicht dieses Modell mit der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">Sectionierende-Wurzel</a>-Kategorie(engl.<em>sectioning root category</em>, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.</p> +</div> + +<h3 id="Überschrifteninhalt">Überschrifteninhalt</h3> + +<p>Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten <a href="#Sectionierender_Inhalt" title="#Sectionierender Inhalt">sectionierenden Inhalt</a> gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.</p> + +<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p><em>Notiz:</em> Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.</p> +</div> + +<h3 id="Gestaltender_Inhalt">Gestaltender Inhalt</h3> + +<p>Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.</p> + +<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).</p> + +<p>Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:</p> + +<ul> + <li>{{HTMLElement("a")}}, falls es nur phrasierenden Inhalt enthält</li> + <li>{{HTMLElement("area")}}, falls es das Descendens eines {{HTMLElement("map")}}-Elementes ist</li> + <li>{{HTMLElement("del")}}, falls es nur phrasierenden Inhalt enthält</li> + <li>{{HTMLElement("ins")}}, falls es nur phrasierenden Inhalt enthält</li> + <li>{{HTMLElement("link")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attribute#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li> + <li>{{HTMLElement("map")}}, falls es nur phrasierenden Inhalt enthält</li> + <li>{{HTMLElement("meta")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist.</li> +</ul> + +<h3 id="Eingebetter_Inhalt">Eingebetter Inhalt</h3> + +<p>Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> + +<h3 id="Interaktiver_Inhalt"><a name="interactiver_Inhalt">Interaktiver Inhalt</a></h3> + +<p>Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:</p> + +<ul> + <li>{{HTMLElement("audio")}}, falls das {{htmlattrxref("controls", "audio")}}-Attribut geschrieben ist</li> + <li>{{HTMLElement("img")}}, falls das {{htmlattrxref("usemap", "img")}}-Attribut geschrieben ist</li> + <li>{{HTMLElement("input")}}, falls das {{htmlattrxref("type", "input")}}-Attribut nicht im versteckten Status ist.</li> + <li>{{HTMLElement("menu")}}, falls das {{htmlattrxref("type", "menu")}}-Attribut im Toolbar-Status ist</li> + <li>{{HTMLElement("object")}}, falls das {{htmlattrxref("usemap", "object")}}-Attribut geschrieben ist</li> + <li>{{HTMLElement("video")}}, falls das {{htmlattrxref("controls", "video")}}-Attribut geschrieben ist.</li> +</ul> + +<h3 id="Fühlbarer_Inhalt">Fühlbarer Inhalt</h3> + +<p> A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.</p> + +<h3 id="Formularbezogener_Inhalt">Formularbezogener Inhalt</h3> + +<p>Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.</p> + +<ul> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("meter")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> + +<p>This category contains several sub-categories:</p> + +<dl> + <dt><a id="Formular_gelistet" name="Formular_gelistet">gelistet</a></dt> + <dd>Elements that are listed in the <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd> + <dt><a id="Formular_bezeichenbar" name="Formular_bezeichenbar">bezeichenbar</a></dt> + <dd>Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd> + <dt><a id="Formular_abschickbar" name="Formular_abschickbar">abschickbar</a></dt> + <dd>Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd> + <dt><a id="Formular_zurücksetzbar" name="Formular_zurücksetzbar">zurücksetzbar</a></dt> + <dd>Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd> +</dl> + +<h2 id="Transparentes_Inhaltsmodell">Transparentes Inhaltsmodell</h2> + +<p>If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.</p> + +<p>For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:</p> + +<pre class="notranslate"><p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p> +</pre> + +<p>If those elements were removed, this fragment would still be valid HTML (if not correct English).</p> + +<pre class="notranslate"><p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p> +</pre> + +<h2 id="Andere_Inhaltsmodelle">Andere Inhaltsmodelle</h2> + +<p>Sectioning root.</p> diff --git a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html new file mode 100644 index 0000000000..882a3333dc --- /dev/null +++ b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html @@ -0,0 +1,351 @@ +--- +title: Verwendung von HTML-Abschnitten und -Gliederungen +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div>{{HTMLSidebar}}</div> + +<div class="warning"> +<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p> +</div> + +<p>Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.</p> + +<h2 id="Dokumentstruktur_in_HTML_4">Dokumentstruktur in HTML 4</h2> + +<p>Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <code><body></code> und <code></body></code> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.</p> + +<p>Folgendes Markup:</p> + +<pre class="brush: html"><div class="section" id="forest-elephants" > + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <div class="subsection" id="forest-habitat" > + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </div> +</div> </pre> + +<p>führt zu folgender Gliederung (ohne die implizierten Ebenennummern):</p> + +<pre>1. Forest elephants + 1.1 Habitat +</pre> + +<p>Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:</p> + +<pre class="brush: html"><h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + <h2>Diet</h2> +<h1>Mongolian gerbils</h1> +</pre> + +<p>zu folgender Gliederung:</p> + +<pre>1. Forest elephants + 1.1 Habitat + 1.2 Diet +2. Mongolian gerbils +</pre> + +<h2 id="Durch_HTML5_gelöste_Probleme">Durch HTML5 gelöste Probleme</h2> + +<p>Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:</p> + +<ol> + <li>Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die <strong>Klassenattribute</strong> macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.</li> + <li>Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.</li> + <li>In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.</li> + <li>Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.</li> +</ol> + +<p>HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.</p> + +<h2 id="Der_HTML5-Gliederungsalgorithmus">Der HTML5-Gliederungsalgorithmus</h2> + +<div class="warning"> +<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p> +</div> + +<p>Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.</p> + +<h3 id="Abschnitte_definieren">Abschnitte definieren</h3> + +<p>Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.</p> + +<div class="note">Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}</div> + +<p>Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:</p> + +<pre class="brush: html"><section> + + <h1>Forest elephants</h1> + + <section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section> + + <section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section> + + <aside> + <p>advertising block</p> + </aside> + +</section> + +<footer> + <p>(c) 2010 The Example company</p> +</footer></pre> + +<p>Dies erzeugt folgende Gliederung:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat +</pre> + +<h3 id="Überschriften_definieren">Überschriften definieren</h3> + +<div class="warning"> +<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p> +</div> + +<p>Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.</p> + +<p>Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den <em>höchsten</em> Rang und {{HTMLElement("h6")}} den <em>niedrigsten</em> Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:</p> + +<p> </p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </section> +</section> +<section> + <h3>Mongolian gerbils</h3> + <p>In this section, we discuss the famous mongolian gerbils. + ...this section continues... +</section></pre> + +<p>Dies erzeugt folgende Gliederung:</p> + +<pre>1. Forest elephants + 1.1 Habitat +2. Mongolian gerbils</pre> + +<p>Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).</p> + +<h3 id="Implizierte_Abschnitte">Implizierte Abschnitte</h3> + +<p> </p> + +<p>Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen <em>implizierten Abschnitt</em>.</p> + +<p>Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:</p> + +<p> </p> + +<pre class="brush: html"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3 class="implicit subsection">Habitat</h3> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... +</section></pre> + +<p>erzeugt die Gliederung:</p> + +<pre>1. Forest elephants + 1.1 Habitat (implizit definiert durch das Element h3) +</pre> + +<p>Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:</p> + +<pre class="brush: html"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h1 class="implicit section">Mongolian gerbils</h1> + <p>Mongolian gerbils are cute little mammals. + ...this section continues... +</section></pre> + +<p>erzeugt die Gliederung:</p> + +<pre>1. Forest elephants +2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde) +</pre> + +<p>Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:</p> + +<pre class="brush:xml"><body> + <h1>Mammals</h1> + <h2>Whales</h2> + <p>In this section, we discuss the swimming whales. + ...this section continues... + <section> + <h3>Forest elephants</h3> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3>Mongolian gerbils</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...this subsection continues... + <h2>Reptiles</h2> + <p>Reptiles are animals with cold blood. + ...this section continues... + </section> +</body></pre> + +<p>leading to the following outline:</p> + +<pre>1. Mammals + 1.1 Whales <em>(implicitly defined by the h2 element)</em> + 1.2 Forest elephants <em>(explicitly defined by the section element)</em> + 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> +2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em> +</pre> + +<p>This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.</p> + +<p>An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.</p> + +<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3> + +<p>A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.</p> + +<p>Example:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <section> + <h2>Introduction</h2> + <p>In this section, we discuss the lesser known forest elephants</p> + </section> + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. Let's + look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> + <blockquote> + <h1>Borneo</h1> + <p>The forest element lives in Borneo...</p> + </blockquote> + </section> +</section> +</pre> + +<p>This example results in the following outline:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat</pre> + +<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p> + +<h3 id="Sections_outside_the_outline">Sections outside the outline</h3> + +<p>HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p> + +<ol> + <li>The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.</li> + <li>The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li> +</ol> + +<h3 id="Headers_and_Footers">Headers and Footers</h3> + +<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p> + +<ol> + <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li> + <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li> +</ol> + +<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p> + +<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2> + +<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p> + +<p>A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p> + +<h2 id="Using_HTML5_elements_in_non-HTML5_browsers">Using HTML5 elements in non-HTML5 browsers</h2> + +<p>Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.</p> + +<p>HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as <code>display:inline</code> by default, so you'll want to set them to <code>display: block</code>:</p> + +<pre class="brush: css">article, aside, footer, header, nav, section { + display:block; +} +</pre> + +<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p> + +<p>Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("article"); + document.createElement("aside"); + document.createElement("footer"); + document.createElement("header"); + document.createElement("nav"); + document.createElement("section"); + document.createElement("time"); + </script> +<![endif]--> +</pre> + +<p>As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:</p> + +<pre class="brush:xml"><noscript> + <p><strong>This web page requires JavaScript to be enabled.</strong></p> + <p>JavaScript is an object-oriented computer programming language + commonly used to create interactive effects within web browsers.</p> + <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p> +</noscript> +</pre> + +<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("article"); + document.createElement("aside"); + document.createElement("footer"); + document.createElement("header"); + document.createElement("nav"); + document.createElement("section"); + document.createElement("time"); + </script> +<![endif]--> +<noscript> + <p><strong>This web page requires JavaScript to be enabled.</strong></p> + <p>JavaScript is an object-oriented computer programming language + commonly used to create interactive effects within web browsers.</p> + <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p> +</noscript> +</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: This code will also cause the <a href="https://validator.w3.org/">HTML validator</a> to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p> diff --git a/files/de/web/guide/index.html b/files/de/web/guide/index.html new file mode 100644 index 0000000000..c789a6e4a9 --- /dev/null +++ b/files/de/web/guide/index.html @@ -0,0 +1,28 @@ +--- +title: Web-Entwickler Leitfäden +slug: Web/Guide +tags: + - Guide + - Landing + - TopicStub + - Web +translation_of: Web/Guide +--- +<p>Diese Artikel stellen Ihnen praktische Informationen zum Gebrauch von bestimmten Technologien und Programmierschnittstellen bereit.</p> + +<div class="note"> +<p><strong>Anmerkung:</strong> Bis wir alle Inhalte umgezogen haben, wird diese Seite für kurze Zeit etwas unorganisiert wirken. Wir entschuldigen uns dafür!</p> +</div> + +<div>{{LandingPageListSubpages}}</div> + +<dl> + <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript ist die leistungsfähige Scriptsprache zur Entwicklung von Webanwendungen.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> |