2010 20 май 2010

Re Колоездене CSS: Поглед В рамките на СГО

Re Колоезденето е Buzzword и в разработването за Уеб означава, че няма по-различно. Това пести енергия, по отношение на усилия!

През годините на писане на CSS и създаване на HTML от дизайн, аз следват няколко най-добри практики, в стремежа за спестяване на време и енергия в това, което обикновено мандат като "преоткриването на колелото". Отново и отново, аз си казах, че аз трябва да създадете няколко шаблони, някои стандартни повторното използване на CSS, че ще използва от кутията в бъдещата ми работа. Макар и не напълно, но успя да постигне някои от цели.

За по-нататъшното, повторна употреба на СГО, имах един поглед към малкото рамката на CSS, които често са на разположение за нас и реши да ги пуснат в употреба, тъй като те са изпитани и тествани и създадени от много по-опитни разработчици, отколкото себе си. По-важното е "Избягвайте преоткриването".

Макар общ знания за ветерани, са се опитали да напишат някои ключови понятия / най-добрите практики / мисли, че е отишло в създаването на тези рамки, за да направи възможно RE-Колоездене на CSS. Надявам се това ще помогне на някои CSS разработчици, които са на път да и наскоро се качили на банда CSS!

Keys Re колоездене на CSS:

Използвайте именуване конвенции

Това трябва да бъде най-важният фактор при вземането на повторното използване на CSS / HTML. Даване последователни имена на елементи от страницата дава възможност за повторно използване на на страница компоненти и техните стилове, с малко или модификации. В съответствие с този аргумент, дори и HTML5, в голяма промяна на повече от своите предшественици, е да се въведат някои структурни, а именно тагове. <article>, <section> <header>, <aside> и <nav> [ Какво ще на HTML5 донесе? ]. Дори и с HTML 4 (или по-ниска), най-добре е да назовем стандартни секции на вашата страница consistanly като в прост пример по-долу ...

Не забравяйте, че повечето страници на вашия проект, в крайна сметка като едни и същи основни структурни елементи. Идентифициране на тези общи основни елементи на страницата ....

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

Проучване по подразбиране стилове (CSS Връща): Независимо дали използвате рамка или напишете своето собствено, трябва да предоставите CSS Връща [ Какви са CSS Връща? ], тъй като те намаляват или понякога елиминира визуални несъответствия, които се случват между различните браузъри. С прости думи механизма за Reset CSS определя стила на HTML елемент нула или нула ценности, така да се заобиколи никакви стойности на браузъра по подразбиране, те могат да поставя. Това осигурява на чисто, за да зададете свойствата на тези елементи лишен от всички User-Agent по подразбиране [ CSS2.1 User Agent стил по подразбиране лист ]. Всички на CSS рамки нямаме на нулиране механизъм. Ако пишете собствен CSS Връща една дума на предпазливост е, че ако се случи да забравим, за да възстановите ключова собственост, това може да доведе до различни браузъри въпроси, които са много трудни за дебъгване. Не забравяйте, че се съхранява копие на Ресет стилове и ги пуснете във всеки нов проект, който създаде.

  тялото, DIV, DL, DT, DD, ул., ол, LI,
  H1, H2, H3, H4, H5, H6,
  PRE, форма, fieldset, вход, изберете, текстовото поле,
  P, Текстов блок, маса, ти, TD
  {
    граница: 0px;
    граница: 0;
    подложка: 0;
  } 

Комплект подразбиране (Базови стилове) с елементи:

След като сте настроили (до нула или нула) стойностите по подразбиране на някои атрибути на някои HTML елементи, е необходимо да се прилагат някои стилове, във всеки случай, от тези елементи. Тези настройки по подразбиране може да варира според дизайна или според най-добрите практики, които следвате.

Повечето рамки, CSS, винаги въвежда някои нови стойности по подразбиране, в допълнение към възстановяване стилове на браузър по подразбиране.
Тези подразбиране е лишен от User-Agent по подразбиране (махнати от Reset CSS), те ще бъдат в съответствие различни браузъри.

Не забравяйте, че базовите стилове се използват, за да зададете стилове, които се използват, са дизайн. например.

  HTML {шрифт с размер: 77%; шрифт семейство: Arial, безсерифен;}
 силен, H1, H2, H3, H4, H5, H6 {шрифт тегло: получер;} 

