Kategorien
Design HTML/CSS

CSS Matic – „What You See Is What You Get“ für die CSS-Entwicklung

Die Zeiten, in denen CSS rein mit der Hand geschrieben werden musste, sind schon seit einiger Zeit vorbei. In den letzten Jahren konnten sich immer mehr kleine Helferlein etablieren, die einzelne Aspekte des CSS-Design visuell unterstützen. Aus Spanien kommt eine neue Web-App, die vier Teilbereiche komfortabel abzudecken versteht. Die Entwickler des Dienstes CSS Matic sind alte Bekannte.

cssmatic-homepage

Freepik.com und Thumbr.it zeichnen für CSS Matic verantwortlich

Dr. Web-Leserinnen und -Leser kennen die Suchmaschine Freepik.com. Im Sommer 2012 stellten wir den Service vor. Wir konnten Freepik mit Einschränkungen empfehlen. Positiv erschien uns die hohe Zahl gefundener Ressourcen für die verschiedenste Bedarfslagen und Desktop-Softwares. Weniger erwärmen konnten wir uns für das Konzept der Drittverlinkung. So ist es bei Freepik stets erforderlich, die Lizenz der gefundenen Ressource noch einmal gründlich auf deren Quell-Website gegen zu checken. Freepik selber hostet (zumindest in der Regel) den entsprechenden Download nicht.

freepik-startseite

Seit einigen Wochen ist das Freepik-Team sehr aktiv mit der Erstellung eigenen Contents beschäftigt. Man darf gespannt sein, ob es da nicht bald etwa zu einem exklusiven Freebie für die Leser von Dr. Web und Noupe Magazine kommen könnte ;-)

Nach eigenen Aussagen wollte der Gründer von Freepik, der Spanier Alejandro Sánchez Blanes, der Design Community etwas zurück geben für die große Unterstützung, deren er und sein Team sich in den letzten Jahren erfreuen durften. CSS Matic ist dieses Geschenk an die Community.

Ursprünglich ersonnen, um Standardaufgaben des Freepik-Teams rationeller zu gestalten, kann die Tool-Sammlung CSS Matic seit kurzem von jedermann kostenlos verwendet werden. Und in der Tat ist CSS Matic in der Lage, so manches andere Tool locker zu ersetzen. Mir persönlich gefällt dabei am besten, dass man den Werkzeugen anmerkt, dass sie einen frischen Ansatz, schon von der UI her, verfolgen. CSS-Tools gibt es immerhin einige, darunter viele, die offenbar seit Jahren von ihren Entwicklern nicht mehr angeschaut wurden.

CSS Matic – Verläufe erstellen, Rahmen gestalten, Schlagschatten definieren, Texturen entwerfen

Zugegebenermaßen ist nicht jedes Helferlein aus dem Vierkant-Portfolio CSS Matics gleichermaßen nützlich oder gleichermaßen hochwertig umgesetzt. Die Reihenfolge der Präsentation auf der Website wird der Wertigkeit der Tools in etwa gerecht.

CSS Matic – Gradient Generator

cssmatic-gradient-generator

Der Verlaufs-Generator ist mit Abstand das ausgefeilteste Tool der Sammlung. Verläufe lassen sich auf der Basis etlicher Presets oder komplett from scratch entwickeln. Dabei sind auch Verläufe über mehrere Farben möglich und werden visuell über Ankerpunkte zurecht geschoben. Der Farbraum ist wählbar, Sättigungswerte und weiteres sind anpassbar. Der fertige Verlauf kann als CSS oder sogar als Sass exportiert werden. Mitexportiert werden können auf Anforderung auch die Code-Kommentare, die etwa das Prefixing erläutern. Nützlich für Entwickler, die CSS nicht atmen.

CSS Matic – Border Radius

cssmatic-border-radius

Weit weniger aufwändig, dabei aber nicht minder nützlich, ist das Tool „Border Radius“. Dieses erlaubt die Erstellung von CSS-Rahmen, die für jede Ecke unterschiedlich, aber auch simpel rundherum einheitlich visuell definiert werden können. Der entstehende CSS-Code ändert sich bei Manipulationen live mit und kann über die Zwischenablage in das eigene Projekt übernommen werden.

CSS Matic – Noise Texture

cssmatic-noise-texture

