Erstellen Sie eine vollständige Website. Auf einem iPad.

Lassen Sie uns einen Blick darauf werfen, wie (oder ob) es möglich ist, eine Website vollständig auf einem iPad zu entwerfen und zu erstellen. Wir werden eine Vielzahl von Apps verwenden, um eine einfache HTML-Webseite zu konzipieren, zu verkabeln, zu entwerfen, zu codieren und bereitzustellen.

Seitdem Tablets in den Mainstream-Gebrauch eingedrungen sind, haben wir schnell herausgefunden, wie diese neuen Geräte für den Verbrauch von Webinhalten am besten unterstützt werden können. Ich habe in unseren Blogs zahlreiche Artikel zu diesem Thema geschrieben, ebenso wie viele meiner Kollegen. Bücher wurden veröffentlicht. Panels wurden gehalten.

Was aber, wenn das Tablet eine tragfähige Plattform sein könnte, nicht nur für den Verbrauch, sondern auch für die Erstellung? Es gab ein wiederkehrendes Meme, dass Touch-Geräte nicht gut für die Produktivität sind, und es gibt keine Hoffnung, echte Arbeit an einem zu erledigen. Seine schlanke Form und Portabilität machen es jedoch zu einem fantastischen Gerät, insbesondere für Freiberufler, die nicht unbedingt an einen bestimmten Arbeitsplatz gebunden sind.

Schritt 1: Ideen zusammenbringen

Die erste Phase des Designprozesses besteht darin, erste Ideen zu planen und zusammenzuführen. Bevor wir uns mit der Zusammenstellung tatsächlicher Drahtmodelle oder Prototypen befassen, gibt es eine Reihe nützlicher iPad-Apps, mit denen Sie einfach sehr grobe Ideen skizzieren oder kleine Teile eines Designs prototypisieren können.

Ich habe mich für Adobe Ideas entschieden, um einige erste Ideen und Konzepte zusammenzuführen. Mithilfe der großen Leinwand ist es möglich, ein sehr grobes Modell einer potenziellen Site zu zeichnen und diese dann einfach zu verkleinern und an den Seiten mit Anmerkungen zu versehen. Natürlich führen wir mit Adobe Ideas nichts zu Kompliziertes aus (es kann wahrscheinlich nicht viel mehr, um ehrlich zu sein), aber es ist immer noch eine nützliche App und ein natürlicher Bewerber für das iPad.

Ich konnte auch Adobe Ideas verwenden, um einige grundlegende Flussdiagramme für die Site-Struktur usw. zu skizzieren. Der Touchscreen des iPad macht dies zu einem intuitiven Prozess, und sein Formfaktor bedeutet, dass es einfach ist, mit allen Beteiligten zusammenzuarbeiten.

Ideen und Konzepte: Die Apps

Adobe Ideas kostet 9,99 US-Dollar (ein Preis, der seit seiner Veröffentlichung als kostenlose App erheblich gestiegen ist) und ist im Wesentlichen ein Skizzenbuch. Die App bietet eine Leinwand, auf der Sie Ideen mit einem einfachen Freiform-Zeichenwerkzeug erkunden können.

Kombinieren Sie die App mit einem von mehreren Stiften, die von Drittanbietern angeboten werden, und Sie erhalten ein fantastisches Tool zum Zusammenstellen von groben Konzepten und Visualisierungen Ihrer Ideen. Wenn Sie mit anderen zusammenarbeiten und den Menschen zeigen möchten, was Sie denken, bietet Ideas eine hervorragende Plattform, um das zu tun.

Es gibt natürlich Alternativen zur Adobe-App (und dem Preis von 9,99 US-Dollar). Jot! Whiteboard ist eine praktikable Alternative und bietet den gleichen Stil für das grundlegende Zeichnen und Skizzieren. Mit den gleichen Verwendungen, Jot! Whiteboard enthält auch eine Funktion zum Live-Teilen Ihrer Skizzen mit anderen, entweder über eine andere Kopie des Jot! App oder deren Browser. Jot! Whiteboard ist für 4,99 USD im App Store erhältlich.

Eine weitere beliebte iPad-App zum Skizzieren und Konzeptualisieren von Designideen ist Penultimate, die wiederum eine Leinwand zum Schreiben und Zeichnen bietet. Sie können Ihre Ideen auch einfach als PDF an Kunden oder Mitarbeiter senden!

Das vorletzte ist das billigste der drei Apps in diesem Bereich und kostet nur 0,99 US-Dollar.

