AA_PO-24906_Karel_Miragaya_123RF.jpg

© Karel Miragaya, 123RF

Praktische Online-Helfer für CMS-Einsteiger

Werkzeugkasten

Ob Themes und Templates, Javascript oder Regexe, Responsive Design oder Typografie – der gewiefte Webdesigner erleichtert sich die Arbeit mit den zahlreichen frei im Netz verfügbaren Werkzeugen.

Als angehender Webentwickler müssen Sie nicht lange suchen, um praktische Werkzeuge zu finden, die Sie beim Design und der Umsetzung Ihrer Webpräsenz unterstützen: Der Natur der Sache gemäß finden Sie im Netz zahlreiche Webseiten, die nützliche Tools für das Gestalten und Testen von Webseiten bereithalten. Im Folgenden stellen wir Ihnen sechs besonders hilfreiche Vertreter dieser Gattung vor.

Angerichtet

Wer auf ein populäres CMS wie Wordpress, Drupal oder etwa Serendipity setzt, der muss nicht lange nach ansprechenden Templates zur Gestaltung seiner Webseite suchen: Auf den jeweiligen Projektseiten sammeln die Entwickler die von der Community erstellten freien Templates. Im Themes Directory von Wordpress unter http://wordpress.org/themes stehen beispielsweise über 2500 Wordpress-Templates zur Wahl.

Auch ohne tiefer gehende Kenntnisse zur Webentwicklung gelingt so schnell der Aufbau einer attraktiven Webseite, wenn auch Probleme oft durch Versuch und Irrtum gelöst werden müssen. Oft besteht die größte Hürde beim korrekten Referenzieren der entsprechenden Elemente im Stylesheet des Themes. Muss ich in die style.css jetzt bsp {...} schreiben, .bsp {...}, #bsp {...} oder .bsp p {...}? Und was bezieht sich eigentlich auf was?

Sollten Sie sich nur ungern auf Selfhtml.org in die Thematik der CSS-Selektoren einlesen wollen, dann finden Sie im CSS Diner unter http://flukeout.github.io eine praktische Lernhilfe zu Cascading Style Sheets. In 26 Leveln gilt es, den richtigen Selektor zu finden. Links im CSS-Editor tragen Sie Ihre Lösung ein, rechts in der HTML-Ansicht erscheint der HTML-Code der Dinge, die auf dem Tisch liegen und referenziert werden möchten (Abbildung 1).

Abbildung 1: Als Web-Einsteiger müssen Sie zuerst die Grundlagen verstehen. Das CSS Diner hilft Ihnen beim Erlernen des Umgangs mit CSS-Selektoren.

Javascript-Ablage

Die heutige Webentwicklung kombiniert HTML, CSS und Javascript. Der HTML-Code beschreibt dabei lediglich die Inhalte, die Cascading Style Sheets bestimmen das Aussehen der Webseite und mit Javascript lassen sich dynamische Elemente einbinden. Das Zusammenspiel dieser drei Komponenten fällt angehenden Webmastern schwer, auch wenn es nur ein bestehendes Template anzupassen gilt. Zum Einstieg in die Webentwicklung gilt es daher, die verschiedenen Techniken gemeinsam zu testen. Mit JS Bin (http://jsbin.com) gelingt dies sehr gut.

Die Oberfläche von JS Bin (Abbildung 2) setzt sich aus den Panelen HTML, CSS, Javascript, Console und Result zusammen, die Sie über die Kopfleiste ein- und ausblenden. Mit Ausnahme von Result und Console handelt es sich dabei um Eingabefelder. Result dagegen fungiert, wie der Name schon vermuten lässt, als Ausgabefeld, das Ihre Eingaben sofort umsetzt. Dieses Bedienlayout haben viele vergleichbare Dienste adaptiert, auch wenn sich die Ausrichtung oder Anzahl der Panels von Dienst zu Dienst unterscheidet.

Abbildung 2: Wer Webseiten entwickelt, der kann dies inzwischen auch direkt im Browser tun – mit einer webbasierten Entwicklungsumgebung wie JS Bin.

Die Menüleiste am oberen Fensterrand bietet darüber hinaus erweiterte Einstellungsmöglichkeiten. Dort speichern Sie Ihr aktuelles Bin oder setzen einen Milestone zum Archivieren. Über den Punkt Share geben Sie das aktuelle Bin frei oder lassen sich den einzubettenden Code zum Einbinden in eine andere Webseite anzeigen – so arbeiten Sie gemeinsam an einem Teil Ihrer Webseite. Hier besteht auch die Option, bekannte Frameworks wie jQuery, Mootools, YUI und viele mehr zu integrieren.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 4 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 09/2016: Ciao, Windows!

Digitale Ausgabe: Preis € 5,99
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Aktuelle Fragen

KWord Quiz
Carl Garbe, 30.08.2016 16:19, 0 Antworten
KWord Quiz lässt sich bei mir (nach einem update auf Ubuntu 16.04 LTS) nicht mehr speichern, kann...
NOKIA N900 einziges Linux-Smartphone? Kein Support mehr
Wimpy *, 28.08.2016 11:09, 1 Antworten
Ich habe seit vielen Jahren ein Nokia N900 mit Maemo-Linux. Es funktioniert einwandfrei, aber ich...
Scannen nicht möglich
Werner Hahn, 19.08.2016 22:33, 3 Antworten
Laptop DELL Latitude E6510 mit Ubuntu 16,04, Canon Pixma MG5450. Das Drucken funktioniert, Scann...
Wie kann man das berichtigen
Udo Muelle, 17.07.2016 20:39, 1 Antworten
Fehlschlag beim Holen von http://extra.linuxmint.com/dists/rosa/main/binary-i386/Packages Hash-S...
Installation Genimotion
Horst Müller, 15.07.2016 17:00, 1 Antworten
Hallo, ich kann Genimotion nicht installieren. Folgende Fehlermeldung habe ich beim Aufruf erh...