witola.com

По-долу е статия, прочетох в блог, по отношение на предния край на разработчиците и практики за кодиране и си помислих, че аз ще го предаде на. Той е от Дъг Neiner, редактор в гориво за кодиране и е президент на Pixel График Дизайн Студио . Той е пристрастен към новите технологии, и по-специално обича да прекарва време с WordPress, Ruby по релси и JQuery.

Това, което следва тук, е поредица от 10 неща, за да се помни и на практика за всеки проект за развитие на интернет. Аз съм ги изброени тук по реда на значение, тъй като много от стъпките, се гради върху един на друг. Ако сте приели нищо друго, далеч от четенето, моля вземе правило # 1 и # 2 на сърце и ги практикуват. Мисля, че решаването на тези два проблема ще доведе до по-добър дизайн и по-добро изпълнение в уеб сайтове през Интернет.

1. Заредете Достатъчно, и след това някои

Особено в трудни икономически времена, бизнеса и гражданите се опитват да намалят разходите и да запази проекти до минимум. Поради това знание, ние, като уеб разработчиците се опитват да се движат през всяка фаза възможно най-бързо. Фронт развитие крайна сметка обаче, да вземе значително количество време, ако се прави правилно. Не е адекватно таксуване за това време ни води, тъй като разработчиците да прескачам нещата, които знаем са важни само за да поддържат проекта в рамките на бюджета. Правилото е просто ... обикновено не ще отнеме време да го направя така, ако не разполагат с време да се вземат. Единственият начин да се получи повече "време" като разработчик, е да гарантира време ние не харчат, е правилно компенсирана. В този момент сам сърцата и умовете ни може да бъде изцяло включен в нашите проекти ... и само тогава можем да отделите време, за да следват останалите 9 правила.

2. Образоват дизайнера

За тези, които са дизайнер / разработчик всичко-в-една машина, това трябва да бъде лесно. Въпреки това, програмисти, които работят с или за дизайнер има уникален отговорност. Тъй като много дизайнери идват от принт-фон, тя е до вас, разработчик, за да ги образоват относно възможностите на разположение на техните проекти. Не ... Не съм казал нека ги знаят за 150 + на jQuery плъгини, които използвате, или вашите мисли за използване на UL / LI комбо срещу серия от А тагове. Казах ги образоват на възможностите. Помогнете им да разберат как техният проект може да покаже на различни устройства. Помогнете им да разберат как да лоста повтарящи произход и плочки модели за постигане на големи проекти с минимален размер на файла.

Не оставяйте творчество единствено на автора! Това е вашият шанс да докажеш, че са творчески, както и от намиране на добра технологични решения, за да отговори на нуждите на дизайнера. Казваме им, тя просто не се прави по този начин "за всяка заявка, е сигурен начин да доведе до неудовлетвореност и от двете страни. Сложи си ум, за да работят намерят начини около препятствия.

Забележка: членове 3 до 10 изграждане тези първите две правила. Някои от следните правила изискват допълнителни графики от проектанта, и всички правила отнеме време, за да следват. Направете ангажимент на правилата 1 и 2, както и останалите правила ще имат смисъл и да направите вашия крайния продукт, че много по-добре.

3. Помислете в слоеве не в Slices

Дори и днес, ние все още използваме израза "намаляване на дизайн", за да опише процеса на движение на дизайн от Illustrator или Photoshop в крайния HTML / CSS оформление. Докато това все още е до голяма степен е точна, името му не отразява Предишната концепция на нарязване на дизайн на парчета и повторното му сглобяване (обикновено в таблица), обратно на HTML страницата.

