Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML5
Code

Was ist HTML5?

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

What You'll Be Creating

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

Einführung in HTML5

Willkommen bei Envato Tuts +!  Dieses Tutorial bietet einen einführenden Überblick über HTML5.  Wenn Sie nicht viel davon gehört haben oder einfach nur die Relevanz verstehen möchten, sind Sie bei uns genau richtig.

HTML5 ist der neueste Standard fü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 für Desktop- und mobile Besucher.

Hier einige wichtige Verbesserungen in HTML5:

  • Es gibt eine einfachere, einfachere Elementstruktur fü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 können.
  • Sie enthält Standardelemente für gängige Medienobjekte, für die zuvor störende Plugins für Audio, Video usw. erforderlich waren.  Diese Plugins mussten regelmäß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 über ihren Browser ermitteln können.  Diese Funktion war bisher auf mit GPS ausgestattete Telefonanwendungen beschränkt.

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

What is HTML5 Geolocation Example

Fü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 mö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.

Mö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.

Mö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 für ein zukü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 über 20 Jahren Browser-Programmierstandards seit der Einfü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 frühere Versionen und differenzierte Dokumenttypen wie XHTML 1 und DOM Level 2 HTML konsolidieren:

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

Hier eine Zusammenfassung, wie MakeUseOf die Ziele von HTML5 erläuterte:

  • Beseitigen Sie Plugins wie Flash für allgemeine Funktionen, die jeder benötigt.  Bauen Sie native Unterstützung für Dinge wie Audio, Video usw. auf.
  • Reduzieren Sie den Bedarf an JavaScript und zusätzlichen Code mit neuen nativen Elementen.
  • Sorgen Sie für Konsistenz zwischen Browsern und Geräten.
  • Tun Sie dies alles so transparent wie mö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 vollständig kompatibel sind:

What is HTML5 Browser compatiblity

Bildnachweis: PHPFlow

Bei HTML5Readiness gibt es auch diesen interaktiven visuellen Regenbogen.  Bewegen Sie den Mauszeiger über verschiedene Bögen und Sie sehen, welche Funktionen von welchen Browsern unterstützt werden:

What is HTML5 Compatibility Rainbow

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

Annahmenraten für HTML5

Im Jahr 2011 berichtete Wikipedia, dass ungefähr ein Drittel der Top-100-Websites HTML5 unterstützt.  Bis August 2013 waren es ungefähr 153 der Fortune-500-Websites.

Hier ist eine Visualisierung der umfangreichen Möglichkeiten von HTML5:

What is HTML5 Feature Overview

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 können automatisierte Dienste einfacher das Web scannen und die Bedeutung der verschiedenen Seitenkomponenten verstehen.

Fü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 kö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> für alle Arten von Menüs
  • <aside> für Seitenleisten oder verwandte Inhalte in der Nähe
  • <article> wo Inhalt wie ein Blogbeitrag geht
  • <section> ähnelt <div>, ist aber inhaltsorientierter
  • <audio> und <video> -Tags, damit native Browser die Wiedergabe jedes Browsers verwalten kö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 schöne visuelle Übersicht über diese vom Smashing Magazine:

What is HTML5 New Elements

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

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

Google Gears ermöglichte uns die Offline-Speicherung von Daten und Flash führte uns in die Möglichkeiten des Anwendungscaches ein (Pandora verwendet es, um Ihre Anmeldeinformationen zu speichern).  Mit HTML5 stehen diese Funktionen jetzt für die Verwendung in der Sprache zur Verfügung und können leicht mit JavaScript erweitert werden.

Müssen Sie sehen, welche Funktionen in welchen Browsern unterstützt werden? HTML5Test bietet eine nützliche interaktive Bewertung für Funktionen und Browserunterstützung:

What is HTML5 Feature Compatibility Browser Matrix

Es gibt so viele neue Funktionen, dass es unmöglich ist, alle hier zu katalogisieren.  Überprü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 fü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:

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

Wenn Sie andere Ansätze sehen mö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:

What is HTML5 Video Example

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 unterstützen Eingabeelemente jetzt eine Vielzahl integrierter Validierungen.  Hier ist eine Überprüfung für Zahlen innerhalb eines bestimmten Bereichs:

What is HTML5 Input Element Example

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

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

What is HTML5 Range element example

Skalierbare Vektorgrafiken (SVG)

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

What is HTML5 SVG Animated Clock Demo

Hier ist ein Beispiel für den Code für die Demo, der JavaScript integriert:

Was kommt als nächstes?

Ich hoffe, Ihnen hat diese Übersicht über die Entstehung und den Nutzen von HTML5 gefallen.  Wenn Sie HTML5 weiter erkunden möchten, gibt es zwei weitere Ressourcen, die ich vorschlagen möchte:

  • HTML5-Einführung: Eine hervorragende Einführung in HTML5-Verbesserungen für Entwickler, die einen schnellen Überblick über alle neuen Elemente wünschen.
  • HTML5-Demos und Beispiele: Perfekt, um Ihnen ein organisiertes Menü mit einer Vielzahl von HTML5-Demos anzuzeigen und Ihnen anzuzeigen, was möglich ist.

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

What is HTML5 Demo site at HTML5Testcom

Wenn Sie ein WordPress-Site-Manager wie viele Envato Tuts + -Leser sind, möchten Sie möglicherweise zukünftige Designs auf ihre Übereinstimmung mit HTML5 prüfen.  Eine auf Standards basierende Entwicklung mit konsistenter Browserunterstützung macht die Webentwicklung für viele von uns viel einfacher und reduziert die Anzahl der Fehler, die unsere Kunden verursachen, und sorgt gleichzeitig für eine bessere Benutzererfahrung.

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

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

Ich würde gerne mehr über Ihr Feedback zu HTML5 und Vorschläge für zukünftige Themen erfahren, über die Sie mehr erfahren möchten.  Bitte zögern Sie nicht, unten Ihre Fragen und Kommentare zu posten.  Sie kö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.

ähnliche Links

Da es so viele nützliche Ressourcen für HTML5 gibt, habe ich eine zusätzliche Hilfe für einige der von mir nützlichen Ressourcen bereitgestellt:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.