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 03/2017: EFFIZIENTES BÜRO

Digitale Ausgabe: Preis € 5,95
(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

Probleme mit der Maus
Thomas Roch, 21.02.2017 13:43, 1 Antworten
Nach 20 Jahren Windows habe ich mich zu Linux Ubuntu probeweise durchgerungen!!! Installation - k...
KWin stürzt ab seit Suse Leap 42.2
Wimpy *, 21.02.2017 09:47, 3 Antworten
OpenSuse 42.2 KDE 5.8.3 Framework 5.26.0 QT 5.6.1 Kernel 4.4.46-11-default 64-bit Open-GL 2....
Shell-Befehl zur Installation von Scanner-Treiber
Achim Zerrer, 15.02.2017 12:13, 10 Antworten
Hallo, ich habe Einen Brother Drucker mit Scanner. Nachdem ich mit Hilfe der Community den Druck...
kiwix öffnet ZIM Datei nicht
Adrian Meyer, 13.02.2017 18:23, 1 Antworten
Hi, ich nutze Zim Desktop für mein privates Wiki. Fürs Handy habe ich mir kiwix heruntergelade...
registration
Brain Stuff, 10.02.2017 16:39, 1 Antworten
Hallo, Das Capatcha auf der Registrierungsseite von linux-community ist derartig schlecht gema...