Kategorien
Boilerplates & andere Tools Programmierung

SuperPreview: Cross-Browser-Testing aus dem Hause Microsoft

Microsoft will mit „Super Preview“ die tägliche Arbeitsroutine der Webdesigner erleichtern. Mehrere Browser gleichzeitig können mit der neuen Anwendung getestet werden. Die finale Version soll sogar bei der Fehlerbehebung des Codes helfen. Die Beta-Version hält bisher allerdings nur einen bescheidenen Anteil dieser Versprechen.

Super Preview im Überblick

Super Preview ist eigentlich als Anwendung innerhalb der nächsten Version des Microsoft Expression Web geplant. Die Applikation soll Webdesignern Cross-Browser-Tests erheblich vereinfachen. Eine Site kann damit auf mehreren Browsern gleichzeitig betrachtet werden und unterschiedliche Darstellungsweisen können leichter erkannt werden. SuperPreview zeigt die einzelnen Browser-Wiedergaben nebeneinander, untereinander oder legt sie sogar übereinander. In der finalen Version soll der Webdesigner auch noch Feedback in Form von Warnungen und Scripting-Assistenten erhalten.

Die große Neuerung der Anwendung liegt in dieser gleichzeitigen Darstellung einer Site anhand verschiedener Browser. Es gibt zwar bereits viele Cross-Browser-Testing-Tools, keines bietet jedoch eine solch komfortable Lösung an. Viele Dienste beschränken sich auf Screenshots und man muss sogar mehrere Stunden auf diese Bilder warten. Hinzu kommt noch, dass man mit diesem Screenshots nur eingeschränkt arbeiten kann. Schließlich zeigen sie lediglich einen Teil der Site. Daher haben Webdesigner in der Praxis viele verschiedene Browsertypen in mehreren Versionen auf ihrem Rechner installiert. Oft müssen dazu virtuelle Systeme eingerichtet sein, da sich pro Browser (vor allem Internet Explorer) nur eine Version auf einem System installieren lässt. Jede Seite muss einzeln geöffnet und die Darstellung einzeln auf Fehler überprüft werden.

Die „Super Preview“-Beta-Version

Die Beta-Version der „Super Preview“ unterstützt lediglich Internet Explorer 6,7 und 8. Unter Windows 7 funktioniert Super Preview nur noch für IE 7 und 8. Die finale Version soll zusätzlich noch Firefox und Safari unterstützen.

Die Funktionsvielfalt des 250 MB großen Beta-Downloads beschränkt sich auf die visuellen Darstellungsformen und Vergleichsmöglichkeiten. Code-Warnungen oder -Hilfen wurden in dieser Version noch nicht umgesetzt.

Voreingestellt ist ein Split-Screen, der nebeneinander zwei Browserfenster zeigt. Die Darstellung untereinander oder nur einer Seite eines Browsers ist auch möglich. Besonders interessant ist die überlappende Darstellung der Seiten (onion skinning). Die Darstellungsformen der verschiedenen Browser werden übereinander gelegt, sodass man Unterschiede sofort festmachen kann.

Die Menüleiste ist entsprechend den wenigen Funktionen überschaubar. Man kann anhand der Buttons zwischen den verschiedenen Ansichtsmöglichkeiten wechseln, das Lineal ein- und ausblenden, einen Thumbnail der gesamen Site ein- und ausblenden, zoomen sowie im DOM-Modus (Document Object Model) zwischen der Einstellung Standard und Difference wählen. Mit der Standardeinstellung wird ein Objekt in den Browserfenstern rot umrandet. Im „Difference Mode“ wird es hervorgehoben, indem der Rest der Site verdunkelt wird. Dadurch soll der Vergleich einzelner Teile der Homepage vereinfacht werden.

Super Preview in der Praxis

Ob die geplanten Code-Funktionen der Super Preview-Anwendung für Webdesigner tatsächlich geeignet sein werden, lässt die Beta Version nicht erkennen. Schließlich ist diese auf die rein visuellen Funktionen beschränkt.

Als Cross-Browser-Tester kann das Tool jedoch den Arbeitsprozess erleichtern. Super Preview nimmt Webdesignern bereits in der Beta-Version den Aufwand ab, mittels virtuellen Systemen mehrere Versionen des Internet Explorers gleichzeitig zu installieren. Jedoch ist diese Funktion mit Vorsicht zu genießen. Microsoft weist darauf hin, dass die IE 6 Darstellungen der SuperPreview von dem tatsächlichen Ergebnis eines IE 6 Users abweichen können.

Die Nachteile der Anwendung liegen darin, dass Super Preview nur auf Windows-Rechnern läuft und der Funktionsumfang auf den Internet Explorer begrenzt ist. Auch in Zukunft wird die Browservielfalt nicht bedeutend ausgeweitet. Zwar wird die finale Version Firefox und Safari unterstützen, andere Browser wie Chrome oder Opera jedoch nicht. Ein umfassendes Cross-Browser-Testing Tool wird Super Preview somit nie werden.

Ob die neue Anwendung tatsächlichen Mehrwert für Webdesigner schafft, ist zu hinterfragen. Denn Super Preview ist darauf ausgelegt, dass man simultan überprüfen kann, ob eine Website in Browser X pixelgenau so aussieht wie in Browser Y. Doch für Webdesigner ist eine solche Übereinstimmung oft gar nicht notwendig. Vielmehr interessiert sie, ob die Site in jedem Browser gut aussieht. Dass sich dadurch die Darstellung in Browser X gegenüber Browser Y um fünf Pixel verschiebt, ist zu vernachlässigen, solange das Gesamtbild stimmt.

Zusammenfassend bleibt mit Bestimmtheit also nur der Vorteil, eine simple Variante gefunden zu haben, mehrere IE Versionen schnell zu betrachten. Und das nur, wenn Super Preview auch die tatsächliche Darstellung des IE 6 wiedergeben kann. Solange die Anwendung keine große Palette an Browsern unterstützt, wird sie nicht zum Muss für Webdesigner avancieren. Daran werden auch die geplanten Code-Funktionen nichts ändern, da professionelle Webdesigner eher selten auf Microsoft Expression Web zurückgreifen. ™

Kategorien
Boilerplates & andere Tools CMS Programmierung

Adobe InContext Editing, der Contribute-Nachfolger(?)

Kommt Adobe InContext Editing? Da stellt man seit gut zehn Jahren eine Software namens Dreamweaver her und schleichend fest, dass die Kundenwünsche sich in dieser Zeit dramatisch verändert haben. Blogsoftware und andere hostbasierende CM-Systeme drohen dem Adobe-Flaggschiff den Rang soweit abzulaufen, dass das Produkt Dreamweaver ins Wanken geraten könnte. Schon vor Jahren versuchte man daher, diesem noch jungen Trend eine Lösung entgegen zu setzen, die es ermöglichen sollte, Dreamweaver auf die Kundenseite zu transferieren, mithin eine Art CMS-Funktionalität zu bieten.

Diese Lösung nannte sich Contribute und konnte bis zum heutigen Tage eigentlich nicht wirklich seinen Durchbruch feiern. Basierend auf dem WYSIWYG-Konzept der lokalen Anwendung Contribute stellt Adobe nun auch in Europa eine fremd gehostete RIA-Anwendung namens Adobe InContext Editing vor, die Dreamweaver-Sites spürbar näher an CMS-Systeme rücken soll.

ice-live.png

Webseiten wie Word-Dokumente

Der Gedanke ist kein schlechter. Änderungen an den Inhalten einer Site sollten direkt in Optik und Layout, quasi live möglich sein. So kann prinzipiell jeder Anwender mit einem gewissen Office-Grundkenntnisstand die Inhalte der Firmenwebsite bearbeiten, ohne dass er zuvor an Schulungen teilnehmen müsste. Außerdem entfällt der Schritt, den im Backend erfassten Beitrag oder die Seite oder welches Screenelement auch immer gedanklich in die endgültige Optik zu portieren. Abgesehen davon, dass die Layoutmöglichkeiten innerhalb eines hostbasierten CMS vergleichsweise stark begrenzt sind, ist vielfach der zustande kommende Code unter dem Webstandards-Aspekten bestenfalls Mittelmaß.

Der Vorgänger und seine Probleme

