Share
Cosa starai creandoDopo aver progettato alcune simulazioni visive per guidarci nella creazione della nostra piccola app per il browser, passiamo alla parte eccitante e iniziamo a costruire!
Impostiamo la nostra struttura di file per il progetto. Assomiglierà a qualcosa del genere (con ogni risorsa rispettiva che vive nella sua cartella corrispondente):
chiaro. ├── index.html └── assets ├── css ├── img ├── js └── sketch
Ora abbiamo una cartella per ciascuna delle nostre risorse, così come la .schizzo file che abbiamo creato in precedenza che contiene i nostri mock di pagina.
Sulla base della nostra struttura di file, impostiamo il nostro documento HTML di base con i collegamenti alle nostre risorse (che creeremo in un momento).
"html
"
Ecco cosa abbiamo finora:
Poiché questa piccola app è relativamente piccola e semplice, preferirò usare il CSS vanilla in questo progetto (non un preprocessore), ma puoi ovviamente scrivere il tuo CSS in qualsiasi forma ti piaccia.
Iniziamo impostando alcuni stili di pagina di base e facendo riferimento ai commenti ai colori che useremo. Nel assets / css / styles.css facciamo quanto segue:
"css / * Stili generali
Colors @highlight: # 196E76 @text: # 4A4A4A; @ text-light: # 9A9A9A @ body-background: #EEEEEE; * /
*, *: before, *: after box-sizing: inherit; margine: 0; padding: 0;
html box-sizing: border-box; background: #EEEEEE; allineamento del testo: centro;
body font-size: 1em; altezza della linea: 1,5; font-family: Lucida Grande, sans-serif; larghezza massima: 43.75em; / * 880/16 * / margine: 0 auto; padding: 0; colore: # 4A4A4A;
img larghezza massima: 100%; altezza: auto;
a color: inherit; "
Qui abbiamo impostato alcuni stili di pagina di base per le immagini, i collegamenti e il modello di box che utilizzeremo. Come avrai notato, stiamo usando il corpo tag come wrapper impostando il suo larghezza massima. Ciò manterrà tutti i nostri contenuti centrati nel mezzo della pagina senza estendersi oltre una certa larghezza.
Notiamo che abbiamo anche definito i valori dei colori che useremo nei commenti principali. Dal momento che non usiamo un preprocessore che ci consente di impostare variabili, queste saranno utili man mano che continueremo a scrivere i nostri stili.
Creiamo l'intestazione della nostra app. Ricorda che in Sketch abbiamo progettato questo:
Quindi, creiamo l'HTML per abbinare la nostra simulazione. Inseriremo questo contenuto nel intestazione elemento che abbiamo creato in precedenza.
"html
Recupera grafica ad icone di dimensioni standard per le app iOS e Mac.
"
Ora abbiamo il nome e la descrizione della nostra app nella parte superiore della pagina. Ma gli stili sono piuttosto semplici.
Scriviamo alcuni stili per il nostro header di pagina che lo rende più in linea con la nostra simulazione:
"css / * Header Styles * / header margin: 1em 0 2em; color: # 196E76;
intestazione h1 font-family: 'Pacifico', serif; font-size: 3em; text-shadow: 0 4px 2px rgba (0, 0, 0, .1); margine: 0; header h1 a text-decoration: none; header p margin-top: -.625em; text-indent: 7.75em; / * indent leggermente * / text-shadow: 0 1px 0px rgba (0, 0, 0, .15); font-size: .875em; / * 14/16 * / "
Ecco una breve panoramica di ciò che abbiamo fatto:
Accentsconagua
intestazione h1 è impostato per utilizzare Pacicifo da Google Fonts (ricorda, abbiamo impostato un link a questa risorsa nella nostra intestazione)intestazione p è leggermente sfalsato per evitare di entrare nella discendenza della "G" sul nome dell'app.Ora il nostro header sembra più simile al design:
Tuttavia, ricorda che la nostra app sarà reattiva! Quindi, se controlliamo questi stili su una larghezza più ristretta utilizzando gli strumenti di sviluppo di Chrome, noterai che l'inserimento del testo per la descrizione è un po 'strano a causa della nostra indentatura del testo.
Per alleviare questo problema, a larghezze più strette, rimuoveremo il rientro del testo e rilasceremo il testo della descrizione con un margin-top così avvolgente sembra più naturale. Scriviamo una query multimediale per aiutarci:
css @media screen e (max-width: 600px) header p text-indent: 0; margin-top: .5em;
Lì, ora abbiamo un'intestazione reattiva!
Il prossimo passo è passare alle aree di input e output della nostra simulazione. Ricorda che sembravano qualcosa del genere:
Innanzitutto, aggiungiamo il campo di input al principale Elemento HTML che abbiamo creato in precedenza:
"html
"
Ora abbiamo un modulo con un input e un pulsante di invio. Buona semantica fino ad ora, ma non sembra proprio come la vogliamo. Dovremo aggiungere alcuni stili.
Aggiungiamo alcuni stili al nostro input di moduli e agli elementi dei pulsanti.
"css / * Form Input Styles per il modulo di input e pulsante * / form position: relative;
modulo input larghezza: 100%; blocco di visualizzazione; dimensione carattere: 1em; riempimento: .625em .85em; padding-right: 7em; altezza della linea: 1,5; margine: 0; border: 1px solid #bbb; box-shadow: 0 1px 3px rgba (0, 0, 0, .1), 0 2px 4px rgba (0, 0, 0, .1); border-radius: 3px; modulo di input: focus border-color: # 298cda; pulsante del modulo decorazione del testo: nessuno; sfondo: # 196E76; altezza: 100%; posizione: assoluta; a destra: 0; inizio: 0; altezza della linea: 1,5; colore bianco; dimensione carattere: 1em; border-radius: 0 3px 3px 0; confine: 0; contorni: 0; allineamento del testo: centro; -webkit-apparenza: nessuno; margine: 0; riempimento: 0 1em; font-family: 'Pacifico', serif; pulsante del modulo: hover cursor: pointer; pulsante del modulo: disabilitato opacità: .5; "
Qui abbiamo aggiunto alcuni stili al nostro input e pulsante del modulo, nonché alcuni stati diversi come : hover, :messa a fuoco, e :Disabilitato. Questo ci ha dato un input stilato proprio come l'abbiamo progettato nel nostro finto.
A questo punto possiamo creare quello che abbiamo chiamato l'area "output". Qui è dove eseguiremo il rendering dinamico dell'icona restituita dall'API di iTunes. Tuttavia, nel caricamento iniziale della pagina, l'utente non ha ancora richiesto nulla. Per il momento useremo il design a stato zero. Ricorda dai nostri mock, sembra questo:
Continueremo ad aggiungere al principale Elemento HTML in cui abbiamo lavorato:
"html
Inserisci un link iTunes Store App valido, ad es. https://itunes.apple.com/us/app/twitter/id333903271?mt=8
"
Si noti che abbiamo aggiunto l'output HTML subito dopo il nostro input HTML. Consiste in un involucro, che funge da grande scatola bianca nel nostro design, e il contenuto, che è centrato all'interno di esso. Useremo i CSS per impostare il .soddisfare elemento per avere un larghezza massima di 512 pixel, poiché è la dimensione più grande in cui mostreremo la nostra icona. Per ora però, abbiamo qualcosa che assomiglia a questo:
Si noti che manca il segnaposto dell'icona. Se torniamo al nostro documento Sketch, possiamo facilmente emettere quell'asset come SVG da usare nel browser.
Ora dovremmo avere l'immagine visualizzata nel browser.
Aggiungiamo alcuni stili alla nostra casella di output.
"css / * Stili di contenuto Contenitore principale per contenuto, ovvero icone, messaggi di errore, ecc. * /. wrapper background: #fff; border: 1px solid #ccc; text-align: center; padding: 2em; margin: .5em 0 2em; box-shadow: 0 2px 4px rgba (0, 0, 0, .1); raggio-bordo: 3px; posizione: relativo;
.content max-width: 512px; margine: 0 auto; posizione: relativa; word-wrap: break-word; / * per gli url lunghi * /
.content * / * esegui un semplice reset sugli elementi in .content * / margin: 0; padding: 0; .content strong font-weight: bold; blocco di visualizzazione; "
La maggior parte dei CSS che abbiamo aggiunto qui ha commenti nel codice per spiegarlo. Abbiamo aggiunto gli stili al nostro wrapper esterno, quindi, poiché non abbiamo eseguito un reset completo del CSS sulla pagina, abbiamo effettuato un semplice reset sugli elementi HTML all'interno dell'area del nostro contenuto applicando .contenuto *.
Infine, abbiamo aggiunto alcuni stili per gli elementi in grassetto nel nostro stato zero. Ora dovremmo avere qualcosa che assomiglia alla nostra finta!
Ora che abbiamo configurato la nostra struttura HTML, insieme agli stili corrispondenti, siamo pronti per saltare e gestire le interazioni della pagina con JavaScript!
Nel prossimo (e ultimo) tutorial di questa serie, scopriremo come prendere l'input dell'utente, fare una richiesta API e rendere l'output nel browser. Ci vediamo lì!
