Was ist HTML5?

() translation by (you can also view the original English article)

Credit: Topic Simple - Was ist HTML5? Sie machen coole animierte Videos.

Einführung in HTML5

Willkommen bei Envato Tuts +! Dieses Tutorial bietet einen einführenden Überblick über HTML5. Wenn Sie nicht viel davon gehört haben oder einfach nur die Relevanz verstehen möchten, sind Sie bei uns genau richtig.

HTML5 ist der neueste Standard für Browser, um Webseiten anzuzeigen und mit ihnen zu interagieren. Das 2014 genehmigte Produkt ist das erste HTML-Update seit 14 Jahren. In der heutigen Zeit ist dies ein Leben lang zwischen Updates.

Der Zweck von HTML5 besteht in erster Linie darin, Web-Entwicklern und Browser-Erstellern die Einhaltung von konsensbasierten Standards zu erleichtern, die die Einhaltung von Vorschriften effizienter und effizienter machen. Es bietet auch bessere, schnellere und konsistentere Benutzererfahrungen für Desktop- und mobile Besucher.

Hier einige wichtige Verbesserungen in HTML5:

Es gibt eine einfachere, einfachere Elementstruktur für Seiten, die das Erstellen, Anpassen und Debuggen der Seiten vereinfacht und die Erstellung automatisierter Dienste erleichtert, mit denen Sie wichtige Ressourcen im Web finden können.
Sie enthält Standardelemente für gängige Medienobjekte, für die zuvor störende Plugins für Audio, Video usw. erforderlich waren. Diese Plugins mussten regelmäßig aktualisiert werden, d. H. Wiederholte Downloads, um die Sicherheit zu verwalten.
Es gibt eine native Integration mit Schnittstellen, um moderne Web- und mobile Anforderungen zu nutzen. Eines meiner Lieblingsbeispiele ist die Geolocation, mit der Sie die GPS-Koordinaten eines Web-Besuchers über ihren Browser ermitteln können. Diese Funktion war bisher auf mit GPS ausgestattete Telefonanwendungen beschränkt.

Im Folgenden finden Sie ein Beispiel für eine HTML5-Geolocation aus "Erstellen Sie Ihr Startup mit PHP: Geolocation" und Google Places (Tuts +):

Für wen ist HTML5 von Bedeutung?

Sind Sie nur ein Webbenutzer oder ein YouTube-Fan?

HTML5 verbessert die Geschwindigkeit, Benutzerfreundlichkeit und Konsistenz im gesamten Web. Ja, dein YouTube-Erlebnis wird nach und nach immer wunderbar. Es gibt weniger Browser- und Plugin-Updates, weniger Sicherheitsbedrohungen und elegantere, besser lesbare, schnellere Websites.

Sind Sie ein Webentwickler?

HTML5 macht Ihr Leben unglaublich einfacher und erweitert das, was möglich ist. Dies bedeutet auch, dass Sie in der Lage sind, Dinge zu erstellen und sich mehr auf die Browser-Builder zu verlassen, um die Konsistenz sicherzustellen. Dies bedeutet viel weniger bedingten Layoutcode.

Möchten Sie einen Webbrowser erstellen?

Zum einen haben Sie eine großartige Roadmap in der HTML5-Spezifikation, in der beschrieben wird, wie und was Sie erstellen sollten. Auf der anderen Seite gibt es mehr zu tun und richtig zu machen. Es wird nicht so einfach sein, Ihren Browser von den großen Browserherstellern zu unterscheiden.

Möchten Sie mehr erfahren?

Nur eine kurze Erinnerung, bevor wir eintauchen! Ich versuche, an den folgenden Diskussionen teilzunehmen. Wenn Sie eine Frage oder einen Themenvorschlag für ein zukünftiges Tutorial haben, schreiben Sie bitte einen Kommentar oder kontaktieren Sie mich unter Twitter @reifman.

Der Hintergrund von HTML5

Woher kommt HTML5?

HTML5 ist das neueste in über 20 Jahren Browser-Programmierstandards seit der Einführung des Webs im Jahr 1991.

Geschichte von HTML

HTML wurde 1993 zum ersten Mal als Standard entwickelt, und hier ist die Zeitleiste der HTML-Versionen, die von Normenkomitees akzeptiert wird:

HTML 2.0: 1995
HTML 4.0: 1997
HTML 4.01: 2000
HTML 5: 2014

Die Ziele von HTML5

Laut Wikipedia soll HTML5 frühere Versionen und differenzierte Dokumenttypen wie XHTML 1 und DOM Level 2 HTML konsolidieren:

