2010 20. мај 2010

Ре-Билијар ЦСС: Поглед на ЦСС оквирима

Ре-Билијар је и Буззворд У Веб развој значи не разликује. То штеди енергију, у смислу напора!

Током година писања ХТМЛ ЦСС и стварање од дизајна, ја сам пратио неколико најбољих пракси, у потрази за уштеде време и енергију у оно што обично термин као "поновно измишљање тхе Вхеел". Време и време опет, ја сам себи рекао да морам да створи неколико шаблоне, неки стандардни поново употребљив ЦСС да бих ја користим оут оф тхе бок у мом будућем раду. Иако не у потпуности али сам успео да остварим неке од циљева.

У даљем, Поновно коришћење ЦСС, имао сам поглед на неколико ЦСС оквирима који су обично на располагању за нас и одлучио да стави их да користе, јер су то покушао и тестирани и створио много искусних програмера и од мене. Што је још важније "Избегавајте РЕ-измишљањем".

Иако је познато да се ветеранима, покушао сам да оловком неки кључни концепти / најбоље праксе /-мисли да је отишао у стварању ових оквира, да би од Ре-Билијар ЦСС могуће. Надам се да ће то помоћи неким ЦСС програмерима који су само о томе да и недавно се укрцали на воз ЦСС!

Тастери Ре-Билијар у ЦСС:

Користите конвенције именовања

То мора да буде најважнији фактор у доношењу ЦСС / ХТМЛ поново употребљива. Давање конзистентна имена странице елементима омогућава поновну употребу страница компоненти и њихових стилова са мало или модификацијама. У складу са овим аргументом, Чак ХТМЛ5, у велике промене промене односу на своје претходнике, јесте да се уведу неке структуралне ознаке јест. <артицле>, <сецтион>, <хеадер>, <асиде> и <нав> [ Шта ће донети ХТМЛ5? ]. Чак и са ХТМЛ 4 (или мање), најбоље је да именујете стандардне делове ваше странице цонсистанли као у простом примеру ...

Запамтите, већина странице на вашем пројекту, на крају имају исте основне структуралне елементе. Идентификовати ове заједничке елементе основне странице ....

  <див ид="цонтаинер">
    <див ид="хеадер"> ... </ п>
    <див ид="нав"> ... </ п>
    <див ид="сидебар"> ... </ п>
    <див ид="фоотер"> ... </ п>
   </ Див> 

Ресет Дефаулт стилове (ЦСС Ресетује): Да ли користите оквир или напиши своје, морате обезбедити ЦСС ресетује [ Шта су ЦСС Ресетује? ], јер они смањују или елиминишу понекад визуелне недоследности које се дешавају између различитих претраживача. У једноставним речима ЦСС Поништи механизам поставља стилове ХТМЛ елемент на нула или НУЛЛ вредности, тако највазније било који бровсер подразумеване вредности могу позама. Ово обезбеђује чист шкриљац да подесите својства ових елемената празнине Сваки корисник-агент подразумеване вредности [ ЦСС2.1 Усер Агент стилска Дефаултс ]. Сви ЦСС оквири немамо механизам за ресет. Ако пишете вам сопствени ЦСС ресетује, реч опреза је да ако се деси да заборавите да поново кључну особину, то би могло довести до унакрсно претраживача питањима, који су веома тешко дебуг. Запамтите, чувајте копију ресет стилова и спусти их у сваком новом пројекту који креирате.

  тело, див, дл, ДТ, ад, ул, ол, Ли,
  Х1, Х2, Х3, Х4, Х5, х6,
  унапред, облик, ФИЕЛДСЕТ, улаз, изаберите, тектареа,
  П, блоцккуоте, сто, ти, ТД
  {
    бордер: 0пк;
    маргин: 0;
    паддинг: 0;
  } 

Постави Дефаултс (Основни Стилови) до елемента:

