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
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
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.

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

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.

Kategorien
Boilerplates & andere Tools Design Essentials Freebies, Tools und Templates HTML/CSS Programmierung

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.

Kategorien
Boilerplates & andere Tools Programmierung Sonstige Programmiersprachen Webdesign

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.

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung

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.

Kategorien
Boilerplates & andere Tools Programmierung

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.

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

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 Entwickler-Tools an und entscheide danach selbst.

Titel: HTML Table Generator

Der HTML Table Generator baut für dich Standard-Tabellen mit div oder table Tags. Eine interaktive Preview zeigt dir, ob du auf dem richtigen Weg bist.

div-table
Erstellt von: divtable
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Hammer

Hammer bringt Gesten-Support und minimiert die Klickverzögerung.

hammer
Erstellt von: freie Kontributoren
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Kute.js

Diese Animations-Engine ist nicht nur zu schicken, sondern auch zu schnellen Resultaten zu gebrauchen. Fallbacks bringt sie überdies mit.

kute
Erstellt von: thednp
Lizenz: MIT-Lizenz, also kostenlos verwendbar.

Titel: Bless CSS

Bless CSS bringt Lösungen für den schlechtesten Browser der Welt. Du weißt schon, welchen ich meine.

bless
Erstellt von: Paul Young
Lizenz: mitgelieferte Lizenz beachten

Titel: Patterns Lib

Die Patterns Library liefert eine Sammlung fertiger Interaktions-Patterns, die du mittels CSS-Klassen und HTML-Attribute an den Start bringst.

patterns
Erstellt von: patternslib
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: CSSNano

Wenn dein Stylesheet so klein wie möglich sein soll, dann ist CSSNano für dich das richtige. Es komprimiert nicht nur, sondern entfernt auch alte Vendorprefixe und mehr.

cssnano
Erstellt von: ben-eb
Lizenz: kostenlos verwendbar unter MIT-Lizenz

Titel: Egjs

Egjs bietet ein Bündel an interaktiven UI-Elementen mit schönen Effekten.

egjs
Erstellt von: Naver Corp
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Universal Collection of Transitions

Mit den GLSL-Transitions zauberst du fantastische Bildeffekte.

glsl
Erstellt von: Glslio
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Sprite Spirit

Wenn du etwas Leben in die Bude bringen willst, dann ist dieser Service was für dich. Wirf ihm eine Handvoll Sprites zu und es baut eine komplette Animation für dich.

sprite-spirit
Erstellt von: Elior Shalev Tabeka
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Bootstrap 4 Cheat Sheet

Bootstrap 4 ist kurz vor da. Dieses Cheat-Sheet hilft dir beim Einstieg.

bootstrap4-cheat-sheet
Erstellt von: Bootstrap Creative
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Kategorien
Boilerplates & andere Tools Developer-News JavaScript & jQuery Programmierung

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.

Kategorien
Boilerplates & andere Tools Inspiration Programmierung Showcases

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 mit CSS-Styles, JavaScript-Bibliotheken und modernen HTML-Funktionen rumspielen, um das perfekte Formular zu erstellen.

feedback-1213042_640

Glücklicherweise gibt es eine Reihe von guten und verlässlichen vordefinierten Lösungen im Internet, die dir einen Teil der Arbeit abnehmen oder zumindest einen perfekten Start bereiten können. So sparst du viel Zeit. Heute haben wir 20 Codepens versammelt, die klare, elegante und problemlose Kontaktformulare enthalten. Einige von ihnen können und müssen schnell oder auch umfangreich angepasst werden, während andere mit ihren speziellen Layouts oder begleitenden Effekten ihren Platz in deinen Projekten auch ohne größere Änderungen finden können.

E-Formular aus deutscher Herstellung

Schön dezentes, DSGVO konformes kostenloses Formular
Erstellt von: Michael Knothe, kontaktformular.com

Fullscreen Form Interface

Full-screen contact form
Erstellt von: Mary Lou

Responsives Kontaktformular mit Karte

contact form with map
Erstellt von: Lentie Ward

Responsives Kontaktformular im Material Design

responsive material design form
Erstellt von: Nikhil Krishnan

Simples Kontaktformular

clean contact form
Erstellt von: nick haskell

Elegantes Kontaktformular

elegant contact form
Erstellt von: Mark Murray

Responsives Kontaktformular mit Bootstrap 3 und Google Maps API