[HTML5] erweitert, verbessert und rationalisiert das Markup für Dokumente und führt Markup und ... (APIs) für komplexe Webanwendungen ein ... HTML5 ist auch ein potenzieller Kandidat für plattformübergreifende mobile Anwendungen. Viele Funktionen wurden mit Geräten mit niedrigem Stromverbrauch, wie z. B. Smartphones und Tablets, entwickelt.

Hier eine Zusammenfassung, wie MakeUseOf die Ziele von HTML5 erläuterte:

Beseitigen Sie Plugins wie Flash für allgemeine Funktionen, die jeder benötigt. Bauen Sie native Unterstützung für Dinge wie Audio, Video usw. auf.
Reduzieren Sie den Bedarf an JavaScript und zusätzlichen Code mit neuen nativen Elementen.
Sorgen Sie für Konsistenz zwischen Browsern und Geräten.
Tun Sie dies alles so transparent wie möglich.

What is HTML5 Plugin Past for Video Element

Bildnachweis: Thema Simple

Welche neuen Funktionen bietet HTML5?

Vieles stellt sich heraus! HTML5 bietet eine derart beeindruckende Liste neuer Funktionen, dass die wichtigsten Browser auch 18 Monate nach ihrer Annahme noch nicht vollständig kompatibel sind:

Bildnachweis: PHPFlow

Bei HTML5Readiness gibt es auch diesen interaktiven visuellen Regenbogen. Bewegen Sie den Mauszeiger über verschiedene Bögen und Sie sehen, welche Funktionen von welchen Browsern unterstützt werden:

Es macht Spaß, aber andere Diagramme auf anderen Websites sind möglicherweise intuitiver zu bedienen.

Annahmenraten für HTML5

Im Jahr 2011 berichtete Wikipedia, dass ungefähr ein Drittel der Top-100-Websites HTML5 unterstützt. Bis August 2013 waren es ungefähr 153 der Fortune-500-Websites.

Hier ist eine Visualisierung der umfangreichen Möglichkeiten von HTML5:

Bildnachweis: Wikipedia

Die neuen Elemente von HTML5

Die grundlegendsten neuen Elemente von HTML5 erleichtern das Layout von Webseiten und das Debuggen von Code oder anderen. Außerdem können automatisierte Dienste einfacher das Web scannen und die Bedeutung der verschiedenen Seitenkomponenten verstehen.

Für das Seitenlayout und die wichtigsten Funktionen gibt es jetzt spezifische Elemente wie:

<header> und <footer> - und -Tags, damit native Browser die Wiedergabe jedes Browsers verwalten können. Keine weiteren Plugins und Sicherheitsupdates, speziell zum Zeichnen von Grafiken mithilfe einer separaten Skriptsprache, um externe Inhalte oder Anwendungen auf der Seite zu platzieren
<nav> für alle Arten von Menüs
<aside> für Seitenleisten oder verwandte Inhalte in der Nähe
<article> wo Inhalt wie ein Blogbeitrag geht
<section> ähnelt <div>, ist aber inhaltsorientierter
<audio> und <video> -Tags, damit native Browser die Wiedergabe jedes Browsers verwalten können. Keine weiteren Plugins und Sicherheitsupdates
<canvas> speziell zum Zeichnen von Grafiken mithilfe einer separaten Skriptsprache
<embed> um externe Inhalte oder Anwendungen auf der Seite zu platzieren

Hier ist eine schöne visuelle Übersicht über diese vom Smashing Magazine:

Hier sind einige der erweiterten Funktionen von HTML5, einschließlich der API-Integration, die das Codieren in JavaScript für anspruchsvolle Aktionen einfacher und konsistenter für alle Browser macht:

Audio- und Videowiedergabe: Bietet Medienwiedergabe über Browser ohne Plugins.
Geolocation: Identifizieren Sie den Standort des Besuchers.
Drag & Drop: Zum Hochladen von Dateien aus dem Browser mit einfachen Gesten.
Anwendungscache: Unterstützt die Offline-Ausführung von HTML-Sites.
Web-Worker: führt JavaScript im Hintergrund aus (nicht blockierend).
Vom Server gesendete Ereignisse: Server können Webseiten nach dem Laden in einem Browser aktualisieren. Dies ist einfacher und effizienter als AJAX und JavaScript.
Offline-Datenspeicherung: bietet die Möglichkeit, Daten unabhängig von Cookies lokal im Browser zu speichern. Wie man HTML5-Offline-Speicher auf Ihrer Website verwendet, bietet einen guten Überblick.

HTML5 und The Future of the Web bieten eine weitere Anleitung zu diesen Funktionen. Hier ist einer ihrer Imbissbuden - sie schätzen den Anwendungscache sehr:

