Disegna un modello di sito web per l'app per iPhone con la registrazione e-mail (JavaScript)

Se sei stato sulla scena con iOS, hai sicuramente visto alcuni dei bellissimi siti web delle app crearti. Questi sono stati rilasciati negli ultimi due anni in quanto gli sviluppatori sono alla ricerca di modi per attirare il potenziale di marketing. Ci sono molti modelli molto standardizzati per i web designer, ma la mia speranza è di affrontare qualcosa di nuovo!

Oggi creeremo un modello di sito Web per iPhone in stile utilizzando HTML5 / CSS3. Questo non verrà indirizzato a un'app specifica, quindi non includiamo un link per il download nell'app store. Invece ho creato un piccolo modulo di registrazione via e-mail attraverso MailChimp in modo da poter collegare i primi utenti nell'app per la pre-release. Questo è ottimo per gli sviluppatori che hanno bisogno di ottenere qualcosa in esecuzione per il loro prodotto prima che sia sul mercato.

Provalo

Visualizza la demo live - Scarica fonte

Tuttavia, se hai notato che lo screenshot dell'app che sto utilizzando proviene da un'app reale. Si chiama Ballin ~ Dribbble per iPhone e appena spuntato nel negozio poche settimane fa. Questo layout non è utilizzato per approvare l'app Ballin, ma ho solo bisogno di uno screenshot da includere a scopo dimostrativo. Ma sentiti libero di usare un'altra schermata se copi il modello per il tuo sito web.

Iniziare

Come sempre, iniziamo con una struttura di pagine HTML molto semplice. Se hai controllato la demo, tutto ciò di cui abbiamo bisogno è centrato nella pagina e allineato correttamente. Il codice non è affatto contorto! Sto usando il doctype HTML5 standard con 3 file esterni inclusi.

     Sito web di app per iPhone con registrazione e-mail

Il primo è il nostro stile global.css in un file alternativo. Secondo, abbiamo bisogno dell'ultima libreria jQuery ospitata attraverso i database del codice Google. E infine ho aggiunto lo script di convalida del modulo di MailChimp. Questo tag script viene normalmente copiato nell'area del tuo corpo con il modulo di iscrizione via e-mail, ma per semplificare il codice l'ho spostato in testa.

Quindi ora concentriamoci su parti del corpo. Salterò la nostra registrazione e-mail solo per ora, così potremo concentrarci sugli stili e il framework delle bare. Dopo aver aperto il corpo, noterai un ID # Iphone-anteprima che viene utilizzato per ospitare lo screenshot dell'app Ballin 'iPhone. In realtà stiamo usando solo due immagini in questa pagina web: lo schermo dell'iPhone e il nostro sfondo sfumato blu.

Inoltre, come nota rapida, ho utilizzato un file PSD per iPhone 4 per creare il grafico. Puoi dare un'occhiata al blog di Macristocracy in cui Jake Moore ha offerto il PSD gratuito per il download. Oppure, in alternativa, scarica direttamente dal suo link CloudApp senza visitare la pagina!

   <img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_2.jpg"> <p>Una volta nell'area di List Dashboard dovresti notare una serie di link di navigazione secondaria. All'estrema destra noterai Per il tuo sito web e nel menu a discesa fai clic su <strong>Registrati Form Codice Incorpora</strong>. Questo è il codice che dovrai incorporare per un piccolo modulo di registrazione utilizzando MailChimp.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_3.jpg"> <p>Nel menu a sinistra selezionare <strong>Forma classica</strong> e personalizzare le funzionalità a proprio piacimento. Ho rimosso il titolo e ho appena tenuto un campo standard di posta elettronica per l'iscrizione. Il codice che devi copiare è nella casella qui sotto? quindi ora possiamo andare avanti e andare avanti con le nostre modifiche personalizzate.</p> <h2>Personalizzazione del modulo di iscrizione</h2> <p>Inizia rimuovendo il tag di stile superiore con tutte le loro modifiche CSS personalizzate. È bello che lo offrono, ma non ne abbiamo davvero bisogno. Quindi se cerchi l'elemento del modulo noterai un URL molto lungo nell'azione = ?? attributo. Questo è uno dei due URL personalizzati che corrisponderanno al tuo elenco. Se copi dal mio codice, assicurati di sostituire l'azione del modulo con <strong>il tuo elenco personale</strong> - altrimenti i visitatori si iscriveranno al mio sito!</p>     <textarea wrap="soft" readonly="">

Sopra è un esempio di come appare la mia forma dopo aver sventrato tutte le assurdità di MailChimp. Contiene ancora molto codice originale, ma ho spostato i messaggi di errore sopra il campo di input principale. Anche usando l'HTML5 segnaposto attributo possiamo aggiungere il testo predefinito nell'input del campo e-mail prima che un utente faccia clic.

Ora il tag script è dove le persone tendono a perdersi. Se noti due script, dovresti controllare se uno di questi è il file validate.js del modulo jQuery. Se è così puoi rimuoverlo dal momento che l'abbiamo già incluso nella nostra intestazione. Tutto il resto del codice è utilizzato per verificare se il modulo è stato compilato correttamente. È molto complicato se non capisci jQuery, ma per fortuna non hai bisogno di modificare molte cose qui. Se copi il JS dalla mia demo o il download da MailChimp, potresti riscontrare delle differenze se hanno aggiornato il back-end da questa pubblicazione. Per giocare sul sicuro basta provare a lavorare fuori la mia demo per ora.

 var mce_validator = $ ("# mc-embedded-subscribe-form"). validate (options); options = {url: 'http://destinyislands.us2.list-manage2.com/subscribe/post-json?u=8329c77b379de0413725b5380&id=9d70a869e7&c=?', digita: 'GET', dataType: 'json', contentType: " application / json; charset = utf-8 ",

Voglio portare la tua attenzione su un aspetto importante finale del codice JavaScript. La variabile options viene utilizzata per passare le informazioni alla chiamata Ajax durante il controllo della convalida. Noterai un altro URL di sottoscrizione nel jQuery, ma se hai un occhio attento dovresti notare che questo non è lo stesso URL di prima!

È molto importante che entrambi questi URL siano impostati correttamente. L'azione modulo chiama un URI con / Sottoscrizione / post mentre l'URL jQuery sta chiamando / Sottoscrizione / post-JSON. Anche se copi e incolli dalla mia demo, basta aggiornare questi due URL con il tuo, per far funzionare lo script per te.

Visualizza la demo live - Scarica fonte

Conclusione

Questa è stata una rapida introduzione alla creazione di un sito Web iOS App utilizzando MailChimp. Abbiamo scaricato un iPhone PSD da Internet e configurato una piccola applicazione grafica.Abbiamo anche utilizzato alcune modellizzazioni jQuery e CSS3 di base per creare un fantastico modulo per l'iscrizione via e-mail utilizzando Ajax. E con tutto questo legato a MailChimp riceverai un ottimo servizio di abbonamento totalmente gratuito.

Fateci sapere i vostri pensieri o domande nell'area commenti qui sotto. Inoltre se implementi il codice tutorial ovunque vorremmo vederlo dal vivo! Includi un link alla tua pagina web se hai configurato un modello di modello di app per iPhone o iPad simile.