Share
Velkommen tilbake! I denne delen av opplæringen skal vi kode inn vårt design i HTML og illustrere noen av Facebooks CSS-stilegenskaper som vil gi den den innfødte følelsen. Så hold deg til meg, lag deg en kopp te og lykkelig koding!
Velkommen til del 2 av vårt design og kode en innfødt Facebook-app. I den siste artikkelen så vi bak kulissene på noen av de tankeprosessene som var involvert i å skape et innfødt utseende og en Facebook-app. Selv om vi ikke gikk i detalj med den faktiske utformingen av den i Photoshop; Vi diskuterte hvordan Facebooks designprinsipper kan hjelpe deg med å designe appen din. For mitt eksempel valgte jeg å gjenskape webdesigntuts + bloggen som en Facebook-app. Jeg antar at du er komfortabel nok i Photoshop til å enten kopiere den eller skreddersy den for å lage ditt eget innfødte utseende og design.
I denne delen av opplæringen skal vi kodes det designet til HTML og illustrere noen av Facebooks CSS-stilegenskaper som gir den den innfødte følelsen. Så hold deg til meg, lag deg en kopp te og lykkelig koding!
Det er alltid en god ide å begynne med litt fremoverplanlegging. Noen av dere vil utforme layoutet ditt i Photoshop, mens noen av dere som er selvsikker nok, vil ønske å hoppe rett fra wireframe til HTML / CSS-markeringen. Personlig liker jeg alltid å lage det jeg skal kodes for i Photoshop, da det gir meg en sterk visuell ide om hva jeg skal kode. Det kan også komme til nytte i fremtiden for når du vil oppdatere appen din. Det kan være mye lettere å ordne og konseptualisere ting i Photoshop enn det kan være i kodeditoren din.
Noen ganger liker jeg også å skrive ut min wireframe og merke dimensjonene på dem med en penn. Dette gjør også livet enklere når jeg koder opp ting. Når du går med, er du sikker på at du vil komme opp med dine egne metoder og måter å gjøre ting på, og en del av det er å finne den beste måten som passer deg.
Måten jeg har strukturen på, er som følger (og dette er ganske mye min standard måte å sette opp ting på for hvert prosjekt). Du kan spare mye tid ved å bare lage denne tomme mappemalen på harddisken og kopiere den hver gang du oppretter et nytt prosjekt
Design og kode en integrert Facebook App
For dette prosjektet har jeg brukt HTML5 doktypen, som jeg tror de fleste av dere burde ha prøvd nå. For min CSS tilbakestilling har jeg koblet til Yahoo's CSS reset fra deres YUI bibliotek. Hvis du ikke er kjent med en CSS reset, kan den i sin mest grunnleggende form beskrives som:
et stilark for å redusere nettleserens uoverensstemmelser i ting som standard linjehøyder, marginer og skriftstørrelser i overskrifter mv
Jeg kommer ikke til å gå for mye detaljert om dette i denne opplæringen, men du kan finne mer informasjon om dette i den videre lese delen nedenfor.
Etter tilbakestilling har jeg da koblet til min egen CSS-fil som jeg har kalt 'style.css'. Jeg har deretter fulgt dette med det siste av jQuery og en til min egen javascript-fil som jeg har kalt 'myjava.js' (selv om vi vil lage denne filen i neste del av opplæringen). Denne filen vil tillate oss å gjøre vårt filtersøk og endre innholdet på sidens faner
Mens du lager html-versjonen av vår Facebook-app, vil jeg gjerne legge alt i en wrapper som er 760px bred. Dette er bare for å sikre at jeg bor innenfor 760px; bredden på lerretet som Facebook lar appen din sitte i. Jeg fjerner deretter denne wrappen og CSS for den før jeg legger den inn i Facebook.
Når vi har installasjon inkluderer vår og "wrapper" er det da på tide å flytte inn på hovedbygningene i appen vår. I dette eksemplet er det relativt enkelt da vi bare har maincontent og sidebar-divs. Til dette vil vi bruke klasser med samme navn. Du kan, hvis du vil, bruke 'id' i stedet for 'klasser', da disse div-instansene ikke vil bli gjentatt. Men noe som jeg alltid velger (selv om jeg er sikker på at noen ville være uenige) er å bruke klasser på de fleste elementer. Jeg bruker sjelden ID-er. Jeg finner at ved å gjøre dette bare holder det enkelt for meg. Jeg trenger aldri å lure på om jeg har gitt noe et "id" eller en "klasse". Dette kan komme utrolig bemerkelsesverdig, spesielt når du begynner å inkorporere jQuery i appene dine. Selv om du vurderer om det er mulig før du begynner koding, vil du definitivt ikke trenger å bruke ID-er hvor som helst.
Det er også tilrådelig å alltid avslutte oppmerkningsblokkene med en avsluttende kommentar som angir hvilken del av merkingen som er ferdig. På denne måten vet du hvor hver seksjon slutter. Jeg må innrømme at jeg var ganske sen til å vedta denne teknikken, og etterpå kunne jeg ha reddet meg mange timer med å vasse meg gjennom koder med kode for å finne ut hvor enkelte blokker begynner og slutter.
- Alle
- Handle om
- Skriv til oss
- Andre blogger
For denne appen trodde jeg ikke det var nødvendig å bruke en header bare for å huse logoen, så jeg har satt dette på toppen av maincontent div i sin egen div med en klasse som heter 'logo'. Dette etterfølges av en uordnet liste for fanene. Jeg har gitt fanene et klassenavn av; ja du gjettet det 'faner'. Disse vil fungere som vår menylinje i kategorien som vil vise de forskjellige sidene i bloggen vår.
Sidene i bloggen vår er pakket inn i en div-container, som jeg har gitt en klasse av 'tab_container'. Innenfor dette har jeg fire div (en for hver kategori / side). Jeg har gitt alle fire av disse en klasse som heter 'tab_content', med hver som har sin egen klasse for sin posisjon innenfor siden. Den første kategorien har en ekstra klasse av «tab1», den andre «tab2», den tredje «tab3» osv. Disse individuelle klassenavnene blir brukt til å hjelpe oss med å identifisere hver flipp i neste del av opplæringen når vi implementerer jQuery.
Accentsconagua