Това е старата мрежа. Нов уеб използва концепцията на наслояване, да ги съберете накуп, и Z-индекса, за да се постигне проекти с дълбочина. Като програмист, бъдете сигурни, за да получите пластове PSD файлове или многолистов файлове с изкуствен интелект от проектанта, в сравнение с плосък дизайн. Това ще ви позволи да имат много по-голяма гъвкавост в начина, по който заедно уеб сайт. Не забравяйте, че когато се работи на слоеве, разгледа HTML елементи, които са от съществено значение за структурата преди да се прибягва до добавянето на допълнителни DIV секциите и обхваща. Можете да използвате повтарящ се вертикален модел на html елемент и повтарящ се хоризонтална фон на елемент на body , без което страховитите div#wrapper в решаване на фона неволи.

4. Използват най-добрите Формат на снимката

Каква е "най-доброто изображение формат" Вие питате? Това е този, който е най-подходящ за конкретната задача. PNG, GIF и JPEG файлове имат различни предимства. Когато няма прозрачност в едно изображение, тестване, които големина на файла / качество на изображението е най-добре между PNG, GIF и JPEG. За големи изображения, JPEG почти винаги ще спечелят за качество срещу размер. За малки изображения, без прозрачност, която има по-добър размер на файла, PNG или GIF. Ако решите на GIF, не забравяйте да си играе с треперя опции и загуба опции (Знаете ли дори знаят Photoshop е "загуба" опция за GIF?). Често можете да стисне още по-малки файлове от Photoshop чрез коригиране на настройките изходните още повече.

За изображения, които трябва да има прозрачност, да вземете по-информирани решения за това как те ще бъдат използвани. Ако те ще се пластове над сложна фон, можете да се наложи да се обмисли възможността за използване PNG файл. Ако фонът е в съответствие достатъчно, че цветът матирана на GIF не ще се открояват зле, вижте, ако GIF файл е по-малък. GIF има предимството, че не се нуждаят от допълнително програмиране, за да работи в IE6.

За JPEG употреба: Ако използвате JPEG като част от вашия потребителски интерфейс (и не само за да покаже снимки и т.н.) да бъдат сигурни, да оставим на ICC профили, при записване за уеб. Някои браузъри ще почете профила и произвежда цветен разликата между GIF и PNG / и JPEG файлове от един и същи цвят. Това е прост проблем, за да се избегне само с изключване на ICC профили.

Какво, ако губя-губиш ситуация? Имало е моменти, когато имам нужда от пълна прозрачност на PNG с сложността на изображението, по-подходящи за JPEG. В тези случаи често стека (спомнете си, мисля, че на слоеве) две снимки: в PNG за прозрачност, и GIF за комплекса аспект на образа. Това е творческото решаване на проблеми като този, който ще гарантира вашия страниците се зареждат бързо, и че дизайнът запазва своята цялост.

5. Знайте кога да Използвайте Класове срещу документи за самоличност

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

Концепцията е проста, ако ще има само един елемент на дадена страница, използвайте ID. Ако ще има множество случаи на дадена страница, използвайте имена на функции. Всеки път, когато даден елемент е един-на-а-вид, използвайте ID. Нейната толкова просто! Неща като ul.navigation за основната лента за навигация или div.site-logo няма смисъл. Всеки един от тези елементи са различни и трябва да има и номер.

Вместо да добавите друго правило в нашия списък, нека ме бучка нещо друго тук: не използвайте твърде много класове! Вземете за пример следния код за краен пример (Забележете, че класове се появяват шест пъти):

За тези, които код често, осъзнаваме, че това е един смешен пример, но той показва погрешността на над използване на класове. Използвайте само това, което трябва да правилно стил и подобри (чрез Javascript) HTML, нищо повече.

6. Страници отзивчиви

Нейната важно, че страницата реагира правилно, като крайният потребител се придвижи през него. Използване на конвенцията като изображения преобръщане ефекти, както и: hover: активна и фокус-членки не могат да се подчертае достатъчно. Вие не искате да атакуват потребителя с прекалено много взаимодействия или стилове, но повечето хора реагират добре на визуална обратна връзка. Ето един лесен за вас: връзки трябва да се промени държавата, когато мишката витае над тях ... период! Не е достатъчно, че браузърът показва малка страна, което означава връзка. Не мога да ви кажа колко е неприятно да се търси чрез страницата с черен текст за тъмните сиви линкове и надявайки се и се молим, че ръката се появява ме уведомите открих един!