Након што сте подесили (на нулу или НУЛЛ) подразумеване вредности одређених атрибута одређених ХТМЛ елемената, потребно је да примените неке стилове широм сваком степену ових елемената. Ово Подразумевана поставка би могао да мења по пројекту или по најбоље праксе које следе.

Већина ЦСС оквири, увек уводи неке нове подразумеване, поред ресетовању подразумевани прегледач стилове.
Ове подразумеване као празнину на Корисник-Агент подразумеване вредности (откинула од стране ЦСС ресет), то ће бити уједначена у свим бровсерима.

Запамтите, Основни стилови се користе да подесите стилове који се користе иду дизајн света. нпр.

  хтмл {фонт-сизе: 77%; фонт-фамили: Ариал, санс-сериф;}
 јака, Х1, Х2, Х3, Х4, Х5, х6 {фонт-веигхт: болд;} 

Сажетак Стилови за опште и заједничке компоненте ХТМЛ класама:

Највећи пројекат састоји од неколико страна ће имати заједничке ХТМЛ елементе који се користе преко сајта, на пример неке врсте образаца, упозорењима и грешкама, прилагођене Искачући прозори, фасцикле итд Од такве компоненте се користе изнова кроз пројекте, то ће бити корисно да се обезбеди скуп класа повезаних са унапред дефинисаних стилова за ове компоненте и можете себи уштедети доста времена.

