Die 5 häufigsten Fehler, die HTML5-Entwickler machen: Ein Leitfaden für Anfänger

Es ist über 20 Jahre her, seit Tim Berners-Lee und Robert Cailliau HTML spezifizierten, das zur Standard-Markup-Sprache für den Aufbau des Internets wurde. Seitdem hat die HTML-Entwicklungsgemeinschaft um Verbesserungen dieser Sprache gebeten, aber dieser Schrei wurde hauptsächlich von Webbrowser-Entwicklern gehört, die versuchten, die HTML-Probleme ihrer Kollegen zu lindern. Leider führte dies zu noch mehr Problemen, die viele browserübergreifende Kompatibilitätsprobleme und doppelte Entwicklungsarbeit verursachten. In diesen 20 Jahren wurde HTML viermal aktualisiert, während die meisten Browser eine zweistellige Anzahl an großen Updates plus zahlreiche kleine Patches erhielten.

HTML5 sollte unsere Probleme endlich lösen und ein Standard werden, der sie alle (Browser) beherrscht . Dies war wahrscheinlich eine der am meisten erwarteten Technologien seit der Entstehung des World Wide Web. Ist es passiert? Haben wir endlich eine Markup-Sprache bekommen, die vollständig browserübergreifend kompatibel ist und auf allen Desktop- und Mobilplattformen funktioniert und uns all die Funktionen bietet, nach denen wir gefragt haben? Ich weiß nicht! Vor wenigen Tagen (16. September 2014) erhielten wir einen weiteren Aufruf zur Überprüfung durch das W3C, sodass die HTML5-Spezifikation immer noch unvollständig ist.

Wenn die Spezifikation eines Tages fertiggestellt ist, werden die Browser hoffentlich nicht bereits über erheblichen veralteten Code verfügen und großartige Funktionen wie Web Worker , mehrere synchronisierte Audio- und Videoelemente und andere HTML5-Komponenten, die wir für eine benötigt haben, einfach und richtig implementieren lange Zeit.

Wir haben jedoch Tausende von Unternehmen, die ihre Geschäfte auf HTML5 aufgebaut haben und großartige Leistungen erbringen. Es gibt auch viele großartige HTML5-basierte Anwendungen und Spiele, die von Millionen von Menschen verwendet werden, sodass ein Erfolg offensichtlich möglich ist und HTML5 unabhängig vom Status seiner Spezifikation verwendet wird und weiterhin verwendet wird.

Das erwähnte Rezept kann uns jedoch leicht um die Ohren fliegen, und deshalb habe ich einige der grundlegendsten HTML5-Fehler hervorgehoben, die vermieden werden können. Die meisten der unten aufgeführten Fehler sind die Folge einer unvollständigen oder fehlenden Implementierung bestimmter HTML5-Elemente in verschiedenen Browsern, und wir sollten hoffen, dass sie in naher Zukunft obsolet werden. Bis dies geschieht, schlage ich vor, die Liste zu lesen und beim Erstellen Ihrer nächsten HTML5-Anwendung daran zu denken, ob Sie ein HTML5-Anfänger oder ein erfahrener Tierarzt sind.

Häufiger Fehler Nr. 1: Dem lokalen Speicher vertrauen

Lass sie Kuchen essen! Dieser Ansatz belastet Entwickler seit Ewigkeiten. Aus vernünftiger Angst vor Sicherheitsverletzungen und dem Schutz von Computern durften Webanwendungen in den „dunklen Zeiten“, als das Internet von vielen gefürchtet wurde, unangemessen kleine Datenmengen auf Computern hinterlassen. Es gab zwar Dinge wie Benutzerdaten, die uns „großartige Browsermaster von Microsoft(r)“ gegeben haben, oder Dinge wie Local Shared Objects in Flash, aber das war alles andere als perfekt.

Es ist daher vernünftig, dass eine der ersten grundlegenden HTML5-Funktionen, die von Entwicklern übernommen wurde, der Webspeicher war. Beachten Sie jedoch, dass der Webspeicher nicht sicher ist. Es ist besser als die Verwendung von Cookies, da es nicht über das Kabel übertragen wird, aber es ist nicht verschlüsselt. Sicherheitstoken sollten Sie dort auf keinen Fall hinterlegen. Ihre Sicherheitsrichtlinie sollte sich niemals auf Daten verlassen, die im Webspeicher gespeichert sind, da ein böswilliger Benutzer seine localStorage und sessionStorage Werte jederzeit leicht ändern kann.

