witola.com

Ang sumusunod ay isang artikulo ko basahin sa isang blog na tungkol sa harap-end developer at pagkukudigo ng mga kasanayan at naisip ko pumasa ito sa. Ito ay sa pamamagitan ng sa Doug Neiner, isang Editor sa gasolina ang iyong coding at presidente ng pixel Graphic Design Studio . Siya ay gumon sa bagong teknolohiya, at partikular na loves paggastos ng oras sa WordPress, Ruby sa daang-bakal at jQuery.

Ano sumusunod dito ay isang serye ng mga 10 bagay upang tandaan at pagsasanay sa bawat proyekto ng pag-unlad ng web. Ako nakalista sila dito sa pagkakasunod-sunod ng mga kahalagahan ng maraming mga hakbang na bumuo sa bawat isa. Kung walang ibang tao ang layo mula sa pagbabasa, mangyaring kumuha ng Batas # 1 at # 2 sa puso at pagsasanay sa kanila. Tingin ko paglutas ng mga dalawang problema ay humantong sa mas mahusay na disenyo at mas mahusay na pagpapatupad sa mga website sa buong Internet.

1. Singilin Sapat na, at Pagkatapos ilang

Lalo na sa mga mahirap pang-ekonomiyang mga beses, negosyo at mga indibidwal magkamukha sinusubukan upang kunin ang mga gastos at panatilihin ang proyekto sa isang minimum. Dahil sa kaalaman, namin bilang mga web developer subukan upang ilipat sa pamamagitan ng bawat yugto sa lalong madaling panahon. Front end-unlad, gayunpaman, isang malaking halaga ng oras na kung tapos na maayos. Hindi sapat na singilin para sa oras na iyon ay humahantong sa amin bilang mga developer upang laktawan ang higit sa mga bagay na alam namin ay mahalagang lamang upang panatilihin ang mga proyekto sa loob ng badyet. Ang patakaran ay simple ... karaniwan mong hindi kumuha ng oras upang gawin ito karapatan kung hindi ka magkaroon ng oras upang tumagal. Ang tanging paraan upang makakuha ng higit pa "oras" bilang isang developer, ay upang magarantiya ang oras namin HUWAG paggastos ay maayos bayad. Sa puntong iyon nag-iisa ang aming mga puso at isipan ay ganap na nakasaksak sa aming mga proyekto ... at lamang pagkatapos ay maaari naming maglaan ng oras upang sundin ang mga natitirang 9 mga patakaran.

2. Turuan Ang Designer

Para sa mga na ay isang designer / developer lahat-sa-isang machine, isa na ito dapat ay madali. Gayunpaman, coders na gumagana sa o para sa isang taga-disenyo ay may isang natatanging responsibilidad. Tulad ng maraming mga designer ay mula sa isang print background, ito ay hanggang sa iyo, ang mga developer, upang turuan ang mga ito sa mga posibilidad na magagamit sa kanilang mga disenyo. Hindi ... Hindi ko sabihin hayaan silang alam tungkol sa mga 150 + jQuery plugin gamitin mo, o ang iyong mga saloobin sa paggamit ng ul / li Combo vs isang serye ng isang tag. Ko sinabi turuan sa kanila na ang mga posibilidad. Tulungan silang maunawaan kung paano ang kanilang mga disenyo ay maaaring ipakita sa iba't-ibang mga aparato. Tulungan silang maunawaan kung paano sa pagkilos paulit-ulit na background at baldosado pattern upang makamit ang mahusay na disenyo na may minimum na sukat ng file.

Huwag iwanan ang pagkamalikhain lamang ang taga-disenyo alinman! Ito ay ang iyong pagkakataon upang patunayan na ikaw ay creative pati na rin sa pamamagitan ng paghahanap ang perpektong solusyon sa teknolohiya upang matugunan ang mga pangangailangan ng designer. Na nagsasabi sa kanila "ito lamang ay hindi tapos na ang paraan" para sa bawat kahilingan ay isang sigurado-sunog na paraan upang maging sanhi ng mga frustrations sa magkabilang panig. Ilagay ang iyong isip upang gumana ang paghahanap ng mga paraan sa paligid ng mga hurdles.

Tandaan: Batas 3 sa pamamagitan ng 10 bumuo ng mga unang dalawang mga patakaran. Ang ilan sa mga sumusunod na mga patakaran ay nangangailangan ng karagdagang graphics mula sa taga-disenyo, at ang lahat ng mga patakaran ay tumagal ng oras upang sundan. Gumawa ng isang pangako sa mga tuntunin 1 at 2, at ang mga natitirang mga patakaran ay parehong magkaroon ng kahulugan at gawin ang iyong mga tapos na produkto na magkano ang mas mahusay.

3. Tingin sa Layer, Hindi sa hiwa

Kahit ngayon, kami pa ring gamitin ang pariralang "kunin ang disenyo" upang ilarawan ang proseso ng paglipat ng isang disenyo mula sa ilustrador o Photoshop sa ang tapos na HTML / CSS layout. Habang ito ay pa rin sa kalakhan tumpak, ang pangalan nito belies ang dating konsepto ng ng pagpipiraso isang disenyo sa piraso at reassembling ito (karaniwang sa isang table) bumalik sa pahinang HTML.

Na ang lumang web. Ang bagong web ay gumagamit ng konsepto ng layering, stacking, at z-index upang makamit ang mga disenyo na may depth. Bilang isang tagapagkodigo, siguraduhin na makakuha ng layered PSD file o layered Ai file mula sa taga-disenyo kumpara sa isang patag na disenyo. Ito ay magpapahintulot sa inyo na magkaroon ng mas higit na kakayahang umangkop sa kung paano mo magkasama ang isang web site. Tandaan, kapag nagtatrabaho sa mga layer, isaalang-alang ang mga HTML na elemento na ay mahalaga sa istraktura bago resorting sa pagdaragdag ng karagdagang mga divs at sumasaklaw. Maaari mong gamitin ang isang paulit-ulit na vertical pattern sa html element, at isang paulit-ulit na pahalang background sa body sangkap na hindi nagdadala sa dreaded div#wrapper in upang malutas ang iyong mga woes sa background.

4. Gamitin ang Pinakamahusay na Format ng Image

Ano ay ang "Pinakamahusay na Format ng Image" hihilingin mo? Ito ay ang isa na ay pinaka-ugma sa mga gawain sa kamay. PNG, GIF at JPEG file lahat ng may iba't-ibang mga pakinabang. Kapag may walang transparency sa isang imahe, subukan ang kung saan ang laki ng file / kalidad ng imahe ay pinakamahusay sa pagitan ng PNG, GIF at JPEG. Para sa mga malalaking mga imahe, JPEG ay halos palaging manalo para sa laki ng kalidad vs. Para sa mga maliit na mga imahe nang walang transparency, makita na may isang mas mahusay na sukat ng file PNG o GIF. Kung nagpasya ka sa isang GIF, siguraduhin upang i-play ang mga pagpipilian sa pagkalito at ang lossy pagpipilian (ibig mo kahit na alam ng Photoshop ay isang "lossy" na opsyon para sa GIF?). Kadalasan maaari mong pisilin kahit na mas maliit na file ng Photoshop sa pamamagitan ng pag-aayos ng ang output setting na kahit karagdagang.

Para sa mga imahe na kailangan na magkaroon ng transparency, gumawa ng mga aral desisyon sa kung paano sila gamitin. Kung sila ay layered sa isang komplikadong background, maaaring kailangan mong isaalang-alang ang paggamit ng isang PNG file. Kung ang background ay sapat na pare-pareho na malabo ang kulay ng isang GIF ay hindi tumayo ang hindi maganda, tingnan kung ang GIF na file ay mas maliit. Ang GIF may ang bentahe ng hindi nangangailangan ng karagdagang programming upang gawin itong gumagana sa IE6.

Tungkol sa ng JPEG paggamit: Kung gumamit ka ng JPEG bilang bahagi ng iyong user interface (at hindi lamang upang ipakita ang isang larawan, atbp) siguraduhin na tigilan ang mga profile ICC kapag-save para sa web. Ang ilang mga browser ay parangalan ang profile at makabuo ng isang kulay pagkakaiba sa pagitan ng GIF / PNG at JPEG file ng parehong kulay. Ito ay isang simpleng problema upang maiwasan sa pamamagitan ng lamang i-off ang mga profile ICC.

Ano kung ito ay isang mawala-mawalan ng sitwasyon? Nagkaroon ng mga beses kung saan kailangan ko ang buong transparency ng isang PNG sa imahe kumplikado na mas mahusay na-ugma para sa isang JPEG. Sa mga kasong ito madalas ko magtalaksan (matandaan, tingin sa layer) dalawang mga imahe: isang PNG para sa transparency, at isang GIF para sa kumplikadong aspeto ng imahe. Ito ay creative problema sa paglutas ng tulad nito na matiyak na ang iyong mga pahina ng load mabilis, at na ang disenyo Pinapanatili nito integridad.

5. Malaman Kapag sa Gamitin ang mga klase kumpara sa ID

Akala ko ito ay lamang ng sentido komun, ngunit tila hindi ito bilang nakikita ko maraming coders gamit ang mga pangalan ng klase kung saan sila ay dapat gumamit ng id. Ito ay hindi maaaring mukhang tulad ng isang malaking problema, ngunit ito ay ito kapag sinubukan mong i-target ang isang elemento na gamit ang Javascript.

Ang konsepto ay simple, kung magkakaroon lamang ang isang elemento sa isang pahina, gumamit ng isang id. Kung mayroong maramihang mga pagkakataon sa isang ibinigay na pahina, gamitin ang mga pangalan ng klase. Anumang oras ang elemento ng isang isang-ng-isang-uri, gamitin ng isang id. Nito na simple! Mga bagay tulad ng ul.navigation para sa pangunahing navigation bar o div.site-logo gumawa ng walang kahulugan. Bawat isa sa mga elemento ay naiiba at dapat mayroon at id.

Sa halip ng pagdaragdag ng isa pang patakaran sa aming listahan, hayaan mo akong bukol iba pa in dito: huwag gamitin ang masyadong maraming klase! Dalhin ang mga sumusunod na code para sa isang matinding halimbawa (Abiso na ang mga klase lumitaw anim na beses):

Para sa mga na code madalas, nauunawaan mo ito ay isang katawa-tawa halimbawa, ngunit ito ay nagpapakita ng mga kamalian ng higit sa-paggamit ng mga klase. Gamitin lamang kung ano ang kailangan mong tama estilo at pagbutihin (sa pamamagitan ng Javascript) ang HTML, walang higit pa.

6. Gawing iyong mga pahinang nakikiramay

Nito mahalaga na ang pahina tumugon tama ng end user ay nagna-navigate sa pamamagitan ng ito. Paggamit ng balarila tulad ng mga epekto ng rollover ng imahe pati na rin: Pasadahan,: aktibo at: focus estado ay hindi maaaring stressed sapat. Hindi mo nais sa gahasa ng gumagamit na may masyadong maraming mga pakikipag-ugnayan o estilo ngunit karamihan sa mga tao na tumugon na rin sa visual feedback. Dito ay isang madaling isa para sa iyo: Ang mga link ay dapat na baguhin ang estado kapag ang mouse hovers sa mga iyon ... panahon! Ito ay hindi sapat na ang browser na ang nagpapakita ng isang maliit na kamay na nagpapahiwatig ng isang link. Hindi ko sabihin sa iyo kung paano nakakabigo ito ay upang maghanap sa pamamagitan ng isang pahina na may itim na teksto naghahanap para sa maitim na kulay-abo link at hoping at dasal na ang kamay na ang lilitaw sa pagpaalam sa akin natagpuan ko ng isa!

Paggamit ng mga balarila tulad ng "Ikaw ay dito" tagapagpabatid o mapaglarawang tool-tip ang lahat ng pagkahulog sa ilalim ng kategoryang ito. Ang mas maraming mga pakikipag-ugnayan at feedback na lumilitaw na ang gumagamit habang sila ay mag-navigate sa pamamagitan ng isang site, ang mas mahusay.

7. Laging Gamitin ang CSS Sprites para Rollovers

Kung hindi mo alam kung ano ang CSS Sprites, tingnan ang artikulong ito sa mapanira Magazine o ang isang ito sa isang listahan Bukod para sa mga detalye. Para sa mga na HUWAG alam kung ano ang mga ito, bakit hindi mo gamitin ang mga ito!? Kung mong sabihin sa akin nito dahil sa isang kakulangan ng oras, gusto kong mag-refer sa iyo sa Rule # 1 sa listahan na ito. Nakaraang oras ang argumento, hindi talaga ko tingin ng anumang pakinabang na mas mahalaga kaysa sa paggamit ng mga ang mga Sprites CSS para sa mga rollovers ng imahe. Tingnan ang Starter para sa jQuery site. Halos lahat ng mga piraso sa interface ng gumagamit ay binuo gamit ang isang solong file PNG (pictured ibaba). Ang interface ay naglo-load ang lahat nang sabay-sabay, at ang lahat ng mga Pasadahan / aktibong estado ay kaagad magagamit. Walang pagkaantala para sa isang: Pasadahan ng imahe sa load; Isang kahilingan sa server, hindi 10 +. Ito ay isang hindi kapani-paniwala na kasangkapan sa Front End coding Toolkbox na ang mga developer na kailangan upang gamitin mas madalas.

8. Maunawaan ang mga pagkakaiba sa pagitan ng Flash at Javascript

Tingin ko Javascript ay maaaring gawin ng mga kahanga-hangang bagay. Mahal ko din ang panunulak ng mga limitasyon ng kung ano ang maaari itong gawin. Mahal ko ang paggawa ng mga widgets at plugin na lamang ng mas maraming bilang ng susunod na tao ... ngunit Javascript ay hindi maaaring malutas ang lahat ng mga problema sa dynamic na pag-unlad ng web. Sa halip ng paggastos 10 oras emulating isang tampok ng Flash na tumagal ng 1 oras upang gumawa sa Flash, gumawa ng karapatan pagpipilian at piliin ang Flash. Sa kabilang banda, kung kailangan mo lamang ng isang imahe pampainog ... hindi maglakas-loob mong buksan Flash!

9. Subukan ang iyong Site sa Maraming mga browser (kabilang ang IE6)

Isa na ito ay tumatagal ng oras, walang duda tungkol dito. Bumuo ko sa isang Mac, at isang PC (at mga maramihang mga Virtual kapaligiran ng PC) na ipaalam sa akin pagsubok ay karamihan ng mga normal na tao browser gamitin ngayon. Maliban kung mayroon kang mga ulat sa Google Analytics na sabihin walang gumagamit ng IE o lahat ay gumagamit ng Firefox, huwag gumawa ng palagay sa kung paano ang mga tao ay mag-browse sa iyong site. Hindi ako sinasabi ang mga site na tumingin magkapareho, ngunit ang mga ito gumana, function, at hanapin ang gandang (At tiyak katulad!) Sa karamihan sa mga browser.

Tandaan: banggitin ko IE6 partikular dahil ang aking pinakamalaking client ay isang korporasyon na pa rin ay gumagamit ng IE6. Ako nakabuo ng isang pagkukudigo estilo na nagbibigay-daan sa akin na bumuo ng mabilis na para sa mga modernong mga browser, at ipatupad lamang ng ilang mga sheet ng estilo at mga pag-aayos ng javascript kaya site ang hitsura karapatan sa IE6. Ako ba na nawala ko ang ilang mga gilid sa pamamagitan ng paggawa sa ganitong paraan, ngunit ito ay ini-imbak sa akin mula sa maraming mga nakakahiya sandali.

10. Laging Panatilihin ang Maintenance sa isip

Bilang ikaw ay "pagputol up" ng Photoshop disenyo, o paghahanda ng iyong CSS at Javascript, panatilihin ang pagpapanatili sa isip. Ilang mabaliw-cool na sumibak ng CSS ginagamit mo ngayon ay maaaring bumalik sa maglalagi ka mamaya. Ang paglalaglag tuntunin CSS kung saan mangyaring mo sa isang CSS file ay maaaring mukhang mabilis sa sandaling na (Guilty!), ngunit ay gumawa ng pagbabago at pag-update ng mga ito sa paglaon ng isang bangungot.

Isang mahalagang hakbang upang matandaan ang nangyayari matapos mong prepped file ng isang taga-disenyo para sa export mula sa Photoshop o ilustrador: Tandaan na i-save ang isang bersyon ng file bago export lang. Na ang paraan kung kailangan mo sa muling i-export ito sa paglaon, magdagdag ng isa pang button, baguhin ang isang linya ng teksto, atbp, magagawa mong i-export muli ito mabilis. Normal nakakatipid ng Photoshop Image pagpipilian Format, compression setting, at malabo na mga kulay upang gumawa ng iyong trabaho mas madali.

Konklusyon

Mayroong isang bilang ng iba pang mga bagay na mahalaga para sa mga Front End Coders upang panatilihin sa isip, ngunit tingin ko ang mga ito ay ilan sa mga pinakamahalagang. Maraming mga maaaring magtaltalan na ang mga hindi patakaran, ngunit tutulan ko sa iyo sa tingin ng mga ito bilang tulad. Marahil ikaw ay mas malamang na masira ang mga ito sa interes ng oras o pera sa iyong susunod na proyekto.