Share
Ben tornato! In questa parte del tutorial, codificheremo il nostro design in HTML e illustreremo alcune proprietà di stile CSS di Facebook che daranno quel tocco nativo. Quindi resta con me, preparati una tazza di tè e una buona programmazione!
Benvenuto nella parte 2 del nostro design e codifica un'app nativa per Facebook. Nell'ultimo articolo abbiamo guardato dietro le quinte in alcuni dei processi di pensiero coinvolti nella creazione di un'app Facebook originale. Anche se non siamo andati molto dettagliatamente sull'effettivo design di esso in Photoshop; abbiamo discusso di come i principi di progettazione di Facebook possono aiutarti a progettare la tua app. Per il mio esempio ho scelto di ricreare il blog webdesigntuts + come app di Facebook. Suppongo che tu sia abbastanza comodo in Photoshop per averlo replicato o adattato per creare il tuo aspetto originale.
In questa parte del tutorial, codificheremo quel disegno in HTML e illustreremo alcune proprietà dello stile CSS di Facebook che daranno quel tocco nativo. Quindi resta con me, preparati una tazza di tè e una buona programmazione!
È sempre una buona idea iniziare con un po 'di pianificazione del futuro. Alcuni di voi vorranno progettare il proprio layout in Photoshop, mentre alcuni di voi che sono abbastanza sicuri vorranno passare direttamente dal wireframe al markup HTML / CSS. Personalmente mi piace sempre creare quello che ho intenzione di codificare in Photoshop, in quanto mi dà una forte idea visiva su ciò che sto per essere codificato. Può anche rivelarsi utile in futuro per quando vuoi aggiornare la tua app. Può essere molto più facile organizzare e concettualizzare le cose in Photoshop di quanto non possa essere nel tuo editor di codice.
A volte mi piace anche stampare il mio wireframe e segnare le dimensioni su di loro con una penna. Questo rende anche la vita più facile quando sto codificando le cose. Mentre prosegui sono sicuro che troverai i tuoi metodi e modi di fare le cose e una parte di esso è trovare il modo migliore per te.
Il modo in cui ho strutturato la mia cartella è il seguente (e questo è praticamente il mio modo standard di impostare le cose per ogni progetto). Puoi risparmiare un sacco di tempo semplicemente creando questo modello di cartella vuota sul tuo disco rigido e copiandolo ogni volta che crei un nuovo progetto
Progetta e codifica un'app Facebook integrata
Per questo progetto ho usato il doctype HTML5, che penso che la maggior parte di voi dovrebbe aver già provato. Per il mio reset dei CSS, ho collegato il ripristino dei CSS di Yahoo dalla loro libreria YUI. Se non hai familiarità con un reset CSS, nella sua forma più semplice può essere descritto come:
un foglio di stile per ridurre le incoerenze del browser in cose come altezze delle linee, margini e dimensioni dei caratteri delle intestazioni, ecc
Non ho intenzione di entrare troppo nei dettagli su questo in questo tutorial, ma puoi trovare maggiori informazioni a riguardo nella successiva sezione di lettura.
Dopo il reset, mi sono collegato al mio file CSS che ho chiamato "style.css". L'ho seguito poi con l'ultima versione di jQuery e un include nel mio file javascript che ho chiamato "myjava.js" (anche se creeremo questo file nella prossima parte del tutorial). Questo file ci permetterà di fare la nostra ricerca di filtri e modificare il contenuto delle nostre schede di pagina
Mentre creo la versione html della nostra app di Facebook, vorrei mettere tutto in un wrapper largo 760px. Questo è solo per assicurarmi di rimanere entro 760px; la larghezza della tela su cui Facebook può collocare la tua app. Quindi rimuoverò questo wrapper e il CSS prima di inserirlo in Facebook.
Una volta impostati i nostri include e "wrapper", è ora di passare ai componenti principali della nostra app. In questo esempio è relativamente semplice dato che abbiamo solo i "maincontent" e le "sidebar" div. A questo applicheremo classi con lo stesso nome. Potresti, se lo desideri, utilizzare "id" anziché "classi" poiché queste istanze div non verranno ripetute. Tuttavia, qualcosa che scelgo sempre (anche se sono sicuro che alcuni non sarebbero d'accordo) è di usare le lezioni sulla maggior parte degli articoli. Uso raramente id. Trovo che, facendo ciò, sia semplice per me. Non devo mai chiedermi se ho dato qualcosa a un 'id' o a una 'classe'. Questo può essere particolarmente utile specialmente quando inizi a incorporare jQuery nelle tue app. Anche se consideri se sia fattibile prima di iniziare la codifica, non avrai sicuramente bisogno di usare id ovunque.
È inoltre consigliabile terminare sempre i blocchi di revisione con un commento di chiusura che indica quale parte del markup è terminata. In questo modo sai dove finisce ogni sezione. Devo ammettere che ero piuttosto in ritardo nell'adottare questa tecnica e con il senno di poi avrei potuto risparmiarmi molte ore di dover guadare la mia strada attraverso un mucchio di codice cercando di scoprire dove iniziano e finiscono alcuni blocchi.
- Tutti
- Di
- Scrivi per noi
- Altri blog
Per questa app non pensavo fosse necessario usare un'intestazione solo per ospitare il logo, quindi l'ho messo in cima al div 'maincontent' nel proprio div con una classe chiamata 'logo'. Questo è seguito da una lista non ordinata per le schede. Ho dato alle schede un nome di classe di; sì avete indovinato "tabs". Questi agiranno come la nostra barra dei menu delle schede che visualizzerà le diverse pagine della nostra app del blog.
Le pagine della nostra app blog sono racchiuse in un contenitore div, che ho dato una classe di 'tab_container'. All'interno di questo ho quindi quattro div (uno per ogni scheda / pagina). Ho dato a tutti e quattro questi una classe chiamata 'tab_content' con ognuno che ha una sua classe per la sua posizione all'interno della pagina. La prima scheda ha una classe extra di 'tab1', la seconda 'tab2', la terza 'tab3' ecc. Questi singoli nomi di classe verranno usati per aiutarci a identificare ogni scheda nella prossima parte del tutorial quando implementeremo il jQuery.
Accentsconagua