Google Gears ermöglichte uns die Offline-Speicherung von Daten und Flash führte uns in die Möglichkeiten des Anwendungscaches ein (Pandora verwendet es, um Ihre Anmeldeinformationen zu speichern). Mit HTML5 stehen diese Funktionen jetzt für die Verwendung in der Sprache zur Verfügung und können leicht mit JavaScript erweitert werden.

Müssen Sie sehen, welche Funktionen in welchen Browsern unterstützt werden? HTML5Test bietet eine nützliche interaktive Bewertung für Funktionen und Browserunterstützung:

What is HTML5 Feature Compatibility Browser Matrix

Es gibt so viele neue Funktionen, dass es unmöglich ist, alle hier zu katalogisieren. Überprüfen Sie die Ressourcenlinks am Ende dieses Tutorials auf weitere Ressourcen, die ich empfehle.

Einige HTML5-Beispiele in Aktion

Schauen wir uns ein paar coole Beispiele für HTML5 in Aktion an.

Eine Boilerplate-HTML5-Seite

Die Einfachheit von HTML5 wird in den neuen Seitenlayouts deutlich. Die eher inhaltsorientierten Elemente machen es einfacher, Seitencode zu verstehen und zu debuggen. Hier ist ein einfaches Beispiel, das ich mit dem HTML5-Reset-Projekt erstellt habe:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
    <meta name="author" content="" />
  <meta name="description" content="" />

 <link rel="stylesheet" href="assets/css/style.css" />

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header>
    	<h1><a href="/">Page Title</a></h1>
		<nav>
			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>
		</nav>
	</header>
	<article>
		<h1>Article Header</h1>
		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>
		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>
		<h2>Sidebar Content</h2>
	</aside>

	<footer>
		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
	</footer>

</div>

  <script src="scripts/js/scripts.js"></script>
</body>
</html>

Beachten Sie, dass es ein einfacheres doctype-Tag, Link-Tags und Skript-Tags gibt. Das HTML5Shiv-Skript bietet ältere Versionen für Internet Explorer vor 9.x.

Wenn Sie andere Ansätze sehen möchten, checken Sie die HTML5-Boilerplate aus, eine allgemeinere Open-Source-Standard-HTML5-Seite.

Das Videoelement und die Spieler

Hier ist ein Videobeispiel von W3Schools, das links den Quellcode und den resultierenden Player rechts zeigt:

Es ist kein Plugin erforderlich und keine Updates.

Formen

HTML5 bietet eine Vielzahl von Verbesserungen an Formularen und Eingabeelementen, um die Webprogrammierung zu vereinfachen und die Benutzererfahrung zu verbessern. Beispielsweise unterstützen Eingabeelemente jetzt eine Vielzahl integrierter Validierungen. Hier ist eine Überprüfung für Zahlen innerhalb eines bestimmten Bereichs:

Hier sind ein paar ausgezeichnete Tutorials, mit denen Sie HTML5 Doctor bei Formularen tiefer einsteigen können:

Hier ist zum Beispiel eine Demonstration des Range-Elements in einem Chrome-Browser dargestellt:

Skalierbare Vektorgrafiken (SVG)

In HTML5 können Sie Elemente mit JavaScript und HTML5 einfacher animieren. Hier ist eine einfache animierte Uhr, die skalierbar ist (Zoom ändern):

Hier ist ein Beispiel für den Code für die Demo, der JavaScript integriert:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: SVG clock animation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
    <header>
      <h1>SVG clock animation</h1>
    </header>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<article>
  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
    <div>
      <label for="zoominput">Zoom</label>
      <select id="rangeinput" onchange="CLOCK.zoom();">
        <option value="1" selected="selected">1x</option>
        <option value="2">2x</option>
        <option value="3">3x</option>
        <option value="4">4x</option>
        <option value="5">5x</option>
      </select>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
        <g>
          <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
          <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
          <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
          <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
          <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
          <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
          <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
          <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
          <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
          <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
          <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
          <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
          <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
        </g>
        <g>
          <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
          <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
          <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
        </g>
      </svg>
    </div>

