Sprednji Razvoj Nasveti za življenje po.
V nadaljevanju je članek sem prebral na blogu o front-end razvijalcem in kodiranje prakse in mislil, da bi ga posredovati naprej. To je po Doug Neiner in urejevalnika na gorivne vaše Coding in je predsednik Pixel grafični Design Studio . Bil je zasvojen z novo tehnologijo, in še posebej ljubi preživljati čas z WordPress in Ruby na tirih in jQuery.
Kaj sledi, tu je serija 10 stvari, da se spomnimo in prakso na posameznem projektu spletnega razvoja. Imam jih na tem seznamu po pomembnosti, kot mnogi od korakov graditi na drug drugega. Če ste vzeli nič drugega oddaljena od branja, vas prosimo, da poslovnik # 1 in # 2 k srcu in jih praksi. Mislim, da reševanje teh dveh problemov bo vodilo k boljši projektiranju in boljšemu izvajanju na spletnih straneh prek interneta.
1. Napolnite Dovolj, in nato nekaj
Še posebej v težkih gospodarskih časih, podjetij in posameznikov enaki poskušajo zmanjšati stroške in obdržati projekte dol na minimum. Zaradi tega znanja, smo kot spletni razvijalci poskušali premikati po vsaki fazi v najkrajšem možnem času. Prednji del razvoja, vendar pa traja precej časa, če se izvede pravilno. Ni ustrezno polnjenje za tisti čas nas vodi kot razvijalcem, da preskočite stvari, ki jih poznamo, so pomembne samo, da je projekt v okviru proračuna. Pravilo je preprost ... ki ga običajno ne bodo vzeli čas, da to storite prav, če ne boste imeli časa, da sprejme. Edini način, da bi dobili več "Time" kot razvijalec, je, da se zagotovi čas mi preživijo ustrezno nadomestilo. Takrat lahko samo naša srca in misli v celoti priključen na naših projektov ... in šele potem bomo lahko vzamete čas, da sledijo preostalih 9 pravila.
2. Izobraziti Designer
Za tiste, ki so oblikovalec / razvijalec vse-v-enem naprava, mora ta je lahko. Vendar, kodirniki, ki delajo z ali za oblikovalca imajo edinstveno odgovornost. Kot mnogi oblikovalci prihajajo iz tiska ozadju, je odvisno od vas, razvijalec, da jih izobraževati o možnostih na voljo svoje modele. Ne ... nisem rekel, da vedo, o 150 + jQuery plugins, ki jih uporabljate, ali svoje misli na uporabo UL / LI combo vs seriji A oznak. Rekel sem jih izobraževati o možnostih. Pomagajte jim razumeti, kako bi njihova zasnova prikaz na različnih napravah. Pomagajte jim razumeti, kako vzvoda ponavljajočih okolij in tlakovanimi vzorcev, da se doseže veliko modelov z najmanjšo velikost datoteke.
Ne puščajte ustvarjalnost izključno oblikovalca bodisi! To je vaša priložnost, da dokaže, da ste ustvarjalni, pa tudi z iskanjem idealne tehnološke rešitve za zadovoljitev potreb oblikovalca. Jim povedal, "da se le ne narediti na tak način" za vsako zahtevo, je prepričan ogenj način, da povzroča frustracije na obeh straneh. Postavite svoj um na delo iskanju načinov okoli ovir.
Opomba: Pravilnik 3 preko 10 Postava izven teh prvih dveh pravil. Nekateri od teh predpisov zahteva dodatno grafiko od oblikovalca, in vsa pravila traja nekaj časa, da sledijo. Naredite zavezanost pravil 1 in 2, in Preostala pravila bodo tako smiselno in bo vaš končni izdelek, da je veliko bolje.
3. Pomislite, v plasteh, ne v rezine
Tudi danes smo še vedno uporabljajo izraz "rezati in oblikovanje", ki opisuje proces oblikovanja gibljejo od Illustrator ali Photoshop v končni postavitev HTML / CSS. Čeprav je to še vedno zelo točni, njegovo ime skriva nekdanji koncept rezanje design na koščke in ga sestavljanje (ponavadi v tabeli) nazaj na strani HTML.
To je bila stara web. Nova spletna uporablja pojem layering, zlaganje, in z-indeks doseči modelov z globino. Kot Koder, se prepričajte, da bi dobili plasteh PSD datotek ali večplastna datotek Ai od oblikovalca vs ravno design. To vam bo omogočilo, da imajo veliko več prožnosti pri tem, kako sestaviti spletno stran. Ne pozabite, da pri delu v plasteh, upoštevajte HTML elemente, ki so bistvenega pomena za strukturo, preden se zatečejo k dodajanju dodatnih divs in sega. Lahko uporabite ponavljajoči se vzorec na navpični html elementa, in ponavljajoče se vodoravne ozadje na body elementa, ne da dreaded div#wrapper v rešiti vaše ozadje woes.
4. Uporabite Best Oblika slike
Kaj je "Best Format slike" si vprašal? To je tisto, ki je najbolj primerna za nalogo pri roki. PNG, GIF in JPEG vsi imajo različne prednosti. Ko ni preglednosti na sliki, test, kateri je velikost datoteke / kakovost slike najboljši med PNG, GIF in JPEG. Za velike slike, bo JPEG skoraj vedno zmaga za kakovost vs velikosti. Za majhne slike brez preglednosti, glej, ki ima boljši velikost datoteke PNG ali GIF. Če se boste odločili za GIF, se prepričajte, da igrajo z stresalo možnosti in Trošenje možnosti (Ali ste vedeli, celo Photoshop ima "Trošenje" možnost za GIF?). Pogosto lahko stisnite še manjše datoteke iz Photoshop skozi prilagajanje izhodne nastavitve še dlje.
Za slike, ki jih je imela preglednosti, boste nato odločili, kako bodo uporabljeni. Če se bodo večplastna nad zapleteno ozadje, boste morda morali razmisliti o uporabi datoteke PNG. Če je v ozadju je v skladu dovolj, da je barva mat za GIF ne izstopajo slabo, poglej, če je datoteka GIF je manjša. GIF ima to prednost, da ne potrebuje dodatnega programiranja, da bi bilo delo v IE6.
V zvezi z uporabo JPEG: Če uporabljate JPEG kot del vašega uporabniškega vmesnika (in ne samo za prikaz fotografije, itd), se prepričajte, da zapustijo off ICC profilov pri shranjevanju na spletu. Nekateri brskalniki bodo spoštovali profil in izdelati barvno razliko med GIF / PNG in JPEG iste barve. To je preprost problem, da bi se izognili s samo izklopite z ICC profile.
Kaj pa, če je izgubil izgubi položaj? Tam so bili časi, ko moram na popolno preglednost v PNG s slike zahtevnosti bolj primeren za JPEG. V teh primerih sem pogosto kup (ne pozabite, da v plasteh), dve slike: PNG za transparentnost in GIF za kompleksno vidik slike. To je kreativno reševanje problemov, kot je ta, da bodo zagotovili vaše strani obremenitev hitro, in da ohrani svojo celovitost oblikovanja.
5. Vem Kdaj uporabiti razredov vs ID-ji
Mislil sem, da je to samo zdrava pamet, ampak očitno ni tako vidim veliko kodirniki, ki uporabljajo imena razreda, kjer bi jih uporabljajo IDS. To morda ne zdi velik problem, vendar pa bo, ko boste poskušali usmeriti element z uporabo Javascript.
Koncept je preprost, če bo samo en element na neki strani, uporabite id. Če bo prišlo do več primerkov na določeni strani, uporabite razreda imena. Kadarkoli element je eno-of-a-kind, uporabite id. Njegova tako enostavno! Stvari, kot ul.navigation za glavno navigacijski vrstici ali div.site-logo nobenega smisla. Vsak od teh elementov, se razlikujejo in bi morali imeti in id.
Namesto da bi dodal še eno pravilo, da naš seznam, mi pavšalni nekaj drugega tukaj: ne uporabljajte preveč razredov! Vzemite naslednjo kodo za skrajni primer (Obvestilo, da razredi pojavi šestkrat):
Za tiste, ki pogosto kodo, se zavedaš, da je to smešno primer, vendar pa kaže članek Zmota za prekomerno uporabo razredov. Uporabljajte samo tisto, kar potrebujete za pravilno slogu in okrepiti (via Javascript) HTML, nič več.
6. Naredite Vaši strani Responsive
Njegovo pomembno, da se stran odziva pravilno, kot je končni uporabnik krmari po njem. Uporaba konvencij, kot so učinki slike prevračanjem pa tudi: lebdenje,: aktivno in: osredotočiti države, ni mogoče dovolj poudariti. Ne želite, da napad uporabnik s preveč interakcije ali stilov, vendar je večina ljudi se dobro odzivajo na vizualno povratno informacijo. Tukaj je enostavna za vas: povezuje morali spremeniti stanje, ko miško lebdi nad njimi ... obdobje! Ni dovolj, da brskalnik prikaže malo roko kaže na povezavo. Ne morem vam povedati, kako neprijetno je, da iskanje po strani s črno besedilo iščejo v temno sivih povezav in upal in molil, da je ročno prikaže dajanje v najem mi znanje sem našel eno!
Uporaba konvencij, kot so "You are here" kazalnikov ali opisne orodje konice so vsi vključeni v to kategorijo. Več interakcije in povratne informacije, ki se pojavi na uporabnika, medtem ko so krmarjenje po mestu, bolje je.
7. Vedno uporabljajte CSS sprites za rollovers
Če ne veste, kaj CSS sprites so, si oglejte ta članek na Smashing Magazine , ali to ena na seznamu poleg podrobnosti. Za tiste, ki ne vedo, kaj so, zakaj ne, ko jih uporabite!? Če mi njegov zaradi pomanjkanja časa, vas želim sklicevati na pravilo # 1 na tem seznamu. Mimo čas argument, ne morem razmišljati o kateri koli korist bolj pomembno kot z uporabo CSS sprites pri slikah rollovers. Oglejte si Starter za jQuery strani. Skoraj vse dele za uporabniški vmesnik, so zgrajene z enim samim PNG (na sliki spodaj). Za vmesnik obremenitve naenkrat in vse v lebdenje / aktivno članice nemudoma na voljo. Št zamuda za: hover slike naložiti, ena zahteva na strežnik in ne 10 +. To fantastično orodje v sprednjem koncu šifrirnih oznak Toolkbox da razvijalci morali uporabljati bolj pogosto.
8. Razumeti razliko med Flash in Javascripta
Mislim, da lahko narediš Javascript neverjetne stvari. Rad imam tudi premikanje meja, kaj lahko stori. Rad bi toinono in dodatkov, prav toliko kot naslednji fant ... ampak Javascript ne more rešiti vseh problemov v dinamičen razvoj spletnih strani. Namesto porabe 10 ur posnemanju Flash funkcijo, da bi potrebovali 1 uro, da bi v Flash, bo prava izbira in izbere Flash. Po drugi strani pa, če si morate sliko rotatorne ... ni pa si drzneš odpreti Flash!
9. Preizkusite svoje mesto na mnogih brskalnikov (vključno z IE6)
Ta je potreben čas, ni nobenega dvoma o tem. Jaz razvoj na Mac, in imajo računalnik (in več Virtual PC okolja), ki je pustiti mi test je večina normalnih ljudi brskalniki uporabljajo danes. Če imate Google Analytics poročil, ki pravijo nihče uporablja IE ali Firefox vsakdo uporablja, ne da domnevo o tem, kako bodo ljudje brskanje vaše spletne strani. Ne pravim, da so spletne strani videti enako, vendar pa jih dela, funkcije in videti lepo (in seveda podobno!) V večini brskalnikov.
Opomba: sem omenil IE6 posebej zato, ker moja največja stranka je družba, ki še vedno uporablja IE6. Sem razvil kodirni slog, ki mi omogoča, da hitro zgraditi za sodobne brskalnike, in izvajati le nekaj slogi in javascript popravke, tako da stran izgleda prav v IE6. Prepričan sem, da sem izgubila nekaj prednost s tem, da na ta način, vendar pa mi prihrani veliko neprijetno trenutkih.
10. Vedno imejte v mislih Vzdrževanje
Kot ste "rezanje" design Photoshop, ali pripravlja svoj CSS in Javascript, imejte v mislih, vzdrževanje. Nekateri noro-kul CSS hack uporabljate danes lahko prišli nazaj v vas preganjalo kasneje. Dampinga CSS pravila kjerkoli si v datoteki CSS morda zdi hitro, v tem trenutku (Guilty!), vendar bo spreminjanje in posodabljanje jih kasneje nočno moro.
Pomemben korak, da se spomnimo se pojavi, ko ste prepped oblikovalec za datoteko za izvoz iz Photoshop ali Illustrator: Ne pozabite, da shranite različico datoteke tik pred izvozom. Na ta način, če boste morali ponovno izvoziti kasneje dodali še en gumb, spremenite vrstico besedila, itd, morda ne boste mogli izvoziti spet hitro. Photoshop običajno prihrani izbire Format slike, ki stiskanja nastavitve in mat barve, da bo vaše delo še lažje.
Zaključek
Obstaja veliko drugih stvari, ki so pomembne za sprednje kodirniki End, da v mislih, ampak mislim, da to je le nekaj najpomembnejših. Veliko bi lahko trdili, da to niso pravila, ampak jaz vas izziv, da bi ti kot take. Morda boste manj verjetno, da jih zlom v interesu časa ali denarja za vaš naslednji projekt.