Diese Apps sind nicht nur Gastgeber für Skizzen von Designkonzepten, sondern können auch eine großartige Möglichkeit sein, Mind Maps und allgemeinere Notizen zu Briefs von Kunden, Designideen und vielem mehr zu erstellen. Auf dem iPad stehen zahlreiche Notizen-Apps zur Verfügung, darunter das Standardbeispiel, das auf Ihrem iPad vorinstalliert ist.

Vergessen Sie nicht, dass selbst Funktionen wie die "Leseliste" von Safari unglaublich nützlich sein können, wenn Sie Teile des Webs mit einem Lesezeichen versehen und die gespeicherten Webseiten mit all Ihren unterstützten Geräten (einschließlich natürlich Ihrem iPad) synchronisieren.

Schritt 2. Erstellen der Wireframes, Prototypen und Planen

Nachdem Sie Ideen untersucht und aufgezeichnet haben, ist es Zeit, sie tatsächlich zusammenzustellen und einen Plan zu erstellen. Glücklicherweise gibt es eine Fülle von Wireframing- und allgemeinen Apps, die Ihren Planungsprozess auf dem iPad unterstützen. Ich habe Adobe Proto für mein Wireframing ausgewählt.

Adobe Proto ist Adobe Ideas sehr ähnlich und verfügt über eine vergleichbare Benutzeroberfläche. Anstatt jedoch frei mit dem Finger (oder dem Stift) zu zeichnen, verwenden Sie diesmal eine Reihe von Komponenten, um ein Drahtgitter zusammenzusetzen. Das Supercoole an Adobe Proto ist, dass es einige wirklich nützliche Funktionen für das Wireframing enthält, z. B. die Integration in eine Reihe beliebter CSS-Grid-Systeme.

Sobald ein Drahtmodell eingerichtet ist und wir den Plan für eine einfache Webseite kennen, können wir mit der Arbeit beginnen.

Wireframing: Die Apps

Sie haben wahrscheinlich schon von OmniGraffle gehört, schon allein wegen des Preises von 49,99 US-Dollar. Diese Kosten sind zwar hoch, wenn auch fest und nicht wiederkehrend, aber dieses Werkzeug ist eines der fortschrittlichsten, die für die Plattform verfügbar sind.

Bei OmniGraffle dreht sich alles um die Planung, sei es das Erstellen eleganter, strukturierter Flussdiagramme und Diagramme oder das freihändige Skizzieren von Drahtgittern. OmniGraffle ist sehr vielseitig und kann sich an die Arbeit vieler verschiedener Branchen anpassen, einschließlich Webdesign. Die ganze Reihe von Funktionen gipfelt in Plänen, die mit denen konkurrieren, die auf einem herkömmlichen Desktop-Treiber erstellt wurden.

OmniGraffle verdient sicherlich seine lobende Erwähnung, aber es gibt viele Alternativen zu deutlich günstigeren Preisen. SketchyPad ist eine App für das iPad für 4,99 US-Dollar, die die Tools zum Erstellen einiger effektiver Drahtgitter aus einem breiten Katalog von Schablonen und Elementen bietet, die zu einem endgültigen Teil zusammengefügt werden.

Die App, die ich verwendet habe, war natürlich Adobe Proto, die Wireframing-App von Adobe. Mit Adobe Proto können Sie Website- und App-Wireframes mit einer Vielzahl von Komponenten einfach skizzieren und sogar an bekannten CSS-Grid-Systemen ausrichten.

Es ist sinnlos für mich, jede Planungs-App da draußen durchzugehen, aber ich fühle mich verpflichtet, eine weitere App zu erwähnen, die für mich auffällt. Das Mocking Pad für 9,99 US-Dollar ist zwar nicht die schönste Benutzeroberfläche, aber recht unkompliziert und etwas minimalistisch, sodass Ihre Planungs- und Zusammenstellungssitzungen zum Kinderspiel werden.

Schritt 3. Einrichten für das Bauen

Bevor wir mit der Erstellung eines funktionierenden Entwurfs fortfahren, müssen wir festlegen, wo die Site tatsächlich erstellt wird.

Das iPad ist zweifellos ein Gerät, mit dem man Dinge erledigen kann. Leider ist einer der Hauptnachteile der Umgang mit Dateien. Apps fühlen sich etwas sandboxed an und Tools wie Finder oder Explorer sind auf der Plattform einfach nicht verfügbar. Daher kann die Ausführung lokaler Arbeiten umständlich sein.

