Ki ga izraža

Re-Kolesarjenje je buzzword in v razvoj spletnih strani, to pomeni nič drugače. To varčuje z energijo, z vidika truda!

Več letih pisanja CSS in ustvarjanje HTML od modelov, ki sem sledil nekaj najboljših praks pri uresničevanju prihranek časa in energije, v kar smo pogosto izraz kot "Re odkrivanja tople vode". Znova in znova, sem si rekel, da moram ustvariti nekaj predlog, nekateri standardni ponovno uporabiti CSS, da bi uporabil Out of the Box v svojem nadaljnjem delu. Čeprav ne povsem, ampak nisem uspela doseči nekatere cilje.

Pri pospeševanju, Ponovna uporaba CSS, sem imel pogled na nekaj okvirov, ki so pogosto CSS nam na voljo, in odločil, da jih uporabljajo, saj so te preizkušena in ustvaril veliko izkušenih razvijalcev, ki od sebe. Še pomembneje "IZOGNITE PONOVNO Iznajdba".

Čeprav je splošno znano, da veterani, sem poskušal pero nekateri ključni koncepti / najboljših praks / misli, da je šlo v ustvarjanje teh okvirov, da RE-KOLESARJENJE CSS mogoče. Upam, da bo to pomagalo nekaj CSS razvijalcem, ki so tik pred kratkim in se vkrcali na bandwagon CSS!

Tipke Re-kolesarske CSS:

Uporaba poimenovanje konvencij

To mora biti najpomembnejši dejavnik pri tem, da CSS / HTML ponovno uporaben. Dajanje doslednih imena elementov strani omogoča ponovno uporabo strani sestavin in njihovih stilov z malo ali sprememb. V skladu s tem argumentom tudi HTML5, na velike spremembe sprememb preko svojih predhodnikov, je uvesti nekatere strukturne viz oznak. <article>, <section>, <header>, <aside> in <nav> [ Kaj bo prinesla HTML5? ]. Tudi z HTML 4 (ali manj), je najbolje, če jih naštejemo standardne dele vaše strani consistanly kot v spodnjem primeru preprosto ...

Ne pozabite, da večina strani na svoj projekt, na koncu ima enake temeljne strukturne elemente. Prepoznavanje teh skupnih elementov strani temeljne ....

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