Contribute, als erster Aufschlag einer entsprechenden auf DW basierenden Lösung, konnte indes nicht in allen Punkten überzeugen. Zunächst war es nicht in jedem Umfeld gewünscht, eine Software installieren zu müssen, nur um einige wenige Webseiten pflegen zu können. Dann war der Preis von rund 100 Euro durchaus ein Akzeptanzhemmnis. Das größte Problem dürfte jedoch das Handling gewesen sein.

Ich selbst habe auch vor einigen Jahren einmal einem Kunden Contribute vorgeschlagen und installiert, sowie die Site entsprechend vorbereitet. Leider konnte man seinerzeit einerseits die zu bearbeitenden Regionen der Website nur unzulänglich vor wilden Formatierungen schützen. Auf der anderen Seite wurde dem Bearbeiter ein im Zweifel zu hohes Maß an Wissen um die Vorgänge im Contribute abverlangt. Speziell die Notwendigkeit des fortwährenden Down- und Uploads von Entwurfsdateien und deren recht häufiges Scheitern liess das Vertrauen in die Contributelösung schnell schmelzen. Da die Darstellungsengine auf dem IE basierte war von echtem WYSIWYG ebenfalls nicht die Rede. Vermutlich war dieser Punkt der Sargnagel für das Contributeprojekt, zumindest, soweit es meinen Kunden betraf.

InContext Editing für Entwickler

Seit einigen Monaten steht, zunächst nur für die Nutzer in den US, jetzt aber für jeden mit einer Adobe-ID, das Nachfolgeprojekt (?) InContext Editing (ICE) bereit. ICE folgt prinzipiell der gleichen Philosophie, zumindest auf der Seite des Entwicklers. Dieser definiert editierbare Bereiche auf einer Website, hat dabei aber wesentlich mehr Kontrolle über die Edit-Funktionalität als zu Contributezeiten. So kann der Entwickler im Einzelnen entscheiden, ob der Endanwender Formatierungen anwenden darf, welche und in welchem Umfang. Zudem kann er ihn auf ein bestimmtes CSS-File limitieren. Bei sauberer Vorbereitung und Durchführung kann ein versehentliches Zerschießen der Siteoptik durch einen unerfahrenen Editoren nahezu ausgeschlossen werden.

Voraussetzung für die Anlage einer editable region ist die konsequente Verwendung des Div-Tags, da sich alle ICE-Befehle nur darauf anwenden lassen. Ältere Sites sollen dem Vernehmen nach nur eingeschränkt mit ICE funktionieren, da die Verwendung aktueller Doctypes ebenfalls zu den ungeschriebenen Voraussetzungen guten Gelingens zu gehören scheint. Durch die Funktionalität der repeatable region lässt sich mit ICE sogar eine Art Blog-, oder allgemeiner Newsseite realisieren, die noch dazu in sich frei sortierbar ist. Adobe bietet unter dieser Adresse eine entsprechende Testwebsite, die ohne Anmeldung bearbeitet werden kann.

Hat der Entwickler seine Site soweit vorbereitet, findet er im Siteverzeichnis unter includes einen Ordner namens ice, der Javascript und CSS enthält. Dieser Ordner muss hochgeladen werden, um das InContext Editing überhaupt aktivieren zu können. Im Folgeschritt wird die Site dem Adobe Webservice InContext Editing bekannt gemacht. Dazu ist ein Adobe-Konto erforderlich. Die späteren Editoren laden Sie aus dem ICE-Backend ein. Diese benötigen keine Adobe-ID. Unter dem Punkte Register Website geben Sie dem Adobe-Server im Wesentlichen die (S)FTP-Zugangsdaten zu Ihrer Website. Damit ist klar, dass ICE intern im Grunde wie Contribute mit Down- und Uploads arbeitet, dies jedoch dem User weniger transparent macht.

registerwebsite.png

InContext Editing für Anwender

Nachdem Sie entsprechende Editoren zur Bearbeitung der Site berechtigt haben, können diese, nachdem sie Ihrer Einladung gefolgt sind ohne Umstände mit der Inhalteerstellung beginnen. Für den Editoren stellt sich ICE als zweireihige Toolbar am oberen Ende des inneren Browserfensters dar. Wer acrobat.com kennt, wird sich in der markanten Optik sofort heimisch fühlen. Je nach zugewiesener Berechtigungsstufe global, wie auch den frei gegebenen Formatierungsoptionen am entsprechenden Element kann der Nutzer seinen Vorstellungen von gelungenem Content freien Lauf lassen.

Im Vergleich zu Contribute stellen sich auch auf Userseite einige Vorteile dar. ICE bedarf keiner lokalen Installation. ICE ist als Webservice konzipiert und als solcher in jedem modernen Browser nutzbar. Dadurch, dass kein bestimmter Browser als Grundlage einer eingeschränkten Anzeigeengine verwendet wird, wie das unter Contribute üblich war, ist die Darstellung am Bildschirm echtes WYSIWYG. Die Ausgestaltung als hostbasierter Service stellt zudem eine hohe Verarbeitungsgeschwindigkeit, sowie -zuverlässigkeit sicher. Hier gab es mit Contribute nach meiner Erfahrung durchaus häufig Probleme.

Der Haken mit dem Datenzugriff und den Gebühren

Allerdings liegt der Haken auch relativ deutlich zutage. ICE ist ein Service, der auf Servern des Unternehmens Adobe läuft. Während der derzeit laufenden Testphase ist der Dienst kostenlos, danach wird mit Preisen von 10 bis 20 Dollar zu rechnen sein. Dem Vernehmen nach wird nicht jeder Editor einzeln abgerechnet, vielmehr soll die Gebühr für ein Paket von bis zu fünf Domains bei einer mutmaßlich unlimitierten Nutzeranzahl gültig sein. So käme man auf eine Monatgebühr von zwei bis vier Dollar pro Domain, sofern man willens und in der Lage ist, seinen Workflow gegenüber dem Kunden klar in Richtung ICE zu positionieren. Was ich allerdings nicht wirklich als Perspektive sehen kann.

InContext Editing – für wen oder was geeignet?

Nach meiner Überzeugung ist ICE eher eine potenzielle Lösung für sehr kleine Websites mit einem einzigen Bearbeiter ohne mehr als rudimentäre Kenntnisse im Editing. Diese Projekte sind in jedoch aller Regel höchst preiskritisch und eher nicht zugänglich für die Umsetzung zusätzlicher Gebühren. Einräumen muss man jedoch, dass gerade der Bereich sehr kleiner Websites noch relativ lösungsoffen ist. Immer wieder wird in Blogs und Foren angeregt diskutiert , welches CMS-System denn nun für kleine bis mittlere Websites geeignet sein könnte. Und auch Entwickler, die bereits viele Systeme auf Tauglichkeit getestet haben, äußern sich zumeist nicht eben euphorisch für ein bestimmtes CMS, bezogen auf diesen Kundenkreis. Zu komplex ist der Funktionsoverhead offenbar sogar bei überschaubaren Softwarelösungen. Insofern kann ICE für den ohnehin mit DW arbeitenden Entwickler die naheliegendste und unaufwändigste Lösung sein. Klar sein muss dabei natürlich, dass man seine im Webserververzeichnis liegenden Daten prinzipiell Dritten zugänglich macht. Nicht wenige Kunden werden damit ein Problem haben. Solange man ICE jedoch nur für Kleinstwebsites nutzt, dürfte auch dieses Manko mangels sensibler Daten im Verzeichnis kaum eine Rolle spielen.

Schlussendlich bleibt festzuhalten, dass ICE eine moderne Lösung für ein ziemlich altes Problem ist, deren Umsetzung überdies als gelungen bezeichnet werden kann. Gerade die Verwendung von (S)FTP als quasi kleinstem gemeinsamem Nenner senkt zumindest technische Hürden auf Normalnull. Ob das Produkt außerhalb der Testphase, also im gebührenpflichtigen Normalbetrieb erfolgreich werden wird, bleibt zurückhaltend abzuwarten. Ich persönlich glaube nicht, dass es sich gegen die mannigfaltig verfügbaren CMS-Systeme wird durchsetzen können. Im Adobe-Universum hingegen nimmt es einen logisch und sinnvoll erscheinenden Platz im Zusammenspiel der Einzelprodukte ein.

Wer sich jetzt ausführlicher mit dem Thema befassen will, sei auf die entsprechende Seite in der Adobe Developer Connection verwiesen. Dort gibt es auch ein Beispielprojekt zum Download.

incontext-welcome.png

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung

Bespin – Cloudeditor für Coder

