Заказы временно не принимаются
Многие старые программы под Windows запускаются в размытом виде. Шрифты плывут, графика выглядит ужасно.
Сравним, как выглядит старое приложение при обычном запуске, и после правильной настройки режима высокого DPI:
▼ Читать дальше
Чтобы изменить параметры запуска флеш-плеера, нужно его найти на диске C.
Если у Вас установлен только плагин флеша для браузеров, то exe файл находится вот здесь:
C: › Windows › System32 › Macromed › Flash
Если у Вас установлена среда разработки Adobe Flash, то плеер лежит по другому пути:
C: › Program Files › Adobe › Adobe Flash CC 2015 › Player
На дворе 2019 год, но мне внезапно понадобился флеш-плеер. Я его установил с официального сайта Adobe и столкнулся с проблемой: все флешки выглядят размытыми. Потому что у меня большой экран, и для удобства изменён коэффициент масштабирования в Винде. Чтобы это исправить, надо найти ярлык или exe файл флеш-плеера, зайти в его свойства правым кликом, и там изменить режим масштабирования приложения. Как это сделать, читайте в заметке Изменение режима масштабирования старых программ под Windows.
В фотошопе появилась функция Vibrance, а в русской версии она называется «вибрация» или «сочность». Похожая вещь реализована и в современных смартфонах в режиме редактирования фото. Новый фильтр даёт более реалистичный результат на фотографиях. Это отличная замена топорному Saturation.
Напомню, классический фильтр Saturation поднимает насыщенность у каждого пикселя на фотографии, в итоге появляются области, «перекрученные по цветам». А кроме того, в JPEG изображении подчёркиваются артефакты:
Большинство фотографий в интернете на данный момент — именно в формате JPG среднего качества. Дополнительные преобразования могут ещё сильнее ухудшить внешний вид. Особенно это важно для товаров в интернет-магазинах. Поэтому любые подобные фильтры графики надо применять с осторожностью. И в этом смысле фильтр Vibrance — просто находка для интернет-магазинов, потому что он работает «умно».
Фильтр Vibrance поднимает насыщенность только в тех областях фото, где это действительно необходимо:
В интернете много курсов по регулярным выражениям, но все они написаны слишком сложно даже для человека, имеющего большой опыт в разработке сайтов ) Попробую исправить эту ситуацию, возьму живой пример из своей работы и напишу просто — о сложном.
Самый частый случай использования регулярок в моих проектах — какое-то преобразование контента на сервере перед передачей клиенту. Например, есть картинка с подписью alt:
<img src="file.jpg" alt="подпись">
Нужно вытащить подпись из тега alt, поставить её под картинкой, и обернуть всё это дело в div.Вот, что должно получиться на выходе:
<div><img alt="подпись" src="file.jpg"><span>подпись</span></div>
Цветом помечены те кусочки, которые мы взяли из первой фразы в неизменном виде. Как видим, в выходной конструкции «подпись» использована два раза, а свойства поменяны местами — это значит, что обычной заменой str_replace данная задача никак не решается )
На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На 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 мс. Но это может подтромаживать на слабых устройствах.
Иногда эффективнее хранить данные в БД в текстовом виде, всего лишь в одном текстовом поле. Это применимо, если небольшой объём информации запрашивается и редактируется целиком, и если в ближайшем будущем не планируется усложнение структуры.
Например, расписание занятий по фитнесу. Занятия могут проходить в двух разных залах.
В БД хранится одно текстовое поле:
19:00^Фитнес микс|Zumba^|^|^|^Фитнес микс|^|20:00^|^|^Здоровая спина|Zumba^|^Zumba|^|21:00^|^Zumba|^|^|^|^|
Время, далее дни с ПН по СБ, и каждый день поделен на два зала.
Текстовое представление удобно для разработчика: оно визуально подобно блоку на сайте или в админке. Ещё один плюс — всего один запрос к БД.
Вывести это на сайт или в админку просто: заранее придуманные символы-разделители — в нашем случае это ^ и | — заменяются на теги tr, td или div или любые другие. На теги навешиваются стили, и получается красивый блок:
В админке структура полностью сохраняется, это удобно для менеджера:
После редактирования html-код обратными заменами превращается в чистый текст:
Однако если залов для фитнеса, тренеров и т.п., станет много, то посетитель сайта захочет посмотреть занятия в конкретном зале (или у своего тренера). Потребуется не самая простая выборка данных из текста или фильтрация на стороне клиента. Насколько это удобно, и что лучше — быстрый старт или удобное дальнейшее развитие (и будет ли оно) — вопрос индивидуальный.
(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)
В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:
Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?
С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.
Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.
Нам нужно:1) отобразить карту необходимого масштаба и размера в браузере,2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).
Иногда бывает нужна большая Яндекс— или Гугл-карта. Например, для распечатки на плакате или для создания какого-нибудь приложения.
Если у карты есть API или код вставки, используйте быстрый способ (полностью автоматический, без фотошопа). Если API нет, или вы не понимаете, о чём идёт речь, то читайте дальше.
Сейчас я расскажу, как можно быстро собрать её из кусочков (из нескольких скриншотов). Этот способ подходит не только для карт, но и для любых больших изображений, которые нельзя скачать целиком.
Многие убеждены, что рекламное пространство должно использоваться на 100%. Однако это вовсе не означает, что надо заполнять «важной» информацией всю свободную площадь рекламного носителя:
Баннер перегружен информацией, но важнее то, как она расположена:— неправильно расставлены акценты (основная идея изложена мелким текстом),— слишком маленькие отступы приводят к тому, что всё склеивается в кучу.
Как можно улучшить этот баннер? Самое очевидное — добавить воздуха, отодвинув надписи и картинки друг от друга. При этом надо помнить, что размер отступов отвечает за визуальные связи между объектами (по смыслу — ближе или дальше). Крупным объектам нужны соответствующие отступы, чтобы они не затерялись среди прочего. То есть, не достаточно какую-либо надпись сделать жирной, красной, добавить тень и т.д. — в первую очередь, необходим хороший отступ вокруг неё. Можно вообще обойтись только отступами, без дополнительных эффектов.
Знакомая ситуация: на сайте всё красиво, а внутренние страницы оформлены так, что их сразу же хочется закрыть.
Оформление материалов сайта, или контент-менеджмент, — второй обязательный пункт после создания приятного внешнего вида.
Допустим, что все материалы для наполнения сайта (пачку фотографий и несколько статей в ворде) предоставил заказчик. Тогда правильный контент-менеджмент — это улучшение и удачное расположение отдельных элементов на странице. То есть это не переписывание каждой статьи заново, а просто оптимизация имеющихся материалов.
Если взять текстовую «простыню», разбавить фотографиями, визуально выделить важные абзацы, красиво оформить списки и таблицы — полдела сделано. У посетителя уже сложится хорошее первое впечатление от страницы. Но дальше он приступит к чтению, и тогда...
Каждой статье требуется оптимизация в несколько проходов: читаем страницу сверху вниз, исправляем сложные для восприятия моменты — и повторяем до тех пор, пока (в идеале) страница не будет читаться на одном дыхании. Нет предела совершенству, но результат в любом случае станет лучше, чем первоначальная «простыня».
Некоторые составляющие правильного контент-менеджмента:
• Выбор или поиск наиболее подходящих по смыслу изображений• «Причёсывание» фоток (цветокоррекция, исправление искажений, обрезка лишнего)• Подписывание картинок в едином стиле• Если контекст требует небольших картинок, обязательно увеличение по клику• Исправление ошибок в тексте• Удаление повторов, упрощение сложных фраз• Перемешивание блоков
В раскрасках на ejonok многое сделано вручную. Поэтому хотелось максимально защитить свои труды. Известно, что любой элемент из флеш-приложения можно вытащить (с помощью специальных программ). Также известно, что в интернете воруют обычно то, что плохо лежит. Поэтому эффективно работают самодельные методы защиты, незнакомые потенциальному вору.
Раньше раскраску можно было скачать и запустить на компьютере «как есть», теперь — нельзя. Одна из причин кроется в разделении флешки на две части: оболочка (интерфейс) + подгружаемый рисунок, доступный только в интернете.
Оболочка проверяет адрес своего расположения (ejonok.ru) и загружает рисунок. Если запустить оболочку на своём компе или на другом сайте, мы увидим лишь белый экран.
Саму оболочку можно «распотрошить», вытащить оттуда всю графику (кнопочки, плашечки) и скрипты. Кнопочки вряд ли кому-то нужны (есть готовые клипарты), а вот код полезен, потому что в нём зашиты все секреты. Если код изменить до неузнаваемости обфускатором, то разобраться в нём будет очень тяжело.
Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:
В этой заметке я расскажу, как такое делается, но сначала небольшая предыстория.
Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:
Что произойдёт на крутом повороте?
Микрошрифт не предназначен для чтения, но иногда нужен для иконок или пиктограмм.
Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:
Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).
В особых случаях инструмент Refine Edge (Уточнить край) оказывается незаменим. Например, недавно мне нужно было вырезать из фона объекты с тенью. Я настроил волшебную палочку, чтобы выделение охватило почти весь фон, кроме букв и теней:
Есть различные способы и готовые сервисы по оптимизации изображений PNG-8. Но иногда 256 цветов не хватает:
Объём 256-цветного изображения PNG-8 получился около 15 Кб. Если же переключить в полноценный PNG-24, охватывающий все разумные цвета, то объём вырастает до 40 Кб: это многовато.
Объём файла пропорционален количеству цветов в картинке. Ограничить палитру можно с помощью постеризации в фотошопе (Posterize). Задавая разное количество уровней постеризации, можно добиться компромисса между красотой и объёмом файла:
Вернёмся к нашему изображению:
10 Кб экономится абсолютно без потерь для восприятия. Чтобы заметить, что тень от пера пошла «ступеньками», нужен хороший монитор и наблюдатель-киборг 😃
У 99% самодельных презентаций нет последовательной линии изложения, а ведь это самое главное. Именно этим презентация отличается от стопки разбросанных бумаг с какими-то непонятными данными (которые не так-то просто сложить воедино, чтобы раскрыть основную идею).
Перед созданием презентации составьте план — несколько пунктов, которые станут ключевыми слайдами. Если план не складывается, попробуйте доработать, дополнить основную идею, или подойти к проблеме с другой стороны.
Каждый слайд презентации — это порция информации, необходимая для понимания всей задумки. В ваших интересах изложить эту порцию понятно и красиво.
Голый текст, как правило, читать скучно. Тематическая завлекающая картинка улучшает общее впечатление, но обычно просто дублирует какую-то мысль из текста, не прибавляя понимания. Когда всё можно сказать одной картинкой, не вставляйте лишний текст (и наоборот); картинка должна быть инструментом, а не украшением для заполнения свободного места.
Оптимальнее всего использовать инфографику (схемы, диаграммы, анимация): это экономит время выступления и упрощает восприятие.
Отдельного внимания заслуживает оформление: с появлением PowerPoint все люди превратились в дизайнеров, но знаний и опыта обычно не хватает. Только 1% презентаций можно смотреть без слёз 😃
Для наглядности возьмём случайный слайд из интернета (не самый плохой, надо заметить) и слегка улучшим его:
Тут ещё остались мелочи, которые можно улучшить, но это необязательно. Лучше немного улучшить всю презентацию, чем потратить всё отведённое время на один слайд.
Перечислю несколько коротких советов, как не испортить внешний вид презентации.
Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп 😃
Вот весь процесс:
Перечислю основные средства фотошопа, которые нам понадобятся, чтобы во время рисования не было вопросов. Это пипетка, карандаш, стирательная резинка, выделение (прямоугольное и овальное), работа со слоями (создать слой, изменить порядок) и задание степени эффекта в процентах (будь то карандаш, ластик или прозрачность слоя).
Нужно заново отрисовать логотип Автодетей —
— в размере 16 на 16 пикселей.
Как рисовать фавиконку? Покажу на реальном примере.
На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети:
Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.
1) Смотрим, какого размера в пикселях должна быть аватарка (например, 90×90 или 100×100).
Иногда это написано в личном кабинете:
Если нет — заходим на любую тему форума и ищем подходящую аватарку. Желательно квадратную (чтобы сразу узнать максимальную ширину и высоту):
Кликаем правой кнопкой мыши по аватарке, выбираем «свойства»: вылезет окошко, где будет указан размер изображения (т.е. аватарки):
(если окошко имеет другой вид, всё равно ищите «Размер изображения», «Image size» и т.п.)
Итак, теперь у нас есть размеры аватарки в пикселях. Зачем вообще его знать? Если форум «сам» подгонит вашу аватарку по размерам, то она может размазаться, исказиться, словом, из красавицы может превратиться в чудовище 😃
Поэтому лучше «подсунуть» форуму картинку единственно верного размера.
Существует ещё ограничение по размеру файла картинки в килобайтах, но на него можно не обращать внимания, т.к. обычно оно дано с большим запасом.
2) Дальше есть два пути. Самый простой — выбрать аватарку из нескольких тысяч на одноимённых сайтах (не буду рекламировать, вы их легко найдёте). А сложный — сделать уникальную аватарку самому.
Обычно для фона в презентациях я использую какой-нибудь несложный цветовой градиент. Так было и в моей дипломной работе:
Ниже я покажу примеры (реальные слайды из своей работы) и дам несколько полезных советов, как составить презентацию.
Помог своей бывшей школьной учительнице: для открытого урока нужны были презентации в PowerPoint на тему «Растворы». Сделал каждую в виде одного слайда, последовательная анимация переключается пробелом (лучше один раз увидеть, чем читать :)
Иван Титов