Adobe Dreamweaver CS6 Review: Entwicklung mobiler Apps, HTML 5-Wege

Beim Design von Webseiten ist die Popularität der Flash-Multimedia-Plattform von Adobe atemberaubend, während HTML5 sprunghaft ansteigt. Dieser Übergang führt dazu, dass Websites und Website-Designer bessere Möglichkeiten finden, Bewegung und Interaktivität zu integrieren, und das neue Adobe Dreamweaver CS6 ($ 399 als Stand-alone-Programm, Stand vom 01.06.2012; ebenfalls Teil von Adobe Creative Suite 6) bietet ein eine Vielzahl von Tools für HTML5-basierte Designs auf Smartphones, Tablets und Desktops.

Fluidlayouts, Fluid Design

Der gesamte Website-Traffic wächst, aber der mobile Website-Traffic wächst am schnellsten. Mit dem neuen Fluid Grid Layout-Tool von Dreamweaver CS6 können Sie Geräte für alle Bildschirmgrößen entwickeln, von Smartphones über Tablets bis hin zu Desktops. Mit der Vorgängerversion von Dreamweaver konnten Sie "Medienabfragen" erstellen - Code in einer Master-HTML-Datei, um den Datenverkehr von Geräten mit unterschiedlichen Bildschirmgrößen an verschiedene CSS-Dateien zu leiten. Es wurde jedoch nicht viel geholfen jede dieser CSS-Dateien für die verschiedenen Bildschirme.

Bei einem Fluid-Grid-Layout legen Sie mit einem einfachen Assistenten fest, wie viele Spalten Sie für ein Smartphone, ein Tablet und einen Desktop benötigen. geben Sie die Größe der Spalten an; und Dreamweaver erstellt die HTML5-Datei und eine zugehörige CSS3-Datei. Dann verwenden Sie einen Menübefehl, um Container für Inhaltsblöcke hinzuzufügen und sie in einem Raster neu anzuordnen. Dreamweaver kümmert sich um die Codierung - zumindest für eine Weile; Wie bei jedem Dreamweaver-Vorgang werden Sie in der Codeansicht der Anwendung nachsehen, um Änderungen an Ihren Inhalten vorzunehmen. Adobe warnt davor, mit dem Fluid Grid Layout-Code herumzuspielen - es ist einfach zu leicht, es zu vermasseln. Übrigens, Adobe TV bietet ausgezeichnete Video-Komplettlösungen dieser neuen Funktion und vieler anderer.

Fluid-Grid-Layouts sollen Ihnen einen Ausgangspunkt für ein adaptives Design geben. Das heißt, Sie erstellen Ihren Inhalt einmal, und dann werden die Webseiten, auf denen dieser Inhalt existiert, so konfiguriert, dass der Inhalt auf dem Bildschirm beliebiger Größe korrekt angezeigt wird. Dies wird als adaptives Design bezeichnet. Sie können es auf jeder Website testen, indem Sie es in einem Desktopbrowser öffnen und dann die Größe des Browserfensters ändern, von der Smartphone-Größe bis zur Standard-Desktopgröße. Sitzt der Inhalt auf der Seite bei der Größenanpassung nur dort oder wird er basierend auf der Größe des Fensters umgebrochen? Wenn es zurückfließt, dann ist es wahrscheinlich eine HTML5-basierte Website, und es wird wahrscheinlich gut funktionieren auf jedem Gerät.