Wenn sich schon die ganze Welt ins Internet verlagert, warum dann nicht auch der Coder mitsamt seines Editors? So oder ähnlich muss die Grundüberlegung des Labs-Teams bei Mozilla gewesen sein, die zur Entwicklung eines webbasierten Code-Editors geführt hat. Bespin heißt der Kleine. Warum man ihn nach einem riesigen Planeten aus der Star Wars-Saga benannt hat, ist angesichts des Produktumfangs nicht nur auf den ersten Blick unklar. Immerhin ist der Ansatz interessant genug, um in der gebotenen Kürze einen näheren Blick darauf zu werfen.

Ohne HTML5 geht gar nichts…

Bespin soll es dem Web-Entwickler ermöglichen, von überall her auf seine individuelle IDE zugreifen zu können. Lediglich ein HTML5-fähiger Browser ist erforderlich, da Bespin wesentlich auf der neuen Canvas-Funktionalität beruht. User des IE bleiben derzeit außen vor. Allerdings kann wohl, wer den IE anders als zum reinen Kompatibilitätstest einsetzt, ohnehin kein ernsthafter Entwickler sein. Probleme werden auch aus dem Opera-Umfeld gemeldet, Safari-User sollen ebenso nicht uneingeschränkt positive Erfahrungen machen. Derzeit ist Bespin demnach eher was für den Firefox-Nutzer, der ohnehin der sympathischte aller denkbaren Netzbürger sein muss. Schließlich gehöre auch ich dazu;-)

Schnell ist er ja…

Aktuell bietet das Labs-Produkt nicht viel, das zu Begeisterungsstürmen hinreißen könnte. Immerhin muss man den Entwicklern bescheinigen, dass sie es geschafft haben, einen Editor zu bauen, der auch bei großen Dateien performant bleibt, sowohl was das Scrollen und Springen wie auch das Einfügen großer Codeblöcke betrifft. Die interne Demo läuft mit Dateien in Größenordnungen von rund 35.ooo Code-Zeilen ohne nennenswerte Verzögerungen. Damit fokussieren sich die Entwickler zunächst auf ein ganz elementar wichtiges Feature, denn wer würde schon einen Editor nutzen, der zwar massenhaft Komfortfunktionen bietet, dabei aber elendig langsam in der Verarbeitungsgeschwindigkeit ist?

Filemanagement in Mac OSX Optik

Das sogenannte Dashboard, der Startpunkt für die Projektarbeit ist nichts anderes als ein design-technisch an Mac OSX angelehnter Dateimanager mit den Funktionen, ohne die ein Dateimanager nicht zu gebrauchen wäre. Im unteren Bildschirmbereich bietet das Dashboard Informationen zu den offenen Sitzungen aller Teammitglieder, so dass jederzeit ersichtlich ist, wer gerade an welcher Datei in welchem Projekt arbeitet. Interessant am Dashboard ist die intelligente Skalierung der Inhalte. Je nach Bildschirmauflösung oder -ausschnitt reduzieren oder erweitern sich die zu einem bestimmten Punkt dargestellten Informationen. Dabei wird nicht, wie ansonsten üblich, von links nach rechts und von oben nach unten reduziert, so dass man bei kleinster Darstellung keinerlei nutzwertige Informationen mehr hätte. Vielmehr reduziert Bespin bei Skalierung den Inhalt intelligent nach dessen Bedeutung für den Coder. Ein Feature, dass ebenfalls nur unter Canvas-Nutzung möglich wurde.

Teamfunktionen still to come…

Derzeit noch nicht implementiert, aber der nächste Kernbereich der Entwicklung sind die Funktionen zur Zusammenarbeit in Entwicklerteams. Dabei werden nicht, wie in anderen Produkten üblich, Dateien schlicht gesperrt, wenn andere gerade daran arbeiten. Vielmehr wird man in Bespin simultan mit mehreren Nutzern am gleichen Code arbeiten können. Diese Integration wird soweit gehen, dass Änderungen und Ergänzungen, die ein Entwickler reintippert, direkt auch bei den anderen angezeigt werden. Man darf gespannt sein, wie die Sicherheitsmechanismen aussehen, die den Code vor der völligen Zerstörung werden retten können.

Plugins still to come…

Bislang bietet Bespin keinerlei Anreize, tatsächlich die Nutzung in Erwägung zu ziehen. Das Labs-Team setzt darauf, dass in Kürze Plugin-Autoren das Produkt massiv aufbohren werden. Dabei scheint es konzeptionell darauf hinaus zu laufen, dass Plugins auf der Cloudseite, also nicht im Browser des Nutzers installiert werden. Es wird wohl auf ein ähnliches System wie das der Gmail-Gadgets hinaus laufen. Meiner Meinung nach wäre die Öffnung hin zu Plugins, respektive AddOns, für den Browser des Anwenders die richtigere Entscheidung gewesen. Möglicherweise wäre die Bindung an Firefox dadurch noch stärker geworden, aber ein Nachteil wäre das ja nicht. Immerhin ist die AddOn-Schnittstelle des Firefox flexibel, leistungsfähig und gut dokumentiert, sowie genutzt. Auf dieser Basis hätte ich der Erwartung kurzfristiger Plugin-Verfügbarkeit jedenfalls eher folgen können. So, wie es jetzt aussieht, wird es meines Erachtens nicht nur länger dauern, bis sich das Featureset aufbohrt, es wird auch weniger breit aufgestellt sein.

Quo vadis?

Die aktuelle Version 0.1.3 bietet Zeilennummern, Syntaxhighlighting für Javascript, CSS und HTML. Über eine Kommandozeile am unteren Bildschirmrand können die verfügbaren Funktionen shell-like aufgerufen werden. So erreicht man auch manches, was per Maus noch nicht geklickt werden kann.

In der eigens eingerichteten Google-Group zu Bespin gibt es zwar ähnlich wenig zu lesen wie in der Beschreibung des Featureset, jedoch was dort steht, ist nicht uninteressant. Offenbar konnte man das Team bereits dafür interessieren, Bespin als embeddable Editor für Textareas zu konzipieren und auch die Strukturunterstützung für bestimmte Entwicklungsszenarios wie der Programmierung von FF-Addons stößt nicht auf taube Ohren. So mag man zwar eventuell das Ziel verfehlen, im Wettbewerb mit Textmate zu bestehen, jedoch könnten die Grundideen des Projekts andere Produkte deutlich verbessern helfen.

Wer selbst einmal in Bespin hineinschnuppern möchte, schaue zunächst dieses Video bei Vimeo an und logge sich dann auf der Projektwebsite ein. ™

Kategorien
Boilerplates & andere Tools Programmierung

Die große PHP-IDE-Übersicht: schneller programmieren mit Integrierter Entwicklungsumgebung

Von Alexander Makarov, übersetzt von Rene Schmidt

Jeder will produktiver werden, weniger Fehler machen und guten Code schreiben. Natürlich hängt in erster Linie alles von Ihnen ab. In den meisten Fällen können Sie mit einer integrierten Entwicklungsumgebung (Integrated Development Environment, IDE) diese Ziele leichter erreichen als ohne. Allerdings ist es nicht ganz einfach, die richtige IDE zu finden, weil es dabei viel zu beachten gibt. Und jeder Hersteller hält seine IDE für die beste.

In diesem Artikel schauen wir uns die beliebtesten PHP-IDEs näher an und vergleichen ihren Leistungsumfang. Am Ende werden wir ein Fazit ziehen und hoffentlich wissen, welche IDE Ihren Ansprüchen nahe kommt.

I am the best!

Lange Zeit habe ich nur aus Spaß in PHP programmiert. Mit Eclipse und IntelliJ IDEA habe ich Web-Anwendungen in Java entwickelt. Das sind großartige Java-IDEs. Natürlich wollte ich etwas Ähnliches für PHP haben. Die folgenden Eigenschaften halte ich für wichtig:

Eigenschaften von integrierten Entwicklungsumgebungen

1. Syntax-Hervorhebung

Gute Syntax-Hervorhebung verbessert die Lesbarkeit von Code immens. Wirklich! Schauen Sie sich das an:

Syntax-Hervorhebung

2. Code-Vervollständigung

Automatische Code-Vervollständigung soll dem Entwickler Tipparbeit abnehmen. Wenn sie auch eigene Klassen und phpDoc unterstützt, kann sie Ihnen sogar ersparen, die Projektdokumentation zu lesen.

