Jesprimi IT

Re-Ċikliżmu huwa Buzzword u In Web Development dan ifisser xejn differenti. Hija tikkonserva l-enerġija, f'termini ta 'sforz!

Matul is-snin tal-kitba CSS u l-ħolqien HTML minn disinji, I segwita prattiċi ftit aħjar, fl-insegwiment ta 'ffrankar ta' ħin u enerġija li dak li aħna komunement terminu bħala "Re-Invenzjoni-rota". Darba wara, I told myself, I li għandhom joħolqu mudelli ftit, xi standard jistgħu jerġgħu jintużaw CSS li nixtieq użu barra mill-kaxxa fil-ħidma futura tiegħi. Għalkemm mhux kompletament iżda I ma rnexxilhomx jikseb xi wħud mill-għanijiet.

Fl-avvanz, Re-Użu ta 'CSS, kelli ħarsa lejn l-oqfsa CSS ftit li huma komunement disponibbli lilna u ddeċieda li jqiegħdhom għall-użu, kif dawn huma ippruvati u ttestjati u maħluqa mill-iżviluppaturi b'esperjenza ħafna, minn myself. Aktar importanti minn "EVITAT ri-invenzjoni".

Għalkemm l-għarfien komuni għall-veterani, I ppruvaw pinna xi proġetti prinċipali kunċetti / aħjar l-prattiċi / ħsibijiet li marret lejn il-ħolqien dawn l-oqfsa, biex jagħmlu RE-ĊILKLIKU ta 'CSS possibbli. Nittama li dan se jgħin xi iżviluppaturi CSS li huma biss dwar u reċentement mbarkat-bandwagon CSS!

Ċwievet mill-ġdid iċ-ċikliżmu ta 'CSS:

Użu Konvenzjonijiet Naming

Dan għandu jkun l-aktar fattur importanti fit-teħid-CSS / HTML jistgħu jerġgħu jintużaw. Tingħata ismijiet konsistenti ma 'elementi paġna jippermetti użu mill-ġdid ta' komponenti paġna u stili tagħhom bi ftit jew modifiki. F'konformità ma 'dan l-argument, Anki HTML5, f'bidla bidla kbira fuq predeċessuri tiegħu, huwa li jiġu introdotti xi viz tikketti strutturali. <article>, <section>, <header>, <aside>, u <nav> [ X'se HTML5 ġġib? ]. Anke ma HTML 4 (jew inqas), huwa aħjar biex insemmu sezzjonijiet standard ta 'paġna tiegħek consistanly bħal fl-eżempju hawn taħt sempliċi ...

Ftakar, paġni Ħafna dwar proġett tiegħek, jispiċċaw wara l-elementi ewlenin istess strutturali. Identifika dawn l-elementi komuni paġna ewlenin ....

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

