witola.com

Ниже приводится статья, которую я прочитал в блоге о интерфейсные разработчики и практики кодирования и думал, что пройдет его. Это Дуг Neiner, редактор на топливо Ваше кодирование и президент Pixel студии графического дизайна . Он пристрастился к новой технологии, и особенно любит проводить время с WordPress, Ruby на Rails и JQuery.

То, что следует здесь серию из 10 вещей, чтобы помнить и применять на практике по каждому проекту веб-разработки. Я перечислил их здесь в порядке важности, поскольку многие из шагов строить друг на друга. Если вы ничего от чтения, пожалуйста, правила # 1 и # 2 в сердце и практиковать их. Я думаю, что решение этих двух проблем приведет к улучшению дизайна и более эффективной реализации на веб-сайтах в сети Интернет.

1. Достаточно зарядить, а затем некоторые

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

2. Обучение Designer

Для тех, кто дизайнер / разработчик все-в-одном компьютере, на этот раз должно быть легко. Тем не менее, кодеров, работающих с детьми или для дизайнера имеют уникальную ответственность. Как и многие дизайнеры приходят из печати фона, это до вас, разработчик, чтобы просветить их по возможности доступными для своих проектов. Нет ... Я не говорю, пусть они знают, о 150 + JQuery плагин вы используете, или ваши мысли по использованию UL / LI комбо против ряда тегов. Я сказал, воспитывать их в возможности. Помогите им понять, как их дизайн может отображаться на разных устройствах. Помогите им понять, как использовать повторяющиеся фоны и плиточные моделей для достижения больших конструкций с минимальным размером файла.

Не оставляйте творчества исключительно как дизайнер! Это ваш шанс доказать, что вы творческий, а также на поиске идеального технологических решений для удовлетворения потребностей дизайнера. Мужчина их "просто не будет сделано таким образом" для каждого запроса верный способ вызвать разочарование с обеих сторон. Положите свой ум работать поиск путей вокруг препятствий.

Примечание: Правила 3 по 10 построить от этих первых двух правил. Некоторые из этих правил требует дополнительной графикой от дизайнера, и все правила, потребуется время, чтобы следовать. Возьмите на себя обязательство правила 1 и 2, а остальные правила и смысл и сделать готовый продукт, который намного лучше.

3. Подумайте, в слоях, а не на ломтики

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

Это была старая сеть. Новый веб использует концепцию слоев, укладки, и г-индекс для достижения конструкции с глубиной. Как программист, не забудьте получить слоистой PSD файлов или слоистых файлы AI от дизайнера по сравнению с плоским дизайном. Это позволит вам иметь больше гибкости в том, как вы собрали веб-сайта. Помните, что при работе в слоях, рассмотрим HTML-элементов, которые имеют важное значение для структуры, прежде чем прибегать к добавлению дополнительных дивы и пролетов. Вы можете использовать повторяющиеся вертикальный узор на 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.

Концепция проста, если там будет только один элемент на данной странице, использовать идентификатор. Если будет несколько экземпляров на данной странице, использовать имена классов. В любое время элементом является единственным в своем роде, использовать идентификатор. Его так просто! Такие вещи, как ul.navigation на главной навигационной панели или div.site-logo не имеет смысла. Каждый из этих элементов различны и должны иметь и идентификатор.

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

Для тех, кто часто код, вы понимаете, это смешно, например, но он показывает ошибочность чрезмерного использования классов. Используйте только то, что вам нужно правильно стиля и повышение (через Javascript) HTML, не более того.

6. Сделайте ваши страницы Отзывчивый

Очень важно, что страница отвечает правильно, так как конечный пользователь, просматривая его. Использование конвенций, как эффект опрокидывания изображений, а также: при наведении,: активный и: акцент государства не может быть подчеркнуто достаточно. Вы же не хотите, чтобы напасть на пользователей с большим количеством взаимодействий и стили, но большинство людей реагируют на визуальную обратную связь. Вот простой для вас: ссылки должны изменять состояние при наведении указателя мыши над ними ... период! Мало того, что браузер отображает ручку указывает на связь. Я не могу сказать вам, как это разочарование для поиска по странице с черным текстом ищет темно-серый связей и надеемся и молимся о том, что стороны выглядит дать мне знать, я нашел!

