Share
Bine ai revenit! În această parte a tutorialului, vom codifica designul nostru în HTML și vom ilustra câteva dintre proprietățile stilului CSS de pe Facebook, care îi vor da un sentiment nativ. Deci stai cu mine, fă-ți o ceașcă de ceai și codificați fericit!
Bine ați venit în partea 2 a designului nostru și codificați o aplicație Facebook nativă. În ultimul articol, ne-am uitat în spatele scenei la unele dintre procesele de gândire implicate în crearea unui aspect nativ și simțirea aplicației Facebook. Deși nu am făcut detalii despre designul real al lui în Photoshop; am discutat modul în care principiile de proiectare ale Facebook vă pot ajuta să vă proiectați aplicația. Pentru exemplul meu am ales să recreez blogul webdesigntuts + ca pe o aplicație Facebook. Presupun că sunteți suficient de confortabil în Photoshop pentru a le replica sau a le personaliza pentru a crea propriul aspect nativ și simți design.
În această parte a tutorialului, vom codifica acel design în HTML și vom ilustra câteva dintre proprietățile stilului CSS de pe Facebook, care îi vor da un sentiment nativ. Deci stai cu mine, fă-ți o ceașcă de ceai și codificați fericit!
Este întotdeauna o idee bună să începeți cu un pic de planificare înainte. Unii dintre dvs. vor dori să proiecteze aspectul dvs. în Photoshop, în timp ce unii dintre voi care sunt suficient de siguri vor dori să sară direct de la firmetru în marcajul HTML / CSS. Personal, îmi place întotdeauna să creez ceea ce voi codifica mai întâi în Photoshop, deoarece îmi dă o idee vizuală puternică cu privire la ceea ce voi codifica. De asemenea, poate fi util în viitor când doriți să actualizați aplicația. Poate fi mult mai ușor să aranjezi și să conceptualizezi lucrurile în Photoshop decât să poți fi în editorul de coduri.
Uneori îmi place să imprim imprimarea cadrului meu și să notez dimensiunile pe ele cu un pix. Acest lucru face viața mai ușoară și atunci când codific lucrurile. Pe măsură ce mergeți, sunt sigur că veți veni cu propriile metode și modalități de a face lucrurile și că o parte din ele găsesc cea mai bună cale care vă convine.
Modul în care am structurat dosarul meu este după cum urmează (și acesta este destul de mult modul meu standard de a stabili lucrurile pentru fiecare proiect). Puteți să vă salvați o mulțime de timp prin crearea pur și simplu a acestui șablon gol pe hard disk și copierea acestuia de fiecare dată când creați un nou proiect
Proiectați și codificați o aplicație Facebook integrată
Pentru acest proiect am folosit documentul HTML5, care cred că majoritatea ar fi trebuit să încercați până acum. Pentru resetarea CSS am legat de resetarea CSS a Yahoo de la biblioteca YUI. Dacă nu sunteți familiarizat cu o resetare CSS, în forma sa cea mai de bază poate fi descrisă ca:
o foaie de stil pentru a reduce inconsecvențele browserului în lucruri cum ar fi înălțimile implicite ale liniilor, marginile și dimensiunile de fonturi ale titlurilor etc
Nu voi intra în prea multe detalii despre acest lucru în acest tutorial, dar puteți găsi mai multe informații despre acest lucru în secțiunea următoare de lectură de mai jos.
După resetare, am legat apoi de propriul fișier CSS pe care l-am numit "style.css". Am urmat apoi acest lucru prin ultima includere a jQuery și o includere în propriul fișier javascript pe care l-am numit "myjava.js" (deși vom crea acest fișier în următoarea parte a tutorialului). Acest fișier ne va permite să realizăm căutarea de filtre și să modificăm conținutul filelor de pagină
În timp ce creăm versiunea html a aplicației noastre Facebook, aș vrea să pun totul într-un ambalaj cu lățimea de 760 pixeli. Acest lucru este doar pentru a se asigura că am ședere în termen de 760px; lățimea pânzei pe care Facebook o permite aplicației dvs. să stea înăuntru. Apoi, eliminați acest pachet și CSS-ul pentru acesta înainte să îl pun în Facebook.
Odată ce am setat include și "wrapper", atunci este timpul să ne mutăm pe blocurile principale ale aplicației noastre. În acest exemplu este relativ simplu deoarece avem doar "maincontent" și "sidebar" divs. În acest scop vom aplica clase cu același nume. Ai putea, dacă vrei, să folosești "id" în loc de "clase", deoarece aceste exemple div nu vor fi repetate. Cu toate acestea, ceva, pe care am optat întotdeauna (deși sunt sigur că unii ar fi în dezacord) este de a folosi clase pe cele mai multe elemente. Rar folosesc id-urile. Mi se pare că, făcând asta, mă păstrează simplu pentru mine. Nu trebuie să mă întreb dacă am dat ceva "id" sau "clasă". Acest lucru poate fi remarcabil de util, mai ales când începeți să includeți jQuery în aplicațiile dvs. Deși nu ia în considerare dacă este posibil înainte de a începe să codificați că cu siguranță nu veți avea nevoie să utilizați id-urile de oriunde.
De asemenea, este recomandabil să închideți întotdeauna blocurile de marcare cu un comentariu de închidere care să indice care parte a marcajului a terminat. În acest fel știi unde se termină fiecare secțiune. Trebuie să recunosc că am fost destul de târziu pentru a adopta această tehnică și, din retrospectivă, m-aș fi putut salva multe ore de a fi trebuit să trec prin multe grămezi de coduri, încercând să aflu unde începeu și se termină anumite blocuri.
- Toate
- Despre
- Scrieți pentru noi
- Alte bloguri
Pentru această aplicație, nu am crezut că este necesar să folosiți un antet doar pentru a găzdui logo-ul, așa că am pus acest lucru la partea de sus a divului "maincontent" în propria div, cu o clasă numită "logo". Acesta este apoi urmat de o listă neordonată pentru file. Am dat tab-urilor un nume de clasă; da, ați ghicit-o "file". Acestea vor acționa ca bara de meniu din tab-ul nostru care va afișa diferitele pagini ale aplicației noastre de blog.
Paginile aplicației noastre de blog sunt înfășurate în interiorul unui container div, pe care l-am dat o clasă de 'tab_container'. În interiorul său am apoi patru div (una pentru fiecare filă / pagină). Am dat tuturor celor patru o clasă numită "tab_content", fiecare având clasa proprie pentru poziția sa în pagină. Prima tabă are o clasă suplimentară de "tab1", a doua "tab2", a treia "tab3" etc. Aceste nume de clase individuale vor fi folosite pentru a ne ajuta să identificăm fiecare filă în următoarea parte a tutorialului atunci când implementăm jQuery.
Accentsconagua