Gute Code-Vervollständigung kann auch Tippfehler verhindern. Wenn Sie beispielsweise $cotroller-> eingeben, und es erscheinen keine Vorschläge, wird es sich wohl um einen Fehler handeln. Oh… Es das soll wohl $controller sein!

Schlechte Code-Vervollständigung kann Sie behindern, wenn zu viele Vorschläge gemacht werden oder Ihre Klassen nicht eingelesen wurden.

Code-Vervollständigung

Nett ist auch Dateinamen-Vervollständigung für HTML-Tags sowie für PHP-include() und -require()-Aufrufe.

3. Navigation

Eine der langweiligsten Aufgaben ist es, eine bestimmte Variablendeklaration oder eine Wertzuweisung zu finden. Gute IDEs können Ihnen dabei mit “Gehe zu Aktion” oder “Gehe zu Deklaration” helfen.

Eine weitere wichtige Funktion ist die Suche. Sie sollte auch bei großen Projekten schnell sein. Noch besser ist eine Suchfunktion, die wie im Firefox von Fundstelle zu Fundstelle springen kann.

Code navigation

4. Fehlermeldungen und Warnungen

Syntaxüberprüfung während der Eingabe kann verschiedene Arten von Tipp- und Programmierfehlern abfangen. Im folgenden Beispiel meldet die IDE, dass Sie einen Deklarationsoperator (=) statt eines Vergleichsoperators (==) verwendet haben:

Warning and errors

Je mehr die IDE aufspürt desto besser. Außer, die IDE macht dabei selbst Fehler.

5. Refactoring und Code-Generierung

Refactoring ist grundsätzlich das Verbessern von Code durch Umgestaltung. PHP-IDEs bieten im Vergleich zu C- oder Java-IDEs nur rudimentäre Funktionen. Aber selbst die sind schon sehr hilfreich.

Absolut grundlegende PHP-Refactoring-Funktionen:

  • “Verschieben”: Aktualisiert alle include() und require()-Aufrufe, wenn eine Datei woandershin verschoben wird.
  • “Umbenennen,”: Stellt sicher, dass ein Dateiname in allen betroffenen Dateien des Projekts geändert wird.
  • “Sicheres Löschen”: Prüft, ob eine Datei ohne Auswirkungen auf andere Projektteile gelöscht werden kann.

Refactoring

Zusätzlich zu grundlegenden Refactoring-Funktionen können manche IDEs Code für Klassenkonstruktoren, Getter-, Setter- und sogar Stub-Methoden für eine Elternklasse automatisch erzeugen.

Code generation

6. Debugging

Debugging ist nicht so entscheidend bei PHP, weil viele Entwickler sowieso einfach mit echos debuggen oder ein Tool wie FirePHP verwenden. Für komplexe Applikationen müsste man auf diese Weise aber schon viel Aufwand treiben, daher kann Debugging viele Stunden Zeit sparen.

Debugger

Wenn die IDE gut ist, stellt sie Haltepunkte für schrittweises Debuggen zur Verfügung, bei dem man sich jederzeit den Inhalt von Variablen und Eigenschaften von Objekten im Programmablauf anzeigen lassen kann.

7. Versionskontrolle

Versionskontrolle ist sowohl für einzelne Entwickler als auch für die Entwicklung in einer Gruppe sehr nützlich. Sie führt Buch darüber, wann und von wem eine Datei geändert wurde. Eine gute IDE kann die Unterschiede zwischen Revisionen visuell darstellen und erleichtert das Kopieren von Code von einer Version zur anderen, kann vorhergehende Zustände wieder herstellen und unterschiedliche Versionen einer Datei zusammenführen.

Visual diff

Eine integrierte Versionskontrolle ist bei den Alltagsaufgaben, beispielsweise Versionsvergleiche und Commits, wesentlich komfortabler als eine eigenständige Applikation.

8. Funktionen für die Client-Seite

PHP separat zu verwenden ist eher die Ausnahme. CSS und JavaScript sind eigentlich immer irgendwo in der PHP-Anwendung zu finden. Daher wäre es vorteilhaft und wünschenswert, wenn Code-Vervollständigung, Syntax-Hervorhebung und vielleicht sogar Refactoring auch für Technologien und Sprachen angewendet werden kann, die in Verbindung mit PHP genutzt werden.

HTML Code-Vervollständigung

Wie wählen Sie eine gute IDE aus?

Jede IDE bietet eine ganze Menge Funktionen. Einige sind sehr nützlich, andere nicht. Hier sind ein paar Faustregeln, eine gute IDE zu finden:

  • Probieren Sie die Kostenlosen zuerst. Vielleicht reicht deren Funktionsumfang für Sie aus.
  • Unterscheiden Sie zwischen Funktionen, die sie gerne hätten und jenen, die Sie unbedingt brauchen. Prüfen Sie dann, ob eine IDE Ihre Erwartung erfüllt.
  • Prüfen Sie, ob es Plugins gibt, welche die IDE um fehlende Funktionen ergänzen.
  • Wenn Sie eine IDE ausgewählt haben, spielen Sie erstmal eine Weile damit herum, bevor Sie ein großes Projekt damit realisieren. Vielleicht kommen Sie zu dem Schluss, dass Sie mit der IDE Ihre Gewohnheiten zu sehr umstellen müssen.

Vergleichstabelle

The great IDE filter

Zusammen mit Vladimir Statsenko, der bei der Aptana-Sektion geholfen hat, haben wir eine Vergleichsübersicht vorbereitet.

Was berücksichtigt wurde

Eclipse-basierte IDEs
PDT, Zend Studio 6, Aptana PHP und Aptana Studio Pro basieren auf Eclipse. Es gibt tausende Plugins für Eclipse, so dass Funktionen, die Eclipse nicht selbst bietet, höchstwahrscheinlich als Plugin verfügbar sind.

Eclipse-basierte PHP-IDEs waren die ersten OpenSource-IDEs mit echten IDE-Fähigkeiten, beispielsweise mächtige Code-Vervollständigung, Code-Navigation und Projekt-Unterstützung. Die meisten sind noch immer kostenlos verfügbar und sehr umfangreich.

NetBeans

NetBeans ist neu in der PHP-Szene und basiert nicht auf Eclipse. Das Programm hat einen ähnlichen Funktionsumfang wie die anderen IDEs und ist ebenfalls kostenlos. Die Entwicklung dieser IDE ist sehr offen und schnell. Das Entwickler-Blog zu verfolgen und neue Test-Versionen ist recht interessant, auch wenn es eine stabile Version 6.5 gibt.

Was nicht berücksichtigt wurde

Es gibt eine ganze Anzahl mächtiger Texteditoren wie PSPad, Notepad++, TextMate, vim und Emacs. Einige sind den IDEs recht ähnlich und können sogar besser geeignet sein, wenn einem IDEs zu überfrachtet sind und man mit den Funktionen eines Texteditors besser zurechtkommt. Es gibt zu viele gute IDEs, so dass aufgrund der Vielfalt hier nur die wichtigsten berücksichtigt werden können.

Die PHP-IDEs

Die folgenden PHP-IDEs sind in der Übersicht enthalten:

  • PDT 1
  • PDT 2.0
  • Zend Studio 6
  • NetBeans 6.5
  • NetBeans 7 (Entwicklerversion)
  • Aptana PHP
  • Aptana Studio Pro
  • Codelobster *
  • Nusphere PhpED 5.6 *

Comparison table

Die ganze Tabelle gibt es bei Google Docs (fixierte Version)

* Codelobster und Nusphere PhpED wurden nachgetragen.

Fazit

Nutzen Sie noch immer keine IDE? Sie verschwenden möglicherweise Zeit. Versuchen Sie es! Sie werden den Unterschied spüren.

Sowohl PDT-Eclipse als auch NetBeans sind gute IDEs. Wenn Sie viele Plugins benötigen, ist Eclipse die bessere Wahl. Wenn Ihnen Bearbeitungswerkzeuge und Code-Vervollständigung wichtiger sind, wählen Sie NetBeans. Die Benutzeroberfläche von NetBeans reagiert schneller als die von Eclipse.

Wenn Sie hauptsächlich HTML und CSS bearbeiten, probieren Sie Notepad++, vim, TextMate oder Emacs. Sie alle haben sehr gute HTML-Bearbeitungsfunktion und beherrschen auch einfache Code-Vervollständigung. Außerdem sind sie kleiner und schneller als ausgewachsene IDEs.

