Kategorien
(Kostenlose) Services Design Editoren Essentials

Google Sites: Visueller Homepage-Baukasten mit limitierten Möglichkeiten

Google Sites liegt ganz frisch in deutlich renovierter Form vor und bildet einen integralen Bestandteil der neuerdings „G Suite“ genannten Google Apps-Umgebung. Vor Jahren baute ich die ein oder andere Intranet-Seite mit der Vorversion des Tools. Überzeugend war das nicht. Wie sieht es heutzutage aus?

Kleine Änderung macht Google Sites für die meisten Menschen nutzlos

Die aktuelle Version des Sitebuilders Google Sites richtet sich stärker als bisher an eine klare Zielgruppe, nämlich die Anwender der „G Suite“. Und in dieser Konstellation erfüllt Google Sites eine ganz klare Aufgabe. Es verbindet nämlich die einzelnen Dienste zu einem Ganzen und macht die Informationshappen, die in unterschiedlichen Services schlummern zentral zugänglich – dazu gleich mehr.

sitesmapgif

Was mit Google Sites früher ging, jetzt aber nicht mehr möglich ist, ist jede Form von transaktionsorientierter Außendarstellung. Angenommen, du betreibst ein kleines Business, willst aber kein Geld fürs Hosting ausgeben und kommst mit der Google-Philosophie ansonsten gut klar. Dann konntest du in der bisherigen Version etwa erforderliche Buttons für z.B. Paypal und andere Aktionen über den HTML-Editor in Google Sites verankern. Deine generierte Website bot damit moderne Möglichkeiten der Interaktion. Viele gemeinnützige Einrichtungen nutzten diese Möglichkeiten, um etwa Spenden einzusammeln oder ähnliches.

Die neue Version bietet diese Möglichkeiten nicht mehr. Zwar kannst du auch aktuell den HTML-Code direkt bearbeiten, allerdings schmeißt Google sämtliche programmatischen Elemente automatisiert aus dem Code heraus. Schon das Einbinden eines Facebook-Buttons ist nicht möglich. Verständlich ist das schon, denn natürlich ist auf diese Weise schnell mal Schadcode verbreitet. Dem ist jetzt ein Riegel vorgeschoben.

Damit verliert Google Sites für jedermann, der nicht zur Zielgruppe im engeren Sinne gehört, also kein „G Suite“-Nutzer ist, seinen Wert.

Google Sites: Die Zielgruppe darf sich über komfortable Möglichkeiten freuen

Benutzt dein Unternehmen indes ohnehin schon die volle Palette der „G Suite“, dann ist die Verwendung von Google Sites ein logischer Schritt, der die Informationsverfügbarkeit nochmal deutlich erhöht. Schau dir dieses kurze Video an und dir wird sofort klar, was ich meine:

Google Sites bietet eine tiefgreifende Integration mit den anderen Diensten. Du baust Google Docs, Tabellen, Präsentationen, Karten, Videos aus YouTube, Fotos aus Google+ und sogar Hangouts, sowie Google Apps Scripts im Handumdrehen ein und stellst auf diese Weise Informationen in einen Zusammenhang, der so ansonsten ohne weiteres nicht erkennbar gewesen wäre. Im Intranet ist das eine Wucht. Die Beispiele aus dem Video sind dabei ja nicht aus der Luft gegriffen.

Passend dazu kannst du mit der neuen Version mehrere Personen des Teams als Editoren bestimmen. Diese bearbeiten dann die Seiten kollaborativ mit der gleichen Technik, die auch Google Docs antreibt.

Mit sechs neuen, modernen Themes startet Google Sites in die Welt des responsiven Webdesigns. Eine entsprechende Preview im modernen Editor, der sich an Material Design-Richtlinien orientiert, sorgt dafür, dass du stets im Blick hast, wie deine Inhalte auf Smartphones oder anderen mobilen Geräten aussehen werden.

Fazit: Alte Zöpfe abgeschnitten, Zielgruppe glasklar fokussiert. Gehörst du dazu, wird Google Sites dich funktional überzeugen, gehörst du nicht (mehr) dazu, such dir ein anderes Tool.

Kategorien
Design Editoren

5 Gründe, warum Webydo deine Webdesign-Agentur erfolgreicher macht

Du kannst dich sicherlich erinnern, was du empfunden hast, als du dein brandneues iPhone zum ersten Mal eingeschaltet hast. Da war das Gefühl von endlosen Möglichkeiten, das Empfinden von Glück. Du spieltest mit dem Gerät, untersuchtest die Funktionen, lotetest die Grenzen aus, um letztlich das iPhone zu deinem iPhone zu machen. Du erstelltest dir einen Hintergrund, wähltest einen Klingelton, organisiertest deine Apps und so weiter…

webydo-landingpage

Was aber hast du damit eigentlich getan? Abseits jeglicher Gefühlsduselei hast du nur getan, was du vernünftigerweise tun musstest. Du hast ein neues Stück Technik in deinen Tagesablauf, deinen Workflow, dein Leben integriert. So willst du sicherstellen, dass alles wohl organisiert an einem zentralen Platz zur Erleichterung deines Alltags beiträgt.

Wenn du bereits Webydo in deinen Design-Workflow integriert hast, dann weißt du sicher, wovon ich rede. Du hast die Vorteile einer All-in-One-Lösung schon verstanden und nutzt sie selbstverständlich zur Erleichterung deines Arbeitsalltags. Das ist schlau.

Gehörst du zu denen, denen diese Erkenntnis bislang verborgen geblieben ist, dann wird der folgende Beitrag dir helfen, sie zu Tage zu fördern. Wir haben hier nämlich fünf Gründe, warum Webydo deine Webdesign-Agentur erfolgreicher machen wird. Und alle haben damit zu tun, dass du in einen stromlinienförmigen Workflow ohne Brüche gelangst. Du kannst dir sicherlich vorstellen, dass damit eine erhebliche Zeitersparnis und weniger Reibungsverluste verbunden sind. Also, lass uns deine Effizienz steigern. Hier sind die versprochenen Gründe:

1. Du baust Websites viel schneller als bisher

Design websites faster with Webydo

Vielfach erinnern wir uns nicht einmal daran, warum wir einst begannen, die Dinge so zu erledigen, wie wir sie nun einmal erledigen. Schlimmer noch ist, dass die Art und Weise der Erledigung ganz schnell zu unserem Goldstandard wird, von dem wir nur unter Schmerzen abweichen wollen. Dass das häufig keine so gute Vorgehensweise ist, gerade in kreativen Berufen, in denen Offenheit eine Tugend ist, sollte klar sein.

Ein Beispiel: Warum sollte ich als Designer heutzutage mein perfektes Photoshop-Mockup an einen Entwickler abgeben, nur um es dann nach einer Weile als nur noch halb so guten, aber online funktionierenden Entwurf wieder zu bekommen? Wäre es nicht schöner, ich hätte ein Werkzeug, mit dem ich visuell für das Web designen kann, ohne einen Developer einschalten zu müssen? Klar. Sowas brauche ich. Wenn das Ganze dann noch eine vertraute Benutzeroberfläche hat und moderne Standards, wie responsives Design unterstützt, dann immer her damit!

Der visuelle Design-Editor von Webydo ist genau dieses Allround-Tool. Und es ist schnell. Vorbei sind die Zeiten, an denen du immer und immer wieder an deinem statischen Mockup feilen musstest, bis es perfekt abgestimmt war, nur um dann im Zwielicht des Designer-Developer-Tunnels zu verschwinden.

Vielleicht hast du inzwischen beschlossen, dich dem Drachen zu stellen, und selber HTML und CSS zu lernen. Wäre es nicht weitaus schöner, wenn du dich nicht mit Stylesheets und der Frage nach der korrekten Syntax herumschlagen müsstest? Wäre es nicht schöner, direkt einen visuellen Entwurf zu sehen, anstatt darauf hoffen zu müssen, dass das Häufchen Text vor deinen Augen am Ende nach Website aussehen wird?

Du erstellst dein Design und siehst dabei, wie es zu einer voll funktionsfähigen Website wird. Dann gibst du deinem Kunden Zugriff darauf und änderst den Entwurf im Dialog und in Echtzeit. Dabei wechselst du zwischen dem Design, den Inhalten und den Vorschaumodi mittels einfacher Klicks. Kennst du dich schon ein bisschen mit Photoshop aus, so wird dir das Drag-and-Drop-Interface von Webydo fast schon vertraut vorkommen. Selbst responsives Design kannst du nahezu intuitiv erledigen, indem du schlicht Breakpoints aktivierst und das Design jeweils entsprechend anpasst.

2. Du hast die volle kreative Kontrolle über das Design

Full creative control with Webydo

Absolute Positionierungen. Für Rechtshirn-Dominante.

Wenn du Elemente in Photoshop bewegst und platzierst, dann tust du das mit einer pixelgenauen Akkuratheit. Jedes Element wird stets an genau der Stelle erscheinen, die du ihm zugewiesen hast. Webydo arbeitet auf genau die gleiche Weise.

Andere Editoren hingegen verwenden relative Positionierungen. Das ist für Designer mit entsprechenden Skills im Coding ganz okay, aber schwierig für solche ohne entsprechende Fähigkeiten. Letztgenannte werden es schwer haben, Elemente so zu platzieren, dass sich die Designvorstellungen im Endproduktz tatsächlich widerspiegeln. Immerhin gibt es da reichlich paradox erscheinende Vorgehensweise, wie etwa das Hinzufügen von Padding links, um etwas nach rechts zu bewegen…

Merke: In Webydo verbleibt die volle kreative Kontrolle bei dir.

3. Du erfährst Unterstützung in Business und Marketing

Weybdo’s business and marketing features

Fünf Euro ins Phrasenschwein für den Claim “von Designern für Designer”. Den Spruch kennst du doch auch. Er wird in unterschiedlichem Kontext und gern von Webydos Wettbewerbern verwendet. In der Tat ist Webydo natürlich von Designern für Designer gemacht. Dabei verstehen wir den Claim aber weitaus tiefergehender. Webydo wurde nicht nur geschaffen, um dir das Bauen einer ansprechenden, responsiven Website so einfach wie möglich zu machen. Webydo unterstützt dich zusätzlich bei vielen weiteren Aspekten deines Berufes.

Ein eingebautes CMS, komplett mit Hosting, Rechnungsstellung an deine Kunden, sowie einer White-Label-Oberfläche – all das wurde erdacht, um dir dabei zu helfen, dein Webdesign-Business auf Wachstum auszurichten.

Andere Plattformen zwingen dich an einem Punkt X den Besitz einer Website komplett an deinen Kunden abzugeben, damit der Kunde selbst die ein oder andere Änderung machen kann. Du hoffst dann, dass er dich im Auftretensfall dennoch beauftragt. Bloß, wie nachhaltig ist das denn? Im Zweifel hast du einen einmaligen Auftrag erledigt und das wars. Nicht sehr verlockend.

Dann gibt es Plattformen, die zwingen dich zwar nicht zu dem eben genannten Vorgehen, dafür sind sie voll gebrandet. Dein Kunde sieht also an allen Ecken und Enden seines „individuellen Webdesign“ das da ein Websitebuilder-System hintersteht. Macht das einen guten Eindruck? Willst du das?

Und dann gibt es da noch das Marketing. Heutzutage gehört SEO schlichtweg zum Paket Webdesign dazu. Du wirst kaum einen Freelancer oder eine Agentur in unserer Branche finden, die nicht ein mehr oder weniger seriöses Zusatzangebot in dieser Richtung zu machen imstande sind. Mit Webydo musst auch du nicht darauf verzichten, denn es bietet dir fortgeschrittene SEO-Fähigkeiten, mit deren HIlfe du Websites bauen kannst, die dann konvertieren.

Das ist gut für den Kunden, aber das ist vor allem gut für deine Weiterempfehlungsquote.

4. Du arbeitest mit einem unvergleichlichen Support-Team

Webydo’s team of customer success

Bist du es gewohnt, Support-Tickets an namenlose Antwortsysteme zu schicken und darauf zu hoffen, dass sich jemand qualifiziert mit deinem Anliegen auseinandersetzen wird? Dann wirst du erstaunt sein, denn Webydos sogenanntes „Customer Success Team“ ist anders, nämlich voll involviert und motiviert, dich und dein Business nach vorne zu bringen. Da geht es nicht nur um technische Fragen, sondern auch um Geschäftsmodelle, Marketing oder Tutorials für Design-Neulinge.

Folgendes Testimonial erhielt Webydo auf seiner Facebook-Seite vor nicht allzu langer Zeit:

“Ich muss mich einmal in aller Öffentlichkeit bei Jennifer Wegner bedanken. Jen hat mich schon in der Vergangenheit stets besser betreut, als man das von einer Support-Mitarbeiterin erwarten könnte. Dazu sollte ich erwähnen, dass ich als alleinerziehender Vaten von zwei kleinen Söhnen meistens nur abends dazu komme, mich mit technischen Fragen auseinder zu setzen; Zeiten also, an denen der normale Support-Mitarbeiter ebenfalls Feierabend hat. Gestern abend hatte ich allerdings ein derart schwerwiegendes technisches Problem, dass ich nicht umhin kam, Jennifer eine Nachricht mit der Bitte um schnelle Hilfe zu senden. Was dann geschah, hätte mich nicht stärker überraschen können. Nicht nur antwortete Jennifer fast sofort, obwohl sie nicht bei der Arbeit, sondern beim Sport war. Vielmehr bestand sie darauf, mir zu helfen, so dass wir am Telefon letztlich gemeinsam das Problem lösen konnten, das mich anderenfalls sicherlich die ganze Nacht gekostet hätte. Jennifer, ich bedanke mich von ganzem Herzen.”

Solltest du also mehr suchen als eine Firma mit einem Produkt, dann könnte es gut sein, dass dich Webydo mit seiner Art der Kundenbetreuung auf Augenhöhe wird überzeugen können.

5. Du erweiterst dein Business mit einer Plattform, die auf Wachstum ausgerichtet ist

Designer’s success with Webydo

Einige der größten Erfolgsstories im Umfeld von Webydo starten mit einem Freelandcer, der klein anfing und sein Business dann innerhalb von ein bis zwei Jahren zu einer Vollservice-Webdesign-Agentur aufbauen konnte.

Alex Walker von der Agentur Geek Designs ist ein perfektes Beispiel für diese Art von  Erfolgsstory. Er startete als Freelance Webdesigner im Pro-Plan und erstellte eine Handvoll Websites im Jahr. Nach zwei Jahren war seine Agentur schon auf fünf Mitarbeiter gewachsen, die es auf 70 Websites im Jahr brachten. Woran liegt das? Alex schwört nicht nur auf das Featureset und die Einfachheit von Webydo, das ihm letztlich erlaubt, mehr Websites in weniger Zeit zu erstellen, also mehr Geld zu verdienen. Vielmehr führt er einen Teil seines Erfolges auch direkt auf seinen Ansprechpartner bei Webydo zurück, der ihm geholfen habe, wo er konnte – von Geschäftsmodellen bis zur Schulung neuer Mitarbeiter.