Irrisettja Stili Default (jreġġa CSS): Jekk inti tuża qafas jew tikteb tiegħek, għandek tipprovdi jreġġa CSS [ X'inhuma jreġġa CSS? ], peress li dawn inaqqsu jew jeliminaw xi kultant inkonsistenzi viżwali li jseħħu bejn browsers differenti. Fi kliem sempliċi il-Mekkaniżmu Irrisettja CSS tistabbilixxi l-istili ta 'Element HTML biex valuri żero jew nulli, b'mod li jissuperaw xi valuri awtomatiċi browser jistgħu joħloq. Dan jipprovdi rekord nadif li jiġu stabbiliti l-proprjetajiet ta 'dawn vojt elementi ta' kwalunkwe Defaults User-aġent [ Defaults Utent CSS2.1 aġent Sheet Style ]. L-oqfsa CSS ma jkollhom mekkaniżmu ta 'reset. Jekk qed tikteb int stess jreġġa CSS, kelma ta 'kawtela hija li jekk jiġri li tinsa għal reset-proprjetà ewlenin, Jista' jwassal biex jaqsmu l-browser kwistjonijiet, li huma diffiċli ħafna biex debug. Ftakar, Żomm kopja ta 'l-istili reset u qatra minnhom f'kull proġett ġdid inti toħloq.

  ġisem, div, dl, dt, dd, UL, ol, LI,
  H1, H2, H3, H4, H5, H6,
  qabel, il-forma, fieldset, input, tagħżel, textarea,
  p, blockquote, tabella, th, td
  {
    fruntiera: 0px;
    marġni: 0;
    ikkuttunar: 0;
  } 

Defaults Irranġa (stili linja bażi) sa Elementi:

Wara li tkun stabbilita (għal żero jew null) l-valuri default ta 'ċerti attributi ta' Elementi HTML ċerti Huwa meħtieġ li tapplika xi stili madwar kull każ ta 'dawn l-elementi. Dawn default jista 'jvarja bħala per-disinn jew skond l-aħjar prattiki inti ssegwi.

Oqfsa Ħafna CSS, dejjem tintroduċi xi nuqqasijiet ġodda, flimkien ma 'resetting stili browser default.
Dawn nuqqasijiet li vojt ta 'l-Defaults User-aġent (imqaxxar mill-bogħod mill-Irrisettja CSS), dawn ser ikunu konsistenti madwar browsers.

Ftakar, stili linja bażi jintużaw sabiex jitfasslu stili li ser jintużaw disinn kollha. eż.

  html {font-daqs: 77%; font-familja: Arial, sans Serif-;}
 qawwija, H1, H2, H3, H4, H5, H6 {font-piż: bold;} 

Stili Abstract għall Komponenti HTML Komuni u tal-Kategoriji Komuni:

Aktar proġett jikkonsisti bosta paġni se jkollhom elementi HTML komuni użati madwar is-sit, għall eż Xi tip ta 'forom, twissijiet u żbalji, popups Custom, lightboxes eċċ Peress dawk il-komponenti huma użati mill-ġdid fost il-proġetti, Se jkun utili li jiġi provvdut sett ta 'klassijiet assoċjati ma' stili predefiniti għall dawn il-komponenti u inti tista 'tiffranka yourself ħafna ħin.

Barra minn definizzjoni definizzjonijiet li jistgħu jerġgħu jintużaw stili għall-Komponenti HTML komuni, nistgħu klassijiet astratti stili li jappartjenu għal, tipografija kulur jew saħansitra tqassim. I myself tendenza li tuża ... klassijiet komuni bħal Clearfix, Font08, FontGrey, AlignL, DisplayB eċċ

  kontribut forma {fruntiera: 0px; isfond: # ffffff; ikkuttunar: 0px 10px; _padding: 0px 0px; għoli: 26px; kulur: # 000000; linja tal-għoli: 30px; font-daqs: 1.1em;}
 forma textarea {fruntiera: 0px; isfond: # ffffff; kulur: # 000000; font-daqs: .9 Membru; linja tal-għoli: 1.5em; overflow: viżibbli;}
 . Fbold {font-piż: bold; kulur: # cccccc;}
 . Fgrey {kulur: # 666666;}
 . Flightgrey {kulur: # bbbbbb;}
 . Clearfix {ċar: it-tnejn;}
 . Diviżur {fruntiera ta 'fuq: 1px solida # 647B06; fruntiera tal-qiegħ: 1px solidu # 9CC00A; għoli: 0px;}
 . Displayb {display: block;}. Displayn {display: xejn;}
 . Alignr {test tallinja: id-dritt}. Alignc {test tallinja: ċentru}
 . Floatr {float: id-dritt;}. Floatl {float: xellug;} 

Jiffissa għall quirks browser komuni

Browsers differenti jimplimentaw kodiċi CSS u jipprovdu livell differenti ta 'appoġġ għall-ispeċifikazzjonijiet CSS. Ir-riżultat ta 'dan .... "Quirks Browser", li aħna-iżviluppaturi jitħallew sabiex tindirizza. Speċjalment, IE6 haunts kodifikaturi aktar CSS ma 'terminu perentorju biex jintlaħqu. L-aħbar tajba hija esperjenza miġjuba flimkien jiffissa jintużaw mill-ġdid possibbli biex dawn il-kwistjonijiet (Spiss msejħa bħala Hacks CSS ).

Ftakar, Żomm dawn hacks / jiffissa handy

  / * Il-zoom ġej: 1 regola hija speċifikament għall IE6 + IE7.  * /
    * Html. Clearfix,
    *:. L-ewwel wild + html clearfix {
           zoom: 1;
      } 

Żomm Raffinar CSS tiegħek

• Il-vizzju ta 'ri-ċikliżmu mhux se jiġu għandek fil-jum. Għandu żviluppati. Allura pjan tiegħek Re-Ċikliżmu. Iżomm dan f'moħħu li inti tista 'nuqqasijiet stili astratti, definizzjonijiet tipografija, taqsim, stili Element HTML eċċ Ipprova biex jaħsbu li ġejjin.
• Ukoll ħarsa lura lejn proġetti tal-passat tiegħek, se jgħinu jidentifikaw stili li inti għandek tendenza li jużaw spiss madwar porjects. Astratt dan.
• Neħħi kwalunkwe stili mhux użati. Din il-prattika se żżomm qafas CSS tiegħek minn sintomu komuni msejħa "Nefħa" -
• Neħħi stili ripetittivi.
• Tibni sett ta 'stili li huma flessibbli biżżejjed fil-port li fost il-proġetti.

A Ħares Fuq Oqfsa CSS

Fl-aħħarnett. Jekk inti huma ispirati u l-intenzjoni li juża waħda jew aktar mill-oqfsa CSS, Heres hija lista ta 'malajr ta' ftit dawk popolari ftit ....

• Sistema Grid 960 : Is-Sistema Grid 960 huwa sforz biex jissimplifikaw workflow web iżvilupp billi tipprovdi dimensjonijiet komunement użati, ibbażati fuq wisa 'ta' 960 pixels. Hemm tliet varjanti: 12, 16 u 24 kolonni, li jistgħu jintużaw separatament jew flimkien. Xejn Ħsieb li inti ma tistax toħloq waħda għal tiegħek faċilment biżżejjed, Il-qafas jipprovdi mudelli grid għall-istampar fil-format PDF, li wieħed jista 'juża li jfassal designs.Bet paġna tiegħek, Ikun jagħmel impressjoni professjonali, jekk tkun qed iġġorr folji ftit meta tmur lil klijent għall-ġbir rekwiżiti UI. Huwa jipprovdi wkoll mudelli bażiċi grid għall softwer ta 'disinn popolari bħal fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, eċċ jipprovdu kontribuzzjoni "starter għal għaxar" biex jibdew xogħol ta' disinn tiegħek.
• Blueprint : blueprint jipprovdi fajls distint klassifikati CSS għall jreġġa, Grids, Formuli, Stampa, tipografija, plugins għall buttuni, buttuni u sprites eċċ Hija wkoll jipprovdi appoġġ għall-IE bħala separata jinkludu.
• SenCSs : B'differenza mill-2 hawn fuq, SenCSs (Sens pronunzjata), ma jkollux id-definizzjonijiet CSS għall Layout. Hija ma jinkludu fonts, paddings, marġini, tabelli, listi, headers, blockquotes, forom u aktar.
• BlueTrip : talba oriġinali tagħha għall-fama kienet li, kien taħlita ta 'l-aqwa karatteristiċi pprovduti minn oqfsa oħrajn oħra bħall Blue, jistampa Trip oli ... minn fejn jiġrilha l-isem tiegħu. Sett karatteristika tagħha jinkludi 24-kolonna tax-xibka, stili tipografija, stili ORM, jistampa, buttuni eċċ
• Grids YUI : Lilek min-Netwerk Developer Yahooo, jappoġġja fluwidu wisa '(100%) taqsim kif ukoll predeterminata fiss wisa presentazzjonijiet fil 750px, 950px, u 974px, u l-abbiltà li faċilment customize għal kull numru. Kif tistgħu taraw, tiegħu teknikament biss il-Komponenti tqassim. YUI ipprovda wkoll HTML / CSS settijiet għall-elementi paġna oħra
• YAML (énième Layout Multicolumn)
• Emastic

Ftakar, bl-użu oqfsa CSS ma jimplikax li inti għażżien biex joħolqu waħda tal tiegħek ... Dan ifisser li inti intelliġenti li jitgħallmu minn xulxin esperjenza u żbalji, jiffranka ħin u tiżdied il-produttività!!

Bil limitat tiegħi ħila-sett ma 'strumenti bħal Photoshop u illustratur, nista' onestament nistqarr li jien iżviluppatur aħjar minn I am a disinjatur. Iżda l-isfond tiegħi bil-qalba (server sekondarji) l-iżvilupp ma Java / PHP / COBOL, kien influwenza pożittiva ħafna fuq il-ħiliet tiegħi żvilupp UI. What I medja hija, filwaqt li toħloq disinji tiegħi, jiġifieri kull meta nagħmel disinn, naħseb dwar kif id-disinn jista 'jkun aħjar kkonvertit HTML u CSS filwaqt li tagħmel l-HTML-CSS, I jagħti riflessjoni dwar it-teknoloġija backend u jagħmlu raġonevolment ċert li l-HTML tista 'tiġi faċilment implimentati fil XSL linji jew siltiet PHP eċċ

Matul is-snin, I ġew jintefa ras fuq disinji minn disinjaturi UI li probabbilment donot clue dak HTML jew CSS huwa. Dawn is-snin I ġew ħsieb li nixtieq titlob għall wisq, Jekk I biss jistennew li l-disinjatur, li qed tipprova Shov "impossibbli li kodiċi" tiegħu disinn fl-gerżuma tiegħi, li wieħed jifhem biss ftit liema disinn tiegħu tkun konvertita fis. LI jgħin id-dritt?

Imbagħad, I sab din il-kariga illum ... disinjaturi Web li ma jistgħux kodiċi ... Grazzi Mulej! Jien biss wieħed minn ħafna li jħossu l-istess ... Il-artitle hawn fuq huwa daqsxejn twil xejn b'xejn .. iżda jiswa l-jaqra, kull kelma ta 'dan.

Grazzi Elliot Ħażniet Jay ... I jħossu meħlus!

Hawn xi siltiet mill elliots artikolu .

Ara naqra, liema kuljum! Bdejna bil 1 tweet ftit u ntemmet bil-diskussjoni li dehret li jiknes madwar l-komunità tad-disinn kollu tal-web. Jidher li hemm xi opinjonijiet b'saħħithom ħafna fuq is-suġġett ta 'jekk web disinjaturi għandhom ikunu jistgħu kodiċi.
...
Għalhekk, qabel ma nikbru fil dan, ippermettuli malajr terġa dak li għidt fuq dalgħodu fuq Twitter:

Onestament, jien ixxukkjat li fl-2010 jien xorta ġejjin madwar "web disinjaturi 'li ma jistgħux kodiċi disinji tagħhom stess. Ebda skuża.

... I għandha ħadthom kien ftit aktar speċifiku fil tweet tiegħi. I kien jitkellem dwar disinjaturi li ma jkollhomx anki l-HTML aktar bażika u ħiliet CSS li jduru disinn fissa fis-sit attwali. Mhux in-nies li intenzjonalment jagħżlu li ma kodiċi; dawk li ma jistgħux. U jien ukoll jirreferu biss għall front-end kodiċi hawn; ta 'kors huwa redikoli biex jaħsbu li disinjaturi għandhom ukoll ikunu aqwa back-end programmaturi ...

Nikbru "web" disinji mibgħuta Illustrator, 300dpi, impossibbli għall-kodiċi, l-ebda konsistenza / użabilità.
~ Amy Mahon

Huwa jkollna tard, u stajt ltqajna biex nagħlaq dan up b'xi. Naf se jkun hemm ħafna li ma jaqblux miegħi, u l-intenzjoni tiegħi huwa li ma joffendu jew taqlib ħadd li ma jistgħux kodiċi, imma nispera li xi wħud dak li stajt qal tirrifletti xi punti li dejjem toħroġ delving fis meta dan id-dibattitu.

Fl-aħħar tal-ġurnata, jien ma jitlef l-ebda irqad fuq li jistgħu kodiċi u li ma jistgħux. Jien biss verament sorpriż li ssib disinjaturi tant li n-nuqqas front-end ħiliet, kif ħsibt li dan kien xi ħaġa tal-passat.

Aqra wkoll il-kummenti, kien hemm madwar 320 kumment, kif i jiktbu ... huma jiswew jinqara.
Jekk jogħġbok aqra elliots post sħiħa hawn .. Web disinjaturi li ma jistgħux kodiċi

Ilbieraħ, wara l-ħruġ I jiltaqgħu ma 'l-jreġġa CSS fil-Google Chrome ... ħsibt ta' tħaffir daqsxejn aktar profonda fil-qasam tal Sheets Utenti Style aġent ...
Misjuba din it-tabella fuq valuri awtomatiċi ta 'CSS2.1 Sheets Utent Style aġent ... (għal dawk konxji ta' liema "Folji User Style aġent" hu li ssegwi X'inhu Folji User aġent Style (speċifikazzjoni) .

Għal-lista kompleta ta 'CSS nuqqasijiet Utent 2.1 aġent Folji Style ikklikkja hawn

Ilbieraħ, bħal kull oħra "Jum Hog Ground", I kien qed jaħdem fuq xi taqsim CSS / tableless. Kollha kienet tmur ferm fl-IE 7, FF 3 u Chrome, untill f'daqqa waħda, Rajt xi marġini un ignorable dehru biss fil-Google Chrome. Għalkemm ħafna stramba u worring, Kien xi kwistjoni ġdida bug / I li kienet waslet madwar in, kien hemm finalment xi ħwawar fil-ħidma mundane tiegħi. Sad (iżda sympathique) li ltqajna ffissat fi ftit minuti ta 'l-sonda ...

Bażikament, Li dehru qishom Google Chrome injorati jreġġa CSS tiegħi (marġni: 0px). Hija fil-fatt kien ikkawżat mill-stylesheet aġent utent (-WebKit-ikkuttunar-bidu: 40px). Allura s-soluzzjoni kienet li reset dan l-istil billi ikkuttunar: 0-elementi misbehaving.
Mod tajjeb biex jipprevjenu din il-problema iseħħ għal kwalunkwe element huwa użu Bqija CSS globali kif ġej

* {Marġini: 0; ikkuttunar: 0;}

X'inhu Folji User aġent Style (speċifikazzjoni)?
Il-silta li ġejja hija meħuda mill http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , rabta segwitu biex taqra aktar dwar Folji User Style aġent

CSS 1 jintroduċi l-idea billi tiddikjara li kull aġent Utenti (UA, spiss "web browser" jew "klijent web") se jkollhom stil sheet nuqqas li jippreżenta dokumenti raġonevoli - iżda forsi mundane - mod. CSS 2 jgħid li l-aġenti ta 'utenti li jikkonformaw għandu japplika folja stil default (jew jaġixxu bħala jekk dawn ma) u li folja aġent utent stil default għandu jippreżenta l-elementi tal-lingwa dokument b'modi li jissodisfaw l-aspettattivi preżentazzjoni ġenerali għall-lingwa dokument; CSS 3 x'aktarx li jkun tal-moħħ istess.

Ladarba l-ispeċifikazzjonijiet CSS tħalli f'idejn l-implimentazzjonijiet jekk jużawx "reali" stil folja għall-wiri nuqqas jew le, mhuwiex sorprendenti li inti ma ssibx folja stil default fil-folder installazzjoni f'kull browser. B'differenza Microsoft Internet Explorer kif ukoll Opera, per eżempju (u safejn naf), browsers Gecko bħal Firefox u Netscape Navigator (tfittex għal "html.css") iżda wkoll Konqueror jagħmilha pjuttost sempliċi li tifhem grafika nuqqas tagħhom.

La jiena ferm ġdida User Interface (UI) l-iżvilupp lanqas jien veteran u kif I dejjem tpoġġi lilha, I jidħlux fil-profil ta 'UI iżviluppatur aktar minn dik ta' disinjatur, bl-ebda jiddispjaċih. Oh Well! X'kienet I tikteb dwar? Għal ... s'issa (irid ikun fis-snin mhux xi inqas) issa, u mbagħad kull issa meta I do jsibu rwieħhom daqsxejn ta 'Disinn UI (meta l-disinjatur professjonali marret fuq btala), I stop dejjem cant ħsieb jekk disinn tiegħi għandhom tkun kif suppost complient jew le (sinċerament, ma I li jista 'jinkiseb l 100% standards ta' konformità, Jekk jien ridt wisq). Imbagħad I tell myself, liema ħażin! ... Id-disinn għandu jkun sempliċi, sbieħ u primarjament jidhru użabbli, m'għandux jagħmel viżitaturi run bogħod ... jew bounce (li jkun tekniku). X'inhu tajba kieku sbieħ tqassim tableless CSS jkun li l-viżitatur, li huwa tagħtix każ l-HyperText intelliġenti u Cascading Style Sheet taħt il-ġilda tal-webpage tiegħek ... Zilch!
Hija għandha tfittex sbieħ u jkunu faċli biex tużahom ... imbagħad jiġi l-għalf istandards kollha.

I stumbbled madwar in dan blog dħul minn Jason moqlija ta 37 Sinjali (Għal dawk li mhumiex konxji 37 sinjali huma l-onces li jkunu ħolqu xi apps web tal-biża 'bħal Basecamp, eċċ campfire) li kiteb xi ħaġa simili fl-2004 u nemmen lili, kważi 5 snin u mhux wisq nbidel minn dak ... I kienet kuntenta li taqra kariga tiegħu, kif I totalment jaqblu ma 'dak li jkun li jgħidu u l ukoll il-fatt, ha ma jkunx ċert dwar dak li jgħidilhom dwar biss sentiment tagħha imsaren tiegħu u għalhekk hija minjiera

Jason Fried: "Hemm mod wisq jitkellmu dwar CSS u XHTML u Standards u aċċessibilità u mhux biżżejjed jitkellmu dwar nies. CSS u Kodiċi jikkonformaw Istandards huma biss għodda - inti għandek tkun taf dak li jibnu ma 'dawn l-għodod. Gran, ninsab kuntenta UI tiegħek ma jużax tabelli. Allura dak? Who cares jekk għadu ma let nies jiksbu l-għanijiet tagħhom. Istandards tal-Web huma kbar, iżda l-istandards proprji tan-nies jinkludu jkollna affarijiet (u li għadu wisq diffiċli biex tagħmel online).

Disinjaturi UI qed jagħmlu l-istess qodma fundamentali "jinsa dwar il-bniedem fuq l-oħra sekondarji" żbalji - ħlief dan iż-żmien il-kodiċi tagħhom jistenna aħjar. Bnedmin - mhux validaturi kodiċi - interfaces użu ".

Artikolu sħiħ Checkout Jason moqlija fuq

DISCALIMER: Dan ma jfissirx li aħna m'għandux jolqot dwar standards fil-livelli kollha. L-istandards huma tajjeb li jkollha u jeħel magħhom kemm jista 'jkun. Aħna biss għandek tifhem li d-disinn UI Tajba mhux dejjem ifisser 100% Istandards complience jew Viċi-Versa ....

Mill tiegħi lista ta 'lezzjonijiet mitgħallma tiegħi, jien isegwu Disinn UI ftit u Golden Regoli għall-Iżvilupp ... Heres l-10 TOP ... mhux li inti għandek timxi magħhom wisq ...

1. Ħu kura ta 'utenti tiegħek. L-utenti jistgħu jagħmlu jew pawża sit tiegħek. Donot tagħmel ħarsa utent bħal idoit totali, biddlu inkapaċi użu website tiegħek. Dan huwa BAD!

2. Żomm sempliċità u Faċilità ta 'Użu guidlines primarji tiegħek. Affarijiet wisq fuq l-iskrin, l-ogħla probabbiltà li l-utent se titħawwad jew distratt mis-kompitu oriġinali tagħhom.

3. Be fil-limiti ... donot jipprattikaw wisq fis, użabilità AĊĊESSIBILITÀ u standards. Jużaw standards effettiv u jagħmluhom mifhum lill-iskwadra. Dan se jiżgura konsistenza dritt fil-prodott

4. Prototip-rekwiżit. Peress li, f'dawn il-jiem l-Interfaces Użu huma RICH, prototipi dejjem huwa aħjar milli sempliċement tagħmel wireframes sempliċi u l-aħħar hija nulla ta 'interazzjonijiet deċenti, dan hi tonqos milli tipprovdi lill-klijent stampa ċara tal-prodott finali li qed jiġi żviluppat. Dejjem, huwa aktar faċli li jikkonvertu l-prototipi fil-riżultati finali. Ukoll! ma prototipi xi kwistjonijiet dwar l-interazzjoni tista 'ironed aktar kmieni fis-ċiklu ta' żvilupp.

5. Konsistenza fid-disinn tiegħek u l-interazzjoni hija importanti ħafna. Donot jikkonfondi l-utent tiegħek ma 'interazzjonijiet imprevedibbli u gizmos.

6. Jifhmu tiegħek "Disinn Missjoni Dikjarazzjoni". Aways tiffoka fuq l-azzjoni primarja ta 'l beign paġna maħsuba. Ukoll, jagħmel lista ta 'azzjonijiet seconday tiegħek fuq il-paġna, u prijorità.

7. Ipprovdi rispons xieraq mill-utenti sit. Bil-maġġoranza tal-websajts mfassla madwar Ajax, jipprovdu informazzjoni viżwali lill-utent dwar il-bidliet għall-paġna. L-utent għandu jingħata rikonoxximent tat-tlestija ta 'kwalunkwe dover jwettaq. Donot jagħmlu l-utent stenna u raden, pereżempju. jipprovdu indikaturi ta 'progress għall uplaods fajl.

8. Użu kontrolli xieraq. Ghall-uzu eż. Agħżel drop down list għal listi żgħar biss, donot ħalli l-utent jagħżel wieħed ta '200 bliet li jużaw kaxxi tagħżel. Jifhmu d-differenza bejn buttuna u rabta. A link u buttuna għandhom għanijiet differenti, donot użu wieħed għall-ieħor. Jipprovdi l-kontroll dritt li jagħmlu interazzjoni ma 'paġna aktar faċli. Evita li tuża menus, li huma aktar minn żewġ livelli fond. M'għandekx jivvinta r-rota. Użu kontrolli standard, customize lilhom biss jekk meħtieġ ħafna. Iddefinixxi kull kontroll tad-dwana meħtieġa għall-idejn ewwel sit tiegħek, sabiex ikunu jistgħu jinħolqu u ttestjati b'mod indipendenti, lest għall-użu sit madwar.

9. Donot Ttenni wisq fuq id-disinn. Ftakar! Il-prodott kollu jikkonsisti aktar li d-disinn waħdu. Jibnu ħinijiet xierqa fl-iskeda tal-proġett tiegħek għall iterazzjonijiet disinn u stick lilha. Iterazzjoni jgħinna biex issir taf x'jaħdem u x'ma jaħdimx, pick l-inkwiet. Bħala interface tajba jieħu ż-żmien, jipprovdu ħin għall iterazzjonijiet fil-bidu taċ-ċiklu l-iżvilupp, sabiex iterazzjonijiet disinn doesnot direttament ekwivalenti għal tinħadem mill-ġdid. Wisq tinħadem mill-ġdid ħafna jista jeopradize iskadenzi.

10. Sit lura u jaħsbu bħal utent kultant.

Have you raw animoto.com? Ukoll! dan mhuwiex AD, I really gustado dan! u huwa Kiss UI ASS tabilħaqq

I sab dan is-sit ftit ġimgħat ilu. Rat l-ewwel paġna, bis-saħħa jolqot ħafna. Għalija, kien biss sit ieħor ma 'xi kontenut flash sinjuri, li jippermetti utenti biex ittella immaġini, jagħżel xi binarji u jissarfu fi Wirja stampa sbieħ. Download FLV, u poġġih fuq kwalunkwe sit tal-għażla tiegħek (YouTube, Metacafe, Facebook u ħwejjeġ bħal dawn) ... perjodu.

Ilbieraħ meta rajt il-paġni tal-fluss interni, li saru l-utent permezz tal-ħolqien ta 'din Wirja .... I marru OH Ara naqra! Meta indunajt li ma kienx hemm daqsxejn ta 'FLASH użati. Kienet tassew User Interface Rich. Kollha iżviluppaturi UI għandhom jaspiraw li joħolqu jew għall-inqas tkun parti mit-tim li għamel din l-interfaċċa .... Assolutament brillanti! U! Jispira

Agħti ħarsa ... http://animoto.com/ ... u jirreġistraw u jilagħbu magħha ... biss jistgħu imbagħad inti japprezzaw il-ġenju.

Meta I taqra dan artikolu dwar A Lista Apparti " Pożizzjonament assoluta Faux
minn Eric Sol ", I kien xejn inqas minn impressjonat. I kien ukoll imdejjaq majorly, jikkawżaw, onestament I kien jistaqsi, għaliex cant I toħroġ xi ħaġa fabulous bħal dan.

Normalment, meta noħolqu taqsim CSS, nużaw "POŻIZZJONI" jew 'sufruni ", jew kombinazzjoni ħażina ħafna tat-tnejn. Eric Sol u t-tim tiegħu jiddefinixxu jmiss teknika perfetta ta 'tip ġdid ta' teknika tqassim CSS, li huma jkunu christened bħala "Pożizzjonament assoluta Faux" wara t-teknika kolonni faux li tissimula l-preżenza ta 'kolonna.

Inti taf li l-problema lkoll iżviluppaturi CSS jkollhom ma taqsim diżintegrazzjoni (Il-bidliet kontenut mhux mistennija li jikkawżaw kolonni kollha biex nagħlaq, meta nużaw taqsim imqiegħed) ... Ukoll! Jidher Storja!!
Din it-teknika tqassim għadu żgħar ħafna, u għandu trashed minn dawk kollha gurus CSS hemmhekk, qabel ma din issir standard un bil-miktub. Ninsab kuntenta li jużawh ISSA! ... U am diġà fis nofs ta 'konverżjoni qabel problematiċi / f'wiċċ l-ilma un neċessarjament tiegħi taqsim fi tqassim FAP diġà ... u kuntent li jgħidu l-"aħna diġà qed jużaw Pożizzjonament assoluta Faux għal dan is-sit blog kif ukoll" ... GO jippruvaw dan, ISSA!

Kudos Eric!

Aktar l-elementi DOM fuq il-paġna, aktar bil-mod jirrendi, aktar baxxa huwa l-aċċess DOM fil ta JavaScript. Numru kbir ta 'elementi DOM jista' jkun minħabba disinn tqassim ħażin. Per eżempju, it-tabelli nested setgħu ġew użati għal skopijiet tqassim. Uża kull Tag HTML fejn huwa jagħmel sens semantikament. Għal tabelli Eż użu donot għall taqsim, iżda donot jużawhom fejn inti għandek juri data tabulari, u għalhekk se jużaw inaqqsu elementi DOM, meta mqabbla, biex struttura simili maħluqa bl-użu DIVs biss ..

Biex tittestja l-għadd ta 'elementi DOM fil-paġna HTML tiegħek, biss tip li ġej fil-console l-Firebug: l document.getElementsByTagName('*').length

M'hemm l-ebda standard stabbilit kif ħafna elementi DOM huma wisq. Iċċekkja paġni simili oħra li għandhom markup.Eg tajba. Home Page Yahoo! hija paġna pretty busy u għadu taħt 700 elementi (HTML tags).

Uża IKOLLOK għall Talbiet Ajax

Instab li meta tuża XMLHttpRequest, POST hija implimentata fil-browsers bħala proċess fuq żewġ fażijiet: jibgħat l-intestaturi 1, imbagħad tintbagħat data. Allura huwa aħjar li jużaw IKOLLOK, li tieħu biss 1 packet TCP tibgħat (sakemm ikollok ħafna ta 'cookies). It-tul URL massimu IE huwa 2K, hekk jekk inti tibgħat aktar minn data 2K inti tista 'ma tkun tista' tuża IKOLLOK.
L-effett ġenb interessanti huwa li POST mingħajr ma attwalment kollokament xi data iġib ruħu IKOLLOK. IKOLLOK huwa maħsub għall-irkupru ta 'informazzjoni, u għalhekk jagħmel sens (semantikament) għall-użu IKOLLOK meta int biss titlob data, għall-kuntrarju li jibagħtu data li trid tinħażen server-side.

Evita Jistieden Synchronous Ajax

Meta jagħmlu "Ajax" talbiet, inti tista 'tagħżel jew async jew mod sync. Async mod runs talba fl-isfond waqt attivitajiet browser oħra jistgħu jkomplu jipproċessaw. Sync mod se tistenna għat-talba biex jirritorna qabel ma tkompli.
Talbiet magħmula bil-mod sync għandu jiġi evitat. Dawn it-talbiet se tikkawża l-browser li lock up għall-utent sakemm il-prospetti talba. F'każijiet fejn il-server huwa busy u r-rispons tieħu filwaqt, browser l-utent (u forsi OS) mhux se jippermettu xi ħaġa oħra li jsir. F'każijiet fejn rispons huwa qatt suppost waslu, il-browser jista 'jkompli jimblokka sakemm it-talba puntwali out.
Jekk taħseb li s-sitwazzjoni tiegħek jeħtieġ mod sync, huwa żmien aktar probabbli li taħseb mill-ġdid disinn tiegħek. Sitwazzjonijiet Ftit (jekk hemm) attwalment jeħtieġu talbiet Ajax fil-modalità sync.

Itejb Images

Ottimizzazzjoni sempliċiment ifisser li nżommu mal-daqs tal-intrapriżi żgħar immaġini żamma tal-kwalità ta 'immaġini għal-livell meħtieġ. Hemm tagħbijiet ta 'proċeduri li ladarba jista' jwettaq biex itejb immaġini qabel ma jitgħabbew fuq l-server għall-kunsinna. L-għodod li nużaw għall-ħolqien ta 'dawn ix-xbihat (Photoshop, fireworks eċċ) normalment ikollhom għodod li jippermettu lill-utenti biex jottimizzaw l-immaġini għall-użu tal-web.
• Iċċekkja l-fuq GIF biex tara jekk huma jużaw daqs paletta jikkorrispondi għan-numru ta 'kuluri fil-immaġini. Meta l-immaġini huwa użu 4 kuluri u paletta kulur 256, allura l-immaġni jista 'jkun aktar ottimizzati

• Ikkonverti GIF huwa li fejn PNG fuq possibbli u ara jekk hemm iffrankar. Iktar iva milli le, hemm. Toqgħodx taħsibha biex użu ta 'l-PNG, peress li huma kompletament appoġġati mill-maġġoranza tal-browsers komunement użati. Jistennew tal-kapaċitajiet animazzjoni 1 PNG tista 'tagħmel dak GIF ma, inklużi t-trasparenza.

• Għall-immaġini użati fil sprites CSS, tirranġa l-immaġini fl-Sprite orizzontalment għall-kuntrarju vertikalment ġeneralment iwassal għal daqs tal-fajl iżgħar. Ukoll, jikkombinaw immaġini bil-kuluri simili fir-Sprite. Dan jgħinek iżżomm l-għadd kulur baxx, idealment taħt 256 kuluri sabiex tajbin fil-PNG8.

• Jekk qed tuża favicon.ico, jżommha żgħar, preferibbilment taħt 1K.

Uża sewwa skalat / daqs ieħor immaġini.

Dejjem ipprova u l-użu immaġini daqs ieħor, jiġifieri ma jużawx immaġni akbar milli għandek bżonn sempliċiment għaliex inti tista 'tistabbilixxi l-wisa' u għoli fl HTML. Jekk għandek bżonn biex juri immaġni X 100px 100px fuq il-paġna, allura ma jużawx a mnaqqsa immaġni 200x200px.

Uża Images Progressiva

A web browser diġà tirrendi Images progressivament. Biex nagħmlu anke aħjar, ħlief sempliċiment GIF tiegħek jew stampi PNG mal-"xulxin" għażla, jew JPEG immaġini tiegħek mal-"progressiva" għażla.

Hemm dibattitu li għaddej fost l-utenti tal-web dwar jekk użu ta 'immaġni progressiva hija barka jew tfixkil. Wkoll immaġni progressiva jiżen madwar 20% aktar minn kontroparti progressiva tagħha mhux. Allura, Jekk taħseb tqassim użi immaġini li mhux se jfixklu l-utent esperjenza minnha jkunu progressiva, tħossok liberu li jagħmel hekk.