Wenn Sie viel mit Javascript machen, probieren Sie Aptana aus. Eine Alternative dazu ist das Plug-In Spket für Eclipse, welches ähnliche Funktionen anbietet. Bedenken Sie, dass IDEs nicht Ihr Denken verändern, sondern den Entwicklungsprozess beschleunigen sollen.

Kommerzielle Software vs. OpenSource

Es klingt seltsam, aber kommerzielle PHP-IDEs wie Zend Studio und Aptana Studio Pro haben keine wesentlichen Vorteile gegenüber OpenSource-IDEs wie PDT2.0 und NetBeans, die beide ebenfalls sehr gut sind. Aptana Studio Pro bietet für 99 Dollar einen guten IE-JavaScript-Debugger, SFTP, FTPS und einige andere weniger nützliche Eigenschaften.

Wie NetBeans bietet Zend Studio etwas umfangreichere Code-Vervollständigung und bessere Fehlermeldungen als PDT. Es bietet einen gut anpassbaren Code-Formatierer, Refactoring-Fähigkeiten (die NetBeans ebenfalls bietet) und Wizards für das Zend Framework. Der Preis beginnt bei 399 Dollar.

Quellen

  • PDT Project
    Offizielle Website von Eclipse PHP Development Tools (PDT).
  • Zend Studio
    Offizielle Website von Zend Studio.
  • NetBeans
    Offizielle Website von NetBeans.
  • NetBeans für PHP-Weblog
    Hier können Sie mehr über Neuerungen bevorstehender NetBeans-Versionen erfahren und über sie diskutieren.
  • Aptana
    Offizielle Website von Aptana.

Über den Autor

Alexander Makarov ist professioneller Web-Entwickler aus Russland. Er betreibt außerdem RMCreative, ein russisches Blog für Web-Entwickler, Designer und jeden, der sich für den Bau von Websites interessiert. Übersetzung von Rene Schmidt

Kategorien
Boilerplates & andere Tools Programmierung

MacRabbit Espresso – Web Development für den Mac

MacRabbit ist bekannt für seine Software „CSSedit“. CSSedit ist für den Mac in etwa das, was für den Windows-PC „TopStyle“ ist, nämlich eine ausgereifte Lösung, um hochproduktiv CSS zu schreiben. Von daher ist den MacRabbits durchaus zuzutrauen, auch eine große Websuite zusammen zu schrauben. „Espresso“ soll die heißen und erschien just in einer Public Beta. Das Featureset orientiert sich erkennbar am Platzhirschen Dreamweaver, was spontan mein Interesse weckte…

Die Produktwebsite ist vielversprechend, im Sinne von „sie verspricht viel“. Ich fasse einmal kurz nüchtern die wesentlichen Funktionen zusammen. In Espresso werden Websites als Projekt verwaltet. Die Veröffentlichung erfolgt per FTP oder S3 und ist im Großen und Ganzen vergleichbar mit Programmen wie Transmit (Mac) oder WSFTP (Win), ohne allerdings deren vollständiges Funktionsportfolio. Im Bereich des Editings bietet Espresso unterdurchschnittlich viel. Syntax-Highlighting wird nur für HTML, XML, CSS und JavaScript geboten, was mindestens mit Blick auf die fehlende PHP-Unterstützung doch etwas ärmlich anmutet. Vor allem, wo MacRabbit Espresso ausdrücklich im Bereich der dynamischen Webapplikation positionieren möchte. Die Ernüchterung stellt sich recht früh ein.

espresso-web.png

Dennoch installiere ich die Beta und konfiguriere eine Beispiel-Website. Eine schicke Optik empfängt mich, die allerdings über die gravierenden Unzulänglichkeiten im Funktionsumfang der Software nicht hinwegtäuschen kann. Espresso ist absolut nicht im Ansatz mit Dreamweaver zu vergleichen. Zwar müsste einem dies bereits angesichts des erheblichen Preisunterschieds von mehreren hundert Euro klar sein, andererseits tut MacRabbit alles, um diese dem gesunden Menschenverstand folgende Erkenntnis zu negieren.

MacRabbit legt Espresso als offene Software, also eine mit definierten APIs und Erweiterungsschnittstellen an. Und so betrachtet, mag das Konzept des Workspace, der sogenannte Sugars et cetera Sinn machen. Allerdings sind derzeit keine derartigen Erweiterungen verfügbar. Will man Espresso irgendwo in der Riege der Developmentsuiten verorten, so stellt man noch am ehesten eine Ähnlichkeit zu Coda fest. Dabei macht allerdings Coda einen deutlich durchdachteren Eindruck. Espresso will zuviel, um es letztlich abliefern zu können.

espresso-logo.png

So kann man Espresso derzeit niemandem ernsthaft empfehlen, auch wenn der Preis von rund 60 Dollar grundsätzlich keine Riesenlöcher ins Zwiebelleder reißen würde. Gerade in dieser Preisklasse gibt es allerdings genügend bessere Alternativen. Stecken Sie also neben dem Lesen dieses Artikels keinen weiteren Aufwand in den digitalen Espresso und schauen sich lieber RapidWeaver an. ™

Kategorien
Boilerplates & andere Tools Programmierung

Mono 2.0 – .Net For The Masses

Als Miguel de Icaza 2001 das Projekt Mono ins Leben rief, um das microsoft-proprietäre Framework .NET als Open Source zu re-implementieren, hielt ich ihn für einen Spinner. Als seine Firma Ximian 2003 von Novell vornehmlich wegen der PIM-Software Evolution übernommen wurde, erwartete ich eine Einstellung der Mono-Entwicklung. Umso überraschter war ich, als ein Jahr später tatsächlich die Version 1.0 erschien. Es folgte erneut eine Phase der Stagnation, in der sich das Projekt bis zum Frühjahr dieses Jahres in verschiedenen Marginalien der Version 1.2 zu verheddern schien…

Screenshot

Im Oktober ist nun die Version 2.0 erschienen und die darf man wirklich als großen Wurf bezeichnen, obwohl sie im Grunde nur eine nahezu vollständige Implementation des .Net 2.0, das ja selbst bereits wieder out of date ist, darstellt. Mono 2.0 unterstützt, über den Umfang des .Net 2.0 hinausgehend, den kompletten Sprachumfang der C# Version 3.0, was insbesondere hinsichtlich der Datenbankabfragesprache LINQ bedeutsam ist. Außerdem ist Mono 2.0 VB8-fähig, will heißen, es beinhaltet einen Visual Basic 8 Compiler.

Das wesentliche Feature des .Net 3.0, die Windows Presentation Foundation, die die Trennung zwischen Optik und Logik einer Anwendung in ein relativ einfach zu verwendendes Framework umsetzt, ist in Mono 2.0 allerdings nicht enthalten. Als zu schwierig schätzen die Entwickler gerade diesen wichtigen Teil des 3er Zweiges von .Net ein. Auch hinsichtlich der Zukunftsperspektive einer Implementierung hält sich das Projekt eher bedeckt.

Dennoch ist Mono 2.0 ein großer Wurf. Denn tatsächlich gibt es mit den Microsoft-Releases 3.0 und 3.5 zwar bereits vermeintlich wichtige Nachfolger zum .NET 2.0. Allerdings ist in Entwicklerkreisen unstreitig, dass die Drei vor dem Punkt weder der einen noch der anderen Version gebührt. Tatsächlich wären die 3er Releases funktional eher als Versionen 2.x zu deklarieren gewesen, wenn nicht Microsoft durch die schiere Versionierung eine Vorreiterrolle, eine technologische Führerschaft und ein Innovationstempo hätte suggerieren wollen, das tatsächlich so gar nicht besteht.

Mono 2.0 ist deshalb von seiner Funktionalität her näher an den aktuellen Versionen seines Vorbilds, als man an den Versionsnummern ablesen kann. Einerseits. Andererseits basiert nahezu sämtliche relevante Software, jedenfalls im Bereich der Webapplikationen, nach wie vor auf .Net 2.0. Es macht schließlich keinen Sinn, auf der jeweils aktuellsten Version des Framework zu programmieren, wenn man die neuen Funktionalitäten entweder nicht braucht oder bereits mit Bordmitteln auf andere Art und Weise realisiert hat. Gerade im Bereich der Webapplikationen ist .Net eng mit dem es beherbergenden Server verwoben. Nach dem Motto „Never touch a running system“ wird man einen Administrator stets zögerlich vorfinden, wenn es um die Nachinstallation nicht unbedingt benötigter Software-Riesen auf einem Live-Webserver geht. Und .Net ist ein wahrer Software-Riese, jedenfalls bezogen auf das bloße Datenvolumen.