Използване на конвенции, като например "Вие сте тук", показатели или описателни инструмент, връхчета на всички попадат в тази категория. Колкото по-голямо взаимодействие и обратна връзка, която се появява на потребителя, докато се придвижвате през даден сайт, толкова по-добре.

7. Винаги използвайте CSS спрайтове за Rollovers

Ако не знаете какви са СГО спрайтове, вижте тази статия в Smashing Magazine или този в A List Apart за подробности. За тези, които Не знам какви са те, защо не ги използвате!? Ако ми кажете, поради липса на време, искам да ви препоръчам да Правило # 1 в този списък. Миналото време аргумент, не може наистина да мисля за някаква полза, по-важно, отколкото на Sprites за използване на CSS изображения rollovers. Проверете стартера JQuery сайт. Почти всички парчета на потребителския интерфейс са изградени с помощта на един единствен файл PNG (на снимката по-долу). За интерфейса зарежда и всички наведнъж, и всички Hover / активни страни са на разположение веднага. Не закъснение за: Hover образ да се зареди, едно искане до сървъра, а не 10 +. Това е фантастично средство в предния край, да кодиране Toolkbox, че разработчиците трябва да използват по-често.

8. Разбиране на разликата между Flash и JavaScript

Мисля, че JavaScript може да направи невероятни неща. Аз също обичам натискане на границите на това какво може да направи. Обичам джаджи и плъгини, точно толкова, колкото на следващия човек ... но Javascript не може да реши всички проблеми в развитието на динамични уеб. Вместо да прекарва 10 часа, подражавайки функциите на Flash, които ще се взима по 1 час, за да се направи в Flash, да направи правилния избор и изберете Flash. От друга страна, ако просто се нуждаят от изображението ротатор ... не си посмяла да отвори Flash!

9. Тествате сайта си в много браузъри (включително IE6)

Това отнема време, няма съмнение за това. Се развиват на Mac и PC (и множество Virtual PC среда), които да ме изпита, е най-нормалните хора браузъри използват днес. Освен ако нямате Google Анализ доклади, които казват, че никой не използва IE или всеки използва Firefox, не правят предположения за това как хората ще разглеждат вашия сайт. Аз не казвам, сайтовете изглеждат еднакви, но да ги работят, функция, както и да изглеждат добре (и със сигурност подобно!) В повечето браузъри.

Забележка: Споменавам IE6 конкретно, защото моят най-голям клиент е корпорация, която все още използва IE6. Аз развих кодиране стил, който позволява бързо да се изгради за съвременни браузъри, и изпълнява само няколко стилов лист и поправки на JavaScript, така че сайтът изглежда добре в IE6. Аз съм сигурен, че загуби част от края, правейки го по този начин, но тя ме спасява от най-смущаващите моменти.

10. Винаги дръжте Поддръжка в Mind

Тъй като "рязане" дизайн, Photoshop, или подготовката си CSS и Javascript, поддръжка в ума. Някои луди-Cool CSS хак, който използваме и днес може да се върне по-късно да ви преследва. Дъмпинг на CSS правила, където и да се моля в CSS файл може да изглежда бързо, по момента (Guilty!), но ще направи промяна и актуализиране по-късно им кошмар.

Важна стъпка, за да запомните се случва, след като сте е prepped файла дизайнер за износ от Photoshop или Illustrator: Не забравяйте да запазите версия на файла, точно преди износа. По този начин, ако трябва да го реекспортират по-късно, се добавят още бутона, променете линия на текста, и т.н., ще можете да го изнесе отново бързо. Photoshop обикновено спестява избор Формат на изображението, компресия настройки и матови цветове, за да направи работата си по още по-лесно.

Заключение

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