⚙️ Erleichtere die Erstellung deiner Webseite mit Erweiterungen

Durch Bibliotheken und Frameworks effizienter Arbeiten

Gute Programmierer sind in der Regel "faule" Personen, die sich die Arbeit intelligent erleichtern, um durch einen geringen Aufwand ein maximales Ergebnis zu erzielen. Für viele Probleme und Aufgaben gibt es schon vorgefertigte Algorithmen, die in den meisten Fällen einfach zu erlernen sind und Dir enorm mit der Entwicklung von Webseiten und Programmen helfen können.

Der Fachbegriff dieser Hilfs-Algorithmen lautet Bibliotheken, oder Frameworks. Eine Bibliothek ist eine Sammlung von Unterprogrammen, Algorithmen oder Routinen, die für verschiedene, gleichartige Anwendungen ausgelegt sind. Ein Framework ist eine Rahmenstruktur, die Du als Vorlage eines Programms verwenden kannst. Ein Framework kann zum Beispiel für ein Spiel, oder eine Webseite nützlich sein.

Wir zeigen Dir die besten und am meisten Verwendeten Bibliotheken und Frameworks im Web und erklären Dir die Anwendungsbereiche der einzelnen Hilfsprogramme.

jQuery

Viele Entwickler schätzen jQuery beim Erstellen von dynamischen Inhalten auf der Webseite. Einige Webentwickler möchten gar nicht mehr ohne jQuery Programmieren, da es die Skript-Sprache JavaScript mit allerlei Hilfsmitteln und Erweiterungen ergänzt, die sehr umständlich für Projekte erstellt werden müssen.

Das Selektieren von Elementen im DOM wird zum Kinderspiel und ein AJAX-Befehl benötigt nur noch wenige Zeilen verständlichen Code, um weitere Inhalte vom Server nachzuladen. Sogar Asynchrone Befehlsketten werden durch Defferred-Objekte ermöglicht und können bei so manchen Problemen wahre Lebensretter werden, wenn der Code nicht auf einmal sondern nacheinander ausgeführt werden muss.

Dank des No-Conflict-Mode kann jQuery in verschiedenen Versionen simultan auf einer Webseite aufgerufen werden. Dadurch können ältere Skripte zusammen mit brandneuen im gleichen Kontext agieren. Das ist Notwendig, wenn eine Webseite neu erstellt wird und alte Skripte neben den Neuen jQuery-Algorithmen erhalten bleiben sollen.

Leider hinterlässt die Bibliothek einen kleinen Nachgeschmack: Es kann die Performance der Webseite enorm drosseln, wenn man sich als Entwickler nicht ausreichend informiert. Viele Funktionen, wie der .find()-Befehl können störende Ruckler bei Ressourcen-Schwachen Rechnern hervorrufen. Das kann dazu führen, dass der Verbraucher die Webseite genervt vor Abschluss einer Conversion verlässt.

Allerdings überwiegen die Vorteile gegenüber den Nachteilen. Durch die Erleichterung vieler gängiger Algorithmen und die Vereinfachung der Syntax und Logik ist jQuery eines der am häufigsten anzutreffenden Bibliotheken im Web.

Solltest Du dennoch darauf bestehen Deine Web-Inhalte mit JavaScript zu dynamisieren, findest du viele Alternativen auf YouMightNotNeedJquery.com. Diese Ansammlung an Algorithmen ersetzen viele einfache jQuery-Befehle, die Du Dir nur kopieren und anpassen musst, um das gleiche Ergebnis zu erhalten.

Bootstrap

"Mobile First" sagt Google nicht nur, sondern schreit es mittlerweile lauthals raus. Der Suchmaschinen-Gigant meint damit, dass Webseiten die keine mobile Darstellung besitzen, weniger gut bis gar nicht auf den Suchmaschinen-Ergebnisseiten (SERPs) auftauchen. Dieses Verhalten wird einem Großteil der Surfer verschuldet, die mit Ihrem Smartphone Webseiten besuchen. Bereits Ende 2017 ermittelten Experten, dass Smartphone-Benutzer 80% der gesamten Web-Surfer im Jahr 2018 ausmachen werden.

Ein Webseiten-Betreiber möchte seine Inhalte nicht für die verschiedenen Darstellungsformen getrennt voneinander verwalten. Im besten Fall sollen die Inhalte einmal aufbereitet und für jedes Gerät optimal dargestellt werden.

Hier kommt Bootstrap von den Entwicklern von Twitter ins Spiel. Dank der sogenannten Responsiven Gestaltung von Elementen passen sich diese immer an die Auflösung des Browser-Fensters an. Die Breite spielt eine Größere Rolle als die Höhe, da Elemente, die nebeneinander keinen Platz mehr haben untereinander platziert werden sollen, um den Inhalt in jeder Auflösung lesbar darzustellen.

Codepalm ist ebenfalls mobil einsetzbar. Falls Du gerade an einem Desktop-Rechner sitzt kannst Du die mobile Darstellung testen, indem Du Deinen Browser einfach kleiner einstellst. Du wirst merken, dass sich die Navigation verändert und die Sidebar unter den Inhalt anordnet. Alternativ kannst du auch in den Entwickler-Werkzeugen Deines Browsers ein mobiles Gerät emulieren.

Bootstrap bietet nicht nur das responsive Verhalten, sondern liefert darüber hinaus auch noch einige Inhaltselemente, wie Tabellen oder Slider, die Du für Dein Web-Projekt verwenden kannst. In den Bootstrap Dokumentationen findest Du weitere Informationen und Anleitungen zum Einstieg der Verwendung von Responsiven Darstellungen.

FontAwesome