Um mehr Einblick in Web Storage und seine Verwendung zu erhalten, empfehle ich, diesen Beitrag zu lesen.

Häufiger Fehler Nr. 2: Kompatibilität zwischen Browsern erwarten

HTML5 ist viel mehr als eine einfache Auszeichnungssprache. Es ist ausgereift genug, um Verhalten und Layout zu kombinieren, und Sie sollten HTML5 als erweitertes HTML mit erweitertem JavaScript an der Spitze betrachten. Wenn Sie sich all die Probleme ansehen, die wir zuvor hatten, nur um eine statische Kombination von HTML+CSS auf allen Browsern identisch aussehen zu lassen, ist es fair anzunehmen, dass mehr Komplexität nur mehr Aufwand bedeutet, um die Cross-Browser-Kompatibilität sicherzustellen.

Die HTML5-Interpretation auf verschiedenen Browsern ist bei weitem nicht identisch, genau wie dies bei JavaScript der Fall war. Alle großen Akteure in den Browserkriegen haben bei der HTML5-Spezifikation mitgeholfen, daher ist davon auszugehen, dass die Abweichungen zwischen den Browsern im Laufe der Zeit abnehmen sollten. Aber selbst jetzt haben einige Browser beschlossen, bestimmte HTML5-Elemente vollständig zu ignorieren, was es sehr schwierig macht, einer Grundlinie und einem gemeinsamen Satz von Funktionen zu folgen. Wenn wir der Gleichung weitere mit dem Internet verbundene Geräte und Plattformen hinzufügen, wird die Situation noch komplizierter und verursacht Probleme mit HTML5.

Beispielsweise sind Webanimationen eine großartige Funktion, die nur von Chrome und Opera unterstützt wird, während die Webbenachrichtigungsfunktion, die es ermöglicht, den Benutzer außerhalb des Kontexts einer Webseite auf ein Ereignis aufmerksam zu machen, wie z. B. die Zustellung von E-Mails, von Internet Explorer vollständig ignoriert wird.

Um mehr über die HTML5-Funktionen und die Unterstützung durch verschiedene Browser zu erfahren, lesen Sie den HTML5-Leitfaden auf www.caniuse.com.

Es bleibt also die Tatsache, dass wir, obwohl HTML5 neu und gut spezifiziert ist, mit vielen Kompatibilitätsproblemen zwischen Browsern rechnen und diese im Voraus planen sollten. Es gibt einfach zu viele Lücken, die Browser füllen müssen, und es ist fair zu erwarten, dass sie nicht alle Unterschiede zwischen den Plattformen gut überwinden können.

Häufiger Fehler Nr. 3: Annahme hoher Leistung

Ungeachtet der Tatsache, dass sich HTML5 immer noch weiterentwickelt, ist es eine sehr leistungsfähige Technologie, die viele Vorteile gegenüber alternativen Plattformen hat, die vor ihrer Existenz verwendet wurden. Aber mit großer Macht geht auch große Verantwortung einher, besonders für HTML5-Anfänger. HTML5 wurde von allen gängigen Browsern auf Desktop- und mobilen Plattformen übernommen. Vor diesem Hintergrund wählen viele Entwicklungsteams HTML5 als ihre bevorzugte Plattform, in der Hoffnung, dass ihre Anwendungen auf allen Browsern gleichermaßen laufen. Es ist jedoch nicht sinnvoll, eine vernünftige Leistung sowohl auf Desktop- als auch auf mobilen Plattformen anzunehmen, nur weil die HTML5-Spezifikation dies vorschreibt. Viele Unternehmen (khm! Facebook khm!) setzten auf HTML5 für ihre mobile Plattform und litten darunter, dass HTML5 nicht wie geplant funktionierte.

