Pagpapahayag ng IT

Re-Cycling ay Buzzword at Sa Web Development ang ibig sabihin nito walang ibang. Ito conserves ng enerhiya, sa mga tuntunin ng pagsisikap!

Sa paglipas ng taon ng pagsulat ng CSS at paglikha ng HTML mula sa disenyo, ako sinundan ng ilang mga pinakamahusay na kasanayan, sa paghabol ng pag-save ng oras at enerhiya sa kung ano ang aming karaniwang term bilang "Re-Inventing ang Wheel". Oras at oras muli, ako ay sinabi sa aking sarili, na ako dapat lumikha ng ilang mga template, ang ilang mga karaniwang muling magagamit ang CSS na ko bang gamitin ng kahon sa aking mga hinaharap na trabaho. Kahit na hindi ganap na ngunit ako ay pamahalaan upang makamit ang ilang mga ng mga layunin.

Sa furthering, Re-Paggamit ng CSS, ako ay tumingin sa ang ilang mga frameworks CSS na ay karaniwang magagamit sa amin at nagpasya upang ilagay ang mga ito upang gamitin, dahil ang mga ito ay sinubukan at nasubok at na nilikha sa pamamagitan ng magkano karanasan developer, kaysa sa aking sarili. Higit pang mga mahalaga ay "Iwasan ang RE-INVENTING".

Kahit na ang karaniwang kaalaman sa Beterano, ako sinubukan pen ilang mga pangunahing konsepto / mga pinakamahusay na kasanayan / mga saloobin na nawala sa paglikha ng mga frameworks na ito, upang gumawa ng mga posibleng ang RE-pagbibisikleta ng CSS. Sana ito ay makakatulong sa ilang ng mga developer ng CSS na lamang tungkol sa at kamakailan boarded ang CSS pambandang trak!

Keys Re-pagbibisikleta ng CSS:

Gamitin ang Madaling mapapangalanan balarila

Ito ay upang maging ang pinaka-mahalagang kadahilanan sa paggawa ng CSS / HTML muling-magagamit. Ang pagbibigay ng pare-pareho mga pangalan sa mga sangkap ng pahina ay nagbibigay-daan sa muling paggamit ng mga bahagi ng pahina at ang kanilang mga estilo na may kakaunti o pagbabago. Sa linya na may argument na ito, Kahit HTML5, sa isang malakihang pagbabago ng pagbabago sa kanyang predecessors, ay upang ipakilala ang ilang mga istraktura viz tag. <article>, <section>, <header>, <aside>, at <nav> [ Ano ang HTML5 dalhin? ]. Kahit na sa HTML 4 (o mas mababa), ito ay pinakamahusay na pangalan ng karaniwang mga seksyon ng iyong pahina consistanly tulad sa simpleng halimbawa sa ibaba ...

Tandaan, ang mga Karamihan sa mga pahina sa iyong proyekto, tapusin up nagkakaroon ng parehong istraktura elemento ng core. Kilalanin ang mga mga karaniwang mga elemento sa pahina ng core ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

I-reset ang mga Estilo ng Default (CSS Resets): Kung gumamit ka ng isang framework o isulat ang iyong sarili, dapat kang magbigay ng CSS Resets [ Ano ang CSS Resets? ], bilang sila bawasan o alisin minsan ang mga visual na inconsistencies na nangyari sa pagitan ng iba't-ibang mga browser. Sa simpleng salita ang mekanismo ng CSS I-reset ang nagtatakda ng mga estilo ng HTML Sangkap sa zero o null halaga, kaya ang pinakamahalaga anumang browser halaga ng default na maaaring sila ay poses. Ito ay nagbibigay ng isang malinis na talaan ng mga kandidato upang itakda ang mga katangian ng mga sangkap na ito na walang bisa ng anumang User-Agent Default [ CSS2.1 User Agent Style Sheet Default ]. Ang lahat ng mga CSS frameworks ng pag-reset ng mekanismo. Kung ikaw ay sumusulat sa iyo CSS Resets, ang isang salita ng pag-iingat ay na kung mangyari mong kalimutan na i-reset ang isang key ari-arian, maaari itong humantong sa cross-browser isyu, na lubhang mahirap upang i-debug. Tandaan, Panatilihin ang isang kopya ng pag-reset ng estilo at i-drop ang mga ito sa bawat bagong proyekto kang lumikha ng.

  body, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  pre, form, fieldset, input, piliin, textarea,
  p, Blockquote, talahanayan, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Itakda ang default (baseline Estilo) sa Sangkap:

Matapos mong itakda (sa zero o null) ang mga Halaga ng default ng ilang mga katangian ng ilang mga HTML Sangkap, ay kinakailangan na mag-aplay ng ilang mga estilo sa buong bawat halimbawa ng mga sangkap na ito. Ang mga default na setting ay maaaring mag-iba ng bawat disenyo o ayon sa pinakamahusay na kasanayan mong sundin.

