5 Dinge, von denen Sie nicht wussten, dass Sie sie mit HTML tun können
Seien wir ehrlich, die Webentwicklung kann leicht zu einem Chaos werden. HTML, CSS und JavaScript haben sich alle über viele Jahre aus bescheidenen Verhältnissen entwickelt und sind in Bezug auf die Art und Weise, wie Sie sie verwenden sollten, weitgehend zweideutig. Infolgedessen ist es allzu einfach, ein nicht zu wartendes Durcheinander aufzubauen. Die Einhaltung von Standards und die Nutzung der neuesten Verbesserungen der Spezifikationen garantieren keinen guten Code, können aber sicherlich helfen.
Bei jeder Art von Softwareentwicklung ist Modularität das A und O beim Erstellen von wartbarem Code. Daher sollten Sie die Webkomponenten im Auge behalten. Die Browserunterstützung ist nicht besonders gut, aber wenn Sie sich welche schnappen Polyfüllungen können Sie der Kurve einen Schritt voraus sein und benutzerdefinierte Elemente nutzen, um Ihren Code sofort zu strukturieren. Dieser Entwicklungsstil ist die Zukunft, daher lohnt es sich, sich jetzt damit vertraut zu machen.
HTML5 selbst führte eine Reihe neuer Elemente ein (und veraltete mehrere), um gute Codierungspraktiken zu fördern. Möglicherweise haben Sie von semantischem Markup gehört, das sich auf die Verwendung der beschreibenden Elemente von HTML5 bezieht, z und um die Art des Inhalts anzugeben, den sie enthalten.
Dies kann wirklich zur Sauberkeit Ihres Codes beitragen, da die HTML-Elemente beispielsweise sofort erkennen, welche Teile die Menüleiste, Ihre Inhaltsabschnitte, die Fußzeile usw. darstellen.
Es ist auch hilfreich, wenn Sie die neuesten JavaScript-Standards nutzen. JavaScript kann auch chaotisch werden, aber es ist in den letzten Jahren viel einfacher geworden, damit zu arbeiten. Die ES6-Syntax wird in Browsern weitgehend unterstützt, und Funktionen wie Pfeilfunktionen und Klassen können Ihnen das Leben erheblich erleichtern. Viele Entwickler sind jedoch entweder nicht mit ihnen vertraut oder haben Bedenken, sie zu verwenden.
JavaScript setzt das Thema der modularen Entwicklung fort und unterstützt jetzt auch das Laden von Modulen, mit denen Sie Ihre Abhängigkeiten sauber verwalten können.
01. Sprache erkennen und synthetisieren
Früher waren dies komplexe Funktionen, für die spezielle Software erforderlich war. Jetzt werden sie direkt in Browser integriert. Die Web Speech API verfügt über Komponenten, die Text-to-Speech und Speech-to-Text unterstützen. Letztere verwenden entweder einen Onlinedienst (Chrome verwendet die Google Cloud Speech API) oder den nativen Spracherkennungsdienst des Geräts. Erwarten Sie, dass dies in Zukunft auf Mobilgeräten weit verbreitet sein wird.
02. Zeigen Sie einen Farbwähler an
So trivial es auch klingen mag, dies ist ein großartiges Beispiel dafür, wie HTML5 allgemeine Aufgaben vereinfacht, für die zuvor eine benutzerdefinierte Codierung einer ziemlich komplexen UI-Komponente erforderlich gewesen wäre. zeigt beim Klicken einen visuellen Farbwähler an, der einen für das Gerät nativen Farbwähler verwendet. Dies kann besonders bei HTML-Canvas nützlich sein. Es wird mit Ausnahme von Safari für Handys weitgehend unterstützt.
03. Färben Sie die Benutzeroberfläche des Browsers neu
Dies kann auf mobilen Plattformen eine schöne ästhetische Note bieten. soll den Browser anweisen, die Symbolleiste beim Anzeigen Ihrer Website neu einzufärben. Leider ist es ein wenig nicht standardisiert 'Themenfarbe' funktioniert mit Chrome, Firefox und Opera unter iOS 'Apple-Mobile-Web-App-Statusleiste-Stil' (funktioniert nur im Vollbildmodus).
04. Unterschiedliche Bilder für unterschiedliche Bildschirme
Hoffentlich implementieren Sie bereits ein responsives Design. In diesem Fall wird die Größe Ihrer Bilder an das Ansichtsfenster angepasst. Dies ist nicht perfekt, da Sie den Benutzer dazu zwingen, die größte Version des Bildes herunterzuladen und es dann herunterzusampeln. Geben Sie den HTML5 ein Element, mit dem Sie abhängig von der Bildschirmauflösung, auf der die Site angezeigt wird, unterschiedliche Bilder angeben können, die angezeigt werden sollen.
05. Vibrieren Sie Ihr Telefon
Die eindeutig benannte Vibration API stellt eine einzige Funktion bereit, vibrate (), die genau das tut, was auf Geräten, die sie unterstützen, angegeben ist. Die Funktion verwendet eine Liste, die ein Schwingungsmuster beschreibt, als Argument. Es funktioniert unter Chrome, Firefox und Opera, obwohl Sie bei Edge oder Safari kein Glück haben. Es wurde berichtet, dass einige Anzeigen dies verwenden, um die Aufmerksamkeit des Nutzers auf sich zu ziehen. Die Jury ist sich daher nicht sicher, ob dies tatsächlich eine gute Idee ist.
Dieser Artikel erschien ursprünglich in Webdesigner Ausgabe 266. Kaufen Sie es hier .
Zum Thema passende Artikel:
- Die 10 besten HTML5-Vorlagendesigns
- 20 HTML-Vorlagen, die Ihren Webdesign-Projekten einen Vorsprung verschaffen
- Nageln Sie Ihren HTML-Code mit diesem Spickzettel
