Андрей Язиков. Веб-дизайн и презентации

Эскиз сайта сока ДжюйсКинг

2009-12-24T18:45:00.002+03:00

Иконки для сайта

2009-12-24T18:23:00.003+03:00

Немного о проблеме WYSIWYG для сайтов и FCKeditor

2009-12-24T00:41:00.004+03:00

Не долго я радовался новому редактору.
Засада! Оказывается FCKeditor обрезает пустые теги, а в случае использования Firefox еще и вставляет свои стиле-теги (мозилловские).
Дело было так:
Установили в админку сайта новый клевый редактор CKeditor и я начал радоваться жизни. Еще бы! Теперь не надо для обновления сайта запускать IE и все быстрее работает. Плюс удобства всякие. Нее! До этого тоже был WYSIWYG редактор, но староватый и только из под IE. Вот в нем то проблем оказывается было меньше.
На следующий день я заметил, что создаваемые мной конструкции типа блока с закругленными углами как-то странно стали разъезжаться, а то и вовсе пропадать. Оказалось что этот редактор просто убивает все мои старания своим встроенным «умом».

Вопрос на засыпку: что делать с проблемой то?.. Поискал еще несколько вариантов но там проблемы или хуже или такие же :-(
Дайте пожалуйста ссылочку на хороший редактор, который так не умничает! Если не жалко

Сделать фотографию резче. Самый на мой взгляд оптимальный способ

2009-12-18T21:46:00.007+03:00

Способ, который я применяю для добавления резкости фото

Открытую фотографию переводим в режим Lab Colors (Image > Mode > Lab Color)
Открываем палитру Chanells и выделяем канал Lightness (быстро клавишами переключение каналов Ctrl-` (все каналы), Ctrl-1 (Lightness), Ctrl-2 (a), Ctrl-3 (b). Фото становится черно-белым (не пугаемся) — мы находимся в режиме редактирования канала.
Открываем фильтр Unsharp Mask и выставляем параметры:
- Amount: 25.. и более (в целом - по вкусу)
- Radius: 1,0 px
- Treshold: 4 levels.
Смотрим при этом внимательно как меняется резкость (включите Preview). Все нравится - сохраняем.
Возвращаемся в режим редактирования всех каналов (Ctrl-`), любуемся результатом.
Переводим изображение в режим RGB (Image > Mode > RGB Color), сохраняем

Чем хорош способ: Sharp применяется только к черно-белому каналу, что позволяет избежать появления цветных ореолов, поскольку цветовые каналы a и b не редактируются.

PS: если предстоит обработать много фоток - советую создать макрос. Это просто, быстро и удобно!

Создание закругленных углов на сайтах

2009-12-14T00:37:00.005+03:00

Задача:
Создать универсальный удобный код блока с закругленными углами для IE6, IE7, IE8, Firefox, Opera, Apple Safari.

Пример здесь!

Чуть позже пример блока с закругленными углами только для Mozilla и Chrome. Не работающие в Opera и IE, но хороши тем, что пишутся двумя строчками в CSS. Пока можно попробовать догадаться самому как это сделать, воспользовавшись подсказкой:
.block {
   clear:both;
   color:#fff;
-moz-border-radius:7px;
-webkit-border-radius:7px;
   border-radius:7px;
   font-weight:bold;
   padding:10px;
   background:#FF7800;
}

Немного гадостей в адрес IE

2009-12-10T15:23:00.000+03:00

Ни в коем случае не пользуйтесь poratble-версиями IE для проверки кода на ошибки! Два дня промучался с настройкой IE 7, все никак не мог понять, почему глючит, хотя код абсолютно валиден. Оказалось - все просто! В нормальном IE 7 (не portable) - все хорошо.

Интернет-магазин (final)

2009-11-13T19:13:00.000+03:00

Иконки для личного кабинета (текущий проект, final)

2009-11-11T18:57:00.004+03:00

Что изменилось: иконка «Программа мгновенного приема платежей», иконка «Личный кабинет»

Пиктограммы для тематических направлений

2009-10-21T19:15:00.003+04:00

Дизайн шаблонов для PowerPoint

2009-10-21T18:34:00.003+04:00

Задача: подготовить несколько шаблонов для тематических курсов

Рабочий процесс

2009-10-16T19:15:00.004+04:00

Один из слайдов для презентации

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

Иллюстрация для презентации

2009-10-15T19:17:00.014+04:00

+ черновики

Первый вариант (парадный):

Второй вариант (офисный):

Третий вариант (солидный):

Дополнительно

Черновой вариант:

Инструменты: Paths, Photoshop, Wacom

Кое-что из свежего. Сайт визитка

2009-10-14T11:47:00.004+04:00

Сайт для дроп-зоны Ступино. Старенькое

2009-10-13T01:08:00.007+04:00

Вот еще пример дизайна плюс резиновой верстки: http://martin.mercator.ru/home/stupka/splash.html

Верстка сложного графического дизайна

2007-07-25T18:52:00.001+04:00

Сверстал совсем недавно.
Смотреть: http://martin.mercator.ru/home/ant1/

Как двигать объект (блок) в двух координатах (x,y) на странице при ее растягивании

2007-07-25T18:40:00.002+04:00

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

Рассмотрим вариант, который применяется чаще всего: объекту задаются абсолютные координаты относительно той стороны или угла страницы, куда объект должен быть привязан жестко. Задаем блоку obj1 параметр позиционирования absolute и расстояние относительно правого и нижнего угла. В данном случае этот блок является самостоятельным и контейнером для него является тэг body.

Рассмотрим вариант более сложного позиционирования: создаем контейнер #container. Для примера зададим ему координаты относительно родительского контейнера (как и в предыдущем случае это тэг body) и выставим его по центру страницы. Для наглядности я закрасил этот контейнер в оранжевый цвет.
Теперь вкладываем в этот контейнер блоки obj2 и obj3. Для этих блоков теперь #container является родительским контейнером. Теперь мы можем позиционировать оба блока относительно начала координат блока #container.
В случае obj2 мы позиционируем его в процентном значении, вверх и влево, указывая соответственно параметры bottom и right *. Если в данном случае мы укажем размерность менее 100%, то блок obj2 будет наезжать на контейнер.
В результате нашего примера видим, что блок obj2 переместился вверх и влево относительно родительского контейнера.
Для полноты примера я создал блок obj3, который спозиционировал относительно контейнера не в процентном значении, а в фиксированных единицах - пикселях.

Немного об относительности поведения процентных расстояний. В случае obj2 расстояние считается от физического размера контейнера. Тоесть, если мы указываем 100%, а контейнер имеет размеры 50x50px то получим расстояние от левой верхней точки контейнера в 50 пикселей. Если укажем больше 100%, то соответственно сдвинем блок на расстояние разницы от 100% от родительского контейнера. В любом случае, сдвиг на любое процентное расстояние будет относителен размеру контейнера.
В случае, если мы указываем размерность в точных единицах - получаем фиксированный сдвиг.

* - можно также указать top и left, указав отрицательные значения размерности.

Смотрим пример: 01.html
Смотрим код: 01-code.html

Очень хорошо про кодинг

2007-03-24T04:39:00.000+03:00

Нашел тут отличные заметки «Заметки HTML кодера». Рекомендую читать, экспериментировать не отходя, получать результаты, запоминать что пишут - так как пишут грамотно! Если найду чего добавить - напишу здесь. Пока скажу, что понравился параграф про верстку форм. Очень доходчиво. UPD: еще одна очень полезная ссылка на эту тему

И это... подкасты как создавать?

2007-03-24T04:24:00.000+03:00

videoegg - блин не дает видео сюда запостить нифига. Все нормально, говоришь upload to, вводишь логин пароль... и фигу - типа неправильные данные. че деладь?

Бэн, это Данила...

2007-03-24T03:19:00.001+03:00

Народ, помогите. Может кто владеет информацией.

Где нарыть примеры и туториалы как создать скрипт- смс автонастройки параметров сети. Ну то, что провайдер обычно присылает на мобильный, когда ты просишь его настроить тебе например GPRS-WAP. Отчаялся искать вообще :-(