Share
Credit: Topic Simple - Was ist HTML5? Sie machen coole animierte Videos.
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:
Im Folgenden finden Sie ein Beispiel für eine HTML5-Geolocation aus "Erstellen Sie Ihr Startup mit PHP: Geolocation" und Google Places (Tuts +):
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.
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.
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.
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.
HTML5 ist das neueste in über 20 Jahren Browser-Programmierstandards seit der Einführung des Webs im Jahr 1991.
HTML wurde 1993 zum ersten Mal als Standard entwickelt, und hier ist die Zeitleiste der HTML-Versionen, die von Normenkomitees akzeptiert wird:
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:
Bild Kredit: Thema einfach
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:
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:
Es macht Spaß, aber andere Diagramme auf anderen Websites sind möglicherweise intuitiver zu bedienen.
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:
Bildgutschrift: Wikipedia
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:
Hier ist eine schöne visuelle Übersicht über diese vom Smashing Magazine:
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:
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.
Schauen wir uns ein paar coole Beispiele für HTML5 in Aktion an.
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:
Seitentitel
Artikelkopfzeile
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed matte nisi egestas.
Artikel Unterabschnitt
Vestibulum lacus erat, volutpat vel dignissim bei Fringilla ut felis.
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.
Hier ist ein Videobeispiel von W3Schools, das links den Quellcode und den resultierenden Player rechts zeigt:
Es ist kein Plugin erforderlich und keine Updates.
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:
Hier sind ein paar ausgezeichnete Tutorials, mit denen Sie HTML5 Doctor bei Formularen tiefer einsteigen können:
Zum Beispiel hier eine Demonstration der Angebot Element, das in einem Chrome-Browser angezeigt wird:
In HTML5 können Sie Elemente mit JavaScript und HTML5 einfacher animieren. Hier ist eine einfache animierte Uhr, die skalierbar ist (Zoom ändern):
Hier ist ein Beispiel für den Code für die Demo, der JavaScript integriert:
HTML5-Demo: SVG-Uhranimation SVG-Uhranimation
SVG-Uhranimation von David Basoko.
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:
Hier sehen Sie ein Beispiel der durchsuchbaren Demos von HTML5-Demos (nicht alle arbeiteten für mich):
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 bietet zunehmend bessere Benutzererfahrungen.
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.
Da es so viele nützliche Ressourcen für HTML5 gibt, habe ich eine zusätzliche Hilfe für einige der von mir am meisten nützlichen Ressourcen hinzugefügt:
Accentsconagua
