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 08/2016: Multimedia

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

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...
Probleme beim Hochfahren der Terastaion 5400 mit Unix-Distrib
Sheldon Cooper, 10.07.2016 09:32, 0 Antworten
Hallo ihr lieben, habe seit zwei Tagen das Problem, das das NAS (Raid5) nicht mehr sauber hoch...
Mit Firewire Videos improtieren?
Werner Hahn, 09.06.2016 11:06, 5 Antworten
Ich besitze den Camcorder Panasonic NV-GS330, bei dem die Videos in guter Qualität nur über den 4...
lidl internetstick für linux mint
rolf meyer, 04.06.2016 14:17, 3 Antworten
hallo zusammen ich benötige eure hilfe habe einen lidl-internetstick möchte ihn auf linux mint i...