23.08.08 в рубрике Улучшить Блог

A

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

Анимация — один из способов представления движущихся изображений в сети Интернет.

Аплоад (Upload) — процесс загрузки файлов на удаленный компьютер.

Аплет — независимое приложение, написанное на языке Java и предназначенное для включения его в html-документ в качестве элемента web-страницы.

Атрибут тега — параметр, соответствующий каждому конкретному тегу.

Б

Баннер — рекламное изображение фиксированного размера, как правило, содержащее анимацию, которое выполняет роль гиперссылки на тот или иной ресурс Интернета.

Баннерная сеть, служба баннерного обмена — специализированный сервер Интернета, рекламирующий web-ресурс пользователя в обмен на размещение им рекламы других участников сети.

Браузер — специальная клиентская программа, предназначенная для просмотра содержимого web-узлов и отображения документов HTML. В броузеры встроен транслятор языка разметки гипертекста, компилирующий html-код в процессе открытия web-страницы.

В

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

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

Г

Генеральная общедоступная лицензия (the General Public License, GNU) — лицензия, по которой в Интернете распространяется практически все бесплатное программное обеспечение.

Гиперссылка (Hyperlink) — базовый функциональный элемент html-документов, представляющий собой реализацию динамической связи какого-либо объекта данной web-страницы с контекстным содержанием другого документа или файловым объектом.

Гостевая книга — раздел web-сайта, снабженный специальной интерактивной формой, с помощью которой посетители данного ресурса могут оставить свои пожелания и предложения разработчикам или владельцам ресурса. Раньше были хорошим инструментом для seo оптимизации

Д

Динамический дизайн — метод компоновки сайта, при котором его элементы изменяют свое положение в зависимости от экранных настроек пользователя.

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

Домен — логический уровень Интернета, то есть группа сетевых ресурсов, имеющая собственное имя и управляемая своей сетевой станцией.

И

Идентификатор — программный элемент каскадных таблиц стилей, позволяющий назначать различный набор свойств одним и тем же физическим объектам HTML без использования классов

ИМХО — In my humble opinion — по моему скромному мнению.

Индексация — процесс включения ссылки на какой-либо ресурс Интернета в базу данных поисковой машины.

Popularity: 1%

20.08.08 в рубрике Дизайнерские Штучки

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

Так вот...

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

Казалось бы, прописные истины, знакомы всем и каждому. В чем же подвох и ради чего я развел тут демагогию?

Дело в том, что многие дизайнеры игнорируют эти постулаты. Такое впечатление, что им больше некуда выплеснуть свою креативность и они разошлись на всю катушку. Не стоит забывать, что баннер — это вид рекламы и ничего больше.

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

Вот судите по себе, как часто Вы обращаете внимание на баннер и досматриваете его анимацию до конца? Только в том случае, если она заинтересовала и длится в пределах 5-8 секунд. А будете Вы ждать, чем закончится ролик длиною в 15-20 секунд, где предложение делается на последней секунде? Думаю, что нет.

Мне кажется, что говорить о том, почему анимированные баннеры эффективнее статических, смысла нет. Хотя, грамотная статика может быть куда эффективнее бездарной анимации.

Сейчас gif-анимация сдает позиции, в широкое потребление входят баннеры на основе flash. Такие баннеры визуально лучше выглядят и гораздо меньше весят. Но если Вы только начали заниматься созданием баннеров, я рекомендую делать первые варианты в формате gif. Сейчас объясню, почему.

Эффективность баннера во многом зависит от его веса, а значит и скорости загрузки. Определенных стандартов на его вес не существует, но нужно стремиться, дабы он не превышал 25Кб. В идеале — чем меньше, тем лучше. Чаще всего — 15-18Кб.

Так вот, если использовать flash, а не gif, то вес такого баннера будет значительно меньше, а значит, появится соблазн добавить больше «наворотов» на оставшееся место. При создании gif-анимации задумываешься о целесообразности использования каждого кадра. Такой подход поможет Вам выработать чувство меры, а с ним вкус и грамотность.