Ich fand Fluid Grid Layouts einfach genug zu erstellen, aber ich fand, dass die Größe der Container ein wenig träge arbeitete, und die Rückgängig-Funktion funktionierte häufig nicht. Die Benutzeroberfläche von Dreamweaver verfügt über neue nützliche Schaltflächen am unteren Rand des Entwurfsfensters, auf die Sie klicken können, um die Ansichtsfenster für Smartphones, Tablets und Desktops anzuzeigen. Diese sind sehr hilfreich, um zu sehen, wie Ihr Inhalt angezeigt wird. Auch die Liveansicht von Dreamweaver wurde verbessert, da die visuelle Darstellung dessen, wie Ihre Webseite in einem echten Browser aussehen wird, näher an der Realität liegt (aber nur näher an dem, was Webkit-basierte Browser - also Safari und Chrome - aussehen) ähnlich, Firefox und Internet Explorer könnten dramatisch anders aussehen). Dennoch können Sie jetzt einige Änderungen am Code vornehmen, während die Live-Ansicht aktiviert ist und Ihre Änderungen im Design-Bereich angezeigt werden, was vorher nicht möglich war.

Dialogfeld für neues CSS-Übergangstool.

Ein neues Die Palette und das zugehörige Dialogfeld helfen Ihnen beim Erstellen von CSS-Übergängen, bei denen es sich um Bewegungseffekte handelt, für die kein JavaScript (oder Flash) erforderlich ist. Sobald Sie wissen, wie sie funktionieren, können Sie ganz einfach raffinierte Aktionen wie Rollover und andere Bewegungen ausführen. Der Code, den Dreamweaver generiert, ist ebenfalls einfach, weil die von ihm beschriebenen Verhaltensweisen durch präzisen CSS3-Code und nicht durch ausführliches JavaScript behandelt werden. Dreamweaver generiert den gesamten browserspezifischen Code, der für Browser (alt und neu) erforderlich ist, um diesen Code zu verwenden. Das heißt, jede Aktion, die Sie festlegen, bewirkt, dass Dreamweaver leicht verständlichen CSS-Code generiert.

Anstatt sich an die standardmäßigen, langweiligen Ariel, Tahoma und dergleichen zu halten, die in allen Browsern integriert sind und daher auf einer Webseite sicher spezifiziert werden können, können Sie Schriften von Google oder anderen Outfits kostenlos kaufen oder finden, laden Sie diese auf Ihren Web-Server, und verwenden Sie dann den neuen Web Font Manager von Dreamweaver CS6, um sie auf Ihre Seiten anzuwenden. Das ist großartig, aber Sie müssen die Schriftarten auf Ihren eigenen Server herunterladen, da das Dienstprogramm Ihnen nicht dabei hilft, Schriften zu verwalten, die extern gehostet werden müssen, z. B. aus der eigenen TypeKit-Bibliothek. In Dreamweaver CS6 müssen Sie die Zeichensätze einzeln in die Web Fonts Manager-Benutzeroberfläche laden. Anschließend müssen Sie sie zur Liste der Schriftfamilien hinzufügen. Adobe sagt, dass dies auf Lizenzprobleme zurückzuführen ist, aber ich denke, dass das Verfahren noch etwas weniger mühsam sein könnte. Um die Schriftarten zu verwenden, wählen Sie einen Text aus und wählen dann den Schriftnamen aus einem CSS-Dropdown-Menü aus. Unabhängig davon, ob Sie heruntergeladene Webschriftarten oder extern gehostete Schriftarten auf Ihrer Website verwenden, werden sie in der Liveansicht von Dreamweaver ordnungsgemäß dargestellt.

Die App ist unter