Karamihan sa CSS frameworks, palaging introduces ilang bagong mga default, sa karagdagan sa pag-reset sa default na estilo ng browser.
Ang mga default ng pagiging walang bisa ng User-Agent Default (Nakuha ang layo sa pamamagitan ng I-reset ang CSS), ang mga ito ay pare-pareho sa buong browser.

Tandaan, ang baseline estilo ay ginagamit upang itakda ang mga estilo na ay pumunta magamit disenyo-wide. hal.

  html {font-size: 77%; font-pamilya: Arial, sans-serif;}
 malakas, h1, h2, h3, h4, h5, h6 {font-timbang: bold;} 

Abstract na mga Estilo para sa mga Karaniwang mga HTML Bahagi at Karaniwang klase:

Karamihan sa mga proyekto na binubuo ng maraming mga pahina ay karaniwang HTML na mga elemento na ginagamit sa buong site, para sa eg ilang mga uri ng mga form, mga alerto at mga error, mga pasadyang mga Popup, LightBoxes atbp Dahil ang tulad ng mga bahagi ay ginagamit muli sa buong proyekto, ay maging kapaki-pakinabang na magbigay ng isang magtakda ng mga klase na nauugnay sa mga paunang-natukoy na mga estilo para sa mga bahagi at maaari mong i-save ang iyong sarili ng maraming oras.

