Webdesign unter Linux

Inhalt


1) HTML-Editoren

2) Dreamweaver & Co.

3) Flash / Animationen

4) Grafiken fürs Web

5) HTML Syntax Prüfung

6) HTML Seiten laden

7) Übertragung von HTML Seiten zum Provider

8) HTML Seiten auf anderen Betriebssystemen und Browsern

9) Weiterführende Howtos / Workshops

10) Ebooks zum Webdesign

11) Web-Softwareentwicklung


Bei den hier genannten WINE-Lösungen bitte ich darum, das Copyright zu beachten. Dreamweaver&Co. dürfen natürlich nur emuliert werden, wenn eine entsprechende Lizenz für das jeweilige Prgramm vorhanden ist.

Bei Fehlern und Unvollständigkeiten bitte PN an mich, ich werde dann umgehend ändern oder erweitern.


Änderungen:

22.06.03: Erstellung
23.06.03: Beschreibung der Flash Tools übersetzt, Emacs Link geändert
24.06.03: "The W3C MarkUp Validation Service" bei Syntaxüberprüfung zugefügt
26.06.03: Moho bei Flash / Animationen hinzugefügt, weitere Links bei Tutorials
27.06.03: Java und SVG-Wiki-Link, Curl
05.07.03: Dreamweaver MX Installation
08.07.03: Neues Kapitel Ebooks
11.07.03: Amaya hinzugefügt
12.07.03: CSS-Links hinzugefügt
10.08.03: Open Office 1.1 und Flash
30.08.03: Links überprüft und aktualisiert
31.10.03: Inhaltsverzeichnis mit Links
14.12.03: Flash 4 Linux integriert
21.12.03: Wysiwyg-Modus von Quanta, VIM-Links
22.02.04: Links überprüft und aktualisiert
14.03.04: Link auf NVU hinzugefügt
22.04.04: Jalbum, zusätzliche Howtos zu Php, Html, Css
25.09.04: Links aktualisiert
07.08.05: Links aktualisiert
30.04.06: Aktualisiert
19.09.06: NVU wird KompoZer
13.01.07: Links aktualisiert
05.04.09: Links und Inhalt aktualisiert

Ein HTML-Editor ist kein interaktives Tools wie Dreamweaver, sondern wie der Name bereits sagt: ein Editor für HTML. Daraus folgt bereits, das man ohne HTML-Kenntnisse nicht weiterkommt.

Wer aber sowie schon immer HTML lernen wollte, kann die Gelegenheit beim Schopfe packen, außer dieser Hilfe ist keine weitere Anleitung nötig:

http://de.selfhtml.org/


Bluefish

HTML-Editor für Gnome.

Homepage: http://bluefish.openoffice.nl

Bluefish läuft natürlich auch unter KDE oder auch jedem anderen Windowmanager, wenn die entsprechenden Gnome-Basisbibliotheken installiert sind. Bluefish sollte bei jeder Distribution zum Standardumfang gehören.


Quanta Plus

HTML-Editor für KDE. Seit KDE 3.4x Bestandteil des Paketes "kdewebdev".

Homepage: http://quanta.kdewebdev.org/

Quanta Plus läuft natürlich auch unter Gnome oder auch jedem anderen Windowmanager, wenn die entsprechenden KDE-Basisbibliotheken installiert sind. Quanta Plus sollte bei jeder Distribution zum Standardumfang gehören.

Quanta Plus enthält eine "Wysiwyg"-Darstellung der erstellten Homepage als Vorschau, ohne Bearbeitungsmöglichkeit. Seit KDE 3.20 / Quanta >= 3 ist es auch ein Wysiwyg-Editor.


Screem (Tip von fs111)

HTML-Editor für Gnome.

http://www.screem.org/

Bezüglich Lauffähigkeit siehe Bemerkungen zu Bluefish.


Emacs

Das flexible Editor-Allroundtalent eignet sich ebenfalls als HTML-Editor. Zum Thema Syntax-Highlighting gibt ein Howto von dragon's might:

http://www.linuxforen.de/forums/show...threadid=86156


VIM

Auch mit vim lässt sich eine Homepage erstellen. Hierzu folgende Links:

offizielle Vim-Homepage
http://www.vim.org

online User Manual (plain trxt)
http://vimdoc.sourceforge.net/

Vi(m) Tipps von Netzmeister
http://www.linuxforen.de/forums/show...threadid=18700

Vim Tipps für 'Einsteiger'
http://www.vi-improved.com/

Vim Tipps für 'Fortgeschrittene'
http://www.rayninfo.co.uk/vimtips.html

RegExen mit Vim
http://www-user.tu-chemnitz.de/~hot/VIM/VIM/regexp.html

Artikel im Linux-Magazin (Mapping)
http://www.linux-magazin.de/heft_abo...tik?category=0

Artikel auf Pro-Linux (Folding)
http://www.pl-berichte.de/t_programme/vim_fold.html

beispielhafte ~/.vimrc
http://www.michael-prokop.at/computer/config/.vimrc

(Links aus anderem Thread übernommen, Beiträge von Sartoo und McG.linux)


Diverse Testberichte

http://www.linux-magazin.de/heft_abo...uhl?category=0

Im Unterschied zu einem Webeditor, bei dem man den HTML-Quelltext selbst erstellt, steht ein Tool wie Dreamweaver. Ähnlich einem Programm wie Powerpoint bietet es eine interaktive Wysiwyg-Darstellung und Erstellung einer Homepage (kurz: grafisch, was man sieht ist das was man kriegt).

Ein Tool wie Dreamweaver erfordert keinerlei HTML-Kenntnisse. Inzwischen gibt es auch für Linux einige Alternativen.


KompoZer (früher NVU)

Vom Mozilla Composer abgeleitete Einzelanwendung. Inzwischen sehr umfangreich.

Homepage deutsch: http://www.nvu-composer.de/
Homepage englisch: http://www.kompozer.net/

KompoZer ist der Nachfolger von NVU.


Quanta

Auch Quanta (siehe unter 1) hat inzwischen einen Wysiwyg-Modus.


Amaya

Web-Authoring Tool und Browser in einem.

Homepage: http://www.w3.org/Amaya

Download: http://www.w3.org/Amaya/Distribution/

Falls es keine passende Variante für die eigene Distribution gibt, kann man die "LINUX_ELF"-Variante versuchen.

Umstellung auf deutsche Bedienerführung:

- Datei "..._doc.tgz" passend zur Version von obiger Adresse laden
- Entpacken und ins Amaya-Verzeichnis kopieren
- Programm starten, unter "Special / Preferences / General"
im Feld für Dialogsprache "en" durch "de" ersetzen


Windows Webdesign Tools

Mit Hilfe von WINE lassen sich einige Windows Webdesign Tools unter Linux betreiben.

WINE-Howto: http://www.linuxforen.de/forums/show...threadid=48347

Bei Benutzung der Tools zum Webdesign sollten auf jeden Fall die True Type Schriften von Windows im Fake Windows installiert sein. Downloadquellen und Vorgehensweise siehe WINE-Howto.

Das ganze ist aber nicht besonders stabil. Vorzuziehen ist ganz klar eine Lösung über VMWARE/Qemu oder gleich Linux Tools und HTML lernen.

Z. B. mit Qemu: http://www.linuxforen.de/forums/showthread.php?t=141201

Qemu ist dank des Beschleunigers KQEMU inzwischen sehr performant und kostenlos bis auf die Windows Lizenz. Wer eine alte Windows CD in der Ecke hat, sollte die Lösung vorziehen.


Frontpage Express

Download von FrontPage Express unter: http://www.wintotal.de/softw/index.php?rb=24&id=1792

CAB-Archiv entpacken, siehe WINE Howto. Alles nach "c:\Program Files\FrontPage" kopieren".

Die DLL Konfiguration ist abhängig von der WINE Version. Man sollte es erstmal ohne testen. Wenn es nicht geht, unter Franscorner bzw. Wine-AppDB nach Tipps schauen (Links siehe WINE-Howto).

Programm starten mit "wine fpxpress.exe"

Quelle: http://www.frankscorner.org/


Dreamweaver MX

Seit Version 2.1 von Crossover Office wird Dreamweaver MX offiziell unterstützt.

Auch hier sei für eine Lösung mit WINE auf oben genannte Adressen verwiesen.

Weitere Quelle

http://www.codeweavers.com/compatibi...ame/?app_id=14


Adobe CS-Creative Suite

Enthält u. A. "GoLive".

http://www.codeweavers.com/compatibi...p_parent=2256;
http://www.codeweavers.com/compatibi...e/?app_id=2258

3.1 Anzeige im Browser

Flash Plugin

Das Flash Plugin dient zur Anzeige von Flash Animationen im Webbrowser.


Moonlight Plugin

Moonlight ist eine auf Mono basierende Portierung von Microsoft Silverlight.


Moonshine

Moonshine ist ein Addon für Moonlight, um Windows Media Formate abzuspielen.


Browserplugins: http://www.linuxforen.de/forums/show...threadid=71244


3.2 Erstellung

Flash 4 Linux

Relativ neue Entwicklung. Ziel ist ein Programm wie Macromedia Flash.

Homepage: http://f4l.sourceforge.net/

Screenshots: http://sourceforge.net/project/scree...group_id=87799


Open Office

Open Office kann seit Version 1.1 Präsentationen im Flash Format abspeichern. Siehe auch Impress und Draw jeweils unter "Datei/Export/Format Flash/SWF".

http://de.openoffice.org/


FlashMX

FlashMX von Macromedia ist das Tool zur Erstellung von Flash Animationen, leider nur für Windows. FlashMX lässt sich aber über WINE betreiben:

Quelle: http://www.frankscorner.org/

Alternativ kann man auch Qemu versuchen statt WINE.


DrawSWF

Java Tool zur Erstellung vom Flash Animationen.

Homepage: http://drawswf.sourceforge.net/

Zur Installation von Java: http://www.linuxforen.de/forums/show...threadid=35241

Einfach eine "platform-idependent" .jar-Datei laden und mit "java -jar draw*jar" starten.


ActionScript Timeline

Homepage: http://www.shovemedia.com/chooser/index.php


Jpeg2SWF

Homepage: http://sourceforge.net/projects/jpeg2swf/

Tool zur Umwandlung von Jpeg-Bildern in das Flash Format.


Ming

Homepage: http://www.libming.org/FrontPage

Ming ist eine Bibliothek zum Schreiben von Dateien im SWF (Flash) Format.


swfdec

Homepage: http://swfdec.sourceforge.net/

Swfdec ist eine Bibliothek für das Rendering von Flash Animationen und Spielen. Im Umfang sind u. A. ein GTK+ Flash Player und ein Mozilla Plugin.


SWFTools

Homepage: http://www.swftools.org/

SWFTools ist eine Sammlung von Programmcodes zur Handhabung von SWF-Flash-Dateien. Enthalten sind:

- merging tool (swfcombine),
- extracting tool (swfextract),
- PDF/JPEG/PNG/AVI/WAV to SWF Konverter (pdf2swf, jpeg2swf, png2swf, avi2swf, and wav2swf),
- parsing tool (swfstrings)
- SWF parser (swfdump),
- Bibliothek zum Schreiben und Lesen von SWF-Dateien (rfxswflib).

Gimp

Hierzu gibt es nichts weiteres zu sagen.

Homepage: www.gimp.org

Seite mit vielen Howtos (auch deutsch), Tips&Tricks: http://www.gimp.org/docs/


KImageMapEditor