Вот для примера мой баннер

Об эффективности судить рано. Посмотрим по результатам кликабельности, да и то, только в том случае, если он понравится Тоду, человеку, который устроил конкурс у себя на блоге. Для этого конкурса баннер и рисовался.

Не знаю почему, но мне захотелось сделать именно gif-анимацию. В рамки по весу я вложился, меньше 25Кб, в размеры тоже — 360×60 пикселей.

Хоть в размерах на баннеры тоже нет стандартов, меня несколько удивили те, что были предложены в конкурсе. Самые распространенные размеры — это 468×60, 100×100, 80×31 и 150×400 (300)

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

Я сделал только один баннер и это ошибка в принципе. Но я не собираюсь использовать его в рекламной кампании, а значит — мне хватит.

Уже сейчас я вижу все плюсы и минусы своей работы. Думаю, Вы тоже их заметите. Если нет, готов обсудить эту тему в комментариях.

Popularity: 1%

12.08.08 в рубрике Уроки Photoshop

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

Я покажу принцип создания анимации на примере простейшего баннера. Сразу хочу отметить, что в Photoshop’e анимацию можно создать только в формате gif, а его качество оставляет желать лучшего. Но не всегда, разумеется. В качестве примера приведу вот эти две картинки:

Они обе в формате gif, обе сделаны в одной и той же версии Photoshop. Кнопочка выглядит достаточно хорошо, а вот баннер не очень. Проблема в том, что я попытался нарисовать баннер, используя большое количество полутонов, которые gif попросту не поддерживает. Для того, чтобы сделать красивый анимированный баннер применяются flash-технологии или другие программы, вплоть до программ вконтакте. Но это другая история. И вообще, тема создания баннеров весьма обширна и требует отдельной публикации.

Я же не буду отвлекаться и вернусь к изначально поставленной задаче — расскажу, как делать анимацию в Adobe Photoshop CS3.

1. Я придумал изначальный «сюжет» анимации. Не знаю, почему я вдруг вспомнил фильм «Карты, деньги и два ствола», но коль это произошло, то, используя это название, и создадим анимацию. Она будет достаточно простой и состоять из трех кадров. А суть заключается в том, что будет меняться надпись и «подсвечиваться» одна из картинок. Когда надпись «карты», то и картинка с картами станет четче и т.д.

2. Теперь приступим к рисованию самого баннера. Откроем Photoshop и создадим новый файл размерами 468×60 — это стандартные размеры большого баннера.

3. Что и как рисовалось, я расписывать не буду по двум причинам.
Во-первых: я не придумывал тут ничего нового, а использовал старые, давно раскрытые приемы.
Во-вторых: у Вас все равно будут свои задумки, которые будут реализовываться совершенно по-другому (но, если вдруг кому-то что-то понадобится, то спрашивайте, расскажу, как и что делал).

4. Итак, у меня есть заготовка, элементы которой можно соединить в один слой, дабы потом не путаться. Они нас не интересуют, так как, по сути, являются фоном.

Считайте, что это сцена, по которой будут перемещаться наши актеры.

5. Теперь добавим три картинки, которые будут «подсвечиваться» в нужный момент. Я изменил Непрозрачность (Opacity) до 60% и добавил тень в стиле слоя (layer stile — drop shadow).

Обратите внимание, что три картинки — это разные актеры, у каждого своя независимая роль, а это значит, что каждая из них должна находиться на отдельном слое.

6. Следующее, что нужно сделать — это написать три слова: «карты», «деньги», «2 ствола». Каждое на отдельном слое. И разместить их аккуратно друг под другом, дабы, когда они будут меняться, не происходило скачков. Выглядеть это должно следующим образом