Glücklicherweise können wir Speicher außerhalb des Geräts verwenden, um auf unseren Websites zu arbeiten. Eine einfache Möglichkeit, dies zu tun, besteht darin, im Web zu arbeiten, über FTP (oder eine Alternative) eine Verbindung zu einem Live-Server herzustellen und Dateien auf diese Weise zu hosten.

Alternativ haben wir die Option Dropbox, einen Dienst, der in eine Reihe von Apps integriert ist, die wir im nächsten Abschnitt betrachten werden. Mit einer relativ großzügigen kostenlosen Speicherkapazität (größere Kapazitäten sind gegen Gebühr erhältlich) ist Dropbox ein großartiges Werkzeug, um Ihre Dateien zu speichern, zu synchronisieren und sogar zu versionieren sowie sie bei Bedarf mit Kollegen oder Kunden zu teilen.

Während Dropbox in eine Reihe von Apps integriert ist, die wir uns gleich ansehen werden, gibt es auch eine offizielle, kostenlose Dropbox-App für das iPad.

Schritt 4. Das Bauen

Jetzt ist es Zeit, eine Website zusammenzustellen. Es gibt eine Vielzahl von Code-Editoren für das iPad, aber ich werde Diet Coda verwenden, Panics jüngste iOS-Version.

Sobald Sie über FTP verbunden sind und eine Site eingerichtet haben, werden Sie im Wesentlichen in eine mit Coda für Mac OS X vertraute Schreiberfahrung eingeführt. Durch einfaches Tippen auf das Plus-Symbol in Diet Coda können Sie ein neues Verzeichnis und ein beliebiges Verzeichnis einrichten Dateien darin. Ich habe eine HTML-Datei und ein CSS-Stylesheet erstellt und beide geöffnet. Lassen Sie sich jedoch nicht vom relativ kleinen Bildschirm des iPad abbringen. Durch Tippen auf das lila Seitensymbol in Diet Coda zeigt die App ihre Registerkarten an, sodass Sie schnell zwischen geöffneten Dateien wechseln können (obwohl es besser wäre, wenn sie oben dauerhaft subtil geöffnet wären).

Letztendlich geht es dann um die Codierung. Durch Tippen auf das Snippets-Symbol können Sie gespeicherten oder voreingestellten Code einfach in Diet Coda ziehen, was die Zeit, die Sie für das eigentliche Schreiben des Codes aufgewendet haben, etwas beschleunigt.

Der vielleicht größte Fehler bei Diet Coda ist, dass Sie keine Bilder oder andere Dateien hochladen können. Wenn Sie eine imageintensive Site erstellen, kann das möglicherweise ein Problem sein. Ich brauchte nur ein einziges Bild auf dieser Seite, das ich mit einem FTP-Client erfolgreich außerhalb der Diet Coda-App hochladen konnte.

Für das iPad stehen mehrere eigenständige FTP-Clients zur Verfügung (suchen Sie im App Store buchstäblich nur nach "FTP"), obwohl selbst einige der Konkurrenten von Diet Coda über integrierte FTP-Clients verfügen, die für diese Aufgabe geeignet sind.

Nachdem ich die Hürde beim Hochladen von Bildern überwunden hatte, konnte ich meine zugegebenermaßen einfache Webseite in Diet Coda ganz gut fertigstellen. Es hat in der Tat funktioniert und auch hier habe ich, obwohl nichts Besonderes, eine Webseite vollständig auf meinem iPad erstellt, vom Konzept über das Drahtmodell bis zum fertigen Stück.

Codierung: Die Apps

Es gibt mehrere Texteditoren für das iPad, aber vier sind wirklich herausragend. Die erste ist die neueste Version, Diet Coda, eine App für 19,99 US-Dollar von den Entwicklern der beliebten Mac OS X-App Coda (und ihrer neuesten Version Coda 2). Ich habe mir Diet Coda angesehen, als es letzten Monat veröffentlicht wurde.

Ich habe mit Diet Coda herumgespielt und es ist ein ziemlich beeindruckender Editor. Es scheint eher eine App zum Bearbeiten als zum Erstellen ohne lokale Bearbeitung zu sein, aber es ist sicherlich in der Lage, Letzteres zu tun. Leider müssen Sie ohne lokalen Speicher eine Art Remote-Speicheroption einrichten, die eine Verbindung über FTP oder SFTP herstellt.

