sordes notes

Обратил внимание,..

noreply@blogger.com (sordes) — Thu, 05 Mar 2009 10:41:00 PST

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

Итак. На данный момент у меня два блога, в которых я распараллелил потоки информации.

1. - Тонкости веб-разработки - чисто образовательный проект про веб-дизайн, веб-программирование и всякое подобное.

2. - sordes notes - личный блог. Там всякие мои брюзжания по поводу и без, картинки, скетчи, что-то типа умных мыслей - много всякого.

В этом блоге я писать не буду. Хотя и сносить его тоже не собираюсь - ссылки, посты, все такое. Переподписывайтесь:-)

-----------------------------------------------------

Хостинг изображений - radikal.ru

noreply@blogger.com (sordes) — Thu, 08 Jan 2009 10:09:00 PST

Тонкости веб-разработки

Это блог на платформе WordPress, который я веду совместно со своим знакомым web-программистом. Тематика блога стала шире, теперь она охватывает не только веб-дизайн, но и веб-программирование и веб-разработку в целом.
Чертой, отличающей наш блог от многих других стала страница Задавайте вопросы, где любой заинтересованный человек может задать вопрос по тематике блога, на который мы постараемся максимально оперативно дать ответ в виде поста.

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

Enjoy!

Адрес фида для подписки: http://feeds.feedburner.com/easy4web
-----------------------------------------------------

Хостинг изображений - radikal.ru

Э-эх, разрушают мне моск возможности 3d

noreply@blogger.com (sordes) — Sat, 03 Jan 2009 11:02:00 PST

Я бы очень хотел себе такую кружку. Сам бы пил с удовольствием, али подарил бы знакомому архитектору.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Веб-гламур – за, или против?

noreply@blogger.com (sordes) — Wed, 31 Dec 2008 01:19:00 PST

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

Для начала, хотелось бы заметить, что под "гламуром" пользователями понимается что-то вроде Одной Кнопки, РуБёрнера и подобных (да-да, в основном дизайнером эти проектов является Миша Квакин, он же и первопроходчик и основоположник данного стиля оформления в рунете). "Гламурными" чаще всего называют сайты, содержащие простую (simple) графику значительных размеров, чаще всего отрисованную в 3d со стилизацией под глянцевый пластик, стекло, etc.

Однако, если мы обратим взор сюда, то в списке выдачи не увидим ничего и близко похожего. Тут у нас держатся китч (яркое коллажирование со смнешением различных стилистик), гранж (пятна, куски надписей, хаотичное нагромождение линий) и информационный дизайн, который меня, почему-то, очень подмывает назвать "хабрадизайном". Нарочито простых ("просторных", "свободных") сайтов не создает практически никто. Использование 3d не идет дальше псевдо-3-дэ, исполненного в фотошопе.

Вот так вот я сидел и думал, и запутывался все больше и больше. Очень бы хотелось узнать мнение читателей (vox populi) о том, какие сайты им нравятся, какие нет; какие тенденции устраивают, а какие - раздражают.
-----------------------------------------------------

Хостинг изображений - radikal.ru

С праздничком, дорогие мои:-)

noreply@blogger.com (sordes) — Fri, 26 Dec 2008 06:19:00 PST

-----------------------------------------------------

Хостинг изображений - radikal.ru

Альтернативный управлятор громкостью винды, концепт.

noreply@blogger.com (sordes) — Sat, 13 Dec 2008 01:27:00 PST

-----------------------------------------------------

Хостинг изображений - radikal.ru

О применении мозга в дизайне

noreply@blogger.com (sordes) — Sat, 06 Dec 2008 14:00:00 PST

Здравствуйте, мои дорогие любители дизайна. Это снова я, снова с новой (ух ты:-) ) писаниной. Восхотелось мне чего-нибудь сегодня покритиковать. Благо и претендент удачный нашелся.
Но покритиковать не просто так, а конструктивно. Предложить свое. Чтобы знали, что хозяин блога не только тявкать исподтишка и плевать на спину может (это, кстати, очень просто), а может предложить еще что-то свое.
Итак, претендент. Чтобы было понятно, о чем конкретно я веду речь - ниже будет маленькая иллюстрация (увеличивающаяся по клику):

Что мы тут, уважаемые граждане, видим? Мрак и ужас мы тут видим, помноженные еще на два мрака и ужаса. Причем, что интересно - технически грамотно (см. исходный код) выполненные мрак и ужас. Даже без таблиц.

Есть некая идея: грамотный мерчандайзинг - это очень сложно (тонкий намек в виде паззла), но мы совсем недорого возьмем решение этой проблемы на себя, и все у вас будет в лучшем виде. Это вот была идея.

