18 заметок с меткой урок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажмите для просмотра анимацииНажмите для просмотра анимации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Логотип «Меняла»

Сразу оговорка: правильный вариант этого слова — «Меняла» (мужской род). Однако такой домен уже был занят. Это не смутило заказчика, и название было изменено.

Готовый логотипГотовый логотип

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

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

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

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

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017