Die Veröffentlichung von HTML5 und CSS3 war ein Evolutionssprung, doch nur wenige Designer machen von den neuen Funktionen der Technologie Gebrauch. Dies ist zum Teil darauf zurückzuführen, dass das volle Potenzial von HTML5 und CSS3 übersehen wurde. Daher entwickeln die Leute mehr oder weniger die gleichen Websites, nur mit geringfügigen Unterschieden in der Codierung.
Daran ist nichts besonders falsch, aber es gibt viele Dinge, die Ihnen HTML5 und CSS3 zur Verfügung stellen, die Sie nutzen könnten, um erstaunlichere Kreationen zu kreieren, als jemals zuvor.
Ignoriere die Leinwand nicht
Das Canvas-Objekt in den Griff zu bekommen, ist eine der schwierigsten Aufgaben, die ein neuer HTML5-Codierer ausführen muss, insbesondere wenn dieser Codierer zuvor in anderen HTML-Versionen codiert wurde und keinen Hintergrund in der Computergrafikprogrammierung hat.
Die Verwendung des Zeichenbereichsobjekts zu erlernen, auch wenn Sie selten beabsichtigen, Zeichnungen zu zeichnen, ist eine wertvolle Fähigkeit, die jeder ernsthafte Kodierer zum Lernen lernen sollte. Es kann für alle Arten von Dingen verwendet werden, z. B. zum Erstellen von animierten Infografiken, Diashows, Diagrammen (einschließlich interaktiver Diagramme) und vieles mehr.
Abbildung mit freundlicher Genehmigung von
Bei der Verwendung der Zeichenfläche wird einfach das Objekt in HTML5 erstellt und anschließend mit JavaScript gefüllt. Die verwendeten Techniken sind ein Thema für einen anderen Tag, aber auf dieser Website finden Sie bereits einige Tutorials, die Ihnen den Einstieg erleichtern.
Sie benötigen kein Flash mehr
Für das, was wir bisher für Flash verwendet haben, ist kein Flash erforderlich. Jetzt können Sie alles mit CSS3-Übergängen, HTML5-Zeichnung, HTML5-Animation, HTML5-Video und HTML5-Audio.
Das Einzige, was wir in HTML5 nicht tun können, ist, dass Sie mit Flash Ihre Benutzer ausspionieren und deren Privatsphäre verletzen können, aber das möchten Sie eigentlich gar nicht, oder?
Die meisten Benutzer empfanden Flash als sehr ärgerlich, obwohl die meisten es auch als unvermeidliche Notwendigkeit installierten. Das war jedoch so lange, bis die schwerwiegenden Sicherheits- und Datenschutzprobleme, die mit Flash verbunden waren, es jetzt zu etwas machten, das die meisten Benutzer entweder überhaupt nicht installieren oder nur von Fall zu Fall aktivieren, wenn dies für eine Aufgabe, die sie ausführen möchten, unbedingt erforderlich ist .
CSS3 gibt Ihnen neue Pseudoklassen
Einige Pseudoklassen gab es in CSS2, aber mit CSS3 können Sie wichtige Positionspseudoklassen verwenden, um mehr Kontrolle zu erlangen. Hauptsächlich werden sie mit Text verwendet, wie die Pseudoklassennamen anzeigen: vor, nach, Anfangsbuchstabe, erste Zeile…
Sie haben auch Zugriff auf Übergänge, mit denen Sie alles ändern können, einschließlich Text. Diese Übergänge animieren oder transformieren das, was der Benutzer auf dem Bildschirm sieht.
Ihre Webseiten können direkt mit der GPU kommunizieren
Sie sollten dies mit einiger Vorsicht tun, da durch jede Art von Hardwarebeschleunigung die Lebensdauer der Mobilgeräte verringert wird. Trotzdem ist es ziemlich cool, dass Sie dies tun können.
Die GPU-Beschleunigung funktioniert, wenn Sie Übergänge, 3D-Transformationen, Leinwand im 3D-Modus und WebGL 3D verwenden. Letzteres ist mein Favorit, aber Sie müssen viel lesen, um alles über WebGL zu erfahren. Es gibt Ihnen jedoch viel Spielraum zum Erstellen von Animationen und Spielen.
Die GPU-Beschleunigung funktioniert nicht mit älteren Browsern, auch wenn sie HTML5 und CSS3 unterstützen.
Mit freundlicher Genehmigung von
Verwenden Sie Game-Engines, um die 3D-Grafik zu lösen
Game-Programmierer verwenden Game Engines seit jeher, um die Aufgabe der Game-Programmierung zu vereinfachen, aber erst in den letzten ein oder zwei Jahren sind wirklich leistungsfähige HTML5-Game-Engines entstanden, die der Aufgabe standhalten könnten, qualitativ hochwertige 3D-Spiele zu erstellen eine Browser-basierte Umgebung.
PlayCanvas ist der einfachste Einstieg, und obwohl es kostenlos ist und mit einer persönlichen Lizenz wirklich billig ist, ist es kein Leichtgewicht. Hier ist Sturzflug, ein in PlayCanvas erstelltes Spiel:
Und das ist RoboStorm:
Könntest du solche Spiele erstellen? Absolut und es ist jetzt viel einfacher als je zuvor.
Versuchen Sie es für ein Retro-Game-Building-Erlebnis Construct2 or Construct3. Sie haben alles, was Sie benötigen, um Spiele auf Drag & Drop-Basis zu erstellen (obwohl dies für einige zu einschränkend ist). Sie erstellen Ihre Spiele online und die Leute spielen sie online. Es ist eine Engine für diejenigen, die keine Programmierung kennen und sich nicht mit dem Lernen beschäftigen möchten.
Hier ist Kiwi-Geschichte, ein 2D-Plattformer der alten Schule, der in Construct3 erstellt wurde:
Mit diesen Engines sind Sie nicht nur auf das Spielen beschränkt. Um ganze Filme und Präsentationen zu machen, ist es besser zu verwenden Mixer or MayaFür Spiele, die sich auf eine bestimmte Plattform konzentrieren, ist es in der Regel besser, eine native Programmierumgebung für diese Plattform zu verwenden. Für plattformübergreifende interaktive Spiele, Storytelling, Lernsoftware oder Präsentationen sind die HTML5-Engines eine hervorragende Option.
HTML5 und CSS3 geben Ihnen mehr Leistung
Mit HTML5 und CSS3 haben Sie jetzt die vollständige Kontrolle über jedes Element, das auf Ihrer Seite erscheint, einschließlich der Möglichkeit, jedes Objekt praktisch beliebig zu manipulieren wish.
Während die Grundeinheit des Aufbaus immer noch das Rechteck ist, müssen Ihre Websites nicht mehr der rechteckigen Linearität folgen. Sie können Dinge in jeden beliebigen Winkel stellen, drehen, verzerren, verdrehen und biegen, und Ihr Browser wird sich nicht beschweren.
Sie können die Deckkraft und die Skalierung jetzt auch viel einfacher steuern als zuvor, und die Techniken funktionieren in allen gängigen Browsern.
Zum Zeitpunkt des Schreibens im frühen 2018 gab es immer noch Probleme mit der Skalierung zwischen verschiedenen Browsern, wobei einige Browser eine genaue Skalierung ermöglichen, während andere extrem unterschiedliche Ergebnisse für dieselbe Seite liefern.
Das bedeutet, dass wir zumindest vorerst immer noch damit beschäftigt sind, verschiedene Versionen einer Site zu programmieren, wenn wir die Skalierung verwenden möchten responsive Zwecke.
Glücklicherweise wird dies selten nötig sein, aber manchmal ist es das Hauptziel, etwas auf den Bildschirm zu bringen, egal wie klein dieser Bildschirm ist. In diesen Fällen bleibt das Fehlen einer standardisierten Skalierung für verschiedene Browser ein Problem.
Bei diesen Problemen handelt es sich jedoch nicht um HTML5- oder CSS3-Probleme. Es handelt sich hierbei um Probleme, dass die Browserentwickler die von HTML5 und CSS3 bereitgestellten Funktionen nicht ordnungsgemäß unterstützen.
Mit der Zeit sollten Verbesserungen in den Browsern sichtbar sein, und alles funktioniert wie erwartet. Dann ist es vielleicht an der Zeit, HTML6 und CSS4 zu lernen, aber es ist zumindest ein Schritt in die richtige Richtung.
Headerbild mit freundlicher Genehmigung von
Kommentare 0 Antworten