А дальше начинается полная, простите, годзилла. Злая и некормленная:
- шрифты. О, эти болдовые газетные шрифты... как они меня успели достать в свое время!
- цвета. Сине-зеленая тоска.
- качество графики. За гранью бобра и козла.
- кадрирование фото. За той же самой гранью. Не надо так кадрировать фото. Я не верю, что женская грудь с бейджем символизирует собой "мерчандайзовый аудит". Вот не верю и все. А обучение мерчандайзингу в полях...
- заголовки подразделов. Граждане, имейте совесть. У меня зрение стопроцентное, и то прочитывал с пятого раза. А у кого не стопроцентное?
- форма кусочков паззла нефункциональна. Это видно глазу, и сразу понимаешь - что нет, не справятся ребята со своей задачей. Такие кусочки не состыковать.

И ведь этот сайт должен продавать.

Короче, решил я действовать в рамках той же идеи. С паззлами. Получилось так:

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

Вот как-то так. Вынимательно слушаю комментаторов.

PS: Там еще есть флешь-версия сайта, это отдельная и весьма грустная песня, которую я как-нибудь тоже перепою на новый лад.
-----------------------------------------------------

Хостинг изображений - radikal.ru

А вот как вам, граждане, такая кружка?

noreply@blogger.com (sordes) — Tue, 25 Nov 2008 07:15:00 PST

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

Хостинг изображений - radikal.ru

Ишшо на ту же тему:

noreply@blogger.com (sordes) — Thu, 20 Nov 2008 11:39:00 PST

-----------------------------------------------------

Хостинг изображений - radikal.ru

Внимание, внимание! Беспрецендентная по своей наглости пЕар-акция!

noreply@blogger.com (sordes) — Wed, 19 Nov 2008 12:00:00 PST

В Зимней школе (ссылка выше) в наши жадные до науки гипоталамусы за символическую плату (чистим сенсеям картошку товарными вагонами и моем полы гектарами) заливают знания по вебдванолю, триДЭ-моделированию, юзабилити и прочему такому всякому. Залили уже много, зальют (твердо уверен) - еще больше. Что мы будем знать в результате - страшно представить. До мирового господства останется сделать два (ну может три, но небольших) шага.

Верховодит шайкой широко известный хулиган и дизайн-фрик Миша Квакин.

Могу заверить, что безмерную пользу от занятий ощущаю прямо на себе. В руках образовался приятный тремор, а в седалищной мозоли - зовущий на подвиги зуд. Также наблюдается повсеместное шевеление мозговых извилин (всех четырех). То домики рисую в триДЭ, то гостевые проектирую, то еще какие-нибудь обложки на пластинки рисую. Всеми фибрами ощущаю передающуюся мне от сенсеев мощь, а по ночам грежу троном Императора Вселенной.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Влиянье наше растет и ширицца...

noreply@blogger.com (sordes) — Wed, 19 Nov 2008 03:28:00 PST

...и наших потненьких ручонок уж не остановить.

Первые робкие шаги:

И, уже в одном шаге до совершенства:

-----------------------------------------------------

Хостинг изображений - radikal.ru

Ишшо фотожопная картинка

noreply@blogger.com (sordes) — Fri, 14 Nov 2008 09:04:00 PST

Если кому интересно - могу выложить тутор. Рисовалось "с нуля".
-----------------------------------------------------

Хостинг изображений - radikal.ru

Adobe Flex

noreply@blogger.com (sordes) — Tue, 11 Nov 2008 05:01:00 PST

Flex, как среда разработки весьма доставляет, но грызет меня один вопрос - нахрена было включать поддержку всего пяти (или шести) гарнитур шрифтов? Ну а если уж это и сделали - нахрена включать Arial, но не включить Tahoma?
-----------------------------------------------------

Хостинг изображений - radikal.ru

Еще порция простоты и изящества

noreply@blogger.com (sordes) — Tue, 11 Nov 2008 02:04:00 PST

Простое и кроссбраузерное решение для создания резинового блока с фиксированными отступами:

<head>
<style>
body
{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<div style="position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;"></div>
</body>

Прошу обратить внимание, что задание position:absolute; делает div потомком уже не body, а непосрдественно окна браузера.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Голосовалка...

noreply@blogger.com (sordes) — Sat, 08 Nov 2008 12:03:00 PST

...для оценки ядрености хвотографических карточек. Применяется цветовое кодирование: 1 - красный, 5 - зеленый. Между ними - переходы. Запросто реализуется на js, особенно, если онклики привязать к чекбоксам, или радиобаттонам, а сами их засунуть в инвизибльный div. Можыд кому идея пригодицца.

-----------------------------------------------------

Хостинг изображений - radikal.ru

Из карты мира....

noreply@blogger.com (sordes) — Wed, 29 Oct 2008 03:42:00 PDT

...C помощью одного лишь только Фотошопа мы превращаем карту мира в завлекательный баннер:

"Радикал-ГЕО – бесплатный интерактивный сервис для привязки любой информации к точному месту на географической карте: интересы и предпочтения пользователей, места работы, отдыха, общения.

С помощью сервиса можно создать объект: нанести на карту свою «точку» – отметить место и создать его описание – название, тексты, фотографии и рисунки, темы для обсуждения на форумах, ссылки на страницы блогов."

Пиарю на правах дизайнера проекта:-)

