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.
Kategorie: Boilerplates & andere Tools
Boilerplates nennen sich die einzelnen Textbausteine, die eine stets gleichlautende Textpassage darstellen. Sie kommen beispielsweise am Ende einer Pressemitteilung vor, allerdings werden sie abseits dessen auch als HTML5-Element verwendet. Dort bietet es gerade für neue Projekte eine große Fülle an Codeschnipseln, die das Erstellen der Homepage vereinfachen und in der CSS.htaccess-Datei verwendet werden.
Immerhin zwei Jahre Entwicklung hat das Template Boilerplate hinter sich und wurde von Paul Irish erstellt, dessen Ziel es war, möglichst viele Best-Practice-Lösungen einzelner Web-Entwickler in einem einzigen Paket zusammenzufassen. Boilerplate lohnt sich insofern, da die heutigen Anforderungen an Websites immer höher liegen: so sollen sie unter anderem performant sein, Barrierefreiheit bieten, browserübergreifend funktionieren und möglichst auch noch auf dem Smartphone dargestellt werden können. Das Boilerplate stellt in dieser Hinsicht eine sinnvolle Basis dar und bietet ein Template, welches all dies und noch mehr gewährleisten kann. Boilerplate kommt in zwei Versionen daher: eine davon ist dokumentiert und enthält Verweise auf zusätzliche Informationen, die andere ist hingegen für den echten Einsatz gedacht.
Abgesehen von Boilerplate gibt es außerdem noch eine ganze Reihe weiterer nützlicher Tools, die bei der Website-Erstellung hilfreich sein können. Unter anderem bieten sich dafür bereits kleine Apps auf dem Smartphone an, aber auch Frameworks sowie besondere Entwicklertools für den Browser können eine sinnvolle Ergänzung bei der täglichen Arbeit sein. Ebenso gibt es passende Tools, die bei der Texterstellung helfen oder einfach als Hilfe zum Einstieg in die Thematik dienen.
Mehr wissen
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.
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.
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.
Perfekt für Webentwickler: Die Front-End Checklist sorgt für Code-Qualität
Das Abarbeiten von Checklisten hilft nachgewiesenermaßen dabei, die Qualität dessen zu verbessern, für das die jeweilige Checkliste entworfen wurde. Die Front-End Checklist von David Dias widmet sich dem Thema Webentwicklung und lässt keine Aspekte vermissen.
Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source
UI-Kits gibt es viele, auch kostenlose. Shards von Designrevision ragt dennoch aus der Masse, weil es nicht nur kostenlos, sondern auch ausgesprochen ansehnlich und modern ist.
Hologram: Kostenlose Mac-App für den geschmeidigen WebVR-Einstieg
Freelancer, die ihr Geld mit Kundenprojekten verdienen, haben wenig Zeit für brandneue Technologien. Mit Hologram kannst du einen Blick auf WebVR werfen, ohne dabei ganze Monatseinkommen zu verlieren.
Mavo: Web-Apps ohne Programmierung, nur mit HTML/CSS
Mit Mavo kannst du Web-Apps erstellen, die Daten speichern und verarbeiten, ohne dass du dazu programmieren können müsstest. Mavo ist eine Erweiterung zu HTML und sehr einfach zu erlernen.
Boilrplate: Entwicklerzentrale für rationelle Projektbearbeitung
Ohne Boilerplates und Frameworks ist die Entwicklertätigkeit nur noch schwer vorstellbar. Mittlerweile haben wir uns doch alle an den Einsatz dieser mehr oder weniger schlanken Projektbeschleuniger gewöhnt. Das Problem ist nur, die Übersicht zu behalten.
Januar 2017: 10 nützliche Tools für Webentwickler
Der Alltag hat dich fest im Griff? Routine ist natürlich nicht immer schlecht. Sie lässt sich sogar stetig optimieren. Die zehn Tools, die wir dir heute vorstellen, helfen dabei. Mit dem richtigen Werkzeug macht sogar Spaß, was du als letztes damit assoziiert hättest, etwa das Aufbauen von Tabellen. Glaubst du nicht? Schau dir unsere zehn… Januar 2017: 10 nützliche Tools für Webentwickler weiterlesen
Libraries.io: Neue Suchmaschine für Open-Source-Projekte
Libraries.io ist ein neues Projekt für Webdesigner und Entwickler. Es hilft dir dabei, Bibliotheken, Module und Frameworks aus dem Open-Source-Ozean zu fischen.
20 Codeschnipsel für moderne Kontaktformulare
Ein paar benannte Textfelder und ein deutlicher Call-to-Action am Ende – genau so sieht ein gewöhnliches Kontaktformular aus. Na ja, das kann ja kein Problem sein. Macht man mit links. Freu dich nicht zu früh, es gibt einige Stolperfallen. Soll dein Feedback-Formular responsiv, angetrieben durch Bootstrap oder komplett benutzerdefiniert sein? Du wirst auf jeden Fall… 20 Codeschnipsel für moderne Kontaktformulare weiterlesen
Mit Adobe Animate und Snap.SVG animierte SVGs erstellen
Mit Animate CC hat auch Adobe das Ende von Flash eingeläutet. Zwar unterstützt das umbenannte Animationsprogramm nach wie vor Flash, aber der Schwerpunkt liegt auf HTML5 und WebGL. So entscheidest du vor jedem neuen Projekt, ob du eine Animation per HTML5-Canvas oder per WebGL erstellen möchtest. Animierte SVGs waren mit Animate CC bislang allerdings nicht… Mit Adobe Animate und Snap.SVG animierte SVGs erstellen weiterlesen
Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr
Heute möchte ich dir Codester vorstellen. Codester ist ein brandneuer Marktplatz für Entwickler und Designer. Hier kannst du Code Schnipsel, Skripte, Themes, Plugins und vieles mehr kaufen, um dein nächstes großes oder kleines Projekt aufzupolieren. Fertige Komponenten zu benutzen, spart Zeit und Zeit ist – wie wir alle wissen – Geld. Also nimm dir fünf… Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr weiterlesen
15 Webseiten voller kostenloser Bootstrap-Themes
„Wer suchet, der findet.“ In Kenntnis der intelligenten, nahezu allumfassenden Suchmaschine Google ist es ziemlich schwer, dieses Zitat zu bestreiten. Wenn die Zeit allerdings gegen dich spielt, wirst du um effiziente Wege, den Prozess etwas zu verkürzen, kämpfen. In diesem Fall sind Verzeichnisse, Sammlungen und Artikel mit einem schnellen Zugang zu einer Masse von hilfreichen… 15 Webseiten voller kostenloser Bootstrap-Themes weiterlesen
INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren
Schon der erste Satz auf der Website des Anbieters Ink verrät uns, was hier das Ziel ist: „Erstellen Sie schnell ansprechende Responsive-HTML-Mails, die auf jedem Gerät und in jeder Software arbeiten. Selbst in Outlook.“ Mit diesem Augenzwinker-Hinweis auf Microsofts Problemkind (in Bezug auf die Darstellung von HTML-E-Mails) soll eines gleich klar werden: mit uns habt… INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren weiterlesen