Kategorien
Boilerplates & andere Tools Programmierung

HTML5: Texte vorlesen lassen mit SpeechSynthesis

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.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing

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.

Kategorien
Apps Bilder & Vektorgrafiken bearbeiten Design Freebies, Tools und Templates HTML/CSS Icons & Fonts Plugins Programmierung Responsive Design

SVG für alle: Icons, Tools und andere Ressourcen

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.

Kategorien
CMS Essentials Freebies, Tools und Templates Programmierung

Grav CMS: Blitzschnell, einfach und modern

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.

Kategorien
(Kostenlose) Services Essentials Fortbildung Inspiration Programmierung Showcases Tutorials

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

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.

Kategorien
Design Dr. Web-Ratgeber Essentials Exklusiv bei drweb.de Fortbildung Programmierung Responsive Design UI/UX Webdesign

Brandneu: Webdesign der Zukunft (E-Book)

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.

Kategorien
Apps E-Business Workflow

Organisiert bleiben: Die 14 besten plattformübergreifenden Kalender (nebst Apps)

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.

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung Responsive Design UI/UX

Atomic Design: So gestaltest du deine Website modular

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.

Kategorien
Design JavaScript & jQuery Programmierung UI/UX

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

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.

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Was sind Progressive Web Apps und wieso sollte dich das interessieren?

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.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

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.

Kategorien
CMS Essentials Exklusiv bei drweb.de Programmierung

Diese CMS nutzen die Leser(innen) des Dr.Web-Magazins im Alltag

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.

Kategorien
CMS Essentials Exklusiv bei drweb.de Programmierung

Welches CMS verwendest du für deine Web-Projekte?

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.

Kategorien
Programmierung

HTML5-Canvas oder SVG?

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?

JavaScript gegen XML-Syntax

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.

Pixel gegen Vektoren

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.

Interaktionen und Effekte

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.

Geschwindigkeit

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.

Pixelmanipulation

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.

Fazit

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.

Kategorien
Boilerplates & andere Tools Design Programmierung Responsive Design

Propeller: Bootstrap im Material Design

Bootstrap ist nicht umsonst so populär. Aber, wenn du denkst, es gibt nichts besseres, schau dir mal Propeller an.

Kategorien
Boilerplates & andere Tools Design IMHO Programmierung

Webentwicklung in Zeiten der Tech-Taliban

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.