Wer sich einen Überblick über den Aufwand einer Portierung von ASP.NET zu Mono verschaffen möchte, möge sich den Guide: Porting ASP.Net Applications auf der offiziellen Projektseite ansehen. Der Anpassungsaufwand besteht im Wesentlichen in der Portierung der Datenbank und ist insgesamt durchaus als überschaubar zu bezeichnen. Ich werde testweise eines meiner nächsten (kleineren) Projekte unter Mono entwickeln und hier darüber berichten.

Mono 2.0 steht neben einer Version für Windows auch für die Betriebssysteme Linux, Solaris und Mac OS X zur Verfügung und ist, anders als die Versionsnummer vermuten lässt, durchaus eine gute Wahl für die plattformübergreifende Software-Entwicklung auf dem Stand der Technik. ™

Kategorien
Boilerplates & andere Tools Programmierung

Marktübersicht WYSIWYG Web Editoren

Gar nicht so leicht, in der Welt der WYSIWYG Web Editoren den Überblick zu behalten. Jeder braucht einen, aber welcher der richtige ist, das will sorgfältig geprüft sein. Einige Überlegungen helfen dabei. Die Frage nach dem besten Programm für die Gestaltung von Web-Auftritten muss unbeantwortet bleiben. Denn zu unterschiedlich sind Vorkenntnisse, Herangehensweise und Ziele. Was sich für wen eigenen könnten, haben wir in einer Übersicht mit den wichtigsten Programme versucht darzustellen. Eine Empfehlung abzugeben ist schwierig. Vielleicht gibt es etwas zu entdecken. Die Ansprüche sind schließlich unterschiedlich.

Lese-Tipps:
Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)

Die zungenverknotende Abkürzung steht für die Formulierung „What You See Is What You Get“. Gemeint ist, dass eine Bildschirmseite, zum Beispiel Textverarbeitung oder Web-Editor, während der Bearbeitung genauso aussieht wie später beim Druck oder bei der Veröffentlichung im Web. Jedenfalls im Idealfall.

Dreamweaver (Win / Mac)
Ein guter Editor kann den Webdesigner in allen Bereichen unterstützen, Schritte und damit Zeit einsparen sowie für einen sauberen Quellcode sorgen. Dreamweaver bietet dazu zahlreiche Hilfen an. In der Tat ist Dreamweaver längst das Werkzeug Nr. 1 für Websites aller Art. See also our List of Dreamweaver Tutorials. Das Programm kostet circa 400 US Dollar (Version CS3).

Screenshot

Adobe Contribute
Ein Programm zur Pflege vorhandener Seiten. Contribute CS3 enables content authors to quickly and easily update existing websites and blogs while maintaining site integrity — with no technical expertise required. Thanks to a true WYSIWYG authoring environment, content authors and contributors can edit or update any website or blog without having to learn HTML. US$169 at Adobe.

Screenshot

Adobe Golive (Win / Mac)
Ursprünglich Adobes Flaggschiff und Vorzeigeeditor, fristet das Programm heute eine Existenz als fünftes Rad am Wagen. Golive existiert noch, immerhin schon in der Version 9. Doch selbst Adobe fragt ob man nicht am switching interessiert sei. Ending development and sales on April 28, 2008. GoLive kostet 399 US Dollar. Eine Testversion ist vorhanden. Golive erschien erstmals 1995 und hieß´damals Page Mill. Schon damals gaben die GoLive-Programmierer ihrem Produkt jene Eigenheiten mit, auf die auch heute noch eingeschworene GoLive-Nutzer zusammenschweißt. Der großzügige Umgang mit HTML-Syntax und eine ungewohnte Benutzeroberfläche mit Werkzeugleisten und Kontextdialogen verhinderten aber damals, dass GoLive als professionelles Werkzeug ernst genommen wurde. Von Von 1997 bis 1998 hieß das Programm dann GoLive Cyberstudio bis Profgramm und Hersteller von 1999 von Adobe übernommen wurden.

Screenshot

Microsoft Expression (Win)
War Microsoft früher berüchtigt für seine schlechten Editoren (Fontpage) hat sich das mittlerweile geändert. Mit Expression wandelt man in den Spuren Dreamweavers ohne diesen jedoch zu erreichen. Expression versteht sich auf Webstandards und weiß perfekt mit CSS und CSS-Layouts umzugehen. Eine 60 Tage Testversion steht zum Download zur Verfügung, für die man sich anmelden muss. Expression ist kein Frontpage Nachfolger, das ist der Microsoft SharePoint Designer. Die Studio Ausgabe mit verschiedenen anderen Programmen kostet circa 500 US Dollar. Expression allein circa 350,- US Dollar. Das Programm kann von Frontpage aus upgedated werden, das spart viel Geld.

Screenshot

NVU (Win / Mac / Linux)
Dieses Programm sollte einmal eine echte Alternative werden. A WYSYWIG-Editor for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver. Leider ist die Entwicklung schon vor Jahren zum stehen gekommen. Eine immerhin verbesserte Version existiert mit dem KompoZer.

KompoZer (Win / Mac / Linux)
Abspaltung von NVU. Die letzte Version stammt vom August 2007.

Screenshot
Wirkt etwas angestaubt: KompoZer

Amaya (Win / Mac / Linux)
Ein Programm, dass gleichzeitig browsen und editieren kann – so etwas hat man sich schon oft gewünscht. So ein Allround-Programm wurde vom W3-Konsortium geschaffen. Es heißt Amaya und ist kostenlos zu haben. Das W3C veröffentlichte das Programm, um neue Web-Technologien eines WYSIWIG-Editors zu demonstrieren. Mit Amaya lassen sich einfach Webseiten manipulieren. Es ist möglich, Texte zu verändern oder hinzuzufügen, neue Bilder oder Links einzufügen. Sofern Amaya denn diese Seiten überhaupt anzeigen kann. Mathematische Funktionen lassen sich über ein Popup-Fenster einbringen. Die Formeln können dann direkt auf einer beliebigen Webseite erscheinen. Amaya wandelt die Formeln im Hintergrund in Tags der Auszeichnungssprache Math-ML um.

Namo WebEditor 2006 (Win)
Der Namo-Editor vereint praktisch alle Werkzeuge, die für das Erstellen von Websites benötigt werden und bringt diese auf einer übersichtlichen und auch für den Laien verständlichen Arbeitsfläche unter. Die Navigationselemente sind selbsterklärend und ermöglichen ein schnelles Einarbeiten in die Programmoberfläche. Die Arbeitsoberfläche ist in drei Teile gegliedert: Design-Editor, HTML und Browser-Vorschau, was die volle Kontrolle über den Arbeitsablauf gewährleistet. Außer den typischen Arbeitsfenstern, stehen allerlei Wizards zur Verfügung. Das klingt gut, doch die WYSIWYG-Fähigkeiten des Programms sind begrenzt. Man merkt das Namo schon einige Jahre auf dem Buckel hat ohne weiterentwickelt worden zu sein. So werden etwa veraltete Font-Tags verwendet. Eine Testversion ist vorhanden. Namo kostet 99.95 Dollar.

Screenshot

Evrsoft First Page 2006 (Win)

Screenshot

Microsoft SharePoint Designer 2007 (Win)
Microsofts Frontpage Nachfolger. Es gibt einen Online Version für die man einen Internet Explorer und Geduld braucht.

Screenshot

NetObjects Fusion
Galt früher als der Editor mit den schlechtesten Ergebnissen. Fusion erzeugte grauenvollen Quellcode. Er war besonders bei Anfängern beliebt was wohl daran lag das das Programm häufig von Webhostern verschenkt wurde. Netobjects Fusion eigenet sich für alle, die auf die Schnelle zur eigenen Site kommen müssen, dafür aber wenig Aufwand treiben wollen und keine hohen Ansprüche stellen. Ideal für Visitenkarten-Auftritte kleiner Firmen. Know-how muss man nicht mitbringen, ist der Arbeit mit dem Programm aber auch nicht abträglich. Heute ist Fusion in der Version 10 angekommen und alles mag sich geändert haben, doch das Programm spielt längst keine Rolle mehr. Es gibt eine Trialversion für die man in einen Shop geschickt wird. Weshalb hier der Screenshot fehlt. Fusion kostet derzeit € 99,98.