Ponastavi privzete sloge (CSS Ponastavi): Ali uporabljate okvir ali pisati svoje, morate zagotoviti Resetira CSS [ Kaj so Ponastavi CSS? ], kot so zmanjšanje ali odpravo včasih vizualne nedoslednosti, ki se pojavljajo med različnimi brskalniki. V preprostih besedah ​​Reset CSS mehanizem določa sloge HTML element z nič ali null vrednosti, kar zabrisala vse privzete vrednosti brskalnika, ki jih lahko predstavlja. To zagotavlja čisto skrilavca, da nastavite lastnosti te praznine elementov vseh User-Agent kršitev, [ CSS2.1 uporabnika Agent Defaults slogi ]. Vse CSS okviri pa so od ponovne mehanizma. Če pišete ste lastnik Resetira CSS, beseda previdnosti je, da če se zgodi, da pozabite ponastaviti ključno lastnost, bi to lahko pripeljalo do vprašanj, navzkrižno brskalnika in ki so zelo težko debug. Ne pozabite, hranite kopijo obnovljena stilov in spustite jih v vsakem novem projektu, ki ga ustvarite.

  Telo, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  vnaprej, oblika, fieldset, vložek, izberite, textarea,
  p, blockquote, miza, th, td
  {
    meja: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (osnovna stili) na postavke:

Ko ste nastavili (nič ali null) privzete vrednosti nekaterih lastnosti nekaterih elementov HTML, je treba uporabiti nekatere sloge po vsej vsakem primeru teh elementov. To privzeta nastavitev lahko razlikujejo, kot na oblikovanje ali glede najboljše prakse, ki jih spremljate.

Večina okvirov CSS, vedno uvaja nekatere nove privzete nastavitve, poleg ponastavitvi privzetih slogov brskalnika.
Te privzete da praznine od User-Agent kršitev, (otrese jih Reset CSS), bo to veljalo tudi brskalnikov.

Ne pozabite, da se Osnovni stili uporabljajo za določitev slogov, ki jih bodo uporabljeni oblikovanje svetu. npr.

  html {font-size: 77%, font-family: Arial, sans-serif;}
 močan, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

Povzetek Slogi za skupne HTML Komponente in običajne vrste:

Večina projekt sestavljen iz več strani bo imel skupne elemente HTML, ki se uporabljajo po vsem mestu, na primer neke vrste obrazcev, opozorila in napake, ki meri ljudstvo, ki LightBoxes itd Ker so te komponente uporabljajo znova čez projektov, bi bilo koristno za zagotovitev nabor razredov, povezanih z vnaprej določenih slogov za te komponente in jih lahko shranite si veliko časa.

Poleg opredelitev pojmov ponovno uporabo slogov za skupne HTML komponent, bi lahko abstraktni razredi stili, ki se nanašajo tipografije, barve ali celo postavitev. Sam sem pogosto uporabljate ... skupne razrede, kot so Clearfix in Font08 in FontGrey in AlignL in DisplayB itd

  Obrazec za vnos {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; višina: 26px; color: # 000000; line-višina: 30px; font-size: 1.1em;}
 Obrazec textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: .9 em, line-višina: 1.5em; overflow: vidna;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {jasen: oboje;}
 . Delilnik {meji-top: 1px solid # 647B06; meja bottom: 1px solid # 9CC00A, višina: 0px;}
 . Displayb {zaslon: blok;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Popravki na skupnih quirks brskalnika

Različni brskalniki izvajati CSS kodo in zagotavljajo različno stopnjo podpore specifikacije CSS. Rezultat tega .... "Brskalnika quirks", da smo pustili razvijalci za reševanje. Še posebej, IE6 preganja najbolj CSS kodirniki z rokom za izpolnitev. Dobra novica je, izkušnje so skupaj prinesla morebitne popravke ponovno uporabo teh vprašanj (pogosto označilo kot Hacks CSS ).

Ne pozabite, Naj ti hacks / določa priročna

  / * Naslednje zoom: 1 pravilo je, posebej za IE6 ± IE7.  * /
    * Html. Clearfix,
    *:. Prvi otrok + html clearfix {
           zoom: 1;
      } 

Naj Izboljšanje Vaš CSS

• Navada ponovno kolesarjenja ne bo prišel k vam v dan. Treba je razviti. Tako načrtujejo obnovitev Kolesarjenje. Imejte to v mislih, da bi lahko abstraktne privzeto stili, tipografija definicije, postavitve HTML slogi Element itd Poskusite razmišljati naprej.
• Tudi pogled nazaj na svoje pretekle projekte, bo pomagala določiti sloge, ki ste nagnjeni k pogosto uporabljajo čez porjects. Povzetek tega.
• Odstranite vse neuporabljene sloge. Ta praksa bo vaš CSS okvir iz pogost simptom, imenovano "napenjanje" -
• Odstrani ponavljajoče sloge.
• Zgradite nabor stilov, ki so dovolj prožen, da ga čez pristanišče projektov.

Poglej Na okvirov CSS

Končno. Če ste navdih in nameravajo uporabiti enega ali več okvirov CSS, vsepovsod je hiter seznam nekaj pogosti pa ....

• 960 Grid sistem : 960 Grid sistem je prizadevanje za racionalizacijo poteka dela spletnega razvoja z zagotavljanjem običajne dimenzije, ki temelji na široki 960 slikovnih pik. Obstajajo tri različice: 12, 16 in 24 stolpcev, ki se lahko uporabljajo ločeno ali skupaj. Misel, da nič ne morete ustvariti eno za svoje enostavno dovolj, okvir zagotavlja mrežne predloge za tisk v formatu PDF, ki lahko uporabimo za skico vaše strani designs.Bet, bi bilo strokovno vtis, če nosite nekaj listov ko greš do neke osebe za UI zbiranje zahtev. Prav tako zagotavlja osnovne predloge na omrežje za popularno programsko opremo, kot so načrtovanje Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, itd zagotavlja starter "za deset" za začetek vašega načrtovanja dela.
• Blueprint : Blueprint zagotavlja izrazito razvrščene datoteke CSS za ponastavi, mreže, obrazce, tiskanje, tipografija, vtičnice za gumbov, zavihke in sprites itd Prav tako zagotavlja podporo za IE kot ločen vključujejo.
• SenCSs : za razliko od zgoraj dveh, SenCSs (izgovori Sense), nima CSS definicije za postavitev. To pa so pisave, paddings, robove, tabele, sezname, glave, ki blockquotes, obrazce in še več.
• BlueTrip : Njen prvotni do slave je bila, da je bilo kombinacija najboljših lastnosti, ki jih drugih okvirih, kot so Blue drugimi tisk, Trip Oli ..., od koder je dobil svoje ime. Njen nabor funkcij vključuje 24-stolpec omrežje, tipografija stilov, ki ORM stilov, tiskanje gumbi itd
• YUI GRID : Stran je bila prikazana v okviru mreže za razvijalce Yahooo, podpira tekočine širino (100%) postavitev, kot tudi vnaprej fiksno širino postavitve na 750px in 950px ter 974px in sposobnost, da lahko prilagodite za poljubno število. Kot lahko vidite, njegovi tehnično le za postavitev komponent. YUI tudi HTML / CSS sklopov za druge elemente strani
• YAML (Še ena Multicolumn Postavitev)
• Emastic

Ne pozabite, z uporabo CSS okvirov ne pomeni, da ste leni, da ustvarite eno svojo ... To pomeni, da ste pametni, da se učijo iz izkušenj drugih in napak, prihranila čas in povečala PRODUKTIVNOSTI!!

Z mojo omejeno sposobnostjo dvojice z orodji, kot so Photoshop in Illustrator, lahko iskreno priznam, da sem boljši od mene razvijalec oblikovalec. Vendar pa je moj ozadje z jedrom (Strežnik stran) razvoj z Java / php / COBOL, je bil zelo pozitiven vpliv na moje uporabniškega vmesnika razvojne sposobnosti. Mislim, medtem ko ustvarjanje svoje modele, in sicer, ko sem narediti načrt, mislim, da o tem, kako je mogoče najbolje oblikovanje pretvori v HTML-SPD, medtem ko delaš HTML, CSS, sem dal misel o backend tehnologijo in se prepričajte razumno da je mogoče zlahka prenesti v HTML XSL zank ali PHP itd izrezkov

Več let, so me vrgli na glavo, da modeli, ki jih oblikovalci uporabniškega vmesnika, ki verjetno donot imela pojma, kaj HTML ali CSS je. Vsa ta leta sem mislil, da bom zahtevala preveč, če sem pričakujem oblikovalec, ki poskuša shov svoje "nemogoče" kode oblikovanja grlu, razumeti le malo, kaj bi se pretvori njegova zasnova v. To bi prav pomoč?

Potem sem prišel čez to delovno mesto ... danes spletnih oblikovalcev, ki ne morejo številka ... Hvala Gospod! Jaz sem samo ena izmed mnogih, ki menijo enako ... zgoraj artitle je malo dolgo daha .. ampak vredno branje, vsaka beseda za to.

Hvala Elliot Jay zaloge ... Počutim se odleglo!

Tukaj je nekaj odlomkov iz članka Elliots .

Wow, kaj dan! Začelo se je z eno malo Cvrkutati in se je končal z razpravo, ki je zdelo, da pomete po vsej Skupnosti web design. Zdi se, da je nekaj zelo močnih mnenj potekala na temo, ali naj oblikovalci spletnih strani lahko kodo.
...
Torej, preden smo prišli v to, mi dovolite, da hitro povzamem, kaj sem rekel o tem zjutraj na Twitterju:

Iskreno, sem šokirana, da je v letu 2010 sem še vedno prihaja prek njihove spletne oblikovalcev ', ki ne morejo kode svoje modele. Ni izgovor.

... Sem morala sem bil malo bolj natančen v moji Cvrkutati. Govoril sem o tem oblikovalcev, ki nimajo niti najbolj osnovne HTML in CSS sposobnosti vrteti ravno dizajn v dejanskem mestu. Ne ljudje, ki namerno ne odločijo za kodo, tisti, ki ne morejo. In jaz sem prav tako nanaša le na kode čelni tukaj, seveda to je smešno, da razmišljajo, da oblikovalci morajo biti tudi neverjetno back-end programerje ...

Dobimo 'mreža' modele poslana v Illustrator, 300 dpi, nemogoče, da kodo, ki niso dosledni / uporabnost.
~ Amy Mahon

To je pridobivanje pozno in moram zaviti to gor nekako. Vem, da bodo mnogi, ki ne strinjate z mano, in moj namen ni žaliti ali razburjena nikogar, ki ne morejo kodo, vendar upam, da nekaj, kar sem dejal, odraža nekaj točk, ki vedno pridejo, ko delving ta razprava.

Ob koncu dneva, ne izgubijo nobenega spanja več, ki lahko kodo in kdo ne. Jaz sem samo resnično presenečeni ugotovili, da veliko oblikovalcev, ki nimajo front-end spretnosti, kot sem mislil, to je stvar preteklosti.

Preberite tudi pripombe, je bilo okoli 320 pripomb, kot sem napisal ... ti je vredno prebrati.
Prosimo, preberite celotno Elliots komentar tukaj .. Spletni oblikovalci, ki ne morejo koda

Včeraj, po izdaji sem naletel s ponastavi CSS v brskalniku Google Chrome ... sem mislil kopati malo globlje v območju User Agent Style Sheets ...
Našel to tabelo na privzete vrednosti CSS2.1 User Agent Style Sheets ... (za tiste, ki ne zaveda, kaj "User Agent" Style Sheets je slediti Kaj je Style Sheets uporabnika Agent (specifikacija) .

Za celoten seznam CSS 2.1 User Agent Style Sheets nastavitve kliknite tukaj

Včeraj, tako kot vsak drug "Ground Hog Day", sem delal na nekaterih postavitvah CSS / tableless. Vse je bilo dobro gredo v IE 7, FF 3 in Chrome, do leta naenkrat, sem videl nekaj un-ignorable marže viden le v brskalniku Google Chrome. Čeprav je zelo nenavadno in worring, je bilo nekaj novega napako / problem, da sem prišel naletela, je bilo končno nekaj začimb v moji mukotrpnega dela. Sad (vendar lepo), dobil je določena v nekaj minutah po sondi ...

V bistvu, je videti, kot Google Chrome ne upošteva moje Resetira CSS (margin: 0px). To je bila dejansko posledica slogovne uporabniškega agenta (-WebKit-padding-start: 40px). Tako rešitev je, da ponastavite ta slog z določanjem padding: 0 povzročal težave elemente.
Dober način za preprečevanje tega problema ne bi zgodilo, da je vsak element uporabljati globalno dlani CSS takole

* {Margin: 0; padding: 0;}

Kaj je User Agent Style Sheets (specifikacija)?
Naslednji odlomek je vzet iz http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , sledite povezavo in preberite več o uporabniških Style Sheets Agent

CSS 1 uvaja idejo, z navedbo, da bo vsak Uporabniški vmesnik (UA, pogosto "Spletni brskalnik" ali "spletni stranka"), imajo list privzeti slog, ki predstavlja dokumente v razumno - pa verjetno vsakdanjega - način. CSS 2 pravi, da ustrezajo agentom za uporabo mora uporabiti list privzeti slog (ali se obnašajo kot da so to storili) in da bi uporabniškega agenta privzeti slog stanja predstaviti elemente iz dokumenta o jeziku na način, ki izpolnjujejo splošne pričakovanja za predstavitev dokumentov jeziku; CSS 3 je verjetno, da bo istega uma.

Ker CSS specifikacije pustite do izvedbe, ali želite uporabljati "prave" slog stanja za prikaz privzeto ali ne, to ni presenetljivo, da ne boste našli list privzeti slog v namestitev vsakega brskalnika mapo. Za razliko od Internet Explorerja, Microsoft, kot tudi opere, na primer (in kolikor vem), Gecko brskalniki, kot so Firefox in Netscape Navigator (poglej za "html.css"), ampak tudi Konqueror bi bilo bolj enostavno, da bi razumeli njihov privzeti stil.

Niti Zelo sem novi v vmesnik (UI) razvoja, niti sem veteran in kot vedno sem jo dal, sem se vklopil v profilu UI razvijalca več, kot je oblikovalec, brez obžalovanja. Oh No! Kaj sem pisal o? Za nekaj časa ... (mora biti v letih ni vse manj), zdaj, tu in tam, ko sem pa prišel v malo za oblikovanje uporabniškega vmesnika (ko je poklicni oblikovalec šel na počitnice), sem vedno vekanje stop razmišljal, ali bi moj dizajn pravilno complient ali ne (iskreno, ne da bi jaz arhivska 100-odstotno izpolnjevanje standardov, če sem hotel preveč). Potem sem povedal, kaj sranje! ... Zasnova mora biti preprosta, lepo in predvsem se zdi uporabna, ne bi smel narediti obiskovalci pobegnil ... ali bounce (kot tehnične). Kaj dobrega bi lepo tableless postavitev CSS je, da se obiskovalec, ki ne pozna ne vse pametne hiperteksta in Cascading Style Sheet pod kožo na vašo spletno stran ... Zilch!
To je treba videti lepo in je enostaven za uporabo ... potem pride vse standarde stvari.

Sem naletela stumbbled to blogu z Jason Fried od 37 signalov (Za tiste, ki se ne zavedajo 37 signali so onces, ki so ustvarili nekaj super spletne aplikacije, kot so Basecamp in Campfire itd), ki je napisal nekaj podobnega leta 2004 in verjemite mi, skoraj 5 let in ni veliko spremenilo, saj da ... sem bil vesel, da se glasi svoje delovno mesto, saj sem popolnoma strinjam s tem, kar ima za povedati in tudi dejstvo, ji ni prepričan o tem, kaj je povedal o svojem le njegov občutek črevesja in tako je moje

Jason Fried: "Obstaja način preveč govoriti o CSS in XHTML in standardov ter dostopnost in premalo govorimo o ljudeh. CSS koda in standardnim so le orodja - moraš vedeti, kaj graditi s temi orodji. Super, sem vesel, vaš uporabniški vmesnik ne uporablja tabel. In kaj potem? Koga briga, če še vedno ne pusti ljudje dosegli svoje cilje. Spletni standardi so super, ampak ljudi lastnimi standardi vključujejo pridobivanje stvari narediti (in to je še vedno preveč težko narediti na spletu).

UI oblikovalci so kar enako stara temeljni "pozabili na človeka na drugi strani" napak - razen tega pa njihova koda izgleda bolje. Ljudje - ne kod potrjevalci - vmesniki ".

Polni blagajni Jason Fried na članek

DISCALIMER: To ne pomeni, da ne bi smeli ukvarjati o standardih sploh. Standardi so dobro imeti, in se jih držite v največji možni meri. Imamo le razumeti, da dobro oblikovanje uporabniškega vmesnika ne pomeni vedno 100-odstotno standarde complience ali obratno ....

Iz mojega seznama mojih pridobljenih izkušenj, sem sledil nekaj UI načrtovanja in razvoja Zlata pravila ... Tukaj TOP 10 ... ne, da ste jim sledili tudi ...

1. Poskrbite za svoje uporabnike. Uporabniki lahko naredijo ali pa uničijo vaše spletne strani. Donot da uporabniškega videti kot skupno idoit, ki popolnoma nezmožen za uporabo vaše spletne strani. To je slabo!

2. Naj poenostavitve in uporabite svoje primarne USMERJANJE. Preveč stvari na zaslonu, večja je verjetnost, da bo dobil uporabnik zmeden ali raztresen od svoje prvotne naloge.

3. Bodi v mejah ... donot privošči preveč v Uporabnost, dostopnost in standardi. Uporaba standardov, učinkovito in jih razume, da v ekipi. To bo zagotovilo ustrezno skladnost izdelka

4. Prototipa, je zahtevo. Ker v teh dneh so vmesniki so bogate, Prototyping vedno je boljše kot samo izdelavo preprostih wireframes, slednji pa je nična primernih interakcij, bi ne zagotovi stranki jasno sliko o končni izdelek, ki se razvija. Vedno je lažje za pretvorbo prototipov v končne rezultate. Tudi! z izdelavo prototipov lahko vsa interakcija vprašanja izginile že v razvojnem ciklu.

5. Doslednost pri vašem oblikovanju in interakcije je zelo pomembno. Donot zamenjati svojega uporabnika z nepredvidljivimi interakcije in Izumi.

6. Razumeti svojo "izjavo načrta misije". Prospekti osredotočiti na osnovno delovanje strani namenjen beign. Prav tako se seznam vaših seconday dejanj na stran in jih prednostno.

7. Zagotoviti ustrezne povratne informacije s strani uporabnikov. Pri večini spletnih strani, namenjenih okoli AJAX, zagotoviti vizualne pokazatelje, ki uporabniku o spremembah strani. Uporabnik mora dati potrdilo o zaključku katerega koli nalogo mu opravlja. Donot da uporabnik počakati in ugibati, za npr. zagotoviti kazalnike napredka za uplaods datotek.

8. Uporaba nadzora ustrezno. Za primer uporabe Izberi spustni seznam za mala sezname samo, donot naj uporabnik izbere eno od 200 mest z uporabo izberite polja. Razumeti razliko med gumba in povezavo. Povezava in gumb za različne namene, donot uporabite enega za drugim. Zagotavljajo prave kontrole, da bi v stiku z strani lažje. Izogibajte se uporabi menijev, ki so več kot dve ravni globoko. Ne novo odkrivati. Uporabljati standardne kontrole, ki jih prilagodite le, če je zelo potrebna. Opredeliti po meri nadzora, potrebnih za mesto prve roke, tako da bi jih lahko ustvaril in preizkušeni neodvisno, pripravljen za uporabo strani naletela.

9. Donot Ponovil preveč na oblikovanje. Ne pozabite! Celoten izdelek je sestavljen več, da je oblikovanje sam. Zgraditi ustrezne roke, v svoj seznam za projekt oblikovanja iteracij in vztrajati pri tem. Ponovitev nam pomaga, da ugotovite, kaj deluje in kaj ne, izbrati na kriznih žariščih. Kot dober vmesnik je potreben čas, imel dovolj časa za ponavljanje na začetku razvojnega cikla, tako da je oblikovanje iteracij doesnot neposredno enačiti s predela. Preveč bi veliko predelati jeopradize roke.

10. Usedi se nazaj in razmišljati kot uporabnika včasih.

Ste videli animoto.com? No! to ni AD, res mi je bilo všeč! in je poljub ASS vmesnik zares

Sem prišel čez to mesto pred nekaj tedni. Videl prvo stran, Trud moti veliko. Zame je bila samo še ena stran z nekaj bogate vsebine Flash, ki omogoča uporabnikom nalaganje slik, izberite nekaj sledi in se preoblikoval v lepo diaprojekcijo slik. Download FLV, in ga na vsakem mestu po vaši izbiri (YouTube, Metacafe, Facebook in podobno) ... obdobje.

Včeraj, ko sem videl potekom notranje strani, ki so se uporabnik z ustvarjanjem te diaprojekcije .... Šel sem OH WOW! Ko sem spoznal, da ni bilo malo FLASH uporabiti. Bilo je res bogat uporabniški vmesnik. Vsi razvijalci morajo UI si prizadevajo ustvariti ali vsaj del ekipe, ki je opravil ta vmesnik .... Absolutno briljantno! In navdihujoča!

Oglejte ... http://animoto.com/~~HEAD=dobj ... in se registrirati in igrati z njim ... šele potem lahko cenili genij.

Ko sem prebral ta članek na seznamu, ki poleg " Faux Absolute položaja
Eric Sol ", mi ni bilo nič manj kot navdušena. Bil sem tako depresiven Majorly, povzroči, pošteno sem se spraševala, zakaj vekanje sem prišel do nekaj čudovito, kot je ta.

Ponavadi, ko smo ustvarili CSS postavitev, ki jih uporabljamo v položaj "ali" lebdi "ali zelo slabo kombinacijo obojega. Eric Sol in njegova ekipa opredeli poleg odlično tehniko novega tipa postavitve tehnike CSS, ki so jo krstili kot "umetno Absolute pozicijsko" po umetno tehniko stolpcev, ki simulira prisotnost stolpca.

Saj veš, da je problem vseh nas CSS razvijalci imeli z razpadajoči postavitvami (The nepričakovane vsebine sprememb, ki povzročajo celotne stolpce zaviti, ko jih uporabljamo v zraku postavitve) ... No! Zdi se zgodovina!!
Ta postavitev tehnika je še zelo mlad, in ga je pospravila, ki jih vseh teh gurujev CSS tam, preden postane un napisal standard. Vesel sem, da jo uporabljajo ZDAJ! ... In sem že v sredini pretvorbo moje prej problematičnih / plavajoči ne-nujno tudi postavitev v postavitev FAP že ... in sem vesel, da pravijo, da "smo se že uporabljajo faux Absolute umeščanja tega spletnega dnevnika, pa tudi" ... GO poskusiti, ZDAJ!

Slava Eric!

Več o DOM elemente na strani, počasneje pa postane, počasneje je DOM dostop v JavaScript-jev. Veliko število elementov DOM je lahko posledica slabega načrtovanja postavitev. Na primer, bi lahko ugnezdene tabele so bili uporabljeni za postavitev namene. Uporabite vse HTML Tag, kjer se je smiselno pomensko. Za npr. uporaba donot tabel za postavitev, vendar donot oklevajte in jih uporabiti, če imate za prikaz tabelarične podatke, zato bo uporabila zmanjšanje DOM elemente, v primerjavi s podobno strukturo ustvarjeno s DIVs samo ..

Če želite preizkusiti število elementov DOM v vašem HTML stran, samo vnesite naslednje v konzoli Firebug je: document.getElementsByTagName('*').length

Ni določeno standardno o tem, koliko DOM elementi so preveč. Preverite drugih podobnih strani, ki imajo dober markup.Eg. Yahoo! Domača stran je zelo zaposlen stran in še vedno pod 700 elementov (HTML tags).

Uporaba GET za zahteve AJAX

Ugotovljeno je bilo, da pri uporabi XMLHttpRequest, je POST izvajajo v brskalnikih kot dveh korakih: pošilja glave, potem pošilja podatke. Torej je najbolje, da uporabite GET, ki traja le en TCP paket za pošiljanje (razen če imate veliko piškotke). Največja URL dolžina v IE je 2K, tako da, če boste poslali več kot 2K podatkov morda ne boste mogli uporabljati GET.
Zanimivo je, da spremljajoči učinek PO, ne da bi dejansko objavo kakršne koli podatke, se vede kot GET. GET je namenjen za pridobivanje informacij, zato je smiselno (semantično) za uporabo dobili, ko ste samo zahteva podatke, v nasprotju s pošiljanjem podatkov, shranjenih strani strežnika.

Ne pride do sinhrone klicev AJAX

Pri izdelavi "Ajax" zahteve, lahko izbere bodisi async ali sinhronizacijo način. Async način vodi zahtevo v ozadju, medtem ko ostale dejavnosti brskalnik nadaljujejo z obdelavo. Sync način bo počakati na zahtevo, da se vrnejo, preden nadaljujete.
Zahteve, ki z načinom sinhronizacije se je treba izogibati. Te zahteve bo povzročilo brskalnik zaprl za uporabnika, dokler se ne zahteva vrnitve. V primerih, ko je strežnik zaseden in odziv traja nekaj časa, uporabnikov brskalnik (in morda OS) ne bo nič drugega storiti. V primerih, ko odgovor ni pravilno prejeli, lahko brskalnik še naprej blokirati, dokler se zahteva potekla.
Če menite, da je vaš položaj zahteva sinhronizacijo način, je najbolj verjetno čas, da se ponovno da vaš design. Zelo malo (če sploh) situacije dejansko zahtevajo Ajax zahteve v načinu sinhronizacijo.

Optimizirajte slike

Optimizacija preprosto pomeni ohranjanje velikost slike majhno vodenja kakovosti slike na zahtevano stopnjo. Obstaja na kupe postopkov, ki se lahko enkrat izvajajo za optimizacijo slik, preden se vkrca na strežniku za dostavo. Orodja, ki jih uporabljamo za ustvarjanje teh slik (Photoshop, ognjemet itd) imajo običajno orodje, ki uporabnikom omogočajo optimizacijo slike za uporabo v spletu.
• Preverite, GIF, da vidim, če uporabljate palete velikosti, ki ustreza številu barv v sliki. Ko slika je s 4 barv in 256 barvno paleto, potem bi podoba še bolj optimizirano

• Pretvarjanje GIF je, da ko PNG je mogoče, in vidim, če je prihranek. Bolj pogosto kot ne, ni. Ne odlašajte z uporabo PNG-ih, saj so v celoti podpira večino pogosto uporabljenih brskalnikov. Pričakujejo od animacijskih zmogljivosti PNG lahko naredimo tisto, kar počne GIF, vključno s preglednostjo.

• Za slike, ki se uporabljajo v sprites CSS, poskrbi da so slike v Sprite vodoravno v nasprotju z vertikalno navadno za posledico manjši velikosti datoteke. Prav tako združujejo slike s podobnimi barvami v Sprite. To vam pomaga, da barvna Število nizka, v najboljšem primeru pod 256 barvami, tako da se prilegajo v PNG8.

• Če uporabljate favicon.ico, naj bo majhen, po možnosti pod 1K.

Uporabite ustrezno zmanjšati / spremeni velikost slike.

Vedno poskusite in uporabi slik, oziroma ne uporabljajte večjo sliko, kot jo potrebujete samo zato, ker lahko nastavite širino in višino v HTML. Če želite prikazati 100 pik 100 pik X slike na strani, potem ne uporabite pomanjšane slike 200x200px.

Uporaba Progressive slike

Spletni brskalnik je že postane Slike postopoma. Da bi to naredili še boljši, preprosto shranite GIF ali PNG slike s "prepletenih" možnost, ali vaše JPEG s "postopnim" možnost.

Tam je v teku razprava med uporabniki spleta, ali uporaba progresivne slike je blagoslov ali ovira. Tudi progresivno tehta približno 20% več kot njegov kolega, ki niso postopno. Torej, če mislite, da postavitev uporablja slike, ki ne ovirajo uporabniško izkušnjo da bi bilo postopno, vas prosimo, da to storijo.