Sicherlich hat dieses schnelle Wachstum auch etwas mit der grundlegenden Ausrichtung von Webydo zu tun. Webydo sieht sein Featureset expansiv und setzt auf die Zusammenarbeit mit den Kunden über das Participate Forum. Hier können Kunden sich direkt einbringen, um etwa neue Features oder Änderungen bei bestehenden Funktionen vorzuschlagen. Diese direkte Kundenanbindung sorgt für eine sehr stark an den konkreten Bedürfnissen ausgerichtete Produktentwicklung, die in dieser Form derzeit einzigartig ist.

Alles in allem

Webydo stattet dich als Designer mit einem Werkzeug aus, das deinen Workflow beschleunigt, ohne dass du dabei auf Flexibilität oder kreative Kontrolle verzichten müsstest. Zudem ist Webydo eine strikt an deinem Geschäft orientierte Plattform. Das trifft nicht nur auf die professionellen Features zu, sondern beschreibt ebenfalls das Team an Profis, die nur darauf warten, dir auf deinem Weg zum Erfolg zu helfen.

Wenn du auf der Suche bist nach einem Tool, dass sich perfekt in deinen Arbeitsalltag einfügt und ihn dabei optimiert und beschleunigt, dann ist es sehr wahrscheinlich, dass Webydo dieses Tool ist. Fordere eine Live-Demo an, jetzt.

Disclaimer: Der Beitrag ist ein Sponsored Post aus dem Hause Webydo. Er erschien im englischen Original zuerst bei Webydo.

Kategorien
Design Editoren

Dein Weg zum professionellen Webauftritt

Nicht nur große Firmen, sondern auch Kleinunternehmer und mittelständische Betriebe brauchen heutzutage eine Internetpräsenz. Schließlich sind die Gelben Seiten längst vom Printmedium selbst zur Internetseite geworden. Geblieben ist lediglich die gelbe Hintergrundfarbe. Wer heute nach einem Serviceanbieter sucht, der blättert nicht mehr – der tippt. Doch damit dein Unternehmen bei Suchmaschinen vorne auftaucht und auch nach dem Klick einen guten Eindruck zu hinterlässt, gibt es einiges zu beachten.

lego-1696427_1280

Suchmaschinenranking – dein Weg nach vorne

Ein wichtiger Faktor ist das Suchmaschinenranking. Die Platzierung einer Webseite bei Google, Yahoo & Co ist entscheidend, um gefunden zu werden. Kaum jemand klickt sich durch mehr als zehn Suchmaschinenseiten. Die Ergebnisseiten werden kurz auch SERPs (engl. search engine result pages) genannt. Doch wie gelangt deine Seite in die Top 10 SERPs?

Usability & Accessibility

Kaum etwas ist ärgerlicher beim Besuch einer Webseite als Links, die im Nichts enden oder Inhalte, die auf dem Smartphone oder anderen Geräten nicht korrekt angezeigt werden. Solchen Problemen kann bereits in der Entwicklungsphase der Internetseite ein Riegel vorgeschoben werden, denn das Fundament für einen professionellen, einwandfreien Webauftritt wird bereits mit der Konzeptionalisierung gelegt. Frage dich daher vorab, wie du deine Seite in Sachen Usability (Benutzerfreundlichkeit) und Accessibility (barrierefreier Zugang von allen Geräten) sinnvoll gestalten möchtest. Nicht immer ist ein Webdesigner nötig, um eine funktionierende Internetseite zu kreieren.

Mit einem Homepage-Baukasten kannst du binnen weniger Klicks eine maßgeschneiderte Homepage für dein Projekt oder Unternehmen designen. Der Vorteil an einem solchen Baukasten-System für die Webseitengestaltung ist, dass bereits an die technischen Voraussetzungen für dich gedacht wurde. Deine Aufgabe ist es nun, die Seite individuell und kreativ zu gestalten. Dazu muss die Webseite mit Inhalten gefüllt werden. Hilfreiche Tipps, wie du Texte, Bilder, Buttons, Tabellen oder andere Elemente mit Hilfe von Widgets in deine Webseite integrierst, liefert dir der Homepage-Ratgeber.

homepageratgeber
Bildquelle: homepage-ratgeber.de – Webseitengestaltung mithilfe von Widgets

Keyworddichte vs. Keyword-Stuffing

Ausschlaggebend sind vor allem die sogenannten Keywords und die Linkpopularität. Keywords oder Schlüsselwörter sind die Worte, die mit dem Suchbegriff assoziiert werden. Am besten kannst du dir das in Form einer Assoziationswolke vorstellen. Welche Begriffe in die jeweilige Wortwolke gehören, variiert sehr stark von Suchbegriff zu Suchbegriff. Webdesigner nutzen daher verschiedene Tools zur Suchmaschinenoptimierung, kurz SEO (engl. search engine optimization). Kostenlose SEO-Tools können dabei helfen, die Keyworddichte zu optimieren. Als Idealwert geht man von etwa ein bis zwei Prozent Keyworddichte für einen Text aus. Ist die Keyworddichte sehr hoch, so scheinen Google und andere Suchmaschinen die Seite durch ein negatives Ranking abzustrafen. Keyword-Stuffing oder -Spamming, wie dieses Phänomen im Fachjargon genannt wird, ist daher nicht nur nutzlos, sondern sogar kontraproduktiv. Um herauszufinden, welche Keywords relevant sind, bieten sich Programme zur IDF-WDF-Analyse (engl. inverse document frequency-within-document frequency) an. Auch nachträglich, wenn deine Homepage bereits online ist, kannst du mithilfe von IDF-WDF-Tools eine Domain auf Keywordverbesserungen überprüfen.

Mehrwert für den Leser & Interaktion mit dem Leser

Am Ende ist jedoch der Mehrwert für den Leser entscheidend. Deine Seite wird nur dann beliebt, wenn sie authentisch ist und dem Leser einen Informationsgehalt liefern kann. Da sich dieser Faktor jedoch nur schlecht quantifizieren lässt, wird kurzerhand die Linkpopularität als Indikator herangezogen. Die Faustregel lautet: Je mehr Links im Internet auf deine Webseite verweisen, desto besser schneidet sie im Suchmaschinenranking ab. Du musst dich also ins Gespräch bringen. Deine Homepage allein macht die Arbeit nicht für dich. Vernetze dich mit anderen Internetnutzern, trage dich in relevante Online-Branchenbücher ein und verwende Social-Media.

lego-568039_1280

Corporate Identity transportieren – sei authentisch und originell

Ganz gleich, für welches Projekt du eine Webseite erstellen möchtest, das oberste Gebot lautet: Authentizität. Stelle dein Angebot und deine Ideen in den Vordergrund – und zwar auf originelle Weise. Kopiere dabei weder Texte, noch Bilder von anderen Anbietern, sondern mach dein eigenes Ding. Nur wer authentisch ist, überzeugt und schafft eine Corporate Identity, also eine Marke mit Wiedererkennungswert.

Fakten

  • Sei einzigartig und authentisch: Stelle auf deiner Webseite dein Projekt in den Vordergrund, ohne von anderen Quellen Inhalte zu kopieren.
  • Netzwerkbildung: Nutze Social-Media-Kanäle und Online-Branchenbücher, um dein Projekt bzw. dein Unternehmen im World Wide Web ins Gespräch zu bringen. Nur so werden dich andere Internetseiten verlinken.

Zusammenfassung

Für die Erstellung einer erfolgreichen Webseite gibt es kein Patentrezept, aber doch wichtige Anhaltspunkte. Professionelles Auftreten, gut recherchierter Content sowie ein breites Netzwerk sind wichtige Zutaten für das Erfolgsrezept. Am Ende entscheidet jedoch deine Kreativität über Top oder Flop des Webauftritts.

Kategorien
Design Editoren HTML/CSS Webdesign

XPRS: Responsiver, modularer und umfangreicher Websitebuilder

Unter den zahlreichen Websitebuildern sticht der XPRS Editor vor allem durch sein sehr elegantes und stimmiges Design hervor. Die Benutzeroberfläche ist sehr ansprechend und einfach zu bedienen. Wer auf zeitgemäßes Design und ebenso zeitgemäße Technik setzt, wird mit XPRS sehenswerte Websites erstellen können. Dabei werden auch Features wie das eigene Blog oder der eigene Shop unterstützt.

xprs

Umfangreiche und elegante Themes

Hast du dir einen kostenlosen Account beim XPRS Editor eingerichtet, wählst du zunächst ein Theme aus. Die Themes sind in zahlreiche Kategorien einsortiert, die sich unter anderem nach Branchen richten. Hier finden Kreative ebenso ein passendes Theme wie Restaurantbetreiber und Immobilienmakler.

xprs_themes
Übersicht einiger der zahlreichen Themes

Alle Themes sind responsiv und verfügen über eine umfangreiche Vorschau. So erhältst du zu jedem Theme eine Desktop- und Mobilansicht sowie die Vorschau zu einigen exemplarischen Seiten. Du weißt also bei der Auswahl deines Themes schon ziemlich genau, wie dieses später aussieht, wenn du deine Inhalte platzierst.

xprs_themes_vorschau
Vorschau eines Themes

Hast du dich für ein Theme entschieden, beginnst du direkt damit, die Inhalte deiner neuen Website zu bearbeiten.

Seite mit Segmenten bauen

Jedes Theme ist mit einigen exemplarischen Inhalten ausgestattet. Diese kannst du nutzen, um davon ausgehend die Startseite deiner neuen Website mit Inhalt zu befüllen. Alle Elemente einer Seite sind individuell anpassbar.

xprs_segmente
Aufteilung einer Seite in Segmente

Das Besondere am XPRS Editor ist der modulare Aufbau einer Seite mit sogenannten Segmenten. Segmente stellen unterschiedliche inhaltliche Bereiche einer Seite da. Texte, Bilder, Text-Bild-Kompositionen, Formulare und Galerien sind einige der zahlreichen Segmente, die du frei auf einer Seite platzierst.

Für jedes Segment stehen dir individuelle Einstellungen zur Verfügung. Welche Einstellungen das jeweils sind, hängt vom Segmenttyp ab. Bei einer Galerie wählst du beispielsweise die Platzierung der Bilder, die Anzahl der Bilder pro Reihe sowie den Abstand der Bilder zueinander aus.

xprs_segmente_auswahl
Auswahl eines der zahlreichen Segmente

Natürlich kannst du Segmente auch innerhalb einer Seite verschieben und sie auch wieder löschen. Ebenfalls möglich ist es, Segmente zu kopieren und an anderer Stelle deiner Website wieder einzufügen.

Um das responsive Weblayout der einzelnen Segmente musst du dir keine Gedanken machen. Der Websitebuilder sorgt automatisch dafür, dass alle Inhalte auch auf Mobilgeräten ordentlich aussehen.

Effekte hinzufügen

Kaum eine zeitgemäße Website kommt mittlerweile ohne Animationseffekte aus. Modernes CSS3 und JavaScript ermöglichen interessante Effekte, die du auch im XPRS Editor nutzen kannst. So gibt es klassische Hofer-Effekte, die du zum Beispiel in deiner Galerie anwendest.

xprs_effekte
Effekte zu einem Segment hinzufügen

Aus einer Liste wählst du einen Effekt aus. Dazu gehören Vergrößerungs- und 3D-Kippeffekte. Auch ist es mittlerweile üblich, beim Scrollen einer Seite jene Elemente, die in die Seite hinein gescrollt werden, mit einem Effekt zu versehen. Auch hierfür stellt dir der Baukasten Einiges zur Verfügung.

Eigener Shop in Kooperation mit Shoprocket

So einfach du eine Galerie zu deiner Seite hinzufügst, so einfach integrierst du auch einen eigenen Shop in deine Seite. Dazu hinterlegst du einfach ein Foto sowie eine Beschreibung für dein Produkt und gibst einen Preis an.

xprs_themes_ecommerce
Shop als Segment hinzufügen

Die komplette Kaufabwicklung einschließlich Warenkorb und Bezahlung wird vom XPRS Editor beziehungsweise vom Shopsystem Shoprocket übernommen. Dazu richtet dir XPRS automatisch einen Account bei dem Shopsystem ein. Über diesen Account verfolgst du deine Bestellungen und legst beispielsweise Zahlungsmethoden fest.

xprs_shoprocket
Anbindung an Shoprocket

Derzeit werden Zahlungen per Kreditkarte und per PayPal angeboten. Eine Zahlung per Bitcoins soll noch folgen.

Blog hinzufügen

Ähnlich einfach ist das Hinzufügen eines eigenen Blogs zu deiner Seite. Dieses ist ebenfalls als Segment vorhanden und wird einfach an einer beliebigen Stelle auf deiner Website platziert.

Dieses Segment stellt verlinkte Teaser zu den einzelnen Blogbeiträgen dar. Über die Einstellungen fügst du neue Beiträge zu deinem Blog hinzu und verwaltest bestehende.

xprs_blog
Einfaches Hinzufügen eines Blogs

Blogbeiträge stellst du dir wie andere Seiten ebenfalls sehr individuell zusammen, indem du Segmente hinzufügst. So kombinierst du Texte, Bilder und andere Elemente ganz nach Belieben.

Bilder lädst du ohnehin von deinem Rechner hoch und verwaltest diese über ein Media Center. Dort stehen dir auch eine Vielzahl frei verfügbarer Bilder zur Verfügung, die du beispielsweise für Blogbeiträge nutzen kannst.

Seiten verwalten und hinzufügen

Auch wenn One-Pager für Websites nach wie vor beliebt sind, erstellst du mit dem Websitebuilder natürlich auch komplexe Websites mit mehreren Seiten. Über die Seitenverwaltung legst du Seiten an und fügst ein Menü zu deiner Website hinzu.

xprs_website
Auswahl eines Menüs für deine Website

Es gibt klassische Seitenmenüs sowie jene, die am oberen Seitenrand fixiert sind. Du kannst dich auch für ein derzeit sehr beliebtes Burger-Menü entscheiden. Insgesamt stehen dir neun verschiedene Menütypen zur Auswahl.

Vorschau und Veröffentlichung

Sind alle Seiten angelegt und mit Inhalt gefüllt, kannst du dir diese für verschiedene Geräte als Vorschau anzeigen lassen. Neben der Desktopansicht siehst du dir deine Website für Smartphones sowie Tablets an.

xprs_vorschau
Vorschau auf verschiedenen Geräten

Für die Veröffentlichung deiner Website stehen dir verschiedene Möglichkeiten zur Verfügung. Falls du keine eigene Domain hast oder nutzen möchtest, legt dir der XPRS Editor eine URL an.

Darüber hinaus kannst du deine Website auch über eine eigene Domain laufen und auch eine Domain über den XPRS Editor registrieren lassen.

SEO und eigener Header

Damit deine neue Website auch gefunden wird, gibt es einige zusätzliche SEO-Eigenschaften. So legst du fest, ob Suchmaschinen deine Website überhaupt indizieren sollen. Außerdem gibst du Titel, Beschreibung und Schlüsselwörter an.

xprs_themes_seo
SEO-Einstellungen

Falls du Google Analytics nutzen möchtest, übergibst du dort einfach deine Tracking-ID. Alles andere regelt der XPRS Editor selbst.

Damit das Teilen auf sozialen Netzwerken auch gescheit aussieht, lädst du auf Wunsch auch eine Bilddatei hoch, die bei geteilten Links auf Facebook und Co. dargestellt wird.

Bedienung per App von unterwegs

