Gründe für den Wechsel zu HTML5 und Beispiele, die dafür sprechen
HTML5 ist eine virtuose Innovation und tatsächlich eine Technologie, die dem Genre der Website-Entwicklung neues Blut beschert hat. Egal, ob Sie möchten, dass Ihre Website formverändernde Funktionen bietet oder eine überwältigend schöne visuelle Anziehungskraft zur Schau stellen soll, HTML5 erledigt die Arbeit für Sie, und zwar auf beeindruckende Weise.
Während diese Plattform vor einiger Zeit ihren Vorstoß in den Bereich der Webentwicklung gemacht hat, gibt es keinen Mangel an Webmastern, die sie nicht in ihrer Liste der „Top 3 bevorzugten Tools” haben, wenn es um die Erstellung einer Website geht. Und ein großer Teil dieser Webmaster verwenden bereits andere Plattformen für ihre Website und gehen daher Kompromisse bei einer Reihe von Funktionen ein, die HTML5 in ihre Websites hätte integrieren können.
1 Es lässt den kreativen Seelen freien Lauf
Innovation ist das Markenzeichen der größten Designer und Entwickler, und wenn ein Tool auf den Markt kommt, mit dem sie ihrer Kreativität keine Grenzen setzen können, muss es unterstützt werden. HTML5 passt perfekt und auf die solideste Art und Weise. Als Webentwicklungs-Framework ist HTML5 super anpassbar, sodass sich Design-Profis ausdrücken können. Wenn es also auf Ihrer Agenda steht, der Kurve voraus zu sein, ist der HTML5-Wagen da, um ihn zu fangen.
2 Die stark verbesserte Videounterstützung ist zum Mitnehmen da
Die Videounterstützung wurde mit dem neuen HTML5-Einbettungsvideo für die Browser erheblich verbessert. Da nicht alle Browser verschiedene Formate wie H.264 unterstützen, müssen Sie Folgendes verwenden, wenn Sie ein HTML5-Video anzeigen möchten:
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p>Your browser does not support the format. <a href="cohagenPhoneCall.mp4">Download this format.</a></p>
</video>3 Sie können damit Websites „für Mobilgeräte” erstellen, anstatt Sie zu zwingen, mehrere Versionen zu erstellen
Melden Sie sich bei den Analysen Ihrer Website an, kratzen Sie ein wenig an der Oberfläche und beobachten Sie die Betriebssystemplattformen, von denen Sie die meisten Ihrer Besuche erhalten. Sie werden überrascht sein zu sehen, dass die Mehrheit Ihrer Besuche von mobilen Benutzern kommt, im Gegensatz zu den Zahlen vor einem Jahr, als Sie wahrscheinlich mehr Desktop-Benutzer auf Ihrer Website hatten. Daher ist es viel empfehlenswerter, eine Website für Mobilgeräte zu erstellen, als eine Desktop-zentrierte Website zu erstellen und dann eine für Mobilgeräte optimierte Version derselben zu erstellen. Und HTML5 macht es zu einer hocheffizienten Übung, speziell für mobile Websites gemachte Websites zu erstellen, die ihre visuelle Attraktivität behalten, wenn sie auf kleineren Bildschirmen aufgerufen werden, und sich an die reduzierte Größe anpassen, ohne Kompatibilitäts- oder Reaktionsprobleme auf Sie zu werfen.
4 Verschachtelter XHTML-Dokumenttyp macht Platz für eine einfachere, weniger umständliche Version
Um es ohne Zweideutigkeit auszudrücken, der XHTML-Dokumenttyp wurde von der Entwicklergemeinschaft nicht leidenschaftlich betrachtet. Und der Grund dafür ist mehr als offensichtlich, wie es geschrieben wird als:
<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
"http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5 hat die Erklärung viel kürzer und für die Entwickler verständlicher gemacht:
<!DOCTYPE html>5 Attribute können intuitiver erkannt werden
In erster Linie sollten die Attribute, die Sie in Ihrem Programm verwenden, nahtlos feststellen können, ob sie von den Browsern angemessen erkannt werden. HTML5 gibt diesen Attributen das nötige Kleingeld, um genau das zu tun. Dabei erweist sich die Modernizr-Bibliothek als einfallsreiches Werkzeug, aber es gibt auch andere Möglichkeiten, wie das Erstellen der Elemente, bevor sie seziert werden. Auf diese Weise wird es einfach, die Browserfähigkeit zu bewerten.
6 Es hat seine Reihe von Fixes für IE
Nun ja, der Internet Explorer wird von der Internet-Gemeinschaft auf der ganzen Welt eher leidenschaftslos betrachtet, und das aus sehr berechtigten Gründen. Wie erwartet hat der IE seine eigenen Probleme im Umgang mit den neuen Elementen, die HTML 5 einfügt. Daher ist es wichtig, diese Elemente so zu gestalten, dass sie für diesen Browser verständlicher werden, um den HTML5-Elementen ein Gefühl von Struktur zu verleihen sind als Elemente auf Blockebene ausgerichtet:
header, footer, article, section, nav, menu {
display: block;
}Nun besteht die Möglichkeit, dass Internet Explorer weiterhin ein Problem darstellt, da er möglicherweise nicht richtig mit dem Header-Element vertraut ist. Das Styling in HTML5 läuft also Gefahr, eklatant ignoriert zu werden. Allerdings gibt es dafür eine einfache Lösung:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");7 Geolokalisierung
Geolokalisierung ist unbestreitbar die Fangfunktion von HTML5. Was es tut, ist, dass es Ihnen die mathematischen Werte zuwirft, die die Koordinaten des Standorts Ihres Benutzers darstellen. Diese Standortkoordinaten werden mithilfe des Browsers berechnet, mit dem der Besucher auf die Website zugreift.
8 Code, der übersichtlich und viel verständlicher ist
Es wird immer empfohlen, Programme zu schreiben, die sauber, leicht verständlich und möglichst wiederverwendbar sind. HTML5 macht all dies möglich und mehr, indem es einen Code erleichtert, der hochgradig synchron und semantisch ist und Ihnen die Freiheit gibt, eine Grenze zwischen Stil und Inhalt zu ziehen, damit sie leicht verständlich sind. Ein Standard-Header-Code mit Navigation sieht so aus:
<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
</ul>
</div>
</div>Während Sie vielleicht argumentieren, dass der Code einfach genug ist, sehen wir uns an, was HTML5 damit machen kann:
<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
<li><a href="x">Link</a></li>
</ul>
</nav>
</header>Anscheinend verleiht HTML5 dem gesamten Code viel Sinn für Struktur, indem es ihn aufschlussreicher macht und die Verwendung der HTML-Header Ihren Inhalt besser darstellt.
9 Sie müssen sich bei Skripten und Links nicht mit „Typ” auseinandersetzen
Es gibt keinen Mangel an Webentwicklern, die stark auf das Type-Attribut ausgerichtet sind, insbesondere wenn sie die Tags von Skripts nutzen müssen. Mit HTML 5 können Sie Ihre Typen heilen, anstatt sie ganz zu entfernen. Der Code wird dadurch beschreibend.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Aus den oben hervorgehobenen Funktionen lässt sich leicht ableiten, dass HTML5 hier ist, um die Sphäre der Webtechnologie auf eine dominierende und einflussreiche Weise zu verändern. Und es hat bereits einige der erstaunlichsten Websites und Themen im Internet unterstützt.
Hervorragende Beispiele für leistungsstarke HTML5-Websites
Die folgenden Beispiele belegen weiter die Tatsache, dass HTML5 hier ist, um mächtige Wellen der Veränderung zu schlagen:
1 Ghostwriter-Kunstatelier
Ghost Writer Art Studio wird Sie vielleicht nicht aus der Fassung bringen, aber es wird sicher ein starkes Statement abgeben, dank der cleveren Designs, die, gelinde gesagt, eingängig sind. Die HTML5-Tools haben ihm eine Anziehungskraft verliehen, die ihresgleichen sucht.
2 Weingut Valpolicella Negrar
Die Website für Cantina Valpolicella Negrar schafft eine Atmosphäre, die man nur schwer abschütteln kann, eher eine Atmosphäre, die man behalten möchte. Die HTML5-Funktionen werden am intelligentesten für diese minimal gestalteten Websites verwendet, die maximale Wirkung erzielen.
3 Waterloo: Der Film
Die Website schließt Sie direkt in die Schlacht ein, eine Zeitmaschine ist nicht erforderlich. Es erfüllt seine Aufgabe, Ihnen einen Einblick in das zu geben, worum es in dem Film geht, mit seiner feinen Verwendung von Farben, dem Layout, der Positionierung von Elementen und vielem mehr.
4 Zizi
Wenn Sie noch nicht an das uralte Sprichwort „Bilder sagen mehr als tausend Worte” glauben, wird Sie dieses definitiv überzeugen. Die von HTML5 unterstützte Website für Zizzi ist ein schöner Beweis dafür, wie Kreativität in Verbindung mit einer leistungsstarken Plattform Magie erzeugen kann. Dieser wurde von der renommierten Agentur Propeller Communications entwickelt und stellt sicher, dass die Geolocation-API-Funktion von HTML5 reichlich genutzt wird.
5 Wasserleinwand
Und dann ist da noch das! Water Canvas ist atemberaubend schön, aber der Fokus wurde auch auf die Reaktionsfähigkeit der Website gelegt. Die Texturen und das Gesamtlayout lassen sich gut genug kombinieren, um dieses Stück hervorzuheben.
6 Lardini
Die Lardini-Website hat genug Mode, um für sich selbst und für die Marke zu sprechen. HTML 5 gab seinen Designern und Entwicklern in der Tat ein ganzes Ensemble von Werkzeugen und Fähigkeiten, um ihre Kreativität auf die freizügigste und wirksamste Art und Weise auszuüben.
Diese Beispiele sollten Ihnen einen authentischen Grund zum Innehalten geben und diese wachsende Zugkraft auf HTML5 weiter ankurbeln; etwas, das der Webentwicklungstechnologie nur zugute kommt.