Навеяно этим.

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 1500 и 980 пикселей соответственно.

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

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

Пользуйтесь, короче, на здоровье!

В последнее время на drupal.ru и habrahabr.ru частенько проскакивают темы вроде: «Делаю социальную сеть – бюджет пара сотен! Помогите сделать хабрастартап!» Отечественные аналитики связывают эту тенденцию с тем, что кризис на ипотечном рынке США тянет вниз за собой рынок в целом, что заставляет игроков на бирже вкладывать в высоколиквидные и надежные активы. Традиционно прибежищем инвесторов в смутные времена является золото, медь да стартапы на просторах бывшего СССР.

Как быть, если денег и других ресурсов пока нет, а вот почувстовать себя Денискиным или Андреевым хочется уже сегодня? Попробуем исполнить соцзаказ и попытаемся по-быстрому сделать сайт напоминающий хабр.

Сейчас уже много где написано и упомянуто про технику CSS sprites (aka CSS Image Maps). Я не буду открывать Америку и рассказывать о ней дотошно еще раз, а просто хочу привести несколько примеров и полезных ссылок. И пару советов из собственной практики.

Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью свойств background-position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (я полагаю, что 99,9%) оно является просто must-have для любого уважающего себя интернет-ресурса (ибо позволяет сократить число запросов к серверу, отделить поведение от представления, возложить труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами, и много-много прочих «вкусностей»). Но обо всем по порядку. Поехали.

читать дальше на webo.in →

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

О чем же я всё таки буду писать? О нескольких сервисах-миксерах — подборщиках адекватных для посетителя цветов, что является несомненно полезным инструментом в работе юзабилиста. Цвета, несомненно, очень важный инструмент в достижении большего удобства на сайте, что ярко доказывает на себе пример Яндекса. Например — то же цветовое разграничение блоков, которые я мимоходом описал в заметке о идеальных формах, и собираюсь в ближайшее время занятся продолжением сего вопроса.

На самом деле, не только логотипов, но и других рисунков/фото и прочих растровых изображений. Возможно у многих возникала такая потребность, увеличить логотип изображения, либо вручную было необходимо обрисовывать в фотошопе векторными линиями, что бы добиться более лучшего результата, чем исходное (как правило маленькое) изображение.

В любом случае, для всех, кому было необходимо векторизовать изображение (отсканированное, сфотографированное).

VectorMagic — онлайн векторайзер. По качеству результата, превосходящий оффлайновые standalone приложения такие как Adobe Streamline и Corel.

Этот сайт был разработан двумя энтузиастами из Лаборатории Искусственного Интеллекта Стэндфордского Университета (James Diebel & Jacob Norda).

Они разработали воистину хороший стартап(?), который имеет отличное качество векторизации. В общем, судите сами.

UPD: так как такая тема оказывается уже была, я хотел бы узнать, существую ли программы, по качеству лучше чем Adobe Streamline и Corel, для оффлайновой векторизации изображений? А то я таких не находил.

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

Все иконки проименованы в соответствии с международным стандартом ISO:3166-1, хранятся в двух форматах: png и gif, и могут использоваться в любых целях.
Спасибо Марку Джеймсу (Mark James, famfamfam.com).

Эта мини-статья посвящена очень простой вещи, которая будет интересна, прежде всего, начинающим пользователям библиотеки <a href=«jquery.com>jQuery. Я покажу, как прикреплять к каждой ссылке небольшое изображение, чтобы выделить ее.

Часто, на этапе тестирования сайта в разных браузерах, приходилось сталкиваться с неприятным эффектом «мигания» фоновых изображений в IE6, которое проявляется при наведении курсора на ссылку, являющуюся блочным элементом. Мигание происходит из-за того, что браузер производит перезагрузку всех фоновых картинок с сервера.

Для устранения мигания нужно подключить к веб-странице небольшой код на JavaScript:

var m = document.uniqueID
&& document.compatMode
&& !window.XMLHttpRequest
&& document.execCommand;

try{
     if(!!m)
      {
         m("BackgroundImageCache", false, true)
      }
   }
   catch(oh){};


Перевод данного документа на русский язык включает в себя:

* Список основных файлов шаблона
* PHP теги шапки шаблона (header)
* PHP теги, используемые в шаблоне для формирования блога
* Дополнительную информацию.

Подробнее + скачать документ

Смена работы – это всегда стресс. Новое место, новые люди (каждый со своими, пока неизвестными особенностями), новые правила и новые обязанности. По моему опыту, среднее время адаптации в новом коллективе – 2-3 месяца. Плюс к тому, смена работы это риск. Риск не пройти испытательный срок, не прижиться в новой команде, не справиться с возложенной ответственностью.

Но, несмотря на все это, люди уходят с насиженных мест. Проработав 2/3/5 и более лет в компаниях, начинают изучать джоблист, и, в конце концов, уходят.