Mit der Vorgängerversion von Dreamweaver konnten Benutzer mobile Anwendungen erstellen (zusätzlich zu mobilen Websites), aber dies hat einige Anstrengungen erfordert: Sie mussten das SDK (Android Software Developer's Kit) selbst herunterladen, installieren und Dreamweaver mitteilen, wo es zu finden ist. Wenn Sie eine iOS-App erstellen wollten, hatten Sie kein Glück, da Apple kein unter Windows laufendes SDK erstellt. Die Vorlagen von Dreamweaver waren ebenfalls wenig und langweilig.

Ein jQuery-Farbfeld zum Entwerfen von Schaltflächen.

Einige davon haben sich zum Besseren verändert. Sie können jetzt die Benutzeroberfläche Ihrer App mit Hilfe eines neuen jQuery-Farbfelds gestalten, in dem Sie Stile und Farben für Schaltflächen festlegen können. Sie können auch Button-Designs in Adobe FireWorks erstellen oder ändern, die browserspezifischen HTML5-Code ausgeben, oder Sie können eigene App-Designs auf der fantastischen ThemeRoller-Site von jQuery Mobile erstellen und für die Verwendung in Dreamweaver CS6 herunterladen.

Sobald Sie mit Ihrem Design zufrieden sind, öffnen Sie die neuen PhoneGap-Paletten. Letztes Jahr hat Adobe PhoneGap übernommen, ein Unternehmen, das eine Plattform für den Aufbau mobiler Apps geschaffen hat. Dreamweaver CS6 verfügt daher über eine noch stärkere Anbindung an PhoneGap. Und anstatt Ihren Computer zu bauen, macht PhoneGap das für Sie, auf seinen Servern. In einer Palette können Sie sich bei Ihrem PhoneGap-Konto anmelden (Sie können dies mit einer Adobe-ID tun), und in einer anderen Palette können Sie angeben, ob Sie eine App für iOS, Android, Windows Mobile, Blackberry oder sogar erstellen möchten Symbian.

Klicken Sie auf eine Schaltfläche in der PhoneGap Build Service-Palette, um Ihre App zu erstellen, und wenn Sie fertig sind, können Sie die App herunterladen und dann manuell auf Ihre Geräte hochladen, wenn Sie geeignete Upload-Dienstprogramme haben. Praktischerweise bietet die Palette auch QR-Codes für jedes OS-Build, das Sie mit QR-Code-Lesern verwenden können, um Ihrem Telefon mitzuteilen, dass es heruntergeladen werden soll.

Dies sind geniale Wege, um Ihnen bei der Entwicklung von Smartphone-Apps zu helfen. Einige Dinge machen dies jedoch zu einer fortgeschrittenen Aufgabe. Wenn Sie iOS-Apps auf Ihrem Windows-System entwerfen möchten, benötigen Sie weiterhin ein Apple Developer-Konto mit einem Jahresumsatz von 99 US-Dollar. Sie müssen einen Mac zum Hochladen von Schlüsseldateien an Apple verwenden und dann andere Dateien herunterladen. (Ich fand einen Weg, dies auf einem Windows-Rechner in den Community-Foren von PhoneGap zu tun; es funktionierte, aber es war schwierig.) Dann müssen Sie diese Dateien auf PhoneGap.com hochladen. All dies dient nur zur Entwicklung Ihrer App, nicht zur Interaktion mit iTunes. Es ist wichtig zu beachten, dass dies nicht die Schuld von Adobe ist; Apples strenge Steuerelemente für iOS-Apps bedeuten, dass PhoneGap die einzige Möglichkeit ist, iOS-Apps unter Windows zu entwickeln. Apples Rigidity hat auch Vorteile, da es hilft, iOS-Apps zu überwachen, daher ist es schwer, Apple zu kritisieren.

Weitere neue oder verbesserte Funktionen: Adobe sagt, dass die FTP-Leistung verbessert wurde und ich kann bestätigen, dass Dateien schneller synchronisiert werden. Die Integration mit Adobe Business Catalyst, einem Online-Hosting-, Content-Management-System und E-Commerce-Service, ist jetzt in Dreamweaver CS6 integriert. Der Dienst hat viele nützliche Funktionen, einschließlich Online-Formularerstellung und Wartung der E-Mail-Liste.

Relevant bleiben mit HTML5

Von allen Anwendungen der Creative Suite ist Dreamweaver CS6 mit den meisten Extras ausgestattet - einschließlich neuer integrierter Tools und Möglichkeiten, Zugang zu neuen Online-Tools zu erhalten. Es zeichnet sich auch durch die Anwendung in der Suite aus, die am schnellsten wächst, und bietet die nützlichen Funktionen, die benötigt werden, um mit der exponentiellen Kreativität, die online stattfindet, Schritt zu halten.