responsive contact form
Erstellt von: Craig Wheeler

Sass Flip Kontaktformular

sass flip form
Erstellt von: Danny Beton

Klassisch inspiriertes Kontaktformular

vintage form
Erstellt von: David Fitas

Einfaches Flat-Kontaktformular

flat contact form
Erstellt von: Zach Saucier

Kontaktformular

envelope style form
Erstellt von: Iulian Savin

Drop-Down Kontaktformular

drop-down form
Erstellt von: Greg Sweet

Kontaktformular HTML + CSS

diagonal style form
Erstellt von: Trevor L.J.M. McIntire

Feedback-Formular

light contact form
Erstellt von: CrocoDillon

Minimalistisches Formular

minimalistic form
Erstellt von: Matheus Marsiglio

Responsives Formular im Flat Style

flat responsive form
Erstellt von: And Studio

Persönliche Website

contact form in personal website
Erstellt von: Tim Robert-Fitzgerald

Kontaktformular im Tafel-Look

blackboard form
Erstellt von: Greg Sweet

CSS only, Responsives Modalformular

responsive modal form
Erstellt von: Daryll Doyle

Kontaktformular

contact form animation
Erstellt von: Peter Kullmann

Maritimes Kontaktformular

under the sea form
Erstellt von: Geert-Jan Hendriks

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Webdesign

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 möglich. Die Erweiterung „Snap.SVG Animator“ erweitert den Funktionsumfang von Animate CC genau um diese Möglichkeit.

snapsvg_framework
Das Framework Snap.SVG

Snap.SVG sorgt für vektorbasierte SVG-Animationen

Das Besondere an Flash war immer, dass es vektorbasierte Grafiken und Animationen in den Browser brachte. Das war in Zeiten vor SVG nicht möglich. Abgesehen von Schriften kamen nur pixelbasierte Formate wie JPEG und GIF zum Einsatz. Mit der Einführung von HTML5 wurde auch das XML-basierte SVG-Format beliebter, welches ähnlich wie Flash vektorbasiert und animierbar ist.

Damit hat das SVG-Format einen entscheidenden Vorteil zu HTML5-Canvas, welches Animationen nur pixelbasiert ermöglicht. Gerade beim Heranzoomen wird der Nachteil dieses Formates zu SVG deutlich. Da Animate CC grundsätzlich vektorbasiert ist, bietet es sich freilich an, vektorbasierte Ausgabeformate bereitzustellen.

Da SVG-Animationen jenseits der CSS3-Eigenschaften „transition“ und „animation“ per JavaScript realisiert werden, gibt es zahlreiche Frameworks, die dich dabei unterstützen, komplexe animierte SVGs zu erstellen. Eines der bekanntesten Frameworks ist Snap.SVG. Dieses stellt dir zahlreiche Methoden zur Verfügung, mit denen du Formen erstellst und diese auf unterschiedliche Art und Weise animierst.

Dabei erlaubt dir Snap.SVG eben auch interaktive Animationen, die per Klick oder Tap ausgelöst werden. Wer einen Blick in die Dokumentation von Snap.SVG wirft, stellt schnell fest, wie umfangreich das Framework ist. Mit der Animate-Erweiterung „Snap.SVG Animator“ wird die einfache Handhabung von Adobe Animate CC mit der komplexen Vielfalt von Snap.SVG kombiniert.

Kostenlose Erweiterung installieren und loslegen

Zunächst einmal musst du die kostenlos verfügbare Erweiterung „Snap.SVG Animator“ installieren. Du findest diese auf der Website der Adobe Add-ons. Die Erweiterung ist sowohl für die Windows- als auch für die Mac-Version von Adobe Animate CC verfügbar. Du installierst die Erweiterung entweder manuell oder direkt über die Creative Cloud.

snapsvg_assons
Erweiterung für Animate CC

Sobald „Snap.SVG Animator“ installiert ist, findest du in Animate CC den neuen Dokumenttyp „SnapSVGAnimator“. Du wählst also nicht nur zwischen HTML5, WebGL und ActionScript aus, sondern erhältst nun auch die Möglichkeit, ein SVG-Dokument anzulegen. Wie bei den anderen Dokumenttypen ist ein nachträglicher Wechsel nicht möglich.

snapsvg_dokumenttyp
Neuer Dokumenttyp in Animate CC nach Installation der Erweiterung