</article>
<script>
var CLOCK = (function() {
    var drawClock = function() {
        var INITIAL_R = 100;

        var zoom = document.getElementById("rangeinput").value;
        
        var r = INITIAL_R * zoom;

        // Draw Circle
        var circle = document.getElementById("circle");
        circle.setAttribute('r', r);
        circle.setAttribute('cx', r);
        circle.setAttribute('cy', r);

        // Draw Hours
        for(var i = 0; i < 12; i++) {
            var hour = document.getElementById("hour"+i);
            var degrees = i * 30;
            hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('x2', getX(degrees, r));
            hour.setAttribute('y2', getY(degrees, r));
        }

        // Draw hands
        drawHands();
    };

    var drawHands = function() {
        // Constants for hand's sizes.
        var SECONDS_HAND_SIZE = 0.95,
        MINUTES_HAND_SIZE = 0.85,
        HOURS_HAND_SIZE = 0.55;

        var circle = document.getElementById("circle");

        // Clock Circle's Properties
        var r = circle.getAttribute('r'),
        cx = parseInt(circle.getAttribute('cx')),
        cy = parseInt(circle.getAttribute('cy'));

        // Current time.
        var currentTime = new Date();

        // Draw Hands
        drawHand(document.getElementById("secondhand"),
                 currentTime.getSeconds(),
                 SECONDS_HAND_SIZE,
                 6);
        drawHand(document.getElementById("minutehand"),
                 currentTime.getMinutes(),
                 MINUTES_HAND_SIZE,
                 6);
        drawHand(document.getElementById("hourhand"),
                 currentTime.getHours(),
                 HOURS_HAND_SIZE,
                 30);
        
        function drawHand(hand, value, size, degrees) {
            var deg = degrees * value;
            x2 = getX(deg, r, size, cx),
            y2 = getY(deg, r, size, cy);
            
            hand.setAttribute('x1', cx);
            hand.setAttribute('y1', cy); 
            hand.setAttribute('x2', x2);
            hand.setAttribute('y2', y2); 
        }
    };

    /*
     * Get a Point X value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of X point.
     */
    function getX(degrees, r, adjust, x) {
        var x = x || r, 
        adj = adjust || 1;
        return x + r * adj * Math.cos(getRad(degrees));
    }

    /*
     * Get a Point Y value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of Y point.
     */   
    function getY(degrees, r, adjust, y) {
        var y = y || r,
        adj = adjust || 1;
        return y + r * adj * Math.sin(getRad(degrees));
    }

    // Convert from degrees to radians.
    function getRad(degrees) {
        var adjust = Math.PI / 2;
        return (degrees * Math.PI / 180) - adjust;
    }
        
    return {
        init: function() {
            drawClock();
            setInterval(drawHands, 1000);
        },
        zoom: function() {
            drawClock();
        }
    };
})();
CLOCK.init();
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

Was kommt als nächstes?

Ich hoffe, Ihnen hat diese Übersicht über die Entstehung und den Nutzen von HTML5 gefallen. Wenn Sie HTML5 weiter erkunden möchten, gibt es zwei weitere Ressourcen, die ich vorschlagen möchte:

HTML5-Einführung: Eine hervorragende Einführung in HTML5-Verbesserungen für Entwickler, die einen schnellen Überblick über alle neuen Elemente wünschen.
HTML5-Demos und Beispiele: Perfekt, um Ihnen ein organisiertes Menü mit einer Vielzahl von HTML5-Demos anzuzeigen und Ihnen anzuzeigen, was möglich ist.

Hier ein Beispiel für die durchsuchbaren Demos von HTML5-Demos (nicht alle haben für mich funktioniert):

Wenn Sie ein WordPress-Site-Manager wie viele Envato Tuts + -Leser sind, möchten Sie möglicherweise zukünftige Designs auf ihre Übereinstimmung mit HTML5 prüfen. Eine auf Standards basierende Entwicklung mit konsistenter Browserunterstützung macht die Webentwicklung für viele von uns viel einfacher und reduziert die Anzahl der Fehler, die unsere Kunden verursachen, und sorgt gleichzeitig für eine bessere Benutzererfahrung.

Insgesamt war ich ziemlich beeindruckt von HTML5. Und es sieht so aus, als würde es sich schneller als alle 14 Jahre weiterentwickeln.

Wenn Sie nach anderen Dienstprogrammen suchen, die Sie beim Erweitern Ihrer HTML5-Kenntnisse unterstützen, sollten Sie nicht vergessen, was wir in Envato Market zur Verfügung haben.

Ich würde gerne mehr über Ihr Feedback zu HTML5 und Vorschläge für zukünftige Themen erfahren, über die Sie mehr erfahren möchten. Bitte zögern Sie nicht, unten Ihre Fragen und Kommentare zu posten. Sie können mich auch direkt auf Twitter @reifman kontaktieren. Um andere Tutorials zu sehen, die ich geschrieben habe, browsen Sie auf meiner Envato Tuts + Instructor-Seite.

ähnliche Links

Da es so viele nützliche Ressourcen für HTML5 gibt, habe ich eine zusätzliche Hilfe für einige der von mir nützlichen Ressourcen bereitgestellt: