Эта статья не инструкция по изготовлению фальшивых печатей. Здесь пойдёт речь о том, как нарисовать макет, из которого можно будет сделать настоящую печать. Изготавливается она путем вырезания клише из специальной пластмассы. Так как клише вырезается в макете не должно быть видимых контуров - только заливки, а то лазерный резец пройдёт два раза и испортит заготовку.
Рисуем Круглую Печать.
Эта статья не инструкция по изготовлению фальшивых печатей. Здесь пойдёт речь о том, как нарисовать макет, из которого можно будет сделать настоящую печать. Изготавливается она путем вырезания клише из специальной пластмассы. Так как клише вырезается в макете не должно быть видимых контуров - только заливки, а то лазерный резец пройдёт два раза и испортит заготовку.
И так начинаем рисовать.
1. Рисуем окружность с нажатым Ctrl - так она получится окружностью, а не эллипсом.
Назначаем (не снимая выделения, на панели опций) нужный размер нашей окружности - к примеру, 50 миллиметров. Дублируем (Ctrl+D) или копируем (Ctrl+C, Ctrl+V) окружность. Нам нужно учесть толщину будущего внешнего контура печати - скажем, его толщина должна быть 2 миллиметра. Соответственно, нам нужно вычесть ее из диаметра второй окружности. Не забывайте, что вычитать нужно двойное число (толщина контура 2 мм - уменьшаем диаметр второй окружности на 4 мм, т.е. 2 мм с одной стороны от центра, и 2 мм с другой). Теперь инструментом "Указатель" выделяем обе окружности (или "рамкой", не отпуская левую кнопку мыши, охватываем полностью обе окружности, или с нажатым Shift щелкаем по очереди на каждой). Включаем "Выравнивание и распределение" - и выравниваем объекты относительно друг друга по центру (по вертикали и по горизонтали).
2. Теперь нам необходимо превратить две окружности в один объект. Не снимая с них выделения, жмем Combine (Ctrl+L) на панели опций. У нас получится кольцо из двух окружностей.
Можно обойтись и без Combine - задать контур необходимой толщины, а за тем превратить его в объект (Arrange/Convert To Object). Здесь важно помнить (и учитывать при макетировании), что контур размещается по обе стороны реального абриса объекта - 4-миллимитровый, к примеру, выступает наружу на 2 мм и настолько же углубляется в сам объект.
3. Пункт специально для самых новичков. Если Вы помните, говорилось о полном отключении контуров и оставлении в макете ТОЛЬКО заливок. Если кто не знает, как это сделать, вот: Быстрое отключение контура - выделив необходимый объект, жмем правой кнопкой мыши СЮДА (выделено на картинке).
или то же самое (такую же кнопку) жмем на панели инструментов в параметрах контура:
4. Часто в центре печати размещается какое-либо изображение - герб, логотип, знак, текстура. Здесь главное, чтобы рисунок был ВЕКТОРНЫМ. И обязательно - одноцветным, контрастным, без полутоновых переходов. Следовательно, растровую картинку (если другой не имеется) необходимо или подвергнуть трассировке, или нарисовать заново (ВНИМАНИЕ!!! после трассировки обязательно подчищайте и дорабатывайте бывший растр, чтобы максимально уменьшить количество узловых точек и сгладить кривые). Можно использовать заливку монохромным узором или узором PostScript:
можно использовать (как в этом примере) докер "Вставить символ":
однако, не стоит столь откровенно пользоваться встроенными девайсами. Хороший дизайнер нарисует сам и свою собственную картинку.
5. Выравниваем все объекты - и окружности, и центральную картинку - так же, как выравнивали в самом начале, в пункте 1. И теперь, во избежание случайного сдвига элементов будущей печати, надо заблокировать все элементы:
Блокировка хороша тем, что сами заблокированные объекты никуда не денутся до отмены блокировки, а вот такая опция, как текст, пущенный "по пути", с заблокированными кривыми запросто проделывается.
6. Выбираем инструмент "текст", подносим к внешней окружности - контуру печати. Щелкаем левой кнопкой мыши тогда, когда курсор выглядит, как буква А, лежащая на волнистой линии (пустить текст "по пути"), а не как буквы АВ, замкнутые в рамку (параграфный текст - объект станет "рамкой" для текстового блока). Пишем необходимую надпись - шрифт и размер настраиваем по усмотрению (или по желанию заказчика). Написанную строчку необходимо выровнять:
не снимая выделения с текста, выберите инструмент "указатель" - и можете перемещать текстовую строку интерактивно, зажав, красный ромбовидный маркер левой кнопкой мыши. Или пошагово сдвигайте строчку, нажимая команды на панели опций - красным обведен "сдвиг вдоль пути", оранжевым - "оторвать от пути" (вверх-вниз).
ВНИМАНИЕ! в 12 версии инструментом "указатель" можно совершить интерактивный сдвиг только ВДОЛЬ пути, а в 13 версии Корел интерактивно не только можно двигать текст вдоль пути, но и отрывать от пути. Плюс еще работает и выравнивание по центру:
7. Нижняя строка (если это отдельная строка) должна читаться без "выворачивания" головы, как в обычном тексте - смысл в том, что верхняя строчка просто дугообразно изгибается вверх, а нижняя - вниз. Пишем строчку, как в пункте 6, но мысленно ее "переворачиваем". После написания строчки жмем СЮДА:
Выравниваем так же, как в пункте 6. Обращаю внимание пользователей 12 и 13 версии Корел: в 12 версии эта кнопка только ОДНА, активна она при выделении текста, идущего по пути, ИНСТРУМЕНТОМ "УКАЗАТЕЛЬ". На панели опций это крайняя справа кнопка. Она просто размещает надпись с другой стороны пути. В 13 версии эту опцию завязали с принципом "отражения". Поэтому необходимо нажать ОБЕ кнопки, показанные на скриншоте, если вы не хотите, чтобы надпись осталась зеркальной.
Еще один важный момент: межбуквенное расстояние в тексте, пущенном "по пути", так или иначе искажается. Здесь - в верхней строчке буквы слегка "разъехались", а в нижней - слишком придвинулись друг к другу. Для коррекции можно выбрать инструмент "форма" и потянуть за выделенный на скриншоте маркер: влево - межбуквенное расстояние сокращается, вправо - увеличивается. Можно так же чуть сдвинуть отдельные буквы, если они визуально "отваливаются" от основного текстового блока или, напротив, "прижимаются" друг к другу.
Можно еще добавить декоративные элементы - точки, полосы, звездочки - на "стыке" верхней и нижней надписи.
В конце работы необходимо проверить соответствие макета техническим требованиям конкретного предприятия, которое будет изготавливать печать. Говоря простым языком - существует некая "минимальная толщина" линии, которую способна воспроизвести та или иная аппаратура. Эту толщину необходимо выяснить заранее. Проверка делается элементарно - всей печати назначается контрастная (красная, к примеру) обводка, где толщина контура - тот самый "минимум". Если контур не пересекает сам себя и не наезжает на другие элементы макета - работа выполнена корректно. В противном случае необходимо вносить исправления. Необходимый минимум - это толщина самих элементов и промежутков между ними, о чем тоже важно помнить. Еще очень важно - чтобы отдельные элементы печати не пересекали друг друга.
Да - если вместо двух строчек текста идет одна длинная (типа - "младший помощник старшего дворника по уборке самых противных помещений"), то в этом случае "выворачивание головы" не страшно - подобный текст пишется одной строкой по кругу.
ОБЯЗАТЕЛЬНО - при сдаче макета на изготовление, превратите все объекты (особенно это касается текста) в кривые, или приложите к макету файлы с использованными шрифтами.
На примере создания иллюстрации можно понять основные приемы работы с Blend Tool, а также некоторые нюансы, которые следует учитывать для достижения положительных результатов. Это не прямое руководство, это лишь способ, один из многих, который позволяет понять алгоритм основных действий и решать в дальнейшем более сложные и конкретные задачи.
Не обычное применение Blend Tool.
На примере создания иллюстрации можно понять основные приемы работы с Blend Tool, а также некоторые нюансы, которые следует учитывать для достижения положительных результатов. Это не прямое руководство, это лишь способ, один из многих, который позволяет понять алгоритм основных действий и решать в дальнейшем более сложные и конкретные задачи.
Свеча на рисунке выглядит достаточно реалистичной, для ее создания использовалась техника описания ниже. Забегая вперед, скажу что время, затраченное автором не превышает одного часа, в рисунке использовалось шестнадцать нарисованных вручную элементов, все остальное сделано автоматически инструментом Blend Tool.
Для начала определимся с основными формами. В данном случае это пламя, ореол света, фитиль и собственно свеча. Те самые шестнадцать элементов это парные объекты, начальные и конечные, между которыми и производится операция перетекания, благодаря чему цвета плавно распределяются и рисунок выглядит реалистично. Это не маловажный аспект, цвет конечного (в данном случае внешнего) объекта языка пламени должен совпадать с цветом начального (внутреннего) объекта ореола, а цвет конечного объекта ореола с цветом фона.
Инструментом Bezier Tool по контрольным точкам нарисуем кривую. Следует отметить, что операции с кривыми требующие определенной точности нужно проводить именно Bezier Tool или Pen Tool, и изначально рисовать прямыми линиями, то есть определить на глаз где должны находится узлы и соединить их прямыми линиями. Инструмент Freehand Tool здесь не подойдет из-за неточности. Итак, когда линия проведена, делаем двойной клик на инструменте Shape Tool, двойной клик выделит все узлы элемента и все линии легко сделать кривыми командой Convert Line To Curve на панели свойств (Property Bar) активной при выбранном инструменте. Оставив активным инструмент Shape Tool отредактируем кривую до нужного вида, для хорошего перетекания важно чтоб все было плавно.
Не торопитесь с построением следующего объекта, здесь есть один важный нюанс. В идеале начальный объект дублируется и путем редактирования превращается в конечный. Дублируем кривую нажатием «+» на цифровой клавиатуре и инструментом Shape Tool тянем узлы на нужные позиции, с помощью направляющих линии доводятся до нужной степени изогнутости. Таким образом, получается кривая с тем же количеством схожих по свойствам узлов, что обеспечивает бес проблемное выполнение операции перетекания (Blend).
Далее руководствуясь теми же принципами рисуются остальные элементы рисунка. Язык пламени достаточно сложный объект, в нем используется три пары кривых, три последовательных перетекания.
Когда все пути готовы можно приступать к выбору цветовой гаммы. Здесь тоже следует обратить внимание на некоторые нюансы. Например не следует осуществлять переход от темно-желтого к светло-желтому в системе CMYK таким образом: из C0:M20:Y100:K20 в C0:M0:Y60:K0, так как в промежутке появятся «грязные» цвета типа C0:M11:Y81:K11, что значительно испортит вид рисунка. Такой переход лучше осуществить в два этапа: из C0:M20:Y100:K20 в C0:M0:Y100:K0, а из последнего в C0:M0:Y60:K0. Это стоит запомнить, руководствуясь таким принципом строятся и качественные градиенты, программные средства не идеальны, не следует полностью доверять им в таком важном аспекте как работе с цветом. Здесь не стоит ленится и жалеть времени, это один из завершающих этапов создания иллюстрации, следует уделить ему внимание, по экспериментировать и получить впоследствии картинку с яркими и сочными цветами, достойную глянцевой обложки.
Подготовительный, рутинный и самый сложный этап работы закончен. Теперь осталось самая приятная часть – создание переходов между объектами, превращение набора плашек в фотореалистичную иллюстрацию.
Выбираем инструмент Interactive Blend Tool или открываем докер Effects>Blend, делаем переход от объекта к объекту вручную или выбираем пару и нажимаем кнопку Apply в докере. В зависимости от исходного размера рисунка устанавливаем количество шагов (Steps).
Проблем возникнуть не должно если все сделано правильно, но все же если что-то упущено вместо ровного перехода может возникнуть цепочка из непонятных «рваных» объектов, не имеющих на первый взгляд никакого отношения к оригинальным и тем более к задуманному. Не стоит отчаиваться, для настоящего профессионала нет проблем которые нельзя решить. Такая ситуация может возникнуть в двух случаях: пути объектов имеют разное направление или несовпадающие узлы (даже если узлов одинаковое количество). Первая проблема решается просто, инструментом Shape Tool выделяется один объект и инвертируется направление кривой командой Reverse curve direction на панели свойств. Если не помогло придется самому назначить начальные и конечные узлы перетекания (предварительно убедившись что их одинаковое количество), для этого у инструмента есть набор опций Miscellaneous Blend Options (иконка с плюсиком на Property Bar, или последняя в докере), а в нем функция Map Nodes. После клика по ней курсор превратится в изогнутую стрелку и на одном из исходных объектов отобразятся узлы в виде увеличенных квадратиков, после клика на одном из таких квадратиков активируется второй объект с аналогичным отображением узлов, теперь следует кликнуть по узлу соответствующему первому выбранному, и повторить если потребуется на всех контрольные точки, хотя на практике все стает на свои места после «синхронизации» двух-трех узлов. Функция Split тоже достаточно интересна, она позволяет выделить любой объект из уже сделанного перетекания и сделать его третьим (средним) исходным и произвести над ним манипуляции (изменить цвет, размер, форму и т.д.) таким образом изменив все перетекание, в некоторых случаях достаточно удобно.
И на последок хотелось бы отметить. Данная статья лишь иллюстрирует на небольшом примере возможности программы и ее инструментов. Многие пользователи CorelDRAW недооценивают возможности Blend Tool и пренебрегают ее использованием, но при хорошо освоенной технике и достаточной практике с помощью инструмента без особого труда можно создавать сложные фотореалистичные, технически грамотные иллюстрации и элементы дизайна. Пламя, хромовые, матовые и глянцевые поверхности, объемные предметы и фигуры, тени – все это далеко не полный перечень того что можно изобразить этой техникой.
Эта первая статья, которая открывает цикл статей о работе с графическим редактором Corel Draw. Думаю, они помогут всем желающим обучится работать с векторной графикой. Раскрыть для себя все возможности вектора.
Попробуем нарисовать время, а верней его оболочку в виде песочных часов.
Corel Draw. Рисуем часы.
Эта первая статья, которая открывает цикл статей о работе с графическим редактором Corel Draw. Думаю, они помогут всем желающим обучится работать с векторной графикой. Раскрыть для себя все возможности вектора.
Попробуем нарисовать время, а верней его оболочку в виде песочных часов.
1. Инструментом Ellipse Tool (F7) рисуем круг, для ровного круга зажимаем Ctrl, затем конвертируем круг в кривую Arrange-Convert to curves(Ctrl+Q)
взяв нижнюю точку, приспустим её вниз, как на рисунке!
2. Копируем этот овал (Shift+ тащим Pick Tool к середине объекта) и немного дорабатываем его форму, сделаем его немного тупее (кстати, скопируйте этот внутренний овал и положите его в уголок, он нам еще пригодится!).
3. выделим первые два объекта и скопируем их вниз (выделяем Pick tool, зажимаем Ctrl и тащим)
полученные объекты немного вытянем из верхней точки, как рисунке. На нём, кстати, не очень видно у вас должно быть поострее! Делаем мы это специально потому, что на наши будущие часы мы будем смотреть немного сверху!
4. Теперь инструментом Elipse Tool (F7) нарисуем овал, скопируем его и расположим как на рисунке, сверху инструментом Rectangle Tool рисуем прямоугольник!
5. Обрезаем кружками квадрат, для этого сначала выделяем круг, затем квадрат (зажав Shift) и щелкаем по кнопке Trim.
Повторяем это всё со вторым кругом.
6. Теперь выделим два больших овала и нажмем Weld! Смотрим, что получилось!
кстати, на этом этапе при объединении могут получиться лишние точки их надо удалить, и если надо поменять тип точки
7. Такой же трюк проделываем с внутренними овалами.
У нас уже есть колба для песка она конечно одна но будем называть её двумя объектами большой колбой и малой (внутренней).
Возьмите внутреннюю "колбу" и вырежьте отверстие. Но её не удаляйте!
8. Теперь берем опять инструмент Elise Tool (F7), рисуем овал, затем копируем его и размещаем две копии наверху,
чем выше круг тем он должен быть уже! Дорисуем два прямоугольника, как на рисунке!
9. Выделим пять последних фигур, скопируем и утащим вниз объекта ( отзеркалив их) и забудем о них на некоторое время!
10. Сосредоточим внимание на верхней части!
Объединим нижний овал с большим прямоугольником. Как объединять объекты вы уже знаете.
Теперь объединим средний овал и небольшой прямоугольник. Если вы зальёте эти объекты, получится как на рисунке.
11. Заливаем объекты инструментом Fountain Fill Dialog (F11) или кликаем по палитре сбоку левой кнопкой мыши.
Если вдруг у вас объекты будут расположены в другой последовательности, то для того что бы верхний овал был самым верхним, жмем Shift+Page Up (самым нижним Shift+Page Down) если надо сместить только на один слой Ctrl+Page Up (Down)
Не уделяйте сейчас внимание заливке, о ней поговорим потом.
12. Теперь пошли вниз. Почему мы просто не копируем верхнюю часть? Потому что линия горизонта над предметом низ нам видно больше и вид там будет совершенно другой.
Рисуем заново все объекты или используете то, что вначале утащили вниз в запасник!
Берем овал, обратите внимание, как он расположен и растяните его по высоте, теперь мы видим его больше. Смело копируйте его в середину!
Вырежьте меньшим дырку в большем. Он обозначен желтым цветом! Меньший положим сбоку, потом еще попользуем!
13. Скопируем колечко и уменьшим его немного, смотрите как на рисунке. Для того, что бы было понятнее, назовём колечки 1(большее) и 2(меньшее).
Берем колечко 1-нарисуйте любую форму и обрежьте им колечко, можно обрезать тем овалом, что мы отложили. Обратите внимание на уголки!
14. Берем запасное кольцо 2, располагаем, как на рисунке затем рисуем овал и обрезаем им колечко, с помощью Intersectin. Полученная форма выделена зеленым. Теперь совместим их.
Это будет наше преломление стеклом. Если бы у нас был фон с узорами, он бы тоже должен был преломиться!
15. Дальше уже известным нам методом объединения и обрезки, получаем из прямоугольника и овала, нижнюю часть подставки. Помним что овал у нас теперь очень широкий.
16. Дорисовываем основание подставки тем же методом, что и верх. Здесь используется объединение готовых форм потому что нам важно сделать симметричный объект. Возьмем отложенный овал и подложим его в самый низ!
17. Вот почти всё готово! Меньшую "колбу" заливаем и делаем ей прозрачность инструментом Interactive transparenci Tool
Заливаем все, чтоб нам было понятно, что это у нас такое! А это часы без песка!
18. Теперь рисуем сам песок. Сначала рисуем овал, наклоняем его, на рисунке песок сыплется немного наклонно.
Затем рисуем прямоугольник. Сначала выделяем малую ”колбу”, затем новоиспеченный прямоугольник и жмем Intersect!
Подгоняем точки по узкой форме и заливаем цветом песка. Можно продлить этот объект вниз и нарисовать как бы падающую струйку песка. Добавим несколько песчинок для декоративности.
19.На самом верхнем овале песка нарисуем поменьше, зальем более темным цветом и применим интерактивное перетекание Interactive Blend Tool.
Ниже нарисуем небольшую горку упавшего песка. И заливаем просто градиентной заливкой.
20. А теперь самое важное - рисуем блики. Чем больше бликов, тем лучше! Мы можем скопировать меньшую колбу и деформируя её по нескольким точкам также добавить блики. Очень удобно брать её как основу, потому что блики должны идти именно по её форме. Здесь нам пригодится отложенный в начале овал, его тоже удобней подгонять по форме колбы.
Рисуем мелкие блики, деформируя круги по точкам! Затем заливаем и применяем прозрачность.
21. Теперь дорабатываем заливку.
Добавим тени!
Рисуем овал, добавляем тень инструментом Interactive Droр Shadow Tool. Отделим тень от объекта Ctrl+K, удалим овал.
Таким же способом нарисуем тень на верхней подставке.
Еще можно добавить опорные ножки. Рисуют их так же как всё, объединяя квадрат и овал.
В этом уроке изложен принцип рисования подобной формы вы можете усложнить или облегчить саму форму, добавить красивых деталей, прорисовать блики, инкрустировать корпус камушками... В общем, фантазируйте!
Главное о чем стоит упомянуть это, что ваш хранитель экрана будет работать в фоновом режиме и он не должен мешать работе других запущенных программ. Поэтому сам хранитель должен быть как можно меньшего объема. Для уменьшения объема файла в описанной ниже программе не используется визуальные компоненты Delphi, включение хотя бы одного из них приведет к увеличению размера файла свыше 200кб, а так, описанная ниже программа, имеет размер всего 20кб!!!
Технически, хранитель экрана является нормальным EXE файлом (с расширением .SCR), который управляется через командные параметры строки. Например, если пользователь хочет изменить параметры вашего хранителя, Windows выполняет его с параметром "-c" в командной строке. Поэтому начать создание вашего хранителя экрана следует с создания примерно следующей функции:
Поскольку нам нужно создавать небольшое окно предварительного просмотра и полноэкранное окно, их лучше объединить используя единственный класс окна. Следуя правилам хорошего тона, нам также нужно использовать многочисленные нити. Дело в том, что, во-первых, хранитель не должен переставать работать даже если что-то "тяжелое" случилось, и во-вторых, нам не нужно использовать таймер.
Процедура для запуска хранителя на полном экране - приблизительно такова:
Во-первых, мы проинициализировали некоторые глобальные переменные (описанные далее), затем прячем курсор мыши и создаем окно хранителя экрана. Имейте в виду, что важно уведомлять Windows, что это - хранителя экрана через SystemParametersInfo (это выводит из строя Ctrl-Alt-Del чтобы нельзя было вернуться в Windows не введя пароль). Создание окна хранителя:
Теперь окна созданы используя вызовы API. Я удалил проверку ошибки, но обычно все проходит хорошо, особенно в этом типе приложения.
Теперь Вы можете погадать, как мы получим handle родительского окна предварительного просмотра ? В действительности, это совсем просто: Windows просто передает handle в командной строке, когда это нужно. Таким образом:
Как Вы видите, window handle является вторым параметром (после "-p").
Чтобы "выполнять" хранителя экрана - нам нужна нить. Это создается с вышеуказанным CreateThread. Процедура нити выглядит примерно так:
Нить просто заставляет обновляться изображения в нашем окне, спит на некоторое время, и обновляет изображения снова. А Windows будет посылать сообщение WM_PAINT на наше окно (не в нить !). Для того, чтобы оперировать этим сообщением, нам нужна процедура:
Если мышь перемещается, кнопка нажала, мы спрашиваем у пользователя пароль:
Это также демонстрирует использование registry на уровне API. Также имейте в виду как мы динамически загружаем функции пароля, используюя LoadLibrary. Запомните тип функции?
TVSSFunc ОПРЕДЕЛЕН как:
Теперь почти все готово, кроме диалога конфигурации. Это запросто:
Трудная часть -это создать диалоговый сценарий (запомните: мы не используем здесь Delphi формы!). Я сделал это, используя 16-битовую Resource Workshop (остался еще от Turbo Pascal для Windows). Я сохранил файл как сценарий (текст), и скомпилированный это с BRCC32:
Почти также легко сделать диалоговое меню:
После того, как пользователь выбрал некоторые установочные параметры, нам нужно сохранить их.
Загружаем параметры так:
Легко? Нам также нужно позволить пользователю, установить пароль. Я честно не знаю почему это оставлено разработчику приложений ! Тем не менее:
Мы динамически загружаем (недокументированную) библиотеку MPR.DLL, которая имеет функцию, чтобы установить пароль хранителя экрана, так что нам не нужно беспокоиться об этом.
TPCPAFund ОПРЕДЕЛЕН как:
(Не спрашивайте меня что за параметры B и C ! :-)
Теперь единственная вещь, которую нам нужно рассмотреть, - самая странная часть: создание графики. Я не великий ГУРУ графики, так что Вы не увидите затеняющие многоугольники, вращающиеся в реальном времени. Я только сделал некоторые ящики.
И последнее - глобальные переменные:
Затем исходная программа проекта (.dpr). Красива, а!?
Ох, чуть не забыл! Если, Вы используете SysUtils в вашем проекте (например фуекцию StrToInt) вы получите EXE-файл больше чем обещанный в 20k. :) Если Вы хотите все же иметь20k, надо как-то обойтись без SysUtils, например самому написать собственную StrToInt процедуру.
Если все же очень трудно обойтись без использования Delphi-форм, то можно поступить как в случае с вводом пароля: форму изменения параметров хранителя сохранить в виде DLL и динамически ее загружать при необходимости. Т.о. будет маленький и шустрый файл самого хранителя экрана и довеска DLL для конфигурирования и прочего (там объем и скорость уже не критичны).
Вы научились немного рисовать, можете нарисовать не сложный баннер. Но вам кажется, что ваш баннер не очень выразителен и заметен. Хочется сделать его живым. Но вы не знаете, как делаются анимированные баннеры. Это не беда в этой статье вы узнаете оживлять баннеры при помощи Adobe Image Ready.
Оживляем баннер при помощи Adobe Image Ready.
Вы научились немного рисовать, можете нарисовать не сложный баннер. Но вам кажется, что ваш баннер не очень выразителен и заметен. Хочется сделать его живым. Но вы не знаете, как делаются анимированные баннеры. Это не беда в этой статье вы узнаете оживлять баннеры при помощи Adobe Image Ready.
Для этого возьмем три незатейливые картинки :
Будем создавать анимированную кнопку, где надписи будут чередоваться. Таким образом, можем написать маленькую рекламную фразу.
Теперь, откроем Image Ready. File - Open. Выделяем мышкой нужные рисунки. И нажимаем кнопку, открыть. Все три рисунка откроются сразу.
Теперь берем один из рисунков и с помощью Marquee Tool весь его выделяем.
Делаем Edit - Copy. Затем берем окошко с другим рисунком и переносим его туда. Edit - Paste. Остался еще один рисунок, берем его, копируем, и отправляем туда же, куда и предыдущие. Таким образом, должен получиться такой милый рисунок с тремя слоями (для тех, кто не знал, вызывается окошко со слоями так: Window - Show Layers):
На этом этап начальной подготовки закончен. Конечно, можно и редактировать все три слоя (ну, там подрисовать, что-нибудь), в этом случае учтите: Значок кисти стоит напротив редактируемого слоя, значок глаза - напротив того слоя, который мы видим.
Теперь откроем окошко с опциями для анимации: Window - Show Animation.
Жмем на выделенный значок три раза (если навести на него мышкой, то выскочит надпись Duplicates Current Frame - дублирование текущего кадра и подобные подсказки везде). В итоге получилось четыре кадра.
На всех четырех кадрах виден тот слой, напротив которого стоит "глаз". Теперь, оперируя "глазом" для каждого кадра выберем нужную картинку (не забывайте мышкой переключаться с кадра на кадр):
Теперь надо установить, сколько секунд или долей секунд будет показываться каждый кадр. Куда жать - выделено красным.
Можно выбрать нужное вам (no delay - без задержки, other - выскочит табличка, где вы можете указать свое время, если нужного в списке не оказалось).
Осталась самая малость - установить сколько раз прокрутятся все кадры:
Once - один раз, Forether - все время будут крутиться, Other - установите столько раз, сколько вам нужно. Можно просмотреть, что получилось прямо на месте, нажав кнопку Play.
Сохраняем то что получилось (File - Save Optimized as) и наслаждаемся (только не забудьте перед сохранением просмотреть как картинка оптимизированная будет выглядеть, установить параметры оптимизации, а то ерунда получиться может...).
Откроем замечательную векторную программу Adobe Illustrator и попробуем нарисовать кусочек сыра (если вы не знаете, что такое векторный и подобные вещи, то читайте статью «Первые шаги - компьютерная графика и графические редакторы»).
Изучаем векторную графику (Adobe Illustrator).
Откроем замечательную векторную программу Adobe Illustrator и попробуем нарисовать кусочек сыра (если вы не знаете, что такое векторный и подобные вещи, то читайте статью «Первые шаги - компьютерная графика и графические редакторы»).
Для начала нужно создать новый документ (лист бумаги, на котором будем рисовать). В меню выбираем File - New...
Выбираем нужные размеры документа, и наживаем OK, чтобы его создать (в данном случае, взяты значения, те, что предложил Иллюстратор по умолчанию).
Так как рисуем сыр с нуля и еще не умеем, то воспользуемся сыром образцом (будем срисовывать).
Чтобы поместить не векторное изображение на лист, выбираем в меню: File - Place... - выбираем рисунок, который надо разместить на листе.
Прежде чем начать работать с сыром, его надо увеличить. Чтобы сделать саму картинку с сыром больше, надо кликнуть по ней левой кнопкой мыши - таким образом, выделится объект и вокруг него появится рамочка. Потянем за уголок - и таким образом можно изменить размер картинки. Чтобы при этом картинка не деформировалась и сохраняла пропорции, то придерживаем, когда тянем за уголок, клавишу Shift на клавиатуре.
Чтобы изменить видимый размер картинки (приблизить - отдалить) - выберем инструмент лупа (zoom tool) на основной панели инструментов. Этот инструмент, наводим на картинку, кликаем левой кнопкой мыши - изображение приблизится. Если наоборот, отдалить, то кликаем мышью по изображению, придерживая кнопку Alt на клавиатуре. Чтобы снова работать с изображением (т.е. выйти из режима лупы), надо выбрать другой инструмент на панели инструментов (например, следующий инструмент, с которым вы будете работать).
Итак, видимый размер куска сыра увеличен, чтобы было удобнее его обрисовывать, теперь фиксируем картинку с сыром на листе, чтобы, когда с ней начнем работать, она никуда не сдвинулась нечаянно. Для этого выбираем на панели инструментов черную стрелку (selecтion tool), после чего кликаем по рисунку, чтобы его выделить (всегда, объект, с которым работаем, должен быть выделен), затем в меню выбираем Object - Lock - Selecтion.
На панели инструментов выбираем инструмент перо (pen tool), с помощью него обрисовываем сыр. Но прежде чем, обрисовать сыр, надо убрать заливку объекта. Квадраты - белый и черный - внизу панели инструментов, указывают, какой цвет будет у объекта, который рисуем - он будет белым, и вокруг него будет черная граница.
Чтобы изменить цвет границы или цвет объекта - кликаем два раза по нужному квадрату (если нужно изменить границу - то по черному, в данном случае, если цвет объекта - по белому), и появится окошко, где можно выбрать другой, нужный цвет. Но в этом случае, другой цвет не нужен, надо, чтобы объект не был закрашен, и было видно только границу (контур объекта) - так будет удобнее срисовывать. Поэтому одним кликом мыши выбираем белый квадрат, и под ним выбираем иконку с квадратом, перечеркнутым красной полосой - таким образом, говорим иллюстратору - отмени заливку объекта белым цветом, и он это сделает.
Теперь начнем обрисовывать сыр, сначала светлую верхнюю плоскость, а затем нижнюю. Кликнем, допустим, в одном из уголков сыра, затем, повторяя контур сыра, кликаем дальше. Чтобы все линии (отрезки, которые появятся при этом), были прямыми, то когда надо кликнуть мышью, чтобы создать очередную точку, не отпуская левую клавишу мыши, тогда удерживая ее и двигая мышью, можно выгнуть отрезок, как угодно, и таким образом более точно обвести сыр.
Если был сделан отрезок кривым (выгнутым), то прежде чем продолжать обрисовывать объект, надо кликнуть левой кнопкой мыши по последней точке, которую поставили, и только затем создавать новую точку и отрезок. Если этого не сделаете, то следующий отрезок выгнется подобно предыдущему.
Если не верно поставлена точка, если отрезок как-то не так выгнут, то чтобы отменить действие, нажимаем на клавиатуре Ctrl+Z. Если отменили предыдущее действие ошибочно, то нажмите Ctrl+Shift+Z, чтобы вернуть все обратно.
Чтобы завершить обрисовывать верхнюю часть сыра надо обязательно закончить в той точке, с которой начали, чтобы получить цельный объект (т.е. замкнуть наш контур).
Аналогично первому создаем второй контур (объект).
Чтобы нагляднее было видно, что на картинке два контура: второй, недорисованный контур, немного сдвинут в сторону. При этом создание объекта не было прервано. Что делать, если надо довести контур объекта, после того как прервались? Чтобы продолжить работу, надо ткнуть кнопкой мышки в точку объекта, на которой прервались и можно дорисовывать объект дальше (естественно, при этом на панели инструментов должно быть выбрано перо, если надо дорисовать объект; если же надо подвигать объект, то переключаемся на selecтion tool - черная стрелка, только не забыть переключаться на нужные инструменты, прежде чем выполнять какие-то действия над объектом).
Когда нарисованы нужные объекты, следует их закрасить. Как это делается, объяснялось ранее: выделяем объект, и внизу панели через квадраты оперируем цветом. Есть и другие пути: можно вызвать цветовую палитру, чтобы она всегда на экране: Window - Color (опять же выделяем объект, прежде, чем дать ему цвет). Также можно, выделив объект, выбрать инструмент пипетка (eyedroррer tool) на панели инструментов, и ткнуть пипеткой по другому объекту на листе (например, по картинке с сыром, чтобы дать новому объекту такой же цвет, как цвет куска сыра, с которого срисовываем).
На данном примере три куска сыра: один - с какого срисовываем, второй - кусок сыра, которому дали такие же цвета, как сыру на картинке, но т.к. цвета не сырные, заплесневелые, то были подобранны другие цвета, которые можно видеть на третьем куске сыра. Если еще трудно сделать последнее самим, то сохраните картинку с примером на компьютере, поместите ее на лист бумаги в иллюстраторе и при помощи пипетки, дайте вашему куску сыра такие же яркие и приятные цвета, как у третьего куска сыра на картинке с примерами.
Как перемещать и копировать нарисованные объекты? Перемещать объекты надо следующим образом: выделить объект, предварительно выбрав инструмент selecтion tool (черная стрелка) на панели инструментов, а затем при помощи мышки перетащить выбранный объект. Если надо переместить сразу несколько объектов: опять же выбираем selecтion tool, и далее либо удерживая левую кнопку мыши выделяем все объекты, либо кликаем на нужные нам объекты поочередно, удерживая клавишу Shift на клавиатуре. После того как были выделены все нужные объекты, их можно перемещать, куда угодно. Также, выделив объекты, можно скопировать их Edit - Copy. Чтобы вставить скопированные объекты на лист - Edit - Paste. Чтобы удалить, выделенные объекты - Edit - Clear.
После придания куску, который рисуем, нужные цвета, рисуем на нем сырные дырки, чтобы придать ему еще большую схожесть с сыром. Дырки не будем срисовывать с фотографии куска сыра, а нарисуем сами. Дырка - это круг. Круги рисуют при помощи инструмента elliрse tool. Чтобы найти этот инструмент на панели инструментов надо кликнуть мышкой по инструменту квадрат (rectangle tool), удерживая мышку, выпадет меню, в котором надо выбрать elliрse tool. Далее кликаем на нашем листе в любом месте и рисуем круг.
Нарисовав круг, даем ему цвет более насыщенный и темный, чем боковая сторона сыра (т.к. дырка для этой стороны, а дырка она визуально более темная по цвету, чем сама сторона). Если переместить, нарисованный круг, на кусок сыра, то станет понятно, что он еще не смотрится дыркой, не хватает "глубины", так что надо приблизить круг (дырку) ближе к реальности, добавив ей бликов и теней.
Итак, скопируем круг, и вставим скопированное на лист (как это делается, рассказывалось ранее). Затем совместим круги так, как показано на рисунке (в итоге должно быть три круга - один исходный, и два которые, скопировав исходный круг, вставили на лист, а затем совместили между собой новые круги, как показано на рисунке):
Теперь порежем эти круги при помощи Pathfinder. Вызываем его через меню: Window - Pathfinder. Далее оба круга выделяем, и нажимаем в окошке Pathfinder инструмент Divide. Если сейчас попытаться подвигать круги, то обнаружите, что они слиплись в один объект. На самом деле, Divider порезал наши круги на много маленьких объектов, но для удобства, он их потом сгруппировал (вдруг захочется их передвинуть сразу куда-нибудь). Поэтому надо рассгруппировать все объекты. Выделяем нашу группу объектов, выбираем в меню - Object - Ungroup.
Если теперь попробовать мышкой подвигать круги, то видим, что их все-таки разрезали, и получили в итоге три очень интересных объекта: два полумесяца и объект похожий на дыню. Круги и резали, т.к. нужны были полумесяцы. Скопируем один из полумесяцев, вставим на лист, дадим ему цвет чуть бледнее, чем цвет круга, и переместим на круг, как показано на нашем рисунке (см. чуть выше).
Затем еще раз копируем полумесяц и вставляем его на лист, делаем его еще светлее, и переносим на наш круг, как показано на рисунке:
Теперь нужен другой полумесяц, зеркальный тем, что копировали до этого. Берем полумесяц, копируем, даем ему самый темный цвет по сравнению с другими объектами, перемещаем на круг так, как показано на рисунке:
Вот и все, сырная дырка готова, теперь надо переместим ее на сыр. Для этого надо сгруппировать все объекты, имеющие отношение к сырной дырке, чтобы потом было легче их копировать и перемещать при необходимости. Чтобы сгруппировать объекты, их нужно выделить, а затем группируем их, выбрав в меню Object - Group (если надо будет снова разбить объекты, отклеить друг от друга, то выделяем сгруппированные объекты, и при помощи уже знакомого Object - Ungroup).
Итак, переместили дырку на сыр, теперь скопируем ее, и вставим еще несколько новых дырок на боковую сторону сыра. Сделаем их размеры разными (как, уменьшать-увеличивать размер объекта говорили в начале статьи). В итоге, должны получить, вот такой сыр:
Чтобы сыр был похож на настоящий, добавим еще одну полудырку, а так же теней и рефлексов на края.
Для этого берем готовую дырку, копируем, вставляем на лист (отдельно от сыра), и затем при помощи Pathfinder и Divider ее ополовиниваем. Также копируем два полумесяца, которые потом, вставим на край сыра. Получаются две следующие картинки:
Теперь и половинку дырки, и два полумесяца немного развернем при помощи инструмента rotate tool. Края сыра идут немного под наклоном, и чтобы совместить дырки с краями куска сыра, их надо привести в соответствие. Теперь наложим их на кусок сыра, если надо еще чуть-чуть поразворачиваем, и в итоге должны получить следующее:
Итак, кусок сыра почти нарисовали, теперь надо нарисовать дырки для верхней плоскости (копируем уже имеющиеся дырки, и немного изменяем им цвет на посветлее, затем немного их трансформируем до овалов, и разворачиваем при помощи rotate tool):
Теперь еще для красоты можно нарисовать при помощи пера парочку рефлексов и теней, и сыр готов:
Можете идти ловить мышей. Хотя... умея рисовать картинки в Иллюстраторе, вам будет не до мышей.
Процесс создания cookies на ASP очень прост. После создания этих файлов, они будут храниться на компьютерах у посетителей вашего сайта. Одним из основных параметров у cookies является дата истечения срока их действия, т.е. expire date. Получается, что у вас, как у программиста, в руках жизнь этих файлов. Еще отмечу, что если не указать дату expire для cookies, то они существуют до тех пор, пока пользователь не закрыл свой браузер.
Для примера:
Сейчас возьмите и откройте свой любимый бразуер (мой выбор в пользу огненного лиса Firefox :) ) и вызовите страницу с cookie.
Теперь просто удалите в коде строку (1), закройте браузер и еще раз вызовите код. Как вы можете видеть, уже имя сайта не отображается.
Все дело в том, что мы не модифицировали дату истечения срока действия cookie и при закрытии браузера они были потеряны.
Теперь рассмотрим код с добавленной датой expiration date:
Теперь после закрытия браузера и повторного вызова кода можно видеть, что cookie по-прежнему продолжает существовать.
Позволю себе предоставить на конструктивный суд общественности список хорошо зарекомендовавших себя архитектурных решений и практик. Сегодня поговорим о базах данных MySQL.
Повелитель CHAR
Если есть возможность, используем поле CHAR для текстовых полей. И искать будет быстрее, и защита от дурака будет. Так, например, для MD5-хэша пароля это CHAR(32), для тикера валюты (USD, EUR) – CHAR(3). Есть ещё масса примеров: если ваше приложение работает с данными по аэропортам, то кандидатом на тип CHAR будет ICAO-код аэропорта (4 символа) или IATA-код (3 символа), если с банками, то код BIC.
Приручаем TIMESTAMP
Часто требуется хранить дату создания и/или модификации сущности (поля stamp_created и stamp_updated). Не все пользуются фреймворками типа Symfony, где система сама отвечает за их наполнение — и так как порой их актуальность обеспечивается вручную, были случаи, когда эти поля оставались просто пустыми — некогда было возиться. Можно объявить поле так, что этот функционал будет работать сам. Правда, в случае MySQL придётся выбирать: автоматически будет работать либо дата создания, либо дата модификации. Для этого нужно создать поле типа TIMESTAMP; в первом случае (created) указываем инициализацию текущим временем, во втором (updated) — указываем авто-обновление поля при каждой модификации текущей записи. Оба варианта умеет делать PHPMyAdmin.
Каскады FOREIGN KEY
Конечно, это касается не только MySQL. Удаление данных в иерархии сущностей можно автоматизировать с помощью каскадного удаления FOREIGN KEY (да, это банально, но часто на это кладут). Например, у меня в Rival Alert есть пользователи, у пользователей есть графики, у графиков есть данные. Без FOREIGN KEY функция удаления пользователя должна сначала удалить все данные по графикам этого пользователя, потом все его графики, и только потом — самого юзера. При использовании FOREIGN KEY вся соответствующая информация удалится сама, причем логикой на стороне сервера БД, и без дополнительных запросов от сервера приложений.
Кстати, FOREIGN KEY поддерживаются только в InnoDB-движке. Перейдя на него, вы получите возможность использовать транзакции, но потеряете полно-текстовый поиск (он в MyISAM).
Есть ещё идейка, которую держу про запас. В той же “Building Scalable Web Sites” пишут, что для ускорения работы приложения базу данных можно немножко де-нормализовать, например, рейтинги статей считать не налету на каждый запрос, а держать в отдельном поле таблицы статей уже в посчитанном виде и время от времени обновлять, ну или скажем вам нужно дублировать название/ссылку статьи в каждой записи рейтинга. Так вот идейка состоит в том, чтобы использовать CASCADE UPDATE для обновления полей в зависимой таблице — тогда целостность данных при такой денормализации будет выше.
INSERT + UPDATE в одном запросе
Частый кейс: если нет такого записи — вставить (INSERT), если есть — обновить для неё пару полей (UPDATE). Часто это решается через предварительный SELECT, чтобы установить факт наличия такой записи. Можно сделать это одним запросом, лишь бы был PRIMARY KEY или UNIQUE KEY.
Приведу пример. В том же Rival Alert у меня у одного графика за один день может быть только одно значение (такое вот условие). Сколько раз в базу будет класться это значение — не важно. Так вот, если значения “за сегодня” нет — мы его добавляем, если есть — обновляем (в поле `date` хранится текущая дата; пара `id_graph`+`date` — уникальна для каждой записи, что было указано через UNIQUE при создании таблицы).
Кстати, чтобы запрос стал красивее, и вам не нужно было два раза указывать значение вставки/обновления (в моём примере — это 4444), можно в разделе UPDATE указать, что нужно взять значение из раздела INSERT:
Оба запроса делают то же самое, только теперь вам нужно будет лишь в одном месте подставлять фактическое значение, а не в нескольких.
И последнее. Если вам нужно работать по сути с одними и теми же данными, но из разных баз данных, посмотрите в сторону Federated Storage Engine. Полезно иметь такую фичу на примете.
Надеюсь, эта заметка поможет вам кода писать меньше, а успевать больше.
Событие - это какое-либо действие, осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке - осуществляется событие, его перехватывает специальный обработчик и перенаправляет нас на нужную страницу; при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее...
а). onmouseout и onmouseover
Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание на строку состояния. Вы должны увидеть там надпись с объяснением значения кнопки. Теперь отведите курсор и строка состояния очистится.
Содержимое строки состояния хранится в переменной window.status. Переменная это некоторый объект (можно представить себе ящик), значение которого (содержимое которого) можно изменять. Изменение значения осуществляется операцией присваивания (=), а выглядит она следующим образом:
имя_переменной = "значение"; (какие использовать кавычки: одинарные или двойные значения не имеет)
Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить переменной window.status нужное нам значение (подсказку к кнопке), а когда курсор будет убран - присвоить пустую строку("").
Вся задача сводится к тому, чтобы определить когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" - onmouseover, а "отведение курсора" - onmouseout.
Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover - onmouseover. И в итоге мы получаем следующее определение кнопок:
Как Вы видите, атрибут onmouseover имеет в качестве значения JavaScript-код: window.status='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover - onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие(присвоение значения переменной window.status). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события - onmouseout выполняет код, содержащийся в атрибуте onmouseout.
То же самое и со второй кнопкой.
б). <a href="Java Scriptfunction()">Function</a>
Теперь щелкните на ссылке и откроется окошко с подсказкой. Но заметьте, что окно небольших размеров и у него нет панели инструментов - такого силами html не сделаешь! В данном примере мы имеем окно размером 300x200, без панелей инструментов, содержащее документ help.html.
Для того чтобы создать такое окошко существует следующий JavaScript-код:
где:
1. helpWindow - это имя переменной (как window.status, только в данном случае имя выбирается произвольно). Эта переменная нужна для последующей работы с окном (например, закрыть его нестандартным способом - с помощью JavaScript-сценария).
- Зачем? Не проще ли указывать просто имя открывающейся страницы, например help.html?
- А если у нас две копии одной и той же страницы? Или две страницы с одинаковым именем(например, в разных папках)? Вот для того, чтобы не перепутать страницы и свободно работать именно с тем окном с которым предполагаешь и сделанно, так чтобы "окно" присваивалось переменной, так как имя переменной можно выбрать любое.
2. window.open(что-то) - это функция. Функции выполняют определенную задачу, в данном случае window.open() открывает новое окно.
3. help.html - это страница, которую нужно открыть.
4. "" - В кавычках должно быть имя окна, но оно нам не пригодится, поэтому там нулевая строка. В следующих кавычках указываются "параметры открываемого окна": оно не должно содержать панели инструментов (toolbar=0) и должно быть шириной 300 пикселей, а высотой - 200 (width=300,height=200, соответственно).
Теперь все, что нужно это по событию "щелчка" выполнить этот код, однако есть два "но". Во-первых строка очень длинная, чтобы присвоить ее какому-либо атрибуту - будет некрасиво смотреться, да и вызывать неудобства при чтении кода страницы. Во-вторых, первоначальное предназначение ссылки - это переход на другую страницу, но нам переходить никуда не нужно, нам нужно выполнить вместо этого JavaScript-код.
Первое решается написанием функции. Как я уже говорил функция выполняет некоторую задача, причем для использования функции достаточно указать ее имя. Можно не только использовать предопределенные(функции, которые имеется в языке и без нас), но и писать их самому. Обычно функции определяются(пишутся) в разделе HEAD документа, в котором используются:
"function" значит, что дальше будет написана наша функция; help() - это имя функции (оно будет указываться вместо тела функции (между { и })).
Вторая проблема решается тоже довольно просто. Адрес страницы указывается в атрибуте href, а нам надо выполнить JavaScript код вместо перехода по ссылке:
"Java Script" означает, что дальше должен идти JavaScript-код, и что он должен выполняться вместо стандартного перехода по ссылке. В данном случае наш JavaScript-код - это созданная нами функция help().
в). onclick
Нам не остается ничего более, как закрыть окно со справкой. Для этого воспользуемся кнопкой "Закрыть". Но нас интересует то, как работает эта кнопка, а имеет она следующий вид:
Дабы закрыть окно мы сделали щелчок(Click) на кнопке "Закрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Помните мы открывали окно? Мы писали window.open(), а здесь тоже самое только window.close(). window - это текущее окно, а close() - закрыть.
Это одно из наиболее частоупотребляемых событий.
г). onfocus и onblur
Ну что ж будем ближе подбираться к вводу требуемой от нас информации.
Как я уже говорил: элемент получает фокус когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите Ваше имя") автоматически выделялся и посетитель мог его удалить одним нажатием на del, а не удалять по одному символу, или выделять текст вручную. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. Для выделения текста используется метод select(). То есть атрибутом к полю надо прописать: onfocus="this.select();", this обозначает, что выделение должно происходить именно в этом текстовом поле (а можно прописать путь и к другому, но это не целесообразно).
А теперь попробуйте ничего не изменяя (или все удалив) убрать фокус (например, щелкнув в любом месте окна, или нажав Tab). Это событие blur, я прописал в нем выполнение функции: onblur="check();". Сама же функция имеет следующий вид (в разделе head страницы с формой между <script> и </script>):
document.forms[0].name.value - это то, что введено в текстовое поле. document - это текущий документ, forms[0] - первая форма на нашей страницы (отсчет с нуля), name = имя поля (задается атрибутом name (<input name="name">)), а value это и есть нужное нам значение (то, что введенно в текстовое поле, к которому м ы и написали путь). Введенное в поле мы присваиваем переменной val (var значит, что дальше идет имя переменной), чтобы в дальнейшем каждый раз не писать весь путь целиком.
Следующее это оператор if(если). Он выглядит следующим образом:
Мы сравниваем содержание переменной val с пустой строкой ('') и с начальной строкой ('Введите Ваше имя'). Обратите внимание, что сравнение не как в математике(с одним =), а сравниваются двума ==. || - или. Функция alert выводит окно с ошибкой (то, что в скобках - это текст ошибки). То есть:
И на всякий случай приведу целиком строку с кодом поля input:
д). onreset и onsubmit
Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой reset. Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно, и еще он будет долго материться. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.
Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто напросто надо вернуть обработчику события значение false, то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.
Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали ничего не изменится (разве что Вы JavaScript отключите).
Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют, заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь. Один из примеров базовой верификации я привел, когда объяснял событие blur - подобную функцию можно использовать и здесь. Тогда <form> будет содержать атрибут: onsubmit="return function();".
Но не забывайте, что нельзя ограничиваться одной лишь проверкой языком JavaScript, ибо его поддержка может быть отключена у посетителя, и тогда все Ваши труды по защите...
е). onmousedown и onmouseup
Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая - pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при при щелчке на ней(this) значение атрибута src (путь к картинке) тега <img> менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание - onmouseup, то есть здесь все просто:
ж). onload, onunload и onabort
Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. Если честно я не вижу сколько бы реального применения этому событию, зато я нашел, что можно сделать с onunload. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.). Откройте еще раз окошко справки. Допустим, что пользователь прочитал справку, и хочет отправить форму, или уйдет с нашего сайта, но при этом он забыл закрыть это маленькое окошко с подсказкой, мы на выходе закроем его сами. А для этого тег <body> (у начального документа) у нас будет выглядеть следующим образом:
Вы должны бы помнить, что helpWindow это имя нашего окна (ведь именно этой переменной мы присваивали его открытие: helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200")), а метод close() закрывает это окно. Некоторые нехорошие люди используют это событие, чтобы когда посетители уходили с его страницы, появлялись какие-либо окна, так называемые pop-up.
onabort - атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши плане. И в качестве предупреждения у нас может быть написано нечто похожее на
ЗАКЛЮЧЕНИЕ
Есть некоторые события о которых я здесь нарочно не упомянул, потому что не нашел им достойного применения, но Вам они возможно пригодятся, поэтому я уделю им немного внимания.
onchange - обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>) (например, когда Вы вводите или удаляете очередную букву какого-либо текстового поля).
onselect - обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области.
onerror - обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки), либо ошибкой времени выполнения (например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо - это и есть одна из ошибок времени выполнения).
Так же не забывайте, что я привел лишь по одному примеру из десятков возможных на каждое событие. Здесь главное Ваша фантазия и навыки. Например, события mouseout, mouseover, mouseup, mousedown часто используются для создания выпадающих меню и других визуальных эффектов, но это весьма трудный материал, который требует более глубоких знаний, причем не одного JavaScript.
Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, EPS, WMF или SVG.
Векторные графические редакторы и векторная графика.
Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, EPS, WMF или SVG.
Векторные графические редакторы, позволяют вращать, перемещать, отражать, растягивать, скашивать, выполнять основные аффинные преобразования над объектами, изменять z-order и комбинировать примитивы в более сложные объекты.
Более изощрённые преобразования включают булевы операции на замкнутых фигурах: объединение, дополнение, пересечение и т. д.
Наиболее известные векторные редакторы.
Inkscape (Инкскейп) — векторный графический редактор, удобен для создания как художественных, так и технических иллюстраций.
OpenOffice.org Draw — векторный графический редактор, по функциональности сравнимый с CorelDRAW, входит в состав OpenOffice.org Skencil (бывший Sketch) - совместимый с UNIX системами, гибкий и мощный инструмент для иллюстраций, диаграмм и других целей. sK1 (форк Skencil) — редактор для работы с векторной графикой, распространяющийся на условиях LGPL, по набору функций схожий с CorelDRAW, Adobe Illustrator, Freehand и Inkscape.
Xara Xtreme for Linux - мощная, общая программа графики для платформ Unix, включая Linux, FreeBSD и (в развитии) РОТ-X.
Adobe Illustrator — один из популярных векторный графический редактор, разработанный и распространяемый фирмой Adobe Systems. Adobe Flash - программа разработки мультимедийного контента для платформы «Adobe Engagement Platform» (такого, как веб-приложения, игры и мультфильмы).
CorelDRAW — популярный векторный графический редактор, разработанный канадской корпорацией Corel. Текущая версия продукта — CorelDRAW Graphics Suite X4, доступна только для Microsoft Windows. Последняя версия для GNU/Linux — 9-я версия, выпущенная в 2000 году. В 2002 году вышла последняя 11-я версия для Macintosh.
Macromedia FreeHand — векторный графический редактор, разработанный фирмой Macromedia для Microsoft Windows и для Mac OS.
[center]Векторная графика.[/center]
Векторная графика — это использование геометрических примитивов, таких как точки, линии, сплайны и многоугольники, для представления изображений в компьютерной графике. Термин используется в противоположность к растровой графике, которая представляет изображения как матрицу пикселей (точек).
Современные компьютерные видеодисплеи отображают информацию в растровом формате. Для отображения векторного формата на растровом используются преобразователи, программные или аппаратные, встроенные в видеокарту.
Кроме этого, существует узкий класс устройств, ориентированных исключительно на отображение векторных данных. К ним относятся мониторы с векторной развёрткой, графопостроители, а также некоторые типы лазерных проекторов.
Термин «векторная графика» используется в основном в контексте двухмерной компьютерной графики.
Рассмотрим теперь способ хранения изображения векторной графики на примере окружности радиуса r.
Список информации, необходимой для полного описания окружности, таков:
1. радиус r;
2. координаты центра окружности;
3. цвет и толщина контура (возможно прозрачный);
4. цвет заполнения (возможно прозрачный).
Этот способ описания векторной графики имеет свои преимущества над растровой графикой.
Минимальное количество информации передаётся намного меньшему размеру файла, (размер не зависит от величины объекта).
Соответственно, можно бесконечно увеличить, например, дугу окружности, и она останется гладкой. С другой стороны, если кривая представлена в виде ломаной линии, увеличение покажет, что она на самом деле не кривая.
При увеличении или уменьшении объектов толщина линий может быть постоянной.
Параметры объектов хранятся и могут быть изменены. Это означает, что перемещение, масштабирование, вращение, заполнение и т. д. не ухудшат качества рисунка. Более того, обычно указывают размеры в аппаратно-независимых единицах, которые ведут к возможной наилучшей растеризации на растровых устройствах.
У векторной графики есть два фундаментальных недостатка.
Не каждый объект может быть легко изображен в векторном виде. Кроме того, количество памяти и времени на отображение зависит от числа объектов и их сложности.
Перевод векторной графики в растр достаточно прост. Но обратного пути, как правило, нет — трассировка растра обычно не обеспечивает высокого качества векторного рисунка.
Пример, показывающий эффект векторной графики при увеличении: (a) исходное векторное изображение; (b) иллюстрация, увеличенная в 8 раз как векторное изображение; (c) иллюстрация, увеличенная в 8 раз как растровое изображение. Растровые изображения плохо масштабируются тогда, как векторные изображения могут быть неограниченно увеличены без потери качества.
Векторная графика идеальна для простых или составных рисунков, которые должны быть аппаратно-независимыми или не нуждаются в фотореализме.
Image Styler - замечательная программа для создания графики для Web. Особенно эта программа нравиться новичкам (тем, кто никогда не имел дело с графическими редакторами, или толком в них не разбираются).
Графика без труда (Image Styler).
Image Styler - замечательная программа для создания графики для Web. Особенно эта программа нравиться новичкам (тем, кто никогда не имел дело с графическими редакторами, или толком в них не разбираются).
Открываем Image Styler. По умолчанию программа уже создала новый документ. Теперь надо предать этому документу необходимый размер. Для этого надо выбрать пункты Edit - Canvas Size - и появится табличка, в которой можно задать нужные размеры листа. Создадим лист побольше ( width - 600, а height - 500). Потом можно сохранить свое меню как угодно, одной картинкой или несколькими, поэтому не обязательно делать много документов.
Что можно нарисовать на первых страницах? – кнопки и несложный логотип.
Как создавать кнопки.
Вызываем меню с основными функциями, выбрав пункт в верхнем меню Window - Tools.
В появившемся меню видны изображения: квадрата, квадрата с закругленными краями, круга и многоугольника - берем одну из этих опций (пусть будет квадрат) и рисуем квадрат нужных размеров.
Чтобы квадрат, который рисуем на белом фоне, был виден, надо задать ему цвет. Для этого выбираем пункт меню (вверху) Window - Color - появится таблица с цветами. И в этой таблице ищем нужный цвет квадрата.
Можно задать цвет сразу нескольких объектов, для этого надо выделить их все. Если надо создать кнопку определенных размеров, то тогда надо выбрать пункт меню Window - Tranform - здесь можно задать положение квадрата относительно листа (X, Y), размеры квадрата в пикселях (W, H), вращение (rotation) в градусах и наклон (skew) относительно горизонтали или вертикали. Для первого раза понадобятся параметры высоты и ширины (width и height). Допустим, что кнопку надо сделать на основе многоугольника. Рисуем - получаем ромб. Как сделать, чтобы углов было больше (пятиугольник, шестиугольник и т.д.)? Или меньше (треугольник)? Идем в меню: Window - Properties. Для работы с объектом (ромбом), надо его выделить. Теперь можно сделать его пятиугольником (шести... и т.д.) - sides - этот параметр задает количество сторон многоугольника (максимум 10). Можно сделать его рамкой-контуром (outlinе) и снова наполненным (fill). Если сделать многоугольник контуром, то нужно задать толщину контура (width) в пикселях.
Для разных объектов properties (свойства) разные. Чтобы понять работу со свойствами надо с ними поэкспериментировать.
Вернемся к квадрату. Нарисовали, раскрасили, задали нужный размер. Теперь как его сделать кнопкой? Очень просто - Window - Styles. Появится окошко со стилями. Выделяем квадрат или квадраты и выбираем нужный стиль (с тенью, без тени и любой другой).
Сделать надпись на кнопке тоже не очень сложно. Вернемся к основному меню (Tools). Жмем кнопку с буквой Т - это означает текст. Теперь левой кнопкой мыши щелкаем в любом месте нашего "листа" (помните, текст такой же объект как квадрат, вы можете задать ему Стиль, поменять также цвет, задать вращение и так далее). Появится обычная табличка (стандартная для всех графических и текстовых редакторов) со свойствами только для текста. Выбираем нужный шрифт, нужный размер шрифта, нужное расстояние между буквами. Когда все готово, выделяем текст и перемещаем его так, чтобы он был на квадрате - кнопка с текстом готова.
Стайлер может не понимать русский шрифт. В таком случае пишется нужный текст русскими буквами в блокноте (или другом текстовом редакторе), копируется и вставляется в Image Styler. Это неудобно, но не надо делать картинкой очень много текста.
Чтобы создать идентичные кнопки, но с другими надписями - выделяется квадрат с текстом. Edit - Copy. Edit - Paste. Появится точно такой же квадрат с точно таким же текстом. Отодвигаем его на свободное пространство листа (или выравниваем относительно первой кнопки с надписью). А теперь надо только изменить текст на новой кнопке. Для этого два раза щелкаем левой кнопкой мыши по тексту и вставляем (пишем) новую надпись. Вот так вы очень быстро можно создать меню.
Теперь как сохранить полученный рисунок? Как задать нужный формат (jpg, gif, png)? И можно ли чтобы программа сама написала HTML код для этого рисунка?
Опции для Экспорта картинок: Window - Export. Здесь можно выбрать нужный формат, выбрать какого качества будет картинка. И самое интересное - можно еще до сохранения увидеть, как будет выглядеть картинка, когда ее экспортируют (active preview - только надо поставить галочку).
Теперь немного о логотипе. Его также можно создать с помощью Image Styler. Рисуется опять квадрат. Теперь выбирается пункт меню Window - Shapes. Выделить квадрат и придать ему нужную форму. С помощью этой опции можно создавать много разных рисунков, хотя и незатейливых.
Также можно импортировать текстуры, картинки, нарисованные не в Image styler: File - Place as Texture. Таким образом, можно задать текстуру для всего листа (фон), для отдельного объекта, только надо не забывать перед эти нужное выделять.
P.S. Image Styler уже довольно старая программа и Adobe отказалась от ее совершенствовании. Но не стоит расстраиваться программа-то функциональная, да и одно из новых детищ Adobe - Live Motion - как близнец похоже на Image Styler (+ имеет новые, упрощающие вашу жизнь возможности)..
С появлением компьютеров и специальных программ (графических редакторов), с помощью которых можно обрабатывать и создавать изображения, кажется, что каждый может научиться с легкостью делать качественные рисунки, однако, это не так. Графические редакторы – инструмент сложный, чтобы хорошо его освоить, уйдет много времени, кроме того, они сами по себе не создают за вас изображения. Чтобы сделать рисунок, вам нужны минимальные художественные знания, т.е. вы должны представлять, что такое перспектива, светотень, как создавать иллюзию объема и т.д.
Первые шаги - компьютерная графика и графические редакторы.
С появлением компьютеров и специальных программ (графических редакторов), с помощью которых можно обрабатывать и создавать изображения, кажется, что каждый может научиться с легкостью делать качественные рисунки, однако, это не так. Графические редакторы – инструмент сложный, чтобы хорошо его освоить, уйдет много времени, кроме того, они сами по себе не создают за вас изображения. Чтобы сделать рисунок, вам нужны минимальные художественные знания, т.е. вы должны представлять, что такое перспектива, светотень, как создавать иллюзию объема и т.д.
О том, как научиться работать с графическими редакторами и о художественных средствах мы поговорим в других статьях. А эта будет посвящена обзору графических редакторов, какие они бывают, чем отличаются, а также другим вопросам, связанным с ними и обработкой изображений в компьютере.
Обычно, когда мы создаем оформление нашего сайта, то используем уже готовые изображения: фотографии, картины, рисунки, текстуры. А если воспользоваться графическим редактором то можно из нескольких разных фотографий создать необычный коллаж, который потом сможем использовать при оформлении нашего сайта.
Из данного примера видно как из одной фотографии и фрагмента картины художника-фантаста можно получить третье, совершенно отличное от двух предыдущих, изображение дамы-воительницы. Изображения, которые можно использовать для создания чего-то своего нового, есть в Интернете, на дисках в компьютерных магазинах, а также можно отсканировать свои фотографии, рисунки и использовать их.
Какие бывают графические редакторы, и как представляется графика в компьютере.
Графические редакторы, бывают двух типов: растровые и векторные, по тому, как они представляют объекты (изображения). Растровые редакторы представляют изображение в виде множества точек, это хорошо видно, если мы увеличим фотографию нашей дамы-воительницы, посмотрите, как выглядит ее глаз при многократном увеличении:
Минимальная неделимая точка в растровом изображении называется пиксель. Все изображения, которые вводятся в компьютер при помощи сканирования – растровые.
Самый популярный растровый графический редактор - Adobe Photoshop. Этот редактор многофункционален и по этому используется во всех дизайнерских студиях и конторах. Если кто-то захочет посвятить себя профессиям рекламный или веб-дизайн, то знание Adobe Photoshop просто необходимо. Для начинающих и любителей можно посоветовать для начала следующие растровые графические редакторы: Image Styler или Live Motion. Векторные графические редакторы представляют изображение в виде отрезков прямых, векторов. Вектор – направленный отрезок, то есть отрезок, у которого указаны начало (называемое также точкой приложения вектора) и конец. Для наглядности, посмотрим при большом приближении меч, в руке у дамы, который нарисован в векторном редакторе:
Изображения, сделанные в векторных редакторах, можно открыть и в растровом редакторе, в этом случае, оно будет восприниматься, как растровое. А вот растровое изображение, открытое в векторном редакторе, не станет само по себе векторным, придется его либо обрисовывать самим, чтобы получить нормальное векторное изображение, либо перевести в кривые при помощи специальных программ (например, Stream Line).
Один из популярных векторных графических редакторов Adobe Illustrator. Многофункционален. Используется во многих дизайнерских студиях и конторах. Программа конкурент - CorelDraw.
Пожалуй, и все, на этом наша статья закончена. Теперь можно смело приступать к изучению работы с графическими редакторами, в этом вам помогут статьи на нашем сайте, также вы можете изучить статьи по этой теме на других сайтах. И все-таки лучше всего приобрести в магазине не только диск с программой, но и книгу с упражнениями, выполняя которые, будет легче освоить графические редакторы.
Конечно же вы попадали в такую ситуацию, когда приложение, разработанное вами ранее, могло быть снова использовано в рамках другого проекта. Вначале вы конечно же подумали, что это не создаст никаких проблем. Всего-то необходимо скопировать код из одного каталога в другой! Со временем вы осознали, что проекты могут различаться между собой различными параметрами, пусть даже самыми незначительными. Например, это может быть e-mail адрес на который отсылаются сообщения. В таком случае вам ничего не остается, как открыть множество файлов в редакторе и изменить их содержимое, вставляя нужный e-mail при помощи функции найти/заменить. Эта статья расскажет вам о том, как можно избавить себя от подобной работы, а так же порекомендует ряд дополнительных средств для создания и чтения конфигурационных файлов.
Повторное использование кода
Компьютер был изобретен для того, чтобы избавить человека от лишней работы. Развитие компьютерных технологий привело к тому, что человек стал стремиться все меньше времени проводить за компьютером. Допустим, вы программист. Не будь компьютера, вы бы остались без работы. Но в то же время вы стараетесь с помощью компьютера упростить свою ежедневную работы, с этой целью вы используете, например, функцию автозавершения кода в редакторе. Мы хотим подвести вас к той мысли, что код созданный вами, должен быть организован так, чтобы работы по его модификации были сведены к минимуму. Чаще всего это удается, когда вы создаете код, автоматизирующий рутинные операции, такие как создание и прорисовка формы, а так же отправка e-mail. Однако не стоит забывать, что функции для выполнения рутинных операций никогда не бывают на 100% идентичными в различных приложениях. Один формуляр не похож на другой, а сообщения электронной почты предназначены разным адресатам. Однако логика на уровне приложения остается прежней, функции различаются между собой только некоторыми параметрами. Таким образом, вы должны ясно представлять свою цель – разработать код, параметры которого можно было бы определять извне.
Модульная организация
Для решения этой задачи, планируя структуру приложения, вы должны позаботиться о модульности. То есть вам необходимо поместить часто используемые функции или классы в отдельный файл, который будет подключаться через require_once. В этом случае файлы приложения не будут наполнены избыточным кодом. Допустим, вы часто осуществляете запись в лог-файл. В таком случае было бы неплохо код, выполняющий эту операцию, заключить в рамки класса или функции. Будет еще лучше, если вы воспользуетесь уже готовым классом, взятым из какой-нибудь библиотеки исходных кодов, например PEAR.
Параметры процедурального кода
После того, как вы проанализировали код, выделили повторяющиеся фрагменты, распределили их по классам и функциям, необходимо подумать о выделении необходимых параметров, значения которых будут устанавливаться извне. Если речь идет о процедуральном коде, самым простым решением является использование глобальных переменных, которые необходимо определить в отдельном файле. Это позволит в дальнейшем без проблем изменять их значения.
Листинг 1 демонстрирует функцию, которая занимается отправкой e-mail. В ее теле содержится только одна php-функция - mail(). Таким образом, мы избавляемся от необходимости каждый раз указывать получателя при отправке сообщения. Следующая переменная, которую мы определяем, обозначает префикс, предшествующий теме сообщения. Конфигурационный файл, подключаемый через require_once, мог бы выглядеть следующим образом.
Listing 1
Есть способ лучше
Даже если рассмотренный выше способ и является действенным, однако это не самое лучшее решение. По мере того как код вашего приложения будет усложняться, вырастет и число опций, тогда могут возникнуть следующие проблемы:
Глобальные переменные, которые мы используем, могут породить конфликты в пространстве имен.
В том случае, если конфигурационные файлы редактируются не программистом, а дилетантом, в системе могут возникнуть синтаксические ошибки, например из-за незакрытых кавычек.
Для того, чтобы получить доступ к различным переменным, необходимо обращаться к массиву $_GLOBALS.
Вместо php-модулей существуют другие форматы, которые могут быть легко поняты и изменены дилетантами, а так же php-скриптами. Мы имеем в виду два формата: этого широко используемые операционной системой Windows ini-файлы, а так же формат XML.
PHP уже содержит функцию parse_ini_file(), которая без проблем читает ini-файлы. Такой файл имеет очень простую структуру. Каждой опции может быть присвоено только одно значение, а в качестве оператора присваивания используется знак равенства. Конфигурационный файл из предыдущего примера выглядел бы следующим образом в ini-формате.
После считывания ini-файла, имя которого передается в качестве параметра функции parse_ini_file(), мы получаем ассоциативный массив, имеющий вид:
В листинге 2 находится функция отправки почты, основанная на ini-файлах:
Listing 2
Если вы уже прочитали документацию по функции parse_ini_file(), вы кончено же заметили, что она может принимать и второй параметр. Он необходим, если вы хотите разделить ini-файл на несколько разделов или секций. Предположим, вам необходимо сохранить несколько настроек электронной почты. Тогда ini-файл будет выглядеть следующим образом:
"
Если вы при вызове parse_ini_file() передаете true в качестве второго параметра, в этом случае php будет искать в файле секции, а затем вернет многомерный массив, в котором каждой секции (errors и contact) будет соответствовать определенный набор значений:
Особые значения в ini-файлах
При использовании ini-файлов вы должны иметь в виду, что некоторые особые значения могут быть представлены строками. Допустим, вы определяете значение опции как true или yes (без кавычек), в таком случае они автоматически конвертируются в число 1, а false или no – в пустую строку. К сожалению, при этом не генерируется никакой ошибки. Поэтому не пытайтесь использовать no для сокращенного обозначения Норвегии.
Listing 3
Безопасность
Вы должны понимать то, что если конфигурационный файл используется для хранения важных данных, например паролей, необходимо позаботиться о том, чтобы содержимое такого файла не попало в web-браузер. Простейший выход из положения заключается в том, чтобы хранить конфигурационные файлы вне корневой директории сайта, например здесь: /etc/myApp/config
Если этого сделать нельзя, в таком случае можно изменить расширение файла. Для конфигурационного файла в формате модуля php необходимо всегда выбирать расширение .php. В этом случае сервер проанализирует php-файл, а пользователь увидит пустую страницу. С ini-файлами такое не пройдет, однако сервер Apache предоставляет возможность защитить данные. Просто поместите в каталог, где хранятся ini файл с именем .htaccess В него нужно поместить следующие строки:
Теперь сервер перестанет выдавать файлы с расширением ini, а опции приложения будут скрыты от пользователей.
Другие средства
Кончено же вы не являетесь единственным разработчиком, который сталкивается с проблемой обеспечения гибкости настроек веб-приложения. Поэтому некоторые программисты уже разработали библиотеки классов, которые переводят работу с конфигурационными файлами на абстрактный уровень, а так же упрощают запись и чтение различных форматов конфигурационных файлов.
PEAR::Config
Одним из классов, который может пригодится при чтении и записи конфигурационных файлов является PEAR::Config [3]. Как и все классы PEAR, PEAR::Config инсталлируется при помощи PEAR-Installer по команде
Этот класс является многоформатным, поскольку работает с конфигурационными файлами в форматах XMIL, ini, Apach-Style (гибрид XML и ini), а также php-массивами. Достоинством данного класса является то, что API для взаимодействия со всеми форматами одинаков. Т.е. логика работы с конфигурационными файлами в формате XML ничем не отличается от логики работы с ini-файлами. Вследствие этого необходимо, чтобы все форматы имели одинаковую структуру. Конфигурационные файлы, с которыми работает PEAR::Config, состоят, как и ini-файлы из секций.
Изменим снова наш пример. Сначала мы создаем объект Config, а затем вызываем его метод parseConfig(). Поскольку метод позволяет считывать различные форматы файлов, при вызове его необходимо передавать параметр, уточняющий формат. Для конфигурационных файлов в формате ini в качестве такого параметра используется строка iniFile. После считывания файла, мы не получаем опции в виде массива, вместо этого создается объект-контейнер, который дает доступ ко всем настройкам. Хотя во многих случаях бывает желательно получить опции в форме массива. Для этого используется метод toArray(). Листинг 4 демонстрирует считывание ini-файла:
Listing 4
С первого взгляда это может показаться несколько запутанным. Однако преимущество данного подхода заключается в том, что один и тот же метод используется для чтения всех форматов файлов, поддерживаемых PEAR::Config. Измененные опции могут быть также сохранены в любом формате:
Листинг 5 содержит код, где серия опций помещается в массив, который затем сохраняется в формате XML. Если вы хотите побольше узнать о PEAR::Config необходимую информацию вы сможете найти в документации по PEAR[5] или в DevShed-Tutorial [6].
Listing 5
patConfiguration
Альтернативным классом для работы с конфигурационными файлами является patConfiguration[7], однако он предназначен исключительно для работы с файлами в формате XML. После скачивания архива, его необходимо распаковать. Сам класс находится в директории include. patConfiguration предварительно определяет Tag-Set, который затем наполняется данными. К тому же этот класс предоставляет возможность указать тип опции: целое число, число с плавающей точкой, булевское значение. Типичный конфигурационный файл, созданный patConfiguration, имеет следующую структуру:
После создания объекта класса, может быть вызван метод parseConfigFile(). Доступ к опциям осуществляется через getConfigValue(). В качестве параметра этот метод может принимать путь к нужной опции. Вернемся к нашему примеру. Допустим, мы хотим получить e-mail адрес, на который высылается сообщение об ошибке. В этом случае используется путь errors.email. Если путь не указан, тогда все параметры передаются в массив. Листинг 6 демонстрирует код, который можно использовать для считывания файлов.
patConfiguration 2.0.0
В данный момент многоформатная версия patConfiguration находится в стадии разработки. Возможно, при публикации статьи эта версия уже станет доступной. Впрочем, самую новую версию для разработчиков вы можете скачать с сайта snaps.php-tools.net/downloaden.
В этом примере вы уже заметили, что внутри тега указывается тип значения. Названия типов идентичны тем, что используются в php-функции settype(). Если тип не указан, тогда значение интерпретируется как строка. Для часто используемых опций можно определить отдельный тег.
Наряду с функцией getConfigValue, существует функция setConfigValue(), с помощью которой можно изменить значение опции. Затем конфигурационный файл может быть заново записан с помощью writeConfigFile() (см листинг 7).
patConfiguration предлагает также серию дополнительных возможностей. Например, наряду с тегами, существует возможность определять атрибуты и пространства имен (Namespace), а к тегу можно привязать внешний файл, таким образом, опции будут распределены по нескольким файлам. Кроме этого patConfiguration включает систему кэширования, благодаря которой пропадает необходимость в многократном считывании конфигурационного файла.
Дополнительную информацию вы сможете найти на PHP Application Tools-Homepage и в patConfiguration-Tutorial на DevShed [8].
Listing 7
Заключение
Забота о гибкости настроек приложения может сберечь много времени, особенно если его компоненты предполагается использовать в других проектах. Вы потратите еще меньше времени, если доверите работу с конфигурационными файлами одному из готовых классов. Выбор между PEAR::Config и patConfiguration зависит от задачи. Преимуществом PEAR::Config является поддержка различных форматов конфигурационных файлов, в то время как patConfiguration прекрасно работает с XML, так же предоставляет ряд дополнительных возможностей. Однако с появлением версии 2.0.0 этот пакет будет иметь одинаковый API для считывания ini и wddx файлов. PHP-массив поддерживаются уже в текущей версии.
Всё что вы когда-либо хотели знать про mysql, php и кодировки, но боялись спросить! Почему кириллица на сайте отображается вопросами? Как правильно настроить сервер mysql для работы с кириллицей? Как поменять кодировку в mysql? Как изменить кодировку в скриптах php? Какую выбрать кодировку? Как сконвертировать базу данных из одной кодировки в другую? Эти и многие подобные вопросы с завидным упорством снова и снова поднимаются на различных форумах уже который год. В этом посте я постарался рассказать что нужно делать чтобы такие проблемы не возникали и дать наиболее эффективные советы на тот случай если они все-таки возникнут.
Mysql, php и кодировки. Источник проблем.
Проблемы с кодировками в Mysql обусловлены историей создания этой программы. Так как разрабатывали mysql - европейцы - для них было естественно выбрать в качестве основной кодировки более удобную для себя latin1. Странно, но и по сей день большинство инсталляций Mysql по умолчанию работают с этой кодировкой что и создает для пользователей кириллицы проблемы с добавлением в базу данных строк на русском и украинском языках - в latin1 эти символы просто отсутствуют.
Поэтому первое что нужно сделать при возникновении проблем с кодировками в mysql - нужно проверить какая кодировка является для данной инсталляции mysql основной. Проверить это можно несколькими способами.
Настройка сервера mysql для нужной кодировки.
* Если вы админ сервера или вы самостоятельно настраиваете собственную mysql на рабочей машине.
Откройте файл конфигурации mysql.ini (/etc/mysql.cnf для os linux) и найдите такие строки.
Вместо “название_кодировки” нужно подставить название той кодировки, которую вы будете использовать. Для текстов на русском и украинском языках можно использовать utf8 или cp1251 (обратите внимание - названия кодировок в mysql пишутся без обычного дефиса!!!). Но я советовал бы использовать только utf8 - так вы себе сэкономите в будущем немало нервов.
Если такие строки в файле конфигурации отсутствуют, то это означает что база данных использует по умолчанию ту кодировку, которая была задана при компиляции. Добавьте в конфиг нужные вам настройки кодировок (примеры ниже) и перезапустите mysql.
Если у вас возникли проблемы с кодировкой на хостинге, где вы не имеете прав администратора, то проверить настройки кодировки для mysql вы сможете другим способом: установите соединение с mysql (при помощи консольной команды mysql или phpmyadmin - как вам удобнее) и выполните такой sql-запрос: show variables like ‘char%’. Этот запрос покажет вам значения переменных mysql, которые имеют отношение к кодировкам. Скорее всего, вы увидите что-то вроде такого
Я специально привел выше пример НЕПРАВИЛЬНО НАСТРОЕННОГО СЕРВЕРА!!! Обратите внимание - в нем используются в разных случаях три(!) разные кодировки. Начинающему веб-программисту в такой ситуации будет сложно добиться корректной работы скрипта. Старайтесь чтобы все переменные были настроены на работу с одной и той же кодировкой. Тогда 99% проблем которые обсуждаются на форумах у вас просто не возникнут. Тут даже не столь важно какую именно кодировку вы выберете - главное чтобы она была везде одинаковой. Но все-таки старайтесь указывать в настройках ту кодировку, которую действительно будете использовать для хранения данных.
Итак, удачный вариант - это если команда show variables like ‘char%’ из абзаца выше покажет вам список одинаковых кодировок для каждой из переменных и еще лучше будет если эта кодировка совпадет с той которую используете вы.
Если же кодировка mysql отличается от вашей - не спешите расстраиваться. Изменить любую из этих переменных вы можете либо глобально, для всех правкой конфигов (если вы администратор сервера), либо только для себя - sql-запросом set character_set_database=utf8 (если вы пользователь). Такой запрос должен будет выполняться из вашего php скрипта сразу после установки соединения с сервером mysql. Ниже пример для установки кодировки utf8 из php скрипта.
Что касается character_set_database - постарайтесь сразу создать базу данных в нужной кодировке (как вариант - отправьте такую просьбу в техподдержку хостинга), тогда вы избежите по крайней мере одного лишнего запроса к mysql во время работы скрипта. Если удастся,то строчку с ‘character_set_database’ из приведенного выше кода можно будет удалить.
Примеры настроек сервера mysql для правильной работы с кодировками.
При правильно настроенном сервере делать запросы из скрипта для установки правильной кодировки уже будет не нужно.
Настройки для utf8
Проверка реальной кодировки в которой хранятся базы данных mysql.
В случае если вы все (и сервер, и php скрипт) настроили правильно, по инструкции выше, но русские буквы все равно не отображаются - проверьте действительно ли ваши строки сохранены в той кодировке, которую вы указали в настройках!!!
Простой способ проверки - сделайте дамп базы данных в sql-формате и откройте его в текстовом редакторе. Sql-формат - это обычный текст. Если ваша база данных mysql в кодировке cp1251 - открывайте в Блокноте. Если utf8 - в любом редакторе с поддержкой Юникода. Пролистайте файл и убедитесь что все надписи с кириллицей нормально читаются и что sql-команды create table и create database, которые встречаются в дампе содержат правильные названия кодировки mysql (той кодировки, которая вами была указана в настройках сервера или в запросах из php-скриптов.
Если кодировка не подходит - сделайте бекап базы на всякий случай, перекодируйте sql-дамп в любом текстовом перекодировщике, замените названия кодировок в файле на правильные и заливайте полученный файл на сервер mysql. Теперь с кодировками все должно быть в порядке.
Те, кто устанавливают в свой компьютер источники бесперебойного питания, надеются повысить стабильность работы своего электронного монстра, а заодно и продлить ему жизнь за счёт оберегания его от скачков напряжения и работы при ненормальном режиме электроснабжения потребителей. Проще говоря, сегодня установка ИБП является синонимом повышения надёжности и никто не сомневается в том, что UPS принесёт пользу любому компьютеру. В этой маленькой статье я расскажу вам, что это не так, и прежде чем покупать источник бесперебойного питания, надо хорошо подумать, потому что он может не только не добавить стабильности вашей системе, но и наоборот - сделать работу за компьютером невозможной.
Скажу честно: я никогда не считал источник бесперебойного питания необходимой частью компьютера, а потому и не стал бы покупать его, даже если бы и имелись лишние деньги. В питании компьютера я всегда был уверен, как уверен в этом и сейчас. В моём доме напряжение практически всегда составляет 230 В, иногда поднимаясь, или опускаясь. Бывает, что напряжение скачет, это видно по миганию лампочек накаливания, или по стрелке подключённого к розетке вольтметра. Всё это никогда не отражалось ни на работе монитора, ни на работе компьютера, подключенных в розетку, без всевозможных фильтров типа "пилот", и даже без заземления. Конечно, иногда если коснуться корпуса компьютера и батареи, можно почувствовать, как через тебя проходит небольшой ток, но это не смертельно и на работу компьютера пока что никак не повлияло.
Однажды в розетке, питающей компьютер с монитором, напряжение упало почти в два раза - вольт до 120. Дело было днём, поэтому свет в комнате не горел, и определить, что упало напряжение, я смог только по замедлившему ход напольному вентилятору. Его обороты сильно упали, а когда я его выключил, а затем попытался включить, пропеллер остался неподвижен. Компьютер всё это время работал нормально. Прошло несколько минут и я его выключил. Затем включил снова, а он не включается. Тут-то я и понял, что проблема в напряжении. На щитке отключил автоматы, включил заново и напряжение в линии снова составило 230 Вольт, в чём я убедился при помощи вольтметра. Дело было в неисправности щитка, но это так, к слову. Теперь я знаю, что скачки и провалы напряжения, которыми нас так пугают производители фильтров и источников бесперебойного питания, китайскому 250 Ваттному блоку питания не страшны, ровно как и монитору LG Flatron, который тоже сделан не в Штатах. Наверное, поэтому ставить что-то защищающее компьютер по питанию домой я не хотел. Но вот недавно, во время написания очередного обзора в домеотключили электричество и тут же, где-то через секунду включили. Компьютер, естественно, этого не вынес и та часть обзора, которую я не успел сохранить, канула в лету. На личном опыте я знаю, что UPS спас бы меня и я твёрдо решился установить его в компьютер.
Какой фирмы я взял UPS, говорить не буду. Потому что никаких претензий к источнику питания я не имею, и всё, сказанное дальше будет справедливо для подавляющего большинства ИБП. В общем, компьютер был подключен к этому устройству, помогающему мне бороться с недостатками нашего электроснабжения. "Первые ласточки" появились через несколько часов после начала работы компьютера. Дело в том, что UPS действительно защищает от скачков напряжения, но делает это не выравниванием напряжения за счёт регулирования трансформатора, а за счёт переключения в Backup Mode, то есть питания компьютера от аккумуляторов. Естественно, такой способ намного дешевле, а стабилизаторы напряжения в недорогих ИБП не применяются. Дело в том, что когда источник бесперебойного питания почувствовал скачок напряжения, то он переключает компьютер в питание от батареек на некоторое время. Обычно, это несколько секунд. По истечение этого срока, если скачков напряжения, или других аномалий не было, компьютер переключается обратно, на питание от сети. В разных моделях UPS чувствительность разная. Некоторые допускают отклонение напряжения в 10 процентов, другие - в 15. Чувствительность может не совпадать с заявленной, хотя для проверки этого придётся воспользоваться измерительными приборами. Ну да разговор не об этом. Через несколько часов работы в сети начались незначительные скачки и провалы напряжения. Свет не моргал, а вот ИБП переключил компьютер в Backup режим.
Первый период запитки от аккумуляторов длился недолго - около тридцати секунд. После этого датчики источника бесперебойного питания определили, что напряжение в розетке полностью соответствует норме, и компьютер был переключён на питание от розетки, а аккумуляторные батареи стали заряжаться, восполняя частичный разряд. Прошёл час и наступило тёмное время суток, ночь. Ночью число потребителей электроэнергии значительно падает, а нагрузка на сеть сокращается за счёт прекращения работы предприятий, электротранспорта, да и обычные потребители, если они не сидят в интернете, или не работают в ночную смену, просто спят. Поэтому ночью напряжение в розетке чуть повышается. А это значит, что оно уже подходит к тому порогу, при котором источник бесперебойного питания переводит компьютер в работу от батарей аккумуляторов. И уже небольшие скачки могут запросто заставить компьютер работать от запасённой ранее энергии. Вот тут-то и началось самое интересное. UPS снова запищал, сигнализируя о том, что компьютер работает от аккумуляторов. Но на этот раз период такой запитки длился дольше - около трёх минут. UPS был слабеньким, а потому мог продержать системный блок всего несколько минут. Честно говоря, стало немного страшно. Здесь я поясню: ночью очень удобно скачивать различные большие файлы из сети, особенно по обычному модему, учитывая, что качество аналоговых линий хорошо возрастает. Тут как раз подвернулся файл размером с десяток-другой мегабайт на сервере, не поддерживающем докачку (есть ещё такие). Понятное дело, что отключение компьютера заставило бы меня заново загружать систему, устанавливать связь с провайдером и качать файл с начала. Последнее меня не пугало, так как скачено было всего процентов 10.
Шло время. Аккумуляторы источника бесперебойного питания заряжались, а я работал в интернете. И снова знакомый щелчок реле и писк источника бесперебойного питания. Но теперь я понимаю, что батареи истощены и ИБП не протянет и трёх минут. Сохраняя все данные на диск, я смотрю на статус закачки файла. Почти 90 процентов. Очень бы не хотелось качать его снова. Конечно, можно было бы заставить компьютер перейти в Sleep Mode, но винчестер бы не отключился, процессор бы стал потреблять не намного меньше. И толку это бы не дало. Всё, что остаётся - это смотреть на экран, не двигать мышь и надеяться, что напряжение восстановится раньше, чем аккумуляторы сядут. Через минуту UPS извещает, что аккумуляторы близки к разряду. Это значит, что в запасе осталась от силы минута. Самое интересное, это то, что начинаешь понимать безысходность ситуации. Напряжение в розетке есть, и оно даже нормальное, чуть выше, возможно, чем нужно, но компьютер бы от него работал как по маслу. А этот "источник" считает по-другому. И сделать ничего нельзя. Принудительной запитки от розетки в нём не предусмотрено. Переткнуть компьютер в розетку нельзя. А вытаскивание вилки UPS из розетки, а потом подключение её обратно ничего не даёт. UPS не реагирует. Примерно через минуту экран монитора гаснет. Компьютер выключился. Конечно, файл придётся качать с самого начала. Нужно ли описывать мои чувства в этот момент?
Как видно, в моей ситуации установка источника бесперебойного питания не только не повысила стабильность системы, но и наоборот - понизила её. Днём иногда ИБП также болезненно реагирует на аномалии напряжения, переключаясь на аккумуляторы. Поэтому оставлять компьютер без присмотра становится страшно. Ведь я знаю, что блоку питания ATX такие скачки не страшны, а вот UPS - вещь чувствительная, и может неправильно понять наше напряжение. Два-три переключения длительностью в две минуты, и на третьем компьютер не протянет и тридцати секунд. Вам оно надо?
Что делать?
Поэтому, прежде чем покупать источник бесперебойного питания, подумайте, так ли часто у вас отключают электричество? Именно отключают, потому что скачков напряжения вы можете и не замечать. Благо, с частотой, которую не видно даже по первому признаку - морганию света, у нас в России пока что порядок. Если свет отключают редко, прежде чем брать источник бесперебойного питания присмотритесь к напряжению. Не мигают ли лампы накаливания? Можете попросить UPS на некоторое время у друзей, живущих в другом районе. В крайнем случае, договоритесь с продавцом о возврате денег сроком на две недели. Конечно, можно найти UPS со стабилизатором напряжения, который будет стоить дороже. Можно подключить и внешний стабилизатор напряжения. Но есть и другой выход.
В источниках бесперебойного питания предусмотрена регулировка чувствительности. С помощью специальных резисторов можно выбрать нижнее и верхнее значения напряжения, при которых UPS будет срабатывать и переводить компьютер на питание от батарей. Подняв верхний предел Вольт на 10-20, и опустив нижний на столько же, можно добиться того, что ИБП не будет впустую реагировать на незначительные скачки. Лишние 10-20 Вольт компьютеру не повредят, а вот сделать вашу жизнь спокойнее смогут. Обычно, такую операцию над источниками бесперебойного питания проводят те, кто их продаёт. Вполне возможно, что покупая новый UPS, вы уже берёте себе настроенный под наши линии блок, характеристики которого отличаются от заявленных, потому что в сервис-центре фирмы-продавца над этим UPS-ом уже поработали. В случае, если вы берёте ИБП для запитки очень чувствительной к перемене напряжения электроники, вам нужно обязательно узнать, соответствует ли источник заявленным данным. Обычно, если сказать, что в случае, если что не так, то продавец будет нести ответственность за всё, они сами признаются, ковырялись в нём, или нет. Ну а напоследок хочется пожелать вам надёжного электроснабжения и качественных UPS-ов.