Проект пока живет в виде beta-версии, так как столь любимая в вебдваноле социальная составляющая еще в зачаточном состоянии. Но работы над ней ведутся уже сейчас, и совсем скоро мы дадим возможность создавать гибкий настраиваемый профиль, искать в нем по интересам, смотреть последние темы, точки и фотки данного персонажа, прокладывать маршруты по карте, посылать внутри ресурса личные сообщения и многое-многое другое. Голодных мы накормим, сопливым - утрем нос, а ползающих - мощным пинком выведем на околоземную орбиту! Присоединяйтесь и следите за новостями.

Как любит говорить ст. оу. Гоблин, это, догадливые вы мои жадные дети, реклама фотошопа и карты мира.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Знаете ли вы, что...

noreply@blogger.com (sordes) — Wed, 22 Oct 2008 21:18:00 PDT

Для корректного позиционирования блоков с помощью z-index в Internet Explorer необходимо, чтобы один блок был родителем (или потомком) другого (вот офигенный конструктор на ASP, который позволяет поработать с позиционированием весьма наглядно);
Для корректного отображения блока со свойством overflow:auto (скажем, вы внутри div'a собрались прокручивать какое-либо содержимое) в Internet Explorer необходимо задать блоку свойство position (relative, или absolute);
Для того, чтобы избавиться от надоедливой рамки из точек вокруг ссылки в фокусе (скажем, в Фаерфоксе) надо пользоваться конструкцией вида:
a:focus {outline: none;} (via diGreez).

-----------------------------------------------------

Хостинг изображений - radikal.ru

Как реализовать кнопку, не используя, собственно, кнопку?

noreply@blogger.com (sordes) — Tue, 30 Sep 2008 12:00:00 PDT

Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS - очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство "hover" применимо практически к любому элементу. Но, обо всем по порядку. Сначала - вот она, кнопка:

А вот ее код:

CSS
#button {
width: 60px;
height: 30px;
background: url(1.jpg);
}
#button:hover {
width: 60px;
height: 30px;
background: url(2.jpg);
}

#button a {
text-decoration: none;
font-size: 18px;
}
#button a:hover {
text-decoration: none;
font-size: 18px;
}

HTML:

<body>
<div id="button"><a href="#">         </a></div>
</div>

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

А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки - правильно расставить padding'и. Тут уж все зависит от вашей фантазии.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Обмен опытом...

noreply@blogger.com (sordes) — Wed, 24 Sep 2008 21:26:00 PDT

http://rotorweb.ru/dizajn/smena-dizajna-po-vremenam-goda.html - довольно простой и интересный способ реализации смены дизайна по временам года.

Все подробно разобрано и объяснено.
-----------------------------------------------------

Хостинг изображений - imageshack.us

В помощь фотожоперу - эффект "глубокой" фотографии.

noreply@blogger.com (sordes) — Sun, 21 Sep 2008 20:42:00 PDT

Для начала, найдем фотографию, которую мы будем делать "глубокой". Я нашел вот такую:

Теперь копируем слой (Ctrl+J), нижнему слою даем Gausian Blur (радиус фильтра зависит от того, насколько сильно выхотите отделить передний план). Затем на верхний слой кидаем векторную маску (Alt+Add Layer Mask). И по маске (установив белый в качестве Foreground Color) рисуем Radial Gradient.

Получиться должно примерно так:

Применений у данного эффекта множество.
-----------------------------------------------------

Хостинг изображений - imageshack.us

"Намертво приколочено к центру"

noreply@blogger.com (sordes) — Fri, 19 Sep 2008 23:13:00 PDT

По адресу http://www.wpdfd.com/editorial/thebox/deadcentre4.html лежит хороший пример того, как div можно намертво приколотить к центру экрана. Решение кроссбраузерное. Таблицы все больше уходят в небытие:-)

Если же сайт у нас с динамическим содержанием, то для помещения блока по центру надо использовать вычисленное значение его ширины и высоты, деленное на "2". Скажем, ASP позволяет в прописывать в стилевых таблицах имена переменных в качестве числового значения. И там же совершать с ними некие арифметические действия.
-----------------------------------------------------

Хостинг изображений - imageshack.us

Спецификация CSS2 в переводе на русский