Eine weitere Besonderheit des XPRS Editors ist die eigene App, die es dir erlaubt, deine Website auch von unterwegs zu pflegen.

Gerade wer ein Blog betreibt und auch von unterwegs Beiträge schreiben und veröffentlichen möchte, hat mit der App eine einfache und bequeme Möglichkeit.

xprs_app
Website bequem per App von unterwegs verwalten

Die App steht derzeit allerdings nur für iPhone und iPad zur Verfügung und ist über den Apple Store erhältlich.

Fazit und Kosten

Für Studenten, Künstler und Non-Profits ist die Nutzung des XPRS Editors kostenlos. Die kommerzielle Nutzung kostet 7,95 US-Dollar pro Monat. Für Reseller gibt es einen gesonderten Tarif für 350 US-Dollar im Jahr. Darin enthalten sind dann auch uneingeschränkt viele Lizenzen für deine Kunden.

Die Bedienung des XPRS Editors ist denkbar einfach. Dabei gibt es zahlreiche Features, mit denen du nahezu alle Wünsche berücksichtigen und Möglichkeiten moderner Websites ausschöpfen kannst.

Dabei sind die vorhandenen Themes durchaus anspruchsvoll und bieten für Websites, die keine allzu individuelle Gestaltung erfordern, gute Ergebnisse.

Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Blisk: Der Browser für Entwickler

Alle modernen Browser sind mittlerweile mit umfangreichen Entwicklerwerkzeugen ausgestattet. Diese helfen dir unter anderem dabei, HTML und CSS zu überprüfen, sowie JavaScript zu debuggen. Auch hast du mit ihnen die Möglichkeit, dein Weblayout für unterschiedliche Auflösungen ausgeben zu lassen. Die Entwicklerwerkzeuge machen die Arbeit für Webdesigner und -entwickler sehr viel einfacher. Doch es geht noch ein Stückchen komfortabler und schneller: Mit Blisk gibt es nun einen Browser, der ganz speziell für Entwickler konzipiert wurde.

blisk

Mobilgeräte immer im Blick

Hast du Blisk heruntergeladen und installiert, dürfte dich der Browser zunächst an Google Chrome erinnern. Das ist nicht verwunderlich. Denn Blisk basiert auf Chromium, dem Quelltext von Chrome, der unter einen freien Lizenz allen zur Verfügung gestellt wird.

Der größte Unterschied zu Chrome und anderen Browser wird erkennbar, wenn du eine Website aufrufst. Denn Blisk stellt eine Website immer doppelt dar. Während in der rechten Bildhälfte die Seite als klassische Desktopansicht aufgerufen wird, erhältst du auf der linken Hälfte eine Mobilansicht.

blisk_browser
Zweigeteiltes Fenster für Mobil- und Desktopansicht

Dabei wählst du aus einer Reihe gängiger Smartphones und Tablets aus. So wechselst du beispielsweise sehr einfach vom iPhone 6 zum Galaxy S3 und siehst, wie deine Website auf beiden Geräten dargestellt wird. Dabei wird die Website innerhalb eines Mockups des jeweiligen Gerätes angezeigt, um ein möglichst realistisches Erscheinungsbild zu bekommen.

Die Darstellung auf den Mobilgeräten steuerst du zudem im Touch-Modus, bei dem eine Bedienung per Taps und Gesten simuliert wird. Zwar unterstützt auch Chrome diese Möglichkeit, aber nicht so schön aufbereitet.

Synchrones Scrollen

Damit du das Aussehen deiner Website optimal auf der Desktop- und Mobilansicht gegenüberstellen kannst, wird deine Website auf beiden Ansichten parallel gescrollt. So ersparst du es dir, jeweils auf beiden Ansichten zu einer bestimmten Position einer Seite zu gelangen.

blisk_browser_menueleiste
Menüleiste, um spezielle Funktionen ein- und ausschalten zu können

Wer das synchrone Scrollen nicht mag, kann es über die Einstellungen auch ganz einfach ausschalten. In der Menüleiste gibt es einen speziellen Button, der dich direkt zum Setup mit den Einstellungen bringt, in denen du diese Funktion ein- und ausschaltest.

Auto-Refresh für veränderte Inhalte

Eine weitere sehr praktische Funktion von Blisk ist das Auto-Refresh. Dieses sorgt dafür, dass der Browser eine Website immer dann neu lädt, wenn sich beispielsweise der HTML- oder CSS-Quelltext der Seite verändert hat.

Hierzu musst du für eine Domain einen sogenannten Watcher einrichten. Dazu gibst du zu einer Domain das Stammverzeichnis mit den lokalen Dateien deiner Website an. Außerdem legst du Dateiendungen fest, auf die reagiert werden soll. HTML-, CSS- und JavaScript-Dateien sind hier standardmäßig angegeben.

blisk_browser_setup
Das Setup für das Auto-Refresh

Immer wenn sich eine dieser Dateien im lokalen Verzeichnis ändert, lädt Blisk automatisch die Website der angegebenen Domain neu. Wer einen eigenen lokalen Server betreibt oder Dateien seiner Webprojekte automatisch vom lokalen Dateisystem auf einen Server speichert, wird sicher Freude mit dieser Funktion haben und sich so mehr als einmal das manuelle Neuladen ersparen.

Weitere Features geplant

Da Blisk noch neu ist, stehen noch nicht alle Funktionen zur Verfügung. So gibt es einige Features, die erst noch implementiert werden müssen. Dazu zählt die Möglichkeit, Screenshots von Websites zu erstellen, sowie eine Video-Capture-Funktion.

Ebenfalls noch in Arbeit ist ein Analytics-Feature, welches die geräteübergreifende Kompatibilität und Perfomance einer Website messen soll.

Klassische Entwicklerwerkzeuge

Natürlich stehen dir in Blisk auch die klassischen Entwicklerwerkzeuge zur Verfügung, wie du sie von Google Chrome kennst. So kannst du in Blisk Elemente überprüfen und hast Zugriff auf Cookies und die Storages deiner Website.

Auch wenn Blisk derzeit noch nicht mit allen Features aufwartet, ist der Browser bereits jetzt eine für Entwickler interessante Alternative zu Chrome. Er macht vieles einfacher, schneller und anschaulicher. Blisk ist zudem kostenlos und wird, wenn er hält, was er verspricht, noch einige interessante Features hinzubekommen.

Derzeit gibt es Blisk allerdings nur für Windows. Apple und Linux sollen jedoch folgen.

(dpe)

Kategorien
(Kostenlose) Services Design Editoren Essentials Webdesign

Jimdo: Websites schnell, einfach und individuell erstellen

Websites zu erstellen, war nie einfacher als jetzt – auch ohne HTML und CSS auszeichnen zu können oder müssen. Der Homepagebaukasten Jimdo zeigt sehr eindrucksvoll, wie schnell und einfach du eine eigene Website erstellst. Dabei kannst du neben fertigen Designs auch sehr individuelle Vorlagen erstellen und deine Website intuitiv bedienen und pflegen.

Jimdo: Websites schnell, einfach und individuell erstellen

Vorlage und Domain auswählen

Die erste eigene Website bei Jimdo ist in wenigen Klicks bereit, um von dir mit Inhalten gefüllt zu werden. Zunächst entscheidest du dich für eine der 16 Vorlagen. Sie sind untergliedert in die Kategorien „Business“, „Shop“, „Portfolio“ und „Persönlich“ und bieten somit für beinahe jeden ein passendes Template an.

jimdo_vorlagen
Vorlagen für verschiedene Branchen

Jede Vorlage enthält Beispielseiten und -inhalte, die du später einfach anpassen beziehungsweise verändern kannst. Alternativ kannst du aber auch mit einer leeren Vorlage loslegen, die keinerlei exemplarische Inhalte besitzt.

Im nächsten Schritt entscheidest du, über welche Domain deine Website erreichbar sein soll. Wenn du Jimdo zunächst einmal kostenlos ausprobieren möchtest, wählst du einfach eine Subdomain nach dem Muster „demo.jimdo.com“ aus. Jimdo hostet jedoch für dich auch eine eigene Domain. Dazu gibst du eine neue oder bestehende Domain an, unter der deine Website später erreichbar sein soll.

jimdo_domain
Subdomain oder eigene Domain auswählen

Im letzten Schritt musst du dich mit einer E-Mail-Adresse kostenlos registrieren und erhältst deine Website mit dem zuvor ausgewählten Layout. Dieses kannst du später natürlich jederzeit wechseln.

Direkt im Layout arbeiten

Das Schöne im Jimdo ist, dass du deine Website direkt im Layout bearbeitest und so somit immer sofort siehst, wie deine Änderungen aussehen, ohne in einen speziellen Vorschaumodus zu wechseln. Fährst du mit der Maus über einzelne Inhalte, erscheinen Bearbeitungsrahmen, mit denen du Texte, Bilder und die Navigation bearbeitest. Außerdem verschiebst du Inhalte ganz einfach per Drag-and-Drop.

jimdo_website_barbeiten
Übersichtliche Oberfläche zum Bearbeiten deiner Website

Am rechten Rand findest du ein Menü, über welches du das Aussehen bearbeitest, sowie Einstellungen und zusätzliche Dienste aufrufst. Über „Besucher-Ansicht“ wechselst du zu einer Ansicht, in der alle Bearbeitungsmöglichkeiten ausgeschaltet sind.

Navigation, Texte und Bilder bearbeiten

Hast du dich für eine Vorlage mit Beispielinhalten entschieden, sind bereits einige Seiten sowie Texte und Bilder vorhanden. Gerade für den Einstieg in Jimdo helfen dir diese Inhalte, um einen ersten Eindruck vom Funktionsumfang des Baukastens zu bekommen.

Um neue Seiten hinzuzufügen, fährst du mit der Maus einfach über die Navigation der Website. Sofort erscheint ein entsprechender Rahmen, der dir das Erstellen, Bearbeiten und Löschen von Seiten ermöglicht.

jimdo_navigation_barbeiten
Einfaches Bearbeiten der Navigation

Schön ist auch die Option, Seiten im Menü zu verstecken. Damit kannst du Seiten anlegen und deren Inhalte bearbeiten, ohne dass deine Besucher das mitbekommen. Erst wenn alles fertig ist, schaltest du sie online.

jimdo_text_barbeiten
Eigene Textverarbeitung

Das Bearbeiten von Texten geschieht an Ort und Stelle im Layout. Der Bearbeitungsrahmen bietet dir zahlreiche Möglichkeiten an, Texte zu gestalten. So änderst du die Formatierung und Bündigkeit eines Textes und fügst Links, Listen und Einzüge ein.

Erfahrene Nutzer können in einem Quelltext-Editor direkt am HTML des Textes arbeiten und eigene Auszeichnungen vornehmen. Hier wird dir größtmögliche Flexibilität garantiert.

jimdo_bild_barbeiten
Bilder skalieren, drehen und verlinken

Das Bearbeiten von Bildern ist ähnlich einfach und lässt dennoch kaum Wünsche offen. Du hast die Möglichkeit, Bilder direkt von deinem Rechner hochzuladen oder von einem verbundenen Dropbox-Ordner. Anschließend skalierst du Bilder auf die richtige Größe und drehst sie bei Bedarf.

Jimdo generiert automatisch passende Bilddateien mit deinen Bearbeitungen. Auf Wunsch verlinkst du Bilder oder ermöglichst eine vergrößerte Darstellung des Bildes bei einem Klick darauf. Auch einen Untertitel sowie einen Alternativtitel – für das „alt“-Attribut – fügst du bei Bedarf hinzu.

Videos, Formulare und soziale Netzwerke hinzufügen

Neue Inhalte fügst du einfach an einer beliebigen Stelle innerhalb einer Seite ein. Um deine Inhalte besser zu ordnen, gibt es die Möglichkeit, Spalten anzulegen, in denen du zum Beispiel Bild und Text nebeneinander darstellen lassen kannst.

jimdo_inhalte_hinzufuegen
Auswahl von Inhalten für deine Seite

Neben Bildern und Texten bietet Jimdo dir zahlreiche weitere Inhalte an, die du einfach in deine Seite integrierst. Dazu gehören zum Beispiel Videos. Diese werden nicht bei Jimdo, sondern bei einem Videodienst wie YouTube oder Vimeo gehostet.

Du gibst dazu einfach die Adresse zu dem Video auf einem der zahlreich unterstützten Videodienste an und Jimdo kümmert sich darum, dass das Video korrekt eingebunden wird.

Auch Bildergalerien, Downloadbereiche und Tabellen fügst du ähnlich einfach in deine Seite ein. Jeder Inhalt verfügt über einen eigenen Bearbeitungsrahmen, über den du alle möglichen Einstellungen vornimmst.

jimdo_facebook
Einbindung eines Facebook-Plugins

Jimdo unterstützt natürlich soziale Netzwerke wie Facebook, Twitter und Google+. So fügst du einen „Gefällt mir“-Button oder das Page-Plugin deiner Facebook-Seite hinzu. Auch hierbei siehst du sofort im Layout, wie Button oder Plugin auf deiner Seite aussehen.

jimdo_google-maps
Einfache Einbindung von Google Maps

Ähnlich funktioniert die Einbindung des Kartendienstes Google Maps. Es sind keine Kenntnisse der Google-Maps-API notwendig, um einen Kartenausschnitt auszuwählen und eigene Ortsmarker zu setzen. Unerfahrene Nutzer können so verschiedene Dienste nutzen, ohne sich mit den jeweiligen Schnittstellen auseinandersetzen zu müssen.

Layout bearbeiten – bis in den HTML- und CSS-Quelltext

Wer seinem ausgewählten Layout eine individuelle Note verpassen will, kann über eine einfache Oberfläche, Farben, Schriften und den Seitenhintergrund verändern.

jimdo_style
Layout schnell und einfach anpassen

So wählst du zum Beispiel zwei Farben für das Farbschema der Seite aus. Diese beiden Farben werden anschließend im Layout verwendet. Bei den Schriften wählst du ebenfalls zwei verschiedene aus – eine für die Überschriften und eine für den Fließtext.

Über den Punkt „Detail Styling“ hast du die Möglichkeit, jeden einzelnen Inhalt individuell zu gestalten.

Wer ganz eigene Vorstellungen vom Layout seiner Seite hat und sich nicht scheut, HTML und CSS selbst auszuzeichnen, kann in die Layoutschnittstelle von Jimdo wechseln. Hier passt du den HTML-Quelltext deiner Vorlage selbst an und hast den vollen Zugriff auf das CSS deiner Website.

jimdo_layoutschnittstelle
Alles selbst auszeichnen mit der Layoutschnittstelle

Hier hast du wirklich die größtmögliche Freiheit, um das Layout ganz individuell anzupassen. Beim HTML-Quelltext musst du lediglich die „<var>“-Elemente beachten, die Jimdo als Platzhalter nutzt. Diese dienen dazu, die einzelnen Seitenbestandteile wie Navigation und Inhalt später an die richtige Stelle einzufügen. Das erinnert etwas an die Vorgehensweise bei der Erstellung von WordPress-Themes.

Eigenen Blog hinzufügen

Blogs sind nach wie vor ein beliebter Bestandteil von Websites. Mit Jimdo bindest du entsprechend spielend einfach dein eigenes Blog in die Website ein. Du erstellst Blogbeiträge, vergibst Kategorien, planst die Veröffentlichung und lässt deine Beiträge kommentieren.

