Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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

1. Что такое PNG?
2. PNG vs GIF.
3. PNG vs JPEG.
4. Жизнь после Photoshop'а или сжимаем дальше.
5. Adobe Fireworks или PNG-8 с альфа-каналом.
6. Вердикт.

Осторожно, много картинок! Все кликабельны.

Переезд с одного средства планирования разработки на другое — с XPlanner на Redmine

«Мыши плакали, кололись, но продолжали есть кактус», — моё мнение о пользователях XPlanner.

Преамбула

Так повелось, что изначально наша команда использовала XP и вообще Agile разработку. Изначально был выбран XPlanner — он же как раз заточен под итеративную разработку ПО.
Со временем процессы разработки менялись, и это все меньше походили на те, которыми были изначально.

И вот лишь недавно мне удалось перетащить всех на Redmine.

В первую очередь оговорюсь, что «мотороллер не мой...»: этот проект создан и поддерживается не мною. Довелось поучавствовать только как разработчику, и то немного. Но то немногое, что я успел узнать о проекте и в нем «пощупать», позволяет утверждать, что он способен сделать мир лучше.

Уверен, что найдутся на Хабре люди, которые уже знают о этом замечательном способе заставить «ненавистный» ИЕ понимать такие вещи, как min-width и ::after. Но лично я об этом способе не знал, и испытал настоящий восторг, когда наткнулся в сети на очень элегантное и эффективное на мой взгляд решение данной проблемы.

Вы наверняка не раз видели javascript-реализации контекстных меню на базе популярных библиотек, таких как jQuery и prototype. А значит обязательно сталкивались с основными их недостатками: неудобностью API, большим количеством кода, требовательностью к ресурсам, любовью к генерации огромного количества html кода. В один прекрасный момент эти проблемы пересилили мою лень и я решил бороться с ними, поставив следующие задачи:

• Минимум html кода, генерируемого для меню (зачем нам засорять ДОМ)
• Лаконичность js кода для создания меню (API вызова без копипасты)
• Оптимум гибкости при работе (многоуровневые, динамически модифицируемые меню)
• Как можно меньше кода в реализации библиотеки (6302 байта в несжатом виде)
• Минимальное количество jQuery-вызовов (чтобы можно было легко от них отказаться тем, кто jQuery не использует)
• Inline-события где это возможно вместо биндов (меньше ресурсов сожрет)

UPD: разместил проект в google code, пользуйтесь, развивайте:
svn checkout js-cmenu.googlecode.com/svn/trunk js-cmenu-read-only

При проектировании интерфейсов пользователя когда-нибудь обязательно встанет задача использования таймеров, и в этой статье я хочу рассказать о замечательном плагине jQuery Timers, который значительно облегчит работу по созданию и применению таймеров в Ваших приложениях.
jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
Как обычно, сначала посмотрим пример, а потом разберем исходный код.

Пример и исходный код скачать можно здесь

Как часть нашего проекта, мы свели вместе информацию об общих подходах к разработке архитектуры приложений.

С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.

Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».

Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)

Как-то на хабре разгорелся спор, как заставить пользователя вводить дату в правильном формате, было множество интересных решений, но заставлять пользователя совершенно не надо — пусть за пользователя основную работу делают машины :-).

На помощь приходит замечательный скрипт «Masked Input Plugin», который позволяет назначить для каждой формы маску, по которой данные будут заполнятся.

Возможно Вы не совсем поняли, но лучше один раз увидеть, чем сто раз услышать.

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

Здесь представлены

Всем привет. Столкнулся с вопросом конвертации базы из CP1251 в UTF8.
Полазив по просторам Интернета не нашел готового скрита (видимо плохо искал).
Вот решил написать свой скриптп. Конвертация происходит безо всяких дампов базы. Решены проблемы с символами е = ё и т.д.

продолжение под катом