7. Все актеры на своих местах. Теперь нам нужно заставить их «поплясать». Для этого переключим Photoshop в режим «Video and Film». Осуществляется это при помощи кнопки «Workspace», которая находится в правом верхнем углу программы.

После этой операции внизу экрана появилась новая менюшка, которая имеет такой вид

Стрелочкой показана кнопочка, с помощью которой создается новый кадр анимации. Рядом, в виде урны, кнопка, которой эти кадры удаляются.

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

Для того, чтобы скрыть ненужные пока надписи-слои, необходимо «выколоть глазик», который находится напротив слоя.

Делается это просто — одним кликом правой клавишей мыши.

9. Все актеры расположены так, что у нас создался первый кадр анимации. Теперь создаем новый кадр. Отключаем надпись-слой «карты» и включаем «деньги». Ищем дубликат слоя с картинкой карт. Нам нужно скопировать ее стиль слоя и передать его картинке с деньгами. Для этого кликаем левой клавишей мыши по слою с картами. В выпавшем меню находим Копировать Стиль Слоя (Copy Layer Style) и передаем его слою с деньгами — такая же операция, только в выпавшем меню находим Вставить Стиль Слоя (Paste Layer Style). Отключаем слой с копией карт. Получаем следующий результат

10. Создаем новый (он же у нас и последний) кадр. Проделываем операцию, описанную в пункте 9, но на этот раз с актерами из труппы «2 ствола».

11. Чтобы посмотреть, что у нас получилось, нажмем на воспроизведение.

А кликнув, как указано на рисунке ниже, можно задать интервал показа кадра.

12. Вот наша анимация и готова. Осталось ее Сохранить для Веб (Save for Web), в формате gif и с гордостью заявить — Работа Выполнена!

Popularity: 1%

31.07.08 в рубрике Улучшить Блог

Думаете, я лукавлю? Аж ни разу. Сейчас я собираюсь поведать тайну, которая вызовет у скептиков ироническую улыбку. Но о них поговорим чуть ниже, а сейчас непосредственно тайна...

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

Нет, вы не должны в это верить или надеяться на такое восприятие со стороны посетителей. Ключевое слово именно уверены. Если вы действительно будете это чувствовать, то эта уверенность передастся и посетителям. Конечно, далеко не всем.

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

Было пару раз, когда мне присылали письма с обвинениями, что я ни черта не умею и все делаю неправильно. Эти слова не имели подтверждений, то есть мне не указали на ошибки. Признаюсь, было очень неприятно слышать такие слова, тем более, я в упор не мог понять, где я допускаю ошибки.

Раз я имел счастье заглянуть на сайт одного из таких «критиков». Он отдавал таким примитивизмом, что я сразу успокоился и понял: человек просто завидует моим достижениям. Вместо того, чтобы обратиться за помощью и спросить совета.

Еще один «критик», который мне хорошо запомнился, упрекнул меня в том, что я не имею права продавать свои услуги. Что, мол, такие новоявленные фрилансеры (приготовьтесь) отбивают клиентов и не дают работать настоящим профессионалам!

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

Так вот, такие недоброжелатели будут преследовать вас постоянно. И чем больших успехов вы добьетесь, тем больше их появится. Но научитесь не обращать на них внимания, ибо это далеко не критики, а неудачники-нытики. Критик всегда «обгадит» все, что только можно, но указывая пальцем на недочеты. А если хорошо попросить, то он расскажет не только о промахах, но и подскажет, как от них избавиться. Вот таких людей нужно любить и благодарить.

Мое личное убеждение: критика — двигатель прогресса. И когда кто-то оказывает мне честь провести грамотную критику, моей радости нет границ.

Безусловно, на месте стоять нельзя и необходимо постоянное развитие. Но даже на начальном этапе у вас замечательный сайт! И не важно, в чем она (замечательность) проявляется: дизайн, контент или идея, главное, что она есть. А она обязательно есть. И даже если вы об этом еще не знаете, то советую повнимательнее посмотреть на свой сайт — и она обязательно найдется. Гарантировано.

Это простая истина, которая проверена временем и уже неоднократно подтверждалась на практике.

На самом деле создание успешного сайта — задача не такая уж и сложная, главное знать небольшие секреты. Один из них вы только что узнали. А применять его или нет, решать только вам. Сайт, как и интерьер квартиры. Одним нравится, другим нет. В Уфе можно заказать дизайн квартиры, если что.

Popularity: 1%

19.03.08 в рубрике Улучшить Блог, Шрифты

Будем считать, что у Вас уже написан и отредактирован материал, настало время разместить его непосредственно на странице. И не как попало, а чтоб приятно глянуть было, а заодно, чтоб легко и удобно читалось!

Вроде никаких проблем, шрифтов в сети не сосчитать, выбирай любой. Но Вы прекрасно понимаете, можно сказать – нюхом чуете, что собака таки где-то зарыта. Точно, так оно и есть! А если интересно, я попытаюсь объяснить, где именно.

Дело в том, что применение HTML тега <FONT FACE=[мой_прекрасный_шрифт]> не подействует должным образом. Проблема в том, что у посетителя на компьютере может не оказаться такого шрифта и вместо текста он будет лицезреть невразумительную абракадабру.

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

Что делать, если по дизайнерской задумке необходимо использовать, к примеру, готический шрифт? Такого точно не отыщется на всех компьютерах, а в стандартном наборе нет ничего похожего. Из сложившейся ситуации можно выйти двумя известными мне способами.

Первый: использовать рисунки. То есть, весь текст, набранный необычным шрифтом, написать в графическом редакторе и выложить на странице в виде изображения. Но, согласитесь, это плохой выход. Рисунки грузятся гораздо дольше текста, да и редактировать информацию в таком виде очень неудобно. Такой способ можно применять для выделения заглавных букв. Нечто похожее можно увидеть в книгах, когда первая буква представляет целое художественное произведение, а остальные пишутся обычным шрифтом. Еще такой метод плох тем, что информацию, которая предоставлена на сайте в виде рисунка, смогут прочитать посетители, но не поисковые машины.

Второй способ: предложить посетителю скачать необходимый шрифт. Следовательно, Вы указываете в параметрах для текста свой_замечательный_шрифт, а следом что-то из стандартного, например Arial. А где-то на странице поместите уведомление, что для корректного отображения информации необходимо скачать шрифт. Таким образом, случайно зашедшие посетители смогут без труда ознакомиться с материалом, а постоянные клиенты скачают и установят себе необходимый шрифт. Но помните, что серферы очень ленивый народ, а следовательно, вероятность того, что они захотят ставить Ваш шрифт, очень мала. Для того, чтобы пойти на это, они должны быть неимоверно заинтересованы в Вашем сайте.

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

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

В оформлении используется выделение необходимых частей текста цветом, применением СТРОЧНЫХ символов, их курсивного и полужирного начертания, а также цветовое соотношение текста и фона.

Со всевозможными выделениями, думаю, все понятно, давайте немного подробнее рассмотрим явление цветового соотношения.

Когда требуется передать большой объем информации, следует использовать контрастирующие цвета. И лучше, чтобы цвет текста был темнее фона. Яркий цвет текста или фона, несомненно, привлечет внимание посетителя. Но нужно знать меру и не переборщить, с таким же успехом броскость и использование «кричащих» красок может его отпугнуть. Также следует отметить, что на ярком фоне тяжело читать, буквы будут теряться.

Можно пожертвовать удобочитаемостью, например, при изготовлении сайтов-плакатов, когда целью есть не передача информации, а просто привлечение внимания. Как, например, выглядят Планы эвакуации при пожаре">планы эвакуации при пожаре.

Думаю, теперь Вы без труда сможете передать информацию посетителям должным образом.

Автор: Найкрис Кроули.

При использовании материала ссылка на сайт обязательна

Popularity: 1%