Заказы временно не принимаются

22 заметки с меткой урок
📅 26 марта 2019

Изменение режима масштабирования старых программ под Windows

Многие старые программы под Windows запускаются в размытом виде. Шрифты плывут, графика выглядит ужасно.

Сравним, как выглядит старое приложение при обычном запуске, и после правильной настройки режима высокого DPI:

Слева неправильный масштаб, справа — правильныйСлева неправильный масштаб, справа — правильный

▼ Читать дальше

📅 26 марта 2019

Где в Windows 10 находится Adobe Flash Player

Чтобы изменить параметры запуска флеш-плеера, нужно его найти на диске C.

Где на компьютере лежит флеш плеерГде на компьютере лежит флеш плеер

Если у Вас установлен только плагин флеша для браузеров, то exe файл находится вот здесь:

C: › Windows › System32 › Macromed › Flash

Если у Вас установлена среда разработки Adobe Flash, то плеер лежит по другому пути:

C: › Program Files › Adobe › Adobe Flash CC 2015 › Player

На дворе 2019 год, но мне внезапно понадобился флеш-плеер. Я его установил с официального сайта Adobe и столкнулся с проблемой: все флешки выглядят размытыми. Потому что у меня большой экран, и для удобства изменён коэффициент масштабирования в Винде. Чтобы это исправить, надо найти ярлык или exe файл флеш-плеера, зайти в его свойства правым кликом, и там изменить режим масштабирования приложения. Как это сделать, читайте в заметке Изменение режима масштабирования старых программ под Windows.

📅 20 марта 2019

Сочность картинки: как работает Vibrance, и готовый скрипт

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

Напомню, классический фильтр Saturation поднимает насыщенность у каждого пикселя на фотографии, в итоге появляются области, «перекрученные по цветам». А кроме того, в JPEG изображении подчёркиваются артефакты:

Слева обычная фотка, справа — с задранной насыщенностьюСлева обычная фотка, справа — с задранной насыщенностью

Большинство фотографий в интернете на данный момент — именно в формате JPG среднего качества. Дополнительные преобразования могут ещё сильнее ухудшить внешний вид. Особенно это важно для товаров в интернет-магазинах. Поэтому любые подобные фильтры графики надо применять с осторожностью. И в этом смысле фильтр Vibrance — просто находка для интернет-магазинов, потому что он работает «умно».

Фильтр Vibrance поднимает насыщенность только в тех областях фото, где это действительно необходимо:

Слева обычная фотка, справа — с увеличенной сочностьюСлева обычная фотка, справа — с увеличенной сочностью

▼ Читать дальше

📅 2 марта 2019

PHP 7: простая замена с помощью регулярного выражения

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

Самый частый случай использования регулярок в моих проектах — какое-то преобразование контента на сервере перед передачей клиенту. Например, есть картинка с подписью alt:

<img src="file.jpg" alt="подпись">

Нужно вытащить подпись из тега alt, поставить её под картинкой, и обернуть всё это дело в div.
Вот, что должно получиться на выходе:

<div><img alt="подпись" src="file.jpg"><span>подпись</span></div>

Цветом помечены те кусочки, которые мы взяли из первой фразы в неизменном виде. Как видим, в выходной конструкции «подпись» использована два раза, а свойства поменяны местами — это значит, что обычной заменой str_replace данная задача никак не решается )

▼ Читать дальше

📅 6 марта 2018

Плавная прокрутка страницы на чистом javascript

На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:

$("html,body").animate({scrollTop:0},500);

А на чистом яваскрипте немного сложнее:

var t;
function scrolltop() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) {
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
} else {
clearTimeout(t);
}
return false;
}

Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.

Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:

window.scrollTo(0,-20);

Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.

Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.

📅 23 февраля 2017

Сохранить данные в базе данных в виде текста

Иногда эффективнее хранить данные в БД в текстовом виде, всего лишь в одном текстовом поле. Это применимо, если небольшой объём информации запрашивается и редактируется целиком, и если в ближайшем будущем не планируется усложнение структуры.

Например, расписание занятий по фитнесу. Занятия могут проходить в двух разных залах.

В БД хранится одно текстовое поле:

19:00^Фитнес микс|Zumba^|^|^|^Фитнес микс|^|
20:00^|^|^Здоровая спина|Zumba^|^Zumba|^|
21:00^|^Zumba|^|^|^|^|

Время, далее дни с ПН по СБ, и каждый день поделен на два зала.

Текстовое представление удобно для разработчика: оно визуально подобно блоку на сайте или в админке. Ещё один плюс — всего один запрос к БД.

Вывести это на сайт или в админку просто: заранее придуманные символы-разделители — в нашем случае это ^ и | — заменяются на теги tr, td или div или любые другие. На теги навешиваются стили, и получается красивый блок:

Расписание на сайтеРасписание на сайте

В админке структура полностью сохраняется, это удобно для менеджера:

Строчки можно добавлять, удалять, все поля редактируемые, названия занятий — любыеСтрочки можно добавлять, удалять, все поля редактируемые, названия занятий — любые