Du musst dich also zu Beginn eines neuen Projektes entscheiden, in welchem Format du entwickeln und gestalten möchtest. Anschließend arbeitest du ganz wie gewohnt mit Animate CC. Das heißt, du legst Formen an, konvertierst sie in Symbole und erstellst Animationen.

Aktionen erstellen per JavaScript

Dabei besteht die Möglichkeit, mit „Snap.SVG Animator“ interaktive SVG-Animationen zu erstellen. Während dir bei HTML-Canvas und WebGL Codefragmente zur Verfügung stehen, die du relativ einfach in dein Aktionen-Fenster ziehst, gibt es solche Fragmente beim Typ „SnapSVGAnimator“ nicht. Allerdings steht eine übersichtliche API mit den wichtigsten Methoden bereit.

So definierst du eine Klick-Aktion für eine Symbolinstanz sehr einfach.

this.beispiel.click(function() {
  this.beispiel.play();
});

Im Beispiel wird beim Klick auf die Instanz „beispiel“ diese abgespielt.

SVG-Dokument veröffentlichen

Das Veröffentlichen deines SVG-Dokumentes ist ebenfalls einfach und unkompliziert. Du gibst eine Ausgabedatei an und hast die Möglichkeit, über die erweiterten Einstellungen die Komprimierung der auszugebenen Dateien zu beeinflussen.

Die Ausgabe enthält neben einer HTML- und einer JSON-Datei zwei JavaScript-Dateien. Diese beinhalten das Snap.SVG-Framework, sodass alle notwendigen Dateien von Animate CC beziehungsweise der Erweiterung generiert werden und zur Verfügung stehen.

(dpe)

Kategorien
(Kostenlose) Services Apps Boilerplates & andere Tools CMS Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials Webdesign WordPress

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 Minuten und lies den folgenden Artikel.

Codester: Marktplatz für Designer und Entwickler

Codester: Ein kurzer Rundgang

Skript-Verzeichnisse waren eine große Sache Ende der Neunziger und noch zu Beginn des neuen Jahrtausends. Ich kann mich noch gut an das bekannteste von ihnen, HotScripts.com, erinnern. HotScripts war die Lösung für jede Aufgabe, dieirgendwas mit Programmierung zu tun hatte. Später wurde HotScripts dann von einem bekannten Websiteaufkäufer aufgekauft. Danach passierte leider nicht mehr viel. Und auch, wenn sie heute noch existieren, befinden sie sich seitdem in einem Stillstand. Besuch die Seite besser nicht, wenn du sie noch von früher kennst. Das würde nur deine nostalgischen Erinnerungen an vergangene Tage zerstören.

Ich bin im letzten Jahrzehnt keinem ähnlichen Service begegnet. Obwohl es keinen Mangel an Marktplätzen für Designer gibt, müssen Entwickler sich mit einer anderen Wahrheit auseinandersetzen. Aber: im Sommer diesen Jahres hat eine kleine Gruppe motivierter Entwickler eine Lösung für dieses Problem ersonnen. Willkommen, Codester.com, ein schnell wachsender, würdiger Nachfolger des vorher erwähnten Dinosauriers.

Codester spricht sowohl Designer als auch Entwickler an. Dabei haben jedoch alle angebotenen Elemente, zumindest zur Zeit, einen entwicklungsorientierten Touch. Nehmen wir die Grafikabteilung als Beispiel. Hier stellt Codester Benutzeroberflächen, Spiele-Code und Mockups neben Icons und Logos zur Verfügung. Das ist keine Spielzeugkiste für selbstverliebte Designer. Hier will keiner eine freundliche Bestätigung seines guten Geschmacks erheischen. Hier geht es darum, Arbeit zu erledigen. Dass Codester im Moment nicht allzu viele Dinge im Angebot hat, solltest du nicht als allzu großen Nachteil empfinden. Sie haben immerhin gerade erst angefangen.

Codester: Marktplatz für Designer und Entwickler

Wenn du dir die Hände wirklich schmutzig machen möchtest, wühl dich durch die Skript & Code-Abteilung, in der du Lösungen in PHP, JavaScript, Ruby, Python, Java, C, C++, C# und VB.Net finden wirst. Aktuell hat zwar nur die PHP-Kategorie eine nennenswerte Sammlung an Skripten anzubieten, aber die Leute hinter Codester arbeiten aktiv daran, das Portfolio schnell zu erweitern.

