Unter das Programmieren können viele unterschiedliche Schritte fallen, in der Regel ist jedoch von Programmierung die Rede, wenn Computerprogramme mittels Quellcode erstellt werden. Dieser Teilbereich der Softwareentwicklung umfasst insbesondere das Übersetzen des Quellcodes in die Maschinensprache, wobei meist ein sogenannter Compiler zum Einsatz kommt. Es gibt heutzutage eine Vielzahl an unterschiedlichen Programmiersprachen, die zu diesem Zweck genutzt werden, unter anderem C++, Java und JavaScript, Phyton oder PHP.
Oftmals fälschlich als Programmiersprachen betrachtet werden hingegen CSS oder HTML: bei CSS handelt es sich um eine deklarative Stylesheet-Sprache, HTML wird hingegen als textbasierte Auszeichnungssprache bezeichnet.
Sowohl für Anwendungen und Applikationen aus auch in der Webentwicklung wird die Programmierung tätig. Auf diesem Weg entstehen neue Softwarelösungen mit benutzerfreundlichem Interface, aber auch Plugins und Erweiterungen von Browsern, CMS oder Shopsystemen werden diesbezüglich stetig verbessert. Die heutzutage bekannten Script- und Programmiersprachen dienen vor allem dazu, die Arbeit am Computer oder mit anderer Technik zu erleichtern. Ein Stillstand der derzeitigen Entwicklung in dieser Hinsicht ist nicht absehbar, stattdessen liegt die Vermutung nahe, dass eine stetige Weiterentwicklung erfolgen wird.
Dafür sprechen auch die Verbesserungen, die hinsichtlich Hardware und der Rechenleistung von Computern erzielt werden konnten. Zudem werden nicht nur die Programmiersprachen selbst, sondern auch deren Entwicklungsumgebungen immer vielseitiger – so ist es heutzutage beispielsweise bereits möglich, grundlegende Bausteine und Sprachelemente einfach auszuwählen und per Klick einzufügen, sodass ein manuelles Schreiben entfällt. Auf diese Weise haben auch Laien die Möglichkeit, einen verhältnismäßig einfachen Einstieg in die Thematik zu erhalten, indem sie beispielsweise auf grafische Oberflächen oder Drag&Drop-Funktionen zurückgreifen.
Mehr wissen
Was Navigationsgeräte schon lange können, können nun auch die Browser. SpeechSynthesis aus der Web-Speech-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich deine Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen.
Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es zudem möglich, Ladezeiten einer Website anhand vordefinierter Messpunkte zu ermitteln. Dank der komplexen und teils präzisen Messmöglichkeiten können Entwickler gut feststellen, an welchen Stellen innerhalb einer Anwendung es hakt.
Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG und seine Verhaltensweisen in Sachen Interaktion und Animation mittels CSS und/oder Javascript definierbar sind.
Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr leichtgewichtig daher. Die Voraussetzungen für die Installation sind so gering, dass ein günstiges Webhosting-Paket bereits ausreicht, um mit Grav zu experimentieren. Das Grav CMS benötigt keinerlei Datenbanken und kann in der Tat innerhalb von 30 Sekunden installiert werden. Grav ist so interessant, dass wir dir das CMS heute etwas näher vorstellen möchten.
Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung waren auf diese Weise völlig von sämtlichen Bildungsmöglichkeiten abgeschnitten. Das Internet ist angetreten, all das zu verändern. Heutzutage ist die Chance auf Bildung nur die Frage einer funktionierenden Netzverbindung.
In welche Richtung muss ich mich als Webdesigner und Webentwickler bewegen, wenn ich auch in einigen Jahren noch mein Stück vom Kuchen abhaben will? Diese Orientierung bietet dir unser neuestes E-Book mit dem sprechenden Titel Webdesign der Zukunft.
Zeitplanung ist unabdingbar. Mindestens einen Kalender benötigst du daher auf jeden Fall. Digital sollte er sein, damit du als Webworker oder Digitalnomade die Organisation deiner endlichen Zeit ortsunabhängig und auf verschiedenen Geräten abwickeln kannst.
Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.
Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.
Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich um das Jahr, in dem sich Progressive Web Apps aller Prognose nach endgültig durchsetzen dürften. Wenn du dich mit dem Thema bisher nicht beschäftigt hast, dann wird es jetzt höchste Zeit. Wir helfen dir dabei.
Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.
Das Thema „CMS“ ist beliebt, dabei aber in der Anwendung weit weniger kontrovers, als es bisweilen in Diskussionen den Anschein hat. Heute erfahrt ihr, welche Content Management Systeme unsere Leserinnen und Leser tatsächlich in ihrem Projektalltag verwenden.
Welches Content Management System (CMS) ist unter den Leserinnen und Lesern des Dr. Web Magazins am populärsten? Wir wollen es wissen, denn wie schon Winston Churchill sagte: „Glaube keiner Statistik, die du nicht selbst gefälscht hast.“ Die Ergebnisse werden wir nach dem 31. Januar 2018 veröffentlichen.
Mit der Einführung von HTML5 ab 2004 wurde auch die JavaScript-basierte Zeichenmethode Canvas eingeführt. Bereits seit 2001 gibt es das vektorbasierte SVG-Format, welches allerdings erst in den letzten Jahren parallel zu HTML5 ein wirklicher Erfolg wurde. Beide Formate haben ihre Vor- und Nachteile. Aber welches ist wann besser geeignet? Wo liegen die Vor- und Nachteile?
Der größte Unterschied zwischen HTML5-Canvas und SVG ist die der Auszeichnung beziehungsweise Programmierung. Per HTML5 wird letztlich nur ein einziges Element („<canvas>“) ausgezeichnet. Der komplette Inhalt der Leinwand wird per JavaScript realisiert.
Entsprechende Methoden ermöglichen es, Formen wie Rechtecke, Kreise und auch komplexe Polygone und Bögen zu zeichnen sowie miteinander zu kombinieren. Für das Aussehen – Füllfarbe sowie Konturenstärke und -farbe – wird ebenfalls JavaScript verwendet.
var leinwand = document.getElementById("leinwand");
var zeichnung = leinwand.getContext("2d");
zeichnung.moveTo(0, 0);
zeichnung.lineTo(200, 200);
zeichnung.lineWidth = 2;
zeichnung.strokeStyle = "red";
zeichnung.stroke();
Im Beispiel wird eine Linie von der Position „0, 0“ zur Position „200, 200“ gezeichnet und rot eingefärbt.
Per SVG würde dieselbe Linie über ein entsprechendes SVG-Element ausgezeichnet.
<line x1="0" y1="0" x2="200" y2="200" stroke-width="2" stroke="red" />
Obwohl das Ergebnis in beiden Fällen identisch ist, erkennt man, dass die SVG-Variante deutlich kürzer ausfällt und aufgrund der XML-Syntax für die Meisten vermutlich deutlich intuitiver auszuzeichnen ist.
Ein weiterer Vorteil im SVG-Format besteht darin, dass die Gestaltung auch per CSS erfolgen kann. Hier lassen sich einzelne Formen per ID oder Klasse einheitlich gestalten.
Bei der Auszeichnung liegt das SVG-Format also vorne. Es ist platzsparender und hat eine einfachere Syntax. Wer zudem grundsätzlich alle Inhalte auch ohne JavaScript anbieten möchte, hat mit HTML5-Canvas ohnehin schlechte Karten.
Ein weiterer großer Unterschied besteht in der Darstellung der Formate. Während HTML5-Canvas ein pixelbasiertes Format (es wird jeweils ein PNG-Bild im Browser erzeugt) ist, ist das SVG-Format vektorbasiert.
Natürlich kannst du auch per HTML5-Canvas entsprechend Grafiken für hochauflösende Displays erstellen. Aber spätestens beim Hereinzoomen werden Canvas-Zeichnungen pixelig, während SVG-Zeichnungen ihre Schärfe beibehalten.
Auch hier hat das SVG-Format die Nase vorn – zumal du auch innerhalb eines SVG-Dokumentes Bitmaps einbinden kannst.
Da das SVG-Format auch CSS unterstützt, stehen einem alle Möglichkeiten von Stylesheets zur Verfügung. Neben der einfachen Gestaltung lassen sich auch interaktive Effekte einbeziehen.
So kannst du zum Beispiel Hover-Effekte auf einzelne SVG-Formen anwenden, um diese beim Herüberfahren mit der Maus hervorzuheben, farblich zu verändern oder zu vergrößern. Auch Animationen dank der „transition“-Eigenschaft sind auf diese Weise möglich.
Da das SVG-Format auch Verlinkungen erlaubt, kannst du Formen mit einem Verweis versehen und somit aus einzelnen Formen Links erstellen.
Darüber hinaus besteht auch die Möglichkeit, SVG-Elemente per JavaScript anzusprechen und zu manipulieren.
document.getElementsByTagName("rect")[0].setAttribute("width", "200");
Im Beispiel wird ein SVG-Rechteck per JavaScript manipuliert.
Ein letzter großer Unterschied zwischen HTML5-Canvas und SVG besteht in der Geschwindigkeit, was das Rendern und somit die Darstellung der Zeichnungen im Browser betrifft. Hier hat pauschal erst einmal kein Format die Nase vorn.
Gerade bei weniger komplexen Zeichnungen kannst du den Geschwindigkeitsunterschied vernachlässigen. Aber bei komplexen beziehungsweise großen Zeichnungen werden Unterschiede deutlich.
So wird bei zunehmender Anzahl von Objekten – sowohl einfache Formen als auch komplexe Pfade – das SVG-Format langsamer. Es braucht länger um die Zeichnung zu rendern und somit darzustellen. Das Canvas-Format schneidet hier deutlich besser ab. Je mehr Objekte eine Zeichnung hat, desto performanter verhält sich HTML5-Canvas gegenüber SVG.
Anders sieht es aus, wenn man die Größe der Fläche berücksichtigt. Das SVG-Format kommt mit großen Flächen deutlich besser zurecht und rendert Elemente darauf wesentlich schneller als das Canvas-Format.
Wer also großformatige Zeichnungen einsetzen will, die vielleicht sogar seitenfüllend sind, sollte auf das SVG-Format setzen. Wer hingegen besonders komplexe Elemente rendern muss – beispielsweise komplexe Diagramme –, sollte eher das Canvas-Format nutzen.
Da es sich nur bei HTML5-Canvas um ein pixelbasiertes Format handelt, kommt Pixelmanipulation beim SVG ohnehin selten in Frage. Allerdings gibt es auch beim SVG-Format die Möglichkeit, mit verschiedenen Filtern zum Beispiel die Farbe eines eingebundenen Bitmaps zu manipulieren.
Aber an sich bietet sich vor allem HTML5-Canvas zur Pixelmanipulation an. Denn das pixelbasierte Format macht es recht einfach möglich, jedes einzelne Pixel eines Bilder über eine entsprechende Funktion zu verändern.
Auf diese Weise lassen sich nicht nur statische Manipulationen realisieren, sondern auch animierte Effekte. Selbst die Echtzeitmanipulation von Videos ist mit HTML5-Canvas möglich.
So lässt sich die Farbe in einem Video – zum Beispiel per Greenscreen-Verfahren – dynamisch durch eine andere Farbe oder Hintergrundgrafik ersetzen. Dazu kannst du per JavaScript auf die Frames eines Videos zugreifen und in diesen beispielsweise eine Farbe durch ein anderes Bild ersetzen.
Die genannten Beispiele zeigen, dass sowohl HTML5-Canvas als auch das SVG-Format jeweils ihre Vor- und Nachteile haben. Bei der Kombination verschiedener hier vorgestellter Möglichkeiten muss man sicher auch immer im Einzelfall abwägen, welches Format die bessere Wahl ist.
Aber grundsätzlich lässt sich Folgendes sagen: Wenn es um statische Zeichnungen geht, bei denen es vor allem auf Skalierbarkeit und die Darstellung auf großer Fläche ankommt, ist das SVG-Format die richtige Wahl.
Bei komplexen Darstellungen, die permanent neu berechnet werden müssen – Echtzeitdaten einer Wetterkarte oder ein Video zum Beispiel –, ist HTML5-Canvas performanter und daher vorzuziehen.
Bootstrap ist nicht umsonst so populär. Aber, wenn du denkst, es gibt nichts besseres, schau dir mal Propeller an.
Dieser Tage entstand eine hitzige Debatte, als Chris Coyier von CSS Tricks sich erlaubte, darauf hinzuweisen, dass die Zielerreichung (das What) wichtiger ist als das Tool, mit dem das Web-Angebot realisiert wurde (das How). Natürlich hat er Recht.