Словарь Веб-Мастера (стр.1)

1
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%

О том, как делаются баннеры

2
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%

Анимация в Adobe Photoshop CS3

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

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

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

Анимированная кнопка, созданная в Adobe Photoshop CS3

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

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

Внимание!
У некоторых пользователей, при создании анимации, возникают одни и те же проблемы. Не стоит плодить одинаковые вопросы в комментариях. Скорее всего, вы найдете ответы в соответствующей теме.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Popularity: 1%

Знаете, а у Вас замечательный сайт!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Popularity: 1%

О веб-дизайне и шрифтах

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Popularity: 1%


<<<12345678>>>


© 2007—2012 дизайнер Найкрис Кроули
Женские йога часы - купить часы наручные женские. Скупка и продажа часов.