Wenn du ein App-Entwickler bist, solltest du den Bereich Mobile Apps besuchen, wo du vielleicht genau den einen Code-Schnipsel für iOS, Android, Unity, Corona oder Titanium findest, nach dem du die letzten fünf Nächte gesucht hast.

Heutzutage sind zwar einzelne Skripte immer noch nützlich und gefragt, aber die größere Nachfrage kommt von Entwicklern aus der CMS-Branche. Es ist sicherlich möglich, jedes gegebene Skript so zu verändern, dass es mit jedem CMS funktioniert. Das kann ich für WordPress fast uneingeschränkt bestätigen. Allerdings ist es effizienter, sich direkt für ein Skript-Modul, Plugin, Erweiterung, oder wie auch immer die Namenskonventionen deines CMS sein mögen, zu entscheiden und es in dem Umfeld, für das es gemacht wurde, zu benutzen.

Codester ist derselben Meinung und bietet eine Vielfalt an Plugins für WordPress, Joomla, Drupal, Magento, Prestashop, osCommerce, X-Cart und Opencart an. Themes, auch wenn sie sich mehr auf das Design beziehen, kombinieren Form und Funktion, um letztendlich die gewünschte Nutzererfahrung zu erreichen. Daher ist es konsequent, dass Codester einen separaten Abschnitt mit Themes, verfügbar für WordPress, Magento, Joomla, Drupal, Prestashop, Opencart, Muse, Tumblr und Ghost unterhält. Arbeitest du ganz ohne CMS, ist vielleicht die Sammlung von HTML-Templates am gleichen Ort interessant.

Codester: Vom Suchen und Finden

Codester ist auf Wachstum ausgerichtet und direkt so gebaut worden, dass es auch mit großen Beständen virtuos umgehen kann. Zurzeit kannst du einfach durch die Hauptabschnitte und Kategorien browsen. Darunter ist keine einzige, die man nicht innerhalb von ein paar Minuten durchscrollen kann. Sollte das Wachstum aber mit konstantem Tempo voranschreiten, wird sich das in wenigen Monaten deutlich verändert haben. Das Team hat vorgesorgt und den Service so strukturiert, dass es auch dann noch leicht sein wird, das benötigte Werkzeug zu finden, wenn es tausende Skripte, Themes oder was auch immer zu filtern gibt.

Codester: Marktplatz für Designer und Entwickler

Der offensichtlichste Weg, eine Lösung auf Codester zu suchen, ist es, die obere Suchleiste auf der Startseite zu verwenden. Gib deinen Suchbegriff ein und schau, was Codester dazu findet. Das ist nicht sehr effizient, sobald du bereits in der Lage bist, deine Parameter etwas einzuschränken, was bei einem typischen Entwicklungsprojekt höchstwahrscheinlich der Fall sein wird. Codester arbeitet nicht mit zusätzlichen Tags, um bestimmte zusammengehörende Inhalte zu gruppieren – zumindest nicht von der Suchleiste aus.

Daher ist der empfehlenswertere Weg an die Inhalte zu komme,n das Browsen durch die Kategorien. Sobald du eine beliebige Kategorie auswählst, wird dir ihr Inhalt in einer Rasterübersicht präsentiert. Von diesem Raster aus, kannst du die Detailseite eines jeden Elementes öffnen, um zu weiteren INformationen zu gelangen. Die wichtigsten Informationen findest du aber bereits direkt im Übersichtsgrid. Dort kannst du den Preis, ein Vorschaubild, eine kurze Beschreibung und die Zielplattform sehen. Videos und Live-Previews sind auch über das Raster zugänglich. Also kannst du deine Wahl schnell auf ein oder zwei Angebote einschränken, die dich wirklich interessieren.

Codester: Marktplatz für Designer und Entwickler

Mit einem Klick auf die Vorschau des Elements öffnet sich die Detail-Seite. Diese erfüllt das, was ihr Name verspricht. Hier findest du sämtliche wichtigen Information zum Produkt. Die Beschreibungen sind ausführlich, Screenshots gibt es wie Sand am Meer. Hier befindet sich auch eine Box mit zusätzlichen Tags, die das jeweilige Tool zusätzich kategorisieren. Ein Klick auf einen der Tags, öffnet ein weiteres Grid, das alle Produkte aus Codesters Portfolio zeigt, denen dasselbe Tag zugeordnet wurde.