В последнее время столкнулся с тем, что Prototype не такая уж клевая библиотека. Даже в компрессии напару с scriptaculous занимают много места да и синтаксис странный. Для меня загадка, почему в Rails включили именно его. jQuery по синтаксису намного больше похож на Ruby и более легковесная библиотека. Собственно немного порыскал и нашел неплохие шпаргалки на jQuery, чтоб освоение протекало несколько легче.

1. jQuery Color Cheatsheet (PNG)
   
   
   

Пару лет назад была задача написать для одного из сайтов такой поиск, который бы распознавал опечатки и предлагал бы исправленные запросы. Было перепробовано несколько вариантов, об одном из которых я и хотел тут написать. Поиск на основе звучания слов может стирать языковые границы, поскольку имена собственные на разных языках созвучны. Например, ищешь «Арнольд Шварцнеггер» на русском — находишь «Arnold Schwarzenegger» на английском, или ищешь «Michael Jordan» — находишь «Майкл Джордан», или ищешь «Чак Норрис» — и вдруг он сам тебя находит. Помимо поиска созвучных слов этот метод нивелирует большое количество опечаток. А то че-то задолбала попса, надо больше про инсайд…

© shamansir.wordpress.com

Представляю вам набор функций, которые у меня лежат в отдельном файле utils.js — это функции, которые я использую чаще всего. Они стараются быть кроссбраузерными и проверены на IE6/7, FF2 и Safari 2 и на боевой, сложной системе, в XHTML документах. Должны, по идее, работать, и на других, но не очень старых версиях браузеров — проверку браузера я использовал только в исключительных случаях. Некоторая часть из них, конечно же, просто нарыта на просторах интернета (где — обычно указано) и заимствована ввиду открытости, а большая часть — сконструирована из многих ресурсов и своих идей (и советов коллег), дабы работать на ура — поскольку часто в разных скриптах не учитываются разные тонкости, которые, тем не менее — при ближайшем рассмотрении — оказываются общностями :), ну и быть довольно читабельными.

От переводчика:

На этот перевод меня толкнула очередная ситуация «мозгового ступора» при написании банального кода на C++/C#: я часами смотрел на уродливый код, но не мог сделать его по-настоящему лучше; мне пришлось просто принять то, что уродливым его видел только я один, и это была моя проблема, а не проблема в коде или языке. Я вспомнил те времена, когда такого со мной не было — а заодно вспомнил и эту старую статью, автор которой пострадал так же, как и я, при этом хорошо написав об этом.

Я обнаружил, что изучение Python и Haskell не улучшило меня как программиста на других языках (что противоречит тому, что иногда пишут об этом). В частности, Haskell — являясь настолько непохожим на императивные языки — по идее, должен был дать мне просветление в программировании, которое помогало бы мне даже без использования какого-либо языка вообще. Мой текущий опыт не совсем соответствует этому, и вот, почему:

— Кросс-пост из моего блога
Веб 2.0 начал плотно входить в умы людей, которые хотят сделать себе сайт. Как частный случай — некоторые люди просто помешаны на технологии Ajax. Требуют использовать её банально везде. Естественно можно попробовать переубедить заказчика, но если это невозможно или не к месту, то можно воспользоваться уловкой, которую я назвал «Псевдо-Ajax».

При проектировании взаимодействия внимание проектировщика должно быть обращено не только на дизайн экранных форм, их взаимосвязь и соответствие спроектированного пользовательским целям и задачам, но и на взаимодействие пользователей внутри проектируемой системы. Особенно актуально такая задача стоит при проектировании взаимодействия внутри социальных сервисов.

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

Нужен совет по реализации.

Дано: Drupal, Bueditor, материал (который добавляют зарегистрированные пользователи).

Каждый пользователь, что бы его материал лучше смотрелся хочет добавить в пост картинку, но возможности загрузки на сайт изображений нет, есть вариант только размещения иллюстраций, которые находятся в сети. Соответственно пользователь просто кидает урл, который прописывается автоматом тегу IMG. Всё бы ничего, но пользователь может найти файл разрешением 2500х2500px и легко его вставить, тем самым, в прямом смысле слова разорвать сайт на части.