AA_PO-24906_Karel_Miragaya_123RF.jpg

© Karel Miragaya, 123RF

Werkzeugkasten

Praktische Online-Helfer für CMS-Einsteiger

18.06.2014
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
 

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 09/2015: Paketverwaltung

Digitale Ausgabe: Preis € 4,95
(inkl. 19% MwSt.)

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

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

Tipp der Woche

Grammatikprüfung in LibreOffice nachrüsten
Grammatikprüfung in LibreOffice nachrüsten
Tim Schürmann, 24.04.2015 19:36, 2 Kommentare

LibreOffice kommt zwar mit einer deutschen Rechtschreibprüfung und einem guten Thesaurus, eine Grammatikprüfung fehlt jedoch. In ältere 32-Bit-Versionen ...

Aktuelle Fragen

Scanner EPSON Perfection V 300 photo und VueScan
Roland Welcker, 19.08.2015 09:04, 1 Antworten
Verehrte Linux-Freunde, ich habe VueScan in /usr/local/src/vuex_3295/VueScan installiert, dazu d...
Empfehlung gesucht Welche Dist als Wirt für VM ?
Roland Fischer, 31.07.2015 20:53, 2 Antworten
Wer kann mir Empfehlungen geben welche Distribution gut geeignet ist als Wirt für eine VM für Win...
Plugins bei OPERA - Linux Mint 17.1
Christoph-J. Walter, 23.07.2015 08:32, 3 Antworten
Beim Versuch Video-Sequenzen an zu schauen kommt die Meldung -Plug-ins und Shockwave abgestürzt-....
Wird Windows 10 update/upgrade mein Grub zerstören ?
daniel s, 22.07.2015 08:31, 7 Antworten
oder rührt Windows den Bootloader nicht an? das ist auch alles was Google mir nicht beantw...
Z FUER Y UND ANDERE EINGABEFEHLER AUF DER TASTATUR
heide marie voigt, 10.07.2015 13:53, 2 Antworten
BISHER konnte ich fehlerfrei schreiben ... nun ist einiges drucheinander geraten ... ich war bei...