После редактирования html-код обратными заменами превращается в чистый текст:

19:00^Фитнес микс|Zumba^|^|^|^Фитнес микс|^|
20:00^|^|^Здоровая спина|Zumba^|^Zumba|^|
21:00^|^Zumba|^|^|^|^|

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

📅 1 марта 2013

Захват большой Яндекс.Карты для печати

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:

Такая карта получится в итогеТакая карта получится в итоге

Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?

С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.

Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.

Захват карты в 2 шага

Нам нужно:
1) отобразить карту необходимого масштаба и размера в браузере,
2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).

▼ Читать дальше

📅 25 февраля 2013

Большая карта: автоматическое выравнивание слоёв

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

Иногда бывает нужна большая Яндекс— или Гугл-карта. Например, для распечатки на плакате или для создания какого-нибудь приложения.

Если у карты есть API или код вставки, используйте быстрый способ (полностью автоматический, без фотошопа). Если API нет, или вы не понимаете, о чём идёт речь, то читайте дальше.

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

Склеиваем большую карту из нескольких скриншотовСклеиваем большую карту из нескольких скриншотов

▼ Читать дальше

📅 14 февраля 2013

100%-е использование рекламного пространства

Многие убеждены, что рекламное пространство должно использоваться на 100%. Однако это вовсе не означает, что надо заполнять «важной» информацией всю свободную площадь рекламного носителя:

Баннер яркий, но не понятно: кто растит смену? кому?..Баннер яркий, но не понятно: кто растит смену? кому?..

Баннер перегружен информацией, но важнее то, как она расположена:
— неправильно расставлены акценты (основная идея изложена мелким текстом),
— слишком маленькие отступы приводят к тому, что всё склеивается в кучу.

Как можно улучшить этот баннер? Самое очевидное — добавить воздуха, отодвинув надписи и картинки друг от друга. При этом надо помнить, что размер отступов отвечает за визуальные связи между объектами (по смыслу — ближе или дальше). Крупным объектам нужны соответствующие отступы, чтобы они не затерялись среди прочего. То есть, не достаточно какую-либо надпись сделать жирной, красной, добавить тень и т.д. — в первую очередь, необходим хороший отступ вокруг неё. Можно вообще обойтись только отступами, без дополнительных эффектов.

▼ Читать дальше

📅 22 октября 2012

Правильный контент-менеджмент

Знакомая ситуация: на сайте всё красиво, а внутренние страницы оформлены так, что их сразу же хочется закрыть.

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

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

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

Работа с контентом

Каждой статье требуется оптимизация в несколько проходов: читаем страницу сверху вниз, исправляем сложные для восприятия моменты — и повторяем до тех пор, пока (в идеале) страница не будет читаться на одном дыхании. Нет предела совершенству, но результат в любом случае станет лучше, чем первоначальная «простыня».

Некоторые составляющие правильного контент-менеджмента:

• Выбор или поиск наиболее подходящих по смыслу изображений
• «Причёсывание» фоток (цветокоррекция, исправление искажений, обрезка лишнего)
• Подписывание картинок в едином стиле
• Если контекст требует небольших картинок, обязательно увеличение по клику
• Исправление ошибок в тексте
• Удаление повторов, упрощение сложных фраз
• Перемешивание блоков

▼ Читать дальше

📅 18 октября 2012

Защита от копирования во флеше

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

Разделяем ресурсы

Раньше раскраску можно было скачать и запустить на компьютере «как есть», теперь — нельзя. Одна из причин кроется в разделении флешки на две части: оболочка (интерфейс) + подгружаемый рисунок, доступный только в интернете.

Проверка домена

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

Саму оболочку можно «распотрошить», вытащить оттуда всю графику (кнопочки, плашечки) и скрипты. Кнопочки вряд ли кому-то нужны (есть готовые клипарты), а вот код полезен, потому что в нём зашиты все секреты. Если код изменить до неузнаваемости обфускатором, то разобраться в нём будет очень тяжело.

▼ Читать дальше

📅 5 октября 2012

Анимация пути на схеме проезда

Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:

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

Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:

Справа — как бы пунктирная линияСправа — как бы пунктирная линия

Что произойдёт на крутом повороте?

▼ Читать дальше

📅 21 июля 2012

Как нарисовать микрошрифт

Микрошрифт не предназначен для чтения, но иногда нужен для иконок или пиктограмм.

Микротаблица МенделееваМикротаблица Менделеева

▼ Читать дальше

📅 16 декабря 2011

3D-вращение во флеше

Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:

Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).

▼ Читать дальше

📅 15 декабря 2011

Уточнить край (инструмент фотошопа)

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

Выделяем фон волшебной палочкойВыделяем фон волшебной палочкой

▼ Читать дальше

📅 21 ноября 2011

Постеризация в Фотошопе

Есть различные способы и готовые сервисы по оптимизации изображений PNG-8. Но иногда 256 цветов не хватает:

PNG-8 не устраивает, и dithering явно не спасает положениеPNG-8 не устраивает, и dithering явно не спасает положение

Объём 256-цветного изображения PNG-8 получился около 15 Кб. Если же переключить в полноценный PNG-24, охватывающий все разумные цвета, то объём вырастает до 40 Кб: это многовато.

Объём файла пропорционален количеству цветов в картинке. Ограничить палитру можно с помощью постеризации в фотошопе (Posterize). Задавая разное количество уровней постеризации, можно добиться компромисса между красотой и объёмом файла:

Чем больше уровней, тем больше цветов останется в картинкеЧем больше уровней, тем больше цветов останется в картинке

Вернёмся к нашему изображению:

Меняем настройки постеризации, чтобы уменьшить объём файлаМеняем настройки постеризации, чтобы уменьшить объём файла

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

📅 13 ноября 2011

Как сделать хорошую презентацию в Powerpoint

У 99% самодельных презентаций нет последовательной линии изложения, а ведь это самое главное. Именно этим презентация отличается от стопки разбросанных бумаг с какими-то непонятными данными (которые не так-то просто сложить воедино, чтобы раскрыть основную идею).

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

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

Голый текст, как правило, читать скучно. Тематическая завлекающая картинка улучшает общее впечатление, но обычно просто дублирует какую-то мысль из текста, не прибавляя понимания. Когда всё можно сказать одной картинкой, не вставляйте лишний текст (и наоборот); картинка должна быть инструментом, а не украшением для заполнения свободного места.

Оптимальнее всего использовать инфографику (схемы, диаграммы, анимация): это экономит время выступления и упрощает восприятие.

Отдельного внимания заслуживает оформление: с появлением PowerPoint все люди превратились в дизайнеров, но знаний и опыта обычно не хватает. Только 1% презентаций можно смотреть без слёз 😃

Для наглядности возьмём случайный слайд из интернета (не самый плохой, надо заметить) и слегка улучшим его:

Улучшение слайда из презентации: первый подходУлучшение слайда из презентации: первый подход

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

Перечислю несколько коротких советов, как не испортить внешний вид презентации.

▼ Читать дальше

📅 23 октября 2011

Как создавалась фавиконка для «Автодетей» (часть 2)

Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп 😃

Вот весь процесс:

ПлашкаПлашка
ГрадиентГрадиент
Две лапы готовыДве лапы готовы
То, на чём сидит мишкаТо, на чём сидит мишка
Вот такие рукиВот такие руки
Правая лапаПравая лапа
Руки готовыРуки готовы
ГоловаГолова
Рисуем ременьРисуем ремень
Тень и носикТень и носик
Сочный градиентСочный градиент
Обводка головыОбводка головы
Итоговая версия фавиконкиИтоговая версия фавиконки

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

Задача

Нужно заново отрисовать логотип Автодетей —

Мишка на оранжевой плашкеМишка на оранжевой плашке

— в размере 16 на 16 пикселей.

▼ Читать дальше

📅 21 октября 2011

Как создавалась фавиконка для «Автодетей» (часть 1)

Как рисовать фавиконку? Покажу на реальном примере.

Старая фавиконка

На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети:

Старая фавиконкаСтарая фавиконка
(девочка постарше и мальчик помладше). Иконка на момент создания соответствовала тематике сайта.

Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.

Процесс создания предыдущей версии фавиконкиПроцесс создания предыдущей версии фавиконки

▼ Читать дальше

📅 14 ноября 2009

Как сделать аватарку для форума

1) Смотрим, какого размера в пикселях должна быть аватарка (например, 90×90 или 100×100).

Иногда это написано в личном кабинете:

Если нет — заходим на любую тему форума и ищем подходящую аватарку. Желательно квадратную (чтобы сразу узнать максимальную ширину и высоту):

Кликаем правой кнопкой мыши по аватарке, выбираем «свойства»: вылезет окошко, где будет указан размер изображения (т.е. аватарки):

(если окошко имеет другой вид, всё равно ищите «Размер изображения», «Image size» и т.п.)

Итак, теперь у нас есть размеры аватарки в пикселях. Зачем вообще его знать? Если форум «сам» подгонит вашу аватарку по размерам, то она может размазаться, исказиться, словом, из красавицы может превратиться в чудовище 😃

Поэтому лучше «подсунуть» форуму картинку единственно верного размера.

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

2) Дальше есть два пути. Самый простой — выбрать аватарку из нескольких тысяч на одноимённых сайтах (не буду рекламировать, вы их легко найдёте). А сложный — сделать уникальную аватарку самому.

▼ Читать дальше

📅 4 июня 2007

Мой технический диплом: презентация

Обычно для фона в презентациях я использую какой-нибудь несложный цветовой градиент. Так было и в моей дипломной работе:

Фон и пример строчек текстаФон и пример строчек текста

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

▼ Читать дальше

📅 13 марта 2006

Задача на растворы (презентация)

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

▼ Читать дальше

© 2004 – 2024