Поред дефинисања обновљивих дефиниције стилова за уобичајене ХТМЛ компоненте, можемо апстрактне класе стилови који се односе на типографија, боје или чак и распоред. Ја сам често користите ... заједничке часове попут Цлеарфик и Фонт08 и ФонтГреи и АлигнЛ и ДисплаиБ итд

  Образац улаз {бордер: 0пк; бацкгроунд: # фффффф; паддинг: 0пк 10пк; _паддинг: 0пк 0пк; висина: 26пк; цолор: # 000000; лине-хеигхт: 30пк; фонт-сизе: 1.1ем;}
 Образац Тектареа {бордер: 0пк; бацкгроунд: # фффффф; цолор: # 000000; фонт-сизе: .9 ем; лине-хеигхт: 1.5ем; Преливање: видљиви;}
 Фболд {фонт-веигхт: болд; цолор: # цццццц;}.
 Фгреи {цолор: # 666666;}.
 Флигхтгреи {цолор: # бббббб;}.
 Цлеарфик {јасан: обоје;}.
 Преграда {бордер-топ: 1пк солид # 647Б06; бордер-боттом: 1пк солид # 9ЦЦ00А; висина: 0пк;}.
 Дисплаиб {дисплаи: блоцк;} дисплаин {дисплаи: ноне;}..
 Алигнр {тект-алигн: ригхт}. Алигнц {тект-алигн: центер}.
 Флоатр {флоат: ригхт;} флоатл.. {Флоат: лефт;} 

Решења за уобичајене куиркс претраживача

Различити прегледачи имплементира ЦСС код и пружају различит ниво подршке за ЦСС спецификацијама. Резултат тога .... "Бровсер Куиркс", који су ми остали програмери да се позабави. Посебно, ИЕ6 прогања највише ЦСС кодере са роком да се састане. Добра вест је искуство је окупила могуће обновљивих решења за ова питања (често назива као Хацкс ЦСС ).

Запамтите, фотографије ове хацкс / грешке при руци

  / * Зум следеће: 1. правило је специјално за ИЕ6 + технологијама ИЕ7.  * /
    * ХТМЛ цлеарфик.
    *:. Прво дете + ХТМЛ цлеарфик {
           зум: 1;
      } 

Кееп Иоур ЦСС Рефининг

  • Навика Ре-Билијар неће доћи вама у дан. То мора да развија. Дакле, испланирате Ре-Билијар. Имајте ово на уму да можете подразумевано апстрактне стилови, типографија дефиниције, Лаиоутс, ХТМЛ стилови елемената итд Покушајте да мислите унапред.
  • Такође погледате своје последње пројекте, то ће помоћи да се идентификују стилове које сте склони да често користе широм порјецтс. Извод њега.
  • Уклоните све неискоришћене стилове. Ова пракса ће задржати свој ЦСС оквир из чест симптом под називом "Надимање" -
  • Уклоните понављају стилове.
  • Направите скуп стилова који су довољно флексибилан да га пребаци преко пројеката.

Поглед на ЦСС оквирима

Коначно. Ако су инспирисани и намеравате да користите једну или више оквира ЦСС, Херес је кратка листа од неколико популарних оне ....

  • 960 грид систем : 960 грид систем је напор да се усмери ток Веб девелопмент би пружање најчешће коришћене димензије, на основу ширине 960 пиксела. Постоје три варијанте: 12, 16 и 24 стубова, који се могу користити засебно или у тандему. Мисао да ништа не можете да направите за ваше лако довољно, оквир обезбеђује шаблоне раду система за штампање у ПДФ формату, која се може користити да скицирам свој десигнс.Бет страну, то би професионални утисак, ако носите неколико листова када идете на клијенту за УИ скупа захтева. Она такође пружа основне грид шаблоне за популарног дизајна софтвера као Фиреворкс, Фласх, ИнДесигн, Иллустратор, Пхотосхоп, Висио, итд обезбедјује "стартер за десет" да бисте започели свој рад дизајна.
  • План : Блуепринт обезбеђује јасно сврстати ЦСС фајлова за ресетује, табеларних образаца, штампање, типографија, плугин за дугмад, картице и сл Спрајтови Она такође пружа подршку за ИЕ, као посебан укључују.
  • СенЦСс : За разлику од ова два, СенЦСс (изражен смисао), нема ЦСС дефиниције за приказ. То не укључује фонтове, паддингс, маргине, табеле, листе, заглавља, блоцккуотес, обрасце и још много тога.
  • БлуеТрип : Њен првобитни захтев је био да до славе, то је комбинација најбољих карактеристика које нуди другим другим оквирима као што су Блуе штампа, Трип Оли ... одакле се добија своје име. Његова функција обухвата скуп 24-колоне решетку, типографија стилова, ОРМ стилове, штампе, дугмад итд
  • ИУИ табеларних : Довео до вас у Иахооо Девелопер Нетворк, подржава течности-ширина (100%) распореде као и унапред фиксне ширине распореде на 750пк и 950пк и 974пк, и способност да лако прилагодите на било који број. Као што можете видети, његове формално само распоред компоненти. ИУИ такође обезбедио ХТМЛ / ЦСС комплета за остале елементе странице
  • ИАМЛ (Иет Анотхер краина)
  • Емастиц

Запамтите, користећи ЦСС оквире не значи да сте лењи да направите сопствени ... То значи да сте паметни да уче од других искуства и грешке, штеде време и повећавају продуктивност!


2010 Јан 9 2010

Његова о "Веб дизајнера који не могу да код"

Са ограниченим Скилл-сета са алатима као што су Пхотосхоп и Иллустратор, ја искрено могу да признам да сам бољи програмер од мене дизајнер. Али моја позадина са језгром (Сервер Сиде) развој са Јава / ПХП / ЦОБОЛ, је веома позитиван утицај на развој корисничког интерфејса мојим способностима. Хоћу да кажем, уз стварање моје дизајне, односно кад год радим дизајн, мислим о томе како се дизајн се најбоље конвертовати у ХТМЛ-ЦСС-а и док радите на ХТМЛ-ЦСС, дајем мисао о бацкенд технологије и да разумно сигурни да ХТМЛ се лако може имплементирати у КССЛ петљи или ПХП исечака итд

Током година, ја сам био бачен главу на дизајну коју УИ дизајнера који вероватно донот имају појма шта ХТМЛ или ЦСС. Све ове године сам размишљао да ћу траже превише, Ако сам само очекујем дизајнер, који покушава да схов његов "немогуће" код дизајна доле грлу, да разумеју само мало онога што је његов дизајн ће бити конвертована у. То би у праву помогне?

Тада сам дошао преко овај пост данас ... Веб дизајнера који не могу код ... Хвала Господе! Ја сам само један од многих који се осећају исто ... изнад артитле је мало дуго даха .. али вредна читања, свака реч о њему.

Хвала Елиотовим Јаи деонице ... Осећам олакшање!

Ево неких извода из члана Еллиотс .

Вау, какав дан! Почело је са једном малом твеет и завршио са дискусијом који се чинило да помете преко целе заједнице веб дизајн. Изгледа да постоје неке веома јаке мишљења одржани на тему да ли веб дизајнери треба да буде у стању да кода.
...
Дакле, пре него што уђемо у то, дозволите ми брзо да проанализирамо оно што сам рекао на овом јутра на Твиттер-у:

Искрено, ја сам шокиран да је у 2010 и даље долазим по 'веб дизајнера који не могу код своје дизајне. Нема оправдања.

Ја сам ... требало је мало више специфични у мом твеет. Причао сам о дизајнера који немају чак ни најосновнији ХТМЛ и ЦСС вештине да бисте раван дизајн у стварном сајту. Не људи који се определе да не намерно коду; они који не могу. И ја такође мислим само на фронт-енд код овде, наравно да је смешно мислити да дизајнери треба да буду невероватни бацк-енд програмери ...

Ми смо добили 'веб' дизајне послате у Иллустратору, 300дпи, немогуће кода, без густина / употребљивост.
Ејми ~ Махон

Постаје касно, а ја некако да заврши ово. Знам да ће бити много оних који се не слажу са мном, и моја намера није да увредим или узнемирити било кога ко не може код, али се надам да неке ствари које сам рекао одражава неке од тачака које увек долазе када делвинг Ова дебата.

На крају дана, ја не изгубити било ко може да преспава код и који не могу. Ја сам само искрено изненађен да пронађе толико много дизајнера који немају изложеним вештине, као што сам мислио да је ово ствар прошлости.

Такође, прочитајте коментаре, било је око 320 коментара, док ово пишем ... они вреде читања.
Молимо да прочитате овде Еллиотс комплетан пост .. Веб дизајнери који не могу код


2009 Сеп 28 2009

ЦСС2.1 Усер Агент Стиле Схеет Примарни

Јуче, после емисије сам наишао са ЦСС ресетује у Гоогле Цхроме-а ... Мислио сам да од копа мало дубље у област Агенција Стиле Схеетс корисника ...
Пронађено ову табелу на подразумеване вредности ЦСС2.1 корисника Агенција Стиле Схеетс ... (за оне који су свесни шта "Усер Агент Стиле Схеетс" је пратити Шта је Усер Агент Стиле Схеетс (спецификација) .

За комплетну листу ЦСС 2.1 усер агент стилски подразумеване кликните овде


2009 Сеп 27 2009

Корисничке Агент Стиле Схеетс: Мистерија марже у Гоогле Цхроме

Јуче, као и свака друга "Дан Копнене Хог", радио сам на неким ЦСС / Таблелесс распореда. Све је добро иде у ИЕ 7, ФФ и Цхроме 3, До изненада, видела сам неке УН-игнорабле маргине види само у Гоогле Цхроме. Иако је веома чудно и ворринг, то је нека нова грешка / проблем који сам дошао аццросс, коначно постоји неки зачин у мом раду световног. Саду (али леп) добила је фиксиран у року од неколико минута сонде ...

У суштини, изгледало је као Гоогле Цхроме игнорисао моју ЦСС ресетује (маргина: 0пк). То је заправо изазвана стилова корисника агента (ВебКит-бордер-Старт: 40пк). Дакле, решење је да вратите овај стил постављањем паддинг: 0 лоше понаша и елемената.
Добар начин да се спречи овај проблем из дешава на било који елемент је користити глобалну ЦСС Одмор на следећи начин

* {Маргин: 0; паддинг: 0;}

Шта је Усер Агент Стиле Схеетс (спецификација)?
Следећи одломак је узет из хттп://меиерт.цом/ен/блог/20070922/усер-агент-стиле-схеетс/~~ХЕАД=побј , следите линк да прочитате више о Усер Агент Стиле Схеетс

ЦСС 1 уводи идеју наводећи да ће сваки корисник агента (УА, често 'Веб бровсер' или 'Веб клијент ") имају лист подразумевани стил који представља докумената на разуман - али вероватно овоземаљско - начин. ЦСС 2 каже да складу са одговарајућим ЕН кориснички агенти морају да се пријаве лист Дефаулт Стиле (или се понашају као да јесу) и да подразумевани стил корисничког агента лист би требало да представи елементе докумената језика на начин који задовољавају опште очекивања презентацију докумената језику; ЦСС! 3 је вероватно да ће бити истог ума.

Пошто су ЦСС спецификације оставити до имплементације да ли да користе "прави" стила за подразумевани приказ или не, није зачуђујуће да не пронађете лист подразумевани стил у инсталационом фолдеру сваке претраживача. За разлику од Интернет Екплорер компаније Мицрософт, као и Опере, на пример (и колико ја знам), Гецко претраживачи као што су Фирефок и Нетсцапе Навигатор (погледајте за "хтмл.цсс"), али и Конкуерор чини прилично једноставан за схватити њихов подразумевани стил.


2009 Феб 12 2009

Добар кориснички интерфејс дизајн мора бити компатибилан стандардима. или то треба? Моји ТОП 10 УИ Десигн Правила


Ни ја сам веома нови у кориснички интерфејс (УИ) развоја, нити сам ја ветерана и као што сам увек рекао, ја се уклапају у профил УИ девелопер више него дизајнер, без кајања. Па ох! Шта сам писао о томе? За неко време ... (мора бити у годинама није било мање) сада, сваки сада и онда када сам се уђе мало УИ дизајна (професионални дизајнер када је отишао на одмор), увек сам цант стоп размишља да ли да мој дизајн бити правилно цомплиент или не (искрено, не бих могао да постизање 100 одсто стандарда поштовања, ако ја хтео). Онда кажем себи, оно срање! Дизајн ... треба да буде једноставна, лепо изгледа и пре свега користан, не би требало да посетиоци побегне ... или Боунце (да буде технички). Шта добро би лепо Таблелесс ЦСС распоред бити посетиоцу, који је несвестан свега паметном хипертекст и Цасцадинг Стиле Схеет под кожу вашег веб странице ... Зилцх!
То би требало да изгледа лепо и да буде једноставан за коришћење ... онда долази све стандарде ствари.

Ја стумбблед аццросс овај блог унос од Јасон Фриед од 37 сигнала (за оне који не знају 37 сигнали су онцес који су створили неке Ауесоме веб апликације попут Басецамп и Цампфире итд) који су написали нешто слично у 2004 и верујте ми, скоро 5 година и није много променила од тада ... Био сам срећан да прочита свој пост, јер сам се потпуно слажем са оним што он има да каже, а такође чињеница, њу није сигуран шта се говори о његовој само његов осећај у стомаку и тако је мој :)

Џејсон Фрид: "Било је превише причају о ЦСС и КСХТМЛ и стандардима и доступности, а не довољно говоре о људима. ЦСС и стандарди Усклађен закон су само алати - морате да знате шта да се изгради са овим алатима. Одлично, драго ми је твој интерфејс не користи табеле. Па шта? Кога је брига ако и даље не дозвољава људима да остваре своје циљеве. Веб стандарди су велики, али сопствени стандарди укључују људи Геттинг Тхингс Доне (и то је још увек сувише тешко учинити на мрежи).

УИ дизајнери праве иста стара основна "заборављајући о људском бићу на другој страни" грешака - осим овом тренутку њихов кодекс изгледа боље. - Људи не код валидатори - кориснички интерфејс ".

Цхецкоут Јасон Фриедове цео чланак

ДИСЦАЛИМЕР: То не значи да не треба да смета о стандардима уопште. Стандарди су добро имати и придржавајте их се што је више могуће. Ми само треба да схвате да добар дизајн УИ не значи увек 100 одсто стандарду Цомплиенце или обратно ....

Из мог списка мог наученог, пратим неколико УИ дизајн и развој златних правила ... Херес Топ 10 ... није да имате пратите их превише ... :)

1. Брините о својим корисницима. Корисници могу учинити или сломити ваш сајт. ДОНОТ да изгледа као на употребу укупног идоит, потпуно неспособним да користите свој сајт. То је лоше!

2.. Фотографије једноставност и лакоћа употребе своје примарне гуидлинес. Превише ствари на екрану, већа вероватноћа да ће корисник добити збуњени или растројен од њиховог оригиналног задатка.

3.. Будите у границама ... ДОНОТ превише упуштати у употребљивости, приступачност и стандардима. Користите стандарде ефикасно и да их разуме у тиму. Ово ће обезбедити доследност у праву производа

4.. Прототипе услов. Пошто ових дана Користи Интерфејси су богати, прототипа увек је боље него само једноставне вирефрамес и други је празнина од пристојних интеракција, то не би успео да обезбеди клијенту јасну слику финалног производа који се развија. Увек је лакше конвертовати прототипове у последњих резултата. Такође! са прототипова било каква интеракција питања могла да се пегла од раније у развојном циклусу.

5.. Доследност у свој дизајн и интеракција је веома важна. Донот забуне са непредвидивим односима и Гизмос.

6.. Разумети своје "Изјаву дизајн мисију". Проспекти фокусирају на основне акције странице беигн дизајниран. Такође, направите листу ваших сецондаи акције на страници, а приоритет им.

7.. Обезбеди одговарајућу повратну информацију на сајту корисницима. Уз већину сајтова дизајнираних око АЈАКС-ом, обезбедити визуелне сигнале кориснику о променама на страну. Корисник мора да пружи признање завршетку сваког задатка наступа. Донот да корисник чека и погодите, за нпр. обезбедити индикаторе напретка за уплаодс датотека.

8. Користите контроле на одговарајући начин.. За пример употребе Селецт падајућој листи за мале листе само донот нека корисник изабере једну од 200 градова користе изаберите поља. Разумевање разлике између тастера и неки линк. Дугме линк и имају различите намене, донот користите једну за другом. Даје право контроле да би у интеракцији са страница лакше. Избегавајте да користите меније, који су више од два нивоа дубине. Немојте поново измисле точак. Користи стандардне контроле, прилагодите их само ако веома потребно. Дефинишите све потребне контроле прилагођене за ваш сајт из прве руке, како би могли да се створи и тестирати независно, спреман за употребу аццросс сајт.

9. Донот. Прелазили превише о дизајну. Запамти! Цео производ се састоји само још тај дизајн. Изградити одговарајуће рокове у пројекат распореду за дизајн итерација и држите се тога. Итерација помаже нам да сазнамо шта функционише а шта не, бирам места невоље. Као добар интерфејс је потребно време, обезбеди време за итерација у почетку развојног циклуса, тако да доеснот дизајн итерација директно изједначавати са обрадом. Превише преправити могао јеопрадизе рокове.

10 Седите и мислим као некад корисника..


2008 Ауг 7 2008

Анимото: Реалли нице "Богати кориснички интерфејс" без блица!

Да ли сте видели анимото.цом? Добро! ово није ад, стварно ми се допало! и то је заиста Кисс УИ АСС

Наишао сам на овом сајту пре неколико недеља. Сав првој страници, наметале смета много. За мене, то је био само још један сајт са неким богатим фласх цонтент, омогућавајући корисницима да уплоад слике, изаберите неку нумеру и конвертовати га у лепе слике слајдова. Довнлоад ФЛВ, и ставио га на било којој локацији по вашем избору (ИоуТубе, Метацафе, Фацебоок и воли) ... ПЕРИОД.

Јуче када сам видела унутрашње стране тока, које су кориснику кроз стварање овог слидесхов .... Отишао сам Ох вов! Када сам схватио да није било мало користи ФЛАСХ. То је заиста био богат кориснички интерфејс. Сви УИ програмери морају да теже да створе или бар да буде део тима који је урадио овај интерфејс .... Апсолутно сјајно! И инспиративно!

Имају поглед ... хттп://анимото.цом/~~ХЕАД=добј ... и регистровати и играти са њим ... тек тада можете схватити генијалност.


2008 Јун 2 2008

Ми користимо погрешне апсолутно позиционирање: Бриљантно КЦС Распоред

Када сам прочитао овај чланак на А Лист Апарт " Лажна апсолутно позиционирање
Ерик Сол ", био сам ништа мање него импресиониран. Такође сам био депресиван мајорли, јер, искрено сам се питао, зашто цант дођем до нечега доброг, као ово.

Обично, када смо креирали ЦСС распореде, ми користимо "Поситион" или "плута", или веома лоша комбинација оба. Ерик Сол и његов тим дефинишу поред савршене технике новог типа ЦСС лаиоут техником, која су крштена као "Фаук апсолутно позиционирање" после вестацке колонама техником која симулира присуство колони.

Знате да је проблем свих нас ЦСС програмери су са распадала распореда (неочекиваног садржаја Промене које изазивају читаве колоне да преломи, када користимо флоатед распореде) ... Па! Изгледа историју!
Овај распоред техника је још увек веома млад, и има да се разнели од стране свих оних ЦСС гуруа тамо, пре него што постане стандардни УН написан. Драго ми је да га користите ОДМАХ! И ... већ сам у средини моје претварање раније проблематичне / плутајући УН-нужно распореде у ФАП распореду већ ... и драго ми је да кажем "ми већ користите погрешне апсолутно позиционирање за овај сајт као и блог" ... ГО пробајте, ОДМАХ!

Кудос Ериц!


2008 Маи 6 2008

Најбоље праксе: Држати Број ДОМ елемената Мали

Више ДОМ елемената на страници, то чини спорије, спорије је ДОМ приступ у ЈаваСцрипт-а. Велики број елемената ДОМ може бити последица лоше Лаиоут десигн. На пример, можда угнежђене табеле се користе за распоред сврхе. Користите било који ХТМЛ таг у којој се има смисла семантички. На пример ДОНОТ користити табеле за распореда, али ДОНОТ оклевати да их користим у којој морате да прикажете табеларне податке, и стога ће користити смањити ДОМ елементе, у односу, на сличне структуре створеног користећи ДИВс само ..

Да бисте тестирали број ДОМ елемената у ХТМЛ страници, само укуцајте следеће у конзоли на делу: Фиребуг document.getElementsByTagName('*').length

Не постоји стандардни сет као да колико ДОМ елементи су превише. Проверите друге сличне странице које имају добру маркуп.Ег. Иахоо! Почетна страна је прилично заузет страна и даље под 700 елемената (ХТМЛ ознаке).


2008 Јул 2 2008

Најбоље праксе: Коришћење АЈАКС

Користите ГЕТ за АЈАКС захтева

Утврђено је да када се користи КСМЛХттпРекуест, ПОСТ се спроводи у претраживачима као два корака: Слање прво заглавља, а затим шаље податке. Тако да је најбоље да користите ГЕТ, која траје само један ТЦП пакет за слање (осим ако имате много цоокиес). Максимална дужина УРЛ адреса у ИЕ је 2К, па ако шаљете више од 2К података можда нећете моћи да користите ГЕТ.
Интересантно је да страна афект ПОШТА без стварног постављања било какве податке понаша као ГЕТ. ГЕТ је намењен за претраживање информација, тако да има смисла (семантички) да користи ГЕТ када ви само тражи податке, насупрот слање података се чувају страни сервера.

Избегавајте синхроне АЈАКС позива

Када правите "фармацеут" захтеве, можете изабрати било асинц или синц режим. Асинц режим покреће захтев у позадини док се други веб активности може да настави да обрадимо. Синхронизација режим ће чекати на захтев да се врате пре него што наставите.
Захтеви направљене са синц моду треба избегавати. Ови захтеви ће изазвати прегледач да закључа за корисника, док се захтев повратак. У случајевима када је сервер заузет и одговор траје неко време, прегледач корисника (а можда и ОС) неће дозволити ништа друго да се уради. У случајевима где се одговор никада није исправно примљених, прегледач може да настави да блокира све док захтев истекло.
Ако мислите да је ваша ситуација захтева синц режим, то је вероватно време да поново мислите да је ваш дизајн. Веома мали број (ако постоји) заправо ситуације захтевају Ајак захтева синхронизовани режиму.


2008 22. мај 2008

Најбоље праксе: Рад са сликама

Оптимизујете слике

Оптимизација једноставно значи вођење величину слике малог одржавајући квалитет слике на потребном нивоу. Постоје гомиле процедура које некада могу да обављају да оптимизујете слике пре него што се учита на сервер за испоруку. Алатке које се користе за креирање ових слика (Пхотосхоп, Фиреворкс итд) обично имају алатке које омогућавају корисницима да оптимизују слике за веб употребу.
• Проверите ГИФ-а да види да ли користите одговарајућу величину палета на број боја на слици. Када се слика користи 4 боје и 256 палету боја, затим слике која може бити додатно оптимизован

• Конвертовање ЈПГ ГИФ је да где је то могуће и видети да ли је штедња. Чешће него не, не постоји. Не устручавајте се да користите од ЈПГ-а, јер су у потпуности подржане од већине најчешће коришћених претраживача. Очекујте од могућности анимације ПНГ, могу да ураде оно што ради ГИФ, укључујући и транспарентности.

• За слике се користе у ЦСС спритес, распоредите слике у вилењак хоризонтално насупрот вертикално обично резултује у мањој величини фајла. Такође, комбинујете слике са сличним бојама у вилењак. Ово вам помаже да задржите боју Број низак, идеално испод 256 боја тако да се уклапају у ПНГ8.

• Ако користите фавицон.ицо, остане мали, по могућству под 1К.

Користите исправно подешава / промењена величина слике.

Увек покушајте да користите и за промену величине слике, тј не користите већу слику него што је потребно само зато што можете да подесите ширину и висину у ХТМЛ-у. Ако желите да прикажете 100пк Кс 100пк слика на страници, онда немојте користити крљуштима доле 200к200пк слике.

Користите Прогрессиве Слике

Веб прегледач већ чини Слике прогресивно. Да бисте то урадили, још боље, једноставно снимите ГИФ или ПНГ слике са "интерлацед" опција, или ваше ЈПЕГ слике са "прогресивном" опцију.

Ту је у току дебата међу корисницима веб томе да ли употреба прогресивног имиџа је благослов или препрека. Такође прогресивно слика тежак око 20% више него његов колега не прогресивног. Дакле, ако мислите да сте распоред користи слике које неће отежавају корисник-искуство је бити прогресиван, слободно то урадите.


NDK home | Expressing IT | Expressing Palate | Expressing Penmenship | Expressing Awe | Expressing Myself