Persönlich besteht mein tägliches Leben aus viel Schreiben, und ich muss manchmal als HTML formatieren. Natürlich ist es nicht auf dem gleichen Niveau wie das Entwerfen einer Website, aber ich musste einen geeigneten Texteditor finden, wenn ich auf meinem iPad schreiben wollte. Meine bevorzugte App vor der Veröffentlichung von Diet Coda war Textastic für 9,99 US-Dollar.

Textastic ist im Kern ein Texteditor zum Bearbeiten in mehr als 80 Sprachen, einschließlich HTML, CSS usw. Alle Apps in diesem Abschnitt haben dieselbe grundlegende Funktionalität, aber was in Textastic auffällt, sind die Verbindungsoptionen. Neben der Synchronisierung Ihrer Dateien mit einem FTP-, FTPS- oder SFTP-Server können Sie Ihre Dokumente auch problemlos für Dropbox freigeben und mit der Cloud und Ihren anderen Geräten synchronisieren. Darüber hinaus können Sie mit dem integrierten WebDAV-Server problemlos Dateien über WLAN auf Ihren Mac oder PC übertragen.

Gusto ist ein weiterer Texteditor, der für 9,99 USD im App Store erhältlich ist. Gusto bietet die gleiche Funktionalität wie die oben genannten und unterstützt auch die Dateiübertragung über FTP, SFTP, FTPS und Dropbox, was es zu einer großartigen Option macht.

Ich hatte noch keine Gelegenheit, diese nächste App zu verwenden, aber nach dem, was ich aus dem iPad.AppStorm-Test ersehen kann, sieht es ziemlich cool aus.

Koder ist der billigste dieser vier, kostet nur 5,99 US-Dollar und sieht fantastisch aus. In seiner schlanken Benutzeroberfläche unterstützt Koder das Verfassen und Bearbeiten einer ganzen Reihe von Sprachen, einschließlich HTML und CSS unserer alten Freunde (wenn sie dies nicht unterstützen würden, würden sie nicht viele Verkäufe erzielen).

Wie die vorherigen drei unterstützt Koder die Dateiübertragung über FTP, SFTP, FTPS und Dropbox, obwohl Sie lokal arbeiten können.

Schritt 5. Testen

Letztendlich ist der beste Weg, Ihre Website auf verschiedenen Plattformen zu testen, das tatsächlich zu tun. Wenn Sie einen der Editoren verwendet haben, die wir mit der Dropbox-Unterstützung (oder dem integrierten WebDAV-Server) besprochen haben, sollte das Übertragen Ihrer Dateien auf ein anderes Gerät ein Kinderspiel sein. Wenn Sie über FTP gearbeitet haben, müssen Sie lediglich einen Browser auf dem Gerät aufrufen, das Sie testen möchten, oder einen Dienst wie Adobe BrowserLab verwenden.

Bonus Apps

Es gibt einige Apps, die meine Aufmerksamkeit erregt haben und die beim Erstellen einer Website hilfreich sein können.

FontBook ist eine Referenz-App für 5,99 US-Dollar, die sich mit Typografie befasst. Sie dokumentiert die Arbeit zahlreicher Schriftgießereien und Designer und bietet Ihnen Tausende von Schriftarten zur Untersuchung. Die Optimierung für das Retina-Display des neuen iPad sollte außerdem bedeuten, dass es absolut fantastisch aussieht!

CSS3Machine für iPad ist eine weitere Referenz-App, mit der Sie mit Stilen herumspielen und sogar Ihren Prototyp im Browser eines anderen Geräts aus der Ferne anzeigen können. CSS3Machine ist sogar in der Lage, WebKit-Animationen und mehr zu erstellen und zu exportieren, sodass Sie ganz einfach fantastisches CSS zusammenstellen und in Ihr Projekt einfügen können.

Vergessen Sie nicht Ihren Browser. Über Safari auf Ihrem iPad oder einen von einem Drittanbieter heruntergeladenen Browser haben Sie Zugriff auf eine Welt voller Dokumentation, Inspiration und Community-Unterstützung. Sehen Sie das iPad also keinesfalls als isoliertes Entwicklungsgerät.

In diesem Artikel haben wir beschrieben, wie es möglich ist, eine Website vollständig auf einem iPad zu erstellen. Und wir haben es geschafft, von der Planung bis zum Bau.

Ich habe nur die Apps erwähnt, mit denen ich persönlich gute Erfahrungen gemacht habe oder die mich wirklich hervorgehoben haben. Wenn Sie auf Ihrem iPad entworfen und/oder entwickelt haben, teilen Sie Ihre Erfahrungen und Lieblings-Apps in den Kommentaren mit. Danke fürs Lesen!