Абстрактни стилове за общи HTML Компоненти и общи класове:

Повечето проект, състоящ се от няколко страници ще имат общи HTML елементи, използвани в сайта, например някакъв вид на форми, предупреждения и грешки, потребителски изскачащи прозорци, лайтбокса т.н. Тъй като тези компоненти се използват отново през проекти, това ще бъде полезно да се осигури набор от класове, свързани с предварително зададени стилове за тези компоненти и можете да си спестите много време.

Освен определянето на определения за многократна употреба стилове за общите HTML компоненти, бихме могли да абстрактни класове стилове, отнасяща се до типография, цвят или дори оформление. Аз себе си са склонни да използват ... общи класове като Clearfix, Font08 FontGrey, AlignL, DisplayB др.

  формуляр за въвеждане на {граница: 0px; фон: # FFFFFF; подложка: 0px 10px; _padding: 0px 0px; височина: 26px; цвят: # 000000; линия-височина: 30px; шрифт, размер: 1.1em;}
 форма текстовото поле {граница: 0px; фон: # FFFFFF; цвят: # 000000; шрифт с размер: .9 им; линия-височина: 1.5em; препълване: видим;}
 . Fbold {шрифт тегло: получер, цвят: # cccccc;}
 Fgrey {цвят: # 666666;}
 Flightgrey {цвят: # bbbbbb;}
 Clearfix {ясно: и двете;}
 Делител {гранично-нагоре: 1px твърди # 647B06; дъно граници: 1px твърди # 9CC00A; височина: 0px;}
 . Displayb {дисплей: блок;} displayn {дисплей: няма;}
 Alignr {текст-align: дясно}. Alignc {текст-align: център}
 Floatr {поплавъка: право;}. Floatl {поплавъка: ляво;} 

Поправките на общи странности на браузъра

Различни браузъри прилагане на кода на CSS и осигуряват различна степен на подкрепа за спецификацията на CSS. В резултат на това .... "Браузър странности", че ние, разработчиците са оставени да се справи. Особено, IE6 преследва най CSS програмисти с краен срок да се срещнат. Добрата новина е опит събра възможни за многократна употреба Поправките на тези въпроси (често са наричани като CSS Hacks ).

Помнете, тези хакове / поправки удобен

  / * Увеличение: 1 правило е специално за IE6 + IE7.  * /
    * HTML. Clearfix,
    * Първо дете + HTML clearfix {
           увеличение: 1;
      } 

Усъвършенстване Вашият CSS

  • Навикът на ре-колоездене не ще дойда при вас през деня. Той трябва да се разработва. Така че планират Re-Колоездене. Имайте в предвид, че можете да абстрактни подразбиране стилове, типография определения, планове, HTML стилове на елементите и т.н. Опитайте се да мислите напред.
  • Също така да погледнем назад в миналите си проекти, това ще помогне за идентифициране на стиловете, които сте склонни да се използва често през porjects. РЕЗЮМЕ.
  • Махнете неизползваните стилове. Тази практика ще си CSS рамка от един общ симптом, наречен "Подуване" -
  • Премахване на повтарящи се стилове.
  • Изграждане на набор от стилове, които са достатъчно гъвкави, за да го пренесете цялата проекти.

Вгледай се в рамките на CSS

Най-накрая. Ако сте вдъхновени и възнамерявате да използвате един или повече от рамките на СГО, Ерес е бърз списък на няколко популярни ...

  • 960 грид система : 960 на системата на преносната мрежа е усилие за опростяване на работния процес на разработване на уеб-често използваните размери, базирани на ширината на 960 пиксела. Има три варианта: 12, 16 и 24 колони, които могат да се използват поотделно или в тандем. Мисъл нищо, че не можете да създадете един за собствената си достатъчно лесно, рамката осигурява мрежови шаблони за печат в PDF формат, може да се използва, за да нахвърли designs.Bet страница, тя ще направи професионален впечатление, ако носите няколко листа, когато отидете на клиент за UI изискванията за събиране. Той също така предоставя основни шаблони на мрежа за популярния софтуерен дизайн, като Фойерверки, Flash, InDesign, Illustrator, Photoshop, Visio и др. "Стартер за десет", за да започне работата си дизайн.
  • Blueprint : Blueprint предоставя ясно, класифицирани на CSS файлове за Възстановява, Мрежи, форми, печат, типография, плъгини за копчета, разделите и спрайтове и т.н. Той също така предоставя подкрепа за IE отделен включва.
  • SenCSs : За разлика от горните две, SenCSs (произнася смисъл), не трябва CSS дефиниции за оформление. Тя не включва шрифтове, подложки, маржове, таблици, списъци, горни blockquotes, формуляри и др.
  • BlueTrip : първоначалната си претенция към славата е, че това е комбинация от най-добрите възможности, предоставени от други рамки на други като Blue печат, Trip Оли ... от където получава името си. Нейната функция Комплектът включва 24-колона решетка, типография стилове, ORM стилове, печат, бутони и др.
  • Юи Grids : Донесох ви Developer Network Yahooo, поддържа течност ширина (100%) оформления, както и предварително зададени фиксирана ширина оформления на 750px, 950px и 974px, както и способността лесно да персонализирате за всеки номер. Както можете да видите, технически само за оформление на компоненти. Юи също HTML / CSS комплекти за други елементи на страницата
  • YAML (още един Multicolumn Оформление)
  • Emastic

Не забравяйте, че използването на CSS рамки, не означава, че сте мързеливи, за да създадете един от вашите собствени ... Това означава, че сте умен, да се учат от опита и грешките на другите, освен време и да увеличават производителността!!


2010 Mar 9 2010

За "уеб дизайнери, които не могат да кодират"

С моя ограничен умения комплект с инструменти, като Photoshop и Illustrator, мога честно да призная, че съм по-добър разработчик, отколкото аз съм дизайнер. Но моята квалификация с ядро ​​(сървър) развитие с Java / PHP / COBOL, е едно много положително влияние върху потребителския интерфейс ми развитието на уменията. Какво искам да кажа е, като същевременно се създава проектите си, т.е. всеки път, когато правя дизайн, аз мисля, за това как дизайнът може да бъде най-добре преобразува в HTML, CSS и докато правите HTML, CSS, давам мисъл за гръб технологии и относително сигурни, че HTML може лесно да бъде внедрен в XSL примки или PHP откъси и др.

През годините съм бил хвърлен главата да дизайн от дизайнерите на потребителския интерфейс, който вероятно donot имат представа какво е HTML или CSS. През всичките тези години аз мислех, че аз ще иска твърде много, ако ви очакват на дизайнера, който се опитва да shov му "невъзможно да се код" дизайн в гърлото ми, да се разбере съвсем малко, какво му дизайн ще бъдат превърнати в. Това ще помогне нали?

Тогава се натъкнах на този пост днес ... уеб дизайнери, които не могат да код ... Благодарение на Господ! Аз съм просто един от многото, които се чувстват по същия ... горе artitle е малко дълъг скучен .. но си струва за четене, всяка дума от него.

Благодаря Елиът Джей запаси ... се чувстват освободени!

Ето някои откъси от Elliots статия .

Уау, какъв ден! Тя започна с една малка чуруликане и завърши с дискусия, която изглеждаше да почистват територията на цялата Общност за уеб дизайн. Изглежда, има някои много силни мнения по въпроса дали уеб дизайнери трябва да е в състояние да код.
...
Така че, преди да навлезем в това, позволете ми бързо да набележи това, което казах на тази сутрин на Twitter:

Честно казано, аз съм шокиран, че през 2010 г. Аз съм все още идват през уеб дизайнери ", които не могат да кодират свои собствени проекти. Не е извинение.

... Аз трябва да съм бил малко по-специфичен в моя чуруликам. Аз говорех за дизайнери, които нямат дори най-основната HTML и CSS умения да се превърне плосък дизайн в самия сайт. Не хора, които умишлено не изберат да се код, тези, които не могат. И също ми се отнасят само до предния край код тук, разбира се това е смешно да се мисли, че дизайнерите трябва да бъде невероятно крайните програмисти ...

Ние се "паяжината" дизайн, изпратени в Illustrator, 300dpi, невъзможно да се код, без съгласуваност / функционалност.
~~ Ейми Mahon

Става късно, и аз имам да приключи този нагоре по някакъв начин. Знам, че ще има много хора, които не са съгласни с мен, и моето намерение не е да обиди или разстрои всеки, който не може код, но се надявам, че някои от това, което казах отразява някои от точките, че винаги, когато дълбаят в този дебат.

В края на деня, аз не губят всеки сън, който може да кодира и които не могат. Аз съм просто истински изненадан да намерят толкова много дизайнери, които нямат предния край умения, тъй като мислех, че това е нещо от миналото.

Също така прочетете коментарите, имаше около 320 коментара, както аз пиша ... те са си струва да прочетете.
Моля, прочетете Elliots целия пост тук .. уеб дизайнери, които не могат да кодират


2009 28 юли 2009

CSS2.1 Потребителски агент стил по подразбиране

Вчера, след издаване, се сблъсках с CSS Връща в Google Chrome ... Мислех, че на изкопни работи малко по-дълбоко в областта на Потребителски агент Стил листове ...
Открили тази таблица на стойности по подразбиране на CSS2.1 Потребителски листа брокер стил ... (за тези, които знаят какво е "Потребителски листове агент стил", е да следвате Какво е Потребителски листове агент стил (спецификация) .

За пълния списък на CSS 2.1 Потребителски агент Стил листове по подразбиране, натиснете тук


2009 27 юли 2009

Потребителски листове агент Стил: Мистерия маржове в Google Chrome

Вчера, като всеки друг "Приземен свиня Ден", е работил по някои CSS / tableless оформления. Всичко вървеше добре в IE 7, FF 3 и Chrome, докато изведнъж видях някои от ООН ignorable маржове, наблюдавани само в Google Chrome. Въпреки, че много странно worring, Това е някакъв нов бъг / проблем, че съм идват accross, имаше най-накрая някаква подправка в светски ми работа. Сад (но добре) го определя рамките на няколко минути на сондата ...

По принцип, тя изглеждаше като Google Chrome игнорира ми CSS-Нулира (марж: 0px). То всъщност е била причинена от стилове на потребителския агент (WebKit-подложка-старт: 40px). Така че решението е да възстановите този стил, чрез определяне на подложка: 0 непослушните елементи.
Един добър начин да се предотврати този проблем да се случва на всеки елемент е да използвате глобален почивка на CSS, както следва

* {Граница: 0; подложка: 0;}

Какво е Потребителски листове агент стил (спецификация)?
Следният откъс е взета от http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , последваща връзка, за да прочетете повече на потребителските агент Стил листове

CSS 1 въвежда идеята, като посочва, че всяка User Agent (UA, често "уеб браузър" или "уеб клиент") ще има лист по подразбиране стил, който представя документи в разумен, но може би банално - начин. CSS 2 казва, че отговарят агенти потребителски трябва да се прилага един лист стил по подразбиране (или се държат така, сякаш те направи) и, че лист по подразбиране един потребител агент на стил трябва да представи елементите документ език по начини, които удовлетворяват общи очаквания за представяне на документ език; CSS 3 е вероятно да бъде от един и същи ум.

Тъй като CSS спецификации се остави на реализации, дали да се използват "истински" стил за основния дисплей или не, това не е учудващо, че не можете да откриете лист по подразбиране стил в инсталационната папка на всеки браузър. За разлика от Internet Explorer на Microsoft, както и Opera, например (и доколкото знам), Gecko браузъри като Firefox и Netscape Navigator (погледнете за "html.css"), но също така Konqueror, че е доста проста, за да разберем техния стил по подразбиране.


2009 Mar 12 2009

Добрият дизайн на потребителския интерфейс трябва да бъде съвместим със стандартите. или трябва? Моят Топ 10 потребителския интерфейс правилата за проектиране


Нито аз съм съвсем нова за развитие на User Interface (UI), нито съм ветеран и както винаги съм го, аз се вписват в профила на UI Developer повече от тази на един дизайнер, не съжалява. Е, добре! Какво да пиша? ... За известно време (трябва да е в години, не по-малко) сега, всеки сега и тогава, когато се получи малко по дизайн на потребителски интерфейс (когато на професионален дизайнер е отишъл на почивка), аз винаги мога да спирка мисли дали моя дизайн да бъдат правилно complient или не (не искрено, че мога да achive 100% стандарти за съответствие, ако исках твърде). Тогава аз си казвам, какви глупости! Дизайнът трябва да бъде проста, Ница и предимно изглежда използваем, не трябва да посетители избяга ... или скача (технически). Какво добро ще бъде хубаво tableless оформление CSS посетителя, който не се съобразява с всички смарт хипертекста и стилове лист под кожата на вашата уеб страница ... Zilch!
Тя трябва да изглежда добре и да бъде лесен за използване ... Тогава идва на всички стандарти неща.

Stumbbled accross този блог влизане от Джейсън Фрийд от 37 сигнала (За тези, които не са осъзнаят 37 сигнали са onces, които са създали някои страхотни уеб приложения като Basecamp, лагерен огън и т.н.), които са написали нещо подобно през 2004 г. и повярвайте ми, почти 5 години и не е много променена, тъй като това ... аз бях щастлив да прочетете поста си, тъй като съм напълно съгласен с това, което той има да каже, а също и на факта, я не е сигурен за какво се разказва за само силно чувство и това е мой :)

Джейсън Фрийд: "Има прекалено много се говори за CSS, XHTML и стандарти и достъпност, и не е достатъчно да говорим за хората. CSS и съвместим със стандартите на Кодекса са просто инструменти, което трябва да знаете, за какво да се изгради с тези инструменти. Чудесно, радвам си UI не използва таблицата. И какво от това? Кой му пука, ако тя все още не позволява на хората да постигнат своите цели. Уеб стандартите са големи, но собствени стандарти на хората включват правене на нещата (и все още е твърде трудно да се направи онлайн).

Потребителския интерфейс дизайнерите правят същите стари основни "забравяйки за човешко същество на The Other Side" грешки - само че този път техният код изглежда по-добре. Хората - не код валидатори употреба интерфейси ".

На Поръчка Джейсън Фрийд пълен член

DISCALIMER: Това не означава, че ние не трябва да се притеснявам за стандарти на всички. Стандартите са добре да има и да се придържаме към тях, колкото е възможно. Ние само трябва да разберат, че Добрият дизайн UI не винаги означава 100% стандарти Complience или обратно ....

От моя списък на моите изводи, аз следвам няколко дизайн на потребителския интерфейс и развитие златни правила ... Ерес в топ 10 ... не че имате да ги следват прекалено ... :)

1. Обърнете внимание на вашите потребители. На потребителите може да направите пауза или вашия сайт. DONOT направи потребителя изглеждат като един общо idoit, напълно неспособна да използвате на вашия сайт. Това е лошо!

2. Простота и лекота на използване вашите първични Подобряване. Твърде много неща на екрана, толкова по-голяма вероятността, че потребителят ще се бърка или разсеяни от първоначалното си задача.

3. Е в границите ... DONOT отдадете прекалено много в използваемостта, достъпност и СТАНДАРТИ. Използвайте стандарти, ефективно и да ги разбира, че отборът. Това ще гарантира правилната консистенция в продукта

4. Прототипи на изискването. Тъй като тези дни Използване на интерфейси са богати, прототипиране винаги е по-добре, отколкото просто да прости wireframes и тя е нищожна на достойни взаимодействия, тя не би могла да предостави на клиента ясна картина на крайния продукт, който се развива. Винаги е лесно да конвертирате прототипите в крайните резултати. Също така! с прототипи взаимодействие въпроси могат да бъдат изгладени по-рано в развитието цикъл.

5. Последователността в своя дизайн и взаимодействието е много важно. Donot обърка потребителското си с непредсказуеми взаимодействия и машинария.

6. Разбиране "Декларация дизайн мисия". Бъди винаги се фокусира върху основната дейност на страницата проектирани beign. Също така, направете списък на вашите seconday действия на страницата, и да ги приоритет.

7. Осигуряване на подходяща обратна връзка с потребителите на сайта. С най-много от уебсайтовете, предназначени около AJAX, визуални знаци на потребителя за промени в страницата. Потребителят трябва да се дава потвърждение за завършване на всяка задача, която той изпълнява. Donot направи, за потребителя изчакаме и да се досетите, напр. Осигуряване на показателите за напредък за файла uplaods.

8. Използвайте контроли по подходящ начин. За напр. използването Изберете падащия списък за малки списъци само, donot позволи на потребителите да изберат един от 200 града, използвайки изберете кутии. Разбиране на разликата между един бутон и връзка. Връзка и бутон имат различни цели, donot използва един за друг. Осигуряване на контрол, за да направят взаимодействие страница лесно. Избягвайте използването на менюта, които са повече от две нива в дълбочина. Не изобретяваме колелото. Използвайте стандартни контроли, за да персонализирате тях само ако е много необходимо. Дефиниране на всички потребителски контроли, необходими за вашия сайт от първа ръка, така че те могат да бъдат създадени и тествани самостоятелно, готов за употреба сайт accross.

9. Donot се обхождане твърде много върху дизайна. Не забравяйте! Целия продукт се състои повече, че дизайнът сам. Изграждане на подходящи срокове във вашия проект график за дизайн повторения и се придържайте към него. Итериране помага на нас, за да разберете какво работи и какво не, вземете горещи точки. Като добър интерфейс отнема време, време за повторения в началото на цикъла на развитие, така че дизайнът повторения, doesnot директно равняват да се преработи. Твърде много се преработи може jeopradize срокове.

10. Отпуснете се и се мислят като потребител понякога.


2008 Авг 7 2008

Враждебност: наистина хубава "Рич потребителски интерфейс" без светкавица!

Виждали ли сте animoto.com? Е! това не е реклама, аз наистина го харесва! и се Целуни UI ASS наистина

Се натъкнах на този сайт преди няколко седмици. Видях на първа страница, удар мъчи много. За мен това е просто още един сайт с флаш някои богато съдържание, което позволява на потребителите да качват снимки, да изберете някои писти и да го превърне в приятно слайдшоу на картината. Изтегляне на FLV, и го постави на всеки сайт по ваш избор (YouTube, MetaCafe, Facebook и харесва) ... ПЕРИОД.

Вчера, когато видях на вътрешните страници на потока, който се състоя на потребителя чрез създаване на това слайдшоу .... Отидох OH WOW! Когато разбрах, че не е имало битов FLASH използва. Той наистина е богат потребителски интерфейс. Всички потребителския интерфейс на разработчиците трябва да се стреми да създаде или поне да бъде част от екипа, който е направил този интерфейс .... Абсолютно брилянтен!! И Вдъхновяващи!

Виж ... http://animoto.com/ ... и да се регистрират и да играят с него ... само тогава можете да оцените гений.


2008 Jul 2 2008

Ние използваме Faux абсолютно позициониране: брилянтен Оформление CCS

Когато прочетете тази статия на A List Apart " Faux абсолютно позициониране
от Ерик Сол ", аз бях нищо по-малко от Впечатлен. Също така бях депресиран majorly, защото, честно казано аз се чудех, защо не мога с нещо страхотна, тъй като това.

Обикновено, когато ние създаваме на CSS оформления, ние използваме "позиция" или "плувки", или много лоша комбинация от двете. Ерик Сол и неговият екип да определи до перфектна техника на нов тип оформления CSS техники, които са кръстен като "Faux абсолютно позициониране", след като от изкуствена техника колоните, които симулира присъствието на колоната.

Вие знаете, че проблем на всички нас на CSS разработчиците са с разпада на оформления неочаквани промени в съдържанието, които причиняват цели колони да приключи, когато използваме сключило оформления) ... Е! Изглежда История!!
Това оформление техника е все още много млад и трябва да преместени в кошчето, от всички онези гурута СГО, там, преди тя да стане една ООН писмено стандарт. Щастлив съм да го използвате сега! ... И вече съм в средата на конвертиране на по-ранните ми проблемни / плаваща ООН задължително оформления, в оформлението FAP вече ... Радвам се да кажа "вече се използва Faux абсолютно позициониране за този блог сайт, както и" ... да го пробвам, сега!

Слава Ерик!!


2008 Jun 6 2008 г.

Най-добри практики: Пазете Брой на елементи на Дом малки

Още на ДОМ елементи на страницата, бавно го прави, по-бавно е DOM достъп, в JavaScript. Голям брой елементи на дом може да се дължи лошият дизайн оформление. Например, вложени таблици може да се използва за оформление. Използвайте всички HTML тагове, където се прави смисъл семантично. За напр. използването DONOT таблици за оформления, но DONOT колебание да ги ползвате, където ще трябва да покаже таблични данни, и по този начин ще се намали Дом елементи, в сравнение с подобна структура, създаден с помощта на DIV секциите само ...

За да проверите броя на елементите на DOM в HTML страницата си, просто въведете следното в конзолата на Firebug: document.getElementsByTagName('*').length

Няма точно определен стандарт, колко Дом елементи са твърде много. Проверете други подобни страници, които имат добра markup.Eg. Начало Page Yahoo! е доста натоварен страница и все още под 700 елемента (HTML тагове).


2008 Jun 2 2008 г.

Най-добри практики: Използване на AJAX

Използвайте получите Заявки AJAX

Установено е, че при използване на XMLHttpRequest, длъжност се изпълнява в браузърите като двуетапен процес: изпращане на заглавките, след изпращане на данни. Така че това е най-добре да се използва GET, която отнема само един TCP пакет, за да изпратите (ако не сте много на "бисквитки"). Максималната дължина на URL в IE е 2K, така че ако ви изпратим повече от 2K данни може да не бъде в състояние да използват ВЗЕМИ.
Интересен страничен ефект е, че пост, без всъщност да публикува всякакви данни, се държи като ВЗЕМЕТЕ. Получавате, е предназначена за извличане на информация, така че има смисъл (семантично) да се използва, когато сте само искане на данни, като се противопоставят на изпращането на данни да се съхраняват от страна на сървъра.

Избягвайте Синхронни призовава AJAX

Когато правите на "Аякс" Исканията, можете да изберете async или синхронизиране режим,. Async режим работи искане във фонов режим, докато други дейности на браузъра може да продължи да обработва. Sync режим ще изчака за искане да се върне, преди да продължите.
Искания, направени с режим за синхронизация, трябва да се избягва. Тези искания ще накара браузъра да заключите за потребителя, докато молбата се връща. В случаите, когато сървъра е зает и отговор отнема известно време, браузъра на потребителя (а може би OS) няма да позволи нищо друго да се направи. В случаите, когато в отговор никога не е правилно е получил, браузърът може да продължи да блокира, докато молбата се изтече.
Ако смятате, че вашата ситуация изисква синхронизация режим, това е най-вероятното време, за да преосмислят своя дизайн. Много малко (ако има) ситуации, всъщност изискват AJAX заявки в режим на синхронизация.


2008 22 май 2008 г.

Най-добри практики: работа с изображения

Оптимизирате изображения

Оптимизация просто означава запазване на размера на изображението малък, запазване на качеството на изображението до изискваното ниво. Има много процедури, които някога могат да извършват, за да се оптимизира изображението, преди те да са заредени на сървъра за доставка. Инструментите, които използваме за създаване на тези изображения (Photoshop, Fireworks и т.н.), обикновено имат инструменти, които позволяват на потребителите да оптимизират изображението за уеб употреба.
• Проверете GIF, за да видите дали те са с помощта на палитра размер, съответстващ на броя на цветовете в изображението. Когато изображението се използва 4 цвята и 256-цветова палитра, а след това изображението може да бъде допълнително оптимизирана

• Конвертиране на GIF е където PNG е възможно и да видим, ако е налице спестяване. По-често, отколкото не, има. Не се колебайте да използвате на PNG, тъй като те са напълно подкрепени от повечето често използвани браузъри. Очаквайте на възможностите за анимация, PNG може да направи това, което GIF, включително прозрачност.

• За изображения, използвани в спрайтове на СГО, организира изображения в Sprite, хоризонтално, за разлика от вертикалното обикновено води до по-малък размер на файла. Също така, комбинация от изображения с подобни цветове в Sprite. Това помага да се запази броя на цвета ниско, в идеалния случай при 256 цвята, така че да се побере в една PNG8.

• Ако сте с помощта на favicon.ico, да го малък, за предпочитане под 1K.

Използвайте правилно мащабирани / преоразмеряват изображение.

Винаги се старайте да използвате преоразмеряват изображения, т.е. не се използва по-голям образ, от което имате нужда, просто защото можете да зададете ширината и височината в HTML. Ако имате нужда за да се покаже 100px X 100px изображение на страницата, а след това не се използва мащабирани надолу 200x200px изображение.

Използвайте Прогресивни изображения

Уеб браузър вече прави снимки постепенно. За да направите още по-добре, просто ги запазете GIF или PNG с изображения с "преплетени" опция, или на JPEG изображения с опцията "прогресивен".

Има продължаващ дебат сред потребителите в Интернет, дали използването на прогресивно изображение е благословия или представляват пречка. Също така прогресивно изображение тежи приблизително 20% повече в сравнение с не прогресивното колега. Така че, ако мислите, че ви оформление използва изображения, които няма да попречат на потребителя опит, като го е прогресивно, чувствайте се свободни да го направят.


НДК начало | Изразявайки | Изразявайки Вкус | Изразявайки Penmenship | Изразявайки страхопочитание | Изразяване на себе си