Использование конвенций, таких как "Вы здесь" индикаторов или описательный инструмент, советы все подпадают под эту категорию. Более тесное взаимодействие и обратную связь, которая появляется для пользователей, когда они навигации по сайту, тем лучше.

7. Всегда используйте CSS Sprites для опрокидывания

Если вы не знаете, что CSS спрайты, прочтите эту статью на Smashing Magazine, или это по одному A List Apart подробнее. Для тех, кто знает, какие они есть, почему бы вам не использовать их!? Если вы скажете мне его из-за нехватки времени, я хочу передать вам Правило № 1 в этом списке. Прошлый раз аргумент, я не могу вспомнить ни одного пользу более важным, чем использование CSS Sprites для изображения опрокидывания. Проверьте Стартер для JQuery сайта. Почти все элементы пользовательского интерфейса построены с использованием одного файла PNG (на фото ниже). Интерфейс загружает все сразу, и все при наведении / активное состояние сразу же доступны. Нет задержки: при наведении изображения для загрузки, один запрос к серверу, а не 10 +. Этот фантастический инструмент в Front End кодирования Toolkbox, что разработчики должны использовать чаще.

8. Понимать разницу между вспышки и Javascript

Я думаю, Javascript можно делать удивительные вещи. Я тоже люблю раздвигает границы того, что она может сделать. Я люблю делать виджеты и плагины так же, как другой парень ... но Javascript не может решить все проблемы в динамических веб-разработки. Вместо того чтобы тратить 10 часов эмуляции флэш-функция, которая займет 1 час, чтобы в Flash, сделать правильный выбор и выбрать Flash. С другой стороны, если вам просто нужно изображение ротатор ... не смей открывать Flash!

9. Проверьте ваш сайт во многих браузерах (включая IE6)

Это берет время, нет сомнений. Я разрабатываю на Mac, и есть компьютер (и несколько виртуальных сред PC), которые позволяют мне тест большинство нормальных людей браузеры используют сегодня. Если у вас есть Google Analytics сообщает, что сказать никто не использует IE или Firefox использует каждый, не делают предположение о том, как люди будут просматривать Ваш сайт. Я не говорю, чтобы сайты выглядят одинаково, но заставить их работать, функции и выглядеть красиво (и, конечно, похожи!) В большинстве браузеров.

Обратите внимание: я говорю именно потому, что IE6 мой крупнейшим клиентом является корпорацией, которая до сих пор использует IE6. Я разработал стиль кодирования, которая позволяет мне быстро создавать для современных браузеров, а также осуществлять лишь несколько стилей и JavaScript исправления, так что сайт выглядит хорошо в IE6. Я уверен, что потерять часть края, делая это так, но это спасает меня от многих смущающие моменты.

10. Всегда держите обслуживания In Mind

Как вы "резать" дизайн Photoshop, или подготовка вашего CSS и Javascript, имейте в виду обслуживания. Некоторые сумасшедшие охлаждение CSS хак вы используете сегодня, может дать о себе знать позже. Сброс CSS правил где угодно в файле CSS может показаться быстрый на данный момент (Guilty!), но и сделает изменение и обновление их позже в кошмар.

Важным шагом помнить, происходит после того, как файл нацелен дизайнера для экспорта из Photoshop или Illustrator: Не забудьте сохранить версию файла перед экспортом. Таким образом, если вам нужно вывезти его позже, добавьте еще одну кнопку, измените строку текста и т.д., вы сможете экспортировать ее снова быстро. Photoshop обычно сохраняет изображения формата выборов, параметры сжатия, и матовые цвета, чтобы сделать вашу работу еще проще.

Заключение

Есть целый ряд других вещей, которые важны для фронта Coders End иметь в виду, но я думаю, что это одни из самых важных. Многие могут возразить, что это не правила, но я призываю вас, чтобы думать о них как таковых. Возможно, Вы, менее вероятно, чтобы разорвать их в целях экономии времени и денег на следующий проект.