noreply@blogger.com (sordes) — Wed, 17 Sep 2008 11:29:00 PDT

если кому интересно, лежит здесь
-----------------------------------------------------

Хостинг изображений - imageshack.us

CSS и верстка

noreply@blogger.com (sordes) — Wed, 17 Sep 2008 03:22:00 PDT

Подкинули мне тут задачку с подвохом. Типа, сделай так:

Для тех, кто по жизни в носу ковыряет - поясняю. Задача сделать два div-блока, да так, чтобы один перекрывал другой. Я подмал-подумал, да и выдал кросс-браузерную резину:
CSS:

body {
padding: 0px;
margin: 0px;
}

#corn {
position: relative;
float: right;
width: 200px;
height: 100px;
background: #00ffff;
margin-right: -50px;
margin-top: -50px;
z-index: 100:
}

#main {
position: relative;
width: 90%;
height: 450px;
background: #00ff00;
margin: 50px;
z-index: 1;
}

HTML:

Фишка в том, что элемент считается родительским для другого элемента в том случае, если его позиция отлична от static:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

web. Садистское.

noreply@blogger.com (sordes) — Sat, 13 Sep 2008 07:45:00 PDT

Как же порой хочется приложить создателей IE6 головой о стену. Верстаю. Резину. На div'ax. Везде все нормально, кроме IE. Даже маковские Camino с Safari все правильно отображают. А вот IE парсит страницу черт-те знает как. Одна из основных головных болей - непонимание "ослом" отрицательных отступов. Сугубо из-за этого придется страницы сайта сохранять с расширением *.php и в таком виде заливать на хостинг. Ибо для многотысячной толпы пользователей IE6 придется подсовывать другую стилевую таблицу. Специально под "осла" заточенную. А на JavaScript переключатель писать тоже не очень правильно - он почти у всех по умолчанию запрещен. Поэтому надо, чтобы сервер до отправки страницы клиенту решил, какую стилевую таблицу ему подсунуть, чтобы все у всех выглядело одинаково.

Да, кстати. Конструкции вида:

voice-family: "\"}\"";

как-то уж очень по-индусски выглядят:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

В помощь фотожоперу - хитрость с Unsharpen Mask

noreply@blogger.com (sordes) — Wed, 03 Sep 2008 11:26:00 PDT

Сегодня я расскажу вам об одной хитрости при работе с фильтром Unsharpen Mask. Но для начала, несколько слов о том, как работает фильтр в общем виде. Фильтр находит в изображении резкие градации по свету/тону между пикселями и визуально делает их еще резче. То есть - светлые пиксели вдоль границы он высветляет, темные - затемняет.

Вот описания настроек фильтра. Источник - http://www.publish.ru/adobe/2008/02/5185072/

Amount — это «мощность» фильтра, степень усиления контрастности контуров. Radius — ширина контуров, которые мы хотим усилить. Чем мельче интересующие нас детали, тем меньше радиус. Например, для пейзажа или натюрморта с большим количеством мелких элементов значения Radius могут быть 0,3–0,8 пикселя, для крупнопланового портрета 0,6–1,5 и т. д. Подбирать толщину контура удобнее всего при максимальной «мощности» фильтра 500%, а потом, при необходимости, уменьшать значение Amount. Если для снимков с большим количеством деталей это вполне уместно, для портрета вряд ли потребуется больше 200%.
Третий параметр настройки Unsharp Mask — это Treshold, пороговое значение, позволяющее фильтру отличать контрастные границы и значимые детали от цифрового мусора или зернистой структуры плёнки.

Показать все необходимое мне сегодня поможет Кейт Мосс (это ведь Кейт Мосс?:-) ) Встречайте:

Хинт: я не показываю как надо шарпить фотографии. Я показываю как избежать некоторых нежелательных эффектов при применении фильтра Unsharp Mask. Сообразно этому выбрана и степень "расшарпливания" фоторафии.
Сделаем два слоя-копии нашего фото (создать слой-копию - Ctrl+J).
Итак, если мы применим к фото фильтр Unsharp Mask, то достаточно часто мы можем видеть вот такую картину:

Темные участки, ставшие еще темнее, не так бросаются в глаза, как участки светлые. Вот эти светлые участки, которые "фи", "буэ" и вообще неэстетичны, можно замаскировать следующим образом - включите видимость одному из слоев-копий и задайте режим смешивания (Blending Mode) Darken. Видите, светлые участки пропали? Изменяя прозрачность слоя с примененным Darken можно достаточно эффективно маскировать лезущие в глаза светлые артефакты. А если сделать видимым второй слой-копию и задать ему режим смешивания Lighten, то можно регулировать видимость и темных участков.
Тот же самый шар после описанных выше манипуляций:

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

Хостинг изображений - imageshack.us