Ratchet ist ein fantastisches neues Framework, mit dem Sie Prototypen von iPhone-App-Layouts nur mit HTML, CSS und JavaScript schnell und einfach erstellen können. Erstellen Sie einfach ein Container-Div in Ihrem HTML-Code, fügen Sie ein paar Elemente mit voreingestellten Klassen hinzu und Sie können loslegen.
Folgen Sie uns, während Sie in Ratchet einsteigen, um zu sehen, wie es funktioniert. Wir treten die Reifen ab, probieren ein paar Funktionen aus und entscheiden, ob es einen Download wert ist oder nicht. (Spoiler-Alarm: es ist.)
Was ist Ratsche?
Ratsche ist im Konzept sehr einfach. Es ist ein UI-Framework, das hauptsächlich mit CSS (und etwas JavaScript) betrieben wird und durch einfaches HTML implementiert wird. Es ist eigentlich Twitter Bootstrap sehr ähnlich, es ist nur so konzipiert, dass es wie die native iPhone-Oberfläche aussieht.
Kann ich das wirklich tun?
Ratchet ist nicht nur für hochentwickelte Entwickler ein sehr kompliziertes Framework. Sie können in wenigen Minuten loslegen. Es erfordert keinerlei Kenntnisse über jede iOS-Programmierung und eigentlich nur das kleinste bisschen JavaScript.
Um zu sehen, wie es funktioniert, erstellen wir eine Musterseite von Grund auf.
Fertig machen
Beginnen Sie mit der Ratchet GitHub-Seite und laden Sie den kostenlosen Download herunter. In diesem Download finden Sie eine Startvorlage, die Sie in Ihrem bevorzugten Texteditor öffnen können.
Im Kopfbereich des HTML-Codes gibt es eine Menge Zeug. Wir lassen dies für unsere Zwecke ganz alleine, da es einen anständigen Testaufbau bietet. Sie können die Berührungssymbole, den Seitentitel usw. an Ihre Wünsche anpassen.
Von hier aus müssen wir nur noch durch die Dokumentation scrollen, die gewünschten Elemente packen und in unseren HTML-Code einfügen. So einfach ist das!
Titelleiste
Als erstes fügen wir eine blaue Titelleiste ein, die oben auf dem Bildschirm angezeigt wird. Das ist einfach. Platzieren Sie zunächst den folgenden Code innerhalb des body-Tags in Ihrem HTML-Code.
Dieses Kopfelement dient als Container für unsere Titelleiste. Nun werfen wir eine h1 mit einem? Title? Klasse zugewiesen.
Wenn wir diese Seite jetzt auf einem iPhone laden, sehen wir oben auf der Seite eine schöne Titelleiste im iOS-Stil. Ziemlich einfach, richtig?
Lassen Sie uns diese Bar ein wenig interessanter gestalten, oder? Verwenden eines Ankertags mit dem? Button-prev? und? button-next? Klassen können wir unsere Titelleiste von rein ästhetisch zu funktional bringen.
Wieder einmal sehen wir die Kraft dieses Frameworks bei der Arbeit. iOS macht nicht Wenn Sie diese HTML-Elemente standardmäßig so formatieren, erledigt Ratchet hier alle wichtigen Aufgaben.
Schieberegler
Der obige Schritt beschreibt den grundlegenden Prozess des Prototyping Ihrer App oder Webseite. Blättern Sie durch die Dokumentation, suchen Sie ein Element, das Sie verwenden möchten, fügen Sie den Code ein und optimieren Sie ihn. Als Nächstes fügen wir etwas beeindruckenderes hinzu: einen Bildschieberegler.
Der Inhalt Div
Bevor wir den Slider starten, müssen wir noch etwas hinzufügen. Abgesehen von der Titelleiste muss alles in Ratchet mit einer Klasse von "Inhalten" in ein Div geworfen werden.
Sie können mehrere Content-Divs erstellen oder einfach alles, was Sie brauchen, in eins umwandeln. In einem späteren Abschnitt erfahren Sie, wie Sie mit einem aufgefüllten Content div eine kleine Trennung zwischen Ihrem Inhalt und dem Bildschirmrand vornehmen.
Slider-Code
Der Ratschen-Schieberegler besteht aus einem Schieberegler. div, das eine ungeordnete Liste enthält. Stellen Sie wieder sicher, dass dies alles in Ihr Content-Div geht.
Jedes Listenelement wird hier zu einer Folie. Sie können ein Bild und einen Bereich für eine Textüberlagerung hinzufügen.
Dies wird als einzelner Artikel in unserem Formular dienen. Jeder andere Artikel benötigt eine eigene Eingabegruppe. div. Geben Sie in der Eingabegruppe eine Beschriftung und ein Textfeld mit Platzhaltertext ein.
Dadurch erhalten wir ein Feld, in das der Benutzer einen Namen eingeben kann. Jetzt wiederholen wir diesen Vorgang und werfen zwei weitere Felder auf: E-Mail und Benutzername.
Ratchet wird alle komplizierten Formstylings für uns übernehmen, die uns ohne großen Aufwand eine schöne, schöne Form geben.
Taste
Unsere App-Seite sieht ziemlich gut aus! Inzwischen sollten Sie eine ziemlich genaue Vorstellung davon haben, wie Sie mit Ratchet alleine loslegen können. Lassen Sie uns diesen Trottel mit einem weiteren Element beenden: einem Senden-Button.
Ratchet verfügt über diese schönen großen Schaltflächen, die sich jedoch standardmäßig auf die gesamte Breite des Containers erstrecken, was in diesem Beispiel nicht richtig aussieht. Als Ergebnis wollen wir die "inhaltsgefüllte" Klasse, die ich zuvor erwähnt habe.
Fügen Sie dieses div wie folgt am Ende Ihres Formulars ein:
Dies gibt uns ein paar Pixel für das Auffüllen, so dass unser Knopf Platz zum Atmen hat. Jetzt müssen wir nur noch ein Anker-Tag mit zwei Klassen platzieren: button-main und button-block.
Damit ist unsere Seite fertig! Es ist ein ziemlich scharf aussehender Prototyp, wenn man bedenkt, dass wir nur ein paar HTML-Ausschnitte kopieren, einfügen und anpassen mussten!
Live Demo: Klicken Sie hier zum Starten (sollte auf einem mobilen Gerät angezeigt werden).
Viel mehr!
Denken Sie daran, dass wir die Oberfläche von Ratchet kaum zerkratzt haben.Es gibt viele weitere Schaltflächenstile, Titelleistenoptionen und andere Formulare. genug, um wirklich mit einem funktionierenden Prototyp zu beginnen.
Seiten verknüpfen
Kein funktionierender iPhone-App-Prototyp wäre ohne diesen berühmten kleinen iPhone-Seitenübergang ein Salz wert. Glücklicherweise kümmert sich die mitgelieferte Datei Push.js um Sie, wenn Sie Seiten miteinander verknüpfen. Sie können sogar verschiedene Übergänge einrichten: ohne JavaScript zu schreiben.
Was halte ich von Ratsche?
Drei Worte: Ratsche ist großartig. Ich würde auf jeden Fall gerne eine gründlichere Dokumentation und noch mehr Elemente sehen, aber das ist nur, dass ich mehr Gutes will.
Ich hatte fast keine Probleme damit, mit diesem Framework zu arbeiten. Innerhalb weniger Minuten nach dem ersten Download erstellen Sie hervorragende Prototypen. Was könnte man mehr fragen?
Das einzige Problem, das mir aufgefallen ist, ist mit Slider-Beschriftungen. Ich bin nicht sicher, was ich falsch mache, aber ich kann den Text nicht über der Folie anzeigen, wenn ich einfach den Anweisungen auf der Ratchet-Site folge (einige manuelle Überschreibungen beheben die Probleme). Ansonsten funktioniert alles perfekt.
Probieren Sie es aus!
Nun, da Sie gesehen haben, was Ratchet ist, was es kann und was ich dazu gehört habe, holen Sie sich Ihren kostenlosen Download. Spielen Sie ein paar Minuten damit, dann hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Haben Sie andere ähnliche Frameworks gefunden? Wie vergleichen sie sich mit Ratchet?