FontAwesome ist eine großartige, kostenlose Bibliothek für Icons, die als Schriftart auf Webseiten verwendet werden können. Mit einer CSS-Datei und mehreren SVG-Bildern ist FontAwesome eine schlanke Alternative zu Bilder-Icons, wenn Du eine große Auswahl an Symbolen benötigst.

Dank vordefinierter CSS-Klassen kannst Du die Icons nicht nur als statische Objekte platzieren, sondern mit ein paar rudimentären Animationen versehen. Darunter gibt es die Möglichkeit mehrere Icons mit wenigen Zeilen Code aufeinander zu stapeln oder das Symbol als eine Lade-Animation drehen zu lassen.

Es finden sich nicht nur generische Icons in der Datenbank wieder, sondern auch Firmenlogos, wie Facebook, YouTube, Pinterest und viele mehr. Zusammen mit der "Stapeln"-CSS-Klasse kannst Du ein hochauflösendes Icon zu Deiner Fanpage erstellen. Hier ein Beispiel zur Fanpage von Codepalm:

Ergebnis:

Seitdem die Version 5.0 der Icon-Bibliothek erschienen ist gibt es sogar die Möglichkeit den Symbolen verschiedene Gewichtungen (Normal Dünn und Fett) in der Pro-Version zu setzen. Die kostenpflichtige Version ist schon für 60$ erhältlich und bietet neben der Gewichtung weitere Icons-Sets und weitere Entwickler-Tools.

Weitere Informationen findest Du auf der Webseite von Font Awesome 5.0.

Templates und Plugins

Als Web-Entwickler einer Agentur möchte man dem Kunden schnellstmöglich das beste Ergebnis liefern. Das bedeutet, dass die Entwicklung relativ schnell abgeschlossen sein sollte, die Kosten sollten sich auf einem bezahlbaren Niveau befinden und vor allem sollte die Technologie der Webseite für Langlebigkeit ausgerichtet sein.

Damit diese 3 Faktoren eingehalten werden können, kannst Du auf bereits erstellte Ressourcen zurückgreifen. Nein, Du "cheatest" nicht, wenn Du auf bereits existierenden Code zurückgreifst. Du vereinfachst Dir Deine Arbeit und stellst Deinen Kunden zufrieden, indem Du ihm in der Rechnung eine kleinere Zahl vorlegen kannst, als andere Web-Entwickler.

Es gibt genau 2 große entscheidende Faktoren, die die Kosten einer Webseite in die Höhe treiben können: Das Design und die Funktionalität. Und für beide dieser Aspekte gibt es bereits vorgefertigte Ressourcen, die Du in vielen Fällen für wenig Geld kaufen kannst, wenn Sie überhaupt etwas kosten sollten.

Ein Template ist ein in HTML und CSS umgesetztes Design, das als Vorlage für eine Webseite, einen Newsletter oder Andere dient. Durch eigene CSS-Anpassungen kann der Entwickler die Corporate Identity (Firmenspezifische Stile wie Text und Bild) in das vorhandene Design implementieren. Eine große Quelle guter Templates findest Du auf Themeforest.net.

Durch Plugins (auch "Extensions" oder ähnliches genannt), können mehr Funktionen zu einem Projekt hinzugefügt werden. Der Programmierer installiert und konfiguriert diese Erweiterungen, damit der Webseiten-Betreiber, oder dessen Redakteure sie verwenden können. Je nach Art Deines Projekts gibt es unterschiedliche Quellen für Plugins oder Extensions. Einige davon findest du hier:

Kennst Du noch weitere gute Quellen für Code-Snippets? Hinterlasse mir einen Kommentar!

Phaser.io

In der Spiele-Programmierung im Web greift man gerne auf Frameworks zurück, die neben einfachen Eingabemöglichkeiten eine Physics-Engine, vordefinierte Klassen und einen Renderer für das Canvas verwenden. In den letzten Jahren stach dabei das Framework Phaser.io aus der Masse hervor.

Zu den Standard-Eigenschaften, die ein modernes Game-Framework besitzen sollte bietet Phaser.io ein einstellbares Kamera-Objekt, die Möglichkeit das Spiel Cross-Plattform-Fähig zu erstellen und ein Plugin-System um weitere nützliche Drittanbieter Skripte hinzuzufügen. Bei der Portierung auf mobile Geräte hilft PhoneGap.

Fortgeschrittene Benutzer schätzen auch die Möglichkeit den Core des Frameworks über GitHub immer auf den aktuellstem Stand zu halten. Zum aktuellen Stand wurde der GitHub-Code schon weit über 5.000 Mal geforkt.

Das Framework hat einen entscheidenden Vorteil gegenüber der Konkurrenz: Ein Partikel-System. Die meisten Game-Frameworks beinhalten zwar sehr gute Rendering-Möglichkeiten, jedoch ist Phaser.io eines der wenigen, die ein sehr starkes Partikel-System mitliefern.

Solltest Du Dich noch gar nicht in der Spiele-Programmierung auskennen kannst Du Dir unsere Beitragsreihe Grundlagen der Spieleprogrammierung im Web ansehen. In diesem Beitrag erklären wir Dir Schritt für Schritt die wichtigsten Grundkenntnisse in der Spiele-Entwicklung. Im Artikel verwenden wir noch kein Framework oder Canvas, da wir der Meinung sind, dass Einsteiger vor dem "richtigen" Erstellen eines Spiels zuerst die Basics und vor allem die Loop verinnerlichen sollten.

Es gibt unzählig viele Frameworks und Bibliotheken, um Dir bei der Erstellung Deiner Webseite oder Deines Programms zu helfen. Die oben genannten Beispiele sind nur wenige, aber dafür sind sie sehr einfach zu erlernen und extrem nützlich in den verschiedenen Anwendungsgebieten.