Tool zur Bearbeitung von HTML-Image Maps.

Homepage: http://www.nongnu.org/kimagemap/


Web Gallerien / Thumb Nail Pages

Hier eine Auswahl von Tools:

Kalbum (Homepage: http://www.paldandy.com/kalbum/)

Jalbum (Homepage: http://jalbum.net/, Link von Tobias Schrader)

diverse Tools: http://freshmeat.net, Einfach nach gallery suchen

Mit folgenden Tools kann die Syntax selbst erstellter HTML Seiten überprüft werden:


Emacs

Das Syntax Highlighting Feature von Emacs (Link siehe oben unter HTML Editor) eigent sich natürlich auch zur Syntax Kontrolle.


WWWValidator

Konqueror Plugin, gehört zum "kdeaddons"-Paket.


Offline HTMLHelp.com Validator

Homepage: http://www.htmlhelp.com/tools/validator/offline/


Tidy (Tip von dauni)

Homepage: http://tidy.sourceforge.net/


Onlineüberprüfung von HTML-Code

Projekt zur Online Syntax Überprüfung auf der Basis von Tidy.

Homepage: http://www.tu-chemnitz.de/urz/www/html-test.html


The W3C MarkUp Validation Service (Tip und Text von bockionline)

Offizieller Syntax-Checker des W3C. Kontrolliert auf Richtigkeit gegen frei wählbare offizielle DTDs (HTML, XHTML) und gibt zum Teil auch Erklärungen und Hilfestellung bei Fehlern. Kann sowohl lokale Dateien als auch Dateien, die sich auf einem Server befinden, checken. Für CSS (1 und 2) gibt es einen separaten Validierungsservice.

Homepage: http://validator.w3.org/

Mit den folgenden Tools können vollständige HTML-Seiten auf dem lokalen Rechner gespeichert werden:


wget + GUIs

wget ist unter Linux "das" Kommandozeilentool zum Download. Homepage: http://www.gnu.org/software/wget/

KDE Gui "kwebget": http://www.kpage.de/en/
Gnome GUI "gwget": http://projects.gnome.org/gwget/


Curl (Tip von adme)

Curl/libcurl ist ein Tool zum Transfer von Files in URL Syntax.

Unterstützte Protokolle:

HTTP, HTTPS, FTP, FTPS, DICT, TELNET, LDAP, FILE und GOPHER.

Funktionen:

HTTP-post, HTTP-put, cookies, FTP upload, Wiederaufnahme von Transfers, Kennworte, Portnummern, SSL Zertifikate, Kerberos und Proxies. Es arbeitet auf Basis von libcurl, der clientseitigen URL Übertragungsbibliothek. Es gibt Bindings/Schnittstellen zu libcurl für mehr als ein Dutzend Programmiersprachen und Umgebungen.

http://curl.haxx.se/


Firefox / Mozilla

Einfachste Lösung: Einfach rechte Maustaste und im Kontextmenü "Seite speichern untern ...". Es entsteht eine HTML-Datei (die aktuelle Seite) und ein Unterverzeichnis mit den Grafiken der Seite.

Zur Übertragung der selbst erstellten Seite braucht man einen FTP-Client. Diese gibt es unter Linux wie Sand am Meer. Hier eine kleine Auswahl:

FireFTP (Addon für Firefox, Homepage: https://addons.mozilla.org/de/firefox/addon/684)

Igloo-FTP (Homepage: http://www.littleigloo.org/software.php3)

gFTP (Homepage: http://gftp.seul.org/, Tip von mrsuicide)

FileZilla (Homepage: http://wiki.filezilla-project.org)

Eine Homepage kann unter Mozilla auf einem anderen Betriebssystem als Linux oder dem Internet Explorer ganz anders aussehen als unter Linux. Wer kein Dual Boot will, kann mit folgenden Hilfsmitteln die Kontrolle parallel zur Erstellung ausführen:


Internet Explorer / WINE

Der Internet Explorer 6.0 lässt sich mit WINE ausführen, siehe dazu auch das WINE Howto:

http://www.linuxforen.de/forums/show...threadid=48347

Nachteil dieser Lösung: Nicht alle Plugins (ActiveX) gehen, die Schriftendarstellung ist nicht Original Windows.


Virtueller PC

Qemu ist ein PC Emulator, der das parallele Ausführen eines Gastbetriebssystems ähnlich VMWARE ermöglicht. Damit kann z. B. Windows 98 parallel ausgeführt werden und die erstellte Seite im Internet Explorer begutachtet werden. Mehr dazu siehe auch:

http://www.linuxforen.de/forums/showthread.php?t=141201

Genauso geht das natürlich auch mit KVM, VirtualBox oder VMWARE. Weitere Links:

http://www.linuxforen.de/forums/showthread.php?t=87251

Die Lösung mit einer VM hat nicht die Nachteile der WINE Lösung. Die Plugins gehen und auch die Schriftendarstellung ist korrekt.

IX Tutorials

Die Zeitschrift iX aus dem Heise Verlag bietet jede Menge Webdesign-Tutorials online, siehe auch hier:

http://www.heise.de/ix/online/tutorials.shtml


mrunix Tutorials

Eine weitere gute Quelle für Tutorials ist:

www.mrunix.de

Hier gibt es auch diverse Spezialforen für z. B. HTML und PHP.


PHP

http://www.pl-berichte.de/work/php/index.html
http://www.phparchiv.de/
http://www.phpwelt.de
http://www.heise.de/ix/online/php.shtml
http://www.webmaster-resource.de/tricks/php.php


Perl

http://www.pl-berichte.de/work/perl/index.html
http://www.heise.de/ix/online/perl.shtml


HTML

http://de.selfhtml.org/
http://www.webmaster-resource.de/tricks/html.php


CSS-Cascading Style Sheets

http://www.css4you.de/
http://css.fractatulum.net/index.htm
(Links von Berufspenner)
http://www.webmaster-resource.de/tricks/css.php


SVG

Hier gibt alles zum Thema SVG (Scalable Vector Graphics)

http://www.svg.org/ (Tip von pitu)


Ruby on Rails

http://www.rubyonrails.de/tutorials


Java Howto

http://www.linuxforen.de/forums/show...threadid=35241

Hier sind einige Beiträge zu Java Download, Installation, Entwicklungsumgebungen etc.


Tools für Webdesign

Eine weitere, gute Auflistung von Webtools findet sich auch hier:

http://www.linuxartist.org/web.html (Tip von dauni)


Plugins unter Linux / Mozilla

http://www.linuxforen.de/forums/show...threadid=71244

Hier eine kleine Auswahl von Ebooks zum Thema Webdesign. Weitere lassen sich finden unter:

Programmierung: http://www.linuxi.de/ebooksprogramm.html
HTML/XML: http://www.linuxi.de/ebookshtml.html
Online-Tutorials: http://www.onlinetutorials.de/index.htm


PHP

PHP-Handbuch.

http://www.php.net/manual/de/

PHP 4 - Webserver-Programmierung für Einsteiger.
Autor: Thomas Theis

http://www.galileo-computing.de/open...uting_php4.zip


Javascript

Browserübergreifende Lösungen.
Autor: Christian Wenz

http://www.galileo-computing.de/openbook/javascript/


Java

Designmuster und Zertifizierungswissen.
Autor: Friedrich Esser

http://www.galileo-computing.de/openbook/java2/

Java für Ingenieure.
Autor: Albrecht Weinert
http://www.a-weinert.de/java4ing/java4ing.pdf

PHP

Prado: http://www.pradosoft.com/


Java

Eclipse: http://www.eclipse.org/


Google Web Apps

Entwicklungen von Webanwendungen, die auf der Google Infrastruktur laufen.

http://code.google.com/intl/de-DE/appengine/