Aber auch hier gibt es einige großartige Unternehmen, die stark auf HTML5 setzen. Schauen Sie sich nur die zahlreichen Online-Spielentwicklungsstudios an, die erstaunliche Dinge tun, während sie HTML5 und Browser an ihre Grenzen bringen. Solange Sie sich der Leistungsprobleme bewusst sind und diese umgehen, können Sie natürlich an einem großartigen Ort sein, um erstaunliche Anwendungen zu erstellen.

Häufiger Fehler Nr. 4: Begrenzte Zugänglichkeit

Web ist zu einem sehr wichtigen Teil unseres Lebens geworden. Anwendungen für Menschen zugänglich zu machen, die auf assistive Technologien angewiesen sind, ist ein wichtiges Thema, das in der Softwareentwicklung oft vernachlässigt wird. HTML5 versucht, dies zu überwinden, indem einige der erweiterten Zugänglichkeitsfunktionen implementiert werden. Nicht wenige Entwickler haben dies als ausreichend akzeptiert und keine Zeit damit verbracht, zusätzliche Optionen für die Barrierefreiheit in ihren Anwendungen zu implementieren. Leider hat HTML5 in diesem Stadium Probleme, die es daran hindern, Ihre Anwendungen für alle verfügbar zu machen, und Sie sollten damit rechnen, zusätzliche Zeit zu investieren, wenn Sie ein breiteres Spektrum von Benutzern einbeziehen möchten.

An dieser Stelle finden Sie weitere Informationen zur Barrierefreiheit in HTML5 und zum aktuellen Stand der gängigsten Barrierefreiheitsfunktionen.

Häufiger Fehler Nr. 5: Keine HTML5-Verbesserungen verwenden

HTML5 hat den Standardsatz von HTML/XHTML-Tags erheblich erweitert. Zusätzlich zu den neuen Tags haben wir einige neue Regeln und Verhaltensweisen bekommen. Zu viele Entwickler haben nur ein paar Verbesserungen übernommen und einige der sehr coolen neuen Funktionen von HTML5 übersprungen.

Eines der coolsten Dinge in HTML5 ist die clientseitige Validierung. Diese Funktion war wahrscheinlich eines der frühesten Elemente von HTML5, das Webbrowser aufgegriffen haben. Aber leider finden Sie mehr als ein paar Entwickler, die standardmäßig ein novalidate Attribut zu ihren Formularen hinzufügen. Die Gründe dafür sind vernünftig, und ich bin mir ziemlich sicher, dass wir darüber eine Debatte führen werden. Aufgrund der Abwärtskompatibilität haben viele Anwendungen benutzerdefinierte JavaScript-Validatoren implementiert, und es ist unpraktisch, dass zusätzlich eine Out-of-the-Box-Validierung von Browsern durchgeführt wird. Es ist jedoch nicht allzu schwierig sicherzustellen, dass zwei Validierungsmethoden nicht kollidieren, und die Standardisierung der Benutzervalidierung wird eine gemeinsame Erfahrung sicherstellen und gleichzeitig dazu beitragen, die zuvor erwähnten Zugänglichkeitsprobleme zu lösen.

Ein weiteres großartiges Feature hängt mit der Art und Weise zusammen, wie Benutzereingaben in HTML5 behandelt werden. Bevor HTML5 kam, mussten wir alle unsere Formularfelder innerhalb des <form></form> -Tags enthalten. Neue Formularattribute machen es vollkommen gültig, so etwas zu tun:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Auch wenn lname nicht im Formular enthalten ist, wird es zusammen mit fname gepostet.

Weitere Informationen zu neuen Formularattributen und Verbesserungen finden Sie im Mozilla Developer Network.

Einpacken

Ich verstehe, dass Webentwickler ein Kollateralschaden in den Browserkriegen sind, da viele der oben genannten Fehler eine direkte Folge der problematischen HTML5-Implementierung in verschiedenen Browsern sind. Es ist jedoch immer noch wichtig, dass wir allgemeine HTML5-Probleme vermeiden und einige Zeit damit verbringen, die neuen Funktionen von HTML5 zu verstehen. Sobald wir alles unter Kontrolle haben, werden unsere Anwendungen großartige neue Verbesserungen nutzen und das Web auf die nächste Ebene bringen.