Quanta Plus (Linux)

Screenshot

Freeway (Mac)

Screenshot

Pagebreeze

Antenna – Web Design Studio (Win)

Screenshot

SeaMonkey Composer (Win / Mac / Linux)

Screenshot

SiteSpinner (Win)
Ein veralteter Editor in der Tradition von Microsoft Frontpage. Hier nur der Vollständigkeit halber erwähnt. Er kostet 49,- Dollar.

Web page Maker (Win)

Dynamic HTML Editor

Screenshot

WYSIWYG Web Builder

Create (Mac)

Website X5 (Win)

Screenshot

Editoren für Laien, Anfänger und Werbeagenturen

iWeb (Mac)

Screenshot

Sandvox (Mac)

Screenshot

Trellian WebPage

Sitegrinder (Win / Mac)

Screenshot

Studioline Web3 (Win)
Was mit Studioline gestaltet wird, kann nur mit betrachtet werden wenn JavaScript aktiviert ist – andernfalls werden sämtliche Grafiken, Buttons und Texte untereinander oder gar nicht angezeigt. Der Quellcode ist zwar tebellenlos, jedoch von geringer Qualität und vor allem erheblich aufgebläht. Das Programm kann für 30 Tage getestet werden.

Bluevoda (Werbesoftware)

RapidWeaver (Mac)

Kategorien
Boilerplates & andere Tools Inspiration Programmierung Tutorials

Dreamweaver: Ein neues Projekt

Einerseits benötigt der Programmierer einen Editor, der für die Code-Bearbeitung optimiert wurde, andererseits einen Weg, um den geschriebenen Quellcode daneben auch visuell überprüfen zu können – also so, wie er später im Browser erscheint. Dreamweaver bietet dazu eine kompakte Lösung an.

Beim Start von Dreamweaver erscheint ein Optionsfenster, das verschiedene Wege zu schon bestehenden oder neuen Projekten anbietet. So erhält man eine Übersicht der zuletzt geöffneten Dateien, die Möglichkeit, eine beliebige Datei zu öffnen, oder dank einer kleinen Vorauswahl eine bestimmte Art von Website neu zu erstellen, so etwa eine Site auf PHP-Basis. Daneben bietet eine Zusammenstellung von Vorlagen die Option, gängige Standardkombinationen wie etwa moderne CSS-Layouts zu generieren. »Erste Schritte«, »Neue Funktionen« und »Ressourcen« sorgen noch für Links auf weitere Informationen, wie etwa Podcasts oder Foren.

Dreamweaver-Website
Ein üblicher Workflow wäre es nun, eine neue Dreamweaver-Website, innerhalb der Software auch »Site« genannt, zu erstellen. Hiermit wird nicht nur eine einzelne Datei abgespeichert, sondern ein Website-Projekt als Ganzes, inklusive aller zugeordneten Dateien, was der Übersicht und später auch der Fehlersuche dienlich ist. Die Dreamweaver-Website kann weiter mit einem FTP-Server synchronisiert werden. Über den Startbildschirm oder über das Menü »Site« legt man auf Knopfdruck die erste Dreamweaver-Website an. Der Assistent hilft bei der Eingabe aller Werte. Der Name der »Site« wird vergeben, die URL erst einmal offen gelassen und es werden vorerst auch keine Servertechnologien verwendet. Zum Anfang konzentrieren wir uns auf das Nötige.

Man arbeitet lokal auf dem Rechner, um später die Daten als Kopie auf den Server hoch zu laden oder man greift über das Netzwerk auf einen Server zu, um die Daten direkt zu bearbeiten. Eine Verbindung zum Remote-Server ist zu Beginn jedoch unnötig, weshalb man in der Auswahl »Kein« anklickt. Die Zusammenfassung im Anschluss dient der Kontrolle, bevor mit dem Bestätigen über »Fertig« die »Site« in dem Register »Dateien« auf der rechten Seite abgelegt wird.

Neue Dateien werden leider nicht gleich der erstellten »Site« zugewiesen. Klickt man etwa auf »Neu erstellen > HTML« im Startbildschirm oder im Menü auf »Datei > Neu« könnte man eine leere Seite anwählen, den DocType festlegen und die Auswahl mit »Erstellen« generieren. Doch erst wenn die neue Seite gespeichert wurde, wird sie der aktuell geöffneten Dreamweaver-Website zugeordnet.

Screenshot
Register: Dateien

Zwei Ansichten
Die erste Seite zeigt nun den Standardaufbau einer HTML-Datei an, mit dem Head- und Body-Bereich sowie einigen weiteren Tags. Über »Einfügen« im Menü oder über die Leiste gleichen Namens können nun erste Inhalte mit Hilfe von Assistenten wie etwa Tabellen, Formulare oder Grafiken eingearbeitet werden. Um den eingefügten Content in der Entwurfsansicht zu überprüfen, reicht ein Klick auf den Button »Entwurf« aus, womit der Code verschwindet und ähnlich wie im Browser die Seite inklusive aller Grafiken dargestellt wird. Unten rechts am Dokument können noch verschiedene Aktionen in Bezug auf die Datei vorgenommen werden.

So könnte man mit der Lupe Bildausschnitte vergrößern. Übrigens kann man hierbei mit gedrückter Alt-Taste schnell wieder heraus zoomen. Die Vergrößerungsstufe wird gleich neben dem Lupensymbol angezeigt, daneben die Größe des Ausschnitts in Pixel angegeben. Gerade für das Optimieren für bestimmte Bildschirmgrößen eine interessante Information. Zuletzt wird noch gezeigt, wie schnell die Seite bei bestimmten Verbindungsgeschwindigkeiten aufgebaut wird. In den Voreinstellungen unter »Statusleiste« kann dazu die Grundlage der Verbindung vom Modem bis hin zu DSL angegeben werden.

Screenshot
Die Leiste »Einfügen« und eine Datei in der Code-Ansicht

Bedienelemente
Dreamweaver bietet an den Seiten verschiedene Bedienfelder zur Bearbeitung der Inhalte an. Das Bedienfeld »Eigenschaften« ist besonders hervorzuheben, da es je nach dem gewählten Content verschiedene Optionen in Bezug auf die Auswahl anbietet. So könnte man nach dem Markieren von Text die Schriftart oder Textgröße verändern, wurde jedoch ein Hyperlink angewählt, bieten die »Eigenschaften« eine Option an, um etwa das Ziel eines Links anzupassen.

Die Bedienelemente können jederzeit per Drag & Drop neu angeordnet werden oder jeweils auch frei als eigenes Fenster über allen Inhalten schweben. Generell kann jedes Bedienfeld über das kleine Dreieck links neben dem Namen ein- und ausgeklappt werden, um Platz zu sparen und um die Übersicht zu bewahren. Hilfreich ist dazu auch der Shortcut »F4«, über den alle Bedienfelder ausgeblendet werden können. Damit erhält man schnell eine größere Ansicht der Website.

Anders als das Bedienfeld »Eigenschaften« sind die weiteren Elemente in so genannte Bedienfeldgruppen sortiert. Die einzelnen Abschnitte bieten also noch weitere Bedienfelder an, wie etwa »Dateien«, hinter dem sich auch »Elemente« und »Codefragmente« verbirgt. Es lassen sich bei Bedarf eigene Bedienfeldgruppen anlegen oder schon bestehende ändern. Eine wichtige Schnittstelle ist das Bedienfeldmenü, das sich auf gleicher Höhe wie der Bedienfeldname über das Icon am rechten Rand aufrufen lässt. Dort könnte man eine Bedienfeldgruppe schließen, die man vielleicht nicht ganz so häufig verwendet. Das lässt sich über das Menü »Fenster« schnell wieder rückgängig machen. Verschiedene Arbeitsplatzkonfigurationen kann man über »Fenster > Arbeitsbereichlayout« öffnen oder selbst erstellte, an die eigenen Bedürfnisse angepasste Anordnungen über »Aktuelles speichern« für den späteren Einsatz sichern.

Screenshot
Bedienfeld: Eigenschaften