jimdo_blog
Eigener Blog auf deiner Jimdo-Website

Was die Inhalte deiner Blogbeiträge betrifft, hast du dieselbe Flexibilität wie bei anderen Inhalten auch. So fügst du Bilder, Videos und anderes hinzu und kannst alles beliebig anordnen.

Zahlreiche Einstellungsmöglichkeiten

Unter den Einstellungen verwaltest du nicht nur deinen Jimdo-Account. Dort kannst du diverse Einstellungen für deine Website vornehmen. So gibst du den Seitentitel an, definierst Kopf- und Fußzeile für deine Website und blendest auf Wunsch einen Cookie-Hinweis ein.

jimdo_einstellungen
Zahlreiche Einstellungen

Außerdem wählst du dort beispielsweise ein Favicon für deine Seite aus und lässt dir einen QR-Code darstellen, der auf deine Website verweist. Diesen QR-Code kannst du beispielsweise verwenden, um deine Seite schnell und ohne Texteingabe in deinem Smartphone aufzurufen.

Statistik, SEO und eigene Domain Aufpreis

Alle bisher genannten Funktionen und Möglichkeiten sind im kostenlosen Tarif von Jimdo vorhanden – vorausgesetzt, man verzichtet auf eine eigene Domain. Wer seine Seite über eine eigene Domain nutzen möchte, muss sich für „JimdoPro“ für 5 Euro im Monat oder „JimdoBusiness“ für 15 Euro im Monat entscheiden.

Beide Tarife bieten dir zudem zusätzliche Dienste wie eine umfangreiche Seitenstatistik und SEO-Funktionen an. Bei „JimdoPro“ gibt es zudem einen Basis-Shop mit bis zu 15 Produkten. „JimdoBusiness“ beinhaltet einen Shop mit unbegrenzten Produkten. Außerdem bieten beide Tarife andere klassische Hostingdienste wie E-Mail-Konten und -Weiterleitungen an.

Fazit

Jimdo bietet dir mit seinem umfangreichen Baukasten die Möglichkeiten, anspruchsvolle und auf Wunsch sehr individuell gestaltete Websites zu erstellen und diese intuitiv und einfach zu pflegen.

Inhaltlich und gestalterisch gibt es kaum Grenzen. Wer also ein selbst gehostetes Content-Management-System scheut, findet im Jimdo einen guten Partner für die Komplettpflege seiner Website.

Die Websites von Jimdo sind alle responsiv gestaltet und der Quelltext ist mit HTML5 ausgezeichnet, sodass eine zeitgemäße Website garantiert ist.

Disclaimer: Dieser Beitrag wurde NICHT von Jimdo gesponsort, sondern ist Teil unseres Bestrebens, einen umfassenden Überblick über alle am Markt befindlichen Website-Builder zu bieten.

(dpe)

Kategorien
(Kostenlose) Services Design Editoren Essentials HTML/CSS Responsive Design UI/UX

Die 50+ besten Tools und Ressourcen für Webentwickler

Webentwicklung ist einer der schönsten Berufe überhaupt, allerdings auch einer der anspruchsvollsten. Denn man muss ständig am Ball bleiben, aktiv dazu lernen und kann sich nicht auf den Lorbeeren von gestern ausruhen. Es gilt, sich auf neue Anforderungen einzustellen. SEO-Grundkenntnisse sind gefragt, neue Techniken wie responsives Webdesign sind zu erlernen, Websites optimieren zu können ist wichtig, und natürlich neue Arbeitsweisen in der Erstellung von Websites kennenzulernen. Damit du im Spiel bleibst, haben wir dir hier eine Liste der besten Tools und Ressourcen für Webentwickler zusammengestellt.

Die besten Tools und Ressourcen für Webentwickler

Lebenslanges Lernen: Ressourcen für Webentwickler

Newsletter für Webentwickler

Newsletter für Webentwickler

Diese Newsletter bieten dir die besten Artikel zu Webentwicklung und Performance und sind redaktionell aufbereitet. So kannst du sicher sein, nur wirklich nützliche Dinge in deinem Posteingang zu finden.

  • Web Development Reading List – erscheint einmal wöchentlich und bringt dir neue Ressourcen und Tools nahe.
  • Web Operations Weekly – Der Newsletter zu Web-Applikationen, Performance, Webentwicklung, Server-Technik und Tipps.
  • WEB TOOLS WEEKLY – Der Newsletter zu den neuesten Tools für Webentwickler und Webdesigner. Hauptsächlich wird Front-End-Design behandelt.
  • freshbrewed.co – Einmal wöchentlich kommt der Newsletter zu Front-End- und UX-Design.
  • Dr. Web Newsletter – natürlich darf unser reanimierter Newsletter an dieser Stelle auch nicht fehlen. Abonnenten erhalten alle ein bis zwei Wochen schnelle Tipps und Infos für den Alltagsgebrauch.

Communities für Webentwickler

communities

Jeder Webentwickler steckt mal fest und weiß nicht weiter. Da ist es gut, wenn man sich an andere Menschen wenden kann, die schnell und unbürokratisch helfen. Hier sind einige Communities speziell für Webentwickler und Webdesigner.

Tools für den Gebrauch online und offline: Ressourcen für Webentwickler

Website Speed Test Tools

website-speed-test-tools

Die Geschwindigkeit einer Website ist ein kritischer Faktor für das Ranking deiner Website im Google-Index. Schnelle Ladezeiten bedeuten oftmals bessere Absprungraten, eine bessere allgemeine Benutzerfreundlichkeit und höhere Konversionsraten. Nutze also diese kostenlosen Tools zum Testen und Optimieren der Ladezeit deiner Website.

  • Website Speed Test:  Das relativ neue Speed-Test-Tool von KeyCDN mit einer „Wasserfall“-Darstellung der Ergebnisse und einer Vorschau der Website. Empfehlenswert.
  • Google PageSpeed Insights: PageSpeed Insights analysiert deine Website und gibt dir viele gute Tipps, wie du die Performance deiner Website verbessern kannst.
  • Google Chrome DevTools: Erklärt die in Google Chrome eingebauten Entwickler-Tools eingehend.
  • WebPageTest: Dieses Tool gibt dir die Möglichkeit, die Performance deiner Website von vielen Orten der Erde in echten Browsern wie Firefox, IE und Google Chrome zu testen.
  • Pingdom: Eines der besten Tools zum Testen der Ladezeit einer Website. Verschiedene Orte können eingestellt werden.
  • GTmetrix: Gibt dir einen Einblick über die Geschwindigkeit deiner Website und eine Menge Tipps, wie du sie verbessern kannst.

Collaboration Tools

Collaboration Tools

Diese Tools erleichtern die Zusammenarbeit von Teams, die zusammen an einem Auftrag arbeiten. Denn viele Teams bestehen mittlerweile aus Mitarbeitern, die über ganz Deutschland oder sogar über die ganze Welt verstreut leben und arbeiten. In Kontakt bleiben und sich gegenseitig absprechen ist also besonders wichtig. Mit diesen Tools kann man die Mitarbeit und den Arbeitsablauf bedeutend effizienter gestalten.

  • Slack: Eine Messaging-Anwendung für Teams, die an einem Auftrag arbeiten. Die App verspricht, dein Arbeitsleben einfacher und produktiver zu gestalten.
  • Trello:  Trello ist ein flexibler und visueller Weg, um Teams miteinander zu organisieren. Die Software basiert auf »Karten«, die kommentiert werden und auch mit Prioritäten versetzt werden können. Schnell und einfach zu erlernen.
  • Glip: Glip bietet dir Echtzeit-Messaging mit integriertem Aufgabenmanagement , Videokonferenzen, gemeinsame Kalender und vieles mehr.
  • Asana: Mit diesem Collaboration-Tool können Teams ihre Arbeit verfolgen und bisherige Ergebnisse einsehen. Perfekt um zu sehen, wo das Projekt gerade steht.
  • Jira: Jedes Mitglied deines Software-Teams kann seine Arbeit planen, Ergebnisse verfolgen und die Software anschließend freigeben.

Code Sharing und Experimente

Code Sharing

Manchmal hat man eine wirklich gute Unterhaltung auf Skype oder per Google-Hangouts mit einem anderen Entwickler und möchte mal eben ein Stückchen Code miteinander teilen, damit der Gesprächspartner einen Blick darauf werfen kann. Große Teamtools wie Slack können das natürlich, doch wenn du kein Mitglied eines Teams bist, ergeben sie keinen Sinn. Denn dafür existieren einige gute und schnelle Alternativen. Doch auch schnelle Experimente sind manchmal wichtig, darum findest du dafür Tools in dieser Liste.

  • JS Bin:  Ein Tool, um mit Programmier- und Auszeichnungssprachen zu experimentieren. Du kannst HTML, CSS, JavaScript, Markdown, Jade und Sass benutzen.
  • JSfiddle: Ein Tool, um deinen in JavaScript, HTML oder CSS Code direkt im Broser testen zu können.
  • codeshare: Teile deinen Code in Echtzeit mit anderen Entwicklern.
  • Dabblet: Ein interaktiver „Spielbereich“, um dir schnelles Testen von CSS- und HTML-Snippets zu ermöglichen.

Diff-Checker-Tools

diff-checker

Die „Diff-Checker“ helfen dir, Unterschiede zwischen Dateiversionen zu visualisieren und wenn gewünscht, zusammenzuführen. Manchmal kann es hilfreich sein, eine solche visuelle Darstellung zu sehen.

  • Diffchecker: Ein Online-Tool zum schnellen Vergleichen von textbasierten Dateien. Nützlich, wenn du unterwegs bist und einen schnellen Vergleich zwischen zwei Dateien benötigst.
  • Beyond Compare: Ein Programm zum Vergleichen von Dateien und Ordnern mit einfachen, leistungsfähigen Befehlen, die den Fokus auf den Bereich legen, der dich interessiert. Dinge, die dich nicht interessieren, kannst du ausblenden.

Markdown-Editoren

markdown-editoren

Markdown ist eine Auszeichnungssprache mit einer einfachen Syntax, die dann auf die Schnelle in HTML konvertiert werden kann. Anmerkung: Markdown-Editoren lassen sich für Schreibarbeiten und einfachen Code nutzen.

  • StackEdit: Ein kostenlos zu nutzender Online-Editor für Markdown.
  • Dillinger: Dillinger ist ein Cloud-fähiger HTML5 Markdown-Editor.
  • Mou: Markdown-Editor für Entwickler, die Mac OS X nutzen.
  • Texts: Ein einfacher Text-Editor für Markdown. Erhältlich für Windows und Mac OS X.
  • MarkdownPad: MarkdownPad ist wohl der beste Markdown-Editor für Windows. Er kann direkt mit einer Live-Preview neben dem Eingabebereich dienen.
  • ByWord: ByWord ist der klare Favorit im Dr. Web-Team, wenn es um Editoren für den Mac geht.
  • Sublime Text: In diesem Artikel auf Dr. Web erklärt Peter Müller, wie er mit Sublime Text seinen Markdown-Traumeditor gefunden hat.

CSS Preprocessors

css-preprocessors

Ein CSS Preprocessor ist im Grunde eine Script-Sprache, die CSS erweitert und zu regulärem CSS kompilieren kann. CSS Preprocessors erleichtern dir die Arbeit mit CSS. Hier ein Grundlagen-Artikel zu Sass und Less.

  • Sass: Eine sehr ausgereifte, stabile und leistungsfähige professionelle CSS-Erweiterung.
  • Less: Eine Erweiterung zu CSS, die auch rückwärts kompatibel mit CSS ist. Dies macht das Erlernen zu einem Kinderspiel.
  • Stylus: Eine neue Sprache, welche dir eine effiziente, dynamische und ausdrucksstarke Weise CSS zu generieren bietet. Stylus unterstützt sowohl eingerücktes als auch reguläres CSS.

Front-End-Frameworks

user-interface

Die Arbeit mit Frameworks wird immer beliebter, denn einen bereits vorbestimmten Rahmen, ein vorgefertigtes Paket zu nutzen, kann die Arbeit erleichtern und lässt dich schneller zum Ergebnis kommen. Die Frameworks bestehen in der Regel aus einigen Dateien und Ordnern, wie CSS, HTML-Beispiele und JavaScript. Twitters Bootstrap-Framework ist eines der beliebtesten Frameworks überhaupt und Grundlage sehr vieler anspruchsvoller Websites. Doch auch andere Frameworks verdienen es, getestet zu werden.

  • Bootstrap: Ein HTML, CSS, und JS Framework für das Entwickeln von responsiven, mobile-first Websites.
  • Foundation: Eine Familie von responsiven Front-End-Frameworks, die es dir erleichtern sollen, responsive Websites, Apps und E-Mails zu entwickeln.
  • Semantic UI: Ein Framework zum Entwickeln von responsiven Websites mit semantischem, leichtverständlich zu erfassenden HTML.
  • uikit: Ein leichtgewichtiges und modulares Framework zum Entwickeln von schnellen und leistungsfähigen Web-Schnittstellen.

Git: Clients und Services

git-clients

Git ist ein Quellcode-Management-System für Software und Webentwicklung. Es bietet dir eine verteilte Versions-Kontrolle. Seinen großen Vorteil spielt Git beim Arbeiten in Teams aus, denn es können Code-Änderungen nachverfolgt und vom Entwicklungs- bis zum Live-Stadium gebracht werden. Es ist ein Weg das Chaos zu minimieren und sicherzustellen, dass nichts Online geht, was nicht getestet wurde.

  • SourceTree: Ein kostenloser Git und Mercurial Client für Mac und Windows. Ein git-Client für Teams – Bitbucket – ist ebenfalls erhältlich.
  • GitKraken (Beta):  Ein freier und intuitiver, schneller und für alle Plattformen zu bekommender Client.
  • Tower 2: Versionskontrolle mit Git – leichtgemacht. Das verspricht diese App. Nur für Mac.
  • GitHub Client: Ein einfacher Weg, um an Projekten auf GitHub und GitHub Enterprise mitzuwirken.
  • Gogs: Ein einfacher Git-Client zum Selbsthosten.
  • GitLab: Hier kannst du deine privaten und öffentlichen Projekte kostenlos hosten.

Ergänzende Links zum Beitrag:

(dpe)

Kategorien
Design Editoren HTML/CSS Webdesign

CSS Shapes: So richtest du Text an Formen aus

In Anwendungen wie InDesign oder QuarkXPress ist der Textumfluss eine klassische Möglichkeit, freigestellte Bilder und Grafiken sowie andere Pfaden mit Text umfließen zu lassen. Mit den CSS Shapes hast du seit CSS3 im Webdesign die Möglichkeit, solchen Textumfluss zu realisieren. Dazu kannst du sowohl Pfade definieren, an denen ein Text entlang laufen soll, als auch freigestellte Bilder definieren, an denen sich ein Text orientieren soll.

CSS Shapes: So richtest du Text an Formen aus

Kreise, Ellipsen und Polygone für Umfluss definieren

Um einen Textumfluss mit einfachen Pfaden zu erstellen, benötigt es zunächst ein Element, an dem der Text entlang fließen soll. Hier bietet sich ein „<div>“-Container an, dem eine Breite und Höhe zugewiesen werden, sowie die „float“-Eigenschaft, die dafür sorgt, dass nachfolgender Text an dem Element entlang läuft.