Bukod sa pagtukoy ng mga magagamit muli kahulugan ng mga estilo para sa mga karaniwang HTML Component, maaari naming mga abstract estilo klase na nauukol sa palalimbagan, kulay o kahit na layout. Ko ang aking sarili ay may posibilidad mong gamitin ... karaniwang klase tulad ng Clearfix, Font08, FontGrey, AlignL, DisplayB atbp.

  form na input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; taas: 26px; kulay: # 000000; linya-taas: 30px; font-size: 1.1em;}
 form na textarea {border: 0px; background: # ffffff; kulay: # 000000; font-size: .9 em; linya-taas: 1.5em; overflow: makikita;}
 . Fbold {font-timbang: bold; kulay: # cccccc;}
 . Fgrey {kulay: # 666,666;}
 . Flightgrey {kulay: # bbbbbb;}
 . Clearfix {malinaw: parehong;}
 . Divider {border-itaas: 1px solid # 647B06; hangganan-ilalim: 1px solid # 9CC00A; taas: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-ihanay: karapatan}. Alignc {text-ihanay: center}
 . Floatr {Float: karapatan;}. Floatl {Float: natitira;} 

Pag-aayos sa mga karaniwang quirks browser

Iba't-ibang mga browser ipatupad ang CSS code at magbigay ng iba't ibang antas ng suporta para sa mga pagtutukoy CSS. Ang resulta ng .... "Mga Browser Quirks", na namin ang mga developer ay iniwan sa pagharap sa isang bagay. Lalo na, IE6 haunts pinaka CSS coders na may deadline upang matugunan. Ang magandang balita ay karanasan ay nagdala ng sama-sama posibleng magagamit muli pag-aayos sa mga isyung ito (Kadalasan termed bilang CSS Hacks ).

Tandaan, Panatilihing mga hacks / pag-aayos na madaling gamitin

  / * Ang mga sumusunod na zoom: 1 patakaran ay partikular na para sa IE6 + IE7.  * /
    * Html. Clearfix,
    *: Unang-anak + html clearfix sa {
           zoom: 1;
      } 

Panatilihin ang pagpipino ng iyong CSS

• Ang ugali ng re-pagbibisikleta ay hindi dumating sa iyo sa araw. Ito ay may binuo. Kaya planuhin ang iyong mga Re-Cycling. Tumungo ito sa isip na maaari mong abstract default estilo, mga palalimbagan kahulugan, Layout, HTML Sangkap Estilo atbp Subukang mag-isip nang maaga.
• Din tumingin ng bumalik sa iyong nakaraang mga proyekto, ito ay makatulong na makilala ang mga istilo na malamang mong gamitin madalas sa buong porjects. Abstract ito.
• Alisin ang anumang mga hindi nagamit na estilo. Ang pagsasanay na ito ay panatilihin ang iyong CSS framework mula sa isang karaniwang sintomas na tinatawag na "Bloating" -
• Alisin ang paulit-ulit estilo.
• Gumawa ng isang hanay ng mga estilo na ay sapat na kakayahang umangkop sa port ito sa buong proyekto.

A Look Sa CSS Frameworks

Sa wakas. Kung ikaw ay inspirasyon at balak na gamitin ang isa o higit pa ng sa CSS frameworks, Heres ay mabilis na listahan ng ilang mga tanyag na mga ....

• 960 Parilya System : Grid Ang 960 System ay isang pagsisikap upang talagusan ang daloy ng trabaho ng web pag-unlad sa pamamagitan ng pagbibigay ng mga karaniwang ginagamit na sukat, na batay sa isang lapad ng 960 pixels. May tatlong variants: 12, 16 at 24 mga hanay, na maaaring ginamit sa hiwalay o sa tandem. Iisip wala na hindi ka maaaring lumikha ng isa para sa iyong sariling madaling sapat, ang balangkas ay nagbibigay ng mga template ng grid para sa print sa PDF format, na maaaring gamitin ang isa sa dibuho ang iyong pahina designs.Bet, ito gumawa ng isang propesyonal na impression, kung dalhin ka ng ilang mga sheet kapag pumunta ka sa isang client para sa mga pangangailangan ng pagtitipon ng UI. Nagbibigay din ito ng mga pangunahing mga template ng grid para sa mga popular na disenyo software tulad ng Paputok, Flash, InDesign, ilustrador, Photoshop, Visio, atbp pagbibigay ng isang "starter para sa sampung" upang simulan ang iyong trabaho sa disenyo.
• Magplano : magplano nagbibigay nang tiyakan naiuri file CSS sa para Resets, Grids, Forms, Print, palalimbagan, plugin para sa mga pindutan, ang mga tab at sprites atbp Ito ay nagbibigay din ng suporta para sa IE bilang isang hiwalay na isama.
• SenCSs : Hindi tulad ng sa itaas dalawang, SenCSs (malinaw kahulugan), ay hindi magkaroon ng CSS na kahulugan para sa Layout. Ang isama ang mga font, paddings, margin, mga talahanayan, listahan, header, blockquotes, mga form at higit pa.
• BlueTrip : nito sa orihinal na paghahabol sa katanyagan ay na, ito ay isang kumbinasyon ng mga ang pinakamahusay na mga tampok na ibinigay sa pamamagitan ng iba pang mga frameworks iba tulad ng Blue print, Trip oli ... mula sa kung saan ito ay makakakuha ng ang pangalan nito. Nito hanay ng tampok na kabilang sa 24-haligi grid, mga palalimbagan estilo, sa orm estilo, print, pindutan atbp
• Yui Grids : nagdala sa iyo sa pamamagitan ng sa Yahooo Developer Network, ay sumusuporta sa mga likido-lapad (100%) layout pati na rin ang mga preset nakapirming-lapad ng layout sa 750px, 950px, 974px, at ang kakayahan upang madaling-customize sa anumang numero. Bilang maaari mong makita, nito technically lamang ang layout Component. Yui din na ibinigay sa HTML / CSS na mga hanay para sa iba pang mga sangkap ng pahina
• YAML (Ngunit isa pang Multicolumn Layout)
• Emastic

Tandaan, ang paggamit ng frameworks CSS ay hindi magpahiwatig na ikaw ay tamad na lumikha ng isa sa iyong sariling ... Ito ay nagpapahiwatig na ikaw ay matalino upang matuto mula sa mga iba sa karanasan at mga pagkakamali, makatipid ng oras at dagdagan produktibo!!!!

Sa aking limitadong kasanayan-set sa mga tool tulad ng Photoshop at ilustrador, maaari ko matapat mangumpisal na I'ma mas mahusay na developer kaysa Ako ay isang taga-disenyo. Ngunit ang aking background sa core (server side) pag-unlad sa Java / PHP / COBOL, ay naging isang napaka-positibong impluwensiya sa aking mga UI mga kasanayan sa pag-unlad. Ano ang ibig sabihin ko ay, habang ang paglikha ang aking mga disenyo, ibig sabihin tuwing gagawin ko design, tingin ko tungkol sa kung paano ang disenyo ng maaaring pinakamahusay na-convert sa HTML-CSS at habang ginagawa ang HTML-CSS, ako magbigay ng isang-iisip tungkol sa backend teknolohiya at gumawa ng mga makatwirang sigurado na ang HTML ay maaaring madaling ipatupad sa ng XSL loop o PHP snippet atbp

Sa paglipas ng taon, ako ay thrown ulo sa sa disenyo sa pamamagitan ng UI designer na marahil donot magkaroon ng isang palatandaan kung ano ang HTML o CSS ay. Lahat mga taon na ako ay iniisip na Gusto kong humihingi ng labis, Kung inaasahan ko lang ang taga-disenyo, na sinusubukan upang shov ang kanyang "imposible sa code" na disenyo down aking lalamunan, upang maunawaan lamang nang kaunti kung ano ang kanyang disenyo ay iko-convert sa. NA ay makakatulong sa kanan?

Pagkatapos, ako ay dumating sa kabuuan sa post na ito ngayon ... designer Web na maaari hindi code ... Salamat Panginoon! Ako ay isa lamang sa maraming mga na pakiramdam ang parehong ... Ang itaas artitle ay isang bit ng isang mahabang paghinga ... ngunit nagkakahalaga ang read, ang bawat salita nito.

Salamat ang Elliot Stocks Jay ... Pakiramdam ko ay hinalinhan!

Narito ang ilang mga sipi mula sa Elliots artikulo .

Wow, kung ano ang isang araw! Ito na nagsimula sa isang maliit na tiririt at natapos sa isang talakayan na tila magwalis sa buong ang buong komunidad ng web design. Ito ay lilitaw may mga ilang mga napaka-malakas na mga opinyon na gaganapin sa ang paksa ng kung designer web ay dapat ma-code.
...
Kaya, bago makuha namin sa na ito, payagan ako sa mabilis paglalagom kung ano ang sinabi ko sa umaga na ito sa Twitter:

Matapat, ako shocked na sa 2010 pa rin ako pagdating sa 'web designer' na hindi maaaring code sa kanilang sariling mga disenyo. Walang dahilan.

... Dapat ko na isang maliit na mas tiyak sa aking tiririt. Ako ay pakikipag-usap tungkol sa mga designer na walang kahit na ang pinaka-basic HTML at CSS kasanayan upang buksan ang isang patag na disenyo sa isang aktwal na site. Hindi mga tao na sadyang hindi pumili sa code; mga hindi maaari. At pati na rin ako nagre-refer lamang sa front-end code dito, siyempre ito ay katawa-tawa sa tingin na designer ay dapat din ang mga kahanga-hangang back-end programmer ...

Makuha namin 'web disenyo na ipinadala sa ilustrador, 300dpi, imposibleng code, walang pagbabago / usability.
~ Amy Mahon

Ito ay pagkuha ng huli, at Mayroon akong Pakibalot up na ito sa anumang paraan. Alam ko doon ay marami na hindi sumasang-ayon sa akin, at ang aking layunin ay hindi upang sumugat ng damdamin o mapataob sinuman na hindi maaari code, ngunit Umaasa ako na ang ilang mga ang sinabi ko na sumasalamin sa ilang ng ang mga puntos na palaging dumating up kapag delving sa ito debate.

Sa pagtatapos ng araw, hindi ko mawala anumang pagtulog sa na code at na hindi maaari. Ako lamang na tunay na nagulat sa makahanap ng maraming mga designer na kakulangan harap-end na mga kasanayan, bilang Akala ko ito ay isang bagay ng nakalipas.

Ring basahin ang mga komento, may mga paligid ng 320 mga komento, bilang ko isulat ... ang mga ito ay nagkakahalaga ng isang basahin.
Mangyaring basahin ang Elliots buong post dito .. Web designer na hindi code

Kahapon, pagkatapos ang mga isyu ko nakatagpo sa CSS Resets sa Google Chrome ... Akala ko ng paghuhukay ng kaunti mas malalim sa ang lugar ng User Agent Style Sheet ...
Natagpuan ang talahanayan na ito sa mga default na halaga ng CSS2.1 User Agent Style Sheet ... (para sa mga walang kamalayan ng kung ano ang "User Agent Style Sheet" ay sundin Ano ang User Agent Style Sheet (Specification) .

Para sa isang buong listahan ng mga CSS 2.1 User Agent Style Sheet default mag-click dito

Kahapon, tulad ng bawat ibang "Araw Ground taong matakaw", ako ay nagtatrabaho sa ilang mga layout ng CSS / tableless. Lahat ay pagpunta sa IE 7, FF 3 at Chrome, untill biglang, Nakita ko ang ilang mga di-ignorable margin na nakikita lamang sa Google Chrome. Kahit na napaka kakaiba at worring, Ito ay ilang mga bagong bug / isyu na ako ay dumating accross, nagkaroon sa wakas ng ilang pagandahin sa aking pangmundo trabaho. Malungkot (ngunit magandang) May maayos ito sa loob ng ilang minuto ng probe ...

Talaga, mukhang hindi pinansin ng Google Chrome ang aking CSS Resets (margin: 0px). Talagang ito ay dulot ng ang stylesheet user agent (-WebKit-padding-simula: 40px). Kaya solusyon ay upang i-reset ito estilo sa pamamagitan ng pagtatakda ng padding: 0 ang magulo na mga elemento.
Ang isang mabuting paraan upang maiwasan ang problemang ito mula sa nangyayari sa anumang elemento ay gamitin ang isang global CSS REST tulad ng mga sumusunod

* {Margin: 0; padding: 0;}

Ano ang User Agent Style Sheet (Specification)?
Ang mga sumusunod na sipi ay kinuha mula sa http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link na basahin ang higit pa sa User Agent Style Sheet

CSS 1 introduces ang mga ideya sa pamamagitan ng na nagsasabi na ang bawat User Agent (UA, madalas isang 'web browser' o 'web kliyente) ay magkakaroon ng isang estilo ng sheet ng default na nagpapakita ng mga dokumento sa isang makatwirang - ngunit arguably ng makalupa - paraan. CSS 2 sabi na matularin ahente ng gumagamit ay kailangang mag-aplay ng isang default sheet estilo (o kumilos bilang kung sila mismo) at na ang default na estilo ng isang user agent ng sheet ay dapat ipakita ang mga elemento ng ang wika dokumento sa paraan na masunod ang pangkalahatang inaasahan pagtatanghal para sa mga wika dokumento; CSS 3 ay malamang na maging ng parehong isip.

Dahil ang CSS pagtutukoy iwanan ito sa pagpapatupad kung gamitin ang isang "real" style sheet para sa default na display o hindi, hindi ito ay kahanga-hanga na hindi mo mahanap ang isang default na estilo ng sheet sa pag-install ng folder ng bawat browser. Hindi tulad ng Internet Explorer ng Microsoft pati na rin ang Opera, halimbawa (at Sa pagkaalam ko), sa Gecko browser tulad ng Firefox at Netscape Navigator (hanapin para sa "html.css") ngunit din Konqueror kaysa gawin itong simpleng upang maunawaan ang kanilang mga default styling.

Ni am ko masyadong bagong sa User Interface (UI) na pag-unlad ni am ko ang isang beterano at bilang ako palaging ilagay ang mga ito, magkasya ko sa profile ng UI developer higit pa kaysa sa na ng isang taga-disenyo, na may walang regrets. Oh Well! Ano ako pagsulat tungkol sa? ... Para sa habang na isang (ay dapat sa taon hindi anumang mas mababa) ngayon, ang bawat ngayon at pagkatapos kapag ako makakuha ng sa isang bit ng UI Design (kapag ang mga propesyonal na designer ay nawala sa isang piyesta opisyal), ako palaging nakahilig stop-iisip kung ang aking mga disenyo dapat maayos complient o hindi (Taos-puso, hindi na maaaring ako achive ang mga pamantayan sa 100% pagsunod, Kung Nais kong masyadong). Pagkatapos ko sabihin sa aking sarili, kung ano ang dumi! ... Disenyo ay dapat na simple, ganda at lalo na mukhang magagamit, hindi ito dapat bisita tumakas ... o bounce (maging teknikal). Ano ang mabuting ay isang magandang tableless CSS layout ay upang ang mga bisita, na makakalimutin sa lahat ng mga matalinong HYPERTEXT at Cascading Style Sheet sa ilalim ng balat ng iyong webpage ... Zilch!
Ito ay dapat tumingin ng magandang at madaling gamitin ... pagkatapos ay dumating ang lahat ng mga bagay-bagay pamantayan.

Stumbbled ko ang accross ang blog entry na ito sa pamamagitan ng Jason pinirito ng 37 signal (Para sa mga na hindi malaman 37 signal ay ang onces na nalikha ang ilang mga kasindak-sindak web apps tulad ng Basecamp, apoy sa kampo atbp) na isinulat ng isang bagay na katulad noong 2004 at naniniwala sa akin, halos 5 taon at magkano ang hindi nagbago dahil na ... ako ay masaya na basahin ang kanyang mga post, bilang ako ay lubos na sumasang-ayon sa kung ano siya ay sabihin at ang din ang katotohanan, ang kanyang ay hindi sigurado tungkol sa kung ano ay nagsasabi tungkol sa nito lamang matupok ng kanyang damdamin at sa gayon ay minahan

Jason pritong: "May paraan ng masyadong maraming makipag-usap tungkol sa CSS at XHTML at Pamantayan at-access at hindi sapat na makipag-usap tungkol sa mga tao. CSS at Pamantayan sang-ayon Code lamang tool - kailangan mong malaman kung ano ang bumuo sa mga tool na ito. Mahusay, Natutuwa akong iyong UI ay hindi gamitin ang mga talahanayan. Kaya ano? Sino ang nagmamalasakit kung ito ay hindi pa rin hayaan ang mga tao na makamit ang kanilang mga layunin. Web pamantayan ay mahusay, ngunit ang sariling pamantayan ng tao isama pa ng mga bagay na nagawa (at na ang pa rin masyadong mahirap na gawin sa online).

UI designer ay paggawa ng parehong lumang pangunahing "forgetting tungkol sa mga tao sa iba pang mga bahagi na" pagkakamali - maliban sa oras na ito ang kanilang code mukhang mas mahusay. Tao - hindi mga code validators - paggamit interface ".

Buong artikulo Checkout Jason pritong

DISCALIMER: Hindi ito nangangahulugan na hindi namin dapat abala tungkol sa mga pamantayan sa lahat. Mga pamantayan ay mabuti sa may at dumikit sa mga ito hangga't maaari. Mayroon lamang namin na maunawaan na ang Mabuting UI disenyo ay hindi palaging nangangahulugan na ang 100% mga Pamantayan Complience o Vice-versa ....

Mula sa aking listahan ng aking mga aralin natutunan, sundin ko ng ilang UI Design at Development Golden Batas ... Heres ang TOP 10 ... hindi na mayroon ka sundan ang mga ito masyadong ...

1. Pangangalaga ng iyong mga gumagamit. Ang mga gumagamit ay maaaring gumawa o basagin ang iyong site. DONOT gumawa ng user hitsura tulad ng isang kabuuang idoit, lubos na walang kakayahan ng gamit ang iyong website. Na ay Bad!

2. Panatilihing simple at Dali ng Gamitin ang iyong pangunahing mga guidlines. Masyadong maraming bagay sa screen, mas mataas ang posibilidad na ang isang gumagamit ay makapag-lito o ginulo mula sa kanilang orihinal na gawain.

3. Maging sa mga limitasyon ... DONOT palayawin masyadong maraming sa usability, access at pamantayan. Epektibo na gamitin ang mga pamantayan at gumawa ng mga ito naunawaan sa koponan. Ito ay matiyak na ang karapatan na pareho sa produkto

4. Tularan ang kinakailangan. Dahil, ang mga araw na ito ang Paggamit interface ay RICH, Prototyping palaging ay mas mahusay kaysa sa lamang ng paggawa ng mga simpleng wireframes at huli ay walang bisa ng mga disente na pakikipag-ugnayan, ito ay mabibigo upang magbigay ng client ng isang malinaw na larawan ng panghuling produkto na ay binuo. Laging, ito ay mas madaling i-convert ang mga prototypes sa huling deliverables. Rin! sa prototyping anumang mga isyu ng pakikipag-ugnayan ay maaaring paplantsa out mas maaga sa cycle ng pag-unlad.

5. Ang pagbabago sa iyong mga disenyo at pakikipag-ugnayan ay napakahalaga. Donot malito ang iyong gumagamit sa mga unpredictable na pakikipag-ugnayan at gizmos.

6. Intindihin ang iyong "Disenyo Mission Statement". Aways tumutok sa pangunahing pagkilos ng pahina beign na dinisenyo. Gayundin, gumawa ng isang listahan ng iyong mga sa seconday aksyon sa ang pahina, at unahin ang mga ito.

7. Magbigay ng tamang feedback sa site ang mga gumagamit. Sa karamihan ng mga website na dinisenyo sa paligid ng AJAX, magbigay ng mga visual na mga pahiwatig sa gumagamit tungkol sa mga pagbabago sa pahina. Ang gumagamit ay may sa bibigyan ng isang pagkilala ng pagkumpleto ng anumang gawain siya gumaganap. Donot gumawa ng gumagamit ang maghintay at hulaan, para sa halimbawa. magbigay ng tagapagpahiwatig ng pag-unlad para sa mga uplaods file.

8. Gamitin ang mga kontrol naaangkop. Para sa halimbawa Paggamit Piliin ang drop down na listahan para sa mga maliit na listahan lamang, donot hayaan ang gumagamit na pumili ng isa sa 200 mga lungsod gamit ang piliin ang kahon. Maunawaan ang pagkakaiba sa pagitan ng isang pindutan at isang link. Ang isang link at pindutan ay may iba't ibang mga layunin, donot gamitin ang isa para sa iba. Ibigay ang karapatan na kontrol upang gumawa ng nakikipag-ugnayan sa pahina ng isang mas madali. Iwasan ang paggamit ng mga menu, na higit na sa dalawang mga antas ng malalim. Huwag reinvent ang gulong. Gamitin ang mga karaniwang kontrol, ipasadya ang mga ito lamang kung lubhang kinakailangan. Tukuyin ang anumang mga kontrol ng custom na kinakailangan para sa iyong unang kamay site, kaya na maaaring sila ay nilikha at nasubok sa nakapag-iisa, handa na para sa paggamit accross site.

9. Donot umulit masyadong maraming sa disenyo. Tandaan! Ang buong produkto ay binubuo higit na disenyo nag-iisa. Bumuo ang mga naaangkop na Timeline sa iyong proyekto iskedyul para sa mga iterations ng disenyo at dumikit ito. Pag-ulit ay tumutulong sa amin upang malaman kung ano ang gumagana at ano ang hindi, piliin ang spot problema. Bilang isang mahusay na interface ay tumatagal ng oras, magbigay ng oras para mga iterations sa begining ng ikot ng panahon ng pag-unlad, kaya na ang iterations disenyo ay direkta doesnot equate sa REWORK. Masyadong maraming rework ay maaaring jeopradize ng mga deadlines.

10. Umupo sa likod at sa tingin tulad ng isang user sa minsan.

Nakita mo ba ang animoto.com? Na rin! ito ay hindi isang AD, nagustuhan ko talaga ito! at ito ay Halik asno UI katunayan

Ako ay dumating sa buong site na ito ng ilang linggo nakaraan. Nakita ang unang pahina, yupi abala magkano. Para sa akin, ito ay lamang ng isa pang site na may ilang mga rich na nilalaman ng flash, na nagpapahintulot sa gumagamit na mag-upload ng mga imahe, piliin ang ilang mga track at i-convert ito sa isang magandang larawan slideshow. I-download ang FLV, at ilagay ito sa anumang site na iyong pinili (YouTube, MetaCafe, Facebook at ang gusto) ... PANAHON.

Kahapon kapag Nakita ko ang mga panloob na mga pahina ng daloy, kung saan kinuha ang gumagamit sa pamamagitan ng paglikha ng mga slideshow na ito .... Pinuntahan ko OH Wow! Kapag natanto ko na may ay hindi bit ng Flash na ginagamit. Ito ay talagang isang Rich User Interface. Lahat ng mga UI developer ay dapat maghangad upang lumikha o hindi bababa sa isang bahagi ng koponan na ay tapos na interface na ito .... Ganap na makinang!!! At kagila!

A hitsura ... http://animoto.com/ na ... at magrehistro at makipaglaro sa ito ... lamang pagkatapos ay maaari mong pinasasalamatan ang likas na kakayahan.

Kapag ako basahin ang artikulong ito sa isang List Bukod " Faux Ganap na Positioning
ni Eric Sol ", ako ay walang mas mababa sa IMPRESSED. Din ako ay nalulumbay majorly, magdulot, totoo lang ako ay wondering, bakit nakahilig ko dumating up sa isang bagay na hindi kapani-paniwala bilang na ito.

Karaniwan, kapag lumikha kami ng layout CSS, ginagamit namin ang "Posisyon" o "sa kamay", o isang masamang kumbinasyon ng parehong. Eric Sol at ang kanyang koponan tukuyin ang isang tabi sa perpektong pamamaraan ng isang bagong uri ng CSS layout pamamaraan, kung saan sila na christened bilang "Faux Ganap Positioning" matapos ang faux haligi ng pamamaraan na simulates ang pagkakaroon ng isang hanay.

Alam mo na problema ang lahat sa atin CSS developer ay may sa disintegrating ng mga layout (Ang mga hindi inaasahang pagbabago ng nilalaman na sanhi ng buong hanay upang wrap, kapag ginagamit namin floated layout) ... Well! Mukhang Kasaysayan!!!!
Ang layout pamamaraan na ito ay pa rin napakabata, at ang trash out sa pamamagitan ng lahat ng mga CSS gurus out doon, bago ito ay nagiging isang un nakasulat na pamantayan. Ako ay masaya na gamitin ito NGAYON! ... At umaga na sa gitna ng convert ang aking mas maaga problemang / lumulutang un-kinakailangan ng mga layout sa FAP layout na ... at am natutuwa na sabihin ang "na kami ay gumagamit ng Faux Ganap Positioning para sa blog na ito site pati na rin" ... pumunta subukan ito, NGAYON!

Paggalang Eric!!

Higit pang mga elemento ang DOM sa pahina, mas mabagal ito render, mas mabagal ang DOM na access sa JavaScript ay. Ang isang mataas na bilang ng mga DOM mga sangkap ay maaaring maging sanhi ng masamang layout disenyo. Halimbawa, ang mga ang nested talahanayan ay maaaring ay ginagamit para sa mga layunin ng layout. Gamitin ang anumang HTML tag kung saan ay may katuturan semantically. Para sa mga halimbawa paggamit ng DONOT mga talahanayan para sa layout, ngunit DONOT mag-atubiling gamitin ang mga ito kung saan kailangan mong ipakita sa hugis ng mga talaan ng data, at samakatuwid ay gamitin mabawasan ang mga sangkap ng DOM, sa paghahambing, sa isang katulad na istraktura na nilikha gamit ang DIVs lamang ..

Upang subukan ang bilang ng mga DOM mga elemento sa iyong pahina ng HTML, i-type lamang ang mga sumusunod na sa console ang Firebug: document.getElementsByTagName('*').length

May ay walang set na pamantayan sa kung gaano karaming mga ang DOM elemento ay masyadong maraming mga. Suriin ang iba pang mga katulad na pahina na may magandang markup.Eg. Yahoo! Home Page ay isang medyo abala pahina at pa rin sa ilalim ng 700 mga elemento (HTML tags).

Gamitin ang GET para sa AJAX kahilingan

Ito ay natagpuan na kapag gumagamit ng XMLHttpRequest, POST ay ipinapatupad sa mga browser bilang isang dalawang-hakbang na proseso: pagpapadala ng mga header ng una, pagkatapos ay pagpapadala ng data. Kaya ito ay pinakamahusay na gamitin ang GET, na lamang tumatagal ng isang TCP packet upang magpadala ng (maliban kung mayroon kang isang pulutong ng mga cookies). Ang maximum na haba ng URL sa IE ay 2k, kaya kung ikaw ay magpadala ng higit sa 2k data na hindi mo maaaring upang gamitin GET.
Isang kagiliw-giliw na bahagi makakaapekto na POST nang hindi aktwal na pag-post ng anumang data behaves tulad ng GET. GET ay nakatalaga para sa pagkuha ng impormasyon, kaya gumagawa ng kahulugan (semantically) upang gamitin GET kapag lamang ikaw ay humihiling ng mga data, bilang laban sa pagpapadala ng mga data na naka-imbak sa server-side.

Iwasan ang mga kasabay na tawag AJAX

Kapag nagsasagawa ng mga "Ajax" kahilingan, maaari mong piliin ang alinman sa async o sync mode. Async mode ay nagpapatakbo ng kahilingan sa background habang ang iba pang mga gawain browser ay maaaring magpatuloy upang maproseso. Sync mode ay maghintay para sa mga kahilingan upang bumalik bago magpatuloy.
Dapat na iwasan ang mga kahilingan na ginawa sa sync mode. Ang mga kahilingan na ito ay maging sanhi ng browser upang i-lock up para sa mga gumagamit hanggang sa babalik kahilingan. Sa mga kaso kung saan ang server ay abala at tugon ay tumatagal ng isang habang, ang browser ng gumagamit (at siguro OS) ay hindi nagpapahintulot ng anumang bagay na gawin. Sa mga kaso na kung saan tugon ay hindi maayos na natanggap, ang mga browser ay maaaring magpatuloy upang harangan ang hanggang sa kahilingan ay nag-time out.
Kung sa tingin mo na ang iyong sitwasyon ay nangangailangan ng sync mode, ito ay pinaka-malamang na oras upang muling-tingin ang iyong disenyo. Napaka-ilang (kung mayroon) na sitwasyon ay talagang nangangailangan ng Ajax kahilingan sa sync mode.

Optimize ang imahe

Optimization ay nangangahulugan lamang na pinapanatili ang laki ng imahe sa maliit na pinapanatili ang kalidad ng imahe sa mga kinakailangang antas. May mga naglo-load ng mga pamamaraan na sa sandaling maaaring isagawa upang i-optimize ang mga imahe bago sila load sa server para sa paghahatid. Ang mga tool na ginagamit namin para sa paglikha ng mga imahe (Photoshop, Paputok atbp) ay karaniwang may mga tool na nagbibigay-daan sa mga gumagamit na-optimize ang mga imahe para sa paggamit ng web.
• Suriin ang GIF ng upang makita kung sila ay gumagamit ng isang palette laki na umaayon sa ang bilang ng mga kulay sa imahe. Kapag ang isang imahe ay gumagamit ng 4 kulay at ng isang 256 na palette ng kulay, at pagkatapos ay ang imahe ay maaaring karagdagang optimized

• convert GIF ay sa PNG sa kung saan posible at makita kung may nagse-save ng isang. Mas madalas kaysa sa hindi, may. Huwag mag-atubiling gamitin ng PNG ng, bilang ganap na ito ay suportado ng karamihan ng mga karaniwang ginagamit na mga browser. Inaasahan ng ang mga kakayahan ng animation ng isang PNG ay maaaring gawin kung ano ang isang GIF, ang kabilang transparency.

• Para sa mga imahe na ginamit sa CSS sprites, ayusin ang mga imahe sa engkanto pahalang bilang laban sa patayo karaniwang mga resulta sa isang mas maliit na sukat ng file. Gayundin, pagsamahin ang mga imahe na may katulad na mga kulay sa isang engkanto. Ito ay nakakatulong na panatilihin mo ang kulay bilang mababa, kainaman sa ilalim ng 256 mga kulay kaya upang magkasya sa isang PNG8.

• Kung ikaw ay gumagamit ng isang favicon.ico, panatilihin ito maliit, mas mabuti sa ilalim ng 1K.

Gamitin maayos scale / sukat ng imahe.

Laging subukan at gamitin ang sukat imahe, ie hindi gamitin ang isang mas malaking imahe kaysa sa kailangan mo lamang dahil maaari mong itakda ang lapad at taas sa HTML. Kung kailangan mong ipakita ang isang 100px X 100px imahe sa pahina, at pagkatapos ay hindi gumamit ng isang kinaliskisan down 200x200px imahe.

Gamitin ang maunlad imahe

Ang isang web browser na nagpapagana ng mga imahe progressively. Upang gawin mas mahusay, i-save lamang ang iyong mga GIF o PNG na imahe na may "interlaced" na opsyon, o ang iyong mga JPEG imahe sa ang "umuunlad" na opsyon.

Mayroong patuloy na debate sa mga gumagamit ng web sa kung ang paggamit ng mga umuunlad na imahe ay isang mabuting kapalaran o isang hadlang. Ding umuunlad imahe weighs humigit-kumulang 20% ​​na higit pa kaysa nito hindi umuunlad kapilas. Kaya, Kung sa tingin mo ka layout ay gumagamit ng mga imahe na hindi makaabala sa gumagamit na karanasan sa pamamagitan ng ito pagiging progresibo, huwag mag-atubili na gawin ito.