Die Detail-Seite ist in vier Segmente eingeteilt, bei denen die Übersicht die Standardansicht nach dem Öffnen der Seite ist. Es gibt Tabs für Bewertungen, Support und FAQ. Der Support-Tab bietet eine direkte Support-Möglichkeit, ähnlich eines Kommentarbereiches in einem CMS. Jeder mit einem Account kann Fragen stellen, während nur tatsächliche Käufer eines Produktes Bewertungen zu diesem Produkt veröffentlichen können. Ein FAQ-Bereich beantwortet schon mal die häufigsten Fragen, um den Support-Bereich zu entlasten.

Codester: Marktplatz für Designer und Entwickler

Share-Buttons erlauben es dir, Codester-Inhalte auf Facebook, Twitter, Google+, Pinterest, LinkedIn oder per E-Mail zu teilen. Ein Partnerprogramm ist jedem zugänglich und bietet 10 Prozent Kommission für jeden Käufer, der auf deine Empfehlung hin gekauft hat.

Codesters Lizensen

Die Kosten der einzelnen Elemente variieren stark, die Lizensen aber nicht. Zur Wahl steht jeweils die reguläre und die erweiterte Lizenz. Die (günstigere) reguläre Lizenz erlaubt, das gekaufte Produkt in einem deiner Projekte, ob privat, kommerziell oder für einen Kunden, zu verwenden. Die erweiterte Lizenz bietet dasselbe, mit der Ausnahme, dass das Produkt bei dieser Lizenz für eine unbegrenzte Anzahl von Projekten benutzt werden kann. Du darfst lediglich die Produkte nicht als solche verkaufen, aber das sollte ohnehin selbstverständlich sein.

Codester: Verkaufe Deine Arbeit

Wie man es von einem Marktplatz erwartet, bietet Codester keine eigenen Produkte an, sondern arbeitet als eine Art Mittelsmann für talentierte Entwickler und Designer, die daran interessiert sind, ihre Skripte, Plugins, Themes, Quellcodes an die Welt zu verkaufen. Hier mitzumachen ist ganz einfach.

Codester hat sehr wenige, dabei sehr gerechte Bedingungen für Verkäufer. Verkäufer verdienen 70 Prozent von jedem Kauf. Es gibt keine Mindestanzahl an Verkäufen, ebenso keine Mindestmenge an aufgelaufenen Beträgen, bevor man eine Auszahlung anfordern kann, nichts. Die Bezahlung erfolgt über PayPal oder Wire am Ende jeden Monats. Es gibt keine zusätzlichen Gebühren oder andere Haken und Ösen.

Codester: Bild dir deine Eigene Meinung

Mir gefällt das Projekt. Codester ist eine gut gestaltete, sorgfältig geschriebene Marktplatzumgebung mit Fokus auf Entwickler und das ist eine gute Sache an sich. Codester braucht viel mehr Beteiligung durch die Community, sei es durch mehr Angebote in den verschiedenen Kategorien oder mehr Interaktion mit den bereits existierenden Angeboten. Hier kommst du ins Spiel. Schau dir Codester an und mach dir ein eigenes Bild. Unterstütz es, wenn es dir gefällt.

Kategorien
Boilerplates & andere Tools Design Essentials HTML/CSS Programmierung Responsive Design Webdesign

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 Links und Ressourcen, die dich schnell mit den benötigten Elementen versorgen, sehr willkommen. So baust du dir einen Werkzeugkasten auf, der immer weiter gefüllt werden kann. Der folgende Artikel könnte ein Teil dieses Kastens sein.

websitesfreebootstrap-teaser_DE

Wenn du auf der Suche nach ein paar gutaussehenden, professionell angefertigten Bootstrap-Schablonen bist, die entweder als Startpunkt für eine weitere Umwandlung zu einem CMS-Theme, oder schnell individualisiert und angepasst als eine simple, dennoch funktionelle Webseite benutzt werden können, dann ist unsere Liste sicherlich hilfreich. Heute haben wir 15 Ressourcen mit kostenlosen Bootstrap-Themes zusammengestellt.

BootstrapZero

BootstrapZero
Features: Bootstrap-Themes, Starter-Themes, zugängliche Vorlagen

ThemeForces

