Ratchet è un nuovo fantastico framework che ti consente di creare rapidamente e facilmente i prototipi di layout di app per iPhone utilizzando solo HTML, CSS e JavaScript. Crea semplicemente un contenitore div nel tuo codice HTML, aggiungi alcuni elementi con classi preimpostate e sei pronto per partire.
Seguiteci mentre saliamo in Ratchet per vedere come funziona. Daremo un calcio alle gomme, proveremo alcune funzionalità e decideremo se valga la pena o meno un download. (Avviso spoiler: lo è.)
Cos'è Ratchet?
Ratchet è un concetto molto semplice. È un framework UI alimentato principalmente da CSS (e un piccolo JavaScript) implementato tramite HTML semplice. In realtà è molto simile a Twitter Bootstrap, solo che è specificamente progettato per assomigliare all'interfaccia nativa di iPhone.
Posso davvero farlo?
Ratchet non è una struttura super complicata solo per sviluppatori di alto livello. Puoi metterti in funzione in pochi minuti. Richiede la conoscenza zero di qualsiasi programmazione iOS e in realtà solo il bit più piccolo di JavaScript.
Per vedere come funziona, costruiamo una pagina di esempio da zero.
Iniziare
Per iniziare, vai alla pagina Ratchet GitHub e prendi il download gratuito. All'interno di questo download troverai un modello iniziale, apri questo punto nel tuo editor di testo preferito.
Nella parte principale dell'HTML, c'è un sacco di cose. Lasceremo tutto questo da soli per i nostri scopi in quanto fornisce una configurazione di test decente. Sentiti libero di modificare le icone touch, il titolo della pagina, ecc. Come meglio credi.
Da qui, tutto ciò che dobbiamo fare è scorrere la documentazione, afferrando gli elementi che vogliamo e gettandoli nel nostro HTML. È davvero così facile!
Barra del titolo
La prima cosa che includeremo è una barra del titolo blu che si trova nella parte superiore dello schermo. Fare questo è facile. Per iniziare, inserisci il seguente codice all'interno del tag body nel tuo codice HTML.
Questo elemento di intestazione funge da contenitore per la nostra barra del titolo. Ora buttiamo in un h1 con un? Titolo? classe assegnata.
Ora se cariciamo questa pagina su un iPhone, vedremo una bella barra del titolo in stile iOS nella parte superiore della pagina. Piuttosto semplice, giusto?
Facciamo un po 'più interessante quel bar? Usando un tag di ancoraggio con il pulsante? Prev? e? button-next? classi, possiamo prendere la nostra barra del titolo da puramente estetico a funzionale.
Ancora una volta, stiamo osservando il potere di questa struttura al lavoro. iOS lo fa non stile questi elementi HTML come questo di default, Ratchet sta facendo tutti i lavori pesanti qui.
Slider
Il passaggio sopra descrive in modo abbastanza approfondito il processo di base della prototipazione della tua app o pagina web. Scorri la documentazione, trova un elemento che desideri utilizzare, quindi incolla e modifica il codice. Successivamente, includeremo qualcosa di un po 'più impressionante: un cursore dell'immagine.
The Content Div
Prima di lanciarci nel dispositivo di scorrimento, c'è qualcos'altro che dobbiamo includere. A parte la barra del titolo, tutto in Ratchet deve essere gettato all'interno di un div con una classe di? Contenuto ?.
Puoi creare più div di contenuti oppure puoi semplicemente aggiungere tutto ciò di cui hai bisogno. Più avanti vedremo come utilizzare un div contenuto contenuto per aggiungere una piccola separazione tra il contenuto e il bordo dello schermo.
Codice di scorrimento
Il cursore Ratchet è costituito da un "cursore"? div, che contiene una lista non ordinata. Di nuovo, assicurati che tutto ciò vada all'interno del tuo contenuto div.
Ogni elemento della lista qui diventa una diapositiva. È possibile includere un'immagine e uno span per una sovrapposizione di testo.
Questo servirà da singolo elemento nella nostra forma. Ogni altro articolo avrà bisogno del proprio? Gruppo di input? div. All'interno del gruppo di input, inserisci un'etichetta e un campo di testo con un testo segnaposto.
Questo ci darà un campo per l'utente per digitare un nome. Ora ripetiamo questo processo e aggiungiamo altri due campi: email e username.
Ratchet prenderà il via e gestirà tutto lo stile complicato della forma per noi, il che ci dà una forma bella e bella senza alcuno sforzo serio.
Pulsante
La nostra pagina delle app sembra abbastanza buona! A questo punto dovresti avere una solida idea di come riprendere e correre con Ratchet da solo, quindi finiamo questo svuotamento con un altro elemento: un pulsante di invio.
Ratchet ha questi bei pulsanti grandi, ma per impostazione predefinita, si estendono per l'intera larghezza del contenitore, che non sembra corretto in questo esempio. Di conseguenza, vorremmo implementare il contenuto? classe che ho menzionato prima.
Inserisci questo div right alla fine del tuo modulo in questo modo:
Questo ci darà alcuni pixel di imbottitura in modo che il nostro pulsante abbia un po 'di spazio per respirare. Ora dobbiamo solo inserire un tag di ancoraggio all'interno con due classi: button-main e button-block.
Con ciò, la nostra pagina è finita! È un prototipo dall'aspetto piuttosto nitido, considerato che tutto ciò che abbiamo fatto è stato copiare, incollare e personalizzare alcuni frammenti di codice HTML!
Dimostrazione dal vivo: Clicca qui per lanciare (dovrebbe essere visualizzato su un dispositivo mobile).
Molto altro!
Tieni presente che abbiamo appena graffiato la superficie di ciò che è incluso in Ratchet.Ci sono molti più stili di pulsanti, opzioni della barra del titolo, altre forme; abbastanza per iniziare davvero bene con un prototipo funzionante.
Collegamento di pagine
Nessun prototipo di app per iPhone funzionante varrebbe la pena senza la famosa transizione della piccola pagina iPhone. Fortunatamente, il file Push.js incluso si prende cura di questo per te quando colleghi le pagine insieme. Puoi persino impostare transizioni diverse: senza scrivere alcun JavaScript.
Cosa penso di Ratchet?
Tre parole: Ratchet è fantastico. Mi piacerebbe sicuramente vedere una documentazione più approfondita e anche qualche altro elemento, ma questo è solo il fatto che io voglia più di una cosa buona.
Avevo quasi zero problemi ad alzarmi e correre con questo framework. Nel giro di pochi minuti dal tuo primo download, stai costruendo ottimi prototipi funzionanti. Cosa si può chiedere di più?
L'unico problema in cui mi sono imbattuto è con le didascalie dei cursori. Non sono sicuro di ciò che sto facendo male, ma non riesco a far comparire il testo sulla diapositiva se seguo semplicemente le istruzioni sul sito di Ratchet (alcune sostituzioni manuali risolvono i problemi). Oltre a questo, tutto funziona perfettamente.
Vai a provarlo!
Ora che hai visto cosa è Ratchet, cosa può fare e ascolta la mia opinione su di esso, scarica subito il tuo download gratuito. Gioca con lui per qualche minuto poi lascia un commento qui sotto e facci sapere cosa ne pensi. Hai trovato altri quadri simili? Come si confrontano con Ratchet?