Codeinspektor
Genau wie in der Code-Ansicht zeigt auch der Codeinspektor den Quellcode der Seite an. Hier hat man den Vorteil, dass dieser in einem eigenen Fenster dargestellt wird. Der Code bleibt trotzdem editierbar. Änderungen werden also gleich auf die Entwurfsansicht übertragen. So kann man im Zusammenspiel mit der Vorschau effizient arbeiten, in dem man den größten Teil des Bildschirms für die Entwurfsansicht reserviert und sich im Codeinspektor nur den Quellcode anzeigen lässt, an dem man aktuell arbeitet. Aufgerufen wird der Codeinspektor über »Fenster > Codeinspektor« oder schneller über den Shortcut »F10«.

Screenshot
Der Codeinspektor

Wer die HTML- und CSS-Grundlagen beherrscht, könnte nun ein komplettes Website-Projekt von Hand kodieren, doch Dreamweaver bietet weitere Optionen inklusive die Programmierung von Ajax unterstützende Funktionalitäten an. Und auch die zahlreichen Assistenten lohnen einen Blick.

Erstveröffentlichung 30.10.2007

Kategorien
Boilerplates & andere Tools Programmierung

Microsoft Visual Studio 2008

von Julian Taupe

Beim Schreiben von Programmen ist man für jede Zeile Code dankbar, die man nicht selbst schreiben muss. Wer unterschiedliche Programmiersprachen verwenden möchte, kann auf Visual Studio zurückgreifen. Die Software nutzt die modernsten Techniken und bietet Hilfestellungen. Die kommende Version Visual Studio 2008 bringt zudem zahlreiche Neuerungen mit sich.

Was ist Visual Studio?
Visual Studio ist eine Entwicklungsumgebung für Hochsprachen wie BASIC, C/C++, J#, C#. Visual Studio wird in verschiedenen Versionen ausgeliefert. Die Versionen „Standard“, „Enterprise“ und „Professional“ unterscheiden sich vor allem durch Lizenzierungsoptionen und ihre Zusatzkomponenten.

Was ist mit Visual Studio möglich?
Mit Visual Studio ist es möglich, zwischen vielen Projektarten zu wählen, wie in etwa Plugins, Windows Applications und Webapplications. Das bemerkenswerte an Visual Studio ist es, dass nicht nur ein Compiler für eine Sprache, sondern mehrere Compiler für mehrere Sprachen mitgeliefert werden. So können diese Projektarten in vielen Sprachen geschrieben werden. Einige davon sind BASIC, Visual Basic .NET, VB6, C/C++, C# und J#.

Dadurch, dass die ActiveX-Technologie konsequent verwendet wird, ist die Entwicklungsumgebung erweiterbar. So können ActiveX-Controls als Bestandteile eigener Dialoge aus dem System mitbenutzt werden. Zusätzlich ist die Entwicklungsumgebung durch AddIns (Plugins) um Funktionalitäten erweiterbar.

Visual Studio verwendet auch IntelliSense, ein von Microsoft entworfenes Konzept, speziell um die objektorientierte Programmierung durch zusätzliche Hilfestellungen zu erleichtern. Dies muss man sich so vorstellen, dass im Quelltexteditor Zusatzinformationen (wie Methoden, Eigenschaften et cetera) zum aktuellen Objekt, das gerade geschrieben wurde, angezeigt werden.

Was benötigt man um Visual Studio einzusetzen?
Um Visual Studio einsetzen zu können, benötigt man nicht viel. Ein Windows Betriebssystem und 64 bis 256 MB RAM für einen optimalen Betrieb. Des Weiteren werden je nach Version etwa 2–5 GB Festplattenspeicher benötigt. Das .NET Framework 3.5 ist Voraussetzung, da der kompilierte Code für dieses Framework optimiert ist. Visual Studio 2008 bietet die Möglichkeit zu wählen, unter welcher .NET-Version die fertige Applikation laufen soll. Die Standard-Version von Visual Studio 2008 Beta 2 ist etwa 700 MB groß. Die Professional Edition hingegen schon 3,2 GB.

Wissenswertes
Visual Studio 2008 ist der Nachfolger von Visual Studio 2005 und ist noch in Entwicklung. Offiziell kommt es voraussichtlich im Februar 2008 heraus. Visual Studio 2008 wird auf die Entwicklung unter Windows Vista, Office 2007 und Web Applikationen ausgelegt.

Komplett neu ist LINQ (Language Integrated Query) – eine Methode SQL, XQuery oder andere Abfragen direkt in einer Programmiersprache als Code statt wie bisher als String auszudrücken. Dies wird durch die Spracherweiterung von C# 3.0 und Visual Basic 9.0 ermöglicht. Die Syntax von LINQ erinnert an die Syntax von SQL und Visual Basic als auch von C#. Des Weiteren gibt es mit Visual Studio 2008 eine neue Version des .NET Frameworks als auch neue Versionen der .NET Sprachen:

  • C# 3.0
  • Visual Basic 9

In der Version 2008 taucht nun der Windows Presentation Foundation (WPF) Visual Designer auf, welcher für eine klare Trennung von UserInterface und Business Logic sorgt. WPF ist bei Windows Vista bereits vorinstalliert, kann jedoch für Windows XP SP2 und Windows Server 2003 nachinstalliert werden. Der große Vorteil von WPF-Applikationen ist, dass sie sowohl als Desktop-Applikation als auch als Web-Applikation verwendet werden können. Es macht es auch möglich, die Oberfläche besser zu designen und moderne Technologien wie Vektor-Grafiken, Video, 3D Grafiken und so weiter zu verwenden. Dazu kommt auch ein neuer HTML/CSS-Editor, welcher von Microsoft Expression Web beeinflusst wurde (das ist ein HTML Editor, der Microsoft Frontpage ablösen soll).

Zu erwähnen sind Neuerungen wie IntelliSense bei JavaScript, das hilfreich für Web Applikationen ist. Ein XSLT-Debugger wird auch mitgeliefert. Und zum Schluss gibt es noch Erweiterungen für WindowsForms und WPF. Bei all diesen Erneuerungen muss sich eine Sprache verabschieden. J# wird nicht weiter unterstützt, da es nie zu den .NET Sprachen gezählt wurde.

Unterschiede zu den Vorgängerversionen

VS 6

VS .NET

VS 2005

VS 2008

Programmiersprachen BASIC, C++, VB6, J++ VB .NET, C#, C++, J# C# 2.0, VB 8, C++, J# LINQ, C# 3.0, VB 9, C++,
.NET Version keine Version 1 Version 2 Version 3.5
Preis ca. in € (Standard / Enterprise / Professional / Team) – / 1.800 / – / – – / 1.400 / 800 / – 352 / 2.700 / 964 / 3.500 keine Angaben

Der Unterschied zur Vorgängerversion ist die neue .NET-Version. Des Weiteren entfällt der Support für J#, jedoch wird die neue Programmiersprache LINQ unterstützt.

Wie installiert man Visual Studio?
Bei der Installation von Visual Studio gibt es wenig zu beachten. Im Menü kann man zwischen der Installation von folgenden Produkten wählten:

  • Visual Studio
  • MSDN (Dokumentation)
  • Nach Service Releases suchen

Install Menu of Visual Studio 2008

Der Punkt Visual Studio installiert Visual Studio und das aktuelle .NET-Framework (Version 3.5 bei Visual Studio 2008 bzw. Version 2.0 bei Visual Studio 2005), was 40 bis 60 Minuten dauert.

Full Installation of Visual Studio 2008

Nach der Installation wird ein Hinweis eingeblendet, der den Benutzer dazu auffordert, die aktuellsten Sicherheitspatches zu installieren.

Der Punkt MSDN installiert die beigelegte Dokumentation für Visual Studio. Diese beinhaltet die Dokumentation zu den Klassen und Namespaces Microsofts, diese ist auch kostenlos abrufbar. Das Menü Nach Service Releases suchen sucht nach Service Packs für Visual Studio.

Visual Studio 2008 wird auch kostenlos angeboten. Diese kostenlosen Produkte gliedern sich anders als bei Visual Studio 2005:

  • Windows, Game und Hardware Development
    • Visual Basic 2008 Express Edition
    • Visual C# 2008 Express Edition
    • Visual C++ 2008 Express Edition
  • Web Development
    • Visual Web Developer 2008 Express Edition

Diese Produkte können Sie kostenlosen herunterladen. Des Weiteren kann Visual Studio 2008 Beta 2 (Codename Orcas) ebenfalls kostenlos heruntergeladen werden.

Erstveröffentlichung 21.09.2007