themeforces
Features: Bootstrap-Themes, WordPress-Themes

GrayGrids

graygrids
Features: Webseiten-Vorlagen, Verwaltungsthemes

UniqueCrown

unique crown
Features: zugängliche Vorlagen

The Bootstrap Themes

the bootstrap themes
Features: Startseiten, Portfolio-Vorlagen

Graphberry

graphberry
Features: Startseiten, Portfolios

ShapeBootstrap

shape bootstrap
Features: Verwaltungs- und Firmenschablonen, WordPress-Themes, Joomla-Vorlagen

Bootswatch

bootswatch
Features: viele verschiedene lebhafte Themes

Start Bootstrap

start bootstrap
Features: Einseiter, Startseiten, Portfolio-Vorlagen

Design Bootstrap

design bootstrap
Features: Portfolios, Themes, Codeschnipsel

Template Garden

template garden
Features: Vorlagen für Multipage-Websites, Portfolios

WebThemez

webthemez
Features: verschiedene Bootstrap-Vorlagen

W3 Layouts

w3 themes
Features: enorm viele verschiedene Bootstrap-Themes und HTML-Vorlagen

Bootstrap Taste

bootstrap taste
Features: zugängliche Bootstrap-Themes

Black Tie

blacktie
Features: kostenlose und erstklassige Bootstrap-Vorlagen und WordPress-Themes

Wenn ihr noch andere zuverlässige Ressourcen kennt, die Entwicklerkollegen helfen können, teilt sie mit uns im Kommentarbereich.

(dpe)

Kategorien
Boilerplates & andere Tools HTML/CSS Responsive Design

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 ihr diese Probleme nicht. Wir haben uns das Angebot daraufhin einmal angeschaut.

ink-newsletter-teaser_DE

HTML-E-Mails sind leider immer noch eine Welt für sich. Da gibt es eigene Gesetze und Regeln, Techniken und Tricks, und trotzdem gibt es dann immer noch mindestens einen Kandidaten, der die E-Mail nicht korrekt anzeigen mag. Oft ist das ausgerechnet der Client, der beim Kunden zum Einsatz kommt. Die Cross-Browser-Ärgernisse vergangener Jahre erscheinen dagegen wie das kleinere Übel (man stelle sich einmal vor, für 50 verschiedene Internet Explorer optimieren zu müssen). Hinzu kommt die mobile Nutzung mit der Anforderung, die E-Mails auch noch responsive zu gestalten.

ink2

Ink möchte diese Probleme lösen. Dazu bietet es uns (wie Bootstrap, Foundation und andere Frameworks für die Webseiten-Gestaltung) ein Gerüst an, welches mit eigenen Inhalten, Farben und einem Logo individualisiert werden kann. Dank einigen vorhandenen Vorgaben können wir sicher gehen, am Ende eine HTML-E-Mail zu erhalten, die unkompliziert funktioniert. Wenige HTML-Kenntnisse reichen dazu aus.

Wer zuvor die schon vorhandenen E-Mail-Templates im Browser als Vorschau sehen möchte, besucht die entsprechende Templates Built-Seite, wobei die jeweiligen Umsetzungen als Screenshots in zahlreichen Versionen präsentiert werden, getrennt nach Desktop-, mobilen und Web-basierten Anwendungen. Generell sollte der erste eigene Test in Outlook erfolgen. Denn das ist auf jeden Fall der schwierigste Gegner. Nach dem Hinzufügen eigener Styles wird natürlich weiter getestet, wobei der Anbieter dazu eine Empfehlung für den kostenpflichtigen Dienst Litmus ausspricht.

ink3

Ink ist Open Source, bringt eine ausführliche Dokumentation mit und bietet einige durchaus nennenswerte Features. So hat es ein eigenes Gridsystem, CSS-Klassen zur Sichtbarkeit (um gezielt zu bestimmen, in welchen Klienten, welche HTML-Elemente angezeigt werden), sowie Buttons, die reagieren, falls ein E-Mail-Empfänger Bilder standardmäßig deaktiviert hat. Ergänzend ist das Ink-Inliner-Tool gedacht, um hinzugefügte Styles schnell so umzusetzen, dass auch wirklich die größte Anzahl an Klienten bedient werden kann. Eine gute Basis also, um sicher zu einem HTML-Newsletter zu kommen, der wie gewünscht ankommt.

(dpe)