<div></div>
<p>Lorem ipsum …</p>

Bis hier hast du ein klassisches rechteckiges Element. Mit der Shape-Eigenschaft „shape-outside“ definierst du nun einen Pfad, der anstelle der rechteckigen Form für den Textumfluss sorgt.

div {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

Im Beispiel wird ein Kreis mit einem Radius von 50 Prozent definiert. Zusätzlich kannst du auch den Kreismittelpunkt festlegen, wenn dieser nicht im Zentrum des Elementes liegen soll.

div {
  shape-outside: circle(50% at 50px 100px);
}

css-shapes_kreis
Einfacher Kreis, um den der Text fließt

Im zweiten Beispiel ist der Mittelpunkt 50 Pixel vom linken und 100 Pixel vom oberen Rand des Elementes entfernt. Mit „shape-outside“ wird im Übrigen nur ein Pfad für den Textumfluss erstellt. Gibst du dem „<div>“-Element im Beispiel eine Hintergrundfarbe, wird diese auf die rechteckige Grundform des Elementes angewendet und nicht auf den Kreis.

Statt Kreise sind auch Ellipsen möglich, bei denen du zwei Radien angibst.

div {
  shape-outside: ellipse(50% 25% at 50px 100px);
}

Die per „shape-outside“ definieren Pfade müssen nicht die komplette Fläche des Elementes ausfüllen. Sie können auch deutlich kleiner sein. Text wird sich ausschließlich an diesem Pfad orientieren und die eigentliche Größe des „<div>“-Elementes komplett ignorieren.

Für komplexere Formen kannst du ein Polygon anlegen, dessen Koordinatenpaare du per Komma voneinander getrennt übergibst.

div {
  shape-outside: polygon(150px 0, 179px 41px, 225px 20px, …);
}

Bilder als Shape nutzen

Ganz häufig will man einen Text nicht um eine einfache geometrische Form, sondern um ein freigestelltes Bild fließen lassen. Statt die Außenform des freigestellten Bildes mit einem Pfad nachzeichnen zu müssen, gibt es mit „shape-outside“ auch die Möglichkeit, direkt ein freigestelltes Bild zu übergeben. Voraussetzung ist, dass das Bild über einen Alphakanal besitzt und der Bereich außerhalb des freigestellten Objektes eine Transparenz besitzt.

<img src="rose.png" />
<p>Lorem ipsum …</p>

Im Beispiel wird nun statt eines einfachen „<div>“-Containers ein Bild gesetzt, welches ebenfalls per „float“ dafür sorgt, dass der nachfolgende Text daran entlang läuft. Statt einer geometrischen Form wird die Bildadresse der Eigenschaft „shape-outside“ per „url()“ zugewiesen.

div {
  float: left;
  shape-outside: url("rose.png");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}

css-shapes_bild
Freigestelltes Bild, um das der Text fließt

Die zusätzliche Eigenschaft „shape-image-treshold“ gibt an, wie viel Transparenz das Bild mindestens aufweisen muss, damit diese für den Textumfluss angewendet werden soll. Bei 0 werden nur Bereiche berücksichtigt, die zu 100 Prozent transparent sind. Im Beispiel wird eine Transparent von 50 Prozenz und mehr akzeptiert. Außerdem wird mit der Eigenschaft „shape-margin“ noch ein Abstand definiert zwischen dem freigestellten Bild und dem Text.

Auf diese Weise realisierst du ohne großen Aufwand Textumfluss, wie er bislang nur in Satz- und Layoutanwendungen möglich war.

Chrome-Erweiterung für CSS Shapes

css-shapes_chrome-erweiterung1
Chrome-Erweiterung ergänzt „Shapes“-Reiter

Um CSS Shapes direkt im Browser in der Größe und Position verändern und zu können, gibt es die Chrome-Erweiterung „CSS Shapes Editor“. Ist sie installiert, findest du in deinen Entwicklerwerkzeugen unter „Elements“ einen eigenen Reiter „Shapes“. Wählst du ein Element aus, welches per „shape-outside“ ausgezeichnet ist, siehst du im „Shapes“-Reiter diese Eigenschaft.

css-shapes_chrome-erweiterung2
Eigene Formen direkt im Browser zeichnen

Im Browser wird der Bereich des Pfades, der ansonsten ja nicht sichtbar ist, farblich hervorgehoben. Außerdem änderst du Größe und Position des Pfades oder erstellst neue Pfade. So kannst du ein Polygon hinzufügen und dieses direkt im Browser zeichnen. Später kopierst du die Werte der Form und fügst sie in deinen eigenen Quelltext ein.

Wer den kostenlosen Editor Brackets verwendet, den wir dir in diesem Beitrag vorstellten, findet an dieser Stelle eine entsprechende Erweiterung, um CSS Shapes komfortabel erstellen und bearbeiten zu können.

Eine beeindruckende Demo zur Verwendung von CSS Shapes gibt es bei Adobe: Alice in Wonderland.

Browserunterstützung

Derzeit unterstützen Chrome, Safari und Opera die Eigenschaft „shape-outside“. Firefox, Internet Explorer und Edge können mit CSS Shapes noch nichts anfangen.

(dpe)

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Sonstige Programme Webdesign

Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Adobe: Flash ist tot, es lebe Animate CC

HTML5 Canvas und WebGL

Wer Flash CC tatsächlich noch installiert hatte, bei dem wird es sich mit einem Update automatisch verabschieden. Denn das alte Flash CC wird durch das neue Animate CC ersetzt. Aber um allzu große Veränderungen muss sich niemand Sorgen machen. Beim Öffnen von Animate CC stellst du schnell fest, dass das Allermeiste doch beim Alten geblieben ist: Die Bühne und Zeitleiste sind ebenso geblieben, wie die restlichen Arbeitsbereiche.

animate-cc_buehne-zeitleiste
Gewohnte Bereiche: Bühne und Zeitleiste

Auch die Dateiendung „.fla“ ist geblieben, um Projekte zu speichern. Die erste große Neuerung entdeckst du, wenn du ein neues Dokument anlegst. Beim Dokumenttyp werden dir noch vor verschiedenen ActionScript- und AIR-Dokumenten die beiden Formate HTML5 Canvas und WebGL vorgeschlagen – beides zeitgemäße Formate, die von allen modernen Browsern unterstützt werden.

animate-cc_neu
HTML5 Canvas und WebGL stehen nun im Mittelpunkt

Hast du dich für eines der Formate entschieden, legst du wie gewohnt los. Das Schöne am neuen Animate CC ist, dass (ehemalige) Flash-Entwickler sich schnell zurechtfinden, da sich ansonsten wenig geändert hat. Du kannst Grafiken und Texte auf der Bühne platzieren, Movieclips und Schaltflächen erstellen, Instanzen anlegen und Animationen auf die Zeitleiste bringen.

Auswahl der richtigen Scriptsprache: ActionScript oder JavaScript

Das Besondere an Flash war immer die eigene Programmiersprache ActionScript, mit der du Animationen steuern und Funktionen ausführen konntest. ActionScript steht dir weiterhin zur Verfügung. Aber mit den neuen Formaten HTML5 Canvas und WebGL ist vor allem JavaScript gefragt. Über das Aktionenfenster kümmerst du dich weiterhin um deine Programmierung – sei es in mit ActionScript oder JavaScript.

animate-cc_aktionen
ActionScript oder JavaScript für HTML5 Canvas und WebGL

Für viele oft genutzte Funktionen stellt dir Animate CC eine ganze Reihe von Codefragmenten zur Verfügung. Diese sind nun gegliedert in ActionScript, HTML5 Canvas und WebGL. Zu den Codefragmenten gehören Aktionen zum Öffnen von Websites, sowie zur Steuerung von Animationen. Du wählst einfach ein Fragment aus, welches in der Zeitleiste oder auf ein Objekt angewendet wird.

Außerdem steht dir für HTML5-Canvas-Projekte das Framework CreateJS zur Verfügung. Hiermit erstellst du komplexe Formen und Animationen direkt per JavaScript.

Veröffentlichen von Animate-Projekten

Wie schon bei Flash muss beim neuen Animate CC dein fertiges Projekt veröffentlicht werden. Hierzu generiert Animate CC ein HTML-Dokument und die dazugehörigen Dateien. Hast du HTML5 Canvas gewählt, wird neben dem HTML-Dokument, welches das Canvas-Element enthält, eine JavaScript-Datei mit der Programmierung erstellt.

Bei WebGL werden mehrere Dateien angelegt. Neben dem HTML-Dokument ist eine WebGL-Bibliothek erforderlich, die durch Animate CC erstellt wird, sowie verschiedene JSON-Objekte und Grafikdateien.

animate-cc_veroeffentlichen
Veröffentlichungseinstellungen für HTML5 Canvas

Wenn du zunächst erst einmal die beiden neuen Formate HTML5 Canvas und WebGL kennen lernen möchtest, findest du einige Vorlagen, die du zum Erstellen neuer Dokumente verwenden kannst.

Animate CC jetzt mit Typekit und Adobe Stock

Zu den weiteren Neuerungen von Animate CC gehört, dass die beiden Adobe-Dienste Typekit und Adobe Stock ein fester Bestandteil von Animate CC geworden sind. Wurden bei Flash Schriften einfach eingebettet, müssen bei den neuen Formaten Webschriften her. Hier bietet es sich natürlich an, dass Adobe seinen eigenen Schriftendienst Typekit integriert.

Zu seiner Nutzung musst du einfach die URL der Website angeben, auf der das Projekt zu finden ist. Animate CC bindet dann automatisch die aus Typekit gewählten Schriften ein. Die Verwendung von Adobe Stock funktioniert ähnlich wie in anderen CC-Anwendungen. Du wählst direkt aus der Anwendung heraus ein Bild aus Adobe Stock und platzierst es in deinem Dokument.

Und Flash gibt es auch noch

Zu guter Letzt sei noch erwähnt, dass du natürlich weiterhin ganz klassisch Flash-Inhalte entwickeln kannst. Auch wenn das Flash-Format keine große Rolle mehr spielt, ist es noch nicht tot. Zumindest im Bereich der Spiele-Entwicklung hat es derzeit noch einen gewissen Stellenwert. So sind ein Großteil der Facebook-Spiele beispielsweise noch mit Flash realisiert.

Aber es ist nur eine Frage der Zeit, bis Flash gänzlich verschwindet. Einen Schritt dorthin ist Adobe mit seinem neuen Animate CC gegangen.

Hast du es dir schon angeschaut? Was hälst du persönlich davon?

(dpe)

Kategorien
Design Editoren

LightCMS: Homepage-Baukasten der Extraklasse

Es gibt keinen Mangel an Content Management Systemen (CMS), die dir helfen, deine eigene Website zu erstellen. Und wo wir gerade von Content Management Systemen reden, sollten wir nicht vergessen, dass immer mehr Online-Homepage-Baukästen im Kern ebenfalls CMS-Funktion haben und dabei einige Funktionen und Dienste beinhalten, die in ihrer Nische einzigartig sind. In diesem Artikel werden wir uns mit einem solchen Homepage-Baukasten mit CMS-Funktionalität befassen: LightCMS.

LightCMS: Homepage-Baukasten der Extraklasse

LightCMS: Homepage-Baukasten der Extraklasse

Was ist LightCMS?

LightCMS ist ein Homepage-Baukasten, mit dessen Hilfe du Websites in einer einfachen, intuitiven Benutzerumgebung erstellst. LIghtCMS kann für jede Art von Website verwendet werden, sei es ein Blog, ein Online-Shop, ein Online-Portfolio oder was dir sonst so einfällt.

LightCMS macht dir diese Dinge – wie der Name schon erahnen lässt – leicht. Allerdings bedeutet der leichte Umgang mit LightCMS nicht, dass bestimmmte Funktionen fehlen würden oder dass du dein Design nicht vernünftig individualisieren könntest. Im Gegenteil, nur deine Fantasie ist die Grenze. Zudem ist alles, was du mit LightCMS baust, vollständig responsiv und somit mobilfreundlich.

lightcms-main

Und auch das ist noch nicht alles. LightCMS bietet ein ganzes Set an individuellen Vorlagen, die du auswählen und an deine Bedürfnisse anpassen kannst. Wenn das nichts für dich sein sollte, bietet LightCMS dir als fortgeschrittenem Nutzer die Möglichkeit, den Source-Code (HTML, CSS oder JavaScript) zu bearbeiten, damit du deine Website vollkommen nach deinem Geschmack gestalten kannst. Zu diesem Zweck enthält LightCMS einen leistungsfähigen Code-Editor.

Inhalte und Design-Elemente sind innerhalb von Minuten durch die Point-und-Klick-Oberfläche zu deinen Seiten hinzugefügt. LightCMS bietet auch Drag und Drop direkt im Frontend. Die Vorschau ändert sich schon während du arbeitest in Echtzeit. LightCMS unterstützt alles, was du auf deiner Seite darstellen wollen könntest: Bilder, Medien, Blog-Posts, Foto-Galerien, individuelle Formulare und viel mehr.

lightcms-store

Wenn du planst, einen Online-Shop zu eröffnen, bietet LightCMS spezialisierte Werkzeuge und Funktionen, um dich dabei bestmöglich zu unterstützen. Du kannst schnell Produkte hinzufügen und jegliche Kombinationen an physischen oder digitalen Gütern direkt aus deinem Shop verkaufen. LightCMS bietet einen sicheren Einkaufswagen und einen ausgereiften Checkout-Workflow, während es außerdem Zahlungen bearbeitet und dir die Kommunikation mit deinen Kunden über die CMS-Oberfläche ermöglicht.

Bevor du fragst: LightCMS kommt standardmäßig mit SEO-Funktionen. Es enthält automatisierte XML-Sitemaps, Open Graph-Metadaten und Tags, URLs mit hoher Keyword-Dichte, 301 Redirects, robots.txt Daten und auch die Einbindung von Analytics oder anderen Statistiken für deine Website.

Da LightCMS ein gehostetes CMS ist, nimmt es dir den Aufwand zusätzlichen Webhostings ab. Deine Inhalte werden auf sicheren und redundanten Cloud-Servern mit garantierter Uptime und skalierbarer Performance gespeichert. Du brauchst dich nicht um Dinge wie Installation, Upgrades oder Fehlerbehebung kümmern, da LightCMS als Cloud-Anwendung stets auf dem neuesten Stand gehalten wird. Der anfallende Traffic ist im Paket enthalten. So kannst du dich entspannen und dich ganz auf die Erstellung und das Management der Inhalte deiner Website konzentrieren.

lightcms-ecomm

Kosten

Bei LightCMS wählst du zwischen verschiedenen Angebotsvarianten, die bei 19 Dollar beginnen und bis zu 99 Dollar für den „Unlimited Plan“gehen. Die tatsächlichen Kosten hängen von der Zahl der SEiten, dem benötigten Speicherplatz und den benötigten Zusatzprodukten ab.

Alle Pläne bieten sämtliche Standard-Funktionen, wie Galerien, Blogs, Formular-Builder, Kalender etc. Außerdem gibt es SEO-Funktionen, Premium-Hosting, die Option, individuelle Domains zu nutzen und alle anderen Angebote von LightCMS oben drauf.

Bedenke, dass, wenn du einen Blog erstellst, die Seitenbeschränkung nicht für die Blog-Posts gilt; mit anderen Worten, deine Artikel werden nicht als Seiten gezählt.

Fazit

LightCMS ist ein vielseitiges Werkzeug, mit dem du Webseiten innerhalb von Minuten bauen kannst. Auch wenn der Trend momentan in Richtung selbst-gehostete CMS, allen voran WordPress geht, haben Homepage-Baukästen einen wachsenden Markt und eine ebensolche Zielgruppe.

Wenn du zum Beispiel vor hast, schnell online zu gehen, ohne dich mit den Mühen des Webhostings rumschlagen zu müssen, ist LightCMS sicherlich eine gute Wahl. Es kümmert sich sowohl um Webhosting, Software-Wartung und Updates, als auch um alle anderen technischen Aufgaben. So erlaubt es dir, dich auf die Gestaltung deiner Website zu fokussieren.

Aber was ist, wenn du ein Webentwickler bist? Ist LightCMS etwas für dich? Solltest du nicht lieber etwas suchen, dass dir absolute Freiheit gibt und was du auf deinem eigenen Server nutzen kannst?

LightCMS hat einen besonderen Plan exklusiv für Entwickler. Du meldest dich bei LightCMS an und erhältst die Möglichkeit, LightCMS als Basis zu verwenden, um Webseiten für deine Kunden zu erstellen. Du kannst dein eigenes Preismodell einrichten und, unter anderem, erhältst du einen SFTP-Zugang, um schnell loslegen zu können. Auch hier gilt natürllich, dass du dich nicht um die nervigen Aufgaben wie Upgrades, Server-Probleme, etc. kümmern musst. All das erledigt LightCMS für dich.

Als Entwickler kannst du in LightCMS mit HTML und CSS arbeiten und sogar den Quelltext modifizieren, um ein ganz bestimmtes Design umzusetzen. LightCMS erlaubt dir sogar die Rechnungsstellung an deine Kunden dirtekt aus der Anwendung heraus und gibt dir somit noch mehr Zeit für die tatsächliche Webentwicklung.

Dadurch ist LightCMS eine ideale Wahl, wenn du eine gehostete Lösung suchst, die nicht die Welt kostet und gleichzeitig reichlich Funktionen und Werkzeuge zur Verfügung stellt, mit denen du Websites erstellen kannst, ohne dich um Upgrades und Webhosting sorgen zu müssen. Wichtiger ist jedoch, dass LightCMS dich nicht auf irgendeinen proprietären Code oder eine Programmiersprache bschränkt – alles ist in HTML oder CSS und du kannst auch mit dem Quellcode rumspielen. So hast du die Freiheit, alles auf deine Weise zu machen, wenn du mit LightCMS arbeitest.

Kennst du LightCMS bereits? Wenn nicht, solltest du es auf jeden Fall einmal ausprobieren. Welche Lösung setzt du ein?

Links

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Editoren Webdesign

So zeichnest du SVG online mit der Web-App Method Draw

Adobe Illustrator und auch das kostenlose Inkscape beherrschen SVG und können Vektorgrafiken in diesem Format abspeichern. Doch es geht auch ohne. Mit der Webanwendung Method Draw zeichnest du Vektorgrafiken ähnlich wie in einer klassischen Desktopanwendung und kannst diese direkt im Browser testen. Neben SVG beherrscht Method Draw das bitmap-basierte PNG-Format.

So zeichnest du SVG online mit der Web-App Method Draw

Übersichtliche Bedienoberfläche für schnelles Zeichnen

Wenn du Method Draw in deinem Browser aufrufst, stellst du fest, dass die Webanwendung sich von der Bedienoberfläche eines klassischen Zeichenprogramms nicht allzu sehr unterscheidet. Sie ist nur deutlich aufgeräumter und reduzierter. In der Werkzeugleiste findest du die üblichen Tools, um Linien, Rechtecke und Ovale zu zeichnen. Außerdem gibt es einen Stift zum Freihandzeichnen und ein Pfadwerkzeug, um beliebige Polygone und Bézierkurven erstellen zu können.

Über eine Formenbibliothek hast du Zugriff auf eine Vielzahl unterschiedlicher vordefinierter Formen, die in zwölf Kategorien sortiert sind. Dazu zählen Basisformen wie Sterne, regelmäßige Polygone, Kreuze, Sprechblasen und Pfeile. Darüber hinaus findest du verschiedene Symbole zu Themen wie Wetter, Musik und Natur. Hast du dir eine dieser fertigen Formen auf die Zeichenfläche gezogen, kannst du sie natürlich nach Belieben verändern.

method-draw_library
Formen aus Bibliothek auswählen

Über eine Farbauswahl kannst du die Füll- und Rahmenfarbe einer Form definieren. Zusätzlich besteht natürlich die Möglichkeit, die Rahmenstärke und -art (durchgezogen, gepunktet oder gestrichelt) anzugeben.

Jede Form kannst du frei auf der Zeichenfläche platzieren, skalieren und drehen. Auch einen Unschärfefilter gibt es, den du auf eine Form anwenden kannst.

SVG mit Method Draw: Quelltext bearbeiten

Im Gegensatz zu Illustrator und Inskscape besitzt Method Draw einen eigenen Quelltexteditor. Über diesen kannst du dir jederzeit den generierten SVG-Quelltext deiner Zeichnung anschauen und diesen auch bearbeiten.

method-draw_quelltext
Integrierter Quelltexteditor

Auf diese Weise fügst du sehr schnell eigenen SVG-Quelltext ein oder änderst bestehenden Quelltext, um beispielsweise manuell eine Form zu bearbeiten. Das Ergebnis deiner Bearbeitung wird anschließend direkt in Method Draw umgesetzt.

Speichern als Data-URL

Willst du eine fertige Form speichern, bietet dir Method Draw die Zeichnung nicht als SVG-Datei zum Herunterladen an. Stattdessen wird die Datei als Data-URL direkt im Browser dargestellt. Das hat durchaus Vorteile. Denn oftmals werden eigenständige SVG-Dateien gar nicht benötigt. Vielmehr bindet man den SVG-Quelltext häufig direkt in ein HTML-Dokument ein. Da ist der Umweg, sich den Quelltext aus einer Datei herauszukopieren, eigentlich überflüssig.

Neben dem SVG-Format beherrscht Method Draw das PNG-Format. Das eignet sich beispielsweise als Fallback für alte Browser. Auch hierbei wird die Datei nicht zum Herunterladen angeboten, sondern als Data-URL im Browser dargestellt.

SVG: Dateien öffnen und Dateien importieren

Wer bereits SVG-Dateien hat, die er mit Method Draw bearbeiten möchte, kann diese einfach hochladen und importieren. Die Anwendung öffnet diese und stellt sie in der Zeichenfläche zum Bearbeiten dar.

method-draw_file
Speichern, Importieren und Exportieren

Ebenfalls ist es möglich, SVG-Dateien und verschiedene Bitmap-Formate in die Zeichenfläche zu importieren. Bitmap-Dateien, wie JPEG und PNG, werden über das <image>-Element als Data-URL in der SVG-Grafik gespeichert.

Fazit

Method Draw ist eine gute Alternative zu klassischen Desktopanwendungen für Webdesigner, wenn es ums SVG-Format geht. Vor allem die direkte Bearbeitbarkeit des Quelltextes im Programm und der Verzicht auf klassisches Speichern in Dateien ist ein interessanter Ansatz. Denn gerade beim SVG-Format wird der Quelltext oft direkt in andere Dateien implementiert, so dass eine eigene Datei gar nicht notwendig ist.

Method Draw ist kostenlos nutzbar und erfordert keine Anmeldung. Außerdem steht der Quelltext unter der MIT-Lizenz jedem zur Verfügung.

(dpe)

Kategorien
Design Editoren Webdesign

Schnell und einfach: Mobile Micro-Sites erstellen mit adsy.me

Das Internet wird mobiler und entsprechend müssen auch Websites den Anforderungen des mobilen Webs entsprechen. Mit adsy.me kann sich jeder innerhalb weniger Minuten seine eigene kleine mobile Micro-Site zusammenstellen. Dank HTML5 und CSS3 sind animierte Übergänge sowie Audio- und Video-Einbindungen problemlos möglich.

adsy-teaser_DE

Schnelle Registrierung, einfacher Start

Um adsy.me nutzen zu können, muss ein Benutzerkonto angelegt werden. Hierzu bedarf es nur einer E-Mail-Adresse und eines Benutzernamens. Anschließend kann man mit der Gestaltung der ersten Micro-Site beginnen. Wer zum Einstieg eine kurze Einführung braucht, findet ein Quick-Intro-Video, das die Möglichkeiten von adsy.me in aller Kürze vorstellt.

adsyme_text
Texte erstellen und gestalten

Im ersten Schritt wählt man eine Hintergrundgrafik oder -farbe für seine Micro-Seite aus. Eine Bilddatei kann dabei hochgeladen oder alternativ aus einer Bibliothek ausgesucht werden. Anschließend lassen sich beliebige Inhalte platzieren. Möglich sind Texte, Bilder und sogenannte Sticker. Der Dienst bietet eine Reihe von Schriftarten an und erlaubt es, Textfarbe und -ausrichtung zu bestimmen. Bei den Stickern handelt es sich um Icons, die man ebenfalls aus einer Bibliothek auswählt. Auch hier lassen sich Farbe, Platzierung und Größe frei definieren.

Links mit Pinsel „malen“

Micro-Site heißt im Falle von adsy.me nicht, dass nur eine Seite pro Site möglich ist. Es lassen sich durchaus mehrere Seiten anlegen, individuell gestalten und mit Inhalt befüllen. Über Pfeil-Buttons oder per Wischgeste wechselt man zwischen den einzelnen Seiten.

adsyme_link
Links malen

Selbstverständlich können auch Links angelegt werden. Dabei wird mit einem Pinsel eine Fläche markiert, die als Link ausgewiesen werden soll. Als Link kommen interne und externe Verweise ebenso in Frage wie E-Mail-Adressen, Telefonnummern und Verweise zu Webdiensten wie Twitter. Das „Malen“ von Links per Pinsel ist etwas gewöhnungsbedürftig, ermöglicht aber eine freie Platzierung der Links.

Videos und Audios einbinden

Neben einfachen Text- und Bildinhalten können auch Video- und Audiomedien eingebunden werden. Das Hochladen eigener Mediendateien ist zwar nicht möglich; dafür lassen sich YouTube-Videos und SoundCloud-Audios integrieren. Über eine Suche wählt man direkt bei YouTube beziehungsweise SoundCloud aus und implementiert so die entsprechendem Video- beziehungsweise Audiomedien. Diese werden als Button oder Vorschaubild angezeigt. Per Klick auf den Button beziehungsweise das Bild wird die Medienwiedergabe innerhalb eines Layers, der über die Seite gelegt wird, gestartet.

adsyme_video
Einbindung eines Videos aus YouTube

Darüber hinaus besteht auch die Möglichkeit, Google Maps oder Google StreetView einzubinden. Hierzu wird eine Adresse übergeben, welche in einem Kartenausschnitt gezeigt werden soll.

adsyme_maps
Einbindung von Google Maps

Feste Menüleiste mit sozialen Funktionen

Der Inhalt der Micro-Site ist weitestgehend frei definierbar. Allerdings wird bei jedem Projekt eine feste Menüleiste von adsy.me am oberen Rand der Site eingebunden. Über die Menüleiste gelangt man zur Startseite des Dienstes adsy.me. Dort erreicht man beispielsweise andere von Nutzern erstellte Micro-Sites.

adsyme_vorschau
Vorschau mit adsy.me-Menüleiste

Über die Menüleiste ist es zudem möglich, einer Site zu folgen und diese zu teilen. Außerdem gibt es zu jedem Benutzer eine Profilseite mit allen Micro-Sites, die dieser angelegt hat.

Kostenloser Dienst – „für immer“

Das Angebot von adsy.me ist kostenlos und soll laut eigenen Angaben des Betreibers „für immer kostenlos“ bleiben. Insgesamt macht adsy.me einen guten Eindruck. Die Bedienung ist sehr einfach und die Ergebnisse können sich durchaus sehen lassen. Die Micro-Seites von adsy.me werden keine klassischen Websites ersetzen können. Dazu sind die gestalterischen und technischen Möglichkeiten doch zu eingeschränkt.

Aber das ein oder andere kleine Projekt kann man damit realisieren – falls einen die Menüleiste mit dem adsy.me-Logo nicht zu sehr stört. Über einen Link und einen zur Verfügung gestellten QR-Code kann man die Micro-Site publik machen.

Link zum Beitrag

(dpe)

Kategorien
Design Editoren HTML/CSS Responsive Design Webdesign

Kurzvorstellung: Der Pinegrow Web-Editor will das Design beschleunigen

Einer unserer Leser machte uns auf den Pinegrow Web Editor aufmerksam, einen visuellen Web-Editor zur Entwicklung von HTML-Websites. Das klang gut und war somit für uns Grund genug, dem Editor wenigstens eine Kurzvorstellung zu widmen. Pinegrow arbeitet mit den bekannten Frameworks Bootstrap, Foundation, AngularJS und anderen zusammen. Wenn Sie mit HTML-Seiten, Templates oder mit den Frameworks Bootstrap oder Foundation arbeiten, sollten Sie sich diesen Editor unbedingt anschauen, denn das Besondere an ihm ist, dass es keinerlei Code-Ansicht auf den ersten Blick gibt, sondern die komplette Entwicklung eines HTML-Templates nur noch über den visuellen Editor geschehen soll.

Pinegrow-Web-Editor

Pinegrow – Eine Einführung

Pinegrow wurde speziell für die Zusammenarbeit mit den großen und beliebten HTML-Frameworks Twitter Bootstrap und Foundation entworfen, arbeitet jedoch auch mit AngularJS und anderen Frameworks zusammen. Der Editor ist für Mac OS X, Windows und Linux (32 und 64 Bit) erhältlich und kostet €49 für die persönliche Lizenz, die dann auf bis zu drei Geräten installiert werden darf. Eine Business-Lizenz ist ebenfalls zu haben, hierfür müssen dann €79 pro Gerät aufgewendet werden. Ein Jahr Updates sind im Preis enthalten. Studenten oder Lehrkräfte bekommen den Editor zu einem reduzierten Preis von €25.

pinegrow-lizenzen

Pinegrow fügt Ihrem Projekt keinerlei eigenen Code hinzu und man muss auch keine besonderen Frameworks laden und im Anschluss auf den Server spielen. Der Editor dient nur dem Öffnen, Bearbeiten und Abspeichern Ihrer HTML-Dateien.

Test-Lizenz

Eine Test-Lizenz für 7 Tage ist erhältlich, man muss also die Katze nicht im Sack kaufen, sondern kann ausgiebig testen, ob man mit dem visuellen Editor zurecht kommt. Beim ersten Aufruf der Software bekommt man ein Fenster zu sehen, in dem man unter Eingabe einer E-Mail-Adresse den Test-Key anfordern kann. Die einzige Einschränkung, mit der man in der Testversion leben muss, ist, dass man kein HTML oder CSS abspeichern kann.

Um den Code dennoch abspeichern zu können, gibt es einen Trick: unter „Page => Edit Code“ kann man sich den Code anzeigen lassen, ihn kopieren und dann manuell außerhalb von Pinegrow abspeichern.

Pinegrow - Restriktion der Testlizenz umgehen und Code trotzdem abspeichern können

Das Video: Eine Einführung in Pinegrow

Erste Schritte mit Pinegrow

Nachdem die Software geladen und installiert ist, empfiehlt es sich, dass Kelvin Pine Test-Projekt herunter zu laden und sich damit in den visuellen Web-Editor einzuarbeiten. Am besten legt man den entkomprimierten Ordner auf dem Desktop ab und beginnt mit dem Hinzufügen per Drag und Drop der blank.html Datei in den Editor. Nachdem dies geschehen ist, wird der Plugin-Manager aufgerufen (siehe Markierung im Screenshot) und der kelvin-pine Ordner nach dem Plugin für das Test-Projekt durchsucht. Die korrekte Datei befindet sich im Unterordner „Pinegrow“ und heisst KelvinPinegrowPlugin.js. Siehe Screenshots.

pinegrow-blank.html

plugin-suchen

Nachdem das Plugin hinzugefügt ist, muss es noch aktiviert werden.

plugin-aktivieren

Ist dies einmal geschehen, kann nun die Webseite mittels Drag-und-Drop-Elementen von der linken Seite aus gefüllt werden.

pinegrow-elemente-hinzu

Sollten Sie sich noch etwas unsicher fühlen, wie man die einzelnen Elemente aufteilt und hinzufügt, dann können Sie auch eine bereits gefüllte Seite aus dem Projekt-Ordner laden und bearbeiten. Schliessen Sie dazu die blank.html und fügen Sie die index.html in das Bearbeitungsfenster ein, indem Sie die Datei einfach nur in das Fenster ziehen. Nun sehen Sie eine komplett fertiggestellte HTML-Seite, die Sie nach Herzenslust bearbeiten können.

Pinegrow mit geöffneter index.html Datei aus dem Kelvin Pine Ordner

Video: Die Arbeit mit dem Kelvin Pine Projekt

Das bietet Ihnen Pinegrow

Der Pinegrow-Editor verspricht ein schnelles Layouting mit seinen Funktionen für das Hinzufügen, Editieren, Bewegen, Klonen und Löschen von HTML-Elementen. Alles, was in Pinegrow bearbeitet wird, ist live. Es existiert keinerlei Vorschau-Modus, das Editieren und Testen der Webseite geschieht in Echtzeit. Das funktioniert auch, wenn Sie dynamische JavaScript-Elemente nutzen. Einige Funktionen im Detail:

Linke Sidebar – die Bearbeitungsfenster

Die Sidebar bietet 4 verschiedene Reiter zur Bearbeitung der Elemente. Im Standard-Reiter „Lib“ können Sie Elemente der zu bearbeitenden HTML-Seite hinzufügen. „Prob“ sorgt für die Anpassung des gerade ausgewählten Elements. Im Reiter „CSS“ beeinflussen Sie das CSS der Seite und unter „Vars“ finden Sie die Einstellungen zu den einzelnen Farben.

Die Bearbeitungsreiter der linken Sidebar

Direkte Änderungen der Elemente

Über das „Actions“-Menü, welches nach dem Markieren eines Elements erscheint, lassen sich weitere Einstellungen tätigen, wie zum Beispiel die direkte Code-Bearbeitung, die Anzeige der CSS-Regeln, die Änderung des Textes und ähnliches.

direkte-aenderungen-der-elemente

Über „Edit Code“ bekommt man direkt ein Eingabefenster für die schnelle Änderung eines HTML-Elements angezeigt.

schnelle-quelltext-aenderung

Über die Funktion „Test Klicks“ kann man auf die schnelle die korrekte Verlinkung der Navigation austesten.

test-klick-funktion

Die einzelnen Features des Pinegrow Web-Editors

Pinegrow bietet Ihnen eine einige Features, die Sie Webseiten völlig anders – vielleicht sogar schneller – entwickeln lassen, als es bisher der Fall war. Im Folgenden eine Aufzählung aller Funktionen des visuellen Web-Editors Pinegrow. Zu jedem Feature gibt es auf der Website zu Pinegrow ein erklärendes Gif, dass die angesprochenen Funktionen noch einmal visuell erklärt. Leider laufen diese Gifs nicht hier auf Dr. Web, weil dazu zusätzliches JavaScript nötig wäre, ansonsten hätten wir die Gifs verlinkt.

Framework-Unterstützung

Pinegrow bietet volle Unterstützung für Bootstrap und Foundation. Ziehen Sie Komponenten in das Bearbeitungsfenster und passen Sie sie an eigene Bedürfnisse an. Pinegrow stellt automatisch Attribute, fügt Klassen hinzu oder passt den HTML- und CSS-Code der Komponente an. AngularJS, 960 Grid und einfaches HTML werden ebenfalls unterstützt.

Die Bearbeitung multipler Seiten

Sie können mehrere Seiten zur gleichen Zeit bearbeiten, dass bietet sich besonders für responsive Projekte an. Seiten können dupliziert und gespiegelt werden, alle Änderungen in der Quell-Seite werden sofort in die gespiegelte Seite übernommen. Verschiedene Zoom-Stufen und Ansichten für mobile Geräte können eingestellt werden.

Pinegrow und der Code

Die Software versteckt den Quellcode nicht vor Ihnen, Sie können ihn jederzeit einsehen. Möglich ist auch das Entwickeln von Webseiten mit gleichzeitiger Code- und visueller Ansicht. Egal, wo Sie Änderungen tätigen, die Auswirkungen sind sofort ersichtlich. Das könnte Pinegrow zu einem guten Werkzeug für das Erlernen von HTML und CSS machen.

 Der CSS-Editor

Das CSS kann entweder visuell bearbeitet werden oder über die Codeansicht direkt. Fügen Sie Klassen, IDs und Variablen hinzu, um Themes leicht anzupassen. Nutzen Sie den integrierten Stylesheet-Manager zum Klonen, Hinzufügen und Entfernen von Stylesheets. Alle Änderungen, die Sie eingegeben haben, sind sofort auf allen Seiten zu sehen, welche dieses Stylesheet nutzen.

Gestalten Sie Ihre Webseiten responsiv

Responsive Webseiten zu gestalten, verspricht mit dem Media Query Hilfs-Tool recht einfach zu sein. Mittels benutzerdefinierten Breakpoints oder dem automatischen Auslesen der Stylesheets werden Ihre Websites responsiv. Um den Erfolg sofort nachvollziehen zu können, nutzen Sie die Einstellung für multiple Ausgabegrößen. So können Sie die normale Ansicht editieren und sehen sofort live, wie sich Ihre Änderungen auf die (zum Beispiel) Smartphone-Ansicht auswirkt.

Bearbeitung beliebiger Seiten aus dem Netz

Jede Seite, die bereits live im Web ist, kann im Editor geöffnet und bearbeitet werden. Das verschafft Ihnen den großen Vorteil, nötige Anpassungen an Ihrer Live-Website auf dem heimischen Desktop ganz in Ruhe erledigen zu können, um die Änderungen dann komplett einmal auf den Server zu laden, nachdem Sie alle Neuerungen durchgeführt haben. Fügen Sie einfach die URL zu der betreffenden Webseite, die Sie geändert wissen möchten, ein und verändern Sie die Seite. Sie können das Layout ändern, die Texte und Bilder anpassen, CSS-Regeln modifizieren und so weiter. Das modifizierte HTML und CSS kann dann auf dem Computer gespeichert und in die Live-Website integriert werden.

Benutzerdefinierte Elemente zur Baustein-Bibliothek hinzufügen

Sie können jedes Element, was Sie einmal geschrieben haben, zur Bibliothek für Bauteile hinzufügen, um dann zu einem späteren Zeitpunkt leicht darauf zugreifen zu können. Die Komponenten-Bibliothek wird als Pinegrow JavaScript-Plugin gesichert, so können Sie leicht darauf zugreifen, um etwas zu ändern, oder den Baustein mit anderen Menschen zu teilen und ihn zu verwalten.

Pinegrow zusammen mit Ihrem favorisierten Code-Editor nutzen

Laut Aussage von Pinegrow passt der Editor genau in Ihren Arbeitsablauf. Verwenden Sie ihn zusammen mit Ihrem Lieblings-Editor (mit Smart-Auto-Refresh), Quellcode-Verwaltungssystem, Paketmanager und Implementierungs-Tools. Leider ist nicht angegeben, mit welchen Code-Editoren Pinegrow gut zusammenarbeitet. Ein Austesten dieser Funktion benötigt jedoch nur wenige Minuten. Ein kurzer Test mit dem Brackets-Editor war erfolgreich.

Einige Video Tutorials zum Pinegrow Web Editor

Pinegrow ist hervorragend dokumentiert, nicht nur durch eine Online-Dokumentation, sondern auch durch etliche, sehr informative Videos. Das darf man – ohne in Jubelschreie auszubrechen – getrost als vorbildlich ansehen.

Ein Website-Layout erstellen

Eine Website mit CSS und dem Pinegrow Web Editor stylen

Multiple Seiten gleichzeitig bearbeiten

Inhalt und Code editieren

Bootstrap-Komponenten nutzen und bearbeiten

CSS Variablen und Funktionen nutzen 

Live-Webseiten aus dem Internet bearbeiten

Fazit

Der Pinegrow Web Editor bietet einen völlig neuen und interessanten Weg zum Erstellen und Editieren von HTML-Websites. Wer oft neue Designs entwerfen muss, kann von dem Editor mit Sicherheit profitieren, denn nach einem kurzen Test kann ich behaupten, dass die Entwicklung neuer Designs sehr viel Spaß macht und mit etwas Einarbeitungszeit bestimmt auch schneller als bisher geht. Schade nur, dass der Editor bis jetzt nicht für die Entwicklung von WordPress-Themes geeignet ist, aber ein entsprechendes Plugin kann von jedermann geschrieben und angeboten werden. Abschliessend bleibt mir die Empfehlung, sich den Pinegrow Web Editor einmal genauer anzusehen und für die bereits beschriebenen 7 Tage eingehend zu testen.

Links zum Beitrag

(dpe)

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Zehn frische Tools für Webdesigner und Entwickler (Ausgabe Mai 2015)

Webdesigner sind immer auf der Suche nach neuen Helferlein, die ihnen das Leben erleichtern. Dabei ist es zunächst einmal egal, um was es sich handelt. Ob es ein Online-Tool ist oder ob es sich um neue Ressourcen handelt, gebrauchen kann man fast alles irgendwann. Wir haben uns daher einmal im Netz umgesehen und neue, wirklich frische Tools aus diesem Monat für Sie ausgesucht. Dabei herausgekommen ist eine gute Mischung von Tools zum Testen von Code, ein neuer HTML-Editor und vieles mehr, von dem wir annehmen, dass es Ihnen gefallen wird.

tools-webdesigner-teaser_DE

1. Visual Studio Code

MS-Visual-Studio-Code

Microsoft öffnet sich immer weiter und produziert einen neuen und plattformübergreifenden Code-Editor. Der Editor versteht sich nicht als umfassende Entwicklungsumgebung, sondern als kleiner, aber feiner Code-Editor für alle modernen Web- und Cloud-Anwendungen. Der Editor wird für Windows, Linux und Mac OS X angeboten und soll mit Apps wie SublimeText 2 konkurrieren können, sobald die fertige Version angeboten wird. Der Editor befindet sich noch in einer „Preview“-Phase.

2. Colour Shades Generator

Colour-Shades-Generator

Der Colour Shades Generator zeigt Ihnen die optimalen Schatten-Farben für die Arbeit mit CSS-Shadows an, nachdem Sie einen Farbcode eingegeben haben. Um eine der dargestellten Farben zu kopieren, müssen Sie nur darauf klicken.

3. CSS Dig

CSS-Dig

Diese praktische Chrome Extension bietet eine alternative Möglichkeit, Ihr CSS zu analysieren und Korrekturen und Verbesserungen vorzunehmen. Alle Eigenschaften werden mit ihren Selektoren angezeigt. So findet man unter Umständen doch noch Verbesserungspotential in einer CSS-Datei.

4. Think with Paper

Think-with-Paper

Paper ist eine Zeichen-App für das iPad, mit dem Sie Diagramme mit geraden Linien, Formen und Objekte aller Art erstellen können. Freihändig sind Kreise und Dreiecke möglich, die sich jederzeit ändern lassen. Das Tool ist sehr gut dafür geeignet, um Ideen zu erfassen oder Mockups zu erstellen. Die App ist kostenlos erhältlich. Wir haben das Tool bereits in einer frühen Version ausführlicher vorgestellt.

5. HTML Arrows

HTML-Symbols-Entities-and-Codes

HTML Arrows bietet entgegen dem Namen nicht nur die Pfeilsymbole für die Nutzung im HTML-Quellcode an, sondern eine ganze Menge anderer, nützlicher Symbole ebenfalls. Diese Website sollte jeder Webdesigner und Webentwickler in seine Lesezeichen aufnehmen. Alle gebräuchlichen HTML-Zeichen sind komplett mit Code enthalten.

6. TouchDevelop

TouchDevelop

TouchDevelop ist ein weiteres Tool aus Microsofts sich öffnendem Portfolio. TouchDevelop ermöglicht sowohl Anfängern als auch erfahrenen Programmierern, Apps mit ihrem Handy, Tablet oder einer Desktop-Umgebung zu schaffen. Man kann aus drei Schwierigkeitsstufen vom Anfänger bis hin zum Profi auswählen. Die Drag-and-Drop-Oberfläche des Tools ermöglicht eine einfache Gestaltung einer App. Entwickelt wurde das Tool, um Menschen das Programmieren näher zu bringen und Ihnen einen leichten Einstieg in die App-Programmierung zu bieten. Je nach Wissensstand ersetzen Sie nach und nach die Nutzung des Drag-and-Drop-Editors durch das Einbringen eigenen Codes. Wie Visual Studio-Code ist TochDevelop ein plattformübergreifendes Angebot, das auf Android, iOS, Windows Phone, Windows, Linux und Mac verfügbar ist.

7. ES Feature Tests

ES-Feature-Tests

ES Feature Tests ermöglicht Ihnen, faktengestützt den besten Code an jeden Browser auszuliefern. Natives ECMAScript 6 geht an kompatible Browser, ein Fallback existiert. Hier finden Sie eine Kompatibilitätsübersicht. Das Tool bietet Funktionstests für jeden Browser.

8. Vorlon.js

Vorlon.JS

Debuggen und testen Sie Ihr JavaScript mit diesem Tool auf Basis von node.js und socket.io. Sie können sich remote auf bis zu 50 Geräte simultan schalten und Ihren Code ausführen, um Performance zu testen und Fehler zu beheben. Vorlon.js ist ein Weg zum Debuggen Ihres Codes auf annähernd jeder Plattform. Vorlon.js ist Open-Source und kostenlos. Plugins zur Erweiterung der Funktionalität sind ebenfalls erhältlich. Auch dieses Tool entstammt dem Microsoft-Kosmos.

9. Ionic

Ionic Framework

Ionic befand sich bereits einige Zeit im Beta-Stadium, ging jedoch in diesem Monat offiziell mit der endgültigen Version 1.0.0 ‚uranium-unicorn‘ online. Ionic ist eine Open-Source-Bibliothek mit mobil-optimierten HTML, CSS und JS Komponenten, Gesten und Tools für die Erstellung von interaktiven Apps. Entwickelt wurde Ionic mit Sass. Es ist optimiert für Angular.js.

10. RightFont

RightFont-for-Mac App

Sollten Sie extrem viele Fonts auf Ihrem Mac haben, könnte diese App für Mac OS X für Sie sinnvoll sein. RightFont ermöglicht Ihnen die Kontrolle über alle Schriftarten auf Ihrem Mac. Die App gibt Ihnen den Zugriff direkt von der Menü-Bar aus und integriert die Schriftarten in Photoshop und Sketch 3. Die Fonts können nach unterschiedlichen Kriterien organisiert werden, etwa nach Serif oder Sans-Serif, Google oder Typekit, Breite, Font-Gewicht und vielem mehr.

Links zum Beitrag

(dpe)

Kategorien
Design Editoren Essentials Exklusiv bei drweb.de HTML/CSS

Dr. Web verlost zehn Lizenzen des WebAnimator Plus

„WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen“ – So titelte Dr. Web vor genau einem Monat und stellte Ihnen eine Software vor, die nicht nur auf den ersten Blick an das gute alte Flash erinnert. Anders als der Urzeit-Bolide aus dem Hause Adobe, arbeitet der WebAnimator Plus dabei nicht mit proprietären Formaten, sondern basiert vollständig auf HTML5 und CSS3. Der Hersteller Incomedia freute sich über das gute Abschneiden seines Produkts in unserem Test und stellte uns nun zehn Lizenzen des WebAnimator Plus zur Verlosung zur Verfügung. Die Teilnahme ist – wie immer – einfach. Machen Sie mit!

WebAnimator Plus

Kollege Denis Potschien, seit zehn Jahren Webentwickler und Autor des einschlägigen Fachbuches Pure HTML5 und CSS3, zog folgendes Fazit zur Animationssoftware:

Der WebAnimator Plus ist eine umfangreiche Anwendung zum Erstellen komplexer und individueller Animationen. Der Funktionsumfang der Anwendung erlaubt es, komplette Webprojekte zu realisieren – ähnlich wie es mit Adobes Flash möglich ist. Anders als Flash setzt WebAnimator ganz auf HTML5 und CSS3, sowie auf JavaScript. Das sorgt dafür, dass Projekte auch auf mobilen Geräten laufen – und das ganz ohne Plug-ins.

Wenn Sie sich für die ausführliche Vorstellung der Funktionalitäten interessieren, versäumen Sie nicht, diesen Artikel zu lesen.

Das Executive Summary liest sich schneller:

WebAnimator Plus läuft auf Windows-Systemen, ist für 89,99 Euro erhältlich und kann vorab für zwei Wochen getestet werden. Hier bekommen Sie die Testversion. Es gibt eine ausführliche Dokumentation sowie ein deutschsprachiges Forum zum Austausch mit anderen Anwendern. Eine Seitenbau-Software, landläufig Homepage-Baukasten genannt, bietet Incomedia unter dem Namen WebSite X5 Professional 11 ebenfalls an.

10 x WebAnimator Plus: so einfach ist die Teilnahme

Genug der Vorrede, lassen Sie uns zu den Teilnahmeregeln für die Verlosung kommen. Diese sind, unsere regelmäßigen Leser wissen es, stets sehr einfach. Sie hinterlassen lediglich einen Kommentar unter diesem Beitrag. Darin teilen Sie uns kurz und knackig mit, warum Sie Interesse an dem Produkt haben. Die Teilnahme ist ab sofort möglich und endet am Mittwoch, den 20. Mai 2015 um 18:00 Uhr.

Die Gewinner werden aus allen eingegangenen Kommentaren ermittelt. Damit wir Sie im Gewinnfalle erreichen können, stellen Sie bitte sicher, dass Sie eine gültige E-Mail-Adresse zum Kommentieren verwenden. E-Mail-Adressen werden nur zur Benachrichtigung der Gewinner und zu keinem anderen Zweck verwendet.

Bleibt mir nur zu wünschen: Viel Glück!

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

Hybrid-Apps entwickeln leicht gemacht: Top-Tools und Hilfsmittel

Erinnern Sie sich noch an die Zeit, als die ersten Smartphone-Apps auf den Markt kamen? Die iPhone-3G-Werbung wollte uns damals einreden, dass es für nahezu alles eine App gäbe. Das mag zu jener Zeit vielleicht ein bisschen übertrieben gewesen sein; heute aber würde dem wohl kaum einer mehr widersprechen. Und das liegt vor allem auch an der steigenden Popularität hybrider Apps in den letzten Jahren. Da immer mehr Unternehmen auf den App-Zug aufspringen, um ihren Kunden einen noch schnelleren und bequemeren Service zu bieten, sind App-Entwickler immer gefragter. Der einzige Haken an der Sache sind die für kleine Unternehmen extrem hohen Kosten für die Entwicklung nativer Apps sowie die Code-Weiterentwicklung für andere Systeme. Das Problem für die Entwickler besteht darin, dass das Erlernen des nativen Codes und die Bereitstellung von Updates für jede Sprache extrem aufwendig sind.

hybridapps-teaser

Aus diesem Grund schwenken immer mehr Unternehmen und Entwickler auf Hybrid-App-Entwicklung um. Hybride Apps nutzen Webcode wie z. B. HTML, CSS usw., sind aber in einer nativen App eingebettet und nutzen eine spezielle Plattform, sodass die App trotzdem Zugriff auf einige native Funktionen hat. Oder wie Adam Bradley in seinem Mozilla-Artikel schrieb: „In seiner einfachsten Form ist eine Hybrid-App nichts weiter als ein Internetbrowser ohne URL-Zeile und Zurück-Button.“

Die Vorteile einer Hybrid-App:

  • Keine besonderen Fähigkeiten oder Kenntnisse nötig; Ihre vorhandenen Kenntnisse über Webentwicklung reichen völlig aus.
  • Ein Code für alle Plattformen.
  • Ein responsives Design für alle Geräte.
  • Zugriff auf einige native Funktionen des Geräts.
  • Funktioniert sowohl auf mobilen Geräten als auch auf dem PC.

Es liegt auf der Hand, dass diese Vorteile sowohl die Kosten für Kleinunternehmen als auch das Kopfschmerzpotential für Entwickler um einiges mindern können. Ich weiß sehr wohl, dass Hybrid nicht für jede App geeignet ist. Beispielsweise ist der Zugriff auf native Funktionen beschränkt und es kann durchaus schwierig sein, sie wie eine App aussehen zu lassen und auszuführen. Damit riskiert man wiederum, dass die App nicht im Apple Store aufgenommen wird. Außerdem funktionieren Hybrid-Apps manchmal nicht richtig, wenn sie zu aufgeblasen sind wie z. B. bei einem 3-D-Spiel.

03-hybrid-app-development-tools
Songhop-App – erstellt mit dem Ionic Framework.

Wenn Sie jedoch eine App erstellen möchten, die hybridtauglich ist, lesen Sie weiter. Im Folgenden finden Sie eine Auswahl der besten Tools und Hilfsmittel, die Ihrer App das Aussehen und die Funktionen einer nativen App geben. Wir stellen Ihnen nützliche Framework SDKs, Entwicklungsumgebungen, Tutorials, Richtlinien und vieles mehr für die Entwicklung hybrider Apps vor.

Richtlinien für Designstandards

Bevor Sie mit der Erstellung der App beginnen, müssen Sie sich erst mal mit den jeweiligen Designstandards eines jeden Systems vertraut machen. Im Folgenden finden Sie die Richtlinien für die App-Entwicklung für iOS, Android und Windows.

Systemschriften für Hybrid-App-Entwicklung

02-hybrid-app-development-tools
Androids Standard-Schriftart Roboto

Verwenden Sie Systemschriften, um Ihrer App ein nativeres Feeling zu geben, denn ihre Nutzer werden die Schriftart erkennen. Glücklicherweise ist es mithilfe von Schriftartenstapel relativ einfach Systemschriften in Hybrid-Apps zu verwenden. Nutzen Sie für die Hybrid-App-Entwicklung die folgenden Anleitungen und Schriftarten:

Entwicklungsumgebungen und SDKs

Wenn Sie Ihre Hybrid-App nur aus einfachen Bausteinen erstellen möchten, können Sie eine der folgenden Entwicklungsumgebungen nutzen. Beachten Sie, dass Sie trotzdem für jedes System (Android, iOS usw.) eine SDK-Plattform benötigen. Einige dieser Entwicklungsumgebungen haben bereits ein SDK, für andere wiederum benötigen Sie das SDK eines Drittanbieters.

Die Verwendung eines SDK-Frameworks für die Erstellung Ihrer App erspart Ihnen viel Zeit und Aufwand. Ein Framework erleichtert Ihnen die Erstellung einer nativ-ähnlichen Hybrid-App, da sie nicht bei null anfangen müssen.

Apache Cordova

Apache Cordova ist eine Open-Source-Sammlung von Geräte-APIs, die den Zugriff auf native Funktionen erlauben. Zusammen mit einem Framework wie einem der unten genannten können Sie eine Hybrid-App mit HTML, CSS und Javascript erstellen. Dementsprechend kann die App mit wenig bis gar keiner Codeanpassung plattformübergreifend verwendet werden. Cordova bietet auch viele Plugins für den Zugriff auf native Gerätefunktionen.

Beachten Sie, dass Sie zuerst die Cordova-Kommandozeile (CLI) herunterladen müssen, bevor Sie mit der App-Entwicklung für eine Systemplattform mit einem der unten genannten SDKs beginnen. Es bleibt Ihnen überlassen, ob Sie den Großteil der App in Cordova oder dem SDK erstellen.

PhoneGap

PhoneGap ist ein sehr beliebtes Open-Source-SDK für die Entwicklung hybrider Apps, die auf Cordova als CLI setzt. Mit diesem Framework können Sie für jede Systemplattform plattformübergreifende Apps mit HTML, CSS und Javascript erstellen. Das Adobe PhoneGap Build sammelt Ihre Apps in der Cloud, sodass Sie den Code für mehrere Plattformen wiederverwenden können. Es hat sogar eine Entwickler-App, mit der Sie Änderungen am Code direkt auf dem Smartphone nachverfolgen können.

04-hybrid-app-development-tools
Apps, die mit PhoneGap erstellt wurden.

Ionic Framework

Auch das Ionic Framework ist ein sehr beliebtes Open-Source-Framework für mobile Hybrid-Apps. Es hat eine Bibliothek mit Gesten, Tools und Komponenten für HTML, CSS und Javascript, die allesamt für die mobile Nutzung optimiert sind. Ionic wurde mit SASS erstellt und ist eigentlich für AngularJS optimiert, sodass Sie ganz einfach eine interaktive App mit dynamischer Ansicht erstellen können. Den fertigen Code können Sie dann mit Cordova nutzen.

Onsen UI Framework

Dieses Open-Source-UI-Framework basiert auf Javascript und CSS und lässt Ihre mit PhoneGap/Cordova erstellte Hybrid-App wie eine native App aussehen. Das bedeutet weniger Kopfzerbrechen für Sie. Dieses Framework ist mit jQuery und AngularJS kompatibel, hat einen eingebauten Theme-Roller, setzt auf Font Awesome, bietet fließende Bildschirmübergänge und bald auch ein Gui-Tool für Drag-and-drop.

AngularJS

Da ich dieses nützliche Toolset nun schon ein paar Mal erwähnt habe, schauen wir es uns jetzt mal etwas genauer an. Es ist mit anderen Bibliotheken kompatibel und vollständig erweiterbar, sodass Sie mit Ihrer App – über die statischen HTML-Funktionen hinaus – einen Schritt weitergehen können. Mit AngularJS sind Sie nicht auf HTML-Funktionen limitiert und können extrem schnelle dynamische Ansichten erstellen.

Appcelerator Titanium

Die Open-Source-Entwicklungsumgebung Appcelerator Titanium bietet alles, was Sie für die Erstellung plattformübergreifender nativer Apps, Hybrid-Apps und Web-Apps mit einem Javascript SDK benötigen. Titanium beinhaltet Studio – eine auf Eclipse basierende IDE, ein MVC Framework (Alloy) und Cloud-Dienste.

05-hybrid-app-development-tools
Apps, die mit Appcelerator erstellt wurden.

Xamarin

Wenn Sie C#-Kenntnisse haben, könnte dies die richtige App-Plattform für Sie sein. Mit einer Codebasis in C# erstellen Sie native Apps für iOS, Android, Windows und Mac. Bei der IDE können Sie zwischen Xamarin Studio (Windows/Mac) und Visual Studio wählen. Testen können Sie Ihre App mit C# oder Ruby. Außerdem bietet das Tool detaillierte Fehlerreports zur Überwachung der App-Performance und noch eine Menge anderer Features.

Sencha Touch

Sencha Touch erlaubt Entwicklern Hybrid-Apps mit HTML5 und Themes für verschiedene Mobilgeräte zu erstellen. Mit Sencha erstellte Apps haben durch den Zugriff auf native Funktionen eine schnellere Performance als Web-Apps, sehen aus wie native Apps und verhalten sich auch entsprechend. Außerdem können Sie auch ohne Mac eine App für iOS erstellen. Sencha bietet über 300 Icons, MVC-Support, viele UI-Elemente, Datenbindungen, Datenpakete und vieles mehr.

Trigger.io

Trigger.io wirbt damit, die einfachste Lösung für die Entwicklung mobiler Apps zu sein. Mit Trigger.io schreiben Sie HTML5-Code mit der Javascript API und haben Zugriff auf Handyfunktionen wie die Kamera und die Contacts API. Die Cloud erledigt dann den Rest für iPhone, iPad und Android. Ebenso erlaubt das Tool Webgeschwindigkeits-Updates, benutzerdefinierte Module, Hooks und vieles mehr zu nutzen. Für die Entwicklung können Sie Ihre bevorzugte IDE oder einen beliebigen Texteditor verwenden und die App mit Triggers Toolkit GUI oder Kommandozeilen-Tools zusammenbauen und testen.

Anleitungen für den App-Vertrieb

06-hybrid-app-development-tools
Google Play Store

Mit der Veröffentlichung der App beginnt bei vielen das große Zittern, da es zig Gründe gibt, weshalb sie abgelehnt werden könnte. Wenn das Ihr erstes Mal ist, sollten Sie nicht allzu hohe Erwartungen haben – die Wahrscheinlichkeit, dass es mehr als einen Versuch braucht, ist recht hoch. Damit einer reibungslosen Veröffentlichung nichts im Weg steht, sollten Sie sich die jeweiligen Anleitungen für den App-Vertrieb durchlesen:

Tutorials und Artikel

Auch wenn man bei der Entwicklung hybrider Apps auf bereits vorhandene Kenntnisse der Webprogrammierung zurückgreifen kann, gibt es doch noch viel zu lernen. Am besten klappt das, wenn man einfach mit dem Lesen beginnt – und was bietet sich da mehr an als die Anleitungen der oben genannten Frameworks? Weitere hervorragende Möglichkeiten zur schnellen Aneignung von Wissen über die Hybrid-App-Entwicklung sind Tutorials oder Einführungen wie diese:

Mit welchem Tool entwickeln Sie Ihre hybriden Apps?

(dpe)