Чем это вызвано?

Вы сделали (ре-)дизайн сайта и хотите похвастаться своим достижением? Не надо спамить социалки — редкий юзер оценит Ваши труды. Для этих целей есть множество подходящих сайтов, и о них далее...

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

Примечание: ниже расположен перевод статьи «jQuery for JavaScript programmers», в которой автор высказывает свое мнение об этой библиотеке, ориентируясь, в первую очередь, на продвинутых программистов, и приводит несколько десятков примеров ее использования.

Когда jQuery увидела свет в январе 2006, я подумал: «очередная красивая игрушка». Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей (подробнее о ней в моей заметке getElementsBySelector), но использование цепочек преобразований выглядело немного замысловато, и сама библиотека, по-видимому, не покрывала всех возможных случаев. Я расценивал тогда jQuery только как временное и проходящее решение.

Только несколько месяцев спустя понял я, насколько же ошибался по отношению к ней. jQuery является просто произведением инженерного искусства. Она умело покрывает достаточно широкой диапазон повседневных функций и предоставляет при этом удобный API для расширений, с помощью которых можно добавить любую другую функциональность. Абстрактность в ней заложена на уровне ядра — речь идет о выборе DOM-элементов — и она извлекает из него максимум пользы. И что важнее всего, использование этой библиотеки подразумевает следование хорошему стилю в программировании и хорошо сочетается с другими частями JavaScript-кода.

Большинство современных обзоров jQuery делают упор на дизайнеров и неопытных разработчиков. Я попытаюсь объяснить, почему она также нужна и опытным программистам.

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

Я сумел найти для себя оптимальный вариант.

Летом этого года мы участвовали в конференции, проводимой Министерством Связи Республики Татарстан. Один из наших докладов был записан на видео, теперь он стал доступен в сети.

В этом тексте о дизайне нет содержательных иллюстраций. Текст не нацелен на то, чтобы научить дизайну. Это попытка культурологического рассмотрения той эволюции, которую совершает дизайн пользовательских интерфейсов в России. Испытывая влияние моды, технологий и бизнеса, он сохраняет свои уникальные черты, знание которых поможет понимать причины происходящего.
Знание — это не просто констатация факта. Это инструмент изменений. Исследование закономерностей позволяет влиять на них, определяя будущее.

IE7 — библиотека JavaScript, заставляющая эксплорер работать по стандартам. Устраняет множество проблем с css, делает правильной обработку полупрозрачных PNG под IE5 и IE6.

По моему, скрипт интернет-магазина является своего рода, лакмусовой бумажкой для веб-студий. У любой приличной компании или хорошего программиста, занимающихся созданием сайтов, в портфолио обязательно есть какой-никакой интернет-магазин и по нему можно точно определить профессионализм разработчика. Однако из-за того, что магазины охватывают широкий спектр технологий и функционала, создавать магазин каждый раз «с нуля» не имеет смысла. Гораздо проще взять готовый скрипт и исправить его под свои нужды. Возникает логичный вопрос — а какой скрипт брать? В этом я и попытаюсь разобраться.

Введение.
Вот уже 5 лет я занимаюсь веб — разработками. За это время приходилось и на коленке делать сайты за несколько сотен долларов и участвовать в довольно крупных проектах. За последний год меня не оставляет ощущение deja vu. Где-то я уже видел: нервных заказчиков, взбешенных менеджеров, заваленных работой разработчиков и сорванные сроки. При этом для меня ничего не изменилось. Были все те же нечеткие, постоянно изменяющиеся требования, прессинг, и ни одного проекта, сданного в срок…
И это, не смотря на то, что “грабли” были всегда одни и те же.

Гениальный в своей простоте способ заставить ссылку открыться в новом табе/окне, не используя нежелательный по рекомендации W3C в XHTML, атрибут target:

<a onclick=«return !window.open(this.href)» hrеf=«www.google.com»>

Преимущества этого способа перед обычным open.window(url) в том, что если javascript отключен, то ссылка все равно сработает. Кроме того, ссылка будет проиндексирована поисковиками.

Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.

<update>

Поведение браузеров при нажатии Ctrl+Click / Shift+Click:

В IE6 — в обоих случаях новое окно.
В IE7 — в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 — неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera — в обоих случаях новый таб
Safari/Win — в обоих случаях новое окно

При нажатии колесиком мышки ссылка срабатывает как обычно везде, кроме IE6, естественно.
</update>

В общем и целом, не стоит принуждать посетителей к чему-либо, предпочтительнее дать посетителю знать какого рода сама ссылка (файл [включая тип], внешняя/окно) с помощью иконок, которые можно легко прикрутить с помощью CSS, на пример вот так, тем самым давая ему возможность выбрать самому, где ее открыть.