Unter dem Punkt „Noise Texture“ schiebt man sich eine Textur auf einem farbigen oder transparenten Hintergrund zusammen, die dann als PNG mit dem entsprechenden CSS exportiert werden kann. Die Farbe des Hintergrunds, die Farbe des Rauschens, sowie Transparenzen und Dichte des Rauscheffekts kann ebenso definiert werden, wie die Pixelwerte des zu erzeugenden PNG.

CSS Matic – Box Shadow

cssmatic-box-shadow

Natürlich darf auch der Klassiker unter den CSS-Tools nicht fehlen, der Schlagschatten-Generator. Jeder Entwickler kennt mittlerweile bald ein halbes Dutzend davon. Die gute Nachricht: Der Schlagschatten-Generator von CSS Matic braucht sich nicht zu verstecken. Alle wichtigen Parameter stehen zur Konfiguration bereit. Der CSS-Code kann über die Zwischenablage auskopiert werden und berücksichtigt, wie alle anderen Tools des Kastens das auch tun, etwa erforderliches Browser-Prefixing.

Alles in allem sollte CSS Matic in der Bookmark-Liste engagierter Web Developer einen festen Platz erhalten. Man spart sich ein paar weitere Dienste. Zudem entwickelt Freepik in letzter Zeit einen Drive, der soviel Elan repräsentiert, dass es mich nicht wundern würde, wenn CSS Matic funktional noch lange nicht am Ende der Fahnenstange angekommen wäre. Insofern lohnt es sicher, den Service im Auge zu behalten.

Links zum Beitrag

  • The Ultimate CSS Tools For Developers | CSS Matic
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin

Kategorien
(Kostenlose) Services Essentials Inspiration Showcases

Favicons online erstellen mit diesen fünf praktischen Editoren

Favicons gehören seit geraumer Zeit, fast war ich versucht, „seit Menschengedenken“ zu schreiben, zur Grundausstattung einer Website. Für viele Bildbearbeitungsprogramme existieren Plugins, mit denen die Minimalsymbole erstellt werden können. Es gibt mittlerweile jedoch auch einige Online-Favicon-Editoren mit unterschiedlichen Schwerpunkten. Diese unterscheiden sich in Details recht deutlich voneinander.

X-Icon-Editor

faviconeditor_xiconeditor
X-Icon-Editor

Der X-Icon-Editor kommt mit vergleichsweise vielen Zeichenfunktionen daher. Während die meisten Editoren ausschließlich einzelne Pixel in unterschiedlicher Farbe zeichnen können, bietet der X-Icon-Editor Pinsel mit einstellbarer Kontur und Härte, sowie die Möglichkeit, Rechtecke und Ovale zu zeichnen.

Darüber hinaus gibt es eine Importfunktion für gängige Grafikformate (unter anderem JPEG, PNG und ICO). Das Favicon kann in vier Größen (16, 24, 32 und 64 Pixel Kantenlänge) exportiert werden.

Logaster

Der Favicon-Service von Logaster
Bei Logaster gibst du deinen Firmennamen und deine Branche an, und das Tool generiert automatisch dazu passende Layouts, aus denen du deinen Favoriten auswählen kannst.
Für ein schönes Favicon in der Browseradressleiste deiner Seitenbesucher brauchst du keine Photoshopkenntnisse. Logaster generiert dir ein fertiges Favicon in den Formaten .ico und .png. Das dauert keine zwei Minuten.

favicon.cc

faviconeditor_faviconcc
favicon.cc

Der Favicon-Editor favicon.cc bietet weit weniger Funktionen zum Zeichnen als der X-Icon-Editor. Es können ausschließlich Pixel in unterschiedlicher Farbe und Transparenz gezeichnet werden. Allerdings gibt es auch hier die Möglichkeit, Grafiken zu importieren und anschließend zu bearbeiten.

Das Schöne an favicon.cc ist die Live-Vorschau. Das bearbeitete Icon wird in einem Browser-Ausschnitt so dargestellt, wie es im Internet Explorer aussehen würde. Man bekommt also unmittelbar einen Eindruck davon, wie das Icon im Umfeld der Browser-UI wirkt.

Antifavicon

faviconeditor_antifavicon
Antifavicon

16 mal 16 Pixel bieten wenig Platz für Text. Der Favicon-Generator Antifavicon nutzt die 265 Pixel Fläche dennoch, um zwei Zeilen Text in einer Pixelschrift unterzubringen. Hintergrund- und Textfarbe sind für beide Zeilen einstellbar.

Zudem wird die Schriftgröße der Textmenge angepasst – zumindest in einem gewissen Umfang. Denn die Grenzen des Machbaren sind schnell erreicht.

Faviconist

faviconeditor_faviconist
Faviconist

Der Faviconist geht einen ähnlichen Weg wie Antifavicon. Auch hier wird die Iconfläche mit Text befüllt. Statt einer Pixelschrift stehen jedoch mehrere Schriftarten zur Auswahl. Bei mehr als zwei Buchstaben ist zwar nicht die Grenze des Machbaren, jedoch die des Lesbaren erreicht. Für Monogramme und Abkürzungen reicht es allemal.

Außerdem lassen sich sehr einfach Verläufe als Hintergrund, wie auch als Textfüllung erstellen. Die Icons werden in 16, 32 und 256 Pixel Kantenlänge erstellt und in einer Live-Vorschau angezeigt.

Genfavicon

faviconeditor_genfavicon
Genfavicon

Der letzte hier vorgestellte Online-Editor, Genfavicon, ist mehr Generator als Editor. Denn viele Bearbeitungsfunktionen bietet er nicht. Er ermöglicht die Konvertierung hochgeladener Grafiken ins ICO-Format. Dazu wird bei der hochgeladenen Grafik ein quadratischer Ausschnitt gewählt. Größe und Position des Ausschnittes sind frei definierbar. Dann tritt Genfavicon in Aktion. Anschließend steht der gewählte Ausschnitt als Favicon zum Download bereit. Nachteilig ist dabei, dass das Favicon nur in einer Größe exportiert werden kann, anstatt mehrere Größen in einem Favicon unterzubringen.

Fazit: Alle vorgestellten Editoren haben aufgrund ihres unterschiedlichen Funktionsumfanges ihre Stärken und Schwächen und bieten sich für verschiedene Herangehensweisen beim Erstellen und Bearbeiten von Favicons an. Mehr als eines im Werkzeugkoffer zu führen, ergibt dabei durchaus Sinn.

(dpe)

Kategorien
(Kostenlose) Services Design Essentials HTML/CSS

8+ Formulargeneratoren für die eigene (mobile) Homepage

Formulargeneratoren sind so alt wie das Netz und entstammen der Zeit der alten Geocities und anderer Selbstbau-Website-Heimstätten. Niemand der dort Aktiven hatte Ahnung von HTML, teilweise war auch der Codezugriff gar nicht möglich. So wurden Formulargeneratoren, sogar Gästebuchgeneratoren galt es zu erdulden, zur Selbstverständlichkeit. Bevor Sie jetzt denken, dass diese Dienste heutzutage völlig überflüssig wären, sollte erwähnt werden, dass die heutigen Generatoren mit denen aus grauer Vorzeit zumeist (leider nicht stets) nur noch den schlechten Ruf gemein haben. Ich habe mir einige dieser Vertreter angesehen und dabei auch vor mobilen Websites nicht halt gemacht. Erschrecken Sie nicht: auch von der üblen Sorte sind noch haufenweise am Markt…

5 Formulargeneratoren für die klassische Website

Hier werden wir sie finden, die Gespenster der Vergangenheit ;-)

Der Formular-Chef

Das erste Tool für die Erstellung von HTML-Formularen ist der Formular-Chef. Mit Hilfe dieses kostenlosen Tools können Sie ganz hundsgemeine Formulare erstellen, wie sie jeden Tag im Alltag benötigt werden. Auf der Hauptseite wird Ihnen das Tool kurz vorgestellt. Dann können Sie sich die Grundkonfiguration eines Formulars anschauen, sich über die Minimalanforderungen informieren, sowie die Beispielformulare ansehen. Bei den Beispielformularen handelt es sich um Templates. Sie suchen sich einfach einen Formulartyp aus und erhalten den entsprechenden Code kostenfrei.


Beispielformulare als Templates


Start: die Grundkonfiguration

Beim Stöbern auf der Webseite des Formular-Chef finden Sie zahlreiche weitere Informationen zu Features, aber auch Anleitungen und FAQs. Das Tool richtet sich nach meinem Verständnis vornehmlich an die Anfänger im Webdesign, respektive den DIY-Homepagebauer.

All U Want

Nicht „all you can eat“, aber trotzdem sehr nützlich, wenn es um einen kostenlosen Formgenerator geht. All U Want bietet Ihnen kostenlose Homepage-Tools für die eigene Webseite. Hier finden Sie Features für Umfragen, Gästebucheinträge, Formulare, Formmailer oder Fotoalben. Die angebotenen Features können vom Nutzer mit einem individuellen HTML-Code oder einem Link in die Homepage integriert werden. Um den Zugang zu diesen Features zu erlangen, müssen Sie sich bei dem Anbieter registrieren. Das ist kostenlos. Laut All U Want werden Ihre Daten nicht an Dritte ohne Ihr Einverständnis weitergegeben. Auch dieser Dienst ist vor allem für diejenigen hilfreich, die keine (oder keine guten) HTML-Kenntnisse haben.


All U Want: ein Überblick über die Tools

Frontend DWFormgenerator

DW-Formmailer soll laut der Beschreibung des Anbieters ein Tool für Profis sein. Damit ist es möglich, individuelle Formulare zu erstellen. Der Formmailer dient zur Übermittlung von Daten, die in ein Web-Formular eingegeben wurden. Das Tool kann sowohl kostenlos als auch gegen Bezahlung, dann mit erweiterten Möglichkeiten verwendet werden.


DWFormgenerator: die Startseite

Kingtools

Auch für die Verwendung der Kingtools wird kein HTML-Wissen benötigt. Kingtools bietet Ihnen 20 Homepagetools. Die Tools können schnell in die Webseite eingebunden werden und sind einfach zu verwalten. Das Design kann per CSS individuell angepasst werden. Um das ganze Paket zu erhalten und in die Webseite einbauen zu können, ist eine Registrierung notwendig. Vorsicht: auch wenn das Angebot sehr verlockend aussieht, so muss man mit dem Datenschutz doch aufpassen. Der Betreiber behält sich vor, persönliche Daten der Nutzer beispielsweise für Werbung oder Marktforschung weiterzugeben.


Kingtools: ein Überblick

Interwebline

Interwebline ist ein weiteres Portal für Seitenbetreiber, welches zahlreiche Tools kostenlos anbietet, unter anderem auch einen Formmailer. Für Neulinge auf dem Gebiet der Homepageerstellung wird ein Support angeboten. Für Fortgeschrittene und Profis sind verschiedene Tools geeignet, mit deren Hilfe die Webseite aufgestockt werden kann. Auf der gut strukturierten Webseite finden Sie zudem Tutorials für HTML-Anfänger, einige Infos zum Thema Graphik, sowie Tipps und Tricks. Eine interessante Quelle für Anfänger und (Semi-)Profis!


Interwebline: die Startseite

Drei Dienste, die Kontaktformulare für mobile Geräte generieren

Das mobile Internet entwickelt sich rasch. Noch vor wenigen Jahren schien es undenkbar, eine Webseite auf einem mobilen Gerät auch nur anzuschauen. Heute gehört es zum Alltag. Wer sich mit Webdesign beschäftigt, muss sich nicht nur um eine „normale“ Version seiner Webseite kümmern. Vielmehr wird immer häufiger zusätzlich eine mobile Variante gefordert. Das betrifft dann natürlich auch etwa Kontakt- und andere Formulare. Im folgenden stelle ich Ihnen ein paar Dienste vor, welche dabei helfen wollen, Kontaktformulare für mobile Webseiten schnell zu erstellen.


So können Ihre mobilen Formulare aussehen

Get Formly: online mobile Formulare erstellen

Erster Dienst, welcher es erlaubt, mobile Webseitenformulare schnell zu erstellen ist Get Formly. Sie können sofort online ein eigenes Formular erstellen. Der Dienst ist allerdings nicht kostenlos. Nur eine Demo Version eines Formulars kann erstellt werden. Um ordentlich mit dem Dienst zu arbeiten, muss man sich für einen von drei Tarifen entscheiden, den Geldbeutel auspacken und kann erst dann los legen. Eine gute Einführung in die Dienstnutzung vermittelt Ihnen ein aussagekräftiges Bild. So können Sie qualifiziert entscheiden, ob sich die Investition wohl für Sie lohnen wird.

Klicken Sie auf „Build your first form“, werden Sie zu einer Formularauswahl weitergeleitet. Um zu verstehen, was die jeweilige Formularart bedeutet, führen Sie den Mauszeiger über den jeweiligen Button. Beispielsweise möchten Sie ein Multiple-Choice-Formular basteln. Ziehen Sie den entsprechenden Button in ein Feld, welches sofort bei der Auswahl rechts erscheint. Ein Menu entsteht, in dem sich Ihre Frage und Antwortmöglichkeiten befinden. Der Dienst schlägt Ihnen irgendeine beliebige Frage vor, weist Sie aber sogar darauf hin, dass Sie doch lieber eine interessantere Frage verwenden sollten.


Get Formly: Formulare erstellen mit Tipps

Der Hinweis auf eine interessantere Frage ist nicht der einzige, der Ihnen begegnen wird. Buchstäblich jeder Button wird erläutert. Nachdem Sie sich da durchgecklickt haben, können Sie endlich weitere Optionen zu Ihrem Formular hinzufügen und schliesslich auf „Preview“ klicken.


Vorschau eines fertigen Formulars

Schlussendlich geben Sie Ihre E-Mail-Adresse an und wählen ein Passwort. Get Formly verspricht Ihnen, Ihr Postfach nicht mit Spam zu füllen.


Um Ihr Formular zu erhalten,müssen Sie erst Ihre E-Mail-Adresse angeben

Form Smarts

Formsmarts ist ein Dienst, welcher ebenfalls eine Möglichkeit bietet, Formulare für mobile Geräte zu erstellen. Hier gibt es sowohl kostenpflichtige Versionen als auch eine kostenlose Basic-Version. Um die Basic-Version nutzen zu können, müssen Sie sich erstmal registrieren. Nach der Bestätigung der E-Mail-Adresse kann es nun mit der Formerstellung losgehen. Melden Sie sich mit Ihrem Account an, klicken Sie auf „My Forms“ auf der Startseite unten. Geben Sie alle notwendigen Informationen ein und klicken Sie auf „Create Forms“. Danach gehen Sie auf „create fields“ und erstellen Sie ein Feld. Sind Sie damit zufrieden, klicken Sie auf den Button „Forms“. Sie erhalten einen Code für Ihren Formular.


Embed Code Ihres Formulars

Um weitere Einstellungen im Formular durchzuführen, klicken Sie auf den Bleistift in der oberen Menüleiste. Ein Fenster mit weiteren Einstellungsmöglichkeiten erscheint. Nicht alle Funktionen können bei der Basic-Version genutzt werden, allerdings halte ich persönlich diese für nicht nötig. Für die private Webseite reichen meiner Meinung nach die angebotenen Möglichkeiten vollkommen. Nachdem Sie fertig sind, speichern Sie die Einstellungen unter „save changes“. Sind Sie mit allem zufrieden, kopieren Sie den Code und bauen ihn auf Ihrer Webseite ein. Wie Sie es am besten tun sollten, erfahren Sie indem Sie auf das Fragezeichen neben „URL“ klicken. Ihnen werden ausführlichste Informationen darüber gegeben, wie Sie Ihr Formular in Ihre Webseite einbauen können.

P-Form

Noch eine Quelle zum Erstellen von HTML5-Formularen, welche auch für eine mobile Webseite geeignet sind, ist pForm. Hier wählen Sie als erstes ein Layout in IHrer Wunschfarbe. Unten klicken Sie auf „Next“. Im Menu rechts wählen Sie eine Formularart. Dann gestalten Sie Ihr Formular beliebig und nachdem Sie fertig sind, klicken Sie auf „Download Form“. Der HTML-Code samt Bottom, Header, den CSS-Dateien und weiterem Zubehör kommt zu Ihnen in einer zip-Datei verpackt. Was ich gut finde: hier ist keine Registrierung oder die Angabe einer E-Mail-Adresse notwendig.


P-Form: ein kleines Beispiel

Fazit: Als ich auf der Suche nach Möglichkeiten zur Erstellung mobiler Formulare war, musste ich feststellen, dass die meisten davon nicht kostenlos sind. Viele versprechen zunächst, sie seien kostenlos. Dann aber verlangen sie eine aufwändige Registrierung und am Ende stellt sich heraus, dass nur ein Formular kostenlos erstellt werden kann. Die kostenlosen Anbieter reichen meiner Meinung nach nur für sehr simple Formulare. Möchten Sie aber etwas Qualitatives haben, empfehle ich Ihnen doch den Griff zum Geldbeutel. Zum Schluss habe ich für Sie noch drei nette Mobile-Forms-Anbieter aufgelistet, welche nicht kostenlos sind, aber dafür durch die Qualität an Formularen eher überzeugen.

  • iFlyMobi-Applikation zur Erstellung von mobilen Formularen.
  • DeviceMagic: mobile Formulare werden mittels eines Online-Designers erstellt.
  • Mobify: ein Editor für die Erstellung